/* ============================================================================
   Not on the News — design tokens
   Display: Sora · Body: Manrope · Utility/numbers: JetBrains Mono
   Monochrome brand: single true-black theme, grey/white text & accents
   throughout. (No light/dark toggle — the site is always black.)
   ========================================================================= */

:root {
  --bg: #000000;
  --surface: #0d0d0d;
  --surface-alt: #161616;
  --border: #272727;
  --text: #ffffff;
  --text-muted: #a6a6a6;
  --accent: #ffffff;
  --accent-ink: #000000;
  --accent-2: #999999;
  --downvote: #999999;
  --danger: #ff6b6b;
  --focus: #ffffff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.65);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* Real height of .site-header, kept in sync by app.js (syncHeaderHeight) —
     this fallback covers the moment before that JS runs. */
  --header-h: 87px;
  color-scheme: dark;
}

/* ============================================================================
   Reset & base
   ========================================================================= */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  padding-inline: 20px;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; }
.tabular { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap {
  max-width: 1280px;
  margin-inline: auto;
}

/* ============================================================================
   Header
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding-block: 14px;
}

@media (max-width: 760px) {
  .site-header { padding-bottom: 24px; }
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo {
  display: block;
  height: auto;
  width: auto;
}

.header-row .site-logo { height: 58px; }
.footer-logo { height: 50px; }

.login-logo-link {
  display: flex;
  justify-content: center;
  margin: 0 auto 22px;
}
.login-logo { height: 130px; }

.topbar-logo { height: 32px; }
.topbar-mod-label {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.85rem;
  margin-left: 10px;
}

@media (max-width: 560px) {
  .header-row .site-logo { height: 46px; }
}

.header-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ============================================================================
   Page content & rows
   ========================================================================= */

main { padding-block: 18px 80px; }

.page-heading {
  margin-bottom: 28px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.page-heading h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.page-heading p { color: var(--text-muted); margin-top: 6px; }

/* Sticky under the header (not just at the top of the page) so the subject
   and sort controls stay reachable while scrolling a long list. */
.filters-wrap {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
  padding-block: 12px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* Featured / Feed tabs on the home page — a pill-shaped switch sitting at
   the start of the sticky filter bar, with the active tab filled solid so
   it's obvious which list you're on. It sits right next to the filters
   (rather than spread across the full width) so it reads as one control. */
.filters-wrap.has-tabs { align-items: center; }
.feed-tabs {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--text-muted);
  border-radius: 999px;
  background: var(--surface);
}
.feed-tab {
  padding: 7px 20px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
@media (hover: hover) {
  .feed-tab:not(.active):hover { color: var(--text); background: var(--surface-alt); }
}
.feed-tab.active { background: var(--accent); color: var(--accent-ink); }
.feed-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.feed-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.feed-filters[hidden] { display: none; }

/* Phones: the switch takes the full width on its own line so each tab is a
   big, easy target; the filters wrap underneath. */
@media (max-width: 560px) {
  .feed-tabs { display: flex; width: 100%; }
  .feed-tab { flex: 1 1 0; padding: 9px 12px; }
}

.featured-intro {
  margin: -8px 0 18px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.row-filter-select { position: relative; display: inline-flex; }
.row-filter-select::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.row-filter {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 8px 36px 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.row-filter:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.count-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-mono);
  white-space: nowrap;
}
.count-badge.small { padding: 2px 10px; font-size: 0.7rem; }

.video-row { margin-bottom: 36px; }

.row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.video-row h2 {
  font-size: 1.05rem;
  font-weight: 700;
}

.row-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* ============================================================================
   Video list
   ========================================================================= */

.video-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.vlist-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  cursor: pointer;
  border: none;
  border-top: 1px solid var(--border);
  background: none;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: background 0.15s ease, padding-left 0.15s ease;
}
.vlist-item:first-child { border-top: none; }
.vlist-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--accent);
  transition: width 0.15s ease;
}
.vlist-item:hover {
  background: var(--surface-alt);
  padding-left: 20px;
}
.vlist-item:hover::before { width: 4px; }

.vlist-thumb-wrap {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
}

.vlist-thumb {
  width: 160px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-alt);
}
.vlist-thumb-icon {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px;
  color: var(--text-muted);
}
.vlist-thumb-icon svg { width: 20px; height: 20px; opacity: 0.35; }

.vlist-main {
  flex: 1 1 auto;
  min-width: 0;
}

.vlist-title {
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
}

.vlist-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.vlist-time,
.view-count {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.upload-date {
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.6;
}

/* Feed-only additions: which subject a tile belongs to (shown as a badge
   overlaid on the thumbnail, top-left — see .vlist-thumb-wrap), its Top 10
   rank, and a "pinned by moderator" marker. */
.feed-page-tag {
  position: absolute;
  left: 6px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
}

/* X-sourced tiles: no real thumbnail image, so instead of the plain
   top-left pill, the page name sits centered over the X icon (which shows
   through, dimmed, behind it — see .vlist-thumb-icon svg) in a glowing
   display font. */
.feed-page-tag--glow {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: none;
  background: none;
  border-radius: 0;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: normal;
  text-shadow:
    0 0 3px rgba(166, 166, 166, 0.35),
    0 0 8px rgba(166, 166, 166, 0.18),
    0 0 16px rgba(166, 166, 166, 0.1);
}

@media (max-width: 560px) {
  .feed-page-tag--glow { font-size: 0.66rem; padding: 6px; }
}

.feed-rank {
  flex: 0 0 auto;
  align-self: center;
  width: 26px;
  text-align: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.pin-badge {
  display: inline-flex;
  margin-left: 6px;
  color: var(--accent);
  vertical-align: middle;
}
.pin-badge svg { width: 13px; height: 13px; }

@media (max-width: 560px) {
  .feed-rank { width: 18px; font-size: 0.8rem; }
  .feed-page-tag { font-size: 0.6rem; padding: 1px 7px; }
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.vote-btn svg { width: 12px; height: 12px; }
.vote-btn.up.active { background: var(--accent-2); border-color: var(--accent-2); color: #0a0a0a; }
.vote-btn.down.active { background: var(--downvote); border-color: var(--downvote); color: #0a0a0a; }

/* Share button — same pill as the upvote button; flips to "Link copied". */
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.share-btn svg { width: 12px; height: 12px; }
.share-btn:hover { color: var(--text); }
.share-btn.copied { background: var(--accent-2); border-color: var(--accent-2); color: #0a0a0a; }

.vlist-play {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.vlist-play svg { width: 15px; height: 15px; fill: var(--text); margin-left: 2px; }
.vlist-item:hover .vlist-play { background: var(--accent); transform: scale(1.06); }
.vlist-item:hover .vlist-play svg { fill: var(--accent-ink); }

/* Watched marker — a red ring around the play button instead of a text tag. */
.vlist-play.watched {
  border: 1px solid var(--danger);
}
.vlist-item:hover .vlist-play.watched { background: var(--surface-alt); }
.vlist-item:hover .vlist-play.watched svg { fill: var(--text); }

@media (max-width: 560px) {
  .vlist-item { gap: 10px; padding: 10px 12px; }
  .vlist-thumb { width: 112px; height: 63px; }
  .vlist-thumb-icon svg { width: 15px; height: 15px; }
  .vlist-title { font-size: 0.88rem; }
  .vlist-meta { gap: 8px; }
  .vlist-play { width: 34px; height: 34px; }
}

/* ============================================================================
   Player modal
   ========================================================================= */

.player-backdrop {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 80;
  display: flex;
  overscroll-behavior: contain;
}
/* Page behind the player doesn't scroll while a video is open. */
body.player-open { overflow: hidden; }

/* Fills the whole window: video on top, a slim title bar underneath. */
.player-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.player-box.is-x {
  align-items: center;
}
/* X posts: tweet card centred in the space above the title bar. */
.player-box.is-x .player-frame-wrap { margin-block: auto; }

.player-frame-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  background: #000;
  overflow: hidden;
}
.player-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* X/Twitter posts are portrait-shaped tweet cards, not 16:9 video frames —
   let this one size itself to its content instead of being cropped into a
   widescreen box. */
.player-frame-wrap.is-x {
  flex: 0 1 auto;
  width: min(560px, 100%);
  background: transparent;
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  border-radius: 0;
}
/* Twitter's widget replaces the blockquote with its own <iframe> — override
   the YouTube-style absolute-fill rule above so it can size itself normally
   instead of being collapsed to a 0-height box. */
.player-frame-wrap.is-x iframe {
  position: static;
  width: 100%;
  height: auto;
  min-height: 300px;
}

.player-x-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  text-align: center;
  padding: 20px;
}
.player-frame-wrap.is-x .player-x-fallback {
  position: static;
  padding: 0;
}

.player-meta {
  flex: 0 0 auto;
  width: 100%;
  padding: 10px 84px calc(10px + env(safe-area-inset-bottom, 0px)) 20px;
  color: #fff;
  background: rgba(0, 0, 0, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.player-meta > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.player-meta h3 { font-size: 1rem; margin: 0; }
.player-meta .player-actions { margin-top: 0; }

/* Big round X, top right, always above the video. */
.player-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 2;
  width: 60px;
  height: 60px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.player-close svg { width: 28px; height: 28px; }
.player-close:hover { background: rgba(255, 255, 255, 0.22); border-color: #fff; }
.player-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 560px) {
  .player-close { width: 52px; height: 52px; top: max(10px, env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); }
  .player-meta { padding-right: 20px; }
}

/* ---- Previous / next video ------------------------------------------------ */
.player-box-holder { width: 100%; height: 100%; display: flex; }
.player-backdrop, .player-meta { touch-action: pan-y; }
.player-box.slide-next { animation: player-slide-next 0.28s ease-out; }
.player-box.slide-prev { animation: player-slide-prev 0.28s ease-out; }
@keyframes player-slide-next { from { transform: translateX(36px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes player-slide-prev { from { transform: translateX(-36px); opacity: 0; } to { transform: none; opacity: 1; } }
.player-count { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); }

/* Desktop: round arrow buttons at the sides, same look as the close button. */
.player-nav {
  display: none;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 60px;
  height: 60px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}
.player-nav.prev { left: max(16px, env(safe-area-inset-left, 0px)); }
.player-nav.next { right: max(16px, env(safe-area-inset-right, 0px)); }
.player-nav svg { width: 30px; height: 30px; }
.player-nav:hover { background: rgba(255, 255, 255, 0.22); border-color: #fff; }
.player-nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.player-nav:disabled { visibility: hidden; }
@media (hover: hover) and (pointer: fine) {
  .player-nav { display: flex; }
}

/* Touch screens: swipe strips down both sides of the video (swipes inside the
   YouTube/X frame itself can't be seen by the page). They stop short of the
   top buttons and the video's own controls along the bottom. */
.swipe-zone {
  display: none;
  position: absolute;
  top: 76px;
  bottom: calc(150px + env(safe-area-inset-bottom, 0px));
  width: 72px;
  z-index: 1;
  touch-action: pan-y;
}
.swipe-zone.left { left: 0; }
.swipe-zone.right { right: 0; }
@media (pointer: coarse) {
  .swipe-zone { display: block; }
}

/* First video of a visit: swipe symbol + glowing side strips. */
.swipe-hint {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 170px);
  padding: 14px 20px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  animation: hint-in 0.3s ease-out;
}
.swipe-hint-icon { width: 120px; height: 48px; overflow: visible; }
.swipe-finger { animation: swipe-finger 1.6s ease-in-out infinite; }
@keyframes swipe-finger { 0%, 100% { transform: translateX(-30px); } 50% { transform: translateX(30px); } }
@keyframes hint-in { from { opacity: 0; } to { opacity: 1; } }
.player-backdrop.hinting .swipe-zone { animation: zone-pulse 1.6s ease-in-out infinite; }
.player-backdrop.hinting .swipe-zone.left { background: linear-gradient(to right, rgba(255, 255, 255, 0.3), transparent); }
.player-backdrop.hinting .swipe-zone.right { background: linear-gradient(to left, rgba(255, 255, 255, 0.3), transparent); }
@keyframes zone-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .player-box.slide-next, .player-box.slide-prev, .swipe-finger,
  .player-backdrop.hinting .swipe-zone { animation: none; }
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.85rem;
}

/* ============================================================================
   Site footer
   ========================================================================= */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-block: 28px 40px;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-actions a {
  color: var(--text-muted);
  font-size: 0.85rem;
  text-decoration: none;
}
.footer-actions a:hover { color: var(--text); }

.footer-disclaimer p {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.6;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.footer-disclaimer p + p { margin-top: 10px; }
.footer-disclaimer .footer-warning { color: var(--text); }

@media (max-width: 600px) {
  .footer-top { justify-content: center; text-align: center; }
}

/* ============================================================================
   Moderator UI (shared bits also used by moderator.html)
   ========================================================================= */

.mod-shell { max-width: 980px; margin: 0 auto; padding-block: 40px 100px; }

.mod-tabs {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.mod-tab-btn {
  padding: 8px 1px 12px;
  border: none;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.mod-tab-btn:hover { color: var(--text); }
.mod-tab-btn.active { color: var(--text); border-color: var(--accent); }

.mod-page-context {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.mod-page-context .field { margin-bottom: 0; }
.mod-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.mod-card h2 { font-size: 1.1rem; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.field input, .field select, .field textarea {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 140px; }

.field-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.field-checkbox input { width: 16px; height: 16px; accent-color: var(--accent-2); cursor: pointer; }

.icon-btn.active-pin { border-color: #f5c518; color: #f5c518; background: var(--surface-alt); }

.pw-field { position: relative; }
.pw-field input { width: 100%; padding-right: 42px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.pw-toggle:hover { color: var(--text); background: var(--surface-alt); }
.pw-toggle svg { width: 18px; height: 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.btn.secondary { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: var(--danger); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hint { font-size: 0.8rem; color: var(--text-muted); margin-top: -6px; margin-bottom: 14px; }
.error-msg { color: var(--danger); font-size: 0.85rem; margin-top: 8px; }
.success-msg { color: var(--accent-2); font-size: 0.85rem; margin-top: 8px; }

.sort-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.sort-toolbar select { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); color: var(--text); }

.bulk-move-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--accent-2);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.bulk-move-count { font-weight: 700; font-size: 0.85rem; }
.bulk-move-bar select {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.mod-video-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mod-video-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.mod-video-item.sortable-ghost { opacity: 0.4; }
.select-check { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-2); }
.drag-handle { cursor: grab; color: var(--text-muted); flex-shrink: 0; }
.mod-video-item .thumb-mini {
  width: 64px; height: 36px; object-fit: cover; border-radius: 6px; background: var(--surface-alt); flex-shrink: 0;
}
.mod-video-item .info { flex: 1; min-width: 0; }
.mod-video-item .info .t { font-weight: 700; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mod-video-item .info .m { font-size: 0.76rem; color: var(--text-muted); }
.mod-video-item .actions { display: flex; gap: 6px; flex-shrink: 0; }
.icon-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 14px; height: 14px; }

.pages-admin-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.pages-admin-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg);
}
.pages-admin-item .t { flex: 1; font-weight: 700; }
.pages-admin-item.is-hidden .t,
.pages-admin-item.is-hidden .hint { opacity: 0.5; }
.page-switch { min-width: 74px; justify-content: center; }
.featured-switch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.featured-switch-status { flex: 1; min-width: 200px; font-size: 0.85rem; color: var(--text-muted); }
.page-switch.is-on { border-color: var(--accent-2); color: var(--accent-2); }
.page-switch.is-off { color: var(--text-muted); }

.login-shell {
  max-width: 380px;
  margin: 15vh auto 0;
  text-align: center;
}
.login-shell h1 { margin-bottom: 6px; }
.login-shell p { color: var(--text-muted); margin-bottom: 22px; }

.mod-topbar {
  display: flex; align-items: center; justify-content: space-between; padding-block: 16px;
  border-bottom: 1px solid var(--border); margin-bottom: 10px;
}

/* Moderator Featured tab */
.mod-video-item .featured-rank { flex-shrink: 0; width: 28px; font-weight: 800; font-size: 0.85rem; color: var(--text-muted); }
.featured-cap-warning { color: #f5c518; }

/* Player: "Open on X" + "Video not working?" */
.player-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; }
.player-meta .player-actions .btn-link { margin-top: 0; }
.report-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.report-link:hover:not(:disabled) { color: var(--text); }
.report-link:disabled { text-decoration: none; cursor: default; }

/* Moderator: Reported tab */
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: #e5484d; color: #fff;
  font-size: 0.72rem; font-weight: 800; vertical-align: 1px;
}
.tab-count[hidden] { display: none; }
.mod-video-item .report-count { flex-shrink: 0; min-width: 34px; font-weight: 800; color: #e5484d; }
.mod-video-item .info .m a { color: var(--text-muted); }
.btn.btn-sm { padding: 6px 12px; font-size: 0.8rem; }

/* Moderator: two-factor settings */
.twofa { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }
.twofa h3 { font-size: 1rem; margin: 0 0 6px; }
.twofa-on-label { color: #3dd68c; }
.twofa-steps { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 16px; }
.twofa-qr { margin: 10px 0; padding: 10px; background: #fff; border-radius: 10px; width: max-content; }
.twofa-qr img, .twofa-qr canvas { display: block; }
.twofa-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.twofa-inline input { width: 130px; font-family: var(--font-mono); letter-spacing: 0.08em; }
#login-code { font-family: var(--font-mono); letter-spacing: 0.12em; }

/* Quick add (moderator page) */
.quick-add { padding: 18px 20px; }
.quick-add h2 { margin-bottom: 12px; }
.qa-link-row { display: flex; gap: 10px; }
.qa-link-row input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.qa-status { margin-top: 8px; margin-bottom: 0; min-height: 1.1em; }
.qa-status.warn { color: var(--danger); }
.qa-details { margin-top: 14px; }
.qa-details .btn { margin-right: 8px; }
@media (max-width: 560px) {
  .qa-link-row { flex-direction: column; }
}

/* ---- Site notice (box at the top of the public site) ---- */
#site-notice { padding-top: 18px; }
.site-notice-box {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 0.95rem;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.site-notice-box a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
.notice-editor textarea { width: 100%; min-height: 130px; resize: vertical; }
.notice-count { font-size: 0.75rem; color: var(--text-muted); text-align: right; margin-top: 4px; }