/* ═══════════════════════════════════════════════════════════════════════════
   TileLab — design system
   Clean, professional, tile-based dashboard. Raleway + a considered green accent.
   Light & dark themes, both first-class. Neutrals carry a faint green bias so they
   read as chosen, not default grey.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* — green accent scale (shared across themes) — */
  --accent:        #22a45d;
  --accent-strong: #178a4c;
  --accent-soft:   #e8f6ee;
  --accent-glow:   rgba(34, 164, 93, .18);

  /* — light theme (default) — */
  --bg:      #f3f6f4;
  --bg-2:    #eef2f0;
  --panel:   #ffffff;
  --panel-2: #fbfcfb;
  --ink:     #171b19;
  --ink-2:   #3d4442;
  --muted:   #737b78;
  --faint:   #a7afab;
  --line:    #e9edea;
  --line-2:  #f1f4f2;
  --shadow:  0 1px 2px rgba(18, 30, 24, .04), 0 8px 26px rgba(18, 30, 24, .06);
  --shadow-hi: 0 2px 6px rgba(18, 30, 24, .06), 0 16px 40px rgba(18, 30, 24, .10);
  --field:   #f4f7f5;

  --radius:  16px;
  --radius-sm: 10px;
  --gap:     16px;
  --fs-label: 11px;

  --good: #22a45d;
  --warn: #e0a52e;
  --bad:  #e05a4e;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:      #040405;
  --bg-2:    #000000;
  --panel:   #0d0e0d;
  --panel-2: #0a0b0a;
  --ink:     #f3f5f4;
  --ink-2:   #c3ccc7;
  --muted:   #7f8a85;
  --faint:   #545d58;
  --line:    rgba(255, 255, 255, .08);
  --line-2:  rgba(255, 255, 255, .045);
  --shadow:  0 1px 2px rgba(0, 0, 0, .55), 0 12px 34px rgba(0, 0, 0, .65);
  --shadow-hi: 0 2px 8px rgba(0, 0, 0, .6), 0 20px 52px rgba(0, 0, 0, .72);
  --field:   #141514;
  --accent-soft: rgba(34, 164, 93, .13);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Raleway', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background .35s ease, color .35s ease;
}
#app { min-height: 100%; }
button { font-family: inherit; cursor: pointer; }
/* styled dropdowns everywhere — never the raw native select */
select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: 14px; color: var(--ink);
  background-color: var(--field);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8a85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 14px;
  border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 34px 11px 13px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
select:hover { border-color: var(--accent); }
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
select option { color: #111; background: #fff; }
::selection { background: var(--accent-glow); }
.num { font-variant-numeric: tabular-nums; }

/* hide scrollbars but keep scroll (wheel/trackpad) */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; }

/* ─────────────────────────── LOGIN ─────────────────────────── */
.tl-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--accent-soft) 0%, transparent 46%),
    var(--panel);
}
.tl-login-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
  animation: rise .6s cubic-bezier(.2, .7, .2, 1) both;
}
.tl-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 30px;
}
.tl-logo-mark {
  width: 42px; height: 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
}
.tl-logo-mark i {
  border-radius: 4px;
  background: var(--accent);
}
.tl-logo-mark i:nth-child(2), .tl-logo-mark i:nth-child(3) { opacity: .42; }
.tl-wordmark {
  font-size: 25px;
  font-weight: 300;
  letter-spacing: .5px;
  color: var(--ink);
}
.tl-wordmark b { font-weight: 700; color: var(--accent); }

.tl-login h1 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .2px;
}
.tl-login p.sub {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 400;
}
.tl-field {
  text-align: left;
  margin-bottom: 14px;
}
.tl-fieldhint { font-style: normal; font-weight: 400; font-size: 11px; color: var(--faint); margin-left: 6px; text-transform: none; letter-spacing: 0; }
.tl-field label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px 2px;
}
.tl-field input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  background: var(--field);
  color: var(--ink);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.tl-field input::placeholder { color: var(--faint); font-weight: 400; }
.tl-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.tl-signin {
  width: 100%;
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 14px;
  transition: background .18s, transform .1s, box-shadow .18s;
  box-shadow: 0 6px 18px var(--accent-glow);
}
.tl-signin:hover { background: var(--accent-strong); }
.tl-signin:active { transform: translateY(1px); }
.tl-signin:disabled { opacity: .6; cursor: default; }
.tl-login-msg {
  min-height: 20px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--bad);
}
.tl-login-foot {
  margin-top: 34px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ─────────────────────────── SHELL ─────────────────────────── */
.tl-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}
.tl-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 16px;
}
.tl-top .brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: .4px;
}
.tl-top .brand b { font-weight: 700; color: var(--accent); }
.tl-brandpage { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.tl-brandpage::before { content: ''; display: inline-block; width: 1px; height: 15px; background: var(--line); margin: 0 10px -2px; vertical-align: middle; }
.tl-top .brand .tl-logo-mark { width: 24px; height: 24px; gap: 2px; }
/* page-jump dots to the right of the logo — one per group */
.tl-pagedots { display: flex; align-items: center; gap: 9px; margin-left: 12px; margin-right: auto; }
.tl-pdot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--muted); background: transparent; padding: 0; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.tl-pdot:hover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.25); }
.tl-pdot.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tl-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-clock {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-right: 6px;
  letter-spacing: .3px;
}
.tl-iconbtn {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 16px;
  transition: border-color .18s, color .18s, background .18s;
}
.tl-iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.tl-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.tl-user .av {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.tl-signout {
  border: 0; background: none;
  color: var(--muted);
  font-size: 12px; font-weight: 600;
  padding: 4px 8px; border-radius: 8px;
}
.tl-signout:hover { color: var(--bad); }
.tl-ver-pill {
  font: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1.5px solid transparent;
  border-radius: 20px;
  padding: 7px 12px;
  transition: border-color .18s, background .18s;
  font-variant-numeric: tabular-nums;
}
.tl-ver-pill:hover { border-color: var(--accent); }

/* ── version modal ── */
.tl-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(10, 16, 13, .42);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}
:root[data-theme="dark"] .tl-overlay { background: rgba(0, 0, 0, .6); }
.tl-overlay.show { opacity: 1; }
.tl-modal {
  width: 100%; max-width: 460px;
  max-height: 82vh;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hi);
  transform: translateY(8px) scale(.99);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1);
}
.tl-overlay.show .tl-modal { transform: none; }
/* Pinned = float the player, let the board behind be used */
.tl-overlay.tl-pinned { background: transparent !important; backdrop-filter: none; pointer-events: none; padding: 0; display: block; }
.tl-overlay.tl-pinned .tl-modal { pointer-events: auto; max-height: none; box-shadow: 0 14px 46px rgba(0, 0, 0, .55); border-color: var(--accent); }
.tl-overlay.tl-pinned .tl-modal .tl-modal-head { cursor: move; }
.pin-btn { background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; margin-right: 6px; white-space: nowrap; }
.pin-btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.pin-float { position: absolute; top: 8px; left: 8px; z-index: 5; }

/* ── 🎞 Media Drives, pinned out of the tile (v3.06) ──
   The video fills the window so resizing the window resizes the picture, which is the point of
   being able to drag it around while it plays. */
.nf-pinmodal { max-width: 900px; }
.nf-pinmodal .tl-modal-body { padding: 0; min-height: 0; display: flex; }
.nf-pinmodal .nfp-video { flex: 1; min-height: 0; display: flex; }
.nf-pinmodal .nfp-video video { width: 100%; height: 100%; min-height: 0; background: #000; display: block; }
.tl-pinned .nf-pinmodal .nfp-video video { height: 100%; }

/* ── 📝 the header Notes panel (v3.06) ──
   Sized for reading and writing rather than the 460px video default. The body must be the only
   thing that scrolls, or the note list pushes the toolbar off the top of a pinned window. */
.np-modal { max-width: 620px; }
.np-modal .tl-modal-body { padding-top: 8px; min-height: 0; overflow: auto; }
.np-modal .np-body { display: flex; flex-direction: column; min-height: 0; }
.np-sub { margin-left: auto; margin-right: 8px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
/* on a phone it is simply a sheet on top of everything — a floating window there is useless */
@media (max-width: 760px) {
  .np-modal { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; }
  .tl-overlay:has(.np-modal) { padding: 0; }
}
.tl-modal-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-2);
}
.tl-modal-title { font-size: 16px; font-weight: 700; }
.tl-modal-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: #fff; background: var(--accent);
  border-radius: 20px; padding: 3px 9px;
  font-variant-numeric: tabular-nums;
}
.tl-modal-x {
  margin-left: auto;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: none; color: var(--muted); font-size: 15px;
  transition: background .15s, color .15s;
}
.tl-modal-x:hover { background: var(--field); color: var(--ink); }
.tl-modal-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 18px 18px; }
/* What's-new modal — use ~half the screen on desktop; two columns of entries */
.ver-modal { max-width: 900px; width: 52vw; }
.ver-modal .tl-modal-body { column-gap: 34px; }
@media (min-width: 900px) { .ver-modal .tl-modal-body { columns: 2; } }
.ver { padding: 16px 0; border-bottom: 1px solid var(--line-2); break-inside: avoid; -webkit-column-break-inside: avoid; }
.ver:first-child { padding-top: 4px; }
.ver:last-child { border-bottom: 0; }
.ver-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.ver-v {
  font-size: 12px; font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px; padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.ver.latest .ver-v { color: #fff; background: var(--accent); }
.ver-ttl { font-size: 14px; font-weight: 700; }
.ver-date { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--faint); }
.ver-changes { margin: 0; padding: 0 0 0 2px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ver-changes li {
  position: relative; padding-left: 18px;
  font-size: 13px; line-height: 1.45; color: var(--ink-2); font-weight: 500;
}
.ver-changes li::before {
  content: ""; position: absolute; left: 3px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
}
.ver-empty { padding: 20px 0; color: var(--faint); font-size: 13px; }

/* ─────────────────────────── TILE STAGE ─────────────────────────── */
.tl-stage {
  flex: 1 1 auto;
  padding: 6px 24px 30px;
  overflow-y: auto;
  min-height: 0;
}
.tl-grid {
  display: grid;
  /* auto-fill columns, each tile capped at a max width so tiles never stretch/warp —
     wider screens get MORE columns, narrower screens fewer (down to 1). */
  /* base unit = a MICRO (half a standard each way); a standard spans 2×2. gap absorbed into spanning tiles
     so 4 micros == 1 standard, 2 smalls == 1 standard, 1 large == 2 standards tall. */
  grid-template-columns: repeat(auto-fill, 157px);
  grid-auto-rows: 204px;
  /* plain row flow (NOT dense) so tiles stay exactly where you drag them — dense packing used to
     yank tiles back to fill gaps, fighting manual arrangement. Order in = order out. */
  grid-auto-flow: row;
  justify-content: center;
  gap: var(--gap);
  width: 100%;
  margin: 0 auto;
}
.tl-grid > .tile { min-width: 0; }
/* Auto-arrange: dense packing fills gaps automatically (manual free-form positions are ignored while on) */
.tl-grid.auto-arrange { grid-auto-flow: row dense; }
.tile.sz-micro    { grid-column: span 1; grid-row: span 1; }
.tile.sz-small    { grid-column: span 2; grid-row: span 1; }
.tile.sz-standard { grid-column: span 2; grid-row: span 2; }
.tile.sz-large    { grid-column: span 2; grid-row: span 4; }   /* 200% portrait — 2 wide × 4 tall */
.tile.sz-largeland { grid-column: span 4; grid-row: span 2; }  /* 200% landscape — 4 wide × 2 tall (same area, rotated) */
.tile.sz-xlarge   { grid-column: span 8; grid-row: span 2; }   /* 400% — 4 standards wide */
.tile.sz-super    { grid-column: span 8; grid-row: span 4; }   /* 800% — 4 wide × 2 tall of a large */
.tile.sz-micro { padding: 10px 11px; }
.tile.sz-micro .tile-head { margin-bottom: 7px; }
.tile.sz-micro .tile-title { font-size: 9.5px; }
@media (max-width: 700px) {
  .tl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 176px; }
  /* mobile tile sizing is defined once in the (max-width:720px) block below so it covers the whole phone range */
}

/* ─────────────────────────── TILE ─────────────────────────── */
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), box-shadow .22s, border-color .22s;
  animation: rise .5s cubic-bezier(.2, .7, .2, 1) both;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-hi); border-color: var(--line); }
.tile-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.tile-ic {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  flex: 0 0 auto;
}
.tile-title {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile-sub {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: .02em;
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.tile-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.tile-loading, .tile-error {
  flex: 1 1 auto;
  display: grid; place-items: center;
  color: var(--faint);
  font-size: 12.5px;
  font-weight: 500;
}
.tile-error { color: var(--bad); opacity: .8; }
.tl-spin {
  width: 20px; height: 20px;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* — Weather tile (current conditions + the week ahead) — */
.wx { flex: 1 1 auto; display: flex; flex-direction: column; }
.wx-main { display: flex; align-items: flex-start; gap: 12px; }
.wx-emoji { font-size: 46px; line-height: 1; margin-top: -2px; }
.wx-now { min-width: 0; }
.wx-temp { font-size: 50px; font-weight: 200; line-height: .95; letter-spacing: -1px; }
.wx-temp sup { font-size: 22px; font-weight: 300; top: -1.1em; margin-left: 1px; }
.wx-desc { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.wx-feels { font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px; white-space: nowrap; }
.wx-aqi { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.wx-aqi-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.wx-fc { margin-top: auto; padding-top: 14px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
/* full-frame condition video behind the weather tile */
.tile.wx-video { position: relative; background: linear-gradient(160deg, #2a3a4a, #141d28); }
.wx-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wx-video-fail .wx-bg { display: none; }
.wx-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 30%, rgba(0,0,0,.16) 56%, rgba(0,0,0,.62) 100%); }
.tile.wx-video .tile-head, .tile.wx-video .tile-body { position: relative; z-index: 2; }
.tile.wx-video .tile-title { color: rgba(255,255,255,.86); }
.tile.wx-video .tile-sub { color: rgba(255,255,255,.72); }
.tile.wx-video .tile-ic { background: rgba(255,255,255,.22); color: #fff; }
.tile.wx-video .wx-emoji { filter: drop-shadow(0 1px 3px rgba(0,0,0,.45)); }
.tile.wx-video .wx-temp, .tile.wx-video .wx-desc { color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,.45); }
.tile.wx-video .wx-feels { color: rgba(255,255,255,.88); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.tile.wx-video .wx-aqi { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.tile.wx-video .wx-fc-dow { color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.tile.wx-video .wx-fc-today .wx-fc-dow { color: #7ef0ad; }
.tile.wx-video .wx-fc-ic { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.tile.wx-video .wx-fc-hi { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.tile.wx-video .wx-fc-lo { color: rgba(255,255,255,.72); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.wx-fc-day { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.wx-fc-dow { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.wx-fc-today .wx-fc-dow { color: var(--accent); }
.wx-fc-ic { font-size: 19px; line-height: 1; }
.wx-fc-hi { font-size: 13px; font-weight: 700; }
.wx-fc-lo { font-size: 11px; font-weight: 600; color: var(--faint); }

/* — Air Quality tile (wide 2×1 → ring on the left, readout filling the space beside it) — */
.aq { flex: 1 1 auto; display: flex; flex-direction: row; align-items: center; gap: 18px; }
.aq-ring {
  --p: 0;
  width: clamp(72px, 42%, 100px); aspect-ratio: 1; flex: 0 0 auto;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--aqc) calc(var(--p) * 1%), var(--line) 0);
  position: relative;
}
.aq-ring::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--panel); }
.aq-val { position: relative; z-index: 1; text-align: center; }
.aq-val .n { font-size: 27px; font-weight: 700; line-height: 1; }
.aq-val .l { font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.aq-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.aq-label { font-size: 19px; font-weight: 800; letter-spacing: -.2px; line-height: 1; }
.aq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
.aq-p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-2); padding-bottom: 5px; }
.aq-pk { font-size: 11px; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.aq-pv { font-size: 13.5px; font-weight: 700; }

/* — Fuel tile (price boxes on top, nearest-station list with proximity below) — */
.fuel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.fl-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; flex: 0 0 auto; }
.fl-box { background: var(--accent-soft); border: 1px solid rgba(34,164,93,.18); border-radius: 11px; padding: 8px 9px; }
.fl-type { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
.fl-price { font-size: 18px; font-weight: 800; letter-spacing: -.7px; margin-top: 2px; }
.fl-price small { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.fl-listhead { flex: 0 0 auto; margin: 13px 0 4px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.fl-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* neat aligned table: name | price | distance */
.fl-st { display: grid; grid-template-columns: 1fr 62px 54px; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.fl-st:last-child { border-bottom: 0; }
.fl-st-tx { min-width: 0; }
.fl-st-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-st-loc { font-size: 10.5px; color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-st-price { font-size: 14px; font-weight: 800; color: var(--accent); letter-spacing: -.3px; text-align: right; font-variant-numeric: tabular-nums; }
.fl-st-price small { font-size: 9px; font-weight: 700; color: var(--muted); }
.fl-st-dist { text-align: right; color: var(--muted); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fl-st-dist b { color: var(--ink-2); font-size: 13.5px; font-weight: 800; }
.fl-st-dist small { margin-left: 1px; }
.fl-box-pref { background: var(--accent); border-color: var(--accent); }
.fl-box-pref .fl-type { color: rgba(255, 255, 255, .85); }
.fl-box-pref .fl-price { color: #fff; }
.fl-box-pref .fl-price small { color: rgba(255, 255, 255, .72); }

/* — ASX tile (5×2 grid of stock cards with sparklines) — */
.asx-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; }
.stk { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 5px 5px 0; border-radius: 9px; background: var(--field); border: 1px solid var(--line-2); }
.stk-top { display: flex; align-items: center; justify-content: space-between; gap: 3px; }
.stk-sym { font-size: 10px; font-weight: 800; letter-spacing: -.2px; }
.stk-arw { font-size: 8.5px; line-height: 1; flex: 0 0 auto; animation: stkbob 1.7s ease-in-out infinite; }
.up .stk-arw { color: var(--good); }
.down .stk-arw { color: var(--bad); }
.flat .stk-arw { color: var(--muted); animation: none; }
.down .stk-arw { animation-name: stkbobdn; }
.stk-price { font-size: 11.5px; font-weight: 700; margin-top: 1px; letter-spacing: -.4px; white-space: nowrap; }
.stk-chg { font-size: 9px; font-weight: 700; line-height: 1.25; }
.up .stk-chg { color: var(--good); }
.down .stk-chg { color: var(--bad); }
.flat .stk-chg { color: var(--muted); }
.stk-spark { margin: auto -5px 0; height: 17px; }
.spark-svg { width: 100%; height: 100%; display: block; }
@keyframes stkbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes stkbobdn { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }

/* — News tile — */
.news { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.news-item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
  text-decoration: none; color: inherit;
}
.news-item:last-child { border-bottom: 0; }
.news-thumb {
  width: 52px; height: 40px; flex: 0 0 auto;
  border-radius: 8px; object-fit: cover;
  background: var(--bg-2);
}
.news-tx { min-width: 0; }
.news-ttl { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-meta { font-size: 10.5px; color: var(--faint); font-weight: 600; margin-top: 3px; letter-spacing: .02em; }
.news-item:hover .news-ttl { color: var(--accent); }

/* — Disaster tile — */
.dis { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.dis-item { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-2); width: 100%; border-left: 0; border-right: 0; border-top: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.dis-item:hover .dis-name { color: var(--accent); }
.dis-item:last-child { border-bottom: 0; }
.dis-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.dis-tx { min-width: 0; flex: 1 1 auto; }
.dis-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dis-loc { font-size: 10.5px; color: var(--faint); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dis-km { color: var(--muted); }
.dis-km.near { color: #e5484d; }
.dis-near { background: linear-gradient(90deg, rgba(229,72,77,.12), transparent); border-radius: 8px; }
.dis-badge { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; flex: 0 0 auto; }

/* — Calendar tile (two-pane slider: month ⇆ day) — */
.cal { flex: 1 1 auto; position: relative; overflow: hidden; min-height: 0; }
.cal-slider { display: flex; width: 200%; height: 100%; transition: transform .34s cubic-bezier(.2, .7, .2, 1); }
.cal.showday .cal-slider { transform: translateX(-50%); }
.cal-pane { width: 50%; height: 100%; display: flex; flex-direction: column; min-height: 0; }
.cal-daypane { padding-left: 2px; }
/* v2.12 — month arrows, a year dropdown, Today and jump-to-next-event all live in the head row */
.cal-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.cal-headsp { flex: 1 1 auto; }
.cal-nav, .cal-today, .cal-next { border: 1px solid var(--line); background: var(--field); color: var(--ink-2);
  font: inherit; border-radius: 8px; cursor: pointer; padding: 2px 8px; line-height: 1.5; }
.cal-nav { font-size: 15px; font-weight: 700; padding: 0 7px; }
.cal-today { font-size: 10.5px; font-weight: 700; }
.cal-next { font-size: 12px; font-weight: 700; }
.cal-nav:hover, .cal-today:hover, .cal-next:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cal-next:disabled { opacity: .4; cursor: default; }
.cal-yearwrap { position: relative; display: inline-flex; }
/* the year LOOKS like text but is a real select, so it works by touch and by keyboard */
.cal-yearsel { -webkit-appearance: none; appearance: none; border: 1px solid transparent; background: transparent;
  color: var(--faint); font: inherit; font-size: 12px; font-weight: 600; padding: 1px 4px; border-radius: 6px; cursor: pointer; }
.cal-yearsel:hover { border-color: var(--line); color: var(--ink-2); }
.cal-cell.cal-ping { animation: calPing .9s ease-out; }
@keyframes calPing { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 60% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* the smaller sizes keep the arrows and lose the words */
.sz-micro .cal-today, .sz-small .cal-today { display: none; }
.cal-month-name { font-size: 15px; font-weight: 700; }
.cal-year { font-size: 12px; font-weight: 600; color: var(--faint); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 2px; margin: auto 0; width: 100%; }
.cal-month { cursor: ns-resize; }
.cal-dow { font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); text-align: center; padding-bottom: 3px; }
.cal-cell { aspect-ratio: 1; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--ink-2); border-radius: 7px; position: relative; cursor: pointer; transition: background .14s; }
.cal-cell[data-d]:hover { background: var(--field); }
.cal-cell.pad { color: var(--faint); opacity: .4; cursor: default; }
.cal-cell.pad:hover { background: none; }
.cal-cell.today { background: var(--accent); color: #fff; font-weight: 700; }
.cal-cell.sel { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell.today.sel { box-shadow: none; }
.cal-cell.ev::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal-cell.today.ev::after { background: #fff; }
.cal-next { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-2); display: flex; gap: 9px; align-items: center; }
.cal-next .cd { text-align: center; flex: 0 0 auto; }
.cal-next .cd .d { font-size: 18px; font-weight: 700; line-height: 1; color: var(--accent); }
.cal-next .cd .m { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cal-next .ct { min-width: 0; }
.cal-next .ct .s { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-next .ct .w { font-size: 10.5px; color: var(--faint); font-weight: 600; }
.cal-empty { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 11.5px; color: var(--faint); font-weight: 500; }
/* day pane */
.cal-day-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex: 0 0 auto; }
.cal-back { width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--line); background: var(--panel); border-radius: 8px; color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s; }
.cal-back:hover { border-color: var(--accent); color: var(--accent); }
.cal-day-title .dt-dow { font-size: 15px; font-weight: 700; line-height: 1.15; }
.cal-day-title .dt-date { font-size: 11.5px; font-weight: 600; color: var(--faint); }
.cal-day-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.cal-day-empty { color: var(--faint); font-size: 12.5px; font-weight: 500; padding: 8px 2px; }
.ce { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; background: var(--field); border: 1px solid var(--line-2); }
.ce-time { font-size: 10.5px; font-weight: 700; color: var(--accent); flex: 0 0 auto; width: 50px; padding-top: 1px; }
.ce-tx { min-width: 0; flex: 1 1 auto; }
.ce-ttl { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ce-loc { font-size: 10.5px; color: var(--muted); font-weight: 500; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ce-del { flex: 0 0 auto; border: 0; background: none; color: var(--faint); font-size: 12px; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.ce-del:hover { color: var(--bad); }
.cal-create { flex: 0 0 auto; margin-top: 10px; width: 100%; font: inherit; font-size: 13px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border: 1px dashed rgba(34, 164, 93, .5); border-radius: 10px; padding: 10px; cursor: pointer; transition: background .15s; }
.cal-create:hover { background: rgba(34, 164, 93, .16); }
/* event modal */
.ev-modal { max-width: 400px; }
.ev-row { display: flex; gap: 12px; }
.ev-row .tl-field { flex: 1 1 0; }
.ev-form .tl-field { margin-bottom: 14px; }
.ev-form label .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--faint); }
.ev-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 2px; }
.ev-cancel { font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 11px 16px; border-radius: 10px; cursor: pointer; }
.ev-cancel:hover { color: var(--ink); background: var(--field); }
.ev-save { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--accent); border: 0; padding: 11px 20px; border-radius: 10px; cursor: pointer; box-shadow: 0 6px 16px var(--accent-glow); }
.ev-save:hover { background: var(--accent-strong); }
.ev-save:disabled { opacity: .6; }
.ev-msg { min-height: 16px; font-size: 12.5px; font-weight: 500; color: var(--bad); margin-bottom: 4px; }

/* ── in-app article reader ── */
.art-modal { max-width: 640px; max-height: 90vh; padding: 0; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.art-hero { flex: 0 0 auto; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-2); overflow: hidden; }
.art-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(10, 16, 13, .5); color: #fff; font-size: 14px; cursor: pointer;
  backdrop-filter: blur(6px); transition: background .15s;
}
.art-x:hover { background: rgba(10, 16, 13, .82); }
.art-scroll { flex: 1 1 auto; overflow-y: auto; padding: 24px 30px 28px; }
.art-kicker { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.art-title { margin: 0 0 18px; font-size: 26px; font-weight: 700; line-height: 1.22; letter-spacing: -.4px; text-wrap: balance; }
.art-body p { margin: 0 0 15px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 64ch; }
.art-body p:last-child { margin-bottom: 0; }
.art-fail { color: var(--muted); }
.art-fail a, .art-orig { color: var(--accent); font-weight: 600; text-decoration: none; }
.art-fail a:hover, .art-orig:hover { text-decoration: underline; }
.art-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: 14px; }
.art-orig { font-size: 13.5px; }
.art-readrow { margin: 2px 0 14px; }
.art-read { background: var(--accent); color: #fff; border: 0; border-radius: 9px; font: inherit; font-weight: 600; font-size: 13px; padding: 8px 14px; cursor: pointer; }
.art-read:hover { filter: brightness(1.08); }
.art-read.on { background: #d13438; }
.news-read { flex: 0 0 auto; align-self: center; background: none; border: 0; cursor: pointer; font-size: 15px; opacity: .5; padding: 4px 6px; }
.news-item:hover .news-read { opacity: 1; }
.news-read:hover { transform: scale(1.15); }
.gd-noaudio { position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,.62); color: #fff; border-radius: 5px; font-size: 12px; padding: 1px 5px; z-index: 2; }
.gd-row-na .gd-rt { opacity: .7; }
.gdf-pin { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); flex: 0 0 auto; cursor: pointer; white-space: nowrap; }
.gdf-pin input { margin: 0; }
.gd-pin { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; flex: 1 1 auto; padding: 24px; text-align: center; min-height: 160px; }
.gd-pin-ic { font-size: 40px; }
.gd-pin-t { font-size: 14px; font-weight: 700; }
.gd-pin-row { display: flex; gap: 8px; }
.gd-pin-in { background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; color: var(--ink); font: inherit; font-size: 15px; letter-spacing: 3px; text-align: center; width: 140px; }
.gd-pin-go { background: var(--accent); color: #fff; border: 0; border-radius: 9px; font: inherit; font-weight: 600; padding: 9px 16px; cursor: pointer; }
.gd-pin-msg { font-size: 12px; color: #e5484d; min-height: 14px; }
.sec-locked { font-size: 14px; color: var(--muted); padding: 8px 0; }

/* Iris-set timers strip in the Clock & Timers tile */
.clk-itimers:not(:empty) { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 2px; }
.clk-it { display: flex; align-items: center; gap: 8px; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 5px 9px; }
.clk-it-l { flex: 1 1 auto; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clk-it-t { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }
.clk-it-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; padding: 2px 4px; }
.clk-it-x:hover { color: var(--bad, #d13438); }

/* ── per-tile icon menu ── */
.tile-head { position: relative; }
.tile-ic { cursor: pointer; border: 0; padding: 0; }
.tile-menu { position: absolute; top: 32px; left: 0; z-index: 40; min-width: 158px; padding: 5px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-hi); display: none; }
.tile-menu.open { display: block; }
.tmi { display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: none; border: 0; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.tmi:hover { background: var(--field); color: var(--ink); }
.tmi-size { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px 9px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.tmi-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.tmi-sel { font-weight: 600; padding: 6px 26px 6px 9px; border-radius: 7px; background-size: 11px; }
/* the menu must paint above the tile's own body (esp. the weather video) and above neighbours */
.tile-head { z-index: 5; }
.tile.wx-video .tile-head { z-index: 5; }
.tile-menu { z-index: 120; max-height: 72vh; overflow-y: auto; }   /* a long menu on a tiny tile still fits the screen */
/* ⚠ overflow:visible is the fix, not the z-index. .tile is overflow:hidden, which CLIPS the absolutely
   positioned menu no matter how high its z-index — so on a Micro [25%] tile everything below "Settings"
   (Hide, About) was cut off and unreachable. It looked like those items didn't exist for that tile.
   Only relaxed while the menu is actually open. */
.tile:has(.tile-menu.open) { z-index: 60; overflow: visible; }

/* ── top-right user menu ── */
.tl-usermenu { position: relative; }
.tl-user { display: flex; align-items: center; gap: 8px; padding: 6px 13px 6px 6px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--panel); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.tl-user:hover { border-color: var(--accent); }
.tl-caret { font-size: 9px; color: var(--muted); }
.tl-umenu { position: absolute; top: 46px; right: 0; z-index: 130; min-width: 168px; padding: 5px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-hi); display: none; }
.tl-umenu.open { display: block; }
.umi-theme { display: none; }   /* only shown inside the user menu on mobile (desktop has the standalone ☾ button) */
.umi { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2); background: none; border: 0; padding: 9px 11px; border-radius: 8px; cursor: pointer; }
.umi:hover { background: var(--field); color: var(--ink); }

/* ── settings modals ── */
.set-modal { max-width: 440px; }
.master-modal { max-width: 760px; width: 92vw; }
/* left-nav settings layout */
.ms-layout { display: flex; align-items: stretch; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.ms-nav { flex: 0 0 178px; display: flex; flex-direction: column; gap: 3px; padding: 14px 12px 14px 16px; border-right: 1px solid var(--line-2); }
.ms-navi { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--ink-2); background: none; border: 0; border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: background .14s, color .14s; }
.ms-navi:hover { background: var(--field); color: var(--ink); }
.ms-navi.on { background: var(--accent-soft, var(--field)); color: var(--accent); font-weight: 750; }
.ms-navi-ic { font-size: 15px; width: 18px; text-align: center; }
.ms-pane { flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 20px; min-width: 0; }
/* tile groups */
.ms-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.ms-note b { color: var(--ink-2); font-weight: 700; }
.ms-groups { display: flex; flex-direction: column; gap: 10px; }
.ms-group { border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; background: var(--field); transition: border-color .12s, box-shadow .12s; }
.ms-group.ms-dragging { opacity: .5; }
.ms-group.ms-drop { border-color: var(--accent); box-shadow: 0 0 0 2px var(--glow); }
.ms-group-top { display: flex; align-items: center; gap: 8px; }
.ms-ghandle { cursor: grab; color: var(--faint); font-size: 15px; user-select: none; padding: 0 2px; }
.ms-ghandle:active { cursor: grabbing; }
.ms-gname { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 10px; border-radius: 9px; background: var(--panel); border: 1.5px solid var(--line); color: var(--ink); }
.ms-gname:focus { outline: none; border-color: var(--accent); }
.ms-gcount { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ms-grm { flex: 0 0 auto; border: 0; background: none; color: var(--faint); font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.ms-grm:hover { color: var(--bad); }
.ms-gtiles { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.ms-gtile { font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; cursor: grab; }
.ms-gtile:hover { border-color: var(--accent); }
.ms-gtile:active { cursor: grabbing; }
.ms-gtile.ms-dragging { opacity: .4; }
.ms-gempty { font-size: 11.5px; color: var(--faint); font-style: italic; }
/* Auto-arrange toggle */
.aa-toggle { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; margin-bottom: 14px; background: var(--field); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.aa-toggle input { accent-color: var(--accent); width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }
.aa-txt { display: flex; flex-direction: column; gap: 3px; }
.aa-txt b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.aa-txt i { font-size: 11.5px; font-style: normal; color: var(--muted); line-height: 1.45; }
.aa-txt i b { font-size: inherit; color: var(--ink-2); }
/* Hidden-tiles drop zone */
.ms-hidden { margin-top: 12px; border-style: dashed; background: transparent; }
.ms-gname-static { flex: 1 1 auto; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.ms-addgroup { margin-top: 10px; }
.ms-assign { display: flex; flex-direction: column; gap: 6px; }
.ms-arow { display: flex; align-items: center; gap: 10px; }
.ms-aname { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-asel { flex: 0 0 168px; font-size: 12.5px; padding: 8px 30px 8px 11px; }
/* page navigation (tile groups → pages) */
.tl-pagearrow { position: fixed; top: 50%; transform: translateY(-50%); z-index: 40; width: 42px; height: 108px; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 400; color: var(--ink); background: var(--panel); border: 1px solid var(--line); cursor: pointer; opacity: 0; transition: opacity .18s, background .14s; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.tl-pa-left { left: 0; border-left: 0; border-radius: 0 16px 16px 0; padding-right: 3px; }
.tl-pa-right { right: 0; border-right: 0; border-radius: 16px 0 0 16px; padding-left: 3px; }
.tl-pagearrow.edge-near { opacity: 1; }
.tl-pagearrow:hover { opacity: 1; background: var(--accent); color: #fff; border-color: var(--accent); }
/* On a phone the edge arrows are useless (no hover) but still sit fixed at the screen edges and
   swallow taps meant for tiles near the edge — so hide them on the mobile layout (≤720px, the same
   breakpoint isMobileLayout/devClass use). The page dots up top + swipe are the mobile navigation. */
@media (max-width: 720px) { .tl-pagearrow { display: none !important; } }
.tl-pagelabel { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; box-shadow: 0 4px 14px rgba(0,0,0,.1); pointer-events: none; }
.tl-emptypage { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 13.5px; padding: 60px 20px; }
.set-acts { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 8px; }
.set-acts .ms-msg { margin-right: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.ms-sec { margin-bottom: 22px; }
.ms-h { font-size: 15px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 13px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.ms-sub { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.ms-detect { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 6px; }
.ms-detected { font-size: 12px; color: var(--muted); font-weight: 500; }
.ms-places { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ms-place { display: flex; gap: 8px; align-items: center; }
.ms-place input { font: inherit; font-size: 13px; padding: 9px 11px; border-radius: 9px; background: var(--field); border: 1.5px solid var(--line); color: var(--ink); }
.ms-place input:focus { outline: none; border-color: var(--accent); }
.ms-pl { flex: 0 0 106px; min-width: 0; }
.ms-pa { flex: 1 1 auto; min-width: 0; }
.ms-prm { flex: 0 0 auto; border: 0; background: none; color: var(--faint); font-size: 13px; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.ms-prm:hover { color: var(--bad); }
.ms-api { margin-bottom: 15px; }
.ms-api-h { font-size: 13px; font-weight: 700; margin-bottom: 9px; }

/* ── Users pane ── */
.usr-card { background: var(--field); border: 1.5px solid var(--line); border-radius: 12px; padding: 15px 16px; }
.usr-cardh { font-size: 14px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 9px; }
.usr-role { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: var(--line-2); color: var(--muted); }
.usr-role-admin { background: var(--accent-glow); color: var(--accent); }
.usr-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.usr-row .uf-msg, .usr-row .ms-msg { margin-right: auto; font-size: 12px; color: var(--muted); }
.usr-list { display: flex; flex-direction: column; gap: 8px; }
.usr-row2 { display: flex; align-items: center; gap: 10px; background: var(--field); border: 1.5px solid var(--line); border-radius: 11px; padding: 10px 12px; }
.usr-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.usr-meta b { font-size: 13.5px; font-weight: 700; }
.usr-meta i { font-size: 11.5px; font-style: normal; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-acts { display: flex; gap: 4px; flex: 0 0 auto; }
.usr-acts button { border: 0; background: var(--line-2); color: var(--ink-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.usr-acts button:hover { background: var(--accent); color: #fff; }
.usr-acts .usr-del:hover { background: var(--bad); }
/* user modal */
.usr-modal { width: 420px; max-width: 94vw; }
.usr-mbody { padding: 16px 18px 18px; }
.usr-mbody .tl-field { margin-bottom: 13px; }
.usr-apps-modal { width: 480px; }
.uac-all { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 10px 12px; background: var(--field); border: 1.5px solid var(--line); border-radius: 10px; margin-bottom: 12px; cursor: pointer; }
.uac-all i { color: var(--muted); font-style: normal; font-size: 11.5px; }
.uac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; max-height: 46vh; overflow: auto; margin-bottom: 14px; }
.uac-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 4px; cursor: pointer; overflow: hidden; }
.uac-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uac-item input, .uac-all input { accent-color: var(--accent); width: 15px; height: 15px; flex: 0 0 auto; }

/* ── Tile finder (search palette) ── */
.finder-modal { width: 480px; max-width: 94vw; padding: 0; overflow: hidden; }
.finder-box { display: flex; flex-direction: column; max-height: min(70vh, 560px); }
.finder-inwrap { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.finder-mag { font-size: 15px; opacity: .7; flex: 0 0 auto; }
.finder-in { flex: 1 1 auto; font: inherit; font-size: 15px; border: 0; background: transparent; color: var(--ink); outline: none; min-width: 0; }
.finder-in::placeholder { color: var(--faint); }
.finder-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.finder-row { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; background: none; color: var(--ink); text-align: left; padding: 9px 11px; border-radius: 9px; cursor: pointer; font: inherit; }
.finder-row:hover, .finder-row.on { background: var(--field); }
.finder-row.on { box-shadow: inset 0 0 0 1.5px var(--accent); }
.finder-ic { font-size: 16px; width: 22px; text-align: center; flex: 0 0 auto; }
.finder-nm { font-size: 14px; font-weight: 600; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.finder-grp { font-size: 10.5px; font-weight: 600; color: var(--muted); background: var(--line-2); padding: 2px 8px; border-radius: 999px; flex: 0 0 auto; }
.finder-empty { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 13px; }

/* ── bin night size variants ── */
.bn-text { display: flex; flex-direction: column; align-items: center; }
.bn.bn-small, .bn.bn-micro { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.bn.bn-small .bn-text, .bn.bn-micro .bn-text { align-items: flex-start; text-align: left; }
.bn.bn-small .bn-when { font-size: 22px; }
.bn.bn-small .bn-icons, .bn.bn-micro .bn-icons { margin-top: 0; gap: 3px; flex-wrap: nowrap; }
.bn.bn-small .bn-icon img { height: 54px; }
.bn.bn-micro .bn-when { font-size: 15px; }
.bn.bn-micro .bn-sub { font-size: 10px; }
.bn.bn-micro .bn-icon img { height: 34px; }

/* ── Crypto grid (reuses .stk cards) ── */
.cx-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 5px; }

/* ── Word of the Day ── */
.wd-stage { position: relative; height: 100%; }
.wd-arw { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 28px; height: 46px; display: grid; place-items: center; font-size: 22px; border: 0; border-radius: 9px; background: var(--field); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .16s, background .14s; }
.wd-prev { left: -6px; } .wd-next { right: -6px; }
.wd-stage:hover .wd-arw { opacity: 1; }
.wd-arw:hover { background: var(--accent); color: #fff; }
.wd { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 2px; padding: 2px 4px; overflow-y: auto; }
.wd-word { font-size: 27px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; text-transform: capitalize; display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.wd-word .wd-phon { font-size: 13px; }
.wd-body { margin-top: 8px; display: flex; flex-direction: column; }
.wd-phon { font-size: 14px; color: var(--muted); font-weight: 500; font-family: ui-monospace, monospace; }
.wd-pos { margin-top: 2px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); font-style: italic; }
.wd-def { margin-top: 6px; font-size: 14.5px; line-height: 1.45; color: var(--ink); font-weight: 500; }
.wd-ex { margin-top: 9px; font-size: 13px; line-height: 1.45; color: var(--muted); font-style: italic; border-left: 2px solid var(--line); padding-left: 10px; }

/* ── Bin Night ── */
.bn { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.bn-when { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.bn-when.bn-soon { color: var(--accent); }
.bn-sub { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 3px; }
.bn-icons { display: flex; gap: 18px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.bn-icon { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.bn-icon img { height: 92px; width: auto; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }
.bn-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var(--muted); }

/* ── NRL ── */
.nrl-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
/* v2.10 — a game is now a COLUMN: the two team rows, then a meta line with kick-off, ground and the
   favourite. The recap speaker sits top-right so it does not push the meta line around. */
.nrl-game { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 9px 11px; border-radius: 11px; background: var(--field); border: 1px solid var(--line-2); cursor: pointer; transition: border-color .15s; }
.nrl-odd { flex: 0 0 auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); background: var(--panel); border: 1px solid var(--line-2); border-radius: 6px; padding: 1px 5px; }
.nrl-r.fav .nrl-odd { color: var(--accent); border-color: var(--accent); }
.nrl-r.fav .nrl-tn { color: var(--ink); font-weight: 800; }
.nrl-pos { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.nrl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 5px; border-top: 1px solid var(--line-2); }
.nrl-when { font-size: 10.5px; font-weight: 700; color: var(--ink-2); }
.nrl-ground { font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrl-favtag { margin-left: auto; font-size: 9.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.nrl-game .nrl-recap { position: absolute; top: 6px; right: 8px; }
/* at the smaller sizes the ground name is the first thing to go */
.sz-micro .nrl-ground, .sz-small .nrl-ground, .sz-micro .nrl-pos, .sz-small .nrl-pos { display: none; }
.sz-micro .nrl-favtag, .sz-small .nrl-favtag { display: none; }
.nrl-game:hover { border-color: var(--accent); }
.nrl-rows { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.nrl-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nrl-tn { flex: 1 1 auto; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nrl-crest { width: 22px; height: 22px; flex: 0 0 auto; object-fit: contain; }
.nrl-crest-abbr { display: inline-grid; place-items: center; font-size: 8.5px; font-weight: 800; color: var(--muted); background: var(--field); border: 1px solid var(--line-2); border-radius: 5px; }
.nrl-dteam { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nrl-dteam .nrl-crest { width: 44px; height: 44px; }
.nrl-recap { flex: 0 0 auto; cursor: pointer; font-size: 15px; opacity: .5; padding: 2px 4px; }
.nrl-game:hover .nrl-recap { opacity: 1; }
.nrl-recap:hover { transform: scale(1.15); }
.nrl-recaprow { text-align: center; margin: 4px 0 12px; }
.nrl-recapbtn { background: var(--accent); color: #fff; border: 0; border-radius: 9px; font: inherit; font-weight: 600; font-size: 13px; padding: 8px 16px; cursor: pointer; }
.nrl-recapbtn:disabled { opacity: .6; cursor: default; }
.nrl-sc { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.nrl-sc.win { color: var(--ink); }
.nrl-badge { flex: 0 0 auto; }
.nrl-live { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: #fff; background: #e05a4e; border-radius: 5px; padding: 3px 6px; }
.nrl-ft { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; color: var(--muted); background: var(--line); border-radius: 5px; padding: 3px 6px; }
.nrl-vs { font-size: 10px; font-weight: 600; color: var(--faint); }
.nrl-detail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.nrl-back { align-self: flex-start; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 4px 8px; }
.nrl-back:hover { color: var(--accent); }
.nrl-dtop { display: flex; align-items: center; gap: 10px; }
.nrl-dteam { flex: 1 1 0; text-align: center; }
.nrl-dn { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.nrl-dsc { font-size: 30px; font-weight: 800; letter-spacing: -1px; }
.nrl-dmid { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.nrl-dvenue { text-align: center; font-size: 11px; color: var(--muted); font-weight: 500; margin: 6px 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.nrl-timeline { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.nrl-nostat { color: var(--faint); font-size: 12.5px; font-weight: 500; padding: 10px 2px; }
/* v1.22 — ladder button, team lists, stats */
.nrl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.nrl-round { display: flex; align-items: center; gap: 6px; }
.nrl-rnav { background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 15px; line-height: 1; width: 26px; height: 26px; cursor: pointer; }
.nrl-rnav:hover { border-color: var(--accent); color: var(--accent); }
.nrl-rname { font-size: 12px; font-weight: 600; min-width: 70px; text-align: center; }
.nrl-gbody { max-height: 78vh; overflow-y: auto; }
.nrl-ladbtn { background: var(--field); border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; cursor: pointer; }
.nrl-ladbtn:hover { border-color: var(--accent); color: var(--accent); }
.nrl-tabs { display: flex; gap: 5px; margin: 10px 0 8px; }
.nrl-tab { flex: 1 1 0; background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font: inherit; font-size: 11.5px; padding: 6px 4px; cursor: pointer; white-space: nowrap; }
.nrl-tab.on { background: rgba(63,185,80,.14); border-color: #3fb950; color: #3fb950; font-weight: 700; }
.nrl-dmid { font-size: 11px; color: var(--muted); text-align: center; }
/* teams */
.nrl-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nrl-tch { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; margin-bottom: 6px; }
.nrl-tcbadge { width: 20px; height: 20px; object-fit: contain; }
.nrl-plgrid { display: flex; flex-direction: column; gap: 3px; }
.nrl-pl { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.nrl-pl.bench { opacity: .72; }
.nrl-plph { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #1c1d20 center/cover no-repeat; position: relative; }
.nrl-plnum { position: absolute; bottom: -2px; right: -3px; font-size: 9px; font-weight: 800; background: var(--bg); border-radius: 6px; padding: 0 3px; color: var(--ink); }
.nrl-plnm { flex: 1 1 auto; min-width: 0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrl-cap { color: #e5a00d; font-size: 10px; }
.nrl-plpos { font-size: 10px; color: var(--muted); white-space: nowrap; }
.nrl-plsub { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 8px 0 3px; }
.nrl-coach { font-size: 11px; color: var(--muted); margin-top: 8px; }
/* stats */
.nrl-seclab { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.nrl-perf { margin-bottom: 9px; }
.nrl-perf > div { font-size: 11.5px; }
.nrl-perfl { text-align: left; } .nrl-perfr { text-align: right; } .nrl-perfm { text-align: center; color: var(--muted); font-size: 10.5px; }
.nrl-perf { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px; align-items: baseline; }
.nrl-perfbar { grid-column: 1 / -1; display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--line); margin-top: 3px; }
.nrl-perfbar .h { background: #3fb950; } .nrl-perfbar .a { background: #56cbfd; }
.nrl-metagrid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: 12px; }
.nrl-tries > div { font-size: 11.5px; padding: 2px 0; }
/* ladder modal */
.nrl-ladbody { max-height: 74vh; overflow-y: auto; }
.nrl-lad { font-size: 12px; }
.nrl-lrow { display: grid; grid-template-columns: 34px 1fr 26px 26px 26px 26px 44px 34px 46px; align-items: center; gap: 2px; padding: 5px 4px; border-bottom: 1px solid var(--line); }
.nrl-lhead { color: var(--muted); font-size: 10.5px; text-transform: uppercase; position: sticky; top: 0; background: var(--card, #16181c); }
.nrl-lrow.top8 { background: rgba(63,185,80,.05); }
.nrl-lrow.cut { border-bottom: 2px solid rgba(63,185,80,.5); }
.nrl-lp { color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 2px; }
.nrl-lt { display: flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nrl-lbadge { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; }
.nrl-ln { text-align: center; }
.nrl-ld { color: var(--muted); } .nrl-lpts { font-weight: 800; }
.nrl-lstreak { text-align: center; font-size: 11px; font-weight: 700; }
.nrl-lstreak.w { color: #3fb950; } .nrl-lstreak.l { color: #f85149; }
.nrl-mv.up { color: #3fb950; font-size: 9px; } .nrl-mv.dn { color: #f85149; font-size: 9px; }
.nrl-ladnote { font-size: 10.5px; color: var(--muted); padding: 8px 4px; }
.nrl-ev { display: flex; align-items: center; gap: 9px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.nrl-ev:last-child { border-bottom: 0; }
.nrl-min { flex: 0 0 auto; width: 30px; font-size: 11px; font-weight: 700; color: var(--faint); }
.nrl-ev-ic { flex: 0 0 auto; font-size: 13px; }
.nrl-ev-tx { flex: 1 1 auto; min-width: 0; }
.nrl-ev-t { font-size: 12.5px; font-weight: 600; }
.nrl-ev-p { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.nrl-ev-sc { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--accent); }

/* ── TV Shows ── */
.tv-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-content: start; }
/* TV list view */
.tv-listwrap { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.tv-lrow { display: flex; align-items: center; gap: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px; cursor: pointer; }
.tv-lrow .tv-thumb { width: 62px; height: 36px; flex: 0 0 auto; border-radius: 6px; position: relative; }
.tv-lrow .tv-play { font-size: 12px; }
.tv-lmeta { flex: 1 1 auto; min-width: 0; }
.tv-lrow .tv-name { font-size: 13px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-lep { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-lrow .tv-resume { position: static; font-size: 11px; color: var(--accent); flex: 0 0 auto; }
.tv-card { cursor: pointer; }
.tv-thumb { position: relative; aspect-ratio: 16/10; border-radius: 9px; background: linear-gradient(150deg, #2a3550, #141a2b); display: grid; place-items: center; overflow: hidden; transition: transform .16s; }
.tv-card:hover .tv-thumb { transform: translateY(-2px); }
.tv-play { font-size: 20px; color: rgba(255,255,255,.9); }
.tv-card:hover .tv-play { color: var(--accent); }
.tv-ep { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 700; letter-spacing: .03em; color: #fff; background: rgba(0,0,0,.45); border-radius: 5px; padding: 2px 5px; }
.tv-name { margin-top: 5px; font-size: 12px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-modal { max-width: 780px; padding: 0; overflow: hidden; }
.tv-player { background: #000; min-height: 300px; display: grid; place-items: center; }
.tv-player video { width: 100%; max-height: 62vh; display: block; }
.tv-info { padding: 14px 18px 18px; }
.tv-ttl { font-size: 18px; font-weight: 700; }
.tv-meta { font-size: 12.5px; color: var(--muted); font-weight: 500; margin-top: 3px; }

/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width: 720px) {
  /* tighter side padding on a phone — the board should use the screen, not sit in a 24px frame */
  .tl-stage { overflow-y: auto; place-items: start center; padding: 6px 12px 30px; }
  /* ONE full-width column on phones. A narrow screen has no useful horizontal room to split, so a
     50% tile stacked beside another just squeezed both (the old 2-column grid also capped the board
     at 2×168px, wasting the rest of a wider phone). Now every tile uses the full width and the size
     setting controls HEIGHT only — the row unit is halved to 88px so the ladder still has steps. */
  .tl-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 88px; }
  .tl-clock { display: none; }
  /* ── mobile top bar ── */
  .tl-top { padding: 12px 14px; gap: 8px; flex-wrap: wrap; }   /* allow the dots to drop to their own row */
  .tl-top .brand .tl-wm { display: none; }   /* (6) drop the TileLab wordmark, keep the logo icon + page name */
  .tl-vol { display: none !important; }                  /* (1) remove the volume slider */
  .tl-theme-btn { display: none; }                       /* (4) theme toggle moves into the user menu */
  .umi-theme { display: block; }
  .tl-uname, .tl-user .tl-caret { display: none; }       /* (3) just the avatar icon, no username */
  .tl-user { padding: 4px; gap: 0; }
  /* (5) all page dots on their own full-width centered row so every group shows (was clipping at 2).
     Dots are finger-sized on mobile — bigger + more spread so they're easy to tap. */
  .tl-pagedots { order: 3; flex-basis: 100%; width: 100%; margin: 6px 0 2px; justify-content: center; flex-wrap: wrap; gap: 22px; }
  .tl-pdot { width: 28px; height: 28px; border-width: 3px; }
  .tl-pdot.on { box-shadow: 0 0 0 5px var(--accent-soft); }
  /* (7) mobile tile sizing — EVERY tile is full width; the size only sets how TALL it is.
     Pick a tile's size on mobile and it saves for mobile only (tl-sizes is namespaced by device class). */
  .tile.sz-micro     { grid-column: 1 / -1; grid-row: span 1; }   /* short strip   */
  .tile.sz-small     { grid-column: 1 / -1; grid-row: span 2; }   /* half height   */
  .tile.sz-largeland { grid-column: 1 / -1; grid-row: span 3; }
  .tile.sz-standard  { grid-column: 1 / -1; grid-row: span 4; }   /* full height   */
  .tile.sz-xlarge    { grid-column: 1 / -1; grid-row: span 5; }
  .tile.sz-large     { grid-column: 1 / -1; grid-row: span 6; }   /* tall          */
  .tile.sz-super     { grid-column: 1 / -1; grid-row: span 8; }
  /* (9) hide Explore 3D entirely on phones */
  .tile[data-key="earth3d"] { display: none !important; }
  /* (8) version modal uses the full width */
  .ver-modal { width: 96vw; max-width: none; }
  .ver-modal .tl-modal-body { columns: 1 !important; column-gap: 0; padding-left: 16px; padding-right: 16px; }
}

/* ─────────────────────────── motion ─────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ═══════════════════════ NEW TILE-APPS (v0.31+) ═══════════════════════ */
/* shared controls */
.clk-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 9px 18px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; transition: filter .14s, background .14s; }
.clk-btn:hover { filter: brightness(1.06); }
.clk-btn.on { background: var(--bad); }
.clk-btn.ghost, button.ghost { background: transparent; color: var(--ink-2); border: 1.5px solid var(--line); }
.clk-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.tile-body input[type=number], .tile-body input[type=text], .tile-body textarea { font: inherit; background: var(--field); border: 1.5px solid var(--line); color: var(--ink); border-radius: 9px; padding: 8px 10px; }
.tile-body input:focus, .tile-body textarea:focus, .tile-body select:focus { outline: none; border-color: var(--accent); }

/* Clock & Timers */
.clk { display: flex; flex-direction: column; height: 100%; }
.clk-tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.clk-tab { flex: 1 1 0; font: inherit; font-size: 11.5px; font-weight: 700; padding: 6px 4px; border-radius: 8px; border: 0; background: var(--field); color: var(--muted); cursor: pointer; }
.clk-tab.on { background: var(--accent-soft); color: var(--accent); }
/* `safe center` is the fix for the 50%-tile mess: a plain `center` flex column that's taller than its
   box overflows out of BOTH ends, so the big countdown rode up over the ⏳ Iris-timer row above it.
   `safe` degrades to flex-start the moment it would overflow, and overflow-y then makes it scrollable
   instead of spilling. (Scrollbars are hidden globally, so wheel-scroll only.) */
.clk-pane { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; gap: 12px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.clk-time { font-size: clamp(26px, 8vw, 52px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.clk-date { font-size: 13px; color: var(--muted); font-weight: 600; }
.clk-big { font-size: clamp(30px, 9vw, 60px); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.tm-disp.done { color: var(--bad); }
.clk-ctrls { display: flex; gap: 8px; }
.tm-presets { display: flex; gap: 6px; }
.tm-p { font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; }
.tm-p:hover { border-color: var(--accent); color: var(--accent); }
.clk-micro .clk-time { font-size: clamp(20px, 12vw, 34px); }
/* ── 50% (Small) + 25% (Micro): everything scaled to the TILE, not the viewport ──────────────────
   .clk-big/.clk-time were sized in `vw`, so on a wide monitor they clamped to 60px however small the
   tile was — which is what made a 50% Clock & Timers tile unreadable: a giant countdown, the ⏳ timer
   row underneath it, and the Start button clipped off the bottom. These make the whole thing fit. */
.clk-small .clk-tabs { gap: 3px; margin-bottom: 6px; }
.clk-small .clk-tab { font-size: 10.5px; padding: 4px 3px; border-radius: 7px; }
/* A 50% tile is WIDE and SHORT (2 cols × 1 row), so stacking big-number → presets → buttons can never
   fit — the Start/Reset row fell off the bottom edge. Spend the width instead: the countdown and the
   buttons share row 1, the presets wrap onto row 2. Roughly 56px instead of 88px of height. */
.clk-small .clk-pane { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: safe center; row-gap: 5px; column-gap: 10px; }
.clk-small .clk-big { font-size: 26px; order: 1; }
.clk-small .clk-ctrls { order: 2; }
.clk-small .tm-presets { order: 3; flex-basis: 100%; justify-content: center; }
.clk-small .clk-time { font-size: 26px; }
.clk-small .clk-date, .clk-small .clk-min-d { font-size: 10.5px; }
.clk-small .clk-min-t { font-size: 28px; }
.clk-small .tm-presets { gap: 4px; }
.clk-small .tm-p { font-size: 10.5px; padding: 3px 8px; border-radius: 7px; border-width: 1px; }
.clk-small .clk-ctrls { gap: 6px; }
.clk-small .clk-btn { font-size: 11px; padding: 5px 12px; border-radius: 8px; }
.clk-small .clk-btn.ghost { border-width: 1px; }
/* the ⏳ Iris timers strip can't be allowed to grow without limit or it squeezes the pane to nothing —
   cap it at roughly two rows and let the rest scroll. */
.clk-small .clk-itimers:not(:empty) { gap: 3px; margin: 4px 0 0; max-height: 46px; overflow-y: auto; overscroll-behavior: contain; }
.clk-small .clk-it { padding: 3px 7px; gap: 6px; border-radius: 7px; }
.clk-small .clk-it-l { font-size: 10.5px; }
.clk-small .clk-it-t { font-size: 11px; }
.clk-small .clk-it-x { font-size: 10px; padding: 1px 3px; }
.clk-micro .clk-big { font-size: 22px; }
.clk-micro .clk-itimers:not(:empty) { max-height: 28px; overflow-y: auto; }
.clk-micro .clk-it-l { font-size: 10px; }
.clk-micro .clk-btn { font-size: 10.5px; padding: 4px 10px; }
.clk-micro .tm-p { font-size: 10px; padding: 3px 7px; }
/* ── clock faces ── */
.flip { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.flip-group { display: flex; align-items: center; gap: 5px; }
.flip-digit { position: relative; width: 42px; height: 62px; overflow: hidden; border-radius: 8px; background: #1c1f26; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 3px 9px rgba(0,0,0,.32); }
.flip-digit::after { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: rgba(0,0,0,.55); transform: translateY(-1px); z-index: 2; }
.flip-strip { display: flex; flex-direction: column; transition: transform .55s cubic-bezier(.3,1.35,.5,1); will-change: transform; }
.flip-strip span { height: 62px; display: grid; place-items: center; font-size: 42px; font-weight: 800; color: #f4f6f8; font-variant-numeric: tabular-nums; }
.flip-colon { font-size: 36px; font-weight: 800; color: var(--muted); }
.flip-ampm { font-size: 13px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.clk-small .flip-digit, .clk-micro .flip-digit { width: 30px; height: 46px; } .clk-small .flip-strip span, .clk-micro .flip-strip span { height: 46px; font-size: 30px; }
/* LCD / LED */
.lcd { position: relative; display: inline-grid; place-items: center; padding: 14px 20px; border-radius: 12px; background: #0b0e0c; font-family: "Courier New", ui-monospace, monospace; }
.lcd-time, .lcd-ghost { grid-area: 1 / 1; font-size: clamp(26px, 8vw, 46px); font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lcd-seg { background: #10140f; } .lcd-seg .lcd-ghost { color: rgba(60,255,120,.09); } .lcd-seg .lcd-time { color: #46f07a; text-shadow: 0 0 8px rgba(70,240,122,.6); }
.lcd-dot { background: #140b0b; } .lcd-dot .lcd-ghost { color: rgba(255,60,60,.1); } .lcd-dot .lcd-time { color: #ff3b3b; text-shadow: 0 0 10px rgba(255,59,59,.75); }
/* Minimal */
.clk-min { text-align: center; }
.clk-min-t { font-size: clamp(30px, 9vw, 58px); font-weight: 200; letter-spacing: .01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.clk-min-d { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
/* Analog */
.analog { width: 100%; height: 100%; display: grid; place-items: center; }
.analog svg { width: min(180px, 90%); height: auto; aspect-ratio: 1; }
.an-face { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.an-tick { stroke: var(--muted); stroke-width: 1; } .an-tick-h { stroke: var(--ink); stroke-width: 2.4; }
.an-h { stroke: var(--ink); stroke-width: 3.4; stroke-linecap: round; }
.an-m { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.an-s { stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; }
.an-h, .an-m, .an-s { transform-box: view-box; transform-origin: 50px 50px; }
.an-hub { fill: var(--accent); }

/* Loan Calculator */
.loan { display: flex; flex-direction: column; gap: 12px; height: 100%; justify-content: center; }
.loan-inps { display: flex; gap: 8px; }
.loan-inps .loan-f { flex: 1 1 0; min-width: 0; }
.loan-inps .loan-f input { width: 100%; }
.loan-out { text-align: center; }
.loan-mini { align-items: center; justify-content: center; text-align: center; }
.loan-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.loan-big { font-size: clamp(26px, 7vw, 40px); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.loan-sub { font-size: 12px; color: var(--muted); }
.loan-inps { display: flex; gap: 8px; }
.loan-f { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; }
.loan-f span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.loan-f input { width: 100%; }
.loan-out { text-align: center; margin-top: 4px; }
.loan-grid { display: flex; gap: 10px; margin-top: 10px; }
.loan-grid > div { flex: 1 1 0; background: var(--field); border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 2px; }
.loan-grid span { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.loan-grid b { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Unit Converter */
.uc { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.uc-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.uc-cat { font: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; }
.uc-cat.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.uc-row { display: flex; gap: 8px; }
.uc-row input { flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 700; }
.uc-row select { flex: 0 0 92px; }
.uc-out { background: var(--accent-soft); color: var(--accent); }
.uc-eq { text-align: center; color: var(--faint); font-weight: 800; }
/* compact (small/micro): category icons + input-left / output-right */
.uc-icons { justify-content: space-between; }
.uc-icons .uc-cat { padding: 6px 9px; font-size: 15px; border-radius: 9px; line-height: 1; }
.uc-two { display: flex; gap: 8px; flex: 1 1 auto; align-items: center; }
.uc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.uc-col input { width: 100%; font-size: 16px; font-weight: 700; }
.uc-col .uc-out { background: var(--accent-soft); color: var(--accent); }
.uc-col select { width: 100%; }
.uc-micro .uc-icons .uc-cat { padding: 5px 6px; font-size: 13px; }

/* Randomizer */
.rnd { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.rnd-sel { font: inherit; font-weight: 700; font-size: 13px; padding: 8px 11px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--field); color: var(--ink); width: 100%; cursor: pointer; }
.rnd-sel option { color: #111; }
.rnd-side { display: flex; flex-direction: column; gap: 10px; }
.rnd-side-top { flex: 0 0 auto; }
.rnd-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
/* two-column (50%+): compact controls on the left, animation on the right */
.rnd-split { flex-direction: row; align-items: stretch; gap: 10px; }
.rnd-split .rnd-side { flex: 0 0 auto; width: 42%; max-width: 138px; justify-content: center; gap: 8px; }
.rnd-split .rnd-side .rnd-sel { font-size: 12px; padding: 6px 9px; }
.rnd-split .rnd-side .rnd-go { width: 100%; padding: 8px 8px; font-size: 13px; }
.rnd-split .rnd-stage { flex: 1 1 auto; min-width: 0; overflow: hidden; align-items: center; }
/* the animation is absolutely centred + scaled so it always fits the stage, never cut off */
.rnd-split .rnd-out { position: absolute; inset: 0; margin: 0; min-height: 0; transform: scale(.7); transform-origin: center; }
.rnd-split .rnd-stage { position: relative; }
.rnd-split .dice-scene, .rnd-split .coin-scene { min-height: 0; }
.rnd-split.rnd-small .rnd-out { transform: scale(.52); }
.rnd-split.rnd-standard .rnd-out { transform: scale(.7); }
.rnd-cfg { display: flex; align-items: center; gap: 8px; }
.rnd-cfg input { width: 84px; }
.rnd-cfg span { color: var(--muted); font-size: 12px; }
.rnd-out { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 60px; }
.rnd-dice { font-size: 68px; line-height: 1; color: var(--accent); }
.rnd-num { font-size: clamp(34px, 10vw, 60px); font-weight: 800; color: var(--accent); }
.rnd-big { font-size: 56px; }
.rnd-pop { animation: rnd-pop .35s cubic-bezier(.2,.8,.2,1); }
@keyframes rnd-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.rnd-flip { display: inline-block; animation: rnd-flip .5s ease-out; }
@keyframes rnd-flip { 0% { transform: rotateY(0) scale(.6); } 100% { transform: rotateY(720deg) scale(1); } }
/* ── realistic 3D dice ── */
.dice-scene { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 110px; perspective: 700px; }
.dice-tilt { transform: rotateX(-16deg) rotateY(-18deg); transform-style: preserve-3d; }
.dice { position: relative; width: 66px; height: 66px; transform-style: preserve-3d; transform: rotateX(-25deg) rotateY(25deg); will-change: transform; }
.dice-face { position: absolute; inset: 0; border-radius: 13px; background: linear-gradient(150deg, #ffffff 0%, #eef0f3 55%, #dfe3e8 100%); box-shadow: inset 0 2px 4px rgba(255,255,255,.9), inset 0 -4px 8px rgba(0,0,0,.16), inset 0 0 10px rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.07); }
.df-front { transform: translateZ(33px); } .df-back { transform: rotateY(180deg) translateZ(33px); }
.df-right { transform: rotateY(90deg) translateZ(33px); } .df-left { transform: rotateY(-90deg) translateZ(33px); }
.df-top { transform: rotateX(90deg) translateZ(33px); } .df-bottom { transform: rotateX(-90deg) translateZ(33px); }
.pip { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #565b62, #16181c 78%); box-shadow: inset 0 -1px 2px rgba(0,0,0,.6), 0 1px 1px rgba(255,255,255,.4); }
.dice-shadow { width: 60px; height: 15px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.3), rgba(0,0,0,0) 70%); transition: transform 1.15s cubic-bezier(.16,.62,.24,1), opacity 1.15s; }
.dice-shadow.rolling { transform: scale(.62); opacity: .45; }
:root[data-theme="dark"] .dice-face { background: linear-gradient(150deg, #f2f4f7 0%, #d7dbe0 60%, #c3c8cf 100%); }
:root[data-theme="dark"] .dice-shadow { background: radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); }
.dice-cap { font-size: 26px; font-weight: 800; color: var(--accent); min-height: 30px; }
@media (prefers-reduced-motion: reduce) { .dice, .coin, .odo-strip, .roul-wheel { transition: none !important; } .coin-toss.tossing { animation: none; } .rnd-pop, .rnd-flip { animation: none; } }
/* ── coin flip ── */
.coin-scene { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 110px; perspective: 700px; }
.coin-toss { transform-style: preserve-3d; }
.coin-toss.tossing { animation: coin-toss 1.2s cubic-bezier(.3,0,.35,1); }
@keyframes coin-toss { 0% { transform: translateY(0); } 45% { transform: translateY(-60px); } 100% { transform: translateY(0); } }
.coin { position: relative; width: 72px; height: 72px; transform-style: preserve-3d; }
.coin-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #7a5c14; backface-visibility: hidden; }
.coin-h { background: radial-gradient(circle at 35% 30%, #ffe390, #d9a521 78%); box-shadow: inset 0 0 0 4px #c4931a, 0 5px 12px rgba(0,0,0,.28); transform: translateZ(1px); }
.coin-t { background: radial-gradient(circle at 35% 30%, #ffe390, #c99118 78%); box-shadow: inset 0 0 0 4px #b3841a; transform: rotateX(180deg) translateZ(1px); }
.coin-shadow { width: 62px; height: 14px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.3), rgba(0,0,0,0) 70%); transition: transform 1.2s, opacity 1.2s; }
.coin-shadow.rolling { transform: scale(.6); opacity: .4; }
.coin-cap { font-size: 24px; font-weight: 800; color: var(--accent); min-height: 28px; }
/* ── number odometer ── */
.odo { display: flex; gap: 6px; }
.odo-wheel { width: 46px; height: 62px; overflow: hidden; border-radius: 10px; background: var(--field); border: 1px solid var(--line); box-shadow: inset 0 8px 9px -8px rgba(0,0,0,.5), inset 0 -8px 9px -8px rgba(0,0,0,.5); }
.odo-strip { display: flex; flex-direction: column; will-change: transform; }
.odo-d { height: 62px; display: grid; place-items: center; font-size: 36px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
/* ── yes/no roulette ── */
.roul { position: relative; width: 132px; height: 132px; }
.roul-wheel { width: 100%; height: 100%; border-radius: 50%; will-change: transform; box-shadow: 0 5px 16px rgba(0,0,0,.28), inset 0 0 0 4px rgba(255,255,255,.35); background: conic-gradient(#22a45d 0 45deg, #e05a4e 45deg 90deg, #22a45d 90deg 135deg, #e05a4e 135deg 180deg, #22a45d 180deg 225deg, #e05a4e 225deg 270deg, #22a45d 270deg 315deg, #e05a4e 315deg 360deg); }
.roul-hub { position: absolute; top: 50%; left: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--panel); box-shadow: 0 1px 4px rgba(0,0,0,.4); z-index: 2; }
.roul-pointer { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 17px solid var(--ink); z-index: 3; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.rnd-cap { font-size: 15px; font-weight: 700; color: var(--ink); }
.rnd-pick { font-size: 24px; font-weight: 800; color: var(--accent); text-align: center; }

/* Moon */
.moon { display: flex; align-items: center; gap: 12px; height: 100%; justify-content: center; }
.moon-em { font-size: clamp(36px, 12vw, 62px); line-height: 1; }
.moon-name { font-size: 15px; font-weight: 800; color: var(--ink); }
.moon-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.moon-micro { flex-direction: column; gap: 4px; text-align: center; }
.moon-micro .moon-name { font-size: 12px; }

/* World Clock */
.wc { display: flex; flex-direction: column; gap: 2px; height: 100%; overflow-y: auto; }
.wc-row { display: flex; align-items: baseline; justify-content: space-between; padding: 7px 2px; border-bottom: 1px solid var(--line-2); }
.wc-row:last-child { border-bottom: 0; }
.wc-city { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wc-time { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); }

/* Countdowns */
.cd { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.cd-item { position: relative; display: flex; align-items: center; gap: 12px; background: var(--field); border-radius: 11px; padding: 10px 12px; }
.cd-num { font-size: 26px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; }
.cd-num.cd-past { color: var(--faint); font-size: 16px; }
.cd-d { font-size: 11px; font-weight: 600; color: var(--muted); }
.cd-lbl { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cd-num.cd-time { font-size: 21px; letter-spacing: -.5px; }
.cd-when { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 1px; }
.cd-x { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 12px; }
.cd-x:hover { color: var(--bad); }
.cd-add { margin-top: auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: 9px; border: 1.5px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.cd-add:hover { border-color: var(--accent); color: var(--accent); }
.cd-empty, .rm-empty { color: var(--faint); font-size: 12.5px; text-align: center; padding: 16px; }

/* Reminders */
.rm { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.rm-add { display: flex; gap: 6px; }
.rm-in { flex: 1 1 auto; min-width: 0; }
.rm-addb { flex: 0 0 auto; width: 36px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-size: 18px; cursor: pointer; }
.rm-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.rm-item { display: flex; align-items: center; gap: 9px; padding: 6px 2px; }
.rm-chk { flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid var(--line); border-radius: 6px; background: transparent; color: var(--accent); font-size: 12px; cursor: pointer; display: grid; place-items: center; }
.rm-item.done .rm-chk { background: var(--accent); color: #fff; border-color: var(--accent); }
.rm-tx { flex: 1 1 auto; font-size: 13.5px; color: var(--ink); }
.rm-item.done .rm-tx { text-decoration: line-through; color: var(--faint); }
.rm-x { flex: 0 0 auto; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 12px; }
.rm-x:hover { color: var(--bad); }
/* Medications */
.meds { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.meds-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.meds-dose { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line-2); }
.meds-chk { flex: 0 0 auto; width: 24px; height: 24px; border: 1.5px solid var(--line); border-radius: 50%; background: transparent; color: var(--accent); font-size: 13px; cursor: pointer; display: grid; place-items: center; }
.meds-dose.taken .meds-chk { background: var(--accent); color: #fff; border-color: var(--accent); }
.meds-tx { flex: 1 1 auto; min-width: 0; }
.meds-nm { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.meds-dose.taken .meds-nm { color: var(--faint); text-decoration: line-through; }
.meds-dosetx { font-size: 11px; font-weight: 500; color: var(--muted); }
.meds-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.meds-del { flex: 0 0 auto; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 11px; }
.meds-del:hover { color: var(--bad); }
.meds-add { margin-top: auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: 9px; border: 1.5px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.meds-add:hover { border-color: var(--accent); color: var(--accent); }

/* Currency */
.cur { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.cur-mini { align-items: center; justify-content: center; text-align: center; }
.cur-clk { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
.cur-clk:hover .cur-rate { filter: brightness(1.12); }
button.cur-line { text-align: center; }
.cur-chartlink { font-size: 11px; color: var(--accent); font-weight: 600; }
.cur-pair { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .02em; display: flex; align-items: center; gap: 5px; }
.cur-pair .cur-arrow { font-size: 12px; }
/* Currency chart modal */
.cur-modal { width: min(640px, 94vw); }
.cur-chartbody { display: flex; flex-direction: column; gap: 12px; }
.cur-chart-now { font-size: 15px; text-align: center; color: var(--muted); } .cur-chart-now b { color: var(--accent); font-size: 22px; }
.cur-chart-wrap { height: 260px; background: var(--field); border-radius: 12px; overflow: hidden; position: relative; }
.cur-svg { width: 100%; height: 100%; display: block; }
.cur-chart-range { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cur-up { color: #22a45d; font-weight: 700; } .cur-down { color: #e05a4e; font-weight: 700; }
.cur-rate { font-size: clamp(22px, 8vw, 34px); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.cur-inv { font-size: 11px; color: var(--faint); }
.cur-conv { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cur-amt { width: 90px; font-size: 18px; font-weight: 700; }
.cur-fr, .cur-to { font-weight: 700; color: var(--muted); }
.cur-res { font-size: 22px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.cur-arrow { color: var(--faint); }
.cur-line { font-size: 12px; color: var(--muted); }
.cur-line b { color: var(--ink); }
.cur-ref-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.cur-ref-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cur-ref-i { background: var(--field); border-radius: 8px; padding: 7px; display: flex; flex-direction: column; gap: 1px; }
.cur-ref-i span { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.cur-ref-i b { font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }

/* NASA APOD */
.apod { display: flex; flex-direction: column; height: 100%; cursor: pointer; gap: 8px; }
.apod-img { flex: 1 1 auto; min-height: 60px; border-radius: 10px; position: relative; overflow: hidden; background: var(--field); }
.apod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apod-fail { opacity: .3; }
.apod-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.apod-ttl { font-size: 14px; font-weight: 800; color: var(--ink); }
.apod-ex { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.apod-micro .apod-info, .apod-small .apod-info { display: none; }
.apod-modal { max-width: 820px; width: 88vw; }
.apod-modal-img { height: 46vh; background: var(--bg-2); overflow: hidden; }
.apod-modal-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Trivia */
.trv { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.trv-cat { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.trv-q { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.trv-ans { display: flex; flex-direction: column; gap: 6px; }
.trv-a { text-align: left; font: inherit; font-size: 13px; padding: 9px 12px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; transition: border-color .12s; }
.trv-a:hover:not(:disabled) { border-color: var(--accent); }
.trv-a.correct { background: rgba(34,164,93,.16); border-color: var(--accent); color: var(--accent); }
.trv-a.wrong { background: rgba(224,90,78,.14); border-color: var(--bad); color: var(--bad); }
.trv-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.trv-msg { font-size: 13px; font-weight: 700; }
.trv-next { font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.trv-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.trv-emptytx { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 240px; }

/* Recipe */
/* recipe history stage + hover arrows (replaces the Another button) */
.rcp-stage { position: relative; height: 100%; }
@keyframes rcp-in { from { opacity: 0; transform: translateY(11px) scale(.975); } to { opacity: 1; transform: none; } }
.rcp-anim { animation: rcp-in .5s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .rcp-anim { animation: none; } }
.rcp-arw { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 30px; height: 50px; display: grid; place-items: center; font-size: 22px; border: 0; border-radius: 9px; background: var(--panel); box-shadow: 0 2px 10px rgba(0,0,0,.15); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .16s, background .14s; }
.rcp-prev { left: -4px; } .rcp-next { right: -4px; }
.rcp-stage:hover .rcp-arw { opacity: .95; }
.rcp-arw:hover { background: var(--accent); color: #fff; }
.rcp-arw:disabled { opacity: 0 !important; pointer-events: none; }
/* Disaster detail modal */
.dis-modal { max-width: 620px; }
.dis-meta2 { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.dis-country { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.dis-alert { font-size: 12px; font-weight: 700; text-transform: capitalize; }
.dis-map { width: 100%; height: 260px; border: 0; border-radius: 12px; margin-bottom: 12px; }
.dis-newsh { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin: 14px 0 8px; }
.rcp { display: flex; gap: 12px; height: 100%; }
.rcp-standard, .rcp-large { flex-direction: column; }
.rcp-micro, .rcp-small { flex-direction: row; align-items: center; }
.rcp-img { object-fit: cover; width: 100%; display: block; background: var(--field); border-radius: 11px; cursor: pointer; flex: 1 1 auto; min-height: 70px; }
.rcp-img-fail { object-fit: contain; opacity: .35; }
.rcp-micro .rcp-img, .rcp-small .rcp-img { flex: 0 0 84px; align-self: stretch; height: auto; }
.rcp-watch { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 16px; font-size: 13px; font-weight: 700; color: #fff; background: #e0342e; padding: 8px 16px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.rcp-watch:hover { filter: brightness(1.07); }
/* Shared YouTube modal */
.yt-modal { width: min(960px, 95vw); }
.yt-body { padding: 0 !important; background: #000; }
.yt-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.yt-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.rcp-info { display: flex; flex-direction: column; gap: 6px; }
/* v1.90 — ★ on the picture (Recipe + Cocktail tiles) */
.rcp-tilefav { position: absolute; top: 8px; right: 8px; z-index: 4; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #ffd24a; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: background .14s, transform .14s; }
.rcp-tilefav:hover { background: rgba(0, 0, 0, .72); transform: scale(1.06); }
.rcp-tilefav.on { background: #ffd24a; color: #201800; }
/* v1.90 — read the whole ingredient list in the tile. min-height:0 is what makes it scrollable at all:
   without it a flex child never shrinks below its content and the tile just clips the overflow. The
   picture gives up some height so there's a panel to scroll. (Scrollbars are hidden globally.) */
.rcp-standard .rcp-info, .rcp-large .rcp-info, .rcp-largeland .rcp-info, .rcp-xlarge .rcp-info, .rcp-super .rcp-info {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.rcp-standard .rcp-img, .rcp-large .rcp-img, .rcp-largeland .rcp-img, .rcp-xlarge .rcp-img, .rcp-super .rcp-img { flex: 0 0 44%; }
.rcp-standard .rcp-more, .rcp-large .rcp-more, .rcp-xlarge .rcp-more, .rcp-super .rcp-more { flex: 0 0 auto; }
/* the method, so there's genuinely more to read in the tile rather than only in the full view */
.rcp-steps { font-size: 11.5px; line-height: 1.55; color: var(--muted); white-space: pre-line; }
.rcp-name { font-size: 15px; font-weight: 800; color: var(--ink); }
.rcp-meta { font-size: 11.5px; color: var(--muted); text-transform: capitalize; }
.rcp-ing { display: flex; flex-wrap: wrap; gap: 4px; }
.rcp-i { font-size: 11px; background: var(--field); border-radius: 999px; padding: 3px 9px; color: var(--ink-2); }
.rcp-more { align-self: flex-start; font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; margin-top: 2px; }
.rcp-modal .art-hero { height: 40vh; }
.rcp-cols { display: grid; grid-template-columns: 1fr 1.6fr; gap: 22px; }
.rcp-ings h3, .rcp-method h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 8px; }
.rcp-ings ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; }
.rcp-method p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 620px) { .rcp-cols { grid-template-columns: 1fr; } }

/* Holidays */
.hol { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.hol-item { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line-2); }
.hol-item:last-child { border-bottom: 0; }
.hol-when { flex: 0 0 auto; min-width: 58px; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.hol-when.now { color: var(--bad); }
.hol-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.hol-meta { font-size: 11px; color: var(--muted); }

/* RBA */
.rba { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.rba-top { display: flex; align-items: baseline; gap: 12px; }
.rba-num { font-size: clamp(34px, 9vw, 50px); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.rba-pct { font-size: 22px; color: var(--muted); }
.rba-chg { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.rba-chg.up { color: var(--accent); background: rgba(34,164,93,.14); }
.rba-chg.down { color: var(--bad); background: rgba(224,90,78,.14); }
.rba-spark svg { width: 100%; height: 42px; }
.rba-mtg { font-size: 12px; color: var(--muted); }
.rba-mtg b { color: var(--ink); }
.rba-news { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.rba-n { display: flex; flex-direction: column; gap: 1px; padding: 6px 0; border-top: 1px solid var(--line-2); text-decoration: none; width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; cursor: pointer; color: var(--ink); }
.rba-n:hover .rba-n-t { color: var(--accent); }
.ts-range { width: 100%; accent-color: var(--accent); }
.ts-rangeval { color: var(--accent); font-variant-numeric: tabular-nums; }
.rba-n-t { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rba-n-m { font-size: 10.5px; color: var(--muted); }

/* Surprise Me */
.sp { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.sp-tabs { display: flex; gap: 5px; }
.sp-t { flex: 1 1 0; font: inherit; font-size: 11.5px; font-weight: 700; padding: 7px 4px; border-radius: 9px; border: 0; background: var(--field); color: var(--muted); cursor: pointer; }
.sp-t.on { background: var(--accent-soft); color: var(--accent); }
.sp-out { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.sp-main { font-size: 16px; font-weight: 600; color: var(--ink); line-height: 1.45; }
.sp-punch { font-size: 18px; font-weight: 800; color: var(--accent); }
.sp-year { font-size: 30px; font-weight: 800; color: var(--accent); }
.sp-stage { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
.sp-stage .sp-out { flex: 1 1 auto; }
.sp-arw { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 30px; height: 46px; display: grid; place-items: center; font-size: 22px; border: 0; border-radius: 9px; background: var(--field); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .16s, background .14s; }
.sp-prev { left: -6px; } .sp-next { right: -6px; }
.sp-stage:hover .sp-arw { opacity: 1; }
.sp-arw:hover { background: var(--accent); color: #fff; }
.sp-arw:disabled { opacity: 0 !important; pointer-events: none; }

/* Quote */
.qt-stage { position: relative; height: 100%; }
.qt-arw { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 28px; height: 46px; display: grid; place-items: center; font-size: 22px; border: 0; border-radius: 9px; background: var(--field); color: var(--ink-2); cursor: pointer; opacity: 0; transition: opacity .16s, background .14s; }
.qt-prev { left: -6px; } .qt-next { right: -6px; }
.qt-stage:hover .qt-arw { opacity: 1; }
.qt-arw:hover { background: var(--accent); color: #fff; }
.qt { display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 6px; position: relative; }
.qt-mark { font-size: 44px; line-height: .6; color: var(--accent); opacity: .5; font-family: Georgia, serif; margin-top: 14px; }
.qt-tx { font-size: clamp(15px, 2.4vw, 20px); font-weight: 600; color: var(--ink); line-height: 1.4; }
.qt-au { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.qt-new { align-self: flex-start; margin-top: 8px; font-size: 11.5px; padding: 6px 12px; border-radius: 8px; cursor: pointer; }

/* Security Scan */
.sec { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.sec-bar { display: flex; gap: 6px; }
.sec-in { flex: 1 1 auto; min-width: 0; }
.sec-go { flex: 0 0 auto; font: inherit; font-weight: 700; padding: 0 16px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.sec-run { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.sec-res { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.sec-grade { display: flex; align-items: center; gap: 14px; background: var(--field); border-radius: 12px; padding: 12px 16px; }
.sec-g { font-size: 34px; font-weight: 800; }
.sec-grade.g-a .sec-g { color: #22a45d; } .sec-grade.g-b .sec-g { color: #7bb03a; } .sec-grade.g-c .sec-g { color: #e8792e; } .sec-grade.g-d .sec-g { color: #e05a4e; }
.sec-s { font-size: 15px; font-weight: 700; color: var(--muted); }
.sec-checks { display: flex; flex-direction: column; gap: 4px; }
.sec-c { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-2); }
.sec-ic { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.sec-c.pass .sec-ic { background: #22a45d; } .sec-c.warn .sec-ic { background: #e8792e; } .sec-c.fail .sec-ic { background: #e05a4e; }

/* Spelling */
.spl { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.spl-top { display: flex; gap: 6px; flex: 0 0 auto; }
.spl-hear { flex: 1 1 auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.spl-again { flex: 0 0 auto; width: 38px; cursor: pointer; }
.spl-inrow { display: flex; gap: 6px; flex: 0 0 auto; }
.spl-in { flex: 1 1 auto; min-width: 0; font-size: 15px; padding: 8px 10px; }
.spl-check { flex: 0 0 auto; font: inherit; font-weight: 700; padding: 0 13px; border-radius: 9px; border: 0; background: var(--field); color: var(--ink); cursor: pointer; }
.spl-msg { font-size: 12.5px; font-weight: 700; min-height: 16px; text-align: center; }
.spl-msg.ok { color: var(--accent); } .spl-msg.bad { color: var(--bad); }
.spl-word { font-size: 22px; font-weight: 800; letter-spacing: .05em; color: var(--accent); text-align: center; }
.spl-foot { display: flex; gap: 6px; flex: 0 0 auto; margin-top: auto; }
.spl-reveal, .spl-next { flex: 1 1 auto; font: inherit; font-size: 12.5px; padding: 8px; border-radius: 9px; cursor: pointer; }
.spl-next { border: 0; background: var(--field); color: var(--ink); font-weight: 700; }
/* micro/small spelling stays compact; standard centres nicely */
.spl-standard { gap: 9px; } .spl-standard .spl-in { font-size: 16px; }

/* Recipe favourites */
.rcp-favbtn { position: absolute; top: 12px; right: 54px; z-index: 4; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #ffd24a; font-size: 18px; cursor: pointer; }
.rcp-favbtn.on { background: #ffd24a; color: #201800; }
.rcpfav-list { display: flex; flex-direction: column; gap: 6px; }
.rcpfav-row { display: flex; align-items: center; gap: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 6px 9px; }
.rcpfav-th { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 18px; background: #0b0e13; }
.rcpfav-nm { flex: 1 1 auto; font-size: 13px; }
.rcpfav-open { flex: 0 0 auto; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.rcpfav-del { flex: 0 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; color: var(--bad); }

/* Game modal gameplay video */
.game-play { margin: 12px 0; }
.game-ph { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; }
.game-ytframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.game-pvcap { font-size: 11.5px; color: var(--muted); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-plats { font-size: 12px; color: var(--muted); margin: 8px 0; } .game-plats b { color: var(--ink); }

/* Calorie kJ/kcal editor + inline edit */
.cal-rk { background: none; border: 0; font: inherit; font-variant-numeric: tabular-nums; color: var(--ink); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.cal-rk:hover { background: var(--field); outline: 1px dashed var(--line); }
.cal-rkedit { width: 62px; font: inherit; text-align: right; border: 1.5px solid var(--accent); border-radius: 6px; padding: 2px 6px; background: var(--panel); color: var(--ink); }
.cal-erow { display: flex; align-items: flex-end; gap: 10px; }
.cal-erow .tl-field { flex: 1 1 0; }
.cal-eor { flex: 0 0 auto; color: var(--muted); font-size: 12px; padding-bottom: 10px; }
.cal-ehint { font-size: 11.5px; color: var(--muted); margin: 6px 0 2px; }

/* Medication editor */
.med-sched { display: flex; gap: 6px; }
.med-schb { flex: 1 1 0; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--field); color: var(--muted); cursor: pointer; }
.med-schb.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.med-times { margin: 4px 0; }
.med-tlabel { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; display: block; margin-bottom: 5px; }
.med-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.med-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--field); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12.5px; font-weight: 600; }
.med-chip button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.med-none { font-size: 12px; color: var(--muted); }
.med-addtime { display: flex; gap: 6px; }
.med-addtime input { flex: 1 1 auto; }
.med-addtb { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; }
.meds-edit { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; color: var(--muted); opacity: .55; }
.meds-dose:hover .meds-edit { opacity: 1; }

/* Medication on-screen reminder banner */
.med-reminder { position: fixed; right: 20px; bottom: 20px; z-index: 9500; width: min(360px, 92vw); background: var(--panel); border: 1.5px solid var(--accent); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.4); padding: 14px 16px; animation: rcp-in .35s ease; }
.med-rem-h { font-size: 14px; font-weight: 800; margin-bottom: 9px; }
.med-rem-list { display: flex; flex-direction: column; gap: 7px; }
.med-rem-row { display: flex; align-items: center; gap: 9px; }
.med-rem-chk { flex: 0 0 auto; background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.med-rem-nm { flex: 1 1 auto; font-size: 13px; font-weight: 600; } .med-rem-nm i { color: var(--muted); font-weight: 400; font-style: normal; }
.med-rem-tm { flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.med-rem-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; }

/* OzBargain — news-item rendered as a button */
.news-item.ozb-item { background: none; border: 0; width: 100%; text-align: left; font: inherit; cursor: pointer; }
.spl-foot { display: flex; gap: 8px; margin-top: auto; }
.spl-reveal { flex: 1 1 0; font-size: 12px; padding: 7px; border-radius: 8px; cursor: pointer; }
.spl-next { flex: 1 1 0; font: inherit; font-size: 12px; font-weight: 700; padding: 7px; border-radius: 8px; border: 0; background: var(--accent-soft); color: var(--accent); cursor: pointer; }

/* Radio */
.rad { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.rad-now { display: flex; align-items: center; gap: 10px; background: var(--field); border-radius: 11px; padding: 9px 11px; }
.rad-pp { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 15px; cursor: pointer; }
.rad-pp:disabled { background: var(--line); cursor: default; }
.rad-now-nm { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rad-now-sub { font-size: 11px; color: var(--muted); }
.rad-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.rad-st { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; width: 100%; }
.rad-st:hover { background: var(--field); }
.rad-st.on { background: var(--accent-soft); }
.rad-fav { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; font-size: 14px; }
.rad-fav img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.rad-nm { flex: 1 1 auto; font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rad-meta { flex: 0 0 auto; font-size: 10.5px; color: var(--muted); }

/* Traffic Map + My Location iframes */
.traffic-map, .loc-map { width: 100%; flex: 1 1 auto; min-height: 90px; border: 0; border-radius: 10px; }
.trf { position: relative; width: 100%; height: 100%; display: flex; }
.trf .traffic-map { pointer-events: none; }
.trf-hit { position: absolute; inset: 0; cursor: pointer; border-radius: 10px; }
.trf-hit:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.trf-open { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--panel); box-shadow: 0 2px 8px rgba(0,0,0,.22); color: var(--ink); font-size: 15px; cursor: pointer; }
.trf-modal { width: min(1000px, 95vw); }
.trf-modalbody { padding: 0 !important; }
.trf-bigmap { width: 100%; height: 78vh; border: 0; display: block; }
.loc { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.loc-head { display: flex; align-items: center; gap: 12px; }
.loc-pin { font-size: 26px; }
.loc-label { font-size: 16px; font-weight: 800; color: var(--ink); }
.loc-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.loc-isp { font-size: 11px; color: var(--faint); }

/* Ticker detail modal (ASX / Crypto) */
.stk-btn { cursor: pointer; font: inherit; text-align: left; border: 0; }
.tk-modal { max-width: 640px; width: 88vw; }
.tk-sym { font-size: 12px; font-weight: 700; color: var(--muted); background: var(--field); padding: 3px 9px; border-radius: 999px; }
.tk-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tk-p { font-size: 34px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tk-unit { font-size: 13px; color: var(--muted); font-weight: 600; }
.tk-chg { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-left: auto; }
.tk-chg.up { color: var(--accent); background: rgba(34,164,93,.14); }
.tk-chg.down { color: var(--bad); background: rgba(224,90,78,.14); }
.tk-chart { background: var(--field); border-radius: 12px; padding: 8px; margin-bottom: 16px; }
.tk-chart .bc { width: 100%; height: 190px; display: block; }
.bc-empty { text-align: center; color: var(--faint); font-size: 12px; padding: 40px; }
.tk-newsh { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin-bottom: 8px; }
.tk-nonews { color: var(--faint); font-size: 12.5px; padding: 8px 0; }

/* News — wide (large) multi-column layout */
.news-wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; align-content: start; overflow-y: auto; }
.news-wide .news-item { border-bottom: 1px solid var(--line-2); }
.news-thumb.hn-th { display: grid; place-items: center; font-size: 16px; background: var(--field); }

/* ═══════════ WAVE 3 tiles ═══════════ */
/* Fear & Greed */
.fg { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 6px; }
.fg-gauge { position: relative; width: 100%; max-width: 200px; }
.fg-gauge svg { width: 100%; display: block; }
.fg-val { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fg-lbl { font-size: 15px; font-weight: 800; }
.fg-spark { width: 100%; margin-top: 4px; } .fg-spark svg { width: 100%; height: 34px; }
.fg-micro .fg-lbl { font-size: 12px; }

/* Posters (Cinemas / TV / Movies) */
.posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; overflow-y: auto; align-content: start; }
.posters-large { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.posters-small, .posters-micro { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px; }
.poster { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.poster-img { width: 100%; border-radius: 9px; background: var(--field); display: grid; place-items: center; font-size: 26px; overflow: hidden; }
.poster-img.p23 { aspect-ratio: 2 / 3; }
.poster-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-ttl { font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.poster-sub { font-size: 10px; color: var(--muted); font-weight: 600; }
.poster:hover .poster-img { outline: 2px solid var(--accent); outline-offset: 1px; }
.mov { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.mov-head { flex: 0 0 auto; }
.mov-rand { font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 16px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.mov .posters { flex: 1 1 auto; }
.poster.mov-hi .poster-img { outline: 2px solid var(--accent); outline-offset: 1px; }
.poster.mov-win .poster-img { outline: 3px solid var(--accent); box-shadow: 0 0 0 4px var(--glow); transform: scale(1.04); transition: transform .2s; }
.mov-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* v3.04 — All / Only Plex / Download only, sat beside the search box */
.mov-own { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: inherit;
  font: inherit; font-size: 12px; padding: 5px 8px; border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
.mov-own:focus { outline: none; border-color: #58a6ff; }
/* Movie randomizer modal */
.mr-modal { width: min(560px, 94vw); }
.mr-body { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 16px 22px; text-align: center; overflow-y: auto; max-height: 82vh; }
.mr-carousel { perspective: 1000px; width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.mr-carousel:active { cursor: grabbing; }
.mr-details { width: 100%; }
.mr-det { text-align: left; border-top: 1px solid var(--line); padding-top: 14px; }
.mr-detrow { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.mr-det .tmdb-ov { font-size: 13px; line-height: 1.55; color: var(--ink); margin: 0; }
.mr-det .tmdb-cast { margin-top: 10px; }
.mr-ring { position: relative; transform-style: preserve-3d; will-change: transform; }
.mr-card { position: absolute; top: 0; left: 0; width: 132px; height: 198px; border-radius: 11px; overflow: hidden; background: #0b0e13; display: grid; place-items: center; font-size: 40px; box-shadow: 0 10px 28px rgba(0,0,0,.45); backface-visibility: hidden; }
.mr-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mr-card.mr-win { outline: 3px solid var(--accent); box-shadow: 0 0 36px var(--accent), 0 10px 28px rgba(0,0,0,.5); z-index: 2; }
.mr-name { font-size: 16px; font-weight: 700; color: var(--ink); min-height: 22px; }
.mr-act { display: flex; gap: 8px; }
.mr-view { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.mr-again { font: inherit; font-weight: 700; padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; }
/* Recipe: read-method (Gordon Ramsay) button */
.rcp-method-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rcp-method-h h3 { margin: 0; }
.rcp-read { font: inherit; font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 0; background: #e0342e; color: #fff; cursor: pointer; white-space: nowrap; }
.rcp-read:hover { filter: brightness(1.07); }
.rcp-read:disabled { opacity: .7; }
/* TMDB detail modal */
.tmdb-modal .art-hero { aspect-ratio: 16 / 9; }
.tmdb-rate { display: inline-block; font-size: 14px; font-weight: 800; color: var(--accent); }
.tmdb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 14px; flex-wrap: wrap; }
.tmdb-head .rcp-watch { margin: 0; }
/* ▶ Play on Plex — Plex's own amber, so "you already have this" reads differently from the
   red trailer button and the Radarr grab. Only ever rendered when the film is really there. */
.tmdb-plex { background: #e5a00d !important; color: #1f1300 !important; }
.tmdb-plex:hover { filter: brightness(1.08); }
/* when Plex already has it, the "Get it" button stays available but stops competing */
.tmdb-grab-dim { opacity: .45; }
.tmdb-grab-dim:hover { opacity: 1; }
.posters-fit { overflow: hidden; }
.tmdb-ov { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.tmdb-cast { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.tmdb-cast span { font-size: 11.5px; background: var(--field); border-radius: 999px; padding: 3px 9px; color: var(--ink-2); }

/* Lyrics */
.lyr { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.lyr-bar { display: flex; gap: 6px; }
.lyr-a, .lyr-t { flex: 1 1 0; min-width: 0; }
.lyr-go { flex: 0 0 auto; font: inherit; font-weight: 700; padding: 0 14px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.lyr-out { flex: 1 1 auto; overflow-y: auto; }
.lyr-tx { font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; }
.lyr-hint { color: var(--faint); font-size: 12.5px; text-align: center; padding: 20px; }

/* Podcasts */
.pod { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.pod-bar { display: flex; gap: 6px; }
.pod-q { flex: 1 1 auto; min-width: 0; }
.pod-go { flex: 0 0 auto; border: 0; border-radius: 9px; background: var(--accent); color: #fff; padding: 0 13px; cursor: pointer; font-size: 15px; }
.pod-out { flex: 1 1 auto; overflow-y: auto; }
.pod-hint { color: var(--faint); font-size: 12.5px; text-align: center; padding: 20px; }
.pod-list { display: flex; flex-direction: column; gap: 4px; }
.pod-item { display: flex; align-items: center; gap: 9px; padding: 6px; border: 0; background: none; border-radius: 9px; cursor: pointer; text-align: left; width: 100%; }
.pod-item:hover { background: var(--field); }
.pod-item img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.pod-ttl { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.pod-art { font-size: 11px; color: var(--muted); }
.pod-modal { max-width: 560px; }
.pod-audio { width: 100%; margin-bottom: 10px; }
.pod-eps { display: flex; flex-direction: column; gap: 3px; max-height: 50vh; overflow-y: auto; }
.pod-ep { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; background: none; border-radius: 8px; cursor: pointer; text-align: left; width: 100%; }
.pod-ep:hover, .pod-ep.on { background: var(--field); }
.pod-ep-play { color: var(--accent); font-size: 12px; }
.pod-ep-ttl { font-size: 13px; font-weight: 600; color: var(--ink); }
.pod-ep-meta { font-size: 11px; color: var(--muted); }

/* Air Radar */
.ar { display: flex; gap: 12px; height: 100%; }
.ar-standard, .ar-large { flex-direction: column; }
.ar-scope-wrap { flex: 1 1 auto; min-height: 90px; display: grid; place-items: center; }
.ar-scope { width: 100%; height: 100%; }
.ar-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.ar-standard .ar-list, .ar-large .ar-list { flex: 0 0 auto; max-height: 46%; }
.ar-row { display: grid; grid-template-columns: 1fr auto 62px 48px; gap: 8px; align-items: baseline; font-size: 12px; padding: 4px 0; border-bottom: 1px solid var(--line-2); }
.ar-call { font-weight: 700; color: var(--ink); }
.ar-type { color: var(--muted); font-size: 11px; }
.ar-alt, .ar-dist { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 11px; }
.ar-empty { color: var(--faint); font-size: 12px; text-align: center; padding: 20px; }

/* Emoji */
.emo { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.emo-cats { display: flex; gap: 3px; flex-wrap: wrap; }
.emo-cat { font-size: 17px; width: 32px; height: 30px; border: 0; border-radius: 8px; background: var(--field); cursor: pointer; }
.emo-cat.on { background: var(--accent-soft); outline: 1.5px solid var(--accent); }
.emo-search { flex: 0 0 auto; width: 100%; font: inherit; font-size: 13px; padding: 8px 11px; border-radius: 9px; background: var(--field); border: 1.5px solid var(--line); color: var(--ink); }
.emo-search:focus { outline: none; border-color: var(--accent); }
.emo-grid { flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; }
.emo-e { font-size: 21px; height: 36px; border: 0; background: none; border-radius: 7px; cursor: pointer; transition: transform .1s ease; }
.emo-e:hover { background: var(--field); transform: scale(1.75); z-index: 2; position: relative; }
/* Symbols (Material Symbols grid) */
.sym-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 4px; }
.sym-e { height: 44px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.sym-e .material-symbols-outlined { font-size: 24px; }
.sym-e:hover { background: var(--field); transform: scale(1.55); }

/* Stories */
.sto { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.sto-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border: 0; background: none; border-radius: 9px; cursor: pointer; text-align: left; width: 100%; border-bottom: 1px solid var(--line-2); }
.sto-item:hover { background: var(--field); }
.sto-ic { font-size: 20px; flex: 0 0 auto; }
.sto-ttl { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sto-meta { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.sto-modal .art-hero { display: none; }
.sto-body { font-size: 15px; line-height: 1.7; color: var(--ink-2); margin-top: 12px; }
.sto-body p { margin: 0 0 14px; }

/* Directions */
.dir { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.dir-f { display: flex; flex-direction: column; gap: 3px; }
.dir-f label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.dir-f input { width: 100%; }
.dir-go { font: inherit; font-weight: 700; padding: 9px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; margin-top: 2px; }
.dir-msg { font-size: 12px; color: var(--muted); }
.dir-modal { max-width: 560px; }
.dir-route { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.dir-stats { display: flex; gap: 20px; margin-bottom: 14px; }
.dir-eta { font-size: 26px; font-weight: 800; color: var(--accent); }
.dir-km { font-size: 26px; font-weight: 800; color: var(--ink); }
.dir-steps { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; max-height: 44vh; overflow-y: auto; }
.dir-step { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.dir-step-n { color: var(--accent); font-weight: 800; font-size: 11px; }
.dir-step-d { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

/* Camera Feeds */
.cams { display: grid; gap: 10px; overflow-y: auto; align-content: start; }
.cam { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.cam-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--field); }
.cam-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-live { position: absolute; top: 5px; left: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(224,52,46,.92); padding: 2px 6px; border-radius: 5px; }
.cam-ttl { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cam:hover .cam-thumb { outline: 2px solid var(--accent); outline-offset: 1px; }
.cam-added { position: absolute; bottom: 5px; right: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: .03em; color: #fff; background: rgba(34,164,93,.95); padding: 2px 6px; border-radius: 5px; }
.cam-on .cam-thumb { outline: 2px solid var(--accent); outline-offset: 1px; }
/* camera opened as its own tile — the live feed fills the tile edge-to-edge */
.tile-cam { padding: 12px 12px 12px; }
.tile-cam .tile-head { margin-bottom: 9px; }
.tile-cam .tile-body { padding: 0; }
.camtile-wrap { flex: 1 1 auto; position: relative; min-height: 120px; border-radius: 10px; overflow: hidden; background: #000; }
.camtile-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.camtile-rm { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; border: 0; border-radius: 7px; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .15s; z-index: 3; display: grid; place-items: center; }
.tile-cam:hover .camtile-rm { opacity: 1; }
.camtile-rm:hover { background: var(--bad); }
.cam-modal { max-width: 520px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.cam-frame-wrap { flex: 1 1 auto; min-height: 0; background: #000; }
.cam-frame { width: 100%; height: 100%; min-height: 200px; border: 0; display: block; }

/* TV resume badge */
.tv-resume { position: absolute; bottom: 5px; left: 6px; font-size: 9.5px; font-weight: 800; color: #fff; background: rgba(34,164,93,.92); padding: 2px 6px; border-radius: 5px; }
.tv-thumb.has-thumb { background-size: cover; background-position: center; }

/* ═══════════ WAVE 3B tiles ═══════════ */
.tile-hint { color: var(--muted); font-size: 12.5px; text-align: center; padding: 20px 14px; line-height: 1.5; }
.ar-row { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.ar-row:hover { background: var(--field); border-radius: 6px; }
/* Air Radar flight modal */
.fl-modal { max-width: 560px; }
.fl-photo { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.fl-photo img { width: 100%; display: block; }
.fl-credit { position: absolute; bottom: 5px; right: 8px; font-size: 10px; color: #fff; text-shadow: 0 1px 3px #000; }
.fl-rows { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.fl-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.fl-row span { color: var(--muted); } .fl-row b { color: var(--ink); }
.fl-ports { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fl-port { font-size: 12px; color: var(--ink-2); background: var(--field); padding: 6px 10px; border-radius: 9px; }
.fl-port b { color: var(--accent); }
/* Video Games */
.games { display: grid; gap: 10px; overflow-y: auto; align-content: start; }
.game { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.game-bg { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: var(--field); display: grid; place-items: center; font-size: 24px; }
.game-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-mc { position: absolute; top: 5px; right: 5px; font-size: 10.5px; font-weight: 800; color: #fff; background: rgba(34,164,93,.92); padding: 2px 6px; border-radius: 5px; }
.game-nm { font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.game:hover .game-bg { outline: 2px solid var(--accent); outline-offset: 1px; }
.game-modal .art-hero { aspect-ratio: 16 / 9; }
/* My Voice */
.voice { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.voice-tx { width: 100%; resize: none; flex: 1 1 auto; min-height: 54px; }
.voice-bar { display: flex; gap: 6px; }
.voice-sel { flex: 1 1 auto; min-width: 0; }
.voice-go { flex: 0 0 auto; font: inherit; font-weight: 700; padding: 0 14px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.voice-msg { font-size: 12px; color: var(--muted); min-height: 16px; }
/* eBay Orders */
.eb { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.eb-tabs { display: flex; gap: 5px; flex: 0 0 auto; align-items: center; }
.eb-tab { flex: 1 1 auto; background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; font: inherit; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.eb-tab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.eb-refresh { flex: 0 0 auto; width: 30px; height: 30px; background: var(--field); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink); }
.eb-view { flex: 1 1 auto; overflow-y: auto; }
.eb-list { display: flex; flex-direction: column; gap: 8px; }
.eb-order { border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; background: var(--field); }
.eb-otop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13.5px; }
.eb-pill { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.eb-pill.ok { background: rgba(74,222,128,.16); color: #22a45d; }
.eb-pill.post { background: rgba(255,180,40,.16); color: #d98a00; }
.eb-pill.unpaid { background: rgba(248,113,113,.16); color: #e0342e; }
.eb-items { font-size: 12.5px; color: var(--ink); margin: 4px 0 2px; }
.eb-addr { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.eb-meta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 3px; }
.eb-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eb-acts button, .eb-msgbtn { font: inherit; font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; cursor: pointer; text-decoration: none; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.eb-label:hover, .eb-msgbtn:hover { border-color: var(--accent); }
.eb-ship { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.eb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.eb-stat { background: var(--field); border: 1px solid var(--line); border-radius: 11px; padding: 10px; text-align: center; }
.eb-static { font-size: 18px; } .eb-statn { font-size: 17px; font-weight: 800; color: var(--ink); } .eb-statl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.eb-linkhead { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 12px 0 6px; }
.eb-links { display: flex; flex-direction: column; gap: 5px; }
.eb-link { text-decoration: none; background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; color: var(--accent); font-weight: 600; font-size: 12.5px; }
.eb-msgs { display: flex; flex-direction: column; gap: 8px; }
.eb-msg { border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px; background: var(--field); }
.eb-msg.unread { border-color: var(--accent); }
.eb-msgtop { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.eb-msgwhen { color: var(--muted); font-size: 11px; }
.eb-msgsub { font-size: 12.5px; font-weight: 600; margin: 2px 0; }
.eb-msgtext { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.eb-msgreply { display: inline-block; margin-top: 6px; font-size: 11.5px; color: var(--accent); text-decoration: none; }
.tile-flash { animation: tileflash 1.4s ease; }
/* v1.93 — "show me the X tile": a red border pulse for about a second so a tile you'd lost track of is
   unmistakable. outline (not border) so it can't nudge the grid layout, and a glow that fades out. */
.tile-spot { animation: tilespot 1.2s cubic-bezier(.3, .7, .3, 1) 1; z-index: 20; }
@keyframes tilespot {
  0%   { outline: 3px solid rgba(232, 62, 62, 0); outline-offset: 6px; box-shadow: var(--shadow); }
  12%  { outline: 3px solid rgba(232, 62, 62, 1); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(232, 62, 62, .28), var(--shadow-hi); }
  55%  { outline: 3px solid rgba(232, 62, 62, .9); outline-offset: 2px; box-shadow: 0 0 0 10px rgba(232, 62, 62, .16), var(--shadow-hi); }
  100% { outline: 3px solid rgba(232, 62, 62, 0); outline-offset: 2px; box-shadow: var(--shadow); }
}
@media (prefers-reduced-motion: reduce) { .tile-spot { animation-duration: .01s; outline: 3px solid rgba(232, 62, 62, .9); } }
/* v2.39 — "Iris, locate the weather tile". Unlike .tile-spot this does NOT time out on its own: it holds
   the red outline until he clicks, presses a key, or 12s passes, because the whole point is to give his
   eye time to find the tile. The breathing halo is what carries it across a busy board; the outline alone
   disappears into the tile borders at a glance. */
.tile-locate { outline: 3px solid rgba(232, 62, 62, .95); outline-offset: 2px; z-index: 20;
  animation: tilelocate 1.6s ease-in-out infinite; }
@keyframes tilelocate {
  0%, 100% { box-shadow: 0 0 0 4px rgba(232, 62, 62, .30), var(--shadow-hi); }
  50%      { box-shadow: 0 0 0 12px rgba(232, 62, 62, .10), var(--shadow-hi); }
}
@media (prefers-reduced-motion: reduce) { .tile-locate { animation: none; box-shadow: 0 0 0 6px rgba(232, 62, 62, .25), var(--shadow-hi); } }
@keyframes tileflash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 25% { box-shadow: 0 0 0 3px var(--accent); } }
/* ── 📧 Gmail message view (v2.46) ─────────────────────────────────────────────────────────────── */
/* the list rows became buttons so they are keyboard-reachable — strip the button chrome back off */
.gm-msg { display: block; width: 100%; text-align: left; font: inherit; border: 0; background: none;
  padding: 7px 2px; border-bottom: 1px solid var(--line-2); cursor: pointer; color: inherit; }
.gm-msg:hover { background: var(--field); }
.gm-modal { width: min(820px, 96vw); }
.gmv-h { border-bottom: 1px solid var(--line-2); padding-bottom: 9px; margin-bottom: 10px; }
.gmv-subj { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.gmv-from { font-size: 12px; color: var(--muted); margin-top: 3px; }
.gmv-when { color: var(--faint); }
/* pre-wrap: it is plain text on purpose (never the sender's HTML), so keep the sender's line breaks */
.gmv-body { font-size: 13px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 46vh; overflow-y: auto; padding: 2px 2px 10px; }
.gmv-acts { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 11px; border-top: 1px solid var(--line-2); }
.gmv-b { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 12px; border-radius: 9px;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none; }
.gmv-b:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.gmv-b:disabled { opacity: .45; cursor: default; }
.gmv-del:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); }
.gmv-open { margin-left: auto; color: var(--muted); }
.gmv-msg { font-size: 12px; font-weight: 600; margin-top: 9px; min-height: 16px; color: var(--muted); }
.gmv-msg.ok { color: var(--accent); }
.gmv-msg.bad { color: var(--bad); }
.gml-modal { width: min(520px, 94vw); }
.gml-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.gml-i { font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; }
.gml-i:hover { border-color: var(--accent); }
.gml-i.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.gml-arch { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* ── 🔌 Bedroom powerpoint (v2.46) ─────────────────────────────────────────────────────────────── */
.bp { display: flex; flex-direction: column; gap: 9px; height: 100%; min-height: 0; }
.bp-socks { display: flex; gap: 8px; }
/* big targets — this gets pressed at night, half asleep, on a wall display */
.bp-sock { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; padding: 12px 8px; border-radius: 12px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--field); color: var(--muted); transition: background .12s ease, border-color .12s ease; }
.bp-sock:hover { border-color: var(--accent); }
.bp-sock.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.bp-sock.bp-busy { opacity: .55; }
.bp-sk { font-size: 20px; line-height: 1; }
.bp-sn { font-size: 12px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bp-sock.on .bp-sn { color: var(--accent); }
.bp-ss { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bp-live, .bp-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.bp-fig { flex: 1 1 0; min-width: 62px; text-align: center; background: var(--field); border-radius: 9px; padding: 7px 4px; }
.bp-fig b { display: block; font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.bp-fig span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-top: 1px; }
.bp-note { font-size: 10.5px; line-height: 1.5; color: var(--faint); }
.bp-usage { margin-top: auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: 9px;
  border: 1.5px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.bp-usage:hover { border-color: var(--accent); color: var(--accent); }
.bp-modal { width: min(760px, 95vw); }
.bp-sum { margin-bottom: 14px; }
.bp-bars { display: flex; align-items: flex-end; gap: 4px; height: 190px; padding-top: 16px; }
.bp-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.bp-bfill { display: block; width: 100%; max-width: 34px; background: var(--accent); border-radius: 5px 5px 0 0; min-height: 2px; }
/* today is still accumulating — it must not read as a finished day that happened to be quiet */
.bp-bar.bp-part .bp-bfill { background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 4px, var(--accent-soft) 4px, var(--accent-soft) 8px); }
.bp-bval { font-size: 9.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.bp-blbl { font-size: 9px; color: var(--faint); margin-top: 4px; white-space: nowrap; transform: rotate(-38deg); transform-origin: center; }

/* ── 🚦 Site Traffic risk dial (v2.45) ──────────────────────────────────────────────────────────────
   SVG, not canvas: it costs nothing between the tile's 5-second updates (no rAF, nothing for the paint
   budget to gate) and its text is real text, so Iris can read the verdict rather than guess at a
   picture. */
.slm-gauge { margin: 2px 0 6px; }
.slm-sv { display: block; width: 100%; max-width: 260px; margin: 0 auto; height: auto; }
.slm-gnum { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.slm-glbl { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; fill: var(--muted); }
.slm-gend { font-size: 8.5px; font-weight: 700; fill: var(--faint); }
.slm-verdict { font-size: 12px; line-height: 1.45; text-align: center; margin-top: 2px; color: var(--muted); }
.slm-verdict b { color: var(--ink); }
.slm-verdict.slm-safe b { color: #22a45d; }
.slm-verdict.slm-busy b { color: #e0a52e; }
.slm-verdict.slm-heavy b { color: #e8792e; }
.slm-verdict.slm-danger b { color: var(--bad); }
/* the sentence that answers "at what point does it collapse" — deliberately not hidden behind a tooltip */
.slm-note { font-size: 10.5px; line-height: 1.5; color: var(--faint); margin-top: 6px; text-align: center; }
.slm-note b { color: var(--muted); }
.slm-note .slm-hit { color: var(--bad); }

/* ── 🌱 My Lawn ─────────────────────────────────────────────────────────────────────────────────── */
.lwn { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
/* the photograph is the tile — it takes whatever height is left and crops rather than letterboxes,
   so the grass fills the frame at every tile size */
.lwn-hero { flex: 1 1 auto; min-height: 0; position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: var(--field); border-radius: 10px; overflow: hidden; cursor: pointer; }
.lwn-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lwn-stamp { position: absolute; left: 8px; bottom: 8px; font-size: 11.5px; font-weight: 700; color: #fff;
  background: rgba(0, 0, 0, .55); padding: 3px 8px; border-radius: 999px; backdrop-filter: blur(3px); }
.lwn-late { font-style: normal; font-weight: 600; opacity: .8; }
.lwn-none { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 12.5px; color: var(--muted); line-height: 1.5; padding: 14px; border: 1.5px dashed var(--line); border-radius: 10px; }
/* today's four slots, at a glance */
.lwn-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lwn-chip { font-size: 10.5px; font-weight: 800; padding: 3px 7px; border-radius: 999px; letter-spacing: .01em;
  background: var(--field); color: var(--muted); white-space: nowrap; }
.lwn-chip.ok { background: var(--accent-soft); color: var(--accent); }
.lwn-chip.due { background: rgba(224, 165, 46, .16); color: #e0a52e; }
/* a closed, unfilled slot is a permanent hole in the record — it should look like one */
.lwn-chip.miss { background: rgba(224, 90, 78, .14); color: var(--bad); }
.lwn-log { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; min-height: 0; }
.lwn-ev { display: flex; align-items: baseline; gap: 7px; font-size: 11.5px; padding: 3px 0; border-bottom: 1px solid var(--line-2); }
.lwn-evk { font-weight: 700; color: var(--ink); white-space: nowrap; }
.lwn-evw { color: var(--faint); font-size: 10.5px; white-space: nowrap; }
.lwn-evn { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.lwn-evx { margin-left: auto; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 11px; padding: 0 2px; }
.lwn-evx:hover { color: var(--bad); }
.lwn-bar { display: flex; gap: 6px; margin-top: auto; }
.lwn-bar button { font: inherit; font-size: 12px; font-weight: 700; padding: 7px 10px; border-radius: 9px;
  border: 1.5px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.lwn-bar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.lwn-bar button:disabled { opacity: .45; cursor: default; }
.lwn-play { flex: 1 1 auto; }
.lwn-modal { width: min(1100px, 96vw); }
.lwn-full img { width: 100%; height: auto; display: block; border-radius: 10px; }
.lwn-meta { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.lwn-dayev, .lwp-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.lwn-tag { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }

/* the timelapse */
.lwn-player { width: min(1100px, 96vw); }
.lwp-stage { position: relative; background: #000; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; }
.lwp-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lwp-cap { position: absolute; left: 10px; bottom: 10px; font-size: 13px; font-weight: 800; color: #fff;
  background: rgba(0, 0, 0, .58); padding: 4px 10px; border-radius: 999px; }
.lwp-tags { position: absolute; right: 10px; bottom: 10px; margin: 0; max-width: 55%; justify-content: flex-end; }
.lwp-scrub { position: relative; margin: 12px 0 4px; }
.lwp-range { width: 100%; display: block; }
/* the marks sit UNDER the slider and line up with it — a day he did something to the lawn */
.lwp-marks { position: relative; height: 9px; margin-top: 1px; }
.lwp-mark { position: absolute; top: 0; width: 3px; height: 9px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); }
.lwp-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.lwp-bar button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 9px;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; }
.lwp-bar button:hover { border-color: var(--accent); color: var(--accent); }
.lwp-play { min-width: 92px; }
.lwp-del { margin-left: auto; color: #e0736b; border-color: rgba(224,115,107,.45) !important; }
.lwp-del:hover { color: #fff !important; border-color: #e0736b !important; background: rgba(224,115,107,.9); }
.lwp-del:disabled { opacity: .5; cursor: default; }
.lwp-bar select { font: inherit; font-size: 12.5px; padding: 6px 8px; border-radius: 9px; border: 1.5px solid var(--line);
  background: var(--field); color: var(--ink); }
.lwp-bar select:disabled { opacity: .45; }
.lwp-hint { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin-top: 10px; }
@media (max-width: 720px) { .lwp-bar { gap: 6px; } .lwp-bar button, .lwp-bar select { font-size: 12px; padding: 6px 9px; } }

/* Birthdays */
.bd { display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.bd-item { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.bd-when { flex: 0 0 auto; min-width: 60px; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.bd-when.now { color: var(--bad); }
/* the name + date block is a button so the whole row edits — a real target on a phone, where ✎ is not */
.bd-tx { flex: 1 1 auto; min-width: 0; display: block; text-align: left; font: inherit; border: 0; background: none; padding: 0; margin: 0; color: inherit; cursor: pointer; border-radius: 6px; }
.bd-tx:hover .bd-name { color: var(--accent); }
.bd-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-date { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-date.bd-noyear { font-style: italic; opacity: .8; }
.bd-ed, .bd-x { flex: 0 0 auto; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 12px; padding: 4px 3px; line-height: 1; }
.bd-ed:hover { color: var(--accent); }
.bd-x:hover { color: var(--bad); }
/* at micro there is only room for the countdown and the name; the row itself still edits */
.bd-micro .bd-ed { display: none; }
.bd-micro .bd-when { min-width: 48px; font-size: 11.5px; }
.bd-add { margin-top: auto; font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: 9px; border: 1.5px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.bd-add:hover { border-color: var(--accent); color: var(--accent); }
.bd-dm { display: flex; gap: 8px; } .bd-dm .tl-field { flex: 1 1 0; }
.bd-hint { font-size: 11.5px; color: var(--muted); margin: 2px 0 4px; }
.bd-err { font-size: 12px; font-weight: 600; color: var(--bad); margin: 2px 0 6px; }
/* Calorie + Exercise */
.cal { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.cal-top { text-align: center; }
.cal-big { font-size: 34px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.cal-big.over { color: var(--bad); }
.cal-of { font-size: 15px; color: var(--muted); font-weight: 600; }
.cal-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.cal-bar { height: 8px; border-radius: 999px; background: var(--field); overflow: hidden; }
.cal-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s; }
.cal-fill.over { background: var(--bad); }
.cal-log { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cal-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line-2); }
.cal-rn { flex: 1 1 auto; font-size: 12.5px; color: var(--ink); }
.cal-rk { font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-x { border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 11px; }
.cal-x:hover { color: var(--bad); }
.cal-add { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px; border-radius: 9px; border: 1.5px dashed var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.cal-add:hover { border-color: var(--accent); color: var(--accent); }
.cal-q { width: 100%; margin-bottom: 10px; }
.cal-foods { display: flex; flex-direction: column; gap: 3px; max-height: 50vh; overflow-y: auto; }
.cal-food { display: flex; justify-content: space-between; gap: 10px; padding: 9px 11px; border: 0; background: var(--field); border-radius: 9px; cursor: pointer; text-align: left; font: inherit; font-size: 13px; color: var(--ink); }
.cal-food:hover { outline: 1.5px solid var(--accent); }
.cal-food b { color: var(--accent); }
.cal-frow { display: flex; gap: 4px; align-items: stretch; }
.cal-frow .cal-food { flex: 1 1 auto; }
.cal-fedit { flex: 0 0 auto; width: 36px; border: 0; background: var(--field); border-radius: 9px; cursor: pointer; color: var(--muted); font-size: 13px; }
.cal-fedit:hover { color: var(--accent); }
.cal-newfood { margin-top: 8px; width: 100%; }
.cal-qty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 10px 0; }
.cal-qname { font-size: 15px; font-weight: 700; color: var(--ink); text-align: center; }
.cal-qtotal { font-size: 15px; color: var(--muted); } .cal-qtotal b { font-size: 30px; color: var(--accent); font-variant-numeric: tabular-nums; }
.cal-qstep { display: flex; align-items: center; gap: 10px; }
.cal-qm, .cal-qp { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--field); font-size: 22px; cursor: pointer; color: var(--ink); }
.cal-qm:hover, .cal-qp:hover { background: var(--accent); color: #fff; }
.cal-qn { width: 80px; text-align: center; font-size: 18px; font-weight: 700; }
.cal-qty .set-acts { width: 100%; }
.ex-add { display: flex; gap: 6px; }
.ex-t { flex: 1 1 auto; min-width: 0; } .ex-m { width: 64px; }
.ex-go { flex: 0 0 auto; width: 36px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-size: 17px; cursor: pointer; }
/* Spotify Music */
.spm { display: flex; flex-direction: column; height: 100%; justify-content: center; gap: 16px; }
.spm-off { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; }
.spm-now { display: flex; align-items: center; gap: 12px; }
.spm-art { width: 60px; height: 60px; border-radius: 10px; background: var(--field); display: grid; place-items: center; font-size: 26px; overflow: hidden; flex: 0 0 auto; }
.spm-art img { width: 100%; height: 100%; object-fit: cover; }
.spm-ttl { font-size: 15px; font-weight: 700; color: var(--ink); }
.spm-artist { font-size: 12.5px; color: var(--muted); }
.spm-ctl { display: flex; align-items: center; justify-content: center; gap: 16px; }
.spm-b { border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--ink-2); }
.spm-b.spm-play { font-size: 30px; color: var(--accent); }
.spm-b:hover { color: var(--accent); }

/* Spotify — full player */
.spot { display: flex; flex-direction: column; height: 100%; gap: 9px; }
.spot-head { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.spot-art { width: 52px; height: 52px; border-radius: 9px; background: var(--field); display: grid; place-items: center; font-size: 22px; overflow: hidden; flex: 0 0 auto; }
.spot-art img { width: 100%; height: 100%; object-fit: cover; }
.spot-now { min-width: 0; }
.spot-ttl { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-artist { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-ctl { display: flex; align-items: center; justify-content: center; gap: 16px; flex: 0 0 auto; }
.spot-cb { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--ink-2); }
.spot-cb.spot-pp { font-size: 26px; color: #1db954; }
.spot-cb:hover { color: #1db954; }
.spot-devrow { flex: 0 0 auto; }
.spot-devsel, .spot-plsel { width: 100%; font: inherit; font-size: 12.5px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--ink); }
.spot-devsel option, .spot-plsel option { color: #111; }
.spot-volrow { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; font-size: 12px; color: var(--muted); }
.spot-vol { flex: 1 1 auto; accent-color: #1db954; }
.spot-plrow { display: flex; gap: 6px; flex: 0 0 auto; }
.spot-plrow .spot-plsel { flex: 1 1 auto; }
.spot-playpl { flex: 0 0 auto; background: #1db954; color: #fff; border: 0; border-radius: 9px; width: 40px; cursor: pointer; font-size: 14px; }
.spot-search { display: flex; gap: 6px; flex: 0 0 auto; }
.spot-q { flex: 1 1 auto; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; color: var(--ink); font: inherit; font-size: 12.5px; }
.spot-search button { flex: 0 0 auto; background: var(--field); border: 1px solid var(--line); border-radius: 9px; width: 38px; cursor: pointer; }
.spot-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
.spot-trk { display: flex; align-items: center; gap: 9px; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 7px 3px; cursor: pointer; text-align: left; width: 100%; color: var(--ink); }
.spot-tn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.spot-tn b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-tn i { font-size: 11px; color: var(--muted); font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spot-tart { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; flex: 0 0 auto; }
.spot-tplay { flex: 0 0 auto; color: #1db954; font-size: 13px; }

/* ═══════════ My Trains ═══════════ */
.trn { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.trn-bar { display: flex; align-items: center; gap: 6px; }
.trn-from, .trn-to { flex: 1 1 0; min-width: 0; }
.trn-arrow { color: var(--faint); flex: 0 0 auto; }
.trn-go { flex: 0 0 auto; font: inherit; font-weight: 700; padding: 0 13px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }
.trn-out { flex: 1 1 auto; overflow-y: auto; }
.trn-hint { color: var(--faint); font-size: 12.5px; text-align: center; padding: 18px; }
.trn-list { display: flex; flex-direction: column; gap: 4px; }
.trn-j { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); cursor: pointer; text-align: left; width: 100%; font: inherit; }
.trn-j:hover { border-color: var(--accent); }
.trn-times { display: flex; align-items: baseline; gap: 8px; }
.trn-dep { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.trn-arr { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.trn-info { display: flex; gap: 8px; font-size: 11px; color: var(--muted); flex-wrap: wrap; align-items: center; }
.trn-dur { font-weight: 700; color: var(--accent); }
.trn-ch { }
.trn-line { color: var(--ink-2); font-weight: 600; }
.trn-modal { max-width: 520px; }
.trn-jhead { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.trn-legs { display: flex; flex-direction: column; gap: 10px; }
.trn-leg { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }
.trn-leg.walk { border-left-color: var(--faint); }
.trn-leg-line { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.trn-leg-dest { font-weight: 500; color: var(--muted); }
.trn-leg-od { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; color: var(--ink-2); }
.trn-leg-od b { color: var(--ink); font-variant-numeric: tabular-nums; }
.trn-leg-stops { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* ═══════════ Label Printer ═══════════ */
.lp { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.lp-tpls { display: flex; flex-wrap: wrap; gap: 4px; }
.lp-tpl { font: inherit; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; }
.lp-tpl.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lp-fields { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.lp-fields .tl-field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.lp-fields input, .lp-fields textarea, .lp-fields select { width: 100%; }
.lp-bcrow { display: flex; gap: 6px; }
.lp-bcrow input { flex: 1 1 auto; min-width: 0; }
.lp-stamp { flex: 0 0 auto; width: 38px; border: 1.5px solid var(--line); background: var(--field); border-radius: 9px; cursor: pointer; }
.lp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lp-qty { font-size: 12.5px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.lp-q { width: 60px; }
.lp-print { font: inherit; font-weight: 700; padding: 9px 18px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }

/* ═══════════ RSS feeds settings + World Clock picker ═══════════ */
.ms-feeds { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ms-feed { display: flex; gap: 8px; align-items: center; }
.ms-feedu { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 9px 11px; border-radius: 9px; background: var(--field); border: 1.5px solid var(--line); color: var(--ink); }
.ms-feedu:focus { outline: none; border-color: var(--accent); }
.ms-feedrm { flex: 0 0 auto; border: 0; background: none; color: var(--faint); font-size: 13px; cursor: pointer; padding: 4px 6px; }
.ms-feedrm:hover { color: var(--bad); }
.wcp { margin-top: 4px; }
.wcp-row { display: flex; gap: 6px; flex-wrap: wrap; }
.wcp-row select { flex: 1 1 0; min-width: 0; }
.wcp-add { flex: 0 0 auto; font: inherit; font-weight: 700; padding: 0 12px; border-radius: 9px; border: 0; background: var(--accent); color: #fff; cursor: pointer; }

/* ═══════════ Flash toast ═══════════ */
.tl-flash { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); background: var(--ink); color: var(--bg); font-weight: 600; font-size: 13.5px; padding: 10px 18px; border-radius: 12px; box-shadow: 0 10px 34px rgba(0,0,0,.32); z-index: 9000; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; max-width: 80vw; text-align: center; }
.tl-flash.show { opacity: .97; transform: translate(-50%, 0); }
.tl-load, .tl-empty { padding: 10px 2px; color: var(--muted); font-size: 13px; }

/* ═══════════ TG Links ═══════════ */
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
.tgl { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.tgl-top { display: flex; gap: 6px; flex: 0 0 auto; }
.tgl-search { flex: 1 1 auto; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; color: var(--ink); font: inherit; font-size: 13px; }
.tgl-refresh { flex: 0 0 auto; background: var(--field); border: 1px solid var(--line); border-radius: 9px; width: 34px; cursor: pointer; font-size: 14px; }
/* min-height:0 is what makes this scrollable: without it a flex item never shrinks below its content
   height, so the grid overflowed .tile (overflow:hidden) and the extra rows were simply CLIPPED —
   the wheel had nothing to scroll. overscroll-behavior stops the board jumping at either end. */
/* grid-auto-rows:max-content is load-bearing. An `auto` row is minmax(auto,max-content), and because
   .tgl-tile is overflow:hidden its automatic minimum size is 0 — so with a definite-height grid the
   rows were SQUEEZED (14 rows crushed to 18px each, icons clipped to slivers) instead of overflowing.
   max-content rows can't shrink below their content, so the tiles keep their real height and the
   surplus scrolls. aspect-ratio then makes each one a true square. */
.tgl-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); grid-auto-rows: max-content; gap: 7px; align-content: start; }
.tgl-tile { --tc: var(--accent); aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px 6px; background: var(--field); border: 1px solid var(--line); border-radius: 11px; text-decoration: none; color: var(--ink); transition: transform .12s, border-color .12s; overflow: hidden; }
.tgl-tile:hover { transform: translateY(-2px); border-color: var(--tc); }
.tgl-ic { font-size: 22px; color: var(--tc); }
.tgl-tile img { width: 26px; height: 26px; object-fit: contain; border-radius: 5px; }
.tgl-lbl { font-size: 9.5px; line-height: 1.15; text-align: center; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ═══════════ Investigate (OSINT) ═══════════ */
.os { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.os-modes { display: flex; gap: 5px; flex-wrap: wrap; flex: 0 0 auto; }
.os-mode { background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: 12px; cursor: pointer; color: var(--muted); }
.os-mode.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.os-search { display: flex; gap: 6px; flex: 0 0 auto; }
.os-q { flex: 1 1 auto; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; color: var(--ink); font: inherit; font-size: 13px; }
.os-search button { flex: 0 0 auto; background: var(--accent); color: #fff; border: 0; border-radius: 9px; width: 40px; cursor: pointer; }
.os-note { font-size: 11px; color: var(--muted); flex: 0 0 auto; }
.os-results { flex: 1 1 auto; overflow-y: auto; }
.os-note2 { font-size: 13px; color: var(--muted); padding: 8px 0; }
.os-good { background: rgba(74,222,128,.12); border: 1px solid #4ade80; border-radius: 11px; padding: 12px; font-size: 13px; }
.os-empty { color: var(--muted); padding: 12px 0; font-size: 13px; }
.os-riskcard { border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 13px; margin-bottom: 9px; }
.os-riskhd { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.os-riskdot { width: 11px; height: 11px; border-radius: 50%; }
.os-riskscore { font-size: 11px; color: var(--muted); font-weight: 600; }
.os-riskn { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.os-ucard { font-size: 13px; }
.os-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin: 9px 0 5px; }
.os-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.os-chip { background: var(--field); border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; font-size: 11.5px; }
.os-chip-x { background: rgba(248,113,113,.14); border-color: rgba(248,113,113,.4); color: #f87171; }
.os-ulist { display: flex; flex-direction: column; gap: 4px; }
.os-urow { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }
.os-usite { flex: 1 1 auto; }
.os-ust { font-size: 11px; color: var(--muted); }
.os-u-found { border-color: rgba(74,222,128,.45); }
.os-brow { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.os-blogo { width: 34px; height: 34px; object-fit: contain; border-radius: 6px; flex: 0 0 auto; }
.os-bname { font-weight: 600; font-size: 13px; } .os-bname small { color: var(--muted); font-weight: 400; }
.os-bsub { font-size: 11.5px; color: var(--muted); margin: 2px 0; }
.os-bdesc { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ═══════════ Gmail ═══════════ */
.gm { display: flex; flex-direction: column; height: 100%; }
.gm-head { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); padding-bottom: 7px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.gm-unread { color: #ea4335; font-weight: 800; }
.gm-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
.gm-msg { padding: 7px 4px 7px 16px; border-bottom: 1px solid var(--line); position: relative; }
.gm-dot { position: absolute; left: 3px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.gm-new .gm-dot { background: #ea4335; }
.gm-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.gm-from { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-new .gm-from { font-weight: 800; }
.gm-when { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.gm-subj { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.gm-snip { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-open { flex: 0 0 auto; margin-top: 7px; text-align: center; text-decoration: none; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 8px; color: var(--accent); font-weight: 600; font-size: 12.5px; }
.gm-hint { padding: 14px; color: var(--muted); font-size: 13px; }

/* ═══════════ Google Drive Videos ═══════════ */
.gd { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.gd-top { display: flex; gap: 6px; flex: 0 0 auto; }
.gd-search { flex: 1 1 auto; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; color: var(--ink); font: inherit; font-size: 13px; }
.gd-refresh, .gd-folders, .gd-recent { flex: 0 0 auto; background: var(--field); border: 1px solid var(--line); border-radius: 9px; width: 34px; cursor: pointer; font-size: 14px; color: var(--ink); }
.gd-refresh:hover, .gd-folders:hover, .gd-recent:hover { border-color: var(--accent); }
.gd-folder { flex: 0 1 auto; max-width: 45%; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 8px; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
/* manage-folders modal */
.gd-foldersmodal { width: min(600px, 95vw); }
.gdf-body { display: flex; flex-direction: column; gap: 10px; }
.gdf-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
.gdf-rows { display: flex; flex-direction: column; gap: 7px; max-height: 52vh; overflow-y: auto; }
.gdf-row { display: flex; gap: 6px; align-items: center; }
.gdf-name { flex: 0 0 34%; min-width: 0; }
.gdf-url { flex: 1 1 auto; min-width: 0; }
.gdf-row input { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--ink); font: inherit; font-size: 12.5px; }
.gdf-row input.gdf-err { border-color: var(--bad); }
.gdf-del { flex: 0 0 auto; background: var(--field); border: 1px solid var(--line); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; color: var(--bad); }
.gdf-add { align-self: flex-start; background: var(--field); border: 1px dashed var(--line); border-radius: 9px; padding: 7px 12px; cursor: pointer; color: var(--ink); font: inherit; font-size: 12.5px; }
.gdf-add:hover { border-color: var(--accent); }
.gdf-foot { display: flex; align-items: center; gap: 10px; }
.gdf-status { font-size: 12px; color: var(--muted); }
.gd-listwrap { flex: 1 1 auto; overflow-y: auto; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.gd-grid.gd-th-tiny   { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));  gap: 7px; }
.gd-grid.gd-th-small  { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.gd-grid.gd-th-medium { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.gd-grid.gd-th-large  { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.gd-grid.gd-th-tiny .gd-name { font-size: 11px; }
.gd-grid.gd-th-tiny .gd-sz, .gd-grid.gd-th-small .gd-sz { font-size: 9.5px; }
.gd-card { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--ink); }
.gd-thumb { position: relative; aspect-ratio: 16/9; background: #0b0e13; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.gd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gd-ph { position: absolute; font-size: 30px; opacity: .35; }
.gd-play { position: absolute; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 3px; opacity: 0; transition: opacity .15s; }
.gd-card:hover .gd-play { opacity: 1; }
.gd-dur { position: absolute; right: 5px; bottom: 5px; background: rgba(0,0,0,.75); color: #fff; font-size: 10.5px; padding: 1px 5px; border-radius: 5px; font-variant-numeric: tabular-nums; }
.gd-name { font-size: 12px; margin-top: 5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gd-sz { font-size: 10.5px; color: var(--muted); }
.gd-rows { display: flex; flex-direction: column; }
.gd-row { display: flex; align-items: center; gap: 9px; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 9px 4px; cursor: pointer; color: var(--ink); text-align: left; width: 100%; font: inherit; }
.gd-ric { font-size: 17px; flex: 0 0 auto; }
.gd-rt { flex: 1 1 auto; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-rd { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gd-rp { flex: 0 0 auto; color: var(--accent); }
.gd-modal { width: min(880px, 94vw); }
.gd-playerbody { padding: 0 !important; background: #000; }
.gd-video { width: 100%; max-height: 78vh; display: block; background: #000; }
/* rename pencil on list rows + grid cards */
.gd-redit { flex: 0 0 auto; opacity: 0; color: var(--muted); font-size: 13px; padding: 0 4px; cursor: pointer; transition: opacity .12s, color .12s; }
.gd-row:hover .gd-redit, .gd-card:hover .gd-redit { opacity: .8; }
.gd-redit:hover { opacity: 1 !important; color: var(--accent); }
.gd-card .gd-redit { position: absolute; top: 4px; right: 5px; z-index: 3; background: rgba(0,0,0,.6); border-radius: 6px; padding: 2px 6px; color: #fff; }
.gd-card:hover .gd-redit { opacity: .95; }
/* player title-bar rename */
.gd-ptitle { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.gd-ptname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-prename { flex: 0 0 auto; background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; padding: 0 6px; margin-right: auto; }
.gd-prename:hover { color: var(--accent); }
.gd-ptedit { background: var(--field); border: 1px solid var(--accent); border-radius: 7px; padding: 4px 8px; color: var(--ink); font: inherit; font-size: 14px; min-width: 220px; max-width: 60vw; }
/* recently-watched modal */
.gd-recentmodal { width: min(560px, 95vw); }
.gdr-body { display: flex; flex-direction: column; gap: 10px; }
.gdr-list { display: flex; flex-direction: column; }
.gdr-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.gdr-row:hover { background: var(--field); }
.gdr-main { flex: 1 1 auto; min-width: 0; }
.gdr-t { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gdr-m { font-size: 11px; color: var(--muted); margin-top: 2px; }
.gdr-bar { height: 4px; background: var(--line); border-radius: 3px; margin-top: 6px; overflow: hidden; }
.gdr-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.gdr-go { flex: 0 0 auto; background: var(--accent); border: 0; border-radius: 8px; padding: 6px 11px; color: #fff; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.gdr-del { flex: 0 0 auto; background: var(--field); border: 1px solid var(--line); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; color: var(--bad); }
.gdr-clear { align-self: flex-start; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.gdr-clear:hover { border-color: var(--bad); color: var(--bad); }

/* ═══════════ World Globe ═══════════ */
.globe-wrap { display: flex; flex-direction: column; height: 100%; gap: 7px; }
.globe-bar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }
.globe-layer { background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; font: inherit; font-size: 12px; color: var(--ink); cursor: pointer; }
.globe-layer option { color: #111; }
.globe-legend { font-size: 11px; color: var(--muted); flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.globe-toggles { display: flex; gap: 3px; }
.globe-tg { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); cursor: pointer; font-size: 13px; opacity: .5; }
.globe-tg.on { opacity: 1; border-color: var(--accent); }
.globe-zoom { display: flex; gap: 3px; }
.globe-zbtn { width: 26px; height: 28px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); cursor: pointer; font-size: 15px; color: var(--ink); }
.globe-cvwrap { flex: 1 1 auto; min-height: 0; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 120% at 50% 30%, #0a1c30 0%, #04070d 75%); display: flex; align-items: center; justify-content: center; }
.globe-cv { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.globe-cv:active { cursor: grabbing; }
/* focused-map modal */
.gm-modal { width: min(880px, 95vw); }
.gm-ext { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; margin-left: auto; margin-right: 8px; }
.gm-book { background: var(--field); border: 1px solid var(--line); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; margin-right: 6px; }
.gm-body { padding: 0 !important; display: flex; flex-direction: column; }
.gm-maprow { position: relative; height: 46vh; background: #0a1422; }
.gm-cv { width: 100%; height: 100%; display: block; touch-action: none; }
.gm-layers { position: absolute; top: 8px; left: 8px; z-index: 3; display: flex; gap: 4px; }
.gm-ml { background: rgba(20,27,38,.9); border: 1px solid rgba(255,255,255,.15); color: #dfe8f5; border-radius: 7px; padding: 4px 9px; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.gm-ml.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.gm-svwrap { height: 32vh; background: #000; }
.gm-sv { width: 100%; height: 100%; border: 0; display: block; }

/* ═══════════ Map-level tiles (Country/Region/Street/Aerial/Street View) ═══════════ */
.mlt { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #0a1422; }
.mlt-cv { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.mlt-cv:active { cursor: grabbing; }
.sv-wrap { width: 100%; height: 100%; position: relative; }
.sv-frame { width: 100%; height: 100%; border: 0; display: block; }
.sv-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--muted); font-size: 13px; }
.mlt-lbl { position: absolute; left: 8px; bottom: 8px; right: 8px; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(0,0,0,.5); padding: 5px 9px; border-radius: 8px; pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* My Locations */
.mloc { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.mloc-addcur { flex: 0 0 auto; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 9px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.mloc-addcur:hover { border-color: var(--accent); }
.mloc-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.mloc-row { display: flex; align-items: center; gap: 4px; }
.mloc-go { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; cursor: pointer; color: var(--ink); text-align: left; font: inherit; min-width: 0; }
.mloc-go:hover { border-color: var(--accent); }
.mloc-pin { flex: 0 0 auto; }
.mloc-nm { flex: 1 1 auto; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mloc-del { flex: 0 0 auto; width: 30px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); cursor: pointer; color: var(--bad); }

/* ═══════════ Explore 3D ═══════════ */
.e3d { position: relative; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #05080f; }
.e3d-frame { width: 100%; height: 100%; border: 0; display: block; }
.e3d-sync { position: absolute; top: 10px; left: 10px; z-index: 3; background: rgba(34,164,93,.92); color: #fff; border: 0; border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.e3d-sync:hover { background: var(--accent); }
.e3d-hint { position: absolute; left: 10px; bottom: 10px; right: 10px; font-size: 11px; color: rgba(255,255,255,.82); background: rgba(0,0,0,.42); padding: 6px 10px; border-radius: 8px; pointer-events: none; text-align: center; }
.e3d-hint b { color: #fff; }
.e3d-note { padding: 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ═══════════ YouTube ═══════════ */
.ytw { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.ytw-search { display: flex; gap: 6px; flex: 0 0 auto; }
.ytw-q { flex: 1 1 auto; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; color: var(--ink); font: inherit; font-size: 13px; }
.ytw-go { flex: 0 0 auto; background: #e0342e; color: #fff; border: 0; border-radius: 9px; width: 40px; cursor: pointer; }
.ytw-grid { flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; }
.ytw-card { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--ink); }
.ytw-thumb { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #0b0e13; }
.ytw-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ytw-play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; background: rgba(224,52,46,.92); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; padding-left: 3px; opacity: 0; transition: opacity .15s; }
.ytw-card:hover .ytw-play { opacity: 1; }
.ytw-ttl { font-size: 12px; margin-top: 5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ytw-ch { font-size: 11px; color: var(--muted); }

/* ═══════════ TikTok ═══════════ */
.tk { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.tk-add { flex: 0 0 auto; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 9px; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.tk-add:hover { border-color: var(--accent); }
.tk-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 7px; }
.tk-lrow { display: flex; align-items: center; gap: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 11px; padding: 7px 9px; cursor: pointer; }
.tk-lthumb { width: 46px; height: 60px; border-radius: 8px; object-fit: cover; background: #111 linear-gradient(135deg, #25f4ee33, #fe2c5533); flex: 0 0 auto; }
.tk-lthumb.ph { display: flex; align-items: center; justify-content: center; }
.tk-lmeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.tk-lmeta b { color: var(--ink); } .tk-lmeta i { color: var(--muted); font-style: normal; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-play, .tk-del { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; color: var(--ink); font-size: 13px; }
.tk-play { color: var(--accent); }
.tk-modal { width: min(400px, 94vw); }
.tk-body { padding: 0 !important; background: #000; }
.tk-frame { width: 100%; aspect-ratio: 9/16; max-height: 80vh; border: 0; display: block; }

/* ═══════════ Plex ═══════════ */
.plex { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.plex-search { display: flex; gap: 6px; flex: 0 0 auto; }
.plex-q { flex: 1 1 auto; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; color: var(--ink); font: inherit; font-size: 13px; }
.plex-go { flex: 0 0 auto; background: #e5a00d; color: #191a1c; border: 0; border-radius: 9px; width: 40px; cursor: pointer; font-weight: 700; }
.plex-res { flex: 1 1 auto; overflow-y: auto; }
.plex-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.plex-tile { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--ink); }
.plex-timg { aspect-ratio: 2/3; border-radius: 9px; overflow: hidden; background: #1c1d20; }
.plex-timg img { width: 100%; height: 100%; object-fit: cover; }
.plex-tile .plex-timg.noart { background: linear-gradient(135deg, #2a2b2e, #1c1d20); }
.plex-tcap { display: block; font-size: 11px; margin-top: 4px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.plex-tcap i { color: var(--muted); font-style: normal; }
.plex-timg { position: relative; }
.plex-play { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(229,160,13,.92); color: #191a1c; display: flex; align-items: center; justify-content: center; font-size: 16px; padding-left: 2px; opacity: 0; transition: opacity .15s; }
.plex-tile:hover .plex-play { opacity: 1; }
/* v1.14 — Drive player auto-resume notice */
.gd-retry { font-size: 12px; color: #d29922; padding: 7px 10px; text-align: center; }

/* ── v1.19 Home Cameras (🎥 live HA snapshots) ─────────────────────────────────────────── */
.hcam { height: 100%; overflow-y: auto; }
.hcam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--hcam-min, 180px), 1fr)); gap: 8px; }
.hcam-cell { background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-align: left; }
.hcam-imgwrap { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #0c0d0f; }
.hcam-img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.hcam-img.ok { opacity: 1; }
.hcam-live { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(220,40,40,.85); border-radius: 5px; padding: 1px 5px; }
.hcam-exp { position: absolute; top: 6px; right: 6px; font-size: 12px; color: #fff; opacity: 0; transition: opacity .15s; text-shadow: 0 1px 3px #000; }
.hcam-cell:hover .hcam-exp { opacity: 1; }
.hcam-nm { display: block; font-size: 12px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a single HA camera as its own tile (full-bleed live snapshot) */
.hacamtile { position: relative; width: 100%; height: 100%; min-height: 96px; border-radius: 10px; overflow: hidden; background: #0c0d0f; cursor: pointer; }
.hacamtile-img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.hacamtile-img.ok { opacity: 1; }
.hacamtile-live { position: absolute; top: 6px; left: 6px; font-size: 9px; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(220,40,40,.85); border-radius: 5px; padding: 1px 5px; }
.hacamtile-exp { position: absolute; top: 6px; right: 6px; font-size: 12px; color: #fff; opacity: 0; transition: opacity .15s; text-shadow: 0 1px 3px #000; }
.hacamtile:hover .hacamtile-exp { opacity: 1; }
.hacamtile-nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 8px 5px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0)); }

.hcam-full { padding: 0; background: #000; }
.hcam-fimg { display: block; width: 100%; max-height: 78vh; object-fit: contain; background: #000; }
.hcam-note { color: var(--muted); font-size: 12px; padding: 10px; text-align: center; }
.hcam-vwrap { position: relative; }
.hcam-status { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px 2px; }
.hcam-chip { font-size: 11.5px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; }
.hcam-chip.alert { color: #fff; background: #d13438; border-color: #d13438; animation: hcamPulse 1.1s ease-in-out infinite; }
.hcam-chip.warn { color: #b26a00; background: rgba(255,170,0,.14); border-color: rgba(255,170,0,.4); }
@keyframes hcamPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* ── PTZ D-pad (pan/tilt cameras) ── big touch targets, laid out as a cross ── */
.hcam-ptz:empty { display: none; }
.hcam-ptz { padding: 8px 10px 2px; }
.hptz-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hptz-pad { display: grid; grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); gap: 6px; flex: 0 0 auto; touch-action: none; }
.hptz-b { display: flex; align-items: center; justify-content: center; font-size: 20px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: none; }
.hptz-b:active, .hptz-b.act { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(.94); }
.hptz-b.hptz-empty { border: 0; background: none; cursor: default; }
.hptz-home { font-size: 17px; background: var(--bg); }
.hptz-side { flex: 1 1 auto; min-width: 120px; display: flex; flex-direction: column; gap: 8px; }
.hptz-pos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.hptz-poslbl { font-weight: 600; color: var(--ink); }
.hptz-posv { background: var(--field); border: 1px solid var(--line); border-radius: 7px; padding: 2px 8px; font-variant-numeric: tabular-nums; }
.hptz-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.hptz-act { background: var(--bg); border: 1px solid var(--line); border-radius: 9px; color: var(--ink); font: inherit; font-size: 12px; padding: 8px 12px; cursor: pointer; }
.hptz-act:active { background: var(--accent-soft); border-color: var(--accent); }
/* v1.21 — full control panel with collapsible sections */
.hcam-panel { padding: 6px 10px 14px; }
.hcam-panel.busy { opacity: .55; pointer-events: none; }
.hcs { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 7px; overflow: hidden; background: var(--field); }
.hcs-h { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: 0; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; padding: 9px 11px; cursor: pointer; text-align: left; }
.hcs-n { font-size: 10px; color: var(--muted); background: rgba(255,255,255,.06); border-radius: 6px; padding: 1px 6px; }
.hcs-caret { margin-left: auto; color: var(--muted); transition: transform .15s; }
.hcs.open .hcs-caret { transform: rotate(180deg); }
.hcs-body { display: none; padding: 2px 11px 8px; }
.hcs.open .hcs-body { display: block; }
.hcr { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.hcr:first-child { border-top: 0; }
.hcr.col { flex-direction: column; align-items: stretch; gap: 4px; }
.hcr-l { flex: 1 1 auto; min-width: 0; font-size: 12px; }
.hcr-ro { font-size: 12px; color: var(--muted); white-space: nowrap; }
.hcr-nrow { display: flex; align-items: center; justify-content: space-between; }
.hcr-nval { font-size: 12px; color: var(--accent); font-weight: 700; }
.hcr-range { width: 100%; accent-color: #3fb950; }
.hcr-sel { flex: 0 0 auto; max-width: 55%; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 12px; padding: 5px 7px; }
.hcr-press { flex: 0 0 auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer; }
.hcr-press.danger { color: #f85149; border-color: rgba(248,81,73,.35); }
.hcr-press.danger:hover { background: rgba(248,81,73,.1); }
/* toggle pill */
.hcr-tog { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; border: 0; background: #3a3d42; cursor: pointer; position: relative; transition: background .15s; }
.hcr-tog.on { background: #3fb950; }
.hcr-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
.hcr-tog.on .hcr-knob { left: 21px; }

/* ── v1.12 Plex list view · source dropdown · in-page player ───────────────────────────── */
.plx-bar { display: flex; gap: 6px; flex: 0 0 auto; }
.plx-src { flex: 1 1 auto; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.plx-q { flex: 0 1 130px; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; color: var(--ink); font: inherit; font-size: 12.5px; }
.plx-list { display: flex; flex-direction: column; }
.plx-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.plx-row:last-child { border-bottom: 0; }
.plx-row:hover { background: var(--field); }
.plx-th { width: 30px; height: 45px; object-fit: cover; border-radius: 4px; background: #1c1d20; flex: 0 0 auto; }
.plx-th.noart { visibility: hidden; }
.plx-meta { flex: 1 1 auto; min-width: 0; }
.plx-t { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plx-t2 { font-size: 11.5px; color: var(--ink); opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plx-s { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plx-badge { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.plx-badge.ok { background: rgba(46,160,67,.16); color: #3fb950; }
.plx-badge.warn { background: rgba(210,153,34,.16); color: #d29922; }
.plx-badge.bad { background: rgba(248,81,73,.14); color: #f85149; }
.plx-row .plx-go { flex: 0 0 auto; background: #e5a00d; color: #191a1c; border: 0; border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: 11px; padding-left: 2px; }
.plx-pager { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 0 0 auto; padding-top: 6px; font-size: 11.5px; color: var(--muted); }
.plx-pg { background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 11.5px; padding: 4px 9px; cursor: pointer; }
.plx-pg:disabled { opacity: .4; cursor: default; }
.plx-player { flex: 0 0 auto; background: #0d0e10; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 2px; }
.plx-pl-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.plx-pl-t { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plx-pl-x { background: none; border: 0; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0 2px; }
.plx-cast { flex: 0 0 auto; max-width: 46%; background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 11.5px; padding: 3px 6px; cursor: pointer; }
.plx-cast:disabled { opacity: .5; cursor: default; }
.plx-video { display: block; width: 100%; max-height: 46vh; background: #000; }
.plx-pl-note { font-size: 10.5px; color: var(--muted); padding: 5px 8px; }
.plx-pl-msg { font-size: 11.5px; line-height: 1.55; color: var(--ink); padding: 10px 10px; }
.plx-pl-alt { padding: 0 10px 9px; font-size: 11.5px; }
.plx-pl-alt a { color: #e5a00d; }
.plex-off { padding: 16px 6px; text-align: center; }
.plex-off-h { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.plex-off-m { font-size: 12.5px; color: var(--bad); margin-bottom: 10px; }
.plex-off-hint { font-size: 12px; color: var(--muted); line-height: 1.5; text-align: left; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }

/* ═══════════ 3D Models ═══════════ */
.md3 { display: flex; flex-direction: column; height: 100%; gap: 7px; overflow-y: auto; }
.md3-search { display: flex; gap: 6px; flex: 0 0 auto; }
.md3-q { flex: 1 1 auto; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; color: var(--ink); font: inherit; font-size: 13px; }
.md3-b { background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; cursor: pointer; font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.md3-b:hover { border-color: var(--accent); }
.md3-results:empty { display: none; }
.md3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.md3-cell { background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; text-align: left; color: var(--ink); }
.md3-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #0b0e13; }
.md3-cn { font-size: 10px; padding: 4px 6px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.md3-seclab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; margin-top: 4px; }
.md3-glabel { font-size: 11.5px; color: var(--muted); font-weight: 600; margin: 4px 0 2px; }
.md3-srow { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.md3-sthumb { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; background: #0b0e13; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.md3-sthumbph { font-size: 16px; }
.md3-sn { flex: 1 1 auto; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md3-ss { flex: 0 0 auto; font-size: 10.5px; color: var(--muted); }
.md3-srow .md3-open, .md3-srow .md3-del, .md3-srow .md3-send-row { flex: 0 0 auto; background: var(--field); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; cursor: pointer; font-size: 11.5px; color: var(--ink); }
.md3-srow .md3-del { color: var(--bad); }
.md3-srow .md3-send-row:hover { border-color: var(--accent); }
.md3-projbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.md3-dlproj { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.md3-dlproj:disabled { opacity: .6; cursor: default; }
.md3-projnote { font-size: 11px; color: var(--muted); flex: 1 1 160px; min-width: 0; }
/* ── Send to P1S modal ── */
.bmb-sendmodal { width: min(560px, 94vw); }
.bsend { display: flex; flex-direction: column; gap: 12px; }
.bsend-name { font-size: 13.5px; padding: 8px 10px; background: var(--field); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsend-fld { display: flex; flex-direction: column; gap: 5px; }
.bsend-fld > label { font-size: 11.5px; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; }
.bsend-fld select, .bsend-fld input[type=number] { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 12.5px; padding: 7px 8px; width: 100%; }
.bsend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bsend-infv { color: var(--accent); font-weight: 700; }
.bsend-infill { width: 100%; accent-color: #3fb950; }
.bsend-fil { display: flex; flex-direction: column; gap: 6px; }
.bsend-chip { display: flex; align-items: center; gap: 10px; text-align: left; background: var(--field); border: 1.5px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--ink); }
.bsend-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.bsend-sw { width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.bsend-sw-auto { display: flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: none; }
.bsend-cl { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bsend-cl b { font-size: 12.5px; } .bsend-cl small { font-size: 10.5px; color: var(--muted); }
.bsend-auto { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; cursor: pointer; padding: 2px; }
.bsend-auto input { margin-top: 3px; flex: 0 0 auto; }
.bsend-auto em { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.bsend-go { width: 100%; }
.bsend-go:disabled { opacity: .5; cursor: default; }
.bsend-status { font-size: 12.5px; min-height: 1em; }
.bsend-status.err { color: var(--bad); }
.bsend-status.ok { color: #3fb950; }
.bsend-hint { font-size: 11px; color: var(--muted); margin-top: 5px; }
/* ── AI Avatar tile — 3D (iframe) ── */
.av3d-wrap { position: relative; height: 100%; min-height: 0; border-radius: 10px; overflow: hidden; background: #0b0f18; }
.av3d-frame { width: 100%; height: 100%; border: 0; display: block; }
/* ── AI Core (brain) tile ── */
.brain-wrap { position: relative; height: 100%; min-height: 0; border-radius: 10px; overflow: hidden; background: #03050a; }
.brain-cv { width: 100%; height: 100%; display: block; }
.brain-hud { position: absolute; left: 10px; top: 9px; z-index: 2; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #cfe0f5; letter-spacing: .04em; text-transform: uppercase; background: rgba(6,12,22,.5); border-radius: 8px; padding: 4px 9px; backdrop-filter: blur(3px); }
.brain-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: brainDot 2.4s ease-in-out infinite; }
@keyframes brainDot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
/* secondary "senses" menu injected into the AI Core tile's title bar (right of the icon-menu) */
.brain-menu-wrap { margin-left: auto; position: relative; flex: 0 0 auto; }
.brain-menu-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--field); color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; }
.brain-menu-btn:hover { color: var(--accent); border-color: var(--accent); }
.brain-menu-pop { position: absolute; right: 0; top: 30px; z-index: 30; display: none; flex-direction: column; gap: 4px; min-width: 130px; padding: 6px; background: var(--panel, #0e1524); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.brain-menu-pop.open { display: flex; }
.brain-mi { text-align: left; font: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: 7px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.brain-mi:hover { background: var(--field); }
/* ── Talk to Avatar tile ── */
.say { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
.say-vrow { display: flex; gap: 6px; flex: 0 0 auto; }
.say-voice { flex: 1 1 auto; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 8px; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.say-refresh { flex: 0 0 auto; width: 36px; background: var(--field); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; color: var(--ink); }
.say-text { flex: 1 1 auto; min-height: 54px; resize: none; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.4; }
.say-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.say-go, .say-stop { flex: 0 0 auto; background: var(--accent); border: 0; border-radius: 9px; color: #fff; font: inherit; font-weight: 600; font-size: 13px; padding: 8px 14px; cursor: pointer; }
.say-stop { background: #d13438; }
.say-go:disabled { opacity: .55; cursor: default; }
.say-status { font-size: 11.5px; color: var(--muted); flex: 1 1 auto; min-width: 0; }

/* ── AI Console ── */
/* Iris's mic in the header, next to the wordmark — same recogniser as the tile, reachable everywhere */
.tl-hdrmic { margin-left: 10px; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--ink-2); cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; transition: background .15s, border-color .15s, box-shadow .15s; }
.tl-hdrmic:hover { border-color: var(--accent); color: var(--accent); }
.tl-hdrmic.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tl-hdrmic.listening { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); animation: hdrMicPulse 1.5s ease-in-out infinite; }
@keyframes hdrMicPulse { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); } 50% { box-shadow: 0 0 0 6px var(--accent-soft); } }
@media (max-width: 720px) { .tl-hdrmic { margin-left: 7px; width: 27px; height: 27px; font-size: 13px; } }

/* The whole tile takes the AI Core's own canvas backdrop (#03050a, from .brain-wrap) so the Core doesn't
   sit in a lighter panel — the graphic, the buttons and the conversation read as one console. The core's
   own wrap goes transparent so there's no seam where the two backgrounds meet. */
/* The Core stays square but now YIELDS the column: the equaliser gets a full-width square (Tristan
   wants it big), and the Core takes whatever height is left — still square, just smaller, and centred.
   Both can't be full-width squares in one column, and the meter is the one he needs to read. */
/* the status readout lives on its own line under the graphic (moved out of the canvas overlay) */
/* smaller status readout (per the mock-up) — it's a label, not a headline */
/* buttons sit directly under the Core so the two read as one unit; the spare height falls BELOW them */
/* the meter gets the full column width as a neat square — it's the thing he needs to actually read */
/* phone / narrow: stack the core above the console instead of squeezing both */
@media (max-width: 720px) {
}
/* v1.92 — trained wake phrases, shown as removable tags (same shape as MAX's Voice settings) */
.wk-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.wk-count { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--faint); margin-right: 2px; }
.wk-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 4px 5px 4px 11px; }
.wk-x { background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 50%; }
.wk-x:hover { opacity: 1; background: rgba(0, 0, 0, .15); }
.wk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.wk-add { flex: 1 1 200px; min-width: 140px; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; color: var(--ink); font: inherit; font-size: 12.5px; }
.wk-rec.on { background: var(--bad); }
.wk-rec.on::before { content: ''; }
.wk-status { min-height: 16px; margin-top: 6px; }

/* live transcript of what Iris is hearing — deliberately looks provisional, not like a sent message */
.aic-heard { align-self: flex-end; max-width: 92%; font-style: italic; opacity: .72; border: 1px dashed var(--line); background: transparent !important; color: var(--muted) !important; }
.aic-heard-wake { border-color: rgba(240, 180, 60, .5); color: #d9a83c !important; }
.bsc-schednote { font-size: 11px; color: var(--muted); margin-top: 7px; line-height: 1.5; }
.bsc-schednote b { color: var(--ink-2); }
/* the 7 day checkboxes read as a group, not seven unrelated rows */
.set-modal .tl-field-cb { padding: 2px 0; }
/* 🚆 v2.15 — station dropdowns + the add-a-station search */
.trn-bar select.trn-from, .trn-bar select.trn-to { flex: 1 1 0; min-width: 0; font: inherit; font-size: 12.5px;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); cursor: pointer; }
.trn-bar select:hover { border-color: var(--accent); }
.trn-smodal { max-width: 460px; }
.trn-sres { margin-top: 10px; min-height: 30px; }
.trn-slist { display: flex; flex-direction: column; gap: 6px; }
.trn-srow { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); cursor: pointer; }
.trn-srow:hover { border-color: var(--accent); color: var(--accent); }
.trn-sname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trn-strain { flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border-radius: 5px; padding: 2px 6px; }
.trn-smine { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.trn-slbl { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px; }
.trn-schips { display: flex; flex-wrap: wrap; gap: 6px; }
.trn-schip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  background: var(--field); border: 1px solid var(--line); border-radius: 20px; padding: 4px 6px 4px 11px; }
.trn-sdel { border: 0; background: none; color: var(--faint); font: inherit; font-size: 11px; cursor: pointer; padding: 0 3px; }
.trn-sdel:hover { color: var(--bad); }
.trn-shint { font-size: 12px; color: var(--muted); }
.trn-manage { margin: 4px 0 2px; }
.trn-mbtn { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 13px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--field); color: var(--ink-2); cursor: pointer; }
.trn-mbtn:hover { border-color: var(--accent); color: var(--accent); }
.trn-mhint { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
/* ⧉ the copy-to-another-screen chooser */
.dup-modal { max-width: 380px; }
.dup-list { display: flex; flex-direction: column; gap: 7px; }
.dup-row { width: 100%; text-align: left; font: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); cursor: pointer; }
.dup-row:hover { border-color: var(--accent); color: var(--accent); }
.dup-hint { font-size: 11.5px; color: var(--muted); margin-top: 11px; line-height: 1.45; }
.dup-none { font-size: 13px; color: var(--muted); }
.dup-none span { display: block; font-size: 11.5px; color: var(--faint); margin-top: 5px; }
/* 🎬 the A-E film picker */
.vpk-modal { max-width: 520px; }
.vpk-list { display: flex; flex-direction: column; gap: 7px; }
.vpk-row { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--field); color: var(--ink); font: inherit; cursor: pointer; }
.vpk-row:hover { border-color: var(--accent); }
.vpk-let { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center;
  font-size: 13px; font-weight: 900; color: #fff; background: var(--accent); }
.vpk-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vpk-title { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vpk-folder { font-size: 10.5px; color: var(--muted); }
.vpk-hint { font-size: 12px; color: var(--muted); margin-top: 11px; text-align: center; }
/* 🎬 v2.31 — the whole shelf: every video across every mapped folder, for "let's watch a movie" with no
   title. Two columns on a wide screen because the point is seeing a lot of titles at once. */
.vlb-modal { max-width: 860px; }
.vlb-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.vlb-top { display: flex; align-items: center; gap: 10px; }
.vlb-find { flex: 1 1 auto; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 13px; }
.vlb-count { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--muted); }
/* min-height:0 is load-bearing: without it the list is CLIPPED, not scrolled, and the wheel looks dead */
.vlb-list { flex: 1 1 auto; min-height: 0; max-height: 62vh; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; align-content: start; }
.vlb-row { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--ink);
  font: inherit; cursor: pointer; min-width: 0; }
.vlb-row:hover { border-color: var(--accent); }
.vlb-t { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlb-f { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlb-none { grid-column: 1 / -1; padding: 18px; text-align: center; font-size: 12.5px; color: var(--muted); }
.vlb-foot { font-size: 11.5px; color: var(--muted); text-align: center; }
@media (max-width: 700px) { .vlb-list { grid-template-columns: 1fr; max-height: 56vh; } }
/* full screen, for a film chosen from the picker */
.gd-modal.gd-fullscreen { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100vh !important;
  max-width: none !important; max-height: none !important; border-radius: 0 !important; border: 0 !important;
  display: flex; flex-direction: column; }
.gd-modal.gd-fullscreen .tl-modal-body { flex: 1 1 auto; min-height: 0; padding: 0; }
/* .gd-video caps at 78vh normally — that has to be lifted or the film sits in a letterbox */
.gd-modal.gd-fullscreen .gd-video { width: 100%; height: 100%; max-height: none; object-fit: contain; background: #000; }

/* 📹 camera wall — "Iris, show me my cameras" */
.cwall-modal { width: 96vw; max-width: 96vw; height: 92vh; max-height: 92vh; display: flex; flex-direction: column; }
.cwall-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cwall-grid { display: grid; grid-template-columns: repeat(var(--cwall-cols, 3), 1fr); gap: 10px; }
.cwall-cell { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: #000; cursor: pointer; aspect-ratio: 16 / 9; }
.cwall-cell:hover { border-color: var(--accent); }
.cwall-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.cwall-img.ok { opacity: 1; }
.cwall-live { position: absolute; top: 7px; left: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: rgba(200,40,40,.85); padding: 2px 6px; border-radius: 5px; }
.cwall-nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 10px 7px; text-align: left;
  font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
@media (max-width: 720px) { .cwall-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .cwall-modal { height: 94vh; } }

/* ── 🎉 new eBay sale celebration (logo rain + popup card + confetti) ───────────────────────────── */
.eb-rain { position: fixed; inset: 0; z-index: 99998; pointer-events: none; overflow: hidden; }
.eb-rdrop { position: absolute; top: -90px; opacity: .9; animation: ebFall linear forwards; will-change: transform; }
.eb-rdrop img { display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
@keyframes ebFall { from { transform: translateY(-90px) rotate(-12deg); } to { transform: translateY(112vh) rotate(20deg); } }
.eb-cel { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; pointer-events: none; }
/* the card is a TILE, not MAX's blue panel — it follows the dashboard's own light/dark theme */
.eb-cel-card { position: relative; text-align: center; padding: 26px 40px 30px; border-radius: var(--radius); overflow: hidden; max-width: min(92vw, 560px);
  background: radial-gradient(circle at 50% -10%, var(--accent-glow), var(--panel) 68%); border: 1px solid var(--line);
  box-shadow: var(--shadow-hi); animation: ebPop .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes ebPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.eb-cel-badge img { width: 132px; height: auto; animation: ebBounce 1s ease-in-out infinite; }
@keyframes ebBounce { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.06); } }
.eb-cel-h { font-size: 19px; font-weight: 800; color: var(--accent-strong); margin: 10px 0 8px; line-height: 1.25; text-wrap: balance; }
:root[data-theme="dark"] .eb-cel-h { color: #ffd93b; text-shadow: 0 2px 12px rgba(255,217,59,.35); }
.eb-cel-item { font-size: 22px; font-weight: 900; color: var(--ink); line-height: 1.2; }
.eb-cel-amt { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.eb-cel-amt b { color: var(--accent); font-size: 22px; font-weight: 900; }
.eb-cel-buyer { font-size: 13px; color: var(--muted); margin-top: 8px; }
.eb-cel-more { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 6px; }
.eb-cel-conf { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.eb-conf { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px; opacity: .9; animation: ebConf linear forwards; }
@keyframes ebConf { from { transform: translateY(-14px) rotate(0deg); } to { transform: translateY(460px) rotate(560deg); opacity: .2; } }
.eb-cel-x { position: absolute; top: 8px; right: 10px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--field); color: var(--muted); font-size: 13px; line-height: 1; cursor: pointer; }
.eb-cel-x:hover { color: var(--ink); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .eb-rdrop, .eb-conf, .eb-cel-badge img { animation: none; } }

/* device keys — per machine, unlike the household-wide IP list */
.uf-devs { margin: 4px 0 14px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.uf-devlbl { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.uf-devlist { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.uf-devrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.uf-devname { font-weight: 700; color: var(--ink); }
.uf-devwhen { margin-left: auto; font-size: 10.5px; color: var(--faint); }
.uf-devdel { border: 0; background: none; color: var(--faint); font: inherit; font-size: 12px; cursor: pointer; padding: 0 3px; }
.uf-devdel:hover { color: var(--bad); }
.uf-devnone { font-size: 12px; color: var(--muted); margin-bottom: 9px; }
.uf-devact { display: flex; gap: 6px; }
.uf-devlabel { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); }
.uf-devadd { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink-2); cursor: pointer; }
.uf-devadd:hover { border-color: var(--accent); color: var(--accent); }
.uf-devnew { margin-top: 10px; padding: 10px; border-radius: 9px; background: var(--accent-soft); border: 1px solid rgba(34,164,93,.35); font-size: 11.5px; line-height: 1.5; }
.uf-devurl { width: 100%; margin: 7px 0 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink); }
.uf-devcopy { font: inherit; font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 7px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink-2); cursor: pointer; }
.uf-devnote { display: block; margin-top: 8px; color: var(--muted); }
.uf-devwarn { margin-top: 9px; font-size: 11.5px; color: var(--bad); }

/* auto-login by IP — the warning is deliberately hard to miss */
.uf-ipnow { font-size: 11.5px; color: var(--muted); margin: -4px 0 12px; line-height: 1.5; }
.uf-ipval { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink); }
.uf-ipuse { font: inherit; font-size: 10.5px; font-weight: 700; margin-left: 6px; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--ink-2); cursor: pointer; }
.uf-ipuse:hover { border-color: var(--accent); color: var(--accent); }
.uf-ipwarn { display: block; margin-top: 7px; padding: 8px 10px; border-radius: 8px; font-size: 11px; line-height: 1.5;
  color: var(--warn); background: rgba(224,165,46,.10); border: 1px solid rgba(224,165,46,.35); }

/* ── 📄 file viewer (sandboxed) ─────────────────────────────────────────────────────────────────── */
.fv-modal { width: min(1000px, 94vw); max-width: 94vw; height: 88vh; max-height: 88vh; display: flex; flex-direction: column; }
.fv-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.fv-frame { display: block; width: 100%; height: 100%; min-height: 60vh; border: 0; background: #fff; border-radius: 10px; }
.fv-pre { margin: 0; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--ink-2); }
.fv-md { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.fv-md h1, .fv-md h2, .fv-md h3, .fv-md h4 { color: var(--ink); margin: 16px 0 8px; line-height: 1.25; }
.fv-md h1 { font-size: 21px; } .fv-md h2 { font-size: 18px; } .fv-md h3 { font-size: 15.5px; }
.fv-md p { margin: 0 0 10px; }
.fv-md ul { margin: 0 0 10px; padding-left: 20px; }
.fv-md li { margin: 3px 0; }
.fv-md code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--field); border-radius: 5px; padding: 1px 5px; }
.fv-md hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.fv-code, .fv-md pre { background: var(--field); border-radius: 10px; padding: 11px 13px; overflow-x: auto; font-size: 12px; line-height: 1.5; }
.fv-imgwrap { display: grid; place-items: center; min-height: 50vh; }
.fv-img { max-width: 100%; max-height: 78vh; border-radius: 10px; }
.fv-none { font-size: 13px; color: var(--muted); padding: 20px 2px; }
.fv-dl { flex: 0 0 auto; font-size: 15px; text-decoration: none; color: var(--muted); padding: 0 6px; }
.fv-dl:hover { color: var(--accent); }
/* a viewable file is a button now, but must look exactly like the link it replaced */
button.myf-name { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; padding: 0; }

/* ── 📋 My Report ──────────────────────────────────────────────────────────────────────────────── */
.rpt { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 9px; }
.rpt-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rpt-play, .rpt-stop { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--field); color: var(--ink-2); cursor: pointer; }
.rpt-play:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.rpt-play:disabled { opacity: .7; cursor: default; }
.rpt-stop { color: var(--bad); border-color: rgba(224,90,78,.5); }
.rpt-when { font-size: 11px; color: var(--muted); margin-left: auto; }
.rpt-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 5px; }
.rpt-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px;
  background: var(--field); border: 1px solid transparent; }
.rpt-row.now { border-color: var(--accent); background: var(--accent-soft); }
.rpt-n { flex: 0 0 auto; width: 18px; font-size: 10.5px; font-weight: 800; color: var(--faint); text-align: right; }
.rpt-ic { flex: 0 0 auto; font-size: 14px; }
.rpt-nm { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.rpt-up, .rpt-dn, .rpt-rm { flex: 0 0 auto; border: 0; background: none; color: var(--faint);
  font: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.rpt-up:hover, .rpt-dn:hover { color: var(--accent); }
.rpt-rm:hover { color: var(--bad); }
.rpt-up:disabled, .rpt-dn:disabled { opacity: .25; cursor: default; }
.rpt-empty { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.rpt-add { flex: 0 0 auto; display: flex; gap: 6px; }
.rpt-pick { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink); }
.rpt-addb { flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--ink-2); cursor: pointer; }
.rpt-addb:hover { border-color: var(--accent); color: var(--accent); }
/* v2.28 — the live tag on the area picker */
.bsa-livetag { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--accent); }

/* ── 📈 Site Traffic ───────────────────────────────────────────────────────────────────────────── */
.slm { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 9px; }
.slm-top { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.slm-now b, .slm-stat b { display: block; font-variant-numeric: tabular-nums; line-height: 1; }
.slm-now b { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--accent); }
.slm-now b.warn { color: var(--warn); }
.slm-now b.bad { color: var(--bad); }
.slm-stat b { font-size: 17px; font-weight: 700; color: var(--ink); }
.slm-now span, .slm-stat span { display: block; margin-top: 3px; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.slm-warn b { color: var(--bad); }
.slm-chart { flex: 1 1 auto; min-height: 54px; width: 100%; display: block; }
.slm-legend { flex: 0 0 auto; font-size: 10.5px; color: var(--muted); line-height: 1.45; }
.slm-eps { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.slm-ep { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.slm-epn { flex: 0 0 auto; width: 40%; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--ink-2); font-weight: 600; }
.slm-epbar { flex: 1 1 auto; height: 7px; border-radius: 4px; background: var(--field); overflow: hidden; }
.slm-epbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.slm-epv { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; }
.slm-none { font-size: 12px; color: var(--faint); }
/* the smaller sizes keep the number and the chart, and drop the prose */
.sz-micro .slm-legend, .sz-small .slm-legend, .sz-micro .slm-eps { display: none; }
.sz-micro .slm-stat { display: none; }
/* ● LIVE on a camera cell */
.hcam-golive { position: absolute; top: 7px; left: 8px; font: inherit; font-size: 9.5px; font-weight: 800;
  letter-spacing: .04em; padding: 3px 7px; border-radius: 5px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45); color: #fff; }
.hcam-golive:hover { border-color: #fff; }
.hcam-golive.on { background: rgba(200,40,40,.9); border-color: rgba(255,255,255,.6);
  animation: slmPulse 1.4s ease-in-out infinite; }
@keyframes slmPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
/* only what the LIVE button needs — the cell's existing look is left alone (it was a <button>,
   it is a <div> now, and the original rule above still styles it) */
.hcam-cell { position: relative; }
@media (prefers-reduced-motion: reduce) { .hcam-golive.on { animation: none; } }

/* ── 📬 Mail Watch ─────────────────────────────────────────────────────────────────────────────── */
.mw { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
.mw-stage { position: relative; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: var(--field); }
.mw-img { display: block; width: 100%; height: auto; }
.mw-ov { position: absolute; left: 0; top: 0; pointer-events: none; }
.mw-hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.mw-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.mw-bar button { font: inherit; font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--field); color: var(--ink-2); cursor: pointer; }
.mw-bar button:hover { border-color: var(--accent); color: var(--accent); }
.mw-out { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mw-verdict { font-size: 13.5px; font-weight: 800; line-height: 1.35; }
.mw-verdict.bn-ok { color: var(--accent); }
.mw-verdict.bn-warn { color: var(--warn); }
.mw-verdict.bn-waiting { color: var(--muted); }
.mw-when { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ── 🗑 Front Yard Scanner ──────────────────────────────────────────────────────────────────────── */
.bsc { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 8px; }
.bsc-stage { position: relative; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: var(--field); }
.bsc-img { display: block; width: 100%; height: auto; }
.bsc-ov { position: absolute; left: 0; top: 0; pointer-events: none; }
.bsc-picking { cursor: crosshair; }
.bsc-picking .bsc-ov { pointer-events: auto; }
.bsc-hint { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--muted); }
/* v2.39 — the scanner's live status. GREEN when idle on purpose: outside its window it is working as
   intended, and colouring that amber/red would train him to ignore the strip. */
.ysb { flex: 0 0 auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 11.5px; line-height: 1.35; }
.ysb:empty { display: none; }
.ysb b { font-weight: 700; }
.ysb-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; align-self: center; }
.ysb-idle { color: var(--good); }
.ysb-live { color: var(--accent); }
.ysb-off  { color: var(--muted); }
.ysb-sub { color: var(--muted); }
/* the live one breathes, so "watching" reads as active without being distracting */
.ysb-live .ysb-dot { animation: ysbPulse 2s ease-in-out infinite; }
@keyframes ysbPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.bsc-bar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; }
.bsc-bar button { font: inherit; font-size: 11.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--field); color: var(--ink-2); cursor: pointer; }
.bsc-bar button:hover { border-color: var(--accent); color: var(--accent); }
.bsc-out { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.bsc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.bsc-list li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: var(--field); border-radius: 9px; padding: 6px 10px; }
.bsc-dot { width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset; }
.bsc-when { margin-left: auto; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.bsc-none { font-size: 12.5px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.bsc-none span, .bsc-foot { font-size: 10.5px; color: var(--faint); }
.bsc-none span { display: block; }
.bsc-foot { margin-top: 7px; }
/* the area picker — a big picture you can actually draw on */
.bsa-modal { width: min(94vw, 1000px); max-width: 94vw; }
.bsa-tip { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; line-height: 1.45; }
.bsa-stage { position: relative; border-radius: 12px; overflow: hidden; background: #000; touch-action: none; cursor: crosshair; min-height: 120px; }
.bsa-img { display: block; width: 100%; height: auto; }
.bsa-ov { position: absolute; left: 0; top: 0; pointer-events: none; }
.bsa-load { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); background: rgba(0,0,0,.4); }
.bsa-found { margin-top: 10px; min-height: 26px; }
.bsa-list { display: flex; flex-wrap: wrap; gap: 6px; }
.bsa-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; background: var(--field); border-radius: 20px; padding: 5px 12px; }
.bsa-chip i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.bsa-none { font-size: 12.5px; color: var(--faint); }
.bsa-warn { font-size: 11.5px; color: #e8b93c; margin-top: 6px; }
.bsa-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.bsa-bar button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--ink-2); cursor: pointer; }
.bsa-bar button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bsa-bar button:disabled { opacity: .45; cursor: default; }
.bsa-save:not(:disabled) { background: rgba(63,145,66,.22); border-color: rgba(63,145,66,.6); color: #7fd98a; }
/* v2.26 — the camera light control inside the area picker */
.bsa-flood.on { background: rgba(224,165,46,.20); border-color: rgba(224,165,46,.65); color: #e8b93c; }
.bsa-flood.none { opacity: .45; }
.bsa-hint { font-size: 11.5px; color: var(--faint); margin-left: auto; }

/* seen-at-the-kerb tick on Bin Night, fed by the Front Yard Scanner */
.bn-icon { position: relative; }
.bn-icon.bn-out img { filter: none; }
.bn-icon:not(.bn-out) img { opacity: .42; filter: grayscale(.55); }
.bn-tick { position: absolute; right: -2px; top: -3px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.bn-status { font-size: 11px; font-weight: 700; margin-top: 5px; line-height: 1.35; }
.bn-status.bn-ok { color: var(--accent); }
.bn-status.bn-warn { color: var(--warn); }
.bn-status.bn-waiting { color: var(--muted); }
/* scanner: the AI verdict + the crop preview in the area picker */
.bsc-verdict { font-size: 11.5px; font-weight: 700; margin-top: 7px; line-height: 1.4; }
.bsc-verdict.bn-ok { color: var(--accent); }
.bsc-verdict.bn-warn { color: var(--warn); }
.bsc-verdict.bn-waiting { color: var(--muted); }
.bsc-note { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.bsa-crop { margin-top: 4px; }
.bsa-crop img { display: block; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.bsa-cropcap { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.bsa-note { font-size: 11.5px; color: var(--muted); margin-top: 6px; }

/* ── 🌈 Iris Visualiser ───────────────────────────────────────────────────────────────────────────
   The engine fills whatever box it's given, so the BOX is what must never end up a silly shape. Each
   tile size gets its own aspect ratio, and the graph is centred with whatever space is left over —
   that's what stops it stretching (too wide) or squashing (too tall) as the tile is resized. */
.ivz { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 6px; }
.ivz-box { flex: 0 1 auto; width: 100%; aspect-ratio: 2 / 1; max-height: 100%; align-self: center; border-radius: 10px; overflow: hidden; background: #03050a; }
/* ⚠ REQUIRED, and easy to miss: the engine measures the CANVAS's own box, and ships no CSS for it — so
   without this the canvas stays at its intrinsic 300x150 and gets STRETCHED into whatever shape the tile
   is. (Both of the kit's own examples set exactly this on the host page.) */
.ivz-box canvas { display: block; width: 100%; height: 100%; }
.ivz-legend { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-height: 13px; }
.ivz-state { font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
/* per size: keep the graph in a sensible shape rather than whatever the tile happens to be */
.ivz-micro .ivz-box    { aspect-ratio: 1 / 1; }        /* 25% is nearly square */
.ivz-micro .ivz-legend { display: none; }              /* no room for a caption */
.ivz-small .ivz-box    { aspect-ratio: 2 / 1; }        /* 50% is wide and short */
.ivz-standard .ivz-box { aspect-ratio: 1 / 1; }
.ivz-large .ivz-box    { aspect-ratio: 1 / 1.6; }      /* 200% portrait — taller than wide */
.ivz-largeland .ivz-box, .ivz-xlarge .ivz-box { aspect-ratio: 2.6 / 1; }
.ivz-super .ivz-box    { aspect-ratio: 2 / 1; }
/* a tall narrow box would leave the graph unreadably thin, so cap it and centre instead */
.ivz-large .ivz-box { max-width: 100%; }
@media (max-width: 720px) { .ivz-box { aspect-ratio: 2 / 1 !important; } }

.aic { display: flex; flex-direction: column; gap: 9px; height: 100%; min-height: 0; }
.aic-log { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 2px; }
/* v1.99 — All / Archived / Sent as visible tabs on the Notes tile (they were menu-only before) */
.nw-views { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.nw-vtab { font: inherit; font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 8px; border: 1px solid transparent; background: var(--field); color: var(--muted); cursor: pointer; white-space: nowrap; }
.nw-vtab:hover { color: var(--ink); }
.nw-vtab.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
/* the title field flashes while she's waiting for you to speak it */
.note-title-listening { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft); }

/* v1.96 — the conversation sits at the BOTTOM, next to the input, and grows upward like any chat.
   In a tall tile the messages used to cling to the top with a huge empty gap under them.
   An auto-margin spacer is used rather than justify-content:flex-end, because that would make the
   oldest messages unreachable once the log overflows. */
.aic-log::before { content: ''; margin-top: auto; }
.aic-hint { margin: auto; text-align: center; color: var(--faint); font-size: 12.5px; padding: 12px; max-width: 80%; }
.aic-msg { max-width: 82%; padding: 9px 12px; border-radius: 13px; font-size: 13px; line-height: 1.42; white-space: pre-wrap; word-break: break-word; }
.aic-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.aic-ai { align-self: flex-start; background: var(--field); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 4px; }
.aic-typing { color: var(--muted); letter-spacing: 2px; animation: aic-blink 1.1s steps(1) infinite; }
@keyframes aic-blink { 50% { opacity: .35; } }
/* v1.96 — four controls plus the input no longer fit a narrow tile, so the row WRAPS: the buttons keep
   their size and the input drops to its own full-width line when there isn't room. Previously it
   overflowed the tile and the input was crushed to nothing. */
.aic-row { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 7px; }
.aic-ask { flex: 1 1 165px; display: flex; align-items: flex-end; gap: 7px; min-width: 0; }
.aic-ask .aic-in { flex: 1 1 auto; min-width: 0; }
.aic-row .aic-mic, .aic-row .aic-mute, .aic-row .aic-reset, .aic-ask .aic-send { flex: 0 0 auto; }
.aic-in { flex: 1 1 auto; min-width: 0; resize: none; height: 40px; background: var(--field); border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; color: var(--ink); font: inherit; font-size: 13px; line-height: 1.35; }
/* v1.94 — mute + reset sit alongside the mic; all four buttons share the mic/send sizing */
.aic-mute, .aic-reset { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); cursor: pointer; font-size: 15px; display: grid; place-items: center; background: var(--field); color: var(--ink); transition: background .14s, border-color .14s; }
.aic-mute:hover, .aic-reset:hover { border-color: var(--accent); color: var(--accent); }
.aic-mute.on { background: #d13438; border-color: #d13438; color: #fff; }   /* muted is unmistakable */
.aic-mic.off { background: var(--panel); color: var(--faint); border-style: dashed; }   /* mic OFF reads at a glance */
.aic-mic, .aic-send { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--line); cursor: pointer; font-size: 16px; display: grid; place-items: center; }
.aic-mic { background: var(--field); color: var(--ink); }
.aic-mic.on { background: #d13438; color: #fff; border-color: #d13438; animation: aic-pulse 1.1s ease-in-out infinite; }
@keyframes aic-pulse { 50% { box-shadow: 0 0 0 5px rgba(209,52,56,.28); } }
.aic-send { background: var(--accent); color: #fff; border-color: transparent; font-size: 15px; }
.aic-send:disabled { opacity: .5; cursor: default; }

/* ── My Files ── */
.myf { display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 0; }
.myf-drop { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px 14px; transition: border-color .15s, background .15s; }
.myf-drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.myf-upbtn { background: var(--accent); color: #fff; border: 0; border-radius: 9px; font: inherit; font-weight: 600; font-size: 13px; padding: 8px 14px; cursor: pointer; }
.myf-drophint { font-size: 12.5px; color: var(--muted); }
.myf-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.myf-empty { margin: auto; text-align: center; color: var(--faint); font-size: 12.5px; padding: 16px; }
.myf-row { display: flex; align-items: center; gap: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; }
.myf-ic { font-size: 18px; flex: 0 0 auto; }
.myf-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myf-name:hover { color: var(--accent); text-decoration: underline; }
.myf-meta { font-size: 11px; color: var(--faint); flex: 0 0 auto; white-space: nowrap; }
.myf-del { background: none; border: 0; cursor: pointer; font-size: 13px; opacity: .5; padding: 2px 4px; flex: 0 0 auto; }
.myf-del:hover { opacity: 1; }
/* viewer modal */
.md3-modal { width: min(680px, 94vw); }
.md3-vbody { display: flex; flex-direction: column; gap: 8px; }
.md3-vwrap { position: relative; aspect-ratio: 4/3; background: #081120; border-radius: 12px; overflow: hidden; }
.md3-cv { width: 100%; height: 100%; display: block; touch-action: none; }
.md3-load, .md3-err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9fb4d8; font-size: 13px; }
.md3-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.md3-stats { font-size: 10.5px; color: var(--muted); margin-left: auto; }
.md3-pi { background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.md3-pirow b { color: var(--muted); font-weight: 700; margin-right: 6px; font-size: 11px; }
.md3-fit { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11px; margin-right: 5px; }
.md3-fit.ok { background: rgba(74,222,128,.15); color: #4ade80; } .md3-fit.no { background: rgba(248,113,113,.15); color: #f87171; }
.md3-pinote { font-size: 10.5px; color: var(--muted); }
.md3-picklist { display: flex; flex-direction: column; }
.stlu-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 22px; text-align: center; cursor: pointer; margin-bottom: 10px; }
.stlu-drop.drag, .stlu-drop.has { border-color: var(--accent); }
.stlu-dropinner span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.stlu-status { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ═══════════ Bambu Labs P1S ═══════════ */
.bmb { display: flex; flex-direction: column; gap: 9px; height: 100%; overflow-y: auto; }
.bmb-hero { background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.bmb-stage { font-size: 15px; font-weight: 700; text-transform: capitalize; color: var(--muted); }
.bmb-stage.on { color: #37d67a; }
.bmb-task { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bmb-progwrap { height: 8px; background: rgba(128,128,128,.18); border-radius: 5px; overflow: hidden; margin-top: 8px; }
.bmb-progbar { height: 100%; background: linear-gradient(90deg, #37d67a, #00d9c0); border-radius: 5px; transition: width .5s; }
.bmb-progrow { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.bmb-layer { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.bmb-spools { display: flex; align-items: center; gap: 5px; }
.bmb-spoolslab { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.bmb-spool { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.3); }
.bmb-temps { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 7px; }
.bmb-temp { background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.bmb-tl { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.bmb-tv { font-size: 15px; font-weight: 700; color: var(--ink); } .bmb-tv i { font-size: 11px; color: var(--muted); font-style: normal; }
.bmb-ctl { display: flex; flex-wrap: wrap; gap: 6px; }
.bmb-b { background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.bmb-b:hover { border-color: var(--accent); }
.bmb-b.on { background: rgba(255,212,0,.16); border-color: #FFD400; }
.bmb-seclab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.bmb-ams { display: flex; flex-direction: column; gap: 4px; }
.bmb-tray { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.bmb-swatch { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0,0,0,.3); flex: 0 0 auto; }

/* ── Robot Vacuum tile ── */
.vac { display: flex; flex-direction: column; gap: 10px; height: 100%; overflow-y: auto; }
.vac-setup { color: var(--muted); font-size: 13px; line-height: 1.5; }
.vac-hint { color: var(--faint); font-size: 12px; margin-top: 6px; }
.vac-hero { display: flex; align-items: center; gap: 12px; }
.vac-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--field); display: grid; place-items: center; font-size: 24px; flex: 0 0 auto; }
.vac-ic.on { background: rgba(60,200,255,.16); animation: vacPulse 1.4s ease-in-out infinite; }
@keyframes vacPulse { 50% { box-shadow: 0 0 0 6px rgba(60,200,255,.14); } }
.vac-heromid { flex: 1 1 auto; min-width: 0; }
.vac-status { font-size: 15px; font-weight: 700; text-transform: capitalize; }
.vac-batt { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.vac-battbar { flex: 1 1 auto; height: 7px; background: var(--field); border-radius: 4px; overflow: hidden; }
.vac-battbar span { display: block; height: 100%; background: linear-gradient(90deg,#3ac06a,#7fe0a0); }
.vac-battn { font-size: 12px; color: var(--muted); font-weight: 600; }
.vac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vac-chip { font-size: 11.5px; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 8px; padding: 3px 8px; }
.vac-ctl { display: flex; flex-wrap: wrap; gap: 6px; }
.vac-b { background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; cursor: pointer; font-size: 12.5px; color: var(--ink); }
.vac-b:hover { border-color: var(--accent); }
.vac-b.on { background: rgba(60,200,255,.16); border-color: #3cc8ff; }
.vac-b.vac-start { background: var(--accent); color: #fff; border-color: transparent; font-weight: 600; }
.vac-row { display: flex; align-items: center; gap: 9px; }
.vac-rl { font-size: 12px; color: var(--muted); min-width: 92px; text-transform: capitalize; }
.vac-fan, .vac-sel { flex: 1 1 auto; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.vac-seclab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.vac-extra { display: flex; flex-direction: column; gap: 7px; }

/* ── UniFi Dream Machine tile ── */
.uni { display: flex; flex-direction: column; gap: 10px; height: 100%; overflow-y: auto; }
.uni-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.uni-gw { font-size: 14px; font-weight: 700; }
.uni-isp { font-size: 11.5px; color: var(--muted); }
.uni-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 7px; }
.uni-stat { background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 8px 6px; text-align: center; }
.uni-stat b { display: block; font-size: 17px; font-weight: 800; }
.uni-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.uni-stat.warn b { color: #e8a33d; }
.uni-dev-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.uni-devs { display: flex; flex-direction: column; gap: 5px; }
.uni-dev { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.uni-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.uni-dot.on { background: #3ac06a; } .uni-dot.off { background: #d13438; }
.uni-dn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uni-dm { color: var(--faint); font-size: 11px; margin-left: auto; white-space: nowrap; }
.uni-upd { font-size: 10px; color: #e8a33d; border: 1px solid rgba(232,163,61,.5); border-radius: 5px; padding: 1px 5px; }

/* ── Sensors (one row per room) ── */
.sns { display: flex; flex-direction: column; gap: 8px; height: 100%; overflow-y: auto; }
.sns-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 11px 13px; background: var(--field); border: 1px solid var(--line); border-radius: 12px; }
.sns-room { display: flex; align-items: center; gap: 6px; flex: 1 1 120px; min-width: 100px; }
.sns-name { font-size: 15px; font-weight: 700; }
.sns-edit { background: none; border: 0; cursor: pointer; font-size: 12px; opacity: .45; padding: 2px 4px; }
.sns-row:hover .sns-edit { opacity: 1; }
.sns-rename { background: var(--panel, #0e1524); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; color: var(--ink); font: inherit; font-size: 14px; width: 130px; }
.sns-rsave { background: var(--accent); color: #fff; border: 0; border-radius: 7px; padding: 5px 9px; cursor: pointer; margin-left: 4px; }
.sns-vals { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sns-chip { font-size: 13px; font-weight: 700; background: var(--panel, #0e1524); border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sns-temp { color: #ff9d5c; }
.sns-hum { color: #5cc8ff; }
.sns-occ.on { color: #3ac06a; border-color: rgba(58,192,106,.4); background: rgba(58,192,106,.1); }
.sns-occ.off { color: var(--muted); }
.tile-ic-img { width: 20px; height: 20px; object-fit: contain; display: block; }
/* v1.26 — printer photo beside the status hero, sized to match the hero's top & bottom */
.bmb-top { display: flex; align-items: stretch; gap: 10px; }
.bmb-photo { flex: 0 0 auto; align-self: stretch; width: 78px; height: auto; object-fit: contain; }
.bmb-top .bmb-hero { flex: 1 1 auto; min-width: 0; }
.bmb-setup { padding: 14px; color: var(--muted); font-size: 13px; }
/* v1.24 — printer offline state */
.bmb-offline { padding: 16px 12px; text-align: center; }
.bmb-off-ic { font-size: 34px; opacity: .5; }
.bmb-off-h { font-size: 15px; font-weight: 700; margin: 6px 0 4px; }
.bmb-off-m { font-size: 12.5px; color: var(--bad); margin-bottom: 10px; }
.bmb-off-steps { text-align: left; background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 10px 8px; font-size: 12px; color: var(--muted); }
.bmb-off-steps ol { margin: 5px 0 0; padding-left: 20px; } .bmb-off-steps li { margin: 3px 0; }
.bmb-recheck { margin-top: 12px; }
.bmb-relink { margin-top: 12px; }
/* v2.39 — the outcome of a Reconnect attempt. Deliberately not var(--bad): the usual case is a plain
   "reloaded, waiting for the printer", which is progress, not an error. */
.bmb-off-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; min-height: 14px; }
.bmb-hint { font-size: 11.5px; margin-top: 6px; }
.bmb-cammodal { width: min(680px, 94vw); }
.bmb-camwrap { display: flex; align-items: center; justify-content: center; background: #000; min-height: 240px; position: relative; padding: 0 !important; }
.bmb-camimg { max-width: 100%; max-height: 78vh; display: block; }
.bmb-camnote { position: absolute; color: #9fb4d8; font-size: 13px; }

/* ═══════════ Power Plant ═══════════ */
.pp { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.pp-flow { flex: 1 1 auto; min-height: 200px; border-radius: 14px; background: radial-gradient(120% 100% at 50% 0%, #0c2036 0%, #06121f 72%); overflow: hidden; }
.pp-canvas { width: 100%; height: 100%; display: block; }
.pp-prices { flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; }
.pp-price { flex: 1 1 0; background: var(--field); border-radius: 10px; padding: 8px 11px; display: flex; flex-direction: column; gap: 1px; }
.pp-price span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.pp-price b { font-size: 17px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-sellv { color: var(--accent); }
.pp-spike { display: flex; align-items: center; background: var(--bad); color: #fff; font-weight: 800; font-size: 12px; padding: 0 14px; border-radius: 10px; }
/* v2.40 — the two LIGHT Power Plant designs. Deliberately plain DOM and CSS: no canvas, no animation
   frame, no gradients being repainted 30 times a second. The animated flow measured 2.3% of the main
   thread on its own; these measure nothing at all, because nothing repaints between polls.
   No transitions on the numbers either — a width transition on the battery bar would be one more thing
   the compositor has to run, and the value changes twice a minute. */
.pp-panel { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 0; }
.pp-row { display: grid; grid-template-columns: 22px minmax(52px, auto) auto 1fr; align-items: center; gap: 8px;
  padding: 7px 10px; background: var(--field); border-radius: 10px; }
.pp-r-ic { font-size: 14px; text-align: center; }
.pp-r-lb { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pp-r-v { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-r-n { font-size: 11px; color: var(--muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the battery bar spans the row underneath its own cells */
.pp-bar { grid-column: 2 / -1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pp-bar i { display: block; height: 100%; background: var(--accent); }
.pp-bar.pp-low i  { background: var(--bad); }
.pp-bar.pp-high i { background: var(--good); }
.pp-mini { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap; gap: 6px 10px; min-height: 0; }
.pp-m-it { display: inline-flex; align-items: baseline; gap: 4px; }
.pp-m-it i { font-style: normal; font-size: 13px; }
.pp-m-it b { font-size: 18px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-m-it em { font-style: normal; font-size: 10px; color: var(--muted); font-weight: 700; }
.pp-m-soc.pp-low { color: var(--bad); }
.pp-m-soc.pp-high { color: var(--good); }

/* ═══════════ Home Automation ═══════════ */
.hag { display: flex; flex-direction: column; height: 100%; gap: 8px; }
.hag-tiles { flex: 1 1 auto; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; align-content: start; }
/* v1.23 — compact list layout for HA group tiles */
.hag-list { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
.hagl-dev { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); cursor: pointer; text-align: left; width: 100%; }
.hagl-dev:hover { background: var(--field); }
.hagl-dev.sel { background: rgba(63,185,80,.08); }
.hagl-ic { flex: 0 0 auto; font-size: 15px; width: 20px; text-align: center; }
.hagl-nm { flex: 1 1 auto; min-width: 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hagl-tog { flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px; background: #3a3d42; position: relative; transition: background .15s; }
.hagl-tog.on { background: #3fb950; }
.hagl-knob { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.hagl-tog.on .hagl-knob { left: 19px; }
.hag-dev { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 6px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); cursor: pointer; text-align: center; transition: border-color .12s, background .12s; }
.hag-dev.on { background: var(--accent-soft); border-color: var(--accent); }
.hag-dev.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.hag-ic { font-size: 22px; opacity: .55; transition: opacity .12s; }
.hag-dev.on .hag-ic { opacity: 1; }
.hag-nm { font-size: 11px; font-weight: 600; color: var(--ink); line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hag-st { font-size: 9px; font-weight: 800; letter-spacing: .06em; color: var(--muted); }
.hag-dev.on .hag-st { color: var(--accent); }
.hag-foot { flex: 0 0 auto; display: flex; gap: 6px; }
/* v1.27 — when All on/off are hidden, the ⚙ sits neatly on the right */
.hag-foot-min { justify-content: flex-end; }
.hag-b { flex: 1 1 auto; font: inherit; font-size: 11.5px; font-weight: 700; padding: 7px; border-radius: 9px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; }
.hag-b.hag-link { flex: 0 0 40px; }
.hag-b:hover { border-color: var(--accent); color: var(--accent); }
/* automations */
.haa { display: flex; flex-direction: column; gap: 5px; overflow-y: auto; height: 100%; }
.haa-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--field); cursor: pointer; text-align: left; width: 100%; }
.haa-item:hover { border-color: var(--accent); }
.haa-ic { font-size: 22px; }
.haa-tx { flex: 1 1 auto; min-width: 0; }
.haa-nm { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.haa-meta { font-size: 11px; color: var(--muted); }
.haa-run { font-size: 16px; color: var(--accent); }
/* devices modal */
.ha-modal { max-width: 620px; }
.ha-setupgrps { margin-left: auto; margin-right: 8px; background: var(--field); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 12.5px; padding: 5px 10px; cursor: pointer; }
.ha-setupgrps:hover { border-color: var(--accent); }
.hag-intro { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.hag-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); margin-bottom: 8px; flex-wrap: wrap; }
.hag-ic { font-size: 16px; flex: 0 0 auto; }
.hag-name { flex: 1 1 130px; min-width: 110px; background: var(--panel, #0e1524); border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; color: var(--ink); font: inherit; font-size: 13px; }
.hag-count { font-size: 11px; color: var(--faint); flex: 0 0 auto; }
.hag-count::after { content: ' dev'; }
.hag-rename, .hag-del { background: var(--panel, #0e1524); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer; flex: 0 0 auto; }
.hag-rename:hover { border-color: var(--accent); }
.hag-del:hover { border-color: var(--bad, #d13438); }
.hag-merge { background: var(--panel, #0e1524); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; font-size: 12px; padding: 6px 8px; cursor: pointer; flex: 0 0 auto; }

.ha-grp { margin-bottom: 16px; }
.ha-grp-h { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.ha-grp-devs { display: flex; flex-direction: column; gap: 5px; }
.ha-drow { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.ha-drow.on { border-color: var(--accent); background: var(--accent-soft); }
.ha-dtog { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; }
.ha-dic { font-size: 18px; }
.ha-dnm { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ha-dst { font-size: 10px; font-weight: 800; color: var(--muted); }
.ha-drow.on .ha-dst { color: var(--accent); }
.ha-cols { display: flex; gap: 3px; flex: 0 0 auto; }
.ha-col { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.ha-col:hover { transform: scale(1.25); }
.ha-dedit, .ha-dmove { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--muted); cursor: pointer; font-size: 12px; opacity: .55; transition: opacity .12s; }
.ha-drow:hover .ha-dedit, .ha-drow:hover .ha-dmove { opacity: 1; }
.ha-dedit:hover, .ha-dmove:hover { color: var(--accent); border-color: var(--accent); }
.ha-movelbl { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); }
.ha-movesel { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px; padding: 5px 8px; border: 1.5px solid var(--accent); border-radius: 8px; background: var(--panel); color: var(--ink); }
.ha-movenew { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px; padding: 5px 9px; border: 1.5px solid var(--accent); border-radius: 8px; background: var(--panel); color: var(--ink); }
.ha-rename { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 13px; padding: 5px 9px; border: 1.5px solid var(--accent); border-radius: 8px; background: var(--panel); color: var(--ink); }
.ha-rsave, .ha-rcancel { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; font-size: 13px; color: var(--ink); }
.ha-rsave { color: var(--accent); border-color: var(--accent); }
/* ── v1.17 Settings → Home Assistant → ➕ More Devices ─────────────────────────────────── */
.hmd-bar { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.hmd-q { flex: 2 1 150px; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; color: var(--ink); font: inherit; font-size: 12.5px; }
.hmd-group, .hmd-newg { flex: 1 1 130px; min-width: 0; background: var(--field); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; color: var(--ink); font: inherit; font-size: 12.5px; }
.hmd-bar2 { display: flex; align-items: center; justify-content: space-between; margin: 7px 1px 4px; font-size: 11.5px; color: var(--muted); }
.hmd-all { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.hmd-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.hmd-row { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-bottom: 1px solid var(--line); cursor: pointer; }
.hmd-row:last-child { border-bottom: 0; }
.hmd-row:hover { background: rgba(255,255,255,.04); }
.hmd-ic { flex: 0 0 auto; font-size: 14px; }
.hmd-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hmd-nm { font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.hmd-id { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmd-state { flex: 0 0 auto; font-size: 10.5px; color: var(--muted); text-transform: uppercase; }
.hmd-state.on { color: #3fb950; font-weight: 700; }
/* v1.18 — already-on-a-tile rows */
.hmd-row.shown { background: rgba(63,185,80,.06); cursor: default; }
.hmd-row.shown:hover { background: rgba(63,185,80,.10); }
.hmd-tick { flex: 0 0 auto; width: 13px; text-align: center; color: #3fb950; font-weight: 800; font-size: 12px; }
.hmd-badge { font-size: 9.5px; color: var(--accent); background: rgba(255,255,255,.06); border-radius: 6px; padding: 1px 6px; white-space: nowrap; }

.ha-stats { display: flex; gap: 10px; margin-bottom: 4px; }
.ha-stat { flex: 1 1 0; background: var(--field); border-radius: 12px; padding: 12px; text-align: center; }
.ha-stat b { display: block; font-size: 26px; font-weight: 800; color: var(--accent); }
.ha-stat span { font-size: 11px; color: var(--muted); font-weight: 600; }

/* ═══════════ Audio mixer (header + modal) ═══════════ */
.tl-vol { display: flex; align-items: center; gap: 5px; }
.tl-volsl { width: 74px; accent-color: var(--accent); cursor: pointer; }
input[type=range] { accent-color: var(--accent); }
.mix-modal { max-width: 460px; }
.mix-master { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.mix-mlbl { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.mix-msl { flex: 1 1 auto; accent-color: var(--accent); }
.mix-mval { font-size: 13px; font-weight: 700; color: var(--muted); width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.mix-viz { width: 100%; height: 70px; background: var(--field); border-radius: 10px; display: block; margin-bottom: 16px; }
.mix-eq { display: flex; justify-content: space-around; gap: 6px; margin-bottom: 18px; padding: 6px 0; }
.mix-band { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mix-eqsl { -webkit-appearance: slider-vertical; appearance: slider-vertical; writing-mode: vertical-lr; direction: rtl; width: 8px; height: 84px; accent-color: var(--accent); cursor: pointer; }
.mix-blbl { font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.mix-srcs { display: flex; flex-direction: column; gap: 8px; }
.mix-src { display: flex; align-items: center; gap: 10px; }
.mix-src-nm { flex: 0 0 40%; font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-src-mute { flex: 0 0 auto; border: 0; background: none; cursor: pointer; font-size: 15px; }
.mix-src-sl { flex: 1 1 auto; accent-color: var(--accent); }
.mix-src-v { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--muted); width: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.mix-none { color: var(--faint); font-size: 12.5px; text-align: center; padding: 16px; line-height: 1.5; }

/* ═══════════ Edit mode (drag-to-rearrange + wobble) ═══════════ */
.tl-editsave { display: none; font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; cursor: pointer; animation: tl-pulse 1.4s ease-in-out infinite; }
/* v2.14 — while AUTO-ARRANGE is on, edit mode reorders instead of free-placing */
.tl-sorting .tile { cursor: grab; }
.tl-sorting .tile.tl-dragging { opacity: .55; outline: 2px dashed var(--accent); outline-offset: -2px; }
.tl-sorting .tl-edithint-auto { display: inline; }
.tl-edithint-auto { display: none; }
.tl-sorting .tl-edithint { display: none !important; }
.tl-editing .tl-editsave { display: inline-flex; align-items: center; }
.tl-edithint { display: none; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tl-edithint b { color: var(--ink); font-weight: 700; }
.tl-editing .tl-edithint { display: inline; }
@media (max-width: 720px) { .tl-edithint { display: none !important; } }
@keyframes tl-pulse { 0%,100% { box-shadow: 0 0 0 0 var(--glow); } 50% { box-shadow: 0 0 0 5px transparent; } }
.tl-editing .tl-stage { cursor: default; }
/* v3.06 — THE WOBBLE IS GONE, and it was the bug.
   `animation: tl-wobble .3s infinite` sat on `.tl-editing .tile`, so entering edit mode put a
   perpetual rotate() on EVERY tile at once. A rotation promotes each tile to its own composited
   layer, and this board runs dozens of them simultaneously — several holding hundreds of poster
   images, a <video>, or a canvas. That is far past the GPU texture budget, so the compositor
   evicts layers mid-animation: tiles blank out, the board flickers, and it can go nearly black.
   Edit mode now announces itself with a static dashed outline, which costs nothing to composite
   and cannot thrash.
   ⚠ This was invisible to every headless check: headless Chrome reports
   prefers-reduced-motion: reduce, and the rule below used to be switched off under that query —
   so the automated runs only ever measured the one configuration that was already fine. */
.tl-editing .tile { cursor: grab; outline: 1.5px dashed var(--accent); outline-offset: -3px; }
.tl-editing .tile:hover { transform: none; box-shadow: var(--shadow-hi); }
.tl-editing .tile-body, .tl-editing .tile-menu, .tl-editing .tile-ic, .tl-editing .tl-pagearrow { pointer-events: none; }
.tl-editing .tile.tl-dragging { animation: none; opacity: .55; cursor: grabbing; outline: 2px dashed var(--accent); outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .tl-editsave, .tl-ebar-save { animation: none; } }

/* v3.06 — the Save layout bar. The header button is easy to lose in a busy header on a wide
   screen (Tristan: "it's hard to guess where the save layout button is"), so edit mode now also
   puts one in a fixed spot that never moves and never scrolls away. Same action as the header
   button — this is a second door to it, not a second code path. */
.tl-editbar {
  position: fixed; left: 50%; bottom: 18px; z-index: 150;
  transform: translateX(-50%) translateY(160%);
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px 9px 16px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-hi);
  transition: transform .22s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.tl-editing .tl-editbar { transform: translateX(-50%) translateY(0); pointer-events: auto; }
.tl-ebar-txt { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.tl-ebar-txt b { color: var(--ink); font-weight: 700; }
.tl-ebar-save { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 16px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; cursor: pointer; animation: tl-pulse 1.4s ease-in-out infinite; }
.tl-ebar-exit { font: inherit; font-size: 13px; background: var(--field); border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; width: 30px; height: 30px; cursor: pointer; }
.tl-ebar-exit:hover { color: var(--ink); border-color: var(--accent); }
@media (max-width: 720px) { .tl-ebar-txt { display: none; } .tl-editbar { bottom: 12px; } }

/* ═══════════ movable + resizable modals (desktop) ═══════════ */
.tl-modal.mdr .tl-modal-head { cursor: move; }
.tl-modal.mdr.art-modal .art-hero, .tl-modal.mdr.apod-modal .apod-modal-img, .tl-modal.mdr.tv-modal .tv-info { cursor: move; }
.tl-modal.mdr.tv-modal { display: flex; flex-direction: column; }
.tl-modal.mdr.tv-modal .tv-player { flex: 1 1 auto; min-height: 0; }
.tl-modal.mdr.tv-modal .tv-player video { max-height: none; height: 100%; object-fit: contain; }
body.mdr-active { user-select: none; cursor: grabbing; }
body.mdr-active iframe, body.mdr-active video { pointer-events: none; }
.mdr-h { position: absolute; z-index: 30; }
.mdr-n { top: 0; left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.mdr-s { bottom: 0; left: 14px; right: 14px; height: 7px; cursor: ns-resize; }
.mdr-e { right: 0; top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }
.mdr-w { left: 0; top: 14px; bottom: 14px; width: 7px; cursor: ew-resize; }
.mdr-ne { top: 0; right: 0; width: 15px; height: 15px; cursor: nesw-resize; }
.mdr-nw { top: 0; left: 0; width: 15px; height: 15px; cursor: nwse-resize; }
.mdr-se { bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.mdr-sw { bottom: 0; left: 0; width: 15px; height: 15px; cursor: nesw-resize; }
/* subtle grip hint on the bottom-right corner */
.mdr-se::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); opacity: .7; }

/* ═══════════ API Connection tabs ═══════════ */
.api-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.api-tab { display: flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 650; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); cursor: pointer; transition: border-color .14s, color .14s, background .14s; }
.api-tab:hover { border-color: var(--accent); }
.api-tab.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.api-t-ic { font-size: 14px; }
.api-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.api-dot.on { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.api-prov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.api-prov-name { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.api-badge { font-size: 10.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.api-link { font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.api-link:hover { text-decoration: underline; }
.api-help { margin-top: 14px; background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 16px; }
.api-help-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.api-help ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.api-help li { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.api-help code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; background: var(--panel); padding: 1px 5px; border-radius: 5px; }
.api-help-link { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.api-help-link:hover { text-decoration: underline; }

/* ═══════════════════════════ 📝 My Notes ═══════════════════════════ */
/* Tile list */
.nw-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; flex-wrap: wrap; }
.nw-new, .nw-back {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink-2);
  padding: 5px 11px; border-radius: 8px; white-space: nowrap;
}
.nw-new { border-color: var(--accent); color: var(--accent); }
.nw-new:hover { background: var(--accent); color: #fff; }
.nw-back:hover { border-color: var(--accent); color: var(--accent); }
.nw-view { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.nw-search {
  flex: 1 1 120px; min-width: 90px; font: inherit; font-size: 12.5px;
  background: var(--field); border: 1.5px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 5px 10px;
}
.nw-search:focus { outline: none; border-color: var(--accent); }
.nw-list { display: flex; flex-direction: column; gap: 4px; }
/* v2.43 — the buttons get their OWN row. There are up to seven of them, and as a right-hand column they
   were eating ~170px of every row, so the title wrapped early and the preview clamped to almost nothing.
   Wrapping .nw-acts to 100% width puts the title and message across the full tile.
   They are also permanently visible now, at reduced opacity: revealing them on hover only works when
   they cost no layout, and a strip that appears and disappears would make every row jump as the mouse
   crosses the list. */
.nw-row {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 9px; cursor: pointer;
  padding: 7px 8px; border-radius: 9px; border: 1px solid transparent;
}
.nw-row:hover { background: var(--field); border-color: var(--line-2); }
.nw-num {
  flex: none; min-width: 22px; text-align: center; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; color: var(--muted); background: var(--field);
  border-radius: 6px; padding: 3px 4px; margin-top: 1px;
}
.nw-row:hover .nw-num { background: var(--accent-soft); color: var(--accent); }
/* v2.39 — a pinned note. A tinted left edge rather than a filled row: pins sit at the top of a list he
   reads constantly, so it has to be legible at a glance without shouting over the note titles. */
.nw-row.nw-pinned { background: var(--accent-soft); border-color: var(--line-2); }
.nw-pinmark { font-size: 10.5px; margin-right: 3px; vertical-align: 1px; }
/* the pin button stays visible on a pinned row — the whole action bar is hover-only, so otherwise the
   only way to UNpin is to guess that hovering reveals it */
.nw-row.nw-pinned .nw-acts { opacity: 1; }
.nw-b.nw-pin.on { color: var(--accent); }
.nw-main { flex: 1 1 auto; min-width: 0; }
.nw-t { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; overflow-wrap: anywhere; }
.nw-p { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-d { font-size: 10px; color: var(--faint); margin-top: 3px; letter-spacing: .02em; }
/* own row, right-aligned, indented past the number badge so it lines up under the text */
.nw-acts {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end;
  padding-left: 31px; opacity: .55; transition: opacity .13s ease;
}
.nw-row:hover .nw-acts, .nw-row:focus-within .nw-acts { opacity: 1; }
.nw-b {
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer; color: var(--muted);
  background: transparent; border: 0; border-radius: 6px; padding: 5px 6px;
}
.nw-b:hover { background: var(--accent-soft); color: var(--accent); }
.nw-b:disabled { opacity: .45; cursor: default; }
.nw-empty { font-size: 12.5px; color: var(--muted); line-height: 1.55; padding: 10px 2px; }
.nw-more { font-size: 11px; color: var(--faint); padding: 7px 2px 0; }
/* touch devices have no hover — keep the actions at full strength */
@media (hover: none) { .nw-acts { opacity: 1; } }

/* Editor modal */
.note-modal { width: min(760px, 94vw); }
.note-ed { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.note-title {
  font: inherit; font-size: 16px; font-weight: 700; color: var(--ink);
  background: var(--field); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 13px;
}
.note-title:focus { outline: none; border-color: var(--accent); }
.note-tb { display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  background: var(--field); border: 1px solid var(--line-2); border-radius: 10px; padding: 5px 7px; }
.note-tbb {
  font: inherit; font-size: 12.5px; line-height: 1; cursor: pointer; color: var(--ink-2);
  background: transparent; border: 0; border-radius: 6px; padding: 6px 8px; min-width: 28px;
}
.note-tbb:hover { background: var(--accent-soft); color: var(--accent); }
.note-tbsep { width: 1px; height: 17px; background: var(--line); margin: 0 4px; flex: none; }
.note-rec.on { background: var(--bad); color: #fff; }
.note-body {
  flex: 1 1 auto; min-height: 190px; overflow: auto;
  font-size: 14px; line-height: 1.6; color: var(--ink);
  background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 15px;
}
.note-body:focus { outline: none; border-color: var(--accent); }
.note-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 5px 0; display: block; }
.note-body a { color: var(--accent); }
.note-body ul, .note-body ol { padding-left: 22px; margin: 5px 0; }
.note-body:empty::before { content: 'Write your note… paste a screenshot straight in, or use 📎 Attach.'; color: var(--faint); }
.note-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.note-grow { flex: 1 1 auto; }
.note-acts button { font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  padding: 9px 15px; border-radius: 10px; }
.note-view { font-size: 14px; line-height: 1.6; color: var(--ink); overflow: auto; }
.note-view img { max-width: 100%; height: auto; border-radius: 8px; margin: 5px 0; display: block; }
.note-view a { color: var(--accent); }
@media (max-width: 720px) {
  .note-modal { width: 96vw; }
  .note-body { min-height: 150px; }
  .note-tbb { padding: 7px 9px; }        /* bigger touch targets */
  .note-acts button { flex: 1 1 auto; }
}

/* ═══════════════════ 🔄 Sync & Devices (master settings) ═══════════════════ */
.sy-note { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin-bottom: 14px; }
.sy-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sy-col { background: var(--field); border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 15px; }
.sy-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--muted); margin-bottom: 9px; }
.sy-list { margin: 0; padding-left: 17px; display: flex; flex-direction: column; gap: 5px; }
.sy-list li { font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.sy-why { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin-top: 10px; }
@media (max-width: 720px) { .sy-cols { grid-template-columns: 1fr; } }

/* ═══════════════════════════ 🧲 Torrents ═══════════════════════════ */
.tq-off { font-size: 11.5px; line-height: 1.5; color: var(--ink-2); background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); border-radius: 9px; padding: 8px 10px; margin-bottom: 9px; }
.tq-add { display: flex; gap: 6px; margin-bottom: 9px; }
.tq-in { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px; background: var(--field);
  border: 1.5px solid var(--line); color: var(--ink); border-radius: 8px; padding: 7px 10px; }
.tq-in:focus { outline: none; border-color: var(--accent); }
.tq-go, .tq-file { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent); border-radius: 8px; padding: 6px 11px; }
.tq-go:hover, .tq-file:hover { background: var(--accent); color: #fff; }
.tile-body.tq-drop { outline: 2px dashed var(--accent); outline-offset: -6px; border-radius: 10px; }
.tq-jobs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.tq-job { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-2);
  background: var(--field); border-radius: 8px; padding: 6px 9px; }
.tq-spin { width: 12px; height: 12px; flex: none; }
.tq-jn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-js { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.tq-x { font: inherit; font-size: 11px; cursor: pointer; background: transparent; border: 0; color: var(--muted); padding: 2px 4px; }
.tq-x:hover { color: var(--bad); }
.tq-failed { font-size: 11.5px; color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent);
  border-radius: 8px; padding: 7px 9px; margin-bottom: 8px; line-height: 1.5; }
.tq-clear { font: inherit; font-size: 11px; cursor: pointer; background: transparent; border: 0; color: var(--muted); padding: 3px 0 0; text-decoration: underline; }
.tq-empty { font-size: 12.5px; color: var(--muted); padding: 10px 2px; line-height: 1.5; }
.tq-list { display: flex; flex-direction: column; gap: 7px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.tq-t { background: var(--field); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; }
.tq-top { display: flex; align-items: baseline; gap: 8px; }
.tq-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-pct { flex: none; font-size: 11.5px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.tq-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 6px 0 5px; }
.tq-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s ease; }
.tq-meta { display: flex; align-items: center; gap: 9px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tq-state { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.tq-downloading .tq-state { color: var(--accent); }
.tq-paused .tq-state, .tq-queued .tq-state, .tq-stalled .tq-state { color: var(--warn); }
.tq-error .tq-state { color: var(--bad); }
.tq-error .tq-bar i, .tq-paused .tq-bar i { background: var(--muted); }
.tq-seeding .tq-bar i, .tq-done .tq-bar i { background: var(--good); }
.tq-acts { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .13s ease; }
.tq-t:hover .tq-acts { opacity: 1; }
.tq-b { font: inherit; font-size: 11px; line-height: 1; cursor: pointer; background: transparent; border: 0;
  color: var(--muted); border-radius: 5px; padding: 4px 5px; }
.tq-b:hover { background: var(--accent-soft); color: var(--accent); }
.tq-more { font-size: 11px; color: var(--faint); padding-top: 4px; }
@media (hover: none) { .tq-acts { opacity: 1; } }

/* ═══════════════════════════ 📁 NAS Media ═══════════════════════════ */
.nf-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 9px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.nf-crumb { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; background: transparent;
  border: 0; color: var(--muted); padding: 3px 6px; border-radius: 6px; }
.nf-crumb:hover { background: var(--accent-soft); color: var(--accent); }
.nf-crumb:last-of-type { color: var(--ink); }
.nf-sep { color: var(--faint); font-size: 11px; }
.nf-empty { font-size: 12.5px; color: var(--muted); padding: 12px 2px; }
.nf-list { display: flex; flex-direction: column; gap: 2px; }
.nf-row { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 7px 8px;
  border-radius: 8px; border: 1px solid transparent; }
.nf-row:hover { background: var(--field); border-color: var(--line-2); }
.nf-ic { flex: none; font-size: 14px; line-height: 1; }
.nf-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-dir .nf-name { font-weight: 600; }
.nf-meta { flex: none; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nf-acts { flex: none; display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .13s ease; }
.nf-row:hover .nf-acts { opacity: 1; }
.nf-b { font: inherit; font-size: 11px; line-height: 1; cursor: pointer; background: transparent; border: 0;
  color: var(--muted); border-radius: 5px; padding: 4px 5px; }
.nf-b:hover { background: var(--accent-soft); color: var(--accent); }
.nf-warn { font-size: 11px; color: var(--warn); cursor: help; padding: 0 2px; }
.nf-more { font-size: 11px; color: var(--faint); padding-top: 5px; }
@media (hover: none) { .nf-acts { opacity: 1; } }

/* ═══════════════════════════ 🎬 Radarr ═══════════════════════════ */
.rd-bar { display: flex; gap: 6px; margin-bottom: 9px; }
.rd-in { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px; background: var(--field);
  border: 1.5px solid var(--line); color: var(--ink); border-radius: 8px; padding: 7px 10px; }
.rd-in:focus { outline: none; border-color: var(--accent); }
.rd-back { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 8px; padding: 6px 11px; }
.rd-back:hover { border-color: var(--accent); color: var(--accent); }
.rd-queue { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
.rd-q { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2);
  background: var(--field); border-radius: 8px; padding: 6px 9px; }
.rd-qn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-qp { flex: none; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.rd-note { font-size: 12.5px; color: var(--muted); padding: 12px 2px; display: flex; align-items: center; gap: 8px; }
.rd-spin { width: 13px; height: 13px; }
.rd-list { display: flex; flex-direction: column; gap: 4px; }
.rd-row { display: flex; align-items: center; gap: 10px; padding: 6px 7px; border-radius: 9px;
  border: 1px solid transparent; }
.rd-row:hover { background: var(--field); border-color: var(--line-2); }
.rd-poster { flex: none; width: 32px; height: 48px; object-fit: cover; border-radius: 5px; background: var(--field); }
.rd-noposter { display: flex; align-items: center; justify-content: center; font-size: 15px; }
.rd-main { flex: 1 1 auto; min-width: 0; }
.rd-t { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-y { color: var(--faint); font-weight: 400; }
.rd-meta { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.rd-state { text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.rd-downloaded { color: var(--good); }
.rd-wanted { color: var(--warn); }
/* v3.01 — a film actively coming down reads differently from one merely wanted */
.rd-downloading { color: #58a6ff; }
.rd-unmonitored { color: var(--faint); }
.rd-have { color: var(--good); font-weight: 600; }
.rd-add-hint { color: var(--faint); }
.rd-studio { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-acts { flex: none; display: flex; gap: 2px; opacity: 0; transition: opacity .13s ease; }
.rd-row:hover .rd-acts { opacity: 1; }
.rd-b { font: inherit; font-size: 13px; line-height: 1; cursor: pointer; background: transparent; border: 0;
  color: var(--muted); border-radius: 6px; padding: 5px 7px; }
.rd-b:hover { background: var(--accent-soft); color: var(--accent); }
.rd-b:disabled { opacity: .5; cursor: default; }
@media (hover: none) { .rd-acts { opacity: 1; } }

/* NAS Media — edit mode */
.nf-grow { flex: 1 1 auto; }
.nf-edit { font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink-2);
  padding: 4px 10px; border-radius: 7px; }
.nf-edit:hover { border-color: var(--accent); color: var(--accent); }
.nf-edit.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.nf-editnote { font-size: 11px; line-height: 1.5; color: var(--ink-2); margin-bottom: 8px;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); border-radius: 8px; padding: 7px 9px; }
.nf-row.nf-editing { cursor: default; }
.nf-row.nf-editing:hover { background: color-mix(in srgb, var(--warn) 8%, transparent); }
.nf-acts.nf-always { opacity: 1; }
.nf-locked { font-size: 11px; color: var(--faint); cursor: help; padding: 0 4px; }
.nf-editing .nf-del:hover { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }

/* Movie Picker — per-poster "send to Radarr" button + randomiser extras */
.poster-wrap { position: relative; display: flex; }
.poster-wrap > .poster { flex: 1 1 auto; min-width: 0; }
.poster-grab {
  position: absolute; top: 5px; right: 5px; z-index: 2;
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  border: 0; border-radius: 7px; padding: 5px 6px;
  background: rgba(0, 0, 0, .62); color: #fff; backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .13s ease, background .13s ease;
}
.poster-wrap:hover .poster-grab { opacity: 1; }
.poster-grab:hover { background: var(--accent); }
.poster-grab:disabled { opacity: 1; background: var(--accent); cursor: default; }
@media (hover: none) { .poster-grab { opacity: .85; } }
.mr-pool { font-size: 11px; color: var(--faint); margin-left: 8px; align-self: center; }
/* v1.16 — keyboard hint on the randomiser */
.mr-keys { font-size: 10.5px; color: var(--faint); opacity: .75; margin-left: auto; align-self: center; white-space: nowrap; }
@media (max-width: 520px) { .mr-keys { display: none; } }
.tmdb-grab { margin-left: 8px; }

/* Radarr — remove-movie dialog */
.rd-rmp { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; }
.rd-rmopt { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2);
  background: var(--field); border-radius: 9px; padding: 9px 11px; cursor: pointer; }
.rd-rmopt input { accent-color: var(--accent); }
.rd-rm .set-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rd-rm .set-acts button { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; padding: 9px 14px; border-radius: 10px; }
.rd-rmdel { background: var(--bad) !important; box-shadow: none !important; }
.rd-rmdel:hover { filter: brightness(.92); }
.rd-remove:hover { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad); }

/* ═══════════════════════ 🗄 Plex Library tree ═══════════════════════ */
.px-bar { display: flex; gap: 6px; margin-bottom: 9px; }
.px-q { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 12.5px; background: var(--field);
  border: 1.5px solid var(--line); color: var(--ink); border-radius: 8px; padding: 7px 10px; }
.px-q:focus { outline: none; border-color: var(--accent); }
.px-scope { font: inherit; font-size: 12px; max-width: 42%; padding: 6px 8px; border-radius: 8px; }
.px-clear { font: inherit; font-size: 12px; cursor: pointer; border: 1.5px solid var(--line);
  background: transparent; color: var(--muted); border-radius: 8px; padding: 5px 9px; }
.px-clear:hover { border-color: var(--bad); color: var(--bad); }
.px-note { font-size: 11.5px; color: var(--muted); padding: 6px 2px 9px; display: flex; align-items: center; gap: 7px; }
.px-spin { width: 12px; height: 12px; }
.px-tree { display: flex; flex-direction: column; gap: 14px; }
.px-drive { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--panel-2); }
.px-drivehd { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2);
  background: var(--field); padding: 9px 12px; border-bottom: 1px solid var(--line-2); }
.px-driveic { font-size: 13px; }
.px-drivesub { margin-left: auto; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--faint); font-size: 10.5px; }
.px-row { display: flex; align-items: center; gap: 7px; padding-top: 5px; padding-bottom: 5px; padding-right: 10px;
  font-size: 12.5px; color: var(--ink); position: relative; }
.px-folder { cursor: pointer; }
.px-folder:hover { background: var(--field); }
.px-item:hover { background: var(--line-2); }
.px-tw { flex: none; width: 12px; text-align: center; font-size: 9px; color: var(--muted);
  transition: transform .14s ease; display: inline-block; }
.px-tw.on { transform: rotate(90deg); }
.px-leaf { visibility: hidden; }
.px-ic { flex: none; font-size: 12px; }
.px-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-folder > .px-nm { font-weight: 600; }
.px-yr { flex: none; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.px-lib { flex: none; font-size: 10px; color: var(--muted); background: var(--field);
  padding: 2px 7px; border-radius: 999px; }
.px-empty { font-size: 11.5px; color: var(--faint); padding: 4px 0 6px; }
.px-list { display: flex; flex-direction: column; }

/* ═══════════════════ 🎚 Movie Picker filters ═══════════════════ */
.mov-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.mov-filt { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 8px; padding: 6px 11px; }
.mov-filt:hover { border-color: var(--accent); color: var(--accent); }
.mov-summary { font-size: 10.5px; color: var(--faint); margin-left: auto; }
.mov-none { padding: 18px 4px; font-size: 13px; color: var(--muted); line-height: 1.55; }
/* title search in the movie / TV pickers — same visual language as .mov-filt */
.mov-back { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 8px; padding: 6px 11px; }
.mov-back:hover { border-color: var(--accent); color: var(--accent); }
.mov-find { display: flex; align-items: center; gap: 4px; }
.mov-q { font: inherit; font-size: 12px; width: 132px; min-width: 0; padding: 6px 9px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--card-2, transparent); color: var(--ink); }
.mov-q:focus { outline: 0; border-color: var(--accent); }
.mov-q::-webkit-search-cancel-button { cursor: pointer; }
.mov-go { font: inherit; font-size: 12px; cursor: pointer; border: 1.5px solid var(--line); background: transparent;
  color: var(--ink-2); border-radius: 8px; padding: 6px 9px; }
.mov-go:hover { border-color: var(--accent); color: var(--accent); }
/* the picker head wraps on narrow tiles; keep the search box from squeezing the buttons out */
@media (max-width: 720px) { .mov-q { width: 100px; } }
.mov-none button { margin-top: 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent); border-radius: 8px; padding: 7px 13px; }
.mf-modal { width: min(680px, 94vw); }
.mf-lead { font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0 0 16px; }
.mf-sec { margin-bottom: 16px; }
.mf-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  color: var(--muted); margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mf-hint { text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: 11px; color: var(--faint); }
.mf-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-box { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
  font-size: 12.5px; color: var(--ink-2); background: var(--field);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 6px 12px; transition: all .12s ease; }
.mf-box input { display: none; }
.mf-box:hover { border-color: var(--accent); }
.mf-box.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.mf-box.mf-wide { border-radius: 10px; width: 100%; }
.mf-body select { width: 100%; font-size: 13px; padding: 9px 11px; border-radius: 9px; }

/* My Plex — downloads toggle */
.plex-dl { font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  border: 1.5px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 8px; padding: 6px 11px; }
.plex-dl:hover { border-color: var(--accent); color: var(--accent); }
.plex-dl.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ═══════════════ 📺 Season / episode listing (TV detail) ═══════════════ */
.tvs { margin-top: 18px; border-top: 1px solid var(--line-2); padding-top: 14px; }
.tvs-load, .tvs-none { font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.tvs-spin { width: 13px; height: 13px; }
.tvs-h { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  color: var(--muted); margin-bottom: 9px; }
.tvs-s { border-bottom: 1px solid var(--line-2); }
.tvs-s:last-child { border-bottom: 0; }
.tvs-hd { display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer; text-align: left;
  font: inherit; background: transparent; border: 0; color: var(--ink); padding: 9px 4px; border-radius: 8px; }
.tvs-hd:hover { background: var(--field); }
.tvs-tw { flex: none; font-size: 9px; color: var(--muted); transition: transform .14s ease; }
.tvs-hd.on .tvs-tw { transform: rotate(90deg); }
.tvs-nm { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvs-c { flex: none; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tvs-eps { display: flex; flex-direction: column; padding: 2px 0 10px 22px; }
.tvs-e { display: flex; align-items: baseline; gap: 9px; padding: 4px 4px; border-radius: 6px; }
.tvs-e:hover { background: var(--field); }
.tvs-en { flex: none; min-width: 22px; text-align: right; font-size: 11px; font-weight: 700;
  color: var(--accent); font-variant-numeric: tabular-nums; }
.tvs-et { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.tvs-em { flex: none; font-size: 10.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .tvs-em { display: none; } .tvs-eps { padding-left: 12px; } }

/* Season / episode Sonarr grab buttons + series tracking toggle */
.tvs-hd { position: relative; }
.tvs-get { flex: none; font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  background: transparent; border: 0; color: var(--muted); border-radius: 6px; padding: 4px 6px;
  opacity: 0; transition: opacity .13s ease; }
.tvs-s:hover .tvs-getseason, .tvs-e:hover .tvs-getep { opacity: 1; }
.tvs-get:hover { background: var(--accent-soft); color: var(--accent); }
.tvs-get:disabled { opacity: 1; color: var(--accent); cursor: default; }
/* header and its ⬇ share one row; the episode list spans the full width beneath */
.tvs-s { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.tvs-eps { grid-column: 1 / -1; }
.tvs-e { position: relative; }
.rd-track.on { color: var(--accent); }
.rd-track:hover { background: var(--accent-soft); color: var(--accent); }
@media (hover: none) { .tvs-get { opacity: .8; } }

/* ── 📁 v2.33 — Settings → Google Drive: the account-wide folder list + who each one is shared with ── */
.dv-rows { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.dv-row { border: 1px solid var(--line); border-radius: 11px; background: var(--field); padding: 9px 10px;
  display: flex; flex-direction: column; gap: 7px; }
.dv-top { display: flex; gap: 7px; align-items: center; }
.dv-top input { min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; }
.dv-name { flex: 0 0 200px; }
.dv-id { flex: 1 1 auto; }
.dv-del { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); cursor: pointer; font-size: 12px; }
.dv-del:hover { color: #fff; background: var(--bad); border-color: var(--bad); }
.dv-bot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dv-pinck { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.dv-share { padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  color: var(--ink); font: inherit; font-size: 11.5px; }
.dv-who { font-size: 11px; font-weight: 700; color: var(--accent); }
/* the per-user checkboxes only appear when a folder isn't shared with everyone */
.dv-users { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 7px 2px 1px; border-top: 1px dashed var(--line); }
.dv-u { display: flex; align-items: center; gap: 5px; font-size: 11.5px; cursor: pointer; }
.dv-uu { color: var(--muted); font-size: 10px; }
.dv-uload { font-size: 11.5px; color: var(--muted); }
.dv-empty { font-size: 12.5px; color: var(--muted); padding: 12px 2px; }
.dv-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dv-status { font-size: 11.5px; color: var(--muted); margin-left: 10px; }
@media (max-width: 640px) { .dv-top { flex-wrap: wrap; } .dv-name { flex: 1 1 100%; } }

/* ── 🖼 v2.35 — the movie library as poster art. The list view (.vlb-row) is untouched above and stays
   the fallback for anything TMDB can't match, so nothing that worked before depends on this. ── */
.vlb-view { flex: 0 0 auto; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--field); color: var(--muted); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.vlb-view:hover { color: var(--ink); border-color: var(--accent); }
.vlb-list.vlb-art { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px 10px; }
.vlb-card { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 0;
  border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
/* 2:3 is the poster ratio — fixed with aspect-ratio so the grid doesn't reflow as art arrives */
.vlb-p { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  background: var(--field); border: 1px solid var(--line); display: grid; place-items: center; }
.vlb-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vlb-ph { font-size: 26px; opacity: 0.28; }
.vlb-card:hover .vlb-p { border-color: var(--accent); }
.vlb-ct { font-size: 12px; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vlb-cm { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a gentle pulse only while its lookup is in flight */
.vlb-card.vlb-load .vlb-p { animation: vlbPulse 1.1s ease-in-out infinite; }
@keyframes vlbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.vlb-card.vlb-noart .vlb-ph { opacity: 0.18; }
@media (max-width: 700px) { .vlb-list.vlb-art { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }

/* ── 🎛 v2.37 — library controls: adjustable poster size, pages, and the settings pane ── */
.vlb-smaller, .vlb-bigger, .vlb-cog { flex: 0 0 auto; width: 28px; height: 28px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--field); color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; display: grid; place-items: center; }
.vlb-smaller:hover, .vlb-bigger:hover, .vlb-cog:hover { color: var(--ink); border-color: var(--accent); }
/* the cell size is driven by a CSS variable so changing it is a repaint, not a rebuild */
.vlb-list.vlb-art { grid-template-columns: repeat(auto-fill, minmax(var(--vlb-cell, 124px), 1fr)); }
.vlb-pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.vlb-pager:empty { display: none; }
.vlb-prev, .vlb-next { padding: 6px 13px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--field); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.vlb-prev:hover:not(:disabled), .vlb-next:hover:not(:disabled) { border-color: var(--accent); }
.vlb-prev:disabled, .vlb-next:disabled { opacity: 0.35; cursor: default; }
.vlb-pnum { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.vlb-set { border: 1px solid var(--line); border-radius: 11px; background: var(--field); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 9px; }
.vlb-sh { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.vlb-folders { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.vlb-fo { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.vlb-fo i { color: var(--muted); font-size: 10.5px; font-style: normal; }
.vlb-hb { align-items: flex-start; line-height: 1.35; }
.vlb-srow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vlb-srow label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.vlb-per { width: 62px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 12px; }
.vlb-size { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card);
  color: var(--ink); font: inherit; font-size: 12px; }
.vlb-apply { padding: 6px 14px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent);
  color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.vlb-sstat { font-size: 11.5px; color: var(--muted); }
/* the 🎬 button on the Drive tile */
.gd-lib { flex: 0 0 auto; }

/* ── v2.41 — 📺 TV Shows library ────────────────────────────────────────────────────────────────────
   Series grid → episode list, in one modal. The poster geometry deliberately matches the film library
   (aspect-ratio on the frame, so the grid does NOT reflow as art arrives one card at a time). */
.tvl-modal { width: min(1080px, 96vw); }
.tvl-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.tvl-top { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.tvl-find { flex: 1 1 auto; background: var(--bg); border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; color: var(--ink); font: inherit; font-size: 13px; }
.tvl-count { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tvl-back { font: inherit; font-size: 12px; font-weight: 700; background: var(--field); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; cursor: pointer; margin-left: auto; }
.tvl-back:hover { border-color: var(--accent); color: var(--accent); }
.tvl-list { flex: 1 1 auto; min-height: 0; max-height: 64vh; overflow-y: auto; }
.tvl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px 10px; }
.tvl-card { display: flex; flex-direction: column; gap: 5px; text-align: left; padding: 0;
  border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.tvl-p { position: relative; width: 100%; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden;
  background: var(--field); border: 1px solid var(--line); display: grid; place-items: center; }
.tvl-p img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tvl-ph { font-size: 26px; opacity: 0.28; }
.tvl-card:hover .tvl-p { border-color: var(--accent); }
.tvl-ct { font-size: 12px; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tvl-cm { font-size: 10px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvl-season { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 12px 0 5px; }
.tvl-season:first-child { margin-top: 0; }
.tvl-ep { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  background: var(--field); border: 1px solid transparent; border-radius: 9px; padding: 8px 10px;
  color: var(--ink); font: inherit; cursor: pointer; margin-bottom: 5px; }
.tvl-ep:hover { border-color: var(--accent); }
.tvl-en { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; min-width: 52px; }
.tvl-et { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .tvl-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .tvl-list { max-height: 58vh; } }
/* the per-folder Movies / TV / Hidden dropdown, in both folder editors */
.gdf-kind, .dv-kind { background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; color: var(--ink); font: inherit; font-size: 12px; flex: 0 0 auto; }

/* ── 👥 Site Traffic: who's online (v2.49) ─────────────────────────────────────────────────────── */
.slm-who { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.slm-fig { flex: 1 1 0; min-width: 68px; text-align: center; background: var(--field); border-radius: 9px; padding: 7px 4px; }
.slm-fig b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.slm-fig span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin-top: 1px; }
.slm-whoload { font-size: 11.5px; color: var(--faint); padding: 4px 0; }
/* who, by name — the number alone can't tell one man on four screens from four people */
.slm-names { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.slm-name { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.slm-peakn { flex: 1 1 100%; font-size: 10.5px; color: var(--faint); }

/* ── 🔊 Iris tile stage (v2.91) ──────────────────────────────────────────────────────────────────
   When Iris answers a question about a tile she puts a large CLONE of it on screen while she talks,
   as a visual prompt. It is a dead snapshot — no listeners, no timers — so it can never fight the
   live tile for the mic, a canvas loop or a poll. Sits under .tl-overlay's z-index so a real modal
   still wins. */
.tl-irisstage {
  position: fixed; inset: 0; z-index: 96;
  display: grid; place-items: center;
  padding: 3vmin;
  background: rgba(8, 12, 10, .72);
  backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .22s ease;
  overflow: hidden;                     /* never a scrollbar — the clone is scaled to fit */
}
.tl-irisstage.show { opacity: 1; }
:root[data-theme="dark"] .tl-irisstage { background: rgba(0, 0, 0, .8); }
.tl-irisstage-wrap { display: grid; place-items: center; gap: 2vmin; }
/* the scaler keeps the clone pixel-faithful: the tile is rendered at its real size and then scaled,
   so nothing inside has to re-lay-out (which is what would break canvas and absolute positioning) */
.tl-irisstage-scale { transform-origin: center center; will-change: transform; }
.tl-irisstage .tile {
  /* ⚠ opacity ONLY. Animating transform here would override the inline scale() that sizes the clone
     (a running CSS animation beats an inline style) and the stage would silently render at 1x. */
  animation: tlstagein .28s ease 1;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  outline: 2px solid var(--accent); outline-offset: 3px;
  pointer-events: none;                 /* a clone must never be clickable */
}
@keyframes tlstagein { from { opacity: 0; } to { opacity: 1; } }
.tl-irisstage-cap {
  font-size: clamp(13px, 1.7vmin, 18px); font-weight: 700; letter-spacing: .02em;
  color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .7);
  display: flex; align-items: center; gap: 8px;
}
.tl-irisstage-cap .tl-irisstage-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  animation: tlstagepulse 1.1s ease-in-out infinite;
}
@keyframes tlstagepulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.tl-irisstage-hint { font-size: clamp(10px, 1.2vmin, 12.5px); font-weight: 600; color: rgba(255, 255, 255, .62); }
@media (prefers-reduced-motion: reduce) {
  .tl-irisstage, .tl-irisstage .tile { transition: none; animation: none; }
  .tl-irisstage-cap .tl-irisstage-dot { animation: none; opacity: 1; }
}

/* ── 🎬 Iris download confirmation card (v2.92) ──────────────────────────────────────────────────
   "Iris, download Dune via Radarr" puts the match on screen and waits for a yes. Clickable as well as
   speakable — if the mic mishears the title it will happily mishear the "yes" too. */
.tl-dlcard {
  position: fixed; inset: 0; z-index: 101;
  display: grid; place-items: center; padding: 4vmin;
  background: rgba(8, 12, 10, .74); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity .2s ease;
}
.tl-dlcard.show { opacity: 1; }
:root[data-theme="dark"] .tl-dlcard { background: rgba(0, 0, 0, .82); }
.dlc {
  width: 100%; max-width: 560px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
  padding: 16px 18px 14px;
  animation: dlcin .24s cubic-bezier(.2, .8, .25, 1) 1;
}
@keyframes dlcin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dlc-h { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.dlc-row { display: flex; gap: 14px; align-items: flex-start; }
.dlc-pos { width: 104px; flex: 0 0 104px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 9px; background: var(--field); }
.dlc-noimg { display: grid; place-items: center; font-size: 30px; }
.dlc-meta { flex: 1 1 auto; min-width: 0; }
.dlc-ttl { font-size: 19px; font-weight: 800; line-height: 1.15; }
.dlc-sub { font-size: 12.5px; color: var(--faint); font-weight: 600; margin-top: 3px; }
.dlc-ov { font-size: 12.5px; color: var(--faint); line-height: 1.45; margin: 8px 0 0; }
.dlc-count { font-size: 11px; font-weight: 700; color: var(--accent); margin-top: 8px; }
.dlc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dlc-acts button {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 8px 14px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--ink);
}
.dlc-yes { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.dlc-acts button:hover { border-color: var(--accent); }
.dlc-hint { font-size: 11px; color: var(--faint); margin-top: 8px; font-weight: 600; }
@media (max-width: 520px) {
  .dlc-row { gap: 10px; }
  .dlc-pos { width: 76px; flex-basis: 76px; }
  .dlc-ttl { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tl-dlcard, .dlc { transition: none; animation: none; } }

/* ── 📏 Torrent size gauge (v2.92) ───────────────────────────────────────────────────────────────
   One segment per GB up to 8, the last one part-filled; over 8 GB every segment fills and a » appears.
   `font-variant-numeric: tabular-nums` is the other half of the fix — proportional digits are what
   made 2.6 GB and 26 GB look alike in the first place. */
.tq-sz { display: inline-flex; align-items: center; gap: 6px; }
.tq-szg { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 11px; }
.tq-szg i {
  display: block; width: 3.5px; height: 100%;
  border-radius: 1.5px; background: var(--line); overflow: hidden;
  position: relative;
}
.tq-szg i b { display: block; height: 100%; background: currentColor; border-radius: 1.5px; }
.tq-szover { font-style: normal; font-weight: 900; font-size: 12px; line-height: 1; margin-left: 1px; color: currentColor; }
.tq-szn {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-weight: 800; font-size: 12px; letter-spacing: .01em; white-space: nowrap;
}
/* bands — colour carries the magnitude before you've read a digit */
.tq-sz-sm { color: var(--accent); }
.tq-sz-md { color: #d9932b; }
.tq-sz-lg { color: #e05a4e; }
.tq-sz-sm .tq-szn { color: var(--faint); }
.tq-sz-md .tq-szn { color: #d9932b; }
.tq-sz-lg .tq-szn { color: #e05a4e; }
/* the tile's own meta row is tiny on small tiles — drop the gauge, keep the strong number */
.tq-t .tq-meta .tq-sz { margin-left: auto; }
@media (max-width: 420px) { .tq-szg { display: none; } }

/* ── 📺 YouTube channel finder (v2.95) ───────────────────────────────────────────────────────────
   Search a channel by name and pick from the results. Subscriber counts are the point: a name search
   frequently ranks a clip farm above the real channel. */
.ytch-add { display: flex; gap: 6px; margin-bottom: 10px; }
.ytch-in { flex: 1 1 auto; min-width: 0; }
.ytch-find, .ytch-go { flex: 0 0 auto; white-space: nowrap; }
.ytch-results { display: grid; gap: 6px; margin-bottom: 10px; }
.ytch-rhead { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.ytch-res {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font: inherit; cursor: pointer; padding: 7px 9px; border-radius: 10px;
  background: var(--field); border: 1px solid var(--line); color: var(--ink);
}
.ytch-res:hover { border-color: var(--accent); }
.ytch-rthumb { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; object-fit: cover; background: var(--line); }
.ytch-rmeta { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.ytch-rmeta b { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ytch-rmeta i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--accent); }
.ytch-rmeta em { font-style: normal; font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ytch-radd { flex: 0 0 auto; font-size: 17px; font-weight: 800; color: var(--accent); }

/* ── ↗ Open on YouTube escape hatch (v2.96) ──────────────────────────────────────────────────────
   The in-frame player can fail for reasons outside TileLab's control (Widevine, an embed refusal).
   When it does, this is the way out — the tile should never be a dead end. */
.ytx-out {
  font-size: 11.5px; font-weight: 700; text-decoration: none;
  padding: 4px 9px; border-radius: 8px; margin-left: 6px;
  background: var(--field); border: 1px solid var(--line); color: var(--ink);
  white-space: nowrap;
}
.ytx-out:hover { border-color: var(--accent); color: var(--accent); }

/* ── 🎬 The movie wall (v2.97) ────────────────────────────────────────────────────────────────────
   "Iris, let's find a movie to watch": the whole screen filled with tiny posters, a 2s walk across
   them, then the pick. Plain <img> in a CSS grid — no canvas, so nothing to frame-gate. */
.tl-moviewall {
  position: fixed; inset: 0; z-index: 102;
  display: flex; flex-direction: column;
  background: var(--bg, #0b0f0d);
  opacity: 0; transition: opacity .22s ease;
}
.tl-moviewall.show { opacity: 1; }
.mw-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.mw-title { font-size: 15px; font-weight: 800; white-space: nowrap; }
.mw-count { font-size: 11.5px; font-weight: 600; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mw-sp { flex: 1 1 auto; }
.mw-top button {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  padding: 6px 11px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--ink);
}
.mw-top button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mw-top button:disabled { opacity: .45; cursor: default; }
/* the wall itself — scrolls, but never shows a scrollbar (house rule) */
.mw-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: 3px; align-content: start;
  padding: 6px;
  scrollbar-width: none;
}
.mw-grid::-webkit-scrollbar { width: 0; height: 0; }
.mw-load { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--faint); font-size: 13px; }
.mw-cell {
  /* a visible tile even when the artwork fails — a missing poster should read as a blank slot in the
     wall, not as a hole in the grid */
  padding: 0; border: 0; background: var(--field); cursor: pointer;
  aspect-ratio: 2 / 3; border-radius: 4px; overflow: hidden;
  position: relative; outline: 2px solid transparent; outline-offset: 0;
  transition: outline-color .08s linear, transform .08s ease;
}
.mw-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mw-noimg { display: grid; place-items: center; width: 100%; height: 100%; font-size: 18px; background: var(--field); }
/* the walk: a bright outline that hops from poster to poster */
.mw-cell.mw-on { outline-color: var(--accent); transform: scale(1.14); z-index: 3; box-shadow: 0 6px 20px rgba(0,0,0,.55); }
.mw-cell.mw-win {
  outline: 3px solid var(--accent); transform: scale(1.3); z-index: 4;
  box-shadow: 0 10px 34px rgba(0,0,0,.7);
  animation: mwwin .45s cubic-bezier(.2,.9,.2,1) 1;
}
@keyframes mwwin { 0% { transform: scale(1.14); } 55% { transform: scale(1.42); } 100% { transform: scale(1.3); } }
/* the result bar */
.mw-result { flex: 0 0 auto; border-top: 1px solid var(--line); background: var(--panel); padding: 10px 14px; }
.mw-res { display: flex; align-items: center; gap: 13px; }
.mw-rpos { width: 58px; flex: 0 0 58px; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 6px; background: var(--field); }
.mw-rmeta { flex: 1 1 auto; min-width: 0; }
.mw-rttl { font-size: 17px; font-weight: 800; line-height: 1.15; }
.mw-rsub { font-size: 12px; font-weight: 600; color: var(--faint); margin-top: 2px; }
.mw-racts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.mw-racts button {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--field); color: var(--ink);
}
.mw-racts button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mw-trailer { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
@media (max-width: 620px) {
  .mw-count { display: none; }
  .mw-rttl { font-size: 15px; }
  .mw-rpos { width: 44px; flex-basis: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-moviewall, .mw-cell { transition: none; }
  .mw-cell.mw-win { animation: none; }
}