/* EMTAC 'TUNES PLAYER v3 — GLASS FACES cosmetics. Loaded LAST.
   Geometry lives inline (set by _emtac_player3.js); this file styles content. */

/* top bar spans the stage */
#p3-stage .tn-full-top{position:absolute!important;top:0!important;left:0!important;right:0!important;z-index:8!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 6px!important;background:none!important;border:0!important}
/* label on its own centered line below the corner buttons (relative to the card) */
#p3-stage .tn-full-lab{position:absolute!important;left:0!important;right:0!important;top:24px!important;text-align:center!important;font-size:16px!important;letter-spacing:.34em!important;font-weight:800!important;color:var(--tn,#ff5c5c)!important;text-shadow:0 0 16px rgba(255,92,92,.55),0 0 34px rgba(255,92,92,.3)!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent;pointer-events:auto}
@media(min-width:1024px){#p3-stage .tn-full-lab{font-size:17px!important;top:26px!important}}
#p3-stage .tn-full-topr{display:flex!important;gap:9px!important}
#p3-stage .tn-fbtn{width:40px!important;height:40px!important;border-radius:13px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;cursor:pointer}
#p3-stage .tn-fbtn.tn-fstop{color:#ff8f8f!important}
#p3-stage #tn-fheart.on{color:var(--tn,#ff5c5c)!important;border-color:var(--tn,#ff5c5c)!important;box-shadow:0 0 18px rgba(255,92,92,.5)!important}

/* now playing face content */
#p3-stage .tn-full-body::before,#p3-stage .tn-full-body::after{content:none!important;display:none!important}
#p3-stage #tn-fart{width:min(calc(100% + 16px),50vh)!important;height:auto!important;aspect-ratio:1/1!important;margin-left:-8px!important;margin-right:-8px!important;max-width:none!important;max-height:none!important;border-radius:20px!important;flex:0 0 auto!important;margin:0!important;overflow:hidden!important;box-shadow:0 30px 74px rgba(0,0,0,.68),0 12px 28px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22),0 0 calc(58px*var(--nk,1)) var(--artglow,rgba(255,92,92,.42)),0 0 calc(120px*var(--nk,1)) var(--artglow2,rgba(255,92,92,.16))!important}
@media(min-width:1024px){#p3-stage #tn-fart{width:min(27vw,48vh)!important;height:min(27vw,48vh)!important;max-width:500px!important;max-height:500px!important}}
#p3-stage #tn-fart img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border:0!important;border-radius:inherit!important;box-shadow:none!important}
#p3-stage .tn-full-meta{margin:0!important;text-align:center!important;width:100%!important}
#p3-stage .tn-full-t{font-size:23px!important;font-weight:800!important;color:#fff!important;letter-spacing:.01em!important;margin-top:10px!important;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7),0 0 22px rgba(0,0,0,.5)!important}
#p3-stage .tn-full-a{font-size:15px!important;font-weight:700!important;color:var(--tn,#ff5c5c)!important;margin-top:5px!important;text-shadow:0 0 12px rgba(255,92,92,.4)!important}
#p3-stage .tn-full-al{font-size:11px!important;color:var(--e-mute,#8b93a1)!important;margin-top:3px!important}
#p3-stage .tn-full-seek{width:100%!important;max-width:430px!important;margin:0!important;display:flex!important;align-items:center!important;gap:9px!important}
/* TRANSPORT HIERARCHY: prev / PLAY / next are the heroes — front and center,
   dramatically larger. Repeat, shuffle, …, EQ are supporting cast. */
#p3-stage .tn-full-ctrls{gap:10px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-wrap:wrap}
#p3-stage .tn-full-ctrls .tn-btn{width:42px!important;height:42px!important;opacity:.85;color:var(--tnplay,var(--tn,#ff5c5c))!important}
#p3-stage .tn-full-ctrls .tn-btn svg{width:21px!important;height:21px!important}
#p3-stage #tn-fprev,#p3-stage #tn-fnext{width:66px!important;height:66px!important;opacity:1!important}
#p3-stage #tn-fprev svg,#p3-stage #tn-fnext svg{width:36px!important;height:36px!important}
#p3-stage #tn-fplay{width:88px!important;height:88px!important;opacity:1!important;
  box-shadow:0 0 calc(30px*var(--nk,1)) rgba(var(--ncplay,var(--nc,255,92,92)),calc(.55*var(--nk,1))),inset 0 1px 0 rgba(255,255,255,.25)!important}
#p3-stage #tn-fplay svg{width:44px!important;height:44px!important}
#p3-stage #tn-fart{width:min(calc(100% + 16px),50vh)!important;height:auto!important;aspect-ratio:1/1!important;margin-left:-8px!important;margin-right:-8px!important;max-width:none!important;max-height:none!important}
/* volume — one authority, rides under the transport row. TRUE GLASS: inset
   track with a JS-painted fill (p3PaintRange), small lensed thumb. */
#p3-stage #p3-vol{display:flex;align-items:center;gap:11px;width:100%;max-width:430px;margin:2px 0 0;color:#96a0b2}
#p3-stage #p3-vol input{flex:1;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;outline:none;
  touch-action:none;   /* the slider OWNS its drags — iOS can't claim them */
  background:rgba(255,255,255,.10);
  border:0.5px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.55),inset 0 -0.5px 0 rgba(255,255,255,.12),0 0 10px rgba(var(--ncvol,var(--nc,255,92,92)),.16)}
#p3-stage #p3-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.35) 38%,rgba(var(--ncvol,var(--nc,255,92,92)),.9) 72%,rgba(var(--ncvol,var(--nc,255,92,92)),.6));
  border:0.5px solid rgba(255,255,255,.65);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 10px rgba(var(--ncvol,var(--nc,255,92,92)),.55),0 2px 6px rgba(0,0,0,.55)}
#p3-sheet .sh-range,#p3-sheet #sh-hue{touch-action:none}

/* (pill button styling lives in the CANONICAL pill block below — purged here) */

/* CASSETTE teaser: spinning reels under the art while playing */
#p3-deck{display:none;align-items:center;gap:26px;justify-content:center;width:100%;margin-top:2px}
body.p3-theme-tape.p3-playing #p3-deck{display:flex}
#p3-deck .reel{width:44px;height:44px;border-radius:50%;position:relative;
  background:radial-gradient(circle,#0a0c12 26%,#2a2f3c 27% 60%,#14181f 61%);
  border:1.5px solid rgba(255,213,74,.5);box-shadow:0 0 14px rgba(255,176,46,.25),inset 0 1px 0 rgba(255,255,255,.15);
  animation:p3reel 1.8s linear infinite}
#p3-deck .reel::before{content:'';position:absolute;inset:8px;border-radius:50%;
  background:conic-gradient(rgba(255,255,255,.5) 0 14deg,transparent 14deg 120deg,rgba(255,255,255,.5) 120deg 134deg,transparent 134deg 240deg,rgba(255,255,255,.5) 240deg 254deg,transparent 254deg 360deg)}
#p3-deck .tape{flex:0 0 90px;height:8px;border-radius:4px;background:repeating-linear-gradient(90deg,#3a2b12 0 7px,#241a0a 7px 14px);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
@keyframes p3reel{from{transform:rotate(0)}to{transform:rotate(360deg)}}
body.p3-calm #p3-deck .reel{animation:none}
/* the "…" / extras buttons in the transport row: GLASS, never a white chip.
   (.tn-btn transports keep their own ring look — this targets the aliens only) */
#p3-stage .tn-full-ctrls button:not(.tn-btn):not(#tn-fplay),
#p3-stage .tn-full-ctrls .tn-more,#p3-stage .tn-full-ctrls [id*=more]{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.15)!important;color:#fff!important;border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
#p3-stage .tn-full-ctrls button:not(.tn-btn):not(#tn-fplay) svg{fill:currentColor}
/* legacy floating search launcher (upper-right) — the card has its own magnifier */
#tn-search-open,.tn-search-open{display:none!important}
/* relic kill-list backstop (the reaper removes them; CSS guarantees invisibility
   in the frame before it runs) */
#tn-rightcol,.tn-viewartist,#tn-viewartist,#tn-artistchip,
#p3-stage .tn-vol,#tn-full .tn-vol,#p3-stage .tn-knob{display:none!important}
#p3-stage #tn-viz,#p3-stage .tn-lyrics,#p3-stage #tn-corner-ctrls,#p3-stage .tn-chev,#p3-stage #tn-brandmark{display:none!important}
#p3-stage #tn-station{margin:0!important}
#p3-stage #tn-tap{position:absolute!important;top:12px!important;left:14px!important;right:auto!important;bottom:auto!important;z-index:5!important;padding:6px 10px!important;font-size:9.5px!important;border-radius:9px!important}

/* list faces = 6-row SIDE-SCROLL snap columns (same language as artist Top Songs).
   Geometry (grid, pan-x, snap) is inline from _emtac_player3.js; this styles the cells. */
.p3-fadecap{display:none!important}                       /* v-list era relic */
#p3-stage .p3-hgrid .tn-side-row,#p3-stage .p3-hgrid .tn-reco-row{scroll-snap-align:start;min-width:0;align-self:stretch;margin:0!important;border-bottom:1px solid rgba(255,255,255,.05)!important}
#p3-stage .p3-hgrid .tn-side-row:nth-child(6n),#p3-stage .p3-hgrid .tn-reco-row:nth-child(6n){border-bottom:0!important}
/* (big-list-art block moved to EOF — it was sitting BEFORE the 46px base rule and losing by order) */
#p3-stage .p3-hgrid .tn-side-empty{grid-row:1/-1;grid-column:1;place-self:center;width:100%}
#p3-stage .p3-hgrid::-webkit-scrollbar{display:none}
/* neon page hint: soft glow on the right edge while more columns wait off-screen */
.p3-shell{overflow:hidden}

/* list faces */
#p3-stage .tn-reco-h,#p3-stage .tn-side-h{position:sticky!important;top:0!important;z-index:2!important;text-align:center!important;font-size:11px!important;letter-spacing:.26em!important;font-weight:800!important;color:var(--tn,#ff5c5c)!important;text-shadow:0 0 12px rgba(255,92,92,.5)!important;padding:16px 0 10px!important;margin:0!important;background:linear-gradient(180deg,rgba(18,21,28,.98),rgba(18,21,28,.8) 70%,transparent)!important;border:0!important;box-shadow:none!important}
#p3-stage #tn-toppl .tn-side-h{color:#6fe0a0!important;text-shadow:0 0 12px rgba(94,231,154,.4)!important}
#p3-stage .tn-reco-row,#p3-stage .tn-side-row{display:flex!important;align-items:center!important;gap:12px!important;padding:9px 12px!important;border-radius:12px!important;margin:0 8px!important;border:0!important;background:none!important;cursor:pointer}
#p3-stage .tn-reco-row:hover,#p3-stage .tn-side-row:hover{background:rgba(255,255,255,.06)!important}
#p3-stage .tn-reco-row .cv,#p3-stage .tn-side-cv{width:46px!important;height:46px!important;border-radius:11px!important;flex:0 0 auto!important;overflow:hidden!important;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 14px rgba(255,92,92,.15)!important;background:var(--cvbg,#14181f)}
#p3-stage .tn-side-cv img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
#p3-stage .tn-side-cv-fb{display:flex!important;align-items:center!important;justify-content:center!important;color:rgba(255,255,255,.85)!important;font-weight:800!important;background:linear-gradient(135deg,rgba(255,92,92,.35),rgba(94,231,154,.18))!important}
#p3-stage .tn-side-ti{min-width:0;flex:1}
#p3-stage .tn-side-t{font-size:13px!important;font-weight:600!important;color:#fff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p3-stage .tn-side-a{font-size:11px!important;color:var(--e-mute,#8b93a1)!important;margin-top:2px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p3-stage .tn-side-empty{text-align:center;color:rgba(255,255,255,.5);padding:22px;font-size:11.5px}

/* dots */
#p3-stage .p3-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);transition:all .3s;cursor:pointer}
#p3-stage .p3-dot.on{width:22px;border-radius:4px;background:var(--tn,#ff5c5c);box-shadow:0 0 12px rgba(255,92,92,.7)}

/* double-tap favorite burst */
#p3-stage .p3-burst{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:110px;color:var(--tn,#ff5c5c);text-shadow:0 0 30px rgba(255,92,92,.9),0 0 70px rgba(255,92,92,.5);pointer-events:none;z-index:9;animation:p3burst .72s cubic-bezier(.17,.89,.32,1.28) forwards}
@keyframes p3burst{0%{transform:scale(.25);opacity:0}25%{opacity:1}60%{transform:scale(1.12);opacity:1}100%{transform:scale(1.55);opacity:0}}

/* page-level */
body:has(#tn-full.open) .tn-player{display:none!important}
body:has(#tn-full.open) #etn-scan-badge{display:none!important}
#tn-viz{display:none!important}

/* top bar is STAGE chrome — permanent, faces rotate beneath it. Its geometry is
   MEASURED against the card's live rect by _emtac_player3.js (safe-area calc
   lies inside the wrapper) — CSS only owns layout/stacking here. */
#p3-stage>.tn-full-top{position:absolute!important;z-index:12!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0!important;background:none!important;border:0!important;pointer-events:auto!important}
#p3-stage .tn-full-top{position:absolute!important;top:12px!important;left:12px!important;right:12px!important;z-index:8!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0!important;background:none!important;border:0!important;pointer-events:auto!important}
/* the bar label carries the face title; in-face sticky headers retire */
/* scoped 2026-07-26: hiding the face labels is right for the PHONE cube (the
   label lives on the card, not the face) but it reached the desktop console too
   and left all three glass pills with no header. */
html:not(.p3-shell-dk) #p3-stage .tn-reco-h,
html:not(.p3-shell-dk) #p3-stage .tn-side-h{display:none!important}
/* TAP chip anchors bottom-left of the card */
#p3-stage #tn-tap{top:auto!important;bottom:14px!important}   /* inside the card, lower-left */

/* ---------- SHOWCASE: floating artwork carousel above the 6-row grid (phones) ----------
   Static to swipes (the cube owns them), alive to taps. Pure compositor motion. */
.p3-show{position:absolute;top:70px;bottom:446px;left:0;right:0;z-index:1;display:none;pointer-events:auto;cursor:pointer}
@media(min-width:1024px){.p3-show{display:none!important}}
.p3-show .ps-stage{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:min(60vw,285px);aspect-ratio:1/1;animation:psfloat 7s ease-in-out infinite alternate}
.p3-show .ps-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px;opacity:0;transition:opacity .8s ease;
  box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12)}
.p3-show .ps-ring{position:absolute;inset:-9px;border-radius:26px;border:1px solid rgba(255,92,92,.45);
  box-shadow:0 0 22px rgba(255,92,92,.35),inset 0 0 22px rgba(255,92,92,.14);animation:psring 3.9s ease-in-out infinite}
.p3-show .ps-t{position:absolute;left:24px;right:24px;top:calc(46% + min(23vw,108px) + 26px);text-align:center;font-size:15px;font-weight:800;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.p3-show .ps-sub{position:absolute;left:24px;right:24px;top:calc(46% + min(23vw,108px) + 48px);text-align:center;font-size:11.5px;color:var(--tn,#ff5c5c);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 12px rgba(255,92,92,.5)}
.p3-show .ps-hint{position:absolute;left:0;right:0;top:calc(46% + min(23vw,108px) + 70px);text-align:center;font-size:8.5px;letter-spacing:.3em;color:rgba(255,255,255,.4)}
.p3-show.ps-in .ps-stage{animation:psfloat 7s ease-in-out infinite alternate,psin .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes psfloat{from{transform:translate(-50%,-52%) rotate(-1.4deg)}to{transform:translate(-50%,-48%) rotate(1.4deg)}}
@keyframes psring{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes psin{from{scale:.94;opacity:.6}to{scale:1;opacity:1}}

/* ---------- bottom chrome alignment: FX chip (left) and sleep moon (right) sit on
   the dots' line. They are REPARENTED into the stage by _emtac_player3.js —
   position:fixed inside the transformed #tn-full resolved against the WRONG
   containing block and stranded them off-viewport. Absolute-in-stage is exact. */
#p3-stage #tn-kalfx,#p3-stage .tn-kalfx{position:absolute!important;left:16px!important;right:auto!important;top:auto!important;
  bottom:calc(13px + env(safe-area-inset-bottom,0px))!important;z-index:9!important;height:34px!important;
  display:flex!important;align-items:center!important;pointer-events:auto!important}
#p3-stage #etnp-sleep{position:absolute!important;right:16px!important;left:auto!important;top:auto!important;
  bottom:calc(13px + env(safe-area-inset-bottom,0px))!important;z-index:9!important;height:34px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;pointer-events:auto!important}

/* customizer: player-side neon surfaces follow --tn / --nc / --nk */
#p3-stage #tn-fplay{box-shadow:0 0 calc(26px*var(--nk,1)) rgba(var(--nc,255,92,92),calc(.5*var(--nk,1)))!important}
#p3-stage #tn-fart{box-shadow:0 20px 55px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1),0 0 calc(46px*var(--nk,1)) rgba(var(--nc,255,92,92),calc(.35*var(--nk,1)))!important}
#p3-stage .p3-dot.on{box-shadow:0 0 calc(12px*var(--nk,1)) rgba(var(--nc,255,92,92),calc(.7*var(--nk,1)))}
.p3-show .ps-ring{border-color:rgba(var(--nc,255,92,92),.45);
  box-shadow:0 0 calc(22px*var(--nk,1)) rgba(var(--nc,255,92,92),calc(.35*var(--nk,1))),inset 0 0 22px rgba(var(--nc,255,92,92),.14)}
.p3-show .ps-sub{color:var(--tn,#ff5c5c);text-shadow:0 0 12px rgba(var(--nc,255,92,92),.5)}

/* ---------- JUKEBOX IDLE: the player exhales ---------- */
body.p3-idle #p3-stage .tn-full-top,body.p3-idle #p3-stage #p3-dots,body.p3-idle #p3-stage #p3-vol,
body.p3-idle #p3-stage .tn-full-seek,body.p3-idle #p3-stage .tn-full-ctrls,body.p3-idle #p3-stage .tn-full-meta,
body.p3-idle #p3-stage #tn-tap,body.p3-idle #p3-stage #tn-kalfx,body.p3-idle #p3-stage #etnp-sleep,
body.p3-idle #p3-stage .p3-nav{opacity:0!important;transition:opacity .9s ease!important}
body.p3-idle #p3-stage #tn-fart{animation:pcfloat 14s ease-in-out infinite alternate}
#p3-clock{position:absolute;top:11%;left:0;right:0;text-align:center;opacity:0;transition:opacity 1.1s ease;pointer-events:none;z-index:8}
body.p3-idle #p3-clock{opacity:1}
#p3-clock .pc-t{font-size:64px;font-weight:800;color:#fff;letter-spacing:.04em;
  text-shadow:0 0 30px rgba(var(--nc,255,92,92),calc(.45*var(--nk,1))),0 4px 30px rgba(0,0,0,.6)}
#p3-clock .pc-s{font-size:11px;letter-spacing:.24em;color:#96a0b2;margin-top:8px;text-transform:uppercase}
@keyframes pcfloat{from{transform:translateY(-9px) rotate(-1.1deg)}to{transform:translateY(9px) rotate(1.1deg)}}
body.p3-calm.p3-idle #p3-stage #tn-fart{animation:none}

/* GOD MODE toast */
#p3-god-toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:20;pointer-events:none;
  font-size:22px;font-weight:900;letter-spacing:.3em;color:#fff;padding:16px 26px;border-radius:18px;
  background:rgba(10,12,18,.72);border:1px solid rgba(255,255,255,.35);
  text-shadow:0 0 18px rgba(var(--nc,255,92,92),.9);box-shadow:0 0 40px rgba(var(--nc,255,92,92),.5);
  animation:p3godin 1.6s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes p3godin{0%{transform:translate(-50%,-50%) scale(.6);opacity:0}18%{transform:translate(-50%,-50%) scale(1.06);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-56%) scale(1);opacity:0}}

/* ---------- CONTROL PILL — CANONICAL (all other pill blocks are purged).
   Apple glass: ONE frosted container, bare icons inside — no per-button
   boxes, ever. Tint rides --nc from Settings. ---------- */
#p3-stage #p3-pbar{position:absolute;z-index:14;display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:54px;padding:0 10px;border-radius:999px;pointer-events:auto;
  /* THE TOKENS, verbatim — same three variables as .dk-main and .tn-player.
     Never hand-roll this recipe again: a token change must move all three bars. */
  background:var(--dkbg,linear-gradient(160deg,rgba(58,65,84,.74),rgba(26,29,40,.82)));
  -webkit-backdrop-filter:var(--dkblur,blur(24px) saturate(1.5) brightness(1.22));
          backdrop-filter:var(--dkblur,blur(24px) saturate(1.5) brightness(1.22));
  border:1px solid var(--dkbrd,rgba(var(--nc,255,92,92),.35));
  box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.20),0 0 24px var(--dkglow,rgba(var(--nc,255,92,92),.18))}
#p3-stage #p3-pbar .pb-grp{display:flex;align-items:center;gap:4px}
#p3-stage #p3-pbar .pb-grp .tn-fbtn{width:52px!important;height:50px!important;border-radius:0!important;
  background:none!important;border:0!important;box-shadow:none!important;font-size:24px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.8)) drop-shadow(0 0 8px rgba(var(--nc,255,92,92),.3))}
#p3-stage #p3-pbar .pb-grp .tn-fbtn svg{width:27px!important;height:27px!important}
#p3-stage #p3-pbar .pb-grp .tn-fbtn:active{transform:translateY(1px) scale(.92)}
#p3-stage #p3-pbar .pb-tg{display:flex;align-items:center;gap:2px}
#p3-stage #p3-pbar .pb-chip{height:50px;padding:0 12px;border-radius:0;border:0;background:none;box-shadow:none;
  color:#c9d1de;font-size:12px;font-weight:800;letter-spacing:.2em;cursor:pointer;opacity:.5}
#p3-stage #p3-pbar .pb-chip.on{opacity:1;color:#fff;background:none;border:0;box-shadow:none;
  text-shadow:0 0 10px rgba(var(--nc,255,92,92),.85),0 0 3px rgba(var(--nc,255,92,92),.6)}
/* the in-card bar now carries only the label — hide its empty button rail */
#p3-stage .tn-full-top .tn-full-topr:empty{display:none!important}

/* arrows: shy by default — tap wakes them, stillness hides them; Settings can
   force ALWAYS or OFF */
.tn-chev,#tn-chev-l,#tn-chev-r,#p3-stage .p3-nav{transition:opacity .45s ease}
body.p3-arrowhide .tn-chev,body.p3-arrowhide #tn-chev-l,body.p3-arrowhide #tn-chev-r,
body.p3-arrowhide #p3-stage .p3-nav{opacity:0!important;pointer-events:none!important}
body.p3-arrowoff .tn-chev,body.p3-arrowoff #tn-chev-l,body.p3-arrowoff #tn-chev-r,
body.p3-arrowoff #p3-stage .p3-nav{opacity:0!important;pointer-events:none!important}

/* hover arrows (desktop only) */
#p3-stage .p3-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:9;width:38px;height:70px;border:0;background:none;color:rgba(255,255,255,.35);font-size:34px;line-height:1;cursor:pointer;pointer-events:auto;transition:color .2s,text-shadow .2s;display:none}
#p3-stage .p3-nav:hover{color:var(--tn,#ff5c5c);text-shadow:0 0 14px rgba(255,92,92,.6)}
#p3-stage #p3-nav-l{left:calc(30% - 46px)}
#p3-stage #p3-nav-r{right:calc(30% - 46px)}
@media(min-width:1024px){#p3-stage .p3-nav{display:block}}

/* ============================================================
   P3 GPU DIET — phones. WebKit kills page-wide CSS transitions when
   the compositing budget blows (chip: "TURN KILLED · 0 LT"). The
   burners: 150vmax rotating blurred kaleido w/ will-change, 52px-blur
   drifting fbg wall + per-track crossfade, infinite glow/breathe loops.
   Desktop keeps full fidelity. player3.css loads last → wins ties.
   ============================================================ */
@media (pointer:coarse){
  /* kaleido: the SPIN stays — rotation was never the cost. The cost was a
     150vmax FULL-ART texture rasterized through blur() with will-change.
     Now it spins a 160px texture (naturally soft — zero blur filter) on a
     150vmin circle: ~1/5 the texture, compositor-only motion. */
  /* pseudo spin RETIRED on phones: WKWebView never repaints CSS-animated
     blended pseudos (state "running", pixels frozen). #p3-spin (real imgs,
     JS rAF — same machinery as the cube) is the spinner now. */
  .tn-full .tn-kaleido::before{ display:none !important; }
  .tn-full .tn-kaleido::after{ display:none !important; }
  /* now-playing wall: FULL-BLEED again (the shrink trick let the homescreen
     bleed through) — static, no drift, no crossfade, gentler blur. */
  .tn-full-bg{
    inset:-40px !important; left:auto !important; top:auto !important;
    width:auto !important; height:auto !important;
    transform:none !important;
    filter:blur(30px) brightness(.5) saturate(1.3) !important;
    animation:none !important; transition:none !important; will-change:auto !important;
  }
  /* perpetual repaint loops: mini-bar glow pulse, art breathe, navback pulse */
  .tn-player,.tn-player .cvbig,.tn-np-art,.tn-navback{ animation:none !important; }
  /* viewport-level aura layer off — card halos carry the glow */
  #tn-aura{ display:none !important; }
}
html.etn-ios .tn-full.open .tn-full-bg{ animation:none !important; }
@keyframes p3kalspin{
  0%{transform:translate(-50%,-50%) rotate(0deg) scale(1)}
  50%{transform:translate(-50%,-50%) rotate(180deg) scale(1.08)}
  100%{transform:translate(-50%,-50%) rotate(360deg) scale(1)}
}
@keyframes p3kalspin2{
  0%{transform:translate(-50%,-50%) scaleX(-1) rotate(0deg) scale(1.05)}
  100%{transform:translate(-50%,-50%) scaleX(-1) rotate(-360deg) scale(1.05)}
}
/* wrapper memory-warning bridge: shed the heavy layers live */
html.p3-lowmem .tn-kaleido,html.p3-lowmem #tn-aura{ display:none !important; }
html.p3-lowmem .tn-full-bg{ background-image:none !important; }

/* ============ THE WALL: hide home content under the open player ============
   The player glass stays transparent to the SCENE (that's the coloring), but
   home content / mini bar / dock must never ghost through it. */
body.p3-open .tn-wrap{ visibility:hidden !important; }
body.p3-open .tn-player{ visibility:hidden !important; }
body.p3-open #p3-docknav{ opacity:0 !important; pointer-events:none !important; }

/* (pill v3 duplicates purged — the canonical pill block is the only authority) */

/* ============ PLAYLIST FORGE + face-3 build chip ============ */
#tn-toppl .tn-side-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.p3-forge-btn{flex:0 0 auto;cursor:pointer;font:800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;color:rgb(var(--nc,255,92,92));background:rgba(var(--nc,255,92,92),.12);
  border:1px solid rgba(var(--nc,255,92,92),.5);border-radius:999px;padding:6px 11px;
  text-shadow:0 0 8px rgba(var(--nc,255,92,92),.6);box-shadow:0 0 12px rgba(var(--nc,255,92,92),.22);
  -webkit-tap-highlight-color:transparent}
.p3-forge-btn:active{background:rgba(var(--nc,255,92,92),.28)}
.p3-forge-row .lib-cvfb{color:rgb(var(--nc,255,92,92));text-shadow:0 0 10px rgba(var(--nc,255,92,92),.7)}
.p3-forge-row .lr-c{color:rgb(var(--nc,255,92,92))}
.p3-forge{display:flex;flex-direction:column;gap:8px}
.p3-forge .pf-q{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:12px;font-size:16px;
  color:#fff;outline:none;font-family:inherit;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.p3-forge .pf-q:focus{border-color:rgba(var(--nc,255,92,92),.6);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),0 0 14px rgba(var(--nc,255,92,92),.25)}
.pf-res{display:flex;flex-direction:column;gap:2px;max-height:216px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pf-row{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.pf-row:active{background:rgba(var(--nc,255,92,92),.12);border-color:rgba(var(--nc,255,92,92),.35)}
.pf-row img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.pf-row span{flex:1;min-width:0;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-row em{font-size:10px;color:var(--e-mute,#8b93a1);font-style:normal;flex:0 0 auto}
.pf-picked{display:flex;flex-wrap:wrap;gap:8px;min-height:30px;padding:2px 0}
.pf-chip{cursor:pointer;font-size:11.5px;font-weight:700;color:#fff;padding:8px 13px;border-radius:999px;
  background:rgba(var(--nc,255,92,92),.16);border:1px solid rgba(var(--nc,255,92,92),.55);
  box-shadow:0 0 10px rgba(var(--nc,255,92,92),.2);-webkit-tap-highlight-color:transparent}
.pf-hint{font-size:11px;color:var(--e-mute,#8b93a1);letter-spacing:.04em;line-height:1.5}
.pf-lab{font:700 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.26em;color:var(--e-mute,#8b93a1);margin-top:4px}
.pf-seg{display:flex;gap:8px}
.pf-seg button{flex:1;cursor:pointer;font:800 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.12em;
  color:var(--e-mute,#8b93a1);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:11px 0;-webkit-tap-highlight-color:transparent}
.pf-seg button.on{color:#fff;border-color:rgba(var(--nc,255,92,92),.65);background:rgba(var(--nc,255,92,92),.14);
  box-shadow:0 0 12px rgba(var(--nc,255,92,92),.25);text-shadow:0 0 8px rgba(var(--nc,255,92,92),.6)}
.pf-go{margin-top:6px;cursor:pointer;font:800 13px/1 ui-monospace,Menlo,monospace;letter-spacing:.2em;
  color:#10130f;background:rgb(var(--nc,255,92,92));border:0;border-radius:999px;padding:15px 0;
  box-shadow:0 0 26px rgba(var(--nc,255,92,92),.5),inset 0 1px 0 rgba(255,255,255,.35);-webkit-tap-highlight-color:transparent}
.pf-go:disabled{opacity:.45;box-shadow:none}
#p3-forge-ov .tn-pl-modal{max-height:88vh}
/* (FX chip + sleep moon are placed by JS on the line under the pill) */

/* the legacy "Favorites · N songs" re-injection: unstamped rows never paint.
   CSS-only — the DOM war (remove/re-add observer spiral) froze the page. */
#tn-toppl .tn-side-row:not([data-plid]){ display:none !important; }

/* ============ TN-FULL STRAY KILLER (JS-independent) ============
   The card glass is translucent by design; the legacy engine keeps relic
   layers INSIDE #tn-full (lyrics pane, labels) that ghost through it — the
   "JOHNNY CASH" text. Everything in tn-full except the walls goes blind
   while open. visibility (not display): engines can still measure, audio
   elements unaffected. */
#tn-full.open > *:not(.tn-full-bg):not(#tn-fbg):not(.tn-kaleido):not(#tn-kaleido):not(#tn-aura):not(.tn-full-top):not(.tn-full-body):not(#p3-spin){
  visibility:hidden !important;   /* #p3-spin excepted — the killer was blinding our own spinner */
}
/* feather the spin disc's edge (no-blur layer = hard rim without this) */
@media (pointer:coarse){
  .tn-full .tn-kaleido::before{
    -webkit-mask-image:radial-gradient(circle,#000 52%,transparent 71%) !important;
            mask-image:radial-gradient(circle,#000 52%,transparent 71%) !important;
  }
}

/* ============ SONG ROWS (phone): bigger type, bigger targets, and the
   "⋯" menu gets its own slot — it was absolutely parked ON the duration ============ */
@media (max-width:900px){
  .tn-row{ padding:10px 10px !important; gap:12px !important; }
  .tn-row .cv{ width:50px !important; height:50px !important; border-radius:9px !important; font-size:15px !important; }
  .tn-row .tt{ font-size:15.5px !important; }
  .tn-row .ta{ font-size:12.5px !important; margin-top:3px !important; }
  .tn-row .tdur{ font-size:12px !important; min-width:40px !important; }
  .tn-row .tn-heart{ font-size:18px !important; width:32px !important; opacity:.7 !important; }
  .tn-row .tn-pladd{ width:34px !important; height:34px !important; opacity:.8 !important; }
  .tn-row .tn-pladd svg{ width:20px !important; height:20px !important; }
  .tn-row .tn-dots,.tn-row .tn-more{
    position:static !important; margin:0 0 0 2px !important; flex:0 0 auto !important;
    width:36px !important; height:36px !important; display:flex !important;
    align-items:center !important; justify-content:center !important;
    font-size:22px !important; background:none !important; border:0 !important;
  }
  .tn-row .etnadm-row-x{ flex:0 0 auto !important; position:static !important; }
}

/* play/pause gets its OWN color channel (Settings → PLAY BUTTON COLOR),
   falling back to transport color, then theme */
#p3-stage #tn-fplay{color:var(--tnppl,var(--tnplay,var(--tn,#ff5c5c)))!important;
  border-color:var(--tnppl,var(--tnplay,var(--tn,#ff5c5c)))!important;
  box-shadow:0 0 calc(30px*var(--nk,1)) rgba(var(--ncppl,var(--ncplay,var(--nc,255,92,92))),calc(.55*var(--nk,1))),inset 0 1px 0 rgba(255,255,255,.25)!important}

/* the spin is the SIGNATURE — THREE legacy pausers were freezing it:
   (1) .tn-full:not(.playing) — paused !important unless the engine's
       .playing class is set (froze it even mid-playback when that class
       lags, and always when paused — both his repros),
   (2) html.etn-eco (his Eco setting),
   (3) html.etn-kpause (symbiote pause-state).
   Equal-or-higher specificity, later sheet: running, always. */
.tn-full:not(.playing) .tn-kaleido,
.tn-full:not(.playing) .tn-kaleido::before,
.tn-full:not(.playing) .tn-kaleido::after,
html.etn-eco .tn-full .tn-kaleido::before,html.etn-eco .tn-full .tn-kaleido::after,
html.etn-kpause .tn-full .tn-kaleido::before,html.etn-kpause .tn-full .tn-kaleido::after,
html.etn-eco .tn-full .tn-kaleido,html.etn-kpause .tn-full .tn-kaleido,
.tn-full .tn-kaleido::before,.tn-full .tn-kaleido::after{
  animation-play-state:running !important;
}


/* ============ #p3-spin — the JS spinner (two real art layers) ============ */
#p3-spin{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(150% 150% at 50% 44%,#000 62%,transparent 100%);
          mask-image:radial-gradient(150% 150% at 50% 44%,#000 62%,transparent 100%)}
#p3-spin .psp{position:absolute;left:50%;top:50%;width:60vmin;height:60vmin;object-fit:cover;
  border-radius:50%;will-change:transform;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 60%,transparent 86%);
          mask-image:radial-gradient(circle,#000 60%,transparent 86%)}
#p3-spin .psp-a{mix-blend-mode:screen;opacity:.72;filter:saturate(1.6)}
#p3-spin .psp-b{mix-blend-mode:screen;opacity:.48;filter:saturate(1.35) hue-rotate(55deg)}
html.p3-lowmem #p3-spin{display:none!important}

/* player-open: the neon logo header lives OUTSIDE .tn-wrap — it was the
   last homescreen ghost above the card. Blind it with the rest. */
body.p3-open .emtac-head,body.p3-open #tn-brandmark,body.p3-open .tn-navback{ visibility:hidden !important; }
/* symbiote auto-tint: the engine steps --khue in jumps — glide between them */
.tn-full .tn-symb-tint{ transition:background-color 1.4s linear, opacity .5s ease !important; }

/* ghosts named by live-DOM census: banner, legacy skin bg, and the engine
   HUD (z-index 99998 — it floats OVER the player). All blind while open. */
body.p3-open .banner,body.p3-open #sk-bg,body.p3-open #etn-hud{ visibility:hidden !important; }
/* FX chip + sleep moon: guaranteed tappable on the stage */
#p3-stage #tn-kalfx,#p3-stage #etnp-sleep{ pointer-events:auto !important; z-index:16 !important; }

/* GRADIENT backdrop layers — pure CSS textures on the spinner machinery,
   tinted by --nc so Settings/theme drive the palette. Rendered once, then
   compositor-rotated: the cheapest possible "moving" backdrop. */
#p3-spin .psg{display:none;background:
  conic-gradient(from 0deg,
    rgba(var(--nc,255,92,92),.5) 0deg, transparent 70deg,
    rgba(var(--nc,255,92,92),.22) 130deg, transparent 200deg,
    rgba(var(--nc,255,92,92),.4) 260deg, transparent 330deg,
    rgba(var(--nc,255,92,92),.5) 360deg)}
#p3-spin .psg-a{mix-blend-mode:screen;opacity:.55}
#p3-spin .psg-b{mix-blend-mode:screen;opacity:.35;filter:hue-rotate(70deg)}

/* VAPOR backdrop: two soft fog blobs, different hues (psg-b is hue-rotated),
   sliding against each other = slow color morphing with zero filters/frame */
#p3-spin.p3-vapor .psg{background:
  radial-gradient(circle at 36% 40%, rgba(var(--nc,255,92,92),.55), transparent 58%),
  radial-gradient(circle at 68% 64%, rgba(var(--nc,255,92,92),.32), transparent 52%)}

/* ============ MINI PLAYER — CANONICAL GLASS ============
   Identical tokens to the dock, last in the cascade: every earlier
   .tn-player skin (incl. the coral-border relics) loses by order. */
@media (max-width:900px){
  .tn-player{
    background:var(--dkbg) !important;
    -webkit-backdrop-filter:var(--dkblur) !important;backdrop-filter:var(--dkblur) !important;
    border:1px solid var(--dkbrd) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.20),0 0 24px var(--dkglow) !important;
    /* 1.5× mini: 64 → 96px — real thumb targets (the dock re-measures its
       perch from the mini's rect, so it rides up automatically) */
    height:96px !important;min-height:96px !important;padding:0 16px !important;gap:14px !important;
  }
  .tn-player .tn-npcover,.tn-player img,.tn-player .pcv{width:64px !important;height:64px !important;border-radius:16px !important}
  .tn-player .tn-npt,.tn-player .tn-np-t{font-size:16px !important}
  .tn-player .tn-npa,.tn-player .tn-np-a{font-size:12.5px !important}
  .tn-player button,.tn-player .tn-btn{width:58px !important;height:58px !important}
  .tn-player button svg{width:30px !important;height:30px !important}
  .tn-player .tn-play,.tn-player [id*=play]{width:74px !important;height:74px !important}
  .tn-player .tn-play svg,.tn-player [id*=play] svg{width:34px !important;height:34px !important}
}

/* top tab row: HOME + the magnifier pill retire — the dock anchors both.
   SONGS / ARTISTS / GENRES / GENERATIONS stay. (Programmatic topTab('home')
   clicks still work on the hidden tab — stop-goes-home is unaffected.) */
.tn-tab[data-tab="home"],#p3-searchtab{ display:none !important; }

/* ============ SPECIFICITY HAMMER + MINI REVAMP ============
   Theme packs style .tn-player via body.p3-theme-* (2-class selectors) and
   were re-tinting the border coral over the tokens. body[class] ties them;
   last file wins. NOTHING outranks this without a new id. */
@media (max-width:900px){
  body .tn-player,body[class] .tn-player{
    background:var(--dkbg) !important;
    -webkit-backdrop-filter:var(--dkblur) !important;backdrop-filter:var(--dkblur) !important;
    border:1px solid var(--dkbrd,rgba(var(--nc,255,92,92),.35)) !important;
    box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.20),0 0 24px var(--dkglow) !important;
  }
  /* mini layout: [art][titles — roomy, marquee][prev][play][next][small x] */
  #tn-ashuf,.tn-player [id*=shuf]{ display:none !important; }
  body .tn-player .tn-ctrls{ gap:6px !important; flex:0 0 auto !important; }
  body .tn-player .tn-xstop{ width:38px !important; height:38px !important; flex:0 0 auto !important;
    opacity:.55 !important; margin-left:0 !important; font-size:15px !important; }
  body .tn-player .tn-xstop svg{ width:16px !important; height:16px !important; }
  body .tn-player .tn-np{ flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; cursor:pointer; }
  .tn-player .tn-np-t,.tn-player .tn-npt,.tn-player .tn-np-a,.tn-player .tn-npa{
    overflow:hidden !important; white-space:nowrap !important; display:block; max-width:100%; }
  .tn-player .p3-marq{ animation:p3marq 9s linear 1.4s infinite alternate; }
  @keyframes p3marq{ 0%,12%{transform:translateX(0)} 88%,100%{transform:translateX(var(--mq,-40px))} }
}

/* ============ TRANSPORT SYMMETRY + PILL BREATHING ROOM ============ */
/* the "\u2026" is retired — its actions live under the pill's \u2795 */
#p3-stage .tn-full-ctrls .tn-np-more,#p3-stage .tn-full-ctrls .tn-more-btn,
#p3-stage .tn-full-ctrls .tn-more-mini,#p3-stage .tn-full-ctrls [id*=more],
#p3-stage .tn-full-ctrls .tn-more{ display:none !important; }
/* even five: shuffle · prev · PLAY · next · repeat */
#p3-stage #tn-fshuf{ order:1 !important; }
#p3-stage #tn-fprev{ order:2 !important; }
#p3-stage #tn-fplay{ order:3 !important; }
#p3-stage #tn-fnext{ order:4 !important; }
#p3-stage #tn-frepeat{ order:5 !important; }
/* pill: six icons breathe; BASS/LOUD become a stacked mini-column */
#p3-stage #p3-pbar .pb-grp .tn-fbtn{ width:44px !important; height:48px !important; font-size:21px !important; }
#p3-stage #p3-pbar .pb-grp .tn-fbtn svg{ width:23px !important; height:23px !important; }
#p3-stage #p3-pbar .pb-tg{ flex-direction:column !important; gap:0 !important; margin-left:2px; }
#p3-stage #p3-pbar .pb-chip{ height:24px !important; padding:0 9px !important; font-size:10px !important; letter-spacing:.16em !important; }

/* ============ EQ RACK: 3x2 chip grid, level colors ============ */
#p3-stage #p3-pbar .pb-tg{
  display:grid !important; flex-direction:unset !important;
  grid-template-rows:24px 24px; grid-auto-flow:column;
  gap:1px 3px; margin-left:2px; align-items:center;
}
#p3-stage #p3-pbar .pb-chip{
  height:24px !important; padding:0 7px !important;
  font-size:9.5px !important; letter-spacing:.12em !important;
  opacity:.42; color:#c9d1de; text-align:center;
}
#p3-stage #p3-pbar .pb-chip.lv1{ opacity:1 !important; color:#25e0ff !important;
  text-shadow:0 0 9px rgba(37,224,255,.85),0 0 2px rgba(37,224,255,.5) !important; }
#p3-stage #p3-pbar .pb-chip.lv2{ opacity:1 !important; color:#ffb02e !important;
  text-shadow:0 0 9px rgba(255,176,46,.85),0 0 2px rgba(255,176,46,.5) !important; }
#p3-stage #p3-pbar .pb-chip.lv3{ opacity:1 !important; color:#ff2ea6 !important;
  text-shadow:0 0 11px rgba(255,46,166,.95),0 0 3px rgba(255,46,166,.6) !important; }

/* + menu: glass line-icons, no emoji */
#p3-sheet .pa-act{display:flex;align-items:center;gap:13px}
#p3-sheet .pa-act svg{flex:0 0 auto;opacity:.92;color:var(--dkact,#fff);
  filter:drop-shadow(0 0 6px rgba(var(--nc,255,92,92),.35))}
#p3-sheet .pa-act span{flex:1}

/* ============ GLASS FIELDS — no naked inputs, EVER ============
   One high-end recipe for every text field in our sheets and overlays:
   full-width lens of smoked glass, neon caret, neon focus bloom. */
#p3-sheet input[type="text"],#p3-sheet input[type="search"],#p3-sheet input.lib-filter,
#p3-sheet #p3pt,#p3-forge-ov .pf-q,.tn-pl-modal input[type="text"]{
  display:block !important; width:100% !important; box-sizing:border-box !important;
  padding:16px 18px !important; margin:2px 0 !important;
  border-radius:16px !important;
  font-size:17px !important; font-weight:600 !important; font-family:inherit !important;
  color:#fff !important; -webkit-appearance:none !important; appearance:none !important; outline:none !important;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03)) !important;
  border:1px solid rgba(var(--nc,255,92,92),.38) !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.07),
    0 0 18px rgba(var(--nc,255,92,92),.15) !important;
  caret-color:rgb(var(--nc,255,92,92)) !important;
  transition:border-color .22s ease, box-shadow .22s ease !important;
}
#p3-sheet input:focus,#p3-forge-ov .pf-q:focus,.tn-pl-modal input:focus{
  border-color:rgba(var(--nc,255,92,92),.85) !important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.09),
    0 0 26px rgba(var(--nc,255,92,92),.4),0 0 3px rgba(var(--nc,255,92,92),.6) !important;
}
#p3-sheet input::placeholder,#p3-forge-ov .pf-q::placeholder,.tn-pl-modal input::placeholder{
  color:rgba(255,255,255,.34) !important; letter-spacing:.04em !important; font-weight:500 !important;
}
#p3-sheet input::selection,#p3-forge-ov .pf-q::selection{
  background:rgba(var(--nc,255,92,92),.45) !important; color:#fff !important;
}
/* iOS autofill tries to paint it white — never */
#p3-sheet input:-webkit-autofill,#p3-forge-ov input:-webkit-autofill{
  -webkit-text-fill-color:#fff !important;
  box-shadow:inset 0 0 0 1000px rgba(22,26,38,.94),0 0 18px rgba(var(--nc,255,92,92),.15) !important;
}

/* section labels: quiet neon signature, everywhere in our sheets */
#p3-sheet .sh-sec{
  color:rgb(var(--nc,255,92,92)) !important;
  text-shadow:0 0 11px rgba(var(--nc,255,92,92),.5),0 0 2px rgba(var(--nc,255,92,92),.35) !important;
  letter-spacing:.3em !important;
}
#p3-forge-ov .pf-lab{
  color:rgb(var(--nc,255,92,92)) !important;
  text-shadow:0 0 10px rgba(var(--nc,255,92,92),.45) !important;
  letter-spacing:.28em !important;
}

/* the prompt's CREATE: a real CTA, not a grey row */
#p3-sheet #p3ptgo{
  display:block !important; width:100% !important; box-sizing:border-box !important;
  margin-top:16px !important; padding:16px 0 !important;
  border-radius:999px !important; text-align:center !important;
  background:rgb(var(--nc,255,92,92)) !important; color:#10130f !important;
  font-weight:800 !important; font-size:13px !important; letter-spacing:.26em !important;
  border:0 !important; cursor:pointer !important;
  box-shadow:0 0 28px rgba(var(--nc,255,92,92),.55),inset 0 1px 0 rgba(255,255,255,.35) !important;
  text-shadow:none !important;
}
#p3-sheet #p3ptgo:active{ transform:translateY(1px); box-shadow:0 0 36px rgba(var(--nc,255,92,92),.75),inset 0 1px 0 rgba(255,255,255,.35) !important; }

/* TAP acknowledgment: the chip fires on every hit */
#p3-stage #tn-tap{transition:box-shadow .15s ease,color .15s ease,border-color .15s ease}
#p3-stage #tn-tap.tp-hit{color:#fff!important;border-color:rgb(var(--nc,255,92,92))!important;
  box-shadow:0 0 16px rgba(var(--nc,255,92,92),.75),0 0 4px rgba(var(--nc,255,92,92),.5)!important}

/* OFFLINE shelf */
.p3-off-row{position:relative}
.p3-off-x{flex:0 0 auto;width:34px;height:34px;border-radius:10px;border:0;background:none;
  color:rgba(255,255,255,.45);font-size:14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.p3-off-x:active{color:rgb(var(--nc,255,92,92))}

/* ============ INTENTIONAL MENUS — heavier hand, nothing delicate ============ */
#p3-sheet .sh-row{
  padding:16px 16px !important; margin-bottom:9px !important;
  border-radius:15px !important;
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
  font-size:15px !important; font-weight:700 !important;
}
#p3-sheet .sh-row:active{
  border-color:rgba(var(--nc,255,92,92),.6) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 16px rgba(var(--nc,255,92,92),.28) !important;
}
#p3-sheet .sh-seg .sh-opt{
  padding:13px 0 !important; font-size:11.5px !important; font-weight:800 !important;
  letter-spacing:.16em !important; border-radius:12px !important;
  border:1px solid rgba(255,255,255,.16) !important;
  background:rgba(255,255,255,.04) !important;
}
#p3-sheet .sh-seg .sh-opt.on{
  border-color:rgba(var(--nc,255,92,92),.75) !important;
  background:rgba(var(--nc,255,92,92),.14) !important;
  box-shadow:0 0 14px rgba(var(--nc,255,92,92),.35) !important;
  color:#fff !important;
}
#p3-sheet .sh-sec{ margin-top:22px !important; margin-bottom:10px !important; font-size:10.5px !important; }
.tn-pl-modal .tn-pl-opt{
  padding:14px 14px !important; margin-bottom:6px !important; border-radius:14px !important;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.018)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  font-weight:700 !important;
}
.tn-pl-modal .tn-pl-opt:active{ border-color:rgba(var(--nc,255,92,92),.55) !important; }


/* ============ BIG LIST ART — LAST WORD (nothing may follow this) ============ */
@media(max-width:900px){
  #p3-stage .p3-hgrid .tn-side-row:nth-child(6n),#p3-stage .p3-hgrid .tn-reco-row:nth-child(6n){border-bottom:1px solid rgba(255,255,255,.05)!important}
  #p3-stage .p3-hgrid .tn-side-row:nth-child(4n),#p3-stage .p3-hgrid .tn-reco-row:nth-child(4n){border-bottom:0!important}
  /* 2.25x list art: the covers carry the row now */
  #p3-stage .tn-reco-row .cv,#p3-stage .tn-side-cv{width:95px!important;height:95px!important;border-radius:14px!important;
    box-shadow:0 0 0 1px rgba(255,255,255,.09),0 6px 18px rgba(0,0,0,.45),0 0 16px rgba(var(--nc,255,92,92),.14)!important}
  #p3-stage .tn-side-row .tn-side-t{font-size:16px!important;font-weight:700!important}
  #p3-stage .tn-side-row .tn-side-a{font-size:12.5px!important;margin-top:3px!important}
  #p3-stage .tn-reco-row,#p3-stage .tn-side-row{gap:14px!important;padding:6px 12px!important}
}

/* the minimize chevron: unmissable */
#p3-stage #p3-pbar #tn-fclose svg{width:30px!important;height:30px!important}
#p3-stage #p3-pbar #tn-fclose{filter:drop-shadow(0 1.5px 1px rgba(0,0,0,.8)) drop-shadow(0 0 10px rgba(var(--nc,255,92,92),.45))!important}

/* ============ SHEETS v3 — APPLE GRAMMAR, EMTAC GLASS ============
   Their structure copied faithfully: grabber, left-aligned large title,
   sticky segmented tabs, muted uppercase group headers, solid grouped rows.
   Our materials: smoked glass + one disciplined neon accent. */
#p3-sheet .sh-grip{width:38px!important;height:5px!important;border-radius:3px!important;
  background:rgba(255,255,255,.28)!important;margin:10px auto 6px!important}
#p3-sheet .sh-t{text-align:left!important;font-size:22px!important;font-weight:800!important;
  letter-spacing:.01em!important;color:#fff!important;text-shadow:none!important;
  padding:4px 20px 10px!important}
.sh-tabs{position:sticky;top:0;z-index:6;display:flex;gap:5px;padding:5px;margin:0 2px 16px;
  border-radius:13px;background:rgba(16,18,28,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.sh-tab{flex:1;padding:11px 0;border:0;border-radius:9px;background:none;cursor:pointer;
  color:rgba(235,240,255,.5);font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.14em;
  -webkit-tap-highlight-color:transparent;transition:color .15s,background .15s}
.sh-tab.on{background:rgba(var(--nc,255,92,92),.16);color:#fff;
  box-shadow:0 0 12px rgba(var(--nc,255,92,92),.28),inset 0 1px 0 rgba(255,255,255,.12)}
/* group headers: Apple's footnote style — left, muted, quiet */
#p3-sheet .sh-sec{text-align:left!important;color:rgba(235,240,255,.48)!important;
  text-shadow:none!important;font-size:11px!important;font-weight:700!important;
  letter-spacing:.12em!important;margin:22px 6px 8px!important}
#p3-sheet .sh-pane>.sh-sec:first-child{margin-top:4px!important}
/* notes read like Apple footers */
#p3-sheet .sh-note{color:rgba(235,240,255,.4)!important;font-size:11.5px!important;
  line-height:1.5!important;margin:8px 6px 0!important;text-align:left!important}

/* ============ GLOW DISCIPLINE — one elevation, one accent ============
   Ambient depth everywhere; neon reserved for the ACTIVE thing. */
#p3-sheet .sh-row,.tn-pl-modal .tn-pl-opt{
  box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)!important}
#p3-sheet .sh-row:active{
  box-shadow:0 6px 16px rgba(0,0,0,.35),0 0 14px rgba(var(--nc,255,92,92),.3)!important}
#p3-sheet .sh-seg .sh-opt{box-shadow:0 4px 12px rgba(0,0,0,.3)!important;text-shadow:none!important}
#p3-sheet .sh-seg .sh-opt.on{
  box-shadow:0 4px 12px rgba(0,0,0,.3),0 0 13px rgba(var(--nc,255,92,92),.32)!important}
#p3-sheet .sh-sw{box-shadow:0 4px 12px rgba(0,0,0,.4)!important}
#p3-sheet .sh-sw.on{box-shadow:inset 0 2px 5px rgba(255,255,255,.4),0 0 16px var(--sw),0 4px 12px rgba(0,0,0,.4)!important}

/* ============ SHEET FRAME: fixed 75vh, live-preview glass ============
   The card's size is a CONSTANT — switching tabs swaps content inside a
   frame that never moves. Translucent enough to watch theme/color changes
   apply to the app behind it in real time. */
#p3-sheet .sh-card{
  height:75vh !important; min-height:75vh !important; max-height:75vh !important;
  display:flex !important; flex-direction:column !important;
  background:linear-gradient(170deg,rgba(24,27,40,.55),rgba(11,13,21,.64)) !important;
  -webkit-backdrop-filter:blur(26px) saturate(1.5) !important;
          backdrop-filter:blur(26px) saturate(1.5) !important;
  border:1px solid rgba(var(--nc,255,92,92),.28) !important;
  box-shadow:0 -18px 50px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14),0 0 30px rgba(var(--nc,255,92,92),.12) !important;
}
#p3-sheet .sh-grip,#p3-sheet .sh-t{flex:0 0 auto !important}
#p3-sheet .sh-b{
  flex:1 1 auto !important; min-height:0 !important;
  overflow-y:auto !important; -webkit-overflow-scrolling:touch !important;
  padding-bottom:24px !important;
}

/* content-sized sheets (wallpaper popout): frame hugs content, backdrop
   stays tappable-to-close everywhere above it */
#p3-sheet.sh-auto .sh-card{height:auto !important;min-height:0 !important;max-height:78vh !important}
#p3-sheet #sh-wallback{margin-bottom:14px !important;color:rgb(var(--nc,255,92,92)) !important;font-weight:800 !important}

/* ---------- PLAYBACK LOG (SYSTEM tab forensics) ---------- */
#sh-diagbox .p3dg{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.55;margin:0;padding:3px 2px;opacity:.85}

/* ============ DEPTH — static press feedback (gyro removed) ============
   No motion, no gyro, no moving glare. Controls press INTO the glass on tap;
   album art wears a STATIC top sheen reading one light from above. */
#p3-stage .tn-fbtn:active,
#p3-stage #p3-pbar .pb-chip:active,
#p3-sheet .sh-row:active,
#p3-sheet .sh-opt:active,
#p3-docknav .dk-it:active{
  transform:scale(.95);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .08s ease,box-shadow .08s ease}
/* album art: fixed top-light sheen (no tilt) — the cover reads as a lit slab */
#p3-stage #tn-fart{position:relative!important}
#p3-stage #tn-fart::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:4;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03) 20%,transparent 40%);mix-blend-mode:screen}

/* ============ TRANSPORT CLARITY ============
   shuffle/repeat rest MUTED grey so their ACTIVE state actually reads (they used
   to be permanently neon-tinted, so shuffle looked "stuck on"). focus never
   sticks after a tap (iOS keeps :focus otherwise, another false "highlight"). */
#p3-stage .tn-full-ctrls #tn-fshuf,#p3-stage .tn-full-ctrls #tn-frepeat{color:rgba(255,255,255,.48)!important;opacity:1!important;transition:color .15s,filter .15s}
#p3-stage .tn-full-ctrls #tn-frepeat.on,#p3-stage .tn-full-ctrls #tn-fshuf.on{color:var(--tn,#ff5c5c)!important;filter:drop-shadow(0 0 9px rgba(var(--nc,255,92,92),.75))!important}
#p3-stage .tn-full-ctrls #tn-frepeat.rq{color:#25e0ff!important;filter:drop-shadow(0 0 9px rgba(37,224,255,.8))!important}
#p3-stage .tn-full-ctrls .tn-btn:focus{outline:none!important}

/* TAP tempo chip removed per user request (never worked reliably in the wrapper) */
#tn-tap,#p3-stage #tn-tap{display:none!important}

/* ============ BUTTON MATERIAL — controls read as raised glass ============
   Faux-glass (fill + bevel + layered shadow), NOT a per-button backdrop-filter:
   that would be glass-on-glass (Apple says don't) and would cook the GPU. Uses the
   DEPTH v3 tokens. The big play button keeps its own neon identity. */
/* transport controls sit OVER the artwork (not on the pill) -> real glass is fine
   here (not glass-on-glass). small 7px radius keeps the GPU cost low. */
#p3-stage .tn-full-ctrls .tn-btn:not(#tn-fplay){border-radius:50%!important;
  background:radial-gradient(130% 130% at 50% 0,rgba(255,255,255,.16),rgba(255,255,255,.05) 62%)!important;
  -webkit-backdrop-filter:blur(7px) saturate(1.5);backdrop-filter:blur(7px) saturate(1.5);
  border:1px solid rgba(255,255,255,.20)!important;
  box-shadow:var(--el2),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -2px 5px rgba(0,0,0,.32)!important}
#p3-stage #tn-fprev,#p3-stage #tn-fnext{background:radial-gradient(130% 130% at 50% 0,rgba(255,255,255,.20),rgba(255,255,255,.06) 62%)!important}
/* pill icon buttons + EQ chips live ON the glass pill -> faux-glass (rim + bevel),
   never their own blur (glass-on-glass = muddy + hot) */
#p3-stage #p3-pbar .tn-fbtn{background:rgba(255,255,255,.06)!important;border-radius:12px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 2px rgba(0,0,0,.3),0 1px 2px rgba(6,9,16,.3)!important}
#p3-stage #p3-pbar .pb-chip{background:rgba(255,255,255,.05)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(6,9,16,.3)!important}
#p3-sheet .sh-opt{box-shadow:var(--el1),var(--bevel)!important}
#p3-sheet .sh-seg .sh-opt.on,#p3-sheet .sh-row.onrow{box-shadow:var(--el1),inset 0 1px 0 rgba(255,255,255,.20),0 0 16px var(--dkglow)!important}

/* ============ PANE OF GLASS — window = one frosted sheet, elements = floating pills ==========
   The backdrop (.tn-full-bg = blurred cover art) is tinted to slate + blended so the whole
   window reads as ONE frosted pane. Everything layered on it (art, controls, seek, volume)
   hovers as its own pill with real elevation, so nothing looks pasted-on flat. */
@media(max-width:900px){
  /* PUSHED BACK: the art is a distant, dark, heavily-blurred colour wash so the
     glass card floats clearly in FRONT of it (real front/back separation). */
  .tn-full-bg{background-color:rgba(9,11,18,.6)!important;background-blend-mode:multiply!important;
    filter:blur(72px) brightness(.4) saturate(1.3)!important;transform:scale(1.14)!important}
}
/* the album cover floats highest — deepest lift + rim + glow */
#p3-stage #tn-fart{box-shadow:0 36px 84px rgba(6,9,16,.72),0 14px 32px rgba(6,9,16,.52),0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22),0 0 calc(58px*var(--nk,1)) var(--artglow,rgba(255,92,92,.42)),0 0 calc(120px*var(--nk,1)) var(--artglow2,rgba(255,92,92,.16))!important}
/* transport controls hover as glass pills (stronger lift than resting el1) */
#p3-stage .tn-full-ctrls .tn-btn:not(#tn-fplay){box-shadow:var(--el3),inset 0 1px 0 rgba(255,255,255,.30),inset 0 -2px 5px rgba(0,0,0,.32)!important}
/* seek + volume become raised glass pills floating on the pane */
#p3-stage .tn-full-seek,#p3-stage #p3-vol{background:rgba(255,255,255,.05)!important;border-radius:999px!important;padding:7px 14px!important;
  box-shadow:var(--el2),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 2px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4)}
/* the meta block gets a hair of separation so the title floats off the pane too */
#p3-stage .tn-full-meta .tn-full-t{text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7),0 0 26px rgba(0,0,0,.6)!important}

/* ============ PHOTOREAL GRAIN — breaks the smooth-gradient "CGI/cartoon" look ==========
   A faint film grain over the whole player. Real surfaces have micro-texture; perfectly
   smooth gradients read as fake. pointer-events:none, overlay blend, ~4% so it's felt not seen. */
#tn-full.open::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6;opacity:.035;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px}

/* ============================================================
   SETTINGS: ADMIN DENSITY PASS — serious, precise, zero toy chrome.
   Mono microlabels, hairline separation, filled tracks, live readouts.
   ============================================================ */
#p3-sheet .sh-row{padding:10px 12px!important;border-radius:10px!important}
#p3-sheet .sh-h{font-family:'SF Mono',ui-monospace,monospace!important;font-size:10px!important;letter-spacing:.2em!important;text-transform:uppercase}
#p3-sheet .sh-note{font-size:10px!important;letter-spacing:.04em;color:#7b8494!important}
#p3-sheet .sh-dim,#p3-sheet .sh-max{font-size:9px!important;letter-spacing:.14em!important;text-transform:uppercase;color:#61697a!important}
#p3-sheet input[type=range].sh-range{height:26px;-webkit-appearance:none;appearance:none;background:transparent}
#p3-sheet input[type=range].sh-range::-webkit-slider-runnable-track{height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(var(--nc,255,92,92),.9) var(--_fill,50%),rgba(255,255,255,.12) var(--_fill,50%));
  box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
#p3-sheet input[type=range].sh-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6.5px;border-radius:50%;
  background:#fff;border:2px solid rgb(var(--nc,255,92,92));box-shadow:0 0 10px rgba(var(--nc,255,92,92),.7)}
.sh-val{font-family:'SF Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.06em;color:rgb(var(--nc,255,92,92));min-width:34px;text-align:right;flex:0 0 auto;margin-left:8px}

/* ============================================================
   SEEK v2: LED RAIL — segmented meter, hard precision, scrub bubble.
   ============================================================ */
#tn-full .tn-bar{height:14px!important;background:transparent!important;-webkit-appearance:none}
#tn-full .tn-bar::-webkit-slider-runnable-track{height:14px;border-radius:4px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.55) 0 2px,transparent 2px 6px),
    linear-gradient(90deg,rgba(var(--nc,255,92,92),.95) var(--_fill,0%),rgba(255,255,255,.08) var(--_fill,0%));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5),0 0 12px rgba(var(--nc,255,92,92),calc(.20*var(--nk,1)))}
#tn-full .tn-bar::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:22px;margin-top:-4px;border-radius:3px;
  background:#fff;box-shadow:0 0 10px rgba(var(--nc,255,92,92),.9),0 0 2px #fff}
#p3-scrubtip{position:fixed;z-index:400;transform:translate(-50%,-140%);padding:6px 10px;border-radius:8px;
  font:700 11px/1 'SF Mono',ui-monospace,monospace;letter-spacing:.06em;color:#0a0c10;
  background:rgb(var(--nc,255,92,92));box-shadow:0 6px 18px rgba(var(--nc,255,92,92),.5);pointer-events:none;display:none}

/* ===== VOLUME: KNOBLESS — the filled rail IS the level. Thumb is an invisible
   full-height hit area, so dragging works exactly as before. Seek keeps its needle. ===== */
#tn-full input[type=range]:not(.tn-bar)::-webkit-slider-runnable-track{height:4px;border-radius:2px;
  background:linear-gradient(90deg,rgba(var(--nc,255,92,92),.9) var(--_fill,50%),rgba(255,255,255,.12) var(--_fill,50%));
  box-shadow:inset 0 1px 1px rgba(0,0,0,.4)}
#tn-full input[type=range]:not(.tn-bar)::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:22px;margin-top:-9px;
  background:transparent;border:0;box-shadow:none}
#tn-full input[type=range]:not(.tn-bar)::-moz-range-thumb{width:14px;height:22px;background:transparent;border:0}

/* ===== VOLUME (#p3-vol): KNOBLESS for real this time — the previous rule targeted
   the legacy slider that player3 removes. The filled rail is the level; the thumb
   is an invisible full-height touch target, so dragging is unchanged. ===== */
#p3-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;appearance:none!important;
  width:18px!important;height:26px!important;background:transparent!important;border:0!important;box-shadow:none!important}
#p3-vol input[type=range]::-moz-range-thumb{width:18px;height:26px;background:transparent;border:0;box-shadow:none}