/* 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;}

/* Shell chrome dup: reglas identicas en home+mixer index.html, unificadas 24/9. */
/* Critical display utilities in plain CSS (no CDN delay flash on F5).
Base .hidden has no !important so JS toggles keep working; responsive
fallbacks carry it so show/hide at breakpoints is deterministic. */
.hidden { display: none; }
.invisible { visibility: hidden; }
@media (min-width: 1024px) { .lg\:flex { display: flex !important; } .lg\:hidden { display: none !important; } }
@media (min-width: 1280px) { .xl\:inline { display: inline !important; } }
@media (min-width: 420px) { .min-\[420px\]\:flex { display: flex !important; } }
.no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.ios-scroll { scrollbar-width: thin; scrollbar-color: var(--acc-scroll) transparent; }
.ios-scroll::-webkit-scrollbar { width: 4px; }
.ios-scroll::-webkit-scrollbar-track { background: transparent; margin-top: 10px; margin-bottom: 10px; }
.ios-scroll::-webkit-scrollbar-thumb { background: var(--acc-thumb); border-radius: 9999px; }
.ios-scroll::-webkit-scrollbar-thumb:hover { background: var(--acc-scroll-hi); }
body {
background: radial-gradient(circle at 50% -15%, #ffffff 0%, #edf0f5 45%, #dfe3eb 100%);
min-height: 100vh; color: #1a1c23; -webkit-tap-highlight-color: transparent;
}
html.dark body { background: radial-gradient(circle at 50% -15%, #1c202a 0%, #111319 50%, #0a0b10 100%); color: #f1f5f9; }
.ios-glass {
background: rgba(255, 255, 255, 0.92);
border: 1px solid #e2e8f0; box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
}
html.dark .ios-glass { background: rgba(22, 27, 38, 0.96); border-color: #1e293b; box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2); color: #f1f5f9; }
.is-active-btn { background-color: var(--acc-soft) !important; color: var(--acc-ink) !important; box-shadow: none !important; border-color: transparent !important; font-weight: 600 !important; }
html.dark .is-active-btn { background-color: var(--acc-soft-d) !important; color: var(--acc-ink-d) !important; box-shadow: none !important; border-color: transparent !important; font-weight: 600 !important; }
.is-inactive-btn { background-color: transparent !important; color: #64748b !important; border-color: transparent !important; box-shadow: none !important; font-weight: 400 !important; }
html.dark .is-inactive-btn { color: #94a3b8 !important; }
.is-inactive-btn:hover { background-color: var(--acc-faint) !important; color: var(--acc-ink) !important; }
html.dark .is-inactive-btn:hover { background-color: var(--acc-soft) !important; color: var(--acc-ink-d) !important; }

.tag-pill { background-color: var(--acc-soft) !important; color: var(--acc-ink) !important; }
html.dark .tag-pill { background-color: var(--acc-soft-d) !important; color: var(--acc-ink-d) !important; }

:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.rounded-2xl, .rounded-xl, .rounded-lg, .rounded-md { border-radius: var(--card-r) !important; }
/* Modals common pattern: overlay fade + card pop (transform/opacity only, no color transition). */
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: none; } }
.modal-overlay { animation: overlayFade .18s ease; background: rgba(15,23,42,.55); }

.modal-card { animation: modalPop .18s cubic-bezier(.16,1,.3,1); background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.12), 0 4px 16px -2px rgba(0, 0, 0, 0.05); }
html.dark .modal-card { background: #161b26; border-color: #1e293b; box-shadow: 0 12px 36px -4px rgba(0, 0, 0, 0.5), 0 4px 16px -2px rgba(0, 0, 0, 0.3); }
/* Shared chrome (single source; was duplicated in home.css + mixer/index.html + home/index.html):
   nav arrows, dark-mode utility overrides, shared canvas surfaces. */
.nav-arrow { padding: 4px; border-radius: 6px; color: #9ca3af; background: transparent; border: 0; cursor: pointer; display: flex; }
.nav-arrow:hover { background: #f3f4f6; color: #374151; }
.nav-arrow:disabled { opacity: .35; cursor: default; }
.nav-arrow:disabled:hover { background: transparent !important; color: #9ca3af !important; }
.nav-arrow.on { color: var(--acc-ink) !important; }
.nav-arrow.on:hover { background-color: var(--acc-faint) !important; color: var(--acc-ink) !important; border-radius: 9999px; }
html.dark .nav-arrow:hover { background-color: var(--acc-soft) !important; color: var(--acc-ink-d) !important; }
html.dark .nav-arrow.on { color: var(--acc-ink-d) !important; }
html.dark .nav-arrow.on:hover { background-color: var(--acc-soft) !important; color: var(--acc-ink-d) !important; }
html.dark .bg-white, html.dark .bg-white\/70, html.dark .bg-white\/80, html.dark .bg-white\/85, html.dark .bg-white\/90, html.dark .bg-white\/95 { background-color: #161b26 !important; color: #f1f5f9 !important; }
html.dark .bg-slate-50, html.dark .bg-slate-50\/70, html.dark .bg-slate-50\/80, html.dark .bg-slate-50\/90, html.dark .bg-slate-100, html.dark .bg-slate-100\/90, html.dark .bg-slate-200, html.dark .bg-slate-200\/80, html.dark .bg-slate-200\/90 { background-color: #1e2536 !important; color: #e2e8f0 !important; }
html.dark .text-slate-900, html.dark .text-slate-800 { color: #f8fafc !important; }
html.dark .text-slate-700, html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-slate-500, html.dark .text-slate-400 { color: #94a3b8 !important; }
html.dark .border-slate-200, html.dark .border-slate-200\/50, html.dark .border-slate-200\/60, html.dark .border-slate-200\/70, html.dark .border-slate-200\/80, html.dark .border-slate-300 { border-color: #1e293b !important; }
html.dark .border-slate-800 { border-color: #334155 !important; }
html.dark #canvasInterior { background-color: #0f131d !important; }
html.dark #browserFrame { background-color: #161b26 !important; border-color: #1e293b !important; }
html.dark #browserTopBar { background-color: #161b26 !important; border-color: #1e293b !important; }
/* Mobile sheets (same glass as standalone buttons; desktop untouched). */
@media (max-width:1023.98px) {
  #sidebarColumn, #homeSidebar { background: rgba(255,255,255,.95); border: 1px solid #e2e8f0; }
  html.dark #sidebarColumn, html.dark #homeSidebar { background: rgba(22,27,38,.96); border-color: #1e293b; }
}
/* Account views overlay (single source; was duplicated in home inline style):
   Subscription/Terms/Privacy look identical on both pages. */
#acctViewOverlay .modal-card { max-height: min(82vh, 44rem); }
#acctViewOverlay h4 { font-size: 12px; font-weight: 700; color: #0f172a; margin-top: 14px; margin-bottom: 4px; }
html.dark #acctViewOverlay h4 { color: #f8fafc; }
#acctViewOverlay p, #acctViewOverlay li { font-size: 12px; line-height: 1.55; }
#acctViewOverlay ul { list-style: disc; padding-left: 18px; }
#acctViewOverlay .sub-line { display: flex; align-items: center; justify-content: space-between;
  border: 1px solid #e2e8f0; border-radius: 12px; padding: 8px 12px; }
html.dark #acctViewOverlay .sub-line { border-color: #1e293b; }