.key-layout [hidden] { display:none!important; }
.key-nav { white-space:nowrap; font-family:var(--sans); font-size:13px; font-weight:600; color:var(--vs-text); padding:7px 10px; border:1px solid var(--vs-line2); border-radius:6px; }
.key-nav[data-connected=true] { border-color:var(--vs-primary); color:var(--vs-primary); }
.key-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,6rem); padding:3.5rem 0; align-items:start; }
.key-intro h1 { font-size:clamp(2.4rem,4.2vw,4rem); letter-spacing:-.05em; line-height:1.1; margin:1.3rem 0 2rem; }
.key-intro h1 span { background:linear-gradient(100deg,var(--vs-gradient-start),var(--vs-gradient-mid) 48%,var(--vs-gradient-end)); background-clip:text; -webkit-text-fill-color:transparent; }
.key-layout p { color:var(--vs-muted); line-height:1.8; }
.key-guidance { border-top:1px solid var(--vs-line2); margin-top:2rem; padding-top:1rem; }
.key-guidance h2 { font-size:1.1rem; margin-bottom:.8rem; }
.key-guidance p+p { margin-top:1rem; }
.key-card { min-width:0; padding:clamp(1.3rem,3vw,2.5rem); }
.key-card h2 { font-size:1.8rem; margin:1rem 0 1.8rem; }
.key-card label { display:block; margin-bottom:.65rem; font-size:.9rem; }
.key-card input { box-sizing:border-box; width:100%; padding:.9rem; border:1px solid var(--vs-line2); border-radius:7px; background:var(--vs-bg2); color:var(--vs-text); font:14px var(--mono); }
.key-card input:focus-visible { outline:2px solid var(--vs-primary); outline-offset:2px; }
.key-card .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.key-card .actions .btn { box-sizing:border-box; width:100%; min-width:0; min-height:44px; justify-content:center; text-align:center; }
.key-request-access { margin:.9rem 0 0; text-align:center; font-size:.85rem; }
.key-card button:disabled { opacity:.55; cursor:wait; }
.key-state { display:flex; align-items:center; gap:.6rem; }
.key-status-dot { width:7px; height:7px; border-radius:50%; background:var(--vs-primary); }
.key-facts { margin:1.5rem 0; }
.key-facts>div { display:flex; justify-content:space-between; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--vs-line2); font-size:.85rem; }
.key-facts dt { color:var(--vs-muted); flex:0 0 38%; }
.key-facts dd { min-width:0; text-align:right; margin:0; overflow-wrap:anywhere; }
.key-footnote { font-size:.78rem; margin:1rem 0; }
#key-state-description { margin-top:.75rem; }
.key-continue { margin:1.5rem 0 0; }
#key-connect-form { margin-top:1.6rem; }
#key-connect { width:100%; justify-content:center; }
#key-message[data-tone="error"] { border-left-color:var(--vs-risk-danger); color:var(--vs-risk-danger); }
#key-message[data-tone="success"] { border-left-color:var(--vs-risk-safe); }
#key-message { border-left:3px solid var(--vs-primary); padding:.6rem .9rem; margin:1.2rem 0 0; background:var(--vs-panel2); font-size:.85rem; }
@media(max-width:1050px){.key-layout{gap:2rem}.key-nav{font-size:11px;padding:6px 8px}}
@media(max-width:760px){.key-layout{grid-template-columns:1fr;padding:2rem 0}.key-intro h1{font-size:2.7rem}.key-guidance{display:none}.key-facts>div{font-size:.8rem}}

.key-identity { margin-bottom:0; }
.key-identity:not([hidden]) + .key-facts { margin-top:0; }
[data-balance-state="available"] { color:var(--vs-green); }
[data-balance-state="low"] { color:var(--vs-amber); }
[data-balance-state="critical"], [data-balance-state="empty"] { color:var(--vs-red); }
#key-balance { font-weight:600; }
#key-balance-note { display:block; margin-top:.25rem; font-size:.75rem; }
.usage-layout { padding:2.5rem 0; }
.usage-layout [hidden] { display:none!important; }
.usage-heading { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.usage-heading h1 { font-size:clamp(1.8rem,4vw,2.6rem); margin:.7rem 0; }
.usage-heading p,.usage-note,.usage-footnote { color:var(--vs-muted); line-height:1.65; }
.usage-panel { padding:clamp(1rem,3vw,2rem); }
.usage-toolbar,.usage-pagination { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.usage-toolbar { justify-content:space-between; flex-wrap:nowrap; align-items:center; }
#usage-refresh { flex:0 0 32px;width:32px;height:32px;margin:0;cursor:pointer; }
#usage-content:empty { min-height:180px; }
.usage-tabs { display:flex; flex:1; min-width:0; margin:0; gap:.6rem; }
.usage-cycle-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem 2rem; margin:1.5rem 0; padding:1.2rem 0; border-top:1px solid var(--vs-line2); }
.usage-cycle-details dt { color:var(--vs-muted); font-size:.85rem; margin-bottom:.4rem; }
.usage-cycle-details dd { margin:0; color:var(--vs-text); font-size:1rem; font-weight:600; line-height:1.6; overflow-wrap:anywhere; }
.usage-note { margin:1.1rem 0; font-size:.85rem; }
.usage-message { margin:1rem 0; }
.usage-message:empty { display:none; }
.record-small { display:none; }
.usage-adjustment { margin-right:.4rem;color:var(--vs-muted);font:400 .7rem var(--sans); }
.usage-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.usage-table th,.usage-table td { padding:.65rem .6rem; text-align:left; border-bottom:1px solid var(--vs-line2); }
.usage-table th { color:var(--vs-muted); font-size:.75rem; font-weight:500; }
.usage-table .usage-credit { color:var(--vs-green); }
.usage-pagination { justify-content:space-between; margin-top:1rem; }
.usage-page-actions { display:flex; gap:.5rem; }
.usage-page-actions .btn { width:96px; min-height:40px; padding:8px 10px; justify-content:center; }
.usage-table .usage-mono { font-family:var(--mono); font-size:.78rem; font-variant-numeric:tabular-nums; }
.usage-pagination span,.usage-footnote { font-size:.85rem; color:var(--vs-muted); }
.usage-footnote { margin-top:1.2rem; }
.usage-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.usage-cards>div { border:1px solid var(--vs-line2); padding:1.2rem; border-radius:8px; }
.usage-cards dt { color:var(--vs-muted); font-size:.8rem; }
.usage-cards dd { margin:.7rem 0 0; font-size:1.7rem; font-weight:600; }
@media(max-width:680px){
 .usage-heading{align-items:flex-start;flex-direction:column}
 .usage-tabs{display:flex;width:auto}html body.vs-body .usage-tabs.section-tabs>button{min-width:0;min-height:44px;padding:8px 12px;white-space:nowrap;text-align:center;font-size:13px}.usage-cycle-details{grid-template-columns:1fr}
 .usage-pagination{flex-direction:column;gap:.6rem}.usage-page-actions{order:0}.usage-pagination>span{order:1;font-size:.75rem}
 #usage-content{padding-inline:4px}
 .usage-table,.usage-table tbody{display:block}
 .usage-table thead,.usage-table .record-wide,.usage-tokens td:nth-child(2){display:none}
 .usage-table .record-small{display:inline}
 .usage-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px 8px;align-items:center;border-bottom:1px solid var(--vs-line2)}
 .usage-table td{display:block;min-width:0;padding:0;border:0;font-size:.75rem;line-height:1.6;overflow-wrap:anywhere}
 .usage-table td:first-child,.usage-table td:last-child{grid-column:1/-1;color:var(--vs-muted);font-size:.69rem}
 .usage-table td:first-child{line-height:1.7}
 .usage-table td:last-child:before{content:'IP ';font-family:var(--sans);margin-right:.25rem}
 .usage-table tr[data-no-ip=true] td:last-child{display:none}
 .usage-tokens td:nth-child(4){grid-column:2/4;text-align:right}
 .usage-tokens td:nth-child(4):before{content:'Balance ';color:var(--vs-muted);font:400 .7rem var(--sans)}
 .usage-activity td:nth-child(3){color:var(--vs-muted);font-size:.7rem}
 .usage-activity td:nth-child(4){text-align:right;font-size:.7rem}
 .usage-cards{grid-template-columns:1fr;gap:.6rem}.usage-cards>div{display:flex;justify-content:space-between;align-items:center}.usage-cards dd{margin:0;font-size:1.5rem}
}

.key-mobile-balance { display:none; }
@media(max-width:950px){
 .nav-ready .key-mobile-balance:not([hidden]) { display:block;order:1;margin-left:auto;max-width:100%;min-width:0;box-sizing:border-box;padding:4px 8px;text-align:center;height:28px;font-size:11px;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
 .nav-ready .studio-header:has(.key-mobile-balance:not([hidden])) { display:grid;grid-template-columns:auto minmax(0,1fr) 24px; }
 .nav-ready .studio-header:has(.key-mobile-balance:not([hidden]))>.header-search { grid-column:1/-1;grid-row:2; }
 .nav-ready .studio-header:has(.key-mobile-balance:not([hidden]))>.nav-toggle { margin-left:0; }
}

.key-card .key-remember { display:flex;align-items:center;gap:.65rem;margin:1rem 0 1.3rem;cursor:pointer;line-height:1.5;font-size:.85rem; }
.key-card .key-remember input { flex:0 0 18px;width:18px;height:18px;padding:0;margin:0;accent-color:var(--vs-primary); }

.usage-chart { margin:1.5rem 0 1.8rem;padding:1.25rem 0 1.15rem;border-bottom:1px solid var(--vs-line2); }
.usage-chart-heading { display:flex;align-items:center;justify-content:space-between;gap:.75rem; }
.usage-chart-heading h2 { margin:0 0 .5rem;font-size:1rem;font-weight:600; }
.usage-chart-heading p { margin:0;color:var(--vs-muted);font-size:.8rem; }
.usage-chart-heading strong { font:600 clamp(1.5rem,3vw,2.1rem)/1.3 var(--sans);color:var(--vs-text);font-variant-numeric:tabular-nums; }
.usage-period { flex-shrink:0; }.usage-period button { font:500 .78rem var(--sans);padding:7px 10px; }
.usage-chart-plot { position:relative;min-height:240px;margin:1.2rem 0 .7rem; }
#usage-chart-svg { display:block;width:100%;height:240px;overflow:visible; }
.usage-axis-label { fill:var(--vs-muted);font:10px var(--mono); }
.usage-grid-line { stroke:var(--vs-line2);stroke-dasharray:3 5; }
.usage-axis-line { fill:none;stroke:var(--vs-line); }
.usage-bar { fill:url(#usage-bar-fill);transition:filter .15s; }
.usage-bar-hit { cursor:crosshair; }
[data-chart-day]:focus { outline:none; }[data-chart-day]:is(:focus,.is-active) .usage-bar { fill:var(--vs-primary);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--vs-primary) 45%,transparent)); }
[data-chart-day]:focus-visible .usage-bar-hit { stroke:var(--vs-primary);stroke-width:1; }
.usage-chart-tip { position:absolute;z-index:1;pointer-events:none;padding:7px 10px;border:1px solid var(--vs-line);border-radius:6px;background:var(--vs-bg);color:var(--vs-text);box-shadow:0 4px 18px #0002;font:11px var(--mono);white-space:nowrap; }
.usage-chart-note { margin:0;color:var(--vs-muted);font-size:.76rem;line-height:1.6; }
#usage-chart-message { color:var(--vs-muted);font-size:.82rem;line-height:1.6;margin:0;padding:1rem;position:absolute;left:46px;right:0;top:30%;background:var(--vs-panel);border-radius:6px; }
#usage-chart-message:empty { display:none; }
@media(prefers-reduced-motion:no-preference){.usage-bar{animation:usage-bar-in .4s ease-out;transform-box:fill-box;transform-origin:bottom}@keyframes usage-bar-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}}
@media(max-width:400px){.usage-chart-heading{align-items:flex-start;flex-wrap:wrap}.usage-period{margin-left:auto}.usage-chart-heading strong{font-size:1.7rem}}

.usage-last-ip { margin:1rem 0;color:var(--vs-muted);font-size:.8rem;line-height:1.6; }
.usage-last-ip span { margin-left:.5rem;color:var(--vs-text);font-family:var(--mono);overflow-wrap:anywhere; }
.key-dashboard-heading { display:none; }
.key-layout[data-account=true] { grid-template-columns:1fr;gap:1.5rem;padding:2.5rem 0; }
.key-layout[data-account=true] .key-guest-intro,.key-layout[data-account=true] .key-card-heading { display:none; }
.key-layout[data-account=true] .key-dashboard-heading { display:block; }
.key-dashboard-heading h1 { font-size:clamp(1.8rem,4vw,2.6rem);margin:.7rem 0;letter-spacing:-.03em; }
.key-dashboard-heading p { margin:0; }
.key-account-top { display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--vs-line2); }
.key-account-top>div { min-width:0; }
.key-account-top .btn { flex-shrink:0; }
.key-account-top p { margin-bottom:0;font-size:.85rem; }
.key-account-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem); }
.key-account-grid>section { display:flex;flex-direction:column;min-width:0; }
.key-account-grid h2 { font-size:1.05rem;margin:1.5rem 0 .5rem; }
.key-account-grid .key-facts { margin:.5rem 0; }
.key-account-grid .key-identity { margin-bottom:0; }
.key-account-grid .key-balance-row { flex-direction:column;gap:.5rem; }
.key-balance-row dd { text-align:left; }
.key-balance-row #key-balance { font-size:clamp(1.5rem,3vw,2rem); }
.key-account-grid .actions { margin-top:auto;padding-top:.5rem; }
.key-account-grid .key-tools .btn { background:transparent; }
.key-layout[data-account=true] #key-connect-form { max-width:560px; }
@media(max-width:760px){.key-account-grid{grid-template-columns:1fr;gap:1rem}.key-account-top{flex-wrap:wrap}.key-account-top .btn{min-height:40px}.key-account-grid h2{margin-top:1rem}.key-dashboard-heading h1{font-size:2rem}}

.key-reconnect summary { color:var(--vs-muted);font-size:.85rem;cursor:pointer; }
.key-layout[data-account=true] .key-reconnect { margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--vs-line2); }
.key-layout[data-account=false] .key-reconnect summary { display:none; }