/* ============================================================
   Studio — "liquid glass" skin
   iOS-like: SF-style type, pill controls, translucent frosted
   surfaces over soft color fields, light + dark, motion-light.
   Performance notes: backdrop-filter only on a few large surfaces
   (header, cards, modal); blobs are static gradients, not animated;
   no filters on list rows or tiles.
   ============================================================ */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", sans-serif;
  --radius: 18px; --radius-sm: 12px; --pill: 999px;
  --blue: #0a84ff; --green: #30d158; --orange: #ff9f0a; --red: #ff453a; --indigo: #5e5ce6;
  --amber: var(--orange); --danger: var(--red); --link: var(--blue);
  --glass-blur: 34px;
}
html[data-theme="light"] { color-scheme: light;
  --bg: #eef1f6; --text: #0b0d12; --muted: #4a5160; --line: rgba(15, 23, 42, .08);
  --glass: rgba(255, 255, 255, .34); --glass-strong: rgba(255, 255, 255, .56);
  --glass-edge: rgba(255, 255, 255, .95); --glass-shadow: 0 12px 34px rgba(15, 23, 42, .12), 0 1px 0 rgba(255,255,255,.85) inset, 0 -1px 0 rgba(255,255,255,.35) inset;
  --field: rgba(255, 255, 255, .7); --bg-raised: rgba(255,255,255,.55);
  --blob1: #8fb6ff; --blob2: #ffb08a; --blob3: #8fe3b8;
}
html[data-theme="dark"] { color-scheme: dark;
  --bg: #0b0f16; --text: #f2f4f8; --muted: #9aa3b2; --line: rgba(255, 255, 255, .09);
  --glass: rgba(28, 34, 48, .30); --glass-strong: rgba(28, 34, 48, .56);
  --glass-edge: rgba(255, 255, 255, .3); --glass-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(255,255,255,.05) inset;
  --field: rgba(255, 255, 255, .06); --bg-raised: rgba(255,255,255,.06);
  --blob1: #2f63d6; --blob2: #b0532f; --blob3: #1f8a5a;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 16px; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font); line-height: 1.5;
  font-feature-settings: "tnum" 1; background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* static color field behind the glass */
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vmax 40vmax at 15% 20%, var(--blob1) 0%, transparent 60%),
    radial-gradient(38vmax 38vmax at 85% 10%, var(--blob2) 0%, transparent 60%),
    radial-gradient(45vmax 45vmax at 60% 90%, var(--blob3) 0%, transparent 60%);
  opacity: .9;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .5rem; }
h1 { font-size: 1.7rem; } h2 { font-size: 1.1rem; }
p { margin: 0 0 .75rem; max-width: 62ch; }
small { color: var(--muted); font-size: .8em; margin-left: .15em; }
.lede, .empty, .hint { color: var(--muted); }
.empty { padding: 2rem 0; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: 2px; border-radius: 6px; }

/* ---- scrollbars: slim glass pills, sitewide (standard props win in Firefox + new Chrome; webkit rules cover older engines) ---- */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 28%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 24%, transparent);
  border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 42%, transparent);
  border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---- glass surfaces ---- */
.glass, .top, .machine, .block, .login, .modal-box, .bulkbar, .transfers li, .lib-tools, .files, .events, .stage {
  background: var(--glass); border: 1px solid var(--glass-edge); border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}
.top, .machine, .block, .login, .modal-box { backdrop-filter: blur(var(--glass-blur)) saturate(190%) brightness(1.05); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(190%) brightness(1.05); position: relative; }
/* specular sheen across the top of big glass surfaces */
.machine::after, .block::after, .login::after, .modal-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 28%, transparent 46%); }
html[data-theme="dark"] .machine::after, html[data-theme="dark"] .block::after, html[data-theme="dark"] .login::after, html[data-theme="dark"] .modal-box::after { background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 28%, transparent 46%); }
.files, .events, .lib-tools, .bulkbar, .transfers li, .stage { background: var(--glass-strong); }

/* ---- header ---- */
.top { position: sticky; top: .75rem; z-index: 10; margin: .75rem 1rem 0; padding: .7rem 1rem; display: flex; align-items: center; gap: 1.5rem; border-radius: var(--pill); }
.wordmark { font-weight: 800; font-size: 1.1rem; color: var(--text); letter-spacing: -0.02em; }
.wordmark span { font-weight: 400; color: var(--muted); }
.wordmark.big { font-size: 2rem; margin-bottom: .25rem; display: block; }
.top nav { display: flex; gap: .25rem; flex: 1; }
.top nav a { color: var(--muted); padding: .4rem .85rem; border-radius: var(--pill); font-weight: 500; }
.top nav a:hover { text-decoration: none; color: var(--text); background: var(--field); }
.top nav a[aria-current="page"] { color: var(--text); background: var(--field); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset; }
.top nav .studio-link { margin-left: auto; color: var(--blue); }
.signout { display: flex; align-items: center; gap: .6rem; margin: 0; }
.who { color: var(--muted); font-size: .9rem; }
.theme-switch { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--field); border: 1px solid var(--line); }
.theme-switch button { border: 0; background: transparent; padding: .25rem .6rem; border-radius: var(--pill); color: var(--muted); font: inherit; cursor: pointer; box-shadow: none; }
.theme-switch button.on { background: var(--glass-strong); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.15); }

main { padding: 1.5rem 1rem 4rem; max-width: 1040px; margin: 0 auto; }
.login-main { display: grid; place-items: center; min-height: 100vh; }

/* ---- controls ---- */
button, .button {
  font: inherit; font-weight: 600; cursor: pointer; line-height: 1.2;
  background: var(--field); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--pill); padding: .6rem 1.1rem; display: inline-block;
  transition: transform .08s ease, background .15s ease;
}
button:hover, .button:hover { text-decoration: none; background: var(--glass-strong); }
button:active, .button:active { transform: scale(.97); }
.primary { background: var(--blue); color: #fff; border-color: transparent; box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 35%, transparent); }
.primary:hover { background: color-mix(in srgb, var(--blue) 88%, #fff); }
.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.danger-text { color: var(--red); }
.quiet { background: transparent; border-color: transparent; color: var(--muted); padding: .35rem .6rem; box-shadow: none; }
.quiet:hover { color: var(--text); background: var(--field); }
input, select {
  font: inherit; color: var(--text); background: var(--field); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .6rem .8rem; width: 100%;
}
label { display: block; color: var(--muted); font-size: .9rem; }
label input, label select { margin-top: .3rem; }
.stack { display: grid; gap: 1rem; } .stack.narrow { max-width: 28rem; }
.row { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin-top: 1rem; }
.row form { margin: 0; } .row.inline { margin: 0 0 1rem; } .row.inline input { width: 16rem; }
.select { min-width: 16rem; } .error { color: var(--red); }

/* ---- login ---- */
.login { width: min(26rem, 100%); padding: 2rem; }
.login .lede { margin-bottom: 1.5rem; }
.oops { font-size: 1.5rem; font-weight: 600; margin: .5rem 0 .25rem; }

/* ---- machine card ---- */
.machine { padding: 1.75rem 1.75rem 1.5rem; margin-bottom: 1.75rem; position: relative; }
.machine::before { content: ""; position: absolute; left: 1.75rem; top: 2.2rem; width: 14px; height: 14px; border-radius: 50%;
  background: var(--muted); opacity: .5; }
.machine[data-state="booting"]::before { background: var(--orange); opacity: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--orange) 25%, transparent); animation: pulse 1.4s ease-in-out infinite; }
.machine[data-state="ready"]::before   { background: var(--green); opacity: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 25%, transparent); }
.machine[data-state="stopped"]::before { background: var(--blue); opacity: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 25%, transparent); }
.machine[data-state="error"]::before   { background: var(--red); opacity: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--red) 25%, transparent); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.state { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin: 0 0 .6rem; padding-left: 1.75rem; }
.machine[data-state="booting"] .state { color: var(--orange); } .machine[data-state="ready"] .state { color: var(--green); }
.machine[data-state="stopped"] .state { color: var(--blue); } .machine[data-state="error"] .state { color: var(--red); }
.detail { color: var(--muted); padding-left: 1.75rem; }
.mono-ish { font-size: .9rem; user-select: all; }
.readout { display: flex; flex-wrap: wrap; gap: 2rem; margin: 1rem 0 0; padding-left: 1.75rem; }
.readout div { margin: 0; } .readout dt { color: var(--muted); font-size: .8rem; }
.readout dd { margin: 0; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.readout .sub { display: block; font-size: .9rem; font-weight: 500; color: var(--muted); margin-top: .1rem; }
.machine[data-state="booting"] .cost, .machine[data-state="ready"] .cost { color: var(--orange); }
.machine .row { padding-left: 1.75rem; margin-top: 1.25rem; }
.boot-track { height: 8px; background: var(--field); border-radius: 4px; overflow: hidden; margin: .4rem 0 .9rem 1.75rem; max-width: 34rem; }
#m-fill { display: block; height: 100%; width: 5%; background: linear-gradient(90deg, var(--orange), #ffd60a); border-radius: 4px; transition: width .6s ease; }
.deploy { margin-top: 1rem; padding-left: 1.75rem; } .deploy .row { padding-left: 0; }
.workers { min-width: 12rem; } .credit { padding-left: 1.75rem; } .idle { color: var(--orange); }
.events { list-style: none; margin: 1.25rem 0 0; padding: .9rem 1rem; font-size: .85rem; color: var(--muted); display: grid; gap: .3rem; border-radius: var(--radius-sm); }
.events .et { display: inline-block; width: 3.4rem; opacity: .7; }
.events li.warn { color: var(--orange); } .events li.error { color: var(--red); }

/* ---- lower blocks ---- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.block { padding: 1.4rem 1.5rem; } .block p { color: var(--muted); } .block .button { margin-top: .5rem; }
.gauge-label { color: var(--muted); font-size: .9rem; margin-bottom: .4rem; }
.gauge { height: 8px; background: var(--field); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.gauge span { display: block; height: 100%; background: var(--blue); border-radius: 4px; }
.button.disabled, a.disabled { opacity: .45; cursor: not-allowed; }

/* ---- library ---- */
.crumbs { color: var(--muted); margin-bottom: 1rem; font-size: 1.05rem; } .crumbs span { margin: 0 .35rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: end; margin-bottom: .5rem; }
.toolbar .row.inline { margin: 0; } .toolbar .fetch input[name="url"] { width: 22rem; } .toolbar .fetch input[name="name"] { width: 11rem; }
.pick { cursor: pointer; } .hint { font-size: .9rem; margin-bottom: 1rem; }
.lib-tools { display: flex; gap: .75rem; align-items: flex-end; margin: 0 0 1rem; padding: .75rem; border-radius: var(--radius-sm); }
#lib-search { max-width: 26rem; height: 2.6rem; } .sortsel { min-width: 10rem; } .sortsel select { height: 2.6rem; }
.view-switch { display: flex; gap: .25rem; margin-left: auto; padding: 3px; background: var(--field); border-radius: var(--pill); }
.view-switch button { height: 2.2rem; padding: 0 .75rem; border: 0; background: transparent; box-shadow: none; border-radius: var(--pill); }
.view-switch button.on { background: var(--glass-strong); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.files { width: 100%; border-collapse: separate; border-spacing: 0; padding: .25rem .5rem; }
.files th { text-align: left; color: var(--muted); font-weight: 500; font-size: .8rem; padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.files td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.files tr:last-child td { border-bottom: 0; }
.files .num { text-align: right; color: var(--muted); white-space: nowrap; }
.files td form { margin: 0; display: inline; } .files a.dir { color: var(--text); font-weight: 600; }
.files img.mini { width: 2.2rem; height: 2.2rem; object-fit: cover; border-radius: 8px; vertical-align: middle; margin-right: .6rem; }
.ico-s { display: inline-block; width: 1.4rem; opacity: .8; }
.lib-grid { display: grid; gap: .9rem; }
.lib-grid.view-large { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.lib-grid.view-small { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.tile { display: grid; gap: .35rem; color: var(--text); padding: .5rem; border-radius: var(--radius-sm); border: 1px solid transparent; }
.tile:hover { background: var(--glass); border-color: var(--glass-edge); text-decoration: none; }
.tile .thumb { aspect-ratio: 1; background: var(--field); border-radius: var(--radius-sm); display: grid; place-items: center; overflow: hidden; }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; }
.tile .ico { font-size: 2.6rem; opacity: .85; } .view-small .tile .ico { font-size: 1.9rem; }
.tile .tname { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.k-folder .tname { font-weight: 600; } .tile .tmeta { font-size: .75rem; color: var(--muted); }
.bulkbar { display: flex; gap: .5rem; align-items: center; margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: var(--radius-sm); }
.bulkbar span { color: var(--muted); margin-right: .5rem; } .files td.sel { width: 1.5rem; }
.transfers { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .5rem; }
.transfers li { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr auto; gap: 1rem; align-items: center; font-size: .9rem; padding: .5rem .75rem; border-radius: var(--radius-sm); }
.t-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-bar { height: 6px; background: var(--field); border-radius: 3px; overflow: hidden; }
.t-bar i { display: block; height: 100%; width: 0; background: var(--blue); transition: width .3s; }
.t-status { color: var(--muted); white-space: nowrap; }
.transfers li.bad .t-bar i { background: var(--red); } .transfers li.bad .t-status { color: var(--red); }
body.dropping main { outline: 2px dashed var(--blue); outline-offset: -8px; border-radius: var(--radius); }
.stage { display: grid; place-items: center; min-height: 40vh; margin-bottom: 1rem; overflow: hidden; }
.stage img, .stage video { max-width: 100%; max-height: 78vh; display: block; border-radius: var(--radius-sm); }
.preview .row { align-items: center; justify-content: space-between; margin: 0; } .filename { color: var(--muted); word-break: break-all; }
.navbtns { display: flex; gap: .5rem; } .people h2 { margin-top: 2.5rem; }
.events-page tr.warn td { color: var(--orange); } .events-page tr.error td { color: var(--red); }
.pager { display: flex; gap: 1.5rem; margin-top: 1rem; color: var(--muted); }

/* ---- modal ---- */
.modal { border: none; padding: 0; background: transparent; }
.modal::backdrop { background: rgba(10, 12, 16, .35); backdrop-filter: blur(6px); }
.modal-box { padding: 1.5rem 1.6rem; width: min(26rem, 92vw); margin: 0; }
.modal-title { font-weight: 700; font-size: 1.15rem; margin: 0 0 .5rem; }
.modal-msg { color: var(--muted); margin: 0 0 1rem; } .modal-input { margin-bottom: 1rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.modal-actions .danger { background: var(--red); border-color: transparent; color: #fff; }

@media (max-width: 720px) {
  .top { flex-wrap: wrap; gap: .5rem .75rem; border-radius: var(--radius); margin: .5rem; position: static; }
  .top nav { flex-wrap: wrap; } .top nav .studio-link { margin-left: 0; }
  .two { grid-template-columns: 1fr; } .readout { gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- no-scroll dashboard ---- */
main.dash { max-width: 1180px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(18rem, .9fr); gap: 1.25rem; align-items: start; }
.side { display: grid; gap: 1.25rem; }
.machine { margin-bottom: 0; }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.m-head .state { margin: 0; font-size: clamp(2rem, 4.5vw, 3rem); }
.m-actions { margin: 0 !important; padding: 0 !important; }
.deploy { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin-top: 1rem; padding-left: 1.75rem; }
.deploy .gpusel { flex: 1 1 22rem; min-width: 16rem; } .deploy .workers { flex: 0 0 11rem; min-width: 11rem; }
.stat { display: grid; gap: .1rem; padding: 1.25rem 1.5rem; }
.stat-label { color: var(--muted); font-size: .85rem; font-weight: 500; }
.stat-value { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--green); }
.stat-sub { color: var(--orange); font-size: .85rem; min-height: 1.2em; }
.block .quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.block .quick .button { margin: 0; padding: .45rem .9rem; font-size: .9rem; }
.detail.small { font-size: .85rem; padding-left: 0; margin-top: .5rem; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

/* ---- lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: 1fr auto; background: rgba(8, 10, 16, .55);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); padding: 1.25rem; }
.lb-stage { display: grid; place-items: center; min-height: 0; }
.lb-stage img, .lb-stage video { max-width: 92vw; max-height: 80vh; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .75rem auto 0; width: min(64rem, 100%);
  padding: .6rem .6rem .6rem 1rem; border-radius: var(--pill); background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.lb-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-btns { display: flex; gap: .35rem; align-items: center; }
.lb-btns button:disabled { opacity: .35; cursor: default; }
body.lb-open { overflow: hidden; }

/* ---- dashboard: fill the viewport, never scroll ---- */
body:has(main.dash) { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body:has(main.dash) .top { flex: none; }
main.dash { flex: 1; min-height: 0; padding: 1rem 1rem .75rem; width: 100%; }
.dash-grid { height: 100%; }
.dash-grid .machine { height: 100%; display: flex; flex-direction: column; }
.dash-grid .side { height: 100%; grid-template-rows: auto 1fr 1fr; }
.side .block { display: flex; flex-direction: column; }
.side .block .quick { margin-top: auto; padding-top: .75rem; }
.side .block .button:not(.quick .button) { align-self: flex-start; }
.m-fill { flex: 1; }
.sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1rem 1.75rem; padding: .9rem 1rem; border-radius: var(--radius-sm);
  background: var(--field); border: 1px solid var(--line); }
.sessions div { display: grid; gap: .1rem; min-width: 0; }
.s-label { color: var(--muted); font-size: .78rem; }
.s-val { font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px), (max-height: 640px) {
  body:has(main.dash) { height: auto; overflow: auto; }
  main.dash { height: auto; } .dash-grid, .dash-grid .machine, .dash-grid .side { height: auto; }
}

/* readout states */
.readout.dim dd { color: var(--muted); opacity: .7; }
.readout dd.good { color: var(--green); }
.readout dd.warn { color: var(--orange); }
.machine[data-state="off"] .cost { color: var(--muted); }

/* readout: gray placeholders when idle, meaning when live */
.readout dd { color: var(--muted); transition: color .3s; }
.machine[data-live="yes"] .readout dd { color: var(--text); }
.machine[data-live="yes"] #m-rate { color: var(--blue); }
.machine[data-live="yes"] #m-load[data-level="idle"] { color: var(--muted); }
.machine[data-live="yes"] #m-load[data-level="busy"] { color: var(--green); }
.machine[data-live="yes"] #m-load[data-level="hot"] { color: var(--orange); }
.machine[data-state="off"] .cost { color: var(--muted); }
.stat-line { color: var(--muted); font-size: .88rem; }
.stat-line:first-of-type { color: var(--text); margin-top: .35rem; }

/* native dropdown lists follow the theme */
select option { background: var(--bg); color: var(--text); }

/* overflow safety */
.dash-grid .machine, .side .block { min-height: 0; overflow: hidden; }
.side .block p { margin-bottom: .5rem; }

/* big numbers */
.readout.big { gap: 2.25rem; }
.readout.big dd { font-size: 1.7rem; }
.readout.big .sub { font-size: .9rem; }

/* dials */
.dials { display: grid; grid-template-columns: repeat(5, 1fr); gap: .75rem; margin: 1.25rem 0 0 1.75rem; }
.dial { display: grid; justify-items: center; gap: .05rem; padding: .6rem .4rem .5rem; border-radius: var(--radius-sm);
  background: var(--field); border: 1px solid var(--line); }
.dial svg { width: 100%; max-width: 8.5rem; overflow: visible; }
.dial .track { fill: none; stroke: var(--line); stroke-width: 7; stroke-linecap: round; }
.dial .arc { fill: none; stroke-width: 7; stroke-linecap: round; transition: d .5s ease, stroke .5s ease; filter: drop-shadow(0 0 4px currentColor); }
.dial .needle { stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; transform-origin: 50px 58px; transform: rotate(-135deg); transition: transform .6s cubic-bezier(.2,.8,.2,1), stroke .5s; opacity: .55; }
.dial.live .needle { opacity: 1; }
.dial .d-val { font-weight: 700; font-size: .95rem; margin-top: -.9rem; color: var(--muted); }
.dial.live .d-val { color: var(--text); }
.dial .d-label { font-size: .72rem; color: var(--muted); }
@media (max-width: 1100px) { .dials { grid-template-columns: repeat(3, 1fr); } }

/* credit row */
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding: 1.1rem 1.25rem; }
.statrow .st { display: grid; gap: .1rem; min-width: 0; }
.statrow .stat-value { font-size: 1.9rem; }
.stat-value.good { color: var(--green); } .stat-value.warn { color: var(--orange); } .stat-value.bad { color: var(--red); } .stat-value.neutral { color: var(--text); }
.statrow .stat-sub { color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-bar { display: block; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-top: .3rem; }
.budget-bar i { display: block; height: 100%; width: 0; background: var(--green); transition: width .5s; }
.budget-bar[data-level="warn"] i { background: var(--orange); } .budget-bar[data-level="bad"] i { background: var(--red); }

/* ---- fit-to-viewport (real fix): rows may not grow past the viewport ---- */
.dash-grid { grid-template-rows: minmax(0, 1fr); }
.dash-grid .machine { min-height: 0; overflow: hidden; padding: 1.4rem 1.6rem 1.25rem; }
.m-fill { flex: 1 1 0; min-height: .5rem; }
.readout.big { gap: 2rem; margin-top: .75rem; }
.readout.big dd { font-size: 1.45rem; }
.sessions { margin: 0 0 .75rem 1.75rem; padding: .7rem .9rem; }
.deploy { margin-top: .5rem; }
.side .block { padding: 1.1rem 1.35rem; }
.side .block p { font-size: .95rem; }

/* dials: centered, compact, value inside the face, shadowed needle */
.dials { margin: .9rem 0 0; padding-left: 1.75rem; display: grid; grid-template-columns: repeat(5, minmax(0, 8rem)); justify-content: center; gap: .6rem; }
.dial { padding: .45rem .3rem .4rem; gap: 0; }
.d-face { position: relative; width: 100%; }
.d-face svg { display: block; width: 100%; }
.d-face .d-val { position: absolute; left: 0; right: 0; top: 47%; text-align: center; font-weight: 800; font-size: .95rem; letter-spacing: -0.01em;
  margin: 0; color: var(--muted); text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; }
.dial .needle { filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 4px rgba(0,0,0,.35)); }
.dial .d-label { font-size: .7rem; }

/* credit stats: one horizontal reading line per stat */
.side .block.statrow { display: grid; grid-template-columns: 1fr; gap: .35rem; align-content: center; }
.statrow .st { display: grid; grid-template-columns: 6.2rem auto 1fr; align-items: baseline; gap: .6rem; }
.statrow .stat-label { font-size: .85rem; }
.statrow .stat-value { font-size: 1.55rem; line-height: 1.2; }
.statrow .stat-sub { font-size: .8rem; }
.statrow .budget-bar { grid-column: 1 / -1; margin-top: .1rem; }

/* ---- tight machine layout ---- */
.dash-grid .machine { justify-content: flex-start; gap: 0; }
.dials { margin: .8rem 0 0 1.75rem; padding: 0; grid-template-columns: repeat(5, 1fr); justify-content: stretch; }
.m-bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(15rem, .85fr); gap: .9rem; margin: .9rem 0 0 1.75rem; align-items: stretch; flex: 1; min-height: 0; }
.m-left { display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.sessions { margin: 0; }
.m-left #m-startform { margin-top: auto; }
.deploy { margin-top: 0; padding-left: 0; gap: .6rem; }
.deploy .gpusel { flex: 1 1 14rem; min-width: 12rem; } .deploy .workers { flex: 0 0 9.5rem; min-width: 9.5rem; }
.big-start { padding: .8rem 1.4rem; font-size: 1.05rem; flex: 1 1 100%; }
.timeline { display: flex; flex-direction: column; gap: .4rem; padding: .8rem .9rem; border-radius: var(--radius-sm); background: var(--field); border: 1px solid var(--line); min-height: 0; }
.tl-head { display: flex; justify-content: space-between; align-items: baseline; }
.tl-total { font-weight: 700; font-size: .9rem; }
.timeline .boot-track { margin: 0; max-width: none; }
#m-fill.done { background: var(--green); }
.tl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; font-size: .82rem; overflow: hidden; }
.tl-steps li { display: flex; justify-content: space-between; color: var(--muted); }
.tl-steps li b { color: var(--text); font-weight: 600; }
.tl-steps li.cur { color: var(--orange); } .tl-steps li.cur b { color: var(--orange); }
.tl-steps li.muted span { color: var(--muted); }

/* credit card centered */
.side .block.statrow { align-content: center; justify-content: start; }
.statrow .st { grid-template-columns: 5.6rem auto 1fr; }

/* library stacked bar + legend */
.gauge.stacked { display: flex; }
.gauge.stacked span { display: block; height: 100%; }
.g-models { background: var(--blue); } .g-outputs { background: var(--green); } .g-other { background: var(--muted); } .g-free { background: var(--line); }
.legend { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; font-size: .82rem; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: .4rem; } .legend i { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.legend b { color: var(--text); font-weight: 600; margin-left: auto; }

/* ---- glass select ---- */
.gsel { position: relative; }
.gsel-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.gsel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; font-weight: 500;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .8rem; height: 2.6rem; }
.gsel-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsel-btn i { font-style: normal; color: var(--muted); transition: transform .15s; } .gsel-btn.open i { transform: rotate(180deg); }
.gsel-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .35rem); padding: .35rem; border-radius: var(--radius-sm);
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  backdrop-filter: blur(var(--glass-blur)) saturate(180%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%); max-height: 18rem; overflow: auto; }
.gsel-item { padding: .5rem .65rem; border-radius: 9px; cursor: pointer; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsel-item:hover { background: var(--field); } .gsel-item.on { background: var(--blue); color: #fff; }
/* column mode: options with data-cols render as aligned grid rows (shared tracks via subgrid) */
.gsel-menu.cols { display: grid; }
.gsel-menu.cols .gsel-item { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: 1rem; align-items: baseline; }
.gsel-menu.cols .gsel-c { white-space: nowrap; font-variant-numeric: tabular-nums; }
.gsel-menu.cols .gsel-item.on .gsel-c { color: #fff; }
.gsel-btn .gsel-c, .gsel-btn .gsel-dot { display: inline; white-space: nowrap; }
.gsel-btn .gsel-dot { color: var(--muted); margin: 0 .35em; }
/* cell classes (menu rows AND the closed button) */
.cell-vram { color: var(--green); font-weight: 600; }
.cell-good { color: var(--green); } .cell-warn { color: var(--orange); } .cell-bad { color: var(--red); }
/* decorative per-GPU tints (no meaning, just identity) */
.gpuc-0 { color: #22b8e6; font-weight: 600; } .gpuc-1 { color: #bf5af2; font-weight: 600; }
.gpuc-2 { color: #ff5c8a; font-weight: 600; } .gpuc-3 { color: #2ec8b8; font-weight: 600; }
.gpuc-4 { color: #8a7dff; font-weight: 600; } .gpuc-5 { color: #c9964a; font-weight: 600; }
/* ---- workflow selector (inside the Start confirmation modal) ---- */
.wf-sect { margin: 0 0 .55rem; padding: .3rem .5rem .5rem; position: relative;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sec, var(--blue)) 13%, transparent), transparent 45%), var(--glass);
  border: 1px solid var(--glass-edge); border-radius: var(--radius-sm);
  box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--sec, var(--blue)) 60%, transparent); }
.wf-sect > summary { cursor: pointer; font-size: .84rem; letter-spacing: .02em; padding: .55rem .55rem;
  border-radius: 8px; opacity: .85; user-select: none; display: flex; align-items: center; gap: .6rem; }
.wf-sect > summary::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sec, var(--blue)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec, var(--blue)) 22%, transparent); }
.wf-sect > summary:hover { background: color-mix(in srgb, var(--sec, var(--text)) 10%, transparent); }
.wf-sect[open] > summary { opacity: 1; font-weight: 600; }
.wf-title { min-width: 0; }
.wf-count { margin-left: auto; flex: 0 0 auto; font-size: .72rem; font-weight: 600; padding: .12rem .55rem;
  border-radius: var(--pill); background: color-mix(in srgb, var(--sec, var(--blue)) 24%, transparent); color: var(--sec, var(--blue)); }
.wf-search { width: 100%; margin: .15rem 0 .4rem; padding: .45rem .65rem; font-size: .84rem;
  border-radius: 8px; border: 1px solid color-mix(in srgb, var(--sec, var(--text)) 25%, var(--line)); background: var(--field); color: var(--text); }
.wf-search:focus { border-color: color-mix(in srgb, var(--sec, var(--blue)) 60%, transparent); }
/* reddit-style thread: the vertical line beside a folder's (or section's) rows; click to fold */
.wf-thread { display: flex; align-items: stretch; min-width: 0; }
.wf-line { flex: 0 0 16px; padding: 0; margin: 0; cursor: pointer; appearance: none;
  background: none; border: none; box-shadow: none; position: relative; border-radius: 0; }
.wf-line::before { content: ""; position: absolute; left: 6px; top: 4px; bottom: 4px; width: 2px;
  border-radius: 2px; background: color-mix(in srgb, var(--sec, var(--text)) 40%, transparent); }
.wf-line:hover::before { background: var(--sec, var(--blue)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sec, var(--blue)) 25%, transparent); }
.wf-rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wf-group { margin: 0 0 .35rem; }
.wf-group.closed .wf-thread { display: none; }
.wf-folder { cursor: pointer; user-select: none; display: flex; align-items: center; gap: .4rem; border-radius: 8px;
  color: color-mix(in srgb, var(--sec, var(--text)) 55%, var(--text)); }
.wf-folder:hover { background: color-mix(in srgb, var(--sec, var(--text)) 10%, transparent); }
.wf-chev { flex: 0 0 auto; width: .85rem; font-size: .68rem; opacity: .7; text-align: center; }
.wf-name { min-width: 0; overflow-wrap: anywhere; }
.wf-size { margin-left: auto; flex: 0 0 auto; padding-left: .6rem; font-size: .76rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wf-row.picked { background: color-mix(in srgb, var(--sec, var(--blue)) 18%, transparent); }
.wf-row.picked .wf-name { font-weight: 600; }
.wf-row.picked:hover { background: color-mix(in srgb, var(--sec, var(--blue)) 24%, transparent); }
.wf-modal { display: flex; flex-direction: column; gap: 2px; max-height: 56vh; overflow: auto; margin: 0 0 1rem;
  padding: .3rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--field); }
.wf-row { display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent;
  font-size: .92rem; user-select: none; color: var(--text); }
.wf-folder { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; opacity: .6; padding: .55rem .55rem .15rem; }
.wf-row:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.wf-row input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--sec, var(--blue));
  padding: 0; margin: 0; background: none; border: none; box-shadow: none; accent-color: var(--sec, var(--blue)); }
.wf-row span { min-width: 0; overflow-wrap: anywhere; }
.wf-full { color: var(--red); font-weight: 600; }
.wf-full input[type="checkbox"] { accent-color: var(--red); }
.wf-empty { color: var(--muted); font-size: .85rem; padding: .35rem .5rem; }
label .gsel { margin-top: .3rem; }

/* credit rows: center label/note on the number */
.statrow .st { align-items: center; }
.statrow .stat-sub { line-height: 1.2; }

/* dials absorb spare height; faces centered in the tile */
/* rigid against squeeze: when boot content inflates the card the dials must not be
   crushed below their faces (they overflow-paint onto the row below); the timeline
   absorbs the squeeze instead — its steps list already clips gracefully */
.dials { flex: 1 0 auto; align-items: stretch; }
.dial { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .1rem; padding: .5rem .4rem; }
.d-face { width: min(100%, 9rem); flex: none; }
.d-face .d-val { top: 54%; }
.dial .d-label { margin-top: -.15rem; }

/* bottom section stays compact */
.m-bottom { flex: 0 0 auto; }
.m-left #m-startform { margin-top: 0; }
.deploy { flex-direction: column; align-items: stretch; }
.deploy .gpusel, .deploy .workers { flex: none; min-width: 0; }
.big-start { flex: none; }
.settings-grid { margin-bottom: 1.5rem; }
.rolef { margin: 0; width: 10rem; }
.you { font-size: .75rem; color: var(--muted); margin-left: .35rem; }

/* glass select must shrink inside flex/grid columns */
.gsel { min-width: 0; width: 100%; }
.gsel-btn > span { min-width: 0; flex: 1 1 auto; }
.m-left { overflow: hidden; }

/* settings/people cards: equal height, buttons level */
.settings-grid .block { display: flex; flex-direction: column; }
.settings-grid .block form.stack { flex: 1; }
.settings-grid .block form.stack .primary { margin-top: auto; }
.settings-grid .block > .button { margin-top: auto; align-self: flex-start; }

/* credit card: four rows, budget with bar; studio slimmer */
.statrow .st { grid-template-columns: 5.2rem auto 1fr; }
.statrow .stat-value { font-size: 1.45rem; }
.side .block h2 { margin-bottom: .25rem; }

/* ---- hard containment for the bottom columns ---- */
.m-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: .9rem; }
.m-left, .timeline { min-width: 0; max-width: 100%; overflow: hidden; }
.m-left *, .m-left .gsel, .m-left .gsel-btn, .m-left label, .m-left .deploy { max-width: 100%; box-sizing: border-box; }
.m-left label.select { min-width: 0 !important; width: 100%; }
.m-left .deploy { width: 100%; }
.m-left .big-start { width: 100%; }
.sessions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.s-label, .s-val { min-width: 0; }
.gsel-btn { max-width: 100%; }
.gsel-btn > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* menu may be wider than the trigger so long labels are readable */
.gsel-menu { right: auto; min-width: 100%; width: max-content; max-width: min(40rem, 90vw); }

/* square dials */
.dial { aspect-ratio: 1 / 1; }
.dials { align-items: start; }

/* library: legend right under the bar, group centered */
.side .block:has(.legend) { justify-content: center; }
.side .block:has(.legend) .quick { margin-top: .9rem; }

/* menu at document root: fixed, above everything */
.gsel-menu { position: fixed; z-index: 9999; left: 0; top: 0; right: auto; min-width: 0; width: auto; max-width: 90vw; max-height: 50vh; overflow: auto; }
.gsel-menu.up { box-shadow: 0 -10px 30px rgba(0,0,0,.35), var(--glass-shadow); }
.gsel-item { white-space: nowrap; }

/* true square dials: face sized to leave room for the label */
.dial { aspect-ratio: 1 / 1; overflow: hidden; justify-content: center; padding: .35rem; }
.d-face { width: 78%; }
.dial .d-label { margin-top: -.35rem; }

.gsel-item { overflow: visible; text-overflow: clip; }
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 45%, transparent) !important; }
.primary { box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 28%, transparent); }
.primary:focus-visible { box-shadow: 0 4px 14px color-mix(in srgb, var(--blue) 28%, transparent), 0 0 0 3px color-mix(in srgb, #fff 45%, transparent) !important; }

/* ---- animated color field (transform-only, compositor friendly) ---- */
body::before { display: none; }
.blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blobs i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.blobs .b1 { background: radial-gradient(circle at 40% 40%, var(--blob1), transparent 62%); left: -15vmax; top: -20vmax; animation: drift1 43s ease-in-out infinite alternate; }
.blobs .b2 { background: radial-gradient(circle at 60% 40%, var(--blob2), transparent 62%); right: -20vmax; top: -10vmax; animation: drift2 52s ease-in-out infinite alternate; }
.blobs .b3 { background: radial-gradient(circle at 50% 60%, var(--blob3), transparent 62%); left: 20vmax; bottom: -30vmax; animation: drift3 59s ease-in-out infinite alternate; }
html[data-theme="light"] .blobs i { opacity: .7; }
@keyframes drift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(28vw, 22vh, 0) scale(1.15); } }
@keyframes drift2 { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-30vw, 30vh, 0) scale(.9); } }
@keyframes drift3 { from { transform: translate3d(0, 0, 0) scale(.95); } to { transform: translate3d(24vw, -28vh, 0) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .blobs i { animation: none !important; } }

/* stronger specular sheen and edge */
.machine::after, .block::after, .login::after, .modal-box::after { background: linear-gradient(115deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.09) 30%, transparent 48%); }
html[data-theme="dark"] .machine::after, html[data-theme="dark"] .block::after, html[data-theme="dark"] .login::after, html[data-theme="dark"] .modal-box::after { background: linear-gradient(115deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.045) 30%, transparent 48%); }

/* kill every possible ring/glow around buttons */
button, .button, a { -webkit-tap-highlight-color: transparent; }
button:focus, .button:focus, button:focus-visible, .button:focus-visible { outline: none !important; }
.primary, .primary:hover, .primary:focus, .primary:focus-visible { box-shadow: none !important; }
.big-start { box-shadow: none !important; }

/* deeper drop shadows on surfaces and menus */
.machine, .block, .login, .modal-box, .lb-bar { box-shadow: var(--glass-shadow), 0 24px 60px rgba(0, 0, 0, .22); }
html[data-theme="light"] .machine, html[data-theme="light"] .block, html[data-theme="light"] .login { box-shadow: var(--glass-shadow), 0 20px 48px rgba(15, 23, 42, .14); }
.gsel-menu { box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 1px 0 rgba(255,255,255,.14) inset; }
html[data-theme="light"] .gsel-menu { box-shadow: 0 18px 44px rgba(15, 23, 42, .2), 0 1px 0 rgba(255,255,255,.8) inset; }
/* light-mode gray text: darker for legibility, still gray */
html[data-theme="light"] .detail, html[data-theme="light"] .lede, html[data-theme="light"] label, html[data-theme="light"] .readout dt { color: #4a5160; }
.pill { display: inline-block; padding: .2rem .6rem; border-radius: var(--pill); font-size: .8rem; font-weight: 600; margin-right: .4rem; }
.pill.ok { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.pill.bad { background: color-mix(in srgb, var(--red) 20%, transparent); color: var(--red); }
.warnline { color: var(--orange); } .presence { color: var(--green); }
.detail.statusbig { font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 600; color: var(--text); }
.bootbar { height: 10px; background: var(--field); border-radius: 5px; overflow: hidden; margin: .5rem 0 .4rem 1.75rem; max-width: 34rem; }
#m-bootfill { display: block; height: 100%; width: 3%; background: linear-gradient(90deg, var(--orange), #ffd60a); border-radius: 5px; transition: width .6s ease; }
.genstrip { color: var(--green); }
.presence.idle { color: var(--orange); }
.events-page .genline { color: var(--green); font-size: .85rem; margin: .4rem 0 0 1.6rem; }
button.working { opacity: .55; cursor: wait; }
.modal-msg { white-space: pre-line; }
.ok { color: var(--green); }
.narrowcard { max-width: 30rem; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85em; background: var(--field); padding: .1em .35em; border-radius: 6px; }
.who { color: var(--muted); font-size: .9rem; } .who:hover { color: var(--text); text-decoration: none; }

/* drop shadows on inner boxes */
.dial, .sessions, .timeline, .gsel-btn, .lib-tools, .bulkbar, .transfers li, .statrow .st, input, select {
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 1px 0 rgba(255,255,255,.06) inset; }
html[data-theme="light"] .dial, html[data-theme="light"] .sessions, html[data-theme="light"] .timeline, html[data-theme="light"] .gsel-btn,
html[data-theme="light"] .lib-tools, html[data-theme="light"] .bulkbar, html[data-theme="light"] .transfers li, html[data-theme="light"] input, html[data-theme="light"] select {
  box-shadow: 0 8px 22px rgba(15, 23, 42, .10), 0 1px 0 rgba(255,255,255,.7) inset; }
.statrow .st { box-shadow: none; }

.danger-zone { border-color: color-mix(in srgb, var(--red) 45%, transparent); margin-top: 1.5rem; }
.danger-zone h2 { color: var(--red); }
.danger-big { background: var(--red); color: #fff; border-color: transparent; font-size: 1.05rem; padding: .85rem 1.4rem; font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--red) 40%, transparent) !important; }
.danger-big:hover { background: color-mix(in srgb, var(--red) 85%, #000); }
.modal-actions button:disabled { opacity: .4; cursor: not-allowed; }

/* events: startups as expandable rows */
.evlist { display: grid; gap: .4rem; }
.ev, .run summary { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .75rem; align-items: center; padding: .55rem .8rem; border-radius: var(--radius-sm); background: var(--field); border: 1px solid var(--line); }
.run summary { cursor: pointer; list-style: none; grid-template-columns: 7.5rem .8rem 1fr auto; }
.run summary::-webkit-details-marker { display: none; }
.run .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); }
.run.succeeded .dot { background: var(--green); } .run.failed .dot { background: var(--orange); } .run.cancelled .dot { background: var(--red); } .run.running .dot { background: var(--blue); animation: pulse 1.4s infinite; }
.run .st { font-size: .78rem; color: var(--muted); text-transform: capitalize; }
.run.succeeded .st { color: var(--green); } .run.failed .st { color: var(--orange); } .run.cancelled .st { color: var(--red); }
.run ul { list-style: none; margin: .25rem 0 .25rem 2rem; padding: .25rem 0 0 .75rem; border-left: 2px solid var(--line); display: grid; gap: .2rem; font-size: .88rem; color: var(--muted); }
/* Chromium keeps closed <details> content copyable (hidden-but-searchable rendering); force it
   fully out of the tree so selecting across folded startups can't copy their hidden rows */
.run:not([open]) > ul, .run:not([open]) > .genline { display: none; }
.run ul li { display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem; }
.run ul li.warn { color: var(--orange); } .run ul li.error { color: var(--red); }
.ev.warn .txt { color: var(--orange); } .ev.error .txt { color: var(--red); }
.when { color: var(--muted); font-size: .82rem; }

/* dial value under the face, calmer */
.dial { padding: .3rem .3rem .35rem; gap: 0; width: var(--dial, auto); height: var(--dial, auto); aspect-ratio: auto; justify-self: center; }
.dials { grid-template-columns: repeat(5, 1fr); justify-items: center; align-items: center; }
.d-face { width: 84%; }
.d-face .d-val { display: none; }
.dial > .d-val { font-weight: 600; font-size: .9rem; letter-spacing: 0; color: var(--muted); margin-top: -.5rem; line-height: 1.1; text-shadow: none; }
.dial .d-label { margin-top: .05rem; }

/* ---- fetch-from-link modal ---- */
.fetch-preview { border-radius: 12px; padding: .7rem .8rem; margin: .2rem 0 .3rem; background: rgba(127,127,127,.10); }
.fetch-preview .fp-name { font-weight: 600; word-break: break-all; }
.fetch-preview .fp-meta { opacity: .7; font-size: .88rem; margin-top: .15rem; }
.fetch-preview .bad { color: var(--danger, #e5484d); }
.button.ghost { background: transparent; box-shadow: none; }

/* ---- run header: duration + reason ---- */
.run summary .reason { display: block; grid-column: 3 / -1; opacity: .6; font-size: .82rem; font-weight: 400; }
.run summary { row-gap: .15rem; }

/* workflow readiness chips */
.chip { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; vertical-align: middle; color: var(--muted); border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); }
.chip-ready { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent); }
.chip-miss { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); }
.chip[role="button"] { cursor: pointer; }
.tile > .chip { justify-self: start; margin-left: 0; }
.chip-fix { display: grid; gap: .6rem; margin-top: .6rem; max-height: 52vh; overflow: auto; text-align: left; }
.chip-row { display: grid; gap: .45rem; padding: .65rem .75rem; border-radius: var(--radius-sm); background: var(--field); border: 1px solid var(--line); }
.chip-row > .chip-get { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }
.chip-get > input { min-width: 0; width: 100%; }
.chip-dest { color: var(--muted); font-size: .8rem; margin-left: .5rem; }
.chip-q { color: var(--green); font-size: .85rem; }
.chip-nodes { color: var(--orange); font-size: .85rem; margin: 0; }
.chip-warn { color: var(--orange); border-color: color-mix(in srgb, var(--orange) 45%, transparent); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.chip-sug { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem .55rem; color: var(--muted); font-size: .8rem; }
.chip-sug > span { min-width: 0; overflow-wrap: anywhere; }
.chip-sug > .button { padding: .1rem .6rem; font-size: .75rem; flex: none; }
.chip-fix > .chip-row:last-child { margin-bottom: .35rem; }

/* ---- chip-fix modal: wide enough for long model filenames ---- */
.modal-box:has(.chip-fix) { width: min(46rem, 94vw); }
.chip-fix { overflow-x: hidden; }
.chip-row b { overflow-wrap: anywhere; }

/* ---- language switch (mirrors the theme switch) ---- */
.lang-switch { display: inline-flex; padding: 3px; border-radius: var(--pill); background: var(--field); border: 1px solid var(--line); }
.lang-switch button { border: 0; background: transparent; padding: .25rem .6rem; border-radius: var(--pill); color: var(--muted); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; box-shadow: none; }
.lang-switch button.on { background: var(--glass-strong); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.lang-float { position: fixed; top: 1rem; right: 1rem; z-index: 30; }

/* ---- machine tabs: one pill per live machine at the top of the card ---- */
.mtabs { display: flex; gap: .5rem; margin-bottom: .55rem; flex: none; }
.mtabs[hidden] { display: none !important; }   /* author display:flex must not defeat [hidden] */
.mtab { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .95rem;
  border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass);
  cursor: pointer; font: inherit; font-size: .85rem; color: var(--muted); white-space: nowrap; }
.mtab[hidden] { display: none !important; }
.mtab.on { background: var(--glass-strong); color: var(--text); font-weight: 600; box-shadow: var(--glass-shadow); }
.mtab-plus { border-style: dashed; }
.machine.tabbed::before { display: none; }   /* the fixed-position card dot would overlap the tab row */
.mtab .mt-plus { font-weight: 700; line-height: 1; opacity: .9; }
.ts-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: none; background: #9aa3b2; }
.ts-dot.ok { background: #3ecf72; box-shadow: 0 0 8px #3ecf7288; }
.ts-dot.boot { background: #f0b23e; box-shadow: 0 0 8px #f0b23e88; animation: tspulse 1.4s ease-in-out infinite; }
.ts-dot.err { background: #e5484d; box-shadow: 0 0 8px #e5484d88; }
@keyframes tspulse { 50% { opacity: .35; } }
/* kind pills in the Start confirm modal */
.kind-pills { display: flex; gap: .5rem; margin-bottom: .6rem; }
.kind-pill { flex: 1; padding: .45rem .8rem; border-radius: 999px; cursor: pointer; font: inherit; font-size: .88rem;
  display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--glass);
  border: 1px solid color-mix(in srgb, var(--sec, var(--text)) 35%, var(--glass-edge));
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kind-pill::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sec, var(--text)); opacity: .55; }
.kind-pill:hover { background: color-mix(in srgb, var(--sec, var(--text)) 12%, var(--glass)); }
.kind-pill.on { font-weight: 600; color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sec, var(--blue)) 38%, transparent), color-mix(in srgb, var(--sec, var(--blue)) 12%, transparent)), var(--glass-strong);
  border-color: color-mix(in srgb, var(--sec, var(--blue)) 70%, transparent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--sec, var(--blue)) 32%, transparent); }
.kind-pill.on::before { opacity: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec, var(--blue)) 25%, transparent); }
.kind-pill:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.kind-note { font-size: .82rem; opacity: .85; margin: 0 0 .5rem; white-space: normal; }

/* ---- cloud tier select: share a row with workers so the start button stays in view ---- */
.deploy .cloudsel { flex: 0 0 13rem; min-width: 12rem; }
.m-left .deploy { flex-direction: row; flex-wrap: wrap; }
.m-left .deploy .gpusel { flex: 1 1 100%; }
.m-left .deploy .cloudsel { flex: 1 1 calc(56% - .3rem); width: auto; min-width: 0; }
.m-left .deploy .workers { flex: 1 1 calc(44% - .3rem); width: auto; min-width: 0; }
.m-left .deploy .big-start { flex: 1 1 100%; }
.m-left .deploy .persistsel { flex: 1 1 100%; width: auto; min-width: 0; }
/* keep trying: waiting for a GPU — nothing rented, so amber, not the billing orange */
.machine[data-state="hunting"]::before { background: var(--yellow, #e3b341); opacity: 1; box-shadow: 0 0 0 5px color-mix(in srgb, var(--yellow, #e3b341) 25%, transparent); animation: pulse 2.2s ease-in-out infinite; }
.machine[data-state="hunting"] .state { color: var(--yellow, #e3b341); }
.machine[data-state="hunting"] .cost { color: var(--muted); }

/* ---- deploy flash toast: floating failure feedback, no layout impact ---- */
.flash-toast { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 2000; max-width: 26rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem;
  padding: .7rem .9rem; border-radius: var(--radius-sm); font-size: .85rem; line-height: 1.4;
  background: color-mix(in srgb, var(--red) 22%, #10141c); border: 1px solid color-mix(in srgb, var(--red) 50%, transparent);
  color: var(--red); box-shadow: 0 8px 28px rgba(0,0,0,.45); backdrop-filter: blur(8px);
  animation: flash-in .25s ease-out; transition: opacity .5s ease, transform .5s ease; }
.flash-toast.flash-out { opacity: 0; transform: translateY(.6rem); }
@keyframes flash-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
.flash-x { background: none; border: 0; color: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 .1rem; flex: 0 0 auto; }

/* ---- host blacklist textarea matches the glass inputs ---- */
.settings-grid textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 5.5rem;
  background: var(--field); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: inherit; font: inherit; font-size: .85rem; padding: .5rem .6rem; }