/* ════════════════════════════════════════════════════════════════════
   ORBIT-UI CATALOG BUNDLE · loaded ONLY by orbit-ui.html
   8 surface CSS files, verbatim 1:1, so the catalog renders every
   component with its real shipping styles. Re-synced 2026-05-28T17:41:52.359Z
   ════════════════════════════════════════════════════════════════════ */

/* ╔═ verbatim from orbit-os/styles.css · 36471 chars ═╗ */
/* ====================================================================
   Astra OS — host styles
   Layered on top of orbit-tokens.css. Uses only system tokens.
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
}

body {
  background: var(--inv-100);
  color: var(--100);
  font-family: var(--f-sans);
  font-weight: var(--fw-thin);
  letter-spacing: var(--ls-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Starfield background ────────────────────────────────── */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 1200px 800px at 18% 28%, rgba(119, 119, 119, 0.10), transparent 60%),
    radial-gradient(ellipse 900px 600px at 82% 78%, rgba(165, 165, 165, 0.06), transparent 60%),
    radial-gradient(ellipse 1600px 1200px at 50% 50%, rgba(30, 30, 30, 0.4), transparent 75%),
    var(--inv-100);
}
.scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── OS shell ─────────────────────────────────────────────── */
.os {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  padding: var(--sp-5) var(--sp-6);
  gap: var(--sp-5);
}

/* ── Top bar ──────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--60);
  text-transform: uppercase;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--100);
  font-weight: 480;
}
.topbar .glyph {
  width: 22px;
  height: 22px;
  border-radius: var(--r-cap);
  border: 1px solid var(--40);
  position: relative;
  display: inline-block;
}
.topbar .glyph::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: var(--r-cap);
  background: var(--100);
  box-shadow: 0 0 8px var(--100);
}
.topbar .orb-crumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.topbar .orb-crumb::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: var(--r-cap);
  background: var(--20);
  display: inline-block;
}
.topbar .spacer { flex: 1; }
.topbar .orb-env {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  text-transform: none;
  letter-spacing: 0.16px;
  color: var(--80);
}
.topbar .orb-env .dot {
  width: 6px; height: 6px; border-radius: var(--r-cap);
  background: var(--100);
  box-shadow: 0 0 6px var(--100);
}

/* ── Body grid: Hero + Right column ──────────────────────── */
.orb-body-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.9fr);
  gap: var(--sp-6);
  min-height: 0;
}
.orb-wall-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr);
  gap: var(--sp-4);
}

.orb-col-left, .orb-col-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-height: 0;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card .card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.card .card-head h3 {
  font-size: 14px;
  font-weight: 480;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--80);
  line-height: 1;
  text-shadow: none;
}
.card .head-meta {
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0.2px;
  font-family: var(--f-mono);
}

/* ── Hero (time + weather) ───────────────────────────────── */
.hero {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.hero .greeting {
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--60);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.hero .greeting .pulse {
  width: 8px; height: 8px;
  border-radius: var(--r-cap);
  background: var(--100);
  box-shadow: 0 0 12px var(--100);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}
.hero .clock {
  font-family: var(--f-sans);
  font-weight: 100;
  font-size: clamp(72px, 12vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--100);
  text-shadow: var(--ts-h1);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.hero .clock .seconds {
  font-size: 0.22em;
  font-weight: 200;
  color: var(--40);
  letter-spacing: 0;
  margin-top: 0.4em;
  font-variant-numeric: tabular-nums;
}
.hero .meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  font-size: 14px;
  color: var(--60);
  flex-wrap: wrap;
}
.hero .meta-row .orb-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.hero .meta-row .orb-item .v {
  color: var(--100);
  font-weight: 200;
  font-size: 16px;
}
.hero .meta-row .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--40);
}

/* ── Agenda ──────────────────────────────────────────────── */
.orb-agenda-list {
  display: flex;
  flex-direction: column;
}
.agenda-row {
  display: grid;
  grid-template-columns: 70px 8px 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--5);
  font-size: 14px;
}
.agenda-row:first-child { border-top: 0; }
.agenda-row .orb-time {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--80);
  font-weight: 400;
  letter-spacing: 0;
}
.agenda-row .dot {
  width: 6px; height: 6px;
  border-radius: var(--r-cap);
  background: var(--40);
}
.agenda-row.now .dot {
  background: var(--100);
  box-shadow: 0 0 8px var(--100);
}
.agenda-row.now .orb-time { color: var(--100); }
.agenda-row .label {
  color: var(--100);
  font-weight: 200;
}
.agenda-row .who {
  display: block;
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0.2px;
  margin-top: 2px;
}
.agenda-row .tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--60);
  border: 1px solid var(--10);
  padding: 3px 8px;
  border-radius: var(--r-cap);
}
.agenda-row.now .tag {
  color: var(--100);
  border-color: var(--100);
}

/* ── Now playing ─────────────────────────────────────────── */
.orb-now-playing {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.np-row { display: flex; gap: var(--sp-4); align-items: center; }
.np-art {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 30% 30%, rgba(165, 165, 165, 0.5), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(119, 119, 119, 0.6), transparent 55%),
    #0d0d0d;
  border: 1px solid var(--10);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.np-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, var(--inv-40) 100%);
}
.orb-np-text { display: flex; flex-direction: column; min-width: 0; }
.np-title { font-size: 15px; color: var(--100); font-weight: 200; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-artist { font-size: 12px; color: var(--60); margin-top: 2px; }
.np-progress {
  height: 2px; background: var(--5); border-radius: var(--r-cap); overflow: hidden;
}
.np-progress .bar {
  height: 100%; width: 38%;
  background: var(--100);
  border-radius: var(--r-cap);
}
.orb-np-controls {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--40); font-family: var(--f-mono);
}
.orb-np-buttons { display: flex; gap: var(--sp-3); align-items: center; color: var(--80); }
.orb-np-buttons .orb-btn-icn {
  width: 32px; height: 32px; border-radius: var(--r-cap);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--80);
  cursor: pointer;
  transition: all 220ms var(--ease-out);
}
.orb-np-buttons .orb-btn-icn:hover { background: var(--4); color: var(--100); }
.orb-np-buttons .orb-btn-icn.primary {
  background: var(--100); color: var(--inv-100);
}

/* ── Home controls ───────────────────────────────────────── */
.controls-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.ctrl {
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  cursor: pointer;
  transition: all 220ms var(--ease-out);
}
.ctrl:hover { background: var(--4); border-color: var(--10); }
.ctrl.on { border-color: var(--100); background: rgba(165, 165, 165, 0.04); }
.ctrl .ctrl-name {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--60);
}
.ctrl .ctrl-val {
  font-size: 18px;
  font-weight: 200;
  color: var(--100);
  display: flex; align-items: baseline; gap: 4px;
}
.ctrl .ctrl-val .unit { font-size: 11px; color: var(--40); }
.ctrl.on .ctrl-name { color: var(--100); }

/* ── Activity log (bottom strip) ─────────────────────────── */
.log {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
  overflow: hidden;
  white-space: nowrap;
}
.log .log-label {
  color: var(--60);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: var(--f-sans);
  flex-shrink: 0;
}
.log .stream { display: flex; gap: var(--sp-5); overflow: hidden; }
.log .entry { display: inline-flex; gap: var(--sp-2); flex-shrink: 0; }
.log .entry .t { color: var(--40); }
.log .entry .lv-info { color: var(--80); }
.log .entry .lv-warn { color: var(--100); }
.log .entry .lv-ok { color: var(--100); }
.log .entry .lv-dim { color: var(--40); }

/* ── Astra dock (collapsed) ──────────────────────────────── */
.dock-wrap {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 50;
  pointer-events: none;
}
.dock {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 18px 10px 12px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;
  transition: all 280ms var(--ease-out);
  cursor: pointer;
  min-height: 56px;
}
.dock:hover {
  border-color: var(--20);
  background: rgba(0,0,0,0.65);
}
.dock .orb-mount { width: 40px; height: 40px; flex-shrink: 0; }
.dock .dock-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding-right: var(--sp-2);
}
.dock .dock-name {
  font-size: 13px;
  font-weight: 480;
  color: var(--100);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.dock .dock-status {
  font-size: 11px;
  color: var(--60);
  letter-spacing: 0.16px;
  white-space: nowrap;
  overflow: hidden;
  max-width: 260px;
  text-overflow: ellipsis;
}
.dock .dock-status.orb-italic { font-style: italic; color: var(--40); }
.dock-divider {
  width: 1px;
  align-self: stretch;
  background: var(--10);
  margin: 6px 0;
}
.dock .orb-quick {
  display: flex; gap: 4px; align-items: center;
}
.dock .orb-qbtn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--60);
  width: 36px; height: 36px;
  border-radius: var(--r-cap);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 200ms var(--ease-out);
}
.dock .orb-qbtn:hover { color: var(--100); background: var(--5); }
.dock .orb-qbtn.active { color: var(--100); background: rgba(165, 165, 165, 0.08); }

/* live waveform stripe inside dock */
.dock-wave {
  display: flex; align-items: center; gap: 2px;
  height: 24px; width: 90px;
}
.dock-wave .b {
  width: 2px; background: var(--80); border-radius: 1px;
  transition: height 60ms linear;
}
.dock-wave.astra .b { background: var(--100); }

/* ── Astra panel (expanded) ──────────────────────────────── */
.panel {
  pointer-events: auto;
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  width: min(880px, calc(100vw - 48px));
  background: rgba(10, 10, 10, 0.82);
  border: 1px solid var(--10);
  border-radius: 28px;
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  box-shadow: 0 24px 80px rgba(0,0,0,0.7);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width 320ms var(--ease-out), height 320ms var(--ease-out),
              border-radius 320ms var(--ease-out), bottom 320ms var(--ease-out),
              left 320ms var(--ease-out), top 320ms var(--ease-out);
}

.panel.orb-video-mode {
  /* Hide the regular panel chrome when in video mode — VideoTakeover renders separately */
  display: none;
}

.orb-video-takeover {
  pointer-events: auto;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(4, 4, 4, 0.94);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.orb-video-takeover .orb-painting-nebula { z-index: 1; }
.orb-video-takeover .orb-vt-head {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid var(--5);
}
.orb-video-takeover .orb-vt-body {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}
.orb-video-takeover .orb-devices {
  position: relative;
  z-index: 5;
  background: rgba(0,0,0,0.45);
}
.orb-video-takeover .orb-video-view { gap: var(--sp-6); }
.orb-video-takeover .orb-video-orb-mount {
  width: min(520px, 50vh);
  height: min(520px, 50vh);
}
.orb-video-takeover .orb-video-orb-mount .ring { inset: -16px; }
.orb-video-takeover .orb-video-caption {
  font-size: clamp(20px, 2.4vw, 34px);
  font-weight: 100;
  max-width: 900px;
  letter-spacing: -0.2px;
}
.orb-video-takeover .orb-vt-head .panel-id {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.orb-video-takeover .orb-vt-head .panel-id .name {
  font-size: 12px; font-weight: 480; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--100);
}
.orb-video-takeover .orb-vt-head .panel-id .sub {
  font-size: 11px; color: var(--60); font-family: var(--f-mono); letter-spacing: 0;
}
.orb-video-takeover .orb-vt-head .orb-mode-tabs button {
  padding: 5px 10px;
  font-size: 10px;
}
.orb-video-takeover .orb-painting-nebula {
  background-size: 90vmin 90vmin;
  filter: blur(14px) saturate(1.3) brightness(0.6);
}
.orb-video-takeover .orb-painting-nebula {
  background-size: 90vmin 90vmin;
  filter: blur(14px) saturate(1.3) brightness(0.6);
}
.orb-video-takeover .orb-painting-nebula.on { opacity: 0.42; }

/* Hide the scene switcher and hotkeys when the cinematic video takeover is active */
body:has(.orb-video-takeover) .scene-switcher,
body:has(.orb-video-takeover) .hotkeys,
body:has(.orb-video-takeover) .orb-sys-tray {
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-out);
}

.panel-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  border-bottom: 1px solid var(--5);
}
.panel-head .orb-mount-sm { width: 36px; height: 36px; }
.panel-head .panel-id {
  display: flex; flex-direction: column;
}
.panel-head .panel-id .name {
  font-size: 12px; font-weight: 480; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--100);
}
.panel-head .panel-id .sub {
  font-size: 11px; color: var(--60); font-family: var(--f-mono); margin-top: 1px;
}
.panel-head .spacer { flex: 1; }
.orb-mode-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--4);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
}
.orb-mode-tabs button {
  background: transparent;
  border: 0;
  color: var(--60);
  font-family: inherit;
  font-size: 11px;
  font-weight: 480;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 200ms var(--ease-out);
}
.orb-mode-tabs button:hover { color: var(--100); }
.orb-mode-tabs button.active {
  background: var(--100); color: var(--inv-100);
}
.panel-close {
  width: 32px; height: 32px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--10);
  color: var(--60);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 200ms var(--ease-out);
}
.panel-close:hover { color: var(--100); border-color: var(--40); }

.panel-body {
  padding: var(--sp-5);
  min-height: 240px;
  position: relative;
}

/* ── VOICE mode ──────────────────────────────────────────── */
.orb-voice-view {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-5);
  align-items: center;
  min-height: 220px;
}
.orb-voice-orb-mount {
  width: 200px; height: 200px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  justify-self: center;
}
.orb-voice-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.orb-voice-status {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--60); display: flex; align-items: center; gap: var(--sp-2);
}
.orb-voice-status .dot {
  width: 6px; height: 6px; border-radius: var(--r-cap);
  background: var(--100); box-shadow: 0 0 8px var(--100);
}
.orb-voice-status.user .dot { background: var(--80); box-shadow: 0 0 8px var(--80); }
.orb-voice-status.thinking .dot { background: var(--40); box-shadow: none; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.orb-voice-line {
  font-size: 22px;
  font-weight: 180;
  line-height: 1.35;
  color: var(--100);
  text-shadow: var(--ts-h2);
  letter-spacing: 0;
  min-height: 64px;
}
.orb-voice-line.user { color: var(--80); font-style: italic; }
.orb-voice-line .caret {
  display: inline-block;
  width: 8px; height: 1em;
  background: var(--100);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1s steps(2, end) infinite;
}
.orb-voice-bars {
  display: flex; align-items: center; gap: 3px;
  height: 30px;
}
.orb-voice-bars .b {
  width: 3px; background: var(--40); border-radius: 2px;
  transition: height 80ms linear;
}
.orb-voice-bars.user .b { background: var(--80); }
.orb-voice-bars.astra .b { background: var(--100); }

/* tool use stream */
.orb-tool-stream {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--2);
  border: 1px solid var(--5);
  border-left: 2px solid var(--100);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--80);
  letter-spacing: 0;
  line-height: 1.7;
}
.orb-tool-stream .head {
  color: var(--100);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-family: var(--f-sans);
  font-weight: 480;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 6px;
}
.orb-tool-stream .line { color: var(--60); }
.orb-tool-stream .line .ok { color: var(--100); }
.orb-tool-stream .line .arg { color: var(--80); }
.orb-tool-stream .line .nm { color: var(--100); }

/* ── VIDEO mode ──────────────────────────────────────────── */
.orb-video-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) 0 var(--sp-2);
}
.orb-video-orb-mount {
  width: 320px; height: 320px;
  position: relative;
}
.orb-video-orb-mount .ring {
  position: absolute;
  inset: -8px;
  border-radius: var(--r-cap);
  border: 1px solid var(--10);
  pointer-events: none;
  animation: spin 40s linear infinite;
}
.orb-video-orb-mount .ring::before,
.orb-video-orb-mount .ring::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: var(--r-cap);
  background: var(--100);
  box-shadow: 0 0 12px var(--100);
}
.orb-video-orb-mount .ring::before { top: -3px; left: 50%; transform: translateX(-50%); }
.orb-video-orb-mount .ring::after  { background: var(--80); box-shadow: 0 0 12px var(--80); bottom: -3px; left: 50%; transform: translateX(-50%); }
@keyframes spin { to { transform: rotate(360deg); } }

.orb-video-caption {
  font-size: 20px;
  font-weight: 180;
  color: var(--80);
  text-align: center;
  max-width: 640px;
  line-height: 1.4;
  text-shadow: var(--ts-h3);
  min-height: 56px;
}
.orb-video-meta {
  display: flex; gap: var(--sp-5); align-items: center;
  font-size: 11px; color: var(--40);
  font-family: var(--f-mono);
}
.orb-video-meta .v { color: var(--80); }
.orb-video-controls {
  display: flex; gap: var(--sp-3); align-items: center;
}
.orb-video-controls button {
  width: 48px; height: 48px; border-radius: var(--r-cap);
  border: 1px solid var(--10); background: var(--2);
  color: var(--80); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 200ms var(--ease-out);
}
.orb-video-controls button:hover { color: var(--100); background: var(--5); border-color: var(--20); }
.orb-video-controls button.danger {
  background: rgba(214, 38, 3, 0.15); border-color: var(--red, #d62603); color: var(--red, #d62603);
}
.orb-video-controls button.danger:hover { background: var(--red, #d62603); color: var(--100); }

/* ── TEXT mode ───────────────────────────────────────────── */
.orb-chat-view {
  display: flex;
  flex-direction: column;
  height: 360px;
}
.orb-chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding-right: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--10) transparent;
}
.orb-chat-scroll::-webkit-scrollbar { width: 4px; }
.orb-chat-scroll::-webkit-scrollbar-thumb { background: var(--10); border-radius: 4px; }

.msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 92%;
}
.msg .who {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); display: flex; align-items: center; gap: 6px;
}
.msg .who .ts { font-family: var(--f-mono); color: var(--40); }
.msg.astra .who { color: var(--100); }
.msg.user { align-self: flex-end; align-items: flex-end; }
.msg.user .who { color: var(--80); }
.msg .body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--100);
  font-weight: 180;
}
.msg.user .body {
  background: var(--4);
  border: 1px solid var(--5);
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  color: var(--100);
}
.msg.astra .body { color: var(--100); }
.msg.tool .body {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--60);
  background: var(--2);
  border-left: 2px solid var(--100);
  padding: 8px 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.orb-chat-input {
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 6px 6px 18px;
  background: var(--2);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  transition: all 200ms var(--ease-out);
}
.orb-chat-input:focus-within {
  border-color: var(--40);
  box-shadow: var(--glow);
}
.orb-chat-input input {
  flex: 1; background: transparent; border: 0; outline: none;
  font-family: inherit; font-weight: 180; font-size: 14px;
  color: var(--100); letter-spacing: 0.16px;
  padding: 10px 0;
}
.orb-chat-input input::placeholder { color: var(--40); }
.orb-chat-input .send {
  width: 40px; height: 40px;
  border-radius: var(--r-cap);
  background: var(--100); color: var(--inv-100);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 200ms var(--ease-out);
}
.orb-chat-input .send:hover { background: var(--100); }
.orb-chat-input .send:disabled { background: var(--10); color: var(--40); cursor: default; }

/* ── Footer device strip (multi-screen handoff) ──────────── */
.orb-devices {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--5);
  background: rgba(0,0,0,0.2);
}
.orb-devices .lbl {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); flex-shrink: 0;
}
.orb-devices .orb-strip {
  display: flex; gap: var(--sp-2); flex: 1; overflow-x: auto;
  scrollbar-width: none;
}
.orb-devices .orb-strip::-webkit-scrollbar { display: none; }
.orb-dev {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  background: transparent;
  cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--60);
  letter-spacing: 0.16px;
  flex-shrink: 0;
  transition: all 200ms var(--ease-out);
}
.orb-dev:hover { color: var(--100); border-color: var(--20); background: var(--2); }
.orb-dev.here {
  color: var(--100); border-color: var(--100);
  background: rgba(165, 165, 165, 0.06);
}
.orb-dev .icn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit;
  opacity: 0.9;
}
.orb-dev .nm { color: inherit; }
.orb-dev .loc { color: var(--40); }
.orb-dev.here .loc { color: var(--100); opacity: 0.8; }
.orb-dev.orb-off { opacity: 0.4; }
.orb-dev.orb-off .icn { color: var(--40); }

/* handoff overlay */
.orb-handoff-flash {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  border-radius: inherit;
  z-index: 5;
  opacity: 0;
  transition: opacity 220ms var(--ease-out);
}
.orb-handoff-flash.orb-show { opacity: 1; }
.orb-handoff-flash .msg-stack {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  text-align: center;
}
.orb-handoff-flash .glyph-line {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--100);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.3px;
}
.orb-handoff-flash .arrow {
  display: inline-flex; align-items: center;
  font-family: var(--f-mono); color: var(--40);
  letter-spacing: 6px;
  animation: arrowFlow 1.2s var(--ease-out) infinite;
}
@keyframes arrowFlow {
  from { opacity: 0.2; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(6px); }
}
.orb-handoff-flash .orb-verb { font-size: 18px; color: var(--100); font-weight: 180; letter-spacing: 0.2px; }

/* ── Hotkeys hint ────────────────────────────────────────── */
.hotkeys {
  position: fixed;
  left: 24px;
  bottom: 28px;
  z-index: 40;
  display: flex; align-items: center; gap: 6px;
  font-size: 10px;
  color: var(--40);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: var(--f-mono);
  opacity: 0.4;
  transition: opacity 220ms var(--ease-out);
}
.hotkeys:hover { opacity: 1; }
.hotkeys .orb-grp {
  display: inline-flex; align-items: center; gap: 4px;
  padding-right: 6px;
  border-right: 1px solid var(--10);
}
.hotkeys .orb-grp:last-child { border-right: 0; }
.hotkeys .kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border: 1px solid var(--10);
  border-radius: 4px;
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 9px; letter-spacing: 0.2px;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   Presence layers — wake glow, painting nebula, constellation
   ============================================================ */

.orb-wake-glow {
  position: fixed;
  inset: 0;
  z-index: 39;
  pointer-events: none;
  --wake-i: 0.2;
  --wake-hue: 255, 149, 62;
  background:
    radial-gradient(ellipse 80% 35% at 50% 100%, rgba(var(--wake-hue), calc(var(--wake-i) * 0.18)), transparent 70%),
    radial-gradient(ellipse 80% 35% at 50% 0%,   rgba(var(--wake-hue), calc(var(--wake-i) * 0.08)), transparent 70%),
    radial-gradient(ellipse 25% 100% at 0% 50%,  rgba(var(--wake-hue), calc(var(--wake-i) * 0.06)), transparent 80%),
    radial-gradient(ellipse 25% 100% at 100% 50%, rgba(var(--wake-hue), calc(var(--wake-i) * 0.06)), transparent 80%);
  transition: opacity 400ms var(--ease-out);
  mix-blend-mode: screen;
}
.orb-wake-glow::before, .orb-wake-glow::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--wake-hue), calc(var(--wake-i) * 0.6)), transparent);
  opacity: calc(var(--wake-i) * 1.3);
}
.orb-wake-glow::before { top: 0; }
.orb-wake-glow::after  { bottom: 0; }
.orb-wake-glow[data-state="astra-speaking"]::before,
.orb-wake-glow[data-state="astra-speaking"]::after {
  animation: wake-pulse 1.8s var(--ease-out) infinite;
}
@keyframes wake-pulse {
  0%, 100% { opacity: 0.4; transform: scaleX(0.95); }
  50%      { opacity: 1;   transform: scaleX(1); }
}

.orb-painting-nebula {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  background-image: url('assets/astra.orb-png');
  background-size: 65vmin 65vmin;
  background-repeat: no-repeat;
  background-position: center;
  filter: blur(8px) saturate(1.4) brightness(0.85);
  mix-blend-mode: screen;
}
.orb-painting-nebula.on { opacity: var(--paint-i, 0.4); }
.orb-painting-nebula[data-anchor="hero-tr"] {
  background-position: 88% 18%;
  background-size: 36vmin 36vmin;
}
.orb-painting-nebula[data-anchor="ambient"] {
  background-position: center;
  background-size: 120vmin 120vmin;
  filter: blur(40px) saturate(1.2) brightness(0.6);
}

.constellation {
  position: fixed;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.6;
}

/* ============================================================
   Wall display v2 — extra cards
   ============================================================ */

.scenes-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.scene-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  color: var(--80);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.16px;
  cursor: pointer;
  transition: all 220ms var(--ease-out);
}
.scene-chip:hover { background: var(--4); border-color: var(--20); color: var(--100); }
.scene-chip.active {
  background: rgba(165, 165, 165, 0.08);
  border-color: var(--100);
  color: var(--100);
}
.scene-chip .gl {
  width: 22px; height: 22px;
  border-radius: var(--r-cap);
  border: 1px solid currentColor;
  opacity: 0.5;
  position: relative;
}
.scene-chip .gl::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: var(--r-cap);
  background: currentColor;
  opacity: 0.4;
}

.orb-cam-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.orb-cam-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  border: 1px solid var(--5);
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04), transparent 50%),
    rgba(0,0,0,0.6);
}
.orb-cam-thumb .scan {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  pointer-events: none;
}
.orb-cam-thumb .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20% 20%;
}
.orb-cam-thumb .nm {
  position: absolute;
  top: 6px; left: 8px;
  font-size: 9px;
  font-family: var(--f-mono);
  color: var(--80);
  letter-spacing: 0;
  text-transform: lowercase;
}
.orb-cam-thumb .live {
  position: absolute;
  top: 6px; right: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 8px;
  letter-spacing: 0.3px;
  color: var(--100);
  text-transform: uppercase;
  font-weight: 480;
}
.orb-cam-thumb .live::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: var(--r-cap);
  background: var(--100);
  animation: blink 1.4s infinite;
}
.orb-cam-thumb .orb-silhouette {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
  background:
    radial-gradient(ellipse 30% 100% at 25% 100%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(ellipse 25% 100% at 75% 100%, rgba(255,255,255,0.05), transparent 60%);
}

.notif-list {
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.notif {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: var(--sp-3);
  padding: 4px 0;
  border-bottom: 1px solid var(--5);
  padding-bottom: var(--sp-3);
}
.notif:last-child { border-bottom: 0; padding-bottom: 0; }
.notif .src-dot {
  width: 22px; height: 22px;
  border-radius: var(--r-cap);
  background: var(--4);
  border: 1px solid var(--10);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--80);
  font-size: 11px;
  font-family: var(--f-mono);
}
.notif .src-dot.astra {
  background: rgba(165, 165, 165, 0.08);
  border-color: var(--100);
  color: var(--100);
}
.notif .src-dot.orb-lin   { color: var(--80); border-color: rgba(123, 123, 123, 0.4); }
.notif .src-dot.orb-sys   { color: var(--60); }
.notif .body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.notif .body .who {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--60);
}
.notif .body .who.astra { color: var(--100); }
.notif .body .msg {
  font-size: 13px;
  color: var(--100);
  font-weight: 180;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif .ts {
  font-size: 10px;
  color: var(--40);
  font-family: var(--f-mono);
  letter-spacing: 0;
  white-space: nowrap;
}

.orb-energy-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3);
}
.orb-energy-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0;
  border-right: 1px solid var(--5);
}
.orb-energy-cell:last-child { border-right: 0; }
.orb-energy-cell .lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--40);
}
.orb-energy-cell .v {
  font-size: 20px;
  font-weight: 200;
  color: var(--100);
  font-family: var(--f-sans);
  letter-spacing: -0.4px;
  display: flex; align-items: baseline; gap: 4px;
}
.orb-energy-cell .v .unit {
  font-size: 11px;
  color: var(--60);
  font-weight: 400;
}
.orb-energy-cell.orb-gen .v { color: var(--100); }
.orb-energy-cell .delta {
  font-size: 10px;
  color: var(--40);
  font-family: var(--f-mono);
  letter-spacing: 0;
}
.orb-energy-cell .delta.up { color: var(--100); }
.orb-energy-cell .delta.down { color: var(--80); }

.orb-sun-arc {
  position: relative;
  height: 60px;
  width: 100%;
  margin-top: var(--sp-2);
}
.orb-sun-arc svg { width: 100%; height: 100%; overflow: visible; }
.orb-sun-arc .orb-arc-path { stroke: var(--10); stroke-width: 1; fill: none; }
.orb-sun-arc .orb-arc-done { stroke: var(--100); stroke-width: 1; fill: none; }
.orb-sun-arc .orb-sun-dot {
  fill: var(--100);
  filter: drop-shadow(0 0 6px var(--100));
}
.orb-sun-arc .orb-horizon { stroke: var(--5); stroke-width: 1; }
.orb-sun-arc .orb-horizon-text {
  font-size: 9px; fill: var(--40);
  font-family: var(--f-mono); letter-spacing: 0;
}

/* Adjust the wall topbar — drop padding-right (switcher is centered) */
.os .topbar > .orb-crumb { white-space: nowrap; }
.os .topbar > .orb-crumb:last-of-type, .os .orb-env { font-variant-numeric: tabular-nums; }

/* ╔═ verbatim from orbit-os/workstation.css · 23594 chars ═╗ */
/* ====================================================================
   Workstation OS — Wayland-tiled desktop styles.
   Layered on styles.css. Pure tokens.
   ==================================================================== */

.ws {
  position: relative;
  z-index: 1;
  height: 100vh;
  display: grid;
  grid-template-rows: 36px 1fr;
}

.orb-ws-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid var(--5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12px;
  color: var(--80);
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;
}
.orb-ws-bar-left, .orb-ws-bar-right {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-shrink: 0;
}
.orb-ws-bar-right { overflow: hidden; }
.orb-ws-bar-left { flex: 1; min-width: 0; }
.orb-ws-bar .glyph {
  width: 14px; height: 14px;
  border-radius: var(--r-cap);
  border: 1px solid var(--60);
  position: relative;
}
.orb-ws-bar .glyph::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: var(--r-cap);
  background: var(--100);
}
.orb-ws-bar .orb-brand-text {
  font-weight: 480;
  letter-spacing: 0.4px;
  color: var(--100);
}
.orb-ws-bar .sep {
  width: 1px; height: 16px; background: var(--10);
}
.workspaces {
  display: flex; gap: 2px;
}
.workspaces .ws-num {
  background: transparent;
  border: 1px solid var(--5);
  color: var(--60);
  font-family: inherit;
  font-size: 11px;
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 180ms var(--ease-out);
}
.workspaces .ws-num:hover { color: var(--100); border-color: var(--20); }
.workspaces .ws-num.on { background: var(--100); color: var(--inv-100); border-color: var(--100); }
.ws-title {
  color: var(--60);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.spill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  color: var(--60);
  font-size: 11px;
  letter-spacing: 0.16px;
  white-space: nowrap;
  flex-shrink: 0;
}
.spill .dot {
  width: 6px; height: 6px;
  border-radius: var(--r-cap);
  background: var(--40);
}
.spill.ok .dot { background: var(--100); box-shadow: 0 0 4px var(--100); }
.spill .dot.pulse { animation: pulse 2.4s infinite; }
.spill .l { color: var(--60); text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; }
.spill .v { color: var(--100); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; }
.ws-time {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--100);
  letter-spacing: 0;
  padding: 3px 12px;
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  margin-left: var(--sp-2);
}

/* ── Tiled grid ───────────────────────────────────────────── */
.orb-ws-grid {
  display: grid;
  gap: 6px;
  padding: 6px;
  padding-bottom: 110px; /* leave room for the dock + tray */
  min-height: 0;
  background: transparent;
  grid-template-columns: 1fr 1.25fr 1fr;
  grid-template-rows: 1.05fr 0.95fr;
  grid-template-areas:
    "station server kv"
    "ide     server term";
}

/* Tablet/small viewports — stack windows */
@media (max-width: 1100px) {
  .orb-ws-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, minmax(220px, 1fr));
    grid-template-areas: "station" "server" "ide" "kv" "term";
  }
}

/* ── Window chrome ─────────────────────────────────────────── */
.win {
  background: rgba(12, 12, 12, 0.78);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.win.focus {
  border-color: var(--20);
  box-shadow: 0 0 0 1px var(--10), 0 8px 32px rgba(0,0,0,0.5);
}
.win-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 12px 8px 10px;
  border-bottom: 1px solid var(--5);
  background: rgba(0,0,0,0.3);
  height: 36px;
  flex-shrink: 0;
}
.win-bar .lights {
  display: flex; gap: 6px;
}
.win-bar .lights .l {
  width: 9px; height: 9px; border-radius: var(--r-cap);
  background: var(--10);
  border: 1px solid var(--5);
}
.win.focus .win-bar .lights .l:nth-child(1) { background: rgba(165, 165, 165, 0.7); border-color: rgba(165, 165, 165, 0.4); }
.win.focus .win-bar .lights .l:nth-child(2) { background: rgba(218, 218, 218, 0.5); }
.win.focus .win-bar .lights .l:nth-child(3) { background: rgba(163, 163, 163, 0.5); }
.win-title {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-title .sep { color: var(--20); }
.win-title .orb-cur { color: var(--100); }
.win.focus .win-title .orb-cur { color: var(--100); }
.win-actions {
  display: flex; gap: 4px;
}
.win-actions button {
  background: transparent;
  border: 0;
  color: var(--40);
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  font-family: inherit;
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.win-actions button:hover { color: var(--100); background: var(--5); }
.orb-win-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}

/* ── Station app ───────────────────────────────────────────── */
.orb-station-app {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100%;
  min-height: 0;
}
.orb-st-side {
  background: rgba(0,0,0,0.25);
  border-right: 1px solid var(--5);
  padding: var(--sp-3) var(--sp-2);
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.orb-st-side-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--80);
  font-weight: 480;
  padding: 4px 10px 10px;
}
.orb-st-side-section {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); padding: var(--sp-3) 10px 4px;
}
.orb-st-side-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  background: transparent;
  border: 0; color: var(--60);
  font-family: inherit; font-size: 12px;
  font-weight: 180;
  text-align: left;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.orb-st-side-row:hover { background: var(--4); color: var(--100); }
.orb-st-side-row.on { background: var(--5); color: var(--100); }
.orb-st-side-row.unread .nm::after { content: ''; }
.orb-st-side-row.unread { color: var(--100); }
.orb-st-side-row .hint { font-size: 10px; color: var(--40); font-family: var(--f-mono); }
.orb-st-side-row.on .hint, .orb-st-side-row.unread .hint { color: var(--100); }
.orb-st-side-row .av {
  width: 18px; height: 18px; border-radius: var(--r-cap);
  background: linear-gradient(135deg, rgba(165, 165, 165, 0.5), rgba(158, 158, 158, 0.5));
  border: 1px solid var(--10);
  margin-right: 8px;
}
.orb-st-thread {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
.orb-st-thread-h {
  padding: 10px 16px;
  border-bottom: 1px solid var(--5);
  font-size: 13px;
  color: var(--80);
}
.orb-st-msgs {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.orb-st-msg {
  display: flex; flex-direction: column; gap: 2px;
}
.orb-st-msg-h {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px;
}
.orb-st-msg-h .who { font-weight: 480; color: var(--100); }
.orb-st-msg.user .who { color: var(--80); }
.orb-st-msg.astra .who { color: var(--100); }
.orb-st-msg-h .ts { color: var(--40); font-family: var(--f-mono); }
.orb-st-msg-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--80);
  font-weight: 180;
}
.orb-st-msg.orb-user-dim .who { color: var(--60); }
.orb-st-msg.orb-user-dim .orb-st-msg-body { color: var(--60); }
.orb-st-code {
  display: inline-block;
  margin-top: 6px;
  background: var(--2);
  border: 1px solid var(--5);
  border-left: 2px solid var(--100);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--60);
  padding: 6px 10px;
}
.st-composer {
  border-top: 1px solid var(--5);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,0.2);
}
.st-composer input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--5);
  color: var(--100);
  font-family: inherit;
  font-weight: 180;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: var(--r-cap);
  outline: none;
}
.st-composer input::placeholder { color: var(--40); }
.st-composer .kbd {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--60);
  background: var(--5);
  border: 1px solid var(--10);
  border-radius: 6px;
  padding: 4px 8px;
}

/* ── IDE app ─────────────────────────────────────────────── */
.orb-ide-app {
  display: grid;
  grid-template-columns: 180px 1fr;
  height: 100%;
  min-height: 0;
}
.ide-tree {
  background: rgba(0,0,0,0.3);
  border-right: 1px solid var(--5);
  padding: 8px 6px;
  font-size: 11px;
  color: var(--60);
  font-family: var(--f-mono);
  letter-spacing: 0;
  overflow-y: auto;
}
.orb-ide-tree-section {
  color: var(--80); font-family: var(--f-sans); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.3px;
  padding: 4px 6px 8px;
}
.orb-ide-tree-row {
  padding: 3px 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.orb-ide-tree-row.orb-indent { padding-left: 18px; }
.orb-ide-tree-row:hover { background: var(--4); color: var(--100); }
.orb-ide-tree-row.active { background: rgba(165, 165, 165, 0.08); color: var(--100); }
.ide-editor {
  display: flex; flex-direction: column; min-height: 0;
}
.ide-tabs {
  display: flex; align-items: center;
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid var(--5);
  padding: 0 var(--sp-2);
  height: 30px;
  gap: 2px;
}
.ide-tab {
  background: transparent; border: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  padding: 6px 12px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  cursor: pointer;
}
.ide-tab.active { color: var(--100); background: var(--4); }
.ide-tab:hover { color: var(--80); }
.orb-ide-pos {
  flex: 1;
  text-align: right;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  padding-right: 6px;
}
.orb-ide-code {
  flex: 1;
  overflow: auto;
  padding: var(--sp-3) 0;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0;
  background: rgba(0,0,0,0.15);
}
.orb-code-line {
  display: flex; align-items: baseline;
  padding: 0 var(--sp-3);
  white-space: pre;
}
.orb-code-line.orb-sel { background: rgba(165, 165, 165, 0.06); }
.orb-code-line .ln {
  width: 32px;
  text-align: right;
  margin-right: 16px;
  color: var(--20);
  font-size: 10px;
  flex-shrink: 0;
}
.orb-code-line .tx { color: var(--80); }
.orb-code-line .tx.orb-doc { color: var(--40); font-style: italic; }
.orb-code-line .tx.arg { color: rgba(173, 173, 173, 0.8); }
.orb-code-line .tx.body { color: var(--100); }
.orb-code-line .tx.orb-err { color: var(--100); }
.ide-status {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px;
  border-top: 1px solid var(--5);
  background: rgba(0,0,0,0.3);
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
}

/* ── KeyVault inspector ──────────────────────────────────── */
.orb-kv-app {
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 0;
}
.orb-kv-head {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3);
}
.orb-kv-head > div {
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  padding: 10px 14px;
}
.orb-kv-h-num {
  font-size: 22px;
  font-weight: 200;
  color: var(--100);
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.orb-kv-h-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--40);
  margin-top: 2px;
}
.orb-kv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.orb-kv-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--40);
  font-weight: 480;
  padding: 6px 10px;
  border-bottom: 1px solid var(--5);
}
.orb-kv-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--5);
  color: var(--80);
  font-weight: 180;
}
.orb-kv-table td.mono, .orb-kv-table .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); font-size: 11px; }
.orb-kv-tier {
  display: inline-block;
  font-size: 10px;
  font-weight: 480;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-cap);
  border: 1px solid var(--10);
  color: var(--80);
}
.orb-kv-tier.orb-t-B { color: var(--80); border-color: rgba(123, 123, 123, 0.5); }
.orb-kv-tier.orb-t-C { color: var(--100); border-color: rgba(165, 165, 165, 0.4); }
.orb-kv-row-btn {
  background: transparent; border: 1px solid var(--5);
  color: var(--40); border-radius: var(--r-sm);
  padding: 2px 8px; cursor: pointer;
  font-family: var(--f-mono); font-size: 11px;
}
.orb-kv-row-btn:hover { color: var(--100); border-color: var(--20); }

/* ── Server OS admin app ─────────────────────────────────── */
.orb-srv-app {
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-4);
  min-height: 0;
  height: 100%;
}
.orb-srv-head {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--5);
}
.orb-srv-head-row {
  display: flex; align-items: center; justify-content: space-between;
}
.orb-srv-h-id {
  font-size: 22px;
  font-weight: 200;
  color: var(--100);
  letter-spacing: -0.2px;
  font-family: var(--f-mono);
}
.orb-srv-h-sub {
  font-size: 11px;
  color: var(--40);
  font-family: var(--f-mono);
  letter-spacing: 0;
  margin-top: 4px;
}
.orb-srv-h-status {
  display: flex; gap: var(--sp-3); align-items: center;
  font-size: 11px; color: var(--60);
}
.orb-srv-h-status .dot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: var(--r-cap);
  background: var(--100);
  box-shadow: 0 0 8px var(--100);
  margin-right: 6px;
}
.orb-srv-h-status .mono { color: var(--40); }
.orb-srv-attest {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.orb-srv-attest-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-sm);
}
.orb-srv-attest-cell .lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--40);
}
.orb-srv-attest-cell .v {
  font-size: 13px;
  color: var(--100);
  font-weight: 200;
  display: flex; align-items: baseline; gap: 6px;
}
.orb-srv-attest-cell .v .g { color: var(--100); font-size: 11px; }
.orb-srv-attest-cell .sub {
  font-size: 10px;
  color: var(--40);
  font-family: var(--f-mono);
  letter-spacing: 0;
}

.orb-srv-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--sp-3);
  min-height: 0;
}
.orb-srv-card {
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.orb-srv-card.orb-srv-audit {
  grid-column: 1 / -1;
}
.orb-srv-card-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--5);
}
.orb-srv-card-h h4 {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 480;
  color: var(--80);
}
.orb-srv-card-meta {
  font-size: 10px;
  color: var(--40);
  font-family: var(--f-mono);
  letter-spacing: 0;
}
.orb-srv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.orb-srv-table td {
  padding: 5px 14px;
  border-bottom: 1px solid var(--4);
  color: var(--80);
  font-weight: 180;
  white-space: nowrap;
}
.orb-srv-table tr:last-child td { border-bottom: 0; }
.orb-srv-table .mono { font-family: var(--f-mono); letter-spacing: 0; font-size: 11px; }
.orb-srv-table .dim { color: var(--40); }
.orb-srv-table tr.dim td { opacity: 0.5; }
.orb-srv-table .pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 480;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-cap);
  border: 1px solid var(--10);
  color: var(--60);
}
.orb-srv-table .pill.active { color: var(--100); border-color: rgba(147, 147, 147, 0.4); }
.orb-srv-table .pill.orb-planned { color: var(--40); border-color: var(--10); }

.orb-srv-stream {
  padding: 8px 14px;
  display: flex; flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  font-size: 11px;
  font-family: var(--f-mono);
  letter-spacing: 0;
}
.orb-srv-stream-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 3px 0;
  color: var(--60);
}
.orb-srv-stream-row .dim { color: var(--40); }
.orb-srv-stream-row .tag {
  font-size: 9px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: 1px solid var(--10);
  padding: 1px 6px;
  border-radius: var(--r-cap);
  color: var(--60);
  font-family: var(--f-sans);
  min-width: 38px;
  text-align: center;
}
.orb-srv-stream-row .tag.orb-t-ok   { color: var(--100); border-color: rgba(147, 147, 147, 0.3); }
.orb-srv-stream-row .tag.orb-t-info { color: var(--80); border-color: rgba(123, 123, 123, 0.3); }
.orb-srv-stream-row .tag.orb-t-warn { color: var(--100); border-color: rgba(165, 165, 165, 0.3); }
.orb-srv-stream-row .tag.orb-t-dim  { color: var(--40); }

/* ── Scene switcher (top-level chrome) ───────────────────── */
.scene-switcher {
  position: fixed;
  top: 8px;
  right: 12px;
  z-index: 100;
  display: flex; align-items: center; gap: 2px;
  padding: 2px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.scene-switcher button {
  background: transparent;
  border: 0;
  color: var(--40);
  font-family: inherit;
  font-size: 9px;
  font-weight: 480;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  display: inline-flex; align-items: center; gap: 5px;
}
.scene-switcher button:hover { color: var(--100); }
.scene-switcher button.active { background: var(--100); color: var(--inv-100); }
.scene-switcher .orb-ico {
  width: 11px; height: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Workstation bar: scene switcher is INSIDE the bar, not floating */
.orb-ws-bar { padding-top: 0; padding-right: 200px; }
.orb-ws-bar .ws-title { display: none; }
@media (min-width: 1280px) {
  .orb-ws-bar .ws-title { display: inline; }
}
/* Hide some workstation pills on narrow viewports to prevent crowding */
@media (max-width: 1180px) {
  .orb-ws-bar .spill[data-priority="low"] { display: none; }
}
@media (max-width: 760px) {
  .orb-ws-bar .spill:not([data-priority="critical"]) { display: none; }
}
.os .topbar { padding-right: 200px; }

/* ── Terminal app ────────────────────────────────────────── */
.orb-term-app {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  background: rgba(0, 0, 0, 0.42);
}
.term-tabs {
  display: flex; align-items: center; gap: 2px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--5);
  padding: 0 var(--sp-2);
  height: 28px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0;
}
.orb-term-tab {
  background: transparent; border: 0;
  color: var(--40);
  font-family: inherit; font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  cursor: pointer;
}
.orb-term-tab.active { color: var(--100); background: var(--4); }
.orb-term-tab:hover { color: var(--80); }
.orb-term-meta { color: var(--40); margin-left: auto; padding-right: 6px; }
.orb-term-scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0;
  line-height: 1.55;
  color: var(--80);
}
.orb-term-line { white-space: pre-wrap; word-break: break-word; }
.orb-term-line.cmd { color: var(--100); margin-top: 4px; }
.orb-term-line.ok  { color: var(--100); }
.orb-term-line.orb-err { color: var(--100); }
.orb-term-line.dim { color: var(--40); }
.orb-term-line.astra {
  color: var(--100);
  background: rgba(165, 165, 165, 0.05);
  border-left: 2px solid var(--100);
  padding-left: 8px;
  margin: 4px 0;
}
.orb-term-line.astra .tag {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--100);
  color: var(--inv-100);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  margin-right: 6px;
  font-family: var(--f-sans);
  font-weight: 480;
}
.orb-term-line .orb-cmd-text { color: var(--100); }
.orb-ps1-inline { opacity: 0.9; margin-right: 6px; }
.orb-p-user { color: var(--80); }
.orb-p-at   { color: var(--40); }
.orb-p-host { color: var(--100); }
.orb-p-cwd  { color: var(--40); margin-left: 8px; }
.orb-p-arrow { color: var(--100); margin: 0 4px; }
.orb-term-prompt {
  display: flex; align-items: baseline; gap: 0;
  margin-top: 4px;
}
.orb-term-prompt .orb-ps1 {
  display: inline-flex; align-items: baseline; gap: 0;
  flex-shrink: 0;
  font-size: 11.5px;
}
.orb-term-prompt input {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  color: var(--100);
  font-family: inherit; font-size: 11.5px; letter-spacing: 0;
  margin-left: 4px;
}

/* ── System tray ────────────────────────────────────────── */
.orb-sys-tray {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 55;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 14px;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--60);
  transition: all 220ms var(--ease-out);
}
.orb-sys-tray:hover { border-color: var(--20); color: var(--80); }
.orb-sys-cell { display: inline-flex; align-items: center; gap: 6px; }
.orb-sys-lbl { color: var(--40); font-size: 9px; letter-spacing: 0.3px; text-transform: uppercase; }
.orb-sys-bar {
  width: 36px; height: 4px;
  background: var(--5);
  border-radius: var(--r-cap);
  overflow: hidden;
  display: inline-block;
}
.orb-sys-bar > span {
  display: block; height: 100%;
  background: var(--80);
  border-radius: var(--r-cap);
  transition: width 600ms var(--ease-out);
}
.orb-sys-cell:nth-child(2) .orb-sys-bar > span { background: var(--100); }
.orb-sys-cell:nth-child(3) .orb-sys-bar > span { background: var(--80); }
.orb-sys-v { color: var(--100); font-variant-numeric: tabular-nums; min-width: 32px; text-align: right; }
.orb-sys-sep { width: 1px; height: 16px; background: var(--10); }
.orb-sys-net { color: var(--80); }
.orb-sys-net .up { color: var(--100); }
.orb-sys-net .dn { color: var(--80); }
.orb-sys-kv { color: var(--80); }

/* ╔═ verbatim from orbit-os/app-extras.css · 101499 chars ═╗ */
/* ============================================================
   Orbit OS · v4 — Login flow · Wall quickslots · Extra apps
   ALL values via tokens from orbit-tokens.css / colors_and_type.css.
   Never reinvent — only compose.
   ============================================================ */

/* ╔══════════════════════════════════════════════════════════╗
   ║ AUTH · Boot · Login · Shutdown                            ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-auth-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--inv-100);
  color: var(--100);
  font-family: var(--f-sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.orb-auth-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 22% 30%, var(--5) 0, transparent 14%),
    radial-gradient(circle at 78% 24%, var(--4) 0, transparent 10%),
    radial-gradient(circle at 38% 78%, var(--5) 0, transparent 12%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(165, 165, 165, 0.04), transparent 70%);
  pointer-events: none;
}

/* Boot */
.orb-auth-boot {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-6);
}
.orb-auth-glyph {
  width: 96px;
  height: 96px;
  border-radius: var(--r-cap);
  border: 1px solid var(--10);
  background: var(--2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--100);
}
.orb-auth-glyph.pulse {
  animation: auth-pulse 2.4s var(--ease-out) infinite;
}
@keyframes auth-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(165, 165, 165, 0.4); border-color: var(--10); }
  50%      { box-shadow: 0 0 32px 0 rgba(165, 165, 165, 0.2); border-color: var(--100); }
}
.orb-auth-boot-title {
  font-family: var(--f-sans);
  font-weight: var(--fw-thin);
  font-size: 32px;
  letter-spacing: -0.4px;
  color: var(--100);
  text-shadow: var(--ts-h2);
}
.orb-auth-boot-title .dim { color: var(--40); }
.orb-auth-boot-log {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--60);
  letter-spacing: 0;
  width: min(720px, 90%);
  min-height: 280px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  backdrop-filter: blur(12px);
}
.orb-auth-boot-log .orb-boot-line {
  line-height: 1.65;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orb-auth-boot-log .orb-boot-line.orb-cursor { color: var(--100); }
.orb-auth-skip {
  background: transparent;
  border: 1px solid var(--10);
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-auth-skip:hover { color: var(--100); border-color: var(--40); }

/* Shutdown */
.orb-auth-shutdown {
  position: relative;
  z-index: 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  align-items: center;
  justify-content: center;
}
.orb-auth-shutdown-l {
  font-size: 14px;
  color: var(--60);
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

/* Login stage */
.orb-auth-stage {
  position: relative;
  z-index: 3;
  flex: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--sp-5) var(--sp-6);
}
.orb-auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.orb-auth-top-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.orb-auth-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  font-weight: var(--fw-med);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--100);
}
.orb-auth-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
}
.orb-auth-top-r .orb-auth-clock {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.orb-auth-clock .t {
  font-family: var(--f-sans);
  font-weight: var(--fw-thin);
  font-size: 36px;
  letter-spacing: -0.4px;
  color: var(--100);
  text-shadow: var(--ts-h2);
  font-variant-numeric: tabular-nums;
}
.orb-auth-clock .d {
  font-size: 11px;
  color: var(--40);
  font-family: var(--f-mono);
  letter-spacing: 0;
}

.orb-auth-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
}
.orb-auth-status-row {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
}
.auth-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  background: var(--2);
  font-size: 11px;
  color: var(--80);
  letter-spacing: 0.16px;
}
.auth-stat .g { color: var(--100); }
.auth-stat .dim { color: var(--40); }

.auth-card {
  width: min(620px, 92%);
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.auth-card.orb-shake { animation: auth-shake 0.42s var(--ease-out); }
@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
.orb-auth-card-h {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.orb-auth-card-h .orb-auth-title {
  font-size: 22px;
  font-weight: var(--fw-thin);
  color: var(--100);
  letter-spacing: -0.2px;
  text-shadow: var(--ts-h3);
}
.orb-auth-card-h .orb-auth-sub {
  font-size: 13px;
  color: var(--60);
  letter-spacing: 0.16px;
}

.orb-auth-users {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.auth-user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  color: var(--80);
  font-family: var(--f-sans);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-align: left;
}
.auth-user:hover {
  background: var(--4);
  color: var(--100);
  border-color: var(--10);
}
.auth-user.on {
  background: rgba(165, 165, 165, 0.06);
  border-color: var(--100);
  color: var(--100);
}
.auth-user .av,
.auth-user .av.big,
.orb-auth-prompt .av {
  width: 36px;
  height: 36px;
  border-radius: var(--r-cap);
  background: var(--5);
  border: 1px solid var(--10);
  color: var(--100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--fw-med);
  letter-spacing: 0.16px;
  flex-shrink: 0;
}
.auth-user .av[data-tier="3"]  { background: rgba(165, 165, 165, 0.14); border-color: var(--100); color: var(--100); }
.auth-user .av[data-tier="2"]  { background: var(--5);  border-color: var(--80); color: var(--80); }
.auth-user .av[data-tier="1"]  { background: var(--4);  border-color: var(--10); }
.auth-user .av[data-tier="0"]  { background: transparent; border-color: var(--10); color: var(--60); }
.auth-user .meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.auth-user .meta .n {
  font-size: 13px;
  font-weight: var(--fw-thin);
  color: inherit;
  letter-spacing: 0.16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auth-user .meta .r {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
}

.orb-auth-form {
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.orb-auth-prompt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.orb-auth-prompt .av.big {
  width: 44px;
  height: 44px;
  font-size: 17px;
}
.orb-auth-prompt .who { display: flex; flex-direction: column; gap: 2px; }
.orb-auth-prompt .who .n {
  font-size: 16px;
  font-weight: var(--fw-thin);
  color: var(--100);
  letter-spacing: 0.16px;
}
.orb-auth-prompt .who .r {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
}

.orb-auth-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 6px 6px 18px;
  background: var(--2);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.orb-auth-input-row:focus-within {
  border-color: var(--40);
  box-shadow: var(--glow);
}
.orb-auth-input-row input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--100);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--fw-thin);
  letter-spacing: 0.16px;
  padding: 10px 0;
}
.orb-auth-input-row input::placeholder { color: var(--40); }
.orb-auth-go {
  width: 40px;
  height: 40px;
  border-radius: var(--r-cap);
  background: var(--100);
  color: var(--inv-100);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-base) var(--ease-out);
}
.orb-auth-go:hover { background: var(--100); color: var(--100); }
.orb-auth-go:disabled { background: var(--10); color: var(--40); cursor: default; }

.orb-auth-input-aux {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.orb-auth-alt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--5);
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  padding: 5px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-auth-alt:hover { color: var(--100); border-color: var(--20); background: var(--2); }

.orb-auth-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--100);
  color: var(--inv-100);
  border: 0;
  padding: 14px 24px;
  border-radius: var(--r-cap);
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: var(--fw-med);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.orb-auth-cta:hover { background: var(--100); color: var(--100); }

.orb-auth-hint {
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0.16px;
}
.orb-auth-hint code {
  font-family: var(--f-mono);
  background: var(--4);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--80);
}

.orb-auth-empty {
  text-align: center;
  color: var(--40);
  font-size: 13px;
  padding: var(--sp-5) 0 var(--sp-3);
}

.orb-auth-bottom-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: center;
}
.auth-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  cursor: default;
}
.auth-pill.mono { font-family: var(--f-mono); letter-spacing: 0; }
button.auth-pill { cursor: pointer; transition: all var(--dur-base) var(--ease-out); }
button.auth-pill:hover { color: var(--100); border-color: var(--20); }

.orb-auth-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--5);
  font-size: 11px;
  color: var(--40);
}
.orb-auth-foot .orb-footactions { display: flex; gap: 4px; }
.orb-auth-foot button {
  width: 30px;
  height: 30px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--5);
  color: var(--60);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-auth-foot button:hover { color: var(--100); border-color: var(--20); }

/* ╔══════════════════════════════════════════════════════════╗
   ║ WALL · True quickslots (inline icon row at top)           ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-wall-qs {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  /* Sits next to .scene-switcher (also fixed at top-8px center) — give a little
     vertical offset so they stack cleanly. */
}

/* The scene switcher is at top:8px center; move the quickslots row to a
   second line just under it. */
.orb-wall-qs { top: 56px; }

.orb-wqs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  padding: 6px 10px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  min-height: 30px;
  white-space: nowrap;
}
.orb-wqs:hover { color: var(--100); background: var(--4); border-color: var(--10); }
.orb-wqs.on { color: var(--100); background: rgba(165, 165, 165, 0.08); border-color: rgba(165, 165, 165, 0.4); }
.orb-wqs.warn { color: var(--100); border-color: rgba(73, 73, 73, 0.4); background: rgba(73, 73, 73, 0.06); }
.orb-wqs .orb-wqs-lbl { font-size: 11px; letter-spacing: 0.16px; }
.orb-wqs .orb-wqs-lbl.mono { font-family: var(--f-mono); letter-spacing: 0; }
.orb-wqs .orb-wqs-kbd {
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--40);
  padding: 1px 4px;
  border: 1px solid var(--10);
  border-radius: 4px;
}
.orb-wqs-music {
  background: var(--100);
  color: var(--inv-100);
  border-color: var(--100);
}
.orb-wqs-music:hover { background: var(--100); color: var(--inv-100); border-color: var(--100); }
.orb-wqs-music.on { background: var(--100); color: var(--inv-100); border-color: var(--100); }

.orb-wqs-sep {
  width: 1px;
  height: 20px;
  background: var(--10);
  margin: 0 4px;
}

.orb-wqs-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  min-width: 180px;
  max-width: 240px;
}
.orb-wqs-art {
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(165, 165, 165, 0.6), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(119, 119, 119, 0.7), transparent 55%),
    var(--inv-100);
  border: 1px solid var(--10);
}
.orb-wqs-now-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.orb-wqs-now-t {
  font-size: 11px;
  color: var(--100);
  font-weight: var(--fw-thin);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.16px;
}
.orb-wqs-now-a {
  font-size: 10px;
  color: var(--60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orb-wqs-climate {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 2px 4px !important;
  background: transparent !important;
  border: 1px solid var(--5) !important;
}
.orb-wqs-climate:hover { border-color: var(--10) !important; }
.orb-wqs-cl-step {
  width: 22px; height: 22px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--10);
  color: var(--60);
  font-family: var(--f-mono);
  font-size: 13px;
  cursor: pointer;
}
.orb-wqs-cl-step:hover { color: var(--100); border-color: var(--40); }
.orb-wqs-cl-v {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--100);
  letter-spacing: 0;
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.orb-wqs-more {
  background: var(--2);
  border-color: var(--5);
}

/* Hide the old fat panel completely (was a giant bottom rail) */
.orb-qs-rail { display: none !important; }

/* Reset wall stage padding — quickslots no longer eat the bottom */
.orb-wall .orb-wall-stage { padding-bottom: 200px; }

/* Move the swipe-up indicator out of the way (just a thin grip now) */
.orb-iot-swipe-up { bottom: 16px; }

/* The scene-switcher sits at top: 8px center; bump it to make room for the
   quickslots row directly under it */
.orb-wall ~ .scene-switcher { top: 12px; }

/* ╔══════════════════════════════════════════════════════════╗
   ║ IoT drawer v2 · full-glory detail view                    ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-iot-panel.v2 {
  height: 88vh;
  max-height: 88vh;
  background: rgba(10, 10, 10, 0.97);
  border-top: 1px solid var(--10);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  display: flex;
  flex-direction: column;
  /* iframe-friendly: ensure it shows when open */
  transition: none !important;
}
.orb-iot-panel.v2.open {
  transform: translateY(0) !important;
}

.orb-iotv-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 18px 28px 14px;
  border-bottom: 1px solid var(--5);
}
.orb-iotv-h-l { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.orb-iotv-glyph {
  width: 44px;
  height: 44px;
  border-radius: var(--r-cap);
  background: rgba(165, 165, 165, 0.06);
  border: 1px solid var(--100);
  color: var(--100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.orb-iotv-h-text .t {
  font-size: 18px;
  font-weight: var(--fw-thin);
  color: var(--100);
  letter-spacing: 0.16px;
}
.orb-iotv-h-text .m {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
  margin-top: 2px;
}
.orb-iotv-h-r {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.orb-iotv-quick-pause {
  display: inline-flex;
  gap: 4px;
}
.orb-iotv-quick-pause button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--2);
  border: 1px solid var(--5);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  padding: 6px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-iotv-quick-pause button:hover {
  background: rgba(165, 165, 165, 0.06);
  border-color: var(--100);
  color: var(--100);
}
.orb-iotv-close {
  width: 32px; height: 32px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--10);
  color: var(--60);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.orb-iotv-close:hover { color: var(--100); border-color: var(--40); }

.orb-iotv-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--5);
  overflow-x: auto;
  scrollbar-width: none;
}
.orb-iotv-tabs::-webkit-scrollbar { display: none; }
.orb-iotv-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--5);
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: var(--fw-med);
  letter-spacing: 0.16px;
  padding: 6px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-iotv-tabs button:hover { color: var(--100); border-color: var(--10); background: var(--2); }
.orb-iotv-tabs button.on {
  background: rgba(165, 165, 165, 0.06);
  border-color: var(--100);
  color: var(--100);
}

.orb-iotv-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px 32px;
}

/* Shared card */
.orb-iotv-card {
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
}
.orb-iotv-card-h {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--5);
  font-size: 12px;
  font-weight: var(--fw-med);
  color: var(--80);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.orb-iotv-card-h .m {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--fw-thin);
}
.orb-iotv-card-link {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--10);
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-iotv-card-link:hover { color: var(--100); border-color: var(--100); }

/* Home overview layout */
.orb-iotv-home {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--sp-3);
  grid-template-areas:
    "music scene"
    "rooms scene"
    "cams  energy";
}
.orb-iotv-music-card { grid-area: music; }
.orb-iotv-scene-card { grid-area: scene; }
.orb-iotv-rooms-card { grid-area: rooms; }
.orb-iotv-cams-card  { grid-area: cams; }
.orb-iotv-energy-card{ grid-area: energy; }

/* Music row in overview */
.orb-iotv-mus-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--sp-4);
  padding: 18px 20px;
  align-items: center;
}
.orb-iotv-mus-art-big {
  width: 96px; height: 96px;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 25% 25%, rgba(165, 165, 165, 0.7), transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(119, 119, 119, 0.8), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(77, 77, 77, 0.4), transparent 60%),
    var(--inv-100);
  border: 1px solid var(--10);
}
.orb-iotv-mus-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.orb-iotv-mus-title { font-size: 18px; font-weight: var(--fw-thin); color: var(--100); letter-spacing: -0.2px; }
.orb-iotv-mus-artist { font-size: 12px; color: var(--60); }
.orb-iotv-mus-prog { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.orb-iotv-mus-prog .bar { height: 3px; background: var(--5); border-radius: var(--r-cap); overflow: hidden; }
.orb-iotv-mus-prog .bar .fill { height: 100%; background: var(--100); }
.orb-iotv-mus-prog .t { display: flex; justify-content: space-between; font-size: 10px; color: var(--40); letter-spacing: 0; }

.orb-iotv-mus-ctrls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.orb-iotv-mus-ctrls button {
  width: 32px; height: 32px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--5);
  color: var(--80);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-iotv-mus-ctrls button:hover { color: var(--100); border-color: var(--20); }
.orb-iotv-mus-ctrls .orb-play {
  width: 40px; height: 40px;
  background: var(--100);
  color: var(--inv-100);
  border-color: var(--100);
}
.orb-iotv-mus-ctrls .orb-play:hover { background: var(--100); border-color: var(--100); }
.orb-iotv-mus-vol {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
}
.orb-iotv-mus-vol input[type="range"] {
  width: 70px;
  appearance: none;
  -webkit-appearance: none;
  height: 3px;
  background: var(--5);
  border-radius: var(--r-cap);
}
.orb-iotv-mus-vol input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: var(--r-cap);
  background: var(--100);
}
.orb-iotv-mus-vol .mono { font-size: 10px; color: var(--60); letter-spacing: 0; }

/* Scene card (overview) */
.orb-iotv-scene-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  padding: 12px;
}
.orb-iotv-scene-card .orb-iotv-scene {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-sm);
  color: var(--80);
  cursor: pointer;
  text-align: left;
  font-family: var(--f-sans);
  transition: all var(--dur-base) var(--ease-out);
}
.orb-iotv-scene-card .orb-iotv-scene .ic { color: inherit; }
.orb-iotv-scene-card .orb-iotv-scene .nm { font-size: 13px; color: var(--100); }
.orb-iotv-scene-card .orb-iotv-scene .au { font-family: var(--f-mono); font-size: 9px; color: var(--40); letter-spacing: 0; }
.orb-iotv-scene-card .orb-iotv-scene:hover { background: var(--4); border-color: var(--10); }
.orb-iotv-scene-card .orb-iotv-scene.on {
  background: rgba(165, 165, 165, 0.06);
  border-color: var(--100);
  color: var(--100);
}
.orb-iotv-scene-card .orb-iotv-scene.on .nm { color: var(--100); }
.orb-iotv-scene-card .orb-iotv-scene.on .au { color: rgba(165, 165, 165, 0.7); }

/* Rooms strip (overview) */
.orb-iotv-rooms-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
  padding: 12px;
}
.orb-iotv-room-mini {
  padding: 10px 12px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.orb-iotv-room-mini.on { border-color: rgba(165, 165, 165, 0.4); background: rgba(165, 165, 165, 0.04); }
.orb-iotv-room-mini.primary { border-color: var(--100); }
.orb-iotv-rm-top { display: flex; align-items: baseline; justify-content: space-between; }
.orb-iotv-rm-top .nm { font-size: 13px; color: var(--100); font-weight: var(--fw-thin); }
.orb-iotv-occ { color: var(--100); font-size: 8px; }
.orb-iotv-rm-stats {
  display: flex;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--60);
  letter-spacing: 0;
  flex-wrap: wrap;
}
.orb-iotv-rm-meta { display: flex; gap: 4px; flex-wrap: wrap; }
.orb-iotv-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: var(--r-cap);
  border: 1px solid var(--5);
  color: var(--60);
  font-family: var(--f-mono);
}
.orb-iotv-tag.ok { color: var(--100); border-color: rgba(147, 147, 147, 0.4); }
.orb-iotv-tag.live { color: var(--100); border-color: rgba(73, 73, 73, 0.4); }
.orb-iotv-tag.dim { color: var(--40); }

/* Cams strip (overview) */
.orb-iotv-cams-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 12px;
}
.orb-iotv-cam-mini { aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden; }
.orb-iotv-cam-mini .orb-iotv-cam-frame {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.05), transparent 50%),
    var(--inv-100);
  border: 1px solid var(--5);
  border-radius: var(--r-sm);
}
.orb-iotv-cam-mini.live .orb-iotv-cam-frame { border-color: var(--100); }
.orb-iotv-cam-mini.orb-motion .orb-iotv-cam-frame { border-color: var(--100); }
.orb-iotv-cam-frame .scan {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.orb-iotv-cam-frame .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20% 20%;
}
.orb-iotv-cam-hud {
  position: absolute;
  top: 6px; left: 8px; right: 8px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0;
}
.orb-iotv-cam-hud .n { color: var(--80); }
.orb-iotv-cam-hud .live { color: var(--100); }
.orb-iotv-cam-hud .orb-off { color: var(--40); }
.orb-iotv-cam-motion {
  position: absolute;
  bottom: 6px; left: 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  color: var(--100);
  letter-spacing: 0;
}

/* Energy row (overview) */
.orb-iotv-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 14px;
}
.orb-iotv-stat-row.compact { padding: 12px; gap: 6px; }
.orb-iotv-stat {
  padding: 12px 14px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-sm);
}
.orb-iotv-stat.big { padding: 18px; }
.orb-iotv-stat .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); font-weight: var(--fw-med); }
.orb-iotv-stat .v { font-size: 22px; font-weight: var(--fw-thin); color: var(--100); margin-top: 4px; letter-spacing: -0.4px; }
.orb-iotv-stat.big .v { font-size: 28px; }
.orb-iotv-stat .v.g { color: var(--100); }
.orb-iotv-stat .v .u { font-size: 11px; color: var(--40); font-weight: 400; margin-left: 4px; }
.orb-iotv-stat .d { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; margin-top: 2px; }

/* Rooms tab */
.orb-iotv-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}
.orb-iotv-room {
  padding: 16px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.orb-iotv-room.on { border-color: rgba(165, 165, 165, 0.4); background: rgba(165, 165, 165, 0.04); }
.orb-iotv-room.primary { border-color: var(--100); }
.orb-iotv-room-h { display: flex; align-items: baseline; justify-content: space-between; }
.orb-iotv-room-h .t { font-size: 17px; font-weight: var(--fw-thin); color: var(--100); }
.orb-iotv-room-h .m { font-family: var(--f-mono); font-size: 10px; color: var(--60); letter-spacing: 0; }
.orb-iotv-room-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.orb-iotv-room-stat {
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--r-sm);
}
.orb-iotv-room-stat .l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--40); }
.orb-iotv-room-stat .v { font-size: 16px; font-weight: var(--fw-thin); color: var(--100); }
.orb-iotv-room-stat .v .u { font-size: 10px; color: var(--40); margin-left: 2px; }
.orb-iotv-room-acts { display: flex; gap: 4px; flex-wrap: wrap; }
.orb-iotv-room-acts button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--2);
  border: 1px solid var(--5);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-iotv-room-acts button:hover { color: var(--100); border-color: var(--100); background: rgba(165, 165, 165, 0.06); }
.orb-iotv-room-acts .orb-iotv-room-more { margin-left: auto; padding: 5px; }
.orb-iotv-room-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.orb-iotv-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: var(--r-cap);
  border: 1px solid var(--5);
  color: var(--60);
  font-family: var(--f-mono);
}
.orb-iotv-pill.ok { color: var(--100); border-color: rgba(147, 147, 147, 0.4); }
.orb-iotv-pill.live { color: var(--100); border-color: rgba(73, 73, 73, 0.4); }
.orb-iotv-pill.dim { color: var(--40); }

/* Scenes tab */
.orb-iotv-scenes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 6px;
}
.orb-iotv-scene-big {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  color: var(--80);
  font-family: var(--f-sans);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-iotv-scene-big:hover { background: var(--4); border-color: var(--10); }
.orb-iotv-scene-big.on {
  background: rgba(165, 165, 165, 0.06);
  border-color: var(--100);
}
.orb-iotv-scene-big .ic {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--2);
  border: 1px solid var(--10);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.orb-iotv-scene-big.on .ic { color: var(--100); border-color: var(--100); }
.orb-iotv-scene-big .meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.orb-iotv-scene-big .nm { font-size: 16px; color: var(--100); font-weight: var(--fw-thin); }
.orb-iotv-scene-big.on .nm { color: var(--100); }
.orb-iotv-scene-big .ds { font-size: 11px; color: var(--60); }
.orb-iotv-scene-big .au { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; margin-top: 2px; }
.orb-iotv-active-tag {
  position: absolute;
  top: 12px; right: 12px;
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--100);
  background: rgba(165, 165, 165, 0.08);
  border: 1px solid var(--100);
  padding: 2px 8px;
  border-radius: var(--r-cap);
}

/* Lights tab */
.orb-iotv-lights-pane { display: flex; flex-direction: column; gap: 12px; }
.orb-iotv-light-filter {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.orb-iotv-light-filter button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--2);
  border: 1px solid var(--5);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  padding: 5px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-iotv-light-filter button:hover { color: var(--100); border-color: var(--20); }
.orb-iotv-light-filter button.on { background: var(--5); border-color: var(--100); color: var(--100); }
.orb-iotv-light-filter button .mono { color: var(--40); font-family: var(--f-mono); letter-spacing: 0; font-size: 10px; }
.orb-iotv-lights { display: flex; flex-direction: column; gap: 4px; }
.orb-iotv-light {
  padding: 12px 16px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.orb-iotv-light.on { border-color: rgba(165, 165, 165, 0.3); background: rgba(165, 165, 165, 0.04); }
.orb-iotv-light-h { display: flex; align-items: center; gap: 12px; }
.orb-iotv-light-bulb {
  width: 28px; height: 28px;
  border-radius: var(--r-cap);
  border: 1px solid var(--10);
  background: var(--2);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.orb-iotv-light-bulb .orb-bulb { width: 10px; height: 10px; border-radius: var(--r-cap); background: var(--20); }
.orb-iotv-light.on .orb-iotv-light-bulb { border-color: var(--100); background: rgba(165, 165, 165, 0.06); }
.orb-iotv-light.on .orb-iotv-light-bulb .orb-bulb { background: var(--100); box-shadow: 0 0 12px var(--100); }
.orb-iotv-light-meta { flex: 1; min-width: 0; }
.orb-iotv-light-meta .nm { font-size: 13px; color: var(--100); font-weight: var(--fw-thin); }
.orb-iotv-light-meta .dm { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; margin-top: 1px; }
.orb-iotv-light-toggle {
  background: var(--2);
  border: 1px solid var(--10);
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  padding: 5px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-iotv-light-toggle.on { color: var(--100); border-color: var(--100); }
.orb-iotv-light-slider {
  display: flex;
  align-items: center;
  gap: 12px;
}
.orb-iotv-light-slider input[type="range"] {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: var(--5);
  border-radius: var(--r-cap);
}
.orb-iotv-light-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: var(--r-cap);
  background: var(--100);
  cursor: pointer;
  border: 0;
}
.orb-iotv-light-slider input.on::-webkit-slider-thumb { background: var(--100); }
.orb-iotv-light-temp { display: flex; gap: 2px; }
.orb-iotv-light-temp button {
  background: var(--2);
  border: 1px solid var(--5);
  color: var(--60);
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0;
  padding: 4px 8px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-iotv-light-temp button:hover { color: var(--100); border-color: var(--20); }

/* Climate tab */
.orb-iotv-climate { display: flex; flex-direction: column; gap: 16px; }
.orb-iotv-climate-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.orb-iotv-climate-h .dim { color: var(--40); font-size: 12px; }
.orb-iotv-climate-stats {
  display: flex;
  gap: 8px;
}
.orb-iotv-climate-stats > div {
  padding: 10px 16px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  text-align: center;
}
.orb-iotv-climate-stats .l { font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--40); }
.orb-iotv-climate-stats .v { font-size: 22px; font-weight: var(--fw-thin); color: var(--100); }
.orb-iotv-climate-stats .v .u { font-size: 10px; color: var(--40); margin-left: 2px; }
.orb-iotv-climate-rooms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}
.orb-iotv-clim-room {
  padding: 16px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.orb-iotv-clim-room.orb-occ { border-color: rgba(165, 165, 165, 0.3); }
.orb-iotv-clim-nm { font-size: 14px; font-weight: var(--fw-thin); color: var(--100); }
.orb-iotv-clim-vals {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.orb-iotv-clim-vals .t { font-size: 28px; font-weight: var(--fw-thin); color: var(--100); }
.orb-iotv-clim-vals .t .u { font-size: 12px; color: var(--40); }
.orb-iotv-clim-vals .dim { color: var(--60); font-family: var(--f-mono); font-size: 11px; }
.orb-iotv-clim-slider {
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: var(--5);
  border-radius: var(--r-cap);
  width: 100%;
}
.orb-iotv-clim-slider::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: var(--r-cap);
  background: var(--100);
  cursor: pointer;
  border: 0;
}
.orb-iotv-clim-meta { font-size: 10px; }

/* Music tab */
.orb-iotv-music { display: flex; flex-direction: column; gap: 16px; }
.orb-iotv-music-hero {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 24px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
}
.orb-iotv-music-art {
  width: 220px; height: 220px;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 25% 25%, rgba(165, 165, 165, 0.7), transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(119, 119, 119, 0.8), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(77, 77, 77, 0.4), transparent 60%),
    var(--inv-100);
  border: 1px solid var(--10);
}
.orb-iotv-music-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.orb-iotv-music-hint { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); font-weight: var(--fw-med); }
.orb-iotv-music-title { font-size: 34px; font-weight: var(--fw-thin); color: var(--100); letter-spacing: -0.4px; line-height: 1.1; }
.orb-iotv-music-artist { font-size: 14px; color: var(--60); letter-spacing: 0.16px; }
.orb-iotv-music-prog { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.orb-iotv-music-prog .bar { height: 3px; background: var(--5); border-radius: var(--r-cap); overflow: hidden; }
.orb-iotv-music-prog .bar .fill { height: 100%; background: var(--100); }
.orb-iotv-music-prog .t { display: flex; justify-content: space-between; font-size: 11px; color: var(--40); }

.orb-iotv-music-ctrls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.orb-iotv-music-ctrls button {
  width: 38px; height: 38px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--10);
  color: var(--80);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.orb-iotv-music-ctrls button:hover { color: var(--100); border-color: var(--40); }
.orb-iotv-music-ctrls .orb-play {
  width: 52px; height: 52px;
  background: var(--100);
  color: var(--inv-100);
  border-color: var(--100);
}
.orb-iotv-music-ctrls .orb-play:hover { background: var(--100); color: var(--100); border-color: var(--100); }
.orb-iotv-music-vol {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
}
.orb-iotv-music-vol input[type="range"] {
  width: 100px;
  appearance: none;
  -webkit-appearance: none;
  height: 3px;
  background: var(--5);
  border-radius: var(--r-cap);
}
.orb-iotv-music-vol input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: var(--r-cap);
  background: var(--100);
}
.orb-iotv-music-route { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.orb-iotv-route-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.orb-iotv-route-chip {
  background: var(--2);
  border: 1px solid var(--5);
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  padding: 5px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-iotv-route-chip:hover { color: var(--100); border-color: var(--20); }
.orb-iotv-route-chip.on { background: rgba(165, 165, 165, 0.06); color: var(--100); border-color: var(--100); }

.orb-iotv-music-queue {
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.orb-iotv-music-queue .qh {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); font-weight: var(--fw-med); margin-bottom: 10px;
}
.orb-iotv-q-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--4);
  color: var(--80);
  font-family: var(--f-sans);
  cursor: pointer;
  text-align: left;
}
.orb-iotv-q-row:hover { background: var(--4); color: var(--100); }
.orb-iotv-q-row.on { background: rgba(165, 165, 165, 0.06); color: var(--100); }
.orb-iotv-q-row .n { font-family: var(--f-mono); font-size: 11px; color: var(--40); letter-spacing: 0; }
.orb-iotv-q-row.on .n { color: var(--100); }
.orb-iotv-q-row .m { display: flex; flex-direction: column; min-width: 0; }
.orb-iotv-q-row .m .t { font-size: 13px; }
.orb-iotv-q-row .m .a { font-size: 10px; color: var(--40); }
.orb-iotv-q-row .d { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; }

/* Plugs tab */
.orb-iotv-plugs { display: flex; flex-direction: column; gap: 16px; }
.orb-iotv-plugs-h {
  display: flex;
  gap: 16px;
}
.orb-iotv-plugs-h > div {
  padding: 12px 20px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
}
.orb-iotv-plugs-stat { font-size: 22px; font-weight: var(--fw-thin); color: var(--100); margin-top: 4px; }

.orb-iotv-table { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--2); border: 1px solid var(--5); border-radius: var(--r-md); overflow: hidden; }
.orb-iotv-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); font-weight: var(--fw-med); padding: 10px 14px; border-bottom: 1px solid var(--5); background: rgba(0,0,0,0.3); }
.orb-iotv-table td { padding: 10px 14px; border-bottom: 1px solid var(--4); color: var(--80); font-weight: var(--fw-thin); }
.orb-iotv-table tr.on td { color: var(--100); background: rgba(165, 165, 165, 0.04); }
.orb-iotv-table tr:last-child td { border-bottom: 0; }
.orb-iotv-table .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); }
.orb-iotv-table .dim { color: var(--40); }
.orb-iotv-table-btn {
  background: var(--2);
  border: 1px solid var(--10);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  padding: 4px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-iotv-table-btn:hover { color: var(--100); border-color: var(--100); }

/* Cameras tab */
.orb-iotv-cams { display: flex; flex-direction: column; gap: 14px; }
.orb-iotv-cams-h { display: flex; align-items: baseline; gap: var(--sp-3); }
.orb-iotv-cams-h .dim { color: var(--40); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; }
.orb-iotv-rec {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(214, 38, 3, 0.15);
  border: 1px solid var(--red, #d62603);
  color: var(--red, #d62603);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-iotv-cams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.orb-iotv-cam-tile { aspect-ratio: 16/10; border-radius: var(--r-md); overflow: hidden; }
.orb-iotv-cam-tile .orb-iotv-cam-frame { width: 100%; height: 100%; border-radius: var(--r-md); }
.orb-iotv-cam-tile.live .orb-iotv-cam-frame { border-color: var(--100); }
.orb-iotv-cam-tile.orb-motion .orb-iotv-cam-frame { border-color: var(--100); }
.orb-iotv-cam-tile .orb-iotv-cam-foot {
  position: absolute;
  bottom: 6px; right: 10px;
  font-size: 9px;
}

/* Energy tab */
.orb-iotv-energy { display: flex; flex-direction: column; gap: 16px; }
.orb-iotv-chart-card {
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  padding: 18px;
}
.orb-iotv-chart-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--60);
}
.orb-iotv-legend { display: flex; gap: 12px; }
.orb-iotv-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--60); text-transform: none; letter-spacing: 0.16px; }
.orb-iotv-legend .dot { width: 8px; height: 8px; border-radius: var(--r-cap); }
.orb-iotv-legend .dot.g { background: var(--100); }
.orb-iotv-legend .dot.b { background: var(--80); }
.orb-iotv-chart-svg { width: 100%; height: 100px; display: block; }
.orb-iotv-chart-foot {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--40);
  letter-spacing: 0;
  margin-top: 4px;
}

/* Network tab */
.orb-iotv-net .orb-net-h {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
  margin-bottom: 10px;
}
.orb-iotv-vlan {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  background: var(--2);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  color: var(--80);
  font-family: var(--f-mono);
}
.orb-iotv-st { display: inline-flex; align-items: center; gap: 6px; }
.orb-iotv-st .dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--r-cap); }
.orb-iotv-st.live { color: var(--100); }
.orb-iotv-st.live .dot { background: var(--100); box-shadow: 0 0 6px var(--100); }
.orb-iotv-st.orb-idle { color: var(--40); }
.orb-iotv-st.orb-idle .dot { background: var(--40); }

/* ╔══════════════════════════════════════════════════════════╗
   ║ START MENU · v2                                            ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-start-menu.v2 {
  width: 640px;
  max-height: 84vh;
  left: 16px;
  bottom: 80px;
  /* iframe-friendly: snap opacity instead of transitioning (rAF-throttled iframes
     leave the CSS transition stuck at t=0, so the menu never reveals) */
  transition: none !important;
}
.orb-start-menu.v2.open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
.orb-start-menu.v2 .orb-sm-app {
  background: transparent;
  border: 1px solid transparent;
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-start-menu.v2 .orb-sm-app:hover {
  background: var(--4);
  border-color: var(--10);
  color: var(--100);
}
.orb-start-menu.v2 .orb-sm-app:hover .orb-sm-icn {
  border-color: var(--100);
  color: var(--100);
  background: rgba(165, 165, 165, 0.06);
}
.orb-start-menu.v2 .orb-sm-app .orb-sm-icn {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--2);
  border: 1px solid var(--5);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--80);
  transition: all var(--dur-base) var(--ease-out);
}
.orb-start-menu.v2 .orb-sm-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 8px;
  border-bottom: 1px solid var(--5);
}
.orb-sm-user-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.orb-sm-av {
  width: 40px; height: 40px;
  border-radius: var(--r-cap);
  background: rgba(165, 165, 165, 0.14);
  border: 1px solid var(--100);
  color: var(--100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: var(--fw-med);
}
.orb-sm-id { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.orb-sm-name {
  font-size: 14px;
  font-weight: var(--fw-med);
  color: var(--100);
  letter-spacing: 0.16px;
}
.orb-sm-role {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
}
.orb-sm-prof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--5);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  padding: 5px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-sm-prof:hover { color: var(--100); border-color: var(--20); background: var(--2); }

.orb-start-menu.v2 .sm-search {
  margin: 0;
}

.orb-sm-quick {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--5);
}
.orb-sm-tog {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  color: var(--40);
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.16px;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-sm-tog:hover { background: var(--4); color: var(--80); }
.orb-sm-tog.on { background: var(--5); border-color: var(--20); color: var(--100); }
.orb-sm-tog.on.favorit {
  background: rgba(165, 165, 165, 0.08);
  border-color: var(--100);
  color: var(--100);
}

.orb-start-menu.v2 .orb-sm-nav {
  display: flex;
  gap: 2px;
  padding: 8px 14px 4px;
  border-bottom: 1px solid var(--5);
}
.orb-sm-nav button {
  background: transparent;
  border: 0;
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: var(--fw-med);
  letter-spacing: 0.16px;
  padding: 6px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-sm-nav button:hover { color: var(--100); background: var(--4); }
.orb-sm-nav button.on { color: var(--100); background: rgba(165, 165, 165, 0.06); }

.orb-sm-recents {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.orb-sm-recents.wide .orb-sm-recent { padding: 8px 12px; }
.orb-sm-recent {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--80);
  font-family: inherit;
  text-align: left;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.orb-sm-recent:hover { background: var(--4); color: var(--100); }
.orb-sm-recent .orb-sm-icn-sm {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--2);
  border: 1px solid var(--5);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--80);
  flex-shrink: 0;
}
.orb-sm-recent .t {
  font-size: 12px;
  color: var(--100);
  font-weight: var(--fw-thin);
  letter-spacing: 0.16px;
}
.orb-sm-recent .m {
  font-size: 10px;
  color: var(--40);
  margin-left: auto;
  white-space: nowrap;
}
.orb-sm-recent .orb-sm-recent-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.orb-sm-recent .orb-sm-recent-meta .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb-sm-recent .orb-sm-recent-meta .m {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.orb-sm-suggest {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.orb-sm-sug {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  color: var(--80);
  font-family: var(--f-sans);
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-sm-sug:hover {
  background: var(--4);
  border-color: var(--100);
  color: var(--100);
}
.orb-sm-sug .t {
  font-size: 12px;
  color: var(--100);
  font-weight: var(--fw-med);
  letter-spacing: 0.16px;
}
.orb-sm-sug .m {
  font-size: 11px;
  color: var(--60);
  margin-top: 1px;
}

.orb-sm-astra-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--60);
  letter-spacing: 0;
}
.orb-sm-astra-log li {
  padding: 6px 12px;
  border-left: 2px solid var(--100);
  background: rgba(165, 165, 165, 0.03);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.orb-sm-link {
  background: transparent;
  border: 1px solid var(--10);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
  margin-top: 8px;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-sm-link:hover { color: var(--100); border-color: var(--100); }
.orb-sm-link.danger:hover { color: var(--100); border-color: var(--100); }

.orb-start-menu.v2 .orb-sm-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 14px;
  border-top: 1px solid var(--5);
  background: rgba(0, 0, 0, 0.3);
}
.orb-sm-foot-stat {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--60);
  letter-spacing: 0;
  flex: 1;
}
.orb-sm-foot-stat .g { color: var(--100); }
.orb-sm-foot-stat .dim { color: var(--40); }

/* ╔══════════════════════════════════════════════════════════╗
   ║ POWER · dialog                                            ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-power-scrim {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.orb-power-dialog {
  width: 520px;
  max-width: 92vw;
  background: var(--2);
  border: 1px solid var(--10);
  border-radius: var(--r-lg);
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(1.2);
}
.orb-power-h {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--5);
  font-size: 13px;
  font-weight: var(--fw-med);
  color: var(--100);
  letter-spacing: 0.16px;
}
.orb-power-x {
  margin-left: auto;
  width: 24px; height: 24px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--10);
  color: var(--60);
  cursor: pointer;
}
.orb-power-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 14px;
}
.orb-power-grid button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 18px 16px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  color: var(--80);
  cursor: pointer;
  text-align: left;
  font-family: var(--f-sans);
  transition: all var(--dur-base) var(--ease-out);
}
.orb-power-grid button:hover {
  background: var(--4);
  border-color: var(--100);
  color: var(--100);
}
.orb-power-grid button.danger:hover { border-color: var(--100); color: var(--100); }
.orb-power-grid button span {
  font-size: 14px;
  font-weight: var(--fw-thin);
}
.orb-power-grid button small {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ BROWSER app                                                ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-br-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--inv-100);
}
.orb-br-chrome {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px 10px;
  border-bottom: 1px solid var(--5);
  background: rgba(0, 0, 0, 0.3);
}
.orb-br-nav { display: flex; gap: 2px; }
.orb-br-nav button {
  width: 24px; height: 24px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--5);
  color: var(--60);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-br-nav button:hover { color: var(--100); border-color: var(--20); }
.orb-br-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.orb-br-tabs::-webkit-scrollbar { display: none; }
.orb-br-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--2);
  border: 1px solid transparent;
  border-radius: var(--r-cap);
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  cursor: pointer;
  max-width: 220px;
  white-space: nowrap;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-br-tab .t { overflow: hidden; text-overflow: ellipsis; }
.orb-br-tab .x { color: var(--40); font-size: 13px; }
.orb-br-tab:hover { color: var(--100); }
.orb-br-tab.active {
  background: var(--5);
  border-color: var(--10);
  color: var(--100);
}
.orb-br-tab-add {
  background: transparent;
  border: 1px dashed var(--10);
  color: var(--40);
  width: 28px; height: 28px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-br-tab-add:hover { color: var(--100); border-color: var(--20); }
.orb-br-tools { display: flex; gap: 4px; }
.orb-br-tools button {
  width: 28px; height: 28px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--5);
  color: var(--60);
  cursor: pointer;
}
.orb-br-tools button:hover { color: var(--100); border-color: var(--20); }

.orb-br-omnibox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--5);
}
.orb-br-lock { color: var(--100); }
.orb-br-omnibox input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--100);
  letter-spacing: 0;
}
.orb-br-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
}

.orb-br-bookmarks {
  display: flex;
  gap: 4px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--5);
  overflow-x: auto;
  scrollbar-width: none;
}
.orb-br-bookmarks::-webkit-scrollbar { display: none; }
.orb-br-bm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  padding: 4px 10px;
  border-radius: var(--r-cap);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-br-bm:hover { color: var(--100); background: var(--4); }

.orb-br-page {
  flex: 1;
  overflow: auto;
  padding: var(--sp-5);
}

.orb-br-home {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) 0;
}
.orb-br-home-glyph {
  color: var(--100);
  margin-bottom: var(--sp-3);
}
.orb-br-home-title {
  font-size: 28px;
  font-weight: var(--fw-thin);
  color: var(--100);
  letter-spacing: -0.2px;
}
.orb-br-home-title .favorit { color: var(--100); }
.orb-br-home-sub {
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
}
.br-home-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 20px;
  background: var(--2);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  margin: var(--sp-4) 0 var(--sp-5);
}
.br-home-search:focus-within {
  border-color: var(--100);
  box-shadow: var(--glow);
}
.br-home-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--100);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: var(--fw-thin);
  letter-spacing: 0.16px;
}
.br-home-search input::placeholder { color: var(--40); }
.br-home-search .kbd {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  padding: 2px 6px;
  border: 1px solid var(--10);
  border-radius: 4px;
}
.orb-br-home-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
}
.orb-br-home-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  color: var(--80);
  font-family: var(--f-sans);
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-br-home-card:hover { background: var(--4); border-color: var(--100); color: var(--100); }
.orb-br-home-card .n { font-size: 12px; color: var(--100); margin-top: 6px; }
.orb-br-home-card .u { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; }
.orb-br-home-news {
  width: 100%;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--2);
  border: 1px solid var(--5);
  border-left: 2px solid var(--100);
  border-radius: var(--r-sm);
}
.orb-br-home-news p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--80);
  font-weight: var(--fw-thin);
  letter-spacing: 0.16px;
  line-height: 1.6;
}

.orb-br-render {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.orb-br-render-h {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--5);
}
.orb-br-render-h strong { color: var(--100); }
.orb-br-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.orb-br-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  color: var(--80);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0;
}
.orb-br-readme {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--80);
  letter-spacing: 0;
  padding: var(--sp-4);
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  white-space: pre-wrap;
  margin: 0;
}
.orb-br-skeleton { display: flex; flex-direction: column; gap: 8px; }
.orb-br-skeleton .orb-sk-line {
  height: 12px;
  background: var(--5);
  border-radius: 4px;
}
.orb-br-skeleton .orb-sk-line.orb-w55 { width: 55%; }
.orb-br-skeleton .orb-sk-line.orb-w65 { width: 65%; }
.orb-br-skeleton .orb-sk-line.orb-w70 { width: 70%; }
.orb-br-skeleton .orb-sk-line.orb-w80 { width: 80%; }
.orb-br-skeleton .orb-sk-line.orb-w90 { width: 90%; }
.orb-br-skeleton .orb-sk-block {
  height: 140px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  margin: 6px 0;
}

.orb-br-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-top: 1px solid var(--5);
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--60);
  letter-spacing: 0;
  background: rgba(0, 0, 0, 0.2);
}
.orb-br-foot .spacer { flex: 1; }
.orb-br-foot .dim { color: var(--40); }

/* ╔══════════════════════════════════════════════════════════╗
   ║ VIDEO player                                              ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-vid-app {
  display: grid;
  grid-template-columns: 1fr 280px;
  height: 100%;
  min-height: 0;
}
.orb-vid-stage {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--inv-100);
}
.orb-vid-canvas {
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(165, 165, 165, 0.06), transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(119, 119, 119, 0.08), transparent 50%),
    var(--inv-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.orb-vid-canvas-tape {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 15px, var(--4) 15px 16px);
  opacity: 0.5;
  pointer-events: none;
}
.orb-vid-canvas-grain {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, var(--5) 0 1px, transparent 1px 3px);
  opacity: 0.4;
  pointer-events: none;
  animation: vid-grain 0.4s steps(3) infinite;
}
@keyframes vid-grain {
  0% { transform: translateY(0); }
  100% { transform: translateY(-2px); }
}
.orb-vid-canvas-hud {
  position: absolute;
  top: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--60);
  letter-spacing: 0.3px;
}
.orb-vid-canvas-hud .orb-hud-l { color: var(--100); font-weight: var(--fw-med); }
.orb-vid-canvas-center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--40);
}
.orb-vid-canvas-frame {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
}

.orb-vid-bar {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--5);
  background: rgba(0, 0, 0, 0.3);
}
.orb-vid-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
}
.orb-vid-progress {
  height: 3px;
  background: var(--5);
  border-radius: var(--r-cap);
  overflow: hidden;
}
.orb-vid-progress .fill {
  height: 100%;
  background: var(--100);
}
.orb-vid-ctrls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.orb-vid-ctrls button {
  width: 32px; height: 32px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--5);
  color: var(--80);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-vid-ctrls button:hover { color: var(--100); border-color: var(--20); }
.orb-vid-ctrls .orb-play {
  width: 44px; height: 44px;
  background: var(--100);
  color: var(--inv-100);
  border-color: var(--100);
}
.orb-vid-ctrls .orb-play:hover { background: var(--100); color: var(--100); border-color: var(--100); }
.orb-vid-vol {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
}
.orb-vid-vol input[type="range"] {
  width: 80px;
  appearance: none;
  -webkit-appearance: none;
  height: 3px;
  background: var(--5);
  border-radius: var(--r-cap);
}
.orb-vid-vol input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 10px; height: 10px;
  border-radius: var(--r-cap);
  background: var(--100);
}
.orb-vid-vol .mono { font-size: 10px; color: var(--60); }

.orb-vid-side {
  background: rgba(0, 0, 0, 0.4);
  border-left: 1px solid var(--5);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.orb-vid-side-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--5);
}
.orb-vid-side-h .dim { color: var(--40); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0; }
.orb-vid-side-tabs {
  display: flex;
  gap: 2px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--5);
  flex-wrap: wrap;
}
.orb-vid-side-tabs button {
  background: transparent;
  border: 1px solid var(--5);
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.16px;
  padding: 4px 10px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-vid-side-tabs button.on { background: var(--5); color: var(--100); border-color: var(--20); }
.orb-vid-side-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.orb-vid-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--4);
  color: var(--80);
  font-family: var(--f-sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.orb-vid-row:hover { background: var(--4); color: var(--100); }
.orb-vid-row.on { background: rgba(165, 165, 165, 0.04); color: var(--100); }
.orb-vid-row.on .orb-vid-row-art { background: rgba(165, 165, 165, 0.14); color: var(--100); border-color: var(--100); }
.orb-vid-row-art {
  width: 40px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--5);
  border: 1px solid var(--10);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--60);
  flex-shrink: 0;
}
.orb-vid-row-meta { flex: 1; min-width: 0; }
.orb-vid-row-meta .t { font-size: 12px; color: var(--100); }
.orb-vid-row-meta .d { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; }
.orb-vid-row-tag {
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--60);
  border: 1px solid var(--10);
  padding: 2px 6px;
  border-radius: var(--r-cap);
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ PROFILE                                                    ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-prof-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: auto;
}
.orb-prof-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5);
  border-bottom: 1px solid var(--5);
}
.orb-prof-av-big {
  width: 96px;
  height: 96px;
  border-radius: var(--r-cap);
  background: rgba(165, 165, 165, 0.14);
  border: 1px solid var(--100);
  color: var(--100);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  font-weight: var(--fw-med);
}
.orb-prof-name {
  font-size: 28px;
  font-weight: var(--fw-thin);
  color: var(--100);
  letter-spacing: -0.2px;
}
.orb-prof-handle {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
  margin-top: 2px;
}
.orb-prof-bio {
  font-size: 14px;
  color: var(--80);
  font-weight: var(--fw-thin);
  letter-spacing: 0.16px;
  margin-top: 8px;
  max-width: 540px;
}
.orb-prof-stats {
  display: flex;
  gap: var(--sp-5);
  margin-top: var(--sp-3);
}
.orb-prof-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.orb-prof-stats .v {
  font-size: 18px;
  font-weight: var(--fw-thin);
  color: var(--100);
}
.orb-prof-stats .l {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
}
.orb-prof-cta { display: flex; flex-direction: column; gap: 6px; }
.orb-prof-cta button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--2);
  border: 1px solid var(--5);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  padding: 6px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-prof-cta button:hover { color: var(--100); border-color: var(--100); }

.orb-prof-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--5);
  overflow-x: auto;
  scrollbar-width: none;
}
.orb-prof-tabs::-webkit-scrollbar { display: none; }
.orb-prof-tabs button {
  background: transparent;
  border: 0;
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 11px;
  font-weight: var(--fw-med);
  letter-spacing: 0.16px;
  padding: 6px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
  white-space: nowrap;
}
.orb-prof-tabs button:hover { color: var(--100); background: var(--4); }
.orb-prof-tabs button.on { color: var(--100); background: rgba(165, 165, 165, 0.06); }

.orb-prof-body { padding: var(--sp-5); }
.orb-prof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}
.orb-prof-card {
  padding: 16px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
}
.orb-prof-card h3 {
  font-size: 13px !important;
  font-weight: var(--fw-med) !important;
  color: var(--80) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-shadow: none !important;
  margin: 0 0 12px !important;
  line-height: 1 !important;
}
.orb-prof-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--80);
  font-weight: var(--fw-thin);
  line-height: 1.55;
}
.orb-prof-card ul.mono { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; color: var(--60); }
.orb-prof-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--4);
  font-size: 12px;
  color: var(--80);
}
.orb-prof-row:last-child { border-bottom: 0; }
.orb-prof-row .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); }
.orb-prof-row .dim { color: var(--40); }
.orb-prof-row .favorit { color: var(--100); }

.orb-prof-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.orb-prof-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--40);
  font-weight: var(--fw-med);
  padding: 8px 12px;
  border-bottom: 1px solid var(--5);
}
.orb-prof-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--4);
  color: var(--80);
  font-weight: var(--fw-thin);
}
.orb-prof-table .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); }
.orb-prof-table .dim { color: var(--40); }
.orb-prof-table .status { display: inline-flex; align-items: center; gap: 6px; }
.orb-prof-table .status.live::before, .orb-prof-table .status.orb-idle::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-cap);
}
.orb-prof-table .status.live { color: var(--100); }
.orb-prof-table .status.live::before { background: var(--100); box-shadow: 0 0 6px var(--100); }
.orb-prof-table .status.orb-idle { color: var(--40); }
.orb-prof-table .status.orb-idle::before { background: var(--40); }
.orb-prof-mini {
  background: transparent;
  border: 1px solid var(--10);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 10px;
  padding: 3px 10px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-prof-link {
  background: transparent;
  border: 1px solid var(--10);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
  margin-top: 8px;
}
.orb-prof-link:hover { color: var(--100); border-color: var(--100); }
.orb-prof-link.danger:hover { color: var(--100); border-color: var(--100); }

/* ╔══════════════════════════════════════════════════════════╗
   ║ NETWORK app                                                ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-net-app {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100%;
  min-height: 0;
}
.orb-net-side {
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid var(--5);
  padding: var(--sp-3) var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.orb-net-side-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--40);
  padding: var(--sp-3) 10px 4px;
  font-weight: var(--fw-med);
}
.orb-net-side-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: var(--fw-thin);
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.orb-net-side-row:hover { background: var(--4); color: var(--100); }
.orb-net-side-row.on { background: var(--5); color: var(--100); }
.orb-net-side-foot {
  margin-top: auto;
  padding: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
  border-top: 1px solid var(--5);
}

.orb-net-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-4) var(--sp-5);
}
.orb-net-overview { display: flex; flex-direction: column; gap: var(--sp-4); }
.orb-net-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.orb-net-stat {
  padding: 14px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
}
.orb-net-stat .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); font-weight: var(--fw-med); }
.orb-net-stat .v { font-size: 22px; font-weight: var(--fw-thin); color: var(--100); margin-top: 4px; }
.orb-net-stat .v.g { color: var(--100); }
.orb-net-stat .s { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; margin-top: 2px; }
.orb-net-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.orb-net-card {
  padding: 16px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
}
.orb-net-card h3 {
  font-size: 13px !important;
  font-weight: var(--fw-med) !important;
  color: var(--80) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-shadow: none !important;
  margin: 0 0 12px !important;
  line-height: 1 !important;
}
.orb-net-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--80);
  letter-spacing: 0;
}
.orb-net-card ul .g { color: var(--100); }
.orb-net-card ul .d { color: var(--40); }
.orb-net-chart { width: 100%; height: 70px; }

.orb-net-pane { padding: 0; }
.orb-net-pane h2 {
  font-size: 18px !important;
  font-weight: var(--fw-thin) !important;
  color: var(--100) !important;
  margin: 0 0 var(--sp-3) !important;
  line-height: 1.4 !important;
}
.orb-net-row.orb-simple {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--4);
  font-size: 13px;
  color: var(--80);
}
.orb-net-row.orb-simple .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); }

.orb-net-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.orb-net-table th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--40);
  font-weight: var(--fw-med);
  padding: 8px 12px;
  border-bottom: 1px solid var(--5);
}
.orb-net-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--4);
  color: var(--80);
  font-weight: var(--fw-thin);
}
.orb-net-table .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); }
.orb-net-table .dim { color: var(--40); }
.orb-net-table .g { color: var(--100); }
.orb-net-table .r { color: var(--100); }
.orb-net-pill {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  background: var(--2);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  color: var(--80);
  font-family: var(--f-mono);
}
.orb-net-pill.on { color: var(--100); border-color: var(--100); background: rgba(165, 165, 165, 0.06); }
.orb-net-pill.ok { color: var(--100); border-color: rgba(147, 147, 147, 0.4); }
.orb-net-pill.orb-idle { color: var(--40); }
.orb-net-status { display: inline-flex; align-items: center; gap: 6px; }
.orb-net-status .dot { width: 6px; height: 6px; border-radius: var(--r-cap); background: var(--40); }
.orb-net-status.live { color: var(--100); }
.orb-net-status.live .dot { background: var(--100); box-shadow: 0 0 6px var(--100); }
.orb-net-status.orb-idle { color: var(--40); }

/* ╔══════════════════════════════════════════════════════════╗
   ║ VM Manager                                                ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-vm-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
  min-height: 0;
}
.orb-vm-side {
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid var(--5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.orb-vm-side-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--5);
}
.orb-vm-new {
  width: 24px; height: 24px;
  border-radius: var(--r-cap);
  background: var(--2);
  border: 1px solid var(--10);
  color: var(--80);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.orb-vm-side-list { flex: 1; overflow-y: auto; padding: 4px; display: flex; flex-direction: column; gap: 2px; }
.orb-vm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--80);
  font-family: var(--f-sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.orb-vm-row:hover { background: var(--4); }
.orb-vm-row.on {
  background: rgba(165, 165, 165, 0.06);
  border-color: var(--100);
  color: var(--100);
}
.orb-vm-row .dot {
  width: 8px; height: 8px;
  border-radius: var(--r-cap);
  background: var(--40);
  flex-shrink: 0;
}
.orb-vm-row .dot.running { background: var(--100); box-shadow: 0 0 6px var(--100); }
.orb-vm-row .dot.orb-paused  { background: var(--100); }
.orb-vm-row .dot.orb-stopped { background: var(--40); }
.orb-vm-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.orb-vm-row-meta .n { font-size: 12px; color: var(--100); font-weight: var(--fw-thin); letter-spacing: 0; }
.orb-vm-row-meta .d { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; }
.orb-vm-row-state {
  font-family: var(--f-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--40);
}
.orb-vm-row.running .orb-vm-row-state { color: var(--100); }
.orb-vm-side-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.orb-vm-side-foot .mono { font-family: var(--f-mono); font-size: 10px; color: var(--60); letter-spacing: 0; }

.orb-vm-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.orb-vm-main-h {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--5);
  background: rgba(0, 0, 0, 0.3);
}
.orb-vm-title {
  font-family: var(--f-mono);
  font-size: 15px;
  color: var(--100);
  letter-spacing: 0;
}
.orb-vm-sub {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
  margin-top: 2px;
}
.orb-vm-acts { display: flex; gap: 4px; }
.orb-vm-acts button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--2);
  border: 1px solid var(--5);
  color: var(--80);
  font-family: var(--f-sans);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-vm-acts button:hover { color: var(--100); border-color: var(--20); }
.orb-vm-cta { background: var(--100) !important; color: var(--inv-100) !important; border-color: var(--100) !important; }
.orb-vm-cta:hover { background: var(--100) !important; color: var(--100) !important; }

.orb-vm-board {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 8px;
  padding: 12px;
  min-height: 0;
}
.orb-vm-screen {
  position: relative;
  background: var(--inv-100);
  border: 1px solid var(--10);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.orb-vm-screen-hud {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--60);
  letter-spacing: 0;
  border-bottom: 1px solid var(--5);
  background: rgba(0,0,0,0.4);
}
.orb-vm-screen-body {
  flex: 1;
  margin: 0;
  padding: 14px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--100);
  letter-spacing: 0;
  white-space: pre-wrap;
  background: rgba(0,0,0,0.6);
  overflow: auto;
}
.orb-vm-screen-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--40);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0;
}

.orb-vm-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.orb-vm-stat {
  padding: 10px 12px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-sm);
}
.orb-vm-stat .l {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--40);
  font-weight: var(--fw-med);
  margin-bottom: 4px;
}
.orb-vm-stat .bar {
  height: 4px;
  background: var(--5);
  border-radius: var(--r-cap);
  overflow: hidden;
  margin: 4px 0;
}
.orb-vm-stat .bar .fill { height: 100%; background: var(--100); }
.orb-vm-stat .v { font-family: var(--f-mono); font-size: 11px; color: var(--100); letter-spacing: 0; }

/* ╔══════════════════════════════════════════════════════════╗
   ║ CALENDAR · NOTES · TASKS · CALC · CAM · PHOTOS            ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-cal-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.orb-cal-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--5);
}
.orb-cal-bar button {
  width: 28px; height: 28px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--5);
  color: var(--60);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.orb-cal-bar button:hover { color: var(--100); border-color: var(--20); }
.orb-cal-views {
  margin-left: auto;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--4);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
}
.orb-cal-views button {
  width: auto;
  height: 24px;
  background: transparent;
  border: 0;
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0 12px;
  border-radius: var(--r-cap);
}
.orb-cal-views button.on { background: var(--100); color: var(--inv-100); }
.orb-cal-new {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  background: var(--100) !important;
  color: var(--inv-100) !important;
  border: 0 !important;
  font-family: var(--f-sans);
  font-size: 11px !important;
  padding: 6px 12px !important;
  border-radius: var(--r-cap) !important;
  width: auto !important;
  height: auto !important;
}
.orb-cal-grid {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.orb-cal-times {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--5);
}
.orb-cal-hr {
  height: 56px;
  padding-right: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
  text-align: right;
  padding-top: 8px;
  margin-top: 32px;
}
.orb-cal-times .orb-cal-hr:first-child { margin-top: 32px; }
.orb-cal-col { border-right: 1px solid var(--4); display: flex; flex-direction: column; min-width: 0; }
.orb-cal-col-h {
  height: 32px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--5);
}
.orb-cal-col-h .orb-dow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--40);
}
.orb-cal-col-h .orb-dnum {
  font-size: 16px;
  font-weight: var(--fw-thin);
  color: var(--100);
}
.orb-cal-col-grid {
  position: relative;
  flex: 1;
}
.orb-cal-cell { height: 56px; border-bottom: 1px solid var(--4); }
.orb-cal-event {
  position: absolute;
  left: 4px;
  right: 4px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  overflow: hidden;
}
.orb-cal-event .t { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; }
.orb-cal-event .ti { font-size: 12px; color: var(--100); font-weight: var(--fw-thin); }
.orb-cal-event .w { font-size: 10px; color: var(--60); }
.orb-cal-event.orb-tag-work { border-left: 3px solid var(--80); background: rgba(123, 123, 123, 0.04); }
.orb-cal-event.orb-tag-social { border-left: 3px solid var(--100); background: rgba(147, 147, 147, 0.04); }
.orb-cal-event.orb-tag-critical { border-left: 3px solid var(--100); background: rgba(165, 165, 165, 0.06); }
.orb-cal-event.orb-tag-wellness { border-left: 3px solid var(--60); background: rgba(189, 189, 189, 0.04); }

/* Notes */
.orb-notes-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
  min-height: 0;
}
.orb-notes-side {
  background: rgba(0, 0, 0, 0.3);
  border-right: 1px solid var(--5);
  display: flex;
  flex-direction: column;
}
.orb-notes-side-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--5);
}
.orb-notes-side-h button {
  width: 24px; height: 24px;
  border-radius: var(--r-cap);
  background: var(--2);
  border: 1px solid var(--10);
  color: var(--80);
  cursor: pointer;
}
.orb-notes-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 10px;
  padding: 6px 12px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
}
.orb-notes-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--f-sans);
  font-size: 11px;
  color: var(--100);
}
.orb-notes-list { flex: 1; overflow-y: auto; padding: 4px 6px 8px; }
.orb-notes-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--80);
  font-family: var(--f-sans);
  text-align: left;
  cursor: pointer;
  margin-bottom: 2px;
}
.orb-notes-row:hover { background: var(--4); }
.orb-notes-row.on { background: rgba(165, 165, 165, 0.06); border-color: var(--100); }
.orb-notes-row .t { font-size: 12px; color: var(--100); font-weight: var(--fw-thin); }
.orb-notes-row .p { font-size: 11px; color: var(--60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb-notes-row .d { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; }

.orb-notes-main { display: flex; flex-direction: column; min-height: 0; }
.orb-notes-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--5);
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--80);
  letter-spacing: 0;
}
.orb-notes-bar .dim { color: var(--40); }
.orb-notes-bar .spacer { flex: 1; }
.orb-notes-edit {
  flex: 1;
  width: 100%;
  padding: var(--sp-5);
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--80);
  letter-spacing: 0;
  line-height: 1.7;
  resize: none;
}

/* Tasks */
.orb-tasks-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.orb-tasks-h {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--5);
}
.orb-tasks-tabs {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--4);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
}
.orb-tasks-tabs button {
  background: transparent;
  border: 0;
  color: var(--60);
  font-family: var(--f-sans);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-tasks-tabs button.on { background: var(--100); color: var(--inv-100); }
.orb-tasks-h .dim { margin-left: auto; }
.orb-tasks-new {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 16px 0;
  padding: 6px 6px 6px 18px;
  background: var(--2);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
}
.orb-tasks-new input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--100);
  font-family: var(--f-sans);
  font-size: 13px;
  font-weight: var(--fw-thin);
  padding: 8px 0;
}
.orb-tasks-new input::placeholder { color: var(--40); }
.orb-tasks-new button {
  width: 32px; height: 32px;
  border-radius: var(--r-cap);
  background: var(--100);
  color: var(--inv-100);
  border: 0;
  cursor: pointer;
}
.orb-tasks-list {
  list-style: none;
  margin: 0;
  padding: 8px 16px 16px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.orb-tasks-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--4);
}
.orb-tasks-list li.done { opacity: 0.4; }
.orb-tasks-list li.done .orb-tasks-t { text-decoration: line-through; }
.orb-tasks-check {
  width: 18px; height: 18px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--20);
  color: var(--100);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.orb-tasks-list li.done .orb-tasks-check {
  background: var(--100);
  border-color: var(--100);
  color: var(--inv-100);
}
.orb-tasks-body { flex: 1; min-width: 0; }
.orb-tasks-t { font-size: 13px; color: var(--100); font-weight: var(--fw-thin); }
.orb-tasks-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
  margin-top: 2px;
}
.orb-tasks-action {
  background: transparent;
  border: 0;
  color: var(--40);
  font-size: 14px;
  cursor: pointer;
  padding: 0 6px;
}
.orb-tasks-action:hover { color: var(--100); }

/* Calculator */
.orb-calc-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  padding: var(--sp-3);
  gap: var(--sp-3);
  max-width: 360px;
  margin: 0 auto;
  width: 100%;
}
.orb-calc-display {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  padding: var(--sp-4);
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  min-height: 140px;
}
.orb-calc-stream {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
}
.orb-calc-val {
  font-family: var(--f-mono);
  font-size: 40px;
  color: var(--100);
  font-weight: var(--fw-thin);
  letter-spacing: -0.4px;
  margin-top: 8px;
}
.orb-calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.orb-calc-k {
  height: 56px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  color: var(--100);
  font-family: var(--f-mono);
  font-size: 18px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.orb-calc-k:hover { background: var(--4); }
.orb-calc-k.op { color: var(--100); }
.orb-calc-k.eq { background: var(--100); color: var(--inv-100); border-color: var(--100); }
.orb-calc-k.orb-clear { color: var(--100); }
.orb-calc-k.wide { grid-column: span 2; }

/* Camera app */
.orb-cam-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.orb-cam-h {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--5);
}
.orb-cam-h .spacer { flex: 1; }
.orb-cam-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(214, 38, 3, 0.15);
  border: 1px solid var(--red, #d62603);
  color: var(--red, #d62603);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-cam-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  padding: 16px;
  overflow-y: auto;
}
.orb-cam-tile {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--inv-100);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
}
.orb-cam-tile.live { border-color: var(--100); }
.orb-cam-tile.orb-motion { border-color: var(--100); }
.orb-cam-tile-hud {
  position: absolute;
  top: 8px; left: 8px; right: 8px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10px;
  z-index: 2;
}
.orb-cam-tile-hud .n { color: var(--80); }
.orb-cam-tile-hud .live {
  color: var(--100);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.orb-cam-tile-frame {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.04), transparent 50%);
}
.orb-cam-tile-frame .scan {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px);
}
.orb-cam-tile-frame .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20% 20%;
}
.orb-cam-motion {
  position: absolute;
  bottom: 8px; left: 8px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--100);
  letter-spacing: 0;
}

/* Photos */
.orb-ph-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}
.orb-ph-h {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--5);
}
.orb-ph-section { padding: var(--sp-4) var(--sp-5); }
.orb-ph-section-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.orb-ph-month { font-size: 14px; color: var(--100); font-weight: var(--fw-thin); }
.orb-ph-count { font-size: 10px; color: var(--40); font-family: var(--f-mono); letter-spacing: 0; }
.orb-ph-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.orb-ph-tile {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.orb-ph-tile-art {
  width: 100%; height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgba(119, 119, 119, 0.4), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(165, 165, 165, 0.3), transparent 60%),
    var(--inv-100);
  border: 1px solid var(--5);
}
.orb-ph-tile-art[data-tag="studio"] { background: radial-gradient(circle, rgba(123, 123, 123, 0.4), transparent), var(--inv-100); }
.orb-ph-tile-art[data-tag="walz"]   { background: radial-gradient(circle, rgba(147, 147, 147, 0.3), transparent), var(--inv-100); }
.orb-ph-tile-art[data-tag="lin"]    { background: radial-gradient(circle, rgba(189, 189, 189, 0.3), transparent), var(--inv-100); }
.orb-ph-tile-art[data-tag="zürich"] { background: radial-gradient(circle, rgba(165, 165, 165, 0.3), transparent), var(--inv-100); }

/* ╔══════════════════════════════════════════════════════════╗
   ║ Final fixes / shared helpers                              ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Make sure scene-switcher stays above the auth gate when authed */
.scene-switcher { z-index: 60; }

/* Hide hotkeys hint when auth not done */
body:has(.orb-auth-root) .hotkeys,
body:has(.orb-auth-root) .scene-switcher,
body:has(.orb-auth-root) .dock-wrap,
body:has(.orb-auth-root) .panel,
body:has(.orb-auth-root) .orb-video-takeover {
  display: none !important;
}

/* Wall corners go behind quickslots when at bottom */
.orb-wall-corner.bl, .orb-wall-corner.br { bottom: 380px; }

/* ╔═ verbatim from orbit-os/v3.css · 69422 chars ═╗ */
/* ============================================================
   v3 — Simpler Wall + Taskbar Desktop OS.
   Layered after styles.css; uses only Orbit DS tokens.
   ============================================================ */

/* ── Shared: OrbitBackground canvas ──────────────────────── */
.orb-orbit-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(59, 59, 59, 0.18), transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(165, 165, 165, 0.06), transparent 70%),
    var(--inv-100);
}
.orb-orbit-bg canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ╔══════════════════════════════════════════════════════════╗
   ║ WALL DISPLAY v5 — Lockscreen aesthetic                   ║
   ╚══════════════════════════════════════════════════════════╝ */
.orb-wall {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ── Corner chrome (four quiet anchors) ─────────────────── */
.orb-wall-corner {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.orb-wall-corner.tl { top: 24px; left: 32px; }
.orb-wall-corner.tr { top: 24px; right: 32px; gap: var(--sp-2); }
.orb-wall-corner.bl { bottom: 120px; left: 32px; }
.orb-wall-corner.br { bottom: 120px; right: 32px; }

.orb-wall-corner .orb-o-glyph {
  width: 22px; height: 22px;
  border-radius: var(--r-cap);
  border: 1px solid var(--40);
  position: relative;
  flex-shrink: 0;
}
.orb-wall-corner .orb-o-glyph::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: var(--r-cap);
  background: var(--100);
  box-shadow: 0 0 6px var(--100);
}
.orb-corner-stack {
  display: flex; flex-direction: column; gap: 1px;
}
.orb-corner-stack.orb-right { align-items: flex-end; }
.orb-corner-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--100);
  font-weight: 480;
}
.orb-corner-meta {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
}
.orb-corner-meta.favorit { color: var(--100); text-transform: none; font-family: var(--f-sans); font-size: 11px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  color: var(--80);
  font-size: 11px;
  letter-spacing: 0.16px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px);
  white-space: nowrap;
  flex-shrink: 0;
}
.status-pill.mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); }
.status-pill .dot {
  width: 6px; height: 6px; border-radius: var(--r-cap);
  background: var(--40);
}
.status-pill .dot.live { background: var(--100); box-shadow: 0 0 6px var(--100); }

/* ── The hero stage — centered lockscreen stack ─────────── */
.orb-wall-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 80px 32px 200px;
  pointer-events: none;
}
.orb-wall-stage > * { pointer-events: auto; }

.orb-stage-greet {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--60);
  text-transform: uppercase;
}
.orb-stage-greet .orb-weekday { color: var(--100); font-weight: 480; }
.orb-stage-greet .orb-date { color: var(--60); }
.orb-stage-greet .orb-dot-sep { color: var(--20); }

.orb-stage-clock {
  margin: 8px 0 0;
  font-family: var(--f-sans);
  font-weight: 180;
  font-size: clamp(120px, 18vw, 260px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--100);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.orb-stage-clock .hh, .orb-stage-clock .mm { color: var(--100); }
.orb-stage-clock .orb-colon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18em;
  margin: 0 0.12em;
  align-self: center;
  font-size: 0;
}
.orb-stage-clock .orb-colon::before,
.orb-stage-clock .orb-colon::after {
  content: '';
  width: 0.10em;
  height: 0.10em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: block;
  animation: colon-blink 2s ease-in-out infinite;
}
@keyframes colon-blink { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.orb-stage-clock .ss {
  font-family: var(--f-mono);
  font-size: 0.18em;
  color: var(--40);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.12em;
  align-self: baseline;
}

.orb-stage-sub {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: 13px;
  color: var(--60);
  letter-spacing: 0.16px;
  margin-top: 8px;
}
.orb-stage-sub .orb-dot-sep { color: var(--20); }

/* ── Below-the-fold strip ──────────────────────────────── */
.orb-stage-strip {
  margin-top: 56px;
  display: flex;
  align-items: stretch;
  gap: var(--sp-6);
  padding: 18px 28px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  max-width: min(1100px, 90vw);
  width: 100%;
}
.orb-strip-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.orb-strip-h {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--40);
  margin-bottom: 4px;
  font-weight: 480;
}
.orb-strip-row {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: var(--sp-3);
  align-items: baseline;
}
.orb-strip-row .t {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--60);
  letter-spacing: 0;
}
.orb-strip-row .l {
  font-size: 13px;
  color: var(--100);
  font-weight: 180;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orb-strip-row.now .t { color: var(--100); }
.orb-strip-row.now .l { color: var(--100); }
.orb-strip-row.orb-faint .t, .orb-strip-row.orb-faint .l { color: var(--40); }
.orb-strip-row.notif {
  grid-template-columns: 56px 1fr;
}
.orb-strip-row.notif .who {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--60);
  font-weight: 480;
}
.orb-strip-row.notif .who.astra { color: var(--100); }
.orb-strip-row.notif .who.orb-lin   { color: var(--80); }
.orb-strip-row.notif .l {
  font-size: 12px;
  color: var(--80);
  font-weight: 180;
}

.orb-strip-divider {
  width: 1px;
  background: var(--5);
}

.orb-np-col .orb-strip-np {
  display: flex; gap: var(--sp-3); align-items: center;
  padding-top: 2px;
}
.orb-np-col .np-art {
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(165, 165, 165, 0.6), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(119, 119, 119, 0.7), transparent 55%),
    #0d0d0d;
  border: 1px solid var(--10);
}
.orb-np-col .orb-np-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.orb-np-col .np-title {
  font-size: 13px; color: var(--100); font-weight: 180;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orb-np-col .np-artist {
  font-size: 10px; color: var(--40);
}
.orb-np-col .np-progress {
  height: 2px; background: var(--5); border-radius: var(--r-cap);
  overflow: hidden; margin-top: 4px;
}
.orb-np-col .np-progress .bar {
  height: 100%; width: 38%; background: var(--100);
}

╗
   ║ ORBIT OS — Taskbar Desktop                               ║
   ╚══════════════════════════════════════════════════════════╝ */
.orb-os-desktop {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* ── Desktop master glyph (rotated 180°, the hero watermark) */
.orb-desk-master {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: exclusion;
}
.orb-desk-master svg { filter: drop-shadow(0 0 80px rgba(165, 165, 165, 0.05)); }
.orb-desk-meta {
  position: absolute;
  bottom: 76px;
  left: 28px;
  z-index: 3;
  pointer-events: none;
  display: flex; flex-direction: column; gap: 4px;
}
.orb-desk-label {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
}
.orb-desk-sub {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--20);
  letter-spacing: 0;
}


/* ── Floating window — single Orbit-style chrome ──────────── */
.flw {
  position: absolute;
  background: rgba(12, 12, 12, 0.82);
  border: 1px solid var(--10);
  border-radius: var(--r-md);
  box-shadow: 0 24px 64px rgba(0,0,0,0.65);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  transition: border-color 220ms var(--ease-out);
}
.flw.focus { border-color: var(--20); }
.flw.max {
  border-radius: var(--r-sm);
}
.flw-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 8px 8px 14px;
  height: 40px;
  border-bottom: 1px solid var(--5);
  background: rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
  cursor: move;
  user-select: none;
}
.orb-flw-glyph {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  opacity: 0.7;
}
.flw.focus .orb-flw-glyph { opacity: 1; }
.orb-flw-title {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orb-flw-title .orb-cur { color: var(--80); }
.flw.focus .orb-flw-title .orb-cur { color: var(--100); }
.orb-flw-title .sep { color: var(--20); }

.orb-flw-actions { display: flex; gap: 2px; }
.orb-flw-actions button {
  background: transparent;
  border: 0;
  color: var(--40);
  width: 28px; height: 28px;
  border-radius: var(--r-cap);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 200ms var(--ease-out);
}
.orb-flw-actions button:hover { color: var(--100); background: var(--5); }
.orb-flw-actions button.danger:hover {
  background: var(--100);
  color: var(--100);
}

.orb-flw-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* ── Taskbar — bottom dock, DS-styled ────────────────────── */
.orb-taskbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3);
  background: rgba(0, 0, 0, 0.6);
  border-top: 1px solid var(--5);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  z-index: 50;
}
.orb-task-sep {
  width: 1px; height: 28px;
  background: var(--10);
  margin: 0 4px;
}
.orb-task-spacer { flex: 1; }

.orb-start-btn {
  background: transparent;
  border: 1px solid transparent;
  width: 52px; height: 52px;
  border-radius: var(--r-cap);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 220ms var(--ease-out);
  color: var(--80);
}
.orb-start-btn:hover {
  border-color: var(--10);
  background: var(--4);
  color: var(--100);
}
.orb-start-btn.open {
  background: rgba(165, 165, 165, 0.1);
  border-color: rgba(165, 165, 165, 0.4);
  color: var(--100);
}

.orb-task-apps {
  display: flex;
  align-items: center;
  gap: 2px;
}
.orb-task-app {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--60);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 220ms var(--ease-out);
}
.orb-task-app:hover { background: var(--4); color: var(--100); border-color: var(--5); }
.orb-task-app.open { color: var(--100); }
.orb-task-app.min { color: var(--60); }
.orb-task-app .orb-ind {
  position: absolute;
  bottom: 2px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: var(--r-cap);
  background: transparent;
  transition: all 220ms var(--ease-out);
}
.orb-task-app.open .orb-ind {
  width: 16px; height: 2px;
  background: var(--100);
  box-shadow: 0 0 6px var(--100);
}
.orb-task-app.min .orb-ind {
  width: 8px; height: 2px;
  background: var(--40);
}
.orb-task-app .orb-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(0,0,0,0.92);
  border: 1px solid var(--10);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: 11px;
  font-family: var(--f-sans);
  color: var(--100);
  letter-spacing: 0.16px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 180ms var(--ease-out);
}
.orb-task-app:hover .orb-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Tray group — DS pill cluster ──────────────────────── */
.orb-tray-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.orb-tray-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-cap);
  font-family: var(--f-sans);
  font-size: 11px;
  letter-spacing: 0.16px;
  color: var(--80);
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  height: 30px;
}
.orb-tray-pill .lbl { display: none; }
.orb-tray-pill:hover {
  background: var(--2);
  border-color: var(--5);
  color: var(--100);
}
.orb-tray-pill:hover .lbl { display: inline; }
.orb-tray-pill:hover {
  background: var(--4);
  border-color: var(--10);
  color: var(--100);
}
.orb-tray-pill .lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--40);
  font-weight: 480;
}
.orb-tray-pill .val {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0;
  color: var(--100);
  font-variant-numeric: tabular-nums;
}
.orb-tray-pill .val .g { color: var(--100); }

.orb-task-clock-pill {
  display: inline-flex; flex-direction: column;
  align-items: flex-end; justify-content: center;
  padding: 5px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-cap);
  color: var(--100);
  cursor: pointer;
  transition: all 200ms var(--ease-out);
  height: 38px;
  line-height: 1.1;
}
.orb-task-clock-pill:hover { background: var(--2); border-color: var(--5); }
.orb-task-clock-pill:hover { background: var(--4); border-color: var(--10); }
.orb-task-clock-pill .t {
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 480;
  letter-spacing: 0.2px;
  font-variant-numeric: tabular-nums;
}
.orb-task-clock-pill .d {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
}

/* ── Start menu — sectioned, scrolling ─────────────────── */
.orb-start-scrim {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: transparent;
}
.orb-start-menu {
  position: fixed;
  bottom: 76px;
  left: 12px;
  width: 540px;
  max-height: 78vh;
  background: rgba(12, 12, 12, 0.94);
  border: 1px solid var(--10);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 100px rgba(0,0,0,0.75);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  z-index: 70;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transform-origin: bottom left;
  transition: all 280ms var(--ease-out);
}
.orb-start-menu.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.sm-search {
  margin: 14px 16px 4px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  color: var(--40);
  transition: all 200ms var(--ease-out);
}
.sm-search:focus-within { border-color: var(--40); box-shadow: var(--glow); }
.sm-search input {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  color: var(--100);
  font-family: inherit;
  font-size: 13px;
  font-weight: 180;
  letter-spacing: 0.16px;
}
.sm-search input::placeholder { color: var(--40); }
.sm-search .kbd {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--40);
  padding: 2px 6px;
  border: 1px solid var(--10);
  border-radius: 4px;
}

.orb-sm-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--10) transparent;
}
.orb-sm-scroll::-webkit-scrollbar { width: 6px; }
.orb-sm-scroll::-webkit-scrollbar-thumb { background: var(--10); border-radius: 4px; }

.orb-sm-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 6px;
}
.orb-sm-section-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); font-weight: 480;
  padding: 18px 20px 6px;
  border-top: 1px solid var(--5);
  margin-top: 4px;
}
.orb-sm-section:first-child .orb-sm-section-h { border-top: 0; padding-top: 12px; margin-top: 0; }
.orb-sm-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 4px 12px 14px; }
.orb-sm-app { padding: 12px 6px;
  border-radius: var(--r-md);
  color: var(--80);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.16px;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
}
.orb-sm-app:hover { background: var(--4); color: var(--100); }
.orb-sm-app .orb-sm-icn {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--2);
  border: 1px solid var(--5);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--80);
  transition: all 200ms var(--ease-out);
}
.orb-sm-app:hover .orb-sm-icn {
  border-color: var(--100);
  color: var(--100);
  background: rgba(165, 165, 165, 0.06);
}

.orb-sm-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--5);
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,0.3);
}
.orb-sm-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.orb-sm-user .av {
  width: 32px; height: 32px;
  border-radius: var(--r-cap);
  background: linear-gradient(135deg, rgba(165, 165, 165, 0.6), rgba(158, 158, 158, 0.6));
  border: 1px solid var(--10);
}
.orb-sm-user .orb-uname {
  font-size: 13px; color: var(--100); font-weight: 480; letter-spacing: 0.16px;
}
.orb-sm-user .role {
  font-family: var(--f-mono);
  font-size: 10px; color: var(--40); letter-spacing: 0;
}
.orb-sm-foot-btns { display: flex; gap: 4px; }
.orb-sm-foot-btns button {
  background: transparent;
  border: 1px solid var(--10);
  color: var(--60);
  width: 30px; height: 30px;
  border-radius: var(--r-cap);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all 200ms var(--ease-out);
}
.orb-sm-foot-btns button:hover { color: var(--100); border-color: var(--40); }

/* ── Placeholder app body (for stubs) ───────────────────── */
.orb-placeholder-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  color: var(--40);
}
.orb-ph-icon {
  width: 88px; height: 88px;
  border-radius: var(--r-2xl);
  border: 1px solid var(--10);
  background: var(--2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--60);
}
.orb-ph-name { font-size: 22px; font-weight: 200; color: var(--80); letter-spacing: -0.2px; }
.orb-ph-meta { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; color: var(--40); }

/* Move the Astra dock above the taskbar in OS scene */
body:has(.orb-os-desktop) .dock-wrap { bottom: 80px; }
body:has(.orb-os-desktop) .panel { bottom: 80px; }


/* ╔══════════════════════════════════════════════════════════╗
   ║ v6 — Start menu black-hole glyph + tray popovers          ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Hide the old desktop watermark (no longer rendered) */
.orb-desk-master { display: none; }
.orb-desk-meta {
  position: absolute;
  bottom: 76px;
  left: 28px;
  z-index: 3;
  pointer-events: none;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--40);
  letter-spacing: 0;
}
.orb-desk-meta .orb-desk-label { color: var(--60); }
.orb-desk-meta .orb-desk-sub { color: var(--20); font-size: 10px; }

/* ── Start menu master glyph — black hole bleeding over taskbar */
.orb-start-master { display: none; }

/* Adjust start-menu position now that the glyph anchors the bottom-left */
.orb-start-menu {
  left: 18px;
  bottom: 80px;
}

/* ── Astra task-app filled state ──────────────────────────── */
.orb-task-app.orb-astra-active {
  color: var(--100);
  background: rgba(165, 165, 165, 0.08);
  border-color: rgba(165, 165, 165, 0.3);
  animation: astra-breathe 2.6s ease-in-out infinite;
}
@keyframes astra-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(165, 165, 165, 0); }
  50%      { box-shadow: 0 0 14px rgba(165, 165, 165, 0.4), inset 0 0 12px rgba(165, 165, 165, 0.1); }
}
.orb-task-app.orb-astra-active .orb-ind {
  background: var(--100) !important;
  box-shadow: 0 0 8px var(--100) !important;
  opacity: 1 !important;
  width: 18px !important;
  height: 2px !important;
}

/* ── Clock pill active state ──────────────────────────────── */
.orb-task-clock-pill.active {
  background: var(--5);
  border-color: var(--100);
  color: var(--100);
}
.orb-task-clock-pill.active .t { color: var(--100); }

/* Tray pill active */
.orb-tray-pill.active {
  background: var(--5);
  border-color: var(--100);
  color: var(--100);
}
.orb-tray-pill.active .val { color: var(--100); }

/* ── Tray popover ─────────────────────────────────────────── */
.orb-tray-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: transparent;
}
.orb-tray-popover {
  position: fixed;
  bottom: 80px;
  right: 18px;
  width: 340px;
  max-height: 70vh;
  z-index: 95;
  background: rgba(12, 12, 12, 0.94);
  border: 1px solid var(--10);
  border-radius: var(--r-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: pop-in 280ms var(--ease-out);
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.orb-tray-popover .orb-pop-h {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--5);
  background: rgba(0,0,0,0.3);
}
.orb-tray-popover .orb-pop-h .title {
  font-size: 13px;
  font-weight: 480;
  color: var(--100);
  letter-spacing: 0.16px;
  flex: 1;
}
.orb-tray-popover .orb-pop-h .meta {
  font-size: 10px;
  color: var(--40);
  letter-spacing: 0;
}
.orb-tray-popover .orb-pop-h .close {
  background: transparent;
  border: 1px solid var(--10);
  color: var(--40);
  width: 22px; height: 22px;
  border-radius: var(--r-cap);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
}
.orb-tray-popover .orb-pop-h .close:hover { color: var(--100); border-color: var(--40); }
.orb-tray-popover .orb-pop-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.orb-tray-popover .orb-pop-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--5);
}
.orb-tray-popover .orb-pop-section:last-child { border-bottom: 0; }
.orb-tray-popover .orb-pop-h-mini {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--40);
  margin-bottom: 8px;
  font-weight: 480;
}
.orb-tray-popover .orb-pop-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--80);
}
.orb-tray-popover .orb-pop-slider {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  height: 4px;
  background: var(--5);
  border-radius: var(--r-cap);
  outline: 0;
}
.orb-tray-popover .orb-pop-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: var(--r-cap);
  background: var(--100);
  cursor: pointer;
  border: 0;
}
.orb-tray-popover .orb-pop-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: var(--r-cap);
  background: var(--100);
  cursor: pointer;
  border: 0;
}
.orb-tray-popover .orb-pop-val {
  font-size: 12px;
  color: var(--100);
  font-variant-numeric: tabular-nums;
  min-width: 40px;
  text-align: right;
  letter-spacing: 0;
}
.orb-tray-popover .orb-pop-list-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  color: var(--80);
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: all 200ms var(--ease-out);
  text-align: left;
}
.orb-tray-popover .orb-pop-list-row:hover { background: var(--4); color: var(--100); }
.orb-tray-popover .orb-pop-list-row.active { background: rgba(165, 165, 165, 0.06); color: var(--100); }
.orb-tray-popover .orb-pop-list-row .orb-pl-name { flex: 1; min-width: 0; }
.orb-tray-popover .orb-pop-list-row .orb-pl-name .nm {
  font-size: 13px;
  font-weight: 180;
  letter-spacing: 0.16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.orb-tray-popover .orb-pop-list-row .orb-pl-name .meta {
  font-size: 10px;
  color: var(--40);
  font-family: var(--f-mono);
  letter-spacing: 0;
}
.orb-tray-popover .orb-pop-list-row.active .orb-pl-name .meta { color: rgba(165, 165, 165, 0.6); }
.orb-tray-popover .orb-pop-list-row .orb-pl-dot {
  width: 6px; height: 6px;
  border-radius: var(--r-cap);
  background: var(--100);
  box-shadow: 0 0 6px var(--100);
}
.orb-tray-popover .orb-pop-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.orb-tray-popover .orb-pop-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  padding: 5px 12px;
  color: var(--80);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.16px;
  cursor: pointer;
}
.orb-tray-popover .orb-pop-chip.active {
  background: rgba(165, 165, 165, 0.08);
  border-color: var(--100);
  color: var(--100);
}
.orb-tray-popover .orb-pop-chip .x { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; }
.orb-tray-popover .orb-pop-chip.active .x { color: rgba(165, 165, 165, 0.6); }
.orb-tray-popover .orb-pop-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--80);
  padding: 6px 4px;
  cursor: pointer;
}
.orb-tray-popover .orb-pop-toggle input[type=checkbox] { accent-color: var(--100); }

.orb-tray-popover .orb-pop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.orb-tray-popover .orb-pop-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--4);
  color: var(--80);
}
.orb-tray-popover .orb-pop-table tr:last-child td { border-bottom: 0; }
.orb-tray-popover .orb-pop-table .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); }
.orb-tray-popover .orb-pop-table .dim { color: var(--40); }
.orb-tray-popover .orb-kv-tier {
  display: inline-block;
  font-size: 9px;
  font-weight: 480;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--r-cap);
  border: 1px solid var(--10);
  color: var(--80);
}
.orb-tray-popover .orb-kv-tier.orb-t-B { color: var(--80); border-color: rgba(123, 123, 123, 0.4); }
.orb-tray-popover .orb-kv-tier.orb-t-C { color: var(--100); border-color: rgba(165, 165, 165, 0.4); }
.orb-tray-popover .orb-pop-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--5);
  background: rgba(0,0,0,0.3);
  font-size: 11px;
  color: var(--60);
}
.orb-tray-popover .orb-pop-foot .g { color: var(--100); }
.orb-tray-popover .orb-pop-foot .orb-pop-link {
  background: transparent;
  border: 1px solid var(--10);
  color: var(--80);
  padding: 4px 10px;
  border-radius: var(--r-cap);
  font-family: inherit; font-size: 11px;
  cursor: pointer;
}
.orb-tray-popover .orb-pop-foot .orb-pop-link:hover { color: var(--100); border-color: var(--40); }

.orb-tray-popover .orb-wg-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 11px;
}
.orb-tray-popover .orb-wg-row .lbl { color: var(--60); text-transform: uppercase; letter-spacing: 0.3px; font-size: 9px; }
.orb-tray-popover .orb-wg-row .val { color: var(--100); font-family: var(--f-mono); letter-spacing: 0; }
.orb-tray-popover .orb-wg-peer {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  font-size: 11px;
}
.orb-tray-popover .orb-wg-peer .dot { width: 6px; height: 6px; border-radius: var(--r-cap); }
.orb-tray-popover .orb-wg-peer .dot.g { background: var(--100); box-shadow: 0 0 4px var(--100); }
.orb-tray-popover .orb-wg-peer .dot.d { background: var(--40); }
.orb-tray-popover .orb-wg-peer .n { color: var(--100); flex: 1; }
.orb-tray-popover .orb-wg-peer .ip { color: var(--40); font-family: var(--f-mono); letter-spacing: 0; }

/* Calendar grid */
.orb-tray-popover .orb-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.orb-tray-popover .orb-cal-title {
  font-size: 13px; color: var(--100); font-weight: 480;
}
.orb-tray-popover .orb-cal-nav {
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid var(--10);
  color: var(--60);
  border-radius: var(--r-cap);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.orb-tray-popover .orb-cal-nav:hover { color: var(--100); border-color: var(--40); }
.orb-tray-popover .orb-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.orb-tray-popover .orb-cal-dow {
  font-size: 9px;
  color: var(--40);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 480;
  padding: 4px 0;
}
.orb-tray-popover .orb-cal-cell {
  aspect-ratio: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-family: var(--f-mono);
  color: var(--60);
  border-radius: var(--r-sm);
  letter-spacing: 0;
}
.orb-tray-popover .orb-cal-cell.orb-today {
  background: var(--100);
  color: var(--inv-100);
  font-weight: 600;
}
.orb-tray-popover .orb-cal-cell.orb-empty { color: transparent; }
.orb-tray-popover .orb-cal-event {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}
.orb-tray-popover .orb-cal-event .t { color: var(--60); font-family: var(--f-mono); letter-spacing: 0; }
.orb-tray-popover .orb-cal-event .l { color: var(--100); }
.orb-tray-popover .orb-cal-event.now .t { color: var(--100); }


/* ╔══════════════════════════════════════════════════════════╗
   ║ v6 — Files explorer + Music player styles                 ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Files ──────────────────────────────────────────────── */
.orb-files-app {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100%;
  min-height: 0;
}
.orb-files-side {
  background: rgba(0,0,0,0.3);
  border-right: 1px solid var(--5);
  padding: var(--sp-3) var(--sp-2);
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.orb-files-side-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); padding: var(--sp-3) 10px 4px; font-weight: 480;
}
.orb-files-side-row {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: var(--80);
  font-family: inherit; font-size: 12px; font-weight: 180;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer; transition: all 180ms var(--ease-out);
}
.orb-files-side-row:hover { background: var(--4); color: var(--100); }
.orb-files-side-row.on { background: var(--5); color: var(--100); }
.orb-files-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px; }
.orb-files-tag {
  font-size: 10px;
  padding: 3px 8px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  color: var(--60);
  font-family: inherit; cursor: pointer;
}
.orb-files-tag.favorit { color: var(--100); border-color: rgba(165, 165, 165, 0.3); }
.orb-files-tag.blue { color: var(--80); border-color: rgba(123, 123, 123, 0.3); }
.orb-files-tag.red { color: var(--100); border-color: rgba(73, 73, 73, 0.3); }
.orb-files-tag.orb-gray { color: var(--40); }

.orb-files-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.orb-files-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px 14px;
  border-bottom: 1px solid var(--5);
  background: rgba(0,0,0,0.2);
}
.orb-files-nav { display: flex; gap: 2px; }
.orb-files-nav-btn {
  width: 24px; height: 24px;
  border-radius: var(--r-cap);
  background: transparent; border: 1px solid var(--5);
  color: var(--60);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.orb-files-nav-btn:hover { color: var(--100); border-color: var(--20); }
.orb-files-path { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.orb-files-path .orb-crumb {
  background: transparent; border: 0; color: var(--80);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0;
  padding: 4px 8px; border-radius: var(--r-sm); cursor: pointer;
}
.orb-files-path .orb-crumb:hover { background: var(--4); color: var(--100); }
.orb-files-path .sep { color: var(--20); }
.orb-files-search {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  color: var(--40);
  width: 180px;
}
.orb-files-search input {
  background: transparent; border: 0; outline: 0;
  color: var(--100); font-family: inherit; font-size: 11px;
  width: 100%;
}
.orb-files-view-toggle { display: flex; gap: 2px; padding: 2px; background: var(--2); border: 1px solid var(--5); border-radius: var(--r-cap); }
.orb-files-view-toggle button {
  background: transparent; border: 0;
  color: var(--60); padding: 4px 8px;
  border-radius: var(--r-cap); cursor: pointer;
}
.orb-files-view-toggle button.on { background: var(--100); color: var(--inv-100); }

.orb-files-grid {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-4);
  align-content: start;
}
.orb-files-cell {
  background: transparent; border: 0;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  padding: 12px 8px;
  border-radius: var(--r-md);
  color: var(--80);
  font-family: inherit; font-size: 11px;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
}
.orb-files-cell:hover { background: var(--4); }
.orb-files-cell.orb-sel { background: rgba(165, 165, 165, 0.08); border: 1px solid var(--100); color: var(--100); }
.orb-files-cell-icn {
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  background: var(--2);
  border: 1px solid var(--5);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--80);
}
.orb-files-cell-icn.orb-folder {
  background: rgba(165, 165, 165, 0.06);
  border-color: rgba(165, 165, 165, 0.2);
  color: var(--100);
}
.orb-files-cell-name {
  font-size: 11px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.orb-files-empty { padding: 32px; color: var(--40); font-size: 12px; }

.orb-files-list { width: 100%; border-collapse: collapse; font-size: 12px; }
.orb-files-list th {
  text-align: left;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); font-weight: 480;
  padding: 8px 12px; border-bottom: 1px solid var(--5);
}
.orb-files-list td {
  padding: 6px 12px; border-bottom: 1px solid var(--4);
  color: var(--80); font-weight: 180;
}
.orb-files-list tr.orb-sel td { background: rgba(165, 165, 165, 0.06); color: var(--100); }
.orb-files-list .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--80); }
.orb-files-list .dim { color: var(--40); }

.orb-files-foot {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  border-top: 1px solid var(--5);
  background: rgba(0,0,0,0.2);
  font-size: 11px; color: var(--60);
}
.orb-files-foot .spacer { flex: 1; }
.orb-files-foot .dim { color: var(--40); }
.orb-files-foot .mono { font-family: var(--f-mono); letter-spacing: 0; }

/* ── Music player ───────────────────────────────────────── */
.orb-music-app {
  display: grid;
  grid-template-columns: 200px 1fr;
  height: 100%; min-height: 0;
}
.orb-music-side {
  background: rgba(0,0,0,0.3);
  border-right: 1px solid var(--5);
  padding: var(--sp-3) var(--sp-2);
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.orb-music-side-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); padding: var(--sp-3) 10px 4px; font-weight: 480;
}
.orb-music-side-row {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: var(--80);
  font-family: inherit; font-size: 12px; font-weight: 180;
  text-align: left;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer; transition: all 180ms var(--ease-out);
}
.orb-music-side-row:hover { background: var(--4); color: var(--100); }
.orb-music-side-row.on { background: var(--5); color: var(--100); }
.orb-music-side-row .hint { margin-left: auto; font-size: 10px; color: var(--40); font-family: var(--f-mono); letter-spacing: 0; }

.orb-music-main { display: flex; flex-direction: column; min-height: 0; padding: 0; }
.orb-music-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-bottom: 1px solid var(--5);
  align-items: center;
}
.orb-music-art-big {
  width: 200px; height: 200px;
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at 25% 25%, rgba(165, 165, 165, 0.7), transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(119, 119, 119, 0.8), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(77, 77, 77, 0.4), transparent 60%),
    #0d0d0d;
  border: 1px solid var(--10);
}
.orb-music-hero-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.orb-music-hint {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); font-weight: 480;
}
.orb-music-title {
  font-size: 32px; color: var(--100); font-weight: 180;
  letter-spacing: -0.4px; line-height: 1.1;
}
.orb-music-artist {
  font-size: 14px; color: var(--60); letter-spacing: 0.16px;
}
.orb-music-progress {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px;
}
.orb-music-progress .bar {
  height: 3px; background: var(--5); border-radius: var(--r-cap); overflow: hidden;
}
.orb-music-progress .bar .fill {
  height: 100%; background: var(--100);
}
.orb-music-progress .orb-times {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--40); letter-spacing: 0;
}
.orb-music-controls {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.orb-music-controls button {
  width: 36px; height: 36px;
  border-radius: var(--r-cap);
  background: transparent;
  border: 1px solid var(--10);
  color: var(--80);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 200ms var(--ease-out);
}
.orb-music-controls button:hover { color: var(--100); border-color: var(--40); }
.orb-music-controls .orb-play {
  width: 48px; height: 48px;
  background: var(--100); color: var(--inv-100);
  border-color: var(--100);
}
.orb-music-controls .orb-play:hover { background: var(--100); border-color: var(--100); color: var(--inv-100); }

.orb-music-queue { flex: 1; overflow-y: auto; padding: var(--sp-3) var(--sp-5); }
.orb-queue-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); margin-bottom: 8px; font-weight: 480;
}
.orb-queue-list { display: flex; flex-direction: column; }
.orb-queue-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: 8px 8px;
  background: transparent; border: 0;
  color: var(--80); font-family: inherit;
  border-bottom: 1px solid var(--4);
  text-align: left;
  cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.orb-queue-row:hover { background: var(--4); color: var(--100); }
.orb-queue-row.orb-playing {
  background: rgba(165, 165, 165, 0.06);
  color: var(--100);
}
.orb-queue-row .orb-q-n { color: var(--40); font-family: var(--f-mono); letter-spacing: 0; font-size: 11px; }
.orb-queue-row.orb-playing .orb-q-n { color: var(--100); }
.orb-queue-row .orb-q-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.orb-queue-row .orb-q-t .t { font-size: 13px; font-weight: 180; }
.orb-queue-row .orb-q-t .a { font-size: 10px; color: var(--40); }
.orb-queue-row .orb-q-d { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; }


/* ╔══════════════════════════════════════════════════════════╗
   ║ v7 — Wall IoT slide-up + swipe-up handle                  ║
   ╚══════════════════════════════════════════════════════════╝ */

.orb-iot-swipe-up {
  position: fixed;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: transparent; border: 0;
  color: var(--40);
  font-family: var(--f-sans);
  font-size: 10px; letter-spacing: 0.4px; text-transform: uppercase;
  cursor: pointer;
  padding: 6px 24px;
  opacity: 0.6;
  transition: all 220ms var(--ease-out);
}
.orb-iot-swipe-up:hover { opacity: 1; color: var(--100); transform: translateX(-50%) translateY(-2px); }
.orb-iot-swipe-up .orb-grip {
  width: 56px; height: 3px;
  background: var(--40);
  border-radius: var(--r-cap);
  animation: grip-pulse 2.4s ease-in-out infinite;
}
@keyframes grip-pulse {
  0%, 100% { background: var(--40); width: 56px; }
  50%      { background: var(--80); width: 72px; }
}

.orb-iot-scrim {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
}
.orb-iot-panel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 85;
  height: 80vh;
  max-height: 80vh;
  background: rgba(10, 10, 10, 0.96);
  border-top: 1px solid var(--10);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  box-shadow: 0 -40px 80px rgba(0,0,0,0.7);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  transform: translateY(100%);
  transition: transform 380ms var(--ease-out);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.orb-iot-panel.open { transform: translateY(0); }
.orb-iot-handle {
  display: flex; justify-content: center;
  padding: 10px 0 6px;
  cursor: pointer;
}
.orb-iot-handle .orb-grip {
  width: 56px; height: 4px;
  background: var(--20);
  border-radius: var(--r-cap);
}
.orb-iot-handle:hover .orb-grip { background: var(--40); }

.orb-iot-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 6px 28px 16px;
  border-bottom: 1px solid var(--5);
}
.orb-iot-title { display: flex; align-items: center; gap: var(--sp-3); }
.orb-iot-title .t { font-size: 16px; color: var(--100); font-weight: 480; letter-spacing: 0.16px; }
.orb-iot-title .m { font-size: 11px; color: var(--40); letter-spacing: 0; margin-top: 2px; }
.orb-iot-tabs { display: flex; gap: 2px; padding: 3px; background: var(--4); border: 1px solid var(--5); border-radius: var(--r-cap); margin-left: auto; }
.orb-iot-tabs button {
  background: transparent; border: 0;
  color: var(--60);
  font-family: inherit; font-size: 11px; font-weight: 480;
  letter-spacing: 0.3px; text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all 200ms var(--ease-out);
}
.orb-iot-tabs button:hover { color: var(--100); }
.orb-iot-tabs button.on { background: var(--100); color: var(--inv-100); }
.orb-iot-close {
  width: 32px; height: 32px;
  border-radius: var(--r-cap);
  background: transparent; border: 1px solid var(--10);
  color: var(--60); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.orb-iot-close:hover { color: var(--100); border-color: var(--40); }

.orb-iot-body { flex: 1; overflow-y: auto; padding: 24px 28px 32px; }

/* Rooms */
.orb-iot-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-3); }
.orb-iot-room {
  background: var(--2); border: 1px solid var(--5);
  border-radius: var(--r-md);
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.orb-iot-room.on { border-color: rgba(165, 165, 165, 0.4); background: rgba(165, 165, 165, 0.04); }
.orb-iot-room.primary { border-color: var(--100); }
.orb-iot-room-head { display: flex; justify-content: space-between; align-items: baseline; }
.orb-iot-room .rn { font-size: 16px; font-weight: 180; color: var(--100); }
.orb-iot-room .rs { font-size: 11px; color: var(--40); font-family: var(--f-mono); letter-spacing: 0; }
.orb-iot-room-acts { display: flex; gap: 4px; }
.orb-iot-room .ra {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--2); border: 1px solid var(--5);
  color: var(--80); font-family: inherit; font-size: 11px;
  padding: 6px 10px; border-radius: var(--r-cap);
  cursor: pointer; transition: all 200ms var(--ease-out);
}
.orb-iot-room .ra:hover { color: var(--100); border-color: var(--100); background: rgba(165, 165, 165, 0.06); }

/* Scenes */
.orb-iot-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-3); }
.orb-iot-scene {
  background: var(--2); border: 1px solid var(--5);
  border-radius: var(--r-md);
  padding: 18px 14px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  color: var(--80);
  font-family: inherit; cursor: pointer;
  text-align: left;
  transition: all 220ms var(--ease-out);
}
.orb-iot-scene:hover { background: var(--4); border-color: var(--10); color: var(--100); }
.orb-iot-scene.on { background: rgba(165, 165, 165, 0.08); border-color: var(--100); color: var(--100); }
.orb-iot-scene .orb-ico { color: inherit; }
.orb-iot-scene .nm { font-size: 16px; font-weight: 200; }
.orb-iot-scene .ds { font-size: 11px; color: var(--40); }
.orb-iot-scene.on .ds { color: rgba(165, 165, 165, 0.7); }

/* Lights */
.orb-iot-lights { display: flex; flex-direction: column; gap: var(--sp-2); }
.orb-iot-light {
  background: var(--2); border: 1px solid var(--5);
  border-radius: var(--r-md);
  padding: 12px 16px;
}
.orb-iot-light.on { border-color: rgba(165, 165, 165, 0.3); background: rgba(165, 165, 165, 0.04); }
.orb-iot-light-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.orb-iot-light .dot { width: 8px; height: 8px; border-radius: var(--r-cap); background: var(--20); }
.orb-iot-light.on .dot { background: var(--100); box-shadow: 0 0 8px var(--100); }
.orb-iot-light .ln { flex: 1; font-size: 13px; color: var(--100); font-weight: 180; }
.orb-iot-light-toggle {
  background: var(--2); border: 1px solid var(--10);
  color: var(--60);
  font-family: inherit; font-size: 11px;
  padding: 4px 14px; border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-iot-light.on .orb-iot-light-toggle { color: var(--100); border-color: var(--100); }
.orb-iot-light-slider { display: flex; align-items: center; gap: 12px; }
.orb-iot-light-slider input[type=range] {
  flex: 1; appearance: none; -webkit-appearance: none;
  height: 4px; background: var(--5); border-radius: var(--r-cap);
}
.orb-iot-light-slider input[type=range]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border-radius: var(--r-cap);
  background: var(--100); cursor: pointer; border: 0;
}
.orb-iot-light-slider .bv { color: var(--100); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; min-width: 36px; text-align: right; }
.orb-iot-light-slider .kv { color: var(--40); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0; }

/* Plugs / Energy / Network tables */
.orb-iot-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.orb-iot-table th {
  text-align: left;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--40); font-weight: 480;
  padding: 8px 10px; border-bottom: 1px solid var(--5);
}
.orb-iot-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--4);
  color: var(--80); font-weight: 180;
}
.orb-iot-table tr.on td { color: var(--100); background: rgba(165, 165, 165, 0.04); }
.orb-iot-table .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); }
.orb-iot-table .dim { color: var(--40); }
.orb-iot-plug-toggle {
  background: var(--2); border: 1px solid var(--10);
  color: var(--80); font-family: inherit; font-size: 11px;
  padding: 4px 12px; border-radius: var(--r-cap);
  cursor: pointer;
}
.orb-iot-plug-toggle:hover { color: var(--100); border-color: var(--100); }

.orb-iot-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.orb-iot-stat-row .stat {
  background: var(--2); border: 1px solid var(--5);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.orb-iot-stat-row .stat .l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); font-weight: 480; }
.orb-iot-stat-row .stat .v { font-size: 26px; font-weight: 200; color: var(--100); letter-spacing: -0.4px; line-height: 1.1; margin-top: 6px; }
.orb-iot-stat-row .stat .v.g { color: var(--100); }
.orb-iot-stat-row .stat .v .u { font-size: 12px; color: var(--40); font-weight: 400; margin-left: 4px; }
.orb-iot-stat-row .stat .d { font-size: 10px; color: var(--40); font-family: var(--f-mono); letter-spacing: 0; margin-top: 2px; }

.orb-iot-chart { background: var(--2); border: 1px solid var(--5); border-radius: var(--r-md); padding: 12px 16px; }
.orb-iot-chart .orb-ch-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); margin-bottom: 12px; font-weight: 480; }
.orb-iot-chart .orb-chart-svg { width: 100%; height: 60px; display: block; }

.orb-iot-net .orb-net-h { font-family: var(--f-mono); font-size: 11px; color: var(--40); letter-spacing: 0; margin-bottom: 10px; }
.orb-iot-net .orb-vlan-pill {
  display: inline-block;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.3px;
  padding: 2px 6px;
  background: var(--2); border: 1px solid var(--10);
  border-radius: var(--r-cap); color: var(--80);
  font-family: var(--f-mono);
}
.orb-iot-net .status .dot { display: inline-block; width: 6px; height: 6px; border-radius: var(--r-cap); margin-right: 6px; }
.orb-iot-net .status.live .dot { background: var(--100); box-shadow: 0 0 6px var(--100); }
.orb-iot-net .status.live { color: var(--100); }
.orb-iot-net .status.orb-idle .dot { background: var(--40); }
.orb-iot-net .status.orb-idle { color: var(--40); }
.orb-iot-net .status.orb-planned .dot { background: var(--80); }
.orb-iot-net .status.orb-planned { color: var(--80); }


/* ╔══════════════════════════════════════════════════════════╗
   ║ v8 — Start button glow + Mail/Settings/Lock/Librarian     ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── Start button — orbit icon with smooth glow ────────────── */
.orb-start-btn { position: relative; overflow: visible; color: var(--80); }
.orb-start-btn > svg, .orb-start-btn .orb-oicn { position: relative; z-index: 2; transition: color 220ms var(--ease-out); }
.orb-start-btn:hover > svg, .orb-start-btn:hover .orb-oicn { color: var(--100); }
.orb-start-btn.open > svg, .orb-start-btn.open .orb-oicn { color: var(--100); }

.orb-start-glow {
  position: absolute;
  inset: -4px;
  border-radius: var(--r-cap);
  background: radial-gradient(circle at center, rgba(165, 165, 165, 0.0), transparent 70%);
  filter: blur(8px);
  z-index: 1;
  transition: background 320ms var(--ease-out), inset 320ms var(--ease-out);
  pointer-events: none;
}
.orb-start-btn:hover .orb-start-glow {
  inset: -12px;
  background: radial-gradient(circle at center, rgba(165, 165, 165, 0.55) 0%, rgba(165, 165, 165, 0.2) 40%, transparent 70%);
}
.orb-start-btn.open .orb-start-glow {
  inset: -16px;
  background: radial-gradient(circle at center, rgba(165, 165, 165, 0.65) 0%, rgba(165, 165, 165, 0.25) 40%, transparent 70%);
}

.orb-start-pulse {
  position: absolute;
  inset: 4px;
  border-radius: var(--r-cap);
  border: 1px solid rgba(165, 165, 165, 0.0);
  z-index: 1;
  pointer-events: none;
}
.orb-start-btn.open .orb-start-pulse {
  animation: start-pulse 2.6s ease-out infinite;
}
@keyframes start-pulse {
  0%   { inset: 4px;   border-color: rgba(165, 165, 165, 0.7); }
  100% { inset: -20px; border-color: rgba(165, 165, 165, 0); }
}

/* Astra-active pulse on the start button too — same animation */
body:has(.orb-task-app.orb-astra-active) .orb-start-btn .orb-start-pulse {
  animation: start-pulse 3s ease-out infinite;
}

/* ── Mail ──────────────────────────────────────────────────── */
.orb-mail-app { display: grid; grid-template-columns: 220px 320px 1fr; height: 100%; min-height: 0; }
.orb-mail-side {
  background: rgba(0,0,0,0.3);
  border-right: 1px solid var(--5);
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
.orb-mail-compose {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--100); color: var(--inv-100);
  border: 0; padding: 8px 12px; margin: 4px 6px 10px;
  border-radius: var(--r-cap);
  font-family: inherit; font-size: 12px; font-weight: 480;
  letter-spacing: 0.16px; cursor: pointer;
}
.orb-mail-side-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); padding: 12px 10px 4px; font-weight: 480; }
.orb-mail-side-row {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; color: var(--80);
  font-family: inherit; font-size: 12px; font-weight: 180;
  text-align: left; padding: 6px 10px;
  border-radius: var(--r-sm); cursor: pointer;
  transition: all 180ms var(--ease-out);
}
.orb-mail-side-row:hover { background: var(--4); color: var(--100); }
.orb-mail-side-row.on { background: var(--5); color: var(--100); }
.orb-mail-side-row.sub { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; color: var(--60); }
.orb-mail-side-row .hint { margin-left: auto; font-family: var(--f-mono); font-size: 10px; color: var(--40); }

.orb-mail-list { border-right: 1px solid var(--5); overflow-y: auto; min-width: 0; }
.orb-mail-list-h { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--5); }
.orb-mail-list-title { flex: 1; font-size: 13px; color: var(--100); font-weight: 480; letter-spacing: 0.16px; }
.orb-mail-list-title .mono { color: var(--40); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0; }
.orb-mail-list-tools { display: flex; gap: 4px; }
.orb-mail-list-tools button { background: transparent; border: 1px solid var(--5); color: var(--60); width: 26px; height: 26px; border-radius: var(--r-cap); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.orb-mail-list-tools button:hover { color: var(--100); border-color: var(--20); }
.orb-mail-row {
  display: grid; grid-template-columns: 28px 1fr;
  gap: 8px; padding: 10px 14px;
  background: transparent; border: 0; border-bottom: 1px solid var(--4);
  text-align: left; cursor: pointer; color: var(--100); font-family: inherit;
  transition: background 180ms var(--ease-out);
}
.orb-mail-row:hover { background: var(--4); }
.orb-mail-row.orb-sel { background: rgba(165, 165, 165, 0.06); border-left: 2px solid var(--100); padding-left: 12px; }
.orb-mail-row.orb-read { color: var(--60); }
.orb-mail-row-l { display: flex; flex-direction: column; gap: 4px; align-items: center; padding-top: 2px; }
.orb-mail-row-l .orb-flag, .orb-mail-row-l .orb-astra-tag {
  width: 18px; height: 18px; border-radius: var(--r-cap);
  display: inline-flex; align-items: center; justify-content: center;
}
.orb-mail-row-l .orb-flag { color: var(--100); }
.orb-mail-row-l .orb-astra-tag { color: var(--100); background: rgba(165, 165, 165, 0.1); border: 1px solid var(--100); }
.orb-mail-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.orb-mail-row-from { display: flex; justify-content: space-between; }
.orb-mail-row-from .orb-from { font-size: 12px; font-weight: 480; color: var(--100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb-mail-row.orb-read .orb-mail-row-from .orb-from { font-weight: 180; color: var(--60); }
.orb-mail-row-from .t { font-size: 10px; color: var(--40); font-family: var(--f-mono); letter-spacing: 0; flex-shrink: 0; margin-left: 8px; }
.orb-mail-row-sub { font-size: 12px; color: var(--80); font-weight: 180; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orb-mail-row-prev { font-size: 11px; color: var(--40); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.orb-mail-view { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.orb-mail-view-h { padding: 10px 16px; border-bottom: 1px solid var(--5); }
.orb-mail-view-actions { display: flex; gap: 6px; align-items: center; }
.orb-mail-view-actions button {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--5); color: var(--80);
  padding: 5px 10px; border-radius: var(--r-cap);
  font-family: inherit; font-size: 11px; letter-spacing: 0.16px; cursor: pointer;
}
.orb-mail-view-actions button:hover { color: var(--100); border-color: var(--20); background: var(--2); }
.orb-mail-view-actions .spacer { flex: 1; }
.orb-mail-view-body { flex: 1; padding: 22px 28px; overflow-y: auto; }
.orb-mail-view-sub { font-size: 22px; font-weight: 180; color: var(--100); letter-spacing: -0.2px; margin-bottom: 8px; }
.orb-mail-view-meta { display: flex; gap: 8px; font-size: 12px; margin-bottom: 16px; }
.orb-mail-view-meta .orb-from { color: var(--100); font-weight: 480; }
.orb-mail-view-meta .dim { color: var(--40); }
.orb-mail-astra-stripe {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: rgba(165, 165, 165, 0.06); border: 1px solid rgba(165, 165, 165, 0.3);
  border-radius: var(--r-sm); color: var(--100);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 480;
  margin-bottom: 16px;
}
.orb-mail-view-prose p { font-size: 14px; line-height: 1.7; color: var(--100); font-weight: 180; margin: 0 0 14px; max-width: 64ch; }

/* ── Settings ──────────────────────────────────────────────── */
.orb-settings-app { display: grid; grid-template-columns: 240px 1fr; height: 100%; min-height: 0; }
.orb-set-side { background: rgba(0,0,0,0.3); border-right: 1px solid var(--5); padding: 12px 8px; overflow-y: auto; }
.orb-set-side-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); padding: 10px 12px; font-weight: 480; }
.orb-set-side-row {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: var(--80);
  font-family: inherit; font-size: 13px; font-weight: 180;
  text-align: left; padding: 8px 12px; border-radius: var(--r-sm);
  cursor: pointer; width: 100%;
  transition: all 180ms var(--ease-out);
}
.orb-set-side-row:hover { background: var(--4); color: var(--100); }
.orb-set-side-row.on { background: var(--5); color: var(--100); }

.orb-set-main { padding: 28px 36px; overflow-y: auto; min-width: 0; }
.orb-set-pane h2 { font-size: 28px; font-weight: 180; color: var(--100); letter-spacing: -0.4px; margin: 0 0 24px; text-shadow: none; }
.orb-set-pane .orb-set-h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--60); font-weight: 480; margin: 28px 0 10px; }
.orb-set-card {
  background: var(--2); border: 1px solid var(--5);
  border-radius: var(--r-md); padding: 4px 0;
}
.orb-set-row {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 14px 18px; border-bottom: 1px solid var(--4);
}
.orb-set-row:last-child { border-bottom: 0; }
.orb-set-row-l { flex: 1; min-width: 0; }
.orb-set-row-l .lbl { font-size: 13px; font-weight: 480; color: var(--100); letter-spacing: 0.16px; }
.orb-set-row-l .hint { font-size: 11px; color: var(--40); margin-top: 2px; }
.orb-set-row.orb-simple { padding: 10px 18px; }
.orb-set-row.orb-simple .l { font-size: 12px; color: var(--80); flex: 1; }
.orb-set-row.orb-simple .v { font-size: 12px; color: var(--100); font-family: var(--f-mono); letter-spacing: 0; }
.seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--4); border: 1px solid var(--5);
  border-radius: var(--r-cap);
}
.seg button {
  background: transparent; border: 0; color: var(--60);
  font-family: inherit; font-size: 11px; font-weight: 480;
  letter-spacing: 0.3px; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--r-cap); cursor: pointer;
  transition: all 200ms var(--ease-out);
}
.seg button:hover { color: var(--100); }
.seg button.on { background: var(--100); color: var(--inv-100); }
.orb-set-toggle {
  display: inline-block; width: 36px; height: 20px;
  background: var(--5); border-radius: var(--r-cap);
  position: relative; cursor: pointer;
  flex-shrink: 0;
}
.orb-set-toggle input { display: none; }
.orb-set-toggle span {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: var(--r-cap);
  background: var(--100);
  transition: all 220ms var(--ease-out);
}
.orb-set-toggle input:checked + span { left: 18px; background: var(--100); }
.orb-set-toggle:has(input:checked) { background: rgba(165, 165, 165, 0.2); }
.chip-set { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; justify-content: flex-end; }
.chip-set .chip {
  background: var(--2); border: 1px solid var(--5);
  color: var(--60); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0;
  padding: 4px 10px; border-radius: var(--r-cap); cursor: pointer;
}
.chip-set .chip.on { background: rgba(165, 165, 165, 0.08); border-color: var(--100); color: var(--100); }
.orb-set-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--100); color: var(--inv-100);
  border: 0; padding: 6px 14px; border-radius: var(--r-cap);
  font-family: inherit; font-size: 12px; font-weight: 480; cursor: pointer;
}

.orb-vm-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.orb-vm-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); font-weight: 480; padding: 8px 14px; border-bottom: 1px solid var(--5); }
.orb-vm-table td { padding: 8px 14px; border-bottom: 1px solid var(--4); color: var(--80); }
.orb-vm-table tr:last-child td { border-bottom: 0; }
.orb-vm-table .mono { font-family: var(--f-mono); letter-spacing: 0; color: var(--100); }
.orb-vm-table .dim { color: var(--40); }
.orb-vm-table .status { display: flex; align-items: center; gap: 6px; }
.orb-vm-table .status .dot { width: 6px; height: 6px; border-radius: var(--r-cap); background: var(--40); }
.orb-vm-table .status.running { color: var(--100); }
.orb-vm-table .status.running .dot { background: var(--100); box-shadow: 0 0 6px var(--100); }
.orb-vm-table .status.orb-stopped { color: var(--40); }
.orb-vm-table .status.orb-paused { color: var(--80); }
.orb-vm-table .status.orb-paused .dot { background: var(--80); }
.orb-vm-act { background: transparent; border: 1px solid var(--5); color: var(--40); padding: 2px 10px; border-radius: var(--r-sm); cursor: pointer; }
.orb-vm-act:hover { color: var(--100); border-color: var(--20); }

/* ── Lock screen ───────────────────────────────────────────── */
.orb-lock-app { height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px; }
.orb-lock-stage {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; max-width: 380px;
  color: var(--80);
}
.orb-lock-stage h2 { font-size: 22px; font-weight: 180; color: var(--100); letter-spacing: -0.2px; margin: 8px 0 0; text-shadow: none; }
.orb-lock-stage p { font-size: 13px; color: var(--40); margin: 0; }
.orb-lock-input {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 16px;
  background: var(--2); border: 1px solid var(--10);
  border-radius: var(--r-cap);
  width: 100%; margin-top: 8px;
}
.orb-lock-input input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--100); font-family: inherit; font-size: 13px; font-weight: 180; padding: 10px 0; }
.orb-lock-input button { width: 36px; height: 36px; border-radius: var(--r-cap); background: var(--100); color: var(--inv-100); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.orb-lock-or { font-size: 11px; color: var(--40); text-transform: uppercase; letter-spacing: 0.3px; margin: 4px 0; }
.orb-lock-qr {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(165, 165, 165, 0.08); border: 1px solid var(--100);
  color: var(--100); padding: 12px 22px;
  border-radius: var(--r-cap); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 480; letter-spacing: 0.16px;
}
.orb-lock-meta { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; margin-top: 24px; }

/* ── Librarian ─────────────────────────────────────────────── */
.orb-librarian-app { display: grid; grid-template-columns: 220px 1fr; height: 100%; min-height: 0; }
.orb-lib-side { background: rgba(0,0,0,0.3); border-right: 1px solid var(--5); padding: 12px 8px; overflow-y: auto; }
.orb-lib-side-h { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--40); padding: 12px 10px 4px; font-weight: 480; }
.orb-lib-side-row {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; color: var(--80);
  font-family: inherit; font-size: 12px; font-weight: 180;
  text-align: left; padding: 8px 12px; border-radius: var(--r-sm);
  cursor: pointer; width: 100%;
  transition: all 180ms var(--ease-out);
}
.orb-lib-side-row:hover { background: var(--4); color: var(--100); }
.orb-lib-side-row.on { background: var(--5); color: var(--100); }
.orb-lib-side-row .hint { margin-left: auto; font-size: 10px; color: var(--40); font-family: var(--f-mono); letter-spacing: 0; }
.orb-lib-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0; }
.orb-lib-bar { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--5); }
.orb-lib-bar h2 { flex: 1; font-size: 22px; font-weight: 180; color: var(--100); letter-spacing: -0.2px; margin: 0; text-shadow: none; }
.orb-lib-search { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--2); border: 1px solid var(--5); border-radius: var(--r-cap); color: var(--40); width: 240px; }
.orb-lib-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--100); font-family: inherit; font-size: 12px; }
.orb-lib-grid { padding: 22px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; overflow-y: auto; align-content: start; }
.orb-lib-card { background: var(--2); border: 1px solid var(--5); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: all 200ms var(--ease-out); cursor: pointer; }
.orb-lib-card:hover { border-color: var(--100); }
.orb-lib-cover {
  aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  color: var(--40);
  background:
    linear-gradient(135deg, rgba(165, 165, 165, 0.10), rgba(119, 119, 119, 0.08) 60%, rgba(0,0,0,0.4));
  border-bottom: 1px solid var(--5);
}
.orb-lib-cover[data-tab=stream] { background: linear-gradient(135deg, rgba(119, 119, 119, 0.18), rgba(165, 165, 165, 0.08) 60%, rgba(0,0,0,0.4)); }
.orb-lib-cover[data-tab=games]  { background: linear-gradient(135deg, rgba(147, 147, 147, 0.18), rgba(165, 165, 165, 0.08) 60%, rgba(0,0,0,0.4)); }
.orb-lib-cover[data-tab=audio]  { background: linear-gradient(135deg, rgba(113, 113, 113, 0.18), rgba(165, 165, 165, 0.08) 60%, rgba(0,0,0,0.4)); }
.orb-lib-card-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.orb-lib-card-t { font-size: 14px; color: var(--100); font-weight: 180; }
.orb-lib-card-a { font-size: 11px; color: var(--40); letter-spacing: 0.16px; }
.orb-lib-card-progress { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.orb-lib-card-progress .bar { height: 2px; background: var(--5); border-radius: var(--r-cap); overflow: hidden; }
.orb-lib-card-progress .bar .fill { height: 100%; background: var(--100); }
.orb-lib-card-progress .orb-prog-meta { font-family: var(--f-mono); font-size: 10px; color: var(--40); letter-spacing: 0; }


/* ╔═ verbatim from orbit-librarian/dashboard.css · 45355 chars ═╗ */
/* ─────────────────────────────────────────────────────────
   Librarian Dashboard — Orbit-faithful overlay
   ───────────────────────────────────────────────────────── */

:root{
  /* density rhythm — scaled by Tweaks */
  --rhythm: 1;
  --gutter: calc(var(--sp-7) * var(--rhythm));
  --section-gap: calc(var(--sp-9) * var(--rhythm));
  --cover-grey: grayscale(0.85) contrast(0.92) brightness(0.78);
  --cover-grey-hover: grayscale(0.2) contrast(1) brightness(0.95);
  /* fallback for --favorit-rgb (app.jsx applyAccent overrides at runtime) */
  --favorit-rgb: 255,149,62;
}

/* Librarian is a flowing document (not a fixed app-shell) — override
   orbit-shell.css's `html,body{height:100%;overflow:hidden}` so the page
   scrolls. Fixed starfield/scene-dim stay put (position:fixed). */
html, body { background: #000; height: auto; overflow-x: hidden; overflow-y: visible; }
body { font-feature-settings: "ss01","ss02","cv11"; min-height: 100vh; }

#starfield {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.scene-dim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(var(--favorit-rgb), 0.06), transparent 45%),
    radial-gradient(ellipse at 80% 110%, rgba(255,255,255,0.04), transparent 50%),
    radial-gradient(ellipse at 50% 60%, transparent 30%, rgba(0,0,0,0.55) 100%);
}

#root { position: relative; z-index: 2; }

/* ── Top chrome ───────────────────────────────────────── */
.orb-nav {
  position: sticky; top: 0; z-index: 100;
  height: 64px;
  display: flex; align-items: center;
  padding: 0 var(--sp-5);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--5);
}
.orb-nav__inner {
  width: 100%; max-width: 1480px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-4);
}
.orb-nav__brand {
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--100); font-weight: 480; letter-spacing: 0.4px;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out);
}
.orb-nav__brand:hover { opacity: 0.7; }
.orb-nav__brand .glyph, .orb-brand-mark {
  width: 20px; height: 20px; flex: 0 0 20px;
}
.orb-nav__brand .orb-word {
  font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
  font-weight: 500;
}

.orb-nav__modes {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
}
.nav__mode {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  color: var(--60);
  font-family: var(--f-sans); font-size: 12px; font-weight: 300;
  padding: 5px 10px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.nav__mode:hover { color: var(--100); }
.nav__mode .g {
  font-family: var(--f-sans);
  font-size: 13px;
  color: var(--40);
}
.nav__mode .l {
  display: none;
}
.nav__mode.is-active {
  background: var(--10);
  color: var(--100);
}
.nav__mode.is-active .g { color: var(--100); }
.nav__mode.is-active .l { display: inline; font-weight: 500; }

.orb-nav__sep {
  width: 1px; height: 20px;
  background: var(--5);
  margin: 0 var(--sp-2);
}

.orb-nav__links { display: flex; gap: 2px; }
.orb-nav__links a {
  font-size: 12px; letter-spacing: 0.4px;
  color: var(--60); padding: 6px 10px;
  border-radius: var(--r-pill);
  text-transform: none;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.orb-nav__links a:hover { color: var(--100); background: var(--2); }
.orb-nav__links a.is-active {
  color: var(--100);
  background: var(--4);
}

.orb-nav__spacer { flex: 1; min-width: 0; }

.orb-nav__search {
  position: relative;
  width: 220px;
  height: 32px;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3);
  border-radius: var(--r-cap);
  background: var(--2);
  border: 1px solid var(--5);
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.orb-nav__search:hover {
  border-color: var(--20);
  background: var(--4);
}
.orb-nav__search:focus-within {
  border-color: var(--40);
  background: var(--4);
}
.orb-nav__search svg { color: var(--60); width: 14px; height: 14px; }
.orb-nav__search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--100); font-family: var(--f-sans);
  font-size: 12px; font-weight: 300; letter-spacing: 0.16px;
}
.orb-nav__search input::placeholder { color: var(--40); }
.orb-nav__search kbd {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--40);
  padding: 1px 5px; border-radius: 3px; border: 1px solid var(--10);
}

.orb-nav__add {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  border-radius: var(--r-cap);
  background: var(--100);
  color: var(--inv-100);
  font-size: 12px; font-weight: 500; letter-spacing: 0.2px;
  border: 1px solid var(--100);
  cursor: pointer;
  text-shadow: none !important;
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.orb-nav__add:visited { color: var(--inv-100); }
.orb-nav__add:hover {
  filter: brightness(0.92);
  transform: translateY(-1px);
  color: var(--inv-100);
}
.orb-nav__add .orb-plus { font-size: 14px; line-height: 1; color: var(--inv-100); }

.orb-nav__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--5);
  border: 1px solid var(--10);
  color: var(--80);
  font-family: var(--f-sans); font-weight: 300; font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-nav__avatar:hover { background: var(--10); color: var(--100); border-color: var(--20); }

@media (max-width: 1180px){
  .orb-nav__search { width: 180px; }
}
@media (max-width: 960px){
  .orb-nav__modes .l { display: none !important; }
  .nav__mode.is-active .l { display: none !important; }
  .orb-nav__search { display: none; }
}

/* ── Page shell ───────────────────────────────────────── */
.orb-page {
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--gutter) var(--sp-6) calc(var(--gutter) * 1.5);
}
.section { margin-bottom: var(--section-gap); }
.orb-section__head {
  display: flex; align-items: baseline; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.orb-section__title {
  font-family: var(--f-sans);
  font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 2.4px;
  color: var(--80);
}
.orb-section__sub {
  font-family: var(--f-mono);
  font-size: 11px; color: var(--40); letter-spacing: 0;
}
.orb-section__spacer { flex: 1; }
.orb-section__actions { display: flex; gap: var(--sp-2); align-items: center; }

.orb-hairline { height: 1px; background: var(--5); }

/* ── Hero ─────────────────────────────────────────────── */
.hero { padding-top: var(--sp-6); }
.orb-hero__display {
  font-family: var(--f-sans);
  font-weight: 180;
  font-size: clamp(56px, 8.8vw, 132px);
  line-height: 0.92;
  letter-spacing: -3.4px;
  color: var(--100);
  text-shadow: var(--ts-h1);
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.12em;
}
.orb-hero__display .orb-accent {
  color: var(--100);
  font-style: italic;
  font-weight: 200;
}
.orb-hero__display .orb-underline {
  position: relative;
}
.orb-hero__display .orb-underline::after{
  content:""; position: absolute; left: 0; right: 0; bottom: 0.06em;
  height: 2px; background: var(--100);
  box-shadow: 0 0 12px rgba(var(--favorit-rgb), 0.45);
}
.orb-hero__caret{
  display:inline-block;
  width: 0.55ch; height: 0.85em;
  background: var(--100);
  margin-left: 0.1em;
  animation: blink 1.05s steps(1) infinite;
  vertical-align: -0.05em;
}
@keyframes blink { 50% { opacity: 0; } }

.orb-hero__meta {
  margin-top: var(--sp-5);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-5);
  color: var(--60);
  font-size: 11px; font-family: var(--f-mono); letter-spacing: 0.2px;
}
.orb-hero__meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block; vertical-align: middle;
  background: var(--100); margin-right: 6px;
  box-shadow: 0 0 6px var(--100);
}
.orb-hero__meta .orb-pipe { color: var(--20); }

.orb-hero__stats {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--5);
  border-bottom: 1px solid var(--5);
}
.orb-hero__stat {
  padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
  border-right: 1px solid var(--5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative;
}
.orb-hero__stat:last-child { border-right: 0; }
.orb-hero__stat .label {
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--40);
}
.orb-hero__stat .value {
  font-family: var(--f-sans);
  font-size: 44px; font-weight: 200; line-height: 1;
  color: var(--100);
  font-variant-numeric: tabular-nums;
}
.orb-hero__stat .delta {
  font-family: var(--f-mono);
  font-size: 11px; color: var(--60); letter-spacing: 0;
}
.orb-hero__stat .delta .up { color: var(--100); }
.orb-hero__stat .delta .warn { color: var(--100); }
.orb-hero__stat.orb-is-accent .value { color: var(--100); }

/* ── Active orbits — ledger card stack ────────────────── */
.orb-orbits {
  display: grid; gap: 1px;
  background: var(--5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
}
.orb-orbit {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 240px 160px;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 2px);
  background: rgba(0,0,0,0.55);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.orb-orbit::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--100);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.orb-orbit::after {
  content: "→";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  color: var(--40);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  font-size: 14px;
  pointer-events: none;
}
.orb-orbit:hover {
  background: rgba(255,255,255,0.035);
  padding-left: calc(var(--sp-5) + 4px);
}
.orb-orbit:hover::before { transform: scaleY(1); }
.orb-orbit:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  color: var(--100);
}
.orb-orbit:hover { background: rgba(255,255,255,0.025); }
.orb-orbit:hover .orb-orbit__cover { filter: var(--cover-grey-hover); transform: translateY(-2px); }
.orb-orbit__cover-wrap {
  position: relative; width: 56px; height: 80px;
}
.orb-orbit__cover {
  width: 56px; height: 80px;
  border-radius: 2px;
  filter: var(--cover-grey);
  background: #111; object-fit: cover;
  box-shadow: 0 6px 14px rgba(0,0,0,0.6);
  transition: filter var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.orb-orbit__spine-glow {
  position: absolute; left: -2px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--100);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
  box-shadow: 0 0 8px var(--100);
}
.orb-orbit:hover .orb-orbit__spine-glow { opacity: 0.7; }

.orb-orbit__main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.orb-orbit__title {
  font-family: var(--f-sans); font-size: 16px; font-weight: 400;
  color: var(--100); letter-spacing: 0.05px;
  text-shadow: var(--ts-p);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orb-orbit__author {
  font-family: var(--f-sans); font-size: 12px; font-weight: 180;
  color: var(--60); letter-spacing: 0.16px;
}
.orb-orbit__series {
  display: inline-flex; gap: 6px; align-items: center;
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
  text-transform: uppercase; letter-spacing: 1px;
}
.orb-orbit__series .num { color: var(--100); font-weight: 500; }

.orb-orbit__progress { display: flex; flex-direction: column; gap: 8px; }
.orb-orbit__progress-row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--f-mono); font-size: 11px; color: var(--60);
  font-variant-numeric: tabular-nums;
}
.orb-orbit__progress-row .orb-pct { color: var(--100); font-weight: 500; }
.orb-orbit__bar {
  position: relative;
  height: 2px; background: var(--5); border-radius: 1px;
  overflow: hidden;
}
.orb-orbit__bar-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--100);
  transition: width var(--dur-slow) var(--ease-out);
}
.orb-orbit__bar-tick {
  position: absolute; top: -2px; bottom: -2px; width: 1px;
  background: var(--100);
  box-shadow: 0 0 6px var(--100);
}
.orb-orbit__meta {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--f-mono); font-size: 11px; color: var(--40);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.orb-orbit__meta .strong { color: var(--80); }
.orb-orbit__meta .orb-ago { color: var(--60); }

/* compact density */
.density-compact .orb-orbit { padding: var(--sp-3) var(--sp-4); }
.density-compact .orb-orbit__cover-wrap, .density-compact .orb-orbit__cover { height: 72px; }
.density-airy .orb-orbit { padding: var(--sp-5) var(--sp-6); }

/* ── Orbit metaphor — alt active layout ───────────────── */
.orb-dial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-5);
}
.orb-dial {
  position: relative;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.orb-dial__cover {
  width: 56%; height: 80%;
  border-radius: 2px;
  filter: var(--cover-grey);
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  transition: filter var(--dur-base) var(--ease-out);
  position: relative; z-index: 2;
}
.orb-dial:hover .orb-dial__cover { filter: var(--cover-grey-hover); }
.orb-dial__ring {
  position: absolute; inset: 0;
  pointer-events: none;
}
.orb-dial__ring circle.orb-track {
  fill: none; stroke: var(--5); stroke-width: 1;
}
.orb-dial__ring circle.fill {
  fill: none; stroke: var(--100); stroke-width: 1.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(var(--favorit-rgb), 0.6));
  transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}
.orb-dial__moon {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--100);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--100);
  pointer-events: none;
}
.orb-dial__label {
  position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%);
  text-align: center;
  width: 100%;
}
.orb-dial__title {
  font-size: 12px; color: var(--80); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.orb-dial__pct {
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
  letter-spacing: 0;
}

/* ── Inbound — chrono ledger ──────────────────────────── */
.orb-inbound {
  display: grid;
  grid-template-columns: 1fr;
}
.orb-inbound__row {
  display: grid;
  grid-template-columns: 130px 60px 1fr 1fr 84px;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--5);
  transition: background var(--dur-base) var(--ease-out);
  cursor: pointer;
  position: relative;
}
.orb-inbound__row:first-child { border-top: 1px solid var(--5); }
.orb-inbound__row:hover { background: var(--2); }
.orb-inbound__row .date {
  font-family: var(--f-mono); font-size: 11px; color: var(--80);
  display: flex; align-items: center; gap: var(--sp-2);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
}
.orb-inbound__row .date .orb-marker {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--20);
}
.orb-inbound__row.orb-is-soon .date .orb-marker {
  background: var(--100); box-shadow: 0 0 6px var(--100);
}
.orb-inbound__row.orb-is-tba .date .orb-marker {
  background: transparent; border: 1px dashed var(--20);
}
.orb-inbound__row .orb-countdown {
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
  letter-spacing: 0.4px;
}
.orb-inbound__row.orb-is-soon .orb-countdown { color: var(--100); }
.orb-inbound__row .title {
  font-family: var(--f-sans); font-size: 14px; color: var(--100);
  font-weight: 300;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orb-inbound__row .orb-author {
  font-family: var(--f-sans); font-size: 12px; color: var(--60);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orb-inbound__row .orb-badges {
  display: flex; gap: var(--sp-1); justify-content: flex-end;
}
.tag {
  font-family: var(--f-sans);
  font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--80);
  border: 1px solid var(--10);
  background: var(--2);
}
.tag.orb-is-announced { color: var(--100); border-color: rgba(var(--favorit-rgb), 0.4); }
.tag.orb-is-series { color: var(--80); }
.tag.orb-is-soon { color: var(--100); border-color: rgba(147, 147, 147, 0.35); }

/* ── The Grand Shelf — refined spine wall ─────────────── */
.orb-shelf-toolbar{
  display: flex; align-items: center; gap: var(--sp-3);
}
.orb-toolbar-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 var(--sp-3);
  border-radius: var(--r-cap);
  font-size: 11px; color: var(--60); font-weight: 300;
  background: var(--2);
  border: 1px solid var(--5);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-toolbar-chip:hover { color: var(--100); border-color: var(--20); }
.orb-toolbar-chip.is-active {
  color: var(--100); background: var(--5); border-color: var(--20);
}
.orb-toolbar-chip .dot {
  width: 5px; height: 5px; border-radius: 50%;
}
.orb-toolbar-chip.is-active .dot { background: var(--100); box-shadow: 0 0 6px var(--100); }

.orb-shelf {
  position: relative;
  padding-top: var(--sp-6);
}
.orb-shelf-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 188px;
  margin-bottom: var(--sp-6);
}
.density-airy .orb-shelf-row { height: 220px; }
.density-compact .orb-shelf-row { height: 150px; }
.orb-shelf-row::after {
  content:""; position: absolute;
  left: 0; right: 0; bottom: -7px; height: 1px;
  background: linear-gradient(to right, transparent, var(--10), var(--10), transparent);
}
.spine {
  flex: 0 0 38px;
  height: 100%;
  position: relative;
  display: block;
  cursor: pointer;
  transition: flex-basis var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.density-compact .spine { flex-basis: 30px; }
.density-airy .spine { flex-basis: 46px; }
.orb-spine__inner {
  width: 100%; height: 100%;
  background: #0a0a0a;
  border: 1px solid var(--5);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  box-shadow: 1px 0 0 rgba(255,255,255,0.02), -1px 0 0 rgba(0,0,0,0.6), 0 12px 20px rgba(0,0,0,0.45);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.orb-spine__inner img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--cover-grey);
  transition: filter var(--dur-base) var(--ease-out);
}
.orb-spine__inner::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.06) 0%, transparent 12%, transparent 88%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}
.orb-spine__title {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 10px; font-weight: 400; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--60);
  padding: 12px 0;
  white-space: nowrap;
  overflow: hidden;
}
.spine.orb-is-ghost .orb-spine__inner { opacity: 0.4; border-style: dashed; }
.spine.orb-is-ghost .orb-spine__inner img { filter: grayscale(1) brightness(0.45) contrast(0.85); }

.spine:hover { flex-basis: 180px; z-index: 5; }
.spine:hover .orb-spine__inner img { filter: grayscale(0.05) contrast(1) brightness(1); }
.spine:hover .orb-spine__inner { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 0 1px var(--20); }
.orb-spine__readmark {
  position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--100);
  box-shadow: 0 0 6px var(--100);
  opacity: 0;
}
.spine.is-active .orb-spine__readmark { opacity: 1; }

/* series bracket */
.orb-shelf-row .orb-series-bracket {
  position: absolute;
  top: -22px;
  height: 16px;
  pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start;
}
.orb-series-bracket .name {
  font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--60);
  margin-bottom: 4px;
  white-space: nowrap;
}
.orb-series-bracket .bar {
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, rgba(var(--favorit-rgb), 0.7) 5%, rgba(var(--favorit-rgb), 0.7) 95%, transparent);
}
.orb-series-bracket .orb-stem-l, .orb-series-bracket .orb-stem-r {
  position: absolute; top: 16px; width: 1px; height: 6px;
  background: rgba(var(--favorit-rgb), 0.7);
}
.orb-series-bracket .orb-stem-l { left: 0; }
.orb-series-bracket .orb-stem-r { right: 0; }

.orb-shelf-row a.spine { color: var(--80); text-shadow: none; }
.orb-shelf-row a.spine:visited { color: var(--80); }

/* ── Tooltips ─────────────────────────────────────────── */
.tip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--20);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 180px; max-width: 280px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
  transform: translate(-50%, calc(-100% - 12px));
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.tip.show { opacity: 1; }
.tip .t { font-size: 13px; color: var(--100); font-weight: 400; }
.tip .a { font-size: 11px; color: var(--60); }
.tip .s { font-size: 10px; color: var(--100); margin-top: 4px; letter-spacing: 1px; text-transform: uppercase; font-weight: 500; }
.tip .meta {
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--10);
}

/* ── Detail drawer ────────────────────────────────────── */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 210;
  width: 480px; max-width: 100vw;
  background: rgba(8, 8, 8, 0.96);
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--10);
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.drawer.show { transform: translateX(0); }
.orb-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--5);
  position: sticky; top: 0;
  background: rgba(8, 8, 8, 0.96);
  z-index: 2;
}
.orb-drawer__close {
  width: 28px; height: 28px; border-radius: 50%;
  background: transparent; border: 1px solid var(--10);
  color: var(--80); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1;
}
.orb-drawer__close:hover { background: var(--5); color: var(--100); }
.orb-drawer__body { padding: var(--sp-5); flex: 1; display: flex; flex-direction: column; gap: var(--sp-5); }
.orb-drawer__top {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: var(--sp-4);
  align-items: flex-start;
}
.orb-drawer__cover {
  width: 124px; height: 186px;
  filter: var(--cover-grey-hover);
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}
.orb-drawer__top-meta { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.drawer h2.title {
  font-family: var(--f-sans); font-weight: 200;
  font-size: 22px; line-height: 1.15; color: var(--100);
  letter-spacing: -0.4px;
  text-shadow: var(--ts-h2);
  margin: 0;
}
.drawer .orb-author {
  font-size: 12px; color: var(--60); margin-top: 2px; margin-bottom: var(--sp-3);
}
.orb-drawer__progress {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: var(--sp-2);
}
.orb-drawer__progress .orb-big-pct {
  font-family: var(--f-sans); font-weight: 200;
  font-size: 36px; line-height: 1; color: var(--100);
  font-variant-numeric: tabular-nums;
}
.orb-drawer__progress .orb-big-pct .unit { font-size: 14px; color: var(--40); }
.orb-drawer__progress .bar { height: 2px; background: var(--5); position: relative; }
.orb-drawer__progress .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--100); box-shadow: 0 0 6px var(--100); }
.orb-drawer__progress .meta { font-size: 10px; color: var(--40); letter-spacing: 0; }

.orb-drawer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
}
.orb-drawer__stat {
  padding: var(--sp-3) var(--sp-4);
  background: rgba(0,0,0,0.4);
}
.orb-drawer__stat .k {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--40); margin-bottom: 4px;
}
.orb-drawer__stat .v { font-size: 13px; color: var(--100); }
.orb-drawer__stat .v.mono, .orb-drawer__stat .v.mono * { font-family: var(--f-mono); font-size: 12px; }

.orb-drawer__section { display: flex; flex-direction: column; gap: var(--sp-3); }
.orb-drawer__h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--60); font-weight: 500;
  padding-bottom: 8px; border-bottom: 1px solid var(--5);
}
.orb-sessions--tight .orb-session-row {
  grid-template-columns: 48px 70px 1fr 40px 36px;
  gap: var(--sp-2);
  font-size: 10px;
}

.orb-drawer__inbound { display: flex; flex-direction: column; gap: var(--sp-3); }

.orb-drawer__actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3); }
.orb-drawer__actions .btn.full { width: 100%; justify-content: center; height: 40px; font-size: 13px; }

@media (max-width: 980px){
  .drawer { width: 100vw; }
  .orb-drawer__top { grid-template-columns: 1fr; }
  .orb-drawer__cover { max-width: 160px; }
  .orb-drawer__stats { grid-template-columns: repeat(2, 1fr); }
}
.btn {
  height: 36px; padding: 0 var(--sp-4);
  border-radius: var(--r-cap);
  font-family: var(--f-sans); font-size: 12px; font-weight: 400;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer;
  border: 1px solid var(--10);
  background: var(--2); color: var(--100);
  transition: all var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--5); border-color: var(--20); }
.btn.primary {
  background: var(--100); color: var(--inv-100);
  border-color: var(--100);
}
.btn.primary:hover { filter: brightness(1.05); }

/* ── Brand glyph mini ────────────────────────────────── */
.orb-brand-mark {
  width: 22px; height: 22px;
}

/* ── Small accents & utilities ───────────────────────── */
.orb-kicker {
  font-family: var(--f-mono); font-size: 10px; color: var(--100);
  text-transform: uppercase; letter-spacing: 2px;
}
.orb-scroll-hint {
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
}

/* ── Section: now-reading featured (variant) ──────────── */
.orb-feature {
  display: grid;
  grid-template-columns: 280px 1fr 260px;
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: linear-gradient(to bottom, rgba(var(--favorit-rgb), 0.02), transparent);
}
.orb-feature__cover {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  filter: var(--cover-grey-hover);
  border-radius: 2px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8);
}
.orb-feature__title {
  font-family: var(--f-sans); font-weight: 180;
  font-size: 44px; line-height: 1; letter-spacing: -1px;
  color: var(--100); text-shadow: var(--ts-h1);
  margin-bottom: var(--sp-3);
}
.orb-feature__author { color: var(--60); font-size: 14px; margin-bottom: var(--sp-5); }
.orb-feature__quote {
  font-style: italic;
  color: var(--60);
  font-size: 14px; line-height: 1.7;
  border-left: 1px solid var(--20);
  padding-left: var(--sp-4);
  max-width: 480px;
  margin-bottom: var(--sp-5);
}
.orb-feature__progress { display: flex; flex-direction: column; gap: var(--sp-3); align-items: stretch; }
.orb-feature__progress .orb-big-pct {
  font-family: var(--f-sans); font-weight: 200;
  font-size: 60px; line-height: 1; color: var(--100);
  font-variant-numeric: tabular-nums;
}
.orb-feature__progress .orb-big-pct .unit { font-size: 24px; color: var(--40); }
.orb-feature__progress .orb-small {
  font-family: var(--f-mono); font-size: 11px; color: var(--40);
}
.orb-feature__progress .bar {
  height: 1px; background: var(--5); position: relative;
}
.orb-feature__progress .bar .fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--100);
  box-shadow: 0 0 8px var(--100);
}

/* ── Inline filter chips (active reads) ──────────────── */
.orb-mini-toggle {
  display: inline-flex;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  padding: 2px;
  gap: 0;
}
.orb-mini-toggle button {
  border: 0; background: transparent;
  color: var(--60);
  font-family: var(--f-sans); font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-mini-toggle button:hover { color: var(--100); }
.orb-mini-toggle button.is-active {
  background: var(--10); color: var(--100);
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 980px){
  .orb-hero__stats { grid-template-columns: repeat(2, 1fr); }
  .orb-hero__stat { border-right: 0; border-bottom: 1px solid var(--5); }
  .orb-orbit { grid-template-columns: 60px 1fr; }
  .orb-orbit__progress, .orb-orbit__meta { grid-column: 1 / -1; }
  .orb-inbound__row { grid-template-columns: 90px 1fr 80px; }
  .orb-inbound__row .orb-countdown, .orb-inbound__row .orb-author { display: none; }
  .orb-feature { grid-template-columns: 1fr; }
  .orb-feature__cover { max-width: 200px; }
  .orb-nav__search { display: none; }
}

/* ── Sparklines in stats ──────────────────────────────── */
.spark { width: 100%; height: 22px; margin-top: 4px; overflow: visible; }
.spark .line { fill: none; stroke: var(--40); stroke-width: 1; }
.spark .line.orb-accent { stroke: var(--100); filter: drop-shadow(0 0 4px rgba(var(--favorit-rgb), 0.4)); }
.spark .orb-area { fill: rgba(255,255,255,0.04); }
.spark .orb-area.orb-accent { fill: rgba(var(--favorit-rgb), 0.08); }
.spark .dot { fill: var(--100); }
.spark .dot.orb-accent { fill: var(--100); }

/* ── Reading chronograph ──────────────────────────────── */
.orb-chrono {
  display: grid;
  grid-template-columns: 56px 1fr 240px;
  gap: var(--sp-5);
  align-items: stretch;
}
.orb-chrono__rail {
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
  text-transform: uppercase; letter-spacing: 1px;
}
.orb-chrono__grid {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
  min-height: 140px;
}
.chrono__cell {
  border-radius: 2px;
  background: var(--4);
  position: relative;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  aspect-ratio: 1;
}
.chrono__cell:hover { transform: scale(1.18); z-index: 2; outline: 1px solid var(--40); }
.chrono__cell[data-l="0"] { background: var(--2); }
.chrono__cell[data-l="1"] { background: rgba(var(--favorit-rgb), 0.15); }
.chrono__cell[data-l="2"] { background: rgba(var(--favorit-rgb), 0.35); }
.chrono__cell[data-l="3"] { background: rgba(var(--favorit-rgb), 0.6); }
.chrono__cell[data-l="4"] { background: rgba(var(--favorit-rgb), 0.95); box-shadow: 0 0 8px rgba(var(--favorit-rgb), 0.4); }
.chrono__cell.today { outline: 1px solid var(--80); outline-offset: 1px; }
.orb-chrono__legend {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
  margin-top: var(--sp-3);
}
.orb-chrono__legend .orb-swatches { display: flex; gap: 3px; }
.orb-chrono__legend .sw { width: 10px; height: 10px; border-radius: 2px; }

.orb-chrono__numbers {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-left: 1px solid var(--5);
}
.orb-chrono__big {
  font-family: var(--f-sans); font-weight: 200;
  font-size: 36px; line-height: 1; color: var(--100);
  font-variant-numeric: tabular-nums;
}
.orb-chrono__big .unit { font-size: 14px; color: var(--40); margin-left: 4px; }
.orb-chrono__numbers .k {
  font-family: var(--f-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 1.4px; color: var(--40);
  margin-bottom: 4px;
}
.orb-chrono__numbers .row { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--5); }
.orb-chrono__numbers .row:last-child { border-bottom: 0; }

/* ── Solar system view ────────────────────────────────── */
.orb-solar {
  position: relative;
  width: 100%;
  height: 580px;
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(var(--favorit-rgb), 0.04), transparent 40%),
    rgba(0,0,0,0.4);
}
.orb-solar svg { width: 100%; height: 100%; display: block; }
.orb-solar__planet {
  cursor: pointer;
}
.orb-solar__planet circle.body {
  fill: var(--100);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.4));
  transition: r var(--dur-base) var(--ease-out);
}
.orb-solar__planet.active circle.body {
  fill: var(--100);
  filter: drop-shadow(0 0 8px rgba(var(--favorit-rgb), 0.8));
}
.orb-solar__planet:hover circle.body { r: 9; }
.orb-solar__planet circle.orb-halo {
  fill: none; stroke: var(--100); stroke-width: 0.5;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.orb-solar__planet:hover circle.orb-halo { opacity: 0.6; }
.solar__orbit { fill: none; stroke: var(--5); stroke-width: 0.6; stroke-dasharray: 2 3; }
.solar__orbit.orb-lit { stroke: rgba(var(--favorit-rgb), 0.3); stroke-dasharray: none; }
.orb-solar__core circle {
  fill: rgba(0,0,0,0.6);
  stroke: var(--20); stroke-width: 0.6;
}
.orb-solar__core text {
  fill: var(--80); font-family: var(--f-sans); font-size: 9px;
  text-anchor: middle; letter-spacing: 2.4px; text-transform: uppercase;
}
.orb-solar__core .num {
  fill: var(--100); font-size: 22px; font-weight: 200;
}
.orb-solar__label {
  fill: var(--100); font-family: var(--f-sans);
  font-size: 11px; font-weight: 400;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}
.orb-solar__label.sub {
  fill: var(--60); font-size: 9px; font-family: var(--f-mono);
}
.orb-solar__planet path.orb-trail {
  fill: none; stroke: var(--100); stroke-width: 1;
  opacity: 0.4;
  stroke-linecap: round;
}

/* ── Series arcs ──────────────────────────────────────── */
.orb-arcs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.orb-arc {
  padding: var(--sp-5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: var(--sp-3);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.orb-arc:hover { background: rgba(255,255,255,0.025); border-color: var(--10); }
.orb-arc__name {
  font-family: var(--f-sans); font-weight: 400;
  font-size: 15px; color: var(--100);
}
.orb-arc__author { font-size: 11px; color: var(--60); }
.orb-arc__viz { margin-top: var(--sp-3); position: relative; height: 64px; }
.orb-arc__viz svg { width: 100%; height: 100%; overflow: visible; }
.orb-arc__viz .orb-track { fill: none; stroke: var(--5); stroke-width: 1; }
.orb-arc__viz .fill { fill: none; stroke: var(--80); stroke-width: 1; }
.orb-arc__viz .node { stroke-width: 1.2; cursor: pointer; }
.orb-arc__viz .orb-node-read { fill: var(--100); stroke: var(--100); }
.orb-arc__viz .orb-node-active { fill: var(--100); stroke: var(--100); filter: drop-shadow(0 0 4px rgba(var(--favorit-rgb), 0.7)); }
.orb-arc__viz .orb-node-ghost { fill: rgba(0,0,0,0.6); stroke: var(--20); stroke-dasharray: 1 1.5; }
.orb-arc__viz .orb-node-announced { fill: rgba(0,0,0,0.6); stroke: var(--40); stroke-dasharray: 0.5 1.2; }
.orb-arc__legend {
  display: flex; gap: var(--sp-4);
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
  letter-spacing: 0.4px;
  flex-wrap: wrap;
}
.orb-arc__legend span { display: inline-flex; align-items: center; gap: 4px; }
.orb-arc__legend .d { width: 6px; height: 6px; border-radius: 50%; }

/* ── ⌘K palette ───────────────────────────────────────── */
.cmdk-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.cmdk-backdrop.show { opacity: 1; pointer-events: auto; }
.cmdk {
  position: fixed; left: 50%; top: 12%; transform: translateX(-50%) translateY(-12px) scale(0.98);
  z-index: 510;
  width: min(640px, 92vw);
  background: rgba(10, 10, 10, 0.96);
  border: 1px solid var(--20);
  border-radius: var(--r-md);
  box-shadow: 0 40px 80px rgba(0,0,0,0.7);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  display: flex; flex-direction: column;
}
.cmdk.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; }
.orb-cmdk__input {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--5);
}
.orb-cmdk__input svg { width: 18px; height: 18px; color: var(--60); }
.orb-cmdk__input input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--100); font-family: var(--f-sans);
  font-size: 16px; font-weight: 200; letter-spacing: -0.2px;
}
.orb-cmdk__input input::placeholder { color: var(--40); }
.orb-cmdk__hint {
  font-family: var(--f-mono); font-size: 10px;
  color: var(--40); letter-spacing: 0.4px;
}
.orb-cmdk__results {
  max-height: 50vh;
  overflow-y: auto;
}
.orb-cmdk__group-label {
  font-family: var(--f-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--40);
  padding: var(--sp-3) var(--sp-5) var(--sp-2);
  position: sticky; top: 0;
  background: rgba(10, 10, 10, 0.96);
}
.cmdk__row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.cmdk__row.selected {
  background: var(--4);
  border-left-color: var(--100);
}
.cmdk__row .icon {
  width: 28px; height: 40px; flex: 0 0 28px;
  border-radius: 2px;
  filter: var(--cover-grey-hover);
  object-fit: cover;
  background: #111;
}
.cmdk__row .meta { flex: 1; min-width: 0; }
.cmdk__row .t { font-size: 13px; color: var(--100); }
.cmdk__row .sub { font-size: 11px; color: var(--60); }
.cmdk__row .orb-kind {
  font-family: var(--f-mono); font-size: 9px; color: var(--40);
  text-transform: uppercase; letter-spacing: 1.2px;
}
.cmdk__row mark {
  background: rgba(var(--favorit-rgb), 0.25); color: var(--100);
  padding: 0 1px; border-radius: 2px;
}
.orb-cmdk__footer {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-5);
  border-top: 1px solid var(--5);
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
}
.orb-cmdk__footer kbd {
  padding: 1px 5px; border: 1px solid var(--10); border-radius: 3px;
  margin-right: 4px;
}

/* ── Mosaic shelf ─────────────────────────────────────── */
.orb-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sp-3);
}
.orb-mosaic__tile {
  position: relative;
  aspect-ratio: 2/3;
  cursor: pointer;
  border-radius: 2px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--5);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.orb-mosaic__tile:hover { transform: translateY(-3px); border-color: var(--20); }
.orb-mosaic__tile img { width: 100%; height: 100%; object-fit: cover; filter: var(--cover-grey); transition: filter var(--dur-base) var(--ease-out); }
.orb-mosaic__tile:hover img { filter: var(--cover-grey-hover); }
.orb-mosaic__tile.orb-is-ghost img { filter: grayscale(1) brightness(0.4); }
.orb-mosaic__tile.orb-is-ghost { border-style: dashed; }
.orb-mosaic__tile.is-active::after {
  content:""; position: absolute; top: 6px; right: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--100); box-shadow: 0 0 6px var(--100);
}
.orb-mosaic__tile .label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6px 8px; font-size: 10px;
  color: var(--80); background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orb-mosaic__tile:hover .label { opacity: 1; transform: translateY(0); }

/* ── Constellation shelf ──────────────────────────────── */
.constellation {
  position: relative;
  width: 100%;
  height: 480px;
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.35);
  overflow: hidden;
}
.constellation svg { width: 100%; height: 100%; display: block; }
.constellation .star {
  fill: var(--60); cursor: pointer; transition: fill var(--dur-base) var(--ease-out);
}
.constellation .star.read { fill: var(--100); }
.constellation .star.active { fill: var(--100); filter: drop-shadow(0 0 5px rgba(var(--favorit-rgb), 0.8)); }
.constellation .star.ghost { fill: var(--20); }
.constellation .star:hover { fill: var(--100); }
.constellation .axis { stroke: var(--5); stroke-width: 0.6; }
.constellation .orb-axis-label {
  fill: var(--40); font-family: var(--f-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 1px;
}
.constellation .orb-group-label {
  fill: var(--40); font-family: var(--f-mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: 1px;
}

/* ── Resume capsule (CornerStone-style) ───────────────── */
.resume-capsule {
  position: fixed; left: var(--sp-5); bottom: var(--sp-5); z-index: 80;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 6px 6px 6px 6px;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(12px);
  border: 1px solid var(--10);
  border-radius: var(--r-cap);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
  transform: translateY(0);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  cursor: pointer;
  max-width: 380px;
}
.resume-capsule.orb-hidden { transform: translateY(150%); opacity: 0; pointer-events: none; }
.resume-capsule img {
  width: 36px; height: 50px; border-radius: 2px; object-fit: cover;
  filter: var(--cover-grey-hover);
}
.resume-capsule .info { min-width: 0; padding-right: var(--sp-2); }
.resume-capsule .k { font-family: var(--f-mono); font-size: 9px; color: var(--40); text-transform: uppercase; letter-spacing: 1.6px; }
.resume-capsule .t { font-size: 13px; color: var(--100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.resume-capsule .go {
  height: 36px; padding: 0 var(--sp-4);
  background: var(--100); color: var(--inv-100);
  border-radius: var(--r-cap); border: 0;
  font-family: var(--f-sans); font-size: 12px; font-weight: 500;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out);
}
.resume-capsule .go:hover { filter: brightness(0.9); }
.resume-capsule .x {
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: 0; color: var(--40);
  cursor: pointer; font-size: 16px; line-height: 1;
}
.resume-capsule .x:hover { color: var(--100); }

/* ── Scrollbars ───────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--10); }

/* ╔═ verbatim from orbit-librarian/modes.css · 23006 chars ═╗ */
/* ─────────────────────────────────────────────────────────
   Mode-specific detail page styles + mini player + cross-mode
   ───────────────────────────────────────────────────────── */

/* ── Cross-mode briefing ────────────────────────────────── */
.orb-cross-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.cross-mode {
  display: flex; flex-direction: column;
  padding: var(--sp-4);
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.cross-mode:hover {
  border-color: var(--20);
  background: rgba(255,255,255,0.03);
  transform: translateY(-2px);
}
.cross-mode:hover .arrow { transform: translateX(4px); color: var(--100); }
.orb-cross-mode__head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.orb-cross-mode__head .g {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--5); border: 1px solid var(--10);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-size: 14px; color: var(--80);
}
.orb-cross-mode__head .l {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px;
  color: var(--80);
  flex: 1;
}
.orb-cross-mode__head .arrow {
  font-size: 14px; color: var(--40);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.orb-cross-mode__nums { margin-bottom: var(--sp-3); }
.orb-cross-mode__nums .big {
  font-family: var(--f-sans); font-weight: 200; font-size: 32px;
  color: var(--100); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.orb-cross-mode__nums .big .unit { font-size: 11px; color: var(--40); margin-left: 6px; letter-spacing: 0; }
.orb-cross-mode__nums .sub { font-size: 11px; color: var(--100); margin-top: 6px; letter-spacing: 0; }
.orb-cross-chrono {
  display: flex; gap: 2px;
  height: 40px;
  align-items: flex-end;
  margin-top: auto;
}
.orb-cross-chrono__bar {
  flex: 1;
  background: var(--100);
  border-radius: 1px;
  min-height: 1px;
  transition: filter var(--dur-base) var(--ease-out);
}
.cross-mode:hover .orb-cross-chrono__bar { filter: brightness(1.4); }

/* ── Album cards (Music albums page) ────────────────────── */
.orb-album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
}
.density-compact .orb-album-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.density-airy .orb-album-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.orb-album-card {
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.orb-album-card:hover { transform: translateY(-3px); }
.orb-album-card__cover-wrap {
  position: relative;
  aspect-ratio: 1;
  border-radius: 2px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--5);
  box-shadow: 0 12px 24px rgba(0,0,0,0.5);
}
.orb-album-card__cover {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--cover-grey);
  transition: filter var(--dur-base) var(--ease-out);
}
.orb-album-card:hover .orb-album-card__cover { filter: var(--cover-grey-hover); }
.orb-album-card__play {
  position: absolute; right: 10px; bottom: 10px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--100);
  color: var(--inv-100);
  border: 0;
  font-size: 13px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.orb-album-card:hover .orb-album-card__play { opacity: 1; transform: translateY(0); }
.orb-album-card__play:hover { filter: brightness(1.1); }
.orb-album-card__body { padding: 8px 2px; display: flex; flex-direction: column; gap: 2px; }
.orb-album-card__t {
  font-size: 13px; color: var(--100); font-weight: 300;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3;
}
.orb-album-card__a { font-size: 11px; color: var(--60); }

/* ── Album hero (Album detail) ──────────────────────────── */
.orb-album-hero {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: 1px solid var(--5);
  margin-bottom: var(--sp-6);
}
.orb-album-hero__cover-wrap {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7);
}
.orb-album-hero__cover {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--cover-grey-hover);
}
.orb-album-hero__playbig {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  height: 44px; padding: 0 22px;
  background: var(--100); color: var(--inv-100);
  font-size: 13px; font-weight: 500;
  border: 0; border-radius: var(--r-cap); cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.1);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.orb-album-hero__cover-wrap:hover .orb-album-hero__playbig { opacity: 1; }
.orb-album-hero__byline { font-size: 14px; color: var(--60); font-weight: 200; margin-bottom: var(--sp-3); }
.orb-album-hero__byline a { color: var(--100); border-bottom: 1px solid var(--20); }
.orb-album-hero__byline a:hover { border-color: var(--100); }
.orb-album-hero__meta { font-size: 11px; color: var(--40); margin-bottom: var(--sp-5); }
.orb-album-hero__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Tracklist ──────────────────────────────────────────── */
.orb-tracklist {
  display: flex; flex-direction: column;
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
}
.orb-track {
  display: grid;
  grid-template-columns: 40px 30px 1fr 60px;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--5);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.orb-track:last-child { border-bottom: 0; }
.orb-track:hover { background: var(--2); }
.orb-track .n { font-size: 11px; color: var(--40); }
.orb-track .orb-play-glyph {
  font-size: 11px; color: var(--40);
  transition: color var(--dur-base) var(--ease-out);
}
.orb-track:hover .orb-play-glyph { color: var(--100); }
.orb-track .t { font-size: 13px; color: var(--100); font-weight: 300; }
.orb-track .d { font-size: 11px; color: var(--40); text-align: right; }
.orb-track.orb-is-playing { background: rgba(var(--favorit-rgb), 0.08); }
.orb-track.orb-is-playing .n, .orb-track.orb-is-playing .orb-play-glyph { color: var(--100); }

/* ── Artist roster cards ────────────────────────────────── */
.orb-artist-roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-4);
}
.orb-artist-roster-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
}
.orb-artist-roster-card:hover {
  border-color: var(--20);
  background: rgba(255,255,255,0.025);
  transform: translateY(-2px);
}
.orb-artist-roster-card__head {
  display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-3); align-items: center;
  margin-bottom: var(--sp-2);
}
.orb-artist-roster-card__head img {
  width: 56px; height: 56px; border-radius: 50%;
  object-fit: cover;
  filter: var(--cover-grey-hover);
  border: 1px solid var(--10);
}
.orb-artist-roster-card .n { font-size: 16px; color: var(--100); font-weight: 300; }
.orb-artist-roster-card .m { font-size: 10px; color: var(--40); margin-top: 2px; letter-spacing: 0; }
.orb-artist-roster-card .b {
  font-size: 12px; color: var(--60); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.orb-artist-roster-card .s {
  display: flex; gap: var(--sp-4);
  font-size: 10px; color: var(--40);
  letter-spacing: 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--5);
}
.orb-artist-roster-card .s strong { color: var(--80); font-weight: 300; }

/* ── Large spark ────────────────────────────────────────── */
.orb-large-spark {
  width: 100%; height: 100px;
  border: 1px solid var(--5); border-radius: var(--r-md);
  background: rgba(0,0,0,0.3);
  padding: 12px;
}

/* ── Playlists ──────────────────────────────────────────── */
.orb-playlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-4);
}
.orb-playlist-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-playlist-card:hover { border-color: var(--20); background: rgba(255,255,255,0.025); }
.orb-playlist-card__stack {
  display: flex; justify-content: center; align-items: center;
  height: 120px; position: relative;
}
.orb-playlist-card__stack img {
  position: absolute; left: 50%; top: 50%;
  transform-origin: center;
  width: 80px; height: 80px;
  object-fit: cover;
  filter: var(--cover-grey-hover);
  border-radius: 4px; border: 1px solid var(--10);
  box-shadow: 0 6px 12px rgba(0,0,0,0.5);
}
.orb-playlist-card__name { font-size: 16px; color: var(--100); font-weight: 300; }
.orb-playlist-card__meta { font-size: 10px; color: var(--40); }
.orb-playlist-card__desc { font-size: 12px; color: var(--60); line-height: 1.5; }
.orb-playlist-card__actions { display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--5); }

/* ── Mini player ────────────────────────────────────────── */
.orb-miniplayer {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 50;
  width: min(880px, calc(100vw - 32px));
  height: 64px;
  background: rgba(8, 8, 8, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--10);
  border-radius: var(--r-2xl);
  box-shadow: 0 24px 48px rgba(0,0,0,0.7);
  display: grid;
  grid-template-columns: 64px 1fr 240px;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-3) 0 0;
  overflow: hidden;
}
.orb-miniplayer__art {
  width: 64px; height: 64px;
  background: #0a0a0a;
}
.orb-miniplayer__art img {
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--cover-grey-hover);
}
.orb-miniplayer__main { display: grid; grid-template-rows: auto auto; gap: 4px; min-width: 0; padding: 0 4px; }
.orb-miniplayer__top { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.orb-miniplayer__top .t {
  font-size: 12px; color: var(--100); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.orb-miniplayer__top .a { font-size: 10px; color: var(--60); letter-spacing: 0; }
.orb-miniplayer__transport { display: flex; align-items: center; gap: 6px; }
.orb-miniplayer__btn {
  background: transparent; border: 0;
  color: var(--80);
  cursor: pointer; padding: 4px 6px;
  font-size: 12px;
  border-radius: 4px;
  transition: color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.orb-miniplayer__btn:hover { color: var(--100); background: var(--5); }
.orb-miniplayer__btn--play {
  width: 28px; height: 28px;
  background: var(--100); color: var(--inv-100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
}
.orb-miniplayer__btn--play:hover { filter: brightness(0.92); background: var(--100); color: var(--inv-100); }
.orb-miniplayer__bar { flex: 1; padding: 0 8px; }
.orb-miniplayer__bar-track {
  height: 4px; background: var(--5); border-radius: 2px;
  position: relative; cursor: pointer;
}
.orb-miniplayer__bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--100);
  border-radius: 2px;
  pointer-events: none;
}
.orb-miniplayer__bar-knob {
  position: absolute; top: 50%;
  width: 10px; height: 10px;
  background: var(--100);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.orb-miniplayer__right { display: flex; align-items: center; gap: 6px; padding-right: 4px; }
.orb-miniplayer__vol { display: flex; align-items: center; gap: 4px; }
.orb-miniplayer__vol span { color: var(--40); font-size: 12px; }
.orb-miniplayer__vol input[type=range] {
  width: 70px; accent-color: var(--100);
  background: transparent;
}

@media (max-width: 700px){
  .orb-miniplayer { grid-template-columns: 56px 1fr 80px; height: 56px; }
  .orb-miniplayer__art { width: 56px; height: 56px; }
  .orb-miniplayer__vol, .orb-miniplayer__transport .orb-miniplayer__bar + span { display: none; }
}

/* ── Title hero / episode list (Streaming) ──────────────── */
.orb-title-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-7);
  align-items: flex-start;
  padding: var(--sp-6) 0 var(--sp-6);
  border-bottom: 1px solid var(--5);
  margin-bottom: var(--sp-6);
}
.orb-title-hero__poster {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7);
}
.orb-title-hero__poster img { width: 100%; aspect-ratio: 2/3; object-fit: cover; filter: var(--cover-grey-hover); }
.orb-title-hero__overlay {
  position: absolute; bottom: 12px; left: 12px; right: 12px;
}
.orb-title-hero__main .orb-detail-title { margin-top: 8px; }
.orb-title-hero__meta { font-size: 11px; color: var(--60); margin-top: 12px; font-family: var(--f-mono); letter-spacing: 0; }

.orb-episode-list { display: flex; flex-direction: column; border: 1px solid var(--5); border-radius: var(--r-md); overflow: hidden; }
.episode-row {
  display: grid;
  grid-template-columns: 80px 1fr 60px 100px 40px;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--5);
  font-size: 12px;
}
.episode-row:last-child { border-bottom: 0; }
.episode-row:hover { background: var(--2); }
.episode-row.orb-is-watched .t { color: var(--60); }
.episode-row.is-active { background: rgba(var(--favorit-rgb), 0.06); }
.episode-row .num { color: var(--40); }
.episode-row .t { color: var(--100); font-weight: 300; }
.episode-row .d { color: var(--40); text-align: right; }
.episode-row .s { font-size: 10px; text-align: right; letter-spacing: 0; }
.btn.mini { height: 26px; padding: 0 10px; font-size: 11px; }

/* ── Provider grid ──────────────────────────────────────── */
.orb-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.orb-provider-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-provider-card:hover {
  border-color: var(--20);
  transform: translateY(-2px);
}
.orb-provider-card__strip {
  position: relative;
  height: 80px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--5);
}
.orb-provider-card__strip img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 4px;
  filter: var(--cover-grey-hover) brightness(0.85);
}
.provider-card__status {
  position: absolute; top: 8px; right: 8px;
  font-size: 9px; padding: 2px 6px;
  background: rgba(0,0,0,0.7);
  border-radius: 2px;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--60);
}
.provider-card__status.orb-status-connected { color: var(--100); }
.provider-card__status.orb-status-linked { color: var(--100); }
.provider-card__status.orb-status-available { color: var(--40); }
.orb-provider-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.orb-provider-card__head .n { font-size: 14px; color: var(--100); font-weight: 400; }
.orb-provider-card__head .m { font-size: 10px; color: var(--40); margin-top: 2px; letter-spacing: 0; }
.orb-provider-card__stats {
  display: flex; justify-content: space-between;
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--5);
  border-bottom: 1px solid var(--5);
  font-size: 11px; color: var(--60);
}
.orb-provider-card__stats strong { color: var(--100); font-weight: 300; font-size: 14px; }
.orb-provider-card__next .k { font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--40); }
.orb-provider-card__next .v { font-size: 12px; color: var(--80); margin-top: 2px; }

.orb-provider-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: 1px solid var(--5);
  margin-bottom: var(--sp-6);
}
.orb-provider-hero__cover {
  height: 200px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  overflow: hidden;
}
.orb-provider-hero__cover img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--r-md); filter: var(--cover-grey-hover); }
.orb-provider-hero__meta { font-size: 11px; color: var(--60); margin-top: 12px; }

/* ── Watchlist rows ─────────────────────────────────────── */
.orb-watchlist-rows { display: flex; flex-direction: column; gap: 4px; }
.orb-watch-row {
  display: grid;
  grid-template-columns: 56px 60px 1fr auto auto auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--5);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-watch-row:hover { border-color: var(--20); background: rgba(255,255,255,0.025); }
.orb-watch-row .orb-rank { font-size: 11px; color: var(--40); }
.orb-watch-row img { width: 60px; height: 90px; object-fit: cover; filter: var(--cover-grey); border-radius: 2px; }
.orb-watch-row .m .t { font-size: 14px; color: var(--100); font-weight: 300; }
.orb-watch-row .m .s { font-size: 10px; color: var(--40); margin-top: 4px; letter-spacing: 0; }

/* ── Connections (Games) ────────────────────────────────── */
.orb-connections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-4);
}
.connection-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.connection-card:hover { border-color: var(--20); background: rgba(255,255,255,0.025); transform: translateY(-2px); }
.connection-card.orb-status-available { opacity: 0.7; }
.orb-connection-card__head {
  display: grid; grid-template-columns: 40px 1fr 12px; gap: var(--sp-3); align-items: center;
}
.orb-connection-card__logo {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--5); border: 1px solid var(--10);
}
.orb-connection-card__logo img { width: 100%; height: 100%; object-fit: cover; filter: var(--cover-grey-hover); }
.orb-connection-card__head .n { font-size: 14px; color: var(--100); font-weight: 400; }
.orb-connection-card__head .m { font-size: 10px; color: var(--40); margin-top: 2px; letter-spacing: 0; }
.connection-card__dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.connection-card__dot.orb-status-online { background: var(--100); box-shadow: 0 0 6px var(--100); }
.connection-card__dot.orb-status-linked { background: var(--100); }
.connection-card__dot.orb-status-available { background: var(--20); }
.orb-connection-card__stats {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--5);
  border-bottom: 1px solid var(--5);
}
.orb-connection-card__stats > div { display: flex; flex-direction: column; gap: 2px; }
.orb-connection-card__stats .v { font-family: var(--f-sans); font-weight: 200; font-size: 18px; color: var(--100); }
.orb-connection-card__stats .v.mono { font-family: var(--f-mono); font-size: 11px; }
.orb-connection-card__stats .k { font-size: 9px; color: var(--40); text-transform: uppercase; letter-spacing: 1.4px; }
.orb-connection-card__desc { font-size: 12px; color: var(--60); line-height: 1.5; }

/* ── Game hero ──────────────────────────────────────────── */
.orb-game-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: 1px solid var(--5);
  margin-bottom: var(--sp-6);
}
.orb-game-hero__cover {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.7);
}
.orb-game-hero__cover img { width: 100%; aspect-ratio: 3/4; object-fit: cover; filter: var(--cover-grey-hover); }
.orb-game-hero__meta { font-size: 11px; color: var(--60); margin-top: 12px; }

/* ── Achievements ───────────────────────────────────────── */
.orb-achievement-list { display: flex; flex-direction: column; gap: 4px; }
.orb-achievement-row {
  display: grid; grid-template-columns: 36px 1fr auto; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--5); border-radius: var(--r-sm);
  background: rgba(0,0,0,0.3);
}
.orb-achievement-row .ico {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(var(--favorit-rgb), 0.15);
  color: var(--100);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.orb-achievement-row .t { font-size: 13px; color: var(--100); font-weight: 300; }
.orb-achievement-row .d { font-size: 11px; color: var(--60); margin-top: 2px; }
.orb-achievement-row .orb-when { font-size: 11px; color: var(--40); }

/* ── Sessions log ───────────────────────────────────────── */
.orb-sessions-log {
  display: flex; flex-direction: column;
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
}
.orb-sessions-log__row {
  display: grid;
  grid-template-columns: 32px 1fr 80px 100px 100px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--5);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
  color: var(--60);
}
.orb-sessions-log__row:last-child { border-bottom: 0; }
.orb-sessions-log__row:hover { background: var(--2); }
.orb-sessions-log__main .t { font-size: 13px; color: var(--100); font-weight: 300; }
.orb-sessions-log__main .m { font-size: 10px; color: var(--40); letter-spacing: 0; }

@media (max-width: 980px){
  .orb-album-hero, .orb-title-hero, .orb-game-hero, .orb-provider-hero { grid-template-columns: 1fr; }
}

/* ╔═ verbatim from orbit-librarian/pages.css · 36433 chars ═╗ */
/* ─────────────────────────────────────────────────────────
   Librarian — Subpage styles (Books, Authors, Series, Add)
   ───────────────────────────────────────────────────────── */

/* ── Page heads ─────────────────────────────────────────── */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: 1px solid var(--5);
  margin-bottom: var(--sp-6);
}
.orb-page-head__main { flex: 1; min-width: 0; }
.orb-page-head__title {
  font-family: var(--f-sans); font-weight: 180;
  font-size: clamp(48px, 6vw, 92px);
  line-height: 0.96; letter-spacing: -2.4px;
  color: var(--100); text-shadow: var(--ts-h1);
  margin: 0;
}
.orb-page-head__title em.hl, .hl {
  font-style: italic; font-weight: 200;
  color: var(--100);
}
.orb-page-head__sub {
  margin-top: var(--sp-3);
  font-size: 14px; color: var(--60);
  font-weight: 200; max-width: 60ch;
  line-height: 1.6;
}
.orb-page-head__right { display: flex; gap: var(--sp-2); align-items: center; }

.orb-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--5);
  color: var(--60);
  font-family: var(--f-sans); font-size: 11px; font-weight: 400;
  padding: 6px 12px; border-radius: var(--r-cap);
  cursor: pointer; margin: var(--sp-5) 0 var(--sp-3);
  transition: all var(--dur-base) var(--ease-out);
}
.orb-back-link:hover { color: var(--100); border-color: var(--20); background: var(--2); }

/* ── Page toolbar (search + chips + sort) ───────────────── */
.orb-page-toolbar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) 0 var(--sp-5);
  border-bottom: 1px solid var(--5);
  margin-bottom: var(--sp-4);
  flex-wrap: wrap;
}
.orb-page-toolbar__search {
  flex: 1; min-width: 260px;
  display: flex; align-items: center; gap: var(--sp-3);
  height: 40px; padding: 0 var(--sp-4);
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.orb-page-toolbar__search:focus-within { border-color: var(--40); background: var(--4); }
.orb-page-toolbar__search svg { width: 14px; height: 14px; color: var(--60); }
.orb-page-toolbar__search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--100); font-family: var(--f-sans);
  font-size: 13px; font-weight: 200; letter-spacing: 0.16px;
}
.orb-page-toolbar__search input::placeholder { color: var(--40); }
.orb-page-toolbar__search.big { height: 56px; padding: 0 var(--sp-5); }
.orb-page-toolbar__search.big input { font-size: 18px; font-weight: 200; }
.orb-page-toolbar__search.big svg { width: 18px; height: 18px; }
.orb-x-btn {
  background: transparent; border: 0; color: var(--40);
  font-size: 16px; cursor: pointer; padding: 2px 6px;
}
.orb-x-btn:hover { color: var(--100); }

.orb-page-toolbar__filters { display: flex; gap: 4px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 var(--sp-3);
  background: transparent;
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  color: var(--60);
  font-family: var(--f-sans); font-size: 12px; font-weight: 300;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.chip:hover { color: var(--100); border-color: var(--20); }
.chip.is-active {
  color: var(--100); background: var(--5); border-color: var(--20);
}
.orb-chip__n {
  font-family: var(--f-mono); font-size: 10px; color: var(--40);
  margin-left: 4px;
}
.chip.is-active .orb-chip__n { color: var(--60); }

.orb-page-toolbar__sort { display: flex; align-items: center; gap: var(--sp-2); }
.orb-select-ghost {
  background: transparent; border: 1px solid var(--5);
  color: var(--100); font-family: var(--f-sans);
  font-size: 12px; font-weight: 200;
  padding: 6px 24px 6px 10px;
  border-radius: var(--r-cap);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.orb-org/2000/svg' width='10' height='10' viewBox='0 0 16 16' fill='%23888'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.orb-select-ghost option { background: #111; color: var(--100); }

.orb-page-results {
  padding: 0 0 var(--sp-4);
  color: var(--40);
}

/* ── Books grid ─────────────────────────────────────────── */
.orb-books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-5) var(--sp-4);
}
.density-airy .orb-books-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-6) var(--sp-5); }
.density-compact .orb-books-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-4) var(--sp-3); }

.book-card {
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.book-card:hover { transform: translateY(-3px); }
.book-card:hover .orb-book-card__cover { filter: var(--cover-grey-hover); }
.orb-book-card__cover-wrap {
  position: relative;
  aspect-ratio: 2/3;
  overflow: hidden;
  border-radius: 2px;
  background: #0a0a0a;
  border: 1px solid var(--5);
  box-shadow: 0 12px 24px rgba(0,0,0,0.5);
}
.orb-book-card__cover {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--cover-grey);
  transition: filter var(--dur-base) var(--ease-out);
}
.book-card.orb-is-ghost .orb-book-card__cover { filter: grayscale(1) brightness(0.45); }
.book-card.orb-is-ghost .orb-book-card__cover-wrap { border-style: dashed; }
.book-card.is-active .orb-book-card__cover-wrap { box-shadow: 0 12px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--favorit-rgb), 0.35); }
.orb-book-card__pill {
  position: absolute; top: 8px; left: 8px;
  background: var(--100); color: var(--inv-100);
  font-family: var(--f-sans); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.4px;
  padding: 3px 6px; border-radius: 2px;
}
.orb-book-card__pill.ghost {
  background: transparent; color: var(--60);
  border: 1px dashed var(--20);
}
.orb-book-card__body {
  padding: var(--sp-3) 2px;
  display: flex; flex-direction: column; gap: 2px;
}
.orb-book-card__title {
  font-size: 13px; color: var(--100); font-weight: 300;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.35;
}
.orb-book-card__author {
  font-size: 11px; color: var(--60); font-weight: 200;
}
.orb-book-card__series {
  font-size: 9px; color: var(--40); margin-top: 4px;
  text-transform: uppercase; letter-spacing: 1.4px;
}

/* ── List table view ────────────────────────────────────── */
.orb-list-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
}
.orb-list-table__head, .orb-list-table__row {
  display: grid;
  grid-template-columns: 60px 1.4fr 1fr 1fr 100px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
}
.orb-list-table__head {
  background: var(--2);
  border-bottom: 1px solid var(--5);
  font-family: var(--f-sans); font-size: 10px; color: var(--40);
  text-transform: uppercase; letter-spacing: 1.6px;
}
.orb-list-table__row {
  border-bottom: 1px solid var(--5);
  background: transparent;
  transition: background var(--dur-base) var(--ease-out);
  cursor: pointer;
}
.orb-list-table__row:last-child { border-bottom: 0; }
.orb-list-table__row:hover { background: var(--2); }
.orb-list-table__row .orb-c-cover img {
  width: 36px; height: 54px; object-fit: cover;
  border-radius: 2px; filter: var(--cover-grey);
}
.orb-list-table__row .t { color: var(--100); font-size: 13px; font-weight: 300; }
.orb-list-table__row .a { color: var(--60); font-size: 12px; }
.orb-list-table__row .s { color: var(--40); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.orb-list-table__row .status { font-size: 11px; font-family: var(--f-mono); text-align: right; text-transform: uppercase; letter-spacing: 1px; }

/* ── Empty state ────────────────────────────────────────── */
.empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 64px 24px; text-align: center;
}
.orb-empty__icon {
  font-family: var(--f-sans); font-weight: 200;
  font-size: 48px; color: var(--20); margin-bottom: 12px;
}
.orb-empty__t { font-size: 16px; color: var(--80); margin-bottom: 4px; }
.orb-empty__s { font-size: 12px; color: var(--40); }

/* ── Book detail ────────────────────────────────────────── */
.orb-page--detail .page-head { border-bottom: 0; padding-bottom: 0; }

.orb-detail-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--sp-7);
  margin-top: var(--sp-4);
}
.orb-detail-side {
  display: flex; flex-direction: column; gap: var(--sp-5);
  position: sticky; top: 80px;
  align-self: flex-start;
}
.orb-detail-cover-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
  border: 1px solid var(--10);
}
.orb-detail-cover {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  filter: var(--cover-grey-hover);
}
.orb-detail-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.btn.full { width: 100%; justify-content: center; height: 44px; font-size: 13px; font-weight: 400; }
.orb-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.orb-btn-row .btn { width: 100%; justify-content: center; }

.orb-meta-card {
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.3);
  overflow: hidden;
}
.orb-meta-card__row {
  display: grid; grid-template-columns: 92px 1fr;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-3);
  border-bottom: 1px solid var(--5);
  font-size: 11px;
}
.orb-meta-card__row:last-child { border-bottom: 0; }
.orb-meta-card__row .k { color: var(--40); text-transform: uppercase; letter-spacing: 1.4px; font-size: 9px; }
.orb-meta-card__row .v { color: var(--80); }
.orb-meta-card__row .v.mono, .orb-meta-card__row .v.mono * { font-family: var(--f-mono); font-size: 11px; }

.orb-store-grid { display: flex; flex-direction: column; gap: 2px; }
.orb-store-btn {
  display: flex; justify-content: space-between; align-items: center;
  height: 36px; padding: 0 var(--sp-3);
  background: var(--2); border: 1px solid var(--5);
  border-radius: var(--r-sm);
  font-size: 12px; color: var(--80);
  transition: all var(--dur-base) var(--ease-out);
}
.orb-store-btn:hover { color: var(--100); border-color: var(--20); background: var(--4); }
.orb-store-btn .mono { font-size: 10px; color: var(--40); }
.orb-store-btn .orb-dot-ok { color: var(--100); }

.orb-hold-delete {
  position: relative;
  background: transparent;
  border: 1px solid var(--5);
  color: var(--60);
  height: 36px;
  border-radius: var(--r-cap);
  font-family: var(--f-sans); font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-hold-delete:hover { color: rgb(73, 73, 73); border-color: rgba(73, 73, 73, 0.4); }
.orb-hold-delete .orb-prog {
  position: absolute; inset: 0;
  background: rgba(73, 73, 73, 0.2);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 3s linear;
}
.orb-hold-delete:active .orb-prog { transform: scaleX(1); }

/* main column */
.orb-detail-main { display: flex; flex-direction: column; gap: var(--sp-7); padding-top: 8px; }
.orb-detail-titleblock { display: flex; flex-direction: column; gap: 8px; }
.orb-detail-title {
  font-family: var(--f-sans); font-weight: 180;
  font-size: clamp(38px, 5vw, 64px); line-height: 1.0;
  letter-spacing: -1.4px; color: var(--100);
  text-shadow: var(--ts-h1);
  margin: 0;
}
.orb-detail-author { font-size: 16px; color: var(--60); font-weight: 200; }
.orb-detail-author a { color: var(--100); border-bottom: 1px solid var(--20); }
.orb-detail-author a:hover { border-color: var(--100); }

/* ── Editable fields ────────────────────────────────────── */
.orb-editable[contenteditable], .orb-editable[contenteditable="true"] {
  outline: 0;
  padding: 0 6px;
  margin-left: -6px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: text;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  position: relative;
}
.orb-editable[contenteditable]:hover {
  background: var(--2);
  border-color: var(--5);
}
.orb-editable[contenteditable]:focus {
  background: var(--4);
  border-color: var(--40);
  box-shadow: 0 0 0 2px rgba(var(--favorit-rgb), 0.15);
}
.orb-editable[contenteditable]:hover::after {
  content: "edit";
  position: absolute;
  top: 4px; right: 4px;
  font-family: var(--f-mono); font-size: 9px;
  color: var(--40);
  text-transform: uppercase; letter-spacing: 1.4px;
  pointer-events: none;
  opacity: 0.6;
}
.orb-editable[contenteditable]:focus::after {
  content: "↵ to save";
  color: var(--100);
  opacity: 1;
}

.orb-reading-tracker {
  padding: var(--sp-5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: linear-gradient(to right, rgba(var(--favorit-rgb), 0.04), transparent);
}
.orb-rt-bar { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-6); align-items: center; }
.orb-rt-pct {
  font-family: var(--f-sans); font-weight: 200;
  font-size: 56px; line-height: 1;
  color: var(--100); font-variant-numeric: tabular-nums;
}
.orb-rt-pct .unit { font-size: 18px; color: var(--40); }
.orb-rt-prog { display: flex; flex-direction: column; gap: 8px; }
.orb-rt-track { height: 2px; background: var(--5); position: relative; border-radius: 1px; }
.orb-rt-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--100); box-shadow: 0 0 8px var(--100); }
.orb-rt-meta { font-size: 11px; color: var(--40); }
.orb-rt-stats { display: flex; gap: var(--sp-5); }
.orb-rt-stat .k { font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--40); margin-bottom: 2px; }
.orb-rt-stat .v { font-size: 13px; color: var(--80); font-family: var(--f-mono); }

.orb-detail-section { display: flex; flex-direction: column; gap: var(--sp-4); }
.orb-detail-h3 {
  font-family: var(--f-sans); font-size: 11px;
  font-weight: 500;
  text-transform: uppercase; letter-spacing: 2.4px;
  color: var(--80);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--5);
  margin: 0;
  display: flex; align-items: baseline;
}
.orb-detail-body {
  font-family: var(--f-sans); font-size: 16px; font-weight: 180;
  line-height: 1.8; letter-spacing: 0.16px;
  color: var(--80); max-width: 68ch;
  text-shadow: var(--ts-p);
}
.orb-detail-body + .orb-detail-body { margin-top: 8px; }

/* sessions */
.orb-sessions { display: flex; flex-direction: column; gap: 2px; }
.orb-session-row {
  display: grid;
  grid-template-columns: 60px 80px 1fr 56px 56px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-family: var(--f-mono); font-size: 11px; color: var(--60);
  border-bottom: 1px solid var(--5);
}
.orb-session-row:last-child { border-bottom: 0; }
.orb-session-row .d { color: var(--80); }
.orb-session-row .r { color: var(--40); }
.orb-session-row .p { color: var(--100); text-align: right; }
.orb-session-row .m { color: var(--40); text-align: right; }
.orb-session-row .orb-b__track { height: 4px; background: var(--5); border-radius: 2px; position: relative; overflow: hidden; }
.orb-session-row .orb-b__from { position: absolute; left: 0; top: 0; bottom: 0; background: var(--20); }
.orb-session-row .orb-b__new { position: absolute; top: 0; bottom: 0; background: var(--100); }

/* related strips */
.orb-related-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.orb-related-tile {
  display: flex; flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.orb-related-tile:hover { transform: translateY(-2px); }
.orb-related-tile img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  filter: var(--cover-grey);
  border-radius: 2px; border: 1px solid var(--5);
  box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}
.orb-related-tile:hover img { filter: var(--cover-grey-hover); }
.orb-related-tile.orb-is-self img { box-shadow: 0 8px 16px rgba(0,0,0,0.4), 0 0 0 1px var(--100); }
.orb-related-tile__t {
  font-size: 12px; color: var(--80); margin-top: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3;
}
.orb-related-tile__s { font-size: 10px; color: var(--40); margin-top: 2px; text-transform: uppercase; letter-spacing: 1.2px; }
.orb-related-tile__num {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.85); color: var(--80);
  font-family: var(--f-mono); font-size: 9px;
  padding: 2px 4px; border-radius: 2px; z-index: 2;
  letter-spacing: 0;
}

/* author block in book detail */
.orb-author-block { display: grid; grid-template-columns: 80px 1fr; gap: var(--sp-4); align-items: start; }
.orb-author-block__avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--5); border: 1px solid var(--10);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-weight: 200; font-size: 26px; color: var(--80);
  letter-spacing: -1px;
}
.orb-author-block__name { font-size: 18px; color: var(--100); font-weight: 300; }
.orb-author-block__meta { font-size: 11px; color: var(--40); margin-top: 2px; }
.orb-author-block__bio { font-size: 13px; color: var(--80); line-height: 1.6; margin-top: 10px; max-width: 60ch; }
.orb-author-block__main { display: flex; flex-direction: column; gap: 4px; }
.orb-tag-row { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.orb-tag-row .tag { font-size: 10px; padding: 3px 8px; }
.orb-link-arrow {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--sp-3);
  font-size: 12px; color: var(--100); cursor: pointer;
}
.orb-link-arrow:hover { color: var(--100); }

/* ── Author cards ───────────────────────────────────────── */
.orb-author-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: var(--sp-5);
}
.orb-author-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
}
.orb-author-card:hover { border-color: var(--20); background: rgba(255,255,255,0.025); }
.orb-author-card__head { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--sp-3); align-items: center; }
.orb-author-card__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--5); border: 1px solid var(--10);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-weight: 200; font-size: 20px; color: var(--80);
}
.orb-author-card__name { font-size: 16px; color: var(--100); font-weight: 300; }
.orb-author-card__meta { font-size: 10px; color: var(--40); margin-top: 2px; }
.orb-author-card__counts .n { font-family: var(--f-sans); font-weight: 200; font-size: 22px; color: var(--100); margin-right: 4px; }
.orb-author-card__counts .l { font-size: 10px; color: var(--40); text-transform: uppercase; letter-spacing: 1.4px; }
.orb-author-card__bio {
  font-size: 12px; color: var(--60); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.orb-author-card__strip { display: flex; gap: 4px; height: 80px; }
.orb-author-card__strip img {
  flex: 1; min-width: 0; height: 100%;
  object-fit: cover; filter: var(--cover-grey);
  border-radius: 2px; border: 1px solid var(--5);
}
.orb-author-card__foot { display: flex; gap: var(--sp-2); align-items: center; padding-top: var(--sp-2); border-top: 1px solid var(--5); }
.badge {
  font-family: var(--f-sans); font-size: 10px;
  padding: 2px 7px; border-radius: 2px;
  background: var(--2); color: var(--60); border: 1px solid var(--5);
  letter-spacing: 0.2px;
}
.badge.orb-accent { color: var(--100); border-color: rgba(var(--favorit-rgb), 0.4); }
.badge.ghost { color: var(--40); border-style: dashed; }
.badge.orb-total { font-family: var(--f-mono); margin-left: auto; }
.orb-link-arrow { font-size: 11px; }

/* ── Author detail ──────────────────────────────────────── */
.orb-author-hero {
  display: grid; grid-template-columns: 120px 1fr;
  gap: var(--sp-5); align-items: center;
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: 1px solid var(--5);
  margin-bottom: var(--sp-6);
}
.orb-author-hero__avatar {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--5); border: 1px solid var(--10);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-weight: 200; font-size: 40px; color: var(--80);
  letter-spacing: -2px;
}
.orb-author-hero__meta { font-size: 11px; color: var(--40); margin-top: 8px; }

/* series tile in author page */
.orb-series-tile {
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  padding: var(--sp-3);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-series-tile:hover { border-color: var(--20); background: var(--2); }
.orb-series-tile__stack {
  display: flex; justify-content: center; align-items: end; gap: -10px;
  height: 110px; margin-bottom: var(--sp-2); position: relative;
}
.orb-series-tile__stack img {
  width: 50px; height: 75px; object-fit: cover;
  filter: var(--cover-grey);
  border-radius: 2px; border: 1px solid var(--5);
  box-shadow: 0 6px 12px rgba(0,0,0,0.5);
  margin: 0 -8px;
}
.orb-series-tile__name { font-size: 13px; color: var(--100); font-weight: 300; }
.orb-series-tile__meta { font-size: 10px; color: var(--40); }

/* ── Series cards (index page) ──────────────────────────── */
.orb-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-5);
}
.orb-series-card {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-series-card:hover { border-color: var(--20); background: rgba(255,255,255,0.025); }
.orb-series-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.orb-series-card__name { font-size: 18px; color: var(--100); font-weight: 300; line-height: 1.1; }
.orb-series-card__author { font-size: 11px; color: var(--60); margin-top: 4px; }
.orb-series-card__count {
  font-family: var(--f-sans); font-weight: 200; font-size: 28px;
  color: var(--100); font-variant-numeric: tabular-nums;
}
.orb-series-card__count::after { content: "%"; font-size: 12px; color: var(--40); margin-left: 2px; }
.orb-series-card__cover-strip {
  display: flex; padding: var(--sp-3) 0; height: 100px;
  align-items: flex-end;
  overflow: hidden;
}
.orb-series-card__cover-strip img {
  width: 60px; height: 90px; object-fit: cover;
  filter: var(--cover-grey);
  border-radius: 2px; border: 1px solid var(--5);
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}
.orb-series-card__cover-strip img.read { filter: var(--cover-grey-hover); }
.orb-series-card__cover-strip img.active { filter: var(--cover-grey-hover); box-shadow: 0 6px 14px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--favorit-rgb), 0.7); }
.orb-series-card__cover-strip img.ghost { filter: grayscale(1) brightness(0.4); border-style: dashed; }
.orb-series-arc-mini { width: 100%; height: 40px; }
.orb-series-card__foot { display: flex; gap: var(--sp-2); align-items: center; padding-top: var(--sp-2); border-top: 1px solid var(--5); }

/* ── Series detail ──────────────────────────────────────── */
.orb-series-hero {
  display: grid; grid-template-columns: 1fr 280px;
  gap: var(--sp-7); align-items: start;
  padding: var(--sp-7) 0 var(--sp-6);
  border-bottom: 1px solid var(--5);
  margin-bottom: var(--sp-6);
}
.orb-series-hero__meta { font-size: 11px; color: var(--60); margin-top: 12px; }
.orb-series-hero__cta {
  padding: var(--sp-5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(var(--favorit-rgb), 0.04);
}
.orb-series-hero__cta img {
  width: 100%; max-width: 160px; aspect-ratio: 2/3;
  object-fit: cover; filter: var(--cover-grey-hover);
  border-radius: 2px; margin-bottom: var(--sp-3);
  box-shadow: 0 12px 24px rgba(0,0,0,0.6);
}
.orb-series-hero__cta .t { font-size: 16px; color: var(--100); font-weight: 300; }
.orb-series-hero__cta .a { font-size: 11px; color: var(--60); font-family: var(--f-mono); margin-bottom: var(--sp-3); }

.orb-series-full-arc { width: 100%; height: 200px; }
.orb-series-full-arc .orb-track { fill: none; stroke: var(--5); stroke-width: 1; }
.orb-series-full-arc .fill { fill: none; stroke: var(--80); stroke-width: 1; }
.orb-series-full-arc .node { stroke-width: 1.2; }
.orb-series-full-arc .orb-node-read { fill: var(--100); stroke: var(--100); }
.orb-series-full-arc .orb-node-active { fill: var(--100); stroke: var(--100); filter: drop-shadow(0 0 6px rgba(var(--favorit-rgb), 0.7)); }
.orb-series-full-arc .orb-node-owned { fill: rgba(0,0,0,0.6); stroke: var(--60); }
.orb-series-full-arc .orb-node-ghost { fill: rgba(0,0,0,0.6); stroke: var(--20); stroke-dasharray: 1 1.5; }
.orb-series-full-arc .orb-node-announced { fill: rgba(0,0,0,0.6); stroke: var(--40); stroke-dasharray: 0.5 1.2; }

.orb-volume-list { display: flex; flex-direction: column; border: 1px solid var(--5); border-radius: var(--r-md); overflow: hidden; }
.volume-row {
  display: grid;
  grid-template-columns: 60px 56px 1fr 80px 24px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--5);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.volume-row:last-child { border-bottom: 0; }
.volume-row:hover { background: var(--2); }
.volume-row.is-active { background: rgba(var(--favorit-rgb), 0.05); }
.volume-row.orb-is-ghost { opacity: 0.6; }
.volume-row .num { color: var(--40); font-size: 11px; }
.volume-row img {
  width: 40px; height: 60px; object-fit: cover;
  filter: var(--cover-grey); border-radius: 2px;
}
.volume-row .meta .t { font-size: 13px; color: var(--100); font-weight: 300; }
.volume-row .meta .a { font-size: 11px; color: var(--60); }
.volume-row .status { font-size: 11px; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: 1px; }
.volume-row .arrow { color: var(--40); }
.volume-row:hover .arrow { color: var(--100); }

/* ── Metric grid (Author detail / Series detail) ────────── */
.orb-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
}
.orb-metric {
  padding: var(--sp-4) var(--sp-5);
  background: rgba(0,0,0,0.4);
  display: flex; flex-direction: column; gap: 4px;
}
.orb-metric__k { font-size: 10px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--40); }
.orb-metric__v {
  font-family: var(--f-sans); font-weight: 200; font-size: 28px;
  color: var(--100); line-height: 1; font-variant-numeric: tabular-nums;
}
.orb-metric__s { font-size: 10px; color: var(--60); letter-spacing: 0; margin-top: 2px; }

/* ── Reading timeline (author detail) ───────────────────── */
.timeline {
  display: flex; align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding: var(--sp-3) 0 var(--sp-2);
  border-bottom: 1px solid var(--5);
}
.orb-timeline__col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  height: 100%; position: relative;
  justify-content: flex-end;
}
.orb-timeline__bar {
  width: 100%;
  background: linear-gradient(to top, rgba(var(--favorit-rgb), 0.5), rgba(var(--favorit-rgb), 0.95));
  border-radius: 1px;
  min-height: 2px;
  transition: filter var(--dur-base) var(--ease-out);
}
.orb-timeline__col:hover .orb-timeline__bar { filter: brightness(1.3); }
.orb-timeline__num {
  font-family: var(--f-mono); font-size: 9px;
  color: var(--80); position: absolute; top: 0;
  letter-spacing: 0;
}
.orb-timeline__y {
  font-size: 9px; color: var(--40); margin-top: 4px;
  letter-spacing: 0;
}

/* ── Series timeline (series detail) ────────────────────── */
.orb-series-timeline {
  position: relative;
  padding: var(--sp-4) 0 var(--sp-5);
}
.orb-series-timeline__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  position: relative;
  height: 24px;
  border-bottom: 1px solid var(--5);
  margin-bottom: var(--sp-5);
}
.orb-series-timeline__year {
  display: flex; flex-direction: column; align-items: center;
  position: relative;
}
.orb-series-timeline__year .orb-y-tick {
  width: 1px; height: 12px; background: var(--10);
  margin-bottom: 6px;
}
.orb-series-timeline__year .orb-y-label {
  font-size: 10px; color: var(--40);
}
.orb-series-timeline__events {
  position: relative;
  height: 110px;
}
.series-timeline__event {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 2px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--5);
  transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap;
  transform: translateX(-50%);
}
.series-timeline__event:hover { border-color: var(--40); background: rgba(0,0,0,0.85); transform: translateX(-50%) translateY(-1px); }
.series-timeline__event .orb-ev-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex: 0 0 6px;
}
.series-timeline__event .orb-ev-label { color: var(--80); }
.orb-status-read .orb-ev-dot { background: var(--100); }
.orb-status-active .orb-ev-dot { background: var(--100); box-shadow: 0 0 6px var(--100); }
.orb-status-active { border-color: rgba(var(--favorit-rgb), 0.4) !important; }
.orb-status-ghost .orb-ev-dot { background: transparent; border: 1px dashed var(--20); }
.orb-status-owned .orb-ev-dot { background: var(--40); }

/* ── Wizard (Add Book) ──────────────────────────────────── */
.wizard {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-5);
}
.orb-wizard__rail {
  display: flex; flex-direction: column; gap: var(--sp-2);
  border-right: 1px solid var(--5);
  padding-right: var(--sp-5);
  align-self: flex-start;
  position: sticky; top: 80px;
}
.step {
  display: grid; grid-template-columns: 30px 1fr; gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-left: 2px solid var(--5);
  padding-left: var(--sp-3);
  opacity: 0.5;
  transition: opacity var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.step.orb-is-current { opacity: 1; border-color: var(--100); }
.orb-step__num { font-family: var(--f-mono); font-size: 11px; color: var(--40); letter-spacing: 0; }
.step.orb-is-current .orb-step__num { color: var(--100); }
.orb-step__label { font-size: 13px; color: var(--80); }

.orb-wizard__body { display: flex; flex-direction: column; gap: var(--sp-5); }
.orb-wizard__provider { display: flex; align-items: center; }
.orb-wizard__hint { font-size: 10px; color: var(--40); margin-top: 8px; letter-spacing: 0; }
.orb-wizard__search { display: flex; flex-direction: column; }
.orb-wizard__search .orb-page-toolbar__search.big { flex: none; }
.orb-wizard__search .btn.primary { padding: 0 var(--sp-5); height: 36px; }

.orb-wizard__results { display: flex; flex-direction: column; gap: 4px; }
.wiz-row {
  display: grid;
  grid-template-columns: 48px 1fr auto 28px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--5);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.wiz-row:hover { border-color: var(--20); background: var(--2); }
.wiz-row.orb-is-selected {
  border-color: var(--100);
  background: rgba(var(--favorit-rgb), 0.05);
}
.wiz-row img {
  width: 48px; height: 72px; object-fit: cover;
  filter: var(--cover-grey); border-radius: 2px;
}
.wiz-row .meta { min-width: 0; }
.wiz-row .meta .t { font-size: 14px; color: var(--100); font-weight: 300; }
.wiz-row .meta .a { font-size: 12px; color: var(--60); }
.wiz-row .meta .m { font-size: 10px; color: var(--40); margin-top: 4px; letter-spacing: 0; }
.wiz-row .orb-src {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--40); padding: 2px 6px; border: 1px solid var(--5); border-radius: 2px;
}
.wiz-row.orb-is-selected .orb-src { color: var(--100); border-color: rgba(var(--favorit-rgb), 0.4); }
.wiz-row .pick { font-size: 16px; color: var(--40); text-align: center; }
.wiz-row.orb-is-selected .pick { color: var(--100); }

.orb-wizard__placeholder {
  display: flex; flex-direction: column; gap: var(--sp-5);
  padding: var(--sp-4) 0;
}
.orb-wizard__examples { display: flex; gap: 6px; flex-wrap: wrap; }
.orb-wizard__recent { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--5); }
.orb-wizard__recent-list { display: flex; flex-direction: column; gap: 4px; }
.orb-wizard__recent-row {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--2);
  font-size: 11px;
}
.orb-wizard__recent-row img { width: 40px; height: 56px; object-fit: cover; filter: var(--cover-grey); border-radius: 2px; }
.orb-wizard__recent-row .t { color: var(--80); }
.orb-wizard__recent-row .a { color: var(--40); margin-top: 2px; letter-spacing: 0; font-size: 10px; }
.orb-wizard__recent-row .mono { font-size: 10px; color: var(--40); }
.orb-searching-dot { font-size: 11px; color: var(--100); letter-spacing: 0; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }
.orb-in-lib {
  display: inline-block;
  font-size: 9px;
  margin-left: 8px;
  padding: 1px 5px;
  border: 1px solid var(--10);
  border-radius: 2px;
  color: var(--60);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  vertical-align: 2px;
}

.orb-confirm {
  display: grid; grid-template-columns: 200px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.4);
}
.orb-confirm img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  filter: var(--cover-grey-hover);
  border-radius: 2px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}
.orb-confirm__main .t { font-size: 24px; color: var(--100); font-weight: 200; }
.orb-confirm__main .a { font-size: 13px; color: var(--60); margin-top: 4px; margin-bottom: var(--sp-4); }
.orb-confirm__main .grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.orb-field { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--5); }
.orb-field .k { font-size: 9px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--40); }
.orb-field .v { font-size: 12px; color: var(--80); }
.orb-field .v.mono { font-family: var(--f-mono); font-size: 11px; }
.orb-confirm .actions { display: flex; gap: var(--sp-2); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 980px){
  .orb-detail-grid { grid-template-columns: 1fr; }
  .orb-detail-side { position: static; }
  .orb-author-hero { grid-template-columns: 1fr; }
  .orb-author-hero__avatar { width: 80px; height: 80px; font-size: 28px; }
  .orb-series-hero { grid-template-columns: 1fr; }
  .wizard { grid-template-columns: 1fr; }
  .orb-wizard__rail { flex-direction: row; border-right: 0; border-bottom: 1px solid var(--5); position: static; overflow-x: auto; }
  .step { flex: 0 0 auto; }
  .orb-rt-bar { grid-template-columns: 1fr; gap: var(--sp-4); }
  .orb-confirm { grid-template-columns: 1fr; }
  .orb-confirm img { max-width: 200px; }
  .orb-page-toolbar__search { width: 100%; }
}

/* ╔═ verbatim from orbit-librarian/settings.css · 14848 chars ═╗ */
/* ─────────────────────────────────────────────────────────
   Settings + Modes styles
   ───────────────────────────────────────────────────────── */

/* ── Nav avatar (settings trigger) ──────────────────────── */
.orb-nav__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--5);
  border: 1px solid var(--10);
  color: var(--80);
  font-family: var(--f-sans); font-weight: 300; font-size: 11px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  margin-left: var(--sp-2);
  letter-spacing: 0;
  transition: all var(--dur-base) var(--ease-out);
}
.orb-nav__avatar:hover { background: var(--10); color: var(--100); border-color: var(--20); }

/* ── Settings overlay ──────────────────────────────────── */
.settings-backdrop {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.settings-backdrop.show { opacity: 1; pointer-events: auto; }
.settings {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  z-index: 610;
  width: min(960px, 94vw);
  height: min(640px, 86vh);
  background: rgba(8, 8, 8, 0.98);
  border: 1px solid var(--20);
  border-radius: var(--r-md);
  box-shadow: 0 60px 120px rgba(0,0,0,0.8);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.settings.show {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.orb-settings__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--5);
}
.orb-settings__body {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1; min-height: 0;
}
.orb-settings__rail {
  display: flex; flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--5);
  background: rgba(0,0,0,0.4);
}
.settings__tab {
  display: flex; align-items: center; gap: var(--sp-3);
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--60);
  font-family: var(--f-sans); font-size: 13px;
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-base) var(--ease-out);
}
.settings__tab:hover { color: var(--100); background: var(--2); }
.settings__tab.is-active { color: var(--100); background: var(--5); border-left: 2px solid var(--100); padding-left: 8px; }
.settings__tab .g {
  width: 20px; text-align: center; color: var(--40);
  font-family: var(--f-mono); font-size: 13px;
}
.settings__tab.is-active .g { color: var(--100); }
.orb-settings__footer-rail {
  font-size: 10px; color: var(--40); padding: var(--sp-3) 10px 0;
  border-top: 1px solid var(--5);
  display: flex; flex-direction: column; gap: 4px;
  letter-spacing: 0;
}

.orb-settings__pane {
  padding: var(--sp-5) var(--sp-6);
  overflow-y: auto;
}
.orb-settings__pane-head { margin-bottom: var(--sp-5); }
.orb-settings__title {
  font-family: var(--f-sans); font-weight: 200;
  font-size: 28px; line-height: 1; color: var(--100);
  margin: 0;
  letter-spacing: -0.4px;
}
.orb-settings__sub {
  font-size: 12px; color: var(--60); font-weight: 200;
  margin-top: 8px; max-width: 60ch;
  line-height: 1.6;
}

.orb-settings__section { display: flex; flex-direction: column; gap: var(--sp-4); }

.orb-settings__display-tabs {
  display: flex; gap: 2px;
  padding: 3px;
  background: var(--2);
  border: 1px solid var(--5);
  border-radius: var(--r-cap);
  width: fit-content;
}
.settings__display-tab {
  background: transparent; border: 0;
  color: var(--60);
  font-family: var(--f-sans); font-size: 12px; font-weight: 300;
  padding: 6px 14px;
  border-radius: var(--r-cap);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}
.settings__display-tab:hover { color: var(--100); }
.settings__display-tab.is-active {
  background: var(--10); color: var(--100); font-weight: 500;
}
.orb-settings__row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--5);
}
.orb-settings__row-label {
  font-size: 11px; color: var(--40); text-transform: uppercase; letter-spacing: 1.6px;
}
.orb-settings__row--inline {
  grid-template-columns: 1fr; gap: var(--sp-3);
  padding: var(--sp-3) 0;
}
.orb-settings__input {
  background: var(--2); border: 1px solid var(--5); border-radius: var(--r-sm);
  color: var(--100); font-family: var(--f-sans); font-size: 13px; font-weight: 200;
  padding: 8px 12px;
  outline: 0; max-width: 320px; width: 100%;
  transition: border-color var(--dur-base) var(--ease-out);
}
.orb-settings__input:focus { border-color: var(--40); background: var(--4); }
select.orb-settings__input {
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.orb-org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='%23888'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select.orb-settings__input option { background: #111; color: var(--100); }

.orb-settings__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--5); border: 1px solid var(--10);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-weight: 200; font-size: 20px;
  color: var(--80);
}

.orb-settings__actions { display: flex; gap: var(--sp-2); padding-top: var(--sp-4); }
.btn.danger {
  color: var(--red, #d62603); border-color: rgba(214, 38, 3, 0.4);
}
.btn.danger:hover { background: rgba(214, 38, 3, 0.1); }

.orb-settings__hint {
  font-size: 11px; color: var(--40);
  padding: var(--sp-3) 0;
  font-style: italic;
}

/* Modes list */
.orb-mode-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.mode-row {
  display: grid; grid-template-columns: 40px 1fr 60px;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-4);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.25);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.mode-row.is-on {
  border-color: rgba(var(--favorit-rgb), 0.35);
  background: rgba(var(--favorit-rgb), 0.04);
}
.orb-mode-row__glyph {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-sans); font-size: 18px; color: var(--60);
  background: var(--5); border-radius: 50%;
}
.mode-row.is-on .orb-mode-row__glyph { color: var(--100); background: rgba(var(--favorit-rgb), 0.12); }
.orb-mode-row__label { font-size: 15px; color: var(--100); font-weight: 300; }
.orb-mode-row__desc { font-size: 12px; color: var(--60); margin-top: 4px; line-height: 1.5; max-width: 60ch; }
.orb-mode-row__pill {
  display: inline-block;
  font-size: 9px; color: var(--40);
  padding: 2px 6px; border: 1px solid var(--10);
  border-radius: 2px;
  text-transform: uppercase; letter-spacing: 1.4px;
  margin-top: 6px;
  letter-spacing: 1.4px;
}

/* Settings segmented buttons */
.seg {
  display: inline-flex;
  background: var(--2); border: 1px solid var(--5);
  border-radius: var(--r-cap);
  padding: 2px;
}
.seg button {
  background: transparent; border: 0;
  color: var(--60);
  font-family: var(--f-sans); font-size: 12px; font-weight: 200;
  padding: 6px 12px;
  border-radius: var(--r-cap);
  cursor: pointer;
  text-transform: capitalize;
  transition: all var(--dur-base) var(--ease-out);
}
.seg button:hover { color: var(--100); }
.seg button.is-active { background: var(--10); color: var(--100); }

/* Accent swatches */
.orb-accent-swatches { display: flex; gap: 8px; }
.accent-swatch {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--10);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.accent-swatch:hover { transform: scale(1.1); }
.accent-swatch.is-on {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--inv-100), 0 0 0 4px var(--40);
}

/* Toggle */
.st-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
}
.orb-st-toggle__track {
  display: inline-block;
  width: 36px; height: 20px;
  background: var(--5);
  border-radius: 999px;
  position: relative;
  transition: background var(--dur-base) var(--ease-out);
}
.orb-st-toggle__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--60);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.st-toggle.is-on .orb-st-toggle__track { background: rgba(var(--favorit-rgb), 0.3); }
.st-toggle.is-on .orb-st-toggle__thumb { transform: translateX(16px); background: var(--100); }
.orb-st-toggle__label { font-size: 12px; color: var(--80); }
.st-toggle.orb-is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Settings stats grid */
.orb-settings__stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--5);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.orb-settings__data-stat {
  padding: var(--sp-3) var(--sp-4);
  background: rgba(0,0,0,0.4);
}
.orb-settings__data-stat .k {
  font-size: 9px; color: var(--40);
  text-transform: uppercase; letter-spacing: 1.4px;
  margin-bottom: 4px;
}
.orb-settings__data-stat .v {
  font-family: var(--f-sans); font-weight: 200; font-size: 22px;
  color: var(--100);
}

/* About */
.orb-settings__about { display: flex; flex-direction: column; gap: var(--sp-3); }
.orb-settings__about-block {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--5);
}
.orb-settings__about-block:last-child { border-bottom: 0; }
.orb-settings__about-block .k { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: var(--40); }
.orb-settings__about-block .v { font-size: 13px; color: var(--80); }
.orb-settings__about-block .v.mono { font-family: var(--f-mono); font-size: 12px; }

@media (max-width: 720px){
  .settings { height: 100dvh; width: 100vw; border-radius: 0; }
  .orb-settings__body { grid-template-columns: 1fr; }
  .orb-settings__rail {
    flex-direction: row;
    border-right: 0;
    border-bottom: 1px solid var(--5);
    overflow-x: auto;
  }
  .settings__tab { flex: 0 0 auto; }
  .orb-settings__footer-rail { display: none; }
  .orb-settings__row { grid-template-columns: 1fr; }
}

/* ── Mode pages: shared widgets ─────────────────────────── */
.orb-artists-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.orb-artist-chip {
  display: grid; grid-template-columns: 48px 1fr;
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-3);
  border: 1px solid var(--5);
  border-radius: var(--r-md);
  background: rgba(0,0,0,0.3);
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.orb-artist-chip:hover { border-color: var(--20); background: rgba(255,255,255,0.025); }
.orb-artist-chip img {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  filter: var(--cover-grey-hover);
  border: 1px solid var(--10);
}
.orb-artist-chip .m .n { font-size: 13px; color: var(--100); font-weight: 300; }
.orb-artist-chip .m .s { font-size: 10px; color: var(--40); margin-top: 2px; letter-spacing: 0; }

.orb-poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.density-airy .orb-poster-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.density-compact .orb-poster-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.orb-poster-tile {
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.orb-poster-tile:hover { transform: translateY(-3px); }
.orb-poster-tile img {
  width: 100%; aspect-ratio: 2/3; object-fit: cover;
  filter: var(--cover-grey);
  border-radius: 2px; border: 1px solid var(--5);
  box-shadow: 0 12px 24px rgba(0,0,0,0.5);
  transition: filter var(--dur-base) var(--ease-out);
}
.orb-poster-tile:hover img { filter: var(--cover-grey-hover); }
.orb-poster-tile.orb-is-done img { filter: grayscale(1) brightness(0.5); }
.orb-poster-tile__meta { padding: 8px 2px; }
.orb-poster-tile__meta .t {
  font-size: 12px; color: var(--80);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3;
}
.orb-poster-tile__meta .m { font-size: 10px; color: var(--40); margin-top: 2px; letter-spacing: 0; }

.orb-games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-4);
}
.density-compact .orb-games-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.game-tile {
  position: relative;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
}
.game-tile:hover { transform: translateY(-3px); }
.game-tile img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  filter: var(--cover-grey);
  border-radius: 2px; border: 1px solid var(--5);
  box-shadow: 0 12px 24px rgba(0,0,0,0.5);
  transition: filter var(--dur-base) var(--ease-out);
}
.game-tile:hover img { filter: var(--cover-grey-hover); }
.game-tile.orb-is-in-play img { box-shadow: 0 12px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(var(--favorit-rgb), 0.5); }
.game-tile.orb-is-done img { filter: grayscale(1) brightness(0.5); }
.game-tile.orb-is-backlog img { filter: var(--cover-grey); }
.game-tile.orb-is-wishlist img { border-style: dashed; filter: grayscale(1) brightness(0.45); }
.orb-game-tile__pill {
  position: absolute; top: 8px; left: 8px;
  font-size: 9px;
  padding: 3px 6px;
  background: rgba(0,0,0,0.85);
  border: 1px solid var(--10);
  border-radius: 2px;
  text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--80);
}
.game-tile.orb-is-in-play .orb-game-tile__pill { color: var(--100); border-color: rgba(var(--favorit-rgb), 0.4); background: rgba(var(--favorit-rgb), 0.08); }
.orb-game-tile__meta { padding: 8px 2px; }
.orb-game-tile__meta .t {
  font-size: 12px; color: var(--80);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.3;
}
.orb-game-tile__meta .m { font-size: 10px; color: var(--40); margin-top: 2px; letter-spacing: 0; }