/* Inter and JetBrains Mono (SIL Open Font License), served from here so the dashboard calls no one. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/portal/assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/portal/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/portal/assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('/portal/assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Bricolage Grotesque and Instrument Serif (SIL Open Font License): the type of the public site. */
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: block; src: url('/portal/assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: block; src: url('/portal/assets/fonts/instrument-serif-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: block; src: url('/portal/assets/fonts/bricolage-grotesque-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: block; src: url('/portal/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ================================================================ tokens */
:root {
  --bg: #f1ede4;
  --card: #f1ede4;
  --panel: #ebe6db;
  --panel-2: #e4ded1;
  --border: #d8d1c1;
  --border-soft: #e2dccf;
  --border-strong: #c9c1ae;
  --text: #0e0e10;
  --text-2: #3a3833;
  --muted: #6a655c;
  --faint: #9a9588;
  --track: #e4decf;
  --blue: #2a3bff;
  --blue-hover: #1c2be0;
  --blue-ink: #1f2ccc;
  --blue-soft: #e7e2d6;
  --blue-line: #ddd6c6;
  --blue-border: #c9c1ae;
  --sel-border: #0e0e10;
  --sel-bg: #ebe6db;
  --green: #12833f;
  --green-dot: #22c55e;
  --green-soft: #e3f2e2;
  --green-border: #b4dbb6;
  --red: #d81e3f;
  --red-soft: #fdeaec;
  --red-soft-hover: #fbd9de;
  --red-border: #f5b9c2;
  --amber: #b45f00;
  --amber-ink: #9a5a00;
  --amber-dot: #ffb000;
  --amber-soft: #fff3d6;
  --amber-bg: #fffaf0;
  --amber-track: #f3dfae;
  --amber-border: #f0cf80;
  --log-bg: #0e0e10;
  --log-border: #1f1f23;
  --log-text: #d9d4c8;
  --log-ts: #8f8a7f;
  --log-info: #98a2ff;
  --log-warn: #ffb000;
  --log-err: #ff6b82;
  --log-url: #ffb000;
  --log-thumb: #3b3b42;
  --overlay: rgba(14, 14, 16, .4);
  --shadow: 0 1px 2px rgba(14, 14, 16, .05), 0 1px 3px rgba(14, 14, 16, .03);
  --shadow-lift: 0 8px 20px rgba(14, 14, 16, .1);
  --shadow-pop: 0 24px 64px rgba(14, 14, 16, .24);
  --radius: 16px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0e0e10;
  --card: #17171a;
  --panel: #1d1d21;
  --panel-2: #242429;
  --border: #2c2c31;
  --border-soft: #232327;
  --border-strong: #3b3b42;
  --text: #f1ede4;
  --text-2: #c4bfb3;
  --muted: #8f8a7f;
  --faint: #66625a;
  --track: #2c2c31;
  --blue: #4d5cff;
  --blue-hover: #3a4af0;
  --blue-ink: #98a2ff;
  --blue-soft: #191c3a;
  --blue-line: #262b5c;
  --blue-border: #333a7a;
  --sel-border: #4d5cff;
  --sel-bg: #16172a;
  --green: #4ade80;
  --green-dot: #22c55e;
  --green-soft: #0f2a1b;
  --green-border: #1d4a30;
  --red: #ff6b82;
  --red-soft: #2c1419;
  --red-soft-hover: #381920;
  --red-border: #52232d;
  --amber: #ffb000;
  --amber-ink: #ffc24a;
  --amber-dot: #ffb000;
  --amber-soft: #2a2010;
  --amber-bg: #1b1710;
  --amber-track: #3a2e15;
  --amber-border: #4d3a14;
  --log-bg: #09090a;
  --log-border: #1c1c20;
  --overlay: rgba(0, 0, 0, .55);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lift: 0 8px 22px rgba(0, 0, 0, .35);
  --shadow-pop: 0 24px 64px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}
/* Theme flips cross-fade instead of snapping. Only while switching, so polling never animates colors. */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), fill .35s, box-shadow .35s !important;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex: none; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ================================================================ motion */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 var(--ring, rgba(34, 197, 94, .45)); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes breathe { 50% { opacity: .55; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes line-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes nudge { 50% { transform: translateX(3px); } }

.reveal { animation: rise .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.layout { transition: opacity .3s var(--ease), transform .3s var(--ease), filter .3s; }
.layout.switching { opacity: .3; transform: scale(.995); filter: blur(1.5px); transition-duration: .18s; }
.enter { animation: pop .35s var(--ease) both; }

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

/* ================================================================ top bar */
.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 24px 10px; position: relative; z-index: 20; }
.brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.brand-logo { font-size: 32px; transition: transform .5s var(--ease); }
.brand:hover .brand-logo { transform: rotate(-12deg) scale(1.06); }
.brand h1 { font-size: 25px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

.server-switch { position: relative; }
.server-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px 0 9px;
  background: var(--blue-soft); border: 1px solid var(--blue-border); color: var(--blue-ink);
  font-weight: 600; font-size: 13px; border-radius: 8px; transition: border-color .2s, transform .15s;
}
.server-btn:hover { border-color: var(--blue); }
.server-btn:active { transform: scale(.97); }
.server-btn .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-dot); animation: pulse-ring 2.4s infinite; }
.server-btn .sdot.off { background: var(--red); --ring: rgba(239, 68, 68, .4); }
.server-btn .count { font-weight: 500; font-size: 11px; color: var(--muted); padding-left: 6px; border-left: 1px solid var(--blue-border); }
.server-btn .chev { font-size: 14px; transition: transform .25s var(--ease); }
.server-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

.global-search {
  display: flex; align-items: center; gap: 10px; width: 340px; height: 40px; padding: 0 8px 0 14px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px; color: var(--muted);
  transition: border-color .2s, box-shadow .2s;
}
.global-search input { border: 0; outline: 0; flex: 1; min-width: 0; background: transparent; font-size: 13px; }
.global-search:focus-within { border-color: var(--blue-border); box-shadow: 0 0 0 3px var(--blue-soft); }
kbd { font: 11px/1 Inter, sans-serif; color: var(--muted); background: var(--panel); border: 1px solid var(--border); border-radius: 5px; padding: 3px 5px; }

.theme-btn {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--card);
  color: var(--text-2); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  transition: background .2s, transform .15s; flex: none;
}
.theme-btn:hover { background: var(--panel); }
.theme-btn:active { transform: scale(.94); }
.theme-btn .ic { position: absolute; transition: transform .45s var(--ease), opacity .3s; }
.theme-btn .moon { transform: rotate(-90deg) scale(.4); opacity: 0; }
:root[data-theme="dark"] .theme-btn .sun { transform: rotate(90deg) scale(.4); opacity: 0; }
:root[data-theme="dark"] .theme-btn .moon { transform: none; opacity: 1; }

.account { position: relative; }
.account-btn { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0 0 0 14px; border-left: 1px solid var(--border); text-align: left; }
.lock-tile { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); font-size: 16px; color: var(--text-2); transition: background .2s; }
.account-btn:hover .lock-tile { background: var(--panel); }
.account-text strong { display: block; font-size: 13px; font-weight: 600; }
.account-text small { display: block; font-size: 11px; color: var(--muted); }

.menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; min-width: 240px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px;
  box-shadow: var(--shadow-pop); animation: drop .18s var(--ease) both; transform-origin: top left;
}
.menu-right { left: auto; right: 0; transform-origin: top right; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: 0; border-radius: 8px; text-align: left; font-size: 13px; transition: background .15s; }
.menu-item:hover { background: var(--panel); }
.menu-note { padding: 8px 10px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.menu-note strong { color: var(--text); }

/* server switcher */
.server-menu { width: 360px; padding: 8px; max-height: calc(100vh - 80px); overflow-y: auto; }
.server-menu h4 { margin: 4px 6px 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; }
.server-menu h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.srv { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 10px; border: 1px solid transparent; background: none; text-align: left; transition: background .15s, border-color .15s; animation: rise .3s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.srv:hover { background: var(--panel); }
.srv.active { background: var(--blue-soft); border-color: var(--blue-border); }
.srv:disabled { opacity: .55; }
.srv-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--panel-2); color: var(--text-2); font-size: 18px; position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.srv.active .srv-icon { background: var(--blue); color: #fff; }
.srv-icon .sdot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--green-dot); border: 2px solid var(--card); }
.srv-icon .sdot.off { background: var(--faint); }
.srv-body { flex: 1; min-width: 0; overflow: hidden; }
.srv-name { font-weight: 600; font-size: 14px; display: flex; gap: 6px; align-items: center; }
.srv-name small { font-weight: 500; font-size: 11px; color: var(--muted); }
.srv-sub { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srv-key { font-size: 11px; color: var(--faint); font-family: var(--mono); }
.srv-del { opacity: 0; width: 28px; height: 28px; border-radius: 7px; color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: opacity .15s, background .15s; }
.srv:hover .srv-del, .srv-del:focus-visible { opacity: 1; }
.srv-del:hover { background: var(--red-soft); color: var(--red); }
.srv-add { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 6px; padding: 10px; border-radius: 10px; border: 1.5px dashed var(--border-strong); background: none; color: var(--text-2); font-weight: 500; font-size: 13px; transition: border-color .15s, color .15s, background .15s; }
.srv-add:hover { border-color: var(--blue); color: var(--blue-ink); background: var(--blue-soft); }
.srv-add .ic { font-size: 16px; }

/* ================================================================ layout */
.layout { display: grid; grid-template-columns: 398px minmax(0, 1fr); gap: 14px; padding: 6px 24px 24px; align-items: start; }
.col-left, .col-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card h2 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.with-icon { display: flex; align-items: center; gap: 9px; }
.with-icon > [data-icon] { font-size: 19px; color: var(--text-2); }
.sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.muted-title { font-weight: 400; color: var(--text-2); font-size: 15px; }

/* ================================================================ launcher */
.launcher { padding: 18px 16px; }
.search { display: flex; align-items: center; gap: 10px; height: 40px; margin: 16px 0 12px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); color: var(--muted); transition: border-color .2s, background .2s; }
.search input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; }
.search:focus-within { border-color: var(--blue-border); background: var(--card); }
.preset-list { display: flex; flex-direction: column; gap: 10px; }
.preset { border: 1px solid var(--border); border-radius: 12px; padding: 14px 12px; background: var(--card); transition: border-color .25s, background .25s, box-shadow .25s, transform .25s var(--ease); }
.preset:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.preset.is-running { border-color: var(--sel-border); box-shadow: 0 0 0 1px var(--sel-border) inset; background: var(--sel-bg); }
.preset.is-busy { border-color: var(--amber-border); background: var(--amber-bg); }
.preset.is-failed { border-color: var(--red-border); }
.preset-main { display: flex; align-items: center; gap: 12px; }
.model-icon { width: 44px; height: 44px; border-radius: 11px; font-size: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--panel); border: 1px solid var(--border-soft); transition: transform .3s var(--ease); }
.preset:hover .model-icon { transform: scale(1.06) rotate(-4deg); }
.preset-text { flex: 1; min-width: 0; }
.preset-name { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.preset-name > span:first-child { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.tag { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--blue-border); background: var(--blue-soft); color: var(--blue-ink); }
.preset-meta { display: flex; gap: 2px 10px; color: var(--muted); font-size: 12.5px; margin-top: 4px; flex-wrap: wrap; }
.preset-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-2); font-size: 12px; }
.preset-note > .ic { color: var(--muted); font-size: 14px; }
.preset-note.warn, .preset-note.warn > .ic { color: var(--amber-ink); }
.preset-note.err, .preset-note.err > .ic { color: var(--red); }
.preset-note a { color: inherit; font-weight: 600; }
.mini-bar { flex: 1; height: 5px; border-radius: 3px; background: var(--amber-track); overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--amber-dot); border-radius: 3px; transition: width .8s var(--ease); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .2s, border-color .2s, color .2s, box-shadow .2s, transform .12s; }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 1px 2px rgba(42, 59, 255, .3); }
.btn-primary:hover:not(:disabled) { background: var(--blue-hover); box-shadow: 0 4px 12px rgba(42, 59, 255, .3); }
.btn-primary:disabled { background: var(--panel-2); color: var(--faint); box-shadow: none; border-color: var(--border); }
.btn-ghost { background: var(--card); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--panel); }
.btn-danger-soft { background: var(--red-soft); border-color: var(--red-border); color: var(--red); height: 34px; font-size: 13px; }
.btn-danger-soft:hover:not(:disabled) { background: var(--red-soft-hover); }
.btn-danger-soft:disabled { opacity: .55; }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { filter: brightness(.92); }
.btn-swap { height: 34px; padding: 0 14px; font-size: 13px; }

/* ================================================================ history */
.history .sub { margin-bottom: 12px; }
.history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.history-table th { text-align: left; font-weight: 500; color: var(--text-2); padding: 6px 6px 8px; border-bottom: 1px solid var(--border); }
.history-table td { padding: 6px; color: var(--text-2); border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.history-table tr:last-child td { border-bottom: 0; }
.history-table tbody tr { transition: background .15s; }
.history-table tbody tr:hover { background: var(--panel); }
.history-table tr.fresh { animation: rise .45s var(--ease) both; }
.history-table td:nth-child(2) { color: var(--text); max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
.res { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.res-ready { color: var(--green); }
.res-failed { color: var(--red); }
.res-stopped { color: var(--muted); }
.history-empty td { text-align: center; color: var(--faint); padding: 18px 0; }

/* ================================================================ GPU status */
.head-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; justify-content: flex-end; }
.online { display: inline-flex; align-items: center; gap: 7px; color: var(--green); font-weight: 500; }
.online .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-dot); animation: pulse-ring 2.4s infinite; }
.online.warn { color: var(--amber-ink); }
.online.warn .dot { background: var(--amber-dot); --ring: rgba(245, 158, 11, .45); }
.gpu-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gpu-groups.one { grid-template-columns: minmax(0, 1fr); }
.gpu-group { border: 1px solid var(--border); border-radius: 12px; padding: 10px 10px 12px; min-width: 0; container-type: inline-size; transition: border-color .3s; }
.gpu-groups.joined .gpu-group { border-color: var(--blue-border); }
.group-title { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 2px 2px 10px; white-space: nowrap; overflow: hidden; }
.group-title strong { font-weight: 600; }
.group-title .arrow { color: var(--text-2); font-size: 14px; display: inline-flex; }
.group-title .who { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.group-title .who b { color: var(--blue-ink); font-weight: 500; }
.gpu-tiles { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.gpu { border: 1px solid var(--border); border-radius: 10px; padding: 10px 10px 9px; min-width: 0; transition: border-color .3s, transform .2s var(--ease), box-shadow .2s; }
.gpu:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.gpu-name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.gpu-name .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); transition: background .3s; }
.gpu.idle .gpu-name .dot { background: var(--border-strong); }
.gpu.loading .gpu-name .dot { background: var(--amber-dot); animation: breathe 1.2s infinite; }
.gpu-mem { font-size: 15px; margin: 6px 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gpu .bar { margin-bottom: 9px; }
.gpu-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); line-height: 1.75; }
.gpu-row b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.bar { height: 7px; border-radius: 4px; background: var(--track); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 4px; transition: width .9s var(--ease); }
.bar.hot i { background: var(--amber-dot); }
@container (max-width: 560px) { .gpu { padding: 8px 8px 7px; } .gpu-mem { font-size: 13px; } .gpu-name { font-size: 12px; } }
@container (max-width: 440px) { .gpu-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.stat-row { display: grid; grid-template-columns: 1fr 1fr 1.15fr 1.35fr 1.65fr; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.stat { display: flex; align-items: flex-start; gap: 12px; padding: 0 14px; border-right: 1px solid var(--border); min-width: 0; }
.stat:first-child { padding-left: 4px; }
.stat-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-ink); font-size: 18px; flex: none; }
.stat-label { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.stat-value { display: block; font-size: 19px; font-weight: 600; margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stat-value small { font-size: 12px; font-weight: 400; color: var(--text-2); margin-left: 3px; }
.stat-kv > div { flex: 1; min-width: 0; }
.stat-kv .bar { margin-top: 6px; height: 6px; }
.note-box { display: flex; gap: 10px; margin-left: 14px; padding: 10px 12px; border-radius: 10px; background: var(--blue-soft); border: 1px solid var(--blue-line); color: var(--text-2); font-size: 12px; line-height: 1.5; }
.note-box [data-icon] { color: var(--blue-ink); font-size: 16px; margin-top: 1px; }

/* ================================================================ engines */
.play-dot { color: var(--green) !important; font-size: 22px !important; }
.engine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.engine-grid.one { grid-template-columns: minmax(0, 1fr); }
.engine { border: 1px solid var(--border); border-radius: 12px; padding: 16px; min-width: 0; container-type: inline-size; transition: border-color .3s, box-shadow .3s; }
.engine.solo { border-color: var(--blue-border); }
.engine-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.engine-head .eicon { font-size: 30px; display: inline-flex; }
.engine-head h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.engine-head .btn-danger-soft { margin-left: auto; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; border: 1px solid transparent; flex: none; }
.badge-ready, .badge-running { background: var(--green-soft); color: var(--green); border-color: var(--green-border); }
.badge-loading, .badge-starting { background: var(--amber-soft); color: var(--amber-ink); border-color: var(--amber-border); }
.badge-loading::before, .badge-starting::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: breathe 1s infinite; }
.badge-stopping, .badge-failed { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }
.badge-start { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-border); }
.badge-unmanaged { background: var(--panel); color: var(--muted); border-color: var(--border); }
.badge-solo { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-border); }
.engine-meta { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 0 16px; margin-bottom: 14px; }
.engine-meta .k { font-size: 12px; color: var(--text-2); margin-bottom: 6px; white-space: nowrap; }
.engine-meta .v { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; min-height: 28px; white-space: nowrap; }
.chips { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.chip { min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--blue-soft); border: 1px solid var(--blue-border); color: var(--blue-ink); display: inline-flex; align-items: center; justify-content: center; }
.endpoint { font-family: var(--mono); color: var(--blue-ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
a.endpoint:hover { text-decoration: underline; }
.icon-btn { width: 32px; height: 32px; flex: none; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); color: var(--text-2); font-size: 15px; display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .2s, border-color .2s, transform .12s; }
.icon-btn:hover { background: var(--panel); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.done { color: var(--green); border-color: var(--green-border); }
.icon-btn.done .ic { animation: pop .3s var(--ease); }
.tiles { display: grid; gap: 8px; margin-bottom: 8px; }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles-2 { grid-template-columns: 1.05fr 1fr; }
.tile { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.tile .ticon { font-size: 22px; color: var(--blue-ink); flex: none; display: inline-flex; }
.tile .ticon.ink { color: var(--text-2); }
.tile .tl { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.tile .tv { font-size: 18px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tile .tv small { font-size: 12px; font-weight: 400; color: var(--text-2); margin-left: 4px; }
.tile .tbody { flex: 1; min-width: 0; }
.tile .bar { margin-top: 6px; height: 6px; }
.tail-head { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 8px; font-size: 13px; }
.tail-head strong { font-weight: 600; }
.tail-head span.muted { color: var(--muted); font-weight: 400; }
.link-btn { background: none; border: 0; padding: 0; color: var(--blue-ink); font-size: 13px; font-weight: 500; display: inline-flex; gap: 5px; align-items: center; }
.link-btn .ic { transition: transform .2s var(--ease); }
.link-btn:hover .ic { transform: translateX(3px); }
.tail { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: 12px/1.6 var(--mono); color: var(--text-2); min-height: 100px; overflow: hidden; }
.tail .ln { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tail .ts { color: var(--faint); }
.tail .lv { color: var(--blue-ink); margin: 0 10px 0 6px; display: inline-block; min-width: 38px; }
.tail .lv-warn { color: var(--amber-ink); }
.tail .lv-err { color: var(--red); }
.tail .url { color: var(--green); }
.tail-empty { color: var(--faint); font-family: Inter, sans-serif; }

.boot { background: var(--amber-soft); border: 1px solid var(--amber-border); border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.boot-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.boot-phase { font-weight: 600; color: var(--amber-ink); display: inline-flex; align-items: center; gap: 8px; }
.boot-time { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.boot .bar { background: var(--amber-track); height: 8px; }
.boot .bar i { background: linear-gradient(90deg, var(--amber-dot) 0%, #fcd34d 50%, var(--amber-dot) 100%); background-size: 200% 100%; animation: shimmer 2s linear infinite; min-width: 6%; }
.spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; display: inline-block; flex: none; }

.engine-empty { border: 1.5px dashed var(--border-strong); border-radius: 12px; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 24px; color: var(--muted); }
.engine-empty .eicon { font-size: 30px; color: var(--faint); margin-bottom: 6px; display: inline-flex; }
.engine-empty strong { color: var(--text-2); font-size: 15px; }

@container (max-width: 500px) {
  .engine-meta { grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 18px; }
  .engine-meta > div:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .engine-head h3 { font-size: 18px; }
  .hide-narrow { display: none; }
}
@container (max-width: 470px) { .tile { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; } .tile .tl { white-space: normal; } }
@container (max-width: 420px) { .tiles-3 { grid-template-columns: 1fr 1fr; } .tiles-2 { grid-template-columns: 1fr; } }

/* ================================================================ log viewer */
.log-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.log-title { display: flex; align-items: flex-start; gap: 12px; }
.log-title-icon { font-size: 20px; color: var(--text-2); margin-top: 2px; }
.log-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.log-tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s; }
.log-tab:hover:not(.active) { background: var(--panel); }
.log-tab:active { transform: scale(.97); }
.log-tab small { color: var(--muted); font-weight: 400; }
.log-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(42, 59, 255, .3); }
.log-tab.active small { color: rgba(255, 255, 255, .78); }
.log-tab .ticon { font-size: 18px; display: inline-flex; }
.log-tab.active .ticon { background: #fff; border-radius: 6px; padding: 2px; font-size: 16px; color: #0f172a; }
.log-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; margin-right: 6px; cursor: pointer; user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track { width: 40px; height: 22px; border-radius: 11px; background: var(--border-strong); position: relative; transition: background .25s; }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 8px; background: #fff; transition: left .25s var(--ease), width .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.toggle:active .knob { width: 20px; }
.toggle input:checked + .track { background: var(--blue); }
.toggle input:checked + .track .knob { left: 21px; }
.toggle:active input:checked + .track .knob { left: 17px; }
.toggle input:focus-visible + .track { outline: 2px solid var(--blue-border); outline-offset: 2px; }
.btn-sm { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); font-size: 12px; font-weight: 500; transition: background .15s, transform .12s, color .2s, border-color .2s; }
.btn-sm:hover { background: var(--panel); }
.btn-sm:active { transform: scale(.95); }
.btn-sm [data-icon], .btn-sm .ic { font-size: 14px; }
.btn-sm-danger { color: var(--red); }
.btn-sm.on { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue-ink); }
.log-output { background: var(--log-bg); border: 1px solid var(--log-border); border-radius: 10px; padding: 12px 14px; height: 300px; overflow: auto; font: 13px/1.55 var(--mono); color: var(--log-text); scrollbar-color: var(--log-thumb) transparent; }
.log-output .ln { white-space: pre-wrap; word-break: break-word; }
.log-output .ln.new { animation: line-in .25s var(--ease) both; }
.log-output .ts { color: var(--log-ts); }
.log-output .lv { color: var(--log-info); display: inline-block; min-width: 64px; padding-left: 14px; }
.log-output .lv-warn { color: var(--log-warn); }
.log-output .lv-err { color: var(--log-err); }
.log-output .url { color: var(--log-url); }
.log-output .hl { background: rgba(250, 204, 21, .32); color: #fff; border-radius: 2px; }
.log-output .sys { color: var(--log-ts); font-style: italic; }
.log-output::-webkit-scrollbar { width: 10px; }
.log-output::-webkit-scrollbar-thumb { background: var(--log-thumb); border-radius: 5px; border: 2px solid var(--log-bg); }

/* ================================================================ logos */
.logo-wrap { display: inline-flex; width: 1em; height: 1em; color: var(--text); }
.logo-wrap svg { width: 100%; height: 100%; }

/* ================================================================ modal */
.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade .2s ease-out both; }
.modal-backdrop.closing { animation: fade .16s ease-in reverse both; }
.modal { width: 620px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; box-shadow: var(--shadow-pop); animation: pop .28s var(--ease) both; }
.modal-backdrop.closing .modal { animation: pop .16s ease-in reverse both; }
.modal.narrow { width: 480px; }
.modal-head { display: flex; gap: 16px; align-items: flex-start; }
.modal-icon { width: 50px; height: 50px; border-radius: 12px; background: var(--blue-soft); color: var(--blue-ink); font-size: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.modal-icon.red { background: var(--red-soft); color: var(--red); }
.modal-head h3 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.modal-head p { color: var(--text-2); font-size: 15px; margin-top: 6px; }
.modal-head p.est { color: var(--muted); font-size: 14px; margin-top: 4px; }
.modal-close { margin-left: auto; background: none; border: 0; font-size: 20px; color: var(--text-2); padding: 4px; border-radius: 6px; transition: background .15s, transform .25s var(--ease); display: inline-flex; }
.modal-close:hover { background: var(--panel); transform: rotate(90deg); }
.warn-box { display: flex; gap: 14px; align-items: center; margin-top: 8px; padding: 12px 16px; border-radius: 10px; background: var(--amber-soft); border: 1px solid var(--amber-border); }
.modal-head + .warn-box { margin-top: 18px; }
.warn-box .wicon { font-size: 30px; display: inline-flex; flex: none; }
.warn-box strong { display: block; color: var(--amber); font-size: 15px; font-weight: 600; }
.warn-box span { color: var(--amber-ink); font-size: 13px; }
.warn-box.blue { background: var(--blue-soft); border-color: var(--blue-border); }
.warn-box.blue strong { color: var(--blue-ink); }
.warn-box.blue span { color: var(--text-2); }
.warn-box.blue .wicon { color: var(--blue-ink); font-size: 26px; }
.compare { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); gap: 8px; align-items: center; margin-top: 16px; }
.compare .arrow { color: var(--text-2); font-size: 22px; display: inline-flex; animation: nudge 1.6s var(--ease) infinite; }
.side { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.side-label { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.side-title { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.side-title .eicon { font-size: 24px; display: inline-flex; }
.side-title strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-title .badge { margin-left: auto; }
.kv { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--text-2); line-height: 2; min-width: 0; }
.kv > span:first-child { white-space: nowrap; }
.kv b { color: var(--text); font-weight: 500; white-space: nowrap; }
.kv .endpoint { font-size: 12.5px; min-width: 0; white-space: nowrap; }
.also { font-size: 12px; color: var(--muted); margin-top: 6px; }
.side-empty { color: var(--muted); font-size: 13px; padding: 18px 0; text-align: center; }
.info-row { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: var(--blue-soft); border: 1px solid var(--blue-line); font-size: 14px; color: var(--text-2); }
.info-row > .ic { color: var(--blue-ink); font-size: 18px; }
.info-row b { color: var(--text); font-weight: 600; }
.details { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--panel); }
.details h4 { margin: 0 0 10px; font-size: 14px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.details h4 .ic { font-size: 18px; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.details-grid > div:first-child { border-right: 1px solid var(--border); padding-right: 20px; }
.details .kv { line-height: 2.1; }
.one-at-time { display: flex; gap: 10px; font-size: 13px; color: var(--text-2); }
.one-at-time strong { display: block; color: var(--text); font-weight: 500; }
.one-at-time > .ic { margin-top: 3px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-foot .btn { height: 44px; padding: 0 22px; font-size: 15px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.field input { height: 42px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card); font-size: 14px; outline: 0; transition: border-color .2s, box-shadow .2s; }
.field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.field small { font-weight: 400; color: var(--muted); }
.form-err { margin-top: 12px; color: var(--red); background: var(--red-soft); border: 1px solid var(--red-border); border-radius: 10px; padding: 9px 12px; font-size: 13px; animation: rise .25s var(--ease) both; }

/* ================================================================ toasts */
.toasts { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { max-width: 420px; padding: 12px 16px; border-radius: 10px; background: #1e2329; color: #fff; font-size: 13px; box-shadow: var(--shadow-pop); animation: pop .25s var(--ease) both; white-space: pre-line; border: 1px solid rgba(255, 255, 255, .06); }
.toast.leaving { animation: pop .2s ease-in reverse both; }
.toast.err { background: #7f1d1d; }
.toast.ok { background: #14532d; }

.offline-banner { margin: 0 24px 6px; padding: 10px 14px; border-radius: 10px; background: var(--red-soft); border: 1px solid var(--red-border); color: var(--red); font-size: 13px; animation: rise .3s var(--ease) both; }
.skel { border-radius: 12px; height: 74px; background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }

/* ================================================================ responsive */
@media (max-width: 1360px) {
  .layout { grid-template-columns: 350px minmax(0, 1fr); }
  .preset-meta { gap: 2px 12px; font-size: 12px; }
  .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
  .note-box { grid-column: 1 / -1; margin-left: 0; }
  .stat:nth-child(4) { border-right: 0; }
}
@media (max-width: 1200px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .col-left { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  .global-search { width: 240px; }
}
@media (max-width: 980px) {
  .gpu-groups, .engine-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2n) { border-right: 0; }
  .log-controls { margin-left: 0; }
}
@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; padding: 12px 16px 8px; gap: 10px; }
  .brand h1 { font-size: 18px; }
  .brand { gap: 8px; }
  .brand-logo { font-size: 26px; }
  .server-btn .count { display: none; }
  .brand { flex-basis: 100%; }
  .global-search { order: 2; flex: 1; width: auto; min-width: 0; }
  .theme-btn, .account { order: 2; }
  .account-btn { padding-left: 0; border-left: 0; }
  .log-controls { flex-wrap: wrap; }
  .log-title { width: 100%; }
  .global-search kbd { display: none; }
  .layout { padding: 6px 16px 16px; }
  .col-left { grid-template-columns: minmax(0, 1fr); }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare .arrow { transform: rotate(90deg); justify-self: center; animation: none; }
  .details-grid { grid-template-columns: 1fr; }
  .details-grid > div:first-child { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 10px; }
  .account-text { display: none; }
  .server-menu { width: min(360px, calc(100vw - 32px)); }
  .history-table th:nth-child(3), .history-table td:nth-child(3) { display: none; }
}

/* ================================================================ v2: motion system */
.enter { animation: pop .38s var(--ease) both; }
.leaving { animation: pop .26s ease-in reverse both; pointer-events: none; }
tr.enter { animation: rise .4s var(--ease) both; }
tr.leaving { display: none; }
.intro .gpu, .intro .preset, .intro .engine, .intro .engine-empty, .intro tr, .intro .srv {
  animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
}
.intro .engine:nth-child(2), .intro .engine-empty:nth-child(2) { animation-delay: 90ms; }
@keyframes flash-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 55%, transparent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
@keyframes lift { 40% { transform: translateY(-3px); } }
.flash { animation: flash-ring .9s var(--ease); }
.preset.flash, .engine.flash { animation: flash-ring .9s var(--ease), lift .5s var(--ease); }
.num { font-variant-numeric: tabular-nums; display: inline-block; }
.btn, .btn-sm, .log-tab, .tabbar button, .seg-opt { position: relative; overflow: hidden; }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18;
  transform: scale(0); animation: ripple .6s var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.shake { animation: shake .4s ease-in-out; }
.layout.switched { animation: rise .45s var(--ease) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ================================================================ v2: header bits */
.brand h1 .short { display: none; }
.btn-dot { position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 2px var(--blue); animation: breathe 1.4s infinite; }
.tag-ka { padding: 2px 4px; display: inline-flex; background: var(--green-soft); color: var(--green); border-color: var(--green-border); }
.tag-ka .ic { font-size: 11px; }
.empty-note { text-align: center; padding: 16px 0; }

/* ================================================================ v2: operation banner */
.op-banner { position: sticky; top: 0; z-index: 15; /* under the top bar (20), so its menus open over the banner */ padding: 0 24px 8px; animation: drop .3s var(--ease) both; }
.op-banner.closing { animation: drop .25s ease-in reverse both; }
.ob-inner {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--blue-border); box-shadow: var(--shadow-lift);
  position: relative; overflow: hidden;
}
.ob-inner::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%;
  background: linear-gradient(90deg, transparent, var(--blue), transparent); animation: scan 1.8s linear infinite;
}
.ob-inner.is-waiting { border-color: var(--amber-border); background: linear-gradient(90deg, var(--amber-soft), var(--card) 60%); }
.ob-inner.is-waiting::after { background: linear-gradient(90deg, transparent, var(--amber-dot), transparent); }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.ob-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); color: var(--blue-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.is-waiting .ob-icon { background: var(--amber-soft); color: var(--amber-ink); }
.is-waiting .ob-icon .ic { animation: flip 2.4s var(--ease) infinite; }
@keyframes flip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
.ob-body { flex: 1; min-width: 0; }
.ob-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.ob-by { font-size: 12px; color: var(--muted); }
.ob-deadline { font-size: 12px; color: var(--amber-ink); font-variant-numeric: tabular-nums; margin-left: auto; }
.ob-line { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.ob-line b { color: var(--text); }
.ob-steps { display: flex; gap: 6px; list-style: none; margin: 8px 0 0; padding: 0; flex-wrap: wrap; }
.ob-steps li { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel); color: var(--muted); border: 1px solid var(--border); transition: background .3s, color .3s, border-color .3s, box-shadow .3s; }
.ob-steps li.done { background: var(--green-soft); color: var(--green); border-color: var(--green-border); }
.ob-steps li.done::before { content: "✓ "; }
.ob-steps li.now { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.is-waiting .ob-steps li.now { background: var(--amber-dot); border-color: var(--amber-dot); box-shadow: 0 0 0 3px var(--amber-soft); }
.ob-actions { display: flex; gap: 8px; flex: none; }
.ob-force { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber-ink); }
.ob-elapsed { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ================================================================ v2: engine extras */
.engine-actions { margin-left: auto; display: flex; gap: 8px; }
.engine-head .engine-actions .btn-danger-soft { margin-left: 0; }
.btn-soft { background: var(--panel); border-color: var(--border-strong); color: var(--text-2); height: 34px; font-size: 13px; padding: 0 12px; }
.btn-soft:hover:not(:disabled) { background: var(--panel-2); }
.btn-soft:disabled { opacity: .55; }
.btn-soft .ic { transition: transform .5s var(--ease); }
.btn-soft:hover:not(:disabled) .ic { transform: rotate(-200deg); }
.engine-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.act { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.act .ic { font-size: 14px; }
.act-live { color: var(--green); font-weight: 600; }
.act-live .ic { animation: breathe 1.2s infinite; }
.act-unknown { color: var(--faint); }
.toggle-sm { font-size: 12px; color: var(--text-2); margin: 0; }
.toggle-sm .track { width: 34px; height: 20px; }
.toggle-sm .knob { width: 14px; height: 14px; }
.toggle-sm input:checked + .track .knob { left: 17px; }
.toggle-sm input:checked + .track { background: var(--green-dot); }
.engine.st-stopping { opacity: .7; }
.engine.st-stopping .tiles, .engine.st-stopping .tail { filter: grayscale(.6); }
.btn-sm-wide { margin-top: 10px; height: 34px; font-size: 13px; }

/* ================================================================ v2: logs */
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-dot); animation: pulse-ring 2s infinite; }
.log-tab.active .live-dot { background: #86efac; }
.log-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--log-ts); font-family: Inter, sans-serif; }
.log-empty .ic { font-size: 28px; opacity: .6; }

/* ================================================================ v2: modal timing picker */
.when { margin-top: 18px; }
.when-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); }
.seg-ink { display: none; }
.seg-opt {
  display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--text-2); transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.seg-opt .ic { font-size: 18px; flex: none; }
.seg-opt b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.seg-opt small { display: block; font-size: 12px; color: var(--muted); }
.seg-opt.on { background: var(--card); border-color: var(--blue-border); box-shadow: var(--shadow-lift); color: var(--blue-ink); }
.seg-opt.on.danger { border-color: var(--red-border); color: var(--red); }
.seg-opt.danger small { color: var(--red); }
.when-opts { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 12px; }
.when-opts label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.when-opts label.dim { opacity: .5; }
.when-opts select {
  height: 34px; border-radius: 8px; border: 1px solid var(--border-strong); background-color: var(--card); color: var(--text);
  padding: 0 30px 0 10px; font: inherit; font-size: 13px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px;
}
.when-note { display: flex; gap: 8px; align-items: flex-start; width: 100%; margin: 10px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.when-note .ic { flex: none; margin-top: 2px; }
.when-note.warn { color: var(--amber-ink); }
.warns { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.warns:empty { display: none; }
.warns .warn-box { margin-top: 0; }
.warn-box.tone-red { background: var(--red-soft); border-color: var(--red-border); }
.warn-box.tone-red strong { color: var(--red); }
.warn-box.tone-red span { color: var(--text-2); }
.warn-box.tone-blue { background: var(--blue-soft); border-color: var(--blue-border); }
.warn-box.tone-blue strong { color: var(--blue-ink); }
.warn-box.tone-blue span { color: var(--text-2); }
.warn-box.tone-blue .wicon { color: var(--blue-ink); font-size: 24px; }

/* ================================================================ v2: toasts */
.toast { display: flex; align-items: center; gap: 10px; }
.toast-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }

/* ================================================================ v2: mobile app layout */
.tabbar { display: none; }

@media (max-width: 1024px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.modal-open { overflow: hidden; }

  .topbar {
    position: sticky; top: 0; z-index: 26; flex-wrap: nowrap; gap: 8px; padding: 10px 14px;
    background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-soft);
  }
  .brand { flex: 1; flex-basis: auto; gap: 8px; min-width: 0; }
  .brand-logo { font-size: 24px; }
  .brand h1 { font-size: 17px; }
  .brand h1 .long { display: none; }
  .brand h1 .short { display: inline; }
  .global-search { display: none; }
  .theme-btn, .lock-tile { width: 36px; height: 36px; }
  .account-btn { padding: 0; border: 0; }
  .account-text { display: none; }
  .server-btn { height: 30px; min-width: 0; }
  .server-btn #server-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .server-menu { position: fixed; top: 58px; left: 12px; right: 12px; width: auto; }

  .op-banner { top: 57px; padding: 8px 12px 0; }
  .ob-inner { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .ob-actions { width: 100%; }
  .ob-actions .btn-sm { flex: 1; justify-content: center; height: 38px; width: auto; padding: 0 10px; }
  .ob-actions .btn-sm .lbl, .ob-actions .btn-sm span { display: inline; }
  .ob-steps { display: none; }
  .ob-deadline { margin-left: 0; }

  .layout { display: block; padding: 12px; }
  .col-left, .col-right { display: contents; }
  [data-panel] { display: none; }
  :root[data-tab="overview"] [data-panel="overview"],
  :root[data-tab="models"] [data-panel="models"],
  :root[data-tab="history"] [data-panel="history"] { display: block; }
  [data-panel] + [data-panel] { margin-top: 12px; }
  .reveal { animation: none; }
  .tab-in { animation: tab-in-fwd .32s var(--ease) both; }
  :root[data-tab-dir="back"] .tab-in { animation-name: tab-in-back; }
  .card { padding: 14px; border-radius: 16px; }
  .card h2 { font-size: 17px; }

  /* overview: GPUs */
  .gpu-status .card-head { flex-direction: column; gap: 6px; margin-bottom: 10px; }
  .head-meta { justify-content: flex-start; gap: 10px; }
  .meta-text { display: none; }
  .gpu-groups { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gpu-group { padding: 10px; }
  .group-title { padding-bottom: 8px; font-size: 12px; }
  .gpu-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; }
  .gpu { padding: 8px 7px; border-radius: 9px; }
  .gpu:hover { transform: none; box-shadow: none; }
  .gpu-name { font-size: 11px; gap: 5px; }
  .gpu-name .dot { width: 7px; height: 7px; }
  .gpu-util { display: none; }
  .gpu-mem { font-size: 12px; margin: 4px 0; }
  .gpu .bar { height: 5px; margin-bottom: 6px; }
  .gpu-row { font-size: 10px; line-height: 1.5; }

  .gpu-row b { color: var(--muted); }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 8px; border-top: 0; padding-top: 0; margin-top: 10px; }
  .stat, .stat:first-child, .stat:nth-child(2n), .stat:nth-child(4) { padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); gap: 10px; }
  .stat-icon { width: 30px; height: 30px; font-size: 15px; }
  .stat-label { font-size: 11px; white-space: normal; }
  .stat-value { font-size: 17px; }
  .note-box { display: none; }

  /* overview: engines */
  .engines-card .card-head { margin-bottom: 8px; }
  .engine-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .engine { padding: 12px; }
  .engine-head { gap: 8px; margin-bottom: 10px; }
  .engine-head .eicon { font-size: 24px; }
  .engine-head h3 { font-size: 17px; flex: 1; }
  .engine-actions { width: 100%; order: 9; margin-left: 0; }
  .engine-actions .btn { flex: 1; height: 38px; }
  .engine .hide-narrow { display: inline; }
  .engine-meta { grid-template-columns: 1fr auto auto; gap: 10px 14px; margin-bottom: 10px; }
  .engine-meta > .m-ep { grid-column: 1 / -1; grid-row: 1; }
  .engine-meta .m-gpus .chips { display: none; }
  .engine-meta .k { font-size: 11px; margin-bottom: 2px; }
  .engine-meta .v { font-size: 13px; min-height: 0; }
  .engine-meta .m-ep .v { min-height: 34px; justify-content: space-between; background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 0 0 0 10px; }
  .engine-meta .m-ep .icon-btn { border: 0; background: none; }
  .tiles { gap: 6px; margin-bottom: 6px; }
  .tiles-3, .tiles-2 { grid-template-columns: 1fr 1fr; }
  .tiles-3 .tile:first-child { grid-column: 1 / -1; }
  .tile { flex-direction: row; align-items: center; padding: 9px 10px; gap: 9px; }
  .tile .ticon { font-size: 17px; }
  .tile .tl { font-size: 11px; white-space: nowrap; }
  .tile .tv { font-size: 16px; }
  .tail-head { margin: 10px 0 0; }
  .tail-head strong { display: none; }
  .tail-head .link-btn { width: 100%; justify-content: center; height: 38px; border-radius: 9px; background: var(--panel); border: 1px solid var(--border); }
  .engine .tail { display: none; }
  .engine-foot { margin-top: 10px; padding-top: 10px; }
  .engine-empty { min-height: 0; padding: 22px 16px; }

  /* models */
  .launcher { padding: 14px; }
  .launcher .sub { display: none; }
  .search { margin: 10px 0; }
  .preset { padding: 12px; }
  .preset:hover { transform: none; box-shadow: none; }
  .preset:hover .model-icon { transform: none; }
  .preset-meta { font-size: 12px; }
  .preset-note { margin-top: 10px; padding-top: 8px; }

  /* logs: fill the screen */
  :root[data-tab="logs"] .logviewer {
    display: flex; flex-direction: column; padding: 12px;
    height: calc(100dvh - 57px - 24px - 80px - env(safe-area-inset-bottom));
  }
  .log-head { gap: 10px; margin-bottom: 10px; }
  .log-title { display: none; }
  .log-tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; padding: 2px; }
  .log-tabs::-webkit-scrollbar { display: none; }
  .log-tab { height: 36px; padding: 0 12px; flex: none; }
  .log-controls { width: 100%; margin: 0; flex-wrap: nowrap; }
  .log-controls .toggle { margin-right: auto; }
  .log-controls .btn-sm .lbl { display: none; }
  .log-controls .btn-sm { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .log-output { flex: 1; height: auto; min-height: 0; font-size: 11.5px; padding: 10px; }
  .log-output .lv { min-width: 0; padding: 0 6px; }
  .log-output .ts { font-size: 10.5px; }

  /* history: rows become cards */
  .history .sub { margin-bottom: 8px; }
  .history-table thead { display: none; }
  .history-table, .history-table tbody { display: block; }
  .history-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 2px; border-bottom: 1px solid var(--border-soft); }
  .history-table tbody tr:last-child { border-bottom: 0; }
  .history-table td { padding: 0; border: 0; }
  .history-table td:nth-child(1), .history-table td:nth-child(6) { display: none; }
  .history-table td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; max-width: none; font-size: 14px; }
  .history-table td:nth-child(3) { display: block; grid-column: 1; grid-row: 2; font-size: 12px; color: var(--muted); }
  .history-table td:nth-child(3)::before { content: "by "; }
  .history-table td:nth-child(4) { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--muted); text-align: right; }
  .history-table td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; }
  .history-table tr.history-empty td { display: block; grid-column: 1 / -1; }

  /* modals become bottom sheets */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal, .modal.narrow {
    width: 100%; max-height: 90dvh; border-radius: 22px 22px 0 0; padding: 22px 16px 0;
    animation: sheet-up .38s var(--ease) both; border-bottom: 0;
  }
  .modal::before { content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: -10px auto 14px; }
  .modal-backdrop.closing .modal { animation: sheet-up .22s ease-in reverse both; }
  .modal-head { gap: 12px; }
  .modal-icon { width: 42px; height: 42px; font-size: 20px; }
  .modal-head h3 { font-size: 19px; }
  .modal-head p { font-size: 14px; }
  .seg { grid-template-columns: 1fr; }
  .compare { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .side { padding: 12px; }
  .details { display: none; }
  .modal-foot {
    position: sticky; bottom: 0; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--card); border-top: 1px solid var(--border);
  }
  .modal-foot .btn { flex: 1; height: 46px; }

  .toasts { left: 12px; right: 12px; bottom: calc(88px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }

  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30;
    height: 62px; padding: 6px; border-radius: 20px; background: color-mix(in srgb, var(--card) 86%, transparent);
    backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  }
  .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none;
    color: var(--muted); font-size: 11px; font-weight: 500; border-radius: 14px; z-index: 1; transition: color .25s;
  }
  .tabbar button [data-icon] { font-size: 20px; transition: transform .3s var(--ease); }
  .tabbar button[aria-current="page"] { color: var(--blue-ink); }
  .tabbar button[aria-current="page"] [data-icon] { transform: translateY(-1px) scale(1.1); }
  .tab-ink {
    position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 4); border-radius: 14px;
    background: var(--blue-soft); transform: translateX(calc(var(--tab-i, 0) * 100%)); transition: transform .38s var(--ease);
  }
  .tab-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; animation: pop .3s var(--ease); }
  #tb-models { background: var(--amber-dot); }
  .tab-dot { position: absolute; top: 8px; left: calc(50% + 8px); width: 8px; height: 8px; border-radius: 50%; background: var(--green-dot); animation: pulse-ring 2s infinite; }
}
@keyframes tab-in-fwd { from { opacity: 0; transform: translateX(24px); } }
@keyframes tab-in-back { from { opacity: 0; transform: translateX(-24px); } }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* server pill never wraps; the count only shows when there is room */
.server-btn, .server-btn .count { white-space: nowrap; }
@media (max-width: 1280px) { .server-btn .count { display: none; } }
.launcher-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--blue-soft); border: 1px solid var(--blue-border); font-size: 12.5px; color: var(--text-2); line-height: 1.5; }
.launcher-note .ic { color: var(--blue-ink); font-size: 16px; flex: none; margin-top: 1px; }
.launcher-note b { color: var(--text); }
@media (min-width: 721px) and (max-width: 1024px) {
  .tabbar { left: 50%; right: auto; width: 460px; transform: translateX(-50%); }
  .layout { max-width: 760px; margin: 0 auto; }
  .op-banner { max-width: 784px; margin: 0 auto; }
  .gpu-tiles { gap: 8px; }
  .gpu-row span { display: inline; }
  .gpu-row b { color: var(--text); }
  .gpu-mem { font-size: 14px; }
  .engine-meta .m-gpus .chips { display: inline-flex; }
  .tiles-3 { grid-template-columns: repeat(3, 1fr); }
  .tiles-3 .tile:first-child { grid-column: auto; }
  .engine .tail { display: block; }
  .tail-head strong { display: inline; }
  .tail-head .link-btn { width: auto; height: auto; background: none; border: 0; }
  .modal-backdrop { align-items: center; padding: 16px; }
  .modal, .modal.narrow { border-radius: 18px; max-width: 620px; padding: 24px; border-bottom: 1px solid var(--border); animation: pop .3s var(--ease) both; }
  .modal::before { display: none; }
  .modal-foot { position: static; margin: 20px 0 0; padding: 0; border: 0; background: none; }
  .modal-foot .btn { flex: none; }
  .seg { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .gpu-row > span { display: none; }
  .gpu-row b { width: 100%; }
}
@media (max-width: 720px) {
  .gpu-mem .of { display: none; }
  .gpu-mem::after { content: " GB"; font-size: 10px; color: var(--muted); }
  /* engine stats: two compact rows, no icons */
  .engine .tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .engine .tiles-3 .tile:first-child { grid-column: auto; }
  .engine .tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engine .tile { flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; }
  .engine .tile .ticon { display: none; }
  .engine .tile .tl { font-size: 10.5px; color: var(--muted); white-space: normal; line-height: 1.25; }
  .engine .tile .tv { font-size: 15px; }
  .engine .tile .tv small { font-size: 10.5px; }
  .engine-meta .m-ep .k { display: none; }
}

/* read-only servers: actions visibly off (the server refuses them anyway) */
.ro-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; background: var(--amber-soft); color: var(--amber-ink); border: 1px solid var(--amber-border); white-space: nowrap; animation: pop .3s var(--ease); }
.ro-pill .ic { font-size: 12px; }
:root[data-ro] [data-swap], :root[data-ro] [data-stop], :root[data-ro] [data-restart],
:root[data-ro] .engine-foot .toggle-sm, :root[data-ro] [data-opforce], :root[data-ro] [data-opcancel] { opacity: .4; filter: grayscale(1); }
:root[data-ro] .engine-foot .toggle-sm { pointer-events: none; }
@media (max-width: 720px) { .ro-pill { padding: 0 6px; } .ro-pill .ic + * { display: none; } }

/* ================================================================ system panel */
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sys-tile { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 6px; transition: transform .2s var(--ease), box-shadow .2s; }
.sys-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.st-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); font-weight: 500; }
.st-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--blue-soft); color: var(--blue-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.st-value { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-value small { font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 4px; }
.st-sub { font-size: 11.5px; color: var(--muted); }
.spark { width: 100%; height: 30px; overflow: visible; }
.spark polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.spark .area { opacity: .14; }
.s-blue polyline { stroke: var(--blue); }
.s-blue .area { fill: var(--blue); }
.s-amber polyline { stroke: var(--amber-dot); }
.s-amber .area { fill: var(--amber-dot); }
.temps, .disks { display: flex; flex-direction: column; gap: 7px; }
.trow { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.trow b { font-size: 13px; font-variant-numeric: tabular-nums; }
.trow .bar, .drow .bar { height: 6px; }
.drow-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.mono { font-family: var(--mono); font-size: 11.5px; }
.t-ok { color: inherit; }
.bar.t-ok i { background: var(--green-dot); }
.t-warm { color: var(--amber-ink); }
.bar.t-warm i { background: var(--amber-dot); }
.t-hot { color: var(--red); }
.bar.t-hot i { background: var(--red); }
b.t-ok { color: var(--text); }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text-2); }
.pill-ok { background: var(--green-soft); border-color: var(--green-border); color: var(--green); }
.pill-warn { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber-ink); }

/* desktop: Swap History runs down to where the log viewer ends */
@media (min-width: 1201px) {
  .layout { align-items: stretch; }
  .col-left .history { flex: 1; }
}
@media (max-width: 720px) {
  .sys-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .sys-tile { padding: 10px; }
  .sys-tile:hover { transform: none; box-shadow: none; }
  .sys-tile[data-key="disk"] { grid-column: 1 / -1; }
  .st-value { font-size: 18px; }
  .sys-card .sub { font-size: 12px; }
}

/* ================================================================ history list */
.hist-list { display: flex; flex-direction: column; }
.hrow { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--border-soft); border-radius: 8px; transition: background .15s; }
.hrow:last-child { border-bottom: 0; }
.hrow:hover { background: var(--panel); }
.h-idx { font-size: 12px; color: var(--faint); text-align: center; font-variant-numeric: tabular-nums; }
.h-main { min-width: 0; }
.h-model { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); min-width: 0; }
.h-model > span:not(.hmode) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.h-model small { flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); padding: 1px 5px; border-radius: 4px; background: var(--panel-2); }
.hmode { flex: none; color: var(--amber-ink); font-size: 12px; display: inline-flex; }
.h-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.h-side .res { font-size: 12px; }
.h-when { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.hist-empty { text-align: center; color: var(--faint); padding: 18px 0; font-size: 12px; }
.hrow.enter { animation: rise .4s var(--ease) both; }

/* ================================================================ full history: filters + scroll */
.history { display: flex; flex-direction: column; min-height: 0; }
.hist-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hist-reset { flex: none; }
.hist-filters { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 12px 0 8px; }
.hf { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--muted); min-width: 0; transition: border-color .2s, background .2s; }
.hf:focus-within { border-color: var(--blue-border); background: var(--card); }
.hf .ic { font-size: 14px; flex: none; }
.hf input, .hf select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; appearance: none; cursor: pointer; }
.hf input { cursor: text; }
.hf select option { background: var(--card); color: var(--text); }
.hf-day { grid-column: 1 / -1; color: var(--text); font-size: 12.5px; color-scheme: inherit; }
.hist-list { flex: 1; min-height: 120px; max-height: 520px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.hday { position: sticky; top: 0; z-index: 1; padding: 8px 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--card); }
@media (min-width: 1201px) {
  /* the card already stretches to the log viewer; the list takes what is left */
  .hist-list { max-height: none; height: 0; }
}
@media (max-width: 1024px) {
  :root[data-tab="history"] .history { display: flex; height: calc(100dvh - 57px - 24px - 80px - env(safe-area-inset-bottom)); }
  .hist-list { max-height: none; height: 0; }
}
@media (max-width: 720px) {
  .hist-filters { grid-template-columns: 1fr 1fr; }
  .hf-model { grid-column: 1 / -1; }
  .hist-reset .ic + span { display: none; }
}

/* The list sits absolutely inside a flexing wrapper, so however many entries it
   holds it adds nothing to the page's height: the card is as tall as the space
   the layout gives it, and the list scrolls inside. */
.hist-wrap { position: relative; flex: 1; min-height: 160px; }
.hist-wrap .hist-list { position: absolute; inset: 0; height: auto; max-height: none; margin: 0 -6px; }
@media (max-width: 1200px) and (min-width: 1025px) {
  .hist-wrap { flex: none; height: 420px; }
}

.h-sub { display: flex; align-items: center; gap: 6px; }
.h-tag { flex: none; font-family: var(--mono); font-size: 10.5px; padding: 0 5px; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-2); line-height: 16px; }

/* ================================================================ dropdown */
.dd { position: relative; min-width: 0; }
.dd-btn {
  display: flex; align-items: center; gap: 7px; width: 100%; height: 34px; padding: 0 8px 0 10px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--panel); color: var(--text);
  font-size: 12.5px; font-weight: 500; text-align: left; transition: border-color .2s, background .2s, box-shadow .2s;
}
.dd-btn:hover { border-color: var(--border-strong); }
.dd.open .dd-btn, .dd-btn:focus-visible { border-color: var(--blue-border); background: var(--card); box-shadow: 0 0 0 3px var(--blue-soft); outline: 0; }
.dd-ic { color: var(--muted); font-size: 14px; display: inline-flex; flex: none; }
.dd.dd-set .dd-btn { border-color: var(--blue-border); background: var(--blue-soft); }
.dd.dd-set .dd-ic, .dd.dd-set .dd-label { color: var(--blue-ink); }
.dd-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-chev { color: var(--muted); font-size: 14px; display: inline-flex; transition: transform .25s var(--ease); }
.dd.open .dd-chev { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; min-width: 100%; width: max-content; max-width: 260px;
  max-height: 280px; overflow-y: auto; padding: 5px; border-radius: 12px; outline: 0;
  background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-pop);
  animation: drop .16s var(--ease) both; transform-origin: top left;
}
.dd:last-of-type .dd-menu { left: auto; right: 0; transform-origin: top right; }
.dd.dd-up .dd-menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.dd-item {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 8px; border-radius: 8px;
  font-size: 13px; color: var(--text-2); cursor: pointer; user-select: none; transition: background .12s, color .12s;
}
.dd-item.hi { background: var(--panel); color: var(--text); }
.dd-item.sel { color: var(--text); font-weight: 600; }
.dd-check { width: 14px; display: inline-flex; color: var(--blue-ink); font-size: 13px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s var(--ease); }
.dd-item.sel .dd-check { opacity: 1; transform: none; }
.dd-text { flex: 1; white-space: nowrap; }
.dd-hint {
  font-size: 11px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums;
  min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--panel-2); text-align: center;
}
.dd-item.sel .dd-hint { background: var(--blue-soft); color: var(--blue-ink); }
.dd-sep { height: 1px; margin: 4px 6px; background: var(--border); }
.hf-day { height: 34px; padding: 0 10px; border: 1px solid var(--blue-border); border-radius: 9px; background: var(--blue-soft); color: var(--blue-ink); font: inherit; font-size: 12.5px; color-scheme: light dark; }
:root[data-theme="dark"] .hf-day { color-scheme: dark; }

/* ================================================================ history flags + details */
.hist-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hist-filters .hf-model { grid-column: 1 / -1; }
.hrow { position: relative; grid-template-columns: 22px minmax(0, 1fr) auto; }
.hrow::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: transparent; }
.hrow.f-crash::before { background: var(--red); }
.hrow.f-reboot::before { background: #a855f7; }
.hrow.has-detail { cursor: pointer; }
.hrow.open { background: var(--panel); }
.hflag { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; border: 1px solid transparent; }
.hflag.f-swap { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-border); }
.hflag.f-auto { background: var(--green-soft); color: var(--green); border-color: var(--green-border); }
.hflag.f-stop { background: var(--panel-2); color: var(--text-2); border-color: var(--border); }
.hflag.f-crash { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }
.hflag.f-reboot { background: color-mix(in srgb, #a855f7 14%, transparent); color: #a855f7; border-color: color-mix(in srgb, #a855f7 35%, transparent); }
:root[data-theme="dark"] .hflag.f-reboot { color: #c084fc; }
.h-caret { flex: none; display: inline-flex; color: var(--faint); font-size: 13px; margin-left: auto; transition: transform .25s var(--ease); }
.hrow.open .h-caret { transform: rotate(180deg); }
.res-reboot { color: #a855f7; }
:root[data-theme="dark"] .res-reboot { color: #c084fc; }
.h-detail { grid-column: 2 / -1; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 4px; animation: rise .25s var(--ease) both; cursor: auto; }
.h-reason { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text); }
.h-reason .ic { font-size: 15px; flex: none; margin-top: 1px; }
.h-log { background: var(--log-bg); color: var(--log-text); border-radius: 8px; padding: 8px 10px; font: 11px/1.55 var(--mono); max-height: 180px; overflow: auto; }
.h-log .ln { white-space: pre-wrap; word-break: break-word; }
.h-log .ts { color: var(--log-ts); }
.h-log .lv { color: var(--log-info); margin: 0 8px 0 4px; }
.h-log .lv-err { color: var(--log-err); }
.h-log .lv-warn { color: var(--log-warn); }
.h-detail .link-btn { align-self: flex-start; font-size: 12px; }

/* ================================================================ crash / exit cards */
.engine-exit.is-bad { border-color: var(--red-border); background: linear-gradient(180deg, var(--red-soft), var(--card) 140px); }
.engine-exit.is-neutral { border-style: dashed; }
.badge-crash { background: var(--red); color: #fff; border-color: var(--red); }
.badge-unhealthy { background: var(--red-soft); color: var(--red); border-color: var(--red-border); }
.badge-unhealthy::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: breathe .9s infinite; }
.exit-reason { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; background: var(--red-soft); border: 1px solid var(--red-border); }
.is-neutral .exit-reason { background: var(--panel); border-color: var(--border); }
.exit-reason .wicon { font-size: 22px; display: inline-flex; flex: none; }
.exit-reason strong { display: block; color: var(--red); font-size: 14px; }
.is-neutral .exit-reason strong { color: var(--text); }
.exit-reason span { color: var(--text-2); font-size: 12.5px; }
.engine.st-unhealthy { border-color: var(--red-border); }
.btn-icon-sm { padding: 0 9px; }
.gpu-group.is-bad { border-color: var(--red-border); }
.who-bad { color: var(--red); }
.dead-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

/* ================================================================ pages: Dashboard / Charts / Configure */
.page { display: none; padding: 6px 24px 96px; }
:root[data-page="servers"] .page-servers, :root[data-page="charts"] .page-charts, :root[data-page="config"] .page-config, :root[data-page="api"] #page-api, :root[data-page="users"] #page-users, :root[data-page="insights"] #page-insights { display: block; }
:root[data-page="servers"] .layout, :root[data-page="charts"] .layout, :root[data-page="config"] .layout, :root[data-page="api"] .layout, :root[data-page="users"] .layout, :root[data-page="insights"] .layout { display: none !important; }
.page-in { animation: rise .35s var(--ease) both; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 4px 0 14px; flex-wrap: wrap; }
.page-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.page-head h2 [data-icon] { font-size: 20px; }

.pagenav { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 11px; background: var(--panel); border: 1px solid var(--border); flex: none; }
.pagenav button { position: relative; z-index: 1; display: inline-flex; flex: 1 1 0; justify-content: center; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border: 0; background: none; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: color .2s; }
.pagenav button [data-icon] { font-size: 15px; }
.pagenav button[aria-current="page"] { color: var(--text); }
.pagenav-ink { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 5); border-radius: 8px; background: var(--card); box-shadow: var(--shadow-lift); transform: translateX(calc(var(--page-i, 0) * 100%)); transition: transform .35s var(--ease); }
.gear-btn { display: none; }
@media (max-width: 1360px) { .pagenav button span:not([data-icon]) { display: none; } .pagenav button { padding: 0 11px; } }

/* ================================================================ charts */
:root { --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #4a3aa7; --c8: #e34948; }
:root[data-theme="dark"] { --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9; --c8: #e66767; }
.seg-range { display: flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
.seg-range button { height: 30px; padding: 0 14px; border: 0; border-radius: 7px; background: none; font-size: 13px; font-weight: 500; color: var(--text-2); transition: background .2s, color .2s, box-shadow .2s; }
.seg-range button.on { background: var(--card); color: var(--text); box-shadow: var(--shadow-lift); }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.chart-card { padding: 14px 16px 12px; min-width: 0; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.chart-head h3 { font-size: 14px; font-weight: 600; display: inline; }
.chart-unit { font-size: 12px; color: var(--muted); margin-left: 8px; }
.chart-now { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-plot { position: relative; min-height: 190px; }
.chart-plot > svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-plot .grid { stroke: var(--border); stroke-width: 1; }
.chart-plot .ytick, .chart-plot .xtick { font: 10.5px Inter, sans-serif; fill: var(--muted); }
.chart-plot .ytick { text-anchor: end; }
.chart-plot .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-plot .cross { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-plot .dots circle { stroke: var(--card); stroke-width: 2; }
.chart-plot .hit { fill: transparent; cursor: crosshair; }
.chart-tip { position: absolute; top: 8px; z-index: 5; min-width: 150px; padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-pop); font-size: 12px; pointer-events: none; }
.tip-time { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.tip-row { display: flex; align-items: center; gap: 7px; line-height: 1.7; }
.tip-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tip-row span { flex: 1; color: var(--text-2); white-space: nowrap; }
.tip-row b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.chart-empty { position: absolute; inset: 10px 10px 22px 40px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12.5px; background: color-mix(in srgb, var(--card) 70%, transparent); border-radius: 8px; }
.chart-empty.static { position: static; min-height: 190px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lg { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid transparent; background: none; font-size: 11.5px; color: var(--text-2); transition: background .15s, opacity .2s; }
.lg:hover { background: var(--panel); }
.lg i { width: 10px; height: 3px; border-radius: 2px; }
.lg b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.lg.off { opacity: .4; }
.lg.off i { background: var(--faint) !important; }
.chart-error { display: flex; gap: 8px; align-items: center; color: var(--red); }

/* ================================================================ configure */
.cfg-root { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.cfg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cfg-section { padding: 16px 18px; }
.cfg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.cfg-head h3 { font-size: 16px; font-weight: 700; }
.cfg-head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cfg-list { display: flex; flex-direction: column; gap: 8px; }
.cfg-item { border: 1px solid var(--border); border-radius: 12px; transition: border-color .2s; }
.cfg-item.open { border-color: var(--blue-border); }
.cfg-sum { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; border-radius: 12px; }
.cfg-sum:hover { background: var(--panel); }
.cfg-sum .model-icon { width: 36px; height: 36px; font-size: 20px; }
.cfg-sum-text { flex: 1; min-width: 0; }
.cfg-sum-text b { display: block; font-size: 14px; }
.cfg-sum-text small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-caret { color: var(--muted); display: inline-flex; transition: transform .25s var(--ease); }
.cfg-item.open .cfg-caret { transform: rotate(180deg); }
.cfg-form { padding: 6px 14px 14px; animation: rise .25s var(--ease) both; }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 14px; }
.cfield { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text-2); }
.cfield.wide { grid-column: 1 / -1; }
.cfield input, .cfield textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 400; outline: 0; transition: border-color .2s, box-shadow .2s; resize: vertical; }
.cfield input.mono, .cfield textarea { font-family: var(--mono); font-size: 12px; }
.cfield input:focus, .cfield textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.cfield small { font-weight: 400; color: var(--muted); font-size: 11px; }
.cfield .dd-btn { height: 37px; background: var(--card); border-color: var(--border-strong); }
.cfg-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
.cfg-actions .toggle { margin-right: auto; }
.cfg-rows { display: flex; flex-direction: column; gap: 8px; }
.cfg-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }
.cfg-row:has(> :nth-child(2):last-child) { grid-template-columns: 1fr auto; }
.cfg-row .icon-btn { height: 37px; width: 37px; }
.cfg-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip-check { display: inline-flex; cursor: pointer; position: relative; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); font-size: 12px; color: var(--text-2); transition: all .15s; }
.chip-check input:checked + span { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue-ink); font-weight: 600; }
.chip-check.sev-critical input:checked + span { background: var(--red-soft); border-color: var(--red-border); color: var(--red); }
.chip-check.sev-warning input:checked + span { background: var(--amber-soft); border-color: var(--amber-border); color: var(--amber-ink); }
.chip-check input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.cfg-notify { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.cfg-note { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--muted); }
.cfg-note .ic { flex: none; margin-top: 2px; }
.cfg-warn { display: flex; gap: 10px; align-items: center; color: var(--amber-ink); background: var(--amber-soft); border-color: var(--amber-border); }
.cfg-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 35; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--blue-border); box-shadow: var(--shadow-pop); max-width: calc(100vw - 24px); }
.cfg-bar:not([hidden]) { animation: fade .25s var(--ease) both; }
.cfg-bar.err { border-color: var(--red-border); }
.cfg-bar.err .cfg-bar-msg { color: var(--red); }
.cfg-bar-msg { font-size: 13px; font-weight: 500; max-width: 520px; }
:root:not([data-page="config"]) .cfg-bar { display: none; }

/* ================================================================ engine test */
.test-body { margin-top: 16px; }
.test-wait { display: flex; align-items: center; gap: 10px; padding: 26px 0; justify-content: center; color: var(--text-2); }
.test-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.test-stats div { background: var(--panel); border-radius: 10px; padding: 10px 12px; animation: pop .3s var(--ease) both; }
.test-stats div:nth-child(2) { animation-delay: 50ms; }
.test-stats div:nth-child(3) { animation-delay: 100ms; }
.test-stats div:nth-child(4) { animation-delay: 150ms; }
.test-stats span { display: block; font-size: 11px; color: var(--muted); }
.test-stats b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.test-stats b small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.test-reply { margin-top: 12px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); }
.test-label { font-size: 11px; color: var(--muted); }
.test-reply p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; }

/* ================================================================ pages on phones and tablets */
@media (max-width: 1024px) {
  .pagenav { display: none; }
  .gear-btn { display: inline-flex; }
  :root[data-page="config"] .gear-btn:not(.key-btn):not(.users-btn):not(.insights-btn), :root[data-page="api"] .key-btn, :root[data-page="users"] .users-btn, :root[data-page="insights"] .insights-btn { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-border); }
  .page { padding: 12px 12px 100px; }
  .chart-grid { grid-template-columns: minmax(0, 1fr); }
  .cfg-two { grid-template-columns: minmax(0, 1fr); }
  .tabbar { grid-template-columns: repeat(5, 1fr); }
  .tab-ink { width: calc((100% - 12px) / 5); }
  :root[data-page="config"] .tab-ink, :root[data-page="api"] .tab-ink, :root[data-page="users"] .tab-ink, :root[data-page="insights"] .tab-ink { opacity: 0; }
  .tabbar button { font-size: 10.5px; }
  .test-stats { grid-template-columns: 1fr 1fr; }
  .cfg-bar { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (max-width: 720px) {
  .cfg-head { flex-direction: column; }
  .cfg-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cfg-row .cfield:nth-child(2) { grid-column: 1; }
  .cfg-row .icon-btn { grid-row: 1; grid-column: 2; }
  .page-head { align-items: flex-start; }
}

/* Configure uses the full width: models + alerts in the main column, groups + disks beside them */
.cfg-root { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 14px; align-items: start; }
.cfg-root > .cfg-warn { grid-column: 1 / -1; }
.cfg-main, .cfg-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cfg-side { position: sticky; top: 12px; }
.cfg-side .cfg-head { flex-direction: column; }
.cfg-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 1200px) {
  .cfg-root { grid-template-columns: minmax(0, 1fr); }
  .cfg-side { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) { .cfg-side { grid-template-columns: minmax(0, 1fr); } }

/* header without a title: the logo, then the server switcher; nothing may run under the buttons */
.brand { gap: 10px; }
.brand .server-switch { min-width: 0; }
.server-btn { max-width: 100%; }
.server-btn #server-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ro-pill { flex: none; }
@media (max-width: 720px) {
  .ro-pill { width: 30px; height: 30px; padding: 0; justify-content: center; }
  .ro-pill .ro-text { display: none; }
  .ro-pill .ic { font-size: 14px; }
  .brand { gap: 8px; }
}

/* real values: engine facts, where launcher numbers come from, config drift */
.facts { display: flex; flex-wrap: wrap; gap: 5px; margin: -4px 0 14px; }
.fact { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fact-id { font-family: var(--mono); background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue-ink); }
.src-tag { font-size: 10px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); align-self: center; }
.cfg-drift { display: flex; align-items: center; gap: 10px; margin: 0 12px 10px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--amber-soft); border: 1px solid var(--amber-border); color: var(--amber-ink); font-size: 12.5px; }
.cfg-drift > .ic { flex: none; }
.cfg-drift > span { flex: 1; min-width: 0; }
.cfg-drift b { color: var(--text); font-weight: 600; }
.cfg-drift .btn { height: 30px; font-size: 12px; flex: none; }
.cfg-sum .badge { text-transform: none; letter-spacing: 0; height: 20px; font-size: 11px; }
@media (max-width: 720px) { .cfg-drift { flex-wrap: wrap; } .facts { margin-top: 0; } }

/* charts: section headings between groups of charts */
.chart-group { grid-column: 1 / -1; margin: 12px 2px -4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.chart-group:first-child { margin-top: 0; }
.chart-now { white-space: nowrap; }

/* engine card: averages and totals since the engine started */
.lt-head { font-size: 12.5px; margin: 10px 0 6px; }
.lt-more { margin: 10px 0; }
.lt-more summary { font-size: 12.5px; cursor: pointer; padding: 4px 0; user-select: none; }
.lt-more[open] summary { margin-bottom: 6px; }
.lt-more .lts { margin-bottom: 0; }
.lts { display: flex; flex-wrap: wrap; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.lt { flex: 1 1 106px; overflow: hidden; background: var(--card); padding: 7px 10px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lt > span { font-size: 11px; color: var(--text-2); white-space: nowrap; }
.lt b { font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lt b small { font-size: 11px; font-weight: 400; color: var(--text-2); margin-left: 3px; }

/* any number of engines: an odd one out takes the full row; CPU engines name their threads */
.engine-grid:not(.one) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.chip.chip-wide { width: auto; padding: 0 8px; font-weight: 500; }

/* three engines side by side when the panel is wide enough for three readable cards */
.engines-card { container: engines / inline-size; }
@container engines (min-width: 1240px) {
  .engine-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .engine-grid.three > :last-child:nth-child(odd) { grid-column: auto; }
}

/* capability flags: vision / text only, image generation, tools, thinking */
.caps { display: flex; flex-wrap: wrap; gap: 5px; margin: -4px 0 12px; }
.cap { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap; border: 1px solid var(--border); background: var(--panel); color: var(--text-2); }
.cap .ic { font-size: 13px; }
.cap-vision.on, .cap-image_out.on { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue-ink); }
.cap.off { color: var(--muted); border-style: dashed; background: transparent; }
.preset .caps, .preset-meta + .caps { margin: 6px 0 0; }

/* ================================================================ API page: stats, usage, keys, connect */
.page-api .page-head .btn { height: 40px; padding: 0 16px; font-size: 14px; }
.api-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.astat { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); min-width: 0; }
.astat-ic { width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--blue-soft); color: var(--blue-ink); font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.astat > div { display: flex; flex-direction: column; min-width: 0; }
.astat small { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.astat b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.2; white-space: nowrap; }
.astat em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.api-root { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 14px; align-items: start; }
.api-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.page-api .card { padding: 18px 20px; min-width: 0; }
.page-api h3 { font-size: 16px; font-weight: 600; }
.page-api h4 { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 16px 0 7px; }
.page-api h4 .muted { font-weight: 400; }
.page-api .sub { margin: 3px 0 0; }
.page-api code, .page-api pre { font-family: var(--mono); font-size: 12px; }
.acard-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.lg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 8px; }
.lg-dot.c1 { background: var(--c1); } .lg-dot.c2 { background: var(--c2); }

/* usage bars: one per day, input below output */
.uchart { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 84px auto; gap: 4px 8px; }
.uchart.tall { grid-template-rows: 150px auto; }
.uchart-y { display: flex; flex-direction: column; justify-content: space-between; text-align: right; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.uchart-plot { display: flex; align-items: stretch; gap: 3px; border-bottom: 1px solid var(--border-strong); background: linear-gradient(var(--border), var(--border)) 0 50% / 100% 1px no-repeat; min-width: 0; }
.ub { flex: 1; min-width: 0; display: flex; align-items: flex-end; justify-content: center; }
.ub:hover .ub-bar { filter: brightness(1.15); }
.ub-bar { display: flex; align-items: flex-start; width: 100%; max-width: 22px; border-radius: 3px 3px 0 0; background: var(--c1); overflow: hidden; }
.ub-bar b { display: block; width: 100%; background: var(--c2); }
.ub-none { width: 100%; max-width: 22px; height: 2px; background: var(--border-strong); border-radius: 1px; }
.uchart-x { grid-column: 2; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }

/* keys table */
.ak-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ak-search { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--card); color: var(--muted); }
.ak-search input { border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 13px; width: 150px; }
.ak-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.ak-sort { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.ak-sort select { height: 34px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.ak-cols-head, .ak-sum { display: grid; grid-template-columns: minmax(150px, 1.7fr) 100px repeat(3, minmax(64px, .7fr)) minmax(120px, 1.1fr) minmax(84px, .8fr) 20px; align-items: center; gap: 12px; }
.ak-cols-head { padding: 0 15px 8px; font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
.ak { border: 1px solid transparent; border-bottom-color: var(--border); transition: border-color .2s, background .2s; }
.ak:last-child { border-bottom-color: transparent; }
.ak.open { border: 1px solid var(--border-strong); border-radius: 12px; margin: 6px 0; background: var(--panel); }
.ak.is-off .ak-sum { opacity: .55; }
/* Keys of one account: a line for the account, its keys under it when opened. */
.ak-grp { border-bottom: 1px solid var(--border); }
.ak-grp.open { border-bottom: 0; }
.ak-gsum { background: var(--panel-2); border-radius: 10px; margin: 4px 0; }
.ak-gsum:hover { background: var(--panel-2); filter: brightness(.98); }
.ak-gsum .ak-name b { display: flex; align-items: center; gap: 7px; }
.ak-gsum .ak-name b svg { width: 15px; height: 15px; flex: none; color: var(--muted); }
.ak-gsum .ak-name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-grp.open > .ak-gsum .cfg-caret { transform: rotate(180deg); }
.ak-gkeys { margin: 0 0 10px 10px; padding-left: 8px; border-left: 2px solid var(--border); }
.ak-gkeys .ak-owner { display: none; }
.ak-sum { width: 100%; padding: 12px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 10px; }
.ak-sum:hover { background: var(--panel); }
.ak-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ak-name b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-name small { color: var(--muted); font-size: 11.5px; }
.ak-num { min-width: 0; }
.ak-num b { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-num b small { font-weight: 400; color: var(--muted); font-size: 12px; }
.ak-last b { font-weight: 400; color: var(--text-2); }
.ak-month .bar { display: block; height: 4px; margin-top: 5px; max-width: 120px; }
.ak.open .cfg-caret { transform: rotate(180deg); }
.ak-body { padding: 2px 16px 16px; border-top: 1px solid var(--border); }
.ak-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr); gap: 0 28px; }
.ak-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ak-table th { text-align: right; font-weight: 500; color: var(--muted); font-size: 11px; padding: 4px 8px; }
.ak-table td { text-align: right; padding: 6px 8px; border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.ak-table th:first-child, .ak-table td:first-child { text-align: left; padding-left: 0; overflow-wrap: anywhere; }
.ak-dl { display: flex; flex-direction: column; margin: 0; }
.ak-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 12.5px; }
.ak-dl > div:first-child { border-top: 0; }
.ak-dl dt { color: var(--text-2); white-space: nowrap; }
.ak-dl dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.ak-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.ak-actions .btn { height: 34px; font-size: 13px; }
.ak-empty { display: flex; align-items: center; gap: 8px; padding: 22px 4px; color: var(--muted); }
.ak-empty.big { flex-direction: column; gap: 6px; padding: 44px 16px; text-align: center; }
.ak-empty.big b { font-size: 16px; color: var(--text); margin-top: 8px; }
.ak-empty.big .btn { margin-top: 14px; height: 40px; }

/* connect */
.api-url { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
.api-url code { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--blue-ink); font-size: 12.5px; }
.api-models { display: flex; flex-direction: column; gap: 6px; }
.api-model { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 10px; border: 1px solid var(--border); }
.api-model-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green, #22c55e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green, #22c55e) 20%, transparent); }
.api-model code { display: block; overflow-wrap: anywhere; font-size: 12.5px; }
.api-model small { color: var(--muted); font-size: 11.5px; }
.api-code-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 16px 0 7px; }
.api-code-head h4 { margin: 0; }
.api-code-head .seg-range button { height: 26px; padding: 0 10px; font-size: 12px; }
.api-code { position: relative; border-radius: 10px; background: var(--panel); border: 1px solid var(--border); }
.api-code pre { margin: 0; padding: 12px 44px 12px 12px; overflow-x: auto; white-space: pre; line-height: 1.55; }
.api-code .icon-btn { position: absolute; top: 6px; right: 6px; }
.api-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: 12px; color: var(--text-2); }
.api-note .ic { flex: none; margin-top: 2px; }

/* dialog */
.ak-modal { width: 800px; overscroll-behavior: contain; }
:root:has(#api-dialog:not([hidden])), :root:has(#api-dialog:not([hidden])) body { overflow: hidden; }   /* the page behind stays where it is */
.ak-form { margin-top: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .ak-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ak-models { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-tick { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 12px; cursor: pointer; }
.ak-tick:has(input:checked) { background: var(--blue-soft); border-color: var(--blue-border); color: var(--blue-ink); }
.ak-secret-box { margin-top: 18px; padding: 12px 10px 12px 14px; }
.ak-secret-box code { font-size: 13px; }
.key-btn { display: none; }

@media (max-width: 1280px) { .api-root { grid-template-columns: minmax(0, 1fr); } .api-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .key-btn { display: inline-flex; } }
@media (max-width: 900px) {
  .api-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .astat { padding: 10px 12px; } .astat b { font-size: 18px; } .astat-ic { width: 32px; height: 32px; font-size: 15px; }
  .ak-cols-head { display: none; }
  .ak-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
  .ak-sum .ak-name { grid-column: 1 / 3; }
  .ak-sum .ak-state { justify-self: end; }
  .ak-sum .cfg-caret { display: none; }
  .ak-sum .ak-month { grid-column: 1 / 3; }
  .ak-num::before { content: attr(data-l); display: block; font-size: 11px; color: var(--muted); }
  .ak-cols { grid-template-columns: minmax(0, 1fr); }
  .ak-search input { width: 110px; }
  .ak-form { grid-template-columns: minmax(0, 1fr); }
  .page-api .page-head .btn { width: 100%; justify-content: center; }
}
.cfield .ak-tick input { width: auto; padding: 0; margin: 0; flex: none; accent-color: var(--blue); }
.ak-tick span { white-space: nowrap; }

/* API page: pause banner, cost column, request log, accounts, activity */
.api-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.api-head-actions .btn .ic { margin-right: 6px; }
.api-paused { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: var(--amber-soft); border: 1px solid var(--amber-border); color: var(--amber-ink); font-size: 13.5px; }
.api-paused > span { flex: 1; min-width: 0; }
.api-paused b { color: var(--text); }
.api-paused .btn { height: 34px; flex: none; }
.ak-cols-head, .ak-sum { grid-template-columns: minmax(150px, 1.7fr) 100px repeat(3, minmax(64px, .7fr)) minmax(120px, 1.1fr) minmax(64px, .6fr) minmax(84px, .8fr) 20px; }
.ak-reqs { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--card); max-height: 340px; overflow-y: auto; }
.ak-reqs .ak-table { min-width: 720px; }
.ak-reqs th { position: sticky; top: 0; background: var(--card); z-index: 1; text-align: left; padding: 7px 10px; }
.ak-reqs td { text-align: left; padding: 6px 10px; white-space: nowrap; }
.ak-reqs th:first-child, .ak-reqs td:first-child { padding-left: 10px; }
.ak-reqs tr.bad td { background: color-mix(in srgb, var(--red-soft) 60%, transparent); }
.rq { display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; text-align: center; }
.rq.ok { background: var(--green-soft, var(--blue-soft)); color: var(--green); }
.rq.err { background: var(--red-soft); color: var(--red); }
.rq.run { background: var(--blue-soft); color: var(--blue-ink); }
.ak-live { display: block; font-size: 11px; font-weight: 500; color: var(--blue-ink); white-space: nowrap; }
.api-section { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 22px 2px 10px; }
.api-admin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
.au-form { margin-bottom: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.au-form select, .ak-form select, .au-pw input { height: 37px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.au-form-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.au-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.au-row:first-child { border-top: 0; }
.au-row.is-off .au-name { opacity: .55; }
.au-name { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 150px; }
.au-name b { font-size: 14px; } .au-name b small { font-weight: 400; color: var(--muted); }
.au-name small { color: var(--muted); font-size: 12px; }
/* One line per account until it is opened: the long line of facts is cut, the buttons are tucked away. */
.au-toggle { border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; min-width: 0; }
.au-row:not(.open) .au-toggle small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-caret { border: 0; background: none; color: var(--muted); padding: 4px; cursor: pointer; display: flex; }
.au-row.open .au-caret .cfg-caret { transform: rotate(180deg); }
.au-row.open { background: var(--panel); border-radius: 10px; padding: 11px 10px; margin: 4px -8px; border-top-color: transparent; }
.au-row.open + .au-row { border-top-color: transparent; }
.au-row .au-actions, .au-row .au-pw { flex-basis: 100%; }
.au-actions, .au-pw { display: flex; gap: 6px; flex-wrap: wrap; }
.au-actions .btn, .au-pw .btn, .au-form-foot .btn, .acard-head .ak-tools .btn { height: 32px; font-size: 12.5px; padding: 0 10px; }
.au-table td:last-child { white-space: normal; color: var(--text-2); }
@media (max-width: 1280px) { .api-admin { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .ak-sum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .api-head-actions { width: 100%; } .api-head-actions .btn { flex: 1; justify-content: center; }
  .api-paused { flex-wrap: wrap; }
}

/* user accounts on the Administration card */
.au-limits { flex-basis: 100%; margin: 4px 0 2px; }
.au-limits-note span { font-weight: 600; color: var(--text); }
.ak-name b .ak-owner { font-weight: 500; font-size: 11px; color: var(--blue-ink); background: var(--blue-soft); border: 1px solid var(--blue-border); border-radius: 5px; padding: 1px 6px; margin-left: 4px; }
.acard-head .sub a { color: var(--blue-ink); }

/* launcher: hiding older models */
.preset-hide { background: none; border: 0; padding: 0; cursor: pointer; margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.preset:hover .preset-hide, .preset-hide:focus-visible, .preset.is-hidden .preset-hide { opacity: 1; }
.preset-hide:hover { background: var(--panel); color: var(--text); }
.preset.is-hidden { border-style: dashed; }
.preset.is-hidden .model-icon, .preset.is-hidden .preset-text > .preset-meta { opacity: .6; }
.tag-hidden { background: var(--panel); color: var(--muted); border-color: var(--border); }
.preset-more { background: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px; border-radius: 10px; border: 1.5px dashed var(--border-strong); color: var(--text-2); font-size: 13px; font-weight: 500; transition: border-color .15s, color .15s, background .15s; }
.preset-more:hover { border-color: var(--blue); color: var(--blue-ink); background: var(--blue-soft); }
@media (hover: none) { .preset-hide { opacity: 1; } }

/* ------------------------------------------------------------------ servers page */
.fleet-totals { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.fleet-stat { padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); min-width: 0; }
.fleet-stat small { display: block; font-size: 12px; color: var(--text-2); }
.fleet-stat b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; }
.fleet-stat b small { display: inline; font-size: 13px; font-weight: 500; color: var(--muted); }
.fleet-bad { color: var(--red); }
.fleet { padding: 6px; }
.fleet-row { display: grid; grid-template-columns: minmax(170px, 1.2fr) minmax(180px, 2fr) minmax(170px, 1.3fr) 90px 100px 80px minmax(110px, 1fr); gap: 14px; align-items: center; width: 100%; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; background: none; text-align: left; font-size: 13px; }
button.fleet-row { cursor: pointer; transition: background .15s; }
button.fleet-row:hover { background: var(--panel); }
.fleet-row.active { background: var(--blue-soft); border-color: var(--blue-border); }
.fleet-row.off > :not(.fleet-name):not(.fleet-flag) { opacity: .35; }
.fleet-head { padding: 8px 14px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fleet-name { display: grid; grid-template-columns: 12px auto 1fr; align-items: center; gap: 2px 8px; min-width: 0; }
.fleet-name .sdot { position: static; width: 9px; height: 9px; border-radius: 50%; background: var(--green-dot); }
.fleet-name .sdot.off { background: var(--faint); }
.fleet-name b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-name small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-name .fleet-hw { grid-column: 2 / -1; font-size: 12px; }
.fleet-engines { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.fleet-chip { max-width: 100%; padding: 3px 8px; border-radius: 7px; background: var(--panel-2); border: 1px solid var(--border); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-chip.warn { border-color: var(--amber-border); color: var(--amber-ink); background: var(--amber-soft); }
.fleet-chip.bad { border-color: var(--red-border); color: var(--red); background: var(--red-soft); }
.fleet-none { color: var(--muted); font-size: 12px; }
.fleet-gpu { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fleet-gpu small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-bar { display: block; height: 5px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.fleet-bar i { display: block; height: 100%; border-radius: 3px; background: var(--blue); }
.fleet-num b { display: block; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fleet-num b i { font-style: normal; font-weight: 400; color: var(--muted); }
.fleet-num small { font-size: 11px; color: var(--muted); }
.fleet-flag { justify-self: start; max-width: 100%; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-flag.ok { color: var(--green-ink, var(--text-2)); background: var(--green-soft, var(--panel-2)); }
.fleet-flag.warn { color: var(--amber-ink); background: var(--amber-soft); }
.fleet-flag.bad { color: var(--red); background: var(--red-soft); }
@media (max-width: 1100px) {
  .fleet-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fleet-head { display: none; }
  .fleet-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .fleet-engines, .fleet-gpu { grid-column: 1 / -1; }
  .fleet-num, .fleet-row.off .fleet-engines, .fleet-row.off .fleet-gpu { display: none; }
}
@media (max-width: 760px) { .fleet-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }

/* prices and credit on the API page */
.ap-table input { width: 110px; height: 32px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.ap-table td { vertical-align: middle; }
.ap-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.au-form .ms .dd-btn { height: 37px; }
.au-neg { color: var(--red); }

/* the model picker in the key dialog: a dropdown with boxes to tick */
:root:not([data-page="api"]):not([data-page="users"]) #api-dialog { display: none; }
.ms .dd-btn { height: 40px; padding: 0 10px 0 12px; border-radius: 10px; border-color: var(--border-strong); background: var(--card); font-size: 14px; }
.ms .ms-menu { left: 0; right: 0; width: auto; max-width: none; max-height: 340px; padding: 0; overflow: hidden; }
.ms .ms-menu:not([hidden]) { display: flex; flex-direction: column; }
.ms-search { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 42px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.cfield .ms-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: 0; font-size: 14px; color: var(--text); }
.ms-search input::-webkit-search-cancel-button { display: none; }
.ms-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 5px; }
.ms-item { position: relative; gap: 10px; padding: 8px 10px; width: 100%; border: 0; background: none; text-align: left; font: inherit; }
.ms-item[hidden] { display: none; }
.ms-item:hover { background: var(--panel); color: var(--text); }
.ms-item + .ms-item { margin-top: 1px; }
.cfield .ms-item input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.ms-box { flex: none; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: transparent; transition: background .12s, border-color .12s; }
.ms-item input:checked + .ms-box { background: var(--blue); border-color: var(--blue); color: #fff; }
.ms-item input:focus-visible + .ms-box { box-shadow: 0 0 0 3px var(--blue-soft); }
.ms-logo, .own-av { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text-2); }
.own-av { border-radius: 50%; font-size: 13px; font-weight: 600; background: var(--blue-soft); color: var(--blue-ink); }
.own-av.none { background: var(--panel-2); color: var(--muted); }
.ms-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ms-text b { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-text small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-text code { font-family: var(--mono); font-size: 11.5px; }
.ms-tag { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); color: var(--text-2); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.ms-tag.off { color: var(--muted); background: none; border: 1px dashed var(--border-strong); }
.ms-count { flex: none; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 600; text-align: center; }
.ms-none { padding: 14px 10px; color: var(--muted); font-size: 13px; text-align: center; }
.ms-foot { flex: none; display: flex; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }
.own-item .dd-check { flex: none; }
.own-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.own-form[hidden], .ms-search[hidden], .ms-list[hidden], .ms-foot[hidden] { display: none; }
.own-form b { font-size: 14px; }
.own-form small { color: var(--muted); font-size: 12px; }
.own-form-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.own-form-foot .btn { height: 34px; }
@media (max-width: 768px) {
  /* in the bottom sheet the list opens in place, so it can't be cut off by the sheet's edge */
  .ms .ms-menu { position: static; margin-top: 6px; box-shadow: none; animation: none; max-height: 300px; }
  .ms-tag { display: none; }
  .ms-tag:last-of-type { display: inline; }
}

/* a key's usage per model: the name never squeezes into a column of letters */
.ak-bym td, .ak-bym th { white-space: nowrap; }
.ak-bym td:first-child { min-width: 150px; }
.ak-bym td:first-child b { display: block; font-weight: 600; }
.ak-bym td:first-child small { display: block; font-size: 11.5px; }
/* the request log's model: the build that answered, the name customers used under it */
.ak-reqs .ak-table:not(.ak-bym) td:nth-child(2) b { display: block; font-weight: 600; white-space: nowrap; }
.ak-reqs .ak-table:not(.ak-bym) td:nth-child(2) small { display: block; font-size: 11.5px; }
.ak-reqs .ak-bym { min-width: 430px; }
@media (max-width: 768px) {
  /* on a phone each model is a block: its name, then its five numbers side by side */
  .ak-reqs .ak-bym { min-width: 0; display: block; }
  .ak-bym thead { display: none; }
  .ak-bym tbody { display: block; }
  .ak-bym tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; padding: 10px 12px; border-top: 1px solid var(--border); }
  .ak-bym tr:first-child { border-top: 0; }
  .ak-bym td { display: block; padding: 0; border: 0; font-size: 13px; font-weight: 600; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .ak-bym td:first-child { grid-column: 1 / -1; min-width: 0; }
  .ak-bym td[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
}

/* Administration: two columns that grow on their own, so opening an account's limits on the
   right leaves no hole under the prices on the left */
.api-admin-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* the price list fits its card: columns share the width, fields fill their column */
.ak-reqs .ap-table { min-width: 0; width: 100%; table-layout: fixed; }
.ap-table th:first-child, .ap-table td:first-child { width: 26%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-table th:nth-child(2), .ap-table td:nth-child(2) { width: 24%; text-align: left; }
.ap-table td small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-table th, .ap-table td { padding-left: 8px; padding-right: 8px; }
.ap-table input { width: 100%; min-width: 0; }
@media (max-width: 560px) { .ap-table th:first-child, .ap-table td:first-child { width: 22%; } .ap-table th:nth-child(2), .ap-table td:nth-child(2) { width: 26%; } .ap-table th { font-size: 11px; white-space: normal; } }
/* the activity log wraps its detail instead of scrolling sideways */
.ak-reqs .au-table { min-width: 0; }
.au-table td { white-space: nowrap; }
.au-table td:last-child { white-space: normal; overflow-wrap: anywhere; min-width: 140px; }
.au-table td:nth-child(4) { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
/* the button whose form is open looks pressed, so it reads as the way back */
.au-actions .btn.is-open { border-color: var(--blue-border); background: var(--blue-soft); color: var(--blue-ink); }

/* A key unfolded: the chart and the per-model table side by side, then its facts as a grid
   across the whole width (label above value), so no column is left half empty. */
.ak-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.ak-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 24px; }
.ak-dl > div, .ak-dl > div:first-child { display: block; padding: 9px 0; border-top: 1px solid var(--border); min-width: 0; }
.ak-dl > div.wide { grid-column: span 2; }
.ak-dl dt { font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
.ak-dl dd { text-align: left; font-size: 13px; }
.ak-dl > div[title] dt { text-decoration: underline dotted var(--border-strong); text-underline-offset: 3px; cursor: help; }
@media (max-width: 900px) { .ak-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ak-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the per-model table turns into blocks whenever its own column is narrow, not only on phones */
.ak-cols > div { container-type: inline-size; min-width: 0; }
@container (max-width: 440px) {
  .ak-reqs .ak-bym { min-width: 0; display: block; }
  .ak-bym thead { display: none; }
  .ak-bym tbody { display: block; }
  .ak-bym tr { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; padding: 10px 12px; border-top: 1px solid var(--border); }
  .ak-bym tr:first-child { border-top: 0; }
  .ak-bym td { display: block; padding: 0; border: 0; font-size: 13px; font-weight: 600; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
  .ak-bym td:first-child { grid-column: 1 / -1; min-width: 0; }
  .ak-bym td[data-l]::before { content: attr(data-l); display: block; font-size: 10.5px; font-weight: 500; color: var(--muted); }
}
/* small notes beside a request: how full the window was, a cut answer, a refusal */
.rq-note { margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; white-space: nowrap; background: var(--panel-2); color: var(--text-2); cursor: help; }
.rq-note.warn { background: var(--amber-soft); color: var(--amber-ink); }
.rq-note.bad { background: var(--red-soft); color: var(--red); }

/* ================================================================ ribbon
   The public site's calm Ribbon page, as an app: warm paper, ink, one condensed grotesque with a
   serif italic beside it, hairlines instead of boxes, ink pills for what is chosen, and the satin
   ribbon behind each page's headline (ribbon.js). Colours are the tokens at the top. */
/* blue belongs to the ribbon only: bars, dots, links and marks are ink, in both themes */
:root, :root[data-theme="dark"] { --blue: var(--text); --blue-hover: var(--text); --blue-ink: var(--text); }
:root[data-theme="dark"] { --blue-soft: #1c1c1f; --blue-line: #29292d; --blue-border: #3a3a3f; }
/* the log viewer is the engine cards' log tail, larger: the same panel, hairline and inks */
:root, :root[data-theme="dark"] { --log-bg: var(--panel); --log-border: var(--line); --log-text: var(--text-2); --log-ts: var(--faint); --log-info: var(--text); --log-warn: var(--amber-ink); --log-err: var(--red); --log-url: var(--green); --log-thumb: color-mix(in srgb, var(--text) 28%, transparent); }
:root {
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Bricolage Grotesque", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r1: #2a3bff; --r2: #ff3d5a; --r3: #ffb000;
  --ink: var(--text);
  --on-ink: var(--bg);
  --line: color-mix(in srgb, var(--text) 13%, transparent);
  --g: clamp(1.1rem, 3.6vw, 3.4rem);
}
body { font-family: var(--sans); }
kbd, .tail-empty, .log-empty { font-family: var(--sans); }
.chart-plot .ytick, .chart-plot .xtick { font-family: var(--mono); }

/* ---- the bar across the top: the mark, the pages as plain words, pills on the right */
.topbar { padding: 1.1rem var(--g); gap: 1rem; }
.mark { display: inline-flex; align-items: center; gap: .45rem; font: 700 1.35rem/1 var(--sans); letter-spacing: -.04em; color: var(--text); text-decoration: none; }
.mark i { width: .7rem; height: .7rem; border-radius: 50%; background: linear-gradient(135deg, var(--r1), var(--r2) 60%, var(--r3)); display: block; flex: none; }
.server-btn { border-radius: 99px; background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); }
.server-btn:hover { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--text); }
.pagenav { background: none; border: 0; padding: 0; border-radius: 0; grid-auto-columns: auto; column-gap: clamp(.6rem, 1.9vw, 1.9rem); }
.pagenav button { height: auto; padding: .4rem 0; border-radius: 0; border-bottom: 1.5px solid transparent; font-size: .92rem; font-weight: 400; color: var(--text); flex: none; }
.pagenav button:hover, .pagenav button[aria-current="page"] { border-bottom-color: currentColor; }
.pagenav-ink { display: none; }
@media (min-width: 1361px) { .pagenav button [data-icon] { display: none; } }
.global-search { border-radius: 99px; background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.global-search:focus-within { border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--text); }
.theme-btn { border-radius: 50%; background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.account-btn { border-left: 0; padding-left: 0; }
.lock-tile { border-radius: 50%; background: var(--ink); color: var(--on-ink); border-color: transparent; }
.account-btn:hover .lock-tile { background: var(--ink); }
/* the bar is the front page's bar: same height, same mark, the pages in the middle, one ink pill at the right */
@media (min-width: 1025px) {
  .topbar { height: 4.1rem; padding: 0 var(--g); gap: .8rem; }
  .mark { font-size: 1.4rem; gap: .5rem; }
  .mark i { width: .8rem; height: .8rem; }
  .pagenav { position: absolute; left: 50%; transform: translateX(-50%); column-gap: clamp(1rem, 3vw, 2.2rem); }
  .pagenav button [data-icon] { display: none; }
  .pagenav button span:not([data-icon]) { display: inline; }
  /* nothing else sits in the bar: the theme switch and the search are in the account's menu, the
     server switch shows only when there is more than one server, and the search field takes the
     middle of the bar while it is in use (Ctrl K) */
  #theme-btn { display: none; }
  .server-switch:has(#server-count[hidden]) { display: none; }
  .global-search { position: absolute; left: 50%; transform: translateX(-50%); width: min(34rem, 42vw); height: 2.1rem; opacity: 0; pointer-events: none; }
  .global-search:focus-within { opacity: 1; pointer-events: auto; }
  .topbar:has(.global-search:focus-within) .pagenav { visibility: hidden; }
  .account-btn { height: 2.1rem; padding: 0 1.1rem; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 600 .86rem/1 var(--sans); box-shadow: 0 10px 24px rgba(14, 14, 16, .22); }
  .account-btn .lock-tile, .account-text small { display: none; }
  .account-text strong { font: inherit; }
}
/* a phone: the server's name keeps its room beside the four round buttons */
@media (max-width: 1024px) {
  .topbar { padding: .75rem 1rem; gap: .5rem; }
  .server-btn { gap: 6px; }
  .server-btn .sdot { flex: none; }
  .server-btn .chev { display: none; }
}
/* five round buttons since the Users page got its own: on a phone they give the name its room back */
@media (max-width: 480px) { .topbar { gap: .35rem; } .theme-btn, .lock-tile { width: 32px; height: 32px; } }
/* History has its own tab on a phone; .history's display used to bring it back on every tab */
@media (max-width: 1024px) { :root:not([data-tab="history"]) .history[data-panel] { display: none; } }
/* a narrow phone has no room beside the headline: the ribbon would run through the words */
@media (max-width: 640px) { .page-head canvas.ribbon, .pt-hero canvas.ribbon { display: none; } }
/* pinned like the front page's bar; paper shows through so rows slide under it */
@media (min-width: 1025px) {
  .topbar { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); }
  .op-banner { top: calc(4.1rem + 8px); padding: 0 var(--g) 8px; }   /* under the pinned bar, not over it */
}

/* ---- a page opens like the site does: a label on paper, one line of headline, the ribbon behind */
.layout { padding: 0 var(--g) 2rem; column-gap: clamp(1.6rem, 3vw, 3.2rem); row-gap: 0; }
.page { padding: 0 var(--g) 6rem; }
.layout > .dash-head { grid-column: 1 / -1; }
.page-head { position: relative; isolation: isolate; overflow: hidden; align-items: flex-end; margin: 0 calc(-1 * var(--g)); padding: clamp(4.5rem, 10vw, 8.5rem) var(--g) clamp(1.4rem, 3vw, 2.2rem); border-bottom: 1px solid var(--line); }
canvas.ribbon { display: block; }
/* the ribbon keeps to the right of the band, so it never runs through the headline */
.page-head > canvas.ribbon, .pt-hero > canvas.ribbon { position: absolute; inset: 0 0 0 auto; width: 58%; height: 100%; z-index: -1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%); mask-image: linear-gradient(90deg, transparent, #000 22%); }
@media (max-width: 1024px) { .page-head > canvas.ribbon, .pt-hero > canvas.ribbon { width: 45%; opacity: .8; } }
.kicker { display: inline-block; font: 400 .72rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--bg); color: var(--text); padding: .35rem .7rem; border-radius: 99px; margin: 0 0 .9rem; }
.page-head h2, .pt-hero h2 { font: 600 clamp(2.6rem, 6.4vw, 6rem)/.92 var(--sans); font-stretch: 88%; letter-spacing: -.04em; }
.page-head h2 i, .pt-hero h2 i, .card h2 i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.page-head .sub { margin-top: 1rem; font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--text); max-width: 32rem; }
.page-head .btn-ghost, .page-head .seg-range { background: var(--bg); }
/* one footer on every page: the mark, one line, the year, on paper behind a hairline */
.foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; margin-top: 3rem; padding: 1.5rem var(--g) 1.7rem; border-top: 1px solid var(--line); font: 400 .72rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.foot .mark { justify-self: start; font-size: 1.05rem; gap: .4rem; text-transform: none; letter-spacing: -.04em; }
.foot .mark i { width: .6rem; height: .6rem; }
.foot .foot-copy { justify-self: end; }
@media (max-width: 640px) { .foot { grid-template-columns: 1fr auto; } .foot .foot-line { display: none; } }
.fleet-add { margin-top: 1rem; }
@media (max-width: 1024px) { .dash-head, .dash-foot { display: none; } .page-head { padding-top: 3.2rem; } }

/* ---- the strip of facts under the headline: a label, the number, a line about it */
.api-stats, .fleet-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; margin: 0 calc(-1 * var(--g)) clamp(1rem, 2vw, 1.6rem); }
.astat, .fleet-stat { display: block; background: transparent; border: 0; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: 1.2rem 1.4rem 1.4rem var(--g); }
.astat:first-child, .fleet-stat:first-child { border-left: 0; }
.astat-ic, .stat-icon { display: none; }
.astat > div { display: block; }
.astat small, .fleet-stat > small, .stat-label { display: block; font: 400 .72rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: normal; }
.astat b, .fleet-stat b, .stat-value { display: block; font: 600 clamp(1.6rem, 2.9vw, 2.6rem)/1.1 var(--sans); font-stretch: 90%; letter-spacing: -.03em; margin-top: .45rem; }
.astat em { display: block; color: var(--muted); font-size: .86rem; margin-top: .3rem; white-space: normal; }
.stat-value small { font: inherit; color: var(--r2); margin-left: .25em; }
/* Servers page: "of 8", "kW" beside a figure are a quiet unit, not a second figure in the accent colour. */
.fleet-stat b small { display: inline; font: 500 .5em/1 var(--sans); letter-spacing: 0; color: var(--muted); margin-left: .3em; }
.stat-row { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0; align-items: stretch; border-top: 1px solid var(--line); margin-top: 1.2rem; padding-top: 0; }
.stat { display: block; border: 0; border-left: 1px solid var(--line); padding: 1.1rem 1rem 0 1.2rem; }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-kv .bar { height: 6px; margin-top: .7rem; }

/* ---- sections, not boxes */
.card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: clamp(1.6rem, 3vw, 2.6rem) 0; }
.col-left > .card:first-child, .col-right > .card:first-child { border-top: 0; }
.page-api .card { padding-left: 0; padding-right: 0; }
.card h2, .page-api h3, .api-section { font: 600 clamp(1.6rem, 2.3vw, 2.2rem)/1 var(--sans); font-stretch: 88%; letter-spacing: -.04em; text-transform: none; color: var(--text); }
.card h2 .muted-title, .card h2 small { font: 400 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); vertical-align: middle; }
.card h2 [data-icon] { display: none; }
.api-section { font-size: clamp(1.8rem, 3.4vw, 3rem); margin: clamp(2rem, 5vw, 4rem) 0 .4rem; }
.modal-head h3, .cfg-head h3, .engine-head h3 { font-weight: 600; font-stretch: 90%; letter-spacing: -.03em; }
.sub { color: var(--muted); }

/* ---- buttons, chips, fields */
.btn, .btn-sm { border-radius: 99px; font-weight: 500; }
.btn-primary { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.btn-primary:hover:not(:disabled) { background: var(--ink); box-shadow: 0 8px 20px rgba(14, 14, 16, .2); }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-ghost:hover { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }
/* over the ribbon it stays paper, hovered or not, and its ring is the border itself: an inset ring
   left a rim of paper outside it */
.page-head .btn-ghost, .page-head .btn-ghost:hover { background: var(--bg); border: 1.5px solid var(--ink); box-shadow: none; }
.btn-sm { background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.btn-sm:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text); }
.btn-sm.on { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.badge { border-radius: 99px; font-family: var(--mono); font-weight: 500; letter-spacing: .06em; }
.search { border-radius: 99px; background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.search:focus-within { background: transparent; border-color: transparent; box-shadow: inset 0 0 0 1.5px var(--text); }
.seg-range { border: 0; padding: 3px; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
.seg-range button { border-radius: 99px; }
.seg-range button.on { background: var(--ink); color: var(--on-ink); box-shadow: none; }

/* ---- the launcher: one row per model, a hairline between */
.preset-list { gap: 0; }
.preset { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1rem 0; }
.preset:first-child { border-top: 0; }
.preset:hover { transform: none; box-shadow: none; }
.preset.is-running, .preset.is-busy, .preset.is-failed { border-color: var(--line); box-shadow: none; background: transparent; }
.preset-name { font-weight: 600; font-size: 1.2rem; letter-spacing: -.02em; }
.preset-meta { color: var(--muted); }

/* ---- what is left of the boxes: a hairline, no fill */
.gpu-group, .gpu, .engine, .cfg-item { background: transparent; border-color: var(--line); border-radius: 14px; }
.tile { background: transparent; box-shadow: inset 0 0 0 1px var(--line); border-radius: 14px; }
.tile .tv, .st-value, .chart-now, .test-stats b { font-weight: 600; font-stretch: 90%; letter-spacing: -.03em; }
.chart-group { font: 400 .72rem/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); }
.log-output { border: 1px solid var(--log-border); border-radius: 14px; }
.log-output .lv, .h-log .lv { font-weight: 700; }
.log-output .hl { color: inherit; }
.log-output::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background-clip: padding-box; }
.hday { background: var(--bg); font-family: var(--mono); letter-spacing: .06em; color: var(--muted); }

/* ---- density. This is a tool people keep open: the site's type, hairlines and ribbon stay, but
   the headline band is short, sections sit side by side and nothing is spaced like a poster.
   Phones keep their own tabbed layout (max-width 1024px, above). */
.page-head { padding: clamp(2rem, 3.6vw, 3.2rem) var(--g) 1rem; }
.page-head h2, .pt-hero h2 { font-size: clamp(2rem, 3.4vw, 3.2rem); line-height: 1; }
.page-head .sub { margin-top: .5rem; font-size: .95rem; color: var(--muted); max-width: 44rem; }
.kicker { margin-bottom: .55rem; }
.astat, .fleet-stat { padding-top: .8rem; padding-bottom: .9rem; }
.astat b, .fleet-stat b, .stat-value { font-size: clamp(1.3rem, 2vw, 1.9rem); margin-top: .25rem; }
.astat em { margin-top: .1rem; }
.card { padding: 1.3rem 0 1.5rem; }
.card h2, .page-api h3 { font-size: clamp(1.35rem, 1.7vw, 1.7rem); }
.api-section { font-size: clamp(1.5rem, 2.2vw, 2rem); margin: 1.6rem 0 .2rem; }
@media (min-width: 1025px) {
  .layout { column-gap: clamp(1.4rem, 2.4vw, 2.6rem); }
  .layout > .dash-facts { grid-column: 1 / -1; margin: 0 calc(-1 * var(--g)); border-top: 0; border-bottom: 1px solid var(--line); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dash-facts .stat { padding: .8rem 1.4rem .9rem var(--g); }
  .dash-facts .stat:first-child { padding-left: var(--g); }
  .launcher .search { margin-top: .9rem; }

  /* engines and GPUs: cells divided by hairlines, two engines side by side */
  .engine-grid { gap: 0 2rem; }
  .engine { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.1rem 0; }
  /* each running engine in its own container, like a server's row on the Servers page */
  .engine-grid { gap: 1rem; }
  .engine { border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--text) 2.5%, transparent); padding: 1.1rem 1.2rem 1rem; }   /* a tone you barely see */
  .engine .tail { background: var(--bg); }
  .engine .tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .engine .tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engine .tile { padding: .7rem .6rem; }
  .tiles, .tiles-3, .tiles-2 { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 0; }
  .tiles + .tiles { border-top: 0; }
  .tile { box-shadow: none; border-radius: 0; border-left: 1px solid var(--line); padding: .7rem .8rem; }
  .tile:first-child { border-left: 0; padding-left: 0; }
  .tile .ticon { display: none; }
  .tile .tl, .engine-meta .k { font: 400 .68rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .gpu-groups { gap: 0 2rem; }
  .gpu-group { border: 0; border-radius: 0; padding: 0; }
  .gpu { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: .7rem .6rem .6rem 0; }
  .sys-tile { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: .8rem .6rem .8rem 0; }
}

@media (max-width: 1024px) {
  .layout > .dash-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 0; margin: 0 0 .6rem; padding: 0; }
  .layout > .dash-facts .stat { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: .9rem .8rem .9rem 0; }
  .layout > .dash-facts .stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: .9rem; }
  :root[data-tab="overview"] .layout > .dash-facts { display: grid; }
}

/* ---- one paper and one ink: fields, tables and menus sit on the page's own colour behind a
   hairline, and whatever is chosen is ink, never a block of blue */
.log-tab { border-radius: 99px; background: transparent; border-color: var(--line); }
.log-tab.active { background: var(--ink); border-color: var(--ink); color: var(--on-ink); box-shadow: none; }
.log-tab.active small { color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.log-tab.active .ticon { background: var(--on-ink); }
.log-title-icon { display: none; }
.srv.active .srv-icon, .ob-steps li.now, .ms-item input:checked + .ms-box, .ms-count { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ob-steps li.now { box-shadow: none; }
.srv.active, .seg-opt.on, .cfg-item.open { background: transparent; border-color: var(--text); color: var(--text); }
.ap-table input.ap-name { width: 100%; }
.ak-reqs .ap-table th:first-child, .ak-reqs .ap-table td:first-child { width: 24%; }
.ak-reqs .ap-table th:nth-child(2), .ak-reqs .ap-table td:nth-child(2) { width: 26%; }
.cfg-head h3 { font-size: clamp(1.35rem, 1.7vw, 1.7rem); font-stretch: 88%; letter-spacing: -.04em; line-height: 1; }
input, select, textarea { accent-color: var(--ink); }
.toggle input:checked + .track { background: var(--ink); }
.toggle input:checked + .track .knob { background: var(--on-ink); }
.tab-badge { background: var(--ink); color: var(--on-ink); }

/* ---- the sign-in screens: the ribbon moves behind the form */
canvas.login-ribbon { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.card.login, .card.pt-login { position: relative; z-index: 1; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 22px; box-shadow: none; padding: 28px; }
.login .login-brand svg, .pt-login .pt-brand svg { display: none; }
.login .login-brand h1, .pt-login .pt-brand h1 { font: 700 2rem/1 var(--sans); letter-spacing: -.04em; display: flex; align-items: center; gap: .5rem; }
.login .login-brand h1::before, .pt-login .pt-brand h1::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: linear-gradient(135deg, var(--r1), var(--r2) 60%, var(--r3)); }
.login .sub, .pt-login .sub { font-size: 15px; color: var(--muted); margin-top: 8px; }
.login input, .pt-login input { border-radius: 12px; background: var(--bg); }
.login .btn, .pt-login .btn { height: 48px; font-size: 15px; }
.menu a.menu-item { color: var(--text); text-decoration: none; }
.menu-item kbd { margin-left: auto; }

/* ---- the scrollbar is the page's own: a thin ink pill on paper, no arrows, no white gutter */
html { scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 12px; height: 12px; background: transparent; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 28%, transparent); border: 3px solid transparent; border-radius: 99px; background-clip: padding-box; min-height: 40px; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--text) 55%, transparent); }
::-webkit-scrollbar-thumb:active { background-color: var(--text); }
/* where the pill above can be drawn, the older per-list colours step aside (they bring the arrows back) */
@supports selector(::-webkit-scrollbar) { .log-output, .hist-list { scrollbar-color: auto; scrollbar-width: auto; } }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 35%, transparent) transparent; } }

/* ---- hovering lifts nothing off the page: a cell's hairline turns to ink */
.gpu, .sys-tile { transition: border-color .2s; }
.gpu:hover, .sys-tile:hover { transform: none; box-shadow: none; background: none; border-color: var(--text); }
.brand:hover .brand-logo, .preset:hover .model-icon { transform: none; }
/* the tooltip: an ink label, placed by app.js */
.tip { position: fixed; top: 0; left: 0; z-index: 1000; max-width: 22rem; padding: .4rem .7rem; border-radius: 9px; background: var(--ink); color: var(--on-ink); font: 500 .78rem/1.35 var(--sans); pointer-events: none; box-shadow: 0 8px 20px rgba(14, 14, 16, .18); animation: tip-in .14s var(--ease); }
.tip[hidden] { display: none; }
/* a label with several facts: a small heading, one fact per row, numbers in bold (tip.js) */
.tip.tip-rows { display: grid; gap: .2rem; min-width: 10rem; padding: .6rem .85rem .65rem; white-space: normal; font-weight: 400; font-variant-numeric: tabular-nums; }
.tip.tip-rows[hidden] { display: none; }
.tip-head { font: 400 .64rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; opacity: .62; margin-bottom: .1rem; }
.tip-rows b { font-weight: 700; }
.tip-kv { display: flex; justify-content: space-between; gap: 1.6rem; }
.tip-kv > span:first-child { opacity: .7; }
/* a row that belongs to the one above it (who an engine is answering): set in, with a rule down its side */
.tip-kv.tip-sub { margin-left: .35rem; padding-left: .6rem; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); font-size: .72rem; }
.tip-note { font-size: .7rem; line-height: 1.35; opacity: .62; margin-top: -.1rem; }
@keyframes tip-in { from { opacity: 0; } }

/* the swap dialog: which GPU group a model goes to, when it fits more than one */
.place { margin: 14px 0 4px; }
.place-label { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.place-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.place-opt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--card); text-align: left; color: var(--text); transition: border-color .15s, background .15s, box-shadow .15s; }
.place-opt b { font-size: 14px; font-weight: 600; }
.place-opt small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-opt:hover { border-color: var(--blue-border); }
.place-opt.on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px var(--blue-soft); }
.place-opt.on b { color: var(--blue-ink); }
.place-opt:disabled { opacity: .55; cursor: default; }
.place-opt:disabled:hover { border-color: var(--border-strong); }
.preset-meta .fam-on { color: var(--green-ink, var(--text)); }

/* a running model's line: "Running", or with Shift held over it, "Another" (a second copy elsewhere) */
.btn-more { display: none; }
.shift-held .preset:hover .btn-more { display: inline-flex; }
.shift-held .preset:hover .btn-running { display: none; }
@media (hover: none) { .btn-more { display: inline-flex; } .btn-running:has(+ .btn-more) { display: none; } }   /* no Shift on a phone */

/* the API page's model list: models that are not running are listed too, greyed */
.api-model.is-off { opacity: .6; }
.api-model.is-off .api-model-dot { background: var(--muted); box-shadow: none; animation: none; }
.api-model-name { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-left: 4px; }

.tip { white-space: pre-line; }   /* a label may list several things, one per line */

.pw-gen { align-self: flex-start; margin-top: 2px; font-size: 12.5px; }

/* No GPU acceleration (ribbon.js sets .soft): a blur behind a bar or a dialog is recomputed on the CPU for every frame scrolled. */
.soft .topbar, .soft .modal-backdrop, .soft .tabbar { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.soft .topbar { background: var(--bg) !important; }

/* the Database card on the API page */
.db-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.db-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.db-row b { display: block; font-size: 14px; }
.db-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.db-dot { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.db-dot.ok { background: var(--green); }
.db-dot.bad { background: var(--red); }
.db-result { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 13px; border: 1px solid var(--border); }
.db-result.ok { background: var(--green-soft, var(--panel)); }
.db-result.bad { background: var(--red-soft); border-color: var(--red-border); }

/* the API page: a key list wider than its column scrolls inside its own card and never runs under the next one */
.api-keys { overflow-x: auto; }
.api-model-name { display: block; margin: 1px 0 0; }      /* the customers' name on its own line, not run into the details */
.api-model small { display: block; overflow-wrap: anywhere; }

.tip-tap { max-width: calc(100vw - 16px); }   /* the label a tap shows on a phone */

/* ---- a narrow engine card keeps its buttons on the title's line: icons only below this width */
@container (max-width: 620px) { .engine .hide-narrow { display: none; } }

/* ---- the Acrobat extension's floating button (a host it appends to <html>) has no place on these pages */
#aiFabShadowRoot, html > [data-fab-type] { display: none !important; }

/* ---- the status page (/status): ninety days of each part of the service, then what went wrong.
   Its colours are the mark's own: blue is good (a lighter tint of it: ninety full-strength bars
   shout), amber a lesser fault, red a serious one. */
.sp-body { --sp-good: color-mix(in srgb, var(--r1) 52%, var(--bg)); }
.sp-signin { display: inline-flex; align-items: center; height: 2.1rem; padding: 0 1.1rem; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 600 .86rem/1 var(--sans); text-decoration: none; box-shadow: 0 10px 24px rgba(14, 14, 16, .22); }
.sp-main { padding: 0 var(--g) 1rem; }
.sp-main .page-head h2::before { content: ""; display: inline-block; width: .34em; height: .34em; margin-right: .28em; border-radius: 50%; background: var(--sp-good); vertical-align: .12em; }
[data-state="degraded"] .sp-main .page-head h2::before { background: var(--r3); }
[data-state="outage"] .sp-main .page-head h2::before { background: var(--r2); }
[data-state="maintenance"] .sp-main .page-head h2::before { background: var(--muted); }
.sp-parts { max-width: 62rem; margin: 0 auto; padding-top: 1.6rem; }
.sp-part { padding: 1.3rem 0 1.2rem; border-bottom: 1px solid var(--line); }
.sp-part header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.sp-part h3 { font: 600 1.2rem/1.2 var(--sans); letter-spacing: -.02em; }
.sp-state { font: 400 .72rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--r1) 72%, var(--text)); }
.sp-state.s-down { color: var(--r2); }
.sp-state.s-maint { color: var(--muted); }
.sp-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 2.4rem; }
.sp-bars i { border-radius: 2px; background: var(--sp-good); transition: transform .15s; }
.sp-bars i:hover { transform: scaleY(1.12); }
.sp-bars i.none { background: var(--track); }
.sp-bars i.warn { background: var(--r3); }
.sp-bars i.bad { background: var(--r2); }
.sp-bars i.maint { background: var(--muted); }
.sp-part footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .6rem; font: 400 .68rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sp-part footer b { font-weight: 400; color: var(--text); }
.sp-empty, .sp-none { color: var(--muted); font-size: .95rem; }
.sp-past { max-width: 62rem; margin: 0 auto; padding-top: 3rem; }
.sp-past > h3 { font: 600 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--sans); font-stretch: 88%; letter-spacing: -.04em; margin-bottom: .6rem; }
.sp-past > h3 i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.sp-day { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .3rem 1.5rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.sp-day > div { display: grid; gap: .35rem; }
.sp-day h4, .sp-day p { margin: 0; }
.sp-day h4 { font: 400 .72rem/1.9 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.sp-inc { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sp-inc b { font-weight: 600; }
.sp-inc b::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%; background: var(--r2); }
.sp-inc.maint b::before { background: var(--muted); }
.sp-inc span { font: 400 .78rem/1.4 var(--mono); color: var(--muted); }
.foot a:not(.mark) { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
@media (max-width: 640px) { .sp-bars { gap: 1px; height: 2rem; } .sp-day { grid-template-columns: 1fr; } }
#page-users .api-admin, #page-insights .api-admin { grid-template-columns: minmax(0, 1fr); }

/* Models and prices: one block per model (its name for customers, what it is, its four prices). */
.ap-list { display: flex; flex-direction: column; gap: 8px; }
.ap-item { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.25fr); align-items: center; gap: 12px 20px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.ap-item.is-rest { border-style: dashed; background: none; }
.ap-item.is-off .ap-logo { opacity: .5; }
.ap-head { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.ap-logo { flex: none; }
.ap-id { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 140px; }
.ap-id b { font-size: 14px; }
.ap-id small { color: var(--muted); font-size: 11.5px; overflow-wrap: anywhere; }
.ap-id input.ap-name { height: 30px; padding: 0 8px; margin-left: -8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; width: 100%; min-width: 0; }
.ap-id input.ap-name:hover { border-color: var(--border); }
.ap-id input.ap-name:focus { border-color: var(--border-strong); background: var(--card); outline: 0; }
.ap-id input.ap-name::placeholder { font-weight: 400; color: var(--muted); }
.ap-prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ap-price { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ap-price > span:first-child { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.ap-money { display: flex; align-items: center; height: 32px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--card); padding: 0 7px; gap: 3px; min-width: 0; }
.ap-money:focus-within { border-color: var(--blue); }
.ap-money i, .ap-money em { font-style: normal; font-size: 11.5px; color: var(--muted); white-space: nowrap; flex: none; }
.ap-money input { flex: 1; min-width: 0; width: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; outline: 0; padding: 0; -moz-appearance: textfield; }
.ap-money input::-webkit-outer-spin-button, .ap-money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 900px) { .ap-item { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ap-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Live log: the gateway's own lines say whose request the engine is answering. */
.ln .lv-api { color: var(--blue-ink); }
.ln .ln-who { font-weight: 600; color: var(--text); }

/* Insights */
.in-table td small { display: block; font-size: 11.5px; }
.in-table td { vertical-align: top; }
.in-fails td:first-child { white-space: normal; min-width: 220px; }
.in-spark { display: flex; align-items: flex-end; gap: 2px; height: 30px; min-width: 150px; }
.in-spark i { flex: 1; min-height: 2px; background: var(--c1, var(--blue)); border-radius: 2px 2px 0 0; opacity: .85; }
.in-cap { padding: 12px 0; border-top: 1px solid var(--border); }
.in-cap:first-of-type { border-top: 0; }
.in-cap-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 13.5px; }
.in-hours { display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; height: 46px; }
.in-hours i { height: var(--h); border-radius: 3px 3px 0 0; background: var(--green); }
.in-hours i.none { background: var(--border); }
.in-hours i.warm { background: var(--amber, #d97706); }
.in-hours i.hot { background: var(--red); }
.in-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted); }
.in-days th, .in-days td { text-align: center; padding-left: 4px; padding-right: 4px; min-width: 30px; }
.in-days th:first-child, .in-days td:first-child { text-align: left; white-space: nowrap; }
.in-dot { display: inline-block; min-width: 18px; padding: 0 4px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 18px; }
.in-dot.bad { background: var(--red-soft); color: var(--red); }
.in-dot.warn { background: var(--amber-soft); color: var(--amber-ink); }

@media (max-width: 900px) { .ak-gsum .cfg-caret { display: inline-flex; position: absolute; right: 12px; top: 14px; } .ak-gsum { position: relative; } }

.in-plan { display: flex; flex-direction: column; margin-bottom: 10px; }
.in-plan-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 2px; border-top: 1px solid var(--border); font-size: 13.5px; }
.in-plan-row:first-child { border-top: 0; }
.in-plan-row.is-off > :not(.in-plan-act) { opacity: .5; }
.in-plan-act { margin-left: auto; display: flex; gap: 6px; }
.in-plan-act .btn, .in-form .btn { height: 32px; font-size: 12.5px; padding: 0 10px; }
.in-form { margin: 0 0 18px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.in-form select, .in-form input { height: 37px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); color: var(--text); font: inherit; font-size: 13px; }

.in-tabs { flex-wrap: wrap; align-self: flex-start; margin-bottom: 4px; }
#page-insights section[hidden] { display: none; }
#in-warn:empty { display: none; }
#in-warn code { font-size: 12px; }

.api-code-head .seg-range { flex-wrap: wrap; border-radius: 14px; }
.api-code + .api-note { margin-top: 8px; }

/* Insights: the warning and the tabs are not cards, so they bring no space of their own under the page head. */
#page-insights .api-admin-col { padding-top: 20px; }
#page-insights #in-warn .api-paused { margin: 0; }
#page-insights .in-tabs { margin: 2px 0 6px; }

.in-reqs tbody tr[data-in-row] { cursor: pointer; }
.in-reqs tbody tr.is-open > td { background: var(--panel); }
.in-detail > td { background: var(--panel); white-space: normal; padding: 12px 14px 16px; }
.in-line { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--border); margin-bottom: 6px; }
.in-line i.read, .in-line-key i.read { background: var(--amber, #d97706); }
.in-line i.write, .in-line-key i.write { background: var(--green); }
.in-line-key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.in-line-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }
.in-bars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; align-items: end; height: 90px; margin: 4px 0 8px; }
.in-bars span { display: flex; align-items: flex-end; gap: 1px; height: 100%; }
.in-bars i { flex: 1; min-height: 1px; border-radius: 2px 2px 0 0; }
.in-bars i.income, .in-line-key i.income { background: var(--green); }
.in-bars i.power, .in-line-key i.power { background: var(--amber, #d97706); }

/* Accounts: columns like the key list; what can be done with one shows under it when it is opened. */
.au-row { display: grid; grid-template-columns: minmax(150px, 1.6fr) 96px 70px minmax(130px, 1.2fr) minmax(130px, .9fr) minmax(90px, .7fr) 28px; align-items: center; gap: 12px; }
.au-row > .au-actions, .au-row > .au-pw, .au-row > .au-limits, .au-row > .au-facts, .au-row > .au-form { grid-column: 1 / -1; }
.au-head { padding: 0 2px 8px; font-size: 11px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; border-top: 0; }
.au-head + .au-row { border-top: 1px solid var(--border); }
.au-owner .badge { grid-column: 2; justify-self: start; }
.au-col { min-width: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.au-col small { color: var(--muted); font-size: 12px; }
.au-credit small { margin-left: 7px; }
.au-use .bar { display: block; height: 4px; margin-top: 5px; max-width: 120px; }
.au-facts { color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.au-row.open { grid-template-columns: minmax(150px, 1.6fr) 96px 70px minmax(130px, 1.2fr) minmax(130px, .9fr) minmax(90px, .7fr) 28px; }
@media (max-width: 1024px) {
  .au-row { grid-template-columns: minmax(0, 1fr) auto 28px; }
  .au-head { display: none; }
  .au-row > .au-col:not([data-l="Role"]) { display: none; }
  .au-row.open > .au-col:not([data-l="Role"]) { display: block; grid-column: 1 / -1; }
  .au-row.open > .au-col:not([data-l="Role"])::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12px; }
}
/* Old model names */
.ap-old { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.ap-old-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ap-old-row input, .ap-old-row select { height: 34px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--card); color: var(--text); font: inherit; font-size: 13px; min-width: 0; }
.ap-old-row input[type=text] { flex: 1; min-width: 160px; font-family: var(--mono); }
/* Long lists scroll inside their card instead of stretching the page. */
.api-models, .ap-list { max-height: 440px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; }

/* Selects, everywhere: one look closed, and where the browser allows it (Chromium's customizable select) a
   list of our own instead of the system's. Elsewhere the system list stays, with the same closed control. */
select { -webkit-appearance: none; appearance: none; padding-right: 30px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 9px center !important; background-size: 14px !important; }
select:hover { border-color: var(--border-strong); }
select:focus-visible { outline: 2px solid var(--blue-border); outline-offset: 1px; }
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; }
  select::picker-icon { display: none; }
  ::picker(select) { margin-top: 5px; padding: 5px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--card); color: var(--text);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .16); min-width: anchor-size(width); max-height: min(520px, 80vh); overflow-y: auto; font-size: 13px;
    scrollbar-width: none;      /* tall enough for every list we have; a longer one scrolls by wheel or keys, without the system's bar and arrows */
    opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease, overlay .14s allow-discrete, display .14s allow-discrete; }
  ::picker(select):popover-open { opacity: 1; transform: none; }
  @starting-style { ::picker(select):popover-open { opacity: 0; transform: translateY(-4px); } }
  select option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
  select option:hover, select option:focus-visible { background: var(--panel); outline: 0; }
  select option:checked { background: var(--blue-soft); color: var(--blue-ink); font-weight: 600; }
  select option::checkmark { content: "✓"; order: 2; margin-left: auto; font-size: 12px; color: var(--blue-ink); }
  select option:disabled { opacity: .45; cursor: default; }
}

.au-secret { display: block; padding: 10px 12px; border-radius: 8px; background: var(--card); border: 1px solid var(--border-strong); font-family: var(--mono); font-size: 15px; letter-spacing: .06em; user-select: all; overflow-wrap: anywhere; }

/* An opened account: what is known about it, under its buttons. */
.au-row > .au-detail { grid-column: 1 / -1; padding: 4px 0 6px; }
.au-detail h4 { margin: 16px 0 7px; font-size: 13px; }
.au-detail .ak-reqs { max-height: 300px; overflow: auto; }
.au-dtable td small { display: block; font-size: 11.5px; }
.au-dtable tr.is-void td { opacity: .55; }

/* Users page: figures, then accounts; every key in one list is the second tab. */
#page-users .api-admin-col { padding-top: 6px; }
#page-users section[hidden] { display: none; }
#us-stats:empty { display: none; }
.au-dtable .link-btn { font-weight: 600; font-size: inherit; padding: 0; text-align: left; }

/* A link dressed as a button ("Open their page") looks like the buttons beside it: no underline, their colour. */
a.btn, a.btn:visited { text-decoration: none; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
a.btn.btn-primary, a.btn.btn-primary:visited { color: var(--on-ink, #fff); }

/* A deleted key: still listed with what it used, plainly not in use. */
.ak.is-void .ak-sum { opacity: .6; }
.ak.is-void .ak-name b { text-decoration: line-through; text-decoration-color: var(--muted); }

/* A key that was deleted, or whose secret was replaced: said beside its name, and its row tinted. */
.ak-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; text-decoration: none; vertical-align: 1px; }
.ak-tag.gone { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-border, transparent); }
.ak-tag.swapped { background: var(--amber-soft); color: var(--amber-ink); border: 1px solid var(--amber-border, transparent); }
.ak.is-void { background: color-mix(in srgb, var(--red-soft) 55%, transparent); border-left: 3px solid var(--red); }
.ak.is-void .ak-sum { opacity: 1; }
.ak.is-void .ak-sum > :not(.ak-name):not(.ak-state) { opacity: .55; }
.ak.is-void .ak-name b { text-decoration: none; }
.ak.is-void .ak-name b > :first-child, .ak.is-void .ak-name { color: var(--text-2); }
.ak.is-rotated { border-left: 3px solid var(--amber, #d97706); background: color-mix(in srgb, var(--amber-soft) 35%, transparent); }
.au-dtable tr.is-void td { opacity: 1; background: color-mix(in srgb, var(--red-soft) 55%, transparent); }
.au-dtable tr.is-rotated td { background: color-mix(in srgb, var(--amber-soft) 35%, transparent); }

/* The whole line of an account opens it. */
#api-users .au-row[data-key^="u-"] { cursor: pointer; }
#api-users .au-row[data-key^="u-"]:not(.open):hover { background: var(--panel); }
#api-users .au-row .au-detail, #api-users .au-row .au-form, #api-users .au-row .au-actions, #api-users .au-row .au-pw, #api-users .au-row .au-facts { cursor: auto; }

.au-seen small { display: block; font-size: 11.5px; }

/* An opened account: tabs, one part at a time. */
.au-dtabs { display: inline-flex; flex-wrap: wrap; margin: 4px 0 12px; }
.au-dtabs button { height: 28px; padding: 0 12px; font-size: 12.5px; }
.au-detail .ak-reqs { max-height: 330px; }
.au-detail .ak-table thead th { position: sticky; top: 0; background: var(--card); z-index: 1; }

/* API page: the activity log with the database beside it (alone, the log takes the whole width). */
.api-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; align-items: start; min-width: 0; }
.api-pair > .card { min-width: 0; }
.api-pair > [hidden] { display: none; }
/* A key's line in an account's detail opens the key. */
.au-dtable tr[data-au-key] { cursor: pointer; }
.au-dtable tr[data-au-key]:hover td { background: var(--panel); }
.api-pair .ak-reqs .ak-table { min-width: 460px; }      /* beside the database the log is narrower: it wraps instead of scrolling sideways */

/* API page, right-hand column: how to connect, and under it the database. */
.api-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.api-side .db-rows { grid-template-columns: 1fr; }
.api-code-head .ak-sort select { height: 30px; font-size: 12.5px; }

/* The account forms: room to breathe, and the limits in four named groups. */
.au-new { padding: 20px 22px 18px; }
.au-new h4 { margin: 0 0 14px; font-size: 15px; }
.au-set-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 18px; }
.au-who { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, .8fr); }
.au-new .cfield > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.au-new .cfield input, .au-new .cfield select, .au-limits .cfield input, .au-limits .cfield select { height: 40px; font-size: 13.5px; }
.au-new .pw-gen { font-size: 12px; }
.au-role-note { display: none; margin: 12px 0 0; max-width: 70ch; }
.au-new[data-role="user"] .au-role-note[data-for="user"], .au-new[data-role="operator"] .au-role-note[data-for="operator"], .au-new[data-role="admin"] .au-role-note[data-for="admin"] { display: block; }
.au-new:not([data-role="user"]) .au-new-limits { display: none; }
.au-new-limits { margin-top: 18px; }
.au-nolimits { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: 12px; }
.au-nolimits b { display: block; font-size: 13.5px; }
.au-nolimits span { font-size: 12.5px; color: var(--text-2); }
.au-nolimits .btn { height: 34px; font-size: 12.5px; }
.au-set { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--border); }
.au-set + .au-set { margin-top: 18px; }
.au-new-limits > .au-set:first-child, .au-limits > .au-set:first-child { border-top: 0; padding-top: 0; }
.au-set legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--text); }
.au-set legend small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted); }
.au-set legend + * { clear: both; }
.au-set .cfield.wide { grid-column: 1 / -1; }
.au-limits.cfg-grid:has(.au-set) { display: block; padding: 18px 20px; }
.au-new .au-form-foot, .au-limits .au-form-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.au-new .au-form-foot .btn, .au-limits .au-form-foot .btn { height: 38px; padding: 0 16px; font-size: 13px; }
@media (max-width: 900px) { .au-set-grid, .au-who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .au-set-grid, .au-who { grid-template-columns: minmax(0, 1fr); } }

/* A select shows its choice on one line, cut with an ellipsis if it must be: never wrapped onto two. */
select { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
select selectedcontent { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cfield small:empty { display: none; }

@supports (appearance: base-select) { ::picker(select)::-webkit-scrollbar { display: none; width: 0; height: 0; } }

/* Models and prices: whether customers are offered a model at all. */
.ap-offer { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--border-strong); border-radius: 99px; font-size: 11.5px; font-weight: 500; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.ap-offer input { margin: 0; accent-color: var(--green); }
.ap-offer:has(input:not(:checked)) { border-style: dashed; color: var(--red); }
.ap-item:has(.ap-offer input:not(:checked)) .ap-id, .ap-item:has(.ap-offer input:not(:checked)) .ap-prices { opacity: .5; }

.ap-builds { color: var(--muted); }

/* ---- phones and tablets: the page is the only thing that scrolls up and down ----
   A list with a height of its own catches the finger: the swipe scrolls the list and the page stays
   where it is ("can't move around"). Up to 1024 px those lists are as tall as what is in them, long
   tables show their newest rows, and only wide tables scroll, sideways. */
@media (max-width: 1024px) {
  .api-models, .ap-list, .hist-list { max-height: none; overflow: visible; overscroll-behavior: auto; padding-right: 0; }
  .ak-reqs, .au-detail .ak-reqs, .pt-reqs { max-height: none; overflow-y: visible; overscroll-behavior: auto; }
  .ak-reqs thead th, .au-detail .ak-table thead th, .pt-reqs thead th { position: static; }
  .ak-reqs tbody tr:nth-child(n+21), .pt-reqs tbody tr:nth-child(n+21) { display: none; }      /* the newest twenty */
  #api-audit .ak-reqs tbody tr:nth-child(n+16) { display: none; }
  .in-reqs tbody tr.in-detail { display: table-row; }                                          /* an opened request is never the one cut */
  /* an opened account keeps the phone's three columns (the desktop's seven made it twice the screen wide) */
  .au-row, .au-row.open { grid-template-columns: minmax(0, 1fr) auto 28px; }
  .au-row.open { margin: 4px -6px; padding: 11px 8px; }
  .au-row.open { row-gap: 3px; }
  .au-row.open > .au-caret { grid-area: 1 / 3; }                /* beside the name, not on a line of its own under the facts */
  .au-row.open > .au-facts, .au-row.open > .au-actions { margin-top: 8px; }
  .au-row > .au-actions { gap: 8px; }
  .au-row > .au-actions .btn { height: 38px; flex: 1 1 auto; justify-content: center; }
  .au-dtabs { display: flex; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .au-dtabs button, .in-tabs button { flex: none; height: 34px; }
  .in-tabs, #us-tabs { display: flex; max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .in-tabs::-webkit-scrollbar, .au-dtabs::-webkit-scrollbar { display: none; }
  .ap-item { padding: 12px; }
  .ap-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-old-row input[type=text] { flex-basis: 100%; }
  .api-code-head { align-items: center; }
  .in-plan-row { align-items: flex-start; }
  .in-plan-act { margin-left: 0; width: 100%; }
  .in-hours { height: 38px; gap: 2px; }
}
@media (max-width: 1024px) and (hover: none) {
  /* a finger: targets a thumb can hit, and no hover tint that sticks after a tap */
  #api-users .au-row[data-key^="u-"]:not(.open):hover, .au-dtable tr[data-au-key]:hover td { background: none; }
  .ak-sum, .au-toggle { min-height: 44px; }
}