/* ============================================================
   David Bond TV — base + themes
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Default theme = Midnight Blue (also the :root fallback, so no flash) */
:root,
:root[data-theme="midnight"] {
  --accent: #3b82f6;
  --accent-strong: #2563eb;
  --accent-contrast: #ffffff;
  --bg: #0a0f1c;
  --bg-2: #0d1424;
  --surface: #131c30;
  --surface-2: #1c2740;
  --text: #eef2f9;
  --text-dim: #9fb0cc;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: rgba(0, 0, 0, 0.55);
}
:root[data-theme="red"] {
  --accent: #ff0033;
  --accent-strong: #cc0029;
  --accent-contrast: #ffffff;
  --bg: #0f0f0f;
  --bg-2: #181818;
  --surface: #1f1f1f;
  --surface-2: #2a2a2a;
  --text: #f1f1f1;
  --text-dim: #aaaaaa;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: rgba(0, 0, 0, 0.55);
}
:root[data-theme="purple"] {
  --accent: #8b5cf6;
  --accent-strong: #7c3aed;
  --accent-contrast: #ffffff;
  --bg: #120f1f;
  --bg-2: #181233;
  --surface: #1d1733;
  --surface-2: #271f45;
  --text: #efeaff;
  --text-dim: #b4a7d6;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: rgba(0, 0, 0, 0.55);
}
:root[data-theme="emerald"] {
  --accent: #10b981;
  --accent-strong: #059669;
  --accent-contrast: #06281d;
  --bg: #07140f;
  --bg-2: #0a1c15;
  --surface: #0f241b;
  --surface-2: #173a2b;
  --text: #e6fff4;
  --text-dim: #9fd8c2;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: rgba(0, 0, 0, 0.55);
}
:root[data-theme="mono"] {
  --accent: #e8e8e8;
  --accent-strong: #bdbdbd;
  --accent-contrast: #111111;
  --bg: #0d0d0d;
  --bg-2: #161616;
  --surface: #1c1c1c;
  --surface-2: #262626;
  --text: #f2f2f2;
  --text-dim: #9a9a9a;
  --border: rgba(255, 255, 255, 0.10);
  --shadow: rgba(0, 0, 0, 0.55);
}

body {
  background: radial-gradient(1200px 600px at 50% -10%, var(--bg-2), var(--bg)) fixed;
  color: var(--text);
  font-family: "Roboto", "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
}

/* ============================================================
   Header + branding
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 16px; padding: 12px 24px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
/* Header logo (when present) anchors left; everything else — upload button,
   notification bell, auth widget — clusters together on the right. */
.site-header .logo { margin-right: auto; }
/* Self-hosted pixel/retro wordmark face (matches the David Bond TV logo). */
@font-face {
  font-family: "Pixelify Sans";
  src: url("/fonts/pixelify-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

.logo { display: flex; align-items: center; user-select: none; }
/* Two-tone boxed wordmark: light prefix + the last word on a blue tile. */
.logo-wm {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800; font-size: 25px; letter-spacing: -.6px; line-height: 1;
}
.logo-wm .wm-pre { color: var(--text); }
.logo-wm .wm-box {
  background: var(--accent); color: var(--accent-contrast);
  border-radius: 5px; padding: 1px 7px 2px; margin-left: 5px;
}

.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, transform .05s;
}
.share-btn:hover { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); }
.share-btn:active { transform: scale(.97); }
.share-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Admin-only "Upload Video" button in the site header. */
.hdr-upload {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: var(--accent); color: var(--accent-contrast); text-decoration: none;
  border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 700;
  transition: filter .15s, transform .05s;
}
.hdr-upload:hover { filter: brightness(1.08); }
.hdr-upload:active { transform: scale(.97); }
.hdr-upload svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 560px) { .hdr-upload span { display: none; } }

/* Admin-only "Dashboard" button (→ /god). Secondary look next to Upload. */
.hdr-god {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: var(--surface-2); color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 14px; font-weight: 700;
  transition: background .15s, border-color .15s, transform .05s;
}
.hdr-god:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border-color: var(--accent); }
.hdr-god:active { transform: scale(.97); }
.hdr-god:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
.hdr-god svg { width: 18px; height: 18px; fill: currentColor; }
@media (max-width: 560px) { .hdr-god span { display: none; } }

/* Notification bell (signed-in viewers) — injected by notifications.js. */
.hdr-bell { position: relative; flex: none; }
.hdr-bell-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  transition: background .15s, border-color .15s, transform .05s;
}
.hdr-bell-btn:hover { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border-color: var(--accent); }
.hdr-bell-btn:active { transform: scale(.95); }
.hdr-bell-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
.hdr-bell-btn svg { width: 20px; height: 20px; fill: currentColor; }
.hdr-bell-badge {
  position: absolute; top: -5px; right: -5px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; background: linear-gradient(135deg, #ff5a5f, #e11d48); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: -.2px;
  border: 2px solid var(--surface); pointer-events: none;
  box-shadow: 0 0 0 1px rgba(225,29,72,.35), 0 2px 8px rgba(225,29,72,.55);
  animation: bell-badge-pop .28s cubic-bezier(.18,.9,.32,1.4);
}
@keyframes bell-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }
/* display:inline-flex above would override the [hidden] attribute, so restore it. */
.hdr-bell-badge[hidden] { display: none; }
/* Gentle attention pulse on the bell while there are unread items. */
.hdr-bell-btn:has(.hdr-bell-badge:not([hidden])) { animation: bell-swing 4s ease-in-out infinite; }
@keyframes bell-swing {
  0%, 92%, 100% { transform: rotate(0); }
  94% { transform: rotate(-9deg); } 96% { transform: rotate(7deg); } 98% { transform: rotate(-4deg); }
}
.hdr-bell-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-width: 86vw;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 40px var(--shadow); overflow: hidden; z-index: 40;
}
.bell-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 700;
}
.bell-clear {
  background: none; border: none; color: var(--accent); font-size: 12px;
  font-weight: 600; cursor: pointer; padding: 0;
}
.bell-clear:hover { text-decoration: underline; }
.bell-list { max-height: 420px; overflow-y: auto; }
.bell-empty { padding: 26px 14px; text-align: center; color: var(--text-dim); font-size: 13px; }
.bell-item { display: flex; align-items: stretch; gap: 4px; border-bottom: 1px solid var(--border); }
.bell-item:last-child { border-bottom: none; }
.bell-item.unread { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bell-link {
  flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center;
  padding: 10px 6px 10px 14px; text-decoration: none; color: var(--text);
}
.bell-link:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bell-thumb {
  width: 64px; height: 36px; flex: none; border-radius: 6px; object-fit: cover;
  background: var(--surface-2); display: block;
}
.bell-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bell-title {
  font-size: 13px; font-weight: 600; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bell-time { font-size: 12px; color: var(--text-dim); }
.bell-x {
  flex: none; width: 30px; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 18px; line-height: 1;
}
.bell-x:hover { color: var(--text); }

/* ============================================================
   Page layout
   ============================================================ */
.page { width: min(1100px, 100%); margin: 0 auto; padding: 24px; }
.video-meta { margin: 16px 2px 0; }
.video-meta h1 { font-size: 20px; font-weight: 700; }
.video-meta .sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

/* ============================================================
   Player
   ============================================================ */
.player {
  position: relative; width: 100%; margin: 0 auto;
  aspect-ratio: 16 / 9; background: #000;
  border-radius: 14px; overflow: hidden; outline: none;
  box-shadow: 0 18px 50px var(--shadow);
}
.player:fullscreen { border-radius: 0; width: 100%; height: 100%; }
#video { width: 100%; height: 100%; display: block; background: #000; }

.spinner {
  position: absolute; inset: 0; margin: auto;
  width: 56px; height: 56px; border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, 0.25); border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.error-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  background: rgba(0, 0, 0, 0.85); color: #fff; z-index: 5;
}
.error-overlay[hidden] { display: none; }
.retry-btn {
  background: var(--accent); color: var(--accent-contrast); border: none;
  border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
}

.big-play {
  position: absolute; inset: 0; margin: auto;
  width: 72px; height: 50px; border: none; border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 82%, #000);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 45%, transparent);
  transition: transform .12s;
}
.big-play:hover { transform: scale(1.06); }
.big-play svg { width: 34px; height: 34px; fill: var(--accent-contrast); }
.big-play[hidden] { display: none; }

.gradient {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  pointer-events: none; opacity: 0; transition: opacity .2s;
}

.controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 12px 6px; opacity: 0; transition: opacity .2s; z-index: 4;
}
.player:hover .controls, .player.paused .controls, .player:focus-within .controls { opacity: 1; }
.player:hover .gradient, .player.paused .gradient, .player:focus-within .gradient { opacity: 1; }

.progress { position: relative; height: 20px; display: flex; align-items: center; cursor: pointer; }
.progress-track {
  position: relative; width: 100%; height: 4px;
  background: rgba(255, 255, 255, 0.3); border-radius: 2px; transition: height .1s;
}
.progress:hover .progress-track { height: 6px; }
.progress-buffered { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255, 255, 255, 0.45); border-radius: 2px; }
.progress-played { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); border-radius: 2px; }
.progress-scrubber {
  position: absolute; left: 0; top: 50%; width: 13px; height: 13px;
  background: var(--accent); border-radius: 50%;
  transform: translate(-50%, -50%) scale(0); transition: transform .1s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.progress:hover .progress-scrubber { transform: translate(-50%, -50%) scale(1); }

.progress-thumb {
  position: absolute; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
}
.progress-thumb[hidden] { display: none; }
.thumb-img { width: 160px; height: 90px; border: 2px solid #fff; border-radius: 4px; background-repeat: no-repeat; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6); }
.thumb-time { color: #fff; font-size: 12px; background: rgba(0, 0, 0, 0.7); padding: 1px 5px; border-radius: 3px; }

.control-row { display: flex; align-items: center; gap: 4px; height: 44px; }
.ctrl-btn {
  background: none; border: none; height: 40px; min-width: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0 6px; border-radius: 6px;
}
.ctrl-btn:hover { background: rgba(255, 255, 255, 0.12); }
.ctrl-btn svg { width: 26px; height: 26px; fill: #fff; }

.volume { display: flex; align-items: center; }
.volume-slider {
  position: relative; width: 0; height: 4px; background: rgba(255, 255, 255, 0.4);
  border-radius: 2px; margin: 0 4px; transition: width .15s; overflow: visible; cursor: pointer;
}
.volume:hover .volume-slider, .volume-slider.active { width: 56px; }
.vol-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #fff; border-radius: 2px; }
.vol-knob { position: absolute; top: 50%; left: 100%; width: 12px; height: 12px; background: #fff; border-radius: 50%; transform: translate(-50%, -50%); }

.time { color: #fff; font-size: 13px; margin-left: 6px; white-space: nowrap; }
.spacer { flex: 1; }

/* Settings menu */
.settings-menu {
  position: absolute; right: 12px; bottom: 56px; min-width: 230px;
  background: color-mix(in srgb, var(--surface) 92%, #000);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 0; color: var(--text); font-size: 14px;
  z-index: 6; box-shadow: 0 10px 30px var(--shadow);
  backdrop-filter: blur(8px);
}
.settings-menu[hidden] { display: none; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px; cursor: pointer; }
.menu-row:hover { background: rgba(255, 255, 255, 0.08); }
.menu-row .right { color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.menu-row.back { font-weight: 600; border-bottom: 1px solid var(--border); }
.menu-row .swatch { width: 13px; height: 13px; border-radius: 50%; display: inline-block; border: 1px solid rgba(255,255,255,.25); }
.badge { font-size: 10px; font-weight: 700; color: #000; background: #fff; border-radius: 3px; padding: 0 3px; }
.badge-sub { color: var(--text-dim); }

/* ============================================================
   Comments
   ============================================================ */
.comments { margin: 30px 2px 60px; }
.comments-title { font-size: 18px; font-weight: 700; margin-bottom: 18px; }

.comment-form {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; margin-bottom: 26px;
}
.cf-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cf-input, .cf-text, .cf-answer {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 14px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.cf-input:focus, .cf-text:focus, .cf-answer:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.cf-input { flex: 1; min-width: 180px; }
.cf-input:disabled { opacity: .5; cursor: not-allowed; }
.cf-anon { display: inline-flex; align-items: center; gap: 7px; color: var(--text-dim); font-size: 13px; cursor: pointer; user-select: none; }
.cf-anon input { accent-color: var(--accent); width: 16px; height: 16px; }
.cf-text { display: block; width: 100%; margin-top: 12px; resize: vertical; min-height: 64px; }
.cf-bottom { margin-top: 12px; justify-content: space-between; }
.cf-challenge { display: inline-flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: 14px; }
.cf-challenge label { font-weight: 600; color: var(--text); }
.cf-answer { width: 70px; text-align: center; }
.cf-submit {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  color: var(--accent-contrast); border: none; border-radius: 999px;
  padding: 10px 22px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: filter .15s, transform .05s;
}
.cf-submit:hover { filter: brightness(1.08); }
.cf-submit:active { transform: scale(.97); }
.cf-submit:disabled { opacity: .55; cursor: not-allowed; }
.cf-msg { margin-top: 12px; font-size: 13.5px; font-weight: 600; }
.cf-msg[hidden] { display: none; }
.cf-msg.error { color: #ff6b6b; }
.cf-msg.ok { color: var(--accent); }

.comment-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.comment { display: flex; gap: 13px; }
.comment-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff;
}
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; }
.comment-name { font-weight: 600; font-size: 14px; }
.comment-name.anon { color: var(--text-dim); font-style: italic; }
.comment-time { color: var(--text-dim); font-size: 12px; }
.comment-text { font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
.comment-empty { color: var(--text-dim); font-size: 14px; }

/* Admin moderation controls under each comment. */
.comment-mod { display: flex; gap: 10px; margin-top: 6px; }
.cmod-btn {
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  transition: color .15s;
}
.cmod-btn:hover { color: var(--text); }
.cmod-btn.danger:hover { color: #f87171; }

/* Admin-only creator controls (Analytics / Edit video) in the watch meta row. */
.creator-controls { display: inline-flex; gap: 8px; }
.creator-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); color: var(--text); text-decoration: none;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.creator-btn:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface-2)); border-color: var(--accent); }
.creator-btn svg { width: 16px; height: 16px; fill: currentColor; }
/* The Edit-video button is the primary creator action — accent-filled + prominent. */
.creator-btn.primary {
  background: var(--accent); color: var(--accent-contrast); border-color: transparent;
  font-weight: 700;
}
.creator-btn.primary:hover { background: var(--accent); filter: brightness(1.08); border-color: transparent; }

/* ============================================================
   Toast
   ============================================================ */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px var(--shadow); z-index: 100;
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 560px) {
  .logo-wm { font-size: 21px; }
  .page { padding: 16px; }
  .cf-bottom { flex-direction: column; align-items: stretch; gap: 12px; }
  .cf-submit { width: 100%; }
}

/* ============================================================
   Browse / homepage grid (multi-video)
   ============================================================ */
.search {
  flex: 1; max-width: 520px; margin: 0 auto; display: flex; align-items: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 18px; color: var(--text-dim); font-size: 14px; gap: 10px;
}
.search svg { width: 18px; height: 18px; fill: var(--text-dim); flex: none; }

.browse { width: min(1600px, 100%); margin: 0 auto; padding: 22px 24px 60px; }
.browse-chips { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.chip {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }

.browse-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px 16px;
}
.vcard { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.vthumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: var(--surface-2); box-shadow: 0 6px 18px var(--shadow);
  transition: box-shadow .18s ease, transform .18s ease;
}
/* Soft blurred fill behind the thumbnail so portrait (and other non-16:9)
   videos keep their full framing — letterboxed, never cropped — while every
   card stays a uniform 16:9. --thumb-bg is set per-card in browse.js. */
.vthumb::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: var(--thumb-bg, transparent) center / cover no-repeat;
  filter: blur(20px) brightness(.5); transform: scale(1.18);
}
.vthumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .25s; }
.vcard:hover .vthumb img { transform: scale(1.04); }
/* light-blue accent ring + lift on hover (follows the active theme) */
.vcard:hover .vthumb, .vcard:focus-visible .vthumb {
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px var(--accent),
              0 0 0 6px color-mix(in srgb, var(--accent) 28%, transparent),
              0 10px 26px var(--shadow);
}
.vcard:focus-visible { outline: none; }
/* hover preview video, layered over the thumbnail */
.vpreview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; display: block; background: transparent;
  opacity: 0; transition: opacity .25s ease; z-index: 1; pointer-events: none;
}
.vpreview.show { opacity: 1; }
.vdur {
  position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.85);
  color: #fff; font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 5px;
  z-index: 2;
}
.vinfo { display: flex; gap: 12px; margin-top: 12px; }
.vavatar {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  display: flex; align-items: center; justify-content: center;
}
.vavatar svg { width: 20px; height: 20px; fill: var(--accent-contrast); }
.vmeta { min-width: 0; }
.vtitle {
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vchannel { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.vchannel .check { color: var(--accent); }
.vdesc {
  font-size: 12.5px; color: var(--text-dim); line-height: 1.35; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vstats { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }


/* Placeholder + status pills for cards still processing / failed. */
.vthumb-ph {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
}
.vstate {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  background: color-mix(in srgb, var(--accent) 85%, #000); color: var(--accent-contrast);
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
}
.vstate-err { background: #ef4444; color: #fff; }
.vcard.is-processing { opacity: .85; }
.vcard.is-failed { opacity: .6; }

/* Clean modern "NEW" pill — accent-tinted, subtle, visible for 3 days. */
.vnew {
  position: absolute; left: 8px; top: 8px; z-index: 3;
  font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  color: var(--accent-contrast); background: var(--accent);
  padding: 3px 9px; border-radius: 999px; text-transform: uppercase;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ============================================================
   Sidebar — permanent vertical brand + section/category nav
   ============================================================ */
/* Persistent nav panel. Fixed below the sticky header; ALWAYS visible. */
.sidebar {
  position: fixed; top: var(--hdr-h, 61px); left: 0; bottom: 0; z-index: 26; width: 248px;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 16px 12px; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
/* Brand block atop the sidebar: large rounded avatar over the wordmark. */
.sb-brand {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  text-decoration: none; padding: 6px 10px 18px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.sb-avatar {
  width: 88px; height: 88px; border-radius: 20px; flex: none; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--border);
  box-shadow: 0 2px 12px var(--shadow);
}
.sb-brand .logo-wm { font-size: 22px; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.sb-title {
  font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-dim); padding: 12px 12px 6px;
}
.grid-sentinel { width: 100%; height: 1px; }
.sb-item {
  display: flex; align-items: center; gap: 16px; width: 100%;
  background: transparent; border: none; cursor: pointer; text-align: left;
  padding: 11px 12px; border-radius: 10px; color: var(--text);
  font-size: 14px; font-weight: 600; transition: background .15s;
}
.sb-item:hover { background: var(--surface-2); }
.sb-item.active { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); }
.sb-item.active .sb-ico svg { fill: var(--accent); }
.sb-ico { display: inline-flex; flex: none; }
.sb-ico svg { width: 22px; height: 22px; fill: currentColor; }

/* Wide screens: reserve space so the fixed panel never overlaps the grid. */
@media (min-width: 1000px) {
  body.has-sidebar .browse { margin-left: 248px; width: auto; }
  /* Run the sidebar to the very top so the brand fills the space that used to
     sit empty above it (the header only carries the auth widget on the right,
     so the left column is free). Sits above the translucent header band. */
  .sidebar { top: 0; z-index: 31; padding-top: 18px; }
  /* Bigger mascot on PC only (narrow screens keep the compact 72px size). */
  .sb-avatar { width: 124px; height: 124px; border-radius: 26px; }
  .sb-brand { padding-top: 2px; }
  .sb-brand .logo-wm { font-size: 24px; }
}
/* Narrow screens: the panel reflows to a brand-on-top bar with a horizontal
   scrolling nav row — still permanently visible, no hamburger. */
@media (max-width: 999px) {
  .sidebar {
    position: static; width: auto; inset: auto; z-index: auto;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 14px 12px; overflow: visible;
  }
  .sb-brand { padding: 2px 10px 14px; }
  .sb-avatar { width: 72px; height: 72px; }
  .sb-nav {
    flex-direction: row; gap: 8px; padding-top: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .sb-nav::-webkit-scrollbar { height: 6px; }
  .sb-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 55%, var(--surface-2)); border-radius: 999px; }
  .sb-title { display: none; }
  .sb-item {
    width: auto; flex: none; gap: 8px; padding: 8px 14px;
    border-radius: 999px; font-size: 13px; white-space: nowrap;
    background: var(--surface-2);
    min-height: 44px;
    scroll-snap-align: start;
  }
  .sb-item.active { background: var(--accent); color: var(--accent-contrast); }
  .sb-item.active .sb-ico svg { fill: var(--accent-contrast); }
  .sb-ico svg { width: 18px; height: 18px; }
  body.has-sidebar .browse { margin-left: 0; }
}

@media (max-width: 560px) {
  .site-header {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
  }
  .site-header .logo {
    min-width: 0;
  }
  .auth-widget,
  .hdr-bell {
    margin-left: auto;
  }
  .share-btn,
  .hdr-upload,
  .hdr-god,
  .hdr-bell-btn,
  .chip {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .page,
  .browse {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ctrl-btn {
    height: 44px;
    min-width: 44px;
  }
  .control-row {
    gap: 6px;
    min-height: 48px;
  }
  .sidebar {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* Keep the categories on ONE horizontal scrolling row on phones too — don't
     wrap them into a tall multi-row block that shoves the video grid down. The
     row inherits overflow-x:auto + flex-direction:row from the ≤999px rules. */
  .sb-nav {
    gap: 6px;
    padding-top: 10px;
    padding-right: 12px;
  }
  .sb-item {
    padding: 7px 13px;
    font-size: 12.5px;
    min-height: 40px;
  }
  .sb-item .sb-ico { display: none; }   /* drop icons on phones — labels alone read cleaner and pack tighter */
}

.browse-empty { color: var(--text-dim); font-size: 15px; padding: 30px 4px; }

/* Dev-mode "click to verify" link surfaced on the signup form. */
.acc-devlink {
  display: inline-block; margin-top: 8px; font-weight: 700;
  color: var(--accent); text-decoration: underline;
}

/* Administrator badge — a gold crown shown wherever David Bond's name appears. */
.admin-badge {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 2px 9px 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg, #ffd56b, #f4a300);
  color: #3a2600; font-size: 11px; font-weight: 800; letter-spacing: .2px;
  text-transform: uppercase; line-height: 1.5;
  box-shadow: 0 1px 5px rgba(244,163,0,.4);
}
.admin-badge svg { width: 13px; height: 13px; fill: currentColor; }
/* Icon-only variant (comments, tight header) */
.admin-badge.mini { padding: 2px; width: 18px; height: 18px; justify-content: center; gap: 0; }
.admin-badge.mini svg { width: 12px; height: 12px; }
/* Larger variant on the profile hero */
.admin-badge.lg { font-size: 12px; padding: 4px 12px 4px 9px; }
.admin-badge.lg svg { width: 15px; height: 15px; }

/* Paid-member badge — a blue star, deliberately distinct from the admin gold
   crown. Granted/removed live with subscription status (server-derived). */
.member-badge {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  padding: 2px 9px 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg, #5cc6ff, #2563eb);
  color: #ffffff; font-size: 11px; font-weight: 800; letter-spacing: .2px;
  text-transform: uppercase; line-height: 1.5;
  box-shadow: 0 1px 6px rgba(37,99,235,.45);
}
.member-badge svg { width: 13px; height: 13px; fill: currentColor; }
.member-badge.mini { padding: 2px; width: 18px; height: 18px; justify-content: center; gap: 0; }
.member-badge.mini svg { width: 12px; height: 12px; }
.member-badge.lg { font-size: 12px; padding: 4px 12px 4px 9px; }
.member-badge.lg svg { width: 15px; height: 15px; }

/* Educational-use disclaimer on cybersecurity/hacking watch pages. */
.v-edu-note {
  margin: 10px 0 0; padding: 10px 14px;
  border-left: 3px solid #f4a300;
  background: color-mix(in srgb, #f4a300 9%, transparent);
  border-radius: 0 8px 8px 0;
  font-size: 13px; line-height: 1.5; color: var(--text-dim);
}
.v-edu-note strong { color: var(--text); }
.v-edu-note a { color: var(--accent); }

/* "Member since" recognition line on the public profile. */
.member-since {
  margin-top: 3px; font-size: 13px; font-weight: 700;
  color: color-mix(in srgb, #5cc6ff 70%, var(--text));
}

/* ============================================================
   Site footer (legal/policy links) + legal page layout
   ============================================================ */
.site-footer {
  margin-top: 48px; padding: 24px 20px 40px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.site-footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
}
.site-footer-links a {
  color: var(--text-dim); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.site-footer-links a:hover { color: var(--text); text-decoration: underline; }
.site-footer-copy { color: var(--text-dim); font-size: 12.5px; margin: 0; }

.legal {
  width: min(760px, 100%); margin: 32px auto 0; padding: 0 22px;
  line-height: 1.65; color: var(--text);
}
.legal h1 { font-size: 30px; letter-spacing: -.5px; margin: 0 0 6px; }
.legal h2 { font-size: 18px; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--text); font-size: 15px; }
.legal ul { padding-left: 22px; display: grid; gap: 6px; margin: 8px 0; }
.legal a { color: var(--accent); }
.legal-updated { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; }
.legal-back { margin-top: 32px; }
.legal-back a { text-decoration: none; font-weight: 700; }

/* 18+ age gate overlay (shown once per browser, before first access). */
.age-gate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 8, 14, .82); backdrop-filter: blur(6px);
}
.age-gate-card {
  width: min(420px, 100%); text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 32px 28px;
  box-shadow: 0 30px 80px var(--shadow);
}
.age-gate-mark { display: inline-block; margin-bottom: 18px; font-weight: 800; font-size: 20px; }
.age-gate-card h2 { margin: 0 0 8px; font-size: 22px; }
.age-gate-card p { color: var(--text-dim); font-size: 14.5px; line-height: 1.55; margin: 0 0 20px; }
.age-gate-enter { width: 100%; padding: 14px; font-size: 16px; }
.age-gate-leave { display: inline-block; margin-top: 14px; color: var(--text-dim); font-size: 13.5px; text-decoration: none; }
.age-gate-leave:hover { color: var(--text); text-decoration: underline; }
.age-gate-fine { margin: 18px 0 0 !important; font-size: 11.5px; }
.age-gate-fine a { color: var(--accent); }

/* Fine-print consent line under the signup button. */
.acc-consent {
  margin: 12px 0 0; font-size: 12px; line-height: 1.5; text-align: center;
  color: var(--text-dim);
}
.acc-consent a { color: var(--accent); }

/* Subtle "exclusive comment styling" perk: a member's comment gets a faint blue
   accent stripe — a quiet recognition, not a loud highlight. */
.comment.is-member { position: relative; }
.comment.is-member .comment-body {
  border-left: 2px solid color-mix(in srgb, #2563eb 55%, transparent);
  padding-left: 12px; margin-left: -2px;
  background: linear-gradient(90deg, color-mix(in srgb, #2563eb 7%, transparent), transparent 60%);
  border-radius: 0 8px 8px 0;
}

/* GIF attachment shown inside a posted comment. */
.comment-gif {
  display: block; margin-top: 8px; max-width: min(320px, 100%); height: auto;
  border-radius: 10px; border: 1px solid var(--border);
}

/* GIF picker in the comment form. */
.cf-gif-btn {
  appearance: none; cursor: pointer;
  background: var(--surface-2, rgba(255,255,255,.06)); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  font-weight: 800; font-size: 12px; letter-spacing: .4px; padding: 0 12px; margin-right: 8px;
}
.cf-gif-btn:hover { border-color: var(--accent); color: var(--accent); }
.cf-gifpreview { position: relative; display: inline-block; margin: 0 0 10px; }
.cf-gifpreview img { max-height: 110px; border-radius: 10px; border: 1px solid var(--border); display: block; }
.cf-gif-remove {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; cursor: pointer;
  border-radius: 50%; border: none; background: #000; color: #fff; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.cf-gifpanel {
  margin: 0 0 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); box-shadow: 0 12px 40px var(--shadow);
}
.cf-gifsearch {
  width: 100%; box-sizing: border-box; padding: 9px 12px; margin-bottom: 10px;
  background: var(--bg, rgba(0,0,0,.25)); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
}
.cf-gifgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
  max-height: 320px; overflow-y: auto;
}
.cf-gifcell { padding: 0; border: none; background: none; cursor: pointer; border-radius: 8px; overflow: hidden; line-height: 0; }
.cf-gifcell img { width: 100%; height: 100px; object-fit: cover; border-radius: 8px; transition: transform .12s; }
.cf-gifcell:hover img { transform: scale(1.04); }
.cf-gifempty { grid-column: 1 / -1; color: var(--text-dim); font-size: 14px; padding: 16px; text-align: center; }
.cf-gifcredit { color: var(--text-dim); font-size: 11px; margin-top: 8px; text-align: right; }

/* ============================================================
   Premium / exclusive video layer (design only)
   ============================================================ */
.vexcl {
  position: absolute; right: 8px; top: 8px; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  color: #1a1205; background: linear-gradient(135deg, #ffd166, #f4a300);
  padding: 3px 9px 3px 7px; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(244,163,0,.45);
}
.vexcl svg { width: 12px; height: 12px; fill: currentColor; }
/* Locked (non-admin) premium cards: blur the still (admin-set level) + lock. */
/* Locked (non-admin) premium cards: a clean, even blur over the whole still
   (image + blurred fill) — no harsh zoom. */
.vcard.is-locked.blur-strong .vthumb img,
.vcard.is-locked.blur-strong .vthumb::before { filter: blur(12px) brightness(.78); }
.vcard.is-locked.blur-medium .vthumb img,
.vcard.is-locked.blur-medium .vthumb::before { filter: blur(6px) brightness(.86); }
.vcard.is-locked.blur-off .vthumb img { filter: brightness(.94); }
.vlock {
  position: absolute; inset: 0; z-index: 2; display: flex;
  align-items: center; justify-content: center; pointer-events: none;
}
.vlock svg {
  width: 46px; height: 46px; fill: #fff;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.6));
  opacity: .92; transition: transform .18s ease;
}
.vcard.is-locked:hover .vlock svg { transform: scale(1.08); }

/* Shared premium-teaser bits: gold "Members only" badge, glowing lock, gold CTA. */
.pm-badge, .pg-badge {
  display: inline-block; margin: 0 auto 14px; padding: 5px 13px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: #1a1205; background: linear-gradient(135deg, #ffe08a, #f4a300);
  box-shadow: 0 4px 14px rgba(244,163,0,.45);
}
.pm-lock, .pg-lock {
  position: relative; width: 84px; height: 84px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.pm-lock::after, .pg-lock::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(244,163,0,.45), transparent 70%);
  filter: blur(4px);
}
.pm-lock svg, .pg-lock svg { width: 84px; height: 84px; filter: drop-shadow(0 6px 16px rgba(244,163,0,.4)); }
.gold-cta {
  border: none; border-radius: 12px; cursor: pointer; font-weight: 800; font-size: 16px;
  color: #1a1205; background: linear-gradient(135deg, #ffe08a, #f4a300);
  box-shadow: 0 8px 24px rgba(244,163,0,.42); transition: filter .15s, transform .06s, box-shadow .15s;
}
.gold-cta:hover { filter: brightness(1.05); box-shadow: 0 10px 30px rgba(244,163,0,.55); }
.gold-cta:active { transform: scale(.98); }

/* Subscribe modal */
.pm-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,.66); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s;
}
.pm-overlay.show { opacity: 1; visibility: visible; }
.pm-card {
  position: relative; width: min(440px, 100%); text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, #f4a300 12%, var(--surface)), var(--surface) 60%);
  border: 1px solid color-mix(in srgb, #f4a300 30%, var(--border));
  border-radius: 18px; padding: 34px 30px 26px; box-shadow: 0 28px 70px var(--shadow), 0 0 0 1px rgba(244,163,0,.06);
  transform: translateY(8px) scale(.98); transition: transform .2s ease;
}
.pm-overlay.show .pm-card { transform: translateY(0) scale(1); }
.pm-close {
  position: absolute; top: 12px; right: 14px; background: none; border: none;
  font-size: 26px; line-height: 1; color: var(--text-dim); cursor: pointer;
}
.pm-close:hover { color: var(--text); }
.pm-card h2 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.pm-body { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin-bottom: 22px; }
.pm-sub { width: 100%; padding: 14px; }
.pm-alt { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--text-dim); text-decoration: none; }
.pm-alt:hover { color: var(--text); text-decoration: underline; }

/* In-player premium gate (watch page) */
.premium-gate {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background-size: cover; background-position: center; color: #fff;
}
.premium-gate::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 30%, rgba(20,14,2,.55), rgba(6,9,16,.86)); backdrop-filter: blur(18px);
}
.pg-inner { position: relative; max-width: 420px; padding: 28px; }
.premium-gate h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.premium-gate p { color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.55; }
.pg-sub { margin-top: 20px; padding: 14px 34px; }
.pg-alt { display: inline-block; margin-top: 14px; font-size: 13px; color: rgba(255,255,255,.7); text-decoration: none; }
.pg-alt:hover { color: #fff; text-decoration: underline; }

/* ============================================================
   Courses / one-time products — per-product branded surfaces
   (gate on the watch page, modal on the grid, banner above the
   grid, and the standalone course landing page). Colors come from
   the product's branding via --course-primary / --course-accent.
   ============================================================ */
.course-gradient { background: linear-gradient(135deg, var(--course-primary, #7c3aed), var(--course-accent, #22d3ee)); }
.cg-buy, .cm-buy, .cb-buy, .cl-buy {
  background: linear-gradient(135deg, var(--course-primary, #7c3aed), var(--course-accent, #22d3ee)) !important;
  color: #fff !important; box-shadow: 0 8px 24px color-mix(in srgb, var(--course-primary, #7c3aed) 45%, transparent) !important;
}

/* In-player course gate */
.course-gate::before {
  background: radial-gradient(120% 100% at 50% 30%,
    color-mix(in srgb, var(--course-primary, #7c3aed) 40%, rgba(6,9,16,.6)), rgba(6,9,16,.9));
}
.cg-logo { max-height: 64px; max-width: 70%; margin: 0 auto 16px; display: block; object-fit: contain; }
.cg-headline { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.cg-body { color: rgba(255,255,255,.85); font-size: 14.5px; line-height: 1.55; }
.cg-price { font-size: 30px; font-weight: 800; margin: 16px 0 4px; }
.cg-buy { margin-top: 14px; padding: 14px 34px; }

/* Course modal (grid) — themed border, reuses .pm-overlay/.pm-card shell. */
.cm-card {
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--course-primary, #7c3aed) 14%, var(--surface)), var(--surface) 60%);
  border-color: color-mix(in srgb, var(--course-primary, #7c3aed) 32%, var(--border));
}
.cm-badge { background: linear-gradient(135deg, var(--course-primary, #7c3aed), var(--course-accent, #22d3ee)); color: #fff; }
.cm-logo { max-height: 56px; max-width: 70%; margin: 0 auto 10px; display: block; object-fit: contain; }
.cm-name { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.cm-headline { color: var(--text); font-size: 15px; font-weight: 600; margin-bottom: 10px; }
.cm-price { font-size: 26px; font-weight: 800; margin: 8px 0 16px; }
.cm-buy { width: 100%; padding: 14px; }

/* Course banner above the grid (when a course is selected in the sidebar). */
.course-banner {
  position: relative; overflow: hidden; border-radius: 16px; margin: 0 0 20px;
  padding: 22px 24px; color: #fff;
  background: linear-gradient(135deg, var(--course-primary, #7c3aed), var(--course-accent, #22d3ee));
}
.cb-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cb-logo { height: 56px; width: auto; object-fit: contain; flex: none; }
.cb-text { flex: 1 1 260px; }
.cb-name { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.cb-headline { font-size: 15px; font-weight: 600; margin: 0 0 4px; opacity: .95; }
.cb-body { font-size: 13.5px; line-height: 1.5; margin: 0; opacity: .9; }
.cb-cta { flex: none; }
.cb-buy { padding: 13px 26px; }
.cb-owned { display: inline-block; padding: 10px 18px; border-radius: 999px; font-weight: 700; background: rgba(255,255,255,.2); }

/* Standalone course landing page (course.html). */
.cl-wrap { width: min(760px, 100%); margin: 36px auto 80px; padding: 0 20px; }
.cl-hero {
  position: relative; overflow: hidden; border-radius: 20px; padding: 40px 32px; text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--course-primary, #7c3aed), var(--course-accent, #22d3ee));
}
.cl-logo { max-height: 80px; margin: 0 auto 18px; display: block; object-fit: contain; }
.cl-name { font-size: 34px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 8px; }
.cl-headline { font-size: 18px; font-weight: 600; margin: 0 auto 6px; max-width: 520px; opacity: .96; }
.cl-body { font-size: 15px; line-height: 1.6; margin: 0 auto; max-width: 520px; opacity: .92; }
.cl-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 28px 30px; margin-top: -28px; position: relative; box-shadow: 0 20px 60px var(--shadow);
}
.cl-price { font-size: 44px; font-weight: 800; letter-spacing: -1px; text-align: center; margin: 4px 0 4px; }
.cl-price-note { color: var(--text-dim); font-size: 13px; text-align: center; margin: 0 0 20px; }
.cl-benefits { list-style: none; margin: 0 auto 24px; padding: 0; max-width: 420px; display: grid; gap: 11px; }
.cl-benefits li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.4; }
.cl-check { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--course-primary, #7c3aed), var(--course-accent, #22d3ee)); }
.cl-check svg { width: 13px; height: 13px; }
.cl-buy { width: 100%; padding: 16px; font-size: 17px; }
.cl-owned { text-align: center; }
.cl-banner { border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.cl-banner.ok { background: rgba(16,185,129,.12); color: #34d399; }
.cl-banner.warn { background: rgba(245,158,11,.12); color: #fbbf24; }

/* ============================================================
   Interaction polish — hover/glow/press on primary controls
   ============================================================ */
.chip { transition: background .15s, border-color .15s, transform .05s; }
.chip:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.chip:active { transform: scale(.96); }
.hdr-upload:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.share-btn:focus-visible, .hdr-upload:focus-visible, .chip:focus-visible {
  outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);
}