/* EmTac'Tunes - Player Plus (Batch 1) */
.etnp-sleep{
  position:absolute;
  top:calc(12px + var(--emtac-safe-top,0px));
  right:14px;
  z-index:40;
  -webkit-appearance:none; appearance:none; cursor:pointer;
  font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.04em;
  color:#d8ece1;
  background:rgba(10,16,14,.55);
  border:1px solid rgba(255,92,92,.30);
  border-radius:999px;
  padding:7px 11px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.etnp-sleep:hover{ color:#fff; border-color:rgba(255,92,92,.55); }
.etnp-sleep.on{
  color:var(--tn,#ff5c5c);
  border-color:var(--tn,#ff5c5c);
  box-shadow:0 0 12px rgba(255,92,92,.35), inset 0 0 8px rgba(255,92,92,.15);
}

/* ============================================================
   JUKEBOX NEON  - additive skin for the now-playing screen.
   Loads after the base stylesheet, so it wins without editing it.
   Colored glow uses each element's own color (currentColor) plus a
   dark halo so text stays legible on the art-tinted backdrop.
   ============================================================ */

/* text: title / artist / album / lyrics */
.tn-full [id*="title" i],   .tn-full [class*="title" i],
.tn-full [id*="name" i],
.tn-full [id*="artist" i],  .tn-full [class*="artist" i],
.tn-full [id*="album" i],   .tn-full [class*="album" i],
.tn-full [id*="lyr" i],     .tn-full [class*="lyr" i]{
  text-shadow:0 0 14px currentColor, 0 0 4px currentColor,
              0 1px 3px rgba(0,0,0,.92), 0 0 2px rgba(0,0,0,.7) !important;
}
/* time readouts */
.tn-full [id*="time" i],    .tn-full [class*="time" i],
.tn-full [id*="cur" i],     .tn-full [id*="dur" i]{
  text-shadow:0 0 9px currentColor, 0 1px 2px rgba(0,0,0,.9);
}

/* album art: glowing coral frame + bloom + depth */
.tn-full img, .tn-full #tn-fart, .tn-full .tn-art img{
  box-shadow:0 0 0 1px rgba(255,92,92,.5),
             0 0 36px rgba(255,92,92,.32),
             0 0 14px rgba(255,92,92,.25),
             0 14px 46px rgba(0,0,0,.5) !important;
  border-radius:18px;
}

/* transport controls: coral neon, intensify on hover / press */
.tn-full .tn-btn, .tn-full .tn-play,
.tn-full #tn-fshuf, .tn-full #tn-fprev, .tn-full #tn-fplay,
.tn-full #tn-fnext, .tn-full #tn-fheart, .tn-full #tn-feq, .tn-full #tn-fvol{
  filter:drop-shadow(0 0 5px rgba(255,92,92,.55));
  transition:filter .18s ease, transform .15s ease;
}
.tn-full .tn-btn:hover, .tn-full .tn-play:hover,
.tn-full #tn-fshuf:hover, .tn-full #tn-fprev:hover, .tn-full #tn-fplay:hover,
.tn-full #tn-fnext:hover, .tn-full #tn-fheart:hover, .tn-full #tn-feq:hover, .tn-full #tn-fvol:hover{
  filter:drop-shadow(0 0 11px var(--tn,#ff5c5c)) drop-shadow(0 0 3px var(--tn,#ff5c5c));
  transform:translateY(-1px);
}
.tn-full .tn-btn:active, .tn-full .tn-play:active{ transform:scale(.93); }

/* play/pause is the hero: brighter standing glow */
.tn-full .tn-play, .tn-full #tn-fplay{
  filter:drop-shadow(0 0 13px var(--tn,#ff5c5c)) drop-shadow(0 0 4px var(--tn,#ff5c5c));
}

/* seek bar + thumb */
.tn-full .tn-bar, .tn-full .tn-seek .tn-bar{ box-shadow:0 0 10px rgba(255,92,92,.4); }
.tn-full .tn-bar::-webkit-slider-thumb,
.tn-full input[type="range"]::-webkit-slider-thumb{
  box-shadow:0 0 10px var(--tn,#ff5c5c), 0 0 3px var(--tn,#ff5c5c);
}
.tn-full .tn-thumb, .tn-full .tn-bar .tn-thumb{
  box-shadow:0 0 12px var(--tn,#ff5c5c), 0 0 4px var(--tn,#ff5c5c);
}

/* visualizer / waveform: coral bloom */
.tn-full canvas,
.tn-full [id*="viz" i],  .tn-full [class*="viz" i],
.tn-full [id*="wave" i], .tn-full [class*="wave" i],
.tn-full [id*="spect" i],.tn-full [class*="spect" i]{
  filter:drop-shadow(0 0 6px rgba(255,92,92,.5)) drop-shadow(0 0 2px rgba(255,92,92,.6));
}

/* LEGIBILITY PASS v1 */
.tn-full .tn-full-lab{
  color:#7ef0ad !important;
  text-shadow:0 0 10px rgba(94,231,154,.65),0 0 3px rgba(94,231,154,.5),0 1px 2px rgba(0,0,0,.85) !important;
  opacity:1 !important;
}
.tn-full .tn-full-t{
  color:#eef4f8 !important;
  text-shadow:0 0 14px rgba(180,210,255,.45),0 0 5px rgba(255,255,255,.4),0 1px 4px rgba(0,0,0,.92),0 0 2px rgba(0,0,0,.7) !important;
}
.tn-full .tn-full-a{
  color:#ff7a7a !important;
  text-shadow:0 0 14px rgba(255,92,92,.7),0 0 4px rgba(255,92,92,.6),0 1px 3px rgba(0,0,0,.9) !important;
}
.tn-full .tn-full-al{
  color:#cda6ff !important; font-style:italic;
  text-shadow:0 0 12px rgba(200,155,255,.6),0 0 3px rgba(200,155,255,.5),0 1px 3px rgba(0,0,0,.9) !important;
}
.tn-full .tn-full-seek .tn-time{
  color:#6fe9a6 !important;
  text-shadow:0 0 9px rgba(94,231,154,.6),0 1px 2px rgba(0,0,0,.85) !important;
}
.tn-full .tn-lyrics .ly-none{
  color:#b8c6d2 !important;
  text-shadow:0 0 8px rgba(180,200,220,.35),0 1px 2px rgba(0,0,0,.8) !important;
}


/* HOTFIX 1 */
/* hide Web Audio features (EQ + volume) on iOS/iPadOS where they do not work */
html.etn-ios .tn-ax{display:none !important;}
/* volume slider (replaces the rotary knob) */
.tn-vol{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.tn-vol-i{color:var(--tn,#ff5c5c);flex:0 0 auto;filter:drop-shadow(0 0 4px rgba(255,92,92,.5))}
.tn-vol-bar{-webkit-appearance:none;appearance:none;width:84px;height:4px;border-radius:2px;background:var(--e-hair,rgba(255,255,255,.12));outline:none;cursor:pointer}
.tn-vol-bar::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--tn,#ff5c5c);cursor:pointer;box-shadow:0 0 8px rgba(255,92,92,.6),0 0 2px rgba(255,92,92,.85)}
.tn-vol-bar::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--tn,#ff5c5c);cursor:pointer;box-shadow:0 0 8px rgba(255,92,92,.6)}
.tn-vol-v{font-size:9px;color:var(--e-mute,#5f7184);font-variant-numeric:tabular-nums;min-width:22px;text-align:right}
.tn-full .tn-vol-bar{width:104px;height:5px}
.tn-full .tn-vol-bar::-webkit-slider-thumb{width:15px;height:15px}
/* STOP button on the full now-playing top bar */
.tn-full-topr{display:flex;align-items:center;gap:8px}
.tn-full .tn-fstop{color:#ff7a7a}
.tn-full .tn-fstop:hover{color:#fff;border-color:#ff7a7a;box-shadow:0 0 12px rgba(255,92,92,.4)}
@media(max-width:640px){.tn-full .tn-vol-bar{width:84px}}


/* HOTFIX 2 */
/* NOW PLAYING: truly centered in the bar + a little bigger */
.tn-full .tn-full-lab{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;white-space:nowrap}
/* collapse the lyrics area when there is nothing to show */
.tn-lyrics:empty{flex:0 0 auto;min-height:0;margin:0;padding:0}
/* sleep-timer moon: off the top-bar buttons, parked bottom-right */
.etnp-sleep{top:auto;bottom:calc(16px + var(--emtac-safe-bottom,0px));right:16px}


/* HOTFIX 3 */
/* visualizer style label flash */
.tn-viz-label{position:absolute;left:50%;transform:translateX(-50%);margin-top:4px;font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.28em;color:var(--tn,#ff5c5c);text-shadow:0 0 10px rgba(255,92,92,.7),0 0 3px rgba(255,92,92,.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:5}
.tn-viz-label.show{opacity:1}
.tn-full .tn-viz{cursor:pointer}

/* ambient art kaleidoscope - pure CSS, iOS-safe, default everywhere */
.tn-kaleido{position:absolute;inset:0;z-index:0;pointer-events:none}
.tn-kaleido::after{content:"";position:absolute;inset:0;border-radius:50%;background-image:var(--kart);background-size:cover;background-position:center;filter:blur(50px) saturate(1.8) hue-rotate(180deg);opacity:.55;mix-blend-mode:overlay;animation:etnKaleidoSpin 64s linear infinite reverse}
@keyframes etnKaleidoSpin{from{transform:rotate(0deg) scale(1.1)}to{transform:rotate(360deg) scale(1.1)}}
@keyframes etnKaleidoBreathe{0%,100%{filter:blur(70px) saturate(1.5) contrast(1.1)}50%{filter:blur(82px) saturate(2) contrast(1.25)}}
@keyframes etnKaleidoHue{from{filter:blur(70px) saturate(1.6) contrast(1.15) hue-rotate(0deg)}to{filter:blur(70px) saturate(1.6) contrast(1.15) hue-rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.tn-kaleido,.tn-kaleido::after{animation:none}}

/* tap-tempo chip */
.tn-tap{position:absolute;top:auto;bottom:calc(16px + var(--emtac-safe-bottom,0px));left:16px;z-index:40;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;
  color:#d8ece1;background:rgba(10,16,14,.55);
  border:1px solid rgba(255,92,92,.3);border-radius:999px;
  padding:8px 13px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:color .2s,border-color .2s,box-shadow .2s,background .2s;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.tn-tap:hover{color:#fff;border-color:rgba(255,92,92,.6)}
.tn-tap.armed{color:var(--tn,#ff5c5c);border-color:var(--tn,#ff5c5c);box-shadow:0 0 14px rgba(255,92,92,.45),inset 0 0 8px rgba(255,92,92,.18)}
.tn-tap.on{color:var(--emtac-green,#5ee79a);border-color:var(--emtac-green,#5ee79a);background:rgba(0,30,15,.55);box-shadow:0 0 14px rgba(94,231,154,.45),inset 0 0 8px rgba(94,231,154,.18)}

/* when tempo is on, the art pulses; the kaleidoscope picks up the beat too */
.tn-full.tempo .tn-full-art{animation:etnPulse var(--tempo,500ms) ease-in-out infinite;transform-origin:center;will-change:transform,filter}
.tn-full.tempo .tn-kaleido{animation:etnSymbSpin 48s linear infinite}
@keyframes etnPulse{0%,100%{transform:scale(1);filter:none}50%{transform:scale(1.045);filter:drop-shadow(0 0 18px rgba(255,92,92,.45))}}
@keyframes etnPulseKal{0%,100%{opacity:.5}50%{opacity:.85}}
@media(prefers-reduced-motion:reduce){.tn-full.tempo .tn-full-art,.tn-full.tempo .tn-kaleido{animation:none}}

/* mobile: brighter kaleidoscope (no audio viz here so it carries more weight) */
@media(max-width:640px){.tn-kaleido{opacity:.62}}


/* HOTFIX 4 */
/* Generations: SVG cover boxes (replaces the flat gradient blocks) */
.tn-gencv{padding:0;overflow:hidden;background:#0a0c12;display:block}
.tn-gencv img{width:100%;height:100%;object-fit:cover;display:block}
.tn-card:hover .tn-gencv,.tn-scard:hover .tn-gencv{box-shadow:0 0 16px rgba(255,92,92,.3)}

/* Generations tab tiles: keep the chrome (count badge + label), drop the flat gradient */
.tn-gentile{position:relative;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.7)}
.tn-gentile::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%);border-radius:inherit;pointer-events:none}
.tn-gentile .tcnt{position:relative;z-index:1;background:rgba(0,0,0,.55);padding:3px 7px;border-radius:6px;backdrop-filter:blur(4px)}
.tn-gentile{font-weight:900;letter-spacing:.04em}


/* HOTFIX 8 - center now-playing */
/* center the now-playing stack vertically so the art + meta + controls
   sit in the middle of the screen instead of pinned to the top */
.tn-full .tn-full-body{
  justify-content:center;
  padding-top:60px;
  padding-bottom:40px;
}
/* keep lyrics from stretching the layout when present */
.tn-full .tn-lyrics{flex:0 1 auto;max-height:200px}
.tn-full .tn-lyrics:not(:empty){margin-top:14px}

/* HOTFIX 11 */
/* now-playing = scaled-up MusicPill: a framed glass window floating over the
   kaleidoscope page. Mirrors Player.swift (coral edge, glass, wordmark). */

/* dim the ambient layers so the window reads as a discrete floating object */
.tn-full .tn-kaleido{opacity:.34 !important}
.tn-full .tn-full-bg{filter:blur(54px) brightness(.34) saturate(1.2) !important}

/* ---------- THE WINDOW ---------- */
.tn-full .tn-full-body{
  flex:0 1 auto;
  margin:auto;
  width:min(92vw,600px);
  max-width:600px;
  padding:26px 30px 26px;
  overflow:visible;
  background:linear-gradient(180deg,rgba(9,12,18,.74),rgba(5,7,11,.84));
  border:1px solid rgba(255,92,92,.5);
  border-radius:26px;
  box-shadow:
    0 28px 80px rgba(0,0,0,.62),
    0 10px 26px rgba(0,0,0,.5),
    0 0 30px rgba(255,92,92,.16),
    inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(24px) saturate(1.15);
  backdrop-filter:blur(24px) saturate(1.15);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* pill wordmark header inside the window (music-note + EMTAC'TUNES) */
.tn-full .tn-full-body::before{
  content:"\266A  EMTAC'TUNES";
  display:block;
  font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.22em;
  color:#ff7a7a;
  text-shadow:0 0 10px rgba(255,92,92,.55),0 1px 2px rgba(0,0,0,.7);
  margin-bottom:18px;
  text-align:center;
}

/* ---------- proportions ---------- */
.tn-full .tn-full-art{
  width:min(46vw,230px);
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,92,92,.4),0 14px 40px rgba(0,0,0,.55);
}
.tn-full .tn-full-meta{margin:16px 0 2px}
.tn-full .tn-full-seek{margin:14px 0 6px}
.tn-full .tn-full-ctrls{margin:6px 0 2px}

/* ---------- crisp uniform typography ---------- */
.tn-full .tn-full-lab{color:#7ef0ad;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.tn-full .tn-full-t{color:#fff;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.85)}
.tn-full .tn-full-a{color:#ff8a8a;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.tn-full .tn-full-al{color:#d4b8ff;font-style:italic;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.tn-full .tn-full-seek .tn-time{color:#7ef0ad;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.tn-full .tn-lyrics{color:#cdd9e1;max-height:130px;overflow:auto;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.tn-full .tn-lyrics:empty{display:none}

/* ---------- EQ recolored into the coral family ---------- */
.tn-full .tn-eqbtn{color:#ff8a8a !important;border-color:rgba(255,92,92,.45) !important}
.tn-full .tn-eqbtn:hover,.tn-full .tn-eqbtn.on{color:#fff !important;background:rgba(255,92,92,.18) !important;border-color:#ff7a7a !important}

/* ---------- toolbar controls (close / stop / heart) ---------- */
.tn-full .tn-full-top{z-index:5;padding-top:calc(16px + var(--emtac-safe-top,0px))}
.tn-full .tn-fbtn{
  width:38px;height:38px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(10,14,20,.5);border:1px solid rgba(255,255,255,.12);color:#d8ece1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .15s;
}
.tn-full .tn-fbtn:hover{border-color:rgba(255,255,255,.28);color:#fff}
.tn-full .tn-fstop:hover{border-color:#ff7a7a;color:#ff7a7a;box-shadow:0 0 12px rgba(255,92,92,.4)}

/* ============ DESKTOP / MAC (non-iOS, wide): rail beside + viz below ============ */
@media(min-width:1200px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{
    top:50%;transform:translateY(-50%);
    right:calc(50% + 338px);left:auto;
    width:260px;height:auto;max-height:72vh;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-viz{
    position:absolute;top:calc(100% + 22px);left:0;
    width:100%;height:96px;margin:0;
    filter:drop-shadow(0 0 10px rgba(255,92,92,.32));
  }
}
/* below 1200 there is no room for the rail or an outside viz */
@media(max-width:1199px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{display:none}
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-viz{display:none}
}

/* ============ MOBILE (phone): framed sheet, no rail/viz ============ */
@media(max-width:700px){
  .tn-full .tn-full-body{
    width:min(94vw,440px);
    padding:22px 20px 22px;
    margin-top:max(4vh,var(--emtac-safe-top,0px));
    margin-bottom:max(3vh,var(--emtac-safe-bottom,0px));
  }
  .tn-full .tn-full-art{width:min(64vw,220px)}
}

/* HOTFIX 12 */
/* final polish: wider window, tighter+slimmer reco rail, compact rows */

/* a little wider (phones already cap at 94vw, so no phone impact) */
@media(min-width:701px){
  .tn-full .tn-full-body{width:min(94vw,660px);max-width:660px}
}

/* rail sits in closer beside the wider window and is a touch narrower */
@media(min-width:1200px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{right:calc(50% + 348px);width:230px}
}

/* more compact "More Like This" list */
.tn-full .tn-reco-h{margin-bottom:10px;font-size:10px}
.tn-full .tn-reco-row{padding:5px 6px;gap:9px}
.tn-full .tn-reco-row .cv{width:40px;height:40px;font-size:12px}
.tn-full .tn-reco-t{font-size:12px}
.tn-full .tn-reco-a{font-size:10.5px}

/* HOTFIX 13 */
/* composition pass: window up, viz pinned bottom, reco as glass sidebar */

/* lift the window into the upper third (phones keep flow centering) */
@media(min-width:701px){
  .tn-full .tn-full-body{
    position:absolute;top:12vh;left:0;right:0;
    margin-left:auto;margin-right:auto;
  }
}

/* desktop/Mac: pin the visualizer to the bottom as a stage strip */
@media(min-width:1200px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-viz{
    position:fixed;left:0;right:0;margin:0 auto;
    top:auto;bottom:5vh;
    width:min(94vw,660px);height:96px;
  }
}

/* desktop/Mac: More Like This becomes a frosted glass sidebar */
@media(min-width:1200px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{
    top:12vh;transform:none;max-height:76vh;
    padding:16px 12px;
    background:linear-gradient(180deg,rgba(9,12,18,.6),rgba(5,7,11,.72));
    border:1px solid rgba(255,92,92,.32);
    border-radius:20px;
    -webkit-backdrop-filter:blur(20px) saturate(1.1);
    backdrop-filter:blur(20px) saturate(1.1);
    box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 24px rgba(255,92,92,.1);
  }
}

/* tile-style rows inside the sidebar */
.tn-full .tn-reco-row{border-radius:10px;background:rgba(255,255,255,.02);border:1px solid transparent}
.tn-full .tn-reco-row:hover{background:rgba(255,92,92,.1);border-color:rgba(255,92,92,.28)}
.tn-full .tn-reco-h{padding-left:4px}

/* HOTFIX 14 */
/* viz reparented to #tn-full: pin it to the screen bottom as a stage strip */
@media(min-width:1200px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-viz{
    position:absolute;left:0;right:0;margin:0 auto;
    top:auto;bottom:5vh;
    width:min(94vw,660px);height:96px;
    z-index:2;
  }
}

/* HOTFIX 15 */
/* viz now lives in-flow inside the window (after the controls): render it as
   a strip at the base of the window. Overrides the earlier absolute/fixed. */
@media(min-width:1200px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-viz{
    position:static;
    inset:auto;
    transform:none;
    margin:16px auto 2px;
    width:100%;height:82px;
    z-index:auto;
    filter:drop-shadow(0 0 8px rgba(255,92,92,.28));
  }
}

/* large displays only: nudge the player off-center to the right so it
   balances against the left sidebar (window is absolute + margin-auto
   centered; shifting its left edge re-centers it slightly right) */
@media(min-width:1200px){
  .tn-full .tn-full-body{left:8vw}
}

/* HOTFIX 16 */
/* NOW PLAYING -> bigger neon-green sign, centered over the player */
.tn-full .tn-full-lab{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  margin-right:-.45em;            /* compensate trailing letter-spacing so it truly centers */
  font-size:20px;
  letter-spacing:.45em;
  font-weight:700;
  color:#bafad2;
  text-shadow:
    0 0 5px rgba(94,231,154,.95),
    0 0 14px rgba(94,231,154,.65),
    0 0 30px rgba(94,231,154,.4),
    0 1px 3px rgba(0,0,0,.5);
}

/* large displays: the player is nudged right ~4vw, so center the sign there */
@media(min-width:1200px){
  .tn-full .tn-full-lab{left:calc(50% + 4vw)}
}
/* HOTFIX 17 */
/* TAP parked in the window's upper-left corner */
.tn-full .tn-tap-inwin{
  position:absolute;
  top:14px;left:14px;
  right:auto;bottom:auto;
  margin:0;
  z-index:5;
}
/* Create Station pill */
.tn-full .tn-station-btn{
  display:block;
  margin:14px auto 2px;
  padding:9px 22px;
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.18em;
  color:#ff8a8a;
  background:rgba(255,92,92,.08);
  border:1px solid rgba(255,92,92,.5);
  border-radius:999px;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  transition:background .15s,color .15s,box-shadow .15s,border-color .15s;
}
.tn-full .tn-station-btn:hover{
  background:rgba(255,92,92,.18);
  color:#ffd2d2;
  border-color:rgba(255,92,92,.85);
  box-shadow:0 0 16px rgba(255,92,92,.35);
}
.tn-full .tn-station-btn.on{
  color:#bafad2;
  border-color:rgba(94,231,154,.7);
  background:rgba(94,231,154,.12);
  box-shadow:0 0 16px rgba(94,231,154,.35);
}

/* HOTFIX 18 */
/* ===== mobile sizing + rotate ===== */

/* PORTRAIT PHONES: bigger player, vertically centered, fills the screen.
   Album art is capped by both width and height so rotate never overflows it. */
@media (max-width:700px){
  .tn-full .tn-full-body{
    width:min(96vw,540px);
    margin-top:auto;
    margin-bottom:auto;
  }
  .tn-full #tn-fart{
    width:min(78vw,50vh,400px) !important;
    height:min(78vw,50vh,400px) !important;
  }
  .tn-full #tn-ft{font-size:25px}
  .tn-full #tn-fa{font-size:16px}
  .tn-full #tn-falbum{font-size:13px}
}

/* LANDSCAPE / SHORT-HEIGHT PHONES: shrink to fit the short height, scroll if
   needed. Overrides the wider-screen top offset so nothing clips on rotate. */
@media (max-height:520px) and (max-width:1100px){
  .tn-full .tn-full-body{
    top:2vh;
    width:min(90vw,620px);
    max-height:95vh;
    overflow-y:auto;
    padding-top:calc(10px + var(--emtac-safe-top,0px));
    padding-bottom:14px;
  }
  .tn-full #tn-fart{
    width:min(32vh,40vw,230px) !important;
    height:min(32vh,40vw,230px) !important;
  }
}

/* HOTFIX 19 */
/* ===== livelier kaleidoscope + tap-tempo pulse ===== */

/* the ambient layer: a soft, masked frame; motion lives on the pseudos */
.tn-full .tn-kaleido{
  position:absolute;inset:-10%;z-index:0;
  overflow:hidden;
  background:none;
  opacity:.6;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(125% 125% at 50% 45%,#000 52%,transparent 100%);
          mask-image:radial-gradient(125% 125% at 50% 45%,#000 52%,transparent 100%);
}
/* two mirrored, rotating, screen-blended copies of the cover -> kaleidoscope */
.tn-full .tn-kaleido::before,
.tn-full .tn-kaleido::after{
  content:"";position:absolute;inset:-30%;
  background-image:var(--kart);
  background-size:cover;background-position:center;
  mix-blend-mode:screen;
  will-change:transform;
}
.tn-full .tn-kaleido::before{
  filter:saturate(1.5) blur(3px);
  opacity:.78;
  animation:tn-kal-spin 16s linear infinite;
}
.tn-full .tn-kaleido::after{
  filter:saturate(1.35) hue-rotate(60deg) blur(9px);
  opacity:.52;
  transform:scaleX(-1);
  animation:tn-kal-spin2 24s linear infinite;
}
@keyframes tn-kal-spin{
  0%{transform:rotate(0deg) scale(1.5)}
  50%{transform:rotate(180deg) scale(1.85)}
  100%{transform:rotate(360deg) scale(1.5)}
}
@keyframes tn-kal-spin2{
  0%{transform:scaleX(-1) rotate(0deg) scale(1.7)}
  100%{transform:scaleX(-1) rotate(-360deg) scale(1.7)}
}

/* TAP tempo: pulse the scene + the album art to the tapped beat */
.tn-full.tempo .tn-kaleido{
  animation:tn-kal-beat var(--tempo,500ms) ease-in-out infinite;
}
@keyframes tn-kal-beat{
  0%,100%{opacity:.5}
  50%{opacity:.9}
}
.tn-full.tempo #tn-fart{
  animation:tn-art-beat var(--tempo,500ms) ease-in-out infinite;
}
@keyframes tn-art-beat{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}

/* HOTFIX 20 */
/* soften the kaleidoscope: large scale + heavy blur so no hard image edges */
.tn-full .tn-kaleido{
  -webkit-mask-image:radial-gradient(140% 140% at 50% 42%,#000 34%,transparent 100%);
          mask-image:radial-gradient(140% 140% at 50% 42%,#000 34%,transparent 100%);
  opacity:.62;
}
.tn-full .tn-kaleido::before{
  filter:saturate(1.4) blur(22px);
  opacity:.6;
}
.tn-full .tn-kaleido::after{
  filter:saturate(1.25) hue-rotate(60deg) blur(36px);
  opacity:.4;
}
@keyframes tn-kal-spin{
  0%{transform:rotate(0deg) scale(2.8)}
  50%{transform:rotate(170deg) scale(3.2)}
  100%{transform:rotate(360deg) scale(2.8)}
}
@keyframes tn-kal-spin2{
  0%{transform:scaleX(-1) rotate(0deg) scale(3)}
  100%{transform:scaleX(-1) rotate(-360deg) scale(3)}
}

/* HOTFIX 21 */
/* the hard diagonal lines were .tn-full::before painting the art-derived
   angled gradient (--npg). Replace it with a smooth radial vignette so there
   is no angle and therefore no banding. */
.tn-full::before{
  background:radial-gradient(135% 115% at 50% 36%,rgba(0,0,0,0) 42%,rgba(4,6,10,.55) 100%) !important;
  opacity:.62 !important;
}

/* HOTFIX 22 */
/* the diagonal lines were the .tn-full base background (theme/page) showing
   through, not the art gradient. Smooth opaque backdrop; lift the kaleidoscope
   so the art swirl carries the color. */
.tn-full{background:radial-gradient(125% 95% at 50% 28%,#0e1519 0%,#070b0f 78%) !important}
.tn-full .tn-kaleido{opacity:.8 !important}
.tn-full .tn-kaleido::before{opacity:.74 !important}
.tn-full .tn-kaleido::after{opacity:.52 !important}

/* HOTFIX 23 */
/* the hard rectangle lines were the rotating album-art SQUARE (the kaleidoscope
   layers). Remove them entirely. Per-song color stays via the blurred, drifting
   backdrop (#tn-fbg), which is cover-sized and never shows an edge. */
.tn-full .tn-kaleido::before,
.tn-full .tn-kaleido::after{display:none !important}
.tn-full .tn-kaleido{animation:none !important;background:none !important}
.tn-full .tn-full-bg{filter:blur(52px) brightness(.5) saturate(1.4) !important}

/* HOTFIX 24 */
/* revive the color swirl, but oversize the layers to 150vmax (> any screen
   diagonal) so the rotating square's edges never enter the viewport. Rotation
   only, no scale; the blur caches so spinning stays cheap. */
.tn-full .tn-kaleido{display:block !important;opacity:.72 !important;background:none !important}
.tn-full .tn-kaleido::before,
.tn-full .tn-kaleido::after{
  content:"" !important;display:block !important;
  position:absolute !important;top:50% !important;left:50% !important;
  width:150vmax !important;height:150vmax !important;margin:0 !important;
  background-image:var(--kart) !important;background-size:cover !important;background-position:center !important;
  mix-blend-mode:screen !important;will-change:transform;
}
.tn-full .tn-kaleido::before{
  filter:saturate(1.5) blur(24px) !important;opacity:.7 !important;
  animation:tn-kal-bigA 30s linear infinite !important;
}
.tn-full .tn-kaleido::after{
  filter:saturate(1.3) hue-rotate(55deg) blur(40px) !important;opacity:.5 !important;
  animation:tn-kal-bigB 44s linear infinite !important;
}
@keyframes tn-kal-bigA{
  0%{transform:translate(-50%,-50%) rotate(0deg)}
  100%{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes tn-kal-bigB{
  0%{transform:translate(-50%,-50%) scaleX(-1) rotate(0deg)}
  100%{transform:translate(-50%,-50%) scaleX(-1) rotate(-360deg)}
}

/* HOTFIX 25 */
/* responsive scaling on large screens: the window + art grow with the viewport
   (fluid) instead of being pinned to a fixed 660px cap. */
@media (min-width:1200px){
  .tn-full .tn-full-body{ width:clamp(660px, 40vw, 820px) !important; max-width:none !important; }
  .tn-full #tn-fart{ width:clamp(290px, 22vw, 400px) !important; height:clamp(290px, 22vw, 400px) !important; }
}

/* HOTFIX 26 */
/* show the full layout on laptops + iPad-landscape (>=1024), not just >=1200;
   only phone-width viewports get the stripped single column. The rail offset
   and widths scale with the viewport so nothing slides off-screen and the
   ultra-wide look is preserved. */
@media (min-width:1024px){
  .tn-full .tn-full-body{
    position:absolute !important;
    top:12vh !important;
    left:8vw !important; right:0 !important;
    margin-left:auto !important; margin-right:auto !important;
    width:clamp(620px, 44vw, 820px) !important;
    max-width:none !important;
  }
  .tn-full #tn-fart{
    width:clamp(280px, 22vw, 400px) !important;
    height:clamp(280px, 22vw, 400px) !important;
  }
  .tn-full .tn-full-lab{ left:calc(50% + 4vw) !important; }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{
    display:block !important;
    position:absolute !important;
    top:12vh !important;
    left:auto !important;
    right:calc(50% + clamp(300px, 18vw, 360px)) !important;
    width:clamp(200px, 13vw, 240px) !important;
    max-height:76vh !important;
    overflow-y:auto !important;
    padding:16px 12px !important;
    background:linear-gradient(180deg,rgba(9,12,18,.6),rgba(5,7,11,.72)) !important;
    border:1px solid rgba(255,92,92,.32) !important;
    border-radius:20px !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.1) !important;
    backdrop-filter:blur(20px) saturate(1.1) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 24px rgba(255,92,92,.1) !important;
  }
}

/* HOTFIX 27 */
/* wider, auto-sizing More Like This rail (titles were truncating) + a generous
   max so the JS matcher can size it to the (taller) player window. */
@media (min-width:1024px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{
    width:clamp(206px, 20vw, 320px) !important;
    max-height:86vh !important;
  }
}

/* HOTFIX 28 */
/* NOW PLAYING -> clickable neon broadcast sign: smaller, more realistic neon
   (bright core + colored bloom + faint buzz). Colors come from --sign-* vars
   set per sign by the add-on JS. */
.tn-full .tn-full-lab{
  font-size:16px !important;
  letter-spacing:.40em !important;
  font-weight:700 !important;
  color:var(--sign-txt,#d9ffe9) !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.95),
    0 0 4px var(--sign-glow,#36ff9e),
    0 0 9px var(--sign-glow,#36ff9e),
    0 0 20px var(--sign-glow,#36ff9e),
    0 0 38px var(--sign-glow,#36ff9e) !important;
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:color .25s ease, text-shadow .25s ease;
  animation:tn-neon-buzz 8s ease-in-out infinite;
}
@keyframes tn-neon-buzz{
  0%,90%,100%{opacity:1}
  92%{opacity:.74}
  94%{opacity:1}
  96%{opacity:.88}
  98%{opacity:1}
}

/* HOTFIX 29 */
/* ===== re-center the player and tighten widths so 2 rails fit on every screen ===== */
@media (min-width:1024px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-full-body{
    width:clamp(460px, 32vw, 720px) !important;
    left:0 !important; right:0 !important;
    margin-left:auto !important; margin-right:auto !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full #tn-fart{
    width:clamp(260px, 19vw, 360px) !important;
    height:clamp(260px, 19vw, 360px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-full-lab{ left:50% !important; }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{
    left:auto !important;
    right:calc(50% + clamp(246px, 17vw, 376px)) !important;
    width:clamp(200px, 14vw, 260px) !important;
  }
}

/* ===== right sidebar: UP NEXT (top) + TOP PLAYLISTS (bottom) ===== */
.tn-upnext, .tn-toppl{ display:none; }
@media (min-width:1024px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-toppl{
    display:block !important;
    position:absolute !important;
    z-index:2;
    top:12vh;
    left:calc(50% + clamp(246px, 17vw, 376px)) !important;
    width:clamp(200px, 14vw, 260px) !important;
    overflow-y:auto;
    padding:14px 12px 12px !important;
    background:linear-gradient(180deg,rgba(9,12,18,.6),rgba(5,7,11,.72)) !important;
    border:1px solid rgba(255,92,92,.32) !important;
    border-radius:20px !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.1);
    backdrop-filter:blur(20px) saturate(1.1);
    box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 24px rgba(255,92,92,.1);
    box-sizing:border-box;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-toppl{
    border-color:rgba(94,231,154,.28) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 22px rgba(94,231,154,.08);
  }
}
.tn-side-h{ font-size:11px;letter-spacing:.22em;font-weight:700;color:#ff8a8a;text-shadow:0 0 9px rgba(255,92,92,.5),0 1px 2px rgba(0,0,0,.6);margin:0 0 12px;padding-left:2px; }
.tn-toppl .tn-side-h{ color:#9eecbd;text-shadow:0 0 9px rgba(94,231,154,.45),0 1px 2px rgba(0,0,0,.6); }
.tn-side-row{ display:flex;align-items:center;gap:11px;padding:7px 8px;border-radius:9px;cursor:pointer;border:1px solid transparent;margin-bottom:2px; }
.tn-side-row:hover{ background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08); }
.tn-toppl .tn-side-row:hover{ border-color:rgba(94,231,154,.4); }
.tn-side-cv{ width:42px;height:42px;border-radius:7px;flex:0 0 auto;overflow:hidden;background:var(--cvbg,#14181f);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-weight:800;font-size:14px; }
.tn-side-cv img{ width:100%;height:100%;object-fit:cover;display:block; }
.tn-side-cv-fb{ background:linear-gradient(135deg,rgba(255,92,92,.35),rgba(94,231,154,.18)); }
.tn-side-ti{ min-width:0;flex:1; }
.tn-side-t{ font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.85); }
.tn-side-a{ font-size:11.5px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;text-shadow:0 1px 3px rgba(0,0,0,.85); }
.tn-side-empty{ font-size:11px;color:rgba(255,255,255,.55);padding:10px 4px;line-height:1.5; }

/* ===== mobile (<1024): three swipeable panes inside the player ===== */
@media (max-width:1023px){
  .tn-full .tn-reco, .tn-full .tn-upnext, .tn-full .tn-toppl{
    display:none;position:absolute;left:0;right:0;top:54px;bottom:84px;margin:0 auto;width:min(94vw,560px);
    padding:14px 14px 18px;overflow-y:auto;
    background:linear-gradient(180deg,rgba(9,12,18,.78),rgba(5,7,11,.85));
    border:1px solid rgba(255,255,255,.07);border-radius:18px;z-index:3;box-sizing:border-box;
  }
  .tn-full[data-pane="reco"] .tn-reco{ display:block !important; }
  .tn-full[data-pane="up"]   .tn-upnext{ display:block !important; }
  .tn-full[data-pane="up"]   .tn-toppl{ display:block !important;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;margin-top:12px;border-color:rgba(94,231,154,.28); }
  .tn-full[data-pane="now"] .tn-reco, .tn-full[data-pane="now"] .tn-upnext, .tn-full[data-pane="now"] .tn-toppl{ display:none !important; }
  .tn-chev{
    display:none;position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:64px;background:rgba(10,14,20,.55);border:1px solid rgba(255,255,255,.12);
    color:#fff;font-size:30px;line-height:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    cursor:pointer;z-index:4;-webkit-tap-highlight-color:transparent;padding:0;
  }
  .tn-chev-l{ left:6px;border-radius:0 12px 12px 0; }
  .tn-chev-r{ right:6px;border-radius:12px 0 0 12px; }
  .tn-full.open .tn-chev{ display:flex;align-items:center;justify-content:center; }
}
@media (min-width:1024px){ .tn-chev{ display:none !important; } }

/* HOTFIX 30 */
/* ===== bigger, viewport-scaling player + rails + gaps ===== */
@media (min-width:1024px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-full-body{
    width:clamp(520px, 38vw, 980px) !important;
    left:0 !important; right:0 !important;
    margin-left:auto !important; margin-right:auto !important;
    max-width:none !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full #tn-fart{
    width:clamp(300px, 22vw, 460px) !important;
    height:clamp(300px, 22vw, 460px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-full-lab{ left:50% !important; }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{
    left:auto !important;
    right:calc(50% + clamp(260px, 19vw, 490px) + clamp(16px, 1.4vw, 32px)) !important;
    width:clamp(220px, 16vw, 320px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-toppl{
    left:calc(50% + clamp(260px, 19vw, 490px) + clamp(16px, 1.4vw, 32px)) !important;
    width:clamp(220px, 16vw, 320px) !important;
  }
}

/* ===== command palette ===== */
.tn-cmd-backdrop{ position:fixed;inset:0;z-index:1000;background:rgba(4,6,10,.55);-webkit-backdrop-filter:blur(8px) saturate(.9);backdrop-filter:blur(8px) saturate(.9);display:none;align-items:flex-start;justify-content:center;padding-top:14vh; }
.tn-cmd-backdrop.open{ display:flex; }
.tn-cmd{ width:min(640px,92vw);background:linear-gradient(180deg,rgba(10,14,20,.92),rgba(5,7,11,.96));border:1px solid rgba(255,92,92,.45);border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 36px rgba(255,92,92,.18);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;overflow:hidden;font-family:inherit; }
.tn-cmd-input-wrap{ position:relative; }
.tn-cmd-input{ width:100%;box-sizing:border-box;background:transparent;border:0;outline:0;color:#fff;font-family:inherit;font-size:18px;padding:18px 56px 18px 52px;letter-spacing:.02em; }
.tn-cmd-input::placeholder{ color:rgba(255,255,255,.4); }
.tn-cmd-glyph{ position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#ff8a8a;font-size:16px;pointer-events:none; }
.tn-cmd-hint{ position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.18em;color:rgba(255,255,255,.4);pointer-events:none; }
.tn-cmd-sep{ height:1px;background:rgba(255,255,255,.08); }
.tn-cmd-results{ max-height:54vh;overflow-y:auto;padding:6px 6px 10px; }
.tn-cmd-row{ display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer;border:1px solid transparent; }
.tn-cmd-row:hover,.tn-cmd-row.sel{ background:rgba(255,92,92,.10);border-color:rgba(255,92,92,.35); }
.tn-cmd-cv{ width:44px;height:44px;border-radius:7px;flex:0 0 auto;overflow:hidden;background:var(--cvbg,#14181f);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px; }
.tn-cmd-cv img{ width:100%;height:100%;object-fit:cover;display:block; }
.tn-cmd-cv-fb{ background:linear-gradient(135deg,rgba(255,92,92,.35),rgba(94,231,154,.18)); }
.tn-cmd-ti{ min-width:0;flex:1; }
.tn-cmd-t{ font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.tn-cmd-a{ font-size:11.5px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px; }
.tn-cmd-play{ width:30px;height:30px;border-radius:50%;flex:0 0 auto;background:transparent;border:1px solid rgba(255,92,92,.55);color:#ff8a8a;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.tn-cmd-row:hover .tn-cmd-play,.tn-cmd-row.sel .tn-cmd-play{ background:rgba(255,92,92,.18);color:#fff; }
.tn-cmd-empty{ padding:18px 16px;color:rgba(255,255,255,.55);font-size:12.5px;letter-spacing:.04em; }
.tn-cmd-footer{ padding:9px 14px;border-top:1px solid rgba(255,255,255,.06);font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.45);display:flex;gap:14px;flex-wrap:wrap; }
.tn-cmd-footer kbd{ font-family:inherit;font-size:10px;padding:1px 6px;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);margin-right:4px; }
.tn-search-open{ position:absolute;top:14px;right:64px;width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;z-index:6; }
.tn-search-open:hover{ border-color:#ff8a8a;color:#ff8a8a; }
.tn-search-open svg{ width:16px;height:16px;display:block; }
@media (max-width:640px){
  .tn-search-open{ right:58px;width:30px;height:30px; }
  .tn-search-open svg{ width:14px;height:14px; }
}

/* HOTFIX 31 */
@media (min-width:768px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-full-body{
    width:clamp(380px, 38vw, 980px) !important;
    left:0 !important; right:0 !important;
    margin-left:auto !important; margin-right:auto !important;
    max-width:none !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full #tn-fart{
    width:clamp(240px, 22vw, 460px) !important;
    height:clamp(240px, 22vw, 460px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-full-lab{ left:50% !important; }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{
    display:block !important;
    left:auto !important;
    right:calc(50% + clamp(190px, 19vw, 490px) + clamp(12px, 1.4vw, 32px)) !important;
    width:clamp(160px, 16vw, 320px) !important;
    max-height:none !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-toppl{
    display:block !important;
    left:calc(50% + clamp(190px, 19vw, 490px) + clamp(12px, 1.4vw, 32px)) !important;
    width:clamp(160px, 16vw, 320px) !important;
    max-height:none !important;
  }
}
@media (min-width:768px) and (max-width:1023px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-toppl{
    display:block !important;
    position:absolute !important;
  }
  .tn-chev{ display:none !important; }
}
@media (max-width:767px){
  .tn-full .tn-reco, .tn-full .tn-upnext, .tn-full .tn-toppl{
    display:none;
    position:absolute;left:0;right:0;top:54px;bottom:84px;margin:0 auto;width:min(94vw,560px);
    padding:14px 14px 18px;overflow-y:auto;
    background:linear-gradient(180deg,rgba(9,12,18,.78),rgba(5,7,11,.85));
    border:1px solid rgba(255,255,255,.07);border-radius:18px;z-index:3;box-sizing:border-box;
  }
  .tn-full[data-pane="reco"] .tn-reco{ display:block !important; }
  .tn-full[data-pane="up"]   .tn-upnext{ display:block !important; }
  .tn-full[data-pane="up"]   .tn-toppl{ display:block !important;position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;margin-top:12px;border-color:rgba(94,231,154,.28); }
  .tn-full[data-pane="now"] .tn-reco, .tn-full[data-pane="now"] .tn-upnext, .tn-full[data-pane="now"] .tn-toppl{ display:none !important; }
}

/* obvious search pill */
.tn-search-open{
  position:absolute !important;
  top:12px !important;right:62px !important;
  width:auto !important;height:38px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  background:rgba(255,92,92,.14) !important;
  border:1px solid rgba(255,92,92,.65) !important;
  color:#ffd2d2 !important;
  display:flex !important;align-items:center !important;gap:8px !important;
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.18em;
  box-shadow:0 0 16px rgba(255,92,92,.25),inset 0 0 12px rgba(255,92,92,.08) !important;
  transition:background .15s,color .15s,box-shadow .15s,border-color .15s;
  cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:6;
}
.tn-search-open:hover{
  background:rgba(255,92,92,.22) !important;
  color:#fff !important;
  border-color:rgba(255,92,92,1) !important;
  box-shadow:0 0 24px rgba(255,92,92,.45),inset 0 0 16px rgba(255,92,92,.14) !important;
}
.tn-search-open svg{ width:14px;height:14px;display:block;flex:0 0 auto; }
.tn-search-open .tn-search-lab{ display:inline-block; }
.tn-search-open .tn-search-kbd{
  display:inline-block;font-size:10px;letter-spacing:.04em;font-weight:600;
  padding:1px 6px;border:1px solid rgba(255,255,255,.25);border-radius:4px;
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.85);margin-left:2px;
}
@media (max-width:767px){
  .tn-search-open{ padding:0 10px !important;height:34px !important;right:56px !important; }
  .tn-search-open .tn-search-lab, .tn-search-open .tn-search-kbd{ display:none !important; }
}

/* HOTFIX 32 */
.tn-full .tn-full-body{ position:relative; }
.tn-corner-ctrls{
  position:absolute;top:10px;right:12px;
  display:flex;align-items:center;gap:8px;z-index:5;
}
.tn-corner-ctrls #tn-fheart,
.tn-corner-ctrls #tn-fstop,
.tn-corner-ctrls #tn-xstop{ position:static !important;margin:0 !important; }
.tn-corner-ctrls > button{ flex:0 0 auto; }
.tn-full-top #tn-fheart,
.tn-full-top #tn-fstop,
.tn-full-top #tn-xstop{ display:none; }
.tn-full .tn-reco,
.tn-full .tn-upnext,
.tn-full .tn-toppl{ max-height:none !important; }
.tn-tap-hint{
  position:absolute;top:54px;left:14px;
  padding:7px 11px;
  background:rgba(10,14,20,.92);
  border:1px solid rgba(255,255,255,.18);
  border-radius:9px;
  color:#d9ffe9;
  font-family:inherit;font-size:11px;letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  z-index:7;pointer-events:none;
  opacity:0;transform:translateY(-4px);
  animation:tn-hint-in .35s ease-out forwards .15s;
}
.tn-tap-hint::before{
  content:"";position:absolute;top:-5px;left:18px;
  width:8px;height:8px;
  background:rgba(10,14,20,.92);
  border-left:1px solid rgba(255,255,255,.18);
  border-top:1px solid rgba(255,255,255,.18);
  transform:rotate(45deg);
}
.tn-tap-hint.out{ animation:tn-hint-out .35s ease-in forwards; }
@keyframes tn-hint-in{ to{ opacity:1; transform:translateY(0); } }
@keyframes tn-hint-out{ to{ opacity:0; transform:translateY(-4px); } }

/* HOTFIX 34 */
@media (min-width:768px) and (max-width:879px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-toppl{
    position:absolute !important;left:0 !important;right:0 !important;
    top:54px !important;bottom:84px !important;height:auto !important;max-height:none !important;
    margin:0 auto !important;width:min(94vw,560px) !important;
  }
  .tn-full[data-pane="reco"] .tn-reco{ display:block !important; }
  .tn-full[data-pane="up"] .tn-upnext{ display:block !important; }
  .tn-full[data-pane="up"] .tn-toppl{ display:block !important;position:relative !important;top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;width:100% !important;margin-top:12px !important; }
  .tn-full[data-pane="now"] .tn-reco,
  .tn-full[data-pane="now"] .tn-upnext,
  .tn-full[data-pane="now"] .tn-toppl{ display:none !important; }
  .tn-full.open .tn-chev{ display:flex !important; }
}
@media (min-width:880px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-full-body{
    width:clamp(420px, 40vw, 1180px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full #tn-fart{
    width:clamp(240px, 24vw, 540px) !important;
    height:clamp(240px, 24vw, 540px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{
    right:calc(50% + clamp(226px, 21vw, 606px) + clamp(14px, 1.4vw, 30px)) !important;
    width:clamp(190px, 15vw, 320px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-toppl{
    left:calc(50% + clamp(226px, 21vw, 606px) + clamp(14px, 1.4vw, 30px)) !important;
    width:clamp(190px, 15vw, 320px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) .tn-toppl{
    overflow-y:auto !important;
  }
  .tn-chev{ display:none !important; }
}

/* HOTFIX 35 */
@media (min-width:880px){
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-full-body{
    width:clamp(440px, 48vw, 1320px) !important;
    left:0 !important; right:0 !important; margin-left:auto !important; margin-right:auto !important; max-width:none !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full #tn-fart{
    width:clamp(240px, 26vw, 600px) !important;
    height:clamp(240px, 26vw, 600px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-full-lab{ left:50% !important; }
  html:not(.etn-ios):not(.p3-shell-dk) .tn-full .tn-reco{
    position:absolute !important;
    top:12vh !important;
    right:calc(50% + clamp(236px, 24vw, 694px) + clamp(16px, 1.6vw, 34px)) !important;
    left:auto !important;
    width:clamp(190px, 15vw, 300px) !important;
    height:var(--etn-col-h, 60vh) !important;
    max-height:var(--etn-col-h, 60vh) !important;
    overflow-y:auto !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol{
    position:absolute !important;
    top:12vh !important;
    left:calc(50% + clamp(236px, 24vw, 694px) + clamp(16px, 1.6vw, 34px)) !important;
    width:clamp(190px, 15vw, 300px) !important;
    height:var(--etn-col-h, 60vh) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    z-index:2;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-toppl{
    position:static !important;
    left:auto !important; right:auto !important; top:auto !important; bottom:auto !important;
    width:100% !important;
    margin:0 !important;
    overflow-y:auto !important;
    min-height:0 !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-upnext{ flex:3 1 0 !important; }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-toppl{ flex:2 1 0 !important; }
  .tn-chev{ display:none !important; }
}

/* HOTFIX 36 */
@media (min-width:880px){
  /* overlay was display:flex, which shrank the player below its CSS width and
     made the rails flex-siblings fighting for space. Make it a plain block;
     children are absolutely positioned (rails) or non-shrinking (player). */
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full.open{ display:block !important; }

  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-full-body{
    flex:0 0 auto !important;
    width:clamp(440px, 48vw, 1320px) !important;
    max-width:none !important;
    margin:8vh auto 0 auto !important;
    align-self:center !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full #tn-fart{
    width:clamp(240px, 26vw, 600px) !important;
    height:clamp(240px, 26vw, 600px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-full-lab{ left:50% !important; }

  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-reco{
    position:absolute !important;
    top:8vh !important;
    right:calc(50% + clamp(220px, 24vw, 660px) + clamp(16px, 1.6vw, 34px)) !important;
    left:auto !important;
    width:clamp(190px, 15vw, 300px) !important;
    height:var(--etn-col-h, 70vh) !important;
    max-height:var(--etn-col-h, 70vh) !important;
    overflow-y:auto !important;
    margin:0 !important;
  }

  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol{
    position:absolute !important;
    top:8vh !important;
    left:calc(50% + clamp(220px, 24vw, 660px) + clamp(16px, 1.6vw, 34px)) !important;
    right:auto !important;
    width:clamp(190px, 15vw, 300px) !important;
    height:var(--etn-col-h, 70vh) !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    z-index:2 !important;
    margin:0 !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-toppl{
    position:static !important;
    top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;
    width:100% !important;margin:0 !important;min-height:0 !important;
    overflow-y:auto !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-upnext{ flex:3 1 0 !important; }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-toppl{ flex:2 1 0 !important; }

  html:not(.etn-ios):not(.p3-shell-dk) #tn-full #tn-viz{ flex:0 0 auto !important; }
  .tn-chev{ display:none !important; }
}

/* HOTFIX 37 */
@media (min-width:900px){
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full.open{
    display:grid !important;
    grid-template-columns:
      clamp(190px,15vw,300px)
      minmax(440px, 56vw)
      clamp(190px,15vw,300px);
    grid-template-rows:1fr !important;
    justify-content:center !important;
    align-items:start !important;
    gap:clamp(16px,1.8vw,40px) !important;
    padding:9vh clamp(20px,3vw,60px) 4vh !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-reco{
    position:static !important;
    inset:auto !important; top:auto !important; right:auto !important; left:auto !important; bottom:auto !important;
    transform:none !important;
    margin:0 !important;
    width:auto !important; max-width:none !important;
    grid-column:1 !important; grid-row:1 !important;
    align-self:stretch !important;
    max-height:78vh !important;
    overflow-y:auto !important;
    display:block !important;
    padding:16px 12px !important;
    background:linear-gradient(180deg,rgba(9,12,18,.6),rgba(5,7,11,.72)) !important;
    border:1px solid rgba(255,92,92,.32) !important;
    border-radius:20px !important;
    -webkit-backdrop-filter:blur(20px) saturate(1.1) !important;
    backdrop-filter:blur(20px) saturate(1.1) !important;
    box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 24px rgba(255,92,92,.1) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-full-body{
    position:static !important;
    inset:auto !important; top:auto !important; left:auto !important; right:auto !important;
    transform:none !important;
    flex:none !important;
    grid-column:2 !important; grid-row:1 !important;
    width:100% !important; max-width:none !important;
    margin:0 !important;
    align-self:start !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full #tn-fart{
    width:clamp(260px,26vw,560px) !important;
    height:clamp(260px,26vw,560px) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-full-lab{ left:50% !important; }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol{
    position:static !important;
    inset:auto !important; top:auto !important; left:auto !important; right:auto !important;
    transform:none !important;
    margin:0 !important;
    width:auto !important;
    grid-column:3 !important; grid-row:1 !important;
    align-self:stretch !important;
    max-height:78vh !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
    min-height:0 !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-upnext,
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-toppl{
    position:static !important;
    inset:auto !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
    transform:none !important;
    width:100% !important; margin:0 !important; min-height:0 !important;
    overflow-y:auto !important;
    display:block !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-upnext{ flex:3 1 0 !important; }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-rightcol .tn-toppl{ flex:2 1 0 !important; }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full #tn-viz{
    position:absolute !important;
    left:50% !important; transform:translateX(-50%) !important;
    bottom:3vh !important;
    width:min(56vw,900px) !important; height:84px !important;
    margin:0 !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-kaleido,
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-full-bg{
    position:absolute !important; inset:0 !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-tap{
    position:absolute !important; top:14px !important; left:14px !important;
    bottom:auto !important; right:auto !important;
    z-index:6 !important;
  }
  .tn-chev{ display:none !important; }
}

/* HOTFIX 38 */
@media (min-width:900px){
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-full-top{
    position:absolute !important;
    top:0 !important; left:0 !important; right:0 !important;
    grid-column:1 / -1 !important;
    z-index:6 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:18px 22px !important;
    margin:0 !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-full-lab{
    position:absolute !important;
    left:50% !important; top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full #tn-viz{
    position:static !important;
    left:auto !important; right:auto !important; bottom:auto !important; top:auto !important;
    transform:none !important;
    width:100% !important; height:80px !important;
    margin:14px 0 2px !important;
    display:block !important;
    grid-column:auto !important;
  }
  html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-full-body{
    padding-top:18px !important;
  }
}

/* HOTFIX 39 */
.tn-cmd{ position:relative; }
.tn-cmd-x{
  position:absolute;top:10px;right:12px;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.75);
  font-size:13px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;z-index:3;
}
.tn-cmd-x:hover{ border-color:#ff8a8a;color:#fff;background:rgba(255,92,92,.18); }
.tn-cmd-hint{ right:52px !important; }

/* kal-fx now merged into the symbiote engine (localStorage etn_kal_fx) */
/* filter:inherit removed — it stripped HF24 blur (sharp butterfly bug) */

.tn-kalfx{
  position:absolute;
  left:14px;bottom:14px;
  display:flex;align-items:center;gap:8px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(10,16,20,.55);
  border:1px solid rgba(157,91,255,.45);
  color:#c89bff;
  font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.16em;
  cursor:pointer;z-index:6;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  -webkit-tap-highlight-color:transparent;
  transition:border-color .15s,color .15s,box-shadow .15s,background .15s;
}
.tn-kalfx:hover{
  border-color:#9d5bff;color:#e6d2ff;
  background:rgba(157,91,255,.16);
  box-shadow:0 0 16px rgba(157,91,255,.35);
}
.tn-kalfx-dot{
  width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(#ff5c5c,#ffb02e,#5ee79a,#25e0ff,#9d5bff,#ff5c5c);
  box-shadow:0 0 8px rgba(255,255,255,.4);
}
.tn-kalfx-lab{ display:inline-block;min-width:54px;text-align:left; }
@media (max-width:899px){
  .tn-kalfx{ left:10px;bottom:10px;padding:6px 10px; }
}

/* HOTFIX 42 */
.tn-row.tn-has-menu, .tn-side-row, .tn-reco-row, .tn-sim-row{ transition:transform .14s ease, box-shadow .14s ease, background .14s ease; }
.tn-row.tn-has-menu:hover, .tn-side-row:hover, .tn-reco-row:hover, .tn-sim-row:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.35); background:rgba(255,255,255,.04); }
.tn-has-menu, .tn-side-row, .tn-reco-row, .tn-sim-row{ position:relative; }
.tn-dots{ position:absolute; top:50%; right:8px; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(10,16,20,.55); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.7); font-size:17px; line-height:1; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .12s, border-color .12s, color .12s, background .12s; -webkit-tap-highlight-color:transparent; z-index:4; }
.tn-row.tn-has-menu:hover .tn-dots, .tn-side-row:hover .tn-dots, .tn-reco-row:hover .tn-dots, .tn-sim-row:hover .tn-dots{ opacity:1; pointer-events:auto; }
.tn-dots:hover{ border-color:#ff8a8a; color:#fff; background:rgba(255,92,92,.2); }
@media (hover:none){ .tn-dots{ opacity:1; pointer-events:auto; } }
.tn-menu{ position:fixed; z-index:99999; min-width:210px; max-width:280px; background:rgba(14,18,24,.97); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:6px; box-shadow:0 18px 50px rgba(0,0,0,.6); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); font-family:inherit; }
.tn-menu-item{ display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border:0; background:transparent; cursor:pointer; color:#e8eef2; font-size:13px; text-align:left; border-radius:8px; font-family:inherit; }
.tn-menu-item:hover{ background:rgba(255,92,92,.16); color:#fff; }
.tn-menu-item.danger:hover{ background:rgba(255,80,80,.22); }
.tn-menu-ic{ width:18px; text-align:center; opacity:.85; flex:0 0 auto; font-size:13px; }
.tn-menu-sep{ height:1px; background:rgba(255,255,255,.1); margin:5px 6px; }
.tn-np-more{ display:inline-flex; align-items:center; gap:9px; }
.tn-np-more .tn-np-more-dots{ font-size:18px; line-height:1; }
.tn-np-more .tn-np-more-lab{ letter-spacing:.18em; }
.tn-sim-ov{ position:fixed; inset:0; z-index:99998; background:rgba(4,7,10,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:24px; }
.tn-sim-card{ width:min(460px,94vw); max-height:80vh; display:flex; flex-direction:column; background:rgba(13,17,22,.98); border:1px solid rgba(255,92,92,.3); border-radius:16px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.7); }
.tn-sim-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); color:#ff8a8a; font-size:11px; font-weight:700; letter-spacing:.2em; }
.tn-sim-x{ width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.75); font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center; }
.tn-sim-x:hover{ border-color:#ff8a8a;color:#fff;background:rgba(255,92,92,.18); }
.tn-sim-body{ overflow-y:auto; padding:8px; }
.tn-sim-row{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:10px; cursor:pointer; }
.tn-sim-cv{ width:42px;height:42px;border-radius:7px;overflow:hidden;flex:0 0 auto;background:rgba(255,255,255,.05); }
.tn-sim-cv img{ width:100%;height:100%;object-fit:cover;display:block; }
.tn-sim-cv-fb{ display:flex;align-items:center;justify-content:center;color:#ff8a8a;font-size:18px; }
.tn-sim-t{ font-size:13px;color:#eef2f5;font-weight:600;line-height:1.2; }
.tn-sim-a{ font-size:11px;color:rgba(255,255,255,.5);margin-top:2px; }
.tn-toast{ position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(12px); z-index:100000; padding:10px 18px; border-radius:999px; background:rgba(20,24,30,.96); border:1px solid rgba(94,231,154,.4); color:#5ee79a; font-size:12px; font-weight:600; letter-spacing:.04em; box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.tn-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* HOTFIX 43 */
.tn-menu{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif !important; letter-spacing:.01em; }
.tn-menu-item{ font-family:inherit !important; font-size:13.5px; font-weight:500; padding:10px 12px; }
.tn-menu-ic{ width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; opacity:.9; }
.tn-row.tn-has-menu:hover, .tn-side-row:hover, .tn-reco-row:hover, .tn-sim-row:hover{ transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(255,92,92,.18), 0 0 22px rgba(255,92,92,.16); background:rgba(255,92,92,.05); }
.tn-more-mini{ width:38px !important; height:38px !important; min-width:0 !important; padding:0 !important; border-radius:50% !important; display:inline-flex !important; align-items:center; justify-content:center; background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.22) !important; margin-left:6px !important; box-shadow:none !important; }
.tn-more-mini .tn-more-glyph{ font-size:21px; line-height:1; color:#ffffff; text-shadow:0 0 8px rgba(255,255,255,.8), 0 0 16px rgba(255,255,255,.4); }
.tn-more-mini:hover{ border-color:#fff !important; background:rgba(255,255,255,.1) !important; box-shadow:0 0 16px rgba(255,255,255,.4) !important; }
.tn-more-mini .tn-np-more-lab{ display:none !important; }
.tn-full-lab.tn-np-sign{ color:var(--sign-txt, #c8ffd9); text-shadow:0 0 6px var(--sign-glow,#5ee79a), 0 0 14px var(--sign-glow,#5ee79a), 0 0 28px var(--sign-glow,#5ee79a); transition:color .25s, text-shadow .25s; }

/* HOTFIX 44 */
.tn-full .tn-more-btn{
  -webkit-appearance:none; appearance:none;
  background:transparent !important;
  border:1px solid var(--e-hair, rgba(255,255,255,.16)) !important;
  color:var(--e-fg,#e8eef2) !important;
  border-radius:8px !important;
  width:38px !important; height:34px !important; min-width:0 !important;
  padding:0 !important; margin:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  box-shadow:none !important; cursor:pointer;
}
.tn-full .tn-more-btn .tn-more-glyph{ font-size:20px; line-height:1; color:#fff; text-shadow:0 0 7px rgba(255,255,255,.7), 0 0 14px rgba(255,255,255,.35); }
.tn-full .tn-more-btn:hover{ border-color:#fff !important; color:#fff !important; box-shadow:0 0 14px rgba(255,255,255,.35) !important; }
.tn-full .tn-more-btn .tn-np-more-lab{ display:none !important; }
.tn-row.tn-has-menu, .tn-side-row, .tn-reco-row, .tn-sim-row{ transition:transform .14s ease, box-shadow .16s ease, background .14s ease; }
.tn-row.tn-has-menu:hover, .tn-side-row:hover, .tn-reco-row:hover, .tn-sim-row:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 26px rgba(0,0,0,.5), 0 0 0 1px var(--art-glow-soft, rgba(255,92,92,.18)), 0 0 22px var(--art-glow, rgba(255,92,92,.18));
  background:var(--art-glow-soft, rgba(255,92,92,.05));
}
.tn-dots:hover{ border-color:var(--art-glow, #ff8a8a) !important; color:#fff !important; background:var(--art-glow-soft, rgba(255,92,92,.2)) !important; }
.tn-menu-item.danger{ color:#ff9b9b; }
.tn-menu-item.danger:hover{ background:rgba(255,70,70,.2) !important; color:#fff; }

/* HOTFIX 45 */
html:has(#tn-full.open){ overflow:hidden !important; height:100% !important; }
body:has(#tn-full.open){ overflow:hidden !important; }
html.tn-scroll-lock{ overflow:hidden !important; height:100% !important; }
html.tn-scroll-lock body{ overflow:hidden !important; }

/* HOTFIX 46 */
.tn-full:not(.playing) .tn-kaleido,
.tn-full:not(.playing) .tn-kaleido::after,
.tn-full:not(.playing) .tn-kaleido::before{ animation-play-state:paused !important; }

/* HOTFIX 47 */
.tn-full .tn-full-ctrls{ overflow:visible !important; }
@media(max-width:640px){
  .tn-full .tn-full-body{ overflow:visible !important; }
}

/* HOTFIX 48 */
.tn-full .tn-play, .tn-full #tn-fplay{
  filter:none !important;
  box-shadow:0 0 16px 2px var(--tn,#ff5c5c), 0 0 6px 1px var(--tn,#ff5c5c) !important;
}
.tn-full .tn-play:hover, .tn-full #tn-fplay:hover{
  box-shadow:0 0 22px 4px var(--tn,#ff5c5c), 0 0 8px 2px var(--tn,#ff5c5c) !important;
}
.tn-full .tn-play, .tn-full #tn-fplay{ border-radius:50% !important; }

/* HOTFIX 49 */
.tn-full .tn-frepeat{ color:var(--e-fg,#e8eef2); position:relative; }
.tn-full .tn-frepeat.on{ color:var(--tn,#ff5c5c); border-color:rgba(255,92,92,.5); }
.tn-full .tn-frepeat.inf{ box-shadow:0 0 12px rgba(255,92,92,.5); }
.tn-full .tn-frepeat.rq{ color:#5ee79a; border-color:rgba(94,231,154,.5); box-shadow:0 0 12px rgba(94,231,154,.4); }
.tn-full .tn-frepeat.rq::after{ content:""; position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:#5ee79a; }
/* ===== symbiote engine states ===== */
html.etn-kpause .tn-kaleido,html.etn-kpause .tn-kaleido::after{animation-play-state:paused}
.tn-full.tn-rave .tn-kaleido{opacity:.92 !important}
.tn-full.tn-rave .tn-kaleido::after{opacity:.75 !important}
html.etn-phosphor #tn-full{--tn:#53cc87}
html.etn-phosphor .tn-full-a{color:#53cc87}
.tn-symb-toast{position:absolute;top:12%;left:50%;transform:translateX(-50%);z-index:60;font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.3em;color:#fff;text-shadow:0 0 14px currentColor,0 0 4px currentColor;opacity:0;transition:opacity .35s;pointer-events:none}
.tn-symb-toast.show{opacity:1}
@keyframes etnSymbSpin{0%{transform:translate(-50%,-50%) rotate(0deg) scale(1.05)}50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.14)}100%{transform:translate(-50%,-50%) rotate(360deg) scale(1.05)}}
/* ===== SYMBIOTE FINAL: engine-driven tint over the HF24 kaleidoscope ===== */
.tn-full .tn-kaleido{isolation:isolate}
.tn-symb-tint{position:absolute;inset:-5%;background:hsl(var(--khue,0deg) 100% 60%);opacity:var(--kglow,0);mix-blend-mode:hue;pointer-events:none;transition:opacity .4s;z-index:3}
html.etn-kmono .tn-full .tn-kaleido{filter:grayscale(1)}
html.etn-kinv .tn-full .tn-kaleido{filter:invert(1)}
/* ===== SYMBIOTE ECO: phones get one swirl layer, slower + lighter ===== */
@media (pointer:coarse){
  .tn-full .tn-kaleido::after{display:none !important}
  .tn-full .tn-kaleido::before{filter:saturate(1.4) blur(20px) !important;animation-duration:48s !important}
}
html.etn-ios .tn-full .tn-kaleido::after{display:none !important}
html.etn-eco .tn-full .tn-kaleido::after{display:none !important}
@media (prefers-reduced-motion:reduce){
  .tn-full .tn-kaleido::before,.tn-full .tn-kaleido::after{animation:none !important}
}
/* ===== SYMBIOTE LITE: blur faked by upscaling a tiny (80px) art texture — zero GPU blur ===== */
.tn-full .tn-kaleido::before{background-image:var(--kart-lo,var(--kart)) !important;filter:saturate(1.35) blur(12px) !important}
.tn-full .tn-kaleido::after{background-image:var(--kart-lo,var(--kart)) !important;filter:saturate(1.2) hue-rotate(55deg) blur(18px) !important}
/* ===== SYMBIOTE AURA: viewport-level glow behind the player card — nothing clips it ===== */
#tn-aura{position:fixed;inset:-6%;z-index:99;pointer-events:none;display:none;background-image:var(--kart-lo);background-size:cover;background-position:center;filter:saturate(1.35) blur(28px);opacity:0;transition:opacity .8s}
#tn-aura.on{display:block;opacity:.45}
#tn-aura::after{content:"";position:absolute;inset:0;background:hsl(var(--khue,0deg) 100% 60%);opacity:var(--kglow,0);mix-blend-mode:hue}
/* ===== GLOW FREEDOM: the content column must never clip the symbiote's wings ===== */
.tn-full .tn-full-body{overflow:hidden !important}
/* ===== GLOW FREEDOM v2: match the desktop grid rules' specificity ===== */
html:not(.etn-ios):not(.p3-shell-dk) #tn-full .tn-full-body,
#tn-full .tn-full-body,
.tn-full .tn-full-body{overflow:hidden !important}
/* ===== GLOW CONTINUITY v2: card background dissolves at its edges — no brightness step, ever ===== */
.tn-full{background:radial-gradient(120% 105% at 50% 32%, rgba(9,13,17,.92) 48%, rgba(8,12,16,.62) 78%, rgba(7,11,15,0) 100%) !important}
.tn-full .tn-full-bg{-webkit-mask-image:radial-gradient(115% 105% at 50% 40%, #000 55%, transparent 96%);mask-image:radial-gradient(115% 105% at 50% 40%, #000 55%, transparent 96%)}
/* ===== GLOW CONTINUITY v3: card backdrop feathered on ALL edges via mask — a hard step is geometrically impossible ===== */
.tn-full{background:transparent !important;border:none !important;box-shadow:none !important}
.tn-full::before{
  content:"" !important;position:absolute !important;inset:0 !important;z-index:0 !important;pointer-events:none !important;
  background:radial-gradient(120% 105% at 50% 32%, rgba(9,13,17,.94) 50%, rgba(8,12,16,.80) 100%) !important;
  opacity:1 !important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%),linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%),linear-gradient(90deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);
  mask-composite:intersect;
}
/* ===== SYMBIOTE UNCAGED: the orb canvas dissolves at its own boundary — rendered pixels can never form a hard edge ===== */
#tn-orb, canvas.tn-orb{
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, rgba(0,0,0,.55) 78%, transparent 99%) !important;
  mask-image:radial-gradient(closest-side, #000 55%, rgba(0,0,0,.55) 78%, transparent 99%) !important;
}
/* ===== GLASS PLAY: frosted play buttons, coral signal glow ===== */
#tn-fplay, #tn-play{
  background:rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important;
  box-shadow:0 6px 22px rgba(0,0,0,.45), 0 0 18px rgba(255,92,92,.30), inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition:background .18s, border-color .18s, box-shadow .18s;
}
#tn-fplay:hover, #tn-play:hover{
  background:rgba(255,92,92,.20) !important;
  border-color:rgba(255,92,92,.55) !important;
  box-shadow:0 6px 26px rgba(0,0,0,.5), 0 0 28px rgba(255,92,92,.55), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
#tn-fplay:active, #tn-play:active{transform:scale(.96)}
/* ===== POWER DIET (toggle: html.etn-eco) — reversible; ETN_ECO(false) restores full glass ===== */
html.etn-eco *{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
html.etn-eco .tn-reco-h,html.etn-eco .tn-side-h{background:rgba(18,20,27,.85) !important;border:1px solid rgba(255,255,255,.08) !important}
html.etn-eco .tn-player{background:rgba(10,12,16,.94) !important}
html.etn-eco .tn-cmd{background:linear-gradient(180deg,rgba(12,16,22,.98),rgba(6,9,13,.99)) !important}
html.etn-eco .tn-cmd-ov,html.etn-eco .tn-cmd-backdrop{background:rgba(4,6,10,.85) !important}
html.etn-eco #tn-fplay,html.etn-eco #tn-play{background:rgba(30,34,42,.94) !important}
html.etn-eco #tn-fplay:hover,html.etn-eco #tn-play:hover{background:var(--art-glow-soft,rgba(255,92,92,.22)) !important}
html.etn-eco .tn-kaleido,html.etn-eco .tn-full .tn-kaleido,html.etn-eco .tn-full .tn-kaleido::before,html.etn-eco .tn-full .tn-kaleido::after{will-change:auto !important}
/* freeze player motion when app/tab not frontmost (always on — pure win) */
html.etn-away .tn-kaleido,html.etn-away .tn-kaleido::before,html.etn-away .tn-kaleido::after,
html.etn-away #tn-fart,html.etn-away .tn-full-bg,html.etn-away #tn-aura{animation-play-state:paused !important}
/* ===== NEON RESTORE: static edge-glow (free) on panels + player, art-tinted ===== */
html.etn-eco .tn-reco,html.etn-eco #tn-rightcol,html.etn-eco .tn-upnext,html.etn-eco .tn-player,
.tn-reco,#tn-rightcol,.tn-upnext,.tn-player{
  border:1px solid var(--art-glow,rgba(255,92,92,.5)) !important;
  box-shadow:0 0 22px var(--art-glow,rgba(255,92,92,.28)), inset 0 0 12px rgba(0,0,0,.35) !important;
}
html.etn-eco .tn-reco-h,html.etn-eco .tn-side-h,.tn-reco-h,.tn-side-h{
  box-shadow:0 0 16px var(--art-glow,rgba(255,92,92,.3)) !important;
}