/* Update 16: theme tokens (dark default + full light theme) and WCAG AA fixes. Loaded last on the site and in admin.
   Tokens are the same CSS variables the precompiled Tailwind build uses (bg, surface, elevated, pill, border, fg, muted, subtle, primary…).
   Contrast targets: text ≥ 4.5:1 (large ≥ 3:1), icons / control boundaries ≥ 3:1 — measured by tests/contrast16.js. */
:root,html[data-theme=dark]{color-scheme:dark;
  --color-subtle:#949494;            /* was #737373 (3.6–4.0:1) -> ≥4.6:1 on bg/elevated/pill */
  --color-muted:#ababab;
  --color-control:#6b6b6b;           /* form-control boundary ≥3:1 on bg/elevated */
  --color-danger:#ff6b6b;            /* red text on pills */
  --color-link-accent:var(--color-primary);
}
html[data-theme=light]{color-scheme:light;
  --color-bg:#fafafa;--color-surface:#f1f1f1;--color-elevated:#ffffff;--color-pill:#ebebeb;--color-border:#dedede;
  --color-fg:#141414;--color-muted:#4d4d4d;--color-subtle:#5e5e5e;--color-control:#8a8a8a;--color-danger:#c4161c;
  --color-wave-dim:#c9c9c9;--color-on-accent:#fff;--color-black:#000;--color-white:#fff;
  /* accent: the brand orange is 3.2:1 on white -> a deeper shade for text/buttons (still follows the admin accent) */
  --color-primary:color-mix(in srgb,var(--sw-accent,#ff5500) 74%,#000);--color-primary-fg:#fff;--color-wave:var(--sw-accent,#ff5500);
}
@media (prefers-color-scheme:light){html[data-theme=auto]{color-scheme:light;--color-bg:#fafafa;--color-surface:#f1f1f1;--color-elevated:#fff;--color-pill:#ebebeb;--color-border:#dedede;--color-fg:#141414;--color-muted:#4d4d4d;--color-subtle:#5e5e5e;--color-control:#8a8a8a;--color-wave-dim:#c9c9c9;--color-primary:color-mix(in srgb,var(--sw-accent,#ff5500) 74%,#000);--color-primary-fg:#fff}}
html[data-theme=light] body{background:var(--color-bg);color:var(--color-fg)}

/* theme toggle: one button, the icon follows the theme without re-rendering */
.sw-theme-btn .sw-th-sun{display:none}.sw-theme-btn .sw-th-moon{display:block}
html[data-theme=light] .sw-theme-btn .sw-th-sun{display:block}html[data-theme=light] .sw-theme-btn .sw-th-moon{display:none}
.sw-theme-btn svg{transition:transform .25s}.sw-theme-btn:active svg{transform:rotate(-30deg)}
@media (prefers-reduced-motion:reduce){.sw-theme-btn svg{transition:none}}

/* compact header: crown badge on the avatar */
.sw-acct-btn{padding:0}.sw-acct-btn>img,.sw-acct-btn>span:not(.sw-crown){width:32px;height:32px}
.sw-crown{position:absolute;line-height:0;padding:0;display:flex!important;align-items:center!important;justify-content:center!important;right:-1px;bottom:-1px;display:grid;place-items:center;width:16px;height:16px;border-radius:999px;background:#f5b301;color:#3a2600;box-shadow:0 0 0 2px var(--color-bg)}
.sw-crown svg{display:block;width:10px!important;height:10px!important;stroke-width:2.6;margin:0!important}
/* avatar menu */
.sw-acct{display:flex;flex-direction:column;gap:14px}
.sw-acct-head{display:flex;align-items:center;gap:12px}
.sw-acct-plan{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--color-pill);font-size:14px;color:var(--color-fg)}
.sw-acct-plan.is-vip svg{color:#b07d00}html[data-theme=dark] .sw-acct-plan.is-vip svg{color:#f5b301}
.sw-acct-plan a{margin-left:auto;font-weight:700;color:var(--color-primary);font-size:13px}
.sw-acct-lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);margin-bottom:6px}
.sw-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border-radius:12px;background:var(--color-pill)}
.sw-seg-b{display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:9px;font-size:13px;font-weight:600;color:var(--color-fg)}
.sw-seg-b[aria-pressed=true]{background:var(--color-elevated);box-shadow:0 1px 3px rgba(0,0,0,.25),0 0 0 1px var(--color-control);font-weight:800}
.sw-acct-nav{display:flex;flex-direction:column}
.sw-acct-it{display:flex;align-items:center;gap:12px;min-height:46px;padding:0 4px;font-size:15px;font-weight:600;color:var(--color-fg);border-top:1px solid var(--color-border)}
.sw-acct-it svg{color:var(--color-muted)}

/* WCAG 1.4.11: form controls need a visible boundary (≥3:1 against what is around them) */
input.border,select.border,textarea.border,.sw-tform input:not(.sw-chips-in):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),.sw-tform select,.sw-tform textarea,
[data-chips] .sw-chips-box,.sw-select,#fpCForm,form .rounded-pill:has(>input),.rounded-pill:has(>#searchInput),.rounded-pill:has(>input.bg-transparent){border:1px solid var(--color-control)!important}
#fpCForm{border-color:rgba(255,255,255,.45)!important}
input::placeholder,textarea::placeholder{color:var(--color-subtle)!important;opacity:1}

/* status colors used as text */
.text-red-500,.text-red-400,.sw-danger-txt{color:var(--color-danger)!important}
html[data-theme=light] .text-white\/60,html[data-theme=light] .text-white\/70{color:var(--color-muted)}

/* light theme: surfaces that were hard-coded dark */
html[data-theme=light] .sw-sheet,html[data-theme=light] .sw-dialog,html[data-theme=light] .swc-sheet,html[data-theme=light] .sw-pop{background:var(--color-elevated);color:var(--color-fg)}
html[data-theme=light] .bg-black\/60,html[data-theme=light] [data-scrim]{background-color:rgba(0,0,0,.42)}
html[data-theme=light] .sw-up-row,html[data-theme=light] .sw-up-done-card{background:var(--color-elevated);border-color:var(--color-border)}
html[data-theme=light] .shadow-2xl{box-shadow:0 12px 32px rgba(0,0,0,.16)}
/* full player stays an immersive dark surface over the artwork in both themes (own token scope) */
/* update 17: real light variant of the full player (was forced dark). Only overlays that sit on artwork/video stay dark-scoped. */
html[data-theme=light] #fpLyrics,html[data-theme=light] #fpCtrls{--color-fg:#f4f4f5;--color-muted:#d4d4d8;--color-subtle:#b4b4bb;--color-pill:#2a2a2a;--color-border:#3f3f46;color:#f4f4f5;color-scheme:dark}
html[data-theme=light] #fpLyrics{background:rgba(17,17,17,.9)!important}
html[data-theme=light] #fp .bg-gradient-to-b{background-image:linear-gradient(to bottom,rgba(255,255,255,.55),color-mix(in srgb,var(--color-bg) 88%,transparent) 45%,var(--color-bg))!important}
html[data-theme=light] #fp .bg-white\/10{background:color-mix(in srgb,var(--color-fg) 8%,var(--color-bg))!important}
html[data-theme=light] #fp .bg-white\/10:hover{background:color-mix(in srgb,var(--color-fg) 14%,var(--color-bg))!important}
html[data-theme=light] #fpCForm{border-color:var(--color-control)!important;background:var(--color-bg)!important}
/* status / accent chips: mix the hue with the text color so they stay ≥4.5:1 in both themes */
.swc-chip{color:color-mix(in srgb,#3b82f6 60%,var(--color-fg))!important}
.is-done .sw-job-st{color:color-mix(in srgb,#22c55e 55%,var(--color-fg))!important}
.is-failed .sw-job-st{color:color-mix(in srgb,#ef4444 60%,var(--color-fg))!important}
.sw-up-row.is-ok .sw-up-msg{color:color-mix(in srgb,#22c55e 55%,var(--color-fg))}
.sw-up-msg.is-warn,.sw-up-row.is-err .sw-up-msg.is-warn{color:color-mix(in srgb,#f5a524 60%,var(--color-fg))!important}
.sw-up-row.is-err .sw-up-msg{color:var(--color-danger)}
.swc-field input{border-color:var(--color-control)!important}.swc-field input:focus{border-color:var(--color-primary)!important}
.sw-chips-in{border:0!important}
.sw-tform input:not(.sw-chips-in):focus,.sw-tform select:focus,.sw-tform textarea:focus,input.border:focus,select.border:focus,textarea.border:focus{border-color:var(--color-primary)!important}

/* ===== Update 17: shared toasts (both themes, AA). Top, under the header; never over the mini player / bottom nav ===== */
.sw-toaster{position:fixed!important;z-index:2147483000!important;top:calc(60px + env(safe-area-inset-top,0px))!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;width:min(420px,calc(100vw - 24px))!important;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.sw-toast{display:flex!important;align-items:center;gap:10px!important;padding:10px 8px 10px 12px!important;border-radius:14px!important;background:var(--color-elevated)!important;color:var(--color-fg)!important;
  border:1px solid var(--color-border)!important;border-left:4px solid var(--tk,var(--color-muted))!important;box-shadow:0 10px 30px rgba(0,0,0,.28)!important;font-size:14px;line-height:1.4;pointer-events:auto;-webkit-backdrop-filter:none;backdrop-filter:none}
html[data-theme=light] .sw-toast{box-shadow:0 10px 30px rgba(0,0,0,.14)!important}
.sw-toast-title{flex:1;min-width:0;font-weight:600;color:var(--color-fg)!important}
.sw-toast .sw-toast-icon,.sw-toast .sw-toast-icon[data-kind]{flex:none;display:grid!important;place-items:center;width:26px!important;height:26px!important;margin:0!important;border-radius:999px;background:var(--tk)!important;color:#fff!important}
.sw-toast-icon svg{width:15px!important;height:15px!important;display:block}
.sw-toast--success{--tk:#15803d}.sw-toast--error{--tk:#c81e1e}.sw-toast--warn{--tk:#a15c00}.sw-toast--info{--tk:#52525b}
html[data-theme=dark] .sw-toast--info{--tk:#71717a}
.sw-toast-x{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;color:var(--color-muted)}.sw-toast-x svg{width:14px;height:14px}
.sw-toast-x:hover{background:var(--color-pill);color:var(--color-fg)}
.sw-toast.sw-bump{animation:sw-tbump .3s}@keyframes sw-tbump{50%{transform:scale(1.03)}}
@media (min-width:1024px){.sw-toaster{top:72px!important}}
@media (prefers-reduced-motion:reduce){.sw-toast,.sw-toast.out,.sw-toast.sw-bump{animation:none!important;transition:none!important}}
#fp:not([hidden]) ~ .sw-toaster,body:has(#fp:not([hidden])) .sw-toaster{top:calc(12px + env(safe-area-inset-top,0px))!important}

/* update 17: icon+label chips (library theme/language and the like): never let the icon touch the edge */
.sw-chipbtn{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 14px!important;line-height:1.2;text-align:center;color:var(--color-fg)}
.sw-chipbtn>svg{flex:none;margin:0!important}
.sw-chipbtn>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fp span.opacity-50{opacity:1!important;color:var(--color-muted)}
html[data-theme=light] #fpCtrls button{background:rgba(0,0,0,.55)!important;color:#fff!important}
/* update 17: playing row in light theme: soft accent tint instead of a white slab on the off-white page */
html[data-theme=light] .song-row.sw-is-cur{background:color-mix(in srgb,var(--color-primary) 7%,var(--color-bg))!important;box-shadow:inset 3px 0 0 var(--color-primary)}
html[data-theme=dark] .song-row.sw-is-cur{box-shadow:inset 3px 0 0 var(--color-primary)}
/* update 17: role / tier badges (PHP user_badges, JS SWBadge) — small pills, AA in both themes */
.sw-ubs{display:inline-flex;align-items:center;gap:3px;margin-left:5px;vertical-align:middle;flex:none;line-height:1}
.sw-ub{display:inline-flex;align-items:center;gap:3px;height:17px;padding:0 6px 0 4px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.sw-ub svg{width:11px;height:11px;flex:none}
.sw-ub b{font-weight:800}
.sw-ub--mini{width:17px;padding:0;justify-content:center}
.sw-ub--admin{--ub-ink:#fff;background:#fde8e8;color:#a3141b;border-color:#f5b5b8}
.sw-ub--smod{--ub-ink:#fff;background:#f1e8fb;color:#6a2fa6;border-color:#d9c2f2}
.sw-ub--mod{--ub-ink:#fff;background:#e3effd;color:#0b5cad;border-color:#b6d4f6}
.sw-ub--vip{background:#fdf3d7;color:#8a5a00;border-color:#f0d58a}
html[data-theme=dark] .sw-ub--admin{--ub-ink:#2a0d0f;background:rgba(229,72,77,.16);color:#ff9a9e;border-color:rgba(229,72,77,.42)}
html[data-theme=dark] .sw-ub--smod{--ub-ink:#1d1029;background:rgba(142,78,198,.18);color:#d4b3f5;border-color:rgba(142,78,198,.45)}
html[data-theme=dark] .sw-ub--mod{--ub-ink:#0b1d33;background:rgba(0,144,255,.16);color:#8cc8ff;border-color:rgba(0,144,255,.42)}
html[data-theme=dark] .sw-ub--vip{background:rgba(245,190,40,.14);color:#f7cf62;border-color:rgba(245,190,40,.4)}
.tl-bub-n .sw-ubs{margin-left:4px}
/* update 17: theme-aware play overlay on track thumbnails (was a black scrim + dark icon in light theme) */
.sw-thumb-pp{background:linear-gradient(to top,rgba(0,0,0,.18),transparent 70%)}
.sw-thumb-pp>svg{box-sizing:content-box;width:14px!important;height:14px!important;padding:6px;border-radius:999px;background:rgba(255,255,255,.92);color:#18181b;fill:#18181b;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .15s}
.sw-thumb-pp>svg.lucide-play{padding:6px 5px 6px 7px}
html[data-theme=dark] .sw-thumb-pp>svg{background:rgba(17,17,17,.78);color:#fafafa;fill:#fafafa;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.sw-thumb-pp.sw-pp-eq>svg{fill:var(--color-primary);color:var(--color-primary)}
.song-row:hover .sw-thumb-pp>svg{transform:scale(1.08)}