/* Local LLM v2: one system for Chat, Admin and Lab.
   PAGE      solid #08080a. No page gradients, no glows behind content.
   HEADER    the site's shared nav, 56 px: NAME. in the flow gradient (Unbounded 600 14 / .08em / caps) with its
             blurred glow copy, ALBASTOV + #ff3d00 dot, and <ab-account> (vendored from albastov.com/chrome) on the right.
   GRID      page gutter 16 = column gap 16. Every column's head row is 36 px at the same y; foot rows are 48 px.
   DEPTH     by value, never by lines. card #141418 with a machined top-lit edge (main cards only);
             well #09090c recessed (inset top shadow); plate #22222a raised (1 px top highlight).
             Rows inside a well are split by a 1 px inset light only.
   RADII     card 18, well 12, control 10, segment 9 (track 12 with 3 px inset), tile 8.
   SPACE     4 / 8 / 12 / 16 / 24. Card padding 12.
   TYPE      Manrope 11 / 13 / 15 / 20; weights 500 / 600 / 700 / 800. ALL text white; hierarchy by size and weight.
             Tabular numbers everywhere. JetBrains Mono only inside code. No caps-tracked labels.
   COLOUR    one accent (--acc, sky) for actions, selection progress and live state. Status dots: ready green, wait amber.
             Selected segment = solid white with dark text. The flow gradient belongs to the wordmark alone. */
@font-face { font-family: 'Manrope'; src: url('fonts/manrope-latin.woff2') format('woff2'); font-weight: 200 800; font-display: block; }
@font-face { font-family: 'Unbounded'; src: url('fonts/unbounded-latin.woff2') format('woff2'); font-weight: 200 900; font-display: block; }
@font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --ink: #fbfbfd; --void: #08080a; --on-light: #0a0a0d;
  --card: #141418; --card-2: #18181d; --well: #09090c; --plate: #22222a; --plate-hi: #2b2b34;
  --card-sh: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -40px #000, 0 10px 24px -12px rgba(0, 0, 0, .7);
  --edge: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025) 40%, rgba(255, 255, 255, .012));
  --well-sh: inset 0 2px 5px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .045);
  --plate-sh: inset 0 1px 0 rgba(255, 255, 255, .1), 0 2px 4px rgba(0, 0, 0, .45);
  --row-line: inset 0 1px 0 rgba(255, 255, 255, .04);
  --acc: #3d9bff; --acc-hi: #63b0ff; --acc-ink: #fff;
  --ok: #3ddc84; --wait: #ffb020; --bad: #ff5c5c;
  --flow: linear-gradient(90deg, #ff7a1a, #ff4fa3, #9fd8ff, #ff7a1a);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: 'Manrope', system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--void); color: var(--ink); font: 600 13px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; overflow: hidden; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--acc); color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
svg.i { width: 16px; height: 16px; flex: none; display: block; }
h1, h2, h3, p { margin: 0; }

/* ---------------------------------------------------------------- header = the site's nav */
.nav { flex: none; position: relative; z-index: 60; height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 16px 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mark { display: inline-flex; align-items: center; gap: .55em; font: 600 14px/1 'Unbounded', var(--font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink); }
.mk { position: relative; display: inline-block; }
.mk-t, .mk-glow { display: block; background: var(--flow) 0 50% / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mkFlow 16s linear infinite; }
.mk-glow { position: absolute; inset: 0; filter: blur(10px); opacity: .55; pointer-events: none; user-select: none; }
.alb { font-weight: 600; }
.alb span { color: #ff3d00; }
@keyframes mkFlow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.nav-r { display: flex; align-items: center; min-width: 0; }
@media (prefers-reduced-motion: reduce) { .mk-t, .mk-glow { animation: none; } }

/* ---------------------------------------------------------------- surfaces */
.card { position: relative; min-height: 0; display: flex; flex-direction: column; border-radius: 18px; background: var(--card); box-shadow: var(--card-sh); }
.card.edge { border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--edge) border-box; }
.well { border-radius: 12px; background: var(--well); box-shadow: var(--well-sh); }
.plate { border-radius: 10px; background: var(--plate); box-shadow: var(--plate-sh); }
.head { flex: none; height: 36px; display: flex; align-items: center; gap: 8px; }
.ttl { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.big { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.s11 { font-size: 11px; }
.w5 { font-weight: 500; }
.grow { flex: 1; min-width: 0; }

/* buttons */
.btn { height: 32px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; white-space: nowrap; background: var(--plate); box-shadow: var(--plate-sh); transition: background .15s; }
.btn:hover:not(:disabled) { background: var(--plate-hi); }
.btn.white { background: #fff; color: var(--on-light); box-shadow: 0 6px 16px -8px rgba(255, 255, 255, .35); }
.btn.white:hover:not(:disabled) { background: #ececf1; }
.btn.flat { background: none; box-shadow: none; }
.btn.flat:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.btn:disabled { opacity: .4; }
.ib { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; transition: background .15s; }
.ib:hover:not(:disabled) { background: rgba(255, 255, 255, .07); }
.ib:disabled { opacity: .4; }
/* the accent key: one per view */
.key { position: relative; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--acc-ink);
  background: radial-gradient(70% 100% at 50% 0%, rgba(255, 255, 255, .22), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 10, 40, .32)), var(--acc);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 20, 60, .4), 0 0 0 1px rgba(0, 0, 0, .55), 0 14px 30px -16px rgba(61, 155, 255, .9);
  transition: box-shadow .3s var(--ease), filter .3s var(--ease); }
.key .lb { transition: transform .3s var(--ease); text-shadow: 0 1px 2px rgba(0, 20, 60, .35); }
.key:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 20, 60, .4), 0 0 0 1px rgba(0, 0, 0, .55), 0 18px 38px -14px rgba(61, 155, 255, 1); }
.key:hover:not(:disabled) .lb { transform: scale(1.04); }
.key.stop { background: var(--plate); color: var(--ink); box-shadow: var(--plate-sh); }
.key:disabled { filter: saturate(.3) brightness(.55); }

/* the one segmented track */
.track { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 36px; padding: 3px; gap: 2px; border-radius: 12px; background: var(--well); box-shadow: var(--well-sh); }
.track.full { display: grid; width: 100%; }
.track button { min-width: 64px; padding: 0 12px; border-radius: 9px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; white-space: nowrap; transition: background .2s, color .2s; }
.track button:hover:not([aria-selected="true"]) { background: rgba(255, 255, 255, .05); }
.track button[aria-selected="true"] { background: #fff; color: var(--on-light); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }

/* status dots */
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; background: #fff; }
.dot.ok { background: var(--ok); box-shadow: 0 0 8px -1px rgba(61, 220, 132, .7); }
.dot.wait { background: none; box-shadow: inset 0 0 0 2px var(--wait); }
.dot.load { background: var(--wait); animation: beatw 1.4s ease-in-out infinite; }
.dot.live { background: var(--acc); animation: beat 1.4s ease-in-out infinite; }
.dot.off { background: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.dot.idle { background: rgba(255, 255, 255, .55); }
@keyframes beat { 50% { box-shadow: 0 0 0 4px rgba(61, 155, 255, .18); } }
@keyframes beatw { 50% { box-shadow: 0 0 0 4px rgba(255, 176, 32, .2); } }

/* meters */
.bar { height: 4px; border-radius: 4px; background: #030304; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--acc); transition: width .3s linear; }
.bar.w i { background: #fff; }

/* switch */
.sw { position: relative; width: 30px; height: 18px; border-radius: 9px; flex: none; background: var(--well); box-shadow: var(--well-sh); transition: background .2s; }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); transition: transform .2s var(--ease); }
input:checked + .sw { background: var(--acc); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
input:checked + .sw::after { transform: translateX(12px); }

/* instant tooltip */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; z-index: 90; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 260px; padding: 6px 10px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 1.4; color: var(--ink); background: #26262f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 24px -8px rgba(0, 0, 0, .9); opacity: 0; pointer-events: none; transition: opacity .12s; white-space: normal; text-align: left; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }
[data-tip].tip-r::after { left: auto; right: 0; transform: none; }
[data-tip].tip-l::after { left: 0; transform: none; }

/* scroll fade */
.fade { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 32px), transparent); }
.noscroll { scrollbar-width: none; } .noscroll::-webkit-scrollbar { display: none; }

/* ---------------------------------------------------------------- mock switcher (not part of the design) */
.mockdock { position: fixed; z-index: 80; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 4px; height: 36px; padding: 3px; border-radius: 12px; background: rgba(28, 28, 34, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 30px -10px rgba(0, 0, 0, .9); font-size: 11px; font-weight: 700; }
.mockdock > b { padding: 0 8px; }
.mockdock .opts { display: none; align-items: center; gap: 2px; }
.mockdock:hover .opts, .mockdock:focus-within .opts { display: flex; }
.mockdock a, .mockdock button { height: 30px; padding: 0 10px; border-radius: 9px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; }
.mockdock a:hover, .mockdock button:hover { background: rgba(255, 255, 255, .08); }
.mockdock [aria-current="page"], .mockdock [aria-pressed="true"] { background: #fff; color: var(--on-light); }
.mockdock i { width: 1px; height: 16px; margin: 0 4px; background: rgba(255, 255, 255, .12); }
body.shot .mockdock { display: none; }

@media (max-width: 760px) {
  .nav { height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 10px 0 16px; }
  .mark { font-size: 13px; }
  .mockdock { display: none; }
}