/* shell2/ui.css — bar + mobile sheet for engine v2.
   STRUCTURE is skin-agnostic; the LOOK lives entirely in CSS variables.
   Skins: default = "warm" (current site identity: dark + gold, soft radii).
          html[data-ir2-skin="brutal"] = paper & pencil: white page, graphite
          strokes, hand-wobbled corners, wavy drawn dividers (never a ruler).
   Switching skins = flipping one attribute; wiring never changes. */

:root {
  --ir2-bg: rgba(13,13,19,.97);
  --ir2-bg-solid: #14141c;
  --ir2-fg: #ffffff;
  --ir2-fg-dim: rgba(255,255,255,.62);
  --ir2-line: rgba(255,255,255,.09);
  --ir2-accent: #e7c873;
  --ir2-accent-fg: #1a1a1a;      /* text on accent fills */
  --ir2-radius: 14px;
  --ir2-radius-sm: 9px;
  --ir2-border-w: 1px;
  --ir2-shadow: 0 -10px 34px rgba(0,0,0,.45);
  --ir2-btn-shadow: 0 10px 24px -10px rgba(0,0,0,.55);
  --ir2-blur: blur(22px);
  --ir2-bar-h: 74px;
  --ir2-bar-h-m: 62px;
}
html[data-ir2-skin="brutal"] {
  /* «کاغذ و مداد سیاه»: white paper, graphite strokes. Corners are wobbled
     border-radii and dividers are a drawn wavy stroke — a hand, not a ruler. */
  --ir2-bg: rgba(251,250,245,.98);
  --ir2-bg-solid: #fbfaf5;
  --ir2-fg: #1f1f1f;
  --ir2-fg-dim: #6f6f66;
  --ir2-line: #1f1f1f;
  --ir2-accent: #1f1f1f;         /* monochrome: pencil is the only ink */
  --ir2-accent-fg: #fbfaf5;
  --ir2-radius: 14px 10px 16px 9px / 10px 15px 9px 16px;   /* sketched box */
  --ir2-radius-sm: 8px 6px 9px 5px / 6px 9px 5px 8px;
  --ir2-wob-a: 47% 53% 46% 54% / 54% 46% 55% 45%;          /* potato circles */
  --ir2-wob-b: 52% 48% 55% 45% / 46% 56% 44% 54%;
  --ir2-border-w: 2px;
  --ir2-shadow: none;
  --ir2-btn-shadow: 2px 3px 0 rgba(31,31,31,.16);          /* offset pencil shading */
  --ir2-blur: none;
  /* the hand-drawn horizontal stroke, tiles every 120px */
  --ir2-pencil: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='5'%20viewBox='0%200%20120%205'%3E%3Cpath%20d='M0,2.5%20Q10,1.4%2020,2.4%20T40,2.6%20T60,2.4%20T80,2.6%20T100,2.4%20T120,2.5'%20fill='none'%20stroke='%231f1f1f'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3C/svg%3E");
}
/* "engine" = the glass-case skin: brutal bones + visible machinery (readout LEDs,
   event ticker, mono numerals). The lab feeling, translated for real users. */
html[data-ir2-skin="engine"] {
  --ir2-bg: #0b0b0e;
  --ir2-bg-solid: #0b0b0e;
  --ir2-fg: #e8e8e2;
  --ir2-fg-dim: #83837c;
  --ir2-line: #2c2c30;
  --ir2-accent: #7fd48a;         /* terminal green, the lab's event color */
  --ir2-accent-fg: #0b0b0e;
  --ir2-radius: 0px;
  --ir2-radius-sm: 0px;
  --ir2-border-w: 1px;
  --ir2-shadow: none;
  --ir2-btn-shadow: none;
  --ir2-blur: none;
}
/* motion rule: «حرکت فقط وقتی معنا دارد» — decorative transitions OFF in the
   hard skins; meaningful ones (connecting breath, ticker fade) stay. */
html[data-ir2-skin="brutal"] .ir2-sheet,
html[data-ir2-skin="engine"] .ir2-sheet,
html[data-ir2-skin="brutal"] .ir2-bar,
html[data-ir2-skin="engine"] .ir2-bar { transition: none; }

/* readout strip + ticker (rendered always, VISIBLE only in engine skin) */
.ir2-readout { display: none; }
html[data-ir2-skin="engine"] .ir2-readout {
  display: flex; align-items: center; gap: 10px;
  position: absolute; top: -24px; left: 10px; right: 10px; height: 20px;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ir2-fg-dim);
  direction: ltr;
  pointer-events: none;
  white-space: nowrap; overflow: hidden;
}
.ir2-readout .led { color: var(--ir2-accent); font-weight: 700; }
.ir2-readout .tick { opacity: 0; transition: opacity .4s; }
.ir2-readout .tick.show { opacity: 1; }
html[data-ir2-skin="engine"] .ir2-times,
html[data-ir2-skin="engine"] .ir2-sh-times,
html[data-ir2-skin="engine"] .ir2-quality {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================ BAR ============================ */
.ir2-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 120;
  height: var(--ir2-bar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 16px;
  background: var(--ir2-bg);
  backdrop-filter: var(--ir2-blur);
  -webkit-backdrop-filter: var(--ir2-blur);
  border-top: var(--ir2-border-w) solid var(--ir2-line);
  box-shadow: var(--ir2-shadow);
  color: var(--ir2-fg);
  direction: ltr;               /* L-01: the shell is a device — LTR frame */
}
.ir2-bar[hidden] { display: none; }

/* seek strip sits on the bar's top edge */
.ir2-progress {
  position: absolute; top: -2px; left: 0; right: 0; height: 4px;
  cursor: pointer; direction: ltr;
  background: rgba(255,255,255,.12);              /* fallback (iOS <16.2) */
  background: color-mix(in srgb, var(--ir2-fg) 12%, transparent);
  touch-action: none;
}
.ir2-progress::before { content: ""; position: absolute; top: -8px; bottom: -8px; left: 0; right: 0; }
.ir2-progress > i {
  display: block; height: 100%; width: 0%;
  background: var(--ir2-accent);
  pointer-events: none;
}
.ir2-bar.live .ir2-progress { pointer-events: none; opacity: .35; }

.ir2-track {
  display: flex; align-items: center; gap: 11px;
  min-width: 0; flex: 0 1 300px;
  color: inherit; text-decoration: none;
  cursor: pointer;
}
.ir2-cover {
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--ir2-radius-sm);
  background: var(--ir2-bg-solid) center/cover no-repeat;
  border: var(--ir2-border-w) solid var(--ir2-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.ir2-meta { min-width: 0; }
.ir2-title { font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir2-artist { font-size: .74rem; color: var(--ir2-fg-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ir2-live-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: #ff2d55; margin-inline-end: 5px; animation: ir2pulse 1.6s infinite; }
.ir2-bar.live .ir2-live-dot { display: inline-block; }
html[data-ir2-skin="brutal"] .ir2-live-dot { border-radius: var(--ir2-wob-b); background: var(--ir2-fg); }
@keyframes ir2pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.ir2-transport { display: flex; align-items: center; gap: 6px; margin: 0 auto; direction: ltr; }
.ir2-btn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ir2-fg);
  cursor: pointer; border-radius: 50%;
  transition: opacity .15s, background .15s;
}
.ir2-btn svg { width: 19px; height: 19px; }
.ir2-btn:hover { background: rgba(255,255,255,.1); background: color-mix(in srgb, var(--ir2-fg) 10%, transparent); }
.ir2-btn:disabled { opacity: .28; cursor: default; }
.ir2-btn.small { width: 30px; height: 30px; opacity: .6; }
.ir2-btn.small svg { width: 15px; height: 15px; }
.ir2-btn.small.on { opacity: 1; color: var(--ir2-accent); }
.ir2-btn.small.on::after { content: ""; position: absolute; }
.ir2-play {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ir2-fg); color: var(--ir2-accent-fg);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ir2-btn-shadow);
}
.ir2-play svg { width: 21px; height: 21px; }
.ir2-play .sp { display: none; }
.ir2-bar.loading .ir2-play .pp, .ir2-bar.loading .ir2-play .pa { display: none; }
.ir2-bar.loading .ir2-play .sp { display: block; animation: ir2spin 1s linear infinite; }
@keyframes ir2spin { to { transform: rotate(360deg); } }

.ir2-times { font-size: .72rem; color: var(--ir2-fg-dim); font-variant-numeric: tabular-nums; direction: ltr; white-space: nowrap; }
.ir2-actions { display: flex; align-items: center; gap: 8px; flex: 0 1 300px; justify-content: flex-start; direction: ltr; }
.ir2-like.on { color: #ff4d6d; }
html[data-ir2-skin="brutal"] .ir2-like.on { color: var(--ir2-fg); }
.ir2-like.on svg { fill: currentColor; stroke: none; }
.ir2-quality {
  min-width: 44px; padding: 5px 10px;
  border-radius: 999px;
  background: none;
  border: var(--ir2-border-w) solid var(--ir2-line);
  color: var(--ir2-fg-dim);
  font: inherit; font-size: .68rem; font-weight: 800;
  cursor: pointer; font-variant-numeric: tabular-nums;
}
html[data-ir2-skin="brutal"] .ir2-quality { border-radius: 14px 11px 15px 10px / 12px 15px 10px 14px; transform: rotate(.4deg); }
.ir2-quality:hover { color: var(--ir2-fg); border-color: var(--ir2-accent); }
.ir2-vol { width: 86px; accent-color: var(--ir2-accent); }

/* mobile bar: compact — cover/meta + play + next only (C-06) */
@media (max-width: 767px) {
  .ir2-bar { height: var(--ir2-bar-h-m); gap: 8px; padding: 0 10px; }
  .ir2-cover { width: 40px; height: 40px; }
  .ir2-transport { margin: 0; gap: 2px; }
  .ir2-btn.small, .ir2-prev, .ir2-times, .ir2-actions { display: none; }
  .ir2-play { width: 42px; height: 42px; }
  .ir2-track { flex: 1 1 auto; }
}
/* body padding so page content never hides under the bar */
html.ir2-has-bar body { padding-bottom: calc(var(--ir2-bar-h) + 10px); }
@media (max-width: 767px) { html.ir2-has-bar body { padding-bottom: calc(var(--ir2-bar-h-m) + 10px); } }

/* ============================ SHEET ============================ */
.ir2-sheet {
  position: fixed; inset: 0;
  z-index: 140;
  background: var(--ir2-bg-solid);
  color: var(--ir2-fg);
  direction: ltr;               /* L-01 */
  display: flex; flex-direction: column;
  transform: translateY(105%);
  transition: transform .3s ease;
  overflow: hidden;
}
.ir2-sheet.open { transform: translateY(0); }
.ir2-sheet, .ir2-sh-scroll { max-width: 100vw; overflow-x: hidden; }
html.ir2-sheet-open .ir2-bar { transform: translateY(120%); transition: transform .28s ease; }
.ir2-bar { transition: transform .28s ease; }

.ir2-sh-head { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 14px 16px 6px; min-height: 44px; }
.ir2-sh-grip { width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,.25); margin: 0 auto; }
.ir2-sh-close {
  position: absolute; top: 6px; left: 8px;
  width: 44px; height: 44px;               /* full tap target, above everything */
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--ir2-fg); cursor: pointer;
}
.ir2-sh-close svg { width: 22px; height: 22px; }

.ir2-sh-scroll { flex: 1; overflow-y: auto; padding: 8px 16px 30px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

.ir2-sh-cover {
  width: min(64vw, 300px); aspect-ratio: 1;
  margin: 8px auto 18px;
  border-radius: var(--ir2-radius);
  background: #101016 center/cover no-repeat;
  border: var(--ir2-border-w) solid var(--ir2-line);
  box-shadow: var(--ir2-btn-shadow);
  position: relative;
}
/* connecting = breath + spinning gold arcs (D-07), skin-aware color */
.ir2-sh-cover.connecting { animation: ir2breath 1.9s ease-in-out infinite; }
@keyframes ir2breath { 0%,100%{transform:scale(1)} 50%{transform:scale(.985)} }
.ir2-sh-cover.connecting::before {
  content: ""; position: absolute; inset: -7px; border-radius: inherit; padding: 3px;
  background: conic-gradient(from 0deg, var(--ir2-accent) 0deg, transparent 70deg 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ir2spin 1.3s linear infinite;
}
.ir2-sh-title { text-align: center; font-size: 1.25rem; font-weight: 800; }
.ir2-sh-artist { text-align: center; font-size: .9rem; color: var(--ir2-fg-dim); margin-top: 4px; }
.ir2-sh-station { display: none; text-align: center; font-size: .72rem; font-weight: 800; color: var(--ir2-accent); letter-spacing: .05em; margin-bottom: 6px; }
.ir2-sheet.live .ir2-sh-station { display: block; }

.ir2-sh-seek { margin: 20px 2px 4px; direction: ltr; }
.ir2-sh-seekbar { position: relative; height: 5px; border-radius: 4px; background: rgba(255,255,255,.14); background: color-mix(in srgb, var(--ir2-fg) 14%, transparent); cursor: pointer; touch-action: none; }
.ir2-sh-seekbar::before { content: ""; position: absolute; top: -10px; bottom: -10px; left: 0; right: 0; }
.ir2-sh-seekbar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; border-radius: inherit; background: var(--ir2-accent); pointer-events: none; }
.ir2-sh-seekbar > b { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--ir2-accent); transform: translate(-50%, -50%); pointer-events: none; }
html[data-ir2-skin="brutal"] .ir2-sh-seekbar { background: var(--ir2-pencil) left 50% / 120px 100% repeat-x; }
html[data-ir2-skin="brutal"] .ir2-sh-seekbar > b { border-radius: var(--ir2-wob-a); }
.ir2-sh-times { display: flex; justify-content: space-between; font-size: .72rem; color: var(--ir2-fg-dim); margin-top: 7px; font-variant-numeric: tabular-nums; }
.ir2-sheet.live .ir2-sh-seek { opacity: .3; pointer-events: none; }

/* fits 320px-wide phones: 4×44 + 58 + 4×10 gaps + padding = 300px */
.ir2-sh-transport { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 4px; direction: ltr; }
.ir2-sh-transport .ir2-btn { width: 44px; height: 44px; }
.ir2-sh-transport .ir2-btn svg { width: 21px; height: 21px; }
.ir2-sh-transport .ir2-play { width: 58px; height: 58px; }
.ir2-sh-transport .ir2-play svg { width: 25px; height: 25px; }

.ir2-sh-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 14px 0 4px; direction: ltr; }

/* ---- skin signatures: each skin must be recognizable at a glance, even idle ----
   warm   = soft radii + gold accents (base rules above)
   brutal = white paper + graphite pencil: wobbled corners, wavy drawn dividers
   engine = green-framed "glass case" cover + readout LED line in the sheet */

/* brutal: every control is a sketched shape — bordered, slightly tilted */
html[data-ir2-skin="brutal"] .ir2-btn,
html[data-ir2-skin="brutal"] .ir2-sh-close { border: 2px solid var(--ir2-line); border-radius: var(--ir2-wob-a); }
html[data-ir2-skin="brutal"] .ir2-btn.small { border-width: 1.6px; border-radius: var(--ir2-wob-b); }
html[data-ir2-skin="brutal"] .ir2-btn:nth-of-type(odd) { transform: rotate(.7deg); }
html[data-ir2-skin="brutal"] .ir2-btn:nth-of-type(even) { transform: rotate(-.6deg); }
html[data-ir2-skin="brutal"] .ir2-play {
  border: 2px solid var(--ir2-line);
  border-radius: var(--ir2-wob-b);
  transform: rotate(-1.2deg);          /* filled-in pencil blob, sits a bit crooked */
}
html[data-ir2-skin="brutal"] .ir2-btn.small.on { background: var(--ir2-fg); color: var(--ir2-bg-solid); opacity: 1; }
html[data-ir2-skin="brutal"] .ir2-sh-grip { background: var(--ir2-fg); border-radius: var(--ir2-wob-a); height: 3px; transform: rotate(-2deg); }
/* paper-toned placeholders behind cover art (base ones are dark) */
html[data-ir2-skin="brutal"] .ir2-sh-cover,
html[data-ir2-skin="brutal"] .ir2-sd-cover,
html[data-ir2-skin="brutal"] .ir2-sh-upnext .cov,
html[data-ir2-skin="brutal"] .ir2-sd-row .cov { background-color: #f1efe6; }
html[data-ir2-skin="brutal"] .ir2-sh-cover { transform: rotate(-.5deg); }
/* dividers: the drawn wavy stroke replaces every ruler line */
html[data-ir2-skin="brutal"] .ir2-bar { border-top: none; }
html[data-ir2-skin="brutal"] .ir2-progress { background: var(--ir2-pencil) left 50% / 120px 100% repeat-x; }
html[data-ir2-skin="brutal"] .ir2-sh-lyrics,
html[data-ir2-skin="brutal"] .ir2-sh-upnext,
html[data-ir2-skin="brutal"] .ir2-sd-sec,
html[data-ir2-skin="brutal"] .ir2-sd-programs { border-top: none; background: var(--ir2-pencil) left top / 120px 5px repeat-x; }
/* hover/selection tints: base fallbacks are white-tinted (dark skins) —
   invisible on paper, so brutal re-states them in graphite */
html[data-ir2-skin="brutal"] .ir2-btn:hover { background: rgba(31,31,31,.07); }
html[data-ir2-skin="brutal"] .ir2-btn.small.on:hover { background: var(--ir2-fg); }
html[data-ir2-skin="brutal"] .ir2-sh-upnext .row:hover,
html[data-ir2-skin="brutal"] .ir2-sd-row:hover { background: rgba(31,31,31,.05); }
html[data-ir2-skin="brutal"] .ir2-sd-row.playing { background: rgba(31,31,31,.10); }

/* engine */
html[data-ir2-skin="engine"] .ir2-sh-cover {
  border-color: var(--ir2-accent);
  box-shadow: 0 0 22px rgba(127,212,138,.18);
}
.ir2-sh-readout { display: none; }
html[data-ir2-skin="engine"] .ir2-sh-readout {
  display: block; text-align: center;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--ir2-accent); letter-spacing: .08em;
  margin: 0 0 10px; direction: ltr;
  white-space: nowrap; overflow: hidden;
}
html[data-ir2-skin="engine"] .ir2-sh-grip { background: var(--ir2-line); }

/* ============== history nav ‹ › (T-13 / I-06, shell-global) ==============
   Floating pencil circles, sticky at the top of the scrolling center column,
   OUTSIDE the turbo target so they survive swaps. Mobile keeps ‹ only. */
.ir2-histnav {
  position: sticky; top: 0; z-index: 60;
  display: flex; gap: 8px; align-items: center;
  padding: 10px 14px 4px;
  background: none; pointer-events: none;
}
.ir2-hn-btn {
  width: 40px; height: 40px; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--ir2-bg-solid); color: var(--ir2-fg);
  border: var(--ir2-border-w) solid var(--ir2-line);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--ir2-btn-shadow);
}
.ir2-hn-btn svg { width: 20px; height: 20px; }
.ir2-hn-btn:disabled { opacity: .25; cursor: default; }
html[data-ir2-skin="brutal"] .ir2-hn-btn { border-radius: 47% 53% 46% 54% / 54% 46% 55% 45%; border-width: 1.6px; }
html[data-ir2-skin="brutal"] .ir2-hn-btn:first-child { transform: rotate(-.8deg); }
html[data-ir2-skin="brutal"] .ir2-hn-btn:last-child { transform: rotate(.8deg); }
@media (max-width: 767px) {
  .ir2-histnav { padding: 8px 10px 2px; }
  .ir2-hn-btn { width: 38px; height: 38px; }
  /* undo/redo feel: › appears the moment a back makes a forward available */
  #ir2HnFwd { display: none; }
  .ir2-histnav.has-fwd #ir2HnFwd { display: flex; }
}

/* ============== tracklists are DEVICE vocabulary (T-07, L-03 amendment) ==============
   LTR box everywhere (covers left, controls right) regardless of the page's
   direction — the lab look the operator approved. Titles/artists keep
   per-line auto direction so Persian lines still read RTL inside the box. */
.tlist { direction: ltr; text-align: left; }
/* the box itself must PIN LEFT even inside RTL pages: a max-width block sits
   at the parent's start (= right in RTL) otherwise — «چرا از وسط صفحه؟» */
.tlist { margin-left: 0; margin-right: auto; }
.tlist .tt, .tlist .ta { unicode-bidi: plaintext; }

/* ============== v1-shell integration (cutover 2026-07-03) ==============
   Inside the shell chrome (html.ir2-shell, set by boot.js): the old #appPlayer
   sat IN FLOW on desktop and fixed above the tabs on mobile — the v2 bar is
   always fixed, so the spacing moves here. */
html.ir2-shell body { padding-bottom: 0 !important; }   /* .app pads for itself */
html.ir2-shell .app-main { padding-bottom: calc(var(--ir2-bar-h) + 16px); }
/* I-06: a stray pull-down must never become a browser refresh that kills
   playback — on EVERY shell page, not just the lab (phase-6 گام ۰ debt) */
html.ir2-shell, html.ir2-shell body { overscroll-behavior-y: none; }
html.ir2-shell .app-main { overscroll-behavior: contain; }
@media (max-width: 767px) {
  html.ir2-shell .app-main { padding-bottom: 10px; }    /* shell.css .app already pads player+tabs */
  html.ir2-shell .ir2-bar { bottom: calc(var(--tabs-h, 58px) + env(safe-area-inset-bottom, 0px)); }
  html.ir2-shell.ir2-sheet-open .app-tabs { visibility: hidden; }   /* sheet is fullscreen */
}

.ir2-sh-lyrics {
  margin-top: 22px;
  border-top: var(--ir2-border-w) solid var(--ir2-line);
  padding-top: 16px;
}
.ir2-sh-lyrics h4 { font-size: .74rem; font-weight: 800; color: var(--ir2-fg-dim); letter-spacing: .04em; margin: 0 0 10px; }
.ir2-sh-lyrics .box { max-height: 300px; overflow-y: auto; text-align: center; line-height: 2.2; font-size: 1rem; direction: rtl; /* L-02: Persian verse */ }
.ir2-sh-lyrics .lln { opacity: .45; transition: opacity .2s, color .2s; cursor: pointer; }
.ir2-sh-lyrics .lln.active { opacity: 1; color: var(--ir2-accent); font-weight: 700; }
.ir2-sh-lyrics .lln.past { opacity: .3; }

.ir2-sh-upnext { margin-top: 22px; border-top: var(--ir2-border-w) solid var(--ir2-line); padding-top: 16px; }
.ir2-sh-upnext h4 { font-size: .74rem; font-weight: 800; color: var(--ir2-fg-dim); margin: 0 0 8px; }
.ir2-sh-upnext .row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 4px; border-radius: var(--ir2-radius-sm);
  cursor: pointer;
}
.ir2-sh-upnext .row:hover { background: rgba(255,255,255,.06); background: color-mix(in srgb, var(--ir2-fg) 6%, transparent); }
.ir2-sh-upnext .cov { width: 40px; height: 40px; border-radius: var(--ir2-radius-sm); background: #101016 center/cover no-repeat; flex-shrink: 0; border: var(--ir2-border-w) solid var(--ir2-line); }
.ir2-sh-upnext .tt { font-size: .86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir2-sh-upnext .ta { font-size: .72rem; color: var(--ir2-fg-dim); }

/* ============================ SIDEBAR (desktop) ============================ */
/* Context panel per D-01..D-03. Mounts into #ir2Side when a page provides it;
   otherwise (lab) renders as a fixed right panel on wide screens. */
.ir2-side {
  direction: ltr;               /* L-01 */
  color: var(--ir2-fg);
  font-size: .9rem;
}
.ir2-side.fixed {
  position: fixed; top: 12px; right: 12px; bottom: calc(var(--ir2-bar-h) + 12px);
  width: 300px; z-index: 110;
  background: var(--ir2-bg-solid);
  border: var(--ir2-border-w) solid var(--ir2-line);
  border-radius: var(--ir2-radius);
  padding: 18px;
  overflow-y: auto;
}
@media (max-width: 1279px) { .ir2-side.fixed { display: none; } }
.ir2-side[hidden] { display: none; }

.ir2-sd-cover {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--ir2-radius);
  background: #101016 center/cover no-repeat;
  border: var(--ir2-border-w) solid var(--ir2-line);
  margin-bottom: 14px;
  position: relative;
}
.ir2-sd-cover.connecting { animation: ir2breath 1.9s ease-in-out infinite; }
.ir2-sd-title { font-size: 1.05rem; font-weight: 800; }
.ir2-sd-artist { font-size: .82rem; color: var(--ir2-fg-dim); margin-top: 3px; }
.ir2-sd-tags { margin-top: 10px; font-size: .74rem; }
.ir2-sd-tags .vtag { display: inline-block; margin: 2px 3px 2px 0; padding: 3px 9px; border: var(--ir2-border-w) solid var(--ir2-line); border-radius: 999px; color: var(--ir2-fg-dim); text-decoration: none; }
html[data-ir2-skin="engine"] .ir2-sd-tags .vtag { border-radius: 0; }
html[data-ir2-skin="brutal"] .ir2-sd-tags .vtag { border-radius: 10px 13px 9px 14px / 13px 9px 14px 10px; }
.ir2-sd-sec { margin-top: 20px; border-top: var(--ir2-border-w) solid var(--ir2-line); padding-top: 12px; }
.ir2-sd-sec h4 { font-size: .72rem; font-weight: 800; color: var(--ir2-fg-dim); margin: 0 0 8px; letter-spacing: .04em; }
.ir2-sd-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 4px; border-radius: var(--ir2-radius-sm); cursor: pointer;
}
.ir2-sd-row:hover { background: rgba(255,255,255,.06); background: color-mix(in srgb, var(--ir2-fg) 6%, transparent); }
.ir2-sd-row .cov { width: 40px; height: 40px; border-radius: var(--ir2-radius-sm); background: #101016 center/cover no-repeat; flex-shrink: 0; border: var(--ir2-border-w) solid var(--ir2-line); }
.ir2-sd-row .tt { font-size: .84rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir2-sd-row .ta { font-size: .7rem; color: var(--ir2-fg-dim); }
.ir2-sd-row.playing { background: rgba(231,200,115,.14); background: color-mix(in srgb, var(--ir2-accent) 14%, transparent); }
.ir2-sd-row.playing .tt { color: var(--ir2-accent); }
/* ---- live panel v2 (T-02..T-06, T-19, T-20) ---- */
.ir2-sd-now { font-size: .66rem; font-weight: 800; letter-spacing: .08em; color: var(--ir2-fg-dim); }
.ir2-sd-live-name { font-size: 1.45rem; font-weight: 900; line-height: 1.25; margin: 2px 0 12px; color: var(--ir2-fg); }
.ir2-sd-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ir2-sd-abtn {
  font: inherit; font-size: .78rem; font-weight: 700;
  background: none; border: var(--ir2-border-w) solid var(--ir2-line);
  color: var(--ir2-fg); border-radius: var(--ir2-radius-sm);
  padding: 7px 12px; cursor: pointer;
}
.ir2-sd-abtn:hover { background: rgba(128,128,128,.12); }
.ir2-sd-abtn.isliked { background: var(--ir2-accent); color: var(--ir2-accent-fg); border-color: var(--ir2-accent); }
.ir2-sd-prev { display: flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .78rem; color: var(--ir2-fg-dim); min-width: 0; }
.ir2-sd-prev .t { color: var(--ir2-fg); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir2-sd-prev .a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir2-sd-prevmenu { margin-inline-start: auto; background: none; border: none; color: var(--ir2-fg-dim); cursor: pointer; font-size: 1.05rem; padding: 2px 8px; flex-shrink: 0; }
.ir2-sd-prevmenu:hover { color: var(--ir2-fg); }
.ir2-sd-st { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ir2-sd-strow {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; font: inherit; font-size: .88rem; font-weight: 800;
  background: none; border: var(--ir2-border-w) solid var(--ir2-line);
  border-radius: var(--ir2-radius-sm); color: var(--ir2-fg-dim);
  cursor: pointer; direction: rtl; text-align: start;
}
.ir2-sd-strow .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .35; flex-shrink: 0; }
.ir2-sd-strow.on { background: var(--ir2-accent); border-color: var(--ir2-accent); color: var(--ir2-accent-fg); }
.ir2-sd-strow.on .dot { background: #d23c3c; opacity: 1; animation: ir2pulse 1.6s infinite; }   /* the red pencil */
.ir2-sd-strow .live { margin-inline-start: auto; font-size: .64rem; font-weight: 800; opacity: .85; flex-shrink: 0; }
.ir2-sd-strow .go { margin-inline-start: auto; opacity: .6; flex-shrink: 0; }
.ir2-sd-programs { margin-top: 20px; border-top: var(--ir2-border-w) solid var(--ir2-line); padding-top: 12px; }
.ir2-sd-programs h4 { font-size: .72rem; font-weight: 800; color: var(--ir2-fg-dim); margin: 0 0 8px; letter-spacing: .04em; }
.ir2-sd-programs .ph { font-size: .78rem; color: var(--ir2-fg-dim); border: 1.6px dashed var(--ir2-line); border-radius: var(--ir2-radius-sm); padding: 14px; text-align: center; }
/* sheet-side live extras (mobile counterpart) */
.ir2-sh-live { margin-top: 18px; direction: rtl; }
.ir2-sh-live .ir2-sd-prev { margin-top: 0; }
.ir2-sh-live .ir2-sd-programs { margin-top: 14px; }
/* inline-action toast */
#ir2Toast {
  position: fixed; bottom: calc(var(--ir2-bar-h) + 18px); left: 50%;
  transform: translateX(-50%); z-index: 400;
  background: var(--ir2-bg-solid); color: var(--ir2-fg);
  border: var(--ir2-border-w) solid var(--ir2-line); border-radius: 12px;
  padding: 10px 16px; font-size: .85rem;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#ir2Toast.show { opacity: 1; }