/* Dashboard designs (skins.js). Laid out for an 800×480 panel. */
@font-face { font-family: "PiPixel"; src: url(fonts/pipixel.ttf) format("truetype"); font-display: block; }
#alt { position: absolute; inset: 0; z-index: 3; overflow: hidden; }
body.alt-on .overlay { inset: 0; z-index: 8; }
:where(#alt button) { cursor: none; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; background: none; border: 0; padding: 0; }
:where(#alt button:disabled) { opacity: .4; }
:where(#alt ol) { list-style: none; margin: 0; padding: 0; }
#alt [data-domain] { cursor: none; }
#alt.stale .fade { opacity: .45; }

/* ============ MONOLITH ============ */
.skin-monolith { --mo-bg: #0E0D0C; --mo-line: #34302C; --mo-text: #F3EFE8; --mo-muted: #A39C93; --mo-acc: #FF6A3D; --mo-ok: #7BD88F; --mo-warn: #F5C451; --mo-bad: #E5675A;
  background: var(--mo-bg); color: var(--mo-text); font-family: Inter, system-ui, sans-serif; padding: 0 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: 66px 196px minmax(0, 1fr) 46px; }
.mo-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; border-bottom: 1px solid var(--mo-line); min-width: 0; }
.mo-brand { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.mo-sep { width: 1px; height: 34px; background: var(--mo-line); flex: none; }
.mo-state { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 500; white-space: nowrap; overflow: hidden; --dot: #5E5852; }
.mo-state::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--dot); flex: none; }
.mo-state.ok { --dot: var(--mo-ok); } .mo-state.warn { --dot: var(--mo-warn); color: var(--mo-warn); } .mo-state.bad { --dot: var(--mo-bad); color: var(--mo-bad); }
.mo-sp { flex: 1; }
.mo-allowed { height: 48px; font-size: 24px; font-weight: 600; color: var(--mo-acc); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; white-space: nowrap; }
.mo-style { height: 50px; padding: 0 26px; border: 2px solid var(--mo-text); border-radius: 8px; font-size: 24px; font-weight: 600; }
.mo-style:active { background: var(--mo-text); color: var(--mo-bg); }
.mo-hero { border-bottom: 1px solid var(--mo-line); padding: 18px 26px 0 0; min-width: 0; overflow: hidden; }
.mo-lab { font-size: 24px; font-weight: 500; color: var(--mo-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-lab.warn { color: var(--mo-warn); } .mo-lab.alert { color: var(--mo-bad); }
.mo-big { font: 800 158px/.88 "Inter Tight", Inter, sans-serif; letter-spacing: -0.045em; color: var(--mo-acc); white-space: nowrap; margin: 6px 0 0 -6px; }
.skin-monolith.paused .mo-big { color: var(--mo-muted); }
.mo-stats { border-bottom: 1px solid var(--mo-line); position: relative; padding: 20px 0 0 40px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mo-stats::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 1px; background: var(--mo-line); }
.mo-v { font: 700 48px/1 "Inter Tight", Inter, sans-serif; letter-spacing: -0.02em; white-space: nowrap; }
.mo-k { font-size: 22px; color: var(--mo-muted); margin-top: 2px; }
.mo-list { padding-top: 8px; min-width: 0; overflow: hidden; padding-right: 50px; }
.mo-list ol { margin-top: 2px; }
.mo-list li { display: flex; justify-content: space-between; gap: 16px; padding: 0 6px; height: 32px; align-items: center; border-bottom: 1px solid var(--mo-line); font-size: 21px; }
.mo-list li:active { background: #1a1816; }
.mo-list .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mo-list .t { color: var(--mo-muted); flex: none; }
.mo-list .empty { color: var(--mo-muted); border: 0; }
.mo-act { display: flex; align-items: center; }
.mo-pause { width: 100%; height: 80px; border-radius: 10px; background: var(--mo-acc); color: #120A06; font: 700 32px Inter, sans-serif; letter-spacing: -0.01em; }
.mo-pause:active { filter: brightness(.85); }
.mo-pause.resume { background: var(--mo-warn); }
.mo-foot { grid-column: 1 / -1; border-top: 1px solid var(--mo-line); display: flex; align-items: center; font-size: 22px; color: var(--mo-muted); white-space: pre; }

/* ============ SWISS ============ */
.skin-swiss { --sw-paper: #F2F0EA; --sw-ink: #111; --sw-red: #E2231A;
  background: var(--sw-paper); color: var(--sw-ink); font-family: Inter, system-ui, sans-serif;
  display: grid; grid-template-columns: 500px minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr) 146px 50px; }
.sw-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; padding: 0 20px 0 22px; border-bottom: 2px solid var(--sw-ink); min-width: 0; }
.sw-mark { width: 30px; height: 30px; background: var(--sw-red); flex: none; }
.sw-brand { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.sw-sep { width: 2px; height: 34px; background: var(--sw-ink); flex: none; }
.sw-state { font-size: 30px; font-weight: 700; color: var(--sw-red); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-state.warn { color: #C77700; } .sw-state.bad { color: var(--sw-ink); }
.sw-sp { flex: 1; }
.sw-allowed { height: 48px; font-size: 24px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; white-space: nowrap; }
.sw-style { height: 48px; padding: 0 18px; border: 2px solid var(--sw-ink); font-size: 24px; font-weight: 700; }
.sw-style:active { background: var(--sw-ink); color: var(--sw-paper); }
.sw-lab { font-size: 22px; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-lab.alert { color: var(--sw-red); }
.sw-a { border-right: 2px solid var(--sw-ink); border-bottom: 2px solid var(--sw-ink); padding: 18px 22px 0; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.sw-big { font: 800 172px/.84 "Inter Tight", Inter, sans-serif; letter-spacing: -0.055em; white-space: nowrap; margin: auto 0 18px -6px; }
.skin-swiss.paused .sw-big { color: #A3A19B; }
.sw-bc { border-bottom: 2px solid var(--sw-ink); display: grid; grid-template-rows: 1fr 1fr; min-width: 0; }
.sw-b { padding: 12px 20px 0; min-width: 0; overflow: hidden; }
.sw-b + .sw-b { border-top: 2px solid var(--sw-ink); }
.sw-mid { font: 800 62px/1 "Inter Tight", Inter, sans-serif; letter-spacing: -0.035em; margin-top: 6px; white-space: nowrap; }
.sw-mid.red { color: var(--sw-red); }
.skin-swiss.paused .sw-mid.red { color: #A3A19B; }
.sw-c { border-right: 2px solid var(--sw-ink); border-bottom: 2px solid var(--sw-ink); padding: 10px 22px 0; min-width: 0; overflow: hidden; }
.sw-list { margin-top: 4px; }
.sw-list li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: center; height: 35px; font-size: 21px; font-weight: 600; }
.sw-list li + li { border-top: 1px solid var(--sw-ink); }
.sw-list li:active { background: #E4E1D8; }
.sw-list .n { font-weight: 500; font-size: 20px; padding-left: 2px; }
.sw-list .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-list .t { font-weight: 500; }
.sw-list .empty { display: block; color: #777; }
.sw-pause { border-bottom: 2px solid var(--sw-ink); background: var(--sw-red); color: #fff; font: 800 34px/1 Inter, sans-serif; letter-spacing: -0.02em;
  display: flex; align-items: center; justify-content: space-between; padding: 0 26px; text-align: left; }
.sw-pause .arr { font-size: 40px; font-weight: 500; }
.sw-pause.resume { background: var(--sw-ink); }
.sw-pause:active { filter: brightness(.85); }
.sw-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }

/* ============ BAUHAUS (unchanged) ============ */
.skin-bauhaus { --bh-ink: #141414; --bh-red: #D52B1E; --bh-yellow: #F4C21B; --bh-blue: #1D4F9B; --bh-paper: #EEE6D3;
  background: var(--bh-paper); color: var(--bh-ink); font-family: Inter, system-ui, sans-serif; }
.bh-blue { position: absolute; left: 0; top: 0; width: 60%; height: 68%; background: var(--bh-blue); color: #fff; padding: 22px 26px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.bh-lab { font-weight: 800; font-size: 17px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-big { font: 900 150px/.8 Inter, sans-serif; letter-spacing: -0.06em; white-space: nowrap; padding-bottom: 46px; }
.skin-bauhaus.paused .bh-blue { background: #6E7B90; }
.bh-rule { position: absolute; left: 60%; top: 0; width: 10px; height: 46%; background: var(--bh-ink); }
.bh-circle { position: absolute; left: 44%; top: 50%; height: 47%; aspect-ratio: 1; border-radius: 50%; background: var(--bh-red);
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; box-shadow: 0 0 0 0 transparent; }
.bh-pct { font: 900 48px/1 Inter, sans-serif; letter-spacing: -0.03em; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.bh-of { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-top: 4px; text-shadow: 0 1px 0 rgba(0,0,0,.3); }
.bh-yellow { position: absolute; left: 0; top: 68%; width: 42%; height: 32%; border: 0; border-radius: 0; background: var(--bh-yellow); color: var(--bh-ink);
  display: flex; align-items: center; gap: 22px; padding: 0 28px; text-align: left; font: 900 28px/1 Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.bh-yellow:active { filter: brightness(.9); }
.bh-yellow.resume { background: var(--bh-ink); color: var(--bh-yellow); }
.bh-yellow .bars { width: 34px; height: 40px; flex: none; background: linear-gradient(90deg, currentColor 0 36%, transparent 36% 64%, currentColor 64%); }
.bh-yellow .tri { width: 0; height: 0; flex: none; border-left: 36px solid currentColor; border-top: 22px solid transparent; border-bottom: 22px solid transparent; }
.bh-col { position: absolute; left: 75%; right: 0; top: 0; bottom: 0; padding: 18px 18px 14px 20px; display: flex; flex-direction: column; min-width: 0; }
.bh-head { display: flex; align-items: center; justify-content: space-between; }
.bh-head b { font-weight: 900; font-size: 24px; letter-spacing: .04em; text-transform: uppercase; }
.bh-style { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--bh-red); position: relative; }
.bh-style::after { content: ""; position: absolute; inset: 11px; background: var(--bh-paper); }
.bh-state { margin-top: 10px; font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bh-state::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--bh-blue); flex: none; }
.bh-state.warn::before { background: var(--bh-yellow); border-radius: 0; } .bh-state.bad::before { background: var(--bh-red); border-radius: 0; }
.bh-list { list-style: none; margin-top: 14px; flex: 1; min-height: 0; overflow: hidden; }
.bh-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 10px; padding: 8px 0; border-top: 3px solid var(--bh-ink); }
.bh-list li:active { background: #E2D8C2; }
.bh-list .d { font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-list .t { grid-column: 2; font-size: 12px; font-weight: 600; color: #6A6152; text-transform: uppercase; letter-spacing: .06em; }
.bh-list .empty { display: block; font-weight: 700; }
.sh { grid-row: 1 / 3; align-self: center; width: 14px; height: 14px; }
.sh.ci { border-radius: 50%; background: var(--bh-red); } .sh.sq { background: var(--bh-blue); }
.sh.tr { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid var(--bh-ink); }
.bh-meta { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6A6152; white-space: nowrap; }
@media (min-aspect-ratio: 5/2) { .bh-big { font-size: 130px; padding-bottom: 30px; } .bh-circle { left: 46%; top: 44%; height: 54%; } }

/* ============ TERMINAL ============ */
.skin-terminal { --tm-bg: #080F0A; --tm-g: #84F0A0; --tm-dim: #8AA894; --tm-line: #5FC27D; --tm-amber: #F5B85A; --tm-off: #1C4229;
  background: radial-gradient(ellipse at 50% 45%, #0D1A11 0%, var(--tm-bg) 75%); color: var(--tm-g);
  font: 24px/1.2 "DejaVu Sans Mono", Menlo, ui-monospace, monospace; text-shadow: 0 0 6px rgba(132,240,160,.35); }
.skin-terminal::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.18) 2px 3px); }
.tm-top { position: absolute; left: 16px; right: 14px; top: 4px; height: 50px; display: flex; align-items: center; gap: 12px; }
.tm-title { font-size: 25px; white-space: pre; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tm-title b { font-weight: 700; } .tm-title b.warn { color: var(--tm-amber); } .tm-title b.bad { color: #FF6B5E; }
.tm-sp { flex: 1; }
.tm-btn { height: 48px; padding: 0 10px; border: 2px solid var(--tm-line); font-size: 20px; white-space: nowrap; text-shadow: inherit; }
.tm-btn:active { background: #10301A; }
.tm-box { position: absolute; border: 2px dashed var(--tm-line); padding: 8px 18px; overflow: hidden; }
.tm-box > .c { position: absolute; width: 14px; height: 18px; font: 700 20px/18px "DejaVu Sans Mono", Menlo, monospace; text-align: center; color: var(--tm-line); background: var(--tm-bg); font-style: normal; }
.tm-box > .tl { left: -8px; top: -10px; } .tm-box > .tr { right: -8px; top: -10px; } .tm-box > .bl { left: -8px; bottom: -10px; } .tm-box > .br { right: -8px; bottom: -10px; }
.tm-a { left: 12px; top: 58px; width: 466px; height: 178px; }
.tm-b { left: 492px; top: 58px; width: 296px; height: 86px; padding-top: 4px; }
.tm-c { left: 492px; top: 156px; width: 296px; height: 80px; padding-top: 2px; }
.tm-d { left: 12px; top: 250px; width: 776px; height: 158px; padding-top: 4px; }
.tm-lab { font-size: 22px; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-lab.alert { color: var(--tm-amber); }
.tm-big { height: 124px; margin-top: 8px; display: flex; align-items: center; }
.tm-big svg { width: 100%; height: 100%; fill: var(--tm-g); filter: drop-shadow(0 0 5px rgba(132,240,160,.35)); }
.skin-terminal.paused .tm-big svg { fill: #5C8A69; }
.tm-pct { font-size: 30px; font-weight: 700; color: var(--tm-amber); margin-top: 0; line-height: 1.1; white-space: nowrap; text-shadow: 0 0 6px rgba(245,184,90,.35); }
.tm-bar { display: flex; gap: 2px; margin-top: 3px; }
.tm-bar i { flex: 1; height: 15px; background: var(--tm-off); }
.tm-bar i.on { background: var(--tm-amber); box-shadow: 0 0 5px rgba(245,184,90,.4); }
.tm-q { font-size: 42px; font-weight: 700; line-height: 1.1; margin-top: 0; white-space: nowrap; }
.tm-tail { margin-top: 4px; }
.tm-tail .row { display: flex; align-items: center; gap: 0; height: 29px; font-size: 22px; white-space: nowrap; min-width: 0; }
.tm-tail .row:active { background: #10301A; }
.tm-tail .ts { color: var(--tm-dim); width: 156px; flex: none; text-shadow: none; }
.tm-tail .bk { color: var(--tm-amber); width: 108px; flex: none; text-shadow: 0 0 6px rgba(245,184,90,.35); }
.tm-tail .d { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tm-tail .empty { color: var(--tm-dim); }
.tm-tail .cur { width: 14px; height: 24px; background: var(--tm-g); margin-left: 4px; flex: none; animation: tm-blink 1.1s steps(1) infinite; }
@keyframes tm-blink { 50% { opacity: 0; } }
.tm-foot { position: absolute; left: 22px; right: 12px; bottom: 6px; height: 60px; display: flex; align-items: center; justify-content: space-between; }
.tm-foot > span { font-size: 26px; white-space: pre; }
.tm-pause { height: 56px; min-width: 230px; padding: 0 18px; border: 3px solid var(--tm-amber); color: var(--tm-amber); font-size: 28px; font-weight: 700; text-shadow: 0 0 6px rgba(245,184,90,.35); white-space: pre; }
.tm-pause:active { background: #2A1E08; }
.tm-pause.resume { border-color: var(--tm-g); color: var(--tm-g); }

/* ============ 8-BIT ============ */
.skin-arcade { --ar-bg: #0A0A1F; --ar-cyan: #27C4E8; --ar-yellow: #F8C630; --ar-white: #F2F2F2; --ar-red: #E8574F;
  background: var(--ar-bg); color: var(--ar-white); font-family: PiPixel, "DejaVu Sans Mono", monospace; -webkit-font-smoothing: none;
  display: grid; grid-template-columns: 410px minmax(0, 1fr); grid-template-rows: 60px 84px minmax(0, 1fr) 74px; }
.ar-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 18px; border-bottom: 3px solid var(--ar-cyan); min-width: 0; }
.ar-shield { width: 36px; height: 40px; flex: none; background:
  linear-gradient(var(--ar-cyan), var(--ar-cyan)) 50% 40% / 4px 16px no-repeat, linear-gradient(var(--ar-cyan), var(--ar-cyan)) 50% 40% / 16px 4px no-repeat,
  linear-gradient(var(--ar-bg), var(--ar-bg)) 50% 0 / 24px 26px no-repeat; border: 4px solid var(--ar-white); border-radius: 4px 4px 18px 18px; }
.ar-brand { font-size: 32px; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
.ar-state { font-size: 24px; color: var(--ar-cyan); white-space: nowrap; margin-left: 6px; overflow: hidden; }
.ar-state.warn { color: var(--ar-yellow); animation: ar-blink 1s steps(1) infinite; } .ar-state.bad { color: var(--ar-red); }
@keyframes ar-blink { 50% { opacity: .35; } }
.ar-sp { flex: 1; }
.ar-btn { height: 48px; padding: 0 14px; border: 3px solid var(--ar-white); border-radius: 6px; font-size: 24px; white-space: nowrap; }
.ar-btn:active { background: #23234A; }
.ar-hud { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr 1.15fr; border-bottom: 3px solid var(--ar-cyan); }
.ar-hud > div { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; min-width: 0; padding: 0 10px; overflow: hidden; }
.ar-hud > div + div::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; background: var(--ar-cyan); }
.ar-v { font-size: 40px; line-height: 1; white-space: nowrap; max-width: 100%; overflow: hidden; }
.ar-v.y { color: var(--ar-yellow); }
.skin-arcade.paused .ar-v.y { color: #8A8AA8; }
.ar-k { font-size: 16px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ar-scene { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ar-cv { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.ar-box { margin: 12px 14px 12px 6px; border: 4px solid var(--ar-cyan); border-radius: 10px; box-shadow: inset 0 0 0 3px var(--ar-bg), inset 0 0 0 5px rgba(39,196,232,.45);
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ar-title { font-size: 24px; text-align: center; padding: 16px 8px 12px; border-bottom: 3px solid var(--ar-cyan); margin: 0 10px; white-space: nowrap; }
.ar-box ol { flex: 1; display: flex; flex-direction: column; padding: 0 10px; }
.ar-box li { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 16px; padding: 0 2px; min-height: 0; }
.ar-box li + li { border-top: 3px solid var(--ar-cyan); }
.ar-box li:active { background: #18183A; }
.ar-box .d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-transform: uppercase; }
.ar-box .t { flex: none; }
.ar-box .empty { color: #8A8AA8; }
.ar-foot { grid-column: 1 / -1; border-top: 3px solid var(--ar-cyan); display: flex; align-items: center; gap: 18px; padding: 0 14px 0 18px; min-width: 0; }
.ar-pause { height: 56px; padding: 0 16px; border-radius: 10px; background: var(--ar-yellow); color: #141414; font-size: 24px;
  display: flex; align-items: center; gap: 14px; white-space: nowrap; box-shadow: inset 0 -4px 0 #C99A10; }
.ar-pause:active { filter: brightness(.85); }
.ar-pause.resume { background: var(--ar-cyan); box-shadow: inset 0 -4px 0 #1888A2; }
.ar-pause .bars { width: 20px; height: 26px; flex: none; background: linear-gradient(90deg, currentColor 0 38%, transparent 38% 62%, currentColor 62%); }
.ar-pause .play { width: 0; height: 0; flex: none; border-left: 20px solid currentColor; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.ar-allowed { height: 52px; padding: 0 18px; }
.ar-vr { width: 4px; height: 44px; background: var(--ar-cyan); flex: none; }
.ar-meta { font-size: 16px; line-height: 1.5; white-space: pre; overflow: hidden; min-width: 0; display: flex; flex-direction: column; }

/* ============ FLOW ============ */
.skin-flow { --fl-teal: #5EE6CF; --fl-text: #F2F5F8; --fl-muted: #9FB0C0; --fl-orange: #FF8A3D; --fl-warn: #F2B544; --fl-bad: #FF6B5E;
  background: radial-gradient(ellipse at 30% 70%, rgba(94,230,207,.07), transparent 55%), linear-gradient(180deg, #0F1C29 0%, #0A131C 100%);
  color: var(--fl-text); font-family: Inter, system-ui, sans-serif; }
.fl-top { position: absolute; left: 14px; right: 14px; top: 10px; height: 64px; border-radius: 16px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
  display: flex; align-items: center; gap: 14px; padding: 0 8px 0 20px; }
.fl-brand { font-size: 31px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.fl-state { display: flex; align-items: center; gap: 12px; font-size: 22px; font-weight: 500; white-space: nowrap; overflow: hidden; --dot: #4C5666; }
.fl-state::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 10px var(--dot); flex: none; }
.fl-state.ok { --dot: var(--fl-teal); } .fl-state.warn { --dot: var(--fl-warn); color: var(--fl-warn); } .fl-state.bad { --dot: var(--fl-bad); color: var(--fl-bad); }
.fl-sp { flex: 1; }
.fl-allowed { height: 48px; font-size: 24px; font-weight: 500; color: var(--fl-teal); text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; white-space: nowrap; }
.fl-style { height: 48px; padding: 0 24px; border: 2px solid var(--fl-teal); border-radius: 12px; font-size: 22px; font-weight: 500; }
.fl-style:active { background: rgba(94,230,207,.15); }
.fl-hero { position: absolute; left: 26px; top: 88px; width: 430px; }
.fl-lab { font-size: 22px; color: var(--fl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-lab.warn { color: var(--fl-warn); } .fl-lab.alert { color: var(--fl-bad); }
.fl-big { font: 800 118px/.95 "Inter Tight", Inter, sans-serif; letter-spacing: -0.035em; white-space: nowrap; margin: 4px 0 0 -4px; }
.skin-flow.paused .fl-big { color: var(--fl-muted); }
.fl-sub { font-size: 22px; color: #C9D4DF; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-stream { position: absolute; left: 0; top: 248px; width: 470px; height: 180px; }
.fl-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.fl-ic { position: absolute; width: 44px; height: 44px; color: var(--fl-teal); filter: drop-shadow(0 0 6px rgba(94,230,207,.5)); }
.fl-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.fl-ic.h { left: 22px; top: 25px; } .fl-ic.l { left: 22px; top: 89px; }
.fl-ic.g { right: 18px; top: 50px; width: 56px; height: 56px; }
.fl-card { position: absolute; left: 480px; right: 16px; top: 88px; bottom: 16px; border-radius: 18px; background: rgba(160,190,220,.07); border: 1px solid rgba(190,215,240,.16);
  box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 16px 14px 14px; display: flex; flex-direction: column; }
.fl-ct { font-size: 28px; font-weight: 700; padding: 0 0 10px 18px; }
.fl-card ol { flex: 1; border-radius: 10px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); overflow: hidden; display: flex; flex-direction: column; }
.fl-card li { flex: 1; padding: 0 18px; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.fl-card li + li { border-top: 1px solid rgba(255,255,255,.09); }
.fl-card li:active { background: rgba(255,255,255,.05); }
.fl-card .d { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-card .t { font-size: 17px; color: var(--fl-muted); margin-top: 2px; }
.fl-card .empty { color: var(--fl-muted); font-size: 20px; }
.fl-pause { flex: none; height: 48px; padding: 0 16px; border-radius: 12px; background: var(--fl-teal); color: #08201C; white-space: nowrap;
  font: 700 22px Inter, sans-serif; box-shadow: 0 0 18px rgba(94,230,207,.25); }
.fl-pause:active { filter: brightness(.85); }
.fl-pause.resume { background: var(--fl-warn); box-shadow: 0 0 24px rgba(242,181,68,.25); }
.fl-foot { position: absolute; left: 26px; bottom: 22px; font-size: 20px; color: #C9D4DF; white-space: pre; }