@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Liquid glass system — ice seed */
:root {
  color-scheme: dark;
  --primary: #7cc6ff;
  --on-primary: #061e2e;
  --primary-container: #16394f;
  --on-primary-container: #d6ecff;
  --secondary: #bcc7d2;
  --secondary-container: #2b3540;
  --on-secondary-container: #e4eaf1;
  --tertiary: #cdb8f5;
  --tertiary-container: #3c2f5c;
  --error: #ffb4ab;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --amber: #e8c47a;
  --amber-container: #4a3a17;
  --surface: #0b0e13;
  --on-surface: #e8ebf0;
  --on-surface-variant: #a7b0bc;
  --c-lowest: #07090c;
  --c-low: #0e1218;
  --c-cont: #141926;
  --c-high: #1b2330;
  --c-highest: #263041;
  --outline: #8b96a5;
  --outline-variant: #2c3440;
  --inv-surface: #e8ebf0;
  --inv-on: #14181f;
  --glass-edge: rgb(255 255 255 / 12%);
  --glass-hi: rgb(255 255 255 / 9%);
  --e1: 0 1px 3px rgb(0 0 0 / 45%), 0 1px 2px rgb(0 0 0 / 35%);
  --e2: 0 6px 18px rgb(0 0 0 / 45%), 0 2px 8px rgb(0 0 0 / 35%);
  --e3: 0 24px 70px rgb(0 0 0 / 60%), 0 6px 18px rgb(0 0 0 / 40%);
  --sans: 'Roboto', ui-sans-serif, system-ui, sans-serif;
  --display: 'Space Grotesk', 'Roboto', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.05,.7,.1,1);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--on-surface); font: 15px/1.6 var(--sans);
  background:
    radial-gradient(1100px 560px at 82% -140px, rgb(124 198 255 / 20%), transparent 62%),
    radial-gradient(860px 560px at -12% 30%, rgb(205 184 245 / 15%), transparent 60%),
    radial-gradient(760px 620px at 55% 118%, rgb(64 190 200 / 10%), transparent 60%),
    radial-gradient(560px 420px at 32% 44%, rgb(124 198 255 / 6%), transparent 65%),
    var(--surface);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; }
button { color: inherit; touch-action: manipulation; }
::selection { background: rgb(124 198 255 / 32%); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
dialog { padding: 0; border: 0; background: transparent; }
svg { flex: none; }
* { scrollbar-width: thin; scrollbar-color: #3d4654 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { border: 3px solid var(--surface); border-radius: 8px; background: #3d4654; }
*::-webkit-scrollbar-track { background: transparent; }

.app-shell { min-height: 100vh; }

/* Drifting aurora field: saturated color for the glass to refract */
body::before {
  content: ''; position: fixed; inset: -12%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(460px 460px at 68% 18%, rgb(124 198 255 / 30%), transparent 70%),
    radial-gradient(560px 560px at 10% 80%, rgb(150 120 240 / 22%), transparent 70%),
    radial-gradient(420px 420px at 88% 90%, rgb(64 200 210 / 16%), transparent 70%);
  filter: blur(56px) saturate(1.3);
  animation: aurora-drift 48s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(3%, 3%, 0) scale(1.08); }
}
#capi-rev { color: var(--outline); font-size: 11px; }

/* ---------- Liquid glass drawer ---------- */
.sidebar {
  position: fixed; top: 12px; bottom: 12px; left: 12px; z-index: 5; display: flex; width: 256px; flex-direction: column; border-radius: 24px;
  padding: 18px 12px 12px; border-right: 1px solid var(--glass-edge);
  background: linear-gradient(165deg, rgb(44 54 72 / 55%), rgb(11 14 19 / 78%) 55%);
  backdrop-filter: blur(28px) saturate(1.7); -webkit-backdrop-filter: blur(28px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}
.brand { display: inline-flex; height: 48px; align-items: center; gap: 11px; padding: 0 14px; border-radius: 16px; font: 700 24px/1 var(--display); letter-spacing: -.5px; transition: background .15s var(--ease); }
.brand:hover { background: rgb(255 255 255 / 7%); }
.brand-mark { display: grid; flex: none; place-items: center; }
.brand-mark svg { display: block; width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 6px 20px rgb(124 198 255 / 30%), inset 0 1px 0 rgb(255 255 255 / 40%); }
.brand-name { letter-spacing: -.5px; }
.brand-dot, .brand-name > span, .brand > span:last-child > span { color: var(--primary); }
.sidebar-label { margin: 24px 16px 6px; color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: 1.2px; }
.sidebar nav { display: grid; gap: 2px; }
.nav-item {
  position: relative; display: flex; min-height: 52px; align-items: center; gap: 12px; padding: 0 20px 0 16px;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--on-surface-variant);
  text-align: left; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.nav-item:hover { background: rgb(255 255 255 / 7%); color: var(--on-surface); }
.nav-item:active { transform: scale(.98); }
.nav-item.active {
  border-color: rgb(255 255 255 / 10%);
  background: linear-gradient(120deg, rgb(124 198 255 / 22%), rgb(124 198 255 / 8%));
  color: #fff; font-weight: 700;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%);
}
.nav-item.active .nav-icon { color: var(--primary); }
.nav-icon { display: grid; width: 24px; height: 24px; flex: none; place-items: center; color: inherit; opacity: .85; }
.nav-icon svg { width: 21px; height: 21px; }
.nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-spacer { flex: 1; min-height: 16px; }
.sidebar-foot { display: grid; gap: 4px; margin-top: 10px; padding: 12px 4px 4px; border-top: 1px solid rgb(255 255 255 / 8%); }
.sidebar-model { display: flex; align-items: center; gap: 11px; margin: 0; padding: 10px 12px; border-radius: 16px; transition: background .15s var(--ease); }
.sidebar-model:hover { background: rgb(255 255 255 / 6%); }
.model-dot { display: inline-block; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--primary); box-shadow: 0 0 10px rgb(124 198 255 / 70%); }
.sidebar-model-text { display: grid; gap: 1px; min-width: 0; }
.sidebar-model-text b { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-model-text small { overflow: hidden; color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: .5px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-model-tag { margin-left: auto; flex: none; padding: 5px 11px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 999px; background: linear-gradient(150deg, rgb(124 198 255 / 20%), rgb(124 198 255 / 6%)); color: var(--primary); font: 700 12px var(--mono); }
.live-dot, .online-badge i, .status-pill i, .key-status i { display: inline-block; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px rgb(124 198 255 / 80%); }
.account-button { display: flex; align-items: center; gap: 11px; padding: 10px 10px; border: 0; border-radius: 16px; background: transparent; text-align: left; cursor: pointer; transition: background .15s var(--ease); }
.account-button:hover { background: rgb(255 255 255 / 6%); }
.account-button > i { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 50%; background: linear-gradient(150deg, rgb(124 198 255 / 30%), rgb(124 198 255 / 8%)); border: 1px solid rgb(255 255 255 / 12%); color: var(--primary); font-size: 14px; font-style: normal; font-weight: 700; }
.account-text { display: grid; gap: 1px; min-width: 0; }
.account-text b { overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.account-text small { overflow: hidden; color: var(--on-surface-variant); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-menu { margin-left: auto; flex: none; color: var(--on-surface-variant); font-size: 16px; letter-spacing: 1px; }

/* ---------- Layout ---------- */
.workspace { display: flex; min-height: 100vh; flex-direction: column; margin-left: 280px; }
.topbar {
  position: sticky; top: 0; z-index: 4; display: flex; height: 64px; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(18px, 4vw, 48px); border-bottom: 1px solid rgb(255 255 255 / 8%);
  background: linear-gradient(180deg, rgb(30 38 52 / 62%), rgb(11 14 19 / 66%));
  backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%);
  color: var(--on-surface-variant); font-size: 14px;
}
.topbar > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar > div:first-child span { padding: 0 8px; color: var(--outline); }
.topbar > div:first-child b { color: var(--on-surface); font-weight: 500; }
.topbar > div:last-child { display: flex; flex: none; align-items: center; gap: 10px; }
.status-pill { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 999px; background: linear-gradient(150deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%)); color: var(--on-surface-variant); font-size: 12.5px; font-weight: 500; }
.icon-button { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border: 1px solid transparent; border-radius: 50%; background: transparent; color: var(--on-surface-variant); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.icon-button:hover { background: rgb(255 255 255 / 8%); color: var(--on-surface); }
.icon-button svg { width: 19px; height: 19px; }
.page-content { width: min(1120px, 100%); flex: 1; margin: 0 auto; padding: clamp(24px, 4vw, 48px) clamp(18px, 4vw, 48px) 44px; }
.view { display: none; }
.view.active { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.view.active .welcome-row, .view.active .section-heading { animation: rise .45s var(--ease) both; }
.view.active .balance-hero, .view.active .admin-stats, .view.active .content-grid > *, .view.active .admin-grid > *, .view.active .docs-main > * { animation: rise .5s var(--ease) both; }
.view.active .content-grid > *:nth-child(2), .view.active .admin-grid > *:nth-child(2), .view.active .docs-main > *:nth-child(2) { animation-delay: .06s; }
.view.active .docs-main > *:nth-child(3) { animation-delay: .12s; }
.view.active .docs-main > *:nth-child(4) { animation-delay: .18s; }
.view.active .table-panel, .view.active .notice-bar, .view.active .info-callout, .view.active .endpoint-panel { animation: rise .5s var(--ease) both; animation-delay: .08s; }

/* ---------- Headings ---------- */
.welcome-row, .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.eyebrow { color: var(--on-surface-variant); font-size: 12px; font-weight: 500; letter-spacing: 1px; }
.welcome-row h1, .section-heading h1 { margin: 12px 0 10px; font: 600 clamp(36px, 4.6vw, 56px)/1.04 var(--display); letter-spacing: -1.5px; text-wrap: balance; }
.welcome-row h1 > span:first-of-type { color: #fff; }
.welcome-row h1 em, .section-heading h1 em { color: var(--primary); font-style: normal; }
.page-lede { max-width: 620px; margin: 0; color: var(--on-surface-variant); font-size: 16px; line-height: 1.6; }
.welcome-actions { display: flex; flex: none; gap: 10px; margin-bottom: 6px; }

/* ---------- Glossy buttons ---------- */
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; border: 0; border-radius: 999px; font-size: 14.5px; font-weight: 500; letter-spacing: .1px; white-space: nowrap; cursor: pointer; transition: filter .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease); }
.button:active { transform: scale(.97); }
.button:disabled { opacity: .5; cursor: wait; }
.primary { background: linear-gradient(180deg, #a9d9ff, #6db6f2); color: #061e2e; box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 10px 28px rgb(124 198 255 / 28%); }
.primary:hover { filter: brightness(1.07); box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 14px 34px rgb(124 198 255 / 36%); }
.secondary { background: var(--secondary-container); color: var(--on-secondary-container); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
.secondary:hover { filter: brightness(1.1); }
.danger { background: var(--error-container); color: var(--on-error-container); }
.danger:hover { filter: brightness(1.12); }
.text-link { padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--primary); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s var(--ease); }
.text-link:hover { background: rgb(124 198 255 / 10%); }
.inline-action { padding: 0 2px; border: 0; background: none; color: var(--primary); font-size: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.copy-code { padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--primary); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s var(--ease); }
.copy-code:hover { background: rgb(124 198 255 / 10%); }
.mini-copy { flex: none; padding: 7px 14px; border: 1px solid var(--glass-edge); border-radius: 999px; background: linear-gradient(150deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 2%)); color: var(--on-surface-variant); font: 500 11px var(--mono); letter-spacing: .5px; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); }
.mini-copy:hover { color: var(--primary); border-color: rgb(124 198 255 / 35%); }

/* ---------- Balance hero ---------- */
.balance-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin: 18px 0 26px; padding: 28px 30px;
  border: 1px solid var(--glass-edge); border-radius: 28px;
  background: linear-gradient(140deg, rgb(52 68 92 / 55%), rgb(13 17 23 / 72%) 60%);
  backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), var(--e2);
}
.hero-main { min-width: 0; }
.hero-value { margin-top: 8px; font: 600 clamp(54px, 7vw, 84px)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -2.5px; }
.hero-value small { color: var(--on-surface-variant); font: 500 clamp(20px, 2.4vw, 26px) var(--display); letter-spacing: 0; }
.hero-stats { display: flex; flex: none; gap: 0; }
.hero-stats > div { display: grid; gap: 3px; min-width: 124px; padding: 0 24px; border-left: 1px solid rgb(255 255 255 / 10%); }
.hero-stats > div:first-child { border-left: 0; padding-left: 0; }
.hero-stats > div:last-child { padding-right: 0; }
.hero-stats span { color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: .8px; }
.hero-stats b { font: 600 26px var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.hero-stats b small { color: var(--on-surface-variant); font-size: 14px; }

/* ---------- Cards & lists ---------- */
.content-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 16px; }
.panel, .table-panel, .admin-action-panel, .docs-card { border: 1px solid rgb(255 255 255 / 7%); border-radius: 24px; background: linear-gradient(170deg, rgb(30 37 49 / 60%), rgb(13 17 23 / 75%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), var(--e1); }
.model-panel, .activity-panel { min-width: 0; padding: 24px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.panel-heading h2, .table-panel h2, .admin-action-panel h2 { margin: 6px 0 0; font: 600 20px/1.3 var(--display); letter-spacing: -.2px; }
.online-badge { display: inline-flex; flex: none; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 999px; background: linear-gradient(150deg, rgb(124 198 255 / 20%), rgb(124 198 255 / 6%)); color: var(--primary); font-size: 12px; font-weight: 500; }
#model-list { display: grid; gap: 4px; }
.model-feature { display: flex; align-items: center; gap: 15px; padding: 14px 12px; border-radius: 18px; transition: background .15s var(--ease); }
.model-feature:hover { background: rgb(255 255 255 / 5%); }
.model-monogram { display: flex; width: 54px; height: 54px; flex: none; align-items: center; justify-content: center; border: 1px solid rgb(255 255 255 / 12%); border-radius: 18px; background: linear-gradient(150deg, rgb(124 198 255 / 24%), rgb(124 198 255 / 6%)); color: var(--primary); font: 700 14px var(--mono); box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%); }
.model-monogram span { display: block; line-height: 1; }
.model-copy { flex: 1; min-width: 0; }
.model-feature h3 { margin: 0 0 2px; font: 600 16px var(--display); }
.model-feature p { margin: 0; color: var(--on-surface-variant); font-size: 13.5px; }
.model-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.model-tags span { padding: 5px 12px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 999px; background: rgb(255 255 255 / 4%); color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: .4px; }
.model-details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; padding: 16px 12px 0; border-top: 1px solid rgb(255 255 255 / 8%); }
.model-details div { display: grid; align-content: start; gap: 5px; min-width: 0; }
.model-details small { color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: .8px; }
.model-details b { color: var(--on-surface); font-size: 14px; font-weight: 500; }
.model-idwrap { margin-top: 16px; }
.model-idwrap small { color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: .8px; }
#model-id-list { display: grid; margin-top: 8px; border: 1px solid rgb(255 255 255 / 9%); border-radius: 14px; overflow: hidden; background: rgb(0 0 0 / 22%); }
.model-id { display: flex; align-items: center; gap: 8px; padding: 10px 8px 10px 14px; border-bottom: 1px solid rgb(255 255 255 / 7%); }
.model-id:last-child { border-bottom: 0; }
.model-id b { flex: 1; overflow: hidden; font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.mono, code { font-family: var(--mono); }
.model-panel > .text-link { margin-top: 12px; }
.endpoint-panel { display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 24px; background: linear-gradient(120deg, rgb(124 198 255 / 16%), rgb(124 198 255 / 4%) 60%, rgb(13 17 23 / 70%)); border-color: rgb(124 198 255 / 22%); }
.endpoint-panel .eyebrow { color: var(--primary); }
.endpoint-mark { display: grid; width: 46px; height: 46px; flex: none; place-items: center; border-radius: 50%; background: linear-gradient(150deg, rgb(124 198 255 / 32%), rgb(124 198 255 / 10%)); border: 1px solid rgb(255 255 255 / 14%); color: var(--primary); box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%); }
.endpoint-mark svg { width: 21px; height: 21px; }
.endpoint-panel h3 { margin: 4px 0 3px; font-size: 16px; }
.endpoint-panel p { margin: 0; color: var(--on-surface-variant); font-size: 14px; }
.endpoint-panel > .text-link { margin-left: auto; flex: none; white-space: nowrap; }

/* ---------- Activity ---------- */
.activity-list { margin-top: 4px; }
.activity-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; transition: background .15s var(--ease); }
.activity-row + .activity-row { border-top: 1px solid rgb(255 255 255 / 6%); }
.activity-row:hover { background: rgb(255 255 255 / 4%); }
.activity-icon { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 50%; background: linear-gradient(150deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 3%)); border: 1px solid rgb(255 255 255 / 10%); color: var(--primary); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%); }
.activity-icon svg { width: 18px; height: 18px; }
.activity-row div { display: grid; gap: 2px; min-width: 0; }
.activity-row b { display: flex; overflow: hidden; align-items: center; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.activity-row small { color: var(--on-surface-variant); font-size: 12.5px; }
.activity-row > strong { margin-left: auto; flex: none; color: var(--on-surface); font: 500 13px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.model-dot { display: inline-block; width: 8px; height: 8px; flex: none; margin-right: 9px; border-radius: 50%; }
.md-a { background: var(--primary); box-shadow: 0 0 8px rgb(124 198 255 / 80%); }
.md-b { background: var(--tertiary); box-shadow: 0 0 8px rgb(205 184 245 / 60%); }
.md-c { background: var(--amber); box-shadow: 0 0 8px rgb(232 196 122 / 60%); }
.empty-state { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 26px 20px; color: var(--on-surface-variant); text-align: center; }
.empty-state > span { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 18px; background: linear-gradient(150deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 2%)); border: 1px solid rgb(255 255 255 / 10%); color: var(--on-surface-variant); box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%); }
.empty-state > span svg { width: 24px; height: 24px; }
.empty-state b { color: var(--on-surface); font-size: 15px; font-weight: 500; }
.empty-state small { max-width: 330px; color: var(--on-surface-variant); font-size: 13.5px; line-height: 1.55; }
.empty-state .button { margin-top: 10px; }
.empty-state.compact { min-height: 160px; }
.notice-bar { display: flex; align-items: flex-start; gap: 12px; margin-top: 22px; padding: 16px 4px 0; border-top: 1px solid rgb(255 255 255 / 8%); color: var(--on-surface-variant); font-size: 13.5px; line-height: 1.6; }
.notice-bar b { flex: none; color: var(--on-surface); font-size: 13.5px; font-weight: 500; }
.notice-close { margin: -8px -10px -8px auto; padding: 10px 14px; flex: none; border: 0; border-radius: 50%; background: none; color: var(--on-surface-variant); font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s var(--ease); }
.notice-close:hover { background: rgb(255 255 255 / 8%); color: var(--on-surface); }

/* ---------- Sections / tables ---------- */
.section-heading { align-items: flex-end; margin-bottom: 20px; }
.section-heading h1 { margin: 10px 0 8px; font-size: clamp(32px, 3.4vw, 44px); }
.section-heading > .button { flex: none; margin-bottom: 2px; }
.info-callout { margin-bottom: 18px; padding: 16px 20px; border-radius: 18px; background: linear-gradient(120deg, rgb(232 196 122 / 14%), rgb(232 196 122 / 4%)); border: 1px solid rgb(232 196 122 / 22%); color: #f0dcb4; font-size: 14px; line-height: 1.6; }
.table-panel { margin-bottom: 16px; padding: 12px 12px 8px; }
.table-panel > .panel-heading { margin-bottom: 4px; padding: 10px 12px 0; }
.count-badge { display: inline-grid; min-width: 26px; height: 24px; margin-left: 7px; padding: 0 10px; place-items: center; border-radius: 999px; background: var(--secondary-container); color: var(--on-secondary-container); font: 500 12px var(--mono); vertical-align: 2px; }
.keys-list { border-top: 1px solid rgb(255 255 255 / 7%); }
.key-row { display: flex; min-height: 76px; align-items: center; gap: 14px; padding: 6px 12px; border-radius: 14px; transition: background .15s var(--ease); }
.key-row + .key-row { border-top: 1px solid rgb(255 255 255 / 6%); }
.key-row:hover { background: rgb(255 255 255 / 4%); }
.key-icon { display: grid; width: 42px; height: 42px; flex: none; place-items: center; border-radius: 50%; background: linear-gradient(150deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 3%)); border: 1px solid rgb(255 255 255 / 10%); color: var(--primary); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%); }
.key-icon svg { width: 19px; height: 19px; }
.key-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.key-copy b { overflow: hidden; font-size: 14.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.key-copy code { overflow: hidden; color: var(--on-surface-variant); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.key-status { display: inline-flex; flex: none; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 999px; background: linear-gradient(150deg, rgb(124 198 255 / 20%), rgb(124 198 255 / 6%)); color: var(--primary); font-size: 12px; font-weight: 500; white-space: nowrap; }
.key-status i { width: 6px; height: 6px; }
.key-status.revoked { background: rgb(255 255 255 / 5%); color: var(--on-surface-variant); }
.key-status.revoked i { background: var(--outline); }
.key-created { display: grid; flex: none; gap: 3px; margin-left: auto; color: var(--on-surface-variant); font-size: 12px; text-align: right; }
.key-created small, .table-sub { display: block; margin-top: 3px; color: var(--on-surface-variant); font-size: 12px; }
.revoke-button { flex: none; padding: 10px 20px; border: 0; border-radius: 999px; background: transparent; color: var(--error); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background .15s var(--ease); }
.revoke-button:hover { background: rgb(255 180 171 / 10%); }
.activity-summary { display: grid; flex: none; gap: 3px; color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: .8px; text-align: right; }
.activity-summary b { color: var(--on-surface); font: 600 26px var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.table-meta { flex: none; color: var(--on-surface-variant); font-size: 13px; }
.table-scroll { overflow: auto; }
.data-table { width: 100%; min-width: 600px; border-collapse: collapse; }
.data-table th { position: sticky; top: 0; z-index: 1; padding: 14px 12px; border-bottom: 1px solid var(--outline-variant); background: rgb(14 18 24 / 96%); color: var(--on-surface-variant); text-align: left; font-size: 11.5px; font-weight: 500; letter-spacing: .6px; white-space: nowrap; }
.data-table td { padding: 16px 12px; border-bottom: 1px solid rgb(255 255 255 / 6%); color: var(--on-surface-variant); font-size: 14px; vertical-align: middle; }
.data-table tbody tr { transition: background .13s var(--ease); }
.data-table tbody tr:hover { background: rgb(255 255 255 / 2.5%); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td:first-child { color: var(--on-surface); }
.transaction-kind { display: inline-grid; width: 32px; height: 32px; margin-right: 10px; place-items: center; border-radius: 50%; background: rgb(255 180 171 / 12%); color: var(--error); font-size: 15px; vertical-align: middle; }
.positive-kind { background: rgb(124 198 255 / 14%); color: var(--primary); }
.transaction-label { vertical-align: middle; }
.data-table .positive { color: var(--primary); }
.usage-model { display: inline-flex; align-items: center; font-weight: 500; }
.empty-row { padding: 32px !important; color: var(--on-surface-variant) !important; text-align: center !important; }

/* ---------- Docs ---------- */
.docs-grid { display: grid; grid-template-columns: minmax(0, 1fr) 216px; align-items: start; gap: 16px; }
.docs-main { display: grid; gap: 14px; min-width: 0; }
.docs-card { padding: 24px; }
.step-title { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.step-title > i { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 50%; background: linear-gradient(150deg, rgb(124 198 255 / 26%), rgb(124 198 255 / 8%)); border: 1px solid rgb(255 255 255 / 12%); color: var(--primary); font: 600 13px var(--mono); font-style: normal; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%); }
.step-title h2 { margin: 2px 0 5px; font: 600 18px var(--display); }
.step-title p, .docs-card > p { margin: 0; color: var(--on-surface-variant); font-size: 14.5px; line-height: 1.65; }
.docs-card code { padding: 3px 8px; border-radius: 6px; background: rgb(255 255 255 / 6%); color: #d3e2f5; font-size: 12.5px; overflow-wrap: anywhere; }
.callout-note { padding: 16px 20px; border-radius: 18px; background: linear-gradient(120deg, rgb(232 196 122 / 13%), rgb(232 196 122 / 4%)); border: 1px solid rgb(232 196 122 / 20%); color: #f0dcb4; font-size: 14px; line-height: 1.6; }
.code-block { overflow: hidden; border-radius: 18px; background: rgb(4 6 9 / 82%); border: 1px solid rgb(255 255 255 / 9%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%); }
.code-top { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 8px 7px 16px; border-bottom: 1px solid rgb(255 255 255 / 8%); color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: .7px; }
.code-block pre { overflow: auto; margin: 0; padding: 16px; color: #ccd5e0; font: 12.5px/1.7 var(--mono); tab-size: 2; }
.code-block pre code { padding: 0; background: none; color: inherit; font: inherit; }
.docs-footnote { margin: 13px 0 0 !important; font-size: 13.5px !important; }
.docs-aside { position: sticky; top: 84px; display: grid; gap: 2px; padding: 12px; border: 1px solid var(--glass-edge); border-radius: 20px; background: linear-gradient(165deg, rgb(40 50 68 / 50%), rgb(11 14 19 / 70%)); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 9%); }
.docs-aside .eyebrow { margin: 8px 12px 4px; font-size: 11px; }
.docs-aside a { padding: 10px 12px; border-radius: 999px; color: var(--on-surface-variant); font-size: 14px; font-weight: 500; transition: background .15s var(--ease), color .15s var(--ease); }
.docs-aside a:hover { background: rgb(124 198 255 / 12%); color: var(--primary); }
.docs-aside hr { width: 100%; margin: 8px 0; border: 0; border-top: 1px solid rgb(255 255 255 / 8%); }
.docs-info { margin-top: 14px; scroll-margin-top: 84px; }
.docs-info h2 { margin: 8px 0; font: 600 20px var(--display); }
.docs-info > p { margin: 10px 0; color: var(--on-surface-variant); font-size: 14.5px; line-height: 1.7; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; margin: 16px 0; border: 1px solid rgb(255 255 255 / 9%); border-radius: 18px; background: linear-gradient(150deg, rgb(255 255 255 / 6%), transparent 55%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
.pricing-grid > div { display: grid; gap: 6px; padding: 16px 18px; border-right: 1px solid rgb(255 255 255 / 8%); }
.pricing-grid > div:last-child { border: 0; }
.pricing-grid small { color: var(--primary); font-size: 11px; font-weight: 500; letter-spacing: .6px; }
.pricing-grid b { color: var(--on-surface); font-size: 14.5px; font-weight: 500; }
.pricing-grid span { color: var(--on-surface-variant); font-size: 12.5px; }

/* ---------- Admin ---------- */
.admin-stats { display: flex; margin: 18px 0 16px; border: 1px solid var(--glass-edge); border-radius: 24px; background: linear-gradient(140deg, rgb(44 56 74 / 50%), rgb(12 16 21 / 70%)); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), var(--e2); overflow: hidden; }
.admin-stats > div { display: grid; flex: 1; gap: 3px; min-width: 0; padding: 18px 22px; border-left: 1px solid rgb(255 255 255 / 8%); }
.admin-stats > div:first-child { border-left: 0; }
.admin-stats span { color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: .8px; }
.admin-stats b { font: 600 28px var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.admin-action-panel { padding: 24px; }
.admin-action-panel h2 { margin: 8px 0 18px; }
.admin-form { display: grid; gap: 18px; }
.admin-form label, .modal-form label, .auth-card label { display: grid; gap: 0; color: var(--on-surface-variant); font-size: 13.5px; font-weight: 500; }
.admin-form input, .admin-form select, .modal-form input, .auth-card input { width: 100%; min-height: 54px; padding: 14px 16px 6px; border: 0; border-bottom: 1px solid var(--outline); border-radius: 12px 12px 0 0; background: rgb(255 255 255 / 5%); color: var(--on-surface); font-size: 16px; transition: border-color .15s var(--ease), background .15s var(--ease); }
.admin-form input::placeholder, .modal-form input::placeholder, .auth-card input::placeholder { color: var(--outline); }
.admin-form input:hover, .admin-form select:hover, .modal-form input:hover, .auth-card input:hover { background: rgb(255 255 255 / 8%); }
.admin-form input:focus, .admin-form select:focus, .modal-form input:focus, .auth-card input:focus { border-bottom: 2px solid var(--primary); outline: none; padding-bottom: 5px; }
.admin-form select { appearance: auto; }
.admin-form select option { background: var(--c-high); }
.admin-form label small { margin-top: 6px; color: var(--on-surface-variant); font-size: 12.5px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-form > .button { justify-self: start; }

/* ---------- Footer / snackbar / dialog ---------- */
.page-footer { display: flex; width: 100%; max-width: 1120px; justify-content: space-between; gap: 12px; margin: 0 auto; padding: 18px clamp(18px, 4vw, 48px) 22px; border-top: 1px solid rgb(255 255 255 / 7%); color: var(--on-surface-variant); font-size: 12.5px; }
.page-footer span:first-child { color: var(--on-surface); font-weight: 500; }
.toast-region { position: fixed; bottom: 20px; left: 20px; z-index: 20; display: grid; gap: 8px; width: min(370px, calc(100vw - 40px)); justify-items: start; }
.toast { padding: 14px 20px; border: 1px solid var(--glass-edge); border-radius: 12px; background: linear-gradient(150deg, rgb(52 62 78 / 82%), rgb(14 18 24 / 86%)); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), var(--e3); color: var(--on-surface); font-size: 14px; font-weight: 500; animation: snack-in .3s var(--ease) both; }
.toast.error { border-color: rgb(255 180 171 / 30%); }
@keyframes snack-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.modal-dialog { position: relative; width: min(480px, calc(100% - 32px)); padding: 28px; border: 1px solid var(--glass-edge); border-radius: 28px; background: linear-gradient(165deg, rgb(48 58 76 / 88%), rgb(13 17 23 / 92%)); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%), var(--e3); color: var(--on-surface); animation: modal-in .25s var(--ease) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-dialog::backdrop { background: rgb(0 0 0 / 55%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-dismiss { position: absolute; top: 10px; right: 12px; }
.modal-x { min-width: 42px; min-height: 42px; border: 0; border-radius: 50%; background: none; color: var(--on-surface-variant); font-size: 24px; line-height: 1; cursor: pointer; transition: background .15s var(--ease); }
.modal-x:hover { background: rgb(255 255 255 / 8%); color: var(--on-surface); }
.modal-orb { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(150deg, rgb(124 198 255 / 30%), rgb(124 198 255 / 8%)); border: 1px solid rgb(255 255 255 / 14%); color: var(--primary); box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%); }
.modal-orb svg { width: 24px; height: 24px; }
.modal-dialog h2, .modal-dialog > p { text-align: center; }
.success-orb { background: linear-gradient(150deg, rgb(124 198 255 / 30%), rgb(124 198 255 / 8%)); color: var(--primary); }
.warning-orb { background: linear-gradient(150deg, rgb(232 196 122 / 28%), rgb(232 196 122 / 8%)); color: var(--amber); }
.modal-dialog h2 { margin: 10px 0 8px; font: 600 24px/1.25 var(--display); }
.modal-dialog h2 em { color: var(--primary); font-style: normal; }
.modal-dialog > p { margin: 0 0 20px; color: var(--on-surface-variant); font-size: 15px; line-height: 1.6; }
.modal-form { display: grid; gap: 18px; text-align: left; }
.modal-form > .button { width: 100%; }
.full-button { width: 100%; margin-top: 16px; }
.secret-display { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 16px; border-radius: 14px; background: rgb(0 0 0 / 35%); border: 1px solid rgb(255 255 255 / 9%); box-shadow: inset 0 2px 12px rgb(0 0 0 / 40%); }
.secret-display code { min-width: 0; flex: 1; color: #bfe0ff; font-size: 13px; overflow-wrap: anywhere; }
.secret-display button { flex: none; display: grid; width: 46px; height: 46px; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--primary); cursor: pointer; transition: background .15s var(--ease); }
.secret-display button:hover { background: rgb(124 198 255 / 12%); }
.secret-display button svg { width: 20px; height: 20px; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.confirm-actions .button { min-width: 110px; }

/* ---------- Auth ---------- */
.auth-screen { display: grid; min-height: 100vh; grid-template-columns: minmax(420px, 560px) minmax(380px, 1fr); background: var(--surface); }
.auth-card { width: min(400px, calc(100% - 48px)); align-self: center; justify-self: center; padding: 34px 32px; border: 1px solid var(--glass-edge); border-radius: 28px; background: linear-gradient(165deg, rgb(44 54 72 / 60%), rgb(12 16 21 / 80%)); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), var(--e2); animation: rise .45s var(--ease) both; }
.auth-brand { margin: 0 0 40px; font-size: 28px; }
.auth-brand .brand-mark svg { width: 32px; height: 32px; }
.auth-eyebrow { margin-bottom: 12px; color: var(--on-surface-variant); font-size: 12px; font-weight: 500; letter-spacing: 1px; }
.auth-card h1 { margin: 0 0 12px; font: 600 clamp(36px, 4.2vw, 48px)/1.06 var(--display); letter-spacing: -1.5px; text-wrap: balance; }
.auth-card h1 span { color: var(--primary); }
.auth-subtitle { margin: 0 0 26px; color: var(--on-surface-variant); font-size: 15.5px; line-height: 1.6; }
.auth-card form { display: grid; gap: 16px; }
.auth-submit { width: 100%; margin-top: 6px; min-height: 52px; }
.auth-error { padding: 14px 18px; border-radius: 14px; background: var(--error-container); color: var(--on-error-container); font-size: 14px; line-height: 1.5; animation: snack-in .25s var(--ease) both; }
.auth-error-details { margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; background: rgb(0 0 0 / 30%); color: var(--on-surface-variant); font: 12px/1.6 var(--mono); overflow-wrap: anywhere; }
.auth-reload { width: 100%; margin-top: 16px; }
.auth-switch { justify-self: start; margin-top: 20px; padding: 10px 18px; border: 0; border-radius: 999px; background: none; color: var(--on-surface-variant); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); }
.auth-switch:hover { background: rgb(255 255 255 / 7%); color: var(--on-surface); }
.auth-switch b { color: var(--primary); font-weight: 500; }
.auth-meta { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 8%); color: var(--on-surface-variant); font-size: 11px; font-weight: 500; letter-spacing: .8px; }
.auth-chips { display: none; }
.register-label { margin: 0 0 2px; }
.auth-aside { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 10% 9%; background: linear-gradient(165deg, #14202e 0%, var(--surface) 62%); }
.auth-aside::before { position: absolute; top: -140px; right: -140px; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgb(124 198 255 / 14%), transparent 65%); content: ''; pointer-events: none; }
.aside-glow { display: none; }
.aside-mark { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 19px; background: linear-gradient(150deg, #a9d9ff, #6db6f2); color: #061e2e; font-size: 24px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 55%), 0 12px 30px rgb(124 198 255 / 30%); }
.auth-aside > p { position: relative; z-index: 1; margin: 0; font: 600 clamp(32px, 3.6vw, 50px)/1.08 var(--display); letter-spacing: -1.5px; text-wrap: balance; }
.aside-list { position: relative; z-index: 1; display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--glass-edge); border-radius: 20px; background: linear-gradient(160deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 1%)); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%); overflow: hidden; }
.aside-list li { display: grid; gap: 3px; padding: 16px 20px; border-bottom: 1px solid rgb(255 255 255 / 7%); animation: rise .45s var(--ease) both; }
.aside-list li:last-child { border-bottom: 0; }
.aside-list li:nth-child(2) { animation-delay: .06s; }
.aside-list li:nth-child(3) { animation-delay: .12s; }
.aside-list b { font-size: 15px; font-weight: 500; }
.aside-list span { color: var(--on-surface-variant); font-size: 13.5px; }
.auth-aside-foot { position: relative; z-index: 1; color: var(--on-surface-variant); font: 500 11px var(--mono); letter-spacing: .8px; }
.auth-loading { align-self: center; justify-self: center; display: grid; grid-column: 1 / -1; justify-items: center; gap: 12px; padding: 40px; text-align: center; }
.auth-loading .brand-mark svg { width: 38px; height: 38px; }
.auth-loading .brand-word { color: var(--on-surface); font: 700 28px var(--display); }
.auth-loading .brand-word span { color: var(--primary); }
.auth-loading p { color: var(--on-surface-variant); font-size: 14.5px; }

/* ---------- Liquid glass refraction ---------- */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sidebar, .topbar, .balance-hero, .admin-stats, .modal-dialog, .toast, .auth-card { isolation: isolate; }
.sidebar::before, .topbar::before, .balance-hero::before, .admin-stats::before,
.modal-dialog::before, .toast::before, .auth-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(155deg, rgb(255 255 255 / 8%), transparent 42%);
  backdrop-filter: blur(14px) saturate(1.6) brightness(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(1.08);
  filter: url(#lg-warp);
  pointer-events: none;
}
.topbar { overflow: clip; }
.balance-hero, .admin-stats, .modal-dialog, .toast, .auth-card { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .sidebar { width: 236px; }
  .workspace { margin-left: 260px; }
  .page-content { padding-right: 28px; padding-left: 28px; }
  .content-grid { grid-template-columns: 1fr; }
  .model-details { grid-template-columns: 1fr 1fr; }
  .auth-screen { grid-template-columns: minmax(380px, 1fr) minmax(300px, 1fr); }
}
@media (max-width: 880px) {
  body { font-size: 15px; }
  .sidebar { top: 8px; bottom: 8px; left: 8px; width: 72px; align-items: stretch; padding: 12px 8px; border-radius: 20px; }
  .brand { justify-content: center; padding: 0; }
  .brand > span:last-child, .sidebar-label { display: none; }
  .sidebar nav { width: 100%; margin-top: 16px; }
  .nav-item { flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: 8px 4px; font-size: 11px; font-weight: 500; }
  .nav-icon { width: auto; height: auto; }
  .nav-icon svg { width: 22px; height: 22px; }
  .nav-label { display: block; font-size: 11px; }
  .owner-nav { justify-content: center; }
  .sidebar-foot { border-top: 0; padding-top: 0; }
  .sidebar-model { justify-content: center; padding: 10px 4px; }
  .sidebar-model:hover { background: none; }
  .sidebar-model-text, .sidebar-model-tag { display: none; }
  .account-button { justify-content: center; padding: 8px 4px; }
  .account-text, .account-menu { display: none; }
  .workspace { margin-left: 88px; }
  .topbar { height: 60px; padding: 0 16px; }
  .status-pill { font-size: 0; gap: 0; padding: 10px; }
  .status-pill i { width: 8px; height: 8px; }
  .page-content { padding: 24px 16px 32px; }
  .welcome-row, .section-heading { align-items: stretch; flex-direction: column; gap: 16px; }
  .welcome-actions { align-self: stretch; flex-direction: column; }
  .welcome-actions .button { width: 100%; }
  .section-heading > .button { align-self: flex-start; }
  .balance-hero { flex-direction: column; align-items: stretch; gap: 20px; padding: 22px; }
  .hero-stats > div { min-width: 0; flex: 1; padding: 0 12px; }
  .hero-stats > div:first-child { padding-left: 0; }
  .content-grid, .admin-grid { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr; }
  .docs-aside { position: static; grid-row: 1; grid-template-columns: 1fr 1fr; align-items: center; }
  .docs-aside hr { grid-column: 1 / -1; }
  .key-row { flex-wrap: wrap; gap: 10px; padding: 14px 8px; }
  .key-copy { flex: 1 1 calc(100% - 56px); }
  .key-created { margin-left: 54px; text-align: left; }
  .key-status { margin-left: auto; }
  .revoke-button { margin-left: auto; }
  .activity-summary { align-self: flex-start; text-align: left; }
  .form-row { grid-template-columns: 1fr; }
  .page-footer { flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; }
  .auth-screen { grid-template-columns: 1fr; }
  .auth-card { width: min(440px, calc(100% - 40px)); margin: 24px 0; }
  .auth-brand { margin-bottom: 36px; }
  .auth-aside { order: -1; gap: 14px; padding: 28px 22px; }
  .auth-aside > p { font-size: 26px; }
  .aside-list, .auth-aside-foot { display: none; }
  .auth-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .auth-chips span { padding: 8px 16px; border: 1px solid var(--glass-edge); border-radius: 999px; background: rgb(255 255 255 / 5%); color: var(--on-surface-variant); font-size: 12.5px; font-weight: 500; }
  .auth-chips span:first-child { background: var(--primary-container); border-color: transparent; color: var(--on-primary-container); }
}
@media (max-width: 560px) {
  .topbar { height: 56px; padding: 0 12px; font-size: 13.5px; }
  .topbar > div:last-child { gap: 8px; }
  .page-content { padding: 20px 12px 28px; }
  .welcome-row h1 { font-size: 33px; }
  .section-heading h1 { font-size: 31px; }
  .page-lede { font-size: 15px; }
  .hero-value { font-size: 56px; }
  .hero-stats { flex-direction: column; gap: 14px; }
  .hero-stats > div { padding: 0; border-left: 0; border-top: 1px solid rgb(255 255 255 / 9%); padding-top: 12px; }
  .hero-stats > div:first-child { border-top: 0; padding-top: 0; }
  .model-feature { gap: 12px; padding: 12px 8px; }
  .model-monogram { width: 48px; height: 48px; font-size: 13px; border-radius: 14px; }
  .model-details { grid-template-columns: 1fr; gap: 12px; }
  .endpoint-panel { align-items: flex-start; flex-wrap: wrap; }
  .endpoint-panel > .text-link { margin-left: 59px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid > div { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 8%); }
  .pricing-grid > div:last-child { border: 0; }
  .auth-card { padding: 26px 20px; }
  .auth-card h1 { font-size: 34px; }
  .modal-dialog { width: calc(100% - 24px); padding: 24px; }
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .button { width: 100%; }
  .data-table { min-width: 540px; }
  .toast-region { top: auto; right: 12px; bottom: 14px; left: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sidebar::before, .topbar::before, .balance-hero::before, .admin-stats::before, .modal-dialog::before, .toast::before, .auth-card::before { filter: none; }
}