/*
  Shared "premium" theme — matches the homepage (index.html) design language.
  Loaded AFTER styles.css on the inner pages so it re-skins the existing markup
  (nav, panels, forms, buttons) without changing any HTML or JS. Add
  <link rel="stylesheet" href="theme.css" /> after styles.css on any page to match.
*/
:root{
  --bg:#06080f; --panel:#0f1727; --panel2:#151f32; --line:rgba(255,255,255,.09);
  --text:#f5f7fb; --muted:#9aa8bd;
  --accent:#68b7ff; --accent2:#5de5db;
  --blue:#68b7ff; --violet:#8c78ff; --cyan:#5de5db; --green:#72e2a7;
}
body{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(140,120,255,.18), transparent 60%),
    radial-gradient(850px 500px at -5% 20%, rgba(104,183,255,.13), transparent 62%),
    var(--bg) !important;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ---- Sticky glass nav ---- */
.site-header{
  position:sticky; top:0; z-index:80;
  padding:16px 32px !important;
  background:linear-gradient(180deg, rgba(6,8,15,.9), rgba(6,8,15,.55), transparent) !important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line) !important;
}
.site-header .brand{ font-weight:900; letter-spacing:-.03em; }
.site-header .brand-tld, .brand-tld{ color:var(--blue) !important; }
.site-header nav{ gap:24px; }
.site-header nav a{ color:var(--muted) !important; font-weight:700; font-size:14px; }
.site-header nav a:hover{ color:#fff !important; }
/* Neutralise the special "Add Playlist" pill from styles.css so nav reads evenly */
.site-header nav a[href="/mylist.html"]{
  background:transparent !important; border:0 !important; padding:0 !important; color:var(--muted) !important;
}
.site-header nav a[href="/mylist.html"]:hover{ color:#fff !important; }

/* ---- Cards / panels ---- */
.panel{
  background:linear-gradient(155deg, rgba(20,30,49,.88), rgba(10,14,24,.9)) !important;
  border:1px solid var(--line) !important;
  border-radius:24px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.3) !important;
}
.eyebrow{ color:var(--cyan) !important; letter-spacing:.16em; }
h1{ letter-spacing:-.04em; }
.muted, .small{ color:var(--muted) !important; }

/* ---- Forms ---- */
.form label{ color:#dce5f2 !important; font-weight:700; }
.form input, .form select, .form textarea,
input:not([type=checkbox]):not([type=radio]), select, textarea{
  background:#0a101b !important;
  border:1px solid var(--line) !important;
  color:#fff !important;
  border-radius:12px !important;
}
.form input:focus, .form select:focus, .form textarea:focus,
input:focus, select:focus, textarea:focus{
  border-color:rgba(104,183,255,.55) !important;
  outline:none;
  box-shadow:0 0 0 3px rgba(104,183,255,.12);
}
.field-help{ color:var(--muted) !important; }

/* ---- Buttons ---- */
.button{
  background:linear-gradient(110deg, var(--blue), #7c8cff) !important;
  color:#07101c !important;
  border-radius:14px !important;
  font-weight:800;
  box-shadow:0 16px 40px rgba(104,183,255,.18);
  transition:.2s ease;
}
.button:hover{ transform:translateY(-2px); filter:brightness(1.03); }
.button:disabled, .button[disabled]{ opacity:.4; cursor:not-allowed; transform:none; filter:none; box-shadow:none; }
.button.secondary, .button.outline{
  background:rgba(255,255,255,.05) !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  box-shadow:none;
}
.button.secondary:hover, .button.outline:hover{ border-color:rgba(104,183,255,.45) !important; transform:translateY(-2px); }
.delete-link{ color:var(--muted) !important; }
.delete-link:hover{ color:#ff6b6b !important; }
.inline-link{ color:var(--blue) !important; font-weight:700; }

/* ---- Step list / notes ---- */
.step-number{
  background:linear-gradient(120deg, var(--blue), var(--violet)) !important;
  color:#07101c !important;
}
.secure-note, .disclaimer-box, .controls-box, .status-card{
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
}
.status-card.ok{ border-color:rgba(114,226,167,.35) !important; }
.status-card.expired{ border-color:rgba(255,107,107,.35) !important; }

/* ---- Segmented control (e.g. Playlist type) ---- */
.seg-field{ display:block; }
.seg-title{ display:block; font-weight:700; color:#dce5f2; margin-bottom:10px; }
.seg{
  display:inline-flex; gap:4px; padding:4px;
  background:#0a101b; border:1px solid var(--line); border-radius:14px;
  flex-wrap:wrap;
}
.seg-btn{
  appearance:none; cursor:pointer; border:0; border-radius:10px;
  padding:11px 18px; font-size:14px; font-weight:800;
  background:transparent; color:var(--muted); transition:.16s ease;
}
.seg-btn:hover{ color:#fff; }
.seg-btn.active{
  background:linear-gradient(110deg, var(--blue), #7c8cff);
  color:#07101c;
  box-shadow:0 8px 22px rgba(104,183,255,.22);
}

/* ---- Tab buttons (Support page etc.) ---- */
.customer-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin:18px 0 22px; }
.tab-button{
  appearance:none; cursor:pointer;
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--line) !important;
  color:var(--muted) !important;
  border-radius:12px !important;
  padding:10px 16px !important;
  font-weight:800; font-size:14px; transition:.16s ease;
}
.tab-button:hover{ color:#fff !important; border-color:rgba(104,183,255,.4) !important; }
.tab-button.active{
  background:linear-gradient(110deg, var(--blue), #7c8cff) !important;
  color:#07101c !important; border-color:transparent !important;
  box-shadow:0 8px 22px rgba(104,183,255,.22);
}

/* ---- Notes / boxes / lists ---- */
.support-card-note, .instructions-box{
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
}
.support-card-note strong{ color:var(--text); }
.rich-list > *{
  background:rgba(255,255,255,.03) !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;
}
.section-title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }

/* ---- Activate page: single centred column ---- */
.activate-wrap{ max-width:760px; margin:0 auto; padding:40px 24px 72px; display:flex; flex-direction:column; gap:20px; }
.activate-divider{ height:1px; background:var(--line); margin:20px 0; }
.activate-wrap .button{ width:100%; margin-top:10px; }
.activate-wrap .button.compact{ width:auto; margin-top:0; }

/* ---- Legal / policy pages ---- */
.legal{ max-width:900px; margin:0 auto; padding:56px 24px 72px; line-height:1.7; }
.legal .legal-card{
  background:linear-gradient(155deg, rgba(20,30,49,.88), rgba(10,14,24,.9));
  border:1px solid var(--line); border-radius:24px;
  padding:34px 38px; box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.legal h1{ font-size:clamp(30px,4vw,44px); letter-spacing:-.03em; margin:6px 0 10px; }
.legal h2{ font-size:20px; margin:30px 0 8px; color:var(--text); letter-spacing:-.01em; }
.legal p, .legal li{ color:#c7d2e2; font-size:15px; }
.legal ul{ margin:8px 0 4px; padding-left:20px; }
.legal li{ margin:5px 0; }
.legal a{ color:var(--blue); font-weight:600; }
.legal .updated{ color:var(--muted); font-size:13px; }
.legal .note{
  margin-top:26px; padding:16px 18px; border-radius:14px;
  background:rgba(104,183,255,.06); border:1px solid rgba(104,183,255,.18);
  color:var(--muted); font-size:13px;
}

/* ---- Footer ---- */
footer{ border-top:1px solid var(--line) !important; color:#7f8ca0 !important; }