/* ============================================================================
   PHILOSOMATIKA DESIGN SYSTEM  (philo-ds.css)
   Extracted from dir-A-v2-free. Single source of truth for the whole site:
   public landing, signup/Premium, registered-free, player, account/billing,
   auth, lifecycle, admin. Load this on every page, then page-specific CSS.
   Fonts: Rubik (display) + Hanken Grotesk (body) via Google Fonts:
   <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
   ============================================================================ */

/* ---- TOKENS --------------------------------------------------------------- */
:root{
  /* surfaces */
  --bg:#0a0c0b; --surface:#121613; --surface-2:#171c19;
  /* strokes: -2 = quiet structure, default = dividers, -strong = option outlines */
  --line-2:rgba(255,255,255,.045); --line:rgba(255,255,255,.09); --line-strong:rgba(255,255,255,.2);
  /* brand */
  --brand:#4dff66; --brand-2:#2fd96a; --brand-3:#19e0c0; --brand-ink:#04210d;
  /* text */
  --text:#eaf0ec; --text-2:#9aa39d; --text-3:#5f6a63;
  /* channel accents */
  --ch-psy:#4dff66; --ch-prog:#19e0c0; --ch-chill:#7d6bff;
  /* status */
  --ok:#4dff66; --warn:#ffcf5b; --err:#ff6b6b;
  /* type */
  --display:'Rubik',system-ui,sans-serif; --body:'Hanken Grotesk',system-ui,sans-serif;
  --mono:ui-monospace,'SFMono-Regular',Menlo,monospace;
  /* scale */
  --r-sm:11px; --r:16px; --r-lg:24px; --maxw:1080px; --dock-h:74px;
  --s1:8px; --s2:16px; --s3:24px; --s4:36px; --s5:56px; --s6:80px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.7);
  --glow:0 12px 34px -12px rgba(77,255,102,.7);
}

/* ---- RESET / BASE --------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.01em;line-height:1.1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3);position:relative}
.t2{color:var(--text-2)} .t3{color:var(--text-3)}
.mono{font-family:var(--mono)}

/* ---- ATMOSPHERE (optional page backdrop) --------------------------------- */
.atmo{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.atmo .aurora{position:absolute;inset:-30%;filter:blur(28px);animation:drift 30s ease-in-out infinite alternate;
  background:radial-gradient(34% 34% at 22% 22%,rgba(77,255,102,.20),transparent 60%),
    radial-gradient(30% 30% at 80% 18%,rgba(25,224,192,.16),transparent 60%),
    radial-gradient(42% 42% at 58% 90%,rgba(47,217,106,.14),transparent 60%)}
@keyframes drift{50%{transform:translate3d(-4%,3%,0) scale(1.1) rotate(4deg)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- NAV ------------------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,12,11,.66);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
.mark{font-family:var(--display);font-weight:800;letter-spacing:.04em;font-size:17px;display:flex;align-items:center;gap:10px;color:var(--text)}
.nav-links{display:flex;gap:var(--s4);font-family:var(--display);font-weight:500;font-size:14px;align-items:center}
.nav-links a{color:var(--text-2);text-decoration:none}.nav-links a:hover{color:var(--text)}
.nav-links a.login{color:var(--brand)}
@media(max-width:720px){.nav-links a:not(.login){display:none}}

/* ---- MOBILE NAV (hamburger; button/panel/scrim injected by /js/nav.js) ---- */
.nav-burger{display:none;position:relative;width:44px;height:44px;flex:none;margin:0 -10px 0 6px;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-burger span{position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:var(--text);transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .18s,background .18s}
.nav-burger span:nth-child(1){top:15px}.nav-burger span:nth-child(2){top:21px}.nav-burger span:nth-child(3){top:27px}
.nav-burger:hover span,.nav-burger:focus-visible span{background:var(--brand)}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .nav-burger span:nth-child(2){opacity:0;transform:scaleX(.4)}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s ease}
body.menu-open .nav-scrim{opacity:1;pointer-events:auto}
.nav-menu{position:absolute;top:100%;left:0;right:0;background:rgba(10,12,11,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--line);box-shadow:var(--shadow);padding:4px 0 8px;opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .28s cubic-bezier(.2,.7,.2,1),visibility .28s}
body.menu-open .nav-menu{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.nav-menu a{display:block;font-family:var(--display);font-weight:500;font-size:16px;color:var(--text-2);text-decoration:none;padding:14px var(--s3);opacity:0;transform:translateX(-10px);transition:opacity .28s ease,transform .32s cubic-bezier(.2,.7,.2,1),color .15s,background .15s}
.nav-menu a+a{border-top:1px solid var(--line-2)}
.nav-menu a:hover{color:var(--text);background:rgba(77,255,102,.05);text-decoration:none}
.nav-menu a.login{color:var(--brand)}
body.menu-open .nav-menu a{opacity:1;transform:none}
body.menu-open .nav-menu a:nth-child(1){transition-delay:.04s}body.menu-open .nav-menu a:nth-child(2){transition-delay:.08s}body.menu-open .nav-menu a:nth-child(3){transition-delay:.12s}body.menu-open .nav-menu a:nth-child(4){transition-delay:.16s}body.menu-open .nav-menu a:nth-child(5){transition-delay:.2s}body.menu-open .nav-menu a:nth-child(6){transition-delay:.24s}body.menu-open .nav-menu a:nth-child(7){transition-delay:.28s}body.menu-open .nav-menu a:nth-child(8){transition-delay:.32s}
body.menu-open{overflow:hidden}
@media(max-width:720px){.nav-burger{display:block}.nav-links{margin-left:auto}}
@media(min-width:721px){.nav-menu,.nav-scrim{display:none}}

/* ---- DOT + EQ (live indicators) ------------------------------------------ */
.dot{width:9px;height:9px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px var(--brand);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45;box-shadow:0 0 5px var(--brand)}}
.eq{display:flex;gap:3px;align-items:flex-end;height:18px;flex:none}
.eq i{width:3px;background:var(--brand);border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s}.eq i:nth-child(3){animation-delay:.4s}.eq i:nth-child(4){animation-delay:.1s}.eq i:nth-child(5){animation-delay:.25s}
@keyframes eq{0%,100%{height:4px}50%{height:100%}}

/* ---- BUTTONS -------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:16px;
  color:var(--brand-ink);background:linear-gradient(100deg,var(--brand),var(--brand-2));border:none;border-radius:999px;
  padding:13px 22px;cursor:pointer;box-shadow:var(--glow);transition:transform .14s,box-shadow .2s;text-decoration:none}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px -12px rgba(77,255,102,.9);text-decoration:none}
.btn .pill{background:var(--brand-ink);color:var(--brand);font-size:14px;font-weight:700;border-radius:999px;padding:8px 14px}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;
  color:var(--text);background:transparent;border:1px solid var(--line-strong);border-radius:999px;padding:11px 18px;cursor:pointer;transition:.15s;text-decoration:none}
.btn-ghost:hover{border-color:rgba(77,255,102,.5);color:#fff;text-decoration:none}
.btn-ghost .tri{font-size:12px;color:var(--brand)}
.btn-block{width:100%;justify-content:center}
.btn-sm{font-size:13px;padding:9px 15px}

/* ---- PILLS / TAGS --------------------------------------------------------- */
.pill-tag{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--text-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px}
.tag{font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:5px;vertical-align:middle}
.tag-free{background:rgba(255,255,255,.1);color:var(--text-2)}
.tag-prem{background:var(--brand);color:var(--brand-ink)}
.tag-free-prem{color:var(--brand)}            /* inline text marker, e.g. "Free & Premium" */

/* ---- TIER PATH (two-path fork) ------------------------------------------- */
.fork{display:grid;gap:11px;max-width:440px}
.path{border:1px solid var(--line);border-radius:14px;padding:15px 17px}
.path.free{border:1px solid var(--line-strong)}
.path.prem{border:1.5px solid rgba(77,255,102,.55);background:linear-gradient(180deg,rgba(77,255,102,.08),transparent);box-shadow:0 16px 40px -26px rgba(77,255,102,.55)}
.path-top{display:flex;align-items:baseline;gap:10px;margin-bottom:3px}
.path-name{font-family:var(--display);font-weight:800;font-size:18px}
.path.prem .path-name{color:var(--brand)}
.path-trial{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.path-attrs{color:var(--text-2);font-size:13.5px;margin-bottom:12px}
.path .btn,.path .btn-ghost{width:100%;justify-content:center}
.path-fine{color:var(--text-3);font-size:12px;margin-top:8px;text-align:center}

/* ---- SECTIONS ------------------------------------------------------------- */
.sec{padding:var(--s6) 0}
.sec-head{margin-bottom:var(--s4)}
.sec-head h2{font-size:clamp(26px,3.6vw,36px)}
.sec-head p{color:var(--text-2);margin-top:8px}

/* ---- CARDS (channels) ----------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:rgba(77,255,102,.3)}
.cover{aspect-ratio:1;position:relative;overflow:hidden;background:#0b0e0b}
.cover::before,.cover::after{content:'';position:absolute;border-radius:50%;filter:blur(20px);mix-blend-mode:screen}
.cover::before{inset:-25% auto auto -12%;width:72%;height:88%;background:radial-gradient(circle,var(--p1,var(--brand)),transparent 70%)}
.cover::after{inset:auto -12% -25% auto;width:66%;height:80%;background:radial-gradient(circle,var(--p2,var(--brand-3)),transparent 70%)}
.cover .geo{position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 48%,transparent 0 16px,rgba(255,255,255,.05) 16px 17px);opacity:.5;mix-blend-mode:overlay}
.cover .badge{position:absolute;left:10px;bottom:10px;font-family:var(--display);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.55);background:rgba(0,0,0,.35);border-radius:6px;padding:3px 7px;backdrop-filter:blur(3px)}
.art-psy{--p1:var(--ch-psy);--p2:#19e0a0}.art-prog{--p1:var(--ch-prog);--p2:var(--brand-2)}.art-chill{--p1:var(--ch-chill);--p2:var(--ch-prog)}
.card-body{padding:var(--s3)}
.card .k{font-family:var(--display);color:var(--brand);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;display:block}
.card .k .pt{color:var(--text-3);font-weight:600}
.card h3{font-size:18px;margin-bottom:5px}
.card p{color:var(--text-2);font-size:14px}

/* ---- ON-AIR / HISTORY LIST ----------------------------------------------- */
.panel{background:rgba(18,22,19,.72);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:14px var(--s3) 8px;font-family:var(--display);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.row{display:flex;align-items:center;gap:13px;padding:14px var(--s3);cursor:pointer;transition:background .15s}
.row:hover{background:rgba(77,255,102,.05)}
.row+.row{border-top:1px solid var(--line-2)}
.row .ch-tag{width:10px;height:10px;border-radius:50%;flex:none}
.row .nm{font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.row .tk{font-weight:600;font-size:15px;margin-top:1px}
.gate{position:relative;padding:18px var(--s3) 16px;text-align:center}
.gate .lock{font-family:var(--display);font-weight:600;font-size:13px}
.gate .sub{color:var(--text-3);font-size:12px;margin-top:3px}

/* ---- FORMS (signup / account / auth) ------------------------------------- */
.field{margin-bottom:var(--s3)}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:13px;margin-bottom:7px;color:var(--text)}
.input,select.input,textarea.input{width:100%;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  color:var(--text);font-family:var(--body);font-size:15px;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(77,255,102,.15)}
.input::placeholder{color:var(--text-3)}
.field .hint{color:var(--text-3);font-size:12px;margin-top:6px}
.field .err{color:var(--err);font-size:12px;margin-top:6px}
/* checkbox (EU consent / withdrawal waiver) */
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:13.5px;color:var(--text-2)}
.check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin-top:1px;border:1px solid var(--line-strong);
  border-radius:6px;background:var(--surface);cursor:pointer;position:relative;transition:.15s}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::after{content:'';position:absolute;left:6px;top:2px;width:6px;height:11px;border-right:2px solid var(--brand-ink);border-bottom:2px solid var(--brand-ink);transform:rotate(45deg)}
.check a{text-decoration:underline}

/* ---- TABLES (billing / invoices / admin / history) ----------------------- */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:11px 14px;text-align:left;font-size:14px;border-bottom:1px solid var(--line-2)}
.table th{font-family:var(--display);color:var(--brand);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.table tr:hover td{background:rgba(255,255,255,.02)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---- BADGES (status) ------------------------------------------------------ */
.badge-st{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.04em;border-radius:999px;padding:4px 10px}
.badge-ok{background:rgba(77,255,102,.14);color:var(--ok)}
.badge-warn{background:rgba(255,207,91,.14);color:var(--warn)}
.badge-err{background:rgba(255,107,107,.14);color:var(--err)}

/* ---- MODAL / POPOVER (full-history pop-out, dialogs) --------------------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:grid;place-items:center;padding:var(--s3)}
.modal{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);max-width:520px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:var(--s3);border-bottom:1px solid var(--line-2)}
.modal-h h3{font-size:18px}
.modal-x{background:none;border:none;color:var(--text-2);font-size:22px;cursor:pointer;line-height:1}
.modal-body{padding:var(--s2) var(--s3) var(--s3);overflow-y:auto}

/* ---- PLAYER DOCK (persistent; Phase 6 shell; free & premium states) ------ */
.dock{position:fixed;left:0;right:0;bottom:0;height:var(--dock-h);z-index:60;background:rgba(12,15,13,.82);backdrop-filter:blur(20px);border-top:1px solid var(--line);display:flex;align-items:center;gap:var(--s3);padding:0 var(--s3)}
.dock .pp{width:46px;height:46px;flex:none;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(100deg,var(--brand),var(--brand-2));color:var(--brand-ink);font-size:17px;display:grid;place-items:center;box-shadow:0 8px 22px -8px rgba(77,255,102,.8)}
.dock .now{display:flex;align-items:center;gap:11px;min-width:0}
.dock .now .tag-dot{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none;box-shadow:0 0 8px var(--brand)}
.dock .now .nm{font-family:var(--display);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.dock .now .tk{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .tier{font-family:var(--display);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:5px;margin-left:8px;vertical-align:middle}
.dock .tier.free{background:rgba(255,255,255,.1);color:var(--text-2)}
.dock .tier.prem{background:var(--brand);color:var(--brand-ink)}
.dock .upsell{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.dock .upsell .txt{font-size:11.5px;color:var(--text-2)}
.dock .switch{margin-left:auto;display:flex;gap:6px;flex:none}
.dock .switch button{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-2);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;transition:.15s}
.dock .switch button:hover{color:var(--text);border-color:rgba(77,255,102,.4)}
.dock .switch button.on{color:var(--brand-ink);background:var(--brand);border-color:var(--brand)}
@media(max-width:680px){.dock .upsell .txt{display:none}.dock .switch button{display:none}.dock .switch button.on{display:inline-block}}
body.has-dock{padding-bottom:var(--dock-h)}

/* ---- FOOTER + LEGAL ------------------------------------------------------- */
.footer{border-top:1px solid var(--line-2);padding:var(--s4) 0;color:var(--text-3);font-size:13px}
.footer-links{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:10px}
.footer-links a{color:var(--text-2)}

/* ---- MOTION --------------------------------------------------------------- */
.rise{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}