/* /app — wallet sign-in, keys, balance, usage. Shell on the header edge (P0-5): brand x = 24 over the sidebar icons, H1 y = first .side-a */
.is-app .hdr-in{max-width:none}
.is-app .hdr-cta .btn-1{display:none}
.shell{padding-top:var(--hdr);min-height:100svh}
.state[hidden]{display:none!important}
.center-card{width:min(480px,calc(100% - 32px));min-height:196px;margin:min(18vh,calc(var(--s-16) * 2 + var(--s-8))) auto var(--s-16);padding:var(--s-8);border-radius:var(--r-in);background:var(--card);display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}
.center-card .h3{margin-top:var(--s-5)}
.center-card > .muted{margin:var(--s-2) 0 var(--s-6);font:var(--t-ui)}
.center-card .btn + .btn{margin-top:var(--sh-10)}
.center-card.ld{gap:var(--s-4)}
.center-card.ld .muted{margin:0}
.kmark-lg{width:56px;height:56px;color:var(--text);display:grid;place-items:center}
.kmark-lg svg{width:56px;height:56px}
.kmark-lg .kmc{width:56px;height:56px}
.kmark-lg{--km-fg:var(--text);--km-eye:var(--card)}
.kmark-md{width:40px;height:40px;border-radius:var(--r-pill);background:var(--k-field);color:var(--text);display:block}
.err-ic{width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--err-fg);background:color-mix(in srgb,var(--err) 14%,transparent)}
.err-ic svg{width:24px;height:24px}
.center{text-align:center;justify-content:center}
.small{font:var(--t-sm);margin:0}
.wait-t{color:var(--wait)}

/* wallet pill */
.wallet{position:relative}
.wallet-btn{height:var(--h-nav);display:inline-flex;align-items:center;gap:var(--s-2);padding:0 var(--s-3) 0 var(--sh-6);border-radius:var(--r-pill);background:var(--raise);font:var(--t-sm);transition:background-color var(--dur-1) var(--ease-std),transform var(--dur-1) var(--ease-std)}
.wallet-btn:hover{background:var(--ctl)}
.wallet-btn:active{transform:scale(.98)}
.wallet-ic{width:28px;height:28px;border-radius:var(--r-pill);background:var(--ctl);display:grid;place-items:center;overflow:hidden;flex:none}
/* W1-2: avatar from the address — 4 quadrants of 2 tool colours chosen by the address hash (no conic, no image) */
.wallet-ic.av{background:linear-gradient(var(--qa),var(--qa)) 0 0/50% 50% no-repeat,linear-gradient(var(--qb),var(--qb)) 100% 0/50% 50% no-repeat,linear-gradient(var(--qb),var(--qb)) 0 100%/50% 50% no-repeat,linear-gradient(var(--qa),var(--qa)) 100% 100%/50% 50% no-repeat}
.wallet-btn .mono{font:var(--t-code)}
/* W1-2: console header — Docs ↗, status dot (→ /status), wallet */
.hdr-cta .btn-nav .ext{width:12px;height:12px;color:var(--muted)}
.app-st{position:relative;width:var(--h-lg);height:var(--h-lg);display:grid;place-items:center;border-radius:var(--r-pill)}
.app-st i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--st,var(--muted));transition:transform var(--dur-1) var(--ease-std)}
.app-st:hover i{transform:scale(1.25)}
.app-st:active i{transform:scale(1)}
.app-st[hidden]{display:none}
.app-st-l{display:none}
@media (min-width:1024px){   /* F4-F12: the dot says what it is */
  .app-st{width:auto;display:inline-flex;align-items:center;gap:var(--s-2);padding:0 var(--s-3);font:var(--t-sm);font-weight:var(--fw-5);color:var(--text-2);transition:color var(--dur-1) var(--ease-std)}
  .app-st:hover{color:var(--text)}
  .app-st-l{display:inline}
}
/* W1-2: the console's footer line, left edge = the content column */
.app-ftr{margin-top:var(--s-16);padding-top:var(--s-6);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s-2);font:var(--t-xs);font-weight:var(--fw-4);color:var(--muted)}
.app-ftr p{margin:0;max-width:860px}
.app-ftr a{color:var(--text-2);transition:color var(--dur-1) var(--ease-std)}
.app-ftr a:hover{color:var(--text)}
.app-ftr a:active{color:var(--muted)}
.btn-md{height:var(--h-item);padding:0 var(--s-4);font:var(--t-ui);font-weight:var(--fw-5)}
.wallet-ic img{width:100%;height:100%;object-fit:cover}
.wallet-ic.lg{width:56px;height:56px}
.wallet .chev{width:12px;height:12px;color:var(--muted)}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:180px;padding:var(--s-1);border-radius:var(--r-md);background:var(--panel);box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;z-index:50}
.menu[hidden]{display:none}
.menu button{height:var(--h-item);padding:0 var(--s-3);border-radius:var(--r-sm);text-align:left;font:var(--t-ui);white-space:nowrap}
.menu button:hover{background:var(--raise);outline:0}
.menu button:focus-visible{background:var(--raise);outline:2px solid var(--focus);outline-offset:-2px}   /* V1-59 (X1-F9) */
.menu button.danger{color:var(--err-fg)}

/* shell */
.dash{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100svh - var(--hdr))}
.side{background:var(--card);border-right:1px solid var(--line);padding:var(--s-5) var(--s-3);display:flex;flex-direction:column;gap:var(--sh-2);position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr))}
.side-a{position:relative;flex:none;height:var(--h-item);display:flex;align-items:center;gap:var(--sh-10);padding:0 var(--s-3);border-radius:var(--r-sm);font:var(--t-ui);color:var(--text-2);text-align:left;width:100%}
.side-a svg{width:16px;height:16px;flex:none;color:var(--muted)}
.side-a:hover{background:var(--raise);color:var(--text)}
.side-a:active{background:var(--ctl);transform:scale(.98)}
.side-a[aria-current=page]{background:var(--ctl);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-fg)}   /* X1-N5 */
.side-a[aria-current=page] svg{color:var(--accent-fg)}
.side-a .ext{margin-left:auto;width:12px;height:12px;color:var(--muted)}
.content{min-width:0;display:flex;flex-direction:column;min-height:calc(100dvh - var(--hdr));padding:var(--s-5) var(--gut) var(--s-16) clamp(var(--s-8),4vw,var(--s-24))}   /* V1-15 (P2-F9): the content's right edge = the wallet's right edge */
@media (min-width:1728px){
  .content{width:100%;max-width:1440px;margin-inline:auto;padding-left:var(--s-8)}
  .is-app .hdr-in{padding-right:calc((100vw - 1660px) / 2 + var(--gut))}
}
.pane[hidden]{display:none}
#assetTabs .tab[aria-checked=true]{background:var(--ctl);color:var(--text)}   /* the ring only: Send from wallet is the one blue action of this card */
.content>.pane:not([hidden]){margin-bottom:var(--s-16)}
.content>.app-ftr{margin-top:auto}   /* G1 С4: the footer stands on the bottom edge of a short pane */
.pane-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--h-item);margin-bottom:var(--s-6)}
.pane-head .h3{margin:0;display:flex;align-items:center;min-height:var(--h-item)}
.pane-head{align-items:flex-start;gap:var(--s-3)}
@media (max-width:1023px){
  .dash{grid-template-columns:minmax(0,1fr);align-content:start}
  .side{position:sticky;top:var(--hdr);z-index:20;height:auto;flex-direction:row;padding:var(--s-2) var(--gut);border-right:0;border-bottom:1px solid var(--line);background:var(--bg);overflow-x:auto;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side-a{width:auto;border-radius:var(--r-pill);height:var(--h-tab)}
  .content{padding:var(--s-6) var(--gut) var(--s-16)}
}
@media (max-width:767px){.side-a::after{content:"";position:absolute;inset:calc(-1 * var(--sh-6)) 0}
  .side{overflow:visible;gap:var(--s-1)}
  .side-a{flex:1;justify-content:center;padding:0 var(--s-2);min-width:0}   /* W1-2: 4 tabs share the bar, nothing cut */
  .side-a .ext{margin-left:0}}

/* blocks, tables */
.block{border-radius:var(--r-in);background:var(--card);overflow:hidden}
.block.has-menu{overflow:visible}
.tbl{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font:var(--t-ui)}
.tbl th{height:var(--h-lg);padding:0 var(--s-4);text-align:left;font:var(--t-label);letter-spacing:var(--tr-caps);text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbl td{height:52px;padding:0 var(--s-4);border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
.tbl tr:last-child td{border-bottom:0}
.tbl .mono{font:var(--t-code)}
.tbl .num,.tbl td{font-variant-numeric:tabular-nums}
.tbl tbody tr{animation:rowin var(--dur-2) var(--ease-entry) backwards}   /* P2-F1: «both» kept a transform → every row its own stacking context, the ⋯ menu went under the next row */
.tbl tbody tr:has(.menu:not([hidden])){position:relative;z-index:3}
@keyframes rowin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.tbl .r{text-align:right}
.tbl td.first{font-weight:var(--fw-5)}
.tbl td.act{overflow:visible}
.keys-tbl th:nth-child(2){width:150px}.keys-tbl th:nth-child(3){width:128px}.keys-tbl th:nth-child(4){width:152px}.keys-tbl th:nth-child(5){width:96px}.keys-tbl th:nth-child(6){width:152px}.keys-tbl th:nth-child(3){text-align:right}.keys-tbl th:nth-child(7){width:56px}   /* the $KEYFO holder model: no «Daily limit» column (owner 07.11) */
.keys-tbl td.first{max-width:280px}
.keys-tbl td.mono{padding-top:var(--sh-2)}   /* W2-2: Geist Mono 13 sits 1 px higher than Geist 14 in a centred 52 px cell */
.usage-tbl th:nth-child(1){width:128px}.usage-tbl th:nth-child(2){width:18%}.usage-tbl th:nth-child(4){width:120px}.usage-tbl th:nth-child(5){width:120px}.usage-tbl th:nth-child(6){width:104px}.usage-tbl th:nth-child(7){width:128px}
.ust{display:grid;justify-items:start;gap:var(--sh-2);min-width:0}   /* V0-7: status in words, the machine code under it (mono, --muted) */
@media (min-width:768px){.ust .ucode{display:none}}   /* P2 R-M5: the code is in title; rows stay one line */
.ust .ucode{max-width:100%;font:var(--t-xs);font-family:var(--font-mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* W0-7: the number is the only in-flow content (baseline = its neighbours); the bar hangs under it out of flow */
/* V1-14 (P2-F6): «Spent today» on the right edge like its neighbours; a 56×4 bar under the number; ≥80 % --wait, at the limit --err-fg */
.spent{position:relative;display:inline-block;font-variant-numeric:tabular-nums}
.spent .bar{position:absolute;right:0;top:calc(100% + var(--sh-2));width:56px;height:4px;background:var(--ctl)}
.spent .bar i{background:var(--accent)}
.spent.near .bar i{background:var(--wait);border-right-color:var(--wait)}
.spent.full > span:first-child{color:var(--err-fg)}
.spent.full .bar i{background:var(--err-fg);border-right-color:var(--err-fg)}
.kcell{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.kcell:has(.lim-chip) .kname{max-width:100%}   /* P2 M-1 */
.keys-tbl .kname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcell:has(.lim-chip){flex-direction:column;align-items:flex-start;gap:var(--sh-2)}   /* P2 R-2: the name stays, the state sits under it */
.lim-chip{display:block;max-width:100%;font:var(--t-xs);color:var(--err-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:6px;border-radius:var(--r-pill);background:var(--ctl);overflow:hidden}
.bar i{display:block;height:100%;box-sizing:border-box;border-radius:var(--r-pill);border-right:2px solid var(--accent-fg);background:var(--accent);transition:width var(--dur-4) var(--ease-entry)}
.row-menu{position:relative;display:flex;justify-content:flex-end}
.dots-btn{position:relative;width:var(--h-item);height:var(--h-item);border-radius:var(--r-pill);display:grid;place-items:center;color:var(--muted)}
.dots-btn::after{content:"";position:absolute;inset:calc(-1 * var(--s-1))}
.dots-btn:hover,.dots-btn[aria-expanded=true]{background:var(--ctl);color:var(--text)}
.dots-btn:active{transform:scale(.98)}
.dots-btn svg{width:16px;height:16px}
.row-menu .menu{top:calc(100% + 4px)}
.keys-note{margin:var(--s-3) 0 0;font:var(--t-sm);color:var(--muted)}
.empty{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding:var(--s-6)}
.empty .muted{margin:var(--sh-2) 0 0;font:var(--t-ui)}
.empty[hidden]{display:none}
.empty-line{padding:var(--s-8) var(--s-4);margin:0;text-align:center;font:var(--t-ui)}
.tn{color:var(--c,var(--text));font-family:var(--font-mono)}
.mcell{display:flex;align-items:center;gap:var(--s-2);min-width:0;max-width:100%}
.mcell span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mcell .i,.mcell img{width:14px;height:14px;flex:none}
/* V1-15 (P2-F8): 768–1100 stays a table — the secondary columns go (keys: Created, Last used; usage: Key, Tokens out) */
@media (min-width:768px) and (max-width:1279px){
  .keys-tbl th:nth-child(2){width:128px}
  .lim-t{display:none}   /* P2 M-2: the time is in title */
  .keys-tbl th:nth-child(5),.keys-tbl td:nth-child(5),.keys-tbl th:nth-child(6),.keys-tbl td:nth-child(6){display:none}
  .usage-tbl th:nth-child(2),.usage-tbl td:nth-child(2),.usage-tbl th:nth-child(5),.usage-tbl td:nth-child(5){display:none}
  .usage-tbl th:nth-child(3){width:auto}
}
@media (max-width:767px){
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl{table-layout:auto}
  .tbl tr{position:relative;padding:var(--s-4);border-bottom:1px solid var(--line)}
  .tbl tr:last-child{border-bottom:0}
  .tbl td{height:auto;padding:var(--s-1) 0;border:0;white-space:normal;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);font:var(--t-sm);font-variant-numeric:tabular-nums}
  .tbl td::before{content:attr(data-l);color:var(--muted);flex:none}
  .tbl td.first{font:var(--t-ui);font-weight:var(--fw-5);padding-right:var(--s-12);max-width:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  .tbl td.first::before{content:none}
  .tbl td:has(.spent){align-items:baseline}
  .tbl td.act{position:absolute;top:var(--s-3);right:var(--s-2);width:auto;padding:0}
  .tbl td.act::before{content:none}
  .spent{display:inline-grid;justify-items:end;gap:var(--s-1);max-width:120px;text-align:right}
  .spent .bar{position:static}
  .empty{flex-direction:column;align-items:flex-start}
}

/* balance */
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.card{background:var(--card);border-radius:var(--r-in);padding:var(--s-6)}
.card-l{margin:0 0 var(--s-3);display:flex;align-items:center;gap:var(--s-2);font:var(--t-ui);font-weight:var(--fw-5);color:var(--muted)}
.big{margin:0;font:var(--t-h2);letter-spacing:var(--tr-tight);font-variant-numeric:tabular-nums}
.quota-n{margin:0 0 var(--s-3);font:var(--t-h2);letter-spacing:var(--tr-tight);font-variant-numeric:tabular-nums}
.quota-n .muted{font:var(--t-lead)}
.card .bar + .small{margin-top:var(--s-3)}
.topup{margin-top:var(--s-4)}
.topup-head{margin-bottom:var(--s-5)}
.topup-soon{display:flex;align-items:center;gap:var(--sh-10);font:var(--t-ui);color:var(--text-2)}
.topup-soon .tk{margin-right:calc(-1 * var(--s-1))}
.topup-closed{margin:var(--s-3) 0 0;font:var(--t-ui);color:var(--muted)}
.topup-wait{display:flex;align-items:center;gap:var(--s-3);height:var(--h-lg);color:var(--muted);font:var(--t-ui)}
.topup-row{display:flex;gap:var(--s-3);align-items:center;flex-wrap:wrap}
.amt{position:relative;flex:1;min-width:180px}
.amt .input{padding-right:var(--s-16);padding-left:var(--s-5)}
.amt-sym{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:var(--t-sm);color:var(--muted)}
.manual{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s-3)}
.addr-row{display:flex;align-items:center;gap:var(--sh-10);flex-wrap:wrap;padding:var(--s-2) var(--s-2) var(--s-2) var(--sh-14);border-radius:var(--r-md);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.addr{font:var(--t-code);word-break:break-all;flex:1;min-width:200px}
.warn{display:flex;gap:var(--sh-10);align-items:flex-start;margin:0;font:var(--t-sm);color:var(--text-2)}
.warn .chip{width:20px;justify-content:center;padding:0;flex:none}
.warn .chip svg{width:12px;height:12px}
.claim-row{display:flex;gap:var(--s-2)}
.claim-row input{flex:1 1 auto;min-width:0}   /* G1 С5: the whole 66-character hash is readable */
.claim-row .btn{flex:none}
.steps{list-style:none;margin:var(--s-5) 0 0;padding:var(--s-4);border-radius:var(--r-md);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:var(--s-3);font:var(--t-ui);min-height:124px}
.steps[hidden]{display:none}
.steps li{display:flex;align-items:center;gap:var(--s-3);height:24px}
.stp{width:20px;height:20px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--ctl);flex:none;display:grid;place-items:center}
.stp.done{background:var(--ok);box-shadow:none}
.stp.done::after{content:"";width:10px;height:10px;background:var(--text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E") center/contain no-repeat}
.stp.run{box-shadow:none;border:2px solid var(--line-ctl);border-top-color:var(--accent-fg);animation:spin var(--dur-spin) var(--ease-lin) infinite}
.stp.fail{background:var(--err);box-shadow:none}
.stp.fail::after{content:"";width:10px;height:10px;background:var(--text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 3l8 8M11 3 3 11'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M3 3l8 8M11 3 3 11'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:767px){.cards2{grid-template-columns:minmax(0,1fr)}.topup-row .btn{width:100%}.card{padding:var(--s-5)}.claim-row{flex-direction:column}}

/* usage */
.chart-card{margin-bottom:var(--s-4);padding:var(--s-5) var(--s-5) var(--s-3)}
.chart-w{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s-3)}
.chart-y{height:240px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font:var(--t-label);color:var(--muted);font-variant-numeric:tabular-nums}
.chart-y span{line-height:var(--lh-1)}
.chart-y span:first-child{transform:translateY(-50%)}.chart-y span:last-child{transform:translateY(50%)}   /* F4-F10: each number on its own line */
.chart{position:relative;height:240px;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));align-items:end;column-gap:var(--bar-gap,var(--sh-6));border-bottom:1px solid var(--line);background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat}
/* V1-13: a bar is a button the full height of the chart (hit zone), the column inside it; --muted bars (5.6:1), zero days --line, the selected day --text */
.chart .bar{height:100%;display:flex;align-items:flex-end;padding:0;background:none;border:0;border-radius:var(--r-xs) var(--r-xs) 0 0;min-width:0;cursor:pointer}
.chart .bar i{display:block;width:100%;max-width:56px;margin-inline:auto;height:2px;background:var(--muted);border-radius:var(--r-xs) var(--r-xs) 0 0;transform-origin:bottom;transition:background-color var(--dur-1) var(--ease-std)}
.chart.on .bar i{transition:height var(--dur-4) var(--ease-out),background-color var(--dur-1) var(--ease-std)}

.chart .bar i{background:var(--accent);border-right:0;border-top:1px solid var(--accent-fg)}   /* the fill alone is 2.2:1 on the card, the cap carries the value at 7.3:1 */
.chart .bar.zero i{background:var(--line);border-top:0}
.chart.has-sel .bar:not(.sel):not(.zero) i{background:var(--accent)}   /* P2 R-12: with a day selected the others step down, selected : other = 3.25:1 */
.chart .bar:hover i,.chart .bar.sel i{background:var(--accent-fg)}
.chart .bar:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.u-err{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin:0 0 var(--s-4);padding:var(--s-5);border-radius:var(--r-card);background:var(--card);color:var(--text-2);font:var(--t-ui)}
.u-err p{margin:0}
.chart-y{min-width:48px}
.chart-x{display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));column-gap:var(--bar-gap,var(--sh-6));font:var(--t-label);color:var(--muted);margin-top:var(--s-2)}
.chart-x span{justify-self:center;white-space:nowrap}   /* F4-F3: the same tracks as the bars, each date centred under its own bar */
/* W1-3 KPI row + filters */
.u-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-6);flex-wrap:wrap;margin-bottom:var(--s-2)}
.u-kpis{display:grid;grid-template-columns:repeat(3,auto);gap:var(--s-10)}
.kpi p{margin:0}
.kpi-l{font:var(--t-sm);color:var(--muted)}
.kpi-v{margin-top:var(--s-1);font:var(--t-h2);white-space:nowrap;letter-spacing:var(--tr-tight);font-variant-numeric:tabular-nums}
.u-filt{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.upill select{height:var(--h-tab);max-width:220px;padding:0 var(--s-8) 0 var(--sh-14);border:0;border-radius:var(--r-pill);background:var(--raise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 4 5 6.5 7.5 4' fill='none' stroke='%238a8f98' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") right var(--sh-10) center/10px no-repeat;color:var(--text-2);font:var(--t-sm);font-weight:var(--fw-5);appearance:none;text-overflow:ellipsis;transition:background-color var(--dur-1) var(--ease-std)}
.upill select:hover{background-color:var(--ctl);color:var(--text)}
.upill select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.useg{display:flex;gap:var(--sh-2);padding:var(--sh-2);border-radius:var(--r-pill);background:var(--raise)}
.useg button{position:relative;height:calc(var(--h-tab) - 4px);padding:0 var(--s-3);border-radius:var(--r-pill);font:var(--t-sm);font-weight:var(--fw-5);color:var(--text-2);transition:background-color var(--dur-1) var(--ease-std),color var(--dur-1) var(--ease-std)}
.useg button:hover{color:var(--text)}
.useg button:active{transform:scale(.98)}
.useg button[aria-pressed=true]{background:var(--ctl);color:var(--text);box-shadow:inset 0 0 0 1px var(--accent-fg)}   /* G3 С1 */
.u-scope{display:flex;align-items:center;gap:var(--s-2);min-height:var(--h-chip);margin:0 0 var(--s-4);font:var(--t-xs);font-weight:var(--fw-4);color:var(--muted)}
.ukind{width:14px;height:14px;flex:none;display:inline-grid;place-items:center}
.ukind.tool::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--c)}
@media (max-width:767px){
  .chart-w{padding-right:var(--s-2)}   /* the last date is centred under a thin bar: it needs air to the card edge */
  .u-kpis{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);width:100%}   /* t-h2 (30/36 on a phone): three numbers fit 343 px; t-num 36 did not */
  .useg button::after,.upill::after{content:"";position:absolute;inset:calc(-1 * var(--sh-6)) 0}
  .upill{position:relative}
}

/* modals */
.wlist{list-style:none;margin:var(--s-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--sh-6)}
.wlist a,.wlist button{width:100%;height:52px;display:flex;align-items:center;gap:var(--s-3);padding:0 var(--sh-14);border-radius:var(--r-md);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:var(--t-ui);text-align:left}
.wlist a:hover,.wlist button:hover{box-shadow:inset 0 0 0 1px var(--line-ctl);background:var(--panel)}
.wlist img{width:28px;height:28px;border-radius:var(--r-sm)}
.wlist .chip{margin-left:auto}
.wsign-ic{position:relative;width:72px;height:72px;margin:var(--s-2) auto var(--s-4);display:grid;place-items:center}
.wsign-ic .ring{position:absolute;inset:0;border-radius:var(--r-pill);border:2px solid var(--line);border-top-color:var(--text);animation:spin var(--dur-spin) var(--ease-lin) infinite}
.wsign-ic.err .ring{animation:none;border-color:var(--err)}
.msg{margin:var(--s-4) 0 var(--s-3);padding:var(--sh-14) var(--s-4);border-radius:var(--r-md);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:var(--t-xs);font-family:var(--font-mono);font-weight:var(--fw-4);color:var(--text-2);white-space:pre-wrap;word-break:break-all;max-height:180px;overflow:auto;text-align:left}
.usd{position:relative;display:block}
.usd i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);font:var(--t-ui)}
.usd .input{padding-left:var(--s-8)}
.once-key{margin-top:var(--s-4)}
.once-key pre{color:var(--text)}
.once-l{display:flex;align-items:center;gap:var(--s-2)}
.once-key + .code{margin-top:var(--s-3)}
.once-l .ic{width:14px;height:14px}
#mOnce .modal-title{flex-wrap:wrap}
.revoke-name{color:var(--text);margin:var(--s-1) 0 var(--s-2)}
[data-wl] img{width:28px;height:28px;object-fit:contain}
.q-err{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;color:var(--text-2)}
.q-err p{margin:0}
.card-l .chip{margin-left:auto}
.soon-tab{display:inline-flex;align-items:center;gap:var(--s-2);color:var(--muted);cursor:default;pointer-events:none}
.soon-tab .tk{width:14px;height:14px}
.once-chip{margin:0 0 var(--s-2)}
#onceCli{white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere}
.once-key{margin-top:var(--s-4)}
.code.inline{display:flex;align-items:center;gap:var(--s-2);min-height:var(--h-lg);padding:0 var(--s-2) 0 0}
.code.inline pre{flex:1;min-width:0;padding:var(--s-3) var(--s-4);white-space:pre-wrap;word-break:break-all}
.code.inline .copy{flex:none}

/* V2-2 */
#assetTabs .tab{height:var(--h-lg)}   /* P2-F23: one 44 px line with the field and the button */
.field + .help{display:block;margin-top:calc(-1 * var(--s-2))}
.keys-count{margin-left:auto;align-self:center;font:var(--t-sm);color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:374px){.side-a svg{display:none}}
@media (max-width:399px){.side-a{padding:0 var(--s-1);gap:var(--s-1)}}   /* P2 R-M2 */   /* P2-F26 */

/* owner-eye: №22 the sign-in card in the middle of the area, no stray pixel; the header's right edge without a wallet */
.shell{min-height:100dvh;box-sizing:border-box}
#stSignin,#stPre,#stError,#stLoading{min-height:calc(100dvh - var(--hdr));display:grid;place-content:center}
#stSignin[hidden],#stPre[hidden],#stError[hidden],#stLoading[hidden]{display:none}
#stSignin .center-card,#stPre .center-card,#stError .center-card,#stLoading .center-card{width:min(480px,calc(100vw - 32px));margin:0}
@media (min-width:1728px){.is-app:has(#wallet[hidden]) .hdr-in{padding-right:var(--gut)}}
@media (max-width:767px){.upill{width:100%}.upill select{width:100%;max-width:none}}

/* круг 2 */
.usage-tbl .tn{min-width:0}
.ukind .mx-nl{color:var(--muted)}
#mOnce .modal-box{max-width:560px}   /* P2 R-M3: a 52-character key in one line */
@media (min-width:768px){.pane-head .btn .ic{width:17px;height:17px}}   /* ICON N4, M1 */
.u-show{display:flex;justify-content:center;padding:var(--s-3)}
.u-show[hidden]{display:none}
@media (max-width:767px){
  #assetTabs{width:100%}
  #assetTabs .tab{flex:1 1 0;justify-content:center;padding-inline:var(--s-2);min-width:0}
  #assetTabs .soon-tab>span:not(.tk):not(.chip){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}   /* P2 R-9, EYE М-2: mark + Soon in the tab, the name stays for a screen reader */
}
#stLoading .center-card{min-height:322px}   /* P2 R-M8: the loading card = the sign-in card, no 63 px jump */
.u-day{display:inline-flex;align-items:center;gap:var(--s-1);height:var(--h-chip);padding:0 var(--sh-6) 0 var(--s-2);border-radius:var(--r-pill);background:var(--tint);font:var(--t-xs);color:var(--text-2)}   /* P2 M-4: which day the KPI show, and the way back */
.u-day[hidden]{display:none}
.u-day:hover{color:var(--text)}
.u-day svg{width:10px;height:10px}
/* the $KEYFO holder model: «Buy $KEYFO» disabled with its «Soon» beside it (before launch, and until the buy window ships) */
.buy-row{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3)}
.center-card .buy-row{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;margin-top:var(--s-3)}
/* Buy $KEYFO (flag buy): «You pay» with the coin and its network, «You receive» in $KEYFO, the route — the Quoro swap card in keyfo's look */
.bx-f{position:relative;margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border-radius:var(--r-md);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-ctl)}
.bx-l{margin:0;font:var(--t-sm);color:var(--muted)}
.bx-v{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-top:var(--s-1)}   /* a narrow window: the network button goes under the amount, the amount keeps its digits */
.bx-amt{flex:1 1 128px;min-width:0;border:0;background:none;padding:0;font:var(--t-h3);color:var(--text);outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-amt.dim{color:var(--muted)}
.bx-f:focus-within{box-shadow:inset 0 0 0 1px var(--focus)}
.bx-tok{flex:none;display:inline-flex;align-items:center;gap:var(--s-2);height:var(--h-item);padding:0 var(--s-3) 0 var(--s-2);border-radius:var(--r-pill);background:var(--raise);font:var(--t-ui);font-weight:var(--fw-5);color:var(--text);white-space:nowrap}
button.bx-tok:hover{background:var(--ctl)}
.bx-tok .tk{width:20px;height:20px}
.bx-coin{position:relative;width:20px;height:20px;flex:none}
.bx-coin > img{width:20px;height:20px;border-radius:var(--r-pill);display:block}
.bx-coin .bx-ch{position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;border-radius:var(--r-xs);background:var(--raise);box-shadow:0 0 0 1.5px var(--raise)}
.bx-tok .chev{width:10px;height:10px;color:var(--muted)}
.bx-list{position:absolute;z-index:5;right:var(--s-2);top:calc(100% + var(--s-1));width:min(280px,calc(100% - var(--s-4)));max-height:300px;overflow:auto;margin:0;padding:var(--s-1);list-style:none;border-radius:var(--r-md);background:var(--raise);box-shadow:inset 0 0 0 1px var(--line-ctl)}
.bx-list li{display:flex;align-items:center;gap:var(--s-3);height:var(--h-item);padding:0 var(--s-3);border-radius:var(--r-sm);font:var(--t-ui);color:var(--text-2);cursor:pointer}
.bx-list li:hover,.bx-list li.act,.bx-list li[aria-selected=true]{background:var(--ctl);color:var(--text)}
.bx-min{margin:var(--s-1) 0 0;min-height:20px;font:var(--t-sm);color:var(--muted)}
.bx-route{margin:var(--s-4) 0 0;display:flex;flex-direction:column;gap:var(--s-2);font:var(--t-sm)}
.bx-route div{display:flex;justify-content:space-between;gap:var(--s-3)}
.bx-route dt{color:var(--muted)}
.bx-route dd{margin:0;color:var(--text-2);display:inline-flex;align-items:center;gap:var(--s-2)}
.bx-route .mark-in{height:12px;width:auto}
.bx-note{margin:var(--s-3) 0 0;min-height:20px;font:var(--t-sm);color:var(--muted)}