/* Liquid Glass: palette and wallpaper adapted from local hark-gateway.
   Opt-in skin only. Existing theme, components, API and account behaviour stay intact. */
html[data-ag-style="glass"] {
      --ground: #dce6f0;
      --sheet: rgba(255, 255, 255, .74);
      --raised: rgba(255, 255, 255, .38);
      --card: rgba(255, 255, 255, .5);
      --card-strong: rgba(255, 255, 255, .66);
      --active: rgba(255, 255, 255, .62);
      --fill: rgba(255, 255, 255, .5);
      --fill-strong: rgba(255, 255, 255, .78);
      --border: rgba(255, 255, 255, .62);
      --rule: rgba(30, 45, 62, .08);
      --control: rgba(30, 45, 62, .16);
      --track: rgba(30, 45, 62, .1);
      --muted: #4d545c;
      --faint: #5c636b;
      --primary: #0b63c4;
      --on-primary: #ffffff;
      --glass: rgba(255, 255, 255, .42);
      --glass-strong: rgba(250, 252, 255, .72);
      --glass-edge: rgba(255, 255, 255, .6);
      --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .32);
      --card-shadow: 0 8px 28px rgba(28, 54, 86, .1), 0 1px 2px rgba(28, 54, 86, .06);
      --glass-blur: blur(26px) saturate(185%);
      --wallpaper:
        radial-gradient(60% 55% at 8% 6%, rgba(126, 182, 238, .9), transparent 70%),
        radial-gradient(48% 46% at 92% 14%, rgba(255, 196, 150, .85), transparent 70%),
        radial-gradient(55% 50% at 78% 88%, rgba(150, 222, 200, .85), transparent 72%),
        radial-gradient(46% 44% at 16% 92%, rgba(246, 184, 204, .75), transparent 72%),
        radial-gradient(40% 40% at 50% 48%, rgba(255, 255, 255, .55), transparent 75%);
      --r-card: 20px;
      --r-sheet: 26px;
    }
html[data-ag-style="glass"][data-ag-appearance="dark"] {
      --ground: #070b12;
      --sheet: rgba(44, 48, 58, .8);
      --raised: rgba(255, 255, 255, .06);
      --card: rgba(30, 33, 41, .48);
      --card-strong: rgba(36, 40, 50, .66);
      --active: rgba(255, 255, 255, .14);
      --fill: rgba(255, 255, 255, .1);
      --fill-strong: rgba(255, 255, 255, .18);
      --border: rgba(255, 255, 255, .13);
      --rule: rgba(255, 255, 255, .07);
      --control: rgba(255, 255, 255, .16);
      --track: rgba(255, 255, 255, .1);
      --muted: #b6b9c0;
      --faint: #9da1a8;
      --primary: #1f6fd6;
      --on-primary: #ffffff;
      --glass: rgba(30, 33, 41, .45);
      --glass-strong: rgba(36, 40, 50, .76);
      --glass-edge: rgba(255, 255, 255, .12);
      --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05);
      --card-shadow: 0 10px 30px rgba(0, 0, 0, .35);
      --wallpaper:
        radial-gradient(60% 55% at 8% 6%, rgba(28, 86, 150, .85), transparent 70%),
        radial-gradient(48% 46% at 92% 14%, rgba(150, 82, 36, .6), transparent 70%),
        radial-gradient(55% 50% at 78% 88%, rgba(20, 110, 96, .7), transparent 72%),
        radial-gradient(46% 44% at 16% 92%, rgba(120, 44, 78, .55), transparent 72%);
    }
html[data-ag-style="glass"] {
  --accent:var(--primary);
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --bg:var(--ground);--surface:var(--card);--surface-2:var(--raised);--surface-3:var(--fill-strong);
  --surface-raised:var(--glass-strong);--surface-inset:var(--raised);--table-bg:transparent;--table-head-bg:var(--glass-strong);
  --hairline:var(--rule);--border-strong:var(--control);--row-hover:var(--raised);
  --control-bg:var(--fill);--control-hover:var(--fill-strong);--control-border:var(--control);--control-border-hover:var(--glass-edge);
  --sidebar-bg:var(--glass);--sidebar-border:var(--glass-edge);--rail-bg:var(--raised);
  --text:#1d1d1f;--text-2:var(--muted);--text-3:var(--faint);--sidebar-fg:var(--text-2);--sidebar-muted:var(--text-3);
  --nav-hover:var(--raised);--nav-selected-bg:var(--active);--nav-selected-border:var(--glass-edge);--nav-selected-fg:var(--text);
  --r-lg:20px;--r-md:14px;--r-sm:10px;
  --ui-font-sans:var(--font-sans);--ui-background:var(--ground);--ui-foreground:var(--text);
  --ui-card:var(--card);--ui-card-foreground:var(--text);--ui-popover:var(--glass-strong);--ui-popover-foreground:var(--text);
  --ui-surface:var(--card);--ui-surface-2:var(--raised);--ui-surface-3:var(--fill-strong);--ui-surface-inset:var(--raised);--ui-raised:var(--glass-strong);
  --ui-secondary:var(--fill);--ui-secondary-foreground:var(--text);--ui-muted:var(--raised);--ui-muted-foreground:var(--text-3);
  --ui-accent:var(--active);--ui-accent-foreground:var(--text);--ui-border:var(--border);--ui-border-strong:var(--control);--ui-hairline:var(--rule);
  --ui-control-bg:var(--fill);--ui-control-hover:var(--fill-strong);--ui-control-border:var(--control);--ui-control-border-hover:var(--glass-edge);
  --ui-input:var(--control);--ui-text-2:var(--text-2);--ui-text-3:var(--text-3);
  --ag-brand-mark:url('../assets/brand/agent2api-mark-light.svg');
}
html[data-ag-style="glass"][data-ag-appearance="dark"] {--text:#f5f5f7;--text-2:#b6b9c0;--text-3:#9da1a8}
html[data-ag-appearance="dark"] {--ag-brand-mark:url('../assets/brand/agent2api-mark-dark.svg')}
html[data-ag-appearance="light"] {--ag-brand-mark:url('../assets/brand/agent2api-mark-light.svg')}
html[data-ag-style="glass"],html[data-ag-style="glass"] body {background:var(--wallpaper),var(--ground);background-attachment:fixed}
html[data-ag-style="glass"] body {font-family:var(--font-sans)}
html[data-ag-style="glass"] .shell {padding:12px;gap:12px;background:transparent}
html[data-ag-style="glass"] .sidebar {border:1px solid var(--glass-edge);border-radius:26px;background:var(--glass);box-shadow:var(--glass-rim),var(--card-shadow);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);min-height:0}
html[data-ag-style="glass"] .main {border-radius:22px;background:transparent;gap:8px}
html[data-ag-style="glass"] .topbar {border:1px solid var(--glass-edge);border-radius:22px;background:var(--glass);box-shadow:var(--glass-rim);-webkit-backdrop-filter:blur(14px) saturate(145%);backdrop-filter:blur(14px) saturate(145%)}
html[data-ag-style="glass"] .content {background:transparent}
html[data-ag-style="glass"] :is(.panel,.settings-panel,.setting-panel,.acct-card,.stat-card,.kpi-card,.summary-card,.gateway-card) {border-color:var(--border);border-radius:20px;background:var(--card);box-shadow:var(--glass-rim),var(--card-shadow)}
/* Content panels use translucent fills, not dozens of nested filter layers. */
html[data-ag-style="glass"] :is(.panel-head,.panel-body,.panel-foot,.acct-table,.models-table) {background:transparent}
html[data-ag-style="glass"] :is(.prov-rail,.settings-nav) {background:var(--raised);border-color:var(--rule)}
html[data-ag-style="glass"] :is(.nav-item,.theme-switch button) {border-radius:12px}
html[data-ag-style="glass"] .nav-item.active {background:var(--active);border-color:var(--glass-edge);color:var(--text);box-shadow:var(--glass-rim)}
html[data-ag-style="glass"] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select) {background:var(--fill);border-color:var(--control);border-radius:12px;color:var(--text)}
html[data-ag-style="glass"] :is(dialog,.modal,.popover,.dropdown-menu,[role=dialog],[role=menu],[data-slot=popover-content],[data-slot=select-popup]) {background:var(--glass-strong);border-color:var(--glass-edge);border-radius:20px;box-shadow:var(--glass-rim),var(--card-shadow);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%)}
html[data-ag-style="glass"] dialog::backdrop {background:rgba(20,30,45,.22);backdrop-filter:blur(3px)}
html[data-ag-style="glass"] :is(th,td) {border-color:var(--rule)}
html[data-ag-style="glass"] th {background:var(--glass-strong)}
html[data-ag-style="glass"] tbody tr:hover {background:var(--raised)}
/* Scoped important utility layer is needed because this project's generated
   Tailwind utilities themselves carry !important. Never change sizing/display. */
@layer utilities {
 html[data-ag-style="glass"] button:not(.nav-item):not(.titlebar-btn):not([role=checkbox]):not([role=switch]) {background-color:var(--fill)!important;background-image:none!important;border-color:var(--control)!important;color:var(--text)!important;box-shadow:inset 0 1px 0 var(--glass-edge)!important;border-radius:12px!important;backdrop-filter:none!important}
 html[data-ag-style="glass"] button:not(:disabled):hover {background-color:var(--fill-strong)!important}
 html[data-ag-style="glass"] button:is(.primary,[data-variant=default]) {color:var(--accent)!important}
 html[data-ag-style="glass"] button:is(.danger,[data-variant=destructive]) {color:var(--danger)!important}
 html[data-ag-style="glass"] button:is([aria-pressed=true],.active) {background-color:var(--active)!important;border-color:var(--glass-edge)!important;box-shadow:var(--glass-rim)!important}
 html[data-ag-style="glass"] button:is([role=checkbox],[role=switch]) {box-shadow:none!important}
 html[data-ag-style="glass"] [role=dialog] {background-color:var(--glass-strong)!important;border-color:var(--glass-edge)!important;border-radius:26px!important}
 html[data-ag-style="glass"] #login-app>div {background-color:var(--card)!important;border-color:var(--glass-edge)!important;border-radius:26px!important;box-shadow:var(--glass-rim),var(--card-shadow)!important}
 html svg[aria-label="Agent2API"] {background-image:var(--ag-brand-mark)!important;background-size:contain!important;background-color:transparent!important;box-shadow:none!important}
 html svg[aria-label="Agent2API"]>* {visibility:hidden}
}
.brand-logo {width:42px;height:42px;flex:0 0 42px;background:var(--ag-brand-mark) center/contain no-repeat!important;border-radius:12px}
.brand-logo>svg {visibility:hidden}
.ag-style-switch {display:flex;gap:3px;padding:3px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.ag-style-switch button {flex:1;min-height:28px;font-size:11px;padding:4px 7px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text-3);cursor:pointer}
.ag-style-switch button[aria-pressed=true] {background:var(--surface);color:var(--text);border-color:var(--border)}
.ag-style-switch button:focus-visible {outline:2px solid var(--primary);outline-offset:2px}
@media(max-width:900px) {html[data-ag-style="glass"] .shell {padding:8px;gap:8px}html[data-ag-style="glass"] .sidebar {border-radius:18px}}
@media(max-width:640px) {html[data-ag-style="glass"] .shell {padding:0;gap:0}html[data-ag-style="glass"] .topbar {border-radius:0;border-width:0 0 1px}html[data-ag-style="glass"] .sidebar {border-radius:0;border-width:0 1px 0 0}.ag-style-switch {flex-wrap:wrap}.ag-style-switch button {font-size:10px;padding:4px}}
@media(prefers-reduced-transparency:reduce) {html[data-ag-style="glass"] {--card:var(--ground);--glass:var(--ground);--glass-strong:var(--ground)}html[data-ag-style="glass"] * {-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

@layer utilities {
 html[data-ag-style="glass"] button.bg-primary {background-color:var(--fill)!important;color:var(--primary-fg)!important}
 html[data-ag-style="glass"] button.text-destructive {color:var(--danger)!important}
 html[data-ag-style="glass"] .rounded-lg:not(button):not(input):not(textarea) {border-radius:20px!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
 html[data-ag-style="glass"] :is(.sidebar,.topbar,.panel,[role=dialog]) {background:var(--glass-strong)}
}

/* Settings rail: one rounded glass frame with a real inset around its items. */
html[data-ag-style="glass"] .settings-nav {
  box-sizing:border-box;
  width:172px;
  padding:12px;
  gap:6px;
  border:1px solid var(--glass-edge);
  border-radius:22px;
  background:var(--glass);
  box-shadow:var(--glass-rim),var(--card-shadow);
  scrollbar-width:thin;
  scrollbar-color:var(--control) transparent;
  overflow-x:hidden;
  overflow-y:auto;
}
@layer utilities {
  html[data-ag-style="glass"] #settings-nav .settings-nav-item {
    flex-shrink:0;
    min-height:36px;
    padding:7px 10px;
    border-radius:12px!important;
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
  }
  html[data-ag-style="glass"] #settings-nav .settings-nav-item:hover:not(:disabled) {
    background:var(--raised)!important;
  }
  html[data-ag-style="glass"] #settings-nav .settings-nav-item.active,
  html[data-ag-style="glass"] #settings-nav .settings-nav-item.active:hover {
    background:var(--active)!important;
    border-color:var(--glass-edge)!important;
    box-shadow:var(--glass-rim)!important;
    color:var(--text)!important;
  }
}
@media(max-width:900px) {
  html[data-ag-style="glass"] .settings-nav {
    width:auto;
    padding:10px;
    gap:8px;
    border-radius:20px;
    overflow-x:auto;
    overflow-y:hidden;
  }
}

/* Accessible, colourless two-position selection pane. */
#ag-style-switch {position:relative;isolation:isolate;gap:4px;padding:4px;border-radius:15px;--ag-selected-fill:rgba(255,255,255,.9);--ag-selected-edge:rgba(45,55,70,.25);--ag-selected-shadow:0 3px 8px rgba(35,45,60,.18)}
html[data-ag-appearance="dark"] #ag-style-switch {--ag-selected-fill:rgba(255,255,255,.18);--ag-selected-edge:rgba(255,255,255,.42);--ag-selected-shadow:0 3px 10px rgba(0,0,0,.3)}
#ag-style-switch::before {content:"";position:absolute;z-index:0;inset:4px auto 4px 4px;width:calc(50% - 6px);border:1px solid var(--ag-selected-edge);border-radius:11px;background:var(--ag-selected-fill);box-shadow:var(--ag-selected-shadow),inset 0 1px 0 rgba(255,255,255,.6);transform:translateX(0);transition:transform .32s cubic-bezier(.22,1,.36,1),background-color .2s ease,border-color .2s ease;pointer-events:none}
html[data-ag-style="glass"] #ag-style-switch::before {transform:translateX(calc(100% + 4px))}
@layer utilities {
 #ag-style-switch.ag-style-switch>button,#ag-style-switch.ag-style-switch>button:hover,#ag-style-switch.ag-style-switch>button[aria-pressed=true] {position:relative;z-index:1;flex:1 1 0%;min-width:0;background:transparent!important;box-shadow:none!important;border-color:transparent!important;color:var(--text-3)!important;transition:color .2s ease,opacity .2s ease}
 #ag-style-switch.ag-style-switch>button[aria-pressed=true] {font-weight:750!important;color:var(--text)!important}
 #ag-style-switch>button[aria-pressed=true]::after {content:"✓";margin-left:5px;font-size:10px;font-weight:750}
}
/* Keep the expand control outside the sidebar so fully collapsed is recoverable. */
.ag-sidebar-toggle {flex:0 0 auto;display:inline-grid;place-items:center;width:34px;height:32px;padding:6px;cursor:pointer;border:1px solid var(--control-border);border-radius:10px;background:var(--control-bg);color:var(--text)}
.ag-sidebar-toggle svg {width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.shell {transition:grid-template-columns .28s cubic-bezier(.22,1,.36,1),column-gap .28s ease}
.sidebar {min-width:0;transition:opacity .18s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s}
html[data-sidebar-collapsed="true"] .shell {grid-template-columns:0 minmax(0,1fr)!important;column-gap:0!important}
html[data-sidebar-collapsed="true"] .sidebar {opacity:0;transform:translateX(-24px);visibility:hidden;pointer-events:none;overflow:hidden;transition:opacity .18s ease,transform .28s ease,visibility 0s .28s}
/* Motion is tied to actual visibility changes, never the data refresh cycle. */
.page.active {animation:ag-page-in .24s cubic-bezier(.22,1,.36,1)}
.settings-pane.active {animation:ag-pane-in .2s cubic-bezier(.22,1,.36,1)}
@keyframes ag-page-in {from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@keyframes ag-pane-in {from{opacity:0;translate:5px 0}to{opacity:1;translate:0 0}}
dialog[open] {animation:ag-dialog-in .22s cubic-bezier(.22,1,.36,1)}
@keyframes ag-dialog-in {from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
html[data-ag-style="glass"] :is(.panel,.nav-item,.settings-nav-item,input,textarea,select) {transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
html[data-ag-style="glass"] button:not(:disabled):active {scale:.98}
html[data-ag-style="glass"] button {transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,scale .12s ease}
/* One spacing grid for legacy tables and component-library tables. */
html[data-ag-style="glass"] :is(.models-table,.acct-table,.account-table,.req-table,[data-slot=table]) :is(th,td) {padding:10px 16px;vertical-align:middle}
html[data-ag-style="glass"] :is(.models-table,.acct-table,.account-table,.req-table,[data-slot=table]) :is(th,td):first-child {padding-left:20px}
html[data-ag-style="glass"] :is(.models-table,.acct-table,.account-table,.req-table,[data-slot=table]) :is(th,td):last-child {padding-right:20px}
html[data-ag-style="glass"] .keys-table {min-width:960px}
html[data-ag-style="glass"] .keys-table .k-name {width:20%}
html[data-ag-style="glass"] .keys-table .k-key {width:34%}
html[data-ag-style="glass"] .keys-table .k-time {width:20%}
html[data-ag-style="glass"] .keys-table .k-state {width:8%}
html[data-ag-style="glass"] .keys-table .k-act {width:18%}
html[data-ag-style="glass"] .keys-table :is(.cell-state,th[data-col=state]) {text-align:center}
html[data-ag-style="glass"] .keys-table .cell-state>* {vertical-align:middle}
html[data-ag-style="glass"] .keys-table .row-actions {gap:8px;align-items:center;flex-wrap:nowrap}
html[data-ag-style="glass"] .keys-table .keycell {gap:8px}
html[data-ag-style="glass"] .keys-table :is(.cell-time,.cell-act) {white-space:nowrap}
@layer utilities {
 html[data-ag-style="glass"] [data-slot=table] :is([data-slot=table-head],[data-slot=table-cell]) {padding:10px 16px!important}
 html[data-ag-style="glass"] [data-slot=table] :is([data-slot=table-head],[data-slot=table-cell]):first-child {padding-left:20px!important}
 html[data-ag-style="glass"] [data-slot=table] :is([data-slot=table-head],[data-slot=table-cell]):last-child {padding-right:20px!important}
}
@media(prefers-reduced-motion:reduce) {
 .shell,.sidebar,#ag-style-switch::before,.page.active,.settings-pane.active,dialog[open],html[data-ag-style="glass"] :is(button,.panel,.nav-item,.settings-nav-item,input,textarea,select) {animation:none!important;transition:none!important;scroll-behavior:auto!important}
 html[data-ag-style="glass"] button:active {scale:1}
}
/* Header frame follows the same content grid as the panels below it. */
html[data-ag-style="glass"] .topbar {
  margin-inline:max(var(--pad),calc((100% - var(--content-max))/2));
  padding-inline:16px;
  min-width:0;
}
@media(max-width:640px) {
  html[data-ag-style="glass"] .topbar {margin-inline:var(--pad);padding-inline:12px;border:1px solid var(--glass-edge);border-radius:18px}
}
.ag-account-launch {white-space:nowrap;font-size:12px;padding:6px 10px}
.ag-account-dialog {margin:auto;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 40px);box-sizing:border-box;overflow:auto;padding:24px;border:1px solid var(--border);border-radius:24px;background:var(--surface-raised);color:var(--text);box-shadow:0 24px 70px rgba(0,0,0,.24)}
.ag-account-dialog::backdrop {background:rgba(10,15,25,.35);backdrop-filter:blur(3px)}
.ag-account-heading {display:flex;align-items:center;justify-content:space-between;gap:12px}
.ag-account-heading h2 {margin:0;font-size:18px}
.ag-account-heading button {font-size:20px;line-height:1;padding:4px 8px}
.ag-account-note {font-size:12px;color:var(--text-3);line-height:1.65;margin:12px 0 20px}
.ag-account-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ag-account-grid label {display:flex;flex-direction:column;gap:7px;min-width:0;font-size:12px;color:var(--text-2)}
.ag-account-grid input {width:100%;min-height:38px;box-sizing:border-box;padding:8px 10px;border:1px solid var(--control-border);border-radius:10px;background:var(--control-bg);color:var(--text);font:inherit}
.ag-account-wide {grid-column:1/-1}
.ag-account-error {min-height:20px;margin:12px 0;font-size:12px;line-height:1.5;color:var(--danger)}
.ag-account-actions {display:flex;justify-content:flex-end;gap:9px;padding-top:14px;border-top:1px solid var(--hairline)}
@media(max-width:500px){.ag-account-grid {grid-template-columns:1fr}.ag-account-dialog{padding:20px}.ag-account-launch{font-size:11px;padding:5px 7px}}
/* Style switching changes material, never the layout geometry. */
.shell {padding:12px;gap:12px}
.sidebar {border:1px solid var(--sidebar-border);border-radius:26px}
.main {border-radius:22px;gap:8px}
.topbar {margin-inline:max(var(--pad),calc((100% - var(--content-max))/2));padding-inline:16px;border:1px solid var(--hairline);border-radius:22px;min-width:0}
html[data-ag-appearance="light"] {--ag-wallpaper:radial-gradient(60% 55% at 8% 6%,rgba(126,182,238,.9),transparent 70%),radial-gradient(48% 46% at 92% 14%,rgba(255,196,150,.85),transparent 70%),radial-gradient(55% 50% at 78% 88%,rgba(150,222,200,.85),transparent 72%),radial-gradient(46% 44% at 16% 92%,rgba(246,184,204,.75),transparent 72%)}
html[data-ag-appearance="dark"] {--ag-wallpaper:radial-gradient(60% 55% at 8% 6%,rgba(28,86,150,.85),transparent 70%),radial-gradient(48% 46% at 92% 14%,rgba(150,82,36,.6),transparent 70%),radial-gradient(55% 50% at 78% 88%,rgba(20,110,96,.7),transparent 72%),radial-gradient(46% 44% at 16% 92%,rgba(120,44,78,.55),transparent 72%)}
body {isolation:isolate;transition:background-color .24s ease}
body::before {content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--ag-wallpaper);opacity:0;transition:opacity .24s cubic-bezier(.4,0,.2,1)}
html[data-ag-style="glass"],html[data-ag-style="glass"] body {background:var(--ground)}
html[data-ag-style="glass"] body::before {opacity:1}
:is(.sidebar,.topbar,.panel,.ag-style-switch,.settings-nav,.settings-nav-item,.nav-item,input,textarea,select) {transition:background-color .24s ease,border-color .24s ease,color .2s ease,box-shadow .24s ease}
.sidebar {transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease,opacity .18s ease,transform .28s ease,visibility 0s}
#ag-style-switch::before {transition:transform .24s cubic-bezier(.4,0,.2,1),background-color .24s ease,border-color .24s ease,box-shadow .24s ease}
@layer utilities {
 #ag-style-switch.ag-style-switch>button,#ag-style-switch.ag-style-switch>button[aria-pressed=true] {font-weight:650!important}
 #ag-style-switch>button::after {content:"✓";display:inline-block;width:9px;margin-left:5px;font-size:10px;opacity:0;scale:.8;transition:opacity .18s ease,scale .18s ease}
 #ag-style-switch>button[aria-pressed=true]::after {opacity:1;scale:1}
}
@media(max-width:900px){.shell{padding:8px;gap:8px}.sidebar{border-radius:18px}}
@media(max-width:640px){.shell{padding:0;gap:0}.sidebar{border-radius:0;border-width:0 1px 0 0}.topbar{margin-inline:var(--pad);padding-inline:12px;border:1px solid var(--hairline);border-radius:18px}}
@media(prefers-reduced-motion:reduce){body,body::before,#ag-style-switch::before,#ag-style-switch>button::after,:is(.sidebar,.topbar,.panel,.ag-style-switch,.settings-nav,.settings-nav-item,.nav-item,input,textarea,select){transition:none!important}}
/* Settings geometry also stays invariant when switching surface style. */
.settings-nav {box-sizing:border-box;width:172px;padding:12px;gap:6px;border:1px solid var(--border);border-radius:22px;scrollbar-width:thin}
.settings-nav-item {flex-shrink:0;min-height:36px;padding:7px 10px}
@media(max-width:900px){.settings-nav{width:auto;padding:10px;gap:8px;border-radius:20px}}
:is(.panel,.settings-nav,.topbar,.sidebar,[class~="bg-card"]) {transition:background-color .24s ease,border-color .24s ease,color .2s ease,box-shadow .24s ease,border-radius .24s ease}
@media(prefers-reduced-motion:reduce){:is(.panel,.settings-nav,.topbar,.sidebar,[class~="bg-card"]){transition:none!important}}
/* Inset the whole table, not just its header labels. */
html[data-ag-style="glass"] .models-table-wrap {box-sizing:border-box;padding:12px 16px 4px;background:transparent}
html[data-ag-style="glass"] .models-table-wrap>.models-table {border-collapse:separate;border-spacing:0}
html[data-ag-style="glass"] .models-table-wrap>.models-table thead th:first-child {border-top-left-radius:12px;border-bottom-left-radius:12px}
html[data-ag-style="glass"] .models-table-wrap>.models-table thead th:last-child {border-top-right-radius:12px;border-bottom-right-radius:12px}
@media(max-width:640px){html[data-ag-style="glass"] .models-table-wrap{padding:10px 12px 4px}}
/* Restore the reveal transition as well as the collapse transition. */
.sidebar {transition:background-color .24s ease,border-color .24s ease,box-shadow .24s ease,border-radius .24s ease,opacity .18s ease,transform .28s cubic-bezier(.22,1,.36,1),visibility 0s}
@media(prefers-reduced-motion:reduce){.sidebar{transition:none!important}}
/* Model management is a structured data table, not a collection of big pills. */
.page[data-page="gateway"] .ag-models-table {min-width:1120px;table-layout:fixed}
.page[data-page="gateway"] .ag-models-table .c-check {width:44px}
.page[data-page="gateway"] .ag-models-table .c-model {width:200px}
.page[data-page="gateway"] .ag-models-table .c-rate {width:72px}
.page[data-page="gateway"] .ag-models-table .c-source {width:84px}
.page[data-page="gateway"] .ag-models-table .c-budget {width:156px}
.page[data-page="gateway"] .ag-models-table .c-caps {width:144px}
.page[data-page="gateway"] .ag-models-table .c-alias {width:332px}
.page[data-page="gateway"] .ag-models-table .c-act {width:88px}
html[data-ag-style="glass"] .page[data-page="gateway"] .ag-models-table :is(th,td) {padding:12px;box-sizing:border-box;vertical-align:middle}
html[data-ag-style="glass"] .page[data-page="gateway"] .ag-models-table :is(th[data-col="check"],td.cell-check) {padding:10px 8px!important;text-align:center}
.page[data-page="gateway"] .ag-models-table :is(.cell-model,.cell-rate,.cell-source,.cell-budget,.cell-caps) {overflow:hidden}
.page[data-page="gateway"] .ag-models-table .cell-model .t {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%}
.page[data-page="gateway"] .ag-models-table .mname {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page[data-page="gateway"] .ag-models-table :is(.src,.rate,.cap-num,.cap-sep) {white-space:nowrap;flex-shrink:0}
.page[data-page="gateway"] .ag-models-table .aliases {width:100%;min-width:0;gap:6px}
.page[data-page="gateway"] .ag-models-table .alias-row {width:100%;min-width:0;gap:6px;align-items:center}
.page[data-page="gateway"] .ag-models-table .alias {min-width:0;max-width:100%;gap:6px;padding:5px 7px;border-radius:10px}
.page[data-page="gateway"] .ag-models-table .alias .t {flex:1 1 auto;min-width:0;max-width:138px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow-wrap:normal}
.page[data-page="gateway"] .ag-models-table .row-actions {align-items:center;gap:6px}
@layer utilities {
 html[data-ag-style="glass"] .page[data-page="gateway"] .ag-models-table button.caps-open,
 html[data-ag-style="glass"] .page[data-page="gateway"] .ag-models-table button.caps-open:hover {
   display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;min-height:26px;margin:0;padding:2px 0!important;
   background:transparent!important;box-shadow:none!important;border:0!important;border-radius:6px!important;white-space:nowrap;
 }
 html[data-ag-style="glass"] .page[data-page="gateway"] .ag-models-table button.caps-badges {
   flex-wrap:nowrap!important;gap:4px;min-width:100px;max-width:100%;padding:2px 0!important;
 }
}
.page[data-page="gateway"] .ag-models-table .cap-dot {width:22px;height:22px;flex:0 0 22px}
.page[data-page="gateway"] .ag-models-table .cap-dot svg {width:13px;height:13px}
/* Human-verification state is visually distinct from credential/login state. */
panel-captcha {width:100%;margin:16px 0!important}
panel-captcha .pc-box {box-sizing:border-box;width:100%;justify-content:center;border-radius:12px;background:var(--fill,var(--ui-control-bg));padding:12px 14px;font-size:12px}
#login-app #submit {min-height:40px}
#login-app #submit:disabled {cursor:not-allowed}
#login-app #error {line-height:1.65;overflow-wrap:anywhere}
/* Inline checkbox baselines must not offset the visual centre of a table row. */
.page[data-page="gateway"] .ag-models-table :is(th,td) {vertical-align:middle}
.page[data-page="gateway"] .ag-models-table :is(th[data-col="check"],td.cell-check) {line-height:0}
.page[data-page="gateway"] .ag-models-table .cell-model .mid {min-height:20px;align-items:center}
.page[data-page="gateway"] .ag-models-table .cell-model .mid .t {line-height:20px}
@layer utilities {
 .page[data-page="gateway"] .ag-models-table :is(th,td) [data-slot="checkbox"] {vertical-align:middle!important;margin-block:0!important;line-height:1!important}
}