/* =====================================================================================================
   VYBEON Nova - one look for every screen, modelled on the full-screen voice search:
   deep black with a blue/violet glow and a particle field in dark mode; the same layout in soft pastels in light mode.
   Loaded after style.css. Everything is scoped under html[data-nova], so removing the link restores 3.10.0 exactly.
   ===================================================================================================== */

/* ---------- colour tokens ---------- */
html[data-nova][data-theme=dark]{
  --bg:#04050a;--card:#0b0d1a;--card2:#12152a;--surface:#0b0d1a;--surface2:#12152a;--line:#ffffff14;--track:#2a3050;
  --text:#eef0fa;--muted:#99a1bd;--hover:#ffffff0e;--sheet:#0b0d1c;--side:#06070fcc;--bar:#06070fd9;
  --vio:#8d6bff;--teal:#6ee7d0;--rose:#e064ff;--amber:#ffd08a;--ring:#a58bff;
  --grad:linear-gradient(135deg,#5b7cff 0%,#9a5cff 52%,#e064ff 100%);--on-grad:#fff;
  --glass:rgba(12,14,30,.62);--glass2:rgba(255,255,255,.045);--glass-line:rgba(255,255,255,.10);
  --glass-shadow:0 18px 50px -28px #000,inset 0 1px 0 rgba(255,255,255,.07);--glow:#7a5cff;
  background:
    linear-gradient(90deg,#2447ff30,transparent 30%) fixed,
    linear-gradient(270deg,#7a3cff30,transparent 30%) fixed,
    radial-gradient(90% 60% at 50% 78%,#2a1a6e4d,transparent 70%) fixed,#04050a;
}
html[data-nova][data-theme=light]{
  --bg:#fbf8ff;--card:#ffffffb8;--card2:#ffffffe0;--surface:#ffffffc0;--surface2:#f4eefe;--line:#e6dcf7;--track:#e2d8f5;
  --text:#2a2350;--muted:#6d6796;--hover:#7a5cff12;--sheet:#fffaff;--side:#ffffffb8;--bar:#ffffffd9;--scrim:#2a235099;
  --vio:#8466f0;--teal:#0a9a86;--rose:#e0559c;--amber:#b0700f;--ring:#8466f0;
  --grad:linear-gradient(135deg,#ffa8cf 0%,#c3aaff 52%,#8fe3d6 100%);--on-grad:#2a2350;
  --glass:rgba(255,255,255,.66);--glass2:rgba(255,255,255,.5);--glass-line:rgba(255,255,255,.95);
  --glass-shadow:0 16px 44px -24px rgba(150,110,255,.5),inset 0 1px 0 #fff;--glow:#b79bff;
  background:
    radial-gradient(60% 50% at 14% 10%,#ffd9ec 0,transparent 62%) fixed,
    radial-gradient(55% 50% at 88% 18%,#dcd0ff 0,transparent 62%) fixed,
    radial-gradient(62% 55% at 62% 98%,#cdf5ec 0,transparent 62%) fixed,#fbf8ff;
}
/* the immersive surfaces keep their own dark tokens; give them the same accent */
html[data-nova] .np,html[data-nova] .hero,html[data-nova] .yt-dock,html[data-nova] .emb-dock{
  --vio:#9b84ff;--rose:#e064ff;--grad:linear-gradient(135deg,#5b7cff 0%,#9a5cff 52%,#e064ff 100%);--on-grad:#fff;--teal:#6ee7d0;
}
html[data-nova] body{background:transparent!important}
html[data-nova] .aurora{display:none}
html[data-nova][data-theme=dark] body{color-scheme:dark}
#novaFx{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}

/* ---------- headings: calm weight, accent fades in at the end of the line (like the voice screen) ---------- */
html[data-nova] .page-head h1,html[data-nova] .entity-head h1,html[data-nova] .sheet h2{
  font-weight:600;letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--text) 0%,var(--text) 52%,var(--vio) 80%,var(--rose) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
html[data-nova] .page-head h1{font-size:clamp(30px,5vw,56px)}
html[data-nova] .section h2{font-size:21px;font-weight:650}
html[data-nova] .section>.row h2,html[data-nova] .section>h2{display:flex;align-items:center;gap:10px}
html[data-nova] .section>.row h2::before,html[data-nova] .section>h2::before,html[data-nova] .nova-head h2::before{content:"";width:6px;height:20px;border-radius:6px;background:var(--grad);flex:none}
html[data-nova] .page-head p,html[data-nova] .entity-head p{color:var(--muted)}
html[data-nova] .hero small,html[data-nova] .entity-head small,html[data-nova] .fmeta small,html[data-nova] .nova-head small{letter-spacing:.24em;font-weight:700}
html[data-nova] .nova-head small{display:block;color:var(--teal);font-size:11px;margin-bottom:6px}
html[data-nova] .nova-sub{font-size:15px;color:var(--muted);margin:18px 0 10px;font-weight:650;letter-spacing:.02em}

/* ---------- glass surfaces (blur only on the few large surfaces: many blurred cards would slow phones down) ---------- */
html[data-nova][data-theme=dark] .card,html[data-nova][data-theme=dark] .panel,html[data-nova][data-theme=dark] .stat,html[data-nova][data-theme=dark] .fcard,
html[data-nova][data-theme=dark] .np-tools,html[data-nova][data-theme=dark] .stamp,html[data-nova][data-theme=dark] .fbtn,html[data-nova][data-theme=dark] .install-banner,
html[data-nova][data-theme=dark] .announce,html[data-nova][data-theme=dark] .empty,html[data-nova][data-theme=dark] .note,html[data-nova][data-theme=dark] .search-pill,
html[data-nova][data-theme=light] .card,html[data-nova][data-theme=light] .panel,html[data-nova][data-theme=light] .stat,html[data-nova][data-theme=light] .fcard,
html[data-nova][data-theme=light] .np-tools,html[data-nova][data-theme=light] .stamp,html[data-nova][data-theme=light] .fbtn,html[data-nova][data-theme=light] .install-banner,
html[data-nova][data-theme=light] .announce,html[data-nova][data-theme=light] .empty,html[data-nova][data-theme=light] .note,html[data-nova][data-theme=light] .search-pill{
  background:linear-gradient(180deg,var(--glass2),transparent),var(--glass);
  border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);
}
html[data-nova] .fcard,html[data-nova] .panel,html[data-nova] .install-banner,html[data-nova] .announce,html[data-nova] .search-pill,html[data-nova] .np-tools{-webkit-backdrop-filter:blur(16px) saturate(1.35);backdrop-filter:blur(16px) saturate(1.35)}
html[data-nova] .empty{border-style:dashed}
html[data-nova] .card,html[data-nova] .fcard,html[data-nova] .panel{border-radius:26px}
html[data-nova] .card{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
html[data-nova] .card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--vio) 60%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--vio) 40%,transparent),0 26px 60px -26px color-mix(in srgb,var(--glow) 70%,transparent)}
html[data-nova][data-theme=dark] .card:hover{background:linear-gradient(180deg,#ffffff14,#ffffff06),#0e1124}
html[data-nova] .cover{border-radius:20px}
html[data-nova][data-theme=light] .cover{background:var(--cv,linear-gradient(135deg,#ffd0e6,#cdbfff 55%,#b9ecdf));color:#ffffffe6;text-shadow:0 2px 12px #8466f066}
html[data-nova] .trow{border-radius:18px;transition:background .2s}
html[data-nova] .trow:hover{background:color-mix(in srgb,var(--vio) 10%,transparent)}
html[data-nova] .trow.cur{background:linear-gradient(90deg,color-mix(in srgb,var(--vio) 18%,transparent),transparent);box-shadow:inset 3px 0 var(--rose)}
html[data-nova] .tile{border-radius:22px;box-shadow:0 18px 40px -22px color-mix(in srgb,var(--glow) 70%,#000)}

/* rows for songs found by Nova (own class: the app's own song rows carry extra data the app reads) */
.nova-list{display:grid;gap:4px}
.nova-trow{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;border-radius:18px;cursor:pointer;transition:background .2s}
.nova-trow:hover,.nova-trow:focus-visible{background:color-mix(in srgb,var(--vio) 12%,transparent)}
.nova-trow .cover{width:48px;border-radius:12px;font-size:15px}
.nova-trow .tt{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nova-trow .ta{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nova-trow .badge{font-size:10px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--teal) 16%,transparent);color:var(--teal);text-transform:uppercase}

/* ---------- inputs, chips, buttons ---------- */
html[data-nova] .searchbar input,html[data-nova] .dsearch input,html[data-nova] .field{
  background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:999px;
}
html[data-nova] .field{border-radius:16px}
html[data-nova] .searchbar input:focus,html[data-nova] .field:focus{border-color:var(--vio);box-shadow:0 0 0 4px color-mix(in srgb,var(--vio) 22%,transparent),0 0 40px -10px var(--glow)}
html[data-nova] .chip{background:var(--glass);border:1px solid var(--glass-line)}
html[data-nova] .chip.on{background:var(--grad);color:var(--on-grad);border-color:transparent;box-shadow:0 8px 24px -12px var(--glow)}
html[data-nova] .btn{box-shadow:0 10px 30px -14px var(--glow);transition:transform .18s,filter .18s,box-shadow .18s}
html[data-nova] .btn:hover{box-shadow:0 14px 36px -12px var(--glow)}
html[data-nova] .btn.ghost{background:var(--glass);box-shadow:none;border:1px solid var(--line)}
html[data-nova] .nova-actions{gap:8px;flex-wrap:wrap;margin-top:6px}
html[data-nova] .play-btn.xl,html[data-nova] .hl-btns .play-btn{background:var(--grad);color:var(--on-grad);box-shadow:0 0 0 6px color-mix(in srgb,var(--glow) 18%,transparent),0 14px 40px -12px var(--glow)}
html[data-nova] .menu a.on{background:var(--grad);color:var(--on-grad);box-shadow:0 10px 28px -14px var(--glow)}
html[data-nova] .brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- navigation, player bar, sheets ---------- */
html[data-nova] .side{background:var(--side);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border-right:1px solid var(--glass-line)}
html[data-nova] .topbar,html[data-nova] .tabbar{background:var(--bar);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);border-color:var(--glass-line)}
html[data-nova][data-view=mobile] .tabbar a.on{background:color-mix(in srgb,var(--vio) 18%,transparent);color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--vio) 35%,transparent)}
html[data-nova] .player,html[data-nova][data-theme=dark] .player,html[data-nova][data-theme=light] .player{background:var(--bar);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);border-color:var(--glass-line);box-shadow:var(--glass-shadow)}
html[data-nova] .modal{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-nova] .sheet{background:var(--sheet);border:1px solid var(--glass-line);border-radius:30px;box-shadow:var(--glass-shadow),0 40px 90px -30px #000}
html[data-nova] .suggest{background:var(--sheet);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow)}
html[data-nova] .toast{background:var(--grad);color:var(--on-grad);box-shadow:0 18px 44px -16px var(--glow)}

/* ---------- home hero: light mode gets a dusk-pastel card, the spectrum glows through it ---------- */
html[data-nova] .hero{border:1px solid var(--glass-line);box-shadow:var(--glass-shadow),0 30px 80px -40px var(--glow)}
html[data-nova][data-theme=light] .hero{background:linear-gradient(130deg,#7d68e8,#b184ec 55%,#f293c8);border-color:#ffffffaa}
html[data-nova][data-theme=light] .hero>canvas{mix-blend-mode:screen;opacity:.95}
html[data-nova][data-theme=light] .hero::before{background:linear-gradient(90deg,#4a3aa88f 0%,#4a3aa833 55%,transparent 100%)}
html[data-nova][data-theme=light] .hero.live .hero-live{background:linear-gradient(transparent,#3a2a8acc 45%,#2c1f6af0)}

/* ---------- screens fade up as you move between them ---------- */
@keyframes novaIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html[data-nova] #view>*{animation:novaIn .5s cubic-bezier(.2,.7,.2,1) both}
html[data-nova] #view>*:nth-child(2){animation-delay:.05s}html[data-nova] #view>*:nth-child(3){animation-delay:.1s}html[data-nova] #view>*:nth-child(n+4){animation-delay:.14s}
html[data-nova] .nova-coll{animation:novaIn .45s both}

/* ---------- Back button on every screen ---------- */
.nova-back{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 15px 0 10px;border-radius:999px;font-weight:700;font-size:13.5px;color:var(--text);
  background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:var(--glass-shadow);transition:transform .18s,border-color .18s,opacity .2s}
.nova-back:hover{transform:translateX(-2px);border-color:var(--vio)}
.nova-back[data-home="1"]{opacity:.6}
.nova-back.nudge{animation:novaNudge .42s}
@keyframes novaNudge{25%{transform:translateX(-6px)}60%{transform:translateX(3px)}}
.nova-back-float{position:fixed;top:14px;left:calc(var(--side-w,244px) + clamp(16px,3.2vw,48px));z-index:44}
.nova-back-top{display:none}
html[data-nova]:not([data-view=mobile]) main{padding-top:70px}
html[data-nova][data-view=mobile] .nova-back-float{display:none}
html[data-nova][data-view=mobile] .nova-back-top{display:inline-flex;width:38px;padding:0;justify-content:center;flex:none}
html[data-nova][data-view=mobile] .nova-back-top span{display:none}
body.np-open .nova-back-float,body.voice-open .nova-back-float{display:none}

/* ---------- provider players: playing, but out of sight until Watch (the eye) is tapped ---------- */
html[data-nova] #ytStop,html[data-nova] #embClose{display:none}
html[data-nova] body:not(.nova-watch):not(.nova-tap):not(.nova-always) .yt-dock,
html[data-nova] body:not(.nova-watch):not(.nova-tap):not(.nova-always) .emb-dock{opacity:0;pointer-events:none;z-index:0;transition:none}
html[data-nova] body.yt-on:not(.nova-watch) #vinyl,
html[data-nova] body.emb-on:not(.nova-watch):not(.nova-tap) #vinyl{visibility:visible}
html[data-nova] body.nova-tap .emb-dock{opacity:1;pointer-events:auto}
.nova-eye{display:none!important}
body.yt-on .nova-eye,body.emb-on .nova-eye{display:inline-grid!important}
.nova-eye[aria-pressed=true]{color:var(--teal);background:color-mix(in srgb,var(--teal) 16%,transparent)}
.nova-hide{margin-left:auto}
body.nova-tap .nova-hide{display:none}
#novaHint{position:fixed;left:50%;bottom:calc(var(--bar-h,76px) + var(--tab,0px) + var(--sab,0px) + 24px);transform:translate(-50%,16px);z-index:101;max-width:min(92vw,420px);padding:11px 18px;border-radius:18px;
  background:var(--grad);color:var(--on-grad);font-weight:700;font-size:14px;text-align:center;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 18px 44px -16px var(--glow)}
#novaHint.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Now Playing keeps its full-screen spectrum; the top bar gets a glass finish ---------- */
html[data-nova] .np-top{align-items:center}
html[data-nova] .np-top .icon-btn{background:#ffffff0f;border:1px solid #ffffff14;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

@media(prefers-reduced-motion:reduce){html[data-nova] #view>*,html[data-nova] .nova-coll{animation:none}.nova-back,.nova-back.nudge{transition:none;animation:none}}