/* ===== VARIATION 10 — "Aqua" (deep ocean teal-blue, cyan accent, fluid) =====
   Same app.css base + same app.js/data.js (identical functionality); ocean theme only. */
@import url('app.css');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#04141c; --bg2:#020d13; --panel:#072330; --panel2:#0a2e3f; --panel3:#0e3c51;
  --line:#0e3a4d; --line2:#175b76;
  --txt:#e6fbff; --mut:#9fcdda; --dim:#5f97a8; --faint:#3d6b78;
  --accent:#22d3ee; --accent2:#5ee0f5; --accent-d:#0fb6d4; --accent-ghost:rgba(34,211,238,.14);
  --teal2:#2dd4bf; --blue2:#3b82f6;
  --grad:linear-gradient(120deg,var(--teal2),#22d3ee 55%,#3b82f6);
  --red:#ff6b7d; --amber:#ffcf5a; --grass:#34d9a8; --sky:#5ee0f5;
  --on-accent:#022027; --accent-rgb:34,211,238;
  --nav-bg:rgba(4,20,28,.64); --player-bg:#020d13; --ghost-bg:rgba(255,255,255,.06);
  --shadow:0 28px 64px -28px rgba(20,140,170,.5);
  --r:14px; --r2:18px;
}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(960px 560px at 86% -10%,rgba(34,211,238,.18),transparent 60%),
    radial-gradient(820px 480px at -6% 6%,rgba(45,212,191,.14),transparent 55%),
    linear-gradient(180deg,#06202c,var(--bg) 42%);}
h1,h2,h3,h4,.hero h1,.hero .hero-title,.shead h2,.qv-title,.co-h,.oi-h,.auth-visual h3,.cm-title{font-family:Sora,Inter,sans-serif;letter-spacing:-.5px}

.nav{backdrop-filter:blur(18px) saturate(1.2)}
.rail{background:linear-gradient(180deg,rgba(7,35,48,.95),rgba(2,13,19,.95))}
.mega{background:rgba(7,35,48,.95);backdrop-filter:blur(16px)}

.shead h2 .bar,.shead h2::before{background:var(--grad);box-shadow:0 0 14px rgba(34,211,238,.5)}
.hero-eyebrow{color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text}
.hero-eyebrow::before{background:var(--teal2);box-shadow:0 0 12px var(--teal2)}
.btn.play,.cart-checkout,.co-pay,.cm-add{background:var(--grad);color:#022027}
.wave .wprog,.pl-vol .vfill{background:var(--grad)}
.wave .wfill{}   /* recolour now handled by mask + accent background in app.css */
.player::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad);opacity:.8}
.player{border-top:0;box-shadow:0 -1px 0 rgba(34,211,238,.3),0 -16px 40px -20px #000}

.card,.tcard .tart,.banner,.member .pava{border-radius:var(--r)}
.card:hover,.tcard:hover .tart,.banner:hover{border-color:transparent;box-shadow:0 0 0 1px rgba(34,211,238,.5),0 22px 54px -22px rgba(20,140,170,.45)}
.pill.on,.tab.on{background:linear-gradient(120deg,rgba(45,212,191,.16),rgba(34,211,238,.22));color:#fff;box-shadow:inset 0 0 0 1px rgba(34,211,238,.45)}
.pill:hover{border-color:var(--accent)}
.fly-links a:hover,.mega-col a:hover{border-color:var(--accent);color:var(--accent2);box-shadow:inset 0 0 0 1px rgba(34,211,238,.45)}
.hero-art{box-shadow:0 36px 90px -34px rgba(20,140,170,.55),0 0 0 1px var(--line2)}
.auth-visual{background:linear-gradient(150deg,#2dd4bf,#1567a8 55%,#04141c)}