/* Look: Music Store. A 90s mall music store after dark: plum night, cherry neon, mint and cyan tubes, chrome trim,
   Tektur signage over Golos Text. Loaded after app.css only when this look is picked; dark only.
   The rack view becomes the store wall: chrome bays, neon section signs, track lights (rules at the end). */
html:root[data-look="musicstore"]{
  color-scheme: dark;
  --bg:oklch(15% .035 300); --surface:oklch(19.5% .042 300); --surface-2:oklch(24% .048 300); --surface-3:oklch(28% .05 300);
  --text:oklch(96% .012 300); --text-2:oklch(78% .03 300); --line:oklch(33% .045 300); --line-strong:oklch(55% .04 300);
  --primary:oklch(70% .23 12); --primary-hover:oklch(76% .2 12); --on-primary:oklch(15% .035 300); --focus:oklch(87% .15 168);
  --j-bg:oklch(28% .07 250); --j-fg:oklch(86% .09 240); --c-bg:oklch(29% .07 40); --c-fg:oklch(86% .1 60); --m-bg:oklch(28% .07 165); --m-fg:oklch(88% .13 165);
  --danger:oklch(74% .17 22); --danger-bg:oklch(27% .08 22); --ok:oklch(87% .15 168); --ok-bg:oklch(27% .06 168);
  --nav-glass:oklch(15% .035 300 / .86); --scrim:oklch(8% .03 300 / .7);
  --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 12px 30px -12px rgba(0,0,0,.75); --shadow-3:0 28px 70px -20px rgba(0,0,0,.9);
  --neon:oklch(70% .23 12); --amber:oklch(84% .16 78); --mint:oklch(87% .15 168);
  --chrome-line:linear-gradient(90deg,oklch(44% .016 260),oklch(98% .004 250) 20%,oklch(79% .012 250) 50%,oklch(98% .004 250) 80%,oklch(44% .016 260));
  --display:"Tektur",ui-sans-serif,system-ui,sans-serif;
  --body:"Golos Text",ui-sans-serif,system-ui,sans-serif;
  --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:18px;
}
html[data-look="musicstore"] [data-theme-toggle]{display:none}
html[data-look="musicstore"] h1,html[data-look="musicstore"] .section-head h2,html[data-look="musicstore"] .tape-head h1{
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;color:oklch(98% .004 250);
  text-shadow:0 0 .04em #fff,0 0 .18em var(--neon),0 0 .6em color-mix(in oklch,var(--neon) 55%,transparent)}
html[data-look="musicstore"] h2,html[data-look="musicstore"] h3{font-family:var(--display);font-weight:600}
html[data-look="musicstore"] .stat b,html[data-look="musicstore"] .price b{font-family:var(--display);font-weight:600}
html[data-look="musicstore"] .brand span{font:400 20px/1 "Monoton",var(--display);letter-spacing:0;color:oklch(96% .012 300);
  text-shadow:0 0 .04em #fff,0 0 .18em var(--neon),0 0 .6em color-mix(in oklch,var(--neon) 60%,transparent)}

/* the fascia: sidebar and bars under a chrome trim, the current aisle lit in neon */
html[data-look="musicstore"] .side{background:oklch(12% .03 300);border-right:0;box-shadow:inset -3px 0 0 -1px oklch(79% .012 250 / .35)}
html[data-look="musicstore"] .side::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2px;background:linear-gradient(180deg,oklch(98% .004 250),oklch(44% .016 260) 40%,oklch(79% .012 250) 70%,oklch(44% .016 260))}
html[data-look="musicstore"] .navlink{color:var(--text-2)}
html[data-look="musicstore"] .navlink:hover{background:var(--surface-2);color:var(--text)}
html[data-look="musicstore"] .navlink[aria-current=page]{background:var(--surface-2);color:var(--text);box-shadow:inset 3px 0 0 var(--neon),0 0 18px -6px var(--neon)}
html[data-look="musicstore"] .navlink[aria-current=page] .i{color:var(--neon);filter:drop-shadow(0 0 4px var(--neon))}
html[data-look="musicstore"] .mobilebar::after,html[data-look="musicstore"] .topnav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--chrome-line);opacity:.7}
html[data-look="musicstore"] .tabbar{box-shadow:inset 0 2px 0 oklch(79% .012 250 / .4)}
html[data-look="musicstore"] .tabbar a[aria-current=page]{color:var(--neon)}
html[data-look="musicstore"] .tabbar a[aria-current=page] .i{filter:drop-shadow(0 0 4px var(--neon))}

/* buttons: cherry neon primary with a glow, chrome-edged secondary */
html[data-look="musicstore"] .btn-primary{box-shadow:0 0 22px -4px color-mix(in oklch,var(--neon) 70%,transparent);font-weight:600}
html[data-look="musicstore"] .btn-primary:hover{box-shadow:0 0 30px -2px color-mix(in oklch,var(--neon) 80%,transparent)}
html[data-look="musicstore"] .btn-outline{border-color:oklch(55% .02 260)}
html[data-look="musicstore"] .btn-outline:hover{border-color:oklch(79% .012 250)}
html[data-look="musicstore"] .seg [aria-current=page],html[data-look="musicstore"] .seg [aria-pressed=true],html[data-look="musicstore"] .seg [aria-checked=true]{background:var(--surface-3);color:var(--text);box-shadow:inset 0 -2px 0 var(--neon)}

/* panels: lit from above, a hairline of chrome along the top edge */
html[data-look="musicstore"] .panel,html[data-look="musicstore"] .tablebox,html[data-look="musicstore"] .stat,html[data-look="musicstore"] .plan,html[data-look="musicstore"] .tile,html[data-look="musicstore"] .info{
  border-color:var(--line);box-shadow:inset 0 1px 0 oklch(79% .012 250 / .18)}
html[data-look="musicstore"] .plan.featured{box-shadow:inset 0 3px 0 var(--neon),0 0 30px -12px var(--neon)}
html[data-look="musicstore"] table.lib th{text-transform:none;letter-spacing:0;font-size:13px;color:var(--text-2)}
html[data-look="musicstore"] a:not([class]){color:var(--mint)}

/* ---- the store wall (Rack view): chrome bays, neon signs, track lights ---- */
html[data-look="musicstore"] .rk-scroll{overflow:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;border-radius:10px;background:#0B0910}
html[data-look="musicstore"] .rk-wallin{position:relative;width:max-content;padding:0 30px 30px;
  background:radial-gradient(60% 40% at 15% 0,rgba(255,79,184,.10),transparent 70%),radial-gradient(60% 40% at 85% 0,rgba(63,224,255,.08),transparent 70%),#0B0910}
html[data-look="musicstore"] .rk-wallin::before,html[data-look="musicstore"] .rk-wallin::after{content:"";position:absolute;top:0;bottom:0;width:22px;background:var(--chrome)}
html[data-look="musicstore"] .rk-wallin::before{left:4px}
html[data-look="musicstore"] .rk-wallin::after{right:4px}
/* header: track bar with lamps, then the big neon sign between neon tubes, on a chrome rail */
html[data-look="musicstore"] .rk-head{position:relative;display:flex;align-items:center;justify-content:center;gap:28px;padding:64px 20px 26px;margin:0 -8px;
  background:linear-gradient(180deg,#121019,#07060B);border-bottom:12px solid transparent;border-image:var(--chrome-h) 1}
html[data-look="musicstore"] .rk-lights{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-around;padding:0 6%;
  border-top:8px solid #1A1A1F;box-shadow:0 1px 0 #34343A}
html[data-look="musicstore"] .rk-lights i{position:relative;width:26px;height:40px;border-radius:5px 5px 11px 11px;background:var(--chrome);transform:translateY(2px);box-shadow:0 4px 8px rgba(0,0,0,.6)}
html[data-look="musicstore"] .rk-lights i::after{content:"";position:absolute;left:4px;right:4px;bottom:-2px;height:5px;border-radius:50%;background:#FFF6DC;box-shadow:0 0 10px 3px rgba(255,236,190,.8)}
html[data-look="musicstore"] .rk-tubes{flex:1 1 0;max-width:260px;height:20px;border-radius:3px;
  background:repeating-linear-gradient(180deg,#9FF4FF 0 3px,transparent 3px 8.5px);filter:drop-shadow(0 0 4px #3FE0FF) drop-shadow(0 0 10px rgba(63,224,255,.6))}
html[data-look="musicstore"] .rk-bigsign{flex:none;padding:8px 26px;border:3px solid #FF4FB8;border-radius:6px;background:#0A0710;
  font:600 64px/1 var(--display);font-stretch:85%;letter-spacing:.04em;text-transform:uppercase;color:#FFE3F4;
  text-shadow:0 0 2px #fff,0 0 10px #FF4FB8,0 0 26px #FF4FB8,0 0 48px rgba(255,79,184,.6);
  box-shadow:0 0 14px #FF4FB8,0 0 40px rgba(255,79,184,.45),inset 0 0 14px rgba(255,79,184,.6)}
/* each 100-tape rack hangs in a chrome bay with its neon section sign on the rail above it */
html[data-look="musicstore"] .rk-rows{display:grid;grid-template-columns:repeat(var(--across),max-content);gap:0;justify-content:center}
html[data-look="musicstore"] .rk-bay{position:relative;display:flex;flex-direction:column;align-items:center;padding:0 11px 11px;
  background:var(--chrome-h) top / 100% 58px no-repeat,var(--chrome)}
html[data-look="musicstore"] .rk-bay::after{content:"";position:absolute;left:11px;right:11px;top:58px;bottom:11px;pointer-events:none;z-index:2;mix-blend-mode:screen;
  background:radial-gradient(70% 55% at 30% 0,rgba(255,240,205,.20),transparent 70%),radial-gradient(70% 55% at 70% 0,rgba(255,240,205,.16),transparent 70%)}
html[data-look="musicstore"] .rk-sign{display:block;margin:10px 0 9px;padding:4px 18px;border:2px solid var(--n);border-radius:4px;background:#07060B;white-space:nowrap;
  font:600 24px/1.25 var(--display);font-stretch:85%;letter-spacing:.03em;text-transform:uppercase;color:var(--nt);
  text-shadow:0 0 2px #fff,0 0 8px var(--n),0 0 20px var(--n);box-shadow:0 0 10px var(--n),inset 0 0 8px var(--n)}
html[data-look="musicstore"] .n-pink{--n:#FF4FB8;--nt:#FFE3F4}
html[data-look="musicstore"] .n-cyan{--n:#3FE0FF;--nt:#E4FBFF}
html[data-look="musicstore"] .n-green{--n:#39F29B;--nt:#E2FFF1}
html[data-look="musicstore"] .n-blue{--n:#4F8BFF;--nt:#E6EEFF}
html[data-look="musicstore"] .n-violet{--n:#B36BFF;--nt:#F2E8FF}

html[data-look="musicstore"] .rk-sign.rk-off{--n:#3A3A44;--nt:#6E6E7A;text-shadow:none;box-shadow:none}