/* Workspace and auth page. System tokens live in rivioo.css. */
body{min-height:100vh;display:flex;flex-direction:column}
.nav{flex:none}

/* auth: one framed split panel */
.auth-wrap{padding-block:40px;width:100%}
@media(min-width:900px){.auth-wrap{padding-block:56px}}
.auth{display:grid;grid-template-columns:1fr 1.15fr;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--card);box-shadow:var(--mockup-shadow);min-height:600px}
@media(max-width:900px){.auth{grid-template-columns:1fr;min-height:auto}}
.auth-demo{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:32px;padding:32px;background:linear-gradient(180deg,var(--card-2),var(--card));border-left:1px solid var(--border)}
.auth-demo::before{content:"";position:absolute;left:50%;top:-140px;width:640px;height:380px;transform:translateX(-50%);background:radial-gradient(ellipse at center,var(--brand-glow) 0%,transparent 60%);filter:blur(30px);pointer-events:none}
@media(max-width:900px){.auth-demo{display:none}}
.auth-brand img{height:20px;width:auto;filter:invert(var(--logo-invert));position:relative}
.auth-copy{position:relative}
.auth-copy h1{font-size:clamp(22px,2.2vw,28px);max-width:18ch}
.auth-copy p{margin-top:8px;font-size:14px}
.term{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg);box-shadow:var(--mockup-shadow);font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--muted)}
.term-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--muted-2)}
.term-bar .dots{display:inline-flex;gap:6px}
.term-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--border-2)}
.term-bar .term-tag{margin-left:auto;font-size:11px;color:var(--muted-2)}
.term-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;min-height:250px}
.t-prompt{color:var(--muted-2)}
.t-cmd{color:var(--fg)}
.t-user{color:var(--fg);min-height:1.7em}
.t-caret{display:inline-block;width:7px;height:1.1em;background:var(--fg);vertical-align:-.2em;margin-left:2px;animation:blink 1s steps(2) infinite}
.t-user.done .t-caret{display:none}
@keyframes blink{50%{opacity:0}}
.t-tools{display:flex;flex-direction:column;gap:6px;margin:4px 0}
.t-tool{display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.t-tool.show{opacity:1;transform:none}
.t-tool .t-st{width:12px;height:12px;border-radius:50%;border:2px solid var(--border-2);border-top-color:var(--brand);animation:spin .8s linear infinite;flex:none}
.t-tool.ok .t-st{border:0;background:var(--ok);animation:none;position:relative}
.t-tool.ok .t-st::after{content:"";position:absolute;left:3.5px;top:1.5px;width:3px;height:6px;border:solid #0a0a0a;border-width:0 2px 2px 0;transform:rotate(45deg)}
.t-tool .t-name{font-family:var(--font);font-size:13px;color:var(--fg)}
.t-tool .t-name b{font-family:var(--mono);font-weight:500;font-size:12px}
.t-tool .t-arg{margin-left:auto;font-size:11.5px;color:var(--muted-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes spin{to{transform:rotate(360deg)}}
.t-answer{display:flex;flex-direction:column;gap:6px}
.t-answer p{font-family:var(--font);font-size:13.5px;line-height:1.55;color:var(--fg);opacity:0;transform:translateY(4px);transition:opacity .45s,transform .45s}
.t-answer p.show{opacity:1;transform:none}
.t-answer .t-cite{font-family:var(--mono);font-size:11.5px;color:var(--muted-2)}
@media(prefers-reduced-motion:reduce){.t-caret{animation:none}.t-tool .t-st{animation:none}}
.auth-card{display:flex;flex-direction:column;justify-content:center}
.auth-form{flex:1;padding:72px 40px 32px;display:flex;flex-direction:column;gap:14px;align-items:stretch}
@media(max-width:900px){.auth-form{padding:28px 24px 24px}}
.auth-card h2{font-size:22px;text-align:center}
.auth-card .auth-sub{font-size:14px;text-align:center;margin-top:-8px;margin-bottom:10px}
.auth-card .stack{display:flex;flex-direction:column;gap:14px}
.auth-card .label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.auth-card .label-row label{font-size:13px;font-weight:500;color:var(--fg)}
.auth-card .btn-link{font-size:12.5px;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;font-weight:500}
.auth-card .login-mode{align-self:center}
.auth-card .btn-link:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.auth-card .input{height:42px}
.auth-card .btn-block{height:42px}
.or.dashed::before,.or.dashed::after{background:none;border-top:1px dashed var(--border-2);height:0}
.auth-card .fine{font-size:12.5px;color:var(--muted);line-height:1.5}
.auth-foot{margin-top:auto;padding:16px 40px;border-top:1px solid var(--border);background:var(--card-2);font-size:12.5px;color:var(--muted);text-align:center;line-height:1.5}
.auth-foot a{color:var(--fg)}
@media(max-width:900px){.auth-foot{padding:14px 24px}}
.or{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted-2)}
.or::before,.or::after{content:"";height:1px;background:var(--border);flex:1}
.g-mark{width:16px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M23.5 12.3c0-.8-.1-1.6-.2-2.3H12v4.5h6.5c-.3 1.5-1.1 2.7-2.4 3.6v3h3.9c2.3-2.1 3.5-5.2 3.5-8.8z'/%3E%3Cpath fill='%2334A853' d='M12 24c3.2 0 6-1.1 8-2.9l-3.9-3c-1.1.7-2.5 1.2-4.1 1.2-3.1 0-5.8-2.1-6.7-5H1.2v3.1C3.2 21.3 7.3 24 12 24z'/%3E%3Cpath fill='%23FBBC05' d='M5.3 14.3c-.2-.7-.4-1.5-.4-2.3s.1-1.6.4-2.3V6.6H1.2C.4 8.2 0 10.1 0 12s.4 3.8 1.2 5.4l4.1-3.1z'/%3E%3Cpath fill='%23EA4335' d='M12 4.7c1.8 0 3.3.6 4.6 1.8l3.4-3.4C18 1.2 15.2 0 12 0 7.3 0 3.2 2.7 1.2 6.6l4.1 3.1c.9-2.9 3.6-5 6.7-5z'/%3E%3C/svg%3E") center/contain no-repeat}
#auth-message:not([hidden]){display:block}
.auth-step{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.auth-step .auth-hint{font-size:13px;color:var(--muted);text-align:center;margin:0}
.auth-step .btn-link{align-self:center}
.auth-step .auth-hint .btn-link{font-size:inherit;color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.mail-apps{display:flex;flex-direction:column;gap:10px}
.mail-apps[hidden]{display:none}
.auth-card .auth-sub strong{color:var(--fg);font-weight:500}

/* workspace */
.workspace{flex:1;display:flex}
.workspace .app-shell{flex:1;width:100%;min-height:calc(100vh - var(--nav-h))}
.app-side nav{display:flex;flex-direction:column;gap:4px}
@media(max-width:860px){.app-side nav{flex-direction:row;flex-wrap:wrap;gap:4px}}
.app-main{display:flex;flex-direction:column;min-width:0}
.app-body{padding:var(--gutter);display:flex;flex-direction:column;gap:var(--page-gap);max-width:1240px;width:100%}
.panel{display:flex;flex-direction:column;gap:var(--page-gap)}
.panel-head{display:flex;flex-direction:column;gap:4px}
.panel-head h1{font-size:24px}
.panel-head p{font-size:14px}
.panel .card:where(:not(.tool-panel .card)){display:flex;flex-direction:column;gap:var(--card-gap)}
.panel .tool-panel .card{gap:0}
.panel .card h2{font-size:16px}
.row-between{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.row-between>div{display:flex;flex-direction:column;gap:4px}
.panel .card h3{font-size:14px;margin-top:8px}
.sm{font-size:13px;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--card-gap)}
@media(max-width:900px){.three{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.two,.three{grid-template-columns:1fr}}
.stat .big{display:flex;align-items:baseline;gap:8px}
.panel .card.stat{gap:var(--card-gap)}
.stat-top{display:flex;justify-content:space-between;align-items:center}
.stat-ico{width:30px;height:30px;border-radius:var(--r-sm);background:var(--glass);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted)}
.stat-ico .lucide{width:15px;height:15px}
.stat-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto}
.app-side a .ext{margin-left:auto;width:13px;height:13px;color:var(--muted-2)}
.row-between>.setup-actions{flex-direction:row;align-items:center;gap:12px}
.setup-actions .btn-link{font-size:13px;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.setup-actions .btn-link:hover{color:var(--fg)}
.app-side .setup-mini{flex-direction:column;align-items:stretch;gap:8px;margin-top:16px;padding:12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
.app-side .setup-mini[hidden]{display:none}
.setup-mini-top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--muted)}
.setup-mini-top b{font-weight:500;color:var(--fg)}
.setup-mini .meter{width:100%}
@media(max-width:860px){.app-side .setup-mini{display:none}}
.setup-show{align-self:flex-start;font-size:13px;color:var(--brand-fg);background:none;border:0;padding:0;cursor:pointer;font-weight:500}
.export-row .ex-icon{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--border);flex:none;object-fit:cover;background:var(--glass);display:grid;place-items:center;font-size:13px;font-weight:500;color:var(--muted)}
.recent-more{align-self:flex-start;font-size:13px;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.recent-more:hover{color:var(--fg)}
.overview-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.overview-head .btn .lucide{width:15px;height:15px}
.overview-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--card-gap)}
@media(max-width:900px){.overview-grid{grid-template-columns:1fr}}
.usage-legend{font-size:12.5px;color:var(--muted)}
.usage-legend b{font-family:var(--mono);font-weight:500;color:var(--fg)}
.usage-warn{font-size:12.5px;color:var(--brand-fg)}
.usage-warn.bad{color:var(--bad)}
.panel h2 .count{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);margin-left:8px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-height:34px}
.card-head .btn .lucide{width:14px;height:14px}
.code-block .bar .tag{height:20px;font-size:11px;padding:0 8px}
.keys-table .c-name{width:30%}.keys-table .c-key{width:32%}.keys-table .c-date{width:15%}.keys-table .c-act{width:48px}
.keys-table .name{color:var(--fg);font-weight:500}
.keys-table td.end{text-align:right;position:relative;overflow:visible}
.keys-table tr.revoked td{color:var(--muted-2)}
.keys-table tr.revoked td.name{font-weight:400}
.key-filter .n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:2px;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:500;line-height:1}
.key-filter #key-n-active{color:color-mix(in srgb,var(--ok) 70%,var(--fg));background:var(--ok-soft)}
.key-filter #key-n-revoked{color:color-mix(in srgb,var(--bad) 70%,var(--fg));background:var(--bad-soft)}
.keys-table td.end .btn .lucide{width:16px;height:16px}
.endpoints{display:flex;flex-direction:column}
.endpoint{display:grid;grid-template-columns:140px minmax(0,1fr) auto;align-items:center;gap:12px;padding:var(--row-y) 0;border-top:1px solid var(--border-3)}
.endpoint:first-child{border-top:0;padding-top:0}
.endpoint:last-child{padding-bottom:0}
.endpoint .l{font-size:13px;color:var(--muted)}
.endpoint code{font-family:var(--mono);font-size:12.5px;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.endpoint .btn .lucide{width:13px;height:13px}
@media(max-width:640px){.endpoint{grid-template-columns:minmax(0,1fr) auto}.endpoint .l{grid-column:1/-1}}
@media(max-width:640px){
 .keys-table,.keys-table tbody{display:block}
 .keys-table thead,.keys-table colgroup{display:none}
 .keys-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name act" "key act" "used act";row-gap:4px;padding:12px 0;border-bottom:1px solid var(--border-3)}
 .keys-table td{display:block;height:auto!important;padding:0!important;border:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .keys-table td:nth-child(1){grid-area:name}
 .keys-table td:nth-child(2){grid-area:key}
 .keys-table td:nth-child(3){display:none}
 .keys-table td:nth-child(4){grid-area:used;font-size:12px;color:var(--muted)}
 .keys-table td:nth-child(4)::before{content:"Last used "}
 .keys-table td.end{grid-area:act;align-self:center}
 .seg.inline{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none}
 .seg.inline>*{flex:none}
}
#key-dialog{width:min(460px,calc(100vw - 32px))}
.plan-diff{width:100%;border-collapse:collapse;margin-top:16px;font-size:14px}
.plan-diff th{font-weight:500;color:var(--muted);text-align:right;padding:0 0 8px}
.plan-diff td{padding:9px 0;border-top:1px solid var(--border-3);color:var(--muted)}
.plan-diff td.num{text-align:right;color:var(--fg);font-variant-numeric:tabular-nums;width:90px}
.plan-diff td.over{color:var(--bad);font-weight:500}
#downgrade-keys{margin-top:16px}
#key-dialog .notice{margin-top:12px}
#key-dialog p .btn-link{font-size:inherit;color:var(--brand-fg);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.key-field{display:flex;align-items:center;gap:8px;margin-top:16px;padding:8px 8px 8px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)}
.key-field code{flex:1;min-width:0;font-family:var(--mono);font-size:12.5px;color:var(--fg);word-break:break-all}
.key-field .btn .lucide{width:13px;height:13px}
.stat-foot .btn-link{font-size:13px;color:var(--brand-fg);background:none;border:0;padding:0;font-weight:500}
.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:var(--card-pad) 16px}
.empty-ico{width:40px;height:40px;border-radius:var(--r-md);background:var(--glass);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted)}
.empty-ico .lucide{width:18px;height:18px}
.empty-state b{font-size:15px;font-weight:600;color:var(--fg)}
.empty-state>span:not(.empty-ico){font-size:13.5px;color:var(--muted);max-width:420px}
.empty-state .btn{margin-top:8px}
#recent-card.is-empty .row-between .sm,#recent-card.is-empty .row-between .btn{display:none}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.form-grid{grid-template-columns:1fr}}
.form-actions{grid-column:1/-1}
.inline-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.inline-form .field{flex:1;min-width:200px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rows{display:flex;flex-direction:column}
.rows>p{font-size:13.5px;color:var(--muted)}
.keyrow,.session-row{display:flex;align-items:center;gap:12px;padding:var(--row-y) 0;border-top:1px solid var(--border);font-size:13.5px;flex-wrap:wrap}
.keyrow:first-child,.session-row:first-child{border-top:0}
.keyrow .k{font-family:var(--mono);font-size:12px;color:var(--muted)}
.keyrow .name{font-weight:500;color:var(--fg)}
.keyrow .meta,.session-row .meta{font-size:12.5px;color:var(--muted)}
.keyrow .end,.session-row .end{margin-left:auto}
.reveal code{display:block;font-family:var(--mono);font-size:12.5px;word-break:break-all;margin:8px 0;background:transparent;border:0;padding:0;color:var(--fg)}
.code-block pre{white-space:pre-wrap;word-break:break-word;min-height:56px}
.seg button{white-space:nowrap}
.steps li{list-style:none}
.steps .step .arrow{display:inline-flex;align-items:center;gap:4px}
.steps .step .arrow svg{width:12px;height:12px}
.cols{display:grid;grid-template-columns:1fr;gap:var(--card-gap)}
@media(min-width:900px){.cols{grid-template-columns:repeat(2,1fr)}}
.col{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--card);padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--card-gap);overflow:hidden}
.col.brand{border-color:color-mix(in srgb,var(--brand) 35%,var(--border))}
.col.brand::before{content:"";position:absolute;left:0;right:0;top:0;height:200px;background:radial-gradient(ellipse at 50% 0%,var(--brand-soft),transparent 70%);pointer-events:none}
.col>*{position:relative}
.col .nm{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--fg)}
.col .nm .lucide{color:var(--muted)}
.col .desc{font-size:14px;color:var(--muted);line-height:1.5}
.col .price{display:flex;align-items:baseline;gap:8px}
.col .price .cur{font-size:20px;color:var(--muted);font-weight:500}
.col .price .n{font-size:48px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}
.col .price .per{font-size:13px;color:var(--muted);line-height:1.35}
.col .note{font-size:13px;color:var(--muted);line-height:1.5}
.col ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--fg)}
.col li{display:flex;gap:8px;align-items:flex-start}
.col li .lucide{margin-top:2px;color:var(--muted)}
.col li b{font-weight:500}
#notice:not([hidden]){display:flex}
.loading{padding:80px 24px;text-align:center;color:var(--muted);font-size:14px;animation:loading-in .2s ease .4s both}
/* Signed-out /login resolves in ~50ms; only show the loader when the workspace is actually slow. */
@keyframes loading-in{from{opacity:0}to{opacity:1}}
.tool-panel{max-width:720px}

/* Workspace shell: the app owns the full viewport. The Rivioo wordmark tops the sidebar on the nav icons'
   left edge; the sidebar ends with the account row, which opens theme, support and sign out. */
body:has(#workspace:not([hidden]))>.nav{display:none}
.workspace .app-shell{min-height:100vh}
@media(min-width:861px){.workspace .app-side{position:sticky;top:0;height:100vh;align-self:start}}
.workspace .app-side{padding:0 12px 12px;gap:4px}
.workspace .app-side a.brand{display:flex;align-items:center;width:auto;height:48px;margin:0 -12px 12px;padding:0 24px;border-bottom:1px solid var(--border);border-radius:0;background:none}
.workspace .app-side a.brand:hover{background:none}
.workspace .app-side a.brand img{height:18px;width:auto;filter:invert(var(--logo-invert))}
.workspace .app-side nav a,.workspace .app-side nav button{height:32px;padding:0 12px;gap:8px}
.workspace .app-side .sec{padding:16px 12px 8px}
.workspace .app-side .account-menu{display:block;position:relative;margin:auto -12px 0;padding:12px 12px 0;border-top:1px solid var(--border);font-family:var(--font);font-size:13px;word-break:normal}
.workspace .app-side .account-btn{height:auto;padding:8px 12px;gap:10px;color:var(--fg)}
.workspace .app-side .account-btn[aria-expanded="true"]{background:var(--glass-h)}
.account-btn .avatar{width:28px;height:28px;border-radius:50%;background:var(--glass-h);border:1px solid var(--border-2);display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--fg);flex:none}
.account-btn .who{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;line-height:1.25}
.account-btn .who b,.account-btn .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-btn .who b{font-weight:500;font-size:13px}
.account-btn .who span{font-size:12px;color:var(--muted)}
.workspace .app-side .account-btn>.lucide{width:14px;height:14px;color:var(--muted);flex:none}
.menu.up{top:auto;bottom:calc(100% + 4px);left:12px;right:12px}
.workspace .app-side .account-menu .menu>button,.workspace .app-side .account-menu .menu>a{width:100%;height:auto;padding:7px 10px;gap:8px;color:var(--fg)}
.menu .sep{position:relative;margin-top:9px}
.menu .sep::before{content:"";position:absolute;left:-4px;right:-4px;top:-5px;border-top:1px solid var(--border)}
.menu-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 4px 10px;font-size:13px;color:var(--fg)}
.menu-row>span{display:flex;align-items:center;gap:8px}
.menu .lucide{width:14px;height:14px}
.theme-seg{display:flex;gap:2px;padding:2px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg)}
.workspace .app-side .theme-seg button{width:26px;height:24px;padding:0;justify-content:center;border-radius:4px;color:var(--muted)}
.workspace .app-side .theme-seg button[aria-pressed="true"]{background:var(--glass-h);color:var(--fg)}
.workspace .app-side .theme-seg .lucide{width:13px;height:13px}
@media(max-width:860px){
 .workspace .app-side{align-items:center}
 .workspace .app-side a.brand{order:0;flex:1;min-width:0;margin:0;padding:0 4px;height:44px;border:0}
 .workspace .app-side .account-menu{order:1;margin:0;padding:0;border:0}
 .workspace .app-side nav{order:2;width:100%}
 .workspace .app-side .account-btn{padding:4px;width:auto}
 .account-btn .who,.workspace .app-side .account-btn>.lucide{display:none}
 .menu.up{top:calc(100% + 4px);bottom:auto;left:auto;right:0;min-width:230px}
}
.workspace .app-top{padding:0 var(--gutter);gap:8px}
.stat-meter,.spark-wrap,#api-live{display:flex;flex-direction:column;gap:8px}
#api-live{gap:var(--card-gap)}
@media(max-width:860px){.workspace .app-side{padding:12px var(--gutter)}}

.auth-card .stack .btn-primary{margin-top:8px}
.auth-card .field{gap:8px}


/* onboarding */
.onboard{padding-block:48px;display:flex;justify-content:center}
.onboard-card{width:100%;max-width:640px;border:1px solid var(--border);border-radius:var(--r-xl);background:var(--card);box-shadow:var(--mockup-shadow);padding:32px;display:flex;flex-direction:column;gap:24px}
@media(max-width:600px){.onboard-card{padding:var(--card-pad)}}
.onboard h1{font-size:24px}
.onboard [data-onboard]{display:flex;flex-direction:column;gap:16px}
.onboard .form-grid{gap:16px}
.onboard .form-actions{margin-top:8px}
.onboard .form-actions.between{display:flex;justify-content:space-between;align-items:center}
.onboard .btn-link{font-size:13px;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;font-weight:500}
.onboard .btn-link:hover{color:var(--fg)}
.onboard .fine{font-size:12.5px;color:var(--muted)}
.stepper{list-style:none;display:flex;align-items:center;gap:12px;padding:0;margin:0 0 4px}
.stepper li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted-2);white-space:nowrap}
.stepper li span{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border-2);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--muted-2)}
.stepper li:not(:last-child)::after{content:"";width:32px;height:1px;background:var(--border-2)}
.stepper li.cur{color:var(--fg);font-weight:600}
.stepper li.cur span{border-color:var(--fg);color:var(--fg)}
.stepper li.done{color:var(--muted)}
.stepper li.done span{background:var(--ok);border-color:var(--ok);color:#0a0a0a}
@media(max-width:600px){.stepper li:not(.cur){font-size:0}.stepper li:not(.cur) span{font-size:13px}.stepper li:not(:last-child)::after{width:16px}}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--card-gap)}
@media(max-width:600px){.cols-2{grid-template-columns:1fr}}
.cols-2 .col .price .n{font-size:40px}

/* export activity: fixed columns so status and action line up on every row */
.export-row{display:grid;grid-template-columns:32px minmax(0,1fr) 96px 112px 172px;grid-template-areas:"icon main src status act";align-items:center;column-gap:16px;padding:var(--row-y) 0;border-top:1px solid var(--border);font-size:14px}
.export-row:first-child{border-top:0}
.export-row .ex-icon{grid-area:icon}
.export-row .ex-main{grid-area:main;display:flex;flex-direction:column;gap:4px;min-width:0}
.export-row .ex-main b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.export-row .meta{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.export-row .ex-src{grid-area:src;font-size:13px;color:var(--muted)}
.ex-status{grid-area:status;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg);white-space:nowrap}
.ex-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted-2);flex:none}
.ex-status.ok::before{background:var(--ok)}
.ex-status.bad{color:var(--bad)}.ex-status.bad::before{background:var(--bad)}
.ex-status.live::before{background:var(--brand)}
.ex-status.muted{color:var(--muted)}
.export-row .ex-act{grid-area:act;justify-self:end;display:flex;align-items:center;gap:4px}
.export-row .ex-dl,.export-row .ex-more{position:relative;display:flex}
.export-row .ex-more .btn{width:32px;padding:0;justify-content:center}
.export-row .ex-act .btn .lucide{width:14px;height:14px}
.export-row .ex-act .btn .lucide:last-child:not(:first-child){margin-left:-2px;color:var(--muted)}
.menu a{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;border-radius:var(--r-sm);color:var(--fg);font-size:13px;text-decoration:none}
.menu a:hover,.menu a:focus-visible{background:var(--glass)}
.notice .btn-link{background:none;border:0;padding:0;color:var(--brand-fg);font-weight:500;cursor:pointer;font-size:inherit}
.onboard .form-actions.between{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.step-cta{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
#overview-setup{display:flex;flex-direction:column;gap:var(--card-gap)}

/* export tab: one column, three stages */
.tool-panel.export-flow{max-width:none;gap:var(--card-gap)}
.panel .tool-panel .card{padding:var(--card-pad)}
.export-flow #searchControls{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"store country ." "search search search";gap:12px 8px;align-items:center}
.export-flow .hero-search-row{display:contents}
.export-flow .search-container{grid-area:search}
.export-flow .store-filter{grid-area:store;width:max-content;grid-template-columns:repeat(3,auto);padding:3px}
.export-flow .filter-btn{height:32px;padding:0 14px;font-size:13px}
.export-flow .region-dropdown{grid-area:country}
.export-flow .region-select{height:40px;font-size:13.5px;padding:0 32px 0 12px;background-position:right 10px center;min-width:200px}
.export-flow .search-input{height:48px;font-size:15px;padding-left:40px}
.export-flow .search-icon{left:14px}
.export-flow #panelPlaceholder{display:none!important}
@media(max-width:600px){.export-flow #searchControls{grid-template-columns:1fr;grid-template-areas:"store" "country" "search"}.export-flow .store-filter{width:100%;grid-template-columns:repeat(3,1fr)}}
.export-flow>#searchControls,.export-flow>#panelPlaceholder,.export-flow>#selectedApp,.export-flow>#exportConfig,.export-flow>.flow-note,.export-flow>#progressSection{max-width:760px;width:100%}
@media(min-width:1080px){
.export-flow.split{display:grid;grid-template-columns:420px minmax(0,1fr);column-gap:var(--card-gap);row-gap:var(--card-gap);align-items:start}
.export-flow.split>*{grid-column:1;max-width:none}
.export-flow.split>.export-preview{grid-column:2;grid-row:1/span 8;position:sticky;top:16px}
}
.export-flow .selected-app{padding:12px var(--card-pad)}
.flow-note{margin:-4px 4px 0}
.panel .card.export-preview{padding:0;gap:0;overflow:hidden}
.preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:var(--card-gap) var(--card-pad);border-bottom:1px solid var(--border)}
.preview-title{display:flex;flex-direction:column;gap:4px;min-width:0}
.preview-head h2{font-size:15px;letter-spacing:-.01em}
.preview-title .sm{font-size:12.5px}
/* rating summary in the App Store idiom: average left, five stacked bars right */
.preview-summary{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px 32px;align-items:center;padding:var(--card-pad);border-bottom:1px solid var(--border)}
.avg{display:flex;flex-direction:column;gap:8px}
.avg .sm{font-size:12.5px}
.avg-n{font-size:40px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.avg-stars{position:relative;display:inline-flex;width:max-content;gap:0}
.avg-stars .base,.avg-stars .fill{display:inline-flex;gap:2px;white-space:nowrap}
.avg-stars .fill{position:absolute;left:0;top:0;overflow:hidden}
.avg-stars svg{width:14px;height:14px;flex:none}
.mix{display:flex;flex-direction:column;gap:3px;max-width:480px}
.mix-row{display:grid;grid-template-columns:12px minmax(0,1fr) 44px;align-items:center;gap:8px;height:24px;padding:0 8px;margin:0 -8px;border:0;border-radius:var(--r-sm);background:none;color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.mix-row:hover{background:var(--glass);color:var(--fg)}
.mix-row[aria-pressed="true"]{background:var(--glass-h);color:var(--fg)}
.mix-row[aria-pressed="true"] .mix-track{background:var(--border-2)}
.mix-row:disabled{cursor:default}
.mix-row:disabled:hover{background:none;color:var(--muted)}
.mix-l{font-weight:500;color:var(--fg)}
.mix-row.zero .mix-l,.mix-row.zero .mix-n{color:var(--muted-2)}
.mix-track{height:6px;border-radius:3px;background:var(--glass-h);overflow:hidden}
.mix-fill{display:block;height:100%;width:0;border-radius:3px;transition:width .45s cubic-bezier(.2,.7,.2,1)}
.mix-n{text-align:right}
.mix-row:focus-visible,.th-sort:focus-visible,.token:focus-visible,.preview-table tr.row:focus-visible{outline:2px solid var(--border-2);outline-offset:-2px}
@media(max-width:700px){.preview-summary{grid-template-columns:1fr}.avg{flex-direction:row;align-items:baseline;gap:10px}.avg-n{font-size:28px}}
/* toolbar */
.preview-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px var(--card-pad);border-bottom:1px solid var(--border)}
.tool-search{position:relative;display:flex;align-items:center;flex:1;min-width:180px;max-width:320px}
.tool-search .lucide,.tool-search svg{position:absolute;left:10px;width:14px;height:14px;color:var(--muted-2);pointer-events:none}
.tool-search input{width:100%;height:32px;padding:0 10px 0 30px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--fg);font-size:13px;outline:none}
.tool-search input::placeholder{color:var(--muted-2)}
.tool-search input:focus{border-color:var(--border-2);box-shadow:0 0 0 3px var(--glass-h)}
.token{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 8px 0 10px;border:1px solid var(--border-2);border-radius:999px;background:var(--glass);color:var(--fg);font-size:12.5px;font-weight:500;cursor:pointer}
.token span{color:var(--muted);font-size:14px;line-height:1}
.token:hover span{color:var(--fg)}
.tool-count{margin-left:auto;font-size:12.5px;font-variant-numeric:tabular-nums}
.preview-msg{margin:0;padding:var(--card-pad);font-size:13.5px;color:var(--muted);line-height:1.5}
.preview-wrap{border:0;border-radius:0;max-height:620px;overflow:auto;transition:opacity .2s ease-out}
/* collecting: header plus six 56px slots, filled once, then still */
.preview-wrap.feed{height:401px;max-height:none;overflow:hidden}
.preview-wrap.feed tr.row{cursor:default}
.preview-wrap.feed tr.row:hover td{background:none}
.preview-table{font-size:13px;table-layout:fixed;width:100%;min-width:560px}
.preview-table th{white-space:nowrap;padding:0 12px;height:40px;font-size:12px;font-weight:500;color:var(--muted)}
.preview-table th:first-child,.preview-table td:first-child{padding-left:var(--card-pad)}
.preview-table th:last-child,.preview-table td:last-child{padding-right:var(--card-pad)}
.preview-table th:nth-child(1){width:112px}.preview-table th:nth-child(3){width:112px}.preview-table th:nth-child(4){width:88px}
.th-sort{display:inline-flex;align-items:center;gap:4px;height:28px;margin:0 -6px;padding:0 6px;border:0;border-radius:var(--r-sm);background:none;color:inherit;font:inherit;cursor:pointer}
.th-sort:hover:not(:disabled){background:var(--glass-h);color:var(--fg)}
.th-sort:disabled{cursor:default}
.th-sort .chev{width:12px;height:12px;opacity:0;transition:transform .15s,opacity .15s}
.th-sort:hover:not(:disabled) .chev{opacity:.5}
.th-sort.active{color:var(--fg)}
.th-sort.active .chev{opacity:1}
.th-sort.asc .chev{transform:rotate(180deg)}
.preview-table tbody tr.row,.preview-table tbody tr.ghost{height:60px}
.preview-table tbody td{vertical-align:middle;padding:0 12px}
.preview-table .stars svg{width:12px;height:12px}
.stars.r4 svg.f{fill:var(--rate-4)}.stars.r3 svg.f{fill:var(--rate-3)}.stars.r2 svg.f{fill:var(--rate-2)}.stars.r1 svg.f{fill:var(--rate-1)}
.preview-table td.rv{max-width:0}
.rv-t,.rv-b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-t{font-size:14px;font-weight:500;color:var(--fg);line-height:1.35;letter-spacing:-.005em}
.rv-b{font-size:13px;color:var(--muted);line-height:1.4;margin-top:4px}
.preview-table tr.ghost td.rv .sk{display:block}
.preview-table tr.ghost td.rv .sk+.sk{margin-top:8px}
.preview-table td.m{white-space:nowrap}
.preview-table tr.row{cursor:pointer}
.preview-table tr.row:hover td{background:var(--glass)}
.preview-table tr.open td{border-bottom-color:transparent}
.preview-table tr.detail td{padding:0 12px 16px;white-space:normal}
.preview-table tr.detail p{margin:0;max-width:66ch;font-size:14px;line-height:1.6;color:var(--fg)}
.preview-table tr.detail .reply{margin-top:12px;padding:8px 12px;border-left:2px solid var(--border-2);color:var(--muted)}
.preview-table tr.detail .reply b{display:block;margin-bottom:4px;font-size:12px;font-weight:500;color:var(--fg)}
.sk{display:inline-block;height:9px;border-radius:5px;background:var(--glass-h);vertical-align:middle;max-width:100%}
.preview-foot{padding:12px var(--card-pad);border-top:1px solid var(--border);margin:0;font-size:12.5px}
.tag.live{color:var(--brand-fg);background:var(--brand-soft)}
.tag.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand)}
.preview-table tr.resolve{animation:calmfade .4s ease-out}
.preview-table tbody.fadein{animation:calmfade .2s ease-out}
@keyframes calmfade{from{opacity:0}to{opacity:1}}
#previewChip{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.preview-table tr.resolve,.preview-table tbody.fadein{animation:none}.mix-fill,.preview-wrap{transition:none}}

.panel .card.plan-summary{gap:0;padding:0}
.plan-summary>*{padding:var(--card-pad)}
.plan-summary .card-head{align-items:flex-start;min-height:0}
.plan-id{display:flex;flex-direction:column;gap:4px}
.plan-id h2{display:flex;align-items:center;gap:8px}
.plan-id h2 .tag{height:22px;font-size:11.5px;font-weight:500}
.plan-price{display:flex;align-items:baseline;gap:8px}
.plan-price .n{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.plan-price .per{font-size:13px;color:var(--muted)}
.plan-usage{border-top:1px solid var(--border-3);display:flex;flex-direction:column;gap:8px}
.plan-usage-head{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}
.plan-usage-head b{color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
.setting-rows{border-top:1px solid var(--border-3);display:flex;flex-direction:column;padding-top:8px!important;padding-bottom:8px!important}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0}
.setting-row+.setting-row{border-top:1px solid var(--border-3)}
.setting-row h3{font-size:14px;font-weight:500;color:var(--fg);margin:0 0 4px!important}
.invoices-table .c-status{width:120px}.invoices-table .c-act{width:120px}
@media(max-width:560px){.invoices-table{table-layout:auto}.invoices-table .c-status,.invoices-table .c-act{width:auto}.invoices-table td,.invoices-table th{white-space:nowrap;padding-left:0;padding-right:10px}}
.invoices-table td.num{font-variant-numeric:tabular-nums}
.invoices-table .btn .lucide{width:14px;height:14px}
.invoices-table td.end{text-align:right}
.billing-notes{list-style:none;display:flex;flex-direction:column;gap:8px;padding:0;font-size:12.5px;color:var(--muted-2);line-height:1.5}
.billing-notes li{position:relative;padding-left:12px}
.billing-notes li::before{content:"";position:absolute;left:0;top:.65em;width:4px;height:4px;border-radius:50%;background:var(--muted-2)}
@media(max-width:640px){
 .setting-row{flex-wrap:wrap}
}

.plans-section{display:flex;flex-direction:column;gap:var(--card-gap)}
.section-head{display:flex;flex-direction:column;gap:4px}
.section-head h2{font-size:16px}
.col .nm .tag{margin-left:auto;height:22px;font-size:11.5px;font-weight:500}
.col.current{border-color:var(--border-2)}
.col .plan-state{height:40px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border);border-radius:var(--r-md);font-size:13px;color:var(--muted)}
.col .includes{font-size:12px;font-weight:500;color:var(--muted-2)}
.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.settings-form .form-foot{grid-column:1/-1;display:flex;align-items:center;gap:12px}
.form-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ok)}
.form-status .lucide{width:14px;height:14px}
.setting-row .fg{color:var(--fg)}
.setting-rows.flush{border-top:0;padding:0!important}
.setting-rows.flush .setting-row:first-child{padding-top:0}
.setting-rows.flush .setting-row:last-child{padding-bottom:0}
.setting-row>div{flex:1;min-width:0}
.setting-row h3{display:flex;align-items:center;gap:8px}
.setting-row h3 .tag{height:20px;padding:0 8px;font-size:11px;font-weight:500}
.pay-card{display:flex;align-items:center;gap:12px;margin-top:8px}
.pay-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pay-mark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:30px;border:1px solid var(--border);border-radius:5px;background:var(--glass);color:var(--muted);flex:none}
.pay-mark svg{width:26px;height:18px}
.pay-mark b{font-size:9px;font-weight:700;letter-spacing:.02em;color:var(--fg)}
.pay-mark b.visa{font-style:italic;font-size:10px;letter-spacing:.04em}
.pay-num{font-size:14px;color:var(--fg)}
.pay-num .mono{font-size:13px}
.row-icon{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--r-md);background:var(--glass);color:var(--muted)}
.row-icon .lucide,.row-icon .brand-mark{width:16px;height:16px}
.sessions-table .c-device{width:44%}.sessions-table .c-act{width:110px}
.sessions-table td{color:var(--muted)}
.sessions-table .device{display:inline-flex;align-items:center;gap:8px;color:var(--fg);font-weight:500}
.sessions-table .device .lucide{width:16px;height:16px;color:var(--muted)}
.sessions-table .device .tag{height:20px;padding:0 8px;font-size:11px;font-weight:500}
.sessions-table td.end{text-align:right}
@media(max-width:640px){
 .settings-form{grid-template-columns:1fr}
 .setting-rows.flush .setting-row{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px;row-gap:12px;align-items:start}
 .setting-rows.flush .setting-row>.btn{grid-column:2;justify-self:start}
 .sessions-table thead,.sessions-table colgroup{display:none}
 .sessions-table,.sessions-table tbody{display:block}
 .sessions-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"dev act" "seen act";row-gap:4px;padding:12px 0;border-bottom:1px solid var(--border-3)}
 .sessions-table tr:last-child{border-bottom:0}
 .sessions-table td{display:block;height:auto!important;padding:0!important;border:0!important}
 .sessions-table td:nth-child(1){grid-area:dev}
 .sessions-table td:nth-child(2){display:none}
 .sessions-table td:nth-child(3){grid-area:seen;font-size:12px;padding-left:26px!important}
 .sessions-table td:nth-child(3)::before{content:"Last active "}
 .sessions-table td.end{grid-area:act;align-self:center}
}
.card-head>.btn-ghost:last-child,.table.list td.end .btn-ghost,.endpoint>.btn-ghost{margin-right:-12px}
@media(max-width:640px){
 .export-row{grid-template-columns:32px minmax(0,1fr) auto;grid-template-areas:"icon main main" ". status act";row-gap:10px}
 .export-row .ex-src{display:none}
 .export-row .meta{white-space:normal}
}
.seg.inline{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg.inline::-webkit-scrollbar{display:none}
@media(max-width:640px){
 .keys-table tr:last-child{border-bottom:0;padding-bottom:0}
 .setting-row>div{flex:1 1 100%}
}
.card-head .head-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.list-unit{display:flex;flex-direction:column;gap:var(--card-gap)}
.panel .card:has(>.list-unit){gap:var(--card-pad)}
/* Done card: text group (4px inside) → 24px → action row (downloads, then the secondary action pushed right). */
.export-flow .progress-section.done{display:flex!important;flex-direction:column;align-items:stretch;gap:24px}
.export-flow .progress-section.done .export-complete-summary{display:flex!important;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.export-flow .export-complete-summary .complete-icon{display:none}
.export-flow .progress-section.done .complete-title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;letter-spacing:0;margin:0 0 4px}
.export-flow .progress-section.done .complete-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.export-flow .progress-section.done .complete-detail{font-size:14px;color:var(--fg);margin:0}
.export-flow .progress-section.done .complete-note{font-size:13px;color:var(--muted);margin:0}
.export-flow .progress-section.done .done-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.export-flow .progress-section.done .download-links{gap:8px;margin:0}
.export-flow .progress-section.done .export-another-btn{margin-left:-12px;height:32px;padding:0 12px;font-size:13px;gap:8px}
.export-flow .download-btn{height:40px;padding:0 16px;font-size:14px;font-weight:500;border-radius:var(--r-md)}
.export-flow .change-app-btn{text-decoration:none;padding:8px 12px;margin-right:-12px;border-radius:var(--r-md)}
.export-flow .change-app-btn:hover{background:var(--glass)}
.preview-table td.d{color:var(--muted);font-size:13px;white-space:nowrap}
.cols .col{gap:24px}
.col-head{display:flex;flex-direction:column;gap:8px}
.col-buy{display:flex;flex-direction:column;gap:16px}
.col-list{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--border)}
/* Split view gives search a 420px column: stack the controls and keep results above the preview card. */
.export-flow.split #searchControls{grid-template-columns:minmax(0,1fr);grid-template-areas:"store" "country" "search";position:relative;z-index:5}
.export-flow.split .store-filter{width:100%;grid-template-columns:repeat(3,1fr)}
.export-flow.split .region-select{width:100%;min-width:0}

/* Plan tier: a quiet label beside the account name (Vercel, Clerk, Cursor). No effects; Pro gets the one brand tint. */
.account-btn .name-line{display:flex;align-items:center;gap:6px;min-width:0}
.account-btn .name-line b{min-width:0}
.account-btn .tier{flex:none;height:16px;padding:0 5px;border-radius:4px;background:var(--glass-h);color:var(--muted);font-size:10.5px;font-weight:600;line-height:16px;letter-spacing:.02em}
.account-btn .tier.pro{background:var(--brand-soft);color:color-mix(in srgb,var(--brand-fg) 75%,var(--fg))}
.account-btn .tier[hidden]{display:none}
/* Failed renewal: one persistent banner above every tab until the card is fixed or the plan is replaced.
   Title plus one line; the action is quiet and in the banner's tone so it never competes with the page's primary button. */
.billing-alert{display:flex;align-items:center;gap:12px;margin-bottom:var(--page-gap);padding:12px 12px 12px 16px;border-radius:var(--r-md);background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 22%,transparent);font-size:14px;line-height:1.45}
.billing-alert[hidden]{display:none}
.billing-alert>.lucide{width:18px;height:18px;flex:none;color:var(--bad);align-self:flex-start;margin-top:1px}
.billing-alert .ba-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.billing-alert .ba-copy b{font-weight:600;color:var(--fg)}
.billing-alert .ba-copy span{color:color-mix(in srgb,var(--fg) 82%,transparent)}
.billing-alert .btn{flex:none;background:transparent;border:1px solid color-mix(in srgb,var(--bad) 50%,transparent);color:var(--fg);font-weight:500}
.billing-alert .btn:hover{background:var(--bad-soft)}
@media(max-width:640px){.billing-alert{flex-wrap:wrap}.billing-alert .ba-copy{flex-basis:calc(100% - 30px)}.billing-alert .btn{margin-left:30px}}
/* Phones: the sidebar becomes a top bar with a menu button; sections open as a list below it. */
.workspace .nav-toggle{display:none}
@media(max-width:860px){
 .workspace .app-side{flex-direction:row;flex-wrap:wrap;position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--border);padding:8px var(--gutter);gap:8px}
 .workspace .app-side .nav-toggle{order:2;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r-md);background:none;color:var(--fg);cursor:pointer}
 .workspace .app-side .nav-toggle .lucide{width:18px;height:18px}
 .workspace .app-side .account-menu{order:1}
 .workspace .app-side nav{order:3;width:100%;display:none;flex-direction:column;flex-wrap:nowrap;gap:2px;padding:4px 0 8px}
 .workspace .app-side.open nav{display:flex}
 .workspace .app-side nav .sec{display:block;padding:12px 12px 4px}
 .workspace .app-side nav a,.workspace .app-side nav button{height:40px;width:100%;justify-content:flex-start}
 .workspace .app-top{display:none}
}