/* Colour themes for the object pages: light, dark, neon, nature, sunset, ocean.
   html[data-theme] is set by js/theme.js. Each theme only defines variables; the rules below use them.
   Cassette + CD are light pages by default, vinyl is dark by default — their own look is kept for that theme. */

/* ---------- theme picker ---------- */
.theme-btn{ border:none; cursor:pointer; width:30px; height:30px; border-radius:50%; font-size:15px; line-height:1; background:rgba(127,120,140,.14); color:inherit; margin-left:4px; }
.theme-btn:hover{ background:rgba(127,120,140,.26); }
.theme-pop{ position:fixed; right:18px; top:56px; z-index:40; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:8px; border-radius:16px; background:var(--t-panel,#fff);
  box-shadow:0 14px 40px rgba(20,10,40,.25); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s, transform .18s; font-family:Rubik, system-ui, sans-serif; }
.theme-pop.open{ opacity:1; transform:none; pointer-events:auto; }
.theme-pop button{ display:flex; align-items:center; gap:8px; border:none; background:none; cursor:pointer; padding:8px 12px 8px 8px; border-radius:10px; font:700 12px Rubik, sans-serif; color:var(--ink,#1b1922); text-align:left; }
.theme-pop button:hover{ background:var(--t-soft,#f3eff8); }
.theme-pop button.on{ background:var(--t-on,#ffe3ee); }
.theme-pop i{ width:22px; height:22px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); flex:none; }
@media (max-width:560px){ .theme-pop{ right:10px; top:96px; } }

/* ---------- palettes ---------- */
html[data-theme=light]{ --ink:#1b1922; --mute:#8d8a96; --dim:#8a8494; --line:#ece4f0; --pill:#ffffff; --bg:#fbf6fa; --card:#ffffff;
  --acc:#ff4fa0; --acc2:#ff8a3d; --t-panel:rgba(255,255,255,.95); --t-soft:#f3eff8; --t-on:#ffe3ee; --t-field:#ffffff;
  --t-deck:radial-gradient(120% 90% at 100% 50%,#ffe6f1 0%,#fff 55%); }
html[data-theme=dark]{ --ink:#f4eefa; --mute:#8f89a3; --dim:#6e6880; --line:#2b2737; --pill:#17141f; --bg:#0d0b14; --card:#12101a;
  --acc:#ff4fa0; --acc2:#ff8a3d; --t-panel:rgba(18,16,26,.95); --t-soft:#221d2e; --t-on:#3a1c33; --t-field:#1f1b2a;
  --t-world:radial-gradient(70% 60% at 50% 42%,rgba(255,79,154,.16) 0%,rgba(255,79,154,0) 60%),linear-gradient(160deg,#1b1230 0%,#231233 40%,#140f24 75%,#0b0d1c 100%); }
html[data-theme=neon]{ --ink:#f2fbff; --mute:#7f8fb0; --dim:#6a7898; --line:#1d2340; --pill:#0c0b1a; --bg:#05040c; --card:#0a0916;
  --acc:#19f5ff; --acc2:#ff2bd6; --t-panel:rgba(9,8,22,.95); --t-soft:#141633; --t-on:#2a0f3c; --t-field:#11122a;
  --t-world:radial-gradient(45% 40% at 30% 35%,rgba(255,43,214,.28) 0%,rgba(255,43,214,0) 70%),radial-gradient(45% 40% at 72% 62%,rgba(25,245,255,.22) 0%,rgba(25,245,255,0) 70%),linear-gradient(180deg,#07061a 0%,#0b0420 55%,#020208 100%);
  --t-deck:radial-gradient(90% 80% at 100% 50%,rgba(255,43,214,.22) 0%,rgba(25,245,255,.06) 45%,#0a0916 75%); }
html[data-theme=nature]{ --ink:#1f2a1c; --mute:#6f7d66; --dim:#6f7d66; --line:#dbe5cf; --pill:#fbfdf6; --bg:#f3f6ea; --card:#fbfdf6;
  --acc:#3f8f5a; --acc2:#c9a227; --t-panel:rgba(251,253,246,.96); --t-soft:#e8efdc; --t-on:#d6ead0; --t-field:#ffffff;
  --t-world:radial-gradient(70% 55% at 50% 40%,rgba(255,250,220,.9) 0%,rgba(255,250,220,0) 65%),linear-gradient(170deg,#e9f3dc 0%,#d8ecd1 40%,#c6e2d6 75%,#b9d8cf 100%);
  --t-deck:radial-gradient(120% 90% at 100% 50%,#e2f0d4 0%,#fbfdf6 55%); }
html[data-theme=sunset]{ --ink:#2e1430; --mute:#93667f; --dim:#93667f; --line:#f6d6cf; --pill:#fff8f2; --bg:#fff1e6; --card:#fff8f2;
  --acc:#ff6b4a; --acc2:#c86bff; --t-panel:rgba(255,248,242,.96); --t-soft:#ffe8dc; --t-on:#ffd6c8; --t-field:#ffffff;
  --t-world:radial-gradient(40% 32% at 50% 64%,rgba(255,236,170,.95) 0%,rgba(255,236,170,0) 70%),linear-gradient(180deg,#b996ff 0%,#ff9ec4 38%,#ffb37a 68%,#ffd6a5 100%);
  --t-deck:radial-gradient(120% 90% at 100% 50%,#ffd2b8 0%,#fff2e8 55%); }
html[data-theme=ocean]{ --ink:#e8fbff; --mute:#7fa6b4; --dim:#5f8796; --line:#123444; --pill:#0a1c27; --bg:#041019; --card:#071822;
  --acc:#2fd5c6; --acc2:#4cc3ff; --t-panel:rgba(6,22,32,.95); --t-soft:#0f2c3a; --t-on:#0f3d45; --t-field:#0c2633;
  --t-world:radial-gradient(60% 45% at 50% 0%,rgba(143,227,255,.30) 0%,rgba(143,227,255,0) 70%),linear-gradient(180deg,#0b3a52 0%,#08283c 45%,#041621 100%);
  --t-deck:radial-gradient(110% 90% at 100% 50%,#0d3a4a 0%,#071822 60%); }

html[data-theme=vice]{ --ink:#fff4fb; --mute:#c49ad8; --dim:#9a74b4; --line:#4a2470; --pill:#2a0f4a; --bg:#1a0833; --card:#220b40;
  --acc:#ff3d8b; --acc2:#2fd5c6; --t-panel:rgba(34,11,64,.95); --t-soft:#3a1763; --t-on:#5a1a5e; --t-field:#2c1052;
  --t-world:radial-gradient(38% 30% at 50% 70%,rgba(255,196,107,.55) 0%,rgba(255,79,154,.25) 45%,rgba(255,79,154,0) 75%),linear-gradient(180deg,#1b0a3d 0%,#4a1670 38%,#c23a8a 70%,#ff8a5c 88%,#1fb5b0 100%);
  --t-deck:radial-gradient(90% 80% at 100% 50%,rgba(255,61,139,.32) 0%,rgba(47,213,198,.10) 45%,#220b40 78%); }

/* ---------- cassette + CD in every theme but their own (light) ---------- */
html:not([data-theme=light]) body{ background:var(--bg); }
html:not([data-theme=light]) body::before{ background:var(--bg); }
html:not([data-theme=light]) .world3d{ background:var(--t-world) !important; }
html:not([data-theme=light]) .lnav a.on{ background:var(--t-soft); box-shadow:none; }
html:not([data-theme=light]) .pill{ border-color:var(--line); }
html:not([data-theme=light]) .pill .sm, html:not([data-theme=light]) .pill .txt{ color:var(--ink); }
html:not([data-theme=light]) .pill .sm:hover{ background:var(--t-soft); }
html:not([data-theme=light]) .pill .chip::after{ background:var(--pill); }
html:not([data-theme=light]) .pill .txt.on{ background:linear-gradient(90deg,var(--acc),var(--acc2)); color:#fff; }
html:not([data-theme=light]) .lbrand b em{ color:var(--acc); }
html:not([data-theme=light]) body .lhint.np-title{ color:var(--ink); }
/* dark-family themes: dark pill button, deep shadows */
html:is([data-theme=dark],[data-theme=neon],[data-theme=ocean],[data-theme=vice]) .pill{ box-shadow:0 10px 30px rgba(0,0,0,.45); }
html:is([data-theme=dark],[data-theme=neon],[data-theme=ocean],[data-theme=vice]) .pill .dark{ background:var(--ink); color:var(--bg); }
html:is([data-theme=dark],[data-theme=neon],[data-theme=ocean],[data-theme=vice]) .pill .chip.on{ box-shadow:0 0 0 2px var(--pill),0 0 0 4px var(--ink); }
html:is([data-theme=dark],[data-theme=neon],[data-theme=ocean],[data-theme=vice]) .lfoot{ color:var(--dim); }
html[data-theme=neon] .pill{ box-shadow:0 0 0 1px rgba(25,245,255,.25),0 0 24px rgba(255,43,214,.25),0 10px 30px rgba(0,0,0,.5); }
html[data-theme=neon] .lbrand b{ text-shadow:0 0 12px rgba(25,245,255,.5); }

/* ---------- music drawer, mode switch, label editor (all themes but light) ---------- */
html:not([data-theme=light]) .rm-switch{ background:var(--t-panel); }
html:not([data-theme=light]) .rm-switch button{ color:var(--mute); }
html:not([data-theme=light]) .rm-switch button.on, html:not([data-theme=light]) .rm-tabs button.on{ background:var(--ink); color:var(--bg); }
html:not([data-theme=light]) .rm-panel, html:not([data-theme=light]) .lt-pop{ background:var(--t-panel); }
html:not([data-theme=light]) .rm-head b, html:not([data-theme=light]) .rm-item b{ color:var(--ink); }
html:not([data-theme=light]) .rm-item span, html:not([data-theme=light]) .rm-note, html:not([data-theme=light]) .rm-empty{ color:var(--mute); }
html:not([data-theme=light]) .rm-panel input, html:not([data-theme=light]) .lt-pop input{ background:var(--t-field); border-color:var(--line); color:var(--ink); }
html:not([data-theme=light]) .rm-close, html:not([data-theme=light]) .rm-tabs button, html:not([data-theme=light]) .lt-reset{ background:var(--t-soft); color:var(--mute); }
html:not([data-theme=light]) .rm-item:hover{ background:var(--t-soft); } html:not([data-theme=light]) .rm-item.on{ background:var(--t-on); }
html:not([data-theme=light]) .rm-tab, html:not([data-theme=light]) .rm-plus, html:not([data-theme=light]) .rm-panel form button, html:not([data-theme=light]) .lt-ok{ background:linear-gradient(135deg,var(--acc),var(--acc2)); }
html:not([data-theme=light]) .rm-sec, html:not([data-theme=light]) .rm-back{ color:var(--acc); }

/* ---------- vinyl in every theme but its own (dark) ---------- */
html:not([data-theme=dark]) .deck{ background:var(--t-deck); }
html:not([data-theme=dark]) .brand b{ color:var(--acc); }
html:not([data-theme=dark]) .meta span::before, html:not([data-theme=dark]) .line .lab{ color:var(--acc); }
html:not([data-theme=dark]) .vtop nav a.on{ background:var(--t-soft); border-color:transparent; }
html:not([data-theme=dark]) .ctrl button{ background:var(--t-soft); color:var(--ink); border-color:var(--line); }
html:not([data-theme=dark]) .ctrl button.big{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
html:not([data-theme=dark]) .vfoot{ color:var(--dim); }
/* light-family themes: dark text on a pale card */
html:is([data-theme=light],[data-theme=nature],[data-theme=sunset]) .deck{ box-shadow:0 20px 60px rgba(42,15,61,.08); }
html:is([data-theme=light],[data-theme=nature],[data-theme=sunset]) .logo-px{ box-shadow:2px 2px 0 var(--line); }
html:is([data-theme=light],[data-theme=nature],[data-theme=sunset]) .line{ color:color-mix(in srgb,var(--ink) 18%,transparent); }
html:is([data-theme=light],[data-theme=nature],[data-theme=sunset]) .line.cur{ color:var(--ink); }
html:is([data-theme=light],[data-theme=nature],[data-theme=sunset]) .line .tk.done{ color:color-mix(in srgb,var(--ink) 65%,transparent); }
html:is([data-theme=light],[data-theme=nature],[data-theme=sunset]) .line .tk.ghost{ color:color-mix(in srgb,var(--ink) 12%,transparent); }
/* dark-family on vinyl */
html:is([data-theme=neon],[data-theme=ocean],[data-theme=vice]) .line{ color:color-mix(in srgb,var(--ink) 22%,transparent); }
html:is([data-theme=neon],[data-theme=ocean],[data-theme=vice]) .line.cur{ color:var(--ink); }
html[data-theme=neon] .line.cur{ text-shadow:0 0 14px rgba(25,245,255,.55); }
html[data-theme=vice] .lbrand b, html[data-theme=vice] .brand{ text-shadow:0 0 12px rgba(255,61,139,.55); }
html[data-theme=vice] .pill{ box-shadow:0 0 0 1px rgba(47,213,198,.3),0 0 26px rgba(255,61,139,.3),0 10px 30px rgba(0,0,0,.5); }
html[data-theme=vice] .line.cur{ text-shadow:0 0 14px rgba(255,61,139,.6); }
html[data-theme=vice] .deck{ border-color:rgba(255,61,139,.35); }
html[data-theme=neon] .deck{ border-color:rgba(25,245,255,.25); box-shadow:0 0 40px rgba(255,43,214,.15) inset; }