/* ============================================================
   NeuroRoute — Design System
   Cosmic-dark SaaS. Routing metaphor: network -> 3 colored arrows
   (cyan / magenta / amber). Expressive, data-rich, Linear+Stripe.
   ============================================================ */

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

:root{
  /* base surfaces — slightly cool near-black */
  --bg-0:#07080d;          /* deepest (page) */
  --bg-1:#0b0d15;          /* app canvas */
  --bg-2:#11141f;          /* cards */
  --bg-3:#171b29;          /* raised / hover */
  --bg-inset:#0a0c13;      /* inputs, wells */

  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.18);

  --tx-0:#eef1f8;          /* primary text */
  --tx-1:#aab2c5;          /* secondary */
  --tx-2:#727b91;          /* muted */
  --tx-3:#525a6e;          /* faint */

  /* brand / routing palette */
  --blue:#3b82f6;          /* network / routing / primary */
  --blue-2:#2563eb;
  --cyan:#22d3ee;          /* route arrow 1 / fast */
  --magenta:#e24fd6;       /* route arrow 2 / creative */
  --pink:#ec4899;
  --amber:#f59e0b;         /* route arrow 3 / warning */
  --green:#10b981;         /* savings / success */
  --purple:#8b5cf6;        /* premium / AI */
  --red:#f43f5e;

  /* tints (for soft badge/panel fills) */
  --blue-t:rgba(59,130,246,.14);
  --cyan-t:rgba(34,211,238,.14);
  --magenta-t:rgba(226,79,214,.14);
  --amber-t:rgba(245,158,11,.14);
  --green-t:rgba(16,185,129,.14);
  --purple-t:rgba(139,92,246,.14);
  --red-t:rgba(244,63,94,.14);

  /* signature gradients */
  --grad-route:linear-gradient(90deg,var(--cyan),var(--magenta) 52%,var(--amber));
  --grad-brand:linear-gradient(120deg,var(--blue),var(--magenta));
  --grad-wordmark:linear-gradient(100deg,#4ea0ff,#8b5cf6 48%,#ec4899);
  --grad-cosmic:radial-gradient(120% 120% at 0% 0%, rgba(59,130,246,.20), transparent 45%),
                radial-gradient(120% 120% at 100% 0%, rgba(226,79,214,.16), transparent 45%),
                radial-gradient(140% 140% at 60% 120%, rgba(245,158,11,.10), transparent 50%);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 28px -12px rgba(0,0,0,.7);
  --sh-glow:0 0 0 1px var(--line-2), 0 18px 50px -18px rgba(59,130,246,.45);

  --sidebar-w:248px;
  --font-display:'Space Grotesk',sans-serif;
  --font-ui:'Manrope',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-ui);
  background:var(--bg-0);
  color:var(--tx-0);
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.5;
}
#root{min-height:100vh}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
::selection{background:rgba(226,79,214,.35)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#222838;border-radius:99px;border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#33394d;background-clip:padding-box}

/* ---------- typography helpers ---------- */
.display{font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;line-height:1.04}
.mono{font-family:var(--font-mono)}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.eyebrow{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--tx-2)}
.muted{color:var(--tx-1)}
.faint{color:var(--tx-2)}
.gradient-text{background:var(--grad-wordmark);-webkit-background-clip:text;background-clip:text;color:transparent}
.route-text{background:var(--grad-route);-webkit-background-clip:text;background-clip:text;color:transparent}

h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.02em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:var(--r-md);
  font-family:var(--font-ui);font-weight:600;font-size:14px;
  padding:10px 16px;line-height:1;white-space:nowrap;
  transition:.16s ease;color:var(--tx-0)}
.btn:active{transform:translateY(1px)}
.btn .ico{width:16px;height:16px;flex:none}
.btn-primary{background:var(--blue);border-color:transparent;color:#fff;
  box-shadow:0 6px 20px -8px rgba(59,130,246,.8)}
.btn-primary:hover{background:#5396ff}
.btn-grad{background:var(--grad-brand);color:#fff;box-shadow:0 8px 24px -8px rgba(226,79,214,.55)}
.btn-grad:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--tx-0)}
.btn-ghost:hover{background:var(--bg-3);border-color:var(--line-strong)}
.btn-soft{background:var(--bg-3);border-color:var(--line);color:var(--tx-0)}
.btn-soft:hover{background:#1d2233}
.btn-danger{background:var(--red-t);border-color:rgba(244,63,94,.4);color:#ff8095}
.btn-danger:hover{background:rgba(244,63,94,.22)}
.btn-outline{background:transparent;border-color:var(--line-2);color:var(--tx-1)}
.btn-outline:hover{background:var(--bg-3);border-color:var(--line-strong)}
.btn-sm{padding:7px 11px;font-size:13px;border-radius:var(--r-sm)}
.btn-xs{padding:4px 9px;font-size:12px;border-radius:var(--r-sm)}
.btn-lg{padding:13px 22px;font-size:15.5px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* icon button */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--bg-2);color:var(--tx-1);transition:.15s}
.iconbtn:hover{color:var(--tx-0);background:var(--bg-3);border-color:var(--line-2)}

/* ---------- cards ---------- */
.card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.card-pad{padding:20px}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.card-hd h3{font-size:15px}
.card-title{font-family:var(--font-display);font-size:15px;font-weight:600}
.card-sub{font-size:12.5px;color:var(--tx-2);margin-top:2px}
.card-hover{transition:.18s ease}
.card-hover:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(0,0,0,.8)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:var(--r-pill);border:1px solid transparent;
  font-family:var(--font-ui);letter-spacing:.01em;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.b-blue{background:var(--blue-t);color:#7db0ff;border-color:rgba(59,130,246,.3)}
.b-cyan{background:var(--cyan-t);color:#5fe2f5;border-color:rgba(34,211,238,.3)}
.b-magenta{background:var(--magenta-t);color:#ef82e4;border-color:rgba(226,79,214,.3)}
.b-amber{background:var(--amber-t);color:#fbc15a;border-color:rgba(245,158,11,.32)}
.b-green{background:var(--green-t);color:#43d6a3;border-color:rgba(16,185,129,.32)}
.b-purple{background:var(--purple-t);color:#b095fb;border-color:rgba(139,92,246,.32)}
.b-red{background:var(--red-t);color:#ff8095;border-color:rgba(244,63,94,.32)}
.b-gray{background:rgba(255,255,255,.05);color:var(--tx-1);border-color:var(--line-2)}

/* role badges */
.role{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:5px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.label{font-size:12.5px;font-weight:600;color:var(--tx-1)}
.hint{font-size:12px;color:var(--tx-2)}
.input,.select,.textarea{
  width:100%;background:var(--bg-inset);border:1px solid var(--line-2);border-radius:var(--r-md);
  color:var(--tx-0);font-family:var(--font-ui);font-size:14px;padding:11px 13px;transition:.15s;outline:none}
.input::placeholder,.textarea::placeholder{color:var(--tx-3)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.2)}
.textarea{resize:vertical;min-height:96px;line-height:1.5}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23727b91' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.input-mono{font-family:var(--font-mono);font-size:13px}
/* Compact form controls for dense admin surfaces (model catalog, per-model
   overrides) where the default 11px/14px control is far taller than the row
   of data it sits next to. */
.input-sm,.select-sm{padding:6px 9px;font-size:12.5px;border-radius:var(--r-sm)}
.select-sm{padding-right:26px;background-position:right 8px center}

/* ── Dense tile grid ──────────────────────────────────────────
   For catalogs that list tens of items (33 models today) where the card
   layout's stacked label/meter pairs turned one screen of data into a page
   of scrolling. Auto-fills as narrow as 210px, so a wide screen shows 5-6
   per row instead of 3. */
.tilegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.tile{background:var(--bg-2,var(--bg-inset));border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 11px;display:flex;flex-direction:column;gap:7px;min-width:0}
.tile:hover{border-color:var(--line-2)}
.tile-hd{display:flex;align-items:center;gap:7px;min-width:0}
.tile-name{font-weight:650;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Stats sit on one line as label-over-value pairs rather than as full-width
   rows with their own meters — same four numbers, a third of the height. */
.tile-stats{display:flex;gap:10px;flex-wrap:wrap}
.tile-stat{display:flex;flex-direction:column;gap:1px;min-width:0}
.tile-stat b{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--tx-0);
  font-variant-numeric:tabular-nums;line-height:1.2}
.tile-stat span{font-size:9.5px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.04em}
.meter-xs{height:3px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.meter-xs>span{display:block;height:100%;border-radius:99px}

/* ── Dense list row ───────────────────────────────────────────
   One line per record with inline chips, replacing a bordered block per
   record. Used by the per-model quality-override editor.

   A GRID, not a flex row: with flex, a record carrying many chips squeezed
   the identity column to zero width (the model name vanished behind its own
   ellipsis) and pushed the trailing action button off the right edge. Fixed
   identity and action tracks mean the name is always legible and the "+"
   is always reachable, however many chips the middle track holds. */
.drow{display:grid;grid-template-columns:minmax(170px,230px) 1fr auto;gap:10px;
  align-items:start;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.drow:last-child{border-bottom:none}
.drow-id{display:flex;align-items:center;gap:6px;min-width:0;padding-top:2px}
.drow-id .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* wrap, so the chip set grows downward inside its track instead of
   overflowing the card horizontally */
.drow-chips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;min-width:0}
.drow-act{display:flex;align-items:center;gap:6px;padding-top:1px}
@media (max-width:820px){
  .drow{grid-template-columns:1fr;gap:6px}
  .drow-act{justify-content:flex-end}
}

.qchip{display:inline-flex;align-items:center;gap:4px;padding:2px 4px 2px 8px;border-radius:var(--r-pill);
  background:var(--cyan-t);border:1px solid rgba(34,211,238,.3);color:#5fe2f5;font-size:11px;font-weight:600}
.qchip b{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;
  cursor:pointer;padding:0 3px;border-radius:4px;border:1px solid transparent}
.qchip b:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
/* inline score editor — sized to the 4 chars it holds ("0.98") so the chip
   keeps its shape while being edited */
.qchip input{width:38px;background:var(--bg-0);border:1px solid var(--blue);border-radius:4px;
  color:var(--tx-0);font-family:var(--font-mono);font-size:11px;font-weight:700;padding:0 3px;outline:none;
  -moz-appearance:textfield}
.qchip input::-webkit-outer-spin-button,.qchip input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qchip button{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border:none;background:transparent;color:inherit;opacity:.6;cursor:pointer;padding:0;border-radius:4px}
.qchip button:hover{opacity:1;background:rgba(255,255,255,.12)}

/* toggle switch */
.switch{position:relative;width:42px;height:24px;flex:none;border-radius:99px;background:var(--bg-3);
  border:1px solid var(--line-2);transition:.18s;cursor:pointer}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--tx-1);transition:.18s}
.switch.on{background:var(--blue);border-color:transparent}
.switch.on::after{left:20px;background:#fff}

/* range slider */
.range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--blue) var(--p,50%),var(--bg-3) var(--p,50%));outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.5)}

/* ---------- tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:13.5px}
.table thead th{text-align:left;font-family:var(--font-ui);font-weight:600;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2);
  padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none}
.table thead th:hover{color:var(--tx-1)}
.table tbody td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--tx-1);vertical-align:middle}
.table tbody tr{transition:.12s}
.table tbody tr:hover{background:rgba(255,255,255,.025)}
.table tbody tr:last-child td{border-bottom:none}
.table .num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* progress / meters */
.meter{height:7px;border-radius:99px;background:var(--bg-3);overflow:hidden}
.meter>span{display:block;height:100%;border-radius:99px;background:var(--blue)}

/* ---------- misc layout ---------- */
.grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.row{display:flex;gap:12px;align-items:center}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column}
.divider{height:1px;background:var(--line);border:0;margin:0}
.scroll-x{overflow-x:auto}

/* metric card */
.metric{padding:18px 20px}
.metric .m-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.metric .m-ico{width:38px;height:38px;border-radius:10px;display:grid;place-items:center}
.metric .m-val{font-family:var(--font-display);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1}
.metric .m-label{font-size:12.5px;color:var(--tx-2);margin-top:6px}
.metric .m-delta{font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:3px}

/* dot status */
.statusdot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 0 0 currentColor}
.statusdot.pulse{animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 7px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* code block */
.codeblock{background:var(--bg-inset);border:1px solid var(--line-2);border-radius:var(--r-md);
  font-family:var(--font-mono);font-size:13px;line-height:1.7;padding:16px;overflow-x:auto;color:#c7d0e4;position:relative}
.codeblock .tok-key{color:#7db0ff}.codeblock .tok-str{color:#43d6a3}.codeblock .tok-fn{color:#ef82e4}.codeblock .tok-com{color:var(--tx-3)}

/* empty state */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:56px 24px;gap:14px}
.empty .e-ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--line-2)}

/* skeleton */
.skel{background:linear-gradient(90deg,var(--bg-3),#1c2233,var(--bg-3));background-size:200% 100%;
  animation:shimmer 1.4s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* tooltip-ish chip */
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-pill);
  background:var(--bg-3);border:1px solid var(--line-2);font-size:12.5px;color:var(--tx-1);font-weight:500}

/* ---------- toasts ---------- */
.toast-wrap{position:fixed;top:18px;right:18px;z-index:1200;display:flex;flex-direction:column;gap:10px}
.toast{display:flex;align-items:flex-start;gap:11px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:13px 15px;min-width:280px;max-width:380px;box-shadow:var(--sh-2);
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1.2)}
.toast .t-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.toast .t-title{font-weight:700;font-size:13.5px}
.toast .t-msg{font-size:12.5px;color:var(--tx-1);margin-top:2px}
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* ---------- modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:1100;background:rgba(5,6,11,.7);backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:24px;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-xl);width:100%;max-width:480px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);animation:modalIn .26s cubic-bezier(.2,.9,.3,1.1);overflow:hidden;
  display:flex;flex-direction:column;max-height:calc(100vh - 48px)}
.modal-lg{max-width:640px}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.modal-hd{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-bd{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;min-width:0;padding:22px}
.modal-ft{flex:0 0 auto;display:flex;gap:10px;justify-content:flex-end;padding:16px 22px;border-top:1px solid var(--line);background:var(--bg-inset)}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh;background:var(--bg-1)}
.sidebar{position:sticky;top:0;height:100vh;background:var(--bg-0);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow:hidden}
.sb-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}
.sb-mark{width:40px;height:40px;flex:none}
.sb-name{font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:-.01em}
.sb-by{font-size:10.5px;color:var(--tx-2);font-family:var(--font-mono);letter-spacing:.04em}
.sb-nav{flex:1;overflow-y:auto;padding:6px 10px 16px}
.sb-section{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-3);padding:14px 10px 6px}
.sb-link{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:var(--tx-1);
  font-size:13.5px;font-weight:500;transition:.13s;position:relative;cursor:pointer}
.sb-link .ico{width:17px;height:17px;flex:none;color:var(--tx-2);transition:.13s}
.sb-link:hover{background:var(--bg-2);color:var(--tx-0)}
.sb-link:hover .ico{color:var(--tx-1)}
.sb-link.active{background:linear-gradient(90deg,rgba(59,130,246,.16),rgba(226,79,214,.06));color:#fff}
.sb-link.active .ico{color:var(--cyan)}
.sb-link.active::before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:3px;border-radius:99px;background:var(--grad-route)}
.sb-link .tag{margin-left:auto;font-size:9.5px;font-family:var(--font-mono);color:var(--amber);
  background:var(--amber-t);padding:1px 6px;border-radius:99px}
.sb-foot{border-top:1px solid var(--line);padding:12px}
.sb-user{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer;transition:.13s}
.sb-user:hover{background:var(--bg-2)}
.avatar{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff;flex:none}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:13px 28px;background:rgba(11,13,21,.8);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar h1{font-size:18px}
.crumb{font-size:12.5px;color:var(--tx-2);font-family:var(--font-mono)}
.searchbar{display:flex;align-items:center;gap:9px;background:var(--bg-inset);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:8px 12px;min-width:220px;color:var(--tx-2);font-size:13px}
.searchbar input{background:none;border:none;outline:none;color:var(--tx-0);font-family:inherit;font-size:13.5px;width:100%}
.page{padding:28px;max-width:1320px;width:100%;margin:0 auto}
.page-head{margin-bottom:22px}
.page-head h2{font-size:24px;margin-bottom:5px}
.page-head p{color:var(--tx-2);font-size:14px;margin:0}

/* hamburger (mobile) */
.hamburger{display:none}

/* gauge ring */
.gauge{position:relative;width:96px;height:96px}
.gauge svg{transform:rotate(-90deg)}
/* font-size here is only the full-size (96px) default — Gauge overrides it
   inline via gaugeFontSize() so the label fits the ring at any size. Don't
   "fix" a small gauge by editing this value; it won't be applied. */
.gauge .g-val{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-weight:600;font-size:21px}

/* sparkline inline */
/* Spark carries a viewBox, so letting it shrink scales the trace instead of
   clipping it. Its w= is an intrinsic size, and callers pass values wider than
   the card they sit in (the Health cards ask for 280 inside a ~250px column),
   which used to overflow. */
.spark{display:block;max-width:100%;height:auto}

/* tabs */
.tabs{display:flex;gap:4px;background:var(--bg-inset);border:1px solid var(--line);border-radius:var(--r-md);padding:4px}
.tab{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--tx-2);transition:.13s;cursor:pointer}
.tab:hover{color:var(--tx-0)}
.tab.active{background:var(--bg-3);color:#fff;box-shadow:var(--sh-1)}

/* segmented (route colors) */
.seg{display:inline-flex;background:var(--bg-inset);border:1px solid var(--line);border-radius:var(--r-md);padding:3px}
.seg button{padding:7px 13px;border-radius:7px;border:none;background:none;color:var(--tx-2);font-size:13px;font-weight:600;transition:.13s}
.seg button.active{background:var(--bg-3);color:#fff;box-shadow:var(--sh-1)}

/* provider logo bubble */
.plogo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-weight:800;font-size:13px;
  font-family:var(--font-display);flex:none;border:1px solid var(--line-2)}

@media(max-width:1080px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:var(--sidebar-w);z-index:200;transform:translateX(-100%);transition:.25s;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .sidebar.open{transform:none}
  .hamburger{display:inline-flex}
  .sb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:150}
  .page{padding:18px}
}

/* Markdown content rendering */
.md-content p{margin:0 0 10px}
.md-content p:last-child{margin-bottom:0}
.md-content h1,.md-content h2,.md-content h3,.md-content h4{margin:14px 0 8px;font-weight:700;line-height:1.3}
.md-content h1{font-size:18px}
.md-content h2{font-size:16px}
.md-content h3{font-size:15px}
.md-content h4{font-size:14px}
.md-content ul,.md-content ol{margin:6px 0 10px;padding-left:22px}
.md-content li{margin:3px 0}
.md-content code{background:rgba(125,176,255,.12);color:#7db0ff;padding:1px 6px;border-radius:5px;font-family:var(--font-mono);font-size:0.92em}
.md-content pre{background:var(--bg-inset);border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:10px 0;overflow-x:auto}
.md-content pre code{background:transparent;color:var(--tx-0);padding:0;font-size:12.5px;line-height:1.5}
.md-content blockquote{border-left:3px solid var(--line-2);padding:0 12px;margin:10px 0;color:var(--tx-1)}
.md-content strong{font-weight:700;color:var(--tx-0)}
.md-content em{font-style:italic}
.md-content a{color:var(--blue);text-decoration:underline}
.md-content table{border-collapse:collapse;margin:10px 0;font-size:13px}
.md-content th,.md-content td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.md-content th{background:var(--bg-inset);font-weight:700}
.md-content hr{border:none;border-top:1px solid var(--line);margin:14px 0}

/* Responsive metric grid — replaces hard-coded repeat(4,1fr) on every page.
   Adapts down to single column on narrow viewports without manual breakpoints. */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}

/* Sidebar user-menu popover */
.user-menu{position:absolute;bottom:calc(100% + 6px);left:14px;right:14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--sh-2);padding:6px;z-index:50}
.user-menu-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;font-size:13.5px;color:var(--tx-0);cursor:pointer;transition:background .12s}
.user-menu-item:hover{background:var(--bg-3)}
.user-menu-item.danger{color:#ff8095}
.user-menu-item.danger:hover{background:var(--red-t)}

/* Better focus rings for accessibility */
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* Error boundary fallback */
.error-boundary{padding:40px;text-align:center;max-width:520px;margin:80px auto}
.error-boundary h2{margin:14px 0 8px;font-family:var(--font-display)}
.error-boundary .err-trace{background:var(--bg-inset);border:1px solid var(--line);border-radius:10px;padding:14px;font-family:var(--font-mono);font-size:12px;text-align:left;color:var(--tx-1);overflow-x:auto;margin-top:18px;max-height:200px;overflow-y:auto}

/* Stop button (during streaming) */
.btn-stop{background:var(--red-t);border:1px solid rgba(244,63,94,.3);color:#ff8095}
.btn-stop:hover{background:rgba(244,63,94,.22)}

/* Chip-active variant for filter tabs */
.chip-active{background:var(--blue-t)!important;color:var(--blue)!important;border-color:rgba(59,130,246,.4)!important}

/* Spin keyframe for inline loaders */
@keyframes spin{to{transform:rotate(360deg)}}

/* Playground two-col layout collapses on narrow viewports */
@media (max-width: 1100px){
  .playground-2col{grid-template-columns:1fr!important}
  .playground-2col > div:last-child{position:static!important}
}