/* EMTAC 'TUNES — HOME + ARTIST v3 (Apple-inspired, EMTAC-skinned). Loaded LAST.
   Verified live in Chrome before ship. Safe-area native. */

/* ---------- global rhythm ---------- */
body{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))!important}

/* ---------- shelves (home + everywhere) ---------- */
.tn-shelf-t{font-size:24px!important;font-weight:800!important;letter-spacing:.01em!important;color:#fff!important;text-shadow:0 0 18px rgba(255,92,92,.15)}
.tn-shelf-h{align-items:center!important} /* margin owned by the spacing rules at EOF (mobile 6/4, desktop 26/12) */
.tn-shelf-sec{margin:6px 0 0!important}   /* single owner for section rhythm on mobile */
@media(min-width:1024px){html:not(.p3-shell-dk) .tn-shelf-sec{margin:18px 0 4px!important}}
/* ===== DESKTOP GLOW ROOM — .tn-wrap is the page scroller, so it MUST clip; a scroller
   can never have visible horizontal overflow. Fix: widen the wrap and pad it so content
   stays exactly 1040px while the clip edges sit 90px out — beyond every bloom radius.
   The hard full-page-height cutoff cannot render because no glow can reach the edge. ===== */
@media(min-width:1024px){html:not(.p3-shell-dk) .tn-wrap{max-width:1220px!important;padding-left:90px!important;padding-right:90px!important}
}
.tn-shelf-a{font-size:11px!important;letter-spacing:.14em!important;color:var(--tn)!important;text-shadow:0 0 10px rgba(255,92,92,.4)}
/* GLOW MUST NEVER HARD-CUT. A horizontal scroller forces the vertical axis to clip,
   so we (1) stop every ancestor from clipping, (2) pad the scroller wider than the
   glow so it bleeds INTO the padding, reclaiming the space with negative margin, and
   (3) keep the shelf glow softer than that padding so it always fully fits. */
.tn-shelf-sec{overflow:visible!important}
body #tn-content{overflow:visible!important;overflow-x:visible!important}  /* must out-rank tunes.css #tn-content{overflow-x:hidden} */
.tn-shelf{gap:16px!important;padding:34px 16px!important;margin:-22px -10px!important}
/* (shelf-card glow removed from here — consolidated into the single authoritative rule below) */
.tn-scard{width:182px!important}
.tn-scard .cvbig{border-radius:22px!important;box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.07)!important;border:0!important}
.tn-scard .cn{font-size:13px!important;font-weight:600!important;color:#fff!important;margin-top:9px!important}
.tn-scard .cc{font-size:11px!important;color:var(--e-mute)!important;margin-top:2px!important}

/* quick actions */
.tn-bigbtn{border-radius:16px!important;background:linear-gradient(158deg,rgba(38,43,56,.6),rgba(12,14,20,.8))!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 18px rgba(255,92,92,.1)!important}

/* tiles (genres / generations) */
.tn-tile{border-radius:22px!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.05)!important;-webkit-backdrop-filter:blur(14px) saturate(1.5)!important;backdrop-filter:blur(14px) saturate(1.5)!important;box-shadow:var(--el2),var(--bevel)!important}

/* ---------- floating glass mini player (safe-area aware) ---------- */
.tn-player{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;border-radius:22px!important;background:var(--dkbg,rgba(18,20,28,.5))!important;-webkit-backdrop-filter:var(--dkblur,blur(24px) saturate(1.6))!important;backdrop-filter:var(--dkblur,blur(24px) saturate(1.6))!important;border:1px solid rgba(var(--nc,255,92,92),.3)!important;box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15),0 0 22px rgba(var(--nc,255,92,92),.14)!important;height:66px!important}

/* ---------- ARTIST PAGE: cinematic hero ---------- */
.tn-ahero{position:relative!important;display:block!important;min-height:470px!important;border-radius:26px!important;overflow:hidden!important;margin:6px 0 28px!important;border:1px solid rgba(255,255,255,.08)}
.tn-ahero .tn-ahero-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:0!important;border:0!important;box-shadow:none!important;background:#0c0e12!important}
.tn-ahero .tn-ahero-art img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 24%!important}
.tn-ahero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,10,.06) 0%,rgba(5,7,10,0) 26%,rgba(5,7,10,.42) 62%,rgba(5,7,10,.96) 100%),radial-gradient(60% 50% at 22% 88%,rgba(5,7,10,.55),transparent 70%)}
.tn-ahero .tn-ahero-i{position:absolute!important;left:30px!important;right:30px!important;bottom:24px!important;z-index:2!important}
.tn-ahero .tn-ahero-name{font-size:52px!important;font-weight:800!important;color:#fff!important;letter-spacing:.01em!important;text-shadow:0 2px 22px rgba(0,0,0,.75),0 0 40px rgba(255,92,92,.18)!important;line-height:1.05!important}
.tn-ahero .tn-ahero-meta{font-size:11px!important;letter-spacing:.22em!important;color:rgba(255,255,255,.85)!important;margin:0 0 8px!important;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.tn-ahero .tn-ahero-bio{max-width:700px!important;font-size:12.5px!important;line-height:1.55!important;color:rgba(255,255,255,.72)!important;text-shadow:0 1px 8px rgba(0,0,0,.9)!important;margin:10px 0 14px!important}
#tn-abio-more{font-size:10px!important;letter-spacing:.16em!important;color:var(--tn)!important}
.tn-ahero-acts{display:flex!important;gap:10px!important;margin-top:14px!important;flex-wrap:wrap}
.tn-ahero-acts .tn-abtn{border-radius:999px!important;padding:12px 22px!important;font-size:12px!important;letter-spacing:.12em!important;font-weight:800!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.tn-ahero-acts .tn-abtn:first-child{background:var(--tn)!important;border-color:var(--tn)!important;color:#14100f!important;box-shadow:0 0 30px rgba(255,92,92,.55),inset 0 1px 0 rgba(255,255,255,.3)!important}

/* top songs — Apple style: 4 rows per column, swipe/snap horizontally */
#tn-atop{display:grid!important;grid-auto-flow:column!important;grid-template-rows:repeat(4,auto)!important;grid-auto-columns:86%!important;grid-template-columns:none!important;overflow-x:auto!important;overflow-y:hidden!important;gap:2px 16px!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 2px 10px!important;touch-action:pan-x pan-y}
#tn-atop::-webkit-scrollbar{display:none}
@media(min-width:900px){#tn-atop{grid-auto-columns:430px!important}}
#tn-atop .tn-row{scroll-snap-align:start;border-bottom:1px solid rgba(255,255,255,.06)!important;padding:10px 8px!important;border-radius:12px!important;min-width:0}
#tn-atop .tn-row:hover{background:rgba(255,255,255,.05)!important}
#tn-atop .tn-row .cv{width:48px!important;height:48px!important;border-radius:10px!important;box-shadow:0 0 0 1px rgba(255,255,255,.07)}
#tn-atop .tt{font-size:14px!important;color:#fff!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tn-atop .ta{font-size:11.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* renders enter with intent — no hard swap flash */
#tn-content>*{animation:p3fadein .18s ease}
@keyframes p3fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* similar artists chips */
.tn-simchip{border-radius:999px!important;padding:11px 18px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.16)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* ---------- HOME hero (built by player3.js from Discover) ---------- */
#p3-hero{position:relative;display:block;height:300px;border-radius:22px;overflow:hidden;margin:6px 0 22px;border:1px solid rgba(255,255,255,.1);cursor:pointer;box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 30px rgba(255,92,92,.12)}
#p3-hero img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15)}
#p3-hero .hs{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,7,10,0) 30%,rgba(5,7,10,.55) 68%,rgba(5,7,10,.92) 100%)}
#p3-hero .hk{position:absolute;left:22px;bottom:74px;font-size:10.5px;letter-spacing:.26em;font-weight:800;color:var(--tn);text-shadow:0 0 12px rgba(255,92,92,.6)}
#p3-hero .ht{position:absolute;left:22px;bottom:40px;right:110px;font-size:26px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 14px rgba(0,0,0,.7)}
#p3-hero .ha{position:absolute;left:22px;bottom:18px;font-size:12px;color:rgba(255,255,255,.8)}
#p3-hero .hp{position:absolute;right:20px;bottom:20px;width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:var(--tn);display:flex;align-items:center;justify-content:center;box-shadow:0 0 34px rgba(255,92,92,.6);color:#14100f}
#p3-hero .hp svg{width:22px;height:22px;fill:currentColor;margin-left:2px}
@media(max-width:640px){#p3-hero{height:210px}#p3-hero .ht{font-size:20px;right:90px}}

/* ---------- full-screen scroll: NO page mask — content stays crisp edge-to-edge.
   Only the logo fades on scroll (handled in player3.js). ---------- */
.emtac-head{transition:opacity .12s linear;will-change:opacity,transform}

/* the DOCUMENT scrolls (no fixed box): content paints the full canvas — under the
   island at the top, behind the glass pill at the bottom. The wrap must never be
   its own scroll container on mobile. */
@media(max-width:900px){
  /* legacy base locks body scrolling (wrap was the scroller) — unlock the document */
  html,body{background:#05070a;overflow:visible!important;height:auto!important;min-height:100svh!important}
  .banner{display:none!important}
  body{padding-top:0!important;padding-bottom:120px!important}
  .tn-wrap{position:static!important;overflow:visible!important;max-width:none!important;margin:0!important;
    height:auto!important;max-height:none!important;
    padding:84px 16px 40px 16px!important} /* fixed top buffer — the wrapper zeroes env() */
  .tn-tabs{display:flex!important}
  /* mini player = the PLAYER DOCK: identical tint/opacity/height as the nav dock
     (both read --dkbg); only the outline + glow color differ (neon vs glass). */
  .tn-player{background:var(--dkbg,linear-gradient(160deg,rgba(44,50,66,.44),rgba(16,18,26,.58)))!important;border-radius:999px!important;
    -webkit-backdrop-filter:var(--dkblur,blur(24px) saturate(1.6))!important;backdrop-filter:var(--dkblur,blur(24px) saturate(1.6))!important;
    border:1px solid rgba(var(--nc,255,92,92),.38)!important;padding:0 12px!important;height:64px!important;min-height:64px!important;align-items:center!important;
    box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.20),
      0 0 calc(26px*var(--nk,1)) rgba(var(--nc,255,92,92),calc(.22*var(--nk,1)))!important}
  .tn-player .tn-npcover,.tn-player img{border-radius:999px!important;width:46px!important;height:46px!important}
  .tn-player .tn-npt{font-size:14px!important}
  .tn-player .tn-npa{font-size:11px!important}
  /* transport controls get real thumb targets */
  .tn-player button,.tn-player .tn-btn{width:46px!important;height:46px!important;display:flex!important;align-items:center!important;justify-content:center!important}
  .tn-player button svg{width:26px!important;height:26px!important}
  .tn-player .tn-play,.tn-player [id*=play]{width:56px!important;height:56px!important;border-radius:50%!important;
    box-shadow:0 0 calc(20px*var(--nk,1)) rgba(var(--nc,255,92,92),calc(.5*var(--nk,1))),inset 0 1px 0 rgba(255,255,255,.25)!important}
  .tn-player .tn-play svg,.tn-player [id*=play] svg{width:28px!important;height:28px!important}
  /* legacy floating search launcher — retired everywhere */
  #tn-search-open,.tn-search-open{display:none!important}

  /* THE DOCK IS THE NAV: top tabs retired on mobile. They stay in the DOM,
     invisible — the dock and sheets drive the engine's tab machinery through
     them programmatically. The Library page takes over browsing next build. */
  .tn-tabs{display:none!important}
  /* stacking: dock rides just above the mini player; both above content */
  .tn-player{z-index:62!important}
  body.p3-noplayer .tn-player{display:none!important}
}
@keyframes p3dockin{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* ---------- NAV DOCK v2: twin glass pills, Apple-style (all viewports ≤900px) ----------
   Glass tint is tokenized — CLEAR by default, EMTAC GREEN via body.p3-navgreen
   (wired to Settings now, the full theme engine adopts these tokens in beta.2a). */
/* THE GLASS TOKENS — single source of truth for dock + mini player + player
   pill. Apple frosted: translucent tint + real backdrop blur. Tint follows
   --nc (Settings swatch/hue) everywhere. The old "no backdrop-filter" caveat
   is obsolete — the dock never hides mid-scroll anymore (always docked). */
:root{--dkbg:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 16%),linear-gradient(160deg,rgba(72,80,102,.40),rgba(20,23,34,.56));
  --dkblur:blur(38px) saturate(2.05) brightness(1.12);
  --dkbrd:rgba(var(--nc,255,92,92),.35);
  --dkglow:rgba(var(--nc,255,92,92),.18);
  --dkink:#eef2f8;--dkact:#ff5c5c}
body.p3-navgreen{--dkbg:linear-gradient(160deg,rgba(30,66,50,.48),rgba(9,24,18,.60));--dkbrd:rgba(94,231,154,.5);--dkglow:rgba(54,255,158,.24);--dkink:#dcffe9;--dkact:#36ff9e}
@media(max-width:900px){
  #p3-docknav{position:fixed;left:18px;right:18px;bottom:94px;z-index:61;display:flex;align-items:stretch;gap:10px;   /* wider side buffer so pill edges clear the screen edge; rests ABOVE the mini before JS takes over */
    opacity:0;transform:translateY(76px);pointer-events:none;
    /* transform-only glide: animating `bottom` re-layouts every frame (the jerk) */
    transition:transform .32s cubic-bezier(.22,.9,.24,1),opacity .2s linear;will-change:transform}
  /* same height + tint as the player dock — only outline/glow differ */
  #p3-docknav .dk-main{flex:1;display:flex;justify-content:space-around;align-items:center;height:64px;padding:0 4px;border-radius:999px;
    background:var(--dkbg);
    -webkit-backdrop-filter:var(--dkblur);backdrop-filter:var(--dkblur);
    border:1px solid var(--dkbrd);
    box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.20),0 0 24px var(--dkglow)}
  #p3-docknav .dk-search{flex:0 0 auto;width:64px;height:64px;border-radius:999px;display:flex;align-items:center;justify-content:center;
    background:var(--dkbg);
    -webkit-backdrop-filter:var(--dkblur);backdrop-filter:var(--dkblur);
    border:1px solid var(--dkbrd);color:var(--dkink);cursor:pointer;
    box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.20),0 0 24px var(--dkglow)}
  #p3-docknav .dk-it{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;padding:4px 8px;
    background:none;border:0;color:var(--dkink);cursor:pointer;border-radius:16px;-webkit-tap-highlight-color:transparent}
  #p3-docknav svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
  #p3-docknav .dk-it span{font-size:9px;font-weight:700;letter-spacing:.06em;opacity:.85}
  #p3-docknav .dk-it.on{color:var(--dkact)}
  #p3-docknav .dk-it.on svg{filter:drop-shadow(0 0 7px var(--dkact)) drop-shadow(0 0 18px var(--dkact));opacity:1}
  #p3-docknav .dk-it.on span{opacity:1;text-shadow:0 0 10px var(--dkact)}
  #p3-docknav .dk-search svg{width:21px;height:21px}
  #p3-docknav .dk-search.on{color:var(--dkact);border-color:var(--dkact);box-shadow:0 0 22px var(--dkglow),inset 0 1px 0 rgba(255,255,255,.28)}
  /* no queue → dock sits on the floor (JS measures; this is the fallback) */
  body.p3-noplayer #p3-docknav{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}

/* ---------- CUSTOMIZER: neon color (--tn/--nc) + intensity (--nk) drive the
   key glow surfaces. Slider writes --nk (0.2–2); swatches write --tn + --nc. ---------- */
:root{--nk:1;--nc:255,92,92}
@media(max-width:900px){
  .tn-player{border-color:rgba(var(--nc),.55)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.32),inset 0 -10px 20px rgba(0,0,0,.25),
      0 0 calc(34px*var(--nk)) rgba(var(--nc),calc(.34*var(--nk))),
      0 0 calc(80px*var(--nk)) rgba(var(--nc),calc(.14*var(--nk)))!important}
}
#p3-hero{box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 1px rgba(var(--nc),.22),
  0 0 calc(40px*var(--nk)) rgba(var(--nc),calc(.2*var(--nk)))!important}
.tn-shelf-a{text-shadow:0 0 calc(12px*var(--nk)) rgba(var(--nc),calc(.5*var(--nk)))!important}
.tn-bigbtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 calc(22px*var(--nk)) rgba(var(--nc),calc(.2*var(--nk)))!important;border-color:rgba(var(--nc),.28)!important}
.tn-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.4),0 0 calc(20px*var(--nk)) rgba(var(--nc),calc(.18*var(--nk)))!important}
.p3-mood-tile{box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16),0 0 calc(20px*var(--nk)) rgba(var(--nc),calc(.16*var(--nk)))}
/* the RESTING HALO — every cover wears the aura (the look behind Toby Keith) */
.tn-scard .cvbig{box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.07),
  0 0 calc(24px*var(--nk)) rgba(var(--nc),calc(.24*var(--nk)))!important}
#p3-lib .lib-cv,#p3-sheet .sh-pl .lib-cv{box-shadow:0 0 0 1px rgba(255,255,255,.1),
  0 0 calc(14px*var(--nk)) rgba(var(--nc),calc(.2*var(--nk)))}
#p3-stage .tn-reco-row .cv,#p3-stage .tn-side-cv{box-shadow:0 0 0 1px rgba(255,255,255,.08),
  0 0 calc(14px*var(--nk)) rgba(var(--nc),calc(.18*var(--nk)))!important}
.tn-scard:active .cvbig{box-shadow:0 0 0 1px var(--tn),0 0 calc(26px*var(--nk)) rgba(var(--nc),calc(.45*var(--nk)))!important}

/* swatches + slider + font chips in the sheet */
#p3-sheet .sh-swatches{display:flex;gap:12px;justify-content:center;padding:4px 0}
#p3-sheet .sh-sw{width:40px;height:40px;border-radius:50%;background:var(--sw);cursor:pointer;
  border:2px solid rgba(255,255,255,.25);box-shadow:inset 0 2px 5px rgba(255,255,255,.4),0 4px 12px rgba(0,0,0,.5)}
#p3-sheet .sh-sw.on{border-color:#fff;box-shadow:inset 0 2px 5px rgba(255,255,255,.4),0 0 18px var(--sw),0 0 38px var(--sw)}
#p3-sheet .sh-slidewrap{display:flex;align-items:center;gap:12px;padding:2px 4px}
#p3-sheet .sh-dim,#p3-sheet .sh-max{font-size:9px;letter-spacing:.18em;color:#8b93a1;flex:0 0 auto}
#p3-sheet .sh-range{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;outline:none;
  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,.5),inset 0 -0.5px 0 rgba(255,255,255,.14),0 0 10px rgba(var(--nc),.18)}
#p3-sheet .sh-range::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;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(--nc),.9) 72%,rgba(var(--nc),.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(--nc),.55),0 2px 6px rgba(0,0,0,.55)}
#p3-sheet .sh-fonts .sh-opt{font-size:12px;letter-spacing:.04em;text-transform:none;padding:11px 4px}
#p3-sheet .sh-lab{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
#p3-sheet .sh-lab .sh-opt{font-size:9.5px;letter-spacing:.08em;padding:11px 2px}
#p3-sheet #sh-hue{flex:1;-webkit-appearance:none;appearance:none;height:10px;border-radius:6px;outline:none;
  background:linear-gradient(90deg,#ff0040,#ff8000,#ffe000,#40ff40,#00e0ff,#4040ff,#c040ff,#ff40c0,#ff0040);
  border:0.5px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
#p3-sheet #sh-hue::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95),rgba(255,255,255,.3) 40%,var(--tn,#ff5c5c) 70%);
  border:1.5px solid #fff;box-shadow:0 0 12px rgba(var(--nc,255,92,92),.7),0 2px 6px rgba(0,0,0,.6)}

/* font packs (TERMINAL is the native look — no class) */
body.p3-font-clean,body.p3-font-clean *:not(svg):not(path){font-family:-apple-system,system-ui,'Segoe UI',Roboto,sans-serif!important}
body.p3-font-round,body.p3-font-round *:not(svg):not(path){font-family:ui-rounded,-apple-system,system-ui,sans-serif!important}
body.p3-font-serif,body.p3-font-serif *:not(svg):not(path){font-family:ui-serif,Georgia,'Times New Roman',serif!important}

/* rain-on-glass canvas (stormy) — full-bleed, input-transparent, BOTH layers */
.p3-mood .mx-drops{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.p3-mood .mx-fog{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 8%,rgba(210,225,245,.05),transparent 55%),radial-gradient(100% 60% at 80% 100%,rgba(180,200,230,.04),transparent 60%)}
/* the old slash-line rain is retired */
.mood-stormy .mx-r1,.mood-stormy .mx-r2{display:none!important}

/* ---------- BACKGROUNDS layer: fixed scene under all content ---------- */
#p3-bg{position:fixed;inset:0;z-index:0;pointer-events:none;display:none}
#p3-bg>*{position:absolute}
.bgx-sky{inset:0}
.bgx-shade{inset:0;background:linear-gradient(180deg,rgba(5,7,10,.18) 0%,rgba(5,7,10,.30) 45%,rgba(5,7,10,.66) 100%)}
.bgx-sil{left:0;right:0;bottom:0;width:100%;height:44%;object-fit:cover;object-position:bottom;opacity:.95}
.bgx-stars,.bgx-stars2{inset:0;background-image:
  radial-gradient(1.2px 1.2px at 12% 22%,rgba(255,255,255,.8),transparent 55%),
  radial-gradient(1px 1px at 34% 8%,rgba(255,255,255,.6),transparent 55%),
  radial-gradient(1.4px 1.4px at 58% 30%,rgba(255,255,255,.7),transparent 55%),
  radial-gradient(1px 1px at 76% 14%,rgba(255,255,255,.55),transparent 55%),
  radial-gradient(1.2px 1.2px at 90% 34%,rgba(255,255,255,.65),transparent 55%),
  radial-gradient(1px 1px at 22% 44%,rgba(255,255,255,.5),transparent 55%),
  radial-gradient(1.3px 1.3px at 46% 18%,rgba(255,255,255,.75),transparent 55%),
  radial-gradient(1px 1px at 66% 42%,rgba(255,255,255,.5),transparent 55%);
  animation:bgxtwinkle 5.5s ease-in-out infinite alternate}
.bgx-stars2{transform:scale(1.6) rotate(8deg);opacity:.5;animation-duration:8s;animation-delay:-3s}
@keyframes bgxtwinkle{from{opacity:.45}to{opacity:.95}}
.bgx-neb{inset:-10%;background:
  radial-gradient(34% 26% at 30% 34%,rgba(157,91,255,.22),transparent 70%),
  radial-gradient(30% 22% at 68% 22%,rgba(37,224,255,.14),transparent 70%),
  radial-gradient(40% 30% at 55% 60%,rgba(255,59,208,.10),transparent 70%);
  animation:bgxneb 60s linear infinite alternate}
@keyframes bgxneb{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,1%,0) scale(1.06)}}
.bgx-moon{width:84px;height:84px;border-radius:50%;top:12%;right:14%;
  background:radial-gradient(circle at 38% 34%,#fdfdf4,#d9dfe8 62%,#aeb8c8);
  box-shadow:0 0 40px rgba(240,245,255,.5),0 0 120px rgba(240,245,255,.25)}
.bgx-moon.sm{width:56px;height:56px;top:10%;right:18%}
.bgx-cl{border-radius:50%;filter:none;opacity:.85}
.bgx-cl.c1{width:70%;height:26%;top:14%;left:-12%;background:radial-gradient(closest-side,rgba(255,255,255,.10),transparent);animation:bgxdrift 90s linear infinite}
.bgx-cl.c2{width:60%;height:22%;top:32%;left:30%;background:radial-gradient(closest-side,rgba(255,255,255,.08),transparent);animation:bgxdrift 120s linear infinite reverse}
.bgx-cl.c3{width:80%;height:30%;top:52%;left:-20%;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent);animation:bgxdrift 150s linear infinite}
.bgx-cl.c4{width:55%;height:20%;top:70%;left:40%;background:radial-gradient(closest-side,rgba(255,255,255,.06),transparent);animation:bgxdrift 110s linear infinite reverse}
@keyframes bgxdrift{from{transform:translateX(-6%)}to{transform:translateX(106%)}}
.bgx-sea{left:0;right:0;bottom:0;height:42%;
  background:repeating-linear-gradient(180deg,rgba(150,200,240,.05) 0 2px,transparent 2px 9px),linear-gradient(180deg,rgba(10,53,80,.4),rgba(3,13,26,.9));
  animation:bgxsea 7s ease-in-out infinite alternate}
@keyframes bgxsea{from{background-position:0 0,0 0}to{background-position:0 6px,0 0}}
.bgx-glint{bottom:0;height:42%;width:70px;right:calc(18% - 8px);
  background:linear-gradient(180deg,rgba(240,245,255,.22),rgba(240,245,255,.04));
  filter:none;opacity:.5;animation:bgxtwinkle 4s ease-in-out infinite alternate}
/* content sits on glass above the scene */
body[data-p3bg] .tn-wrap{background:transparent!important}
body[data-p3bg] #tn-content{position:relative;z-index:1}

/* photo backgrounds — frosted glass: the blur is a ONE-TIME raster on a static
   fixed layer (GPU caches it — zero per-frame cost), it hides upscale artifacts
   on portrait phones, and it reads as depth behind the glass UI. scale() hides
   the blurred edge bleed. Settings → Display can switch it off. */
.bgx-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(var(--frost,18px)) saturate(1.25) brightness(.8);transform:scale(1.15)}
body.p3-noblur .bgx-photo{filter:none;transform:none}

/* CALM MODE: every scene animation freezes (battery / stillness) */
body.p3-calm #p3-bg *{animation:none!important}

/* ---------- new living scenes ---------- */
.bgx-au{inset:-12%;opacity:.7;mix-blend-mode:screen}
.bgx-au.a1{background:radial-gradient(52% 30% at 30% 22%,rgba(54,255,158,.30),transparent 70%),radial-gradient(40% 24% at 62% 12%,rgba(37,224,255,.22),transparent 70%);
  animation:bgxau 16s ease-in-out infinite alternate}
.bgx-au.a2{background:radial-gradient(46% 26% at 70% 26%,rgba(157,91,255,.22),transparent 70%),radial-gradient(36% 20% at 44% 8%,rgba(54,255,158,.16),transparent 70%);
  animation:bgxau 22s ease-in-out infinite alternate-reverse}
@keyframes bgxau{from{transform:translate3d(-3%,0,0) skewX(-4deg)}to{transform:translate3d(3%,2%,0) skewX(5deg)}}
.bgx-sun{width:min(58vw,340px);aspect-ratio:1/1;border-radius:50%;left:50%;top:20%;transform:translateX(-50%);
  background:linear-gradient(180deg,#ffd54a 0%,#ff8a3d 45%,#ff3bd0 100%);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 12%,transparent 12% 17%);
  mask-image:repeating-linear-gradient(180deg,#000 0 12%,transparent 12% 17%);
  box-shadow:0 0 80px rgba(255,59,208,.5)}
.bgx-tgrid.sy{background-image:repeating-linear-gradient(90deg,rgba(255,59,208,.35) 0 2px,transparent 2px 78px),repeating-linear-gradient(180deg,rgba(255,59,208,.35) 0 2px,transparent 2px 64px);top:52%}
.bgx-em{inset:0;background-repeat:repeat;opacity:.8}
.bgx-em.e1{background-image:radial-gradient(2.2px 2.2px at 18% 84%,rgba(255,176,46,.9),transparent 60%),radial-gradient(1.6px 1.6px at 52% 92%,rgba(255,120,40,.8),transparent 60%),radial-gradient(2px 2px at 80% 78%,rgba(255,200,90,.75),transparent 60%);
  background-size:340px 480px;animation:bgxem 13s linear infinite}
.bgx-em.e2{background-image:radial-gradient(1.6px 1.6px at 30% 96%,rgba(255,150,60,.7),transparent 60%),radial-gradient(1.2px 1.2px at 66% 88%,rgba(255,220,120,.6),transparent 60%);
  background-size:260px 380px;animation:bgxem 19s linear infinite}
@keyframes bgxem{from{background-position:0 0}to{background-position:24px -480px}}
.bgx-bo{inset:-6%;opacity:.85}
.bgx-bo.b1{background:radial-gradient(90px 90px at 16% 30%,rgba(255,176,46,.14),transparent 70%),radial-gradient(70px 70px at 78% 22%,rgba(37,224,255,.12),transparent 70%),radial-gradient(110px 110px at 60% 70%,rgba(255,92,92,.10),transparent 70%);
  animation:bgxbo 26s ease-in-out infinite alternate}
.bgx-bo.b2{background:radial-gradient(60px 60px at 34% 78%,rgba(157,91,255,.12),transparent 70%),radial-gradient(80px 80px at 88% 60%,rgba(255,213,74,.10),transparent 70%);
  animation:bgxbo 34s ease-in-out infinite alternate-reverse}
@keyframes bgxbo{from{transform:translate3d(-2%,-1%,0)}to{transform:translate3d(2%,2%,0)}}
.bgx-ray{top:-10%;bottom:30%;width:34%;opacity:.5;mix-blend-mode:screen;
  background:linear-gradient(190deg,rgba(120,220,255,.16),transparent 75%)}
.bgx-ray.r1{left:16%;transform:skewX(-12deg);animation:bgxray 14s ease-in-out infinite alternate}
.bgx-ray.r2{left:52%;transform:skewX(-18deg);animation:bgxray 19s ease-in-out infinite alternate-reverse}
@keyframes bgxray{from{opacity:.25}to{opacity:.6}}
.bgx-dune{left:-4%;right:-4%;bottom:-2%;height:34%;border-radius:50% 50% 0 0/100% 100% 0 0;background:#140a18}
.bgx-dune.d1{transform:translateX(-16%) scaleY(.8);opacity:.75;background:#1d0f26}
.bgx-dune.d2{transform:translateX(18%)}

/* new theme accents */
body.p3-theme-synthw{--dkact:#ff3bd0;--dkbrd:rgba(255,59,208,.45);--dkglow:rgba(255,59,208,.24)}
body.p3-theme-emberw{--dkact:#ffb02e;--dkbrd:rgba(255,176,46,.45);--dkglow:rgba(255,176,46,.22)}
body.p3-theme-oceanic{--dkact:#9fd8ff;--dkbrd:rgba(159,216,255,.42);--dkglow:rgba(159,216,255,.20)}

/* ---------- THEME PACKS ---------- */
#p3-sheet .sh-themes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#p3-sheet .sh-theme{font-size:10.5px;letter-spacing:.14em;padding:14px 6px}
#p3-sheet .sh-row.onrow{border-color:var(--dkact);box-shadow:0 0 16px var(--dkglow),inset 0 1px 0 rgba(255,255,255,.10)}
#p3-sheet .sh-live{color:var(--dkact)!important;letter-spacing:.2em;font-size:9px!important}
/* CYBERPUNK: magenta neon, cyan counter-glow, faint scanlines over everything */
body.p3-theme-cyber{--dkact:#25e0ff;--dkbrd:rgba(255,43,214,.42);--dkglow:rgba(255,43,214,.22)}
body.p3-theme-cyber::after{content:'';position:fixed;inset:0;z-index:210;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(180deg,rgba(255,43,214,.045) 0 1px,transparent 1px 3px)}
body.p3-theme-cyber .tn-shelf-t{text-shadow:0 0 16px rgba(255,59,208,.55)!important}
/* TRON: enter The Grid — every surface wears cyan light-lines, orange keeps
   the counterpoint (Clu). All static borders/shadows: zero GPU cost. */
body.p3-theme-tron{--dkact:#25e0ff;--dkbrd:rgba(37,224,255,.55);--dkglow:rgba(37,224,255,.30)}
body.p3-theme-tron .tn-shelf-t{color:#dff9ff!important;text-shadow:0 0 16px rgba(37,224,255,.6)!important}
body.p3-theme-tron .tn-shelf-a{color:#ff9d2e!important;text-shadow:0 0 12px rgba(255,157,46,.6)!important}
body.p3-theme-tron .tn-scard .cvbig{box-shadow:0 0 0 1px rgba(37,224,255,.55),0 0 16px rgba(37,224,255,.22),0 10px 26px rgba(0,0,0,.5)!important}
body.p3-theme-tron .tn-scard:active .cvbig{box-shadow:0 0 0 1.5px #25e0ff,0 0 26px rgba(37,224,255,.55)!important}
body.p3-theme-tron .tn-tile{border-color:rgba(37,224,255,.5)!important;
  box-shadow:inset 0 0 0 1px rgba(37,224,255,.25),inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(37,224,255,.16),0 10px 24px rgba(0,0,0,.4)!important}
body.p3-theme-tron .tn-bigbtn{border-color:rgba(37,224,255,.45)!important;
  box-shadow:inset 0 0 0 1px rgba(37,224,255,.22),inset 0 1px 0 rgba(255,255,255,.1),0 0 18px rgba(37,224,255,.14)!important}
body.p3-theme-tron #p3-hero{border-color:rgba(37,224,255,.55)!important;
  box-shadow:0 0 0 1px rgba(37,224,255,.3),0 0 30px rgba(37,224,255,.2),0 22px 50px rgba(0,0,0,.5)!important}
body.p3-theme-tron #p3-hero .hk{color:#25e0ff!important;text-shadow:0 0 12px rgba(37,224,255,.7)!important}
body.p3-theme-tron #p3-hero .hp{background:#25e0ff!important;box-shadow:0 0 34px rgba(37,224,255,.7)!important;border-color:rgba(255,255,255,.6)!important}
body.p3-theme-tron .p3-mood-tile{box-shadow:0 0 0 1px rgba(37,224,255,.35),inset 0 1px 0 rgba(255,255,255,.16),0 12px 30px rgba(0,0,0,.45)!important}
body.p3-theme-tron .tn-ahero{border-color:rgba(37,224,255,.45)!important;
  box-shadow:0 0 0 1px rgba(37,224,255,.22),0 0 34px rgba(37,224,255,.16)!important}
body.p3-theme-tron .tn-ahero .tn-ahero-name{text-shadow:0 2px 22px rgba(0,0,0,.75),0 0 44px rgba(37,224,255,.4)!important}
body.p3-theme-tron .tn-ahero-acts .tn-abtn{border-color:rgba(37,224,255,.4)!important}
body.p3-theme-tron .tn-ahero-acts .tn-abtn:first-child{background:#25e0ff!important;border-color:#25e0ff!important;color:#02141f!important;box-shadow:0 0 30px rgba(37,224,255,.6)!important}
body.p3-theme-tron #tn-atop .tn-row{border-bottom-color:rgba(37,224,255,.14)!important}
body.p3-theme-tron .tn-simchip{border-color:rgba(37,224,255,.4)!important}
@media(max-width:900px){
  body.p3-theme-tron .tn-player{border-color:rgba(37,224,255,.75)!important;
    box-shadow:0 16px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 16px rgba(37,224,255,.08),
      0 0 calc(30px*var(--nk,1)) rgba(37,224,255,calc(.4*var(--nk,1)))!important}
  body.p3-theme-tron #p3-docknav .dk-main,body.p3-theme-tron #p3-docknav .dk-search{
    border-color:rgba(37,224,255,.6);
    box-shadow:0 16px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.26),inset 0 0 14px rgba(37,224,255,.07),0 0 24px rgba(37,224,255,.28)}
}
body.p3-theme-tron #p3-sheet .sh-card{border-color:rgba(37,224,255,.5);
  box-shadow:0 -18px 60px rgba(0,0,0,.6),0 0 0 1px rgba(37,224,255,.22),0 0 34px rgba(37,224,255,.2),inset 0 1px 0 rgba(255,255,255,.18)}
body.p3-theme-tron #p3-sheet .sh-row{border-color:rgba(37,224,255,.24)}
body.p3-theme-tron #p3-sheet .sh-grip{background:rgba(37,224,255,.5)}
.bgx-thor{left:0;right:0;top:46%;height:3px;
  background:linear-gradient(90deg,transparent,rgba(37,224,255,.95),transparent);
  box-shadow:0 0 18px rgba(37,224,255,.8),0 0 70px rgba(37,224,255,.4)}
.bgx-tgrid{left:-40%;right:-40%;top:46%;bottom:-4%;transform-origin:50% 0;
  transform:perspective(340px) rotateX(62deg);
  background-image:repeating-linear-gradient(90deg,rgba(37,224,255,.30) 0 2px,transparent 2px 78px),
    repeating-linear-gradient(180deg,rgba(37,224,255,.30) 0 2px,transparent 2px 64px);
  animation:bgxtgrid 2.4s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%)}
@keyframes bgxtgrid{from{background-position:0 0,0 0}to{background-position:0 0,0 64px}}
/* MIDNIGHT OPS: emtac green ops glass */
body.p3-theme-ops{--dkact:#36ff9e}
/* VAPORWAVE: violet wash */
body.p3-theme-vapor{--dkact:#ff9de2;--dkbrd:rgba(157,91,255,.45);--dkglow:rgba(157,91,255,.24)}

/* background chips in the sheet */
#p3-sheet .sh-bgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:220px;overflow-y:auto;padding:2px}
#p3-sheet .sh-bg{cursor:pointer;text-align:center}
#p3-sheet .sh-bg span{display:block;height:52px;border-radius:12px;overflow:hidden;position:relative;
  border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 14px rgba(0,0,0,.4)}
#p3-sheet .sh-bg span img{position:absolute;left:0;right:0;bottom:0;width:100%;height:70%;object-fit:cover;object-position:bottom}
#p3-sheet .sh-bg em{display:block;font-style:normal;font-size:9px;letter-spacing:.08em;color:#aeb6c4;margin-top:5px}
#p3-sheet .sh-bg.on span{border-color:var(--dkact);box-shadow:0 0 16px var(--dkglow),inset 0 1px 0 rgba(255,255,255,.2)}
#p3-sheet .sh-bg.on em{color:var(--dkact)}
#p3-sheet .sh-swatches{flex-wrap:wrap}
#p3-sheet .sh-mini .sh-sw{width:30px;height:30px}
#p3-sheet .sh-auto{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#2a2f3c,#14181f);
  color:#c9d1de;font-size:11px;font-weight:900}
#p3-sheet .sh-auto.on{color:var(--dkact);border-color:var(--dkact)}

/* ---------- LIBRARY: the command deck ---------- */
#p3-lib{position:fixed;inset:0;z-index:58;background:linear-gradient(180deg,rgba(7,9,14,.97),rgba(10,12,18,.99));
  opacity:0;transform:translateY(14px);transition:opacity .22s ease,transform .26s cubic-bezier(.22,.9,.24,1);
  display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top,0px)) 0 0}
#p3-lib.on{opacity:1;transform:none}
#p3-lib .lib-head{display:flex;align-items:baseline;gap:12px;padding:6px 18px 2px}
#p3-lib .lib-t{font-size:26px;font-weight:900;letter-spacing:.06em;color:#fff;text-shadow:0 0 18px rgba(var(--nc,255,92,92),.35)}
#p3-lib .lib-stats{flex:1;font-size:9.5px;letter-spacing:.12em;color:#8b93a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p3-lib .lib-x{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
#p3-lib .lib-tabs{display:flex;gap:7px;padding:10px 16px 4px;overflow-x:auto;scrollbar-width:none}
#p3-lib .lib-tab{padding:9px 14px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.14em;color:#c9d1de;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);white-space:nowrap}
#p3-lib .lib-tab.on{color:var(--dkact,#ff5c5c);border-color:var(--dkact,#ff5c5c);box-shadow:0 0 14px var(--dkglow,rgba(255,92,92,.2))}
#p3-lib .lib-filterwrap{padding:8px 16px 2px}
#p3-lib .lib-filter{width:100%;padding:11px 14px;border-radius:13px;font-size:13px;color:#fff;outline:none;
  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-lib .lib-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 44px 190px 16px;scrollbar-width:none}
#p3-lib .lib-body::-webkit-scrollbar{display:none}
#p3-lib .lib-loading{text-align:center;color:#8b93a1;font-size:10.5px;letter-spacing:.22em;padding:40px 0}
#p3-lib .lib-letter{position:sticky;top:0;z-index:2;font-size:12px;font-weight:900;letter-spacing:.2em;color:var(--tn,#ff5c5c);
  padding:10px 2px 6px;background:linear-gradient(180deg,rgba(8,10,15,.96),rgba(8,10,15,.7));text-shadow:0 0 10px rgba(var(--nc,255,92,92),.4)}
#p3-lib .lib-row{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:12px;border-bottom:1px solid rgba(255,255,255,.04)}
#p3-lib .lib-row:active{background:rgba(255,255,255,.07)}
#p3-lib .lib-row img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#141821;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
#p3-lib .lr-n{flex:1;font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#p3-lib .lr-c{font-size:10px;color:#8b93a1;flex:0 0 auto}
#p3-lib .lib-rail{position:absolute;right:4px;top:170px;bottom:180px;width:26px;display:flex;flex-direction:column;justify-content:center;gap:1px;z-index:3}
#p3-lib .lib-rail span{flex:1;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:800;color:rgba(var(--nc,255,92,92),.85);cursor:pointer;min-height:0}
#p3-lib .lib-cv,#p3-sheet .sh-pl .lib-cv{width:46px;height:46px;border-radius:11px;object-fit:cover;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 12px rgba(var(--nc,255,92,92),.12);background:#141821}
#p3-lib .lib-cvfb,#p3-sheet .sh-pl .lib-cvfb{display:flex;align-items:center;justify-content:center;font-size:18px;color:rgba(255,255,255,.8);
  background:linear-gradient(135deg,rgba(var(--nc,255,92,92),.35),rgba(94,231,154,.16))}
#p3-sheet .sh-pl .lib-cv{width:40px;height:40px;border-radius:9px}
#p3-lib .lib-chips{display:flex;flex-wrap:wrap;gap:9px;padding-top:8px}
#p3-lib .lib-chip{padding:11px 15px;border-radius:999px;font-size:11.5px;font-weight:700;color:#e8edf5;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#p3-lib .lib-chip em{font-style:normal;font-size:9px;color:#8b93a1;margin-left:7px}
body.p3-theme-tron #p3-lib .lib-row{border-bottom-color:rgba(37,224,255,.12)}
body.p3-theme-tron #p3-lib .lib-chip{border-color:rgba(37,224,255,.35)}
@media(min-width:901px){#p3-lib{display:none}}   /* desktop keeps its tabs until the desktop pass */

/* ---------- glass bottom sheet (Stations / Playlists / Settings) ---------- */
#p3-sheet{position:fixed;inset:0;z-index:2100}   /* above tn-pl-ov (1200): the CREATE prompt was opening UNDER the add-to-playlist modal */
#p3-sheet .sh-back{position:absolute;inset:0;background:rgba(4,5,9,.55);opacity:0;transition:opacity .22s}
#p3-sheet.on .sh-back{opacity:1}
#p3-sheet .sh-card{position:absolute;left:10px;right:10px;bottom:10px;max-height:64vh;overflow-y:auto;border-radius:26px;padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(165deg,rgba(34,39,52,.92),rgba(13,15,22,.96));
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  border:1px solid var(--dkbrd);box-shadow:0 -18px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22),0 0 34px var(--dkglow);
  transform:translateY(24px);opacity:0;transition:transform .26s cubic-bezier(.22,.9,.24,1),opacity .2s}
#p3-sheet.on .sh-card{transform:none;opacity:1}
#p3-sheet .sh-grip{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin:6px auto 10px}
#p3-sheet .sh-t{text-align:center;font-size:12px;font-weight:800;letter-spacing:.3em;color:var(--dkact);text-shadow:0 0 14px var(--dkglow);margin-bottom:10px}
#p3-sheet .sh-sec{font-size:9.5px;font-weight:800;letter-spacing:.24em;color:#8b93a1;margin:14px 2px 8px}
#p3-sheet .sh-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;margin-bottom:8px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#eef2f8;font-size:13px;font-weight:600;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
#p3-sheet .sh-row em{font-style:normal;font-size:10.5px;color:#8b93a1}
#p3-sheet .sh-row:active{background:rgba(255,255,255,.10)}
#p3-sheet .sh-moods{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#p3-sheet .sh-mood{padding:18px 10px;border-radius:14px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.14em;color:#fff;
  border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 8px 22px rgba(0,0,0,.4);cursor:pointer}
#p3-sheet .sh-seg{display:flex;gap:8px}
#p3-sheet .sh-opt{flex:1;text-align:center;padding:12px;border-radius:13px;font-size:11px;font-weight:800;letter-spacing:.12em;color:#c9d1de;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);cursor:pointer}
#p3-sheet .sh-opt.on{color:var(--dkact);border-color:var(--dkact);box-shadow:0 0 16px var(--dkglow);background:rgba(255,255,255,.08)}
#p3-sheet .sh-note{margin-top:14px;text-align:center;font-size:10px;color:#78808f}
#p3-sheet .sh-empty{text-align:center;color:#8b93a1;font-size:12px;padding:18px 8px}

/* ---------- wrapper feel: nothing is selectable, no long-press callouts (mobile) ---------- */
@media(max-width:1023px){
  *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-tap-highlight-color:transparent}
  input,textarea{-webkit-user-select:text!important;user-select:text!important}
}

/* ---------- retire legacy top chrome (profiles return inside the future profile gate) ---------- */
.etn-tt,#etn-profsel,[id^=etn-prof]{display:none!important}
/* legacy skin picker (upper-right) retired — Settings owns theming now.
   The sk-bg/vinyl/aurora RENDER layers stay; only the picker UI dies. */
#sk-toggle,#sk-picker{display:none!important}
.tn-wrap{padding-top:8px!important}

/* dock clone hidden on DESKTOP ONLY — on mobile it lives off-screen and conveyor-belts up */
/* LEGACY: hid the rail on desktop entirely. The desktop SHELL owns the rail now
   (own files, html.p3-shell-dk). Scoped to :not(.p3-shell-dk) so the two can never
   fight during first paint — that fight WAS the load flash. 2026-07-25 */
@media(min-width:901px){html:not(.p3-shell-dk) #p3-docknav{display:none!important}}

/* ---------- search: magnifier in the nav, field as floating glass overlay ---------- */
.tn-searchwrap{display:none!important}
body.p3-search .tn-searchwrap{display:block!important;position:fixed!important;left:12px!important;right:12px!important;top:88px!important;z-index:70!important;margin:0!important;max-width:none!important;animation:p3srch .22s ease}
@keyframes p3srch{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media(min-width:900px){html:not(.p3-shell-dk) body.p3-search .tn-searchwrap{left:50%!important;right:auto!important;width:620px!important;transform:translateX(-50%)!important;top:178px!important}}
/* mood gear (per-tile customizer) + genre chips in the mood lab */
.p3-mood-tile{position:relative}
.p3-mood-gear{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.85);background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#p3-sheet .mg-chips{display:flex;flex-wrap:wrap;gap:7px;max-height:180px;overflow-y:auto;padding:2px}
#p3-sheet .mg-chip{padding:8px 12px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.05em;cursor:pointer;
  color:#c9d1de;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14)}
#p3-sheet .mg-chip.on{color:var(--dkact);border-color:var(--dkact);background:rgba(255,255,255,.08);
  box-shadow:0 0 12px var(--dkglow)}
/* mood tile while its mix is being built */
.p3-mood-tile.mixing::after{content:'◌ MIXING…'!important;color:#fff!important;animation:p3mix 1s linear infinite}
@keyframes p3mix{50%{opacity:.4}}
#p3-searchtab{display:inline-flex;align-items:center;justify-content:center}
/* gear rides the top nav on desktop only — mobile Settings lives in the dock */
#p3-geartab{display:none;align-items:center;justify-content:center}
@media(min-width:901px){#p3-geartab{display:inline-flex}}
#p3-geartab svg{filter:drop-shadow(0 0 6px rgba(var(--nc,255,92,92),.55))}
#p3-searchtab svg{filter:drop-shadow(0 0 6px rgba(255,92,92,.55))}
body.p3-search #p3-searchtab{color:#fff!important;border-color:var(--tn)!important;background:rgba(255,92,92,.14)!important;box-shadow:0 0 16px rgba(255,92,92,.4)!important}
/* the logo never SHOWS outside home — but its space is constant (fade, never reflow) */
.emtac-head{display:block!important;height:62px!important;transform-origin:50% 50%}
@media(max-width:640px){.emtac-head{height:56px!important}}
body.p3-search .emtac-head,body.tn-drilled .emtac-head{opacity:0!important;visibility:hidden!important}
/* nav stays ONE line — all five tabs + magnifier */
.tn-tabs{flex-wrap:nowrap!important}
@media(max-width:640px){
  .tn-tabs{gap:4px!important;justify-content:center!important}
  .tn-tab{padding:7px 8px!important;font-size:10px!important;letter-spacing:0!important;white-space:nowrap!important;min-width:0!important}
}

/* ---------- neon + glass pass (whole UI) ---------- */
.tn-scard .cvbig{box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08),0 0 18px rgba(255,92,92,.10)!important}
.tn-scard:active .cvbig{box-shadow:0 0 0 1px var(--tn),0 0 26px rgba(255,92,92,.45)!important}
#p3-hero{box-shadow:0 22px 50px rgba(0,0,0,.5),0 0 0 1px rgba(255,92,92,.22),0 0 40px rgba(255,92,92,.16)!important}
.tn-shelf-a{text-shadow:0 0 12px rgba(255,92,92,.5)!important}
.tn-bigbtn{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 22px rgba(255,92,92,.14)!important;border-color:rgba(255,92,92,.28)!important}
.tn-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.4),0 0 18px rgba(255,92,92,.12)!important}
.tn-player{box-shadow:0 12px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18),0 0 24px rgba(var(--nc,255,92,92),.20)!important;border-color:rgba(var(--nc,255,92,92),.38)!important}   /* was hardcoded coral — the "red neon reversion" */
.p3-mood-tile{box-shadow:0 12px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.16),0 0 20px rgba(255,92,92,.10)}

/* ---------- search per approved design ---------- */
.tn-searchwrap::before{content:''!important;position:absolute;left:16px;top:50%;transform:translateY(-50%);width:15px;height:15px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff5c5c' stroke-width='2.4' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>");opacity:.85}
.tn-search{padding-left:42px!important;height:46px!important;font-size:14px!important}
.tn-search:focus{border-color:var(--tn)!important;box-shadow:0 0 0 1px var(--tn),0 0 22px rgba(255,92,92,.35),inset 0 1px 0 rgba(255,255,255,.1)!important;outline:none!important}

/* quick actions: never wrap, never overflow the card */
.tn-bigbtn{white-space:nowrap!important;padding:15px 12px!important;overflow:hidden!important;min-width:0!important}
.tn-bigbtn *{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
@media(max-width:640px){.tn-bigbtn{font-size:12px!important;padding:13px 10px!important;letter-spacing:0!important}}
.tn-count{opacity:.6}

/* ---------- header zone ---------- */
.emtac-head{padding:0!important}
.emtac-logo{max-height:56px!important}
.tn-searchwrap{margin:10px auto 0!important}
.tn-search{background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important}
.tn-tabs{gap:6px!important;margin:14px 0 6px!important}
.tn-tab{border-radius:999px!important;padding:9px 16px!important;background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.1)!important}
.tn-tab.active{color:#fff!important;border-color:var(--tn)!important;background:rgba(255,92,92,.12)!important;box-shadow:0 0 16px rgba(255,92,92,.35),inset 0 1px 0 rgba(255,255,255,.12)!important;text-shadow:0 0 8px rgba(255,92,92,.6)!important}
.tn-count{margin:6px 0 18px!important}
select{border-radius:10px!important;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important}

/* bigger covers (pass 2) */
.tn-scard{width:168px!important}
.tn-scard .cvbig{border-radius:16px!important}

/* quick actions (pass 2) */
.tn-bigrow{gap:14px!important;margin:4px 0 8px!important}
.tn-bigbtn{border-radius:18px!important;padding:18px 18px!important}

/* ---------- MOODS (tiles + ambiance FX) ---------- */
.p3-moods-t{color:#6fe0a0!important;text-shadow:0 0 14px rgba(83,204,135,.35)!important}
.p3-mood-tile{flex:0 0 auto;width:174px;height:120px;border-radius:24px;position:relative;overflow:hidden;cursor:pointer;border:1px solid rgba(255,255,255,.2);box-shadow:var(--el2),var(--bevel);display:flex;align-items:flex-end;padding:14px;transition:box-shadow .25s,border-color .25s}
.p3-mood-tile span{position:relative;z-index:1;font-size:12px;font-weight:800;letter-spacing:.14em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.p3-mood-tile.on{border-color:var(--tn)!important;box-shadow:0 0 0 1px var(--tn),0 0 26px rgba(255,92,92,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.p3-mood-tile.on::after{content:'● ON AIR';position:absolute;top:9px;right:10px;font-size:8.5px;letter-spacing:.14em;font-weight:800;color:var(--tn);text-shadow:0 0 8px rgba(255,92,92,.8)}

/* ambiance mounts: under = page ambiance, over = player backdrop */
.p3-mood{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#p3-mood-under{z-index:1;opacity:.5}
#p3-mood-over{z-index:150;opacity:.75;display:none}
body:has(#tn-full.open) #p3-mood-over{display:block}

/* STORMY — rain on glass + lightning */
.mood-stormy .mx-r1,.mood-stormy .mx-r2{position:absolute;inset:-20% -10%;background-image:repeating-linear-gradient(100deg,transparent 0 6px,rgba(255,255,255,.055) 6px 7px,transparent 7px 14px);animation:mxrain 1.1s linear infinite}
.mood-stormy .mx-r2{background-image:repeating-linear-gradient(102deg,transparent 0 10px,rgba(255,255,255,.035) 10px 11px,transparent 11px 24px);animation-duration:1.7s;filter:blur(1px)}
@keyframes mxrain{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
/* LIGHTNING: real strikes — instant attack, stuttered decay, gone in half a
   second. Origin/intensity/duration are randomized per strike by moods.js. */
.mood-stormy .mx-flash{position:absolute;inset:0;background:radial-gradient(80% 60% at 30% 10%,rgba(255,255,255,.85),transparent 60%);opacity:0}
.mood-stormy .mx-flash.go{animation:mxflash .5s linear}
@keyframes mxflash{0%{opacity:0}2%{opacity:1}6%{opacity:.08}10%{opacity:.75}14%{opacity:.02}19%{opacity:.4}26%{opacity:0}100%{opacity:0}}

/* MELANCHOLIC — slow grey clouds */
.mood-melancholic .mx-c1,.mood-melancholic .mx-c2{position:absolute;top:-10%;width:130%;height:70%;background:radial-gradient(50% 60% at 30% 50%,rgba(160,168,180,.16),transparent 70%),radial-gradient(40% 50% at 70% 40%,rgba(120,128,140,.13),transparent 70%);filter:blur(30px);animation:mxdrift 80s linear infinite alternate}
.mood-melancholic .mx-c2{top:30%;animation-duration:110s;animation-direction:alternate-reverse}
@keyframes mxdrift{from{transform:translateX(-12%)}to{transform:translateX(12%)}}

/* ENERGIZED — warm pulse */
.mood-energized .mx-p1{position:absolute;inset:-30%;background:radial-gradient(45% 40% at 50% 60%,rgba(255,110,60,.22),transparent 70%);animation:mxpulse 6s ease-in-out infinite}
@keyframes mxpulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:1}}

/* MIDNIGHT — starfield twinkle */
.mood-midnight .mx-s1,.mood-midnight .mx-s2{position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 34% 64%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 56% 18%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 72% 48%,rgba(255,255,255,.45),transparent),radial-gradient(1.5px 1.5px at 88% 76%,rgba(255,255,255,.6),transparent),radial-gradient(1px 1px at 22% 84%,rgba(255,255,255,.5),transparent);animation:mxtwinkle 5s ease-in-out infinite}
.mood-midnight .mx-s2{transform:scale(1.6) rotate(8deg);animation-delay:2.5s;opacity:.6}
@keyframes mxtwinkle{0%,100%{opacity:.9}50%{opacity:.35}}

/* EUPHORIC — aurora bands */
.mood-euphoric .mx-a1,.mood-euphoric .mx-a2{position:absolute;inset:-25%;background:linear-gradient(115deg,rgba(255,92,92,.14),rgba(164,115,233,.16) 40%,rgba(83,204,135,.13) 70%,transparent);filter:blur(40px);animation:mxaurora 22s ease-in-out infinite alternate}
.mood-euphoric .mx-a2{animation-duration:31s;animation-direction:alternate-reverse;transform:rotate(10deg)}
@keyframes mxaurora{from{transform:translateX(-8%) rotate(-4deg)}to{transform:translateX(8%) rotate(5deg)}}

/* ---------- ARTIST SKELETON: the tap answers instantly, data catches up ---------- */
#p3-skel{animation:p3fadein .18s ease}
#p3-skel .sk-hero{position:relative;height:min(46vw,340px);min-height:220px;border-radius:22px;overflow:hidden;
  background:linear-gradient(158deg,#1a1f2b,#0b0d13);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16)}
#p3-skel .sk-hero img{width:100%;height:100%;object-fit:cover;filter:blur(14px) saturate(1.25) brightness(.8);transform:scale(1.12)}
#p3-skel .sk-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,11,.05) 30%,rgba(6,7,11,.88) 96%)}
#p3-skel .sk-name{position:absolute;left:18px;right:18px;bottom:38px;font-size:30px;font-weight:900;color:#fff;
  letter-spacing:.01em;text-shadow:0 2px 18px rgba(0,0,0,.7)}
#p3-skel .sk-sub{position:absolute;left:19px;bottom:16px;font-size:10px;letter-spacing:.3em;font-weight:800;
  color:var(--tn,#ff5c5c);text-shadow:0 0 12px rgba(255,92,92,.6);animation:p3skpulse 1.1s ease-in-out infinite}
#p3-skel .sk-rows{margin-top:18px;display:flex;flex-direction:column;gap:10px}
#p3-skel .sk-row{height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(100deg,rgba(255,255,255,.05) 38%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.05) 62%);
  background-size:220% 100%;animation:p3shimmer 1.15s linear infinite}
@keyframes p3shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes p3skpulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- MOBILE (the wrapper's primary surface) ---------- */
/* (old single-column atop override removed — superseded by 4-row snap columns) */
@media(max-width:640px){
  .tn-shelf-t{font-size:20px!important}
  .tn-scard{width:168px!important}
  .emtac-logo{max-height:60px!important}
  .tn-ahero{margin:2px -16px 22px!important;border-radius:0 0 26px 26px!important;min-height:62vh!important;border:0!important}
  .tn-ahero .tn-ahero-i{left:18px!important;right:18px!important;bottom:18px!important}
  .tn-ahero .tn-ahero-name{font-size:34px!important}
  .tn-ahero .tn-ahero-bio{font-size:12px!important;-webkit-line-clamp:2}
  .tn-ahero-acts .tn-abtn{padding:11px 16px!important;font-size:11px!important}
  .tn-player{height:62px!important}
}

/* ============ DEPTH v3 — MATERIAL TOKEN SYSTEM (stable, no motion) ==================
   One implied light from the top. Depth on EVERY surface = translucent material +
   hue-matched LAYERED shadow (contact->near->mid->ambient, slate-tinted not black)
   + a carved bevel (bright top inset, dark bottom inset) + a lighter surface tint on
   raised elements (the dark-theme trick: shadows barely read on black). All static:
   paints once, GPU-composited, zero per-frame cost. Research-backed (Apple HIG /
   Material / Comeau). Theme packs (higher specificity) keep their own accents. */
:root{
  --bevel:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 1px rgba(0,0,0,.40);
  --hair:1px solid rgba(255,255,255,.26);
  --el1:0 1px 1px rgba(6,9,16,.22), 0 2px 4px rgba(6,9,16,.18);
  --el2:0 1px 2px rgba(6,9,16,.20), 0 3px 6px rgba(6,9,16,.18), 0 7px 14px rgba(6,9,16,.18);
  --el3:0 1px 2px rgba(6,9,16,.20), 0 5px 10px rgba(6,9,16,.18), 0 12px 24px rgba(6,9,16,.20), 0 24px 48px rgba(6,9,16,.26);
  --el4:0 2px 5px rgba(6,9,16,.22), 0 9px 20px rgba(6,9,16,.20), 0 22px 48px rgba(6,9,16,.24), 0 46px 92px rgba(6,9,16,.32);
  --aura:0 0 calc(30px*var(--nk,1)) rgba(var(--nc,255,92,92),calc(.22*var(--nk,1)));
}
/* FLOAT tier — the glass chrome (player pill, nav dock, mini) */
@media(max-width:900px){
  body .tn-player{box-shadow:var(--el3),var(--bevel),var(--aura)!important}
  body #p3-docknav .dk-main,body #p3-docknav .dk-search{box-shadow:var(--el3),var(--bevel),0 0 24px var(--dkglow)!important}
}
/* MODAL tier — the bottom sheet floats as a thick glass slab */
body #p3-sheet .sh-card{box-shadow:var(--el4),inset 0 1px 0 rgba(255,255,255,.28),0 0 40px var(--dkglow)!important}
/* RAISED tier — cards, tiles, quick-buttons: surface tint + bevel + layered shadow */
body .tn-scard .cvbig{box-shadow:var(--el3),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.08),var(--aura)!important}
body .tn-tile,body .tn-bigbtn{background-image:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,0) 60%)!important;box-shadow:var(--el2),var(--bevel),var(--aura)!important}
/* HERO — the home feature card, a deep cinematic slab */
body #p3-hero{box-shadow:var(--el4),inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(var(--nc),.22),0 0 calc(44px*var(--nk)) rgba(var(--nc),calc(.22*var(--nk)))!important}
/* BASE tier — grouped rows + chips lift off their backing */
body #p3-sheet .sh-row{background-image:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,0) 70%)!important;box-shadow:var(--el1),inset 0 1px 0 rgba(255,255,255,.12)!important}
body #p3-lib .lib-chip{box-shadow:var(--el1),var(--bevel)!important}

/* ============ HOME v2 — bigger, glassier, varied (less symmetrical) ============
   Tile glow follows the theme neon (--nc): change it in Settings > THEME (neon
   swatch / custom hue) and every tile glow follows. */
/* focus-grow reverted — cards uniform + static (bolting scale onto the old rows
   looked wrong; a proper prototype-matching shelf rebuild is the right way). */
/* mood tiles wear a curved glass sheen over their gradient (reads convex/glassy) */
.p3-moods-row .p3-mood-tile::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,0) 32%),linear-gradient(155deg,rgba(255,255,255,.06),transparent 62%)}
.p3-moods-row .p3-mood-tile span{position:relative;z-index:1}
.p3-moods-row .p3-mood-tile .p3-mood-gear{position:relative;z-index:2}
/* varied mood heights for rhythm (less symmetrical) */
.p3-moods-row .p3-mood-tile:nth-child(even){height:106px!important;align-self:flex-start}
/* generation covers pill-rounder to match the new radii */
#p3-stage .tn-gencv,.tn-gencv{border-radius:22px!important}
/* condensed section rhythm on mobile (desktop gets more air via the query below) */
.tn-shelf-h{margin:6px 2px 4px!important}
@media(min-width:1024px){html:not(.p3-shell-dk) .tn-shelf-h{margin:26px 2px 12px!important}
  /* (old 60% desktop rail geometry removed) */ }

/* ============ v8 TYPE SYSTEM — clean sans is the voice, mono is EMTAC flair ==========
   Root cause of "inconsistent / not special": the app inherited a monospace terminal
   base. This makes clean sans the DEFAULT across every tunes surface (beats the base
   mono, still loses to the user font-packs so those keep working), and re-applies mono
   ONLY where it's a deliberate signature. One voice everywhere; flair by intent. */
body #tn-content, body .tn-wrap, body #p3-stage, body #p3-docknav, body .tn-player, body #p3-sheet, body #p3-lib,
body #tn-content *:not(.ti):not(i), body #p3-stage *:not(.ti):not(i){
  font-family:-apple-system,"SF Pro Text",Inter,system-ui,"Segoe UI",Roboto,sans-serif}
/* signature mono: wordmark, section eyebrows, now-playing label, stat counts, timecodes */
.emtac-head,.emtac-head *,#tn-brandmark,
body .tn-shelf-a,
body #p3-hero .hk,
body #p3-stage .tn-full-lab,
body #tn-cur,body #tn-dur,body #tn-fcur,body #tn-fdur,body #p3-stage .tn-full-al{
  font-family:"SF Mono","JetBrains Mono",ui-monospace,SFMono-Regular,monospace!important}

/* ============ HOME v3 — the signed-off redesign: rails + focus-grow + varied shapes =====
   Ports the approved prototype. Preserves ALL engine markup/wiring — cards keep their
   data-shelf / data-kind / data-val and box() art — so navigation, playback and art
   mapping are untouched. This layer is styling + motion ONLY. */
:root{--fmax:.45}
/* RAILS: uniform gaps + snap-to-center so the focused card is deliberate, not a jiggle */
/* (old 44% rail geometry removed — v4 rows own their layout) */
.tn-shelf:not(.p3-moods-row)::-webkit-scrollbar{display:none}
/* (snap owned by v4 block) */
/* FOCUS-GROW: centered card scales up + lights its neon. --f (0..1) per card from the
   focus engine; --fmax = Settings focus-size. Unfocused .86 -> focused up to ~1.09. */
/* (focus transform owned by the v4 block below) */
/* THE single shelf-card glow — soft, wide, low-opacity bloom that scales with focus (no muddy ring).
   transition:none so the glow tracks the scroll instead of trailing it. This rule is authoritative;
   all older .cvbig glow rules were consolidated here. */
.tn-shelf .tn-scard .cvbig{box-shadow:var(--el3),inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px rgba(255,255,255,.07)!important;transition:none!important}  /* STATIC shadow only — the animated bloom moved to the ::after opacity layer (paint-free) */
.tn-shelf .tn-scard .cn,.tn-shelf .tn-scard .cc{opacity:calc(.6 + .4*var(--f,.6));transition:opacity .2s}
/* SHAPE VARIETY — artists become circles */
.tn-scard[data-kind="artist"] .cvbig{border-radius:50%!important}
/* SHAPE VARIETY — moods become an asymmetric bento (static grid, first tile tall) */
.p3-moods-row{display:grid!important;grid-template-columns:1fr 1fr!important;grid-auto-rows:106px!important;gap:12px!important;padding:8px 16px 6px!important;margin:0!important;overflow:visible!important;scroll-snap-type:none}
.p3-moods-row .p3-mood-tile{width:auto!important;height:auto!important}
.p3-moods-row .p3-mood-tile:first-child{grid-row:span 2}

/* desktop density: bigger cards + more presence on large screens (not mobile-stretched) */
@media(min-width:1024px){html:not(.p3-shell-dk) .tn-scard{width:214px!important}html:not(.p3-shell-dk) .tn-scard .cn{font-size:15px!important}html:not(.p3-shell-dk) .tn-scard .cc{font-size:12.5px!important}
}

/* ===== MOOD TILES — tinted see-through glass =====
   Per-mood color is fed in as --mt (rgb triple); the tile becomes a translucent
   tint of that color over a live backdrop blur, so the aurora shows through.
   Replaces the old solid inline gradients. */
.p3-mood-tile[data-mood="stormy"]     {--mt:64,156,230}   /* electric blue */
.p3-mood-tile[data-mood="melancholic"]{--mt:160,100,245}  /* neon violet   */
.p3-mood-tile[data-mood="energized"]  {--mt:255,74,92}    /* hot neon red  */
.p3-mood-tile[data-mood="midnight"]   {--mt:96,92,255}    /* neon indigo   */
.p3-mood-tile[data-mood="euphoric"]   {--mt:255,92,190}   /* neon pink     */
.p3-moods-row .p3-mood-tile{
  background:
    linear-gradient(180deg,rgba(255,255,255,.09),transparent 22%),
    linear-gradient(158deg,rgba(var(--mt,92,150,220),.30),rgba(var(--mt,92,150,220),.09))!important;  /* thin colored FROST — the backdrop reads through, not painted-on color */
  -webkit-backdrop-filter:blur(30px) saturate(2.6);backdrop-filter:blur(30px) saturate(2.6);
  border:1px solid rgba(var(--mt,255,255,255),.58)!important;              /* neon edge carries the color now */
  box-shadow:var(--el3),inset 0 1px 0 rgba(255,255,255,.20),inset 0 0 26px rgba(var(--mt),.10),0 0 26px rgba(var(--mt),.30)!important;
}

/* ===== FEATURED-CARD ROWS v4 — native flow + rigid frosted featured card =====
   The featured card NEVER resizes or collapses; it scrolls like any card.
   Regular cards get a gentle lerped focus scale + glow via --f. Settle = native snap. */
.tn-shelf.p3-pill{display:flex!important;gap:14px!important;padding:26px 26px 24px 44px!important;margin:-20px -16px -18px -28px!important;
  overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;scroll-padding-left:16px;scrollbar-width:none;
  max-width:none!important;   /* the tunes.css width cap was the REAL villain all along */
  -webkit-mask-image:none!important;mask-image:none!important;  /* NO masks on the zoomed mobile layout — html{zoom:.85} misplaces
     mask geometry ~15% in WKWebView (chopped cards, unreadable labels) AND mask layers on every
     scrolling row are GPU-memory hogs (jetsam fuel). The soft edge blend is ENGINE-DRIVEN instead:
     the v4 rAF loop writes --ef per card from visual-px geometry — zoom-proof by construction. */
  -webkit-overflow-scrolling:touch}
.tn-shelf.p3-pill::-webkit-scrollbar{display:none}
/* ============================================================
   EDGE VEIL SYSTEM — one knob, three coordinated layers, any screen.
   --edgeW scales the whole system: 14px on a small phone, up to 44px on a
   desktop, proportional in between (2.4vw) — portrait, landscape, resize.
   Layer A: pixel feather via wrap mask (desktop/iPad, html.p3-maskok only).
   Layer B: iOS frost veils (below) — masks stay banned on the zoomed WKWebView.
   Layer C: the engine --ef melt (player3.js) — the motion component, everywhere.
   ============================================================ */
:root{--edgeW:clamp(14px,2.4vw,44px)}
/* Layer A — the mask lives on the CLIP OWNER (live-debugged 2026-07-24: pill rows
   hang past the wrap's overflow-x:hidden edge, so a row-level feather sits in a zone
   the wrap has ALREADY hard-cut). One mask layer for the page, scales with --edgeW. */
html.p3-maskok .tn-wrap{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--edgeW),#000 calc(100% - var(--edgeW)),transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--edgeW),#000 calc(100% - var(--edgeW)),transparent 100%)!important}
/* Layer B — iOS EDGE VEILS: fixed frost strips at the physical screen edges.
   Three stacked children per side = a graduated blur+dim ramp with ZERO masks
   (zoom-proof by construction) and constant GPU cost (two small fixed strips,
   not per-row layers). Notch-aware: width grows by the safe-area inset so the
   fade owns the sensor band in landscape. JS builds these on non-maskok only.
   pointer-events:none — scroll and taps pass straight through. */
.p3-veil{position:fixed;top:0;bottom:0;z-index:30;pointer-events:none}
.p3-veil.l{left:0;width:calc(var(--edgeW) + env(safe-area-inset-left,0px))}
.p3-veil.r{right:0;width:calc(var(--edgeW) + env(safe-area-inset-right,0px))}
.p3-veil i{position:absolute;top:0;bottom:0;display:block;
  -webkit-backdrop-filter:blur(4px) saturate(1.15);backdrop-filter:blur(4px) saturate(1.15);
  background:rgba(6,8,12,.10)}
.p3-veil.l i{left:0}.p3-veil.r i{right:0}
.p3-veil i:nth-child(1){width:100%}
.p3-veil i:nth-child(2){width:62%}
.p3-veil i:nth-child(3){width:30%}
/* the full player and search overlays own the whole stage — veils stand down */
body.p3-open .p3-veil,body.p3-search .p3-veil{display:none}

/* LANDSCAPE PHONE GUARD — a rotated iPhone is 768+ px wide and was hijacked by
   the iPad sidebar shell (252px rail margin on a 390px-tall screen). Wide-but-
   short means phone-in-landscape: keep the phone column, dock stays a bottom
   pill, player pill full-width. The player card itself already handles this
   (geo() LS branch, innerHeight<520 — same threshold, one doctrine). */
@media(min-width:768px) and (max-height:520px){html:not(.p3-shell-dk) .tn-wrap{margin-left:auto!important;margin-right:auto!important;max-width:none!important;
    padding:24px 16px 120px!important}html:not(.p3-shell-dk) #p3-docknav{position:fixed!important;left:18px!important;right:18px!important;top:auto!important;
    bottom:94px!important;width:auto!important;height:auto!important;flex-direction:row!important;
    border-radius:999px!important}html:not(.p3-shell-dk) .tn-player{left:12px!important;right:12px!important;max-width:none!important;bottom:10px!important}
}
.tn-shelf.p3-pill .tn-scard{position:relative!important;flex:0 0 auto;margin:0!important;scroll-snap-align:start;
  overflow:visible!important;transition:none!important;will-change:transform,opacity;
  transform:scale(calc(.90 + .10*var(--f,.6)));transform-origin:50% 58%;
  opacity:calc((.92 + .08*var(--f,.6))*var(--ef,1))}   /* --ef = engine edge fade: cards melt at the glass, compositor-only */
/* THE CHOP FIX: glow lives on a pre-rendered pseudo-layer and animates via OPACITY only —
   compositor work, zero repaint. Animating box-shadow itself repaints every card every frame. */
.tn-shelf.p3-pill .tn-scard::after{content:'';position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1;
  border-radius:16px;pointer-events:none;z-index:-1;
  box-shadow:0 0 30px rgba(var(--nc,255,92,92),.30);
  opacity:calc(var(--f,0)*var(--nk,1));will-change:opacity}
.tn-shelf.p3-pill .tn-scard[data-kind="artist"]::after{border-radius:50%}
.tn-shelf.p3-pill .p3-feat{opacity:var(--ef,1);will-change:opacity}  /* featured card melts at the glass too */
/* the featured card: WIDE colored-frost glass — big art left, Play/Shuffle stacked right.
   --ft = per-row neon tint (set by the engine) so rails carry staggered colored glass. */
.p3-feat{flex:0 0 auto;width:302px;height:182px;border-radius:22px;scroll-snap-align:start;cursor:pointer;position:relative;overflow:hidden;box-sizing:border-box;
  display:flex;flex-direction:row;align-items:center;gap:14px;padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 26%),linear-gradient(158deg,rgba(var(--ft,var(--nc,255,92,92)),.24),rgba(var(--ft,var(--nc,255,92,92)),.07) 58%,rgba(13,16,23,.26));
  -webkit-backdrop-filter:blur(30px) saturate(2.3);backdrop-filter:blur(30px) saturate(2.3);   /* MORE see-through, MORE glass */
  border:1px solid rgba(var(--ft,var(--nc,255,92,92)),.58);                                    /* hotter neon edge */
  box-shadow:var(--el3),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 30px rgba(var(--ft,var(--nc,255,92,92)),.10),0 0 32px rgba(var(--ft,var(--nc,255,92,92)),calc(.30*var(--nk,1)))}
.p3-feat:active{transform:scale(.97)}
.p3-feat .pf-art{width:108px;height:108px;border-radius:16px;overflow:hidden;flex:0 0 auto;
  box-shadow:var(--el2),inset 0 1px 0 rgba(255,255,255,.18),0 0 14px rgba(var(--ft,var(--nc,255,92,92)),.28)}
.p3-feat .pf-art img{width:100%;height:100%;object-fit:cover;display:block}
.p3-feat .pf-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.p3-feat .pf-eye{font-family:'SF Mono',ui-monospace,monospace;font-size:9px;font-weight:700;letter-spacing:.22em;color:rgb(var(--ft,var(--nc,255,92,92)))}
.p3-feat .pf-btns{display:flex;align-items:center;gap:8px}
.p3-feat .pf-play{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;font-size:12.5px;font-weight:700;color:#0a0c10;
  background:linear-gradient(180deg,rgb(var(--ft,var(--nc,255,92,92))),rgba(var(--ft,var(--nc,255,92,92)),.82));
  box-shadow:0 8px 18px rgba(var(--ft,var(--nc,255,92,92)),.35),inset 0 1px 0 rgba(255,255,255,.3)}
.p3-feat .pf-play svg{width:13px;height:13px;fill:#0a0c10}
.p3-feat .pf-shuf{width:35px;height:35px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);box-shadow:var(--el1),inset 0 1px 0 rgba(255,255,255,.14)}
.p3-feat .pf-shuf svg{width:15px;height:15px;stroke:#dde3ee;stroke-width:2;fill:none}
.p3-feat .pf-meta{font-family:'SF Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.05em;color:#98a0b0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* artist rails stay all-circles — but the art INSIDE goes squircle to break the shape */
.p3-feat.round{width:182px;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:7px;padding:18px}
.p3-feat.round .pf-art{width:64px;height:64px;border-radius:16px}
.p3-feat.round .pf-col{align-items:center;gap:7px}
@media(min-width:1024px){html:not(.p3-shell-dk) .p3-feat{width:344px;height:214px}html:not(.p3-shell-dk) .p3-feat .pf-art{width:126px;height:126px}html:not(.p3-shell-dk) .p3-feat.round{width:214px}}

/* ============================================================
   SIDEBAR SHELL (>=768px — iPad portrait, iPad landscape, Mac, web).
   The approved tunes3 rail, CSS-only.
   The EXISTING dock (#p3-docknav) becomes the left glass rail: same
   buttons, same handlers, nothing rewired. Content clears the rail,
   the now-playing bar becomes a centered pill, grids densify.
   ============================================================ */
/* REMOVED 2026-07-25: superseded 768px rail attempt (216px, top:50%+translateY(-50%)).
   It painted a half-built rail off-frame before the shell loaded — the load flash.
   The desktop rail now lives ONLY in _emtac_shell.css (gated, own file). */


/* ============================================================
   LEGACY WALLPAPER RETIREMENT — the old skin system (#sk-bg) was
   "always active" and painted a blurred aurora blob biased to the
   RIGHT side of the screen (radial at 80% 60%, 60px blur, .8 alpha)
   + a gradient scrim. It has washed out the right third of every
   view. The P3 background engine + depth backdrop own the canvas
   now; the legacy layers are permanently off.
   ============================================================ */
#sk-bg{display:none!important}
/* and the legacy 10%-width right fade on shelves the engine doesn't manage */
.tn-shelf{-webkit-mask-image:none!important;mask-image:none!important}
/* (pill rows keep their own 18px feather — higher specificity, unaffected) */

/* ============================================================
   TABLET + DESKTOP OPTIMIZE — three tiers, all width-gated.
   ============================================================ */
/* — iPad portrait (768–1023): use the width, keep the phone feel — */
@media(min-width:768px) and (max-width:1023px){html:not(.p3-shell-dk) .tn-scard{width:196px!important}
  .p3-moods-row{grid-template-columns:repeat(3,1fr)!important}
  .tn-tiles{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important}
  .tn-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))!important}html:not(.p3-shell-dk) .tn-shelf-sec{margin:10px 0 0!important}
}
/* — iPad landscape / small desktop (1024–1199): full-bleed rails, centered dock — */
@media(min-width:1024px) and (max-width:1199px){html:not(.p3-shell-dk) .tn-wrap{max-width:none!important;padding-left:32px!important;padding-right:32px!important}
  .p3-moods-row{grid-template-columns:repeat(3,1fr)!important}
}
/* — big Mac / web (>=1200): richer density on the rail layout — */
@media(min-width:1200px){html:not(.p3-shell-dk) .tn-scard{width:224px!important}html:not(.p3-shell-dk) .tn-scard .cn{font-size:15px!important}html:not(.p3-shell-dk) .p3-feat{width:360px!important;height:224px!important}html:not(.p3-shell-dk) .p3-feat .pf-art{width:132px!important;height:132px!important}html:not(.p3-shell-dk) .tn-shelf-sec{margin:16px 0 2px!important}
}

/* ============================================================
   BIG-SCREEN RAIL FADES — rows bleed through BOTH side margins and
   dissolve across them. Fade zones sit inside the bleed+padding, so
   resting cards are always fully bright; scrolling cards melt through
   the margin space. Phone (<768) keeps its signed-off edge feather.
   ============================================================ */
@media(min-width:768px) and (max-width:1023px){html:not(.p3-shell-dk) .tn-shelf.p3-pill{margin-left:-16px!important;margin-right:-16px!important;
    padding-left:44px!important;padding-right:44px!important}
}
@media(min-width:1024px) and (max-width:1199px){html:not(.p3-shell-dk) .tn-shelf.p3-pill{margin-left:-32px!important;margin-right:-32px!important;
    padding-left:60px!important;padding-right:60px!important}
}
@media(min-width:1200px){html:not(.p3-shell-dk) .tn-shelf.p3-pill{margin-left:-90px!important;margin-right:-90px!important;
    padding-left:118px!important;padding-right:118px!important}
}

/* ============================================================
   RAIL SKIN — fully self-contained. The dock's base styles are
   mobile-gated in player3.css, so at rail widths the buttons fell
   back to raw UA styling (white blocks, giant icons). Never again.
   Also: the base-site EMTACNET banner is not part of 'Tunes.
   ============================================================ */
.banner,.node-status{display:none!important}
@media(min-width:768px){html:not(.p3-shell-dk) #p3-docknav{background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 16%),linear-gradient(158deg,rgba(52,60,82,.32),rgba(14,16,24,.50))!important;
    -webkit-backdrop-filter:blur(26px) saturate(1.85)!important;backdrop-filter:blur(26px) saturate(1.85)!important;
    border:1px solid rgba(255,255,255,.14)!important;
    box-shadow:0 2px 5px rgba(6,9,16,.22),0 10px 22px rgba(6,9,16,.20),0 24px 52px rgba(6,9,16,.26),
      inset 0 1px 0 rgba(255,255,255,.26),0 0 30px rgba(var(--nc,255,92,92),calc(.14*var(--nk,1)))!important}html:not(.p3-shell-dk) #p3-docknav .dk-it{background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;
    color:#aab3c0!important;cursor:pointer;
    font:600 13px/1 -apple-system,'SF Pro Text',Inter,system-ui,sans-serif!important}html:not(.p3-shell-dk) #p3-docknav .dk-it svg{width:20px!important;height:20px!important;flex:0 0 auto}html:not(.p3-shell-dk) #p3-docknav .dk-it span{color:inherit!important;font-size:13px!important;font-weight:600!important;letter-spacing:.04em!important;text-transform:none!important}html:not(.p3-shell-dk) #p3-docknav .dk-it:hover{color:#eef2f7!important;background:rgba(255,255,255,.05)!important}html:not(.p3-shell-dk) #p3-docknav .dk-it.on{color:#eef2f7!important}html:not(.p3-shell-dk) #p3-docknav .dk-search{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;
    color:#aab3c0!important;box-shadow:none!important;cursor:pointer;display:flex!important;align-items:center!important;justify-content:center!important}html:not(.p3-shell-dk) #p3-docknav .dk-search svg{width:18px!important;height:18px!important}
}

/* ============================================================
   MEMORY DIET — WKWebView jetsam prevention (the REAL crashes).
   1) Offscreen sections don't render at all (GPU + raster savings
      across the whole scroll length).
   2) The full-player backdrop is BLURRED anyway — halve its filter
      cost; detail is invisible at blur(28) vs blur(48).
   ============================================================ */
.tn-shelf-sec{content-visibility:visible}  /* auto + contain clip children; visible = no clipping */
.tn-full-bg{filter:blur(28px) brightness(.42) saturate(1.25)!important}

/* ============================================================
   ZOOM QUARANTINE — the base site's html{zoom:.85} is a mobile-era
   global. On big screens it shrinks the rendered layout 15% below
   the vw-based math (rail + calc widths), leaving a ~270px dead
   column on the right. Desktop/iPad render 1:1; phone keeps zoom.
   ============================================================ */
@media(min-width:768px){
  html{zoom:1!important}
}

/* ============================================================
   MOBILE SEARCH — iOS-scale field. Was 46px tall / 14px text in the MONO pack,
   which reads small and hard on a phone and breaks Design System v8 (mono is
   for eyebrows and stats only, never body input). Now: 54px, 17px SANS.
   17px is deliberate — iOS Safari zooms the viewport on focus for any input
   under 16px, which was also yanking the layout around.
   Scoped to <=900px: the desktop shell owns its own search field.
   ============================================================ */
@media(max-width:900px){
  body.p3-search .tn-searchwrap{
    left:10px!important;right:10px!important;
    top:calc(76px + env(safe-area-inset-top,0px))!important}
  .tn-search{
    height:54px!important;
    font-size:17px!important;
    font-weight:500!important;
    letter-spacing:0!important;
    /* SANS, always — the terminal pack made this unreadable */
    font-family:-apple-system,'SF Pro Text',Inter,system-ui,sans-serif!important;
    color:#f4f7fb!important;
    padding:0 46px 0 52px!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.07) 60%),
      rgba(18,21,30,.72)!important;
    border:1px solid rgba(255,255,255,.22)!important;
    -webkit-backdrop-filter:blur(24px) saturate(1.6)!important;backdrop-filter:blur(24px) saturate(1.6)!important;
    box-shadow:0 10px 30px rgba(4,6,10,.45),inset 0 1px 0 rgba(255,255,255,.22)!important;
    -webkit-appearance:none;appearance:none}
  /* placeholder must be readable, not a ghost */
  .tn-search::placeholder{color:#a6b0c0!important;font-weight:500!important;opacity:1!important}
  .tn-search::-webkit-input-placeholder{color:#a6b0c0!important;opacity:1!important}
  /* bigger magnifier, aligned to the taller field */
  .tn-searchwrap::before{
    left:19px!important;width:19px!important;height:19px!important;opacity:1!important}
  /* focus: accent ring, no layout shift */
  .tn-search:focus{
    border-color:rgba(var(--nc,255,92,92),.75)!important;
    box-shadow:0 0 0 3px rgba(var(--nc,255,92,92),.22),0 12px 34px rgba(4,6,10,.5),
      inset 0 1px 0 rgba(255,255,255,.24)!important;
    outline:none!important}
  /* native clear button large enough to hit */
  .tn-search::-webkit-search-cancel-button{
    -webkit-appearance:none;appearance:none;
    width:22px;height:22px;margin-right:2px;cursor:pointer;
    background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6b0c0' stroke-width='2.4' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M9 9l6 6M15 9l-6 6'/></svg>")}
  /* result rows: sans + larger tap targets, same reasoning */
  body.p3-search .tn-row .tt{font-size:16px!important;font-weight:600!important;
    font-family:-apple-system,'SF Pro Text',Inter,system-ui,sans-serif!important}
  body.p3-search .tn-row .ta{font-size:13.5px!important;
    font-family:-apple-system,'SF Pro Text',Inter,system-ui,sans-serif!important}
}