/* --------------------------------------------------
   THEME VARIABLES
   -------------------------------------------------- */

:root {
  --page-bg: radial-gradient(1200px 600px at 50% -10%, #1f2937 0%, #020617 52%, #000 100%);
  --page-text: #f9fafb;

  --light-bg: #f3f4f6;          /* slate-100 */
  --light-text: #020617;        /* slate-950 */

  --footer-light-bg: #f9fafb;   /* slate-50 */
  --footer-light-border: #e5e7eb;
  --footer-light-text: #4b5563; /* slate-600 */

  --brand: #ef4444;
}

/* Apply dynamic background + text */
html.theme-dark {
  --page-bg: radial-gradient(1200px 600px at 50% -10%, #1f2937 0%, #020617 52%, #000 100%);
  --page-text: #f9fafb;
}

html.theme-light {
  --page-bg: var(--light-bg);
  --page-text: var(--light-text);
}

body {
  background: var(--page-bg);
  color: var(--page-text);
  font-family: system-ui, -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
}

/* Smooth transitions */
header.header-shell,
footer.footer-shell {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}


/* --------------------------------------------------
   HEADER + NAVIGATION
   -------------------------------------------------- */

/* Dark */
html.theme-dark header.header-shell {
  background-color: rgba(15,23,42,0.9);
  border-bottom-color: rgba(30,41,59,0.8);
}

/* Light */
html.theme-light header.header-shell {
  background-color: rgba(255,255,255,0.9);
  border-bottom-color: rgba(148,163,184,0.6);
}

/* Logo – readable in light mode */
html.theme-light header.header-shell .text-slate-50 {
  color: #0f172a;
}

html.theme-light header.header-shell .text-slate-400 {
  color: #6b7280;
}

/* Nav pills */
html.theme-light header.header-shell nav a {
  background-color: rgba(15,23,42,0.03);
  color: #4b5563;
}

html.theme-light header.header-shell nav a:hover {
  background-color: #e5e7eb;
}

/* Active pill */
html.theme-light header.header-shell nav a.bg-brandSoft {
  background-color: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* Add button already fine */


/* --------------------------------------------------
   THEME TOGGLE
   -------------------------------------------------- */

html.theme-light #themeToggle {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #111827;
}

html.theme-light #themeToggle:hover {
  background-color: #e5e7eb;
}


/* --------------------------------------------------
   LOGIN BUTTON (white)
   -------------------------------------------------- */

html.theme-light header.header-shell button.bg-white {
  border: 1px solid rgba(148,163,184,0.8);
  box-shadow: 0 1px 2px rgba(15,23,42,0.12);
}

html.theme-light header.header-shell button.bg-white:hover {
  background-color: #e5e7eb;
}


/* --------------------------------------------------
   FOOTER
   -------------------------------------------------- */

html.theme-light footer.footer-shell {
  background-color: var(--footer-light-bg);
  border-top-color: var(--footer-light-border);
  color: var(--footer-light-text);
}

/* Readable logo text */
html.theme-light footer.footer-shell .text-slate-100 {
  color: #0f172a;
}

/* Nav links */
html.theme-light footer.footer-shell nav a {
  color: #4b5563;
}
html.theme-light footer.footer-shell nav a:hover {
  color: #111827;
}


/* --------------------------------------------------
   STATIC PAGES (LEGAL / PRIVACY / CONTACT / ABOUT)
   -------------------------------------------------- */

html.theme-light article.legal {
  background: #fff;
  color: #111827;
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

html.theme-light article.legal h1,
html.theme-light article.legal h2,
html.theme-light article.legal h3 {
  color: #111827;
}

html.theme-light article.legal p,
html.theme-light article.legal li {
  color: #374151;
}

html.theme-light article.legal .text-slate-400,
html.theme-light article.legal .text-slate-500,
html.theme-light article.legal .text-slate-600 {
  color: #4b5563;
}

html.theme-light article.legal a {
  color: var(--brand);
}
html.theme-light article.legal a:hover {
  color: #b91c1c;
}


/* --------------------------------------------------
   SHARED UTILITY: THIN SCROLLBAR
   -------------------------------------------------- */

.scrollbar-thin {
  scrollbar-width: thin;
}
.scrollbar-thin::-webkit-scrollbar {
  height: 4px;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  border-radius: 999px;
}

/* Suggest a video or channel */
.suggest-overlay:not(.hidden) { display:flex; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:20px; }
.suggest-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.65); backdrop-filter:blur(6px); }
.suggest-panel { --suggest-bg:#101827; --suggest-field:#182235; --suggest-border:#334155; --suggest-muted:#a3b0c2; position:relative; background:var(--suggest-bg); color:#f1f5f9; border:1px solid var(--suggest-border); border-radius:24px; padding:32px; width:100%; max-width:540px; max-height:calc(100dvh - 40px); overflow-y:auto; box-shadow:0 24px 80px #0005; }
.theme-light .suggest-panel { --suggest-bg:#fff; --suggest-field:#f8fafc; --suggest-border:#dbe1e8; --suggest-muted:#64748b; color:#172033; }
.suggest-close { position:absolute; right:18px; top:16px; width:34px; height:34px; border-radius:50%; background:var(--suggest-field); color:var(--suggest-muted); }
.suggest-eyebrow { color:#ef4444; font-size:10px; font-weight:700; letter-spacing:1.8px; margin:4px 35px 10px 0; }
#suggestTitle { font-size:27px; line-height:1.2; font-weight:750; margin-bottom:8px; }
#suggestIntro { color:var(--suggest-muted); font-size:14px; line-height:1.5; max-width:410px; }
.suggest-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:24px 0; }
.suggest-choice { text-align:left; border:1px solid var(--suggest-border); border-radius:14px; padding:14px; background:var(--suggest-field); display:flex; flex-direction:column; gap:4px; }
.suggest-choice[aria-pressed=true] { border-color:#ef4444; background:rgba(239,68,68,.07); box-shadow:0 0 0 1px #ef4444; }
.suggest-icon { color:#ef4444; font-size:26px; line-height:30px; }
.suggest-choice strong { font-size:14px; }
.suggest-choice > span:last-child { color:var(--suggest-muted); font-size:11px; }
#suggestForm label { display:block; font-size:13px; font-weight:600; margin:16px 0 7px; }
#suggestForm label span { color:var(--suggest-muted); font-weight:400; }
#suggestForm input, #suggestForm select, #suggestForm textarea { width:100%; border:1px solid var(--suggest-border); border-radius:10px; padding:11px 12px; background:var(--suggest-field); color:inherit; font-size:14px; }
#suggestForm textarea { resize:vertical; min-height:86px; }
#suggestForm input::placeholder, #suggestForm textarea::placeholder { color:var(--suggest-muted); opacity:.8; }
.suggest-panel :focus-visible { outline:2px solid #ef4444; outline-offset:3px; }
.suggest-hint { font-size:11px; color:var(--suggest-muted); margin-top:6px; }
.suggest-review { display:flex; align-items:flex-start; gap:9px; background:var(--suggest-field); padding:12px; border-radius:10px; margin-top:18px; font-size:12px; color:var(--suggest-muted); }
.suggest-review > span { color:#ef4444; }
.suggest-status { font-size:13px; margin-top:12px; }
.suggest-status[data-ok=false] { color:#ef4444; }
.suggest-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:20px; }
.suggest-primary { background:#ef4444; color:#fff; border-radius:999px; padding:12px 19px; font-size:13px; font-weight:650; }
.suggest-primary:hover { background:#dc2626; }
.suggest-primary:disabled { opacity:.6; cursor:wait; }
.suggest-secondary { color:var(--suggest-muted); font-size:13px; padding:10px; }
#suggestSuccess { text-align:center; padding:18px 0 8px; }
.suggest-success-icon { width:56px; height:56px; border-radius:50%; margin:0 auto 18px; background:#10b98118; color:#10b981; font-size:30px; line-height:56px; }
#suggestSuccess h3 { font-size:21px; font-weight:700; }
#suggestSuccess p { color:var(--suggest-muted); font-size:14px; line-height:1.6; margin:12px 0 24px; }
@media(max-width:540px) { .suggest-overlay:not(.hidden) { padding:10px; } .suggest-panel { padding:24px 20px; border-radius:20px; max-height:calc(100dvh - 20px); } #suggestTitle { font-size:24px; } .suggest-choice { padding:12px; } }

.suggest-choices[hidden] { display:none; }