@layer reset, base, shell, components, responsive, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 6rem; text-size-adjust: 100%; }
  html.keyboard-nav { scroll-behavior: auto; }
  body, h1, h2, h3, p, dl, dd, figure { margin: 0; }
  ul, ol { margin: 0; padding: 0; }
  button, input, select { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  svg { display: block; max-inline-size: 100%; }
}

@layer base {
  :root {
    color-scheme: dark;
    --ink-1000: #050710;
    --ink-950: #080b14;
    --ink-900: #0b0f19;
    --ink-850: #0f1420;
    --ink-800: #131925;
    --ink-750: #19202f;
    --paper: #f4f5ef;
    --paper-2: #d8dbe1;
    --muted: #9da3b1;
    --muted-2: #7f8798;
    --line: rgb(255 255 255 / .09);
    --line-strong: rgb(255 255 255 / .15);
    --signal: #a7f3c1;
    --signal-bright: #c9ffda;
    --cyan: #76ddf7;
    --violet: #9587ff;
    --amber: #ffd17a;
    --danger: #ff827d;
    --spring: cubic-bezier(.2, 1.55, .32, 1);
    --smooth: cubic-bezier(.22, 1, .36, 1);
    --shadow: 0 1.5rem 4rem rgb(0 0 0 / .28), inset 0 1px 0 rgb(255 255 255 / .035);
    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }

  body {
    min-inline-size: 20rem;
    min-block-size: 100dvh;
    overflow-x: clip;
    background:
      radial-gradient(circle at 79% 9%, rgb(86 106 255 / .055), transparent 28rem),
      radial-gradient(circle at 37% 55%, rgb(81 246 187 / .025), transparent 34rem),
      var(--ink-950);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
  }

  body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background-image:
      linear-gradient(rgb(255 255 255 / .013) 1px, transparent 1px),
      linear-gradient(90deg, rgb(255 255 255 / .013) 1px, transparent 1px);
    background-size: 4rem 4rem;
    content: "";
    mask-image: linear-gradient(90deg, transparent 10%, black 48%, transparent 94%);
    pointer-events: none;
  }

  ::selection { background: var(--signal); color: var(--ink-950); }
  :where(a:any-link) { color: inherit; text-decoration: none; }
  :where(button, a:any-link, input, [tabindex="0"]):focus-visible { outline: .1875rem solid var(--cyan); outline-offset: .2rem; }
  button { border: 0; color: inherit; cursor: pointer; }
  h1, h2, h3 { line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
  p { color: var(--muted); }
  code { font-family: var(--font-mono); }

  :where(select, select option, select optgroup) { color-scheme: dark; }
  :where(select option, select optgroup) { background-color: var(--ink-900); color: var(--paper); }
  :where(select option:disabled) { color: var(--muted); }

  .visually-hidden:where(:not(:focus-within, :active)) {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

  [hidden] { display: none !important; }

  .skip-link {
    position: fixed;
    z-index: 1000;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--signal);
    border-radius: .65rem;
    background: var(--ink-850);
    color: var(--paper);
    font-weight: 750;
    translate: 0 -170%;
    transition: translate .25s var(--smooth);
  }

  .skip-link:focus { translate: 0; }
}

@layer shell {
  .dashboard-shell {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    min-block-size: 100dvh;
    transition: grid-template-columns .25s var(--smooth);
  }

  :is(.dashboard-shell, .admin-shell).workspace-rail-measuring { transition: none !important; }

  .sidebar {
    position: sticky;
    z-index: 20;
    inset-block-start: 0;
    display: flex;
    block-size: 100dvh;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    padding: 1.35rem 1rem 1rem;
    border-inline-end: 1px solid var(--line);
    background: rgb(7 10 17 / .91);
    backdrop-filter: blur(1.4rem) saturate(125%);
    scrollbar-width: thin;
    scrollbar-color: var(--ink-750) transparent;
  }

  .workspace-rail-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    inline-size: 100%;
    min-block-size: 2.15rem;
    align-items: center;
    gap: .55rem;
    margin-block-start: .75rem;
    padding-inline: .65rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: rgb(255 255 255 / .018);
    color: var(--muted-2);
    font-size: .52rem;
    font-weight: 700;
    text-align: start;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
  }

  .workspace-rail-toggle:hover { border-color: var(--line-strong); background: rgb(255 255 255 / .04); color: var(--paper); }
  .workspace-rail-toggle:focus-visible { outline: .15rem solid rgb(167 243 193 / .32); outline-offset: .12rem; }
  .workspace-rail-toggle svg { inline-size: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; transition: transform .25s var(--smooth); }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: .98rem;
    font-weight: 760;
    letter-spacing: -.035em;
  }

  .brand > span > span { color: var(--muted); font-weight: 560; }
  .brand-mark { inline-size: 1.9rem; block-size: 1.9rem; overflow: visible; fill: none; stroke: var(--signal); stroke-width: 1.6; }
  .brand-mark circle { fill: var(--signal); stroke: none; }
  .sidebar .brand { margin-inline: .55rem; }

  .workspace-switcher {
    display: grid;
    grid-template-columns: auto 1fr auto;
    inline-size: 100%;
    align-items: center;
    gap: .65rem;
    margin-block-start: 1.8rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: rgb(255 255 255 / .03);
    text-align: start;
    transition: background .2s ease, border-color .2s ease, translate .3s var(--spring);
  }

  .workspace-switcher:hover { border-color: var(--line-strong); background: rgb(255 255 255 / .055); translate: 0 -.08rem; }
  .workspace-switcher > span:nth-child(2), .account-button > span:nth-child(2) { display: grid; min-inline-size: 0; }
  .workspace-switcher strong, .account-button strong { overflow: hidden; color: var(--paper-2); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-switcher small, .account-button small { overflow: hidden; color: var(--muted-2); font-size: .55rem; text-overflow: ellipsis; white-space: nowrap; }
  .workspace-switcher > svg { inline-size: .85rem; fill: none; stroke: var(--muted-2); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }

  .workspace-logo {
    display: grid;
    inline-size: 2rem;
    block-size: 2rem;
    place-items: center;
    border: 1px solid rgb(167 243 193 / .22);
    border-radius: .55rem;
    background: rgb(167 243 193 / .08);
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 800;
  }

  .workspace-logo.sandbox { border-color: rgb(149 135 255 / .25); background: rgb(149 135 255 / .09); color: #b7adff; }

  .sidebar-nav { margin-block-start: 2rem; }
  .sidebar-nav h2 { margin: 1.4rem .75rem .55rem; color: #687082; font-size: .54rem; font-weight: 720; letter-spacing: .11em; text-transform: uppercase; }
  .sidebar-nav ul { display: grid; gap: .15rem; list-style: none; }
  .sidebar-nav a {
    position: relative;
    display: grid;
    grid-template-columns: 1.1rem 1fr auto;
    min-block-size: 2.75rem;
    align-items: center;
    gap: .75rem;
    padding-inline: .75rem;
    border-radius: .65rem;
    color: #969dac;
    font-size: .72rem;
    font-weight: 630;
    transition: background .18s ease, color .18s ease, translate .3s var(--spring);
  }

  .sidebar-nav a::before { position: absolute; inset-block: .65rem; inset-inline-start: -.98rem; inline-size: .16rem; border-radius: 0 9rem 9rem 0; background: var(--signal); content: ""; scale: 1 0; transition: scale .3s var(--spring); }
  .sidebar-nav a:hover { background: rgb(255 255 255 / .035); color: var(--paper); translate: .1rem 0; }
  .sidebar-nav a.active { background: rgb(167 243 193 / .075); color: var(--signal); }
  .sidebar-nav a.active::before { scale: 1; }
  .sidebar-nav svg { inline-size: 1.05rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
  .sidebar-nav em { padding: .13rem .32rem; border-radius: 999rem; background: rgb(167 243 193 / .1); color: var(--signal); font-family: var(--font-mono); font-size: .43rem; font-style: normal; text-transform: uppercase; }
  .sidebar-nav a > strong { display: grid; min-inline-size: 1.25rem; block-size: 1.25rem; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .06); color: var(--muted); font-family: var(--font-mono); font-size: .5rem; }

  .sidebar-bottom { display: grid; gap: .75rem; margin-block-start: 2rem; }
  .environment-card { display: grid; padding: .75rem; border: 1px solid var(--line); border-radius: .75rem; background: linear-gradient(145deg, rgb(167 243 193 / .045), transparent); }
  .environment-card:any-link { color: inherit; text-decoration: none; transition: border-color .2s ease, translate .35s var(--spring); }
  .environment-card:any-link:hover { border-color: rgb(167 243 193 / .2); translate: 0 -.1rem; }
  .environment-card > span { display: flex; align-items: center; gap: .4rem; color: var(--signal); font-family: var(--font-mono); font-size: .49rem; text-transform: uppercase; }
  .environment-card i, .heading-kicker i, .status-chip i, .dashboard-footer i { inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 .55rem var(--signal); }
  .environment-card strong { margin-block-start: .45rem; color: var(--paper-2); font-size: .65rem; }
  .environment-card small { color: var(--muted-2); font-family: var(--font-mono); font-size: .48rem; }
  .account-button { display: grid; grid-template-columns: auto 1fr auto; inline-size: 100%; align-items: center; gap: .65rem; padding: .5rem .55rem; border-radius: .7rem; background: transparent; text-align: start; transition: background .2s ease; }
  .account-button:hover { background: rgb(255 255 255 / .04); }
  .account-button > svg { inline-size: 1rem; fill: currentColor; color: var(--muted-2); }
  .account-avatar, .top-avatar { display: grid; place-items: center; border: 1px solid rgb(149 135 255 / .28); border-radius: 50%; background: linear-gradient(145deg, #2a2452, #16172c); color: #d5d0ff; font-family: var(--font-mono); font-size: .6rem; font-weight: 750; }
  .account-avatar { inline-size: 2rem; block-size: 2rem; }

  .main-panel { min-inline-size: 0; }
  .topbar {
    position: sticky;
    z-index: 15;
    inset-block-start: 0;
    display: flex;
    min-block-size: 4.25rem;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(1.25rem, 3vw, 3rem);
    border-block-end: 1px solid var(--line);
    background: rgb(8 11 20 / .75);
    backdrop-filter: blur(1.35rem) saturate(135%);
  }

  .topbar-context { display: flex; align-items: center; gap: .55rem; color: var(--muted-2); font-size: .67rem; }
  .topbar-context i { color: #414958; font-style: normal; }
  .topbar-context strong { color: var(--paper-2); font-weight: 650; }
  .topbar-actions { display: flex; align-items: center; gap: .45rem; }
  .topbar-link { display: flex; min-block-size: 2.4rem; align-items: center; gap: .4rem; padding-inline: .65rem; color: var(--muted); font-size: .65rem; font-weight: 650; transition: color .2s ease; }
  .topbar-link:hover { color: var(--paper); }
  .topbar-link svg { inline-size: .95rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
  .top-avatar { inline-size: 2.35rem; block-size: 2.35rem; margin-inline-start: .15rem; transition: scale .3s var(--spring), border-color .2s ease; }
  .top-avatar:hover { border-color: #9185e7; scale: 1.06; }

  .mobile-header { display: none; }
  .dashboard-content { container-type: inline-size; inline-size: min(100% - clamp(2rem, 5vw, 6rem), 95rem); margin-inline: auto; padding-block: clamp(2rem, 4vw, 3.75rem) 2rem; }
}

@layer components {
  .icon-button {
    position: relative;
    display: grid;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    place-items: center;
    border: 1px solid transparent;
    border-radius: .65rem;
    background: transparent;
    color: var(--muted);
    transition: background .2s ease, border-color .2s ease, color .2s ease, scale .3s var(--spring);
  }

  .icon-button:hover { border-color: var(--line); background: rgb(255 255 255 / .035); color: var(--paper); }
  .icon-button:active { scale: .9; }
  .icon-button svg { inline-size: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.55; }
  .icon-button > i { position: absolute; inset-block-start: .45rem; inset-inline-end: .45rem; inline-size: .32rem; block-size: .32rem; border: .09rem solid var(--ink-900); border-radius: 50%; background: var(--danger); }

  .page-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
  .heading-kicker { display: flex; align-items: center; gap: .75rem; color: var(--muted-2); font-family: var(--font-mono); font-size: .55rem; }
  .heading-kicker > span { display: inline-flex; align-items: center; gap: .4rem; color: var(--signal); letter-spacing: .04em; text-transform: uppercase; }
  .page-heading h1 { margin-block-start: .75rem; font-size: clamp(2.25rem, 4vw, 3.75rem); font-weight: 690; }
  .page-heading p { margin-block-start: .7rem; font-size: .88rem; }
  .heading-actions { display: flex; align-items: center; gap: .6rem; }
  .range-control { display: flex; gap: .2rem; padding: .25rem; border: 1px solid var(--line); border-radius: .72rem; background: rgb(255 255 255 / .025); }
  .range-control button { min-inline-size: 2.65rem; min-block-size: 2.25rem; border-radius: .5rem; background: transparent; color: var(--muted-2); font-family: var(--font-mono); font-size: .56rem; font-weight: 700; transition: background .2s ease, color .2s ease, scale .3s var(--spring); }
  .range-control button:hover { color: var(--paper); }
  .range-control button[aria-pressed="true"] { background: var(--paper); color: var(--ink-950); box-shadow: 0 .25rem .8rem rgb(0 0 0 / .18); }
  .range-control button:active { scale: .92; }
  .action-button, .filter-button { display: inline-flex; min-block-size: 2.75rem; align-items: center; justify-content: center; gap: .45rem; padding-inline: .85rem; border: 1px solid var(--line-strong); border-radius: .68rem; background: rgb(255 255 255 / .035); color: var(--paper-2); font-size: .66rem; font-weight: 680; transition: background .2s ease, border-color .2s ease, translate .3s var(--spring), scale .3s var(--spring); }
  .action-button:hover, .filter-button:hover { border-color: rgb(255 255 255 / .24); background: rgb(255 255 255 / .065); translate: 0 -.1rem; }
  .action-button:active, .filter-button:active { scale: .96; translate: 0; }
  .action-button svg, .filter-button svg { inline-size: 1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }

  .wallet-banner {
    display: grid;
    grid-template-columns: minmax(13rem, 1.15fr) minmax(14rem, 1fr) minmax(14rem, 1.1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-block-start: clamp(2rem, 4vw, 3rem);
    padding: 1rem 1.1rem;
    border: 1px solid rgb(167 243 193 / .14);
    border-radius: 1rem;
    background:
      linear-gradient(90deg, rgb(167 243 193 / .075), transparent 42%),
      rgb(14 19 29 / .78);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .035);
  }

  .wallet-identity { display: flex; align-items: center; gap: .75rem; }
  .wallet-icon, .metric-icon { display: grid; place-items: center; border: 1px solid var(--line); background: rgb(255 255 255 / .025); color: var(--signal); }
  .wallet-icon { inline-size: 2.65rem; block-size: 2.65rem; flex: none; border-color: rgb(167 243 193 / .18); border-radius: .7rem; background: rgb(167 243 193 / .07); }
  .wallet-icon svg { inline-size: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
  .wallet-identity > span:last-child { display: grid; }
  .wallet-identity small, .wallet-forecast small, .wallet-quota small { color: var(--muted-2); font-size: .55rem; }
  .wallet-identity strong { margin-block-start: .08rem; font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: -.05em; }
  .wallet-identity strong span { color: var(--signal); font-size: .68em; }
  .wallet-forecast { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding-inline: 1.15rem; border-inline: 1px solid var(--line); }
  .wallet-forecast > span, .wallet-quota > span { display: grid; }
  .wallet-forecast strong, .wallet-quota strong { margin-block-start: .15rem; color: var(--paper-2); font-family: var(--font-mono); font-size: .69rem; }
  .wallet-quota { display: grid; }
  .quota-track { block-size: .3rem; margin-block-start: .45rem; overflow: hidden; border-radius: 999rem; background: rgb(255 255 255 / .07); }
  .quota-track i { display: block; inline-size: var(--progress); block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--signal)); box-shadow: 0 0 .7rem rgb(167 243 193 / .25); transition: inline-size .6s var(--smooth); }
  .wallet-banner > a { display: inline-flex; align-items: center; gap: .35rem; color: var(--signal); font-size: .62rem; font-weight: 700; white-space: nowrap; }
  .wallet-banner > a svg, .card-link svg { inline-size: .85rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: translate .3s var(--spring); }
  .wallet-banner > a:hover svg, .card-link:hover svg { translate: .2rem 0; }

  .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-block-start: .8rem; }
  .metric-card {
    position: relative;
    min-inline-size: 0;
    min-block-size: 10.3rem;
    overflow: hidden;
    padding: 1.05rem;
    border: 1px solid var(--line);
    border-radius: .9rem;
    background: linear-gradient(145deg, rgb(18 23 35 / .89), rgb(10 14 23 / .91));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .03);
    transition: translate .4s var(--spring), border-color .25s ease, box-shadow .35s ease;
  }

  .metric-card:hover { border-color: var(--line-strong); box-shadow: 0 1rem 2.6rem rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .045); translate: 0 -.2rem; }
  .metric-card:has(.metric-spark[hidden]) { min-block-size: 8rem; }
  .metric-card header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .61rem; font-weight: 650; }
  .metric-icon { inline-size: 1.9rem; block-size: 1.9rem; border-radius: .52rem; }
  .metric-icon svg { inline-size: .88rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
  .metric-card > strong { display: block; margin-block-start: .5rem; font-family: var(--font-mono); font-size: clamp(1.45rem, 2.25vw, 2rem); letter-spacing: -.065em; }
  .metric-card footer { position: relative; z-index: 2; display: flex; align-items: center; gap: .45rem; margin-block-start: .45rem; }
  .metric-card footer small { color: var(--muted-2); font-size: .5rem; }
  .trend { padding: .18rem .32rem; border-radius: .3rem; font-family: var(--font-mono); font-size: .48rem; }
  .trend-down, .trend-signal { background: rgb(167 243 193 / .08); color: var(--signal); }
  .trend-up { background: rgb(149 135 255 / .1); color: #b5acff; }
  .metric-spark { position: absolute; inset: auto 0 0; inline-size: 100%; block-size: 3.5rem; opacity: .62; }
  .metric-spark path { fill: none; stroke: var(--signal); stroke-width: 1.35; vector-effect: non-scaling-stroke; }
  .spark-violet path { stroke: var(--violet); }
  .spark-cyan path { stroke: var(--cyan); }
  .spark-signal path { stroke: var(--signal-bright); }

  .dashboard-card {
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgb(16 21 32 / .9), rgb(9 13 21 / .93));
    box-shadow: var(--shadow);
  }

  .analytics-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .72fr); gap: .8rem; margin-block-start: .8rem; }
  .usage-card, .quota-card { min-block-size: 31rem; padding: 1.25rem; }
  .card-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
  .card-header.compact { align-items: center; }
  .card-kicker { color: var(--signal); font-family: var(--font-mono); font-size: .48rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
  .card-header h2 { margin-block-start: .28rem; color: var(--paper-2); font-size: 1.05rem; font-weight: 650; letter-spacing: -.025em; }
  .card-header p { margin-block-start: .25rem; color: var(--muted-2); font-family: var(--font-mono); font-size: .5rem; }
  .legend { display: flex; align-items: center; gap: .8rem; color: var(--muted-2); font-size: .51rem; }
  .legend span { display: flex; align-items: center; gap: .35rem; }
  .legend i { inline-size: .45rem; block-size: .45rem; border-radius: 50%; }
  .legend-spend { background: var(--signal); box-shadow: 0 0 .45rem rgb(167 243 193 / .35); }
  .legend-tokens { background: var(--violet); box-shadow: 0 0 .45rem rgb(149 135 255 / .35); }

  .usage-chart { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); margin-block-start: 1.5rem; }
  .chart-y-axis { display: flex; block-size: 17rem; flex-direction: column; justify-content: space-between; padding-block: .15rem; color: #687082; font-family: var(--font-mono); font-size: .46rem; }
  .chart-stage { position: relative; block-size: 17rem; overflow: hidden; border-radius: .35rem; cursor: crosshair; }
  .chart-grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(255 255 255 / .06) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px); background-size: 100% 25%, 14.285% 100%; }
  .chart-stage svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
  .chart-area-spend { fill: url(#spend-gradient); }
  .chart-area-tokens { fill: url(#token-gradient); }
  .chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.25; vector-effect: non-scaling-stroke; transition: d .6s var(--smooth); }
  .chart-line-spend { stroke: var(--signal); filter: drop-shadow(0 0 .22rem rgb(167 243 193 / .28)); }
  .chart-line-tokens { stroke: var(--violet); stroke-dasharray: 4 5; }
  .chart-area { transition: d .6s var(--smooth); }
  #chart-points circle { fill: var(--ink-850); stroke: var(--signal); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .chart-x-axis { grid-column: 2; display: flex; justify-content: space-between; margin-block-start: .65rem; color: #687082; font-family: var(--font-mono); font-size: .45rem; }
  .usage-chart figcaption {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .chart-tooltip { position: absolute; z-index: 3; inset-block-start: .8rem; inset-inline-end: .8rem; display: grid; min-inline-size: 7.4rem; padding: .6rem .7rem; border: 1px solid var(--line-strong); border-radius: .55rem; background: rgb(9 13 22 / .95); box-shadow: 0 .8rem 2rem rgb(0 0 0 / .25); opacity: 0; pointer-events: none; translate: 0 .3rem; transition: opacity .18s ease, translate .25s var(--spring); }
  .chart-stage:hover .chart-tooltip { opacity: 1; translate: 0; }
  .chart-tooltip small { color: var(--muted-2); font-family: var(--font-mono); font-size: .44rem; }
  .chart-tooltip strong { color: var(--signal); font-family: var(--font-mono); font-size: .72rem; }
  .chart-tooltip span { color: var(--muted); font-size: .48rem; }

  .status-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .45rem; border: 1px solid rgb(149 135 255 / .15); border-radius: 999rem; background: rgb(149 135 255 / .07); color: #b5adff; font-family: var(--font-mono); font-size: .45rem; white-space: nowrap; }
  .status-chip i { background: var(--violet); box-shadow: 0 0 .45rem var(--violet); }
  .status-chip.safe { border-color: rgb(167 243 193 / .15); background: rgb(167 243 193 / .065); color: var(--signal); }
  .status-chip.safe i { background: var(--signal); box-shadow: 0 0 .45rem var(--signal); }
  .quota-orbit { position: relative; display: grid; inline-size: 11.25rem; aspect-ratio: 1; place-items: center; margin: 1.55rem auto 1rem; }
  .quota-orbit::before, .quota-orbit::after { position: absolute; border: 1px solid rgb(167 243 193 / .08); border-radius: 50%; content: ""; }
  .quota-orbit::before { inset: 0; }
  .quota-orbit::after { inset: 8%; border-style: dashed; }
  .quota-ring { display: grid; inline-size: 8.7rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--signal) var(--quota), rgb(255 255 255 / .065) 0); box-shadow: 0 0 2rem rgb(167 243 193 / .06); }
  .quota-ring::before { position: absolute; inline-size: 7.55rem; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; background: var(--ink-850); content: ""; }
  .quota-ring > span { position: relative; z-index: 1; display: grid; justify-items: center; }
  .quota-ring strong { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: -.06em; }
  .quota-ring small { color: var(--muted-2); font-size: .55rem; }
  .orbit-dot { position: absolute; inset-block-start: 7%; inset-inline-start: 46%; inline-size: .42rem; block-size: .42rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 .8rem var(--signal); }
  .quota-summary { display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid var(--line); }
  .quota-summary > span { display: grid; padding: .8rem; text-align: center; }
  .quota-summary > span:first-child { border-inline-end: 1px solid var(--line); }
  .quota-summary small, .forecast-row small { color: var(--muted-2); font-size: .48rem; }
  .quota-summary strong, .forecast-row strong { margin-block-start: .12rem; font-family: var(--font-mono); font-size: .67rem; }
  .forecast-row { display: flex; align-items: center; justify-content: space-between; padding: .75rem .2rem; }
  .forecast-row > span { display: grid; }
  .forecast-row em { padding: .2rem .35rem; border-radius: .3rem; background: rgb(255 255 255 / .045); color: var(--muted); font-family: var(--font-mono); font-size: .45rem; font-style: normal; }
  .key-quotas { display: grid; gap: .7rem; padding-block: .35rem .8rem; }
  .key-quotas > div > span { display: flex; justify-content: space-between; color: var(--paper-2); font-size: .5rem; }
  .key-quotas em { color: var(--muted-2); font-family: var(--font-mono); font-size: .45rem; font-style: normal; }
  .key-quotas > div > i { display: block; block-size: .23rem; margin-block-start: .32rem; overflow: hidden; border-radius: 999rem; background: rgb(255 255 255 / .065); }
  .key-quotas b { display: block; inline-size: var(--key-usage); block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--signal)); transition: inline-size .6s var(--smooth); }
  .card-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--signal); font-size: .6rem; font-weight: 700; }

  .economics-grid { display: grid; grid-template-columns: minmax(22rem, 1.3fr) minmax(18rem, .75fr) minmax(20rem, .95fr); gap: .8rem; margin-block-start: .8rem; }
  .model-card, .cache-card, .provider-card { min-block-size: 26rem; padding: 1.25rem; }
  .text-button { min-block-size: 2.2rem; padding-inline: .55rem; border-radius: .5rem; background: transparent; color: var(--signal); font-size: .54rem; font-weight: 700; transition: background .2s ease; }
  .text-button:hover { background: rgb(167 243 193 / .06); }
  .model-list { display: grid; gap: .1rem; margin-block-start: 1rem; list-style: none; }
  .model-list li { display: grid; grid-template-columns: auto minmax(8rem, 1fr) minmax(7rem, .75fr); align-items: center; gap: .65rem; min-block-size: 3.55rem; padding-inline: .55rem; border-block-end: 1px solid rgb(255 255 255 / .055); border-radius: .45rem; transition: background .2s ease; }
  .model-list li:hover { background: rgb(255 255 255 / .025); }
  .model-list .dashboard-empty-row, .provider-health .dashboard-empty-row { display: grid; min-block-size: 7rem; grid-template-columns: 1fr; place-items: center; padding: 1rem; border: 0; color: var(--muted-2); font-size: .55rem; text-align: center; }
  .model-list .dashboard-empty-row:hover { background: transparent; }
  .dashboard-inline-empty { padding-block: 1rem; color: var(--muted-2); font-size: .53rem; }
  .model-list li:last-child { border-block-end: 0; }
  .model-list .secondary-model:not(.is-visible) { display: none; }
  .provider-avatar { display: inline-grid; inline-size: 1.75rem; block-size: 1.75rem; place-items: center; flex: none; border: 1px solid var(--line); border-radius: .48rem; background: rgb(255 255 255 / .035); font-family: var(--font-mono); font-size: .6rem; font-weight: 700; }
  .avatar-a { border-color: rgb(211 173 123 / .22); color: #ddb77f; }
  .avatar-o { border-color: rgb(167 243 193 / .22); color: var(--signal); }
  .avatar-g { border-color: rgb(255 130 82 / .25); color: #ff936c; }
  .avatar-m { border-color: rgb(255 209 122 / .24); color: var(--amber); }
  .avatar-c { border-color: rgb(118 221 247 / .22); color: var(--cyan); }
  .model-list li > span:nth-child(2) { display: grid; min-inline-size: 0; }
  .model-list li > span:nth-child(2) strong { overflow: hidden; color: var(--paper-2); font-size: .61rem; text-overflow: ellipsis; white-space: nowrap; }
  .model-list li > span:nth-child(2) small { color: var(--muted-2); font-size: .47rem; }
  .model-list li > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .4rem; }
  .model-list li > div > span { grid-column: 1 / -1; display: block; block-size: .22rem; overflow: hidden; border-radius: 999rem; background: rgb(255 255 255 / .06); }
  .model-list li > div > span::before { display: block; inline-size: var(--share); block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--violet), var(--signal)); content: ""; }
  .model-list li > div strong { font-family: var(--font-mono); font-size: .55rem; }
  .model-list li > div small { justify-self: end; color: var(--muted-2); font-family: var(--font-mono); font-size: .42rem; }

  .cache-layout { display: grid; grid-template-columns: 8.8rem 1fr; align-items: center; gap: 1rem; margin-block-start: 1.4rem; }
  .cache-donut { position: relative; display: grid; inline-size: 8.3rem; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(var(--violet) var(--hit-rate), rgb(255 255 255 / .06) 0); box-shadow: 0 0 2rem rgb(149 135 255 / .06); }
  .cache-donut::before { position: absolute; inset: .68rem; border: 1px solid var(--line); border-radius: 50%; background: var(--ink-850); content: ""; }
  .cache-donut > span { position: relative; display: grid; justify-items: center; }
  .cache-donut strong { font-family: var(--font-mono); font-size: 1.15rem; letter-spacing: -.06em; }
  .cache-donut small { color: var(--muted-2); font-size: .5rem; }
  .cache-layout dl { display: grid; }
  .cache-layout dl > div { display: flex; align-items: center; justify-content: space-between; min-block-size: 2.4rem; border-block-end: 1px solid rgb(255 255 255 / .05); }
  .cache-layout dl > div:last-child { border-block-end: 0; }
  .cache-layout dt { color: var(--muted-2); font-size: .5rem; }
  .cache-layout dd { color: var(--paper-2); font-family: var(--font-mono); font-size: .58rem; }
  .savings-callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; margin-block-start: 1.25rem; padding: .75rem; border: 1px solid rgb(167 243 193 / .13); border-radius: .7rem; background: rgb(167 243 193 / .045); }
  .savings-callout > span:first-child { display: grid; inline-size: 2rem; block-size: 2rem; place-items: center; border-radius: .5rem; background: rgb(167 243 193 / .08); color: var(--signal); }
  .savings-callout svg { inline-size: 1rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
  .savings-callout > span:nth-child(2) { display: grid; }
  .savings-callout small { color: var(--muted-2); font-size: .45rem; }
  .savings-callout strong { color: var(--signal); font-family: var(--font-mono); font-size: .7rem; }
  .savings-callout em { color: var(--signal); font-size: .47rem; font-style: normal; }
  .cache-card > p { margin-block-start: 1rem; font-family: var(--font-mono); font-size: .47rem; }
  .cache-card > p strong { color: var(--paper-2); }

  .provider-health { display: grid; margin-block-start: 1rem; list-style: none; }
  .provider-health li { display: grid; grid-template-columns: auto minmax(5rem, .8fr) minmax(4rem, 1fr) auto auto; align-items: center; gap: .55rem; min-block-size: 3.35rem; border-block-end: 1px solid rgb(255 255 255 / .05); }
  .provider-health li > span:nth-child(2) { display: grid; min-inline-size: 0; }
  .provider-health li > span:nth-child(2) strong { color: var(--paper-2); font-size: .56rem; }
  .provider-health li > span:nth-child(2) small { overflow: hidden; color: var(--muted-2); font-size: .42rem; text-overflow: ellipsis; white-space: nowrap; }
  .latency-bar { block-size: .25rem; overflow: hidden; border-radius: 999rem; background: rgb(255 255 255 / .06); }
  .latency-bar i { display: block; inline-size: var(--latency); block-size: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--signal), var(--violet)); }
  .provider-health em { color: var(--paper-2); font-family: var(--font-mono); font-size: .49rem; font-style: normal; }
  .provider-health b { padding: .16rem .28rem; border-radius: .25rem; background: rgb(167 243 193 / .07); color: var(--signal); font-size: .4rem; font-weight: 650; }
  .provider-card footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-start: 1rem; padding: .7rem; border: 1px solid var(--line); border-radius: .55rem; background: rgb(255 255 255 / .02); font-size: .45rem; }
  .provider-card footer span { display: flex; align-items: center; gap: .35rem; color: var(--muted); }
  .provider-card footer i { inline-size: .35rem; block-size: .35rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 .4rem var(--amber); }
  .provider-card footer strong { color: var(--signal); font-family: var(--font-mono); font-size: .43rem; }

  .request-card { margin-block-start: .8rem; }
  .request-header { align-items: center; padding: 1.25rem; }
  .request-actions { display: flex; align-items: center; gap: .5rem; }
  .request-search { display: flex; min-block-size: 2.65rem; align-items: center; gap: .45rem; padding-inline: .7rem; border: 1px solid var(--line); border-radius: .62rem; background: rgb(255 255 255 / .025); transition: border-color .2s ease, background .2s ease; }
  .request-search:focus-within { border-color: var(--cyan); background: rgb(255 255 255 / .04); }
  .request-search svg { inline-size: .9rem; fill: none; stroke: var(--muted-2); stroke-linecap: round; stroke-width: 1.5; }
  .request-actions input { inline-size: 10rem; border: 0; outline: 0; background: transparent; color: var(--paper); font-size: .58rem; }
  .request-actions input::placeholder { color: #6f7788; }
  .filter-button { min-block-size: 2.65rem; }
  .request-table-wrap { overflow-x: auto; border-block: 1px solid var(--line); scrollbar-color: var(--muted-2) var(--ink-850); scrollbar-width: thin; }
  .request-table { inline-size: 100%; min-inline-size: 61rem; border-collapse: collapse; text-align: start; }
  .request-table caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .request-table th { block-size: 2.5rem; padding-inline: .9rem; border-block-end: 1px solid var(--line); background: rgb(255 255 255 / .018); color: var(--muted-2); font-family: var(--font-mono); font-size: .44rem; font-weight: 550; letter-spacing: .05em; text-align: start; text-transform: uppercase; }
  .request-table td { block-size: 3.8rem; padding-inline: .9rem; border-block-end: 1px solid rgb(255 255 255 / .05); color: #adb2be; font-family: var(--font-mono); font-size: .5rem; }
  .request-table tbody tr { transition: background .18s ease; }
  .request-table tbody tr:hover { background: rgb(255 255 255 / .022); }
  .request-table tbody tr:last-child td { border-block-end: 0; }
  .request-table .secondary-request:not(.is-loaded) { display: none; }
  .request-table td:first-child, .request-table td:nth-child(3) { display: grid; align-content: center; }
  .request-table td:first-child code { color: var(--paper-2); font-size: .54rem; }
  .request-table td small { color: var(--muted-2); font-size: .42rem; }
  .request-table td small.good { color: var(--signal); }
  .request-table td:nth-child(2) { white-space: nowrap; }
  .request-table td:nth-child(2) > span:nth-child(2) { display: inline-grid; vertical-align: middle; }
  .request-table td:nth-child(2) .provider-avatar { inline-size: 1.55rem; block-size: 1.55rem; margin-inline-end: .5rem; vertical-align: middle; }
  .request-table td:nth-child(2) strong { color: var(--paper-2); font-size: .48rem; }
  .request-table .empty-table-row td { display: table-cell; block-size: 8rem; color: var(--muted-2); text-align: center; }
  .table-chip { display: inline-flex; align-items: center; padding: .24rem .4rem; border-radius: .32rem; font-size: .43rem; white-space: nowrap; }
  .table-chip.success { background: rgb(167 243 193 / .075); color: var(--signal); }
  .table-chip.fallback { background: rgb(255 209 122 / .08); color: var(--amber); }
  .table-chip.error { background: rgb(255 130 125 / .08); color: var(--danger); }
  .table-chip.cache-hit { background: rgb(149 135 255 / .1); color: #b6adff; }
  .table-chip.cache-miss { background: rgb(255 255 255 / .045); color: var(--muted); }
  .table-footer { display: flex; min-block-size: 3.8rem; align-items: center; justify-content: space-between; padding-inline: 1.25rem; color: var(--muted-2); font-family: var(--font-mono); font-size: .46rem; }
  .table-footer button { min-block-size: 2.25rem; padding-inline: .65rem; border: 1px solid var(--line); border-radius: .5rem; background: rgb(255 255 255 / .025); color: var(--paper-2); font-size: .5rem; transition: background .2s ease, border-color .2s ease; }
  .table-footer button:hover { border-color: var(--line-strong); background: rgb(255 255 255 / .055); }
  .table-footer button:disabled, .text-button:disabled { cursor: default; opacity: .55; }

  .dashboard-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-block-start: 1.5rem; padding-block: 1.25rem .2rem; border-block-start: 1px solid var(--line); color: var(--muted-2); font-family: var(--font-mono); font-size: .45rem; }
  .dashboard-footer > span:nth-child(2) { display: flex; align-items: center; gap: .35rem; }
  .dashboard-footer > a { justify-self: end; transition: color .2s ease; }
  .dashboard-footer > a:hover { color: var(--paper); }

  .popover-card {
    position: fixed;
    inset: auto;
    box-sizing: border-box;
    max-inline-size: calc(100vw - 1.5rem);
    padding: .55rem;
    border: 1px solid var(--line-strong);
    border-radius: .8rem;
    background: rgb(12 16 26 / .98);
    color: var(--paper);
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .42), inset 0 1px 0 rgb(255 255 255 / .045);
    opacity: 0;
    translate: 0 -.35rem;
    transition: opacity .18s ease, translate .3s var(--spring), display .3s allow-discrete, overlay .3s allow-discrete;
  }

  .popover-card:popover-open { opacity: 1; translate: 0; }
  @starting-style { .popover-card:popover-open { opacity: 0; translate: 0 -.45rem; } }
  .popover-card::backdrop { background: transparent; }
  .popover-label { display: block; padding: .45rem .55rem; color: var(--muted-2); font-family: var(--font-mono); font-size: .46rem; letter-spacing: .08em; text-transform: uppercase; }
  .workspace-menu { inset-block-start: 9.7rem; inset-inline-start: 1rem; inline-size: 14.5rem; }
  .workspace-menu button { display: grid; grid-template-columns: auto 1fr auto; inline-size: 100%; align-items: center; gap: .6rem; padding: .55rem; border-radius: .55rem; background: transparent; text-align: start; }
  .workspace-menu button:hover, .workspace-menu button.selected { background: rgb(255 255 255 / .045); }
  .workspace-menu button > span:nth-child(2) { display: grid; }
  .workspace-menu strong { color: var(--paper-2); font-size: .62rem; }
  .workspace-menu small { color: var(--muted-2); font-size: .48rem; }
  .workspace-menu button > i { color: var(--signal); font-style: normal; }
  .workspace-menu > a { display: block; margin-block-start: .35rem; padding: .65rem .55rem; border-block-start: 1px solid var(--line); color: var(--signal); font-size: .55rem; font-weight: 650; }

  .account-menu { inset-block-start: 3.85rem; inset-inline-end: 1rem; inline-size: 14rem; }
  .account-summary { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; padding: .55rem; border-block-end: 1px solid var(--line); }
  .account-summary > span:nth-child(2) { display: grid; }
  .account-summary strong { color: var(--paper-2); font-size: .62rem; }
  .account-summary small { color: var(--muted-2); font-size: .48rem; }
  .account-menu > a { display: flex; min-block-size: 2.4rem; align-items: center; padding-inline: .55rem; border-radius: .45rem; color: var(--muted); font-size: .56rem; transition: background .18s ease, color .18s ease; }
  .account-menu > a:hover { background: rgb(255 255 255 / .04); color: var(--paper); }

  .notifications-panel { inset-block-start: 3.85rem; inset-inline-end: 4rem; inline-size: min(27rem, calc(100vw - 2rem)); max-block-size: min(80vh, 40rem); padding: 0; overflow: auto; }
  .account-messages { margin-block: 1rem; border: 1px solid var(--line); border-radius: .75rem; overflow: hidden; }
  .notification-list { list-style: none; margin: 0; padding: 0; }
  .notification-status:not(:empty) { padding: .6rem .85rem; }
  .notification a, .notification button, .notifications-more, .notifications-account-link { display: inline-flex; align-items: center; min-block-size: 2.75rem; color: var(--signal); font-size: .8rem; }
  .notification button, .notifications-more { border: 1px solid var(--line); border-radius: .4rem; background: transparent; padding-inline: .7rem; justify-self: start; }
  .notifications-more, .notifications-account-link { margin: .6rem .85rem; }
  .notification time { color: var(--muted-2); font-size: .75rem; margin-block-start: .4rem; }
  .notification-badge { position: absolute; inset-block-start: -.2rem; inset-inline-end: -.35rem; min-inline-size: 1rem; border-radius: 1rem; padding: .1rem .2rem; color: var(--ink); background: var(--signal); font-size: .5rem; }
  .icon-button:has(.notification-badge) { position: relative; }
  .notification-badge[hidden], .notifications-more[hidden] { display: none; }
  .notifications-panel-head { display: flex; align-items: center; justify-content: space-between; padding: .8rem; border-block-end: 1px solid var(--line); }
  .notifications-panel-head > span { display: grid; }
  .notifications-panel-head strong, .notifications-panel-head h2 { margin: 0; font-size: .9rem; }
  .notifications-panel-head small { color: var(--muted-2); font-size: .75rem; }
  .notifications-panel-head button { min-block-size: 2.75rem; border-radius: .4rem; background: transparent; color: var(--signal); font-size: .75rem; }
  .notifications-panel-head button:disabled,
  .table-footer button:disabled { cursor: default; opacity: .55; }
  .notification { display: grid; grid-template-columns: auto 1fr; gap: .65rem; padding: .85rem; border-block-end: 1px solid rgb(255 255 255 / .055); }
  .notification.unread { background: rgb(167 243 193 / .025); }
  .notification > div:last-child { display: grid; min-inline-size: 0; overflow-wrap: anywhere; }
  .notification strong { color: var(--paper-2); font-size: .95rem; }
  .notification p { margin-block-start: .15rem; font-size: .875rem; line-height: 1.55; }
  .notification small { margin-block-start: .3rem; color: var(--muted-2); font-size: .75rem; }
  .notice-icon { display: grid; inline-size: 1.8rem; block-size: 1.8rem; place-items: center; border-radius: .5rem; font-family: var(--font-mono); font-size: .6rem; }
  .notice-save { background: rgb(167 243 193 / .08); color: var(--signal); }
  .notice-route { background: rgb(149 135 255 / .09); color: #b4abff; }
  .notice-key { background: rgb(255 209 122 / .08); color: var(--amber); }

  .request-filters { inline-size: 11rem; }
  .request-filters > div { display: grid; gap: .15rem; }
  .request-filters button { min-block-size: 2.3rem; padding-inline: .55rem; border-radius: .45rem; background: transparent; color: var(--muted); font-size: .55rem; text-align: start; }
  .request-filters button:hover { background: rgb(255 255 255 / .035); color: var(--paper); }
  .request-filters button[aria-pressed="true"] { background: rgb(167 243 193 / .07); color: var(--signal); }

  .dashboard-tour { inset: auto 1.25rem 1.25rem auto; inline-size: min(20rem, calc(100vw - 1.5rem)); padding: 1rem; border-color: rgb(167 243 193 / .24); background: linear-gradient(145deg, rgb(16 26 29 / .99), rgb(10 14 22 / .99)); }
  .dashboard-tour .tour-count { color: var(--signal); font-family: var(--font-mono); font-size: .46rem; letter-spacing: .1em; }
  .dashboard-tour h2 { margin-block: .4rem .35rem; font-size: 1.05rem; }
  .dashboard-tour p { font-size: .58rem; line-height: 1.55; }
  .tour-actions { display: flex; align-items: center; justify-content: space-between; margin-block-start: .9rem; padding-block-start: .75rem; border-block-start: 1px solid var(--line); }
  .tour-actions > span { display: flex; gap: .35rem; }
  .tour-actions button { min-block-size: 2.3rem; padding-inline: .7rem; border-radius: .45rem; background: transparent; color: var(--muted); font-size: .52rem; font-weight: 700; }
  .tour-actions #tour-next { background: var(--signal); color: var(--ink-950); }
  .tour-target { position: relative; z-index: 1; border-radius: .9rem; box-shadow: 0 0 0 .18rem rgb(167 243 193 / .45), 0 0 3rem rgb(167 243 193 / .1); }

  .toast { position: fixed; z-index: 100; inset: auto 1.25rem 1.25rem auto; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; max-inline-size: 20rem; padding: .75rem .9rem; border: 1px solid rgb(167 243 193 / .2); border-radius: .7rem; background: rgb(13 20 23 / .97); box-shadow: 0 1rem 3rem rgb(0 0 0 / .38); color: var(--paper-2); opacity: 1; translate: 0; transition: opacity .2s ease, translate .35s var(--spring); }
  .toast[hidden] { display: none; }
  .toast > span { display: grid; inline-size: 1.45rem; block-size: 1.45rem; place-items: center; border-radius: 50%; background: rgb(167 243 193 / .1); color: var(--signal); font-size: .65rem; }
  .toast p { color: var(--paper-2); font-size: .58rem; }
  .mobile-nav { display: none; }
}

@layer responsive {
  @media (min-width: 44.01rem) {
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed:has(> .sidebar) { grid-template-columns: 4.75rem minmax(0, 1fr); }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar { padding-inline: .65rem; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .brand { justify-content: center; margin-inline: 0; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .brand > span,
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .workspace-rail-toggle > span,
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .workspace-switcher > span:nth-child(2),
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .workspace-switcher > svg,
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .sidebar-nav h2,
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .sidebar-nav a > span,
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .sidebar-nav a > em,
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .sidebar-nav a > strong,
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .environment-card > strong,
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .environment-card > small,
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .account-button > span:nth-child(2),
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .account-button > svg { display: none; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .workspace-rail-toggle { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .workspace-rail-toggle svg { transform: scaleX(-1); }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .workspace-switcher { grid-template-columns: 1fr; justify-items: center; padding-inline: .35rem; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .sidebar-nav { margin-block-start: 1rem; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .sidebar-nav a { grid-template-columns: 1fr; justify-items: center; gap: 0; padding-inline: 0; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .sidebar-nav a::before { inset-inline-start: -.66rem; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .environment-card { min-block-size: 2.65rem; place-items: center; padding: .45rem; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .environment-card > span { font-size: 0; }
    :is(.dashboard-shell, .admin-shell).workspace-rail-collapsed > .sidebar .account-button { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
  }

  @container (max-width: 70rem) {
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .economics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .provider-card { grid-column: 1 / -1; min-block-size: auto; }
    .provider-health { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  }

  @media (max-width: 72rem) {
    .wallet-banner { grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) auto; }
    .wallet-forecast { display: none; }
    .analytics-grid { grid-template-columns: minmax(0, 1.5fr) minmax(17rem, .7fr); }
  }

  @media (max-width: 44rem) {
    .dashboard-shell { grid-template-columns: 1fr; }
    .sidebar, .topbar { display: none; }
    .mobile-header { position: sticky; z-index: 30; inset-block-start: 0; display: flex; min-block-size: 4.4rem; align-items: center; justify-content: space-between; padding-inline: 1rem; border-block-end: 1px solid var(--line); background: rgb(7 10 17 / .88); backdrop-filter: blur(1.2rem); }
    .mobile-header > div { display: flex; gap: .35rem; }
    .dashboard-content { inline-size: min(100% - 2rem, 58rem); }
    .mobile-nav:not(:popover-open) { display: none; }
    .mobile-nav:popover-open { position: fixed; inset: .65rem; display: block; inline-size: auto; max-inline-size: none; padding: .85rem; }
    .mobile-nav::backdrop { background: rgb(3 5 10 / .68); backdrop-filter: blur(.25rem); }
    .mobile-nav-head { display: flex; align-items: center; justify-content: space-between; padding-block-end: .75rem; border-block-end: 1px solid var(--line); }
    .mobile-nav nav { display: grid; margin-block-start: .6rem; }
    .mobile-nav nav a { display: flex; min-block-size: 3.3rem; align-items: center; padding-inline: .75rem; border-block-end: 1px solid rgb(255 255 255 / .055); color: var(--muted); font-size: .82rem; font-weight: 650; }
    .mobile-nav nav a.active { color: var(--signal); }
    .mobile-nav .support-link { display: flex; min-block-size: 3rem; align-items: center; justify-content: center; margin-block-start: 1rem; border: 1px solid var(--line-strong); border-radius: .65rem; color: var(--paper-2); font-size: .7rem; font-weight: 700; }
    .notifications-panel { inset-block-start: 4.2rem; inset-inline-end: .75rem; }
    .account-menu { inset-block-start: 4.2rem; }
  }

  @media (max-width: 52rem) {
    .page-heading { align-items: start; flex-direction: column; }
    .heading-actions { inline-size: 100%; }
    .heading-actions .action-button { margin-inline-start: auto; }
    .wallet-banner { grid-template-columns: 1fr auto; }
    .wallet-quota { grid-column: 1 / -1; grid-row: 2; padding-block-start: .75rem; border-block-start: 1px solid var(--line); }
    .analytics-grid, .economics-grid { grid-template-columns: 1fr; }
    .quota-card, .provider-card { grid-column: auto; }
    .provider-health { grid-template-columns: 1fr; }
    .request-header { align-items: start; flex-direction: column; }
    .request-actions { inline-size: 100%; }
    .request-search { flex: 1; }
    .request-actions input { inline-size: 100%; }
    .dashboard-footer { grid-template-columns: 1fr; justify-items: start; }
    .dashboard-footer > a { justify-self: start; }
  }

  @media (max-width: 34rem) {
    .dashboard-content { inline-size: calc(100% - 1.25rem); padding-block-start: 1.5rem; }
    .page-heading h1 { font-size: clamp(2rem, 11vw, 3rem); }
    .page-heading p { font-size: .8rem; }
    .heading-kicker time { display: none; }
    .heading-actions { align-items: stretch; }
    .range-control { flex: 1; }
    .range-control button { flex: 1; }
    .action-button span { display: none; }
    .action-button { inline-size: 2.75rem; padding: 0; }
    .wallet-banner { padding: .85rem; }
    .wallet-banner > a { align-self: start; }
    .metric-grid { grid-template-columns: 1fr; }
    .metric-card { min-block-size: 9.5rem; }
    .metric-card:has(.metric-spark[hidden]) { min-block-size: 8rem; }
    .usage-card, .quota-card, .model-card, .cache-card, .provider-card { padding: 1rem; }
    .usage-chart { grid-template-columns: 1.7rem minmax(0, 1fr); }
    .chart-stage, .chart-y-axis { block-size: 14rem; }
    .legend { align-items: end; flex-direction: column; gap: .2rem; }
    .chart-x-axis span:nth-child(even) { display: none; }
    .cache-layout { grid-template-columns: 7rem 1fr; gap: .65rem; }
    .cache-donut { inline-size: 6.7rem; }
    .model-list li { grid-template-columns: auto minmax(0, 1fr); padding-block: .55rem; }
    .model-list li > div { grid-column: 2; }
    .provider-health li { grid-template-columns: auto minmax(4rem, 1fr) auto auto; }
    .provider-health .latency-bar { display: none; }
    .provider-card footer { align-items: start; flex-direction: column; }
    .request-actions { align-items: stretch; flex-direction: column; }
    .filter-button { inline-size: 100%; }
    .table-footer { align-items: start; flex-direction: column; justify-content: center; gap: .45rem; }
    .notifications-panel { inset-inline: .65rem; inline-size: auto; }
    .workspace-menu { inset-inline: .65rem; inline-size: calc(100% - 1.3rem); }
    .toast { inset-inline: .65rem; inset-block-end: .65rem; max-inline-size: none; }
    .dashboard-tour { inset: auto .65rem .65rem; inline-size: auto; }
  }

  @media (pointer: coarse) {
    .sidebar-nav a, .topbar-link, .text-button, .table-footer button { min-block-size: 2.75rem; }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }

  @media (forced-colors: active) {
    .dashboard-card, .metric-card, .wallet-banner, .popover-card, .workspace-switcher, .action-button, .filter-button { border-color: CanvasText; }
  }
}