/* Outrun Noir: dashboard theme layer (round 2). Loaded last; scoped to body.noir so it can be removed in one line.
   Ink, cream and orange. Open hairline layout on the overview, framed panels on transactional pages.
   Kept from the current dashboard by owner choice: announcement bar, Telegram card, rounded chips/status pills, label fonts. */
@font-face{font-family:"Jakarta";src:url(/account/assets/landing-jakarta.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/account/assets/landing-geist-mono.woff2) format("woff2");font-weight:100 900;font-display:swap}

body.noir{
  --bg:#0A0A0A;--surface:#0A0A0A;--panel:transparent;--raised:rgba(245,243,238,.035);
  --line:rgba(245,243,238,.09);--line-2:rgba(245,243,238,.15);
  --text:#F5F3EE;--muted:rgba(245,243,238,.66);--dim:rgba(245,243,238,.56);
  --accent:#FF5500;--orange:#FF5500;--frame:#0E0E0D;
  --ease:cubic-bezier(.16,1,.3,1);
  background:#0A0A0A;color:var(--text);
}
body.noir ::selection{background:var(--orange);color:#0A0A0A}

/* Square corners for structure (panels, buttons, fields, tables, tiles). Chips, status pills,
   the announcement and the Telegram card keep their original rounded shapes. */
body.noir .panel,body.noir .button,body.noir .icon-button,body.noir .search-trigger,body.noir .search-trigger kbd,
body.noir input,body.noir select,body.noir textarea,body.noir .table-wrap,body.noir .quick-link,body.noir .icon-tile:not(.sm),
body.noir .model-row,body.noir .model-list,body.noir dialog,body.noir .code-wrap,body.noir .preset,body.noir .empty,
body.noir .notice,body.noir .account-panel,body.noir #toast,body.noir .chart-empty{border-radius:0!important}
body.noir .panel,body.noir .button,body.noir .quick-link,body.noir .preset{box-shadow:none!important}
body.noir .key-card,body.noir .account-identity,body.noir .account-check-call,body.noir .limit-tiers,body.noir .docs-resource,
body.noir .setup-endpoint,body.noir .setup-prerequisite,body.noir .setup-readiness,body.noir .support-option,body.noir .selected-model-strip,
body.noir .chat-panel,body.noir .model-select-trigger,body.noir .history-filter,body.noir .history-toggle,body.noir .tab,body.noir .key-icon{border-radius:0!important;box-shadow:none!important}
body.noir .key-card{border:1px solid var(--line-2);background:radial-gradient(70% 120% at 100% 0%,rgba(255,85,0,.1),transparent 60%),var(--frame)}
body.noir .key-icon{border:1px solid rgba(255,85,0,.5);background:rgba(255,85,0,.06);color:var(--orange)}
body.noir .selected-model-strip{border-color:rgba(255,85,0,.45)}

/* grain, same as the landing */
body.noir::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.05;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- sidebar (Telegram card left as the current design) ---------- */
body.noir .sidebar{background:#0E0E0D;border-right:1px solid var(--line)}
body.noir .nav-link{background:none!important;box-shadow:none!important;transition:color .18s}
body.noir .nav-link.active{color:var(--text)}
body.noir .nav-link.active::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;background:var(--orange);transform:rotate(45deg);border-radius:0}
body.noir .nav-link.active svg{color:var(--orange)}

/* ---------- top bar ---------- */
body.noir .topbar{background:rgba(10,10,10,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body.noir .search-trigger{background:none;border:1px solid var(--line-2)}
body.noir .icon-button{background:none;border:1px solid var(--line-2)}

/* ---------- buttons ---------- */
body.noir .button{border:1px solid var(--line-2);background:none;color:var(--text);transition:background-color .18s,color .18s,border-color .18s,transform .1s}
body.noir .button:hover{border-color:var(--text);background:none}
body.noir .button:active{transform:translateY(1px) scale(.98)}
body.noir .button.primary,body.noir .primary{background:var(--orange);border-color:var(--orange);color:#0A0A0A}
body.noir .button.primary:hover,body.noir .primary:hover{background:var(--text);border-color:var(--text);color:#0A0A0A}
body.noir .button.primary:disabled{background:#2a1a12;border-color:#2a1a12;color:#8d7f76}

/* ---------- page heading ---------- */
body.noir .heading{padding-bottom:28px;margin-bottom:36px;border-bottom:1px solid var(--line);align-items:flex-end}
body.noir .heading .eyebrow{display:none!important}
body.noir .heading h1,body.noir #main>h1{font-family:var(--sans);font-size:3.25rem;font-weight:700;line-height:1;letter-spacing:-.04em;text-wrap:balance;max-width:16ch}
body.noir .heading h1 .dot{color:var(--orange)}
body.noir .heading p{color:var(--muted);font-size:15px;max-width:52ch;margin-top:16px}

/* ---------- overview: open, hairline-ruled areas ---------- */
body.noir .panel{background:none;border:0;border-top:1px solid var(--line-2);padding:26px 0 0}
body.noir .section-head h2,body.noir .panel h2{font-size:20px;font-weight:600;letter-spacing:-.025em}
body.noir .overview-grid{gap:clamp(28px,4vw,64px)}
body.noir .balance-panel{position:relative;overflow:hidden;min-height:340px;background:radial-gradient(70% 90% at 92% 0%,rgba(255,85,0,.13),transparent 62%)}
body.noir .gauge .g-arc{stroke:rgba(245,243,238,.3);stroke-width:1}
body.noir .gauge .g-tick{stroke:rgba(245,243,238,.45);stroke-width:1}
body.noir .gauge .g-needle{stroke:var(--orange);stroke-width:2}
body.noir .balance-total{font-family:var(--sans);font-size:5rem;font-weight:600;letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums;margin:6px 0 14px}
body.noir .balance-foot{border-top:1px solid var(--line)}
body.noir .checklist .progress{background:var(--line);height:2px}
body.noir .checklist .progress-fill{background:var(--orange);height:2px}
body.noir .check-row{border-color:var(--line)!important;background:none}
body.noir .check-row.is-next .step-dot{border-color:var(--orange);color:var(--orange)}
body.noir .check-links a{border:0;border-top:1px solid var(--line);background:none;padding-left:0;padding-right:0}
body.noir .check-links a svg:last-child{color:var(--orange)}

/* stats & chart: orange bars, today in full orange */
body.noir .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body.noir .stat .number{font-family:var(--sans);font-size:2rem;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
body.noir .chart-bar{fill:rgba(255,85,0,.55);rx:0}
body.noir .chart-bar:hover{fill:rgba(255,85,0,.85)}
body.noir .chart-bar.is-latest{fill:#FF5500}
body.noir .chart-grid{stroke:rgba(245,243,238,.08);stroke-dasharray:2 4}
body.noir .chart-grid.chart-base{stroke:rgba(245,243,238,.25);stroke-dasharray:none}
body.noir select,body.noir input,body.noir textarea{background:#0F0F0E;border:1px solid var(--line-2);color:var(--text)}
body.noir select:focus,body.noir input:focus,body.noir textarea:focus{outline:1px solid var(--orange);outline-offset:0;border-color:var(--orange)}

/* icon tiles: orange frame + orange glyph by default (not only on hover) */
body.noir .icon-tile{background:rgba(255,85,0,.06);border:1px solid rgba(255,85,0,.5);color:var(--orange)}
body.noir .icon-tile svg{color:var(--orange)!important}
body.noir .guide-symbol{border-radius:0!important;border:1px solid rgba(255,85,0,.5)!important;background:rgba(255,85,0,.06)!important;color:var(--orange)!important}
body.noir .guide-symbol svg{color:var(--orange)!important}
body.noir .guide-symbol .maker-glyph{width:18px;height:18px}
body.noir .guide-link:hover .guide-symbol{background:rgba(255,85,0,.14)!important;border-color:var(--orange)!important}
body.noir .icon-tile .maker-glyph,body.noir .guide-symbol .maker-glyph{display:block;width:18px;height:18px;background:var(--orange);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
body.noir .icon-tile.sm .maker-glyph{width:15px;height:15px}

/* quick links, model rows */
body.noir .quick-grid{gap:0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
body.noir .quick-link{border:0;background:none;padding:26px 24px 26px 0;transition:color .18s}
body.noir .quick-link+.quick-link{border-left:1px solid var(--line);padding-left:24px}
body.noir .quick-link:hover{background:none}
body.noir .quick-link:hover .icon-tile{background:rgba(255,85,0,.14);border-color:var(--orange)}
body.noir .quick-link h3{font-size:17px;font-weight:600;letter-spacing:-.02em}
body.noir .quick-link>svg:last-child{color:var(--orange)}
body.noir .model-list{border:0;border-top:1px solid var(--line-2);background:none}
body.noir .model-row{background:none;border-top:0;border-bottom:1px solid var(--line)}
body.noir .model-row:hover{background:var(--raised)}

/* tables */
body.noir .table-wrap{background:none;border:0;border-top:1px solid var(--line-2)}
body.noir table td{border-bottom:1px solid var(--line);background:none}
body.noir table tbody tr:hover td{background:var(--raised)}

/* notices, empty states, code, dialogs */
body.noir .notice{background:none;border:0;border-left:1px solid var(--orange);padding:4px 0 4px 16px;color:var(--muted)}
body.noir .notice svg{color:var(--orange)}
body.noir .empty{border:1px dashed var(--line-2)!important;background:none}
body.noir .code-wrap{background:#0F0F0E;border:1px solid var(--line-2)}
body.noir dialog{background:#0D0D0C;border:1px solid var(--line-2);color:var(--text)}
body.noir dialog::backdrop{background:rgba(10,10,10,.72);backdrop-filter:blur(6px)}

/* ---------- transactional pages: framed panels and clear selected states ---------- */
body.noir[data-route=billing] .panel,body.noir[data-route=keys] .panel,body.noir[data-route=settings] .panel,body.noir[data-route=support] .panel{border:1px solid var(--line-2);background:var(--frame);padding:28px}
body.noir[data-route=billing] .two-col>.panel:last-child,body.noir[data-route=keys] .two-col>.panel:last-child{background:radial-gradient(90% 70% at 100% 0%,rgba(255,85,0,.14),transparent 62%),var(--frame)}
body.noir .preset{background:none;border:1px solid var(--line-2);color:var(--text);transition:border-color .18s,background-color .18s,color .18s}
body.noir .preset:hover{border-color:rgba(255,85,0,.6)}
body.noir .preset.active,body.noir .preset[aria-pressed=true]{border-color:var(--orange);background:rgba(255,85,0,.1);color:var(--text)}
body.noir .billing-total{font-family:var(--sans);font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}

/* ---------- sign-in screen: the art moment ---------- */
body.noir.auth-screen .login::before{display:none}
body.noir .login>div:first-child{position:relative;z-index:1}
body.noir .login h1{font-family:var(--sans);font-size:clamp(46px,5.4vw,5.5rem);font-weight:700;line-height:.95;letter-spacing:-.04em}
body.noir .login .panel{border:1px solid var(--line-2);padding:32px;background:#0A0A0A}
body.noir.auth-screen .workspace::before{content:"";position:fixed;left:0;right:0;bottom:-2vh;height:min(46vh,420px);background:url(/account/assets/art/hands-dark.png) center bottom/auto 100% no-repeat;opacity:.38;pointer-events:none;image-rendering:pixelated;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}

/* ---------- motion: state changes only ---------- */
@keyframes noir-in{from{opacity:0}to{opacity:1}}
body.noir #main>*{animation:noir-in .2s ease-out both}
@media (prefers-reduced-motion:reduce){body.noir #main>*{animation:none}}

/* ---------- mobile ---------- */
@media (max-width:767px){
  body.noir .heading{margin-bottom:24px;padding-bottom:20px}
  body.noir .heading h1,body.noir #main>h1{font-size:2.25rem;max-width:none}
  body.noir .heading p{font-size:14px}
  body.noir .balance-total{font-size:3.25rem}
  body.noir .stat .number{font-size:1.5rem}
  body.noir .quick-link{padding:20px 0}
  body.noir .quick-link+.quick-link{border-left:0;border-top:1px solid var(--line);padding-left:0}
  body.noir[data-route=billing] .panel,body.noir[data-route=keys] .panel,body.noir[data-route=settings] .panel,body.noir[data-route=support] .panel{padding:20px}
  body.noir .balance-panel .gauge{opacity:.5}
}

/* ---------- light/dark toggle: top bar from 1024px; below that, top right of the sidebar / mobile menu (the bar is full there).
   Light palette: noir-light.css ---------- */
body.noir .theme-toggle{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;padding:0;color:var(--muted);cursor:pointer;transition:color .18s,border-color .18s}
body.noir .theme-toggle:hover{color:var(--text);border-color:var(--text)}
body.noir .theme-toggle svg{width:17px;height:17px}
body.noir .theme-toggle .theme-ic-moon,body.noir .logo-on-light{display:none}
html[data-theme=light] body.noir .theme-toggle .theme-ic-sun,html[data-theme=light] body.noir .logo-on-dark{display:none}
html[data-theme=light] body.noir .theme-toggle .theme-ic-moon,html[data-theme=light] body.noir .logo-on-light{display:block}
body.noir .theme-toggle--drawer{display:none}
body.noir .theme-toggle--auth{width:40px;height:40px;margin-left:auto}
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none!important}
@media (max-width:1023px){
  body.noir .theme-toggle--bar{display:none}
  body.noir .theme-toggle--drawer{display:inline-grid;position:absolute;top:18px;right:14px}
}
@media (max-width:767px){body.noir .theme-toggle--drawer{top:16px;width:44px;height:44px}body.noir .theme-toggle--auth{width:44px;height:44px}}

/* topbar: the page name may shrink with an ellipsis so the account button never leaves the screen
   (at 768px "Alerts & preferences" pushed it 29px off; "Balance & billing" 3px) */
body.noir .topbar .breadcrumb{min-width:0;overflow:hidden}
body.noir .topbar .breadcrumb strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
body.noir .topbar .button{white-space:nowrap}
@media (max-width:1100px){body.noir .topbar .search-trigger kbd{display:none}}

/* ---------- final audit fixes (2026-10-24) ---------- */

/* 1. Top bar on phones: the balance never shrinks (its last digit was clipped by the "+"); the page name takes the
   leftover room and wraps to two lines instead of "Over...". Below 330px the search button steps aside so the rest stays 40px+. */
@media (max-width:767px){
  body.noir .topbar .balance-chip{flex:none}
}
@media (max-width:420px){
  body.noir .topbar .breadcrumb{min-width:0}
  body.noir .topbar .breadcrumb strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;white-space:normal;overflow:hidden;font-size:13px;line-height:1.15}
}
@media (max-width:359px){
  body.noir .topbar{padding-inline:10px;gap:4px}
  body.noir .topbar .icon-button,body.noir .topbar .search-trigger,body.noir .topbar #header-topup{width:40px;min-width:40px;height:40px;min-height:40px}
}
@media (max-width:329px){
  body.noir .topbar .search-trigger{display:none}
}

/* 2. Closed mobile drawer: no shadow (it smeared down the left edge on the light theme). It leaves after the slide-out finishes. */
@media (max-width:767px){
  body.noir .sidebar:not(.open),html[data-theme=light] body.noir .sidebar:not(.open){box-shadow:none;transition:transform .22s var(--ease),box-shadow 0s linear .22s}
}

/* 3. "Connected: ..." banner on phones: icon and text on top, the sign-in link full width below. */
@media (max-width:480px){
  body.noir main>.account-identity{flex-wrap:wrap;align-items:flex-start;gap:12px 14px}
  body.noir main>.account-identity>div{flex:1 1 calc(100% - 50px);min-width:0}
  body.noir main>.account-identity>.go-link{flex:1 1 100%;margin-left:0;justify-content:space-between;min-height:44px;padding-top:4px;border-top:1px solid var(--line)}
}

/* 4. "Your selected model" strip on phones: label, name and code stack in one column; the button goes full width below. */
@media (max-width:480px){
  body.noir .selected-model-strip{flex-wrap:wrap;align-items:flex-start;gap:12px 14px;padding:16px}
  body.noir .selected-model-strip>div{flex:1 1 calc(100% - 50px);min-width:0;flex-direction:column;align-items:flex-start;gap:4px}
  body.noir .selected-model-strip>.button{flex:1 1 100%;justify-content:center}
}

/* 5. Stat strip (activity): first figure on its own row, the other two side by side under 480px; slightly smaller figures on tablets. */
@media (min-width:361px) and (max-width:480px){
  body.noir .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.noir .stats .stat:first-child{grid-column:1/-1}
  body.noir .stats .stat:nth-child(2){border-left:0!important;padding-left:0!important;border-top:1px solid var(--line-2)!important}
  body.noir .stats .stat:nth-child(3){border-top:1px solid var(--line-2)!important}
}
@media (min-width:768px) and (max-width:899px){
  body.noir .stat .number{font-size:1.75rem}
}

/* 6. Tables that outgrow the screen: a soft orange edge shows there is more to scroll; on tablets and phones the history tables
   become stacked cards (the same look the request tables already have on phones), so no column or status pill is ever cut. */
body.noir .table-wrap{--tw-cover:var(--bg);
  background:
    linear-gradient(to right,var(--tw-cover),var(--tw-cover)) left center/28px 100% no-repeat local,
    linear-gradient(to left,var(--tw-cover),var(--tw-cover)) right center/28px 100% no-repeat local,
    linear-gradient(to right,color-mix(in srgb,var(--orange) 30%,transparent),transparent) left center/22px 100% no-repeat scroll,
    linear-gradient(to left,color-mix(in srgb,var(--orange) 30%,transparent),transparent) right center/22px 100% no-repeat scroll}
body.noir[data-route=keys] .table-wrap,body.noir[data-route=billing] .table-wrap{--tw-cover:var(--frame)}
body.noir .table-wrap td .status,body.noir .table-wrap td .badge{white-space:nowrap}

@media (min-width:641px) and (max-width:1024px){
  body.noir .request-table{overflow:visible;background:none;border:0}
  body.noir .request-table table,body.noir .request-table tbody,body.noir .request-table tr,body.noir .request-table td{display:block;width:100%;white-space:normal}
  body.noir .request-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  body.noir .request-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;padding:16px;margin-bottom:10px;border:1px solid var(--line-2);border-radius:14px;background:var(--panel)}
  body.noir .request-table tbody tr:hover,body.noir .request-table tbody tr:hover td{background:none}
  body.noir .request-table td{padding:0;border:0;font-size:13px}
  body.noir .request-table td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
  body.noir .request-table td:first-child{grid-column:1/-1;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
  body.noir .request-table td:first-child::before{display:none}
  body.noir .request-table .request-id{overflow-wrap:anywhere}
}
@media (max-width:1024px){
  body.noir[data-route=keys] .table-wrap,body.noir #payment-history .table-wrap{overflow:visible;background:none;border:0}
  body.noir[data-route=keys] .table-wrap table,body.noir[data-route=keys] .table-wrap tbody,body.noir[data-route=keys] .table-wrap tr,body.noir[data-route=keys] .table-wrap td,
  body.noir #payment-history .table-wrap table,body.noir #payment-history .table-wrap tbody,body.noir #payment-history .table-wrap tr,body.noir #payment-history .table-wrap td{display:block;width:100%;white-space:normal}
  body.noir[data-route=keys] .table-wrap thead,body.noir #payment-history .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  body.noir[data-route=keys] .table-wrap tr,body.noir #payment-history .table-wrap tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:16px;margin-bottom:10px;border:1px solid var(--line-2);border-radius:14px;background:none}
  body.noir[data-route=keys] .table-wrap tbody tr:hover,body.noir[data-route=keys] .table-wrap tbody tr:hover td,
  body.noir #payment-history .table-wrap tbody tr:hover,body.noir #payment-history .table-wrap tbody tr:hover td{background:none}
  body.noir[data-route=keys] .table-wrap td,body.noir #payment-history .table-wrap td{padding:0;border:0;font-size:13px;min-width:0;overflow-wrap:anywhere}
  body.noir[data-route=keys] .table-wrap td.mono,body.noir #payment-history .table-wrap td.mono{font-size:12.5px}
  body.noir[data-route=keys] .table-wrap td::before,body.noir #payment-history .table-wrap td::before{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
  /* key history: Key | Created | Status | Recorded spend | Billing key ID */
  body.noir[data-route=keys] .table-wrap td:nth-child(1){grid-column:1/-1;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
  body.noir[data-route=keys] .table-wrap td:nth-child(1)::before{display:none}
  body.noir[data-route=keys] .table-wrap td:nth-child(2)::before{content:"Created"}
  body.noir[data-route=keys] .table-wrap td:nth-child(3)::before{content:"Status"}
  body.noir[data-route=keys] .table-wrap td:nth-child(4)::before{content:"Recorded spend"}
  body.noir[data-route=keys] .table-wrap td:nth-child(5)::before{content:"Billing key ID"}
  /* payment history: Created | Invoice | Paid / bonus | Status | Action */
  body.noir #payment-history .table-wrap td:nth-child(1)::before{content:"Created"}
  body.noir #payment-history .table-wrap td:nth-child(2)::before{content:"Invoice"}
  body.noir #payment-history .table-wrap td:nth-child(3)::before{content:"Paid / bonus"}
  body.noir #payment-history .table-wrap td:nth-child(4)::before{content:"Status"}
  body.noir #payment-history .table-wrap td:nth-child(5)::before{content:"Action"}
  body.noir #payment-history .table-wrap td:nth-child(5){grid-column:1/-1}
}
@media (min-width:861px) and (max-width:1024px){
  body.noir[data-route=keys] .table-wrap tr{grid-template-columns:repeat(4,minmax(0,1fr))}
  body.noir #payment-history .table-wrap tr{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.noir #payment-history .table-wrap td:nth-child(5){grid-column:span 2}
}

/* 7. Restored models (overview): the price uses the whole rate column; under 1100px it sits under the name, above it stays on one line. */
body.noir .restored-model .model-rates{grid-template-columns:minmax(0,1fr)}
@media (max-width:1100px){
  body.noir .restored-model{grid-template-columns:auto minmax(0,1fr) 16px!important;padding:16px!important;row-gap:6px!important}
  body.noir .restored-model .model-rates{grid-column:2;grid-row:2}
  body.noir .restored-model>svg{grid-column:3;grid-row:1/3}
  body.noir .restored-model .model-rates strong{text-wrap:balance;margin-top:0}
}
@media (min-width:1101px){
  body.noir .restored-model .model-rates strong{white-space:nowrap}
}

/* 8. Tablet: footer links keep their phrases together and wrap as a row; key card buttons form an even grid; the masked key stays on one line. */
body.noir footer{flex-wrap:wrap;row-gap:6px}
body.noir footer a,body.noir footer span,body.noir footer button{white-space:nowrap}
body.noir .key-info code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1024px){
  body.noir .key-card{flex-wrap:wrap;padding:20px}
  body.noir .key-info{min-width:0;flex:1 1 calc(100% - 68px)}
  body.noir .key-actions{flex:1 1 100%;width:100%;max-width:none;padding-top:12px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  body.noir .key-actions .button{width:100%;min-width:0;justify-content:center;padding-inline:8px}
}
@media (max-width:560px){
  body.noir .key-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:400px){
  body.noir .key-info code{font-size:12px}
}

/* 9. Minor.
   Setup glossary on phones: the label sits above its definition, both left-aligned. */
@media (max-width:560px){
  body.noir .info-row{flex-direction:column;align-items:flex-start;gap:4px}
  body.noir .info-row span:last-child,body.noir .info-row strong{text-align:left}
}
/* Setup "Open documentation": no leftover indent on phones. */
@media (max-width:767px){
  body.noir .docs-resource .button{margin-left:0}
}
/* Activity pager on phones: the count above, Previous and Next side by side. */
@media (max-width:480px){
  body.noir .pagination{flex-direction:column;align-items:stretch;gap:10px}
  body.noir .pagination .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:0}
  body.noir .pagination .actions .button{width:100%;justify-content:center}
}
/* Models list on wide screens: a one-rate row (e.g. speech) uses the whole price column, and the column is wide enough for three rates. */
body.noir .model-rates>span:only-child{grid-column:1/-1}
body.noir .model-rates strong{text-wrap:balance}
@media (min-width:1201px){
  body.noir .model-row .model-open{grid-template-columns:minmax(0,1.15fr) minmax(0,1.35fr) 110px}
}
/* Disabled primary button (crypto checkout): about 3:1 text contrast, still plainly off (outline only, dimmed, no pointer). */
body.noir button.button.primary:disabled{background:none;border-color:var(--text);color:var(--text);opacity:.37;cursor:not-allowed}
html[data-theme=light] body.noir button.button.primary:disabled{background:none;border-color:var(--text);color:var(--text);opacity:.46}

/* 10. Phones and small tablets: form controls are 16px so iOS does not zoom the page on focus. */
@media (max-width:860px){
  body.noir select,body.noir textarea,
  body.noir input:where(:not([type=checkbox],[type=radio],[type=range],[type=file],[type=hidden],[type=submit],[type=button],[type=image],[type=color])){font-size:16px}
}

/* 11. Sign-in headline on tablets and desktop: two lines at a size that sits with the panel (was up to 88px over four lines). Phones unchanged. */
@media (min-width:768px){
  body.noir .login h1{font-size:clamp(46px,3.4vw,60px);line-height:1;max-width:none}
}
/* 12. Sign-in backdrop in 2.5D: noir.js splits the hands image into two depth layers (clipped at the fingertip gap) plus an orange spark
   between the fingertips; they float, close in as the page scrolls and tilt with the pointer. Same place, size and fade as the old backdrop. */
body.noir.auth-screen.has-h25 .workspace::before{display:none}
body.noir:not(.auth-screen) .h25{display:none}
body.noir .h25{position:fixed;left:0;right:0;bottom:-2vh;height:min(46vh,420px);overflow:hidden;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent)}
body.noir .h25-stage{position:absolute;bottom:0;left:50%;height:100%;aspect-ratio:1600/476;transform:translateX(-50%)}
body.noir .h25-hand{position:absolute;inset:0;background:url(/account/assets/art/hands-dark.png) 0 0/100% 100% no-repeat;image-rendering:pixelated;opacity:.38;will-change:transform;backface-visibility:hidden}
body.noir .h25-l{clip-path:inset(0 54.5% 0 0);transform-origin:20% 70%}
body.noir .h25-r{clip-path:inset(0 0 0 45.5%);transform-origin:80% 45%}
body.noir .h25-spark{position:absolute;left:45.6%;top:61.5%;width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--orange);box-shadow:0 0 16px 5px color-mix(in srgb,var(--orange) 50%,transparent);opacity:.2;will-change:transform,opacity}
html[data-theme=light] body.noir .h25-hand{background-image:url(/account/assets/art/hands-light.png);opacity:.5}
/* 13. Guided tour: a square ring and card (Noir), steady dimming between steps, and the highlight glides from one step to the next.
   Between steps the hole fills with the same dim (inset shadow), so the page changing underneath never flashes; tour.js adds
   .spot-ready once the first step is placed and .is-moving only while it changes step (so it never lags behind scrolling). */
body.noir .guided-tour{--tour-dim:color-mix(in srgb,var(--bg) 73%,transparent)}
html[data-theme=light] body.noir .guided-tour{--tour-dim:color-mix(in srgb,var(--text) 42%,transparent)}
body.noir .tour-spotlight,html[data-theme=light] body.noir .guided-tour .tour-spotlight{border-radius:0;border:2px solid var(--orange);box-shadow:0 0 0 100vmax var(--tour-dim),inset 0 0 0 100vmax transparent;transition:opacity .2s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
body.noir .guided-tour.is-moving .tour-spotlight{transition:left .56s var(--ease),top .56s var(--ease),width .56s var(--ease),height .56s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease)}
body.noir .guided-tour:not(.spot-ready) .tour-spotlight{transition:none}
body.noir .guided-tour.spot-ready.is-transitioning .tour-spotlight{opacity:1;border-color:transparent;box-shadow:0 0 0 100vmax var(--tour-dim),inset 0 0 0 100vmax var(--tour-dim)}
body.noir .guided-tour.spot-ready.is-transitioning .tour-blocker,html[data-theme=light] body.noir .guided-tour.spot-ready.is-transitioning .tour-blocker{background:transparent}
body.noir .tour-card,body.noir .tour-arrow{border-radius:0;background:var(--bg);border-color:var(--line-2)}
body.noir .tour-card{transition:opacity .28s var(--ease),transform .28s var(--ease)}
body.noir .guided-tour.is-transitioning .tour-card{transform:translateY(8px)}
@media (prefers-reduced-motion:reduce){body.noir .tour-spotlight,body.noir .guided-tour.is-moving .tour-spotlight,body.noir .tour-card{transition:none!important}}

/* 14. Sign-up step ("Already use Outrun on Telegram?"): one centred square panel like the sign-in card; stacked full-width actions. */
body.noir .signup-connect{grid-column:1/-1;width:min(460px,100%);margin:clamp(24px,7vh,88px) auto 56px;position:relative;z-index:1}
body.noir .signup-connect .heading{display:block;text-align:center;margin:0 0 28px;padding:0;border:0}
body.noir .signup-connect .heading .eyebrow{display:none}
body.noir .signup-connect .heading h1{font-size:clamp(38px,4vw,54px);line-height:1;letter-spacing:-.04em;max-width:none}
body.noir .signup-connect .heading p{margin:14px auto 0;max-width:34ch;color:var(--muted)}
body.noir .signup-panel{margin:0;padding:32px;border:1px solid var(--line-2);background:var(--bg)}
html[data-theme=light] body.noir .signup-panel{background:var(--pop)}
body.noir .signup-panel .signup-icon{display:inline-flex;margin-bottom:18px}
body.noir .signup-panel h2{margin:0;font-size:1.25rem;line-height:1.3;letter-spacing:-.02em}
body.noir .signup-panel>p{margin:10px 0 0;line-height:1.6;color:var(--muted)}
body.noir .signup-panel>p.signup-note{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--dim)}
body.noir .signup-actions{display:grid;gap:10px;margin-top:24px}
body.noir .signup-actions .button{width:100%;min-height:48px;justify-content:center}
body.noir .signup-connection:not(:empty){margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
body.noir .signup-connection h3{margin:0;font-size:1rem}
body.noir .signup-connection p{margin:8px 0 0;color:var(--muted);line-height:1.6}
body.noir .signup-connection .signin-code{margin:16px 0}
body.noir .signup-connection .button{width:100%;justify-content:center}
body.noir .signup-panel .form-error:empty{display:none}
@media (max-width:480px){body.noir .signup-panel{padding:24px 20px}body.noir .signup-connect{margin-top:16px}}