/* ===== EMTAC'TUNES v4 — logo header · carousels · favorites · discovery ===== */
:root{
  --e-bg:#05070a;--e-fg:#9fb0c0;--e-mute:#5f7184;
  --e-panel:rgba(13,16,23,0.6);--e-hair:rgba(255,255,255,0.07);--e-pill:rgba(12,15,22,0.72);
  --tn:#ff5c5c;--tn-deep:#c23b3b;--cvbg:#14181f;
  --f:'SF Mono','Cascadia Code','Roboto Mono','Source Code Pro','Consolas','Courier New',monospace;
}
html[data-theme="day"]{--e-bg:#e6e9e1;--e-fg:#27402f;--e-mute:#5d7567;--e-panel:rgba(255,255,255,0.9);--e-hair:rgba(26,48,36,0.16);--e-pill:rgba(255,255,255,0.78);--tn:#d83a3a;--tn-deep:#a12727;--cvbg:#d4d8cc;}
body{margin:0;background:var(--e-bg);color:var(--e-fg);font-family:var(--f);padding-bottom:80px;transition:background .3s,color .3s}
.tn-wrap{max-width:1040px;margin:0 auto;padding:0 16px 30px}
.tn-back{display:inline-block;margin:14px 0 4px;padding:.4rem .8rem;border:1px solid var(--e-hair);border-radius:6px;color:var(--e-mute);text-decoration:none;font-size:.7rem;letter-spacing:.12em;background:var(--e-pill)}
.tn-back:hover{border-color:var(--tn);color:var(--tn)}
/* ===== shared EMTAC combined-logo header ===== */
.emtac-head{display:flex;align-items:center;justify-content:center;padding:14px 0 0}
.emtac-logo{max-width:min(96%,600px);height:auto;display:block}  /* +15%: bigger resting logo = prettier shrink-fade travel */
.emtac-tag{text-align:center;font-size:10px;letter-spacing:.3em;color:var(--e-mute);font-weight:600;margin-top:8px}
.tn-searchwrap{margin:16px auto 4px;max-width:620px;position:relative}
.tn-search{width:100%;box-sizing:border-box;background:var(--e-pill);border:1px solid var(--e-hair);border-radius:10px;color:var(--e-fg);font-family:var(--f);font-size:16px;padding:12px 14px 12px 38px;outline:none;transition:border-color .15s}
.tn-search::placeholder{color:var(--e-mute)}
.tn-search:focus{border-color:var(--tn)}
.tn-searchwrap::before{content:">";position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--tn);font-weight:700}
.tn-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.tn-tab{cursor:pointer;font-size:11px;letter-spacing:.13em;font-weight:700;color:var(--e-mute);background:var(--e-pill);border:1px solid var(--e-hair);border-radius:7px;padding:8px 13px;transition:all .14s}
.tn-tab:hover{border-color:var(--tn);color:var(--tn)}
.tn-tab.active{color:var(--tn);border-color:var(--tn)}
html[data-theme="nv"] .tn-tab.active{box-shadow:0 0 14px rgba(255,92,92,.22);text-shadow:0 0 7px rgba(255,92,92,.45)}
.tn-count{text-align:center;color:var(--e-mute);font-size:.7rem;letter-spacing:.16em;margin:4px 0 14px}
.tn-fbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center;margin:0 0 14px}
.tn-sel{background:var(--e-pill);border:1px solid var(--e-hair);color:var(--e-fg);font-family:var(--f);font-size:11px;letter-spacing:.08em;padding:7px 10px;border-radius:7px;outline:none;cursor:pointer}
.tn-sel:focus{border-color:var(--tn)}
.tn-asort{cursor:pointer;font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--e-mute);background:var(--e-pill);border:1px solid var(--e-hair);border-radius:7px;padding:7px 11px;display:inline-block}
.tn-asort:hover{border-color:var(--tn);color:var(--tn)}
.tn-asort.on{color:var(--tn);border-color:var(--tn)}
.cv{width:42px;height:42px;border-radius:6px;flex:0 0 auto;background:var(--cvbg);display:flex;align-items:center;justify-content:center;font-weight:800;color:rgba(255,255,255,.92);font-size:13px;overflow:hidden;line-height:1}
.cv img{width:100%;height:100%;object-fit:cover;display:block}
.cvg{color:rgba(255,255,255,.95);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.cvbig{width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--cvbg);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:28px;border:1px solid var(--e-hair);transition:all .15s}
.cvbig img{width:100%;height:100%;object-fit:cover;display:block}
.tn-list{display:flex;flex-direction:column;gap:2px}
.tn-row{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.tn-row:hover{background:var(--e-panel);border-color:var(--e-hair)}
.tn-row.playing{border-color:var(--tn)}
html[data-theme="nv"] .tn-row.playing{box-shadow:0 0 12px rgba(255,92,92,.18)}
.tn-row .ti{flex:1;min-width:0}
.tn-row .tt{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-row.playing .tt{color:var(--tn)}
.tn-row .ta{font-size:11px;color:var(--e-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tn-heart{flex:0 0 auto;width:24px;text-align:center;color:var(--e-mute);cursor:pointer;font-size:14px;opacity:.55;-webkit-tap-highlight-color:transparent;outline:none;-webkit-user-select:none;user-select:none;background:none;border:0}
.tn-heart:hover{color:var(--tn);opacity:1}
.tn-heart.on{color:var(--tn);opacity:1;text-shadow:0 0 10px rgba(255,92,92,.75),0 0 4px rgba(255,92,92,.55)}
.tn-row .tdur{font-size:11px;color:var(--e-mute);flex:0 0 auto;font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.tn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:18px;margin-top:6px}
.tn-card{cursor:pointer;text-align:left}
.tn-card:hover .cvbig{border-color:var(--tn)}
html[data-theme="nv"] .tn-card:hover .cvbig{box-shadow:0 0 16px rgba(255,92,92,.3)}
.tn-card .cn{font-size:12px;font-weight:600;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-card:hover .cn{color:var(--tn)}
.tn-card .cc{font-size:10px;color:var(--e-mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:16px;margin-top:6px}
.tn-tile{cursor:pointer;aspect-ratio:16/10;border-radius:14px;padding:14px;display:flex;align-items:flex-end;color:#fff;font-weight:800;font-size:15px;position:relative;overflow:hidden;border:1px solid var(--e-hair);text-shadow:0 1px 4px rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s}
@media (hover:hover) and (pointer:fine){
.tn-tile:hover{transform:translateY(-3px)}
}
html[data-theme="nv"] .tn-tile:hover{box-shadow:0 6px 20px rgba(0,0,0,.5)}
.tn-tile .tcnt{position:absolute;top:10px;right:12px;font-size:10px;font-weight:600;opacity:.9}
.tn-tile.big{font-size:24px;letter-spacing:.02em}
.tn-sentinel{height:30px}
.tn-bigrow{display:flex;gap:12px;flex-wrap:wrap;margin:2px 0 8px}
.tn-bigbtn{flex:1;min-width:150px;cursor:pointer;border:1px solid var(--e-hair);background:var(--e-panel);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;transition:all .15s}
.tn-bigbtn:hover{border-color:var(--tn);transform:translateY(-2px)}
.tn-bigbtn .bb-t{font-size:14px;font-weight:800;color:var(--tn)}
.tn-bigbtn .bb-s{font-size:11px;color:var(--e-mute)}
.tn-shelf-sec{margin:16px 0 6px}
.tn-shelf-h{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 10px}
.tn-shelf-t{font-size:13px;font-weight:800;letter-spacing:.03em;color:var(--e-fg)}
.tn-shelf-a{font-size:10px;letter-spacing:.12em;color:var(--tn);cursor:pointer}
.tn-shelf-a:hover{text-decoration:underline}
.tn-shelf{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;/* (10%-width right-fade REMOVED at source — the 30-builds-ago rule that kept resurfacing) */}
.tn-shelf::-webkit-scrollbar{height:6px}
.tn-shelf::-webkit-scrollbar-thumb{background:var(--e-hair);border-radius:3px}
.tn-scard{flex:0 0 auto;width:124px;cursor:pointer;scroll-snap-align:start}
.tn-scard .cvbig{font-size:22px}
.tn-scard .cn{font-size:11px;font-weight:600;margin-top:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-scard .cc{font-size:9px;color:var(--e-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tn-empty{padding:0 2px 6px;color:var(--e-mute);font-size:11px}
.tn-player{position:fixed;left:0;right:0;bottom:0;height:64px;background:var(--e-panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--e-hair);display:flex;align-items:center;gap:14px;padding:0 16px;z-index:50;overflow:hidden;box-sizing:border-box}
.pcv{width:46px;height:46px;border-radius:7px;font-size:16px;cursor:pointer}
.tn-np{flex:1;min-width:0;cursor:pointer}
.tn-np-t{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tn)}
.tn-np-a{font-size:11px;color:var(--e-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-ctrls{display:flex;align-items:center;gap:9px}
.tn-btn{background:transparent;border:1px solid var(--e-hair);color:var(--tn);border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;line-height:1}
.tn-btn:hover{border-color:var(--tn)}
.tn-btn.tn-play{width:44px;height:44px;font-size:15px}
html[data-theme="nv"] .tn-btn:hover{box-shadow:0 0 12px rgba(255,92,92,.25)}
.tn-btn.on{color:var(--tn);border-color:var(--tn)}
.tn-seek{flex:2;display:flex;align-items:center;gap:8px;max-width:420px}
.tn-time{font-size:10px;color:var(--e-mute);font-variant-numeric:tabular-nums;flex:0 0 auto}
.tn-bar{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--e-hair);outline:none;cursor:pointer}
.tn-bar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--tn);cursor:pointer}
.tn-bar::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--tn);cursor:pointer}
.tn-full{position:fixed;inset:0;z-index:100;background:var(--e-bg);transform:translateY(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden}
.tn-full.open{transform:translateY(0)}
.tn-full::before{content:"";position:absolute;inset:0;background:var(--npg,linear-gradient(160deg,#222,#05070a));opacity:.28;z-index:0}
.tn-full-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.tn-full-lab{font-size:10px;letter-spacing:.34em;color:var(--e-mute);font-weight:700}
.tn-fbtn{background:transparent;border:1px solid var(--e-hair);color:var(--e-fg);border-radius:8px;width:38px;height:34px;cursor:pointer;font-size:14px}
.tn-fbtn:hover{border-color:var(--tn);color:var(--tn)}
.tn-fbtn.on{color:var(--tn);border-color:var(--tn)}
.tn-full-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;padding:6px 22px 26px;overflow:hidden;max-width:560px;margin:0 auto;width:100%;box-sizing:border-box}
.tn-full-art{width:min(60vw,280px);aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--cvbg);display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:800;color:#fff;box-shadow:0 16px 50px rgba(0,0,0,.55);flex:0 0 auto}
.tn-full-art img{width:100%;height:100%;object-fit:cover;display:block}
.tn-full-meta{text-align:center;margin:16px 0 4px;width:100%}
.tn-full-t{font-size:19px;font-weight:800;color:var(--e-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-full-a{font-size:13px;color:var(--tn);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-full-al{font-size:11px;color:var(--e-mute);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-style:italic}
.tn-full-seek{display:flex;align-items:center;gap:9px;width:100%;margin:12px 0 4px}
.tn-full-ctrls{display:flex;align-items:center;justify-content:center;gap:16px;margin:8px 0 6px}
.tn-lyrics{flex:1;width:100%;overflow-y:auto;margin-top:10px;text-align:center;-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}
.tn-lyrics .ly{font-size:16px;line-height:1.9;color:var(--e-mute);opacity:.5;transition:all .2s;cursor:pointer;padding:1px 0}
.tn-lyrics .ly.active{color:var(--tn);opacity:1;font-weight:700;transform:scale(1.04)}
.tn-lyrics .ly-plain{white-space:pre-wrap;text-align:center;font-size:14px;line-height:1.8;color:var(--e-fg);font-family:var(--f);margin:0}
.tn-lyrics .ly-none{color:var(--e-mute);font-size:12px;letter-spacing:.06em;margin-top:24px;line-height:1.7}
@media(max-width:640px){.tn-seek{display:none}.tn-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px}.tn-tiles{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}}
/* ===== Wave 3b: mobile now-playing transport (phone only) ===== */
@media(max-width:640px){
  .tn-full .tn-ctrls{gap:6px}
  .tn-full .tn-btn{width:44px;height:44px;border:1px solid rgba(255,255,255,.14);-webkit-tap-highlight-color:transparent;color:#d8ece1}
  .tn-full .tn-btn svg{width:18px;height:18px}
  .tn-full #tn-fprev,.tn-full #tn-fnext{width:52px;height:52px}
  .tn-full #tn-fprev svg,.tn-full #tn-fnext svg{width:24px;height:24px}
  .tn-full #tn-fplay{width:68px;height:68px;background:var(--tn);border-color:var(--tn);color:#14201b}
  .tn-full #tn-fplay svg{width:28px;height:28px}
  .tn-full .tn-btn:not(.tn-play):hover,.tn-full .tn-btn:not(.tn-play):focus,.tn-full .tn-btn:not(.tn-play):active{border-color:rgba(255,255,255,.14);color:#d8ece1;outline:none;box-shadow:none}
  .tn-full #tn-fplay:hover,.tn-full #tn-fplay:focus,.tn-full #tn-fplay:active{background:var(--tn);border-color:var(--tn);color:#14201b;outline:none;box-shadow:none}
  .tn-full .tn-bar{height:6px;border-radius:3px}
  .tn-full .tn-bar::-webkit-slider-thumb{width:18px;height:18px}
  .tn-full .tn-time{font-size:12px}
}
/* ===== Wave 2c: More Like This rail (desktop >=1200, non-iOS) ===== */
.tn-reco{display:none}
@media(min-width:1200px){html:not(.etn-ios) .tn-reco{display:block;position:absolute;right:calc(50% + 300px);left:auto;width:288px;top:70px;height:540px;overflow-y:auto;padding:0 8px;z-index:2}}
.tn-reco-h{font-size:11px;letter-spacing:.2em;color:var(--tn);font-weight:700;margin:0 0 14px;padding-left:2px;text-shadow:0 0 9px rgba(255,92,92,.5),0 1px 2px rgba(0,0,0,.65)}
.tn-reco-row{display:flex;align-items:center;gap:12px;padding:8px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.tn-reco-row .cv{width:50px;height:50px;border-radius:8px;font-size:14px}
.tn-reco-row:hover{background:var(--e-panel);border-color:var(--e-hair)}
.tn-reco-ti{min-width:0;flex:1}
.tn-reco-t{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.92),0 0 6px rgba(0,0,0,.65),0 0 7px rgba(255,92,92,.4)}
.tn-reco-a{font-size:11.5px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 5px rgba(255,92,92,.28)}
/* ===== Wave 2b: digitizer (desktop, non-iOS) + phone ambient drift ===== */
.tn-viz{display:none;width:100%;height:90px;margin:4px 0}
@media(min-width:820px){html:not(.etn-ios) .tn-viz{display:block}}
@media(max-width:819px){.tn-full.open .tn-full-bg{animation:etnDrift 26s ease-in-out infinite alternate}}
html.etn-ios .tn-full.open .tn-full-bg{animation:etnDrift 26s ease-in-out infinite alternate}
@keyframes etnDrift{0%{transform:scale(1.15) translate(0,0)}100%{transform:scale(1.26) translate(-2%,2%)}}
/* ===== Wave 2a: blurred now-playing backdrop + stop button ===== */
.tn-full-bg{position:absolute;inset:-60px;z-index:0;background-position:center;background-size:cover;filter:blur(48px) brightness(.42) saturate(1.25);transform:scale(1.15);transition:background-image .45s ease,opacity .45s ease;pointer-events:none}
.tn-full::before{z-index:1}
.tn-xstop{margin-left:2px;flex:0 0 auto;border-color:transparent;color:var(--e-mute);width:34px;height:34px}
.tn-xstop:hover{color:var(--tn);border-color:var(--tn)}


/* ============================================================
   V2 SKIN SYSTEM — gated by body[data-skin] / body[data-bg]
   Only active when the engine sets these attributes (?skin flag).
   When absent, the original phosphor theme is untouched.
   ============================================================ */

/* ---- DARK GLASS ---- */
body[data-skin="darkglass"]{
  --sk-bg:#07090e; --sk-grad:radial-gradient(120% 80% at 80% -10%,#16203a 0%,#0a0d16 45%,#06080d 100%);
  --sk-panel:rgba(20,26,40,.55); --sk-blur:22px; --sk-border:rgba(150,180,255,.14);
  --sk-fg:#eaf0ff; --sk-mute:#8794b3; --sk-accent:#5fa8ff; --sk-accent2:#9d7bff;
  --sk-glow:rgba(95,168,255,.45); --sk-hair:rgba(150,180,255,.10); --sk-card:rgba(255,255,255,.04);
}
/* ---- LIQUID GLASS ---- */
body[data-skin="liquid"]{
  --sk-bg:#0c1118; --sk-grad:linear-gradient(135deg,#1a2433 0%,#0e1722 50%,#141d2e 100%);
  --sk-panel:rgba(255,255,255,.08); --sk-blur:40px; --sk-border:rgba(255,255,255,.22);
  --sk-fg:#f2f6ff; --sk-mute:#9fb0cc; --sk-accent:#7fd4ff; --sk-accent2:#c8a4ff;
  --sk-glow:rgba(127,212,255,.5); --sk-hair:rgba(255,255,255,.14); --sk-card:rgba(255,255,255,.09);
}
/* ---- NEON-NOIR ---- */
body[data-skin="neonnoir"]{
  --sk-bg:#050608; --sk-grad:radial-gradient(100% 100% at 50% 0%,#0d1410 0%,#060806 60%,#030403 100%);
  --sk-panel:rgba(10,16,12,.6); --sk-blur:14px; --sk-border:rgba(80,255,170,.18);
  --sk-fg:#d6ffe8; --sk-mute:#5f8a72; --sk-accent:#3dff9e; --sk-accent2:#ff5d7d;
  --sk-glow:rgba(61,255,158,.55); --sk-hair:rgba(80,255,170,.12); --sk-card:rgba(61,255,158,.05);
}
/* ---- VINYL LOUNGE ---- */
body[data-skin="vinyl"]{
  --sk-bg:#1a120b; --sk-grad:radial-gradient(120% 90% at 70% -10%,#3a2818 0%,#20160d 50%,#160f08 100%);
  --sk-panel:rgba(48,34,22,.62); --sk-blur:16px; --sk-border:rgba(220,170,110,.22);
  --sk-fg:#f6e8d4; --sk-mute:#b89770; --sk-accent:#e0a458; --sk-accent2:#d4734a;
  --sk-glow:rgba(224,164,88,.45); --sk-hair:rgba(220,170,110,.14); --sk-card:rgba(220,170,110,.06);
}
/* ---- CLASSIC PHOSPHOR (selectable, mirrors original) ---- */
body[data-skin="phosphor"]{
  --sk-bg:#040806; --sk-grad:linear-gradient(180deg,#06100a 0%,#040806 100%);
  --sk-panel:rgba(8,20,12,.7); --sk-blur:6px; --sk-border:rgba(110,255,170,.25);
  --sk-fg:#9dffc4; --sk-mute:#4a9268; --sk-accent:#6effaa; --sk-accent2:#aeffd0;
  --sk-glow:rgba(110,255,170,.4); --sk-hair:rgba(110,255,170,.16); --sk-card:rgba(110,255,170,.04);
}

/* ---- apply tokens when a skin is active ---- */
body[data-skin]{background:var(--sk-bg);color:var(--sk-fg);transition:background .6s,color .6s}
body[data-skin] .tn-wrap{position:relative;z-index:2}
body[data-skin] .emtac-logo{cursor:pointer}
body[data-skin] .tn-search{background:var(--sk-panel);-webkit-backdrop-filter:blur(var(--sk-blur));backdrop-filter:blur(var(--sk-blur));border:1px solid var(--sk-border);color:var(--sk-fg);border-radius:999px}
body[data-skin] .tn-search::placeholder{color:var(--sk-mute)}
body[data-skin] .tn-shelf-t{color:var(--sk-fg)}
body[data-skin] .tn-shelf-a{color:var(--sk-accent)}
body[data-skin] .cn{color:var(--sk-fg)}
body[data-skin] .cc{color:var(--sk-mute)}
body[data-skin] .cvbig,body[data-skin] .cv{border:1px solid var(--sk-border);box-shadow:0 8px 24px rgba(0,0,0,.4)}
body[data-skin] .tn-player{background:var(--sk-panel);-webkit-backdrop-filter:blur(var(--sk-blur)) saturate(1.4);backdrop-filter:blur(var(--sk-blur)) saturate(1.4);border-top:1px solid var(--sk-border);box-shadow:0 -8px 32px rgba(0,0,0,.4)}
body[data-skin] .tn-np-t{color:var(--sk-fg)}
body[data-skin] .tn-np-a{color:var(--sk-mute)}
body[data-skin] .tn-tab{color:var(--sk-mute)}
body[data-skin] .tn-tab.active{color:var(--sk-accent)}
body[data-skin] .tn-count{color:var(--sk-mute)}
body[data-skin] .tn-row:hover{background:var(--sk-card)}
body[data-skin] .tn-play{background:var(--sk-accent);color:var(--sk-bg);box-shadow:0 0 20px var(--sk-glow)}
body[data-skin] .tn-bigbtn{background:var(--sk-card);border:1px solid var(--sk-border);-webkit-backdrop-filter:blur(var(--sk-blur));backdrop-filter:blur(var(--sk-blur))}

/* ---- BACKGROUND LAYERS ---- */
#sk-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;display:none}
body[data-skin] #sk-bg{display:block}
.sk-grad{position:absolute;inset:0;background:var(--sk-grad);opacity:0;transition:opacity .8s}
.sk-aurora{position:absolute;inset:-20%;opacity:0;transition:opacity .8s;filter:blur(60px) saturate(1.3);
  background:radial-gradient(40% 50% at 20% 30%,var(--sk-glow) 0%,transparent 60%),radial-gradient(35% 45% at 80% 60%,var(--sk-accent2) 0%,transparent 55%),radial-gradient(50% 40% at 50% 90%,var(--sk-accent) 0%,transparent 60%);
  animation:skAurora 18s ease-in-out infinite alternate}
@keyframes skAurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(3%,-4%) scale(1.1)}100%{transform:translate(-3%,3%) scale(1.05)}}
.sk-art{position:absolute;inset:-10%;opacity:0;transition:opacity .8s;background-size:cover;background-position:center;filter:blur(70px) brightness(.5) saturate(1.4);transform:scale(1.2)}
.sk-vinyl{position:absolute;inset:0;opacity:0;transition:opacity .8s;display:grid;place-items:center}
.sk-vinyl .disc{width:min(90vh,90vw);height:min(90vh,90vw);border-radius:50%;background:repeating-radial-gradient(circle at center,#0a0a0a 0px,#161616 2px,#0a0a0a 4px);box-shadow:inset 0 0 120px rgba(0,0,0,.9);opacity:.18;animation:skSpin 8s linear infinite}
@keyframes skSpin{to{transform:rotate(360deg)}}
body[data-bg="glass"] .sk-grad{opacity:1}
body[data-bg="aurora"] .sk-aurora{opacity:.8}
body[data-bg="aurora"] .sk-grad{opacity:.5}
body[data-bg="art"] .sk-art{opacity:1}
body[data-bg="vinyl"] .sk-vinyl{opacity:1}
body[data-bg="vinyl"] .sk-grad{opacity:.6}

/* ---- THEME PICKER PANEL ---- */
.sk-picker{position:fixed;top:0;right:0;z-index:200;height:100vh;width:300px;background:var(--sk-bg,#0e131f);
  border-left:1px solid var(--sk-border,#333);padding:24px 22px;overflow-y:auto;transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.5)}
.sk-picker.open{transform:translateX(0)}
.sk-picker h3{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sk-mute,#888);margin:22px 0 12px;font-weight:600}
.sk-picker h3:first-child{margin-top:0}
.sk-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;cursor:pointer;margin-bottom:8px;border:1px solid transparent;transition:all .2s;font-size:13px;font-weight:500;color:var(--sk-fg,#eee)}
.sk-opt:hover{background:var(--sk-card,rgba(255,255,255,.05))}
.sk-opt.active{border-color:var(--sk-accent,#5fa8ff);background:var(--sk-card,rgba(255,255,255,.05));box-shadow:0 0 16px var(--sk-glow,rgba(95,168,255,.4))}
.sk-opt .sw{width:26px;height:26px;border-radius:8px;flex:0 0 auto;border:1px solid rgba(255,255,255,.15)}
.sk-toggle{position:fixed;top:18px;right:18px;z-index:201;width:42px;height:42px;border-radius:50%;cursor:pointer;
  background:var(--sk-panel,rgba(20,26,40,.7));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--sk-border,#333);color:var(--sk-fg,#eee);display:none;place-items:center;box-shadow:0 4px 16px rgba(0,0,0,.4)}
body[data-skin] .sk-toggle{display:grid}

/* ---- TURNTABLE (drops the needle on play, in skin mode) ---- */
.sk-turntable{position:fixed;inset:0;z-index:150;display:none;place-items:center;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sk-turntable.open{display:grid}
.sk-tt-stage{position:relative;width:min(70vh,70vw);height:min(70vh,70vw);display:grid;place-items:center}
.sk-tt-record{width:100%;height:100%;border-radius:50%;position:relative;animation:skSpin 3.2s linear infinite;
  background:repeating-radial-gradient(circle at center,#0c0c0c 0px,#1c1c1c 2px,#0a0a0a 3px,#181818 5px);
  box-shadow:0 0 0 2px rgba(255,255,255,.05),inset 0 0 80px rgba(0,0,0,.95),0 30px 80px rgba(0,0,0,.7)}
.sk-tt-record::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0%,rgba(255,255,255,.07) 8%,transparent 16%,transparent 50%,rgba(255,255,255,.05) 58%,transparent 66%)}
.sk-tt-label{position:absolute;inset:32%;border-radius:50%;overflow:hidden;background:var(--sk-accent,#5fa8ff);display:grid;place-items:center;box-shadow:inset 0 0 0 4px rgba(0,0,0,.3),0 0 30px var(--sk-glow)}
.sk-tt-label img{width:100%;height:100%;object-fit:cover}
.sk-tt-spindle{position:absolute;width:14px;height:14px;border-radius:50%;background:#0a0a0a;z-index:3;box-shadow:0 0 0 2px rgba(255,255,255,.2)}
.sk-tt-arm{position:absolute;top:-2%;right:6%;width:42%;height:42%;transform-origin:top right;transform:rotate(18deg);z-index:4}
.sk-tt-arm .base{position:absolute;top:0;right:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#3a3a3a,#1a1a1a);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.sk-tt-arm .rod{position:absolute;top:13px;right:13px;width:2px;height:78%;background:linear-gradient(#888,#444);transform-origin:top;transform:rotate(-32deg);border-radius:2px}
.sk-tt-close{position:absolute;top:24px;right:24px;width:40px;height:40px;border-radius:50%;cursor:pointer;background:var(--sk-panel);border:1px solid var(--sk-border);color:var(--sk-fg);display:grid;place-items:center;font-size:18px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sk-tt-meta{position:absolute;bottom:max(40px,8vh);text-align:center;width:100%}
.sk-tt-meta .tt-t{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:30px;margin-bottom:4px;color:var(--sk-fg)}
.sk-tt-meta .tt-a{font-size:14px;color:var(--sk-mute);letter-spacing:.04em}

/* ===== NEON VISUAL BLITZ ===== */
/* card hover: lift + neon glow ring (all skins, not just nv) */
@media (hover:hover) and (pointer:fine){
.tn-card{transition:transform .18s ease, filter .18s ease}
.tn-card:hover{transform:translateY(-4px)}
.tn-card:hover .cvbig{box-shadow:0 8px 28px rgba(0,0,0,.45), 0 0 22px var(--tn,#3dd6ff); border-color:var(--tn,#3dd6ff)}
.tn-scard{transition:transform .18s ease}
.tn-scard:hover{transform:translateY(-4px)}
.tn-scard:hover .cvbig,.tn-scard:hover .cv{box-shadow:0 8px 26px rgba(0,0,0,.45), 0 0 20px var(--tn,#3dd6ff)}
}
/* album art gentle breathe on the now-playing */
@keyframes tnBreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.06)}}
.tn-player .cvbig, .tn-np-art{animation:tnBreathe 6s ease-in-out infinite}
/* now-playing bar: subtle neon pulse */
@keyframes tnGlowPulse{0%,100%{box-shadow:0 -2px 20px rgba(61,214,255,.08)}50%{box-shadow:0 -2px 28px rgba(61,214,255,.22)}}
.tn-player{animation:tnGlowPulse 5s ease-in-out infinite}
/* genre label chips (replaces color blocks) */
.tn-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;padding:2px}
.tn-genre-chip{cursor:pointer;border:1px solid var(--e-hair);border-radius:12px;padding:16px 14px;background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01));display:flex;flex-direction:column;gap:4px;transition:all .18s ease;position:relative;overflow:hidden}
.tn-genre-chip::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--tn,#3dd6ff),transparent 60%);opacity:0;transition:opacity .18s}
.tn-genre-chip:hover{transform:translateY(-3px);border-color:var(--tn,#3dd6ff);box-shadow:0 6px 22px rgba(0,0,0,.4), 0 0 18px rgba(61,214,255,.25)}
.tn-genre-chip:hover::before{opacity:.12}
.tn-genre-chip .gname{font-weight:800;font-size:15px;letter-spacing:.02em;position:relative}
.tn-genre-chip .gcnt{font-size:10px;color:var(--e-mute);letter-spacing:.08em;text-transform:uppercase;position:relative}
/* smooth tab/content fade. pill rows bleed 16px right; they need X-overflow room for --ef fade zones */
#tn-content{animation:tnFadeIn .28s ease;overflow-x:visible!important}
@keyframes tnFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* logo neon glow + hover intensify */
.emtac-logo{transition:filter .3s ease}
.emtac-logo:hover{filter:drop-shadow(0 0 12px rgba(61,214,255,.5))}

/* logo disco mode: subtle pulse (hue-rotate driven by JS) */
@keyframes tnLogoDiscoPulse{0%,100%{transform:scale(1.02)}50%{transform:scale(1.06)}}
.emtac-logo.tn-logo-disco{animation:tnLogoDiscoPulse 1.1s ease-in-out infinite}


/* ===== ALBUM-ART CYCLER: cover -> turntable -> orb (tap to cycle) ===== */
.tn-full-art{cursor:pointer;position:relative}
.tn-full-art .tn-cy-hint{position:absolute;bottom:6px;right:8px;font-size:9px;letter-spacing:.12em;opacity:0;color:rgba(255,255,255,.65);transition:opacity .3s;pointer-events:none;z-index:8;text-transform:uppercase}
.tn-full-art:hover .tn-cy-hint{opacity:.55}

/* --- ORB (mode 2) canvas contained in the art box --- */
.tn-full-art .tn-orb{position:absolute;inset:-12%;width:124%;height:124%;z-index:6;opacity:0;pointer-events:none;transition:opacity .5s ease;display:block}
.tn-full-art .tn-orb.show{opacity:1;pointer-events:none}
.tn-full-art.tn-orbmode{overflow:visible!important;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.tn-full-art.tn-orbmode img{opacity:0!important}
/* let the orb bleed beyond the player body too */
.tn-full.orb-bleed .tn-full-body{overflow:visible}

/* ===== MOBILE: show viz + reco (relaxed gates) ===== */
@media(max-width:819px){ .tn-viz{display:block!important;height:70px} }



/* ============================================================
   TECHNICS SL-1200 — SVG device (verified geometry). Clean CSS.
   ============================================================ */
.tn-full-art.tn-devmode{overflow:hidden!important;background:#1a1c20!important;box-shadow:0 16px 50px rgba(0,0,0,.55)!important;border:none!important;outline:none!important}
.tn-full-art.tn-devmode::before,.tn-full-art.tn-devmode::after{display:none!important}
.tn-full-art.tn-devmode img{opacity:0!important;visibility:hidden!important} /* hide plain cover + its outline */
.etn-dev{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;z-index:5;pointer-events:none}
.etn-dev.show{opacity:1}
.etn-tt .tt-svg{width:100%;height:100%;display:block}

/* the record spins around the SVG center — transform-box:fill-box is the key fix */
#tt-disc{transform-box:view-box;transform-origin:200px 200px;animation:ttDiscSpin 3.6s linear infinite}
.etn-tt.paused #tt-disc{animation-play-state:paused}
@keyframes ttDiscSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* the tonearm pivots around its base (330,70 in SVG space) — only a few degrees.
   playing = needle on groove (0deg, the drawn position). paused = lift slightly OFF (outward). */
#tt-arm{transform-box:view-box;transform-origin:355px 45px;transform:rotate(-58deg);transition:transform .6s cubic-bezier(.4,1.2,.5,1)}
.etn-tt.paused #tt-arm{transform:rotate(-70deg)}

/* device wrappers must never show a border/glow */
.etn-dev,.etn-tt{border:0!important;outline:0!important;box-shadow:none!important}
.etn-dev,.etn-tt{pointer-events:none!important}
/* devmode: absolutely no shadows anywhere in the turntable render path */
.tn-full-art.tn-devmode,.tn-full-art.tn-devmode *{box-shadow:none!important;filter:none!important;-webkit-filter:none!important}
/* keep player controls contained when window is narrow */
.tn-player .tn-btn{flex:0 0 auto}
.tn-player .tn-bar{min-width:60px}
.tn-np{flex:1 1 auto;min-width:40px;overflow:hidden}
/* pinned sidebar headers (sticky within their scroll panes) */
.tn-reco-h{position:sticky;top:0;z-index:3;background:rgba(12,13,18,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:10px;padding:11px 14px;margin:0 0 12px;border:1px solid rgba(255,255,255,.09);text-align:center;letter-spacing:.24em;text-shadow:0 0 10px currentColor,0 0 22px currentColor,0 1px 2px rgba(0,0,0,.6)}
.tn-side-h{position:sticky;top:0;z-index:3;background:rgba(12,13,18,.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:10px;padding:11px 14px;margin:0 0 12px;border:1px solid rgba(255,255,255,.09);text-align:center;letter-spacing:.24em;text-shadow:0 0 10px currentColor,0 0 22px currentColor,0 1px 2px rgba(0,0,0,.6)}
/* ===== artist page ===== */
.tn-ahero{display:flex;gap:22px;align-items:flex-start;margin:6px 0 22px}
.tn-ahero .tn-ahero-art{width:172px;height:172px;border-radius:16px;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:40px;color:#fff;background:var(--cvbg);border:1px solid var(--e-hair);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.tn-ahero-art img{width:100%;height:100%;object-fit:cover}
.tn-ahero-i{min-width:0;flex:1}
.tn-ahero-name{font-size:30px;font-weight:800;letter-spacing:.02em;color:var(--e-fg);text-shadow:0 0 14px rgba(255,92,92,.35)}
.tn-ahero-meta{font-size:11px;letter-spacing:.18em;color:var(--e-mute);margin-top:5px}
.tn-ahero-bio{font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.75);margin-top:10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:640px}
.tn-ahero-bio.open{-webkit-line-clamp:unset;max-height:none}
.tn-ahero-more{font-size:10px;letter-spacing:.2em;color:var(--tn);margin-top:6px;cursor:pointer}
.tn-ahero-acts{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.tn-abtn{cursor:pointer;border:1px solid var(--tn);background:rgba(255,92,92,.12);color:#fff;font:inherit;font-size:11px;letter-spacing:.16em;padding:9px 16px;border-radius:9px;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.tn-abtn:hover{background:rgba(255,92,92,.25);box-shadow:0 0 14px rgba(255,92,92,.35)}
.tn-abtn-ghost{border-color:var(--e-hair);background:rgba(255,255,255,.04)}
.tn-simwrap{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 30px}
.tn-simchip{cursor:pointer;border:1px solid var(--e-hair);border-radius:999px;padding:8px 16px;font-size:12px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.04)}
.tn-simchip:hover{border-color:var(--tn);color:#fff;box-shadow:0 0 12px rgba(255,92,92,.3)}
@media(max-width:640px){.tn-ahero{flex-direction:column;align-items:center;text-align:center}.tn-ahero-acts{justify-content:center}}
/* ===== GLOBAL GLOW ROOM: glows must extend freely — no clipping, no neighbor overlap ===== */
.tn-shelf{padding:16px 2px 20px !important;margin:-12px 0 -14px !important}
.tn-scard:hover,.tn-card:hover,.tn-tile:hover,.tn-genre-chip:hover{position:relative;z-index:6}
.tn-reco{padding:0 14px !important}
/* ===== back nav + see-more ===== */
.tn-navback{position:fixed;top:calc(14px + var(--emtac-safe-top,0px));left:16px;z-index:60;display:none;align-items:center;gap:7px;background:rgba(11,12,17,.95);color:var(--tn,#ff5c5c);border:1.5px solid var(--tn,#ff5c5c);border-radius:999px;padding:11px 22px;font:800 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.2em;cursor:pointer;text-shadow:0 0 8px rgba(255,92,92,.7);box-shadow:0 0 30px rgba(255,92,92,.6),0 0 12px rgba(255,92,92,.55),0 6px 20px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,92,92,.25);animation:tnNavPulse 2.4s ease-in-out infinite}
@keyframes tnNavPulse{0%,100%{box-shadow:0 0 22px rgba(255,92,92,.5),0 4px 16px rgba(0,0,0,.4)}50%{box-shadow:0 0 30px rgba(255,92,92,.8),0 4px 16px rgba(0,0,0,.4)}}
.tn-navback:hover{background:rgba(255,92,92,.18)}
.tn-shelf-h{display:flex;align-items:center;justify-content:space-between}
.tn-seemore{background:none;border:0;color:var(--tn,#ff5c5c);font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;cursor:pointer;padding:4px 6px}
.tn-seemore:hover{text-shadow:0 0 10px rgba(255,92,92,.6)}
/* ===== PLAYLIST MANAGER ===== */
.tn-pladd{-webkit-tap-highlight-color:transparent;flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:none;color:var(--e-mute);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.55;transition:all .15s;margin-right:2px}
.tn-row:hover .tn-pladd{opacity:1}
.tn-pladd:hover{color:var(--tn);border-color:var(--tn);background:rgba(255,92,92,.12);box-shadow:0 0 12px rgba(255,92,92,.3)}
.tn-pl-ov{position:fixed;inset:0;z-index:1200;background:rgba(4,6,10,.72);display:flex;align-items:center;justify-content:center;padding:18px}
.tn-pl-modal{position:relative;width:min(560px,94vw);max-height:86vh;overflow-y:auto;background:linear-gradient(180deg,rgba(14,18,24,.98),rgba(7,10,14,.99));border:1px solid rgba(255,92,92,.35);border-radius:18px;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 40px rgba(255,92,92,.15);padding:20px}
.tn-pl-h{font:800 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.24em;color:var(--tn);text-shadow:0 0 12px rgba(255,92,92,.5);margin:0 0 16px;display:flex;align-items:center;justify-content:space-between}
.tn-pl-x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--e-mute);font-size:20px;cursor:pointer;line-height:1}
.tn-pl-x:hover{color:#fff}
.tn-pl-new-btn{background:rgba(255,92,92,.14);border:1px solid var(--tn);color:#fff;font:800 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;padding:7px 12px;border-radius:8px;cursor:pointer}
.tn-pl-opts{display:flex;flex-direction:column;gap:4px;margin:6px 0}
.tn-pl-opt{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;cursor:pointer;border:1px solid transparent;color:#fff}
.tn-pl-opt:hover{background:rgba(255,92,92,.10);border-color:rgba(255,92,92,.3)}
.tn-pl-opt span{flex:1;font-size:14px}
.tn-pl-opt-n{flex:0 0 auto!important;color:var(--e-mute);font-size:12px}
.tn-pl-fav{border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;margin-bottom:4px}
.tn-pl-new{color:var(--tn);border-top:1px solid rgba(255,255,255,.07);border-radius:0;margin-top:4px}
.tn-plico{width:44px;height:44px;flex:0 0 auto;border-radius:9px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;color:var(--tn);overflow:hidden;border:1px solid rgba(255,255,255,.08)}
.tn-plico img{width:100%;height:100%;object-fit:cover}
.tn-plgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.tn-plcard{cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1px solid var(--e-hair);background:rgba(255,255,255,.02);transition:all .15s}
.tn-plcard:hover{border-color:var(--tn);box-shadow:0 0 16px rgba(255,92,92,.25)}
.tn-plcard .tn-plico{width:100%;height:auto;aspect-ratio:1/1;font-size:34px}
.tn-plcard-n{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-plcard-c{font-size:10.5px;color:var(--e-mute)}
.tn-pl-dhead{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.tn-pl-iconbtn{width:76px;height:76px;font-size:34px;cursor:pointer;flex:0 0 auto}
.tn-pl-dtitle{font-size:22px;font-weight:800;color:#fff}
.tn-pl-dsub{font-size:11px;letter-spacing:.16em;color:var(--e-mute);margin-top:4px}
.tn-pl-dacts{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tn-pl-trks{display:flex;flex-direction:column;gap:2px}
.tn-pl-trk{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:8px;cursor:pointer}
.tn-pl-trk:hover{background:rgba(255,255,255,.05)}
.tn-pl-trk-n{width:22px;text-align:center;color:var(--e-mute);font-size:12px;flex:0 0 auto}
.tn-pl-trk-ti{flex:1;min-width:0}
.tn-pl-trk-t{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-pl-trk-a{font-size:11.5px;color:var(--e-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tn-pl-trk-rm{flex:0 0 auto;width:26px;height:26px;border-radius:6px;border:1px solid transparent;background:none;color:var(--e-mute);cursor:pointer;font-size:16px}
.tn-pl-trk-rm:hover{color:var(--tn);border-color:var(--tn)}
.tn-pl-iconpick{margin-top:16px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.tn-glyphgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:10px}
.tn-glyphopt{aspect-ratio:1/1;border-radius:10px;border:1px solid var(--e-hair);background:rgba(255,255,255,.03);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.tn-glyphopt:hover,.tn-glyphopt.sel{border-color:var(--tn);color:var(--tn);box-shadow:0 0 12px rgba(255,92,92,.3)}
.tn-pl-toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);z-index:1300;background:rgba(18,20,27,.96);color:#fff;border:1px solid var(--tn);border-radius:999px;padding:10px 22px;font:700 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 0 20px rgba(255,92,92,.4)}
.tn-pl-toast.show{opacity:1}
/* ===== NATIVE APP SHELL: locked viewport, single scroller, no rubber-band (wrapper-first) ===== */
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;position:fixed;inset:0;width:100%}
.tn-wrap{height:100vh;height:100dvh;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(88px + var(--emtac-safe-bottom,0px));box-sizing:border-box}
/* shelves stay inside the viewport — no covers bleeding past the right edge */
/* (.tn-shelf max-width:100% DELETED — it capped row width so edge-bleed margins only SHIFTED the box left, planting the clip line 36px inside the screen. Rows are scrollers; nothing 'bleeds'.) */
#tn-content{overflow-x:hidden}
/* ===== NEON POLISH: static coral signal-glow (GPU-cheap: box/text-shadow only) ===== */
/* home hero buttons */
.tn-bigbtn{border-color:rgba(255,92,92,.32)!important;box-shadow:0 0 20px rgba(255,92,92,.14),inset 0 1px 0 rgba(255,255,255,.05)!important;transition:box-shadow .18s,border-color .18s}
@media (hover:hover) and (pointer:fine){
.tn-bigbtn:hover{border-color:var(--tn)!important;box-shadow:0 0 30px rgba(255,92,92,.4)!important}
}
/* shelf headers glow */
.tn-shelf-t{text-shadow:0 0 14px rgba(255,92,92,.4)}
/* cards/tiles bloom on hover */
.tn-tile{box-shadow:0 3px 12px rgba(0,0,0,.45)}
@media (hover:hover) and (pointer:fine){
.tn-tile:hover{box-shadow:0 0 24px rgba(var(--nc,255,92,92),.30)!important} /* card-BOX glow removed from scard/card: it drew a rectangle around art+caption; art bloom already follows the art shape */
.tn-scard .cvbig,.tn-card .cvbig{transition:box-shadow .18s}
.tn-scard:hover .cvbig,.tn-card:hover .cvbig{box-shadow:0 0 22px rgba(255,92,92,.4)}
}
/* mini player bar: coral edge + lift */
.tn-player{border-top:1px solid rgba(255,92,92,.45)!important;box-shadow:0 -3px 26px rgba(255,92,92,.16)!important}
.tn-player .tn-play,.tn-player #tn-play{box-shadow:0 0 18px rgba(255,92,92,.55)!important}
.tn-np-t{text-shadow:0 0 10px rgba(255,92,92,.45)}
/* wordmark + tabs signal */
.tn-tab.active{text-shadow:0 0 12px rgba(255,92,92,.55)}
.tn-searchwrap::before{display:none !important}
/* ===== HEADER v4 (FINAL): home=original wordmark; drilled='Tunes-in-search + back beside ===== */
#tn-brandmark{display:none !important}
.tn-back{display:none !important}
.tn-searchwrap{display:flex !important;align-items:center;gap:10px;max-width:700px;margin:16px auto 6px !important;position:relative}
.tn-searchfield{position:relative;flex:1 1 auto;min-width:0}
.tn-searchlogo{position:absolute !important;left:12px;top:50%;transform:translateY(-50%);height:20px;max-width:110px;width:auto;object-fit:contain;object-position:left center;background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;cursor:pointer;z-index:2;filter:drop-shadow(0 0 6px rgba(255,92,92,.55))}
.tn-searchlogo:hover{filter:drop-shadow(0 0 12px rgba(255,92,92,.9)) !important}
.tn-searchwrap #tn-navback{position:static !important;order:-1;flex:0 0 auto;left:auto !important;top:auto !important;transform:none !important;margin:0 !important;animation:none !important;padding:9px 16px;display:none}
/* HOME (not drilled): original header */
body:not(.tn-drilled) .emtac-head{display:flex !important}
body:not(.tn-drilled) .tn-tabs{display:flex !important}
body:not(.tn-drilled) .tn-searchlogo{display:none !important}
body:not(.tn-drilled) .tn-searchfield .tn-search{padding-left:16px !important}
/* DRILLED: minimal */
body.tn-drilled .emtac-head{display:none !important}
body.tn-drilled .tn-tabs{display:none !important}
body.tn-drilled .tn-searchlogo{display:block !important}
body.tn-drilled .tn-searchwrap #tn-navback{display:inline-flex !important}
body.tn-drilled .tn-searchfield .tn-search{padding-left:112px !important}
/* ===== NO SCROLLBARS, EVER (scroll still works) ===== */
*{scrollbar-width:none !important;-ms-overflow-style:none !important}
*::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}
/* ===== FIX: re-anchor TAP/heart/stop to the card on desktop (900 block forced static) ===== */
@media (min-width:900px){ html:not(.etn-ios) #tn-full .tn-full-body{ position:relative !important } }
/* ===== remove the visualizer graph on mobile/touch (looks silly, adds nothing) ===== */
@media (pointer:coarse){ #tn-viz,#tn-viz-label,.tn-viz-label{ display:none !important } }