/* Phonophile · pp-glass v4 (bubble rim: richer cyan/blue + orange/magenta fringes, iridescent hairline; bodies clear).
   Replaces pp-glass3.css. Based on pp-glass v3 — CLEAR Liquid Glass, light + dark (replaces pp-glass2.css; load LAST).
   The glass body is transparent: no white or black fill. You see the real floor/content through it; depth comes from the
   rim (pp-glass3.js renders the current theme's floor refracted through a thick convex rim), specular highlights,
   chromatic fringes and a soft shadow. Smoked glass (black keys, toasts) is translucent and theme-aware.
   Materials only: no layout, size, padding, position or z-order changes. Never on artwork, deck, tonearm, vinyl, crates.
   Theme = html[data-theme=dark|light], else prefers-color-scheme. */
:root{
  --g3-tint: rgba(255,255,255,.06);
  --g3-key: rgba(255,255,255,.95); --g3-fill: rgba(255,255,255,.55); --g3-hair: rgba(0,0,0,.10);
  --g3-red: rgba(255,120,40,.34); --g3-blue: rgba(0,175,255,.34); --g3-mag: rgba(235,60,190,.30); --g3-cyan: rgba(60,230,255,.32);
  --g3-glow: rgba(255,255,255,.30);
  --g3-shadow: 0 10px 26px -14px rgba(20,20,30,.30), 0 2px 6px -3px rgba(20,20,30,.14);
  --g3-smoke: rgba(22,22,26,.72); --g3-smoke-ink: #fff; --g3-smoke-key: rgba(255,255,255,.55);
}
html[data-theme=dark]{
  --g3-tint: rgba(255,255,255,.035);
  --g3-key: rgba(255,255,255,.70); --g3-fill: rgba(255,255,255,.28); --g3-hair: rgba(255,255,255,.10);
  --g3-red: rgba(255,140,60,.38); --g3-blue: rgba(40,170,255,.40); --g3-mag: rgba(240,80,210,.36); --g3-cyan: rgba(80,235,255,.36);
  --g3-glow: rgba(255,255,255,.10);
  --g3-shadow: 0 12px 28px -14px rgba(0,0,0,.65), 0 2px 6px -3px rgba(0,0,0,.4);
  --g3-smoke: rgba(255,255,255,.10); --g3-smoke-ink: #f5f5f7; --g3-smoke-key: rgba(255,255,255,.45);
}
@media (prefers-color-scheme: dark){ html:not([data-theme=light]){
  --g3-tint: rgba(255,255,255,.035);
  --g3-key: rgba(255,255,255,.70); --g3-fill: rgba(255,255,255,.28); --g3-hair: rgba(255,255,255,.10);
  --g3-red: rgba(255,140,60,.38); --g3-blue: rgba(40,170,255,.40); --g3-mag: rgba(240,80,210,.36); --g3-cyan: rgba(80,235,255,.36);
  --g3-glow: rgba(255,255,255,.10);
  --g3-shadow: 0 12px 28px -14px rgba(0,0,0,.65), 0 2px 6px -3px rgba(0,0,0,.4);
  --g3-smoke: rgba(255,255,255,.10); --g3-smoke-ink: #f5f5f7; --g3-smoke-key: rgba(255,255,255,.45);
} }
/* ---------- clear glass (beats the app's light AND dark skin fills) ---------- */
html .wax-tabs, html .wax-scan-upc, html .wax-search, html .wax-friend-pick, html .ppg-glass, html .ppg2-glass, html .ppg3-glass{
  background-color: var(--g3-tint) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%) !important;
  -webkit-backdrop-filter: saturate(160%) contrast(1.03); backdrop-filter: saturate(160%) contrast(1.03);   /* no blur: clear glass */
  box-shadow:
    inset 1.5px 1.5px 0 -.5px var(--g3-key), inset -1px -1px 0 -.25px var(--g3-fill),          /* specular rim */
    inset 2px 0 2px -1px var(--g3-red), inset -2px 0 2px -1px var(--g3-blue),                  /* dispersion fringes */
    inset 0 2px 2px -1px var(--g3-red), inset 0 -2px 2px -1px var(--g3-blue),
    inset 3.5px 3.5px 4px -2.5px var(--g3-cyan), inset -3.5px -3.5px 4px -2.5px var(--g3-mag),   /* v4: deeper spectral bleed */
    inset 0 0 8px var(--g3-glow),                                                              /* thick-glass edge glow */
    0 0 0 .5px var(--g3-hair), var(--g3-shadow) !important;
}
/* rim image from pp-glass3.js (transparent body) sits on top of the faint sheen */
html .ppg2-lensed{ background-size: 100% 100%, 100% 100% !important; }
html .wax-tabs{ border-top-color: transparent !important;
  box-shadow: inset 0 1.5px 0 -.5px var(--g3-key), inset 0 3px 3px -2px var(--g3-red), inset 0 5px 4px -3px var(--g3-cyan), inset 0 6px 8px -6px var(--g3-glow), 0 -.5px 0 var(--g3-hair) !important; }
html .wax-search{ color: inherit; }
html .wax-search:focus{ outline:none; box-shadow: inset 1.5px 1.5px 0 -.5px var(--g3-key), inset -1px -1px 0 -.25px var(--g3-fill), 0 0 0 .5px var(--g3-hair), 0 0 0 4px rgba(120,160,255,.18), var(--g3-shadow) !important; }
/* active-tab droplet: clear lens bubble */
.wax-tabs > .ppg2-drop{
  position:absolute; z-index:-1; pointer-events:none; border-radius:999px; background: var(--g3-tint);
  box-shadow: inset 1.5px 1.5px 0 -.5px var(--g3-key), inset -1px -1px 0 -.25px var(--g3-fill),
              inset 2.5px 0 3px -2px var(--g3-red), inset -2.5px 0 3px -2px var(--g3-blue),
              inset 3px 3px 4px -2px var(--g3-cyan), inset -3px -3px 4px -2px var(--g3-mag),
              inset 0 0 10px var(--g3-glow), 0 4px 12px -6px rgba(0,0,0,.28), 0 0 0 .5px var(--g3-hair);
  transition: left .55s cubic-bezier(.3,1.45,.45,1), width .45s cubic-bezier(.3,1.45,.45,1);
}
.wax-friend-pick-row{ border-radius:999px !important; background: var(--g3-tint) !important;
  box-shadow: inset 1px 1px 0 -.25px var(--g3-key), inset -1px -1px 0 -.25px var(--g3-fill), inset 1.5px 0 2px -1px var(--g3-red), inset -1.5px 0 2px -1px var(--g3-blue), 0 0 0 .5px var(--g3-hair) !important; }
/* ---------- smoked glass: translucent, readable, theme-aware ---------- */
html .wax-sync-btn, html .jk-scan-launch, html .wax-grail-toast{
  color: var(--g3-smoke-ink) !important;
  background-color: var(--g3-smoke) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 45%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
  text-shadow: 0 .5px 1px rgba(0,0,0,.35);
  box-shadow: inset 1.5px 1.5px 0 -.5px var(--g3-smoke-key), inset -1px -1px 0 -.25px rgba(255,255,255,.2),
              inset 2px 0 2px -1px var(--g3-red), inset -2px 0 2px -1px var(--g3-blue),
              inset 3px 3px 4px -2.5px var(--g3-cyan), inset -3px -3px 4px -2.5px var(--g3-mag),
              inset 0 0 10px rgba(255,255,255,.08), 0 0 0 .5px var(--g3-hair), var(--g3-shadow) !important; }
html .jk-scan-launch{ border-radius: 12px; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  html .wax-sync-btn, html .jk-scan-launch, html .wax-grail-toast{ background-color: rgba(28,28,32,.86) !important; }
  html[data-theme=dark] .wax-sync-btn, html[data-theme=dark] .wax-grail-toast{ background-color: rgba(70,70,76,.9) !important; }
}
/* ---------- press springs ---------- */
.wax-tabs button{ transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.wax-tabs button:active{ transform: scale(.88); }
.wax-scan-upc:active, .wax-search:active, .wax-sync-btn:active, .jk-scan-launch:active{ transform: scale(.975); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.wax-grail-plus:active, .wax-later-btn:active, .wax-friend-pick-row:active{ transform: scale(.88); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.ppl-pool{ pointer-events:none !important; }
@media (prefers-reduced-motion: reduce){
  .wax-tabs > .ppg2-drop, .wax-tabs button, .wax-scan-upc, .wax-search, .wax-sync-btn, .jk-scan-launch, .wax-grail-plus, .wax-later-btn{ transition:none !important; }
}