/* Shared shell chrome: accent tokens + sidepanel section kit (home + mixer).
   Link this before each shell's inline <style> so local rules can still override. */

:root {
  --acc:#f97316; --acc-ink:#9a3412; --acc-ink-d:#fdba74;
  --acc-soft:rgba(249,115,22,.14); --acc-soft-d:rgba(249,115,22,.16);
  --acc-faint:rgba(249,115,22,.10); --acc-glow:rgba(249,115,22,.25);
  --acc-scroll:rgba(249,115,22,.45); --acc-thumb:rgba(249,115,22,.35); --acc-scroll-hi:rgba(249,115,22,.6);
  --card-r:8px;
}

/* Sidepanel section system — spacing + titles.
   Lateral card inset = container p-4 (1rem). Vertical title↔content = 1rem.
   Usage: <div class="side-sec"><div class="sec-head"><span class="sec-title">…</span><span class="sec-meta">…</span></div><div>content</div></div> */
.side-sec{display:flex;flex-direction:column;gap:1rem;}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-shrink:0;}
.sec-title{font-size:.75rem;font-weight:600;color:#1e293b;line-height:1.25;}
html.dark .sec-title{color:#e2e8f0;}
.sec-meta{font-size:.75rem;color:#64748b;font-weight:400;flex-shrink:0;}
html.dark .sec-meta{color:#94a3b8;}
.sec-meta b{font-weight:600;color:inherit;}