/* CHUD — Windows 2000 classic theme

   Polished silver chrome, Tahoma, gradient title bars.

   Same class names as app.css — layout & JS unchanged. */



:root {

  /* Win2k classic palette */

  --face: #d4d0c8;

  --face-hover: #e0dcd4;

  --face-press: #c8c4bc;

  --hi: #ffffff;

  --lo: #808080;

  --dk: #404040;

  --black: #000000;

  --desktop: #3a6ea5;

  --title-start: #0a246a;

  --title-end: #a6caf0;

  --title-inactive-start: #808080;

  --title-inactive-end: #c0c0c0;

  --select: #0a246a;

  --select-text: #ffffff;

  --field: #ffffff;

  --link: #000080;

  --danger: #9b0000;

  --ok: #006600;

  --rec: #9b0000;

  --text: #000000;

  --muted: #404040;

  --faint: #666666;



  /* Map old app vars so residual app.css rules still look right */

  --bg: var(--desktop);

  --bg-raised: var(--face);

  --bg-card: var(--face);

  --bg-input: var(--field);

  --bg-hover: var(--face-hover);

  --line: var(--lo);

  --line-soft: var(--lo);

  --accent: var(--select);

  --accent-2: var(--title-start);

  --accent-hover: #143890;

  --accent-glow: transparent;

  --radius: 0;

  --radius-sm: 0;

  --font: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif;

  --mono: "Lucida Console", Consolas, "Courier New", monospace;

  --shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);

  --inset: none;

}



* { box-sizing: border-box; }

.hidden { display: none !important; }

[hidden] { display: none !important; }



html, body {

  margin: 0;

  padding: 0;

  background: var(--desktop) !important;

  background-image: none !important;

  color: var(--text) !important;

  font-family: var(--font) !important;

  font-size: 11px !important;

  line-height: 1.35 !important;

}



body { min-height: 100vh; }



button, input, select, textarea {

  font-family: var(--font) !important;

  font-size: 11px !important;

  border-radius: 0 !important;

}



.noise { display: none !important; }



#app {

  background: var(--desktop);

  min-height: 100vh;

  min-height: 100dvh;

  padding: 8px;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

}



/* Outer app frame like a Win2k window on the desktop */

#app > .app-sticky-chrome,

#app > .topbar,

#app > .main-tabs,

#app > .workspace {

  max-width: 1400px;

  margin-left: auto;

  margin-right: auto;

}



/* Menu bar + tabs stick together while scrolling (esp. mobile) */

.app-sticky-chrome {

  width: 100%;

  max-width: 1400px;

  margin-left: auto;

  margin-right: auto;

  z-index: 40;

}



/* ── Raised / sunken helpers ──────────────────────────────── */

.w2k-raised {

  background: var(--face);

  border-top: 2px solid var(--hi);

  border-left: 2px solid var(--hi);

  border-right: 2px solid var(--dk);

  border-bottom: 2px solid var(--dk);

}

.w2k-sunken {

  background: var(--field);

  border-top: 2px solid var(--lo);

  border-left: 2px solid var(--lo);

  border-right: 2px solid var(--hi);

  border-bottom: 2px solid var(--hi);

}



/* ── Auth ─────────────────────────────────────────────────── */

.auth-body {

  background: var(--desktop) !important;

  background-image: none !important;

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

}



.auth-card {

  width: min(380px, 100%);

  background: var(--face) !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  border-radius: 0 !important;

  padding: 0 0 14px !important;

  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25) !important;

  text-align: left !important;

  overflow: hidden;

}



.auth-card > .brand-logo.xl {

  margin: 16px auto 8px !important;

  display: block;

  border-radius: 0 !important;

  border: 1px solid var(--lo) !important;

  box-shadow: none !important;

}



.auth-card h1 {

  margin: 0 0 0 !important;

  font-size: 11px !important;

  letter-spacing: 0 !important;

  font-weight: bold !important;

  color: #fff !important;

  background: linear-gradient(90deg, var(--title-start) 0%, var(--title-end) 100%) !important;

  padding: 4px 8px 5px !important;

  text-align: left;

  order: -1;

}



/* Put title first visually if logo is above — style logo area */

.auth-card {

  display: flex;

  flex-direction: column;

}



.auth-card h1 {

  width: 100%;

}



.auth-tabs {

  display: flex;

  gap: 6px;

  margin: 12px 14px 10px !important;

}



.auth-tabs button {

  flex: 1;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  background: var(--face) !important;

  border-radius: 0 !important;

  padding: 5px 10px !important;

  color: #000 !important;

  font-weight: bold !important;

  box-shadow: none !important;

  transition: none !important;

}



.auth-tabs button.on {

  border-top: 2px solid var(--dk) !important;

  border-left: 2px solid var(--dk) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  background: var(--face-press) !important;

}



.auth-form {

  padding: 0 14px !important;

  gap: 10px !important;

}



.auth-form label {

  color: #000 !important;

  font-size: 11px !important;

  font-weight: normal !important;

}



.auth-form .btn.primary {

  margin-top: 4px;

}



.auth-msg { padding: 0 14px; margin-top: 8px !important; }

.auth-msg.err { color: var(--danger) !important; }

.tiny { font-size: 10px !important; color: var(--muted) !important; padding: 0 14px; }

.auth-card > .tiny { margin-top: 10px !important; }



.brand-logo {

  border-radius: 0 !important;

  border: 1px solid var(--lo) !important;

  box-shadow: none !important;

}



/* ── Topbar = active title bar ────────────────────────────── */

.topbar {

  display: flex;

  align-items: center;

  justify-content: flex-start;

  flex-wrap: nowrap;

  gap: 8px;

  padding: 3px 6px !important;

  border: none !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  background: linear-gradient(90deg, var(--title-start) 0%, var(--title-end) 100%) !important;

  backdrop-filter: none !important;

  position: relative;

  z-index: 2;

  box-shadow: none !important;

  min-width: 0;

}



.brand {

  display: flex !important;

  gap: 8px !important;

  align-items: center !important;

  flex: 0 0 auto !important;

  min-width: 0 !important;

}

.brand-logo {

  width: 18px !important;

  height: 18px !important;

  border: 1px solid rgba(255,255,255,0.35) !important;

}



.brand-text h1 {

  margin: 0 !important;

  font-size: 12px !important;

  letter-spacing: 0 !important;

  font-weight: bold !important;

  color: #fff !important;

  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);

}



.brand-sub {

  color: rgba(255, 255, 255, 0.85) !important;

  font-size: 10px !important;

}



.brand-sub .acro { color: #ffffcc !important; }



.topbar-right {

  display: flex !important;

  align-items: center !important;

  gap: 5px !important;

  flex: 0 0 auto !important;

  margin-left: auto !important;

  min-width: 0 !important;

}



.pill {

  font-size: 10px !important;

  font-weight: bold !important;

  padding: 2px 8px !important;

  border-radius: 0 !important;

  background: var(--face) !important;

  border-top: 1px solid var(--lo) !important;

  border-left: 1px solid var(--lo) !important;

  border-right: 1px solid var(--hi) !important;

  border-bottom: 1px solid var(--hi) !important;

  color: #000 !important;

  font-family: var(--font) !important;

  letter-spacing: 0 !important;

}



.pill.user { color: var(--title-start) !important; }

.pill.playing {

  color: var(--ok) !important;

  background: #fff !important;

}

.pill.rec {

  color: #fff !important;

  background: var(--rec) !important;

  border-color: #600000 !important;

}



/* Movie Night host indicator on the top title bar */

.pill.hosting-badge,

#mn-hosting-badge {

  color: #fff !important;

  background: #c00000 !important;

  border: 1px solid #800000 !important;

  border-top-color: #ff6060 !important;

  border-left-color: #ff6060 !important;

  border-right-color: #600000 !important;

  border-bottom-color: #600000 !important;

  font-weight: bold !important;

  font-size: 10px !important;

  letter-spacing: 0.06em !important;

  padding: 2px 8px !important;

  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);

}

#mn-hosting-badge.hidden {

  display: none !important;

}

html.theme-dark body .pill.hosting-badge,

html.theme-dark body #mn-hosting-badge {

  color: #fff !important;

  background: #d01010 !important;

  border-color: #ff7070 #700000 #700000 #ff7070 !important;

}



.topbar .tool.sm,

.topbar .ghost-tool {

  background: var(--face) !important;

  color: #000 !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  padding: 2px 10px !important;

}



/* ── Menu tabs (inline in topbar with brand + actions) ───── */

.topbar .main-tabs,

.main-tabs {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  gap: 2px !important;

  flex: 1 1 auto !important;

  min-width: 0 !important;

  overflow-x: auto;

  overflow-y: hidden;

  padding: 0 !important;

  margin: 0 !important;

  border: none !important;

  background: transparent !important;

  background-image: none !important;

  box-shadow: none !important;

  /* hide scrollbar but keep scroll on narrow widths */

  scrollbar-width: thin;

}



.main-tabs button {

  flex: 0 0 auto;

  border: 1px solid transparent !important;

  background: rgba(255, 255, 255, 0.12) !important;

  color: #fff !important;

  padding: 3px 10px !important;

  border-radius: 0 !important;

  cursor: pointer;

  font-weight: normal !important;

  font-size: 11px !important;

  white-space: nowrap;

  transition: none !important;

  box-shadow: none !important;

  margin: 0 !important;

  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);

}



.main-tabs button:hover {

  color: #fff !important;

  background: rgba(255, 255, 255, 0.22) !important;

}



.main-tabs button.active {

  border-top: 1px solid var(--hi) !important;

  border-left: 1px solid var(--hi) !important;

  border-right: 1px solid var(--dk) !important;

  border-bottom: 1px solid var(--dk) !important;

  background: var(--face) !important;

  color: #000 !important;

  font-weight: bold !important;

  box-shadow: none !important;

  position: relative;

  z-index: 1;

  text-shadow: none !important;

}



/* ── Workspace body ───────────────────────────────────────── */

.workspace {

  flex: 1 1 auto;

  display: grid;

  /* Player can flex; content/chat keeps room and only narrows a little */

  grid-template-columns: minmax(280px, min(40vw, 520px)) minmax(320px, 1fr);

  min-height: 0;

  align-items: stretch;

  background: var(--face);

  border-left: 2px solid var(--hi);

  border-right: 2px solid var(--dk);

  border-bottom: 2px solid var(--dk);

  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);

  gap: 0 !important;

}



.player-col {

  border-right: 1px solid var(--lo) !important;

  padding: 6px 8px !important;

  background: var(--face) !important;

  background-image: none !important;

  min-height: 0 !important;

  overflow: auto !important;

}



.content-col {

  padding: 6px 8px 10px !important;

  min-height: 0 !important;

  min-width: 0 !important;

}



.player-card {

  background: var(--face) !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  border-radius: 0 !important;

  overflow: hidden;

  box-shadow: none !important;

}



.player-bevel {

  padding: 5px !important;

  background: var(--face) !important;

  background-image: none !important;

}



#player-wrap {

  border-radius: 0 !important;

  border-top: 2px solid var(--lo) !important;

  border-left: 2px solid var(--lo) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  background: #000 !important;

  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4);

  position: relative;

}

#player-wrap.embed-mode #player {

  visibility: hidden !important;

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  opacity: 0 !important;

  pointer-events: none !important;

}

#player-wrap.embed-mode #embed-frame {

  display: block !important;

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  border: 0 !important;

  background: #000 !important;

  z-index: 2;

}

#embed-frame.hidden {

  display: none !important;

}



#player-empty {

  color: #c0c0c0 !important;

  background: #000 !important;

  background-image: none !important;

}



.empty-icon {

  border: 1px solid #666 !important;

  border-radius: 0 !important;

  color: #fff !important;

  background: #1a1a1a;

}



.empty-hint { color: #888 !important; }



.player-info { padding: 8px 10px 4px !important; }

.player-info {

  background: var(--face) !important;

  color: var(--text) !important;

}

.now-title,

#now-playing {

  font-weight: bold !important;

  font-size: 12px !important;

  color: var(--text) !important;

}

.now-sub,

#now-sub {

  color: var(--muted) !important;

  font-size: 10px !important;

  font-family: var(--font) !important;

}



/* Legacy full-width source bar removed — switch lives in player-toolbar as #btn-media-alt */

.player-source-bar { display: none !important; }

#btn-media-alt.hidden { display: none !important; }

#btn-media-alt:not(.hidden) {

  display: inline-block !important;

}



.player-toolbar {

  display: flex;

  flex-wrap: wrap;

  gap: 5px !important;

  padding: 8px 10px 10px !important;

  border-top: 1px solid var(--lo);

  background: var(--face);

}



/* TV binge — same raised tool chrome as Download / Library / CC */

#btn-next-ep.hidden {

  display: none !important;

}

#btn-next-ep:not(.hidden) {

  display: inline-block !important;

  visibility: visible !important;

}

#btn-next-ep:disabled {

  opacity: 0.55 !important;

  cursor: not-allowed !important;

}



/* ── Buttons ──────────────────────────────────────────────── */

.tool, .btn {

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  background: var(--face) !important;

  color: #000 !important;

  border-radius: 0 !important;

  padding: 4px 12px !important;

  cursor: pointer;

  font-size: 11px !important;

  font-weight: bold !important;

  transition: none !important;

  box-shadow: none !important;

}



.tool:hover, .btn:hover {

  background: var(--face-hover) !important;

}



.tool:active, .btn:active,

.tool.on {

  border-top: 2px solid var(--dk) !important;

  border-left: 2px solid var(--dk) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  background: var(--face-press) !important;

  transform: none !important;

  color: #000 !important;

}



.tool.danger, .danger-text { color: var(--danger) !important; }

.tool.sm, .btn.sm { padding: 3px 9px !important; font-size: 10px !important; }

.tool.recording {

  background: var(--rec) !important;

  color: #fff !important;

  border-color: #400000 !important;

}

.ghost-tool { opacity: 1 !important; }



.btn.primary {

  background: var(--face) !important;

  color: #000 !important;

  box-shadow: none !important;

  /* default button ring like Win2k OK */

  outline: 1px dotted #000;

  outline-offset: -5px;

}



.btn.primary:hover { background: var(--face-hover) !important; }

.btn.ghost { background: var(--face) !important; }

.btn.block { width: 100%; }



/* ── Site chat (stream) — compact, no avatars ─ */

/* Compose row is always pinned at the bottom; log/embed scroll above it.

   Classic Win2k chat: sunken white feed, bold navy nicks, black body text. */

.chat-panel {

  margin-top: 8px !important;

  background: var(--face) !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  min-height: 220px !important;

  max-height: min(44vh, 400px) !important;

  height: min(44vh, 400px) !important;

  display: flex !important;

  flex-direction: column !important;

  overflow: hidden !important; /* clip log only; compose is flex-pinned */

}

.chat-panel.hidden { display: none !important; }



.chat-head {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 8px !important;

  padding: 4px 8px !important;

  border-bottom: 1px solid var(--lo) !important;

  background: linear-gradient(90deg, var(--title-start), var(--title-end)) !important;

  color: #fff !important;

  font-size: 11px !important;

  flex: 0 0 auto !important;

}



.chat-head-title,

.chat-head strong {

  color: #fff !important;

  font-weight: bold !important;

  text-shadow: 1px 1px 0 rgba(0,0,0,0.25);

  font-size: 11px !important;

  letter-spacing: 0.02em;

}



.chat-status {

  color: rgba(255,255,255,0.92) !important;

  font-family: var(--font) !important;

  font-size: 10px !important;

  font-weight: normal !important;

  margin-left: auto !important;

  white-space: nowrap !important;

}



.chat-status.live { color: #b0ffb0 !important; }

.chat-status.err { color: #ffb0b0 !important; }



/* Sunken message area — classic Win2k, tuned for readability */

.chat-log {

  background: #ffffff !important;

  border-top: 2px solid var(--lo) !important;

  border-left: 2px solid var(--lo) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  margin: 4px 4px 0 !important;

  padding: 6px 8px !important;

  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif !important;

  font-size: 13px !important;

  color: #000000 !important;

  min-height: 0 !important;

  flex: 1 1 auto !important;

  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;

  line-height: 1.5 !important;

  -webkit-font-smoothing: antialiased !important;

  text-rendering: optimizeLegibility !important;

}



/* Nick + message — clear spacing, strong contrast */

.chat-line {

  margin: 0 0 1px !important;

  padding: 3px 4px !important;

  border: none !important;

  background: transparent !important;

  line-height: 1.5 !important;

  word-break: break-word !important;

  overflow-wrap: anywhere !important;

  font-size: 13px !important;

  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif !important;

}

.chat-line:nth-child(even) {

  background: #f0eee8 !important;

}

.chat-line .u {

  color: #000080 !important;

  font-weight: bold !important;

  font-size: 12.5px !important;

  margin-right: 0 !important;

  letter-spacing: 0 !important;

}

.chat-line .u::after {

  content: ": " !important;

  color: #000080 !important;

  font-weight: bold !important;

}

.chat-line .t {

  color: #111111 !important;

  font-size: 13px !important;

  font-weight: normal !important;

}

.chat-line.status { display: none !important; }



/* Always-visible send box for Kick/Twitch/YouTube/Rumble/PPV site chat */

.chat-compose,

#chat-compose {

  border-top: 1px solid var(--lo) !important;

  background: var(--face) !important;

  padding: 5px 6px 6px !important;

  gap: 5px !important;

  display: flex !important;

  flex: 0 0 auto !important;

  flex-shrink: 0 !important;

  align-items: center !important;

  min-height: 36px !important;

  width: 100% !important;

  box-sizing: border-box !important;

  visibility: visible !important;

  opacity: 1 !important;

  position: relative !important;

  z-index: 2 !important;

}

/* Do not hide site chat compose — only the whole panel toggles */

.chat-compose.hidden,

#chat-compose.hidden {

  display: flex !important;

}

.chat-compose.disabled {

  opacity: 0.85 !important;

}

.chat-compose .input,

#chat-input {

  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif !important;

  font-size: 12.5px !important;

  padding: 4px 6px !important;

  flex: 1 1 auto !important;

  min-width: 0 !important;

  width: auto !important;

  min-height: 26px !important;

  box-sizing: border-box !important;

  color: #000000 !important;

  background: #ffffff !important;

  /* sunken input field */

  border-top: 2px solid var(--lo) !important;

  border-left: 2px solid var(--lo) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  border-radius: 0 !important;

}

.chat-compose .input:focus,

#chat-input:focus {

  outline: 1px dotted #000080 !important;

  outline-offset: -3px !important;

  background: #ffffff !important;

}

#btn-chat-send {

  flex: 0 0 auto !important;

  white-space: nowrap !important;

  font-size: 11px !important;

  font-family: var(--font) !important;

  min-height: 26px !important;

  padding: 3px 10px !important;

}



.chat-embed {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  border: none !important;

  width: 100% !important;

  margin: 4px 4px 0 !important;

}



/* Dark site chat — still Win2k panel, high-contrast readable feed */

html.theme-dark body .chat-log {

  background: #0c1018 !important;

  color: #f2f4f8 !important;

  border-top-color: #000 !important;

  border-left-color: #000 !important;

  border-right-color: #3a4660 !important;

  border-bottom-color: #3a4660 !important;

}

html.theme-dark body .chat-line:nth-child(even) {

  background: #121822 !important;

}

html.theme-dark body .chat-line .u {

  color: #8eb6ff !important;

}

html.theme-dark body .chat-line .u::after {

  color: #8eb6ff !important;

}

html.theme-dark body .chat-line .t {

  color: #f2f4f8 !important;

}

html.theme-dark body #chat-input,

html.theme-dark body .chat-compose .input {

  background: #0c1018 !important;

  color: #f2f4f8 !important;

  border-top-color: #000 !important;

  border-left-color: #000 !important;

  border-right-color: #3a4660 !important;

  border-bottom-color: #3a4660 !important;

}



/* ── Sheets ───────────────────────────────────────────────── */

.sheet {

  margin-top: 10px !important;

  background: var(--face) !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  border-radius: 0 !important;

  padding: 8px !important;

  box-shadow: none !important;

}



.sheet-head {

  font-size: 11px !important;

  font-weight: bold !important;

  margin-bottom: 6px !important;

  color: #000 !important;

}



.sheet-list button {

  border-top: 1px solid var(--hi) !important;

  border-left: 1px solid var(--hi) !important;

  border-right: 1px solid var(--lo) !important;

  border-bottom: 1px solid var(--lo) !important;

  background: var(--face) !important;

  border-radius: 0 !important;

  color: #000 !important;

  font-size: 11px !important;

  padding: 6px 8px !important;

}



.sheet-list button:hover {

  background: var(--select) !important;

  color: #fff !important;

  border-color: var(--select) !important;

}



/* ── Content column ───────────────────────────────────────── */

.content-col {

  padding: 12px 14px 24px !important;

  background: var(--face) !important;

  overflow: auto;

}



.panel { animation: none !important; }



.panel-head {

  margin-bottom: 12px !important;

  gap: 10px !important;

  border-bottom: 1px solid var(--lo);

  padding-bottom: 8px;

}



.panel-head h2 {

  margin: 0 !important;

  font-size: 13px !important;

  font-weight: bold !important;

  letter-spacing: 0 !important;

  color: #000 !important;

  border: 0 !important;

  padding: 0 !important;

}



.lede, .panel-hint, .muted {

  color: var(--muted) !important;

  font-size: 11px !important;

}



.section-title {

  font-size: 11px !important;

  font-weight: bold !important;

  color: #000 !important;

  text-transform: none !important;

  letter-spacing: 0 !important;

  margin: 14px 0 8px !important;

  border-bottom: 1px solid var(--lo);

  padding-bottom: 2px;

}



/* ── Inputs (sunken white) ────────────────────────────────── */

.input {

  background: #fff !important;

  border-top: 2px solid var(--lo) !important;

  border-left: 2px solid var(--lo) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  border-radius: 0 !important;

  padding: 4px 6px !important;

  color: #000 !important;

  box-shadow: none !important;

  min-height: 22px;

}



.input:focus {

  outline: 1px dotted #000 !important;

  outline-offset: -4px;

  border-color: var(--lo) !important;

  box-shadow: none !important;

}



.field { color: #000 !important; font-size: 11px !important; }

.check { color: #000 !important; font-size: 11px !important; }



/* ── Segmented controls ───────────────────────────────────── */

.seg {

  gap: 2px !important;

  margin-bottom: 10px !important;

  padding: 3px !important;

  background: var(--face) !important;

  border-top: 2px solid var(--lo) !important;

  border-left: 2px solid var(--lo) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  border-radius: 0 !important;

}



.seg button {

  border: 0 !important;

  background: transparent !important;

  color: #000 !important;

  padding: 4px 10px !important;

  border-radius: 0 !important;

  font-size: 11px !important;

  font-weight: normal !important;

}



.seg button.on {

  background: var(--face) !important;

  color: #000 !important;

  border-top: 2px solid var(--dk) !important;

  border-left: 2px solid var(--dk) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  box-shadow: none !important;

  font-weight: bold !important;

}



/* ── Result cards ─────────────────────────────────────────── */

.results.list { gap: 5px !important; }



.card {

  background: #fff !important;

  background-image: none !important;

  border: 1px solid var(--lo) !important;

  border-radius: 0 !important;

  padding: 8px !important;

  box-shadow: none !important;

  transition: none !important;

  color: #000 !important;

  gap: 10px !important;

}



.card:hover {

  border: 1px solid var(--select) !important;

  background: var(--select) !important;

  color: #fff !important;

  box-shadow: none !important;

  transform: none !important;

}



.card:hover .meta,

.card:hover .title,

.card:hover .sub,

.card:hover .card-title,

.card:hover .result-title,

.card:hover .result-meta {

  color: #fff !important;

}



.card .title, .card-title, .result-title {

  color: #000 !important;

  font-weight: bold !important;

  font-size: 11px !important;

}



.card .meta, .card .sub, .result-meta {

  color: var(--muted) !important;

  font-size: 10px !important;

}



.grid, .results.grid { gap: 8px !important; }



.thumb, .card img, .poster {

  border-radius: 0 !important;

  border: 1px solid var(--lo) !important;

}



/* ── Filter rows ──────────────────────────────────────────── */

.filter-row, .row.gap, .head-actions {

  gap: 6px !important;

}

.filter-label {

  font-size: 12px;

  opacity: 0.85;

  white-space: nowrap;

  align-self: center;

}



/* ── Scrollbars ───────────────────────────────────────────── */

*::-webkit-scrollbar { width: 16px; height: 16px; }

*::-webkit-scrollbar-track {

  background: var(--face);

  border-left: 1px solid var(--lo);

}

*::-webkit-scrollbar-thumb {

  background: var(--face);

  border-top: 2px solid var(--hi);

  border-left: 2px solid var(--hi);

  border-right: 2px solid var(--dk);

  border-bottom: 2px solid var(--dk);

}

*::-webkit-scrollbar-button {

  background: var(--face);

  border-top: 2px solid var(--hi);

  border-left: 2px solid var(--hi);

  border-right: 2px solid var(--dk);

  border-bottom: 2px solid var(--dk);

  height: 16px;

  width: 16px;

}



/* ── Group box (shared Win2k frame) ──────────────────────── */

.groupbox {

  background: var(--face);

  border-top: 2px solid var(--hi);

  border-left: 2px solid var(--hi);

  border-right: 2px solid var(--dk);

  border-bottom: 2px solid var(--dk);

  padding: 10px 12px 12px;

  margin: 0 0 12px;

}

.groupbox-title {

  font-weight: bold;

  font-size: 11px;

  margin: 0 0 8px;

}



/* ── Profile pill (topbar) ───────────────────────────────── */

.profile-pill {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  cursor: pointer !important;

  max-width: min(200px, 40vw) !important;

  border: 1px solid transparent !important;

  background: inherit !important;

  font: inherit !important;

  color: inherit !important;

  padding: 2px 8px 2px 4px !important;

}

.profile-pill:hover {

  border-color: var(--select, #3a6ea5) !important;

  filter: brightness(1.05);

}

.pill-avatar {

  width: 18px !important;

  height: 18px !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  flex-shrink: 0 !important;

  background: #3a6ea5 !important;

}

.pill-emoji {

  font-size: 14px !important;

  line-height: 1 !important;

  flex-shrink: 0 !important;

  width: 18px !important;

  text-align: center !important;

}

.pill-emoji.hidden { display: none !important; }

#user-pill-name {

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;

}



/* ── Profile panel ───────────────────────────────────────── */

.profile-card .profile-hero {

  display: flex;

  align-items: center;

  gap: 14px;

  flex-wrap: wrap;

  margin-bottom: 12px;

}

.profile-avatar-wrap {

  position: relative;

  width: 88px;

  height: 88px;

  flex-shrink: 0;

}

.profile-avatar-img,

.profile-avatar-emoji {

  width: 88px !important;

  height: 88px !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  display: block !important;

  border: 2px solid #3a6ea5 !important;

  box-shadow: 0 2px 6px rgba(0,0,0,0.15);

}

.profile-avatar-emoji {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: linear-gradient(145deg, #2a3348, #1a2030) !important;

  font-size: 42px !important;

  line-height: 1 !important;

  user-select: none !important;

}

.profile-avatar-img.hidden,

.profile-avatar-emoji.hidden {

  display: none !important;

}

.profile-gif-search-row {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 6px !important;

  align-items: center !important;

  margin: 6px 0 !important;

}

.profile-gif-search-row .input {

  flex: 1 1 160px !important;

  min-width: 0 !important;

}

.profile-gif-results {

  display: grid !important;

  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)) !important;

  gap: 6px !important;

  margin-top: 8px !important;

  max-height: 220px !important;

  overflow-y: auto !important;

  padding: 2px !important;

}

.profile-gif-tile {

  display: block !important;

  padding: 0 !important;

  margin: 0 !important;

  border: 1px solid #c5c0b6 !important;

  border-radius: 6px !important;

  overflow: hidden !important;

  background: #111 !important;

  cursor: pointer !important;

  aspect-ratio: 1 !important;

  box-shadow: none !important;

}

.profile-gif-tile:hover {

  border-color: #3a6ea5 !important;

  outline: 2px solid #3a6ea5 !important;

}

.profile-gif-tile img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

}

.profile-gif-empty {

  grid-column: 1 / -1 !important;

  padding: 12px !important;

  text-align: center !important;

  font-size: 11px !important;

}



/* Chat GIF picker (above compose) */

.chat-gif-picker {

  border: 1px solid var(--lo, #c8c4bc);

  background: #f7f6f2;

  padding: 8px;

  margin: 0 0 6px;

  border-radius: 4px;

}

.chat-gif-picker-row {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  align-items: center;

  margin-bottom: 6px;

}

.chat-gif-picker-row .input {

  flex: 1 1 140px;

  min-width: 0;

}

.chat-gif-results {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));

  gap: 6px;

  max-height: 180px;

  overflow-y: auto;

}

.chat-gif-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  margin: 0 0 8px;

}

.chat-gif-chips .admin-chip {

  font-size: 10px !important;

  padding: 3px 8px !important;

}

.peer-chat-compose {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 6px !important;

}

.chat-gif {

  display: block !important;

  max-width: min(220px, 70vw) !important;

  max-height: 160px !important;

  width: auto !important;

  height: auto !important;

  border-radius: 6px !important;

  margin-top: 4px !important;

  border: 1px solid rgba(0,0,0,0.12) !important;

  object-fit: contain !important;

  background: #111 !important;

}

.chat-music {

  margin-top: 4px !important;

  max-width: min(280px, 80vw) !important;

}

.chat-music-label {

  display: block !important;

  font-size: 11px !important;

  margin-bottom: 4px !important;

  opacity: 0.9 !important;

  word-break: break-word !important;

}

.chat-music-audio {

  width: 100% !important;

  max-width: 280px !important;

  height: 32px !important;

}

.peer-chat-line.gif-line .pc-body,

.mn-chat-line.gif-line .pc-body {

  margin-top: 4px !important;

}

html.theme-dark body .chat-gif-picker {

  background: #1a2030 !important;

  border-color: rgba(255,255,255,0.12) !important;

}

.profile-hero-name {

  font-size: 16px;

  font-weight: 700;

  word-break: break-word;

}

.profile-hero-user {

  font-size: 12px;

  margin-top: 2px;

}

.profile-avatar-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 6px;

}

.profile-upload-btn {

  cursor: pointer !important;

  display: inline-flex !important;

  align-items: center !important;

}



html.theme-dark body .profile-avatar-emoji {

  border-color: #5b8fc7 !important;

  background: linear-gradient(145deg, #2a3348, #151a26) !important;

}

html.theme-dark body .profile-avatar-img {

  border-color: #5b8fc7 !important;

}

html.theme-dark body .profile-gif-tile {

  border-color: rgba(255,255,255,0.12) !important;

}

html.theme-dark body .profile-pill:hover {

  border-color: #5b8fc7 !important;

}



/* Chat avatars */

.peer-chat-line,

.mn-chat-line {

  display: flex !important;

  align-items: flex-start !important;

  gap: 8px !important;

}

.chat-avatar {

  width: 28px !important;

  height: 28px !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  flex-shrink: 0 !important;

  margin-top: 2px !important;

  background: #e8e4dc !important;

  border: 1px solid rgba(0,0,0,0.12) !important;

}

.chat-avatar-emoji {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 16px !important;

  line-height: 1 !important;

  background: #f0ece4 !important;

  border: 1px solid rgba(0,0,0,0.1) !important;

  user-select: none !important;

}

html.theme-dark body .chat-avatar {

  background: #1e2638 !important;

  border-color: rgba(255,255,255,0.1) !important;

}

html.theme-dark body .chat-avatar-emoji {

  background: #1e2638 !important;

  border-color: rgba(255,255,255,0.08) !important;

}

.chat-avatar.hidden {

  display: none !important;

}

.peer-chat-line .pc-main,

.mn-chat-line .pc-main {

  flex: 1 1 auto !important;

  min-width: 0 !important;

}

.peer-chat-line .pc-head,

.mn-chat-line .pc-head {

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  flex-wrap: wrap !important;

}



/* ── Peer Chat (light mode — soft paper, easy on the eyes) ─ */

#panel-chat .room-code-display {

  background: #0a246a;

  color: #fff8d0;

  border: 2px solid;

  border-color: #808080 #fff #fff #808080;

  font-family: "Fixedsys", "Consolas", monospace;

  font-size: 26px;

}



/* Movie Night chat feed */

#panel-chat .peer-chat-log,

.peer-chat-log {

  background: #faf9f6 !important;

  color: #111111 !important;

  border-top: 2px solid var(--lo) !important;

  border-left: 2px solid var(--lo) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif !important;

  font-size: 13px !important;

  line-height: 1.5 !important;

  padding: 8px 10px !important;

  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);

  -webkit-font-smoothing: antialiased !important;

}



.peer-chat-line {

  margin: 0 0 5px !important;

  padding: 4px 6px 5px !important;

  border-radius: 0 !important;

  background: transparent !important;

  border-bottom: 1px solid #e2dfd6 !important;

  line-height: 1.5 !important;

  word-break: break-word !important;

  font-size: 13px !important;

}

.peer-chat-line:last-child {

  border-bottom: none !important;

}

.peer-chat-line:hover {

  background: rgba(255, 255, 255, 0.8) !important;

}



/* Name + time + TTS play header row */

.peer-chat-line .pc-head {

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  flex-wrap: wrap !important;

  margin-bottom: 1px !important;

}

.peer-chat-line .pc-who {

  color: #0a3d8f !important;

  font-weight: bold !important;

  font-size: 12.5px !important;

}

.peer-chat-line .pc-who.role-admin { color: #a01818 !important; }

.peer-chat-line .pc-who.role-mod { color: #1a3a8a !important; }

.peer-chat-line .pc-who.role-host { color: #1a6b2a !important; }

.peer-chat-line .pc-house {

  color: #7a5a10 !important;

  font-size: 11px !important;

  margin-left: 4px !important;

}

.peer-chat-line .pc-time {

  color: #777777 !important;

  font-size: 11px !important;

  margin-left: 2px !important;

  font-weight: normal !important;

}

.peer-chat-line .tts-play-btn {

  margin-left: auto !important;

  padding: 0 7px !important;

  min-width: 28px !important;

  font-size: 11px !important;

  line-height: 1.2 !important;

  opacity: 0.7;

}

.peer-chat-line:hover .tts-play-btn,

.peer-chat-line .tts-play-btn:focus {

  opacity: 1;

}

/* Message body text */

.peer-chat-line .pc-body,

.peer-chat-line > div.pc-body {

  color: #111111 !important;

  margin-top: 2px !important;

  font-size: 13px !important;

  line-height: 1.5 !important;

  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif !important;

  font-weight: normal !important;

}

.peer-chat-line.muted,

.peer-chat-line .muted {

  color: #6a6a6a !important;

  font-style: italic !important;

}



/* Compose row */

.peer-chat-compose {

  display: flex !important;

  gap: 6px !important;

  align-items: center !important;

  padding: 2px 0 0 !important;

  margin-top: 2px !important;

}

.peer-chat-compose .input,

#peer-chat-input {

  background: #fff !important;

  color: #1a1a1a !important;

  border-top: 2px solid var(--lo) !important;

  border-left: 2px solid var(--lo) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  padding: 5px 8px !important;

  font-size: 13px !important;

  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif !important;

}

.peer-chat-compose .input:focus,

#peer-chat-input:focus {

  outline: 1px solid #0a246a !important;

  outline-offset: 0 !important;

  background: #fffef8 !important;

}



/* Combined chat + TTS (checkbox shows options) */

.chat-tts-check {

  display: inline-flex !important;

  align-items: center !important;

  gap: 4px !important;

  font-size: 11px !important;

  white-space: nowrap !important;

  margin: 0 !important;

  user-select: none !important;

  cursor: pointer !important;

}

.tts-options {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 6px 10px !important;

  margin: 4px 0 0 !important;

  padding: 6px 8px !important;

  border: 1px solid #c8c4bc !important;

  background: #f3f0e8 !important;

  border-radius: 4px !important;

}

.tts-options.hidden {

  display: none !important;

}

.tts-options .tts-hint,

.tts-options #music-hint {

  flex: 1 1 100% !important;

  margin: 0 !important;

  font-size: 10px !important;

}

/* When Music is selected inside TTS panel, hide speech voice controls */

.tts-options.music-mode .tts-voice,

.tts-options.music-mode label.tts-rate-label:not(.music-len-label),

.tts-options.music-mode #tts-status {

  display: none !important;

}

.tts-options .music-len-label.hidden,

.tts-options #music-status.hidden,

.tts-options #music-hint.hidden {

  display: none !important;

}

.tts-status {

  font-size: 10px !important;

  min-width: 3em;

}

.tts-voice {

  max-width: min(280px, 55vw) !important;

  min-width: 140px !important;

  font-size: 11px !important;

  padding: 2px 4px !important;

  flex: 1 1 160px !important;

}

.tts-rate-label {

  display: inline-flex !important;

  align-items: center !important;

  gap: 4px !important;

  font-size: 10px !important;

  white-space: nowrap !important;

}

.tts-rate-label input[type="range"] {

  width: 70px !important;

  vertical-align: middle !important;

}

.tts-val {

  min-width: 2.6em !important;

  font-variant-numeric: tabular-nums !important;

  font-size: 10px !important;

  opacity: 0.9 !important;

}

.tts-hint {

  margin: 0 !important;

  font-size: 10px !important;

}

.peer-chat-line.tts-line,

.mn-chat-line.tts-line {

  border-left: 3px solid #3a6ea5 !important;

  background: rgba(58, 110, 165, 0.08) !important;

  padding-left: 8px !important;

}

.badge.tts-badge {

  font-size: 9px !important;

  padding: 1px 5px !important;

  margin-left: 4px !important;

  background: #3a6ea5 !important;

  color: #fff !important;

  vertical-align: middle !important;

}

html.theme-dark body .peer-chat-line.tts-line,

html.theme-dark body .mn-chat-line.tts-line {

  background: rgba(90, 150, 220, 0.12) !important;

  border-left-color: #6aa8e8 !important;

}

html.theme-dark body .tts-options {

  background: rgba(0, 0, 0, 0.28) !important;

  border-color: rgba(255, 255, 255, 0.1) !important;

}

html.theme-dark body .chat-tts-check {

  color: #e8e6e0 !important;

}



/* Voice bar — quieter strip above chat */

#panel-chat .voice-bar,

.voice-bar {

  background: #ebe8e0 !important;

  border: 1px solid #c8c4bc !important;

  padding: 6px 8px !important;

  margin: 0 0 8px !important;

}

#panel-chat .voice-title,

.voice-title {

  color: #222 !important;

  font-size: 11px !important;

}

#panel-chat .voice-status,

.voice-status {

  color: #555 !important;

  font-size: 10px !important;

}

#panel-chat .voice-peers,

.voice-peers {

  background: #f3f1eb !important;

  border: 1px solid #d4d0c8 !important;

  max-height: 72px;

  overflow: auto;

}

.voice-peer-row {

  color: #222 !important;

  padding: 2px 4px !important;

}

.voice-peer-row.me { background: rgba(10, 36, 106, 0.06) !important; }



/* ── Movie Night ─────────────────────────────────────────── */

#panel-movienight .mn-chat-log {

  background: #f7f6f2 !important;

  color: #1c1c1c !important;

  border-top: 2px solid var(--lo) !important;

  border-left: 2px solid var(--lo) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

  font-family: var(--font) !important;

  font-size: 11px !important;

  line-height: 1.35 !important;

}

#panel-movienight .mn-chat-line,

#panel-movienight .mn-chat-line .pc-body,

#panel-movienight .mn-chat-line .mn-body {

  font-size: 11px !important;

  line-height: 1.35 !important;

  font-family: var(--font) !important;

}

#panel-movienight .mn-chat-line .mn-who { color: #0a3d8f !important; font-weight: bold; font-size: 11px !important; }

#mn-chat-input {

  font-size: 11px !important;

  font-family: var(--font) !important;

}

#panel-movienight .poster-card.mn-voted {

  outline: 1px solid #0a246a;

}



/* ── Audio tab (radio + mp3) — full content width, no video column ─ */

body.mp3-mode .player-col {

  display: none !important;

}

body.mp3-mode .workspace {

  grid-template-columns: 1fr !important;

}

#panel-audio .audio-section {

  margin-bottom: 4px;

}



#panel-mp3 .groupbox {

  background: var(--face);

  border-top: 2px solid var(--hi);

  border-left: 2px solid var(--hi);

  border-right: 2px solid var(--dk);

  border-bottom: 2px solid var(--dk);

  padding: 10px 12px 12px;

  margin: 0 0 12px;

}



#panel-mp3 .groupbox-title {

  font-weight: bold;

  font-size: 11px;

  margin: 0 0 8px;

}



#panel-mp3 .mp3-now-row {

  display: flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: 8px 14px;

  font-size: 11px;

  margin-bottom: 6px;

}



#panel-mp3 .mp3-now-row #mp3-now {

  font-weight: bold;

  flex: 1 1 160px;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



#panel-mp3 .mp3-dl-track {

  height: 14px;

  background: #fff;

  border-top: 2px solid var(--lo);

  border-left: 2px solid var(--lo);

  border-right: 2px solid var(--hi);

  border-bottom: 2px solid var(--hi);

  margin-bottom: 8px;

  position: relative;

}



#panel-mp3 .mp3-dl-fill {

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  width: 0%;

  background: #000080;

  transition: width 0.2s linear;

}



#panel-mp3 .mp3-audio {

  width: 100%;

  height: 36px;

  margin-bottom: 8px;

  display: block;

}



#panel-mp3 .mp3-actions {

  flex-wrap: wrap;

  align-items: center;

}



/* MP3 section lives under Audio tab (#panel-audio) — only hide when audio panel is off */

#panel-audio:not(.active) #panel-mp3,

#panel-audio[hidden] #panel-mp3 {

  display: none !important;

}

#panel-audio.active #panel-mp3 {

  display: block !important;

  visibility: visible !important;

  position: relative !important;

}



/* ── Responsive ───────────────────────────────────────────── */

html, body {

  /* clip keeps sticky chrome working; hidden can break position:sticky */

  overflow-x: clip !important;

  max-width: 100vw !important;

}



img, video, iframe, canvas {

  max-width: 100% !important;

}



#app,

#app > .app-sticky-chrome,

#app > .topbar,

#app > .main-tabs,

#app > .workspace {

  max-width: 100% !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



/* Desktop: chrome sticks as one block too (title + tabs always visible) */

.app-sticky-chrome {

  position: sticky;

  top: 0;

  z-index: 50;

  background: var(--face);

}



@media (max-width: 900px) {

  html, body {

    /* clip not hidden — overflow:hidden on ancestors breaks position:sticky */

    overflow-x: clip !important;

    width: 100% !important;

    max-width: 100vw !important;

  }



  #app {

    padding: 0 !important;

    padding-bottom: env(safe-area-inset-bottom, 0) !important;

    min-height: 100dvh !important;

    width: 100% !important;

    max-width: 100vw !important;

    overflow-x: clip !important;

    overflow-y: visible !important;

  }



  #app > .app-sticky-chrome,

  #app > .topbar,

  #app > .main-tabs,

  #app > .workspace {

    max-width: 100% !important;

    width: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

  }



  /* Title bar + tab strip stay fixed under the notch while page scrolls */

  .app-sticky-chrome {

    position: sticky !important;

    top: 0 !important;

    z-index: 300 !important;

    width: 100% !important;

    max-width: 100% !important;

    background: var(--face) !important;

    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12) !important;

    /* stay above player / lists */

  }



  .topbar {

    position: relative !important;

    top: auto !important;

    z-index: 2 !important;

    padding: 4px 6px !important;

    padding-top: max(4px, env(safe-area-inset-top, 0px)) !important;

    gap: 6px !important;

    /* Brand + actions first; tabs full-width second row when tight */

    flex-wrap: wrap !important;

  }



  .brand {

    order: 1 !important;

  }

  .topbar-right {

    order: 2 !important;

    flex-wrap: wrap !important;

    justify-content: flex-end !important;

    gap: 3px !important;

    margin-left: auto !important;

  }

  .brand-text h1 {

    font-size: 11px !important;

  }



  .pill {

    padding: 2px 5px !important;

    font-size: 9px !important;

  }



  /* Tabs share top row when space allows; otherwise full second row */

  .topbar .main-tabs,

  .main-tabs {

    order: 3 !important;

    display: flex !important;

    flex-wrap: nowrap !important;

    flex: 1 1 100% !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    gap: 2px !important;

    padding: 2px 0 0 !important;

    margin: 0 !important;

    border: none !important;

    background: transparent !important;

    position: relative !important;

  }



  .main-tabs button {

    flex: 0 0 auto !important;

    min-width: 0 !important;

    padding: 4px 8px !important;

    font-size: 10px !important;

    white-space: nowrap !important;

    text-align: center !important;

  }



  .workspace {

    display: flex !important;

    flex-direction: column !important;

    grid-template-columns: 1fr !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow-x: hidden !important;

    box-shadow: none !important;

    gap: 0 !important;

  }



  /* Mobile: video then chat — player flush to screen edges */

  .player-col {

    padding: 0 !important;

    border-bottom: none !important;

  }

  .content-col {

    padding: 2px 6px 10px !important;

  }

  #panel-chat .chat-mn-layout {

    display: flex !important;

    flex-direction: column !important;

    grid-template-columns: 1fr !important;

    gap: 8px !important;

  }

  #panel-chat .chat-mn-layout .peer-side.mn-side,

  #panel-chat .chat-mn-layout .peer-side {

    max-width: 100% !important;

    width: 100% !important;

    order: 2 !important;

    flex: 1 1 auto !important;

  }

  #panel-chat .chat-mn-layout .peer-main {

    order: 1 !important;

    flex: 0 1 auto !important;

  }

  #panel-chat .peer-chat-log {

    min-height: 120px !important;

    max-height: 34vh !important;

  }

  #panel-chat .mn-browse {

    overflow: visible !important;

  }

  #panel-chat .mn-section {

    padding: 8px 0 !important;

  }

  #panel-chat #mn-search-results.has-items,

  #panel-chat #mn-queue.has-items {

    padding: 6px 8px 12px !important;

    gap: 10px !important;

  }

  #panel-chat #mn-search-results .mh-card,

  #panel-chat #mn-search-results .mn-result-card {

    width: 118px !important;

  }

  #panel-chat #mn-search-results .mh-card-img,

  #panel-chat #mn-search-results .poster-img {

    width: 118px !important;

    height: 177px !important;

  }

  .mn-vote-card {

    width: 132px !important;

  }

  .mn-vote-poster {

    width: 132px !important;

    height: 198px !important;

  }

  .mn-now.mn-now-hero {

    min-height: 96px !important;

  }

  .mn-now-poster {

    width: 64px !important;

    height: 96px !important;

    flex-basis: 64px !important;

  }

  .chat-panel {

    margin-top: 4px !important;

  }



  .player-col {

    border-right: 0 !important;

    border-bottom: 1px solid var(--lo) !important;

    padding: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

  }



  .player-card {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    border-radius: 0 !important;

    border-left: none !important;

    border-right: none !important;

    box-sizing: border-box !important;

  }



  .player-bevel {

    padding: 0 !important;

    border: none !important;

    border-radius: 0 !important;

  }



  #player-wrap {

    width: 100% !important;

    max-width: 100% !important;

    /* Full screen width → max 16:9 height (no artificial vh cap) */

    max-height: none !important;

    height: auto !important;

    aspect-ratio: 16 / 9 !important;

    border-radius: 0 !important;

  }



  #player,

  #embed-frame {

    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

  }



  .player-info {

    padding: 8px 12px 4px !important;

  }

  .player-toolbar {

    padding-left: 12px !important;

    padding-right: 12px !important;

  }



  .now-title {

    font-size: 11px !important;

    word-break: break-word !important;

  }



  .now-sub {

    font-size: 9px !important;

    word-break: break-word !important;

  }



  .player-toolbar {

    padding: 6px !important;

    gap: 4px !important;

  }



  .player-toolbar .tool,

  .player-toolbar .btn {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    padding: 6px 4px !important;

    font-size: 10px !important;

  }



  .chat-panel {

    max-height: min(40vh, 300px) !important;

    height: min(40vh, 300px) !important;

    min-height: 200px !important;

    width: 100% !important;

  }

  .chat-compose,

  #chat-compose {

    display: flex !important;

    min-height: 36px !important;

  }



  .content-col {

    padding: 6px !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow-x: hidden !important;

    box-sizing: border-box !important;

  }



  .panel {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

  }



  .panel-head {

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 4px !important;

    padding: 4px 2px !important;

  }



  .panel-head h2 {

    font-size: 12px !important;

  }



  .head-actions,

  .filter-row {

    display: flex !important;

    flex-wrap: wrap !important;

    width: 100% !important;

    max-width: 100% !important;

    gap: 4px !important;

    margin-bottom: 6px !important;

  }



  .head-actions > *,

  .filter-row > * {

    max-width: 100% !important;

    box-sizing: border-box !important;

  }



  .input,

  select.input,

  input.input,

  textarea.input {

    max-width: 100% !important;

    min-width: 0 !important;

    width: auto !important;

    box-sizing: border-box !important;

  }



  .input.grow {

    flex: 1 1 100% !important;

    min-width: 0 !important;

    width: 100% !important;

  }



  .btn, .tool {

    max-width: 100% !important;

  }



  /* Stack two-column layouts */

  .peer-layout,

  .mn-layout,

  .library-layout {

    display: flex !important;

    flex-direction: column !important;

    grid-template-columns: 1fr !important;

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

  }



  .peer-main,

  .peer-side,

  .mn-main,

  .mn-chat {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

  }



  .peer-chat-log,

  .mn-chat-log {

    max-height: 40vh !important;

  }



  .folder-rail {

    flex-direction: row !important;

    flex-wrap: wrap !important;

    overflow-x: hidden !important;

    max-height: none !important;

    width: 100% !important;

  }



  .folder-rail button {

    white-space: nowrap !important;

  }



  .results.list,

  .results.poster-grid {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

  }



  .results.poster-grid {

    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;

    gap: 6px !important;

  }



  .card {

    max-width: 100% !important;

    min-width: 0 !important;

  }



  .card .title,

  .card .sub {

    word-break: break-word !important;

    overflow-wrap: anywhere !important;

  }



  .yt-modes.seg,

  .sub-tabs {

    display: flex !important;

    flex-wrap: wrap !important;

    overflow-x: hidden !important;

    width: 100% !important;

    max-width: 100% !important;

    gap: 2px !important;

  }



  .yt-modes.seg button,

  .sub-tabs button {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    font-size: 10px !important;

    padding: 5px 6px !important;

  }



  .groupbox {

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }



  .mp3-audio,

  audio {

    width: 100% !important;

    max-width: 100% !important;

  }



  .mp3-now-row {

    flex-wrap: wrap !important;

    gap: 4px !important;

  }



  .mp3-actions {

    flex-wrap: wrap !important;

  }



  .sheet {

    max-width: 100% !important;

    left: 0 !important;

    right: 0 !important;

  }



  #toast {

    max-width: calc(100vw - 16px) !important;

    left: 8px !important;

    right: 8px !important;

    margin: 0 auto !important;

  }



  .auth-body {

    padding: 12px !important;

    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;

  }



  .auth-card {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

  }

}



/* Phones in portrait */

@media (max-width: 480px) {

  .main-tabs button {

    font-size: 9px !important;

    padding: 5px 4px 6px !important;

  }



  #player-wrap {

    max-height: min(32vh, 220px) !important;

  }



  .player-toolbar .tool {

    font-size: 9px !important;

    padding: 7px 3px !important;

  }



  .results.poster-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

  }



  .content-col {

    padding: 4px !important;

  }

}



@keyframes fadein {

  from { opacity: 1; transform: none; }

  to { opacity: 1; transform: none; }

}



/* ── Clean professional chrome (no tutorial clutter) ─────── */

.lede,

.panel-hint,

.empty-hint,

.mn-chat-hint,

.storage-meter {

  display: none !important;

}



/* Keep dynamic status nodes if they gain content via toast path — hide empty */

.panel-hint:not(:empty):not(.hidden) {

  display: none !important;

}



.panel-head {

  padding: 6px 8px !important;

  margin-bottom: 6px !important;

  border-bottom: 1px solid var(--lo) !important;

  align-items: center !important;

  gap: 8px !important;

}



.panel-head h2 {

  margin: 0 !important;

  font-size: 12px !important;

  font-weight: bold !important;

  color: #000 !important;

  letter-spacing: 0 !important;

}



.panel-head .lede { display: none !important; }



.section-title {

  font-size: 11px !important;

  font-weight: bold !important;

  margin: 8px 0 4px !important;

  color: #000 !important;

  border: none !important;

  padding: 0 !important;

  background: transparent !important;

}



.content-col {

  padding: 8px 10px !important;

  background: var(--face) !important;

}



.groupbox {

  margin-bottom: 8px !important;

}



.groupbox-title {

  font-size: 11px !important;

  font-weight: bold !important;

}



.filter-row,

.head-actions {

  gap: 5px !important;

  margin-bottom: 6px !important;

}



.voice-bar {

  padding: 6px !important;

  margin-bottom: 6px !important;

  border-bottom: 1px solid var(--lo);

}



.voice-title { font-size: 11px !important; }

.voice-status { font-size: 10px !important; color: var(--muted) !important; }



.settings-box {

  padding: 8px 10px 10px !important;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.status-box {

  margin: 0 !important;

  padding: 6px !important;

  font-size: 10px !important;

  max-height: 160px;

  overflow: auto;

  background: #fff !important;

  border-top: 2px solid var(--lo) !important;

  border-left: 2px solid var(--lo) !important;

  border-right: 2px solid var(--hi) !important;

  border-bottom: 2px solid var(--hi) !important;

}



.chat-auth-list {

  margin: 6px 0 !important;

  display: flex;

  flex-direction: column;

  gap: 6px;

}

.chat-auth-card {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 8px;

  flex-wrap: wrap;

  padding: 8px 10px;

  border: 1px solid var(--lo, #808080);

  background: var(--face, #c0c0c0);

}

.chat-auth-card .meta {

  flex: 1 1 140px;

  min-width: 0;

}

.chat-auth-card-actions {

  flex: 0 0 auto;

}

.chat-auth-advanced {

  margin-top: 8px;

  padding: 4px 0;

}

.chat-auth-toolbar {

  align-items: center;

}

.chat-auth-connect {

  margin-top: 10px;

  padding: 10px;

  border: 2px solid var(--hi, #fff);

  border-right-color: var(--lo, #808080);

  border-bottom-color: var(--lo, #808080);

  background: var(--face, #c0c0c0);

}

.chat-auth-connect-inner .sheet-head {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 6px;

}

.chat-auth-steps {

  margin: 6px 0 6px 1.2em;

  padding: 0;

  line-height: 1.45;

}

.chat-auth-steps li {

  margin: 4px 0;

}



/* External chat history vs live */

.chat-line.chat-hist {

  opacity: 0.88;

}

.chat-line.chat-sep {

  text-align: center;

  opacity: 0.55;

  font-size: 0.85em;

  margin: 4px 0;

  justify-content: center;

}

.chat-line.chat-sep .t {

  width: 100%;

  text-align: center;

}



/* OAuth Connect buttons */

.oauth-btn.oauth-twitch {

  background: #9146ff !important;

  color: #fff !important;

  border-color: #772ce8 !important;

}

.oauth-btn.oauth-kick {

  background: #53fc18 !important;

  color: #0a0a0a !important;

  border-color: #3dbe10 !important;

  font-weight: 700;

}

.oauth-btn.oauth-youtube {

  background: #ff0000 !important;

  color: #fff !important;

  border-color: #cc0000 !important;

}

.oauth-btn.oauth-rumble {

  background: #85c742 !important;

  color: #0a0a0a !important;

  border-color: #6a9e34 !important;

  font-weight: 700;

}

#chat-auth-connect-status {

  white-space: pre-wrap;

  line-height: 1.4;

}

.chat-auth-card.is-linked {

  border-color: #2e7d32;

}

.pill.oauth-pill {

  background: #1a237e;

  color: #c5cae9;

  font-size: 0.7rem;

}

html.theme-dark .pill.oauth-pill {

  background: #283593;

  color: #e8eaf6;

}

.admin-oauth-fields .oauth-admin-row {

  display: grid;

  grid-template-columns: 90px 1fr 1fr;

  gap: 8px;

  align-items: end;

  margin-bottom: 8px;

}

@media (max-width: 700px) {

  .admin-oauth-fields .oauth-admin-row {

    grid-template-columns: 1fr;

  }

}



/* Tighter results empty state */

.results .empty,

.empty {

  color: var(--muted) !important;

  font-style: normal !important;

  padding: 16px 8px !important;

}



/* Outer frame: single window on desktop */

#app {

  padding: 10px !important;

}



#app > .topbar,

#app .app-sticky-chrome > .topbar {

  border-bottom: none !important;

}



#app > .main-tabs,

#app .app-sticky-chrome > .main-tabs,

#app .topbar > .main-tabs {

  border-top: none !important;

  border-bottom: none !important;

}



html.theme-dark body .app-sticky-chrome {

  background: var(--face) !important;

}



/* Voice roster (Movie Night tab) */

.voice-peers {

  display: flex;

  flex-direction: column;

  gap: 3px;

  max-height: 140px;

  overflow-y: auto;

  margin-top: 4px;

}

.voice-peer-row {

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 3px 4px;

  background: var(--face);

  border-top: 1px solid var(--hi);

  border-left: 1px solid var(--hi);

  border-right: 1px solid var(--lo);

  border-bottom: 1px solid var(--lo);

}

.voice-peer-row.me { font-weight: bold; }

.voice-peer-row.muted .voice-peer-name { color: var(--muted); }

.voice-peer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.voice-peer-flags { font-size: 10px; }

.voice-https-hint { font-size: 10px; margin-left: 6px; }

/* ── Movie Night side panel ── */

#panel-chat .mn-search-section:not(.has-results) {

  display: none !important;

}

.mn-chrome {

  flex: 0 0 auto !important;

  padding: 8px 10px 8px !important;

  border-bottom: 1px solid var(--lo) !important;

  background: var(--face) !important;

  z-index: 3 !important;

}

.mn-chrome-top {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 8px !important;

  margin-bottom: 6px !important;

}

.mn-side-title {

  margin: 0 !important;

  font-size: 13px !important;

  font-weight: bold !important;

  letter-spacing: 0.02em !important;

}

.mn-now.mn-now-hero {

  display: flex !important;

  align-items: stretch !important;

  gap: 10px !important;

  margin: 0 0 8px !important;

  padding: 8px !important;

  min-height: 0 !important;

  position: relative !important;

  overflow: hidden !important;

  /* Light mode default — face chrome, not a black slab */

  background: var(--face) !important;

  color: var(--text) !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

}

.mn-now.mn-now-hero.hidden {

  display: none !important;

}

.mn-now-poster {

  flex: 0 0 56px !important;

  width: 56px !important;

  min-width: 56px !important;

  height: 84px !important;

  min-height: 84px !important;

  background-color: #c8c4bc !important;

  background-image: linear-gradient(145deg, #e0dcd4, #b8b4ac) !important;

  background-size: cover !important;

  background-position: center !important;

  background-repeat: no-repeat !important;

  border: 1px solid var(--dk) !important;

  overflow: hidden !important;

  position: relative !important;

  z-index: 1 !important;

}

.mn-now-poster.has-img {

  background-image: none !important;

  background-color: #2a2a2a !important;

}

.mn-now-poster img {

  width: 56px !important;

  height: 84px !important;

  max-width: none !important;

  object-fit: cover !important;

  display: block !important;

  border: 0 !important;

  position: absolute !important;

  inset: 0 !important;

}

.mn-now-body {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: center !important;

  gap: 2px !important;

  z-index: 1 !important;

}

.mn-now-kicker {

  font-size: 9px !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

  color: var(--muted) !important;

}

.mn-now-title {

  font-size: 12px !important;

  font-weight: bold !important;

  line-height: 1.2 !important;

  color: var(--text) !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 2 !important;

  -webkit-box-orient: vertical !important;

}

.mn-now-meta {

  font-size: 10px !important;

  line-height: 1.3 !important;

  color: var(--muted) !important;

}

.mn-now .mn-status-big {

  position: absolute !important;

  right: 6px !important;

  top: 6px !important;

  font-size: 9px !important;

  font-weight: bold !important;

  letter-spacing: 0.06em !important;

  padding: 2px 5px !important;

  background: var(--select) !important;

  border: 1px solid var(--dk) !important;

  color: var(--select-text) !important;

}

.mn-controls-row,

.mn-search-row,

.mn-tv-pick {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: 4px !important;

  margin: 0 0 6px !important;

}

.mn-search-row #mn-type {

  width: auto !important;

  min-width: 72px !important;

  max-width: 90px !important;

}

#mn-search-status {

  display: block !important;

  margin: 0 !important;

  font-size: 10px !important;

  color: var(--muted) !important;

  line-height: 1.3 !important;

}

.mn-section {

  flex: 0 0 auto !important;

  min-width: 0 !important;

  min-height: 0 !important;

  padding: 6px 0 0 !important;

  border-bottom: 1px solid var(--line-soft, rgba(128, 128, 128, 0.22)) !important;

}

.mn-queue-section {

  flex: 1 1 auto !important;

  display: flex !important;

  flex-direction: column !important;

  border-bottom: none !important;

  min-height: 0 !important;

}

.mn-section .mh-row-head {

  flex: 0 0 auto !important;

  padding: 0 10px 4px !important;

}

.mn-section .mh-row-title {

  font-size: 11px !important;

  letter-spacing: 0.03em !important;

  text-transform: uppercase !important;

  color: var(--muted) !important;

}

#panel-chat #mn-search-results:not(.has-items),

#panel-chat #mn-queue:not(.has-items) {

  display: block !important;

  min-height: 40px !important;

  padding: 8px 12px !important;

}

#panel-chat #mn-search-results .empty-state,

#panel-chat #mn-search-results .error-state,

#panel-chat #mn-queue .empty-state,

#panel-chat #mn-queue .error-state {

  padding: 12px 4px !important;

  color: var(--muted) !important;

  font-size: 11px !important;

  text-align: center !important;

}

.mn-result-hint {

  font-size: 9px !important;

  color: var(--muted) !important;

  margin-top: 1px !important;

}

/* Vote / search cards (shared) */

.mn-vote-card {

  min-width: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  gap: 3px !important;

}

.mn-vote-poster {

  position: relative !important;

  width: 100% !important;

  aspect-ratio: 2 / 3 !important;

  height: auto !important;

  overflow: hidden !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  background: #1a1c22 !important;

}

.mn-vote-poster .mh-card-img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

  border: none !important;

}

.mn-vote-score {

  position: absolute !important;

  left: 4px !important;

  top: 4px !important;

  z-index: 2 !important;

  font-size: 10px !important;

  font-weight: bold !important;

  padding: 2px 5px !important;

  background: rgba(0, 0, 0, 0.72) !important;

  color: #ffe29a !important;

  border: 1px solid rgba(255, 220, 120, 0.35) !important;

  line-height: 1.2 !important;

}

.mn-vote-kind {

  position: absolute !important;

  right: 4px !important;

  top: 4px !important;

  z-index: 2 !important;

  font-size: 9px !important;

}

.mn-vote-title {

  font-size: 11px !important;

  font-weight: bold !important;

  line-height: 1.25 !important;

  max-height: 2.5em !important;

  overflow: hidden !important;

  color: var(--text) !important;

}

.mn-vote-sub {

  font-size: 9px !important;

  color: var(--muted) !important;

  line-height: 1.2 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}

.mn-vote-actions {

  display: flex !important;

  flex-wrap: nowrap !important;

  gap: 3px !important;

  margin-top: 1px !important;

}

.mn-vote-actions .btn {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  padding: 2px 4px !important;

  font-size: 10px !important;

}

.mn-vote-card.mn-voted .mn-vote-poster {

  outline: 2px solid var(--select, #3a6ea5) !important;

  outline-offset: 1px !important;

}

.mn-vote-card.mn-voted .mn-vote-score {

  background: rgba(30, 70, 140, 0.9) !important;

  color: #fff !important;

}



/* Default layout: chat column, then Movie Night under it (mobile / narrow) */

#panel-chat .chat-mn-layout {

  display: flex !important;

  flex-direction: column !important;

  gap: 8px !important;

  align-items: stretch !important;

  margin: 0 !important;

  min-height: 0 !important;

}

#panel-chat .chat-col {

  display: flex !important;

  flex-direction: column !important;

  min-width: 0 !important;

  min-height: 0 !important;

  width: 100% !important;

}

#panel-chat .chat-mn-layout .peer-main {

  min-width: 0 !important;

  width: 100% !important;

  flex: 1 1 auto !important;

}

#panel-chat .chat-mn-layout .peer-side.mn-side,

#panel-chat .chat-mn-layout .peer-side {

  min-width: 0 !important;

  width: 100% !important;

  max-width: 100% !important;

}

#panel-chat .mn-browse.groupbox,

#panel-chat .mn-browse {

  display: flex !important;

  flex-direction: column !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: visible !important;

  background: var(--face) !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  box-shadow: none !important;

}



/* Vertical poster grid — page scrolls down, never sideways */

#panel-chat #mn-search-results.has-items,

#panel-chat #mn-queue.has-items {

  display: grid !important;

  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;

  gap: 10px 12px !important;

  align-content: start !important;

  overflow-x: hidden !important;

  overflow-y: visible !important;

  padding: 6px 8px 14px !important;

  scroll-snap-type: none !important;

  max-height: none !important;

}

#panel-chat #mn-search-results .mh-card,

#panel-chat #mn-search-results .mn-result-card {

  flex: none !important;

  width: 100% !important;

  max-width: 100% !important;

  padding: 0 !important;

  margin: 0 !important;

  border: none !important;

  background: transparent !important;

  cursor: pointer !important;

  text-align: left !important;

  color: inherit !important;

  font: inherit !important;

}

#panel-chat #mn-search-results .mh-card-img,

#panel-chat #mn-search-results .poster-img {

  width: 100% !important;

  height: auto !important;

  aspect-ratio: 2 / 3 !important;

  object-fit: cover !important;

  display: block !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  background: #1a1c22 !important;

}

#panel-chat .mn-vote-card {

  flex: none !important;

  width: 100% !important;

  max-width: 100% !important;

  min-width: 0 !important;

}

#panel-chat .mn-vote-poster {

  width: 100% !important;

  height: auto !important;

  aspect-ratio: 2 / 3 !important;

}



/*

 * Desktop Movie Night:

 *   [ video player ] [ chat — height LOCKED to player row ]

 *   [ Movie Night votes / suggestions — full width, vertical scroll ]

 *

 * height:0 + min-height:100% is the CSS Grid trick so chat does NOT

 * expand the top row taller than the player — player alone sizes the row.

 */

@media (min-width: 1101px) {

  body.tab-chat .workspace {

    display: grid !important;

    /* Player dominates slightly more; chat stays usable beside it */

    grid-template-columns: minmax(420px, 1.55fr) minmax(260px, 0.72fr) !important;

    grid-template-rows: auto auto !important;

    align-items: start !important;

    gap: 0 8px !important;

  }

  body.tab-chat .player-col {

    grid-column: 1 !important;

    grid-row: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    min-height: 0 !important;

    height: auto !important;

    overflow: hidden !important;

    border-right: none !important;

    padding: 6px 4px 6px 8px !important;

  }

  body.tab-chat .player-col .player-card {

    flex: 0 0 auto !important;

    width: 100% !important;

  }

  /* Hide stream chat under player on Movie Night tab */

  body.tab-chat .player-col > #chat-panel {

    display: none !important;

  }

  /* Flatten wrappers so chat-col + mn-side become workspace grid items */

  body.tab-chat .content-col {

    display: contents !important;

    padding: 0 !important;

  }

  body.tab-chat #panel-chat.active {

    display: contents !important;

  }

  body.tab-chat #panel-chat .chat-mn-layout {

    display: contents !important;

  }

  /* Chat height = player row only (does not push the row taller) */

  body.tab-chat #panel-chat .chat-col {

    grid-column: 2 !important;

    grid-row: 1 !important;

    display: flex !important;

    flex-direction: column !important;

    min-width: 0 !important;

    width: 100% !important;

    height: 0 !important;

    min-height: 100% !important;

    max-height: 100% !important;

    align-self: stretch !important;

    padding: 6px 8px 6px 4px !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

  }

  body.tab-chat #panel-chat .chat-toolbar,

  body.tab-chat #panel-chat .mn-session-banner {

    flex: 0 0 auto !important;

  }

  /* Compact voice so the message list gets the rest of the player height */

  body.tab-chat #panel-chat .voice-bar.compact {

    flex: 0 0 auto !important;

    margin-bottom: 4px !important;

    padding: 3px 6px !important;

  }

  body.tab-chat #panel-chat #voice-hint {

    display: none !important;

  }

  body.tab-chat #panel-chat .voice-peers {

    max-height: 28px !important;

    overflow: auto !important;

  }

  body.tab-chat #panel-chat .peer-main,

  body.tab-chat #panel-chat .chat-main-box {

    flex: 1 1 auto !important;

    min-height: 0 !important;

    height: auto !important;

    max-height: none !important;

    margin: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    overflow: hidden !important;

  }

  body.tab-chat #panel-chat .peer-chat-log {

    flex: 1 1 auto !important;

    min-height: 0 !important;

    max-height: none !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

  }

  body.tab-chat #panel-chat .peer-chat-compose,

  body.tab-chat #panel-chat #tts-options,

  body.tab-chat #panel-chat .chat-reply-bar,

  body.tab-chat #panel-chat .chat-gif-picker {

    flex: 0 0 auto !important;

  }

  /* Movie Night full width under player + chat — vertical poster grid */

  body.tab-chat #panel-chat .peer-side.mn-side,

  body.tab-chat #panel-chat .peer-side {

    grid-column: 1 / -1 !important;

    grid-row: 2 !important;

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    height: auto !important;

    max-height: none !important;

    padding: 8px 10px 16px !important;

    box-sizing: border-box !important;

    overflow: visible !important;

  }

  body.tab-chat #panel-chat .mn-browse.groupbox,

  body.tab-chat #panel-chat .mn-browse {

    height: auto !important;

    max-height: none !important;

    overflow: visible !important;

    flex: none !important;

    border: none !important;

    background: transparent !important;

    padding: 0 !important;

  }

  body.tab-chat #panel-chat .mn-chrome {

    position: static !important;

    padding: 4px 2px 8px !important;

    border-bottom: 1px solid var(--lo) !important;

    margin-bottom: 4px !important;

  }

  body.tab-chat #panel-chat .mn-side-title {

    font-size: 14px !important;

  }

  body.tab-chat #panel-chat .mn-search-section.has-results,

  body.tab-chat #panel-chat .mn-queue-section {

    flex: none !important;

    max-height: none !important;

    overflow: visible !important;

    border-bottom: none !important;

    padding: 8px 0 4px !important;

  }

  body.tab-chat #panel-chat .mn-section .mh-row-title {

    font-size: 13px !important;

    text-transform: none !important;

    letter-spacing: 0 !important;

    color: var(--text) !important;

    font-weight: bold !important;

  }

  /* Wide vertical grid under player (scroll the page, not sideways) */

  body.tab-chat #panel-chat #mn-search-results.has-items,

  body.tab-chat #panel-chat #mn-queue.has-items {

    display: grid !important;

    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;

    gap: 12px 14px !important;

    align-content: start !important;

    overflow-x: hidden !important;

    overflow-y: visible !important;

    padding: 8px 4px 18px !important;

    scroll-snap-type: none !important;

    max-height: none !important;

  }

  body.tab-chat #panel-chat #mn-search-results .mh-card,

  body.tab-chat #panel-chat #mn-search-results .mn-result-card,

  body.tab-chat #panel-chat .mn-vote-card {

    flex: none !important;

    width: 100% !important;

    max-width: 100% !important;

  }

  body.tab-chat #panel-chat #mn-search-results .mh-card-img,

  body.tab-chat #panel-chat #mn-search-results .poster-img,

  body.tab-chat #panel-chat .mn-vote-poster {

    width: 100% !important;

    height: auto !important;

    aspect-ratio: 2 / 3 !important;

  }

  body.tab-chat #panel-chat #mn-status {

    display: none !important;

  }

}



/* ── Movie Night + external site chat (Twitch / Kick / YouTube / Rumble) ──
 *
 * Desktop: left = video + site chat under it
 *          right = MN peer chat, Movie Night tools under that chat only
 * Mobile:  video, then both chats stacked under it, then MN browse
 */

@media (min-width: 1101px) {

  /* Keep Movie Night 2-col grid; do not let has-site-chat force a full-width stack */

  body.tab-chat.has-site-chat .workspace {

    display: grid !important;

    /* Player + site chat take most of the row; MN chat stays usable */

    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.7fr) !important;

    grid-template-rows: auto auto !important;

    align-items: stretch !important;

    gap: 0 8px !important;

    overflow: visible !important;

    flex-direction: unset !important;

  }

  body.tab-chat.has-site-chat .player-col {

    grid-column: 1 !important;

    grid-row: 1 !important;

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    border-bottom: none !important;

    border-right: none !important;

    padding: 6px 4px 6px 8px !important;

    flex: unset !important;

    display: flex !important;

    flex-direction: column !important;

    min-height: 0 !important;

    height: 100% !important;

    align-self: stretch !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

  }

  body.tab-chat.has-site-chat .player-card {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    flex: 0 0 auto !important;

    box-sizing: border-box !important;

  }

  body.tab-chat.has-site-chat .player-bevel {

    width: 100% !important;

    box-sizing: border-box !important;

  }

  body.tab-chat.has-site-chat #player-wrap {

    width: 100% !important;

    max-width: none !important;

    min-height: min(36vh, 280px) !important;

    max-height: min(62vh, 780px) !important;

    aspect-ratio: 16 / 9 !important;

    height: auto !important;

    box-sizing: border-box !important;

  }

  body.tab-chat.has-site-chat #player,

  body.tab-chat.has-site-chat #embed-frame {

    width: 100% !important;

    height: 100% !important;

  }

  /* External site chat UNDER the video — full column width, tall as possible */

  body.tab-chat.has-site-chat .player-col > #chat-panel,

  body.tab-chat.has-site-chat .player-col > #chat-panel:not(.hidden) {

    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    max-width: none !important;

    margin: 6px 0 0 !important;

    height: auto !important;

    min-height: min(28vh, 220px) !important;

    max-height: min(42vh, 480px) !important;

    box-sizing: border-box !important;

  }

  body.tab-chat.has-site-chat .content-col {

    display: contents !important;

    width: auto !important;

    max-width: none !important;

    flex: unset !important;

    min-height: 0 !important;

    border-top: none !important;

    padding: 0 !important;

  }

  body.tab-chat.has-site-chat #panel-chat .chat-col {

    grid-column: 2 !important;

    grid-row: 1 !important;

  }

  /* Movie Night full-width under video + both chats — stretch to fill */

  body.tab-chat.has-site-chat #panel-chat .peer-side.mn-side,

  body.tab-chat.has-site-chat #panel-chat .peer-side {

    grid-column: 1 / -1 !important;

    grid-row: 2 !important;

    width: 100% !important;

    max-width: none !important;

    justify-self: stretch !important;

    align-self: stretch !important;

    display: block !important;

    box-sizing: border-box !important;

    padding-left: 10px !important;

    padding-right: 10px !important;

  }

  body.tab-chat.has-site-chat #panel-chat .mn-browse.groupbox,

  body.tab-chat.has-site-chat #panel-chat .mn-browse {

    width: 100% !important;

    max-width: none !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    box-sizing: border-box !important;

  }

}

/* Mobile / tablet: video first, then both chats, then MN browse */

@media (max-width: 1100px) {

  body.tab-chat.has-site-chat .workspace {

    display: flex !important;

    flex-direction: column !important;

  }

  body.tab-chat.has-site-chat .player-col {

    width: 100% !important;

    max-width: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    flex: 0 0 auto !important;

  }

  body.tab-chat.has-site-chat .player-card,

  body.tab-chat.has-site-chat #player-wrap {

    width: 100% !important;

    max-width: none !important;

  }

  body.tab-chat.has-site-chat #player-wrap {

    aspect-ratio: 16 / 9 !important;

    max-height: none !important;

    height: auto !important;

  }

  body.tab-chat.has-site-chat .player-col > #chat-panel,

  body.tab-chat.has-site-chat .player-col > #chat-panel:not(.hidden) {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    max-width: none !important;

    margin: 6px 0 0 !important;

    height: min(40vh, 380px) !important;

    max-height: min(40vh, 380px) !important;

    min-height: 180px !important;

    box-sizing: border-box !important;

  }

  body.tab-chat.has-site-chat .content-col {

    width: 100% !important;

    max-width: 100% !important;

    flex: 1 1 auto !important;

    display: block !important;

    padding-top: 6px !important;

  }

  body.tab-chat.has-site-chat #panel-chat.active {

    display: block !important;

  }

  body.tab-chat.has-site-chat #panel-chat .chat-mn-layout {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

  }

  body.tab-chat.has-site-chat #panel-chat .chat-col {

    width: 100% !important;

    order: 1 !important;

  }

  body.tab-chat.has-site-chat #panel-chat .peer-side.mn-side,

  body.tab-chat.has-site-chat #panel-chat .peer-side {

    width: 100% !important;

    max-width: 100% !important;

    order: 2 !important;

  }

  body.tab-chat.has-site-chat #panel-chat .peer-chat-log {

    min-height: 120px !important;

    max-height: 34vh !important;

  }

}




/* Mobile viewport: rails under chat (already default stack) */

@media (max-width: 1100px) {

  #panel-chat .chat-mn-layout {

    display: flex !important;

    flex-direction: column !important;

    gap: 8px !important;

    height: auto !important;

    overflow: visible !important;

  }

  #panel-chat .chat-mn-layout .peer-side.mn-side,

  #panel-chat .chat-mn-layout .peer-side {

    width: 100% !important;

    max-width: 100% !important;

    height: auto !important;

    max-height: none !important;

    overflow: visible !important;

  }

  #panel-chat .mn-browse {

    height: auto !important;

    max-height: none !important;

    overflow: visible !important;

  }

  #panel-chat #mn-search-results.has-items,

  #panel-chat #mn-queue.has-items {

    display: grid !important;

    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;

    gap: 10px !important;

    overflow-x: hidden !important;

    overflow-y: visible !important;

    padding: 6px 8px 14px !important;

    scroll-snap-type: none !important;

  }

  #panel-chat #mn-search-results .mh-card,

  #panel-chat #mn-search-results .mn-result-card,

  #panel-chat .mn-vote-card {

    flex: none !important;

    width: 100% !important;

    max-width: 100% !important;

  }

  #panel-chat #mn-search-results .mh-card-img,

  #panel-chat #mn-search-results .poster-img,

  #panel-chat .mn-vote-poster {

    width: 100% !important;

    height: auto !important;

    aspect-ratio: 2 / 3 !important;

  }

}

.mp3-pl-card .row { margin-top: 4px; }



/* Movie Night sync UI + admin */

.mn-play-overlay {

  position: absolute;

  inset: 0;

  z-index: 8;

  display: flex;

  align-items: center;

  justify-content: center;

  background: rgba(0,0,0,0.55);

  pointer-events: none;

}

.mn-play-overlay.hidden { display: none !important; }

.mn-play-overlay-msg {

  color: #fff;

  font-size: clamp(28px, 6vw, 56px);

  font-weight: bold;

  letter-spacing: 0.12em;

  text-shadow: 2px 2px 0 #000;

}

.player-card { position: relative; }

.mn-status-big {

  margin-top: 6px;

  padding: 10px;

  text-align: center;

  font-size: 18px;

  font-weight: bold;

  letter-spacing: 0.1em;

  background: var(--face);

  color: var(--text);

  border: 2px solid var(--dk);

}

.mn-status-big.hidden { display: none !important; }

.mn-session-banner {

  padding: 3px 8px;

  margin: 0 0 4px;

  background: linear-gradient(90deg, var(--title-start), var(--title-end));

  color: #fff;

  font-weight: bold;

  font-size: 10px;

}

.mn-session-banner.hidden { display: none !important; }

.chat-online-count { font-weight: normal; font-size: 10px; color: var(--muted); }



/* Compact chat toolbar — keeps chat near the video */

#panel-chat.panel {

  padding-top: 0 !important;

}

#panel-chat .chat-toolbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 6px;

  flex-wrap: wrap;

  margin: 0 0 4px !important;

  padding: 2px 0 4px !important;

  border-bottom: 1px solid var(--lo);

  min-height: 0;

}

#panel-chat .chat-toolbar-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  align-items: center;

  margin-left: auto;

}

#panel-chat .chat-toolbar .btn.sm {

  padding: 2px 8px !important;

  font-size: 10px !important;

  min-height: 22px !important;

  line-height: 1.2 !important;

}

#panel-chat .chat-main-box {

  margin-top: 0 !important;

  margin-bottom: 0 !important;

  padding-top: 6px !important;

}

#panel-chat .voice-bar.compact {

  margin-bottom: 6px !important;

  padding: 4px 6px !important;

}

#panel-chat .voice-bar.compact .voice-bar-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 6px;

}

#panel-chat .voice-actions-inline {

  display: inline-flex;

  gap: 4px;

  margin-left: auto;

}

#panel-chat .voice-bar.compact {

  margin-bottom: 4px !important;

  padding: 4px 6px !important;

}

#panel-chat .voice-bar.compact .voice-peers {

  max-height: 40px !important;

  margin-top: 2px !important;

}

#panel-chat .peer-chat-log {

  min-height: 220px !important;

  margin-bottom: 2px !important;

  flex: 1 1 auto !important;

}

#panel-chat .chat-mn-layout {

  margin-top: 0 !important;

  align-items: stretch !important;

}

/* Pull content flush under main tabs */

#panel-chat,

#panel-chat .panel-head {

  margin-top: 0 !important;

  padding-top: 0 !important;

}

#panel-chat .chat-toolbar {

  margin: 0 0 4px !important;

  padding: 2px 0 !important;

}

.player-info {

  padding: 4px 2px 2px !important;

}

.player-toolbar {

  padding: 4px 6px 6px !important;

}

.chat-panel {

  margin-top: 6px !important;

}

html.theme-dark body #panel-chat .chat-toolbar {

  border-bottom-color: var(--line) !important;

}

.mn-watch-icon { font-size: 11px; }

.mn-list-card .thumb {

  width: 48px;

  min-width: 48px;

  height: 64px;

  background-size: cover;

  background-position: center;

  background-color: #222;

}

.mn-list-card {

  display: flex;

  gap: 8px;

  align-items: stretch;

}

/* ── Admin panel (full-width mode + cards that always fit) ── */

body.admin-mode .player-col {

  display: none !important;

}

body.admin-mode .workspace {

  grid-template-columns: 1fr !important;

}

body.admin-mode .content-col {

  width: 100% !important;

  max-width: 100% !important;

  min-width: 0 !important;

  overflow-x: hidden !important;

  overflow-y: auto !important;

  padding: 12px 16px 28px !important;

  box-sizing: border-box !important;

}



#panel-admin,

#panel-admin * {

  box-sizing: border-box !important;

}

#panel-admin {

  width: 100% !important;

  max-width: 960px !important;

  margin: 0 auto !important;

  overflow: visible !important;

}

#panel-admin .admin-section {

  width: 100% !important;

  max-width: 100% !important;

  margin-bottom: 14px !important;

  overflow: visible !important;

  padding: 12px !important;

}

#panel-admin .admin-users-section {

  background: #f0eee8 !important;

}



.admin-tts-row {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px 12px;

  justify-content: space-between;

  width: 100%;

}

.admin-tts-status {

  margin: 0 !important;

  flex: 1 1 180px;

  min-width: 0;

  font-size: 12px !important;

  word-break: break-word;

}

.admin-tts-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}

.admin-tts-help {

  margin: 8px 0 0 !important;

  font-size: 10px !important;

  opacity: 0.85;

  word-break: break-word;

}



.admin-users-header {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 10px;

  width: 100%;

}

.admin-user-count {

  font-size: 11px !important;

  flex-shrink: 0;

}



.admin-users-toolbar {

  display: flex;

  flex-direction: column;

  align-items: stretch;

  gap: 8px;

  width: 100%;

  margin-bottom: 12px;

  padding: 10px;

  background: #fff !important;

  border: 1px solid #c8c4bc !important;

  border-radius: 6px;

}

.admin-search-wrap {

  position: relative;

  display: flex;

  align-items: center;

  width: 100%;

  max-width: 100%;

  min-width: 0;

}

.admin-search-icon {

  position: absolute;

  left: 8px;

  font-size: 14px;

  opacity: 0.55;

  pointer-events: none;

  line-height: 1;

  color: #555;

  z-index: 1;

}

.admin-user-search {

  width: 100% !important;

  max-width: 100% !important;

  min-width: 0 !important;

  padding-left: 26px !important;

  padding-right: 28px !important;

  font-size: 12px !important;

  background: #fafaf8 !important;

}

.admin-search-clear {

  position: absolute !important;

  right: 2px !important;

  min-width: 24px !important;

  padding: 2px 6px !important;

  border: none !important;

  background: transparent !important;

  box-shadow: none !important;

  opacity: 0.7;

  z-index: 1;

}

.admin-search-clear:hover { opacity: 1; }



.admin-filter-chips {

  display: flex;

  flex-wrap: wrap;

  gap: 5px;

  width: 100%;

}

.admin-chip {

  font-size: 11px !important;

  padding: 5px 11px !important;

  border: 1px solid #b0aaa0 !important;

  border-radius: 14px !important;

  background: #f0ece4 !important;

  color: #222 !important;

  cursor: pointer;

  box-shadow: none !important;

  line-height: 1.3;

  flex: 0 0 auto;

}

.admin-chip:hover {

  background: #e4dfd4 !important;

}

.admin-chip.active {

  background: #3a6ea5 !important;

  border-color: #245a8c !important;

  color: #fff !important;

  font-weight: 600;

}

#btn-admin-save-all {

  width: 100% !important;

  max-width: 100% !important;

}



.admin-users-list {

  display: flex;

  flex-direction: column;

  gap: 12px;

  width: 100%;

  max-width: 100%;

  /* list scrolls; individual cards never clip */

  max-height: none;

  overflow: visible;

  padding: 0;

}



.admin-users-empty {

  padding: 22px 14px;

  text-align: center;

  font-size: 12px;

  color: #666;

  background: #fff;

  border: 1px dashed #c8c4bc;

  border-radius: 6px;

  width: 100%;

}



/* Stacked card — every row full width, nothing clipped */

.admin-user-card {

  display: flex !important;

  flex-direction: column !important;

  align-items: stretch !important;

  gap: 8px !important;

  width: 100% !important;

  max-width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;

  padding: 12px !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  border-radius: 8px !important;

  border: 1px solid #c5c0b6 !important;

  border-left: 4px solid #8a919c !important;

  background: #ffffff !important;

  color: #1a1a1a !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;

  overflow: visible !important;

}

.admin-user-card:hover {

  border-color: #3a6ea5 !important;

  border-left-color: #3a6ea5 !important;

  box-shadow: 0 2px 8px rgba(58, 110, 165, 0.14) !important;

  background: #ffffff !important;

  color: #1a1a1a !important;

  transform: none !important;

}

.admin-user-card.is-online { border-left-color: #2e7d32 !important; }

.admin-user-card.is-banned {

  border-left-color: #c62828 !important;

  background: #fff8f7 !important;

}

.admin-user-card.is-tts { border-left-color: #6d4c41 !important; }

.admin-user-card.hidden { display: none !important; }



.admin-user-head {

  display: flex !important;

  flex-direction: row !important;

  align-items: flex-start !important;

  gap: 10px !important;

  width: 100% !important;

  min-width: 0 !important;

}

.admin-user-avatar {

  flex: 0 0 36px !important;

  width: 36px !important;

  height: 36px !important;

  border-radius: 50% !important;

  background: linear-gradient(145deg, #5b8fc7, #3a6ea5) !important;

  color: #fff !important;

  font-weight: 700 !important;

  font-size: 15px !important;

  line-height: 36px !important;

  text-align: center !important;

  box-shadow: 0 1px 2px rgba(0,0,0,0.12) !important;

  user-select: none !important;

  overflow: hidden !important;

}

.admin-user-card.is-banned .admin-user-avatar {

  background: linear-gradient(145deg, #e57373, #c62828) !important;

}

.admin-user-card.is-online .admin-user-avatar {

  box-shadow: 0 0 0 2px #c8e6c9, 0 1px 2px rgba(0,0,0,0.12) !important;

}

.admin-user-who {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  width: auto !important;

  overflow: visible !important;

}

.admin-user-name {

  display: block !important;

  width: 100% !important;

  max-width: 100% !important;

  font-weight: 700 !important;

  font-size: 14px !important;

  line-height: 1.45 !important;

  color: #111 !important;

  white-space: normal !important;

  overflow: visible !important;

  text-overflow: clip !important;

  word-break: break-word !important;

  overflow-wrap: anywhere !important;

  margin: 0 !important;

  padding: 0 !important;

  height: auto !important;

  max-height: none !important;

}

.admin-user-sub {

  display: block !important;

  width: 100% !important;

  font-size: 11px !important;

  line-height: 1.4 !important;

  color: #666 !important;

  margin: 2px 0 0 !important;

  white-space: normal !important;

  overflow: visible !important;

  word-break: break-word !important;

}



.admin-user-tags {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 4px !important;

  width: 100% !important;

  margin: 0 !important;

}

.admin-tag {

  display: inline-block !important;

  font-size: 9px !important;

  padding: 2px 7px !important;

  border-radius: 10px !important;

  font-weight: 700 !important;

  letter-spacing: 0.03em !important;

  text-transform: uppercase !important;

  line-height: 1.4 !important;

  border: none !important;

  color: #fff !important;

  max-width: 100% !important;

}

.admin-tag.tag-online { background: #2e7d32 !important; }

.admin-tag.tag-banned { background: #c62828 !important; }

.admin-tag.tag-admin { background: #6a1b9a !important; }

.admin-tag.tag-mod { background: #1565c0 !important; }

.admin-tag.tag-host { background: #ef6c00 !important; }

.admin-tag.tag-tts-off { background: #455a64 !important; }

.admin-tag.tag-tts-mute { background: #5d4037 !important; }

.admin-tag.tag-you { background: #37474f !important; }



.admin-user-meta {

  font-size: 11px !important;

  margin: 0 !important;

  color: #7a4a2a !important;

  background: #fff6eb !important;

  padding: 4px 8px !important;

  border-radius: 4px !important;

  display: block !important;

  width: 100% !important;

  word-break: break-word !important;

}



.admin-user-roles {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 6px !important;

  width: 100% !important;

  padding: 8px 0 !important;

  margin: 0 !important;

  border-top: 1px solid #ece8e0 !important;

  border-bottom: 1px solid #ece8e0 !important;

}

.admin-role-check {

  display: inline-flex !important;

  align-items: center !important;

  gap: 5px !important;

  margin: 0 !important;

  padding: 5px 10px !important;

  font-size: 11px !important;

  color: #222 !important;

  background: #f4f2ec !important;

  border: 1px solid #d8d4cc !important;

  border-radius: 6px !important;

  cursor: pointer !important;

  user-select: none !important;

  flex: 0 1 auto !important;

  max-width: 100% !important;

}

.admin-role-check:hover {

  background: #ebe7de !important;

  border-color: #c0bbb0 !important;

}

.admin-role-check.danger {

  background: #fff5f5 !important;

  border-color: #e8c8c8 !important;

}

.admin-role-check input {

  margin: 0 !important;

  flex-shrink: 0 !important;

  accent-color: #3a6ea5;

}

.admin-role-check.danger input {

  accent-color: #c62828;

}



.admin-user-pw {

  display: block !important;

  width: 100% !important;

  max-width: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;

}

.admin-user-pw .field-label {

  display: block !important;

  font-size: 10px !important;

  margin-bottom: 3px !important;

  color: #666 !important;

  font-weight: 600 !important;

}

.admin-user-pw .input {

  display: block !important;

  width: 100% !important;

  max-width: 100% !important;

  min-width: 0 !important;

  font-size: 12px !important;

  padding: 6px 8px !important;

  background: #fafaf8 !important;

  border-radius: 4px !important;

}



.admin-user-tts-btns {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 6px !important;

  width: 100% !important;

  margin: 0 !important;

}

.admin-user-tts-btns .btn {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  max-width: 100% !important;

  white-space: normal !important;

  height: auto !important;

  line-height: 1.3 !important;

  padding: 6px 10px !important;

}



/* Dark mode */

html.theme-dark body #panel-admin .admin-users-section {

  background: #151a26 !important;

}

html.theme-dark body .admin-users-toolbar {

  background: #1e2638 !important;

  border-color: rgba(255, 255, 255, 0.12) !important;

}

html.theme-dark body .admin-user-search {

  background: #121722 !important;

  color: #e8e6e0 !important;

}

html.theme-dark body .admin-search-icon { color: #9aa3b0; }

html.theme-dark body .admin-chip {

  background: #2a3348 !important;

  border-color: rgba(255, 255, 255, 0.16) !important;

  color: #e8e6e0 !important;

}

html.theme-dark body .admin-chip:hover { background: #343f58 !important; }

html.theme-dark body .admin-chip.active {

  background: #3a6ea5 !important;

  border-color: #5a9ad4 !important;

  color: #fff !important;

}

html.theme-dark body .admin-users-empty {

  background: #1a2030;

  border-color: rgba(255, 255, 255, 0.12);

  color: #a8aeb8;

}

html.theme-dark body .admin-user-card {

  background: #232b3d !important;

  border-color: rgba(255, 255, 255, 0.1) !important;

  border-left-color: #6a7588 !important;

  color: #eef0f4 !important;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28) !important;

}

html.theme-dark body .admin-user-card:hover {

  background: #2a3348 !important;

  border-color: #5b8fc7 !important;

  border-left-color: #5b8fc7 !important;

  color: #eef0f4 !important;

}

html.theme-dark body .admin-user-card.is-online { border-left-color: #4caf50 !important; }

html.theme-dark body .admin-user-card.is-banned {

  border-left-color: #ef5350 !important;

  background: #2a1e24 !important;

}

html.theme-dark body .admin-user-card.is-tts { border-left-color: #a1887f !important; }

html.theme-dark body .admin-user-name { color: #f2f4f8 !important; }

html.theme-dark body .admin-user-sub { color: #9aa3b0 !important; }

html.theme-dark body .admin-user-roles { border-color: rgba(255, 255, 255, 0.08) !important; }

html.theme-dark body .admin-role-check {

  background: #1a2030 !important;

  border-color: rgba(255, 255, 255, 0.12) !important;

  color: #e8e6e0 !important;

}

html.theme-dark body .admin-role-check:hover {

  background: #151a26 !important;

  border-color: rgba(255, 255, 255, 0.2) !important;

}

html.theme-dark body .admin-role-check.danger {

  background: #2a1a1c !important;

  border-color: rgba(239, 83, 80, 0.35) !important;

}

html.theme-dark body .admin-user-meta {

  color: #ffcc80 !important;

  background: rgba(255, 160, 0, 0.12) !important;

}

html.theme-dark body .admin-user-pw .field-label { color: #9aa3b0 !important; }

html.theme-dark body .admin-user-pw .input {

  background: #151a26 !important;

  color: #e8e6e0 !important;

}



/* Desktop: larger player column that grows with window */

@media (min-width: 1100px) {

  .workspace {

    grid-template-columns: minmax(460px, 50vw) 1fr !important;

  }

  #player-wrap {

    max-height: none !important;

    min-height: 320px;

    height: auto;

    aspect-ratio: 16 / 9;

  }

  .player-col {

    min-width: 0;

  }

}

@media (min-width: 1400px) {

  .workspace {

    grid-template-columns: minmax(560px, 54vw) 1fr !important;

  }

  #player-wrap {

    min-height: 380px;

  }

}

@media (min-width: 1800px) {

  .workspace {

    grid-template-columns: minmax(640px, 56vw) 1fr !important;

  }

  #player-wrap {

    min-height: 440px;

  }

}



/*

 * PC + site chat open: video full-width on top, stream chat docked UNDER it

 * so the picture can use the whole row (not a narrow left column).

 */

@media (min-width: 901px) {

  .player-col {

    display: flex !important;

    flex-direction: column !important;

    min-height: 0 !important;

  }

  .player-col > .player-card {

    flex: 0 0 auto !important;

  }

  .player-col > #chat-panel:not(.hidden) {

    flex: 1 1 auto !important;

    min-height: 180px !important;

  }



  body.has-site-chat .workspace {

    display: flex !important;

    flex-direction: column !important;

    grid-template-columns: 1fr !important;

    overflow-y: auto !important;

  }

  body.has-site-chat .player-col {

    width: 100% !important;

    max-width: 100% !important;

    border-right: none !important;

    border-bottom: 1px solid var(--lo) !important;

    padding: 8px 10px 6px !important;

    flex: 0 0 auto !important;

  }

  body.has-site-chat .player-card {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    box-sizing: border-box !important;

  }

  body.has-site-chat #player-wrap {

    width: 100% !important;

    max-width: none !important;

    aspect-ratio: 16 / 9 !important;

    min-height: min(52vh, 560px) !important;

    max-height: min(72vh, 920px) !important;

    height: auto !important;

    box-sizing: border-box !important;

  }

  body.has-site-chat #player,

  body.has-site-chat #embed-frame {

    width: 100% !important;

    height: 100% !important;

  }

  /* Chat under video — stretch full width, use more vertical space */

  body.has-site-chat #chat-panel:not(.hidden) {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    max-width: none !important;

    margin: 8px 0 0 !important;

    height: min(36vh, 420px) !important;

    max-height: min(36vh, 420px) !important;

    min-height: 200px !important;

    box-sizing: border-box !important;

  }

  body.has-site-chat .content-col {

    width: 100% !important;

    max-width: 100% !important;

    flex: 1 1 auto !important;

    min-height: 200px !important;

    border-top: 1px solid var(--lo) !important;

  }

}

@media (min-width: 1400px) {

  body.has-site-chat #player-wrap {

    min-height: min(60vh, 720px) !important;

    max-height: min(78vh, 1000px) !important;

  }

  body.has-site-chat #chat-panel:not(.hidden) {

    height: min(40vh, 480px) !important;

    max-height: min(40vh, 480px) !important;

  }

}



/* ── Cinema mode: video + chat side-by-side (no chat over the picture) ── */

body.cinema-mode {

  overflow: hidden !important;

  background: #000 !important;

}

body.cinema-mode .noise,

body.cinema-mode .app-sticky-chrome {

  visibility: hidden !important;

  pointer-events: none !important;

}

body.cinema-mode .workspace {

  position: static !important;

}

body.cinema-mode .player-col {

  border: none !important;

  padding: 0 !important;

  background: transparent !important;

}

body.cinema-mode .player-card {

  border: none !important;

  box-shadow: none !important;

  background: transparent !important;

  max-width: none !important;

  margin: 0 !important;

}

body.cinema-mode .player-bevel {

  padding: 0 !important;

  background: transparent !important;

}

body.cinema-mode .player-info,

body.cinema-mode .player-toolbar,

body.cinema-mode #add-pl-sheet,

body.cinema-mode .content-col > .panel:not(#panel-chat),

body.cinema-mode #chat-panel {

  display: none !important;

}



/* Desktop cinema: video LEFT, chat RIGHT (side by side) */

@media (min-width: 901px) {

  body.cinema-mode #player-wrap {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: auto !important;

    bottom: 0 !important;

    z-index: 9000 !important;

    width: calc(100vw - min(380px, 34vw)) !important;

    max-width: none !important;

    height: 100vh !important;

    max-height: none !important;

    min-height: 0 !important;

    aspect-ratio: auto !important;

    border: none !important;

    border-radius: 0 !important;

    background: #000 !important;

  }

  body.cinema-mode #player,

  body.cinema-mode #embed-frame {

    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

  }

  /* Chat column beside video — full window height, no dead bottom gap */

  body.cinema-mode #panel-chat,

  body.cinema-mode #panel-chat.active,

  body.cinema-mode #panel-chat.force-dock {

    position: fixed !important;

    top: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    left: auto !important;

    z-index: 9002 !important;

    display: flex !important;

    flex-direction: column !important;

    width: min(380px, 34vw) !important;

    max-width: 420px !important;

    height: 100vh !important;

    height: 100dvh !important;

    max-height: none !important;

    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    visibility: visible !important;

    /* Glass panel against dark backdrop (video never sits under it) */

    background: rgba(14, 18, 28, 0.92) !important;

    backdrop-filter: blur(12px) saturate(1.15) !important;

    -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;

    border: none !important;

    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;

    box-shadow: none !important;

    color: #f2f4f8 !important;

  }

}



/* Shared cinema chat chrome (desktop + mobile) — fill full panel height */

body.cinema-mode #panel-chat,

body.cinema-mode #panel-chat.active,

body.cinema-mode #panel-chat.force-dock {

  box-sizing: border-box !important;

  display: flex !important;

  flex-direction: column !important;

  /* Kill normal panel padding that leaves a dead strip at the bottom */

  padding: 0 !important;

}

body.cinema-mode #panel-chat .chat-toolbar {

  border-bottom-color: rgba(255, 255, 255, 0.15) !important;

  color: #fff !important;

  flex: 0 0 auto !important;

  margin: 0 !important;

  padding: 8px 10px 6px !important;

}

body.cinema-mode #panel-chat .chat-online-count,

body.cinema-mode #panel-chat .muted,

body.cinema-mode #panel-chat .panel-hint {

  color: rgba(230, 235, 245, 0.72) !important;

}

body.cinema-mode #panel-chat .peer-side,

body.cinema-mode #panel-chat .mn-session-banner,

body.cinema-mode #panel-chat #voice-hint,

body.cinema-mode #panel-chat .voice-bar,

body.cinema-mode #panel-chat #peer-chat-status {

  display: none !important;

}

/* Drop the 2-col grid so main column can stretch edge-to-edge */

body.cinema-mode #panel-chat .chat-mn-layout,

body.cinema-mode #panel-chat .peer-layout {

  display: flex !important;

  flex-direction: column !important;

  flex: 1 1 auto !important;

  min-height: 0 !important;

  height: auto !important;

  max-height: none !important;

  grid-template-columns: none !important;

  grid-template-rows: none !important;

  align-items: stretch !important;

  gap: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

}

body.cinema-mode #panel-chat .peer-main,

body.cinema-mode #panel-chat .chat-main-box,

body.cinema-mode #panel-chat .groupbox.chat-main-box {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  max-height: none !important; /* override normal calc(100vh - 160px) */

  height: 100% !important;

  display: flex !important;

  flex-direction: column !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  margin: 0 !important;

  padding: 0 10px 0 !important;

  overflow: hidden !important;

}

body.cinema-mode #panel-chat .peer-chat-log {

  flex: 1 1 auto !important;

  min-height: 0 !important;

  max-height: none !important;

  height: auto !important;

  overflow-x: hidden !important;

  overflow-y: auto !important;

  margin: 0 !important;

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  color: #fff !important;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;

}

body.cinema-mode #panel-chat .peer-chat-compose {

  flex: 0 0 auto !important;

  margin: 0 -10px 0 !important; /* bleed to panel edges */

  background: rgba(0, 0, 0, 0.35) !important;

  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;

  padding: 10px !important;

  gap: 6px !important;

}

body.cinema-mode #panel-chat .peer-chat-compose .input,

body.cinema-mode #panel-chat #peer-chat-input {

  background: rgba(255, 255, 255, 0.12) !important;

  border-color: rgba(255, 255, 255, 0.22) !important;

  color: #fff !important;

}

body.cinema-mode #panel-chat .chat-gif-picker,

body.cinema-mode #panel-chat .chat-reply-bar,

body.cinema-mode #panel-chat #tts-options {

  flex: 0 0 auto !important;

  background: rgba(0, 0, 0, 0.35) !important;

  color: #fff !important;

}

/* When TTS options open, keep them above compose without collapsing the log */

body.cinema-mode #panel-chat #tts-options:not(.hidden) {

  margin: 0 -10px !important;

  padding: 6px 10px !important;

}



/* Floating cinema chrome */

#cinema-exit {

  display: none;

  position: fixed;

  top: 12px;

  left: 12px;

  z-index: 9005;

  padding: 6px 12px !important;

  font-size: 12px !important;

  font-weight: bold !important;

  color: #fff !important;

  background: rgba(0, 0, 0, 0.45) !important;

  border: 1px solid rgba(255, 255, 255, 0.25) !important;

  border-radius: 4px !important;

  backdrop-filter: blur(6px);

  cursor: pointer;

}

body.cinema-mode #cinema-exit {

  display: inline-flex !important;

  align-items: center;

  gap: 6px;

}

#cinema-exit:hover {

  background: rgba(0, 0, 0, 0.65) !important;

}

#btn-cinema.on {

  background: var(--select) !important;

  font-weight: bold !important;

}



/*

 * Mobile cinema: video on TOP, chat BELOW — never overlay chat on the picture.

 */

@media (max-width: 900px) {

  body.cinema-mode {

    overflow: hidden !important;

    background: #000 !important;

  }

  /* Video fills only the upper area above the chat dock */

  body.cinema-mode #player-wrap {

    position: fixed !important;

    top: 0 !important;

    left: 0 !important;

    right: 0 !important;

    bottom: auto !important;

    width: 100vw !important;

    height: 48dvh !important;

    max-height: 48dvh !important;

    min-height: 180px !important;

    z-index: 9000 !important;

    aspect-ratio: auto !important;

    border: none !important;

    border-radius: 0 !important;

    background: #000 !important;

  }

  body.cinema-mode #player,

  body.cinema-mode #embed-frame {

    width: 100% !important;

    height: 100% !important;

    object-fit: contain !important;

  }

  /* Solid bottom chat dock — not over the video; fill dock fully */

  body.cinema-mode #panel-chat,

  body.cinema-mode #panel-chat.active,

  body.cinema-mode #panel-chat.force-dock {

    position: fixed !important;

    top: auto !important;

    left: 0 !important;

    right: 0 !important;

    bottom: 0 !important;

    width: 100vw !important;

    max-width: 100vw !important;

    height: 52dvh !important;

    max-height: 52dvh !important;

    min-height: 200px !important;

    z-index: 9002 !important;

    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

    border-left: none !important;

    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    background: #0c1018 !important;

    backdrop-filter: none !important;

    -webkit-backdrop-filter: none !important;

    color: #f2f4f8 !important;

  }

  body.cinema-mode #panel-chat .peer-chat-log {

    text-shadow: none !important;

  }

  body.cinema-mode #panel-chat .peer-chat-compose {

    background: rgba(0, 0, 0, 0.45) !important;

    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;

  }

  body.cinema-mode #cinema-exit {

    top: 8px !important;

    left: 8px !important;

    font-size: 11px !important;

    padding: 5px 10px !important;

  }

}

/* Short phones: give chat a bit more room */

@media (max-width: 900px) and (max-height: 640px) {

  body.cinema-mode #player-wrap {

    height: 40dvh !important;

    max-height: 40dvh !important;

  }

  body.cinema-mode #panel-chat,

  body.cinema-mode #panel-chat.active,

  body.cinema-mode #panel-chat.force-dock {

    height: 60dvh !important;

    max-height: 60dvh !important;

  }

}



.tool-icon {

  min-width: 28px !important;

  padding: 4px 8px !important;

  font-size: 14px !important;

}



/* Subtitles / CC toggle */

#btn-subs {

  min-width: 32px !important;

  font-weight: bold !important;

  letter-spacing: 0.04em !important;

}

.subs-sync {

  display: inline-flex !important;

  align-items: center !important;

  gap: 3px !important;

  margin-left: 2px !important;

  flex-wrap: wrap !important;

}

.subs-sync.hidden {

  display: none !important;

}

.subs-sync .tool.sm {

  min-width: 0 !important;

  padding: 2px 6px !important;

  font-size: 10px !important;

}

.subs-offset-label {

  font-size: 10px !important;

  min-width: 2.4em !important;

  text-align: center !important;

  font-family: Tahoma, "MS Sans Serif", sans-serif !important;

}



/* ── Happenings map + list ── */

#panel-happenings.panel {

  padding-bottom: 8px !important;

}

/* Always stack: map on top, events under (desktop stretched + mobile) */

.hap-layout {

  display: flex !important;

  flex-direction: column !important;

  gap: 8px !important;

  min-height: 0 !important;

  padding: 0 8px 8px !important;

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

}

.hap-map {

  width: 100% !important;

  min-height: 280px !important;

  height: min(48vh, 520px) !important;

  flex: 0 0 auto !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  background: #c5d0bc !important;

  z-index: 1 !important;

}

.hap-map-fallback {

  padding: 16px !important;

  font-size: 12px !important;

  color: var(--muted) !important;

}

#results-happenings.happenings-list {

  width: 100% !important;

  max-width: 100% !important;

  max-height: min(42vh, 480px) !important;

  overflow-y: auto !important;

  margin: 0 !important;

  padding: 0 2px 0 0 !important;

  flex: 1 1 auto !important;

  box-sizing: border-box !important;

}

.happening-card {

  display: grid !important;

  grid-template-columns: 10px 56px 1fr !important;

  gap: 8px !important;

  align-items: start !important;

  cursor: pointer !important;

}

.happening-card.active {

  outline: 2px solid var(--select, #0a246a) !important;

  background: rgba(58, 110, 165, 0.12) !important;

}

.happening-dot {

  width: 8px !important;

  height: 8px !important;

  margin-top: 8px !important;

  border-radius: 50% !important;

  background: #3a6ea5 !important;

  box-shadow: 0 0 0 1px #0a246a !important;

}

.happening-dot.vid {

  background: #ff7a2f !important;

  box-shadow: 0 0 0 1px #c43c00 !important;

}

.happening-dot.geo {

  /* already has location */

}

.hap-thumb {

  width: 56px !important;

  height: 42px !important;

  object-fit: cover !important;

  background: #222 !important;

  border: 1px solid var(--lo) !important;

}

.hap-thumb-empty {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #fff !important;

  font-size: 14px !important;

  background: #3a4658 !important;

}

.hap-actions {

  margin-top: 4px !important;

}

.hap-popup {

  font-size: 12px !important;

  line-height: 1.35 !important;

  max-width: 240px !important;

}

.hap-pop-vid {

  margin-top: 4px !important;

  color: #c43c00 !important;

  font-weight: bold !important;

}

.leaflet-container {

  font: 11px Tahoma, "MS Sans Serif", sans-serif !important;

  background: #b8c4ae !important;

}

/* Wide desktop: fuller-width map, list stays underneath */

@media (min-width: 1100px) {

  .hap-map {

    height: min(52vh, 580px) !important;

    min-height: 320px !important;

  }

  #results-happenings.happenings-list {

    max-height: min(38vh, 420px) !important;

  }

}

@media (max-width: 900px) {

  .hap-map {

    height: 42vh !important;

    min-height: 220px !important;

  }

  #results-happenings.happenings-list {

    max-height: 48vh !important;

  }

}



/* ── TV/Movies streaming-style browse (Netflix-ish rails, Win2k chrome) ── */

#panel-media.panel {

  padding: 0 !important;

  overflow-x: hidden !important;

}

.mh-chrome {

  padding: 8px 10px 4px !important;

  border-bottom: 1px solid var(--lo) !important;

  background: var(--face) !important;

  position: sticky !important;

  top: 0 !important;

  z-index: 5 !important;

}

.mh-title {

  margin: 0 0 6px !important;

  font-size: 14px !important;

  font-weight: bold !important;

}

.mh-search-row,

.mh-tools-row {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 6px !important;

  align-items: center !important;

  margin-bottom: 6px !important;

}

.mh-browse {

  padding: 0 0 24px !important;

}

.mh-browse.hidden,

.mh-search-wrap.hidden {

  display: none !important;

}

.mh-search-wrap {

  padding: 10px !important;

}

.mh-hero {

  position: relative !important;

  min-height: min(42vh, 340px) !important;

  max-height: 420px !important;

  margin: 0 0 10px !important;

  overflow: hidden !important;

  border-bottom: 2px solid var(--dk) !important;

  background: #0a0c10 !important;

}

.mh-hero.hidden {

  display: none !important;

}

.mh-hero-bg {

  position: absolute !important;

  inset: 0 !important;

  background-size: cover !important;

  background-position: center 20% !important;

  transform: scale(1.04) !important;

  filter: saturate(1.05) !important;

}

.mh-hero-shade {

  position: absolute !important;

  inset: 0 !important;

  background: linear-gradient(

    90deg,

    rgba(8, 10, 14, 0.94) 0%,

    rgba(8, 10, 14, 0.72) 42%,

    rgba(8, 10, 14, 0.25) 70%,

    rgba(8, 10, 14, 0.55) 100%

  ),

  linear-gradient(0deg, rgba(8, 10, 14, 0.95) 0%, transparent 55%) !important;

}

.mh-hero-body {

  position: relative !important;

  z-index: 2 !important;

  max-width: min(560px, 92%) !important;

  padding: 28px 18px 22px !important;

  color: #f2f4f8 !important;

}

.mh-hero-kicker {

  font-size: 11px !important;

  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;

  color: #c9d0dc !important;

  margin-bottom: 6px !important;

}

.mh-hero-title {

  margin: 0 0 8px !important;

  font-size: clamp(20px, 3.2vw, 34px) !important;

  line-height: 1.15 !important;

  font-weight: bold !important;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65) !important;

}

.mh-hero-overview {

  margin: 0 0 12px !important;

  font-size: 12px !important;

  line-height: 1.45 !important;

  color: #d5dae3 !important;

  max-width: 46ch !important;

}

.mh-hero-actions {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 8px !important;

}

.mh-rows {

  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

  padding: 4px 0 8px !important;

}

.mh-row {

  min-width: 0 !important;

}

.mh-row-head {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 8px !important;

  padding: 0 10px 4px !important;

}

.mh-row-title {

  margin: 0 !important;

  font-size: 13px !important;

  font-weight: bold !important;

}

.mh-row-nav {

  display: flex !important;

  gap: 4px !important;

}

.mh-rail {

  display: flex !important;

  gap: 8px !important;

  overflow-x: auto !important;

  overflow-y: hidden !important;

  padding: 4px 10px 10px !important;

  scroll-snap-type: x proximity !important;

  scrollbar-width: thin !important;

  -webkit-overflow-scrolling: touch !important;

}

.mh-rail::-webkit-scrollbar {

  height: 8px !important;

}

.mh-card {

  flex: 0 0 auto !important;

  width: 124px !important;

  padding: 0 !important;

  margin: 0 !important;

  border: none !important;

  background: transparent !important;

  cursor: pointer !important;

  text-align: left !important;

  scroll-snap-align: start !important;

  color: inherit !important;

  font: inherit !important;

}

.mh-card .mh-card-img,

.mh-card .poster-img {

  width: 124px !important;

  height: 186px !important;

  object-fit: cover !important;

  display: block !important;

  border-top: 2px solid var(--hi) !important;

  border-left: 2px solid var(--hi) !important;

  border-right: 2px solid var(--dk) !important;

  border-bottom: 2px solid var(--dk) !important;

  background: #1a1c22 !important;

  border-radius: 0 !important;

}

.mh-card:hover .mh-card-img,

.mh-card:focus .mh-card-img,

.mh-card.active .mh-card-img {

  outline: 2px solid var(--select, #0a246a) !important;

  outline-offset: 1px !important;

}

.mh-card-ph {

  background: linear-gradient(145deg, #2a2e38, #12141a) !important;

}

.mh-card-meta {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 4px !important;

  margin-top: 4px !important;

  font-size: 9px !important;

}

.mh-card-title {

  font-size: 11px !important;

  font-weight: bold !important;

  line-height: 1.25 !important;

  margin-top: 2px !important;

  max-height: 2.6em !important;

  overflow: hidden !important;

}

.mh-score {

  color: var(--muted) !important;

  font-size: 9px !important;

}

@media (min-width: 900px) {

  .mh-card {

    width: 142px !important;

  }

  .mh-card .mh-card-img,

  .mh-card .poster-img {

    width: 142px !important;

    height: 213px !important;

  }

  .mh-hero {

    min-height: min(48vh, 400px) !important;

  }

}

@media (max-width: 700px) {

  .mh-hero-body {

    padding: 18px 12px 16px !important;

  }

  .mh-card {

    width: 108px !important;

  }

  .mh-card .mh-card-img,

  .mh-card .poster-img {

    width: 108px !important;

    height: 162px !important;

  }

}

html.theme-dark body .mh-chrome {

  background: var(--face) !important;

  border-bottom-color: var(--line) !important;

}

html.theme-dark body .mh-hero-title {

  color: #fff !important;

}



/* Custom caption overlay — works for native video AND iframe embeds */

.chud-sub-overlay {

  position: absolute !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 8% !important;

  z-index: 12 !important;

  pointer-events: none !important;

  display: flex !important;

  justify-content: center !important;

  padding: 0 8% !important;

  box-sizing: border-box !important;

}

.chud-sub-overlay.hidden {

  display: none !important;

}

.chud-sub-text {

  max-width: 92% !important;

  text-align: center !important;

  font-family: Tahoma, "Segoe UI", Arial, sans-serif !important;

  font-size: clamp(14px, 2.4vw, 22px) !important;

  font-weight: 600 !important;

  line-height: 1.35 !important;

  color: #fff !important;

  text-shadow:

    0 0 2px #000,

    0 1px 2px #000,

    1px 1px 2px #000,

    -1px -1px 2px #000 !important;

  background: rgba(0, 0, 0, 0.45) !important;

  border-radius: 4px !important;

  padding: 4px 10px 5px !important;

  white-space: pre-line !important;

}

.chud-sub-text:empty {

  display: none !important;

  padding: 0 !important;

  background: transparent !important;

}

#player-wrap.embed-mode .chud-sub-overlay {

  bottom: 10% !important;

}

#btn-subs.on {

  background: var(--select) !important;

  color: var(--select-text) !important;

  border-top-color: var(--dk) !important;

  border-left-color: var(--dk) !important;

  border-right-color: var(--hi) !important;

  border-bottom-color: var(--hi) !important;

  font-weight: bold !important;

}

#btn-subs.loading {

  opacity: 0.75 !important;

  font-weight: bold !important;

}

/* Readable native captions — high contrast, stable sizing */

#player::cue {

  background: rgba(0, 0, 0, 0.78);

  color: #ffffff;

  font-family: Tahoma, "Segoe UI", sans-serif;

  font-size: 1.08em;

  line-height: 1.35;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);

  white-space: pre-wrap;

}

video::cue {

  background: rgba(0, 0, 0, 0.78);

  color: #fff;

}

html.theme-dark #btn-subs.on {

  background: linear-gradient(180deg, #5b93ff 0%, #3a6fd4 100%) !important;

  color: #fff !important;

  border-color: #8eb6ff #1a3a7a #1a3a7a #8eb6ff !important;

}



/* Chat name role colors (light mode) */

.pc-who.role-admin { color: #a01818 !important; font-weight: bold; }

.pc-who.role-mod { color: #1a3a8a !important; font-weight: bold; }

.pc-who.role-host { color: #1a6b2a !important; font-weight: bold; }



/* Mobile: chat compact; Movie Night rails fill width like TV/Movies */

@media (max-width: 900px) {

  .peer-chat-log {

    max-height: 22vh !important;

    min-height: 88px !important;

  }

  .voice-bar {

    max-height: none;

  }

  .voice-peers {

    max-height: 56px !important;

    overflow: auto !important;

  }

  .chat-mn-layout .peer-side .results.list,

  .chat-mn-layout #mn-queue,

  .chat-mn-layout #mn-search-results {

    max-height: none !important;

    overflow-x: hidden !important;

    overflow-y: visible !important;

  }

  #player-wrap {

    max-height: none !important;

    width: 100% !important;

  }

  /* Keep voice bar compact so chat + player fit */

  .voice-bar-row .panel-hint,

  #voice-hint {

    display: none !important;

  }

  #panel-chat .mn-side-title {

    font-size: 14px !important;

  }

  #panel-chat .mn-chrome {

    position: static !important;

  }

}

@media (max-width: 480px) {

  .peer-chat-log {

    max-height: 20vh !important;

    min-height: 72px !important;

  }

  #player-wrap {

    max-height: none !important;

    width: 100% !important;

  }

  #panel-chat #mn-search-results .mh-card,

  #panel-chat #mn-search-results .mn-result-card {

    width: 112px !important;

  }

  #panel-chat #mn-search-results .mh-card-img,

  #panel-chat #mn-search-results .poster-img {

    width: 112px !important;

    height: 168px !important;

  }

  .mn-vote-card {

    width: 120px !important;

  }

  .mn-vote-poster {

    width: 120px !important;

    height: 180px !important;

  }

}



/* Ensure player overlay removed if leftover */

.mn-play-overlay { display: none !important; }



/* ═══════════════════════════════════════════════════════════════════════════

   Dark mode — aesthetic night chrome

   Soft graphite surfaces, deep navy desktop, cool blue accent title bar.

   Toggle: title bar ◐ Dark  (Settings checkbox too)

   ═══════════════════════════════════════════════════════════════════════════ */

html.theme-dark {

  --face: #1c2230;

  --face-hover: #262e40;

  --face-press: #151a26;

  --hi: #3a455c;

  --lo: #0c1018;

  --dk: #080b12;

  --black: #e8ecf4;

  --desktop: #0a0e16;

  --title-start: #1a3a7a;

  --title-end: #3d6fd4;

  --title-inactive-start: #2a3142;

  --title-inactive-end: #3a4258;

  --select: #4c8dff;

  --select-text: #ffffff;

  --field: #121722;

  --link: #8eb6ff;

  --danger: #ff7b84;

  --ok: #6ddea0;

  --rec: #ff6b6b;

  --text: #e8ecf4;

  --muted: #9aa6bc;

  --faint: #6f7b91;

  --bg: #0a0e16;

  --bg-raised: #1c2230;

  --bg-card: #1c2230;

  --bg-input: #121722;

  --bg-hover: #262e40;

  --line: #2e3850;

  --line-soft: #24304a;

  --accent: #4c8dff;

  --accent-2: #2a5bbf;

  --accent-hover: #6aa0ff;

  --accent-glow: rgba(76, 141, 255, 0.28);

  --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);

  color-scheme: dark;

}



html.theme-dark,

html.theme-dark body {

  background: radial-gradient(1200px 600px at 20% -10%, #152038 0%, #0a0e16 55%, #070a10 100%) !important;

  color: var(--text) !important;

}



html.theme-dark body #app {

  background: transparent !important;

  color: var(--text) !important;

}



/* Soft window chrome */

html.theme-dark body #app > .topbar,

html.theme-dark body #app > .main-tabs,

html.theme-dark body #app > .workspace {

  box-shadow: var(--shadow);

}



html.theme-dark body .workspace,

html.theme-dark body .player-col,

html.theme-dark body .content-col,

html.theme-dark body .player-card,

html.theme-dark body .player-bevel,

html.theme-dark body .panel,

html.theme-dark body .panel-head,

html.theme-dark body .groupbox,

html.theme-dark body .settings-box,

html.theme-dark body .chat-panel,

html.theme-dark body .sheet,

html.theme-dark body .card,

html.theme-dark body .card .body,

html.theme-dark body .peer-main,

html.theme-dark body .peer-side,

html.theme-dark body .peer-layout,

html.theme-dark body .library-layout,

html.theme-dark body .folder-rail,

html.theme-dark body .folder-main,

html.theme-dark body .voice-bar,

html.theme-dark body .voice-peers,

html.theme-dark body .results,

html.theme-dark body .player-info,

html.theme-dark body .player-toolbar,

html.theme-dark body .w2k-raised,

html.theme-dark body .w2k-sunken,

html.theme-dark body .auth-card {

  background: var(--face) !important;

  background-image: none !important;

  color: var(--text) !important;

  border-color: var(--line) !important;

}



/* Title bar — luminous blue gradient */

html.theme-dark body .topbar {

  background: linear-gradient(105deg, #17356f 0%, #2b5fc0 48%, #4a86ef 100%) !important;

  border: none !important;

  border-top: 1px solid rgba(255, 255, 255, 0.18) !important;

  border-bottom: 1px solid rgba(0, 0, 0, 0.45) !important;

  box-shadow: 0 2px 12px rgba(20, 60, 140, 0.35) !important;

}

html.theme-dark body .brand-text h1 {

  color: #ffffff !important;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;

  letter-spacing: 0.02em !important;

}

html.theme-dark body .brand-sub {

  color: rgba(230, 240, 255, 0.88) !important;

}

html.theme-dark body .brand-sub .acro {

  color: #ffe8a3 !important;

}

html.theme-dark body .brand-logo {

  border-radius: 2px !important;

  border-color: rgba(255, 255, 255, 0.35) !important;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);

}



/* Pills on title bar */

html.theme-dark body .pill,

html.theme-dark body .pill.user,

html.theme-dark body .pill.idle,

html.theme-dark body .pill.playing,

html.theme-dark body .pill.error {

  background: rgba(8, 14, 28, 0.45) !important;

  color: #f0f5ff !important;

  border: 1px solid rgba(255, 255, 255, 0.22) !important;

  backdrop-filter: blur(4px);

}

html.theme-dark body .pill.user { color: #cfe0ff !important; }

html.theme-dark body .pill.playing {

  color: #9dffc0 !important;

  border-color: rgba(109, 222, 160, 0.45) !important;

}

html.theme-dark body .pill.rec {

  background: rgba(180, 40, 40, 0.75) !important;

  color: #fff !important;

}



html.theme-dark body .topbar .tool.sm,

html.theme-dark body .topbar .ghost-tool,

html.theme-dark body #btn-dark-mode {

  background: rgba(255, 255, 255, 0.12) !important;

  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.28) !important;

  box-shadow: none !important;

}

html.theme-dark body .topbar .tool.sm:hover,

html.theme-dark body .topbar .ghost-tool:hover,

html.theme-dark body #btn-dark-mode:hover {

  background: rgba(255, 255, 255, 0.22) !important;

  color: #ffffff !important;

}

html.theme-dark body #btn-dark-mode.on-hc {

  background: rgba(255, 255, 255, 0.92) !important;

  color: #1a3a7a !important;

  border-color: #ffffff !important;

  font-weight: bold !important;

}



/* Tabs — inline in title bar */

html.theme-dark body .topbar .main-tabs,

html.theme-dark body .main-tabs {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

}

html.theme-dark body .main-tabs button,

html.theme-dark body .sub-tabs button {

  background: rgba(255, 255, 255, 0.08) !important;

  color: rgba(240, 245, 255, 0.85) !important;

  border: 1px solid transparent !important;

  box-shadow: none !important;

  text-shadow: none !important;

}

html.theme-dark body .main-tabs button:hover,

html.theme-dark body .sub-tabs button:hover {

  color: #ffffff !important;

  background: rgba(255, 255, 255, 0.16) !important;

}

html.theme-dark body .main-tabs button.active,

html.theme-dark body .sub-tabs button.active {

  background: rgba(8, 14, 28, 0.55) !important;

  color: #ffffff !important;

  border: 1px solid rgba(255, 255, 255, 0.28) !important;

  font-weight: bold !important;

  box-shadow: none !important;

}



/* Raised / sunken bevels in dark */

html.theme-dark body .w2k-raised,

html.theme-dark body .groupbox,

html.theme-dark body .player-card,

html.theme-dark body .chat-panel,

html.theme-dark body .sheet {

  border-top: 1px solid #3a4660 !important;

  border-left: 1px solid #3a4660 !important;

  border-right: 1px solid #0a0e16 !important;

  border-bottom: 1px solid #0a0e16 !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;

}

html.theme-dark body .w2k-sunken,

html.theme-dark body .peer-chat-log,

html.theme-dark body .chat-log,

html.theme-dark body .status-box,

html.theme-dark body #player-wrap {

  border-top: 1px solid #0a0e16 !important;

  border-left: 1px solid #0a0e16 !important;

  border-right: 1px solid #3a4660 !important;

  border-bottom: 1px solid #3a4660 !important;

  background: var(--field) !important;

}



html.theme-dark body .groupbox-title {

  background: transparent !important;

  color: #9ec1ff !important;

  font-weight: bold !important;

  letter-spacing: 0.03em !important;

}



/* Typography — override hardcoded black text */

html.theme-dark body,

html.theme-dark body .panel-head h2,

html.theme-dark body .now-title,

html.theme-dark body .title,

html.theme-dark body .folder-title-row h3,

html.theme-dark body strong,

html.theme-dark body label,

html.theme-dark body .field,

html.theme-dark body .check,

html.theme-dark body .chat-line .t,

html.theme-dark body .chat-line .u {

  color: var(--text) !important;

}

html.theme-dark body .muted,

html.theme-dark body .panel-hint,

html.theme-dark body .now-sub,

html.theme-dark body .sub,

html.theme-dark body .chat-status,

html.theme-dark body .pc-time,

html.theme-dark body .empty-hint,

html.theme-dark body .faint,

html.theme-dark body .empty-state {

  color: var(--muted) !important;

}

html.theme-dark body a,

html.theme-dark body .link {

  color: var(--link) !important;

}

html.theme-dark body a:hover {

  color: #b8d2ff !important;

}



/* Buttons */

html.theme-dark body .btn,

html.theme-dark body .tool,

html.theme-dark body button.btn,

html.theme-dark body button.tool {

  background: linear-gradient(180deg, #2a3348 0%, #1e2638 100%) !important;

  color: var(--text) !important;

  border-top: 1px solid #4a5670 !important;

  border-left: 1px solid #4a5670 !important;

  border-right: 1px solid #0c1018 !important;

  border-bottom: 1px solid #0c1018 !important;

  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) !important;

  text-shadow: none !important;

}

html.theme-dark body .btn:hover,

html.theme-dark body .tool:hover {

  background: linear-gradient(180deg, #343f58 0%, #263045 100%) !important;

  color: #ffffff !important;

}

html.theme-dark body .btn.primary,

html.theme-dark body .btn.primary:hover,

html.theme-dark body .btn.primary * {

  background: linear-gradient(180deg, #5b93ff 0%, #3a6fd4 55%, #2f5bb8 100%) !important;

  color: #ffffff !important;

  border-top: 1px solid #8eb6ff !important;

  border-left: 1px solid #8eb6ff !important;

  border-right: 1px solid #1a3a7a !important;

  border-bottom: 1px solid #1a3a7a !important;

  font-weight: bold !important;

  box-shadow: 0 2px 10px rgba(60, 120, 255, 0.28) !important;

}

html.theme-dark body .btn.ghost,

html.theme-dark body .tool.ghost,

html.theme-dark body .ghost-tool {

  background: transparent !important;

  color: var(--muted) !important;

  border: 1px solid var(--line) !important;

}

html.theme-dark body .btn.ghost:hover,

html.theme-dark body .tool.ghost:hover {

  color: var(--text) !important;

  border-color: var(--accent) !important;

  background: rgba(76, 141, 255, 0.08) !important;

}

html.theme-dark body .btn.danger,

html.theme-dark body .danger-text,

html.theme-dark body .tool.danger {

  color: var(--danger) !important;

  border-color: rgba(255, 123, 132, 0.45) !important;

}



/* Inputs */

html.theme-dark body .input,

html.theme-dark body input:not([type="checkbox"]):not([type="radio"]),

html.theme-dark body select,

html.theme-dark body textarea,

html.theme-dark body .mono {

  background: var(--field) !important;

  color: var(--text) !important;

  border: 1px solid var(--line) !important;

  caret-color: var(--accent);

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35) !important;

}

html.theme-dark body .input:focus,

html.theme-dark body input:focus,

html.theme-dark body select:focus,

html.theme-dark body textarea:focus {

  outline: none !important;

  border-color: var(--accent) !important;

  box-shadow: 0 0 0 2px var(--accent-glow), inset 0 1px 3px rgba(0, 0, 0, 0.35) !important;

}

html.theme-dark body input::placeholder,

html.theme-dark body textarea::placeholder {

  color: var(--faint) !important;

  opacity: 1 !important;

}



/* Cards / results */

html.theme-dark body .card {

  background: #171d2b !important;

  border: 1px solid var(--line) !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;

  transition: border-color 0.12s ease, box-shadow 0.12s ease;

}

html.theme-dark body .card:hover,

html.theme-dark body .card.active {

  border-color: rgba(76, 141, 255, 0.55) !important;

  box-shadow: 0 0 0 1px rgba(76, 141, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.35) !important;

  outline: none;

}



/* ── Previews / thumbs / posters (critical) ─────────────────

   Never use the `background` shorthand here — it wipes

   inline background-image previews (MN queue, models, etc). */

html.theme-dark body .thumb,

html.theme-dark body .card .thumb,

html.theme-dark body .mn-list-card .thumb,

html.theme-dark body .poster,

html.theme-dark body .poster-img,

html.theme-dark body .mn-poster-ph {

  border: 1px solid var(--line) !important;

  background-color: #0e131c !important;

  background-size: cover !important;

  background-position: center center !important;

  background-repeat: no-repeat !important;

  /* keep any inline background-image */

  opacity: 1 !important;

  visibility: visible !important;

  filter: none !important;

  mix-blend-mode: normal !important;

  -webkit-filter: none !important;

}



html.theme-dark body img.thumb,

html.theme-dark body img.poster-img,

html.theme-dark body .card img,

html.theme-dark body .poster-card img,

html.theme-dark body .results img,

html.theme-dark body .mn-list-card img,

html.theme-dark body #mn-search-results img {

  display: block !important;

  object-fit: cover !important;

  object-position: center !important;

  opacity: 1 !important;

  visibility: visible !important;

  filter: none !important;

  mix-blend-mode: normal !important;

  background-color: #0e131c !important;

  /* do not set background shorthand */

  max-width: 100%;

}



/* Poster grid cards (TV/Movies, YouTube, etc.) */

html.theme-dark body .poster-card {

  background: linear-gradient(160deg, #1e2638 0%, #141a28 100%) !important;

  border: 1px solid var(--line) !important;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;

  color: var(--text) !important;

}

html.theme-dark body .poster-card:hover,

html.theme-dark body .poster-card.active {

  border-color: rgba(76, 141, 255, 0.55) !important;

  box-shadow: 0 0 0 1px rgba(76, 141, 255, 0.25), 0 6px 18px rgba(0, 0, 0, 0.4) !important;

  transform: translateY(-1px);

}

html.theme-dark body .poster-card .poster-img {

  width: 100% !important;

  aspect-ratio: 2 / 3 !important;

  height: auto !important;

  min-height: 120px !important;

  background-color: #0a0e16 !important;

  border-bottom: 1px solid var(--line) !important;

}

html.theme-dark body .poster-card .poster-body {

  background: transparent !important;

  color: var(--text) !important;

}

html.theme-dark body .poster-card .title {

  color: var(--text) !important;

}

html.theme-dark body .poster-card .sub {

  color: var(--muted) !important;

}



/* Movie Night queue thumbs (div + background-image) */

html.theme-dark body .mn-list-card .thumb {

  width: 48px !important;

  min-width: 48px !important;

  height: 64px !important;

  background-color: #0e131c !important;

  background-size: cover !important;

  background-position: center !important;

  border: 1px solid var(--line) !important;

  flex-shrink: 0 !important;

}



/* Movie Night side panel — dark theme (poster rails, not tiny list rows) */

html.theme-dark body .mn-browse {

  background: var(--face) !important;

}

html.theme-dark body .mn-chrome {

  background: var(--face) !important;

  border-bottom-color: var(--line) !important;

}

html.theme-dark body .mn-now.mn-now-hero {

  background: #0a0c12 !important;

  color: var(--text) !important;

}

html.theme-dark body .mn-now-poster {

  background-color: #12141a !important;

  background-image: linear-gradient(145deg, #2a2e38, #12141a) !important;

  border-color: var(--line) !important;

}

html.theme-dark body .mn-now-poster.has-img {

  background-color: #0a0c10 !important;

}

html.theme-dark body .mn-now-kicker,

html.theme-dark body .mn-now-meta {

  color: var(--muted) !important;

}

html.theme-dark body .mn-now .mn-status-big {

  background: rgba(0, 0, 0, 0.55) !important;

  border: 1px solid rgba(255, 220, 120, 0.45) !important;

  color: #ffe29a !important;

}

html.theme-dark body .mn-status-big {

  background: #0a0c12 !important;

  color: #ffe29a !important;

  border-color: var(--line) !important;

}

html.theme-dark body .mn-now-title,

html.theme-dark body .mn-vote-title,

html.theme-dark #mn-search-results .mh-card-title {

  color: #f2f4f8 !important;

}

html.theme-dark #mn-search-status,

html.theme-dark body .mn-vote-sub,

html.theme-dark body .mn-result-hint {

  color: var(--muted) !important;

}

html.theme-dark #mn-search-results .mh-card,

html.theme-dark #mn-search-results .mn-result-card {

  background: transparent !important;

  border: none !important;

  color: var(--text) !important;

}

html.theme-dark #mn-search-results .mh-card-img,

html.theme-dark #mn-search-results .poster-img {

  background-color: #0e131c !important;

}

html.theme-dark body .mn-vote-card.mn-voted .mn-vote-poster {

  outline-color: rgba(91, 147, 255, 0.85) !important;

}



html.theme-dark body .badge,

html.theme-dark body .badge * {

  background: rgba(76, 141, 255, 0.2) !important;

  color: #c5daff !important;

  border: 1px solid rgba(76, 141, 255, 0.35) !important;

  font-weight: bold !important;

}

html.theme-dark body .badge.live,

html.theme-dark body .badge.live * {

  background: rgba(109, 222, 160, 0.15) !important;

  color: #9dffc0 !important;

  border-color: rgba(109, 222, 160, 0.35) !important;

}



/* Chat feeds — high-contrast night chat */

html.theme-dark body .peer-chat-log,

html.theme-dark body #panel-chat .peer-chat-log {

  background: #0b101a !important;

  color: #f2f4f8 !important;

  border-color: #2e3850 !important;

  font-size: 13px !important;

  line-height: 1.5 !important;

  -webkit-font-smoothing: antialiased;

}

html.theme-dark body .peer-chat-line,

html.theme-dark body #panel-chat .peer-chat-line {

  border-bottom: 1px solid rgba(70, 85, 120, 0.4) !important;

  background: transparent !important;

  color: #f2f4f8 !important;

  font-size: 13px !important;

  line-height: 1.5 !important;

}

html.theme-dark body .chat-line {

  border-bottom: none !important;

  color: #f2f4f8 !important;

  font-size: 13px !important;

  line-height: 1.5 !important;

}

html.theme-dark body .peer-chat-line:hover,

html.theme-dark body #panel-chat .peer-chat-line:hover {

  background: rgba(76, 141, 255, 0.07) !important;

}

html.theme-dark body .peer-chat-line .pc-body,

html.theme-dark body #panel-chat .peer-chat-line .pc-body,

html.theme-dark body .peer-chat-line > div:last-child,

html.theme-dark body #panel-chat .peer-chat-line > div:last-child {

  color: #f2f4f8 !important;

  font-size: 13px !important;

  line-height: 1.5 !important;

  font-weight: 400 !important;

  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif !important;

}

html.theme-dark body .chat-line .t,

html.theme-dark body .chat-line > span.t {

  color: #f2f4f8 !important;

  font-size: 13px !important;

  line-height: 1.5 !important;

  font-weight: 400 !important;

  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif !important;

}

html.theme-dark body .chat-line .u {

  font-size: 12.5px !important;

  color: #8eb6ff !important;

}

html.theme-dark body .pc-who,

html.theme-dark body #panel-chat .peer-chat-line .pc-who {

  color: #9ec8ff !important;

  font-weight: bold !important;

  font-size: 12.5px !important;

}

/* Roles — distinct + bright enough on dark bg */

html.theme-dark body .pc-who.role-admin,

html.theme-dark body #panel-chat .peer-chat-line .pc-who.role-admin {

  color: #ff8fa0 !important;

}

html.theme-dark body .pc-who.role-mod,

html.theme-dark body #panel-chat .peer-chat-line .pc-who.role-mod {

  color: #d4b3ff !important;

}

html.theme-dark body .pc-who.role-host,

html.theme-dark body #panel-chat .peer-chat-line .pc-who.role-host {

  color: #6ef0b4 !important;

}

html.theme-dark body .pc-time,

html.theme-dark body #panel-chat .peer-chat-line .pc-time {

  color: #a8b4cc !important;

  font-size: 10px !important;

  opacity: 1 !important;

}

html.theme-dark body .peer-chat-line.muted,

html.theme-dark body .peer-chat-line .muted,

html.theme-dark body #panel-chat .peer-chat-line.muted {

  color: #b8c4d8 !important;

}

html.theme-dark body .mn-watch-icon { filter: none; font-size: 12px; }



/* Compose field */

html.theme-dark body .peer-chat-compose .input,

html.theme-dark body #peer-chat-input {

  background: #121a28 !important;

  color: #f0f4fc !important;

  border: 1px solid #3a4660 !important;

  font-size: 11px !important;

  font-family: var(--font) !important;

}

html.theme-dark body #chat-input,

html.theme-dark body .chat-compose .input {

  background: #0c1018 !important;

  color: #f2f4f8 !important;

  font-size: 12.5px !important;

  font-family: Tahoma, "MS Sans Serif", "Segoe UI", sans-serif !important;

}

html.theme-dark body .peer-chat-compose .input::placeholder,

html.theme-dark body #peer-chat-input::placeholder {

  color: #8a98b0 !important;

  opacity: 1 !important;

}

html.theme-dark body .peer-chat-compose .input:focus,

html.theme-dark body #peer-chat-input:focus {

  border-color: #6aa0ff !important;

  box-shadow: 0 0 0 2px rgba(76, 141, 255, 0.35) !important;

  background: #151e30 !important;

  color: #ffffff !important;

}



/* Player */

html.theme-dark body #player-wrap {

  background: #000 !important;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 24px rgba(0, 0, 0, 0.5) !important;

}

html.theme-dark body #player-empty {

  background: #000 !important;

  color: var(--muted) !important;

}

html.theme-dark body .player-toolbar,

html.theme-dark body .player-info {

  background: var(--face) !important;

  border-color: var(--line) !important;

}

html.theme-dark body .now-title { color: var(--text) !important; }

html.theme-dark body .now-sub { color: var(--muted) !important; }



/* Movie Night banner */

html.theme-dark body .mn-session-banner {

  background: linear-gradient(90deg, rgba(26, 58, 122, 0.45), rgba(76, 141, 255, 0.12)) !important;

  color: #d6e6ff !important;

  border: 1px solid rgba(76, 141, 255, 0.35) !important;

  border-radius: 0 !important;

}

html.theme-dark body .mn-status-big { color: #ffe29a !important; }

/* Voice chat — must beat #panel-chat light-mode rules (ID specificity) */

html.theme-dark body #panel-chat .voice-bar,

html.theme-dark body .voice-bar,

html.theme-dark body #panel-chat .voice-bar.compact {

  background: #141b2a !important;

  border: 1px solid #2e3850 !important;

  color: #e8ecf4 !important;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;

}

html.theme-dark body #panel-chat .voice-title,

html.theme-dark body .voice-title {

  color: #f0f4fc !important;

}

html.theme-dark body #panel-chat .voice-status,

html.theme-dark body .voice-status {

  color: #6ddea0 !important;

}

html.theme-dark body #panel-chat .voice-https-hint,

html.theme-dark body .voice-https-hint {

  color: #9aa6bc !important;

}

html.theme-dark body #panel-chat .voice-peers,

html.theme-dark body .voice-peers {

  background: #0c111b !important;

  border: 1px solid #2e3850 !important;

  color: #e8ecf4 !important;

}

html.theme-dark body #panel-chat .voice-peer-row,

html.theme-dark body .voice-peer-row {

  color: #e8ecf4 !important;

  background: transparent !important;

}

html.theme-dark body #panel-chat .voice-peer-row.me,

html.theme-dark body .voice-peer-row.me {

  background: rgba(76, 141, 255, 0.12) !important;

  color: #f0f4fc !important;

}

html.theme-dark body #panel-chat .voice-peer-row.muted .voice-peer-name,

html.theme-dark body .voice-peer-row.muted .voice-peer-name,

html.theme-dark body .voice-peer-name {

  color: #e8ecf4 !important;

}

html.theme-dark body #panel-chat .voice-peer-row.muted .voice-peer-name,

html.theme-dark body .voice-peer-row.muted .voice-peer-name {

  color: #9aa6bc !important;

}

html.theme-dark body #panel-chat .voice-peer-flags,

html.theme-dark body .voice-peer-flags {

  color: #9aa6bc !important;

}

html.theme-dark body #panel-chat .voice-bar .btn,

html.theme-dark body #panel-chat .voice-bar .tool,

html.theme-dark body #panel-chat .voice-actions-inline .btn {

  background: linear-gradient(180deg, #2a3348 0%, #1e2638 100%) !important;

  color: #e8ecf4 !important;

  border-color: #4a5670 #0c1018 #0c1018 #4a5670 !important;

}

html.theme-dark body #panel-chat .voice-bar .btn.primary {

  background: linear-gradient(180deg, #5b93ff 0%, #3a6fd4 100%) !important;

  color: #ffffff !important;

  border-color: #8eb6ff #1a3a7a #1a3a7a #8eb6ff !important;

}

html.theme-dark body #panel-chat .voice-bar .btn.ghost {

  background: transparent !important;

  color: #c5d0e4 !important;

  border: 1px solid #3a4660 !important;

}

html.theme-dark body #panel-chat .voice-bar .btn:disabled,

html.theme-dark body #panel-chat .voice-actions-inline .btn:disabled {

  opacity: 0.45 !important;

  color: #9aa6bc !important;

}



/* Folder rail */

html.theme-dark body .folder-rail button {

  background: var(--face-press) !important;

  color: var(--muted) !important;

  border: 1px solid var(--line) !important;

}

html.theme-dark body .folder-rail button.on,

html.theme-dark body .folder-rail button.on * {

  background: linear-gradient(180deg, #3a6fd4, #2a5bbf) !important;

  color: #ffffff !important;

  border-color: #4c8dff !important;

}



/* Toast / spinner */

html.theme-dark body #toast {

  background: #1a2234 !important;

  color: #e8ecf4 !important;

  border: 1px solid rgba(76, 141, 255, 0.45) !important;

  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5) !important;

}

html.theme-dark body #spinner {

  border-color: rgba(76, 141, 255, 0.25) !important;

  border-top-color: var(--accent) !important;

}



/* Chat terminal accents (legacy panel rules) */

html.theme-dark body #panel-chat .peer-chat-line .pc-house {

  color: #8af0c0 !important;

}

html.theme-dark body #panel-chat .peer-chat-log {

  background: #0b101a !important;

  color: #f0f4fc !important;

}

/* Stream live-chat panel under player */

/* Stream chat under player (keep readable Win2k night colors) */

html.theme-dark body .chat-log {

  background: #0c1018 !important;

  color: #f2f4f8 !important;

}

html.theme-dark body .chat-line .u {

  color: #8eb6ff !important;

}

html.theme-dark body .chat-line .t {

  color: #f2f4f8 !important;

}

html.theme-dark body .chat-line.status {

  color: #b8c4d8 !important;

}



/* Scrollbars */

html.theme-dark body * {

  scrollbar-width: thin;

  scrollbar-color: #3a4660 #121722;

}

html.theme-dark body *::-webkit-scrollbar { width: 10px; height: 10px; }

html.theme-dark body *::-webkit-scrollbar-track { background: #121722; }

html.theme-dark body *::-webkit-scrollbar-thumb {

  background: #3a4660;

  border: 2px solid #121722;

  border-radius: 6px;

}

html.theme-dark body *::-webkit-scrollbar-thumb:hover { background: #4c8dff; }



/* Storage bar / misc fills */

html.theme-dark body .storage-bar { background: #0c1018 !important; }

html.theme-dark body .storage-fill {

  background: linear-gradient(90deg, #2a5bbf, #4c8dff) !important;

}



/* Movie Night controls next to search (Join / Reconnect / Host top) */

.mn-controls-row {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 4px !important;

  align-items: center !important;

  margin: 0 0 6px !important;

}

.mn-controls-row .btn {

  flex: 0 0 auto !important;

}



/* Live Streams home — compact top-5 sections */

#results-live.live-home {

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

  margin-bottom: 8px !important;

}

.live-plat-section {

  min-width: 0 !important;

}

.live-section-title,

.live-plat-section .ppv-section-title {

  margin-top: 2px !important;

}

.live-plat-list {

  max-height: none !important;

}



/* Live TV + PPV sections under Live Streams */

.live-section,

.live-ppv-section {

  margin-top: 14px !important;

}

.live-section .groupbox-title,

.live-ppv-section .groupbox-title {

  font-weight: bold !important;

  font-size: 12px !important;

  margin: 0 0 8px !important;

}

.live-section .filter-row,

.live-ppv-section .filter-row {

  margin-bottom: 6px !important;

}

.ppv-cat-chips {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 4px !important;

  margin: 0 0 8px !important;

  max-width: 100% !important;

}

.ppv-cat-chips .admin-chip.on {

  font-weight: bold !important;

  outline: 1px solid var(--select, #3a6ea5) !important;

}

.ppv-section-title {

  width: 100% !important;

  font-weight: bold !important;

  font-size: 11px !important;

  font-family: var(--font) !important;

  margin: 8px 0 4px !important;

  padding: 3px 4px !important;

  border-bottom: 1px solid var(--line, #888) !important;

  clear: both !important;

  color: var(--text) !important;

}



/* ── Chat reply ─────────────────────────────────────────── */

.chat-reply-bar {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 6px 8px !important;

  margin: 0 0 4px !important;

  border: 1px solid var(--line, #888) !important;

  background: rgba(60, 100, 180, 0.12) !important;

  max-width: 100% !important;

  min-width: 0 !important;

  box-sizing: border-box !important;

}

.chat-reply-bar.hidden { display: none !important; }

.chat-reply-bar-inner {

  flex: 1 1 auto !important;

  min-width: 0 !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

  white-space: nowrap !important;

  font-size: 11px !important;

  font-family: var(--font) !important;

}

.chat-reply-label { opacity: 0.75 !important; margin-right: 4px !important; font-size: 10px !important; }

.chat-reply-who { margin-right: 6px !important; font-size: 11px !important; font-weight: bold !important; }

.chat-reply-snip { opacity: 0.7 !important; font-size: 10px !important; }

.chat-reply-quote {

  display: block !important;

  border-left: 2px solid #3a6ea5 !important;

  padding: 1px 0 1px 6px !important;

  margin: 0 0 3px !important;

  font-size: 10px !important;

  line-height: 1.3 !important;

  opacity: 0.92 !important;

  max-width: 100% !important;

  font-family: var(--font) !important;

}

.chat-reply-quote-who {

  display: block !important;

  font-weight: bold !important;

  font-size: 10px !important;

  color: #3a6ea5 !important;

}

html.theme-dark body .chat-reply-quote-who { color: #8eb6ff !important; }

.chat-reply-quote-snip {

  display: block !important;

  opacity: 0.75 !important;

  font-size: 10px !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}

button.pc-who,

button.mn-who {

  appearance: none !important;

  -webkit-appearance: none !important;

  background: transparent !important;

  border: none !important;

  padding: 0 !important;

  margin: 0 !important;

  font: inherit !important;

  font-weight: bold !important;

  color: inherit !important;

  cursor: pointer !important;

  text-align: left !important;

  max-width: 100% !important;

  touch-action: manipulation !important;

}

button.pc-who:hover,

button.mn-who:hover,

button.pc-who:focus-visible,

button.mn-who:focus-visible {

  text-decoration: underline !important;

  outline: none !important;

}



/* Library watch history rail */

.folder-rail button.rail-history {

  font-weight: bold;

}

.folder-rail button.rail-history .count {

  opacity: 0.85;

}

.thumb.thumb-hist {

  background: linear-gradient(135deg, #2a3a55 0%, #1a2438 100%);

  min-height: 48px;

}

.history-card .file-actions {

  flex-wrap: wrap;

}

.history-scope-bar {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  width: 100%;

  margin: 0 0 8px;

  padding: 0 2px;

}

.history-scope-bar .btn {

  flex: 0 0 auto;

}



/* ── iPhone / small phone: no accidental zoom, no horizontal crop ─

   iOS Safari zooms when focusing inputs with font-size < 16px.

   We keep pinch-zoom available (no maximum-scale lock). */

html {

  -webkit-text-size-adjust: 100% !important;

  text-size-adjust: 100% !important;

}

html, body {

  max-width: 100% !important;

  overflow-x: clip !important;

}

#app {

  max-width: 100% !important;

  min-width: 0 !important;

  overflow-x: clip !important;

  box-sizing: border-box !important;

  /* notch / home indicator safe areas */

  padding-left: env(safe-area-inset-left, 0) !important;

  padding-right: env(safe-area-inset-right, 0) !important;

}

@media (max-width: 900px), (hover: none) and (pointer: coarse) {

  /*

   * iOS Safari zooms focused inputs when font-size < 16px.

   * Specificity must beat theme rules like `html.theme-dark body #peer-chat-input`.

   */

  html body input.input,

  html body textarea.input,

  html body input[type="text"],

  html body input[type="search"],

  html body input[type="password"],

  html body input[type="email"],

  html body input[type="url"],

  html body input[type="number"],

  html body #peer-chat-input,

  html body #mn-chat-input,

  html body #chat-input,

  html body #chat-gif-q,

  html body #peer-chat-compose .input,

  html body .peer-chat-compose input,

  html body .chat-compose .input,

  html body .auth-card input,

  html.theme-dark body input.input,

  html.theme-dark body textarea.input,

  html.theme-dark body input[type="text"],

  html.theme-dark body input[type="search"],

  html.theme-dark body input[type="password"],

  html.theme-dark body #peer-chat-input,

  html.theme-dark body #mn-chat-input,

  html.theme-dark body #chat-input,

  html.theme-dark body #chat-gif-q,

  html.theme-dark body #peer-chat-compose .input,

  html.theme-dark body .peer-chat-compose input,

  html.theme-dark body .chat-compose .input,

  html.theme-dark body .auth-card input {

    font-size: 16px !important;

    line-height: 1.3 !important;

    /* keep touch target comfy without looking huge */

    min-height: 36px !important;

    padding-top: 8px !important;

    padding-bottom: 8px !important;

  }

  html body select.input,

  html.theme-dark body select.input {

    font-size: 16px !important; /* selects can also trigger zoom on some iOS */

  }

  /* Reduce accidental double-tap zoom on chrome; pinch still works */

  button, .btn, .tool, .main-tabs button, a {

    touch-action: manipulation !important;

  }

  .peer-chat-compose,

  .chat-reply-bar,

  .tts-options,

  .chat-gif-picker,

  .chat-compose,

  #chat-compose {

    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

  }

  .peer-main,

  .peer-side,

  .content-col,

  .panel,

  .groupbox {

    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box !important;

  }

}



/* ═══════════════════════════════════════════════════════════════════════════

   Modern theme — macOS glass + warm/cool palette

   Full-bleed layout. Warm gold accents on cool dark fields.

   Avant-garde: Bauhaus/De Stijl primaries as rare geometric accents on black/white.

   macOS: soft materials, translucency, generous radius, calm hierarchy.

   ═══════════════════════════════════════════════════════════════════════════ */

html.theme-modern {

  /* Cool dark graphite */

  --face: #1c1e26;

  --face-hover: #262a36;

  --face-press: #14161c;

  --hi: #3a3f50;

  --lo: #12141a;

  --dk: #0a0b10;

  --black: #06070a;

  --desktop: #0e1016;

  --title-start: #1a1d28;

  --title-end: #222633;

  --title-inactive-start: #181a22;

  --title-inactive-end: #1e212c;

  --select: #c9a227;          /* warm gold accent */

  --select-text: #0e1016;

  --field: #161922;

  --link: #8eb4e8;            /* cool pole highlight */

  --danger: #c45c5c;          /* muted avant-garde red */

  --ok: #5a9e6f;

  --rec: #c45c5c;

  --text: #f6f3ec;            /* warm off-white — high contrast on graphite */

  --muted: #c9c3b8;           /* secondary: still soft, never muddy */

  --faint: #a39d92;           /* tertiary: readable placeholders/meta */

  --bg: #0e1016;

  --bg-raised: #1c1e26;

  --bg-card: #22252f;

  --bg-input: #161922;

  --bg-hover: #2a2e3a;

  --line: #2e3340;

  --line-soft: #242833;

  --accent: #c9a227;          /* warm accent */

  --accent-2: #6b8cce;        /* cool accent */

  --accent-hover: #ddb83a;

  --accent-glow: rgba(201, 162, 39, 0.28);

  --radius: 12px;

  --radius-sm: 8px;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;

  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);

  --inset: none;

  /* materials */

  --mica: rgba(28, 30, 38, 0.82);

  --mica-solid: #1c1e26;

  --mica-alt: #22252f;

  --stroke: rgba(236, 232, 224, 0.1);

  --stroke-card: rgba(236, 232, 224, 0.08);

  --layer: rgba(236, 232, 224, 0.05);

  --layer-hover: rgba(236, 232, 224, 0.1);

  /* avant-garde primaries (sparse) */

  --avant-red: #b33a3a;

  --avant-blue: #2f4f8f;

  --avant-yellow: #c9a227;

  --cool-glow: rgba(107, 140, 206, 0.14);

  --warm-glow: rgba(201, 162, 39, 0.1);

  /* Spacing scale (4px base — even rhythm the eye reads as “settled”) */

  --s-1: 4px;

  --s-2: 8px;

  --s-3: 12px;

  --s-4: 16px;

  --s-5: 20px;

  --s-6: 24px;

  --s-8: 32px;

  --s-10: 40px;

  --gutter: 24px;         /* shared page inset: topbar / tabs / columns */

  --gutter-inner: 16px;   /* card / panel inner pad */

  --stack: 16px;          /* default vertical section gap */

  --stack-sm: 8px;

  --stack-lg: 24px;

  --control-gap: 8px;

  --grid-gap: 16px;

  --row-gap: 12px;

  --chrome-h: 48px;

  --tab-h: 44px;

}



html.theme-modern,

html.theme-modern body {

  /* Cool-dark atmospheric field */

  background:

    radial-gradient(ellipse 80% 55% at 12% 0%, var(--cool-glow), transparent 55%),

    radial-gradient(ellipse 60% 45% at 92% 100%, var(--warm-glow), transparent 50%),

    linear-gradient(180deg, #12141c 0%, #0e1016 48%, #0a0b10 100%) !important;

  background-attachment: fixed !important;

  color: var(--text) !important;

  font-family: var(--font) !important;

  font-size: 11px !important;

  line-height: 1.4 !important;

  -webkit-font-smoothing: antialiased !important;

  margin: 0 !important;

  width: 100% !important;

  max-width: none !important;

  overflow-x: hidden !important;

}



/* Full-bleed chrome — no side gutters */

html.theme-modern body #app {

  background: transparent !important;

  padding: 0 !important;

  margin: 0 !important;

  max-width: none !important;

  width: 100% !important;

  box-sizing: border-box !important;

}

html.theme-modern body #app > .app-sticky-chrome,

html.theme-modern body #app > .topbar,

html.theme-modern body #app > .main-tabs,

html.theme-modern body #app > .workspace,

html.theme-modern body .app-sticky-chrome,

html.theme-modern body .workspace,

html.theme-modern body .topbar,

html.theme-modern body .main-tabs {

  max-width: none !important;

  width: 100% !important;

  margin-left: 0 !important;

  margin-right: 0 !important;

  border-radius: 0 !important;

}



/* ── macOS-style title bar (frosted, calm) ── */

html.theme-modern body .app-sticky-chrome {

  background: var(--mica) !important;

  backdrop-filter: saturate(1.4) blur(28px) !important;

  -webkit-backdrop-filter: saturate(1.4) blur(28px) !important;

  border-bottom: 1px solid var(--stroke) !important;

  box-shadow: none !important;

  overflow: visible !important;

}

html.theme-modern body .topbar {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  min-height: var(--chrome-h) !important;

  height: auto !important;

  padding: var(--s-2) var(--gutter) !important;

  gap: var(--s-3) !important;

  box-sizing: border-box !important;

  align-items: center !important;

}

html.theme-modern body .brand-text h1 {

  color: var(--text) !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  letter-spacing: 0.03em !important;

  text-shadow: none !important;

  text-transform: none !important;

}

/* Avant-garde mark: warm gold brand accent */

html.theme-modern body .brand-text h1 {

  background: linear-gradient(90deg, var(--text) 0%, var(--text) 55%, var(--avant-yellow) 100%);

  -webkit-background-clip: text;

  background-clip: text;

}

html.theme-modern body .brand-logo {

  border-radius: 7px !important;

  box-shadow: 0 0 0 1px var(--stroke) !important;

  width: 22px !important;

  height: 22px !important;

}

html.theme-modern body .topbar-right .tool,

html.theme-modern body .topbar-right .pill,

html.theme-modern body .topbar .ghost-tool {

  background: transparent !important;

  border: 1px solid transparent !important;

  color: var(--text) !important;

  border-radius: 8px !important;

  box-shadow: none !important;

  text-shadow: none !important;

  font-size: 11px !important;

  font-weight: 500 !important;

  padding: 5px 10px !important;

}

html.theme-modern body .topbar-right .tool:hover,

html.theme-modern body .topbar-right .pill:hover {

  background: var(--layer-hover) !important;

}

html.theme-modern body #btn-theme {

  background: var(--layer) !important;

  border: 1px solid var(--stroke) !important;

  color: var(--text) !important;

  border-radius: 999px !important;

  font-weight: 600 !important;

  letter-spacing: 0.02em !important;

  text-transform: none !important;

  padding: 4px 14px !important;

  box-shadow: none !important;

}

html.theme-modern body #btn-theme:hover {

  background: var(--layer-hover) !important;

  border-color: rgba(201, 162, 39, 0.35) !important;

  color: var(--avant-yellow) !important;

}

html.theme-modern body .pill-avatar {

  border-radius: 50% !important;

  border: 1px solid var(--stroke) !important;

}

html.theme-modern body #status-pill {

  background: var(--layer) !important;

  border: 1px solid var(--stroke) !important;

  border-radius: 999px !important;

  color: var(--muted) !important;

  font-size: 10px !important;

  text-shadow: none !important;

}



/* ── Tabs: inline in frosted topbar ── */

html.theme-modern body .topbar .main-tabs,

html.theme-modern body .main-tabs {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  padding: 0 !important;

  gap: var(--s-1) !important;

  min-height: 0 !important;

  align-items: center !important;

  box-sizing: border-box !important;

  flex: 1 1 auto !important;

  min-width: 0 !important;

  overflow-x: auto !important;

}

html.theme-modern body .main-tabs button {

  background: transparent !important;

  color: var(--muted) !important;

  border: none !important;

  border-radius: var(--radius-sm) !important;

  margin: 0 !important;

  padding: 6px 12px !important;

  min-height: 32px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 12px !important;

  font-weight: 500 !important;

  box-shadow: none !important;

  text-shadow: none !important;

  transition: color 0.15s ease, background 0.15s ease !important;

}

/* Never unhide role-gated tabs (Admin) — display:inline-flex above beats .hidden */

html.theme-modern body .main-tabs button.hidden,

html.theme-modern body #tab-admin.hidden,

html.theme-dark body .main-tabs button.hidden,

html.theme-dark body #tab-admin.hidden,

html.theme-retro body .main-tabs button.hidden,

html.theme-retro body #tab-admin.hidden,

html body .main-tabs button.hidden,

html body #tab-admin.hidden {

  display: none !important;

  visibility: hidden !important;

  pointer-events: none !important;

}

html.theme-modern body .main-tabs button:hover {

  background: var(--layer) !important;

  color: var(--text) !important;

}

html.theme-modern body .main-tabs button.active {

  background: var(--layer-hover) !important;

  color: var(--text) !important;

  border: none !important;

  box-shadow: inset 0 -2px 0 var(--avant-yellow) !important;

  border-radius: var(--radius-sm) !important;

  font-weight: 600 !important;

}



/* ── Workspace stage ── */

html.theme-modern body .workspace {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

  flex: 1 1 auto !important;

  /* Keep columns optically balanced at the shared gutter */

  column-gap: 0 !important;

}

html.theme-modern body .player-col,

html.theme-modern body .content-col {

  background: transparent !important;

  border: none !important;

  padding: var(--stack) var(--gutter) var(--stack-lg) !important;

  box-sizing: border-box !important;

}

html.theme-modern body .player-col {

  border-right: 1px solid var(--stroke) !important;

  /* Inner right pad mirrors content left so the divider sits in true center gap */

  padding-right: var(--gutter) !important;

}

html.theme-modern body .content-col {

  padding-left: var(--gutter) !important;

}

html.theme-modern body.tab-chat .player-col {

  border-right: none !important;

}



/* ── Surfaces: soft macOS cards + geometric restraint ── */

html.theme-modern body .player-card,

html.theme-modern body .groupbox,

html.theme-modern body .settings-box,

html.theme-modern body .chat-panel,

html.theme-modern body .sheet,

html.theme-modern body .peer-main,

html.theme-modern body .panel.active,

html.theme-modern body .mn-browse,

html.theme-modern body .w2k-raised,

html.theme-modern body .w2k-sunken {

  background: var(--mica-alt) !important;

  border: 1px solid var(--stroke-card) !important;

  border-radius: 12px !important;

  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28) !important;

  backdrop-filter: none !important;

  -webkit-backdrop-filter: none !important;

}

html.theme-modern body .player-bevel {

  background: #05060a !important;

  border: 1px solid var(--stroke) !important;

  border-radius: 12px !important;

  box-shadow: none !important;

  overflow: hidden !important;

}

html.theme-modern body #player-wrap {

  border-radius: 11px !important;

  overflow: hidden !important;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;

}

html.theme-modern body .player-info,

html.theme-modern body .player-toolbar {

  background: transparent !important;

  border: none !important;

  padding: 8px 2px !important;

}

html.theme-modern body .now-title,

html.theme-modern body #now-playing {

  color: var(--text) !important;

  font-size: 12px !important;

  font-weight: 600 !important;

}

html.theme-modern body .now-sub,

html.theme-modern body #now-sub {

  color: var(--muted) !important;

  font-size: 11px !important;

}



/* ── Controls: macOS rounded + cool primary (Goethe blue pole) ── */

html.theme-modern body .btn,

html.theme-modern body .tool,

html.theme-modern body button.tool {

  background: var(--layer) !important;

  color: var(--text) !important;

  border: 1px solid var(--stroke) !important;

  border-radius: 8px !important;

  box-shadow: none !important;

  text-shadow: none !important;

  font-weight: 500 !important;

  font-size: 11px !important;

  padding: 5px 12px !important;

  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease !important;

}

html.theme-modern body .btn:hover,

html.theme-modern body .tool:hover {

  background: var(--layer-hover) !important;

  border-color: rgba(236, 232, 224, 0.16) !important;

}

html.theme-modern body .btn.primary,

html.theme-modern body .tool.primary {

  /* Goethean ultramarine — cool pole (yellow’s complement) */

  background: linear-gradient(180deg, #5c82c4 0%, #3a5f9e 55%, #2f4f8f 100%) !important;

  color: #f4f1ea !important;

  border: 1px solid rgba(142, 180, 232, 0.42) !important;

  box-shadow:

    0 1px 0 rgba(255, 255, 255, 0.14) inset,

    0 2px 10px rgba(47, 79, 143, 0.35) !important;

  font-weight: 600 !important;

  text-shadow: 0 1px 1px rgba(8, 10, 16, 0.35) !important;

}

html.theme-modern body .btn.primary:hover,

html.theme-modern body .tool.primary:hover {

  background: linear-gradient(180deg, #6b92d4 0%, #4a70b0 55%, #3a5f9e 100%) !important;

  color: #ffffff !important;

  border-color: rgba(174, 200, 240, 0.55) !important;

  box-shadow:

    0 1px 0 rgba(255, 255, 255, 0.18) inset,

    0 4px 14px rgba(74, 112, 176, 0.4) !important;

}

html.theme-modern body .btn.primary:active,

html.theme-modern body .tool.primary:active {

  background: linear-gradient(180deg, #3a5f9e 0%, #2a4578 100%) !important;

  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28) !important;

}

html.theme-modern body .btn.ghost,

html.theme-modern body .tool.ghost-tool,

html.theme-modern body .btn.sm.ghost {

  background: transparent !important;

  border-color: var(--stroke) !important;

  color: var(--text) !important;

}

html.theme-modern body .btn.sm,

html.theme-modern body .tool.sm {

  padding: 3px 9px !important;

  font-size: 11px !important;

  border-radius: 7px !important;

}



/* ── Inputs: cool field, warm focus ── */

html.theme-modern body .input,

html.theme-modern body input.input,

html.theme-modern body select.input,

html.theme-modern body textarea.input,

html.theme-modern body #peer-chat-input,

html.theme-modern body #live-q,

html.theme-modern body #mn-q,

html.theme-modern body #media-q,

html.theme-modern body #yt-q {

  background: var(--field) !important;

  color: var(--text) !important;

  border: 1px solid var(--stroke) !important;

  border-radius: 8px !important;

  box-shadow: none !important;

  padding: 6px 10px !important;

  font-size: 11px !important;

}

html.theme-modern body .input:focus,

html.theme-modern body input.input:focus,

html.theme-modern body #peer-chat-input:focus {

  background: #1a1d26 !important;

  border-color: rgba(107, 140, 206, 0.55) !important; /* cool focus ring */

  box-shadow: 0 0 0 3px rgba(107, 140, 206, 0.18) !important;

  outline: none !important;

}

html.theme-modern body .input::placeholder {

  color: var(--faint) !important;

}



/* ── Chat ── */

html.theme-modern body .peer-chat-log,

html.theme-modern body #panel-chat .peer-chat-log,

html.theme-modern body .chat-log {

  background: rgba(14, 16, 22, 0.92) !important;

  border: 1px solid var(--stroke-card) !important;

  border-radius: 12px !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;

  color: var(--text) !important;

  font-size: 12px !important;

  padding: 10px 12px !important;

}

html.theme-modern body .peer-chat-line,

html.theme-modern body .chat-line {

  border-bottom: 1px solid rgba(236, 232, 224, 0.05) !important;

  padding: 5px 0 !important;

}

html.theme-modern body .pc-who,

html.theme-modern body .peer-chat-line .pc-who {

  color: var(--accent-2) !important; /* cool names */

  font-weight: 600 !important;

}

html.theme-modern body .chat-toolbar {

  border-bottom: 1px solid var(--stroke) !important;

  background: transparent !important;

}



/* ── Cards ── */

html.theme-modern body .card,

html.theme-modern body .list-card,

html.theme-modern body .results .card {

  background: var(--layer) !important;

  border: 1px solid var(--stroke-card) !important;

  border-radius: 10px !important;

  box-shadow: none !important;

  transition: background 0.14s ease, border-color 0.14s ease !important;

}

html.theme-modern body .card:hover,

html.theme-modern body .list-card:hover {

  background: var(--layer-hover) !important;

  border-color: rgba(107, 140, 206, 0.28) !important;

  box-shadow: none !important;

  transform: none !important;

}

html.theme-modern body .card .title { color: var(--text) !important; font-weight: 600 !important; }

html.theme-modern body .card .sub { color: var(--muted) !important; }



/* ── Posters: geometric radius, cool hover edge ── */

html.theme-modern body .mh-card .mh-card-img,

html.theme-modern body .mn-vote-poster,

html.theme-modern body #mn-search-results .poster-img,

html.theme-modern body #mn-search-results .mh-card-img {

  border: 1px solid var(--stroke-card) !important;

  border-radius: 10px !important;

  box-shadow: 0 6px 18px rgba(0,0,0,0.4) !important;

}

html.theme-modern body .mh-card:hover .mh-card-img,

html.theme-modern body .mn-vote-card:hover .mn-vote-poster {

  outline: 2px solid var(--accent-2) !important;

  outline-offset: 2px !important;

  transform: none !important;

}

html.theme-modern body .mh-row-title,

html.theme-modern body .ppv-section-title,

html.theme-modern body .live-section-title,

html.theme-modern body .groupbox-title,

html.theme-modern body .panel-head h2,

html.theme-modern body .mh-title,

html.theme-modern body .mn-side-title {

  color: var(--text) !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  text-shadow: none !important;

  border: none !important;

  letter-spacing: 0.01em !important;

  text-transform: none !important;

}

html.theme-modern body .panel-hint,

html.theme-modern body .muted { color: var(--muted) !important; }

html.theme-modern body .mh-chrome,

html.theme-modern body .mn-chrome {

  background: transparent !important;

  border-bottom: 1px solid var(--stroke) !important;

}

html.theme-modern body .mh-hero {

  border: none !important;

  border-radius: 12px !important;

  overflow: hidden !important;

}

html.theme-modern body .mh-hero-shade {

  background: linear-gradient(

    90deg,

    rgba(14, 16, 22, 0.94) 0%,

    rgba(14, 16, 22, 0.55) 48%,

    transparent 78%

  ),

  linear-gradient(0deg, rgba(14, 16, 22, 0.9) 0%, transparent 50%) !important;

}

html.theme-modern body .mh-hero-title {

  color: #fff !important;

  text-shadow: 0 2px 12px rgba(0,0,0,0.55) !important;

}



/* ── Badges: cool / warm / avant-garde red live ── */

html.theme-modern body .badge,

html.theme-modern body .pill {

  background: var(--layer) !important;

  border: 1px solid var(--stroke) !important;

  border-radius: 999px !important;

  color: var(--text) !important;

  font-size: 10px !important;

  font-weight: 600 !important;

  text-transform: none !important;

  letter-spacing: 0.02em !important;

}

html.theme-modern body .badge.live {

  background: rgba(179, 58, 58, 0.22) !important; /* avant-garde red */

  border-color: rgba(179, 58, 58, 0.4) !important;

  color: #e8a0a0 !important;

}



/* ── Scrollbars: thin macOS ── */

html.theme-modern body *::-webkit-scrollbar { width: 9px; height: 9px; }

html.theme-modern body *::-webkit-scrollbar-track { background: transparent; }

html.theme-modern body *::-webkit-scrollbar-thumb {

  background: rgba(236, 232, 224, 0.18);

  border: 2px solid transparent;

  background-clip: padding-box;

  border-radius: 10px;

}

html.theme-modern body *::-webkit-scrollbar-thumb:hover {

  background: rgba(236, 232, 224, 0.3);

  background-clip: padding-box;

}



/* ── MN / voice ── */

html.theme-modern body .mn-now.mn-now-hero {

  background: linear-gradient(120deg, rgba(47, 79, 143, 0.22), rgba(28, 30, 38, 0.95) 50%, rgba(201, 162, 39, 0.08)) !important;

  border: 1px solid var(--stroke-card) !important;

  border-radius: 12px !important;

  box-shadow: none !important;

}

html.theme-modern body .voice-bar {

  background: var(--layer) !important;

  border: 1px solid var(--stroke-card) !important;

  border-radius: 10px !important;

  box-shadow: none !important;

}

html.theme-modern body.tab-chat #panel-chat .peer-side.mn-side {

  background: transparent !important;

  padding: 12px 20px 20px !important;

}

html.theme-modern body.tab-chat #panel-chat .chat-col .peer-main {

  background: var(--mica-alt) !important;

  border: 1px solid var(--stroke-card) !important;

  border-radius: 12px !important;

  box-shadow: 0 4px 24px rgba(0,0,0,0.28) !important;

}



html.theme-modern body .live-section,

html.theme-modern body .live-ppv-section {

  background: transparent !important;

  border: none !important;

  box-shadow: none !important;

}



html.theme-modern body button,

html.theme-modern body input,

html.theme-modern body select,

html.theme-modern body textarea {

  font-family: var(--font) !important;

  font-size: 11px !important;

  border-radius: 8px !important;

}



/* Soft geometric accent rail (De Stijl / Bauhaus whisper) on sticky chrome */

html.theme-modern body .app-sticky-chrome {

  border-bottom: 1px solid var(--stroke) !important;

  box-shadow: none !important;

}

html.theme-modern body .app-sticky-chrome::after {

  content: "";

  display: block;

  height: 2px;

  width: 100%;

  background: linear-gradient(

    90deg,

    var(--avant-blue) 0%,

    var(--avant-blue) 22%,

    transparent 22%,

    transparent 40%,

    var(--avant-yellow) 40%,

    var(--avant-yellow) 48%,

    transparent 48%,

    transparent 78%,

    var(--avant-red) 78%,

    var(--avant-red) 100%

  );

  opacity: 0.55;

}



/* modern full-bleed cleanup */

html.theme-modern body #app {

  padding: 0 !important;

}





/* ═══════════════════════════════════════════════════════════════════════════

   Modern site background (2026)

   Full-bleed atmospheric art + soft scrim + frosted glass UI

   No spin, no floating cutouts — one calm continuous field

   ═══════════════════════════════════════════════════════════════════════════ */

html.theme-modern {

  --bg-art: url("/static/art/good-vs-evil.jpg?v=3");

}



html.theme-modern,

html.theme-modern body {

  background-color: #0c0e14 !important;

  background-image:

    /* readability scrim — keeps chrome/type crisp */

    linear-gradient(

      180deg,

      rgba(8, 10, 16, 0.62) 0%,

      rgba(10, 12, 18, 0.42) 38%,

      rgba(8, 10, 14, 0.68) 100%

    ),

    /* subtle cool wash so UI doesn’t fight warm gold */

    radial-gradient(ellipse 90% 70% at 50% 40%, transparent 30%, rgba(6, 8, 12, 0.45) 100%),

    var(--bg-art) !important;

  background-size: cover, cover, cover !important;

  background-position: center, center, center center !important;

  background-attachment: fixed, fixed, fixed !important;

  background-repeat: no-repeat, no-repeat, no-repeat !important;

  overflow-x: hidden !important;

}



/* Kill decorative pseudo-art layers from older theme experiments */

html.theme-modern body::before,

html.theme-modern body::after {

  content: none !important;

  display: none !important;

  animation: none !important;

  background: none !important;

}



html.theme-modern body #app {

  position: relative !important;

  z-index: 1 !important;

  background: transparent !important;

}



/* Soft edge vignette only (no second image layer) */

html.theme-modern body #app::before {

  content: "" !important;

  position: fixed !important;

  inset: 0 !important;

  pointer-events: none !important;

  z-index: 0 !important;

  background: radial-gradient(

    ellipse 100% 85% at 50% 42%,

    transparent 35%,

    rgba(6, 8, 12, 0.35) 78%,

    rgba(6, 8, 12, 0.58) 100%

  ) !important;

  opacity: 1 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  filter: none !important;

  transform: none !important;

  translate: none !important;

  animation: none !important;

  width: auto !important;

  height: auto !important;

  left: 0 !important;

  top: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  -webkit-mask-image: none !important;

  mask-image: none !important;

  background-image: radial-gradient(

    ellipse 100% 85% at 50% 42%,

    transparent 35%,

    rgba(6, 8, 12, 0.35) 78%,

    rgba(6, 8, 12, 0.58) 100%

  ) !important;

}

html.theme-modern body #app > * {

  position: relative !important;

  z-index: 1 !important;

}



/* Frosted glass UI — solid-enough for readability, art shows through */

html.theme-modern body .app-sticky-chrome {

  background: linear-gradient(

    180deg,

    rgba(16, 18, 26, 0.82) 0%,

    rgba(16, 18, 26, 0.55) 78%,

    rgba(16, 18, 26, 0.18) 100%

  ) !important;

  background-image: linear-gradient(

    180deg,

    rgba(16, 18, 26, 0.82) 0%,

    rgba(16, 18, 26, 0.55) 78%,

    rgba(16, 18, 26, 0.18) 100%

  ) !important;

  backdrop-filter: saturate(1.2) blur(20px) !important;

  -webkit-backdrop-filter: saturate(1.2) blur(20px) !important;

  border-bottom: 1px solid rgba(236, 232, 224, 0.08) !important;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22) !important;

}



html.theme-modern body .topbar {

  background: transparent !important;

}



html.theme-modern body .workspace {

  background: linear-gradient(180deg, rgba(10, 12, 18, 0.18) 0%, rgba(10, 12, 18, 0.36) 100%) !important;

  background-image: linear-gradient(180deg, rgba(10, 12, 18, 0.18) 0%, rgba(10, 12, 18, 0.36) 100%) !important;

}



html.theme-modern body .player-card,

html.theme-modern body .groupbox,

html.theme-modern body .settings-box,

html.theme-modern body .peer-main,

html.theme-modern body .panel.active,

html.theme-modern body .mn-browse,

html.theme-modern body .chat-panel,

html.theme-modern body .sheet {

  background: linear-gradient(

    160deg,

    rgba(22, 24, 34, 0.82) 0%,

    rgba(16, 18, 26, 0.76) 100%

  ) !important;

  background-image: linear-gradient(

    160deg,

    rgba(22, 24, 34, 0.82) 0%,

    rgba(16, 18, 26, 0.76) 100%

  ) !important;

  backdrop-filter: blur(18px) saturate(1.1) !important;

  -webkit-backdrop-filter: blur(18px) saturate(1.1) !important;

  border: 1px solid rgba(236, 232, 224, 0.08) !important;

  box-shadow:

    0 12px 40px rgba(0, 0, 0, 0.28),

    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

}



html.theme-modern body .peer-chat-log,

html.theme-modern body #panel-chat .peer-chat-log,

html.theme-modern body .chat-log {

  background: linear-gradient(180deg, rgba(10, 12, 18, 0.84) 0%, rgba(12, 14, 20, 0.88) 100%) !important;

  background-image: linear-gradient(180deg, rgba(10, 12, 18, 0.84) 0%, rgba(12, 14, 20, 0.88) 100%) !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

  border: 1px solid rgba(107, 140, 206, 0.12) !important;

}



html.theme-modern body.tab-chat #panel-chat .peer-side.mn-side {

  background: linear-gradient(180deg, rgba(12, 14, 20, 0.4) 0%, rgba(12, 14, 20, 0.78) 100%) !important;

  background-image: linear-gradient(180deg, rgba(12, 14, 20, 0.4) 0%, rgba(12, 14, 20, 0.78) 100%) !important;

  border-top: 1px solid rgba(201, 162, 39, 0.12) !important;

}



html.theme-modern body .mn-now.mn-now-hero {

  background: linear-gradient(

    115deg,

    rgba(47, 79, 143, 0.28),

    rgba(18, 20, 28, 0.72) 48%,

    rgba(201, 162, 39, 0.12)

  ) !important;

  background-image: linear-gradient(

    115deg,

    rgba(47, 79, 143, 0.28),

    rgba(18, 20, 28, 0.72) 48%,

    rgba(201, 162, 39, 0.12)

  ) !important;

  border: 1px solid rgba(201, 162, 39, 0.14) !important;

}



html.theme-modern body .mh-hero {

  background-image: linear-gradient(

    90deg,

    rgba(12, 14, 20, 0.9) 0%,

    rgba(12, 14, 20, 0.5) 48%,

    transparent 78%

  ) !important;

}



html.theme-modern body .card,

html.theme-modern body .list-card {

  background: linear-gradient(180deg, rgba(24, 26, 36, 0.84) 0%, rgba(18, 20, 28, 0.8) 100%) !important;

  background-image: linear-gradient(180deg, rgba(24, 26, 36, 0.84) 0%, rgba(18, 20, 28, 0.8) 100%) !important;

  backdrop-filter: blur(12px) !important;

  -webkit-backdrop-filter: blur(12px) !important;

  border-color: rgba(236, 232, 224, 0.08) !important;

}



/* Accent band — gold / teal / indigo (no pink) */

html.theme-modern body .app-sticky-chrome::after {

  height: 2px !important;

  opacity: 0.55 !important;

  background: linear-gradient(

    90deg,

    transparent 0%,

    #2f4f8f 12%,

    #3d8f8a 30%,

    #c9a227 50%,

    #2f4f8f 88%,

    transparent 100%

  ) !important;

}



html.theme-modern body .btn,

html.theme-modern body .tool {

  backdrop-filter: blur(8px) !important;

  -webkit-backdrop-filter: blur(8px) !important;

}



@media (max-width: 900px) {

  html.theme-modern,

  html.theme-modern body {

    /* fixed bg can jank on mobile scroll — still cover, attachment scroll */

    background-attachment: scroll, scroll, scroll !important;

  }

  html.theme-modern body .workspace {

    background: linear-gradient(180deg, rgba(10, 12, 18, 0.48), rgba(10, 12, 18, 0.62)) !important;

    background-image: linear-gradient(180deg, rgba(10, 12, 18, 0.48), rgba(10, 12, 18, 0.62)) !important;

  }

}





/* modern typography polish */

html.theme-modern {

  --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;

  --font-display: "Outfit", "Inter", system-ui, sans-serif;

  /* Brighter, more uniform hierarchy on dark graphite */

  --text: #f6f3ec;

  --muted: #c9c3b8;

  --faint: #a39d92;

}



html.theme-modern,

html.theme-modern body {

  font-family: var(--font) !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  line-height: 1.5 !important;

  letter-spacing: 0.01em !important;

  font-feature-settings: "ss01", "cv11" !important;

  -webkit-font-smoothing: antialiased !important;

  -moz-osx-font-smoothing: grayscale !important;

  text-rendering: optimizeLegibility !important;

}



/* Kill dense/janky 11px inheritance from classic theme */

html.theme-modern body,

html.theme-modern body button,

html.theme-modern body input,

html.theme-modern body select,

html.theme-modern body textarea,

html.theme-modern body .btn,

html.theme-modern body .tool,

html.theme-modern body .input {

  font-family: var(--font) !important;

  font-size: 13px !important;

  letter-spacing: 0.01em !important;

}



/* Brand / display */

html.theme-modern body .brand-text h1 {

  font-family: var(--font-display) !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

  color: #f7f4ee !important;

  background: none !important;

  -webkit-text-fill-color: #f7f4ee !important;

  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;

  line-height: 1.2 !important;

}



/* Nav tabs */

html.theme-modern body .main-tabs button {

  font-family: var(--font) !important;

  font-size: 13px !important;

  font-weight: 500 !important;

  letter-spacing: 0.02em !important;

  line-height: 1.25 !important;

  /* horizontal padding only — height comes from --tab-h for even baseline */

  padding-left: var(--s-3) !important;

  padding-right: var(--s-3) !important;

}

html.theme-modern body .main-tabs button.active {

  font-weight: 600 !important;

  letter-spacing: 0.015em !important;

}



/* Panel titles */

html.theme-modern body .panel-head h2,

html.theme-modern body .mh-title,

html.theme-modern body .mn-side-title,

html.theme-modern body .groupbox-title,

html.theme-modern body .mh-row-title,

html.theme-modern body .ppv-section-title,

html.theme-modern body .live-section-title {

  font-family: var(--font-display) !important;

  font-size: 15px !important;

  font-weight: 600 !important;

  letter-spacing: 0.02em !important;

  line-height: 1.3 !important;

  color: #f7f4ee !important;

  text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;

  margin: 0 0 8px !important;

}



/* Body copy / hints */

html.theme-modern body .panel-hint,

html.theme-modern body .muted,

html.theme-modern body .now-sub,

html.theme-modern body #now-sub,

html.theme-modern body .card .sub,

html.theme-modern body .mh-card-meta,

html.theme-modern body .mn-vote-sub,

html.theme-modern body .mn-result-hint {

  font-family: var(--font) !important;

  font-size: 12px !important;

  font-weight: 400 !important;

  letter-spacing: 0.015em !important;

  line-height: 1.45 !important;

  color: var(--muted) !important;

  text-shadow: none !important;

}



/* Primary titles on cards / now playing */

html.theme-modern body .now-title,

html.theme-modern body #now-playing,

html.theme-modern body .card .title,

html.theme-modern body .mh-card-title,

html.theme-modern body .mn-vote-title,

html.theme-modern body .mh-hero-title {

  font-family: var(--font-display) !important;

  font-weight: 600 !important;

  letter-spacing: 0.01em !important;

  line-height: 1.3 !important;

  color: #f7f4ee !important;

  text-shadow: 0 1px 3px rgba(0,0,0,0.45) !important;

}

html.theme-modern body .now-title,

html.theme-modern body #now-playing {

  font-size: 14px !important;

}

html.theme-modern body .card .title {

  font-size: 13px !important;

}

html.theme-modern body .mh-card-title,

html.theme-modern body .mn-vote-title {

  font-size: 12px !important;

  font-weight: 500 !important;

}



/* Buttons — clean modern labels */

html.theme-modern body .btn,

html.theme-modern body .tool,

html.theme-modern body button.tool {

  font-family: var(--font) !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  letter-spacing: 0.03em !important;

  line-height: 1.2 !important;

  text-shadow: none !important;

}

html.theme-modern body .btn.sm,

html.theme-modern body .tool.sm {

  font-size: 11px !important;

  letter-spacing: 0.025em !important;

}

html.theme-modern body #btn-theme {

  font-family: var(--font) !important;

  font-size: 11px !important;

  font-weight: 600 !important;

  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;

}



/* Inputs */

html.theme-modern body .input,

html.theme-modern body input.input,

html.theme-modern body select.input,

html.theme-modern body textarea.input,

html.theme-modern body #peer-chat-input {

  font-family: var(--font) !important;

  font-size: 13px !important;

  font-weight: 400 !important;

  letter-spacing: 0.01em !important;

  line-height: 1.4 !important;

}

html.theme-modern body .input::placeholder {

  color: #7a756c !important;

  font-weight: 400 !important;

  letter-spacing: 0.02em !important;

  opacity: 1 !important;

}



/* Chat — readable over art */

html.theme-modern body .peer-chat-log,

html.theme-modern body #panel-chat .peer-chat-log,

html.theme-modern body .chat-log {

  font-family: var(--font) !important;

  font-size: 13px !important;

  line-height: 1.55 !important;

  letter-spacing: 0.01em !important;

  color: #f0ebe3 !important;

}

html.theme-modern body .pc-who,

html.theme-modern body .peer-chat-line .pc-who,

html.theme-modern body .mn-who {

  font-family: var(--font) !important;

  font-size: 12px !important;

  font-weight: 600 !important;

  letter-spacing: 0.02em !important;

  color: #9bb6e8 !important;

  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;

}

html.theme-modern body .pc-body,

html.theme-modern body .peer-chat-line .pc-body {

  font-weight: 400 !important;

  color: #f0ebe3 !important;

  text-shadow: 0 1px 2px rgba(0,0,0,0.35) !important;

}

html.theme-modern body .pc-time,

html.theme-modern body .mn-time {

  font-size: 11px !important;

  font-weight: 400 !important;

  color: #8a857c !important;

  letter-spacing: 0.02em !important;

}



/* Badges / pills */

html.theme-modern body .badge,

html.theme-modern body .pill {

  font-family: var(--font) !important;

  font-size: 10px !important;

  font-weight: 600 !important;

  letter-spacing: 0.04em !important;

  text-transform: uppercase !important;

  line-height: 1.2 !important;

}



/* Stronger frosted wells so type stays crisp over the background */

html.theme-modern body .peer-chat-log,

html.theme-modern body #panel-chat .peer-chat-log {

  background-image:

    linear-gradient(180deg, rgba(10, 12, 18, 0.9) 0%, rgba(12, 14, 20, 0.92) 100%) !important;

}

html.theme-modern body .player-card,

html.theme-modern body .groupbox,

html.theme-modern body .peer-main,

html.theme-modern body .panel.active {

  background-image:

    linear-gradient(160deg, rgba(22, 24, 32, 0.88) 0%, rgba(18, 20, 28, 0.84) 100%) !important;

}



/* Hero titles */

html.theme-modern body .mh-hero-title {

  font-family: var(--font-display) !important;

  font-size: clamp(22px, 3.2vw, 36px) !important;

  font-weight: 700 !important;

  letter-spacing: -0.02em !important;

  line-height: 1.15 !important;

}

html.theme-modern body .mh-hero-overview,

html.theme-modern body .mh-hero-kicker {

  font-family: var(--font) !important;

  font-weight: 400 !important;

  letter-spacing: 0.02em !important;

}

html.theme-modern body .mh-hero-kicker {

  font-size: 11px !important;

  font-weight: 600 !important;

  letter-spacing: 0.08em !important;

  text-transform: uppercase !important;

  color: #c9a227 !important;

}



/* ---------------------------------------------------------------------------

   Modern spacing system � 4px rhythm, shared gutters, multi-resolution align

   Gestalt: proximity, alignment, even intervals. Mind prefers multiples of 4/8.

   --------------------------------------------------------------------------- */



/* Responsive gutters � same edge line at every width */

@media (max-width: 480px) {

  html.theme-modern {

    --gutter: 12px;

    --gutter-inner: 12px;

    --stack: 12px;

    --stack-sm: 8px;

    --stack-lg: 16px;

    --grid-gap: 12px;

    --row-gap: 8px;

    --chrome-h: 44px;

    --tab-h: 40px;

  }

}

@media (min-width: 481px) and (max-width: 900px) {

  html.theme-modern {

    --gutter: 16px;

    --gutter-inner: 12px;

    --stack: 12px;

    --stack-lg: 20px;

    --grid-gap: 12px;

    --row-gap: 10px;

  }

}

@media (min-width: 901px) and (max-width: 1399px) {

  html.theme-modern {

    --gutter: 20px;

    --gutter-inner: 16px;

    --stack: 16px;

    --stack-lg: 24px;

    --grid-gap: 16px;

  }

}

@media (min-width: 1400px) and (max-width: 1799px) {

  html.theme-modern {

    --gutter: 28px;

    --gutter-inner: 16px;

    --stack: 16px;

    --stack-lg: 28px;

    --grid-gap: 16px;

  }

}

@media (min-width: 1800px) {

  html.theme-modern {

    --gutter: 32px;

    --gutter-inner: 20px;

    --stack: 20px;

    --stack-lg: 32px;

    --grid-gap: 20px;

    --row-gap: 12px;

  }

}



/* Topbar internals � even vertical + horizontal rhythm */

html.theme-modern body .brand {

  gap: var(--s-2) !important;

  align-items: center !important;

  min-width: 0 !important;

}

html.theme-modern body .topbar-right {

  gap: var(--s-2) !important;

  align-items: center !important;

  flex-wrap: wrap !important;

}

html.theme-modern body .topbar-right .tool,

html.theme-modern body .topbar-right .pill,

html.theme-modern body .topbar .ghost-tool {

  padding: 6px 12px !important;

  min-height: 32px !important;

  display: inline-flex !important;

  align-items: center !important;

  box-sizing: border-box !important;

}

html.theme-modern body #btn-theme {

  padding: 6px 14px !important;

  min-height: 32px !important;

  display: inline-flex !important;

  align-items: center !important;

}

html.theme-modern body #status-pill {

  padding: 6px 12px !important;

  min-height: 32px !important;

  display: inline-flex !important;

  align-items: center !important;

}



/* Active tab underline sits on the tab strip baseline */

html.theme-modern body .main-tabs button.active {

  border-bottom-width: 2px !important;

  border-bottom-style: solid !important;

  margin-bottom: 0 !important;

  padding-bottom: 0 !important;

}



/* Surfaces � uniform inner pad + radius */

html.theme-modern body .player-card,

html.theme-modern body .groupbox,

html.theme-modern body .settings-box,

html.theme-modern body .chat-panel,

html.theme-modern body .sheet,

html.theme-modern body .peer-main,

html.theme-modern body .panel.active,

html.theme-modern body .mn-browse,

html.theme-modern body .w2k-raised,

html.theme-modern body .w2k-sunken {

  padding: var(--gutter-inner) !important;

  border-radius: var(--radius) !important;

}

/* Player card: no extra outer pad � bevel handles inset */

html.theme-modern body .player-card {

  padding: var(--s-2) !important;

}

html.theme-modern body .player-bevel {

  padding: var(--s-1) !important;

  border-radius: var(--radius) !important;

}

html.theme-modern body .player-info,

html.theme-modern body .player-toolbar {

  padding: var(--s-2) var(--s-1) !important;

  gap: var(--control-gap) !important;

}

html.theme-modern body .player-toolbar {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  row-gap: var(--s-2) !important;

  column-gap: var(--control-gap) !important;

}



/* Panel heads � consistent baseline under titles */

html.theme-modern body .panel-head {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: var(--s-2) var(--s-3) !important;

  margin: 0 0 var(--stack) !important;

  padding: 0 0 var(--s-3) !important;

  border-bottom: 1px solid var(--stroke) !important;

}

html.theme-modern body .panel-head h2,

html.theme-modern body .mh-title,

html.theme-modern body .mn-side-title,

html.theme-modern body .groupbox-title,

html.theme-modern body .mh-row-title,

html.theme-modern body .ppv-section-title,

html.theme-modern body .live-section-title,

html.theme-modern body .section-title {

  margin: 0 0 var(--s-2) !important;

  padding: 0 !important;

  line-height: 1.3 !important;

}

html.theme-modern body .section-title {

  margin-top: var(--stack) !important;

  margin-bottom: var(--s-2) !important;

  padding-bottom: var(--s-2) !important;

  border-bottom: 1px solid var(--stroke) !important;

}

html.theme-modern body .panel-hint,

html.theme-modern body .lede {

  margin: 0 0 var(--s-3) !important;

}



/* Search / toolbar rows � single alignment track */

html.theme-modern body .row,

html.theme-modern body .toolbar,

html.theme-modern body .search-row,

html.theme-modern body .panel-tools,

html.theme-modern body .mh-search,

html.theme-modern body .live-search,

html.theme-modern body .mn-search,

html.theme-modern body .yt-search {

  display: flex !important;

  flex-wrap: wrap !important;

  align-items: center !important;

  gap: var(--control-gap) !important;

  margin: 0 0 var(--stack) !important;

}

html.theme-modern body .seg {

  gap: var(--s-1) !important;

  margin-bottom: var(--stack) !important;

  padding: var(--s-1) !important;

  border-radius: var(--radius-sm) !important;

}



/* Buttons & inputs � shared control height */

html.theme-modern body .btn,

html.theme-modern body .tool,

html.theme-modern body button.tool {

  min-height: 32px !important;

  padding: 6px 12px !important;

  border-radius: var(--radius-sm) !important;

  box-sizing: border-box !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: var(--s-2) !important;

}

html.theme-modern body .btn.sm,

html.theme-modern body .tool.sm {

  min-height: 28px !important;

  padding: 4px 10px !important;

}

html.theme-modern body .input,

html.theme-modern body input.input,

html.theme-modern body select.input,

html.theme-modern body textarea.input,

html.theme-modern body #peer-chat-input,

html.theme-modern body #live-q,

html.theme-modern body #mn-q,

html.theme-modern body #media-q,

html.theme-modern body #yt-q {

  min-height: 36px !important;

  padding: 8px 12px !important;

  border-radius: var(--radius-sm) !important;

  box-sizing: border-box !important;

}

html.theme-modern body textarea.input,

html.theme-modern body #peer-chat-input {

  min-height: 44px !important;

  padding: 10px 12px !important;

  line-height: 1.45 !important;

}



/* Grids & lists � even lattice */

html.theme-modern body .grid,

html.theme-modern body .results.grid,

html.theme-modern body .mh-grid,

html.theme-modern body .mn-grid,

html.theme-modern body .live-grid,

html.theme-modern body .cards {

  gap: var(--grid-gap) !important;

  margin: 0 0 var(--stack) !important;

}

html.theme-modern body .results.list,

html.theme-modern body .list,

html.theme-modern body .sheet-list {

  gap: var(--s-2) !important;

  display: flex !important;

  flex-direction: column !important;

}

html.theme-modern body .card,

html.theme-modern body .list-card,

html.theme-modern body .mh-card,

html.theme-modern body .mn-card,

html.theme-modern body .live-card {

  border-radius: var(--radius) !important;

  padding: var(--s-3) !important;

  box-sizing: border-box !important;

}



/* Horizontal media rows */

html.theme-modern body .mh-row,

html.theme-modern body .mh-rail,

html.theme-modern body .mn-rail {

  margin: 0 0 var(--stack-lg) !important;

}

html.theme-modern body .mh-row-head,

html.theme-modern body .mh-rail-head {

  display: flex !important;

  align-items: baseline !important;

  justify-content: space-between !important;

  gap: var(--s-3) !important;

  margin: 0 0 var(--s-3) !important;

  padding: 0 !important;

}

html.theme-modern body .mh-row-title,

html.theme-modern body .mh-rail-title {

  margin: 0 !important;

}



/* Chat + Movie Night � matched columns */

html.theme-modern body #panel-chat .chat-mn-layout {

  gap: var(--stack) !important;

  align-items: stretch !important;

}

html.theme-modern body #panel-chat .chat-mn-layout .peer-main,

html.theme-modern body #panel-chat .chat-mn-layout .peer-side.mn-side,

html.theme-modern body #panel-chat .chat-mn-layout .peer-side {

  padding: var(--gutter-inner) !important;

  box-sizing: border-box !important;

}

html.theme-modern body .peer-chat-log,

html.theme-modern body #panel-chat .peer-chat-log,

html.theme-modern body .chat-log {

  padding: var(--s-3) !important;

  border-radius: var(--radius-sm) !important;

}

html.theme-modern body .peer-chat-line,

html.theme-modern body .chat-line {

  padding: var(--s-1) 0 !important;

  gap: var(--s-2) !important;

}

html.theme-modern body .mn-section {

  margin: 0 0 var(--stack) !important;

}

html.theme-modern body .mn-now.mn-now-hero {

  padding: var(--s-3) !important;

  margin: 0 0 var(--stack) !important;

  border-radius: var(--radius) !important;

}

html.theme-modern body .mn-side-title {

  margin: 0 0 var(--s-3) !important;

}



/* Settings / forms */

html.theme-modern body .settings-box,

html.theme-modern body .groupbox {

  margin: 0 0 var(--stack) !important;

}

html.theme-modern body .field,

html.theme-modern body .form-row,

html.theme-modern body .settings-row {

  margin: 0 0 var(--s-3) !important;

  gap: var(--s-2) !important;

}

html.theme-modern body .field:last-child,

html.theme-modern body .form-row:last-child {

  margin-bottom: 0 !important;

}



/* Sticky chrome bottom edge aligns with content start (no double gap) */

html.theme-modern body .app-sticky-chrome {

  margin: 0 !important;

  padding: 0 !important;

}



/* Desktop: site chat open � keep player + chat centered on gutter grid */

@media (min-width: 901px) {

  html.theme-modern body.has-site-chat .player-col {

    padding: var(--stack) var(--gutter) var(--s-2) !important;

  }

  html.theme-modern body.has-site-chat .player-card,

  html.theme-modern body.has-site-chat #chat-panel:not(.hidden) {

    max-width: none !important;

    width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

  }

  html.theme-modern body.has-site-chat #chat-panel:not(.hidden) {

    margin-top: var(--s-2) !important;

  }

  html.theme-modern body.has-site-chat .content-col {

    padding: var(--stack) var(--gutter) var(--stack-lg) !important;

  }

  /* Movie Night + site chat: keep gutters tight in the 2-col grid */

  html.theme-modern body.tab-chat.has-site-chat .player-col {

    padding: var(--s-2) var(--s-2) var(--s-2) var(--gutter) !important;

  }

  html.theme-modern body.tab-chat.has-site-chat .player-card,

  html.theme-modern body.tab-chat.has-site-chat #chat-panel:not(.hidden) {

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

  }

  html.theme-modern body.tab-chat.has-site-chat .content-col {

    padding: 0 !important;

  }

}



/* Mobile / tablet: single column, safe-area, even stacks */

@media (max-width: 900px) {

  html.theme-modern body .topbar {

    padding: max(var(--s-2), env(safe-area-inset-top, 0px)) var(--gutter) var(--s-2) !important;

    min-height: 0 !important;

    flex-wrap: wrap !important;

  }

  html.theme-modern body .topbar .main-tabs,

  html.theme-modern body .main-tabs {

    padding: 4px 0 0 !important;

    min-height: 0 !important;

    flex: 1 1 100% !important;

    width: 100% !important;

    order: 3 !important;

  }

  html.theme-modern body .main-tabs button {

    min-height: calc(var(--tab-h) - 1px) !important;

    padding-left: var(--s-2) !important;

    padding-right: var(--s-2) !important;

  }

  html.theme-modern body .content-col {

    padding: var(--stack) var(--gutter) var(--stack-lg) !important;

    border-right: none !important;

  }

  /* Video flush to screen edges — max size on phones/tablets */

  html.theme-modern body .player-col {

    padding: 0 !important;

    border-right: none !important;

    border-bottom: 1px solid var(--stroke) !important;

  }

  html.theme-modern body .player-card {

    padding: 0 !important;

    margin: 0 !important;

    border-radius: 0 !important;

    border-left: none !important;

    border-right: none !important;

    box-shadow: none !important;

  }

  html.theme-modern body .player-bevel {

    padding: 0 !important;

    border: none !important;

    border-radius: 0 !important;

  }

  html.theme-modern body #player-wrap {

    border-radius: 0 !important;

    max-height: none !important;

    width: 100% !important;

    box-shadow: none !important;

  }

  html.theme-modern body .player-info,

  html.theme-modern body .player-toolbar {

    padding-left: var(--gutter) !important;

    padding-right: var(--gutter) !important;

  }

  html.theme-modern body .workspace {

    gap: 0 !important;

  }

  html.theme-modern body .panel-head {

    margin-bottom: var(--s-3) !important;

    padding-bottom: var(--s-2) !important;

  }

  html.theme-modern body .grid,

  html.theme-modern body .results.grid,

  html.theme-modern body .mh-grid,

  html.theme-modern body .mn-grid,

  html.theme-modern body .live-grid {

    gap: var(--grid-gap) !important;

  }

  html.theme-modern body #panel-chat .chat-mn-layout {

    gap: var(--s-3) !important;

  }

  html.theme-modern body #panel-chat .chat-mn-layout .peer-main,

  html.theme-modern body #panel-chat .chat-mn-layout .peer-side.mn-side,

  html.theme-modern body #panel-chat .chat-mn-layout .peer-side {

    padding: var(--gutter-inner) !important;

  }

}



/* Narrow phones � tighter but still on the 4px grid */

@media (max-width: 480px) {

  html.theme-modern body .topbar-right .tool,

  html.theme-modern body .topbar-right .pill {

    padding: 4px 8px !important;

    min-height: 28px !important;

  }

  html.theme-modern body .btn,

  html.theme-modern body .tool {

    min-height: 32px !important;

    padding: 6px 10px !important;

  }

  html.theme-modern body .card,

  html.theme-modern body .list-card,

  html.theme-modern body .mh-card {

    padding: var(--s-2) !important;

  }

  html.theme-modern body .panel.active,

  html.theme-modern body .groupbox,

  html.theme-modern body .peer-main {

    padding: var(--s-3) !important;

  }

  html.theme-modern body .player-card {

    padding: 0 !important;

  }

}



/* Ultrawide: keep content from stretching into a sparse void */

@media (min-width: 1800px) {

  html.theme-modern body .content-col .panel.active,

  html.theme-modern body .content-col .groupbox,

  html.theme-modern body .content-col .settings-box {

    max-width: 1600px !important;

  }

  html.theme-modern body .grid,

  html.theme-modern body .results.grid,

  html.theme-modern body .mh-grid {

    gap: var(--grid-gap) !important;

  }

}



/* Results sit flush under panel tools (no double stack) */

html.theme-modern body .panel.active .results,

html.theme-modern body .panel.active .grid,

html.theme-modern body .panel.active .list {

  margin-top: 0 !important;

}



/* Divider rhythm — 1px strokes only, never 2px mixed into modern chrome */

html.theme-modern body .panel-head,

html.theme-modern body .section-title,

html.theme-modern body .main-tabs,

html.theme-modern body .player-col {

  border-image: none !important;

}



/* ---------------------------------------------------------------------------

   Mobile: full-bleed video player (edge-to-edge, max size)

   --------------------------------------------------------------------------- */

@media (max-width: 900px) {

  /* No side inset on app shell — video spans true full width */

  #app {

    padding-left: 0 !important;

    padding-right: 0 !important;

  }



  .workspace,

  .player-col,

  .player-card {

    width: 100% !important;

    max-width: 100% !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

  }

  .player-col {

    padding: 0 !important;

  }

  .player-card {

    padding: 0 !important;

    border-radius: 0 !important;

    border-left-width: 0 !important;

    border-right-width: 0 !important;

    overflow: hidden !important;

  }

  .player-bevel {

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

  }

  #player-wrap {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 !important;

    border-radius: 0 !important;

    max-height: none !important;

    aspect-ratio: 16 / 9 !important;

    height: auto !important;

  }

  #player,

  #embed-frame {

    width: 100% !important;

    height: 100% !important;

  }

  /* Title/toolbar keep side inset; video itself is full-bleed */

  .player-info,

  .player-toolbar {

    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;

    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;

  }

  .topbar {

    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;

    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;

  }

  .main-tabs {

    padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;

    padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;

  }

  .content-col {

    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;

    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;

  }



  html.theme-modern body .player-col {

    padding: 0 !important;

  }

  html.theme-modern body .player-card {

    padding: 0 !important;

    border-radius: 0 !important;

    border-left: none !important;

    border-right: none !important;

  }

  html.theme-modern body .player-bevel {

    padding: 0 !important;

    border: none !important;

    border-radius: 0 !important;

  }

  html.theme-modern body #player-wrap {

    border-radius: 0 !important;

    max-height: none !important;

    width: 100% !important;

  }

  html.theme-modern body .player-info,

  html.theme-modern body .player-toolbar {

    padding-left: max(var(--gutter, 16px), env(safe-area-inset-left, 0px)) !important;

    padding-right: max(var(--gutter, 16px), env(safe-area-inset-right, 0px)) !important;

  }

  html.theme-modern body .content-col {

    padding-left: max(var(--gutter, 16px), env(safe-area-inset-left, 0px)) !important;

    padding-right: max(var(--gutter, 16px), env(safe-area-inset-right, 0px)) !important;

  }

  html.theme-modern body .topbar {

    padding-left: max(var(--gutter, 16px), env(safe-area-inset-left, 0px)) !important;

    padding-right: max(var(--gutter, 16px), env(safe-area-inset-right, 0px)) !important;

  }

  html.theme-modern body .main-tabs {

    padding-left: max(var(--gutter, 16px), env(safe-area-inset-left, 0px)) !important;

    padding-right: max(var(--gutter, 16px), env(safe-area-inset-right, 0px)) !important;

  }

}

/* ═══════════════════════════════════════════════════════════════════════════
   RETRO — clean classic.fishtank.live inspired theme
   Dark slate, cream yellow, gray borders, JetBrains Mono
   ═══════════════════════════════════════════════════════════════════════════ */
html.theme-retro {
  --ft-bg: #0e1012;
  --ft-panel: #191d21;
  --ft-raised: #1e2226;
  --ft-border: #505050;
  --ft-yellow: #f8ec94;
  --ft-red: #f30e00;
  --ft-white: #ffffff;
  --ft-muted: #aaaaaa;
  --ft-cyan: #7af6e9;
  --ft-green: #1b9a59;
  --font: "JetBrains Mono", ui-monospace, "Courier New", monospace;
  --mono: "JetBrains Mono", ui-monospace, "Courier New", monospace;
  --face: #191d21;
  --face-hover: #24292e;
  --face-press: #14181c;
  --field: #121518;
  --text: #ffffff;
  --muted: #aaaaaa;
  --faint: #707070;
  --line: #505050;
  --line-soft: #2b2d2e;
  --accent: #f8ec94;
  --accent-2: #f8ec94;
  --accent-hover: #fff6b0;
  --select: #f8ec94;
  --select-text: #0e1012;
  --danger: #f30e00;
  --ok: #1b9a59;
  --link: #7af6e9;
  --hi: #505050;
  --lo: #505050;
  --dk: #505050;
  --radius: 4px;
  --radius-sm: 4px;
  --shadow: none;
  --gutter: 16px;
  --stack: 12px;
  --pad: 12px;
}

html.theme-retro,
html.theme-retro body {
  background: var(--ft-bg) !important;
  background-image: none !important;
  color: var(--ft-white) !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}

/* subtle scanlines only */
html.theme-retro body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 10000 !important;
  opacity: 0.12 !important;
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0 1px,
    transparent 1px 3px
  ) !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  display: block !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
}
html.theme-retro body::after {
  content: none !important;
  display: none !important;
}

html.theme-retro body #app {
  background: transparent !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}
html.theme-retro body .noise { display: none !important; }

/* ── Top bar ── */
html.theme-retro body .app-sticky-chrome {
  background: var(--ft-panel) !important;
  border-bottom: 1px solid var(--ft-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html.theme-retro body .app-sticky-chrome::after { display: none !important; content: none !important; }

html.theme-retro body .topbar {
  background: var(--ft-panel) !important;
  border: none !important;
  min-height: 44px !important;
  padding: 6px 12px !important;
  gap: 10px !important;
  align-items: center !important;
}
html.theme-retro body .brand-text h1 {
  color: var(--ft-white) !important;
  -webkit-text-fill-color: var(--ft-white) !important;
  background: none !important;
  text-shadow: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
html.theme-retro body .brand-text h1::before { content: none !important; }
html.theme-retro body .brand-logo {
  border: 1px solid var(--ft-border) !important;
  border-radius: 2px !important;
  filter: none !important;
  box-shadow: none !important;
}

html.theme-retro body .topbar-right {
  margin-left: auto !important;
  gap: 6px !important;
}
html.theme-retro body .topbar-right .tool,
html.theme-retro body .topbar-right .pill,
html.theme-retro body .topbar .ghost-tool,
html.theme-retro body #btn-theme,
html.theme-retro body #status-pill,
html.theme-retro body #btn-logout {
  background: transparent !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  color: var(--ft-white) !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: -0.3px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
  padding: 4px 10px !important;
  min-height: 28px !important;
}
html.theme-retro body .topbar-right .tool:hover,
html.theme-retro body #btn-theme:hover,
html.theme-retro body #btn-logout:hover {
  border-color: var(--ft-yellow) !important;
  color: var(--ft-yellow) !important;
  background: rgba(248, 236, 148, 0.06) !important;
}
html.theme-retro body #btn-theme {
  border-color: var(--ft-yellow) !important;
  color: var(--ft-yellow) !important;
}
html.theme-retro body .pill.hosting-badge,
html.theme-retro body #mn-hosting-badge {
  background: rgba(243, 14, 0, 0.12) !important;
  color: var(--ft-red) !important;
  border: 1px solid rgba(243, 14, 0, 0.45) !important;
  animation: none !important;
  text-shadow: none !important;
}

/* Tabs in topbar */
html.theme-retro body .topbar .main-tabs,
html.theme-retro body .main-tabs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  gap: 4px !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-x: auto !important;
}
html.theme-retro body .main-tabs button {
  background: transparent !important;
  color: var(--ft-muted) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: -0.3px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  padding: 5px 10px !important;
  min-height: 28px !important;
  margin: 0 !important;
  box-shadow: none !important;
}
html.theme-retro body .main-tabs button:hover {
  color: var(--ft-white) !important;
  border-color: var(--ft-border) !important;
}
html.theme-retro body .main-tabs button.active {
  color: var(--ft-yellow) !important;
  border: 1px solid var(--ft-yellow) !important;
  background: rgba(248, 236, 148, 0.08) !important;
  text-shadow: none !important;
}

/* Workspace */
html.theme-retro body .workspace {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html.theme-retro body .player-col,
html.theme-retro body .content-col {
  background: transparent !important;
  border: none !important;
  padding: 12px 16px 16px !important;
}
html.theme-retro body .player-col {
  border-right: 1px solid var(--ft-border) !important;
}

/* Generic panels */
html.theme-retro body .player-card,
html.theme-retro body .groupbox,
html.theme-retro body .settings-box,
html.theme-retro body .chat-panel,
html.theme-retro body .sheet,
html.theme-retro body .panel.active,
html.theme-retro body .mn-browse,
html.theme-retro body .w2k-raised,
html.theme-retro body .w2k-sunken,
html.theme-retro body .card,
html.theme-retro body .list-card {
  background: var(--ft-panel) !important;
  background-image: none !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  color: var(--ft-white) !important;
  padding: 12px !important;
}
html.theme-retro body .player-card { padding: 8px !important; }

html.theme-retro body .groupbox-title,
html.theme-retro body .panel-head h2,
html.theme-retro body .mh-title,
html.theme-retro body .mn-side-title,
html.theme-retro body .section-title {
  color: var(--ft-white) !important;
  border: none !important;
  border-bottom: 1px solid var(--ft-border) !important;
  padding: 0 0 8px !important;
  margin: 0 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  background: none !important;
}
html.theme-retro body .groupbox-title::before,
html.theme-retro body .groupbox-title::after,
html.theme-retro body .panel-head h2::before,
html.theme-retro body .panel-head h2::after,
html.theme-retro body .section-title::before,
html.theme-retro body .section-title::after {
  content: none !important;
}
html.theme-retro body .panel-hint,
html.theme-retro body .muted,
html.theme-retro body .lede,
html.theme-retro body .now-sub,
html.theme-retro body #now-sub {
  color: var(--ft-muted) !important;
  text-shadow: none !important;
}
html.theme-retro body .now-title,
html.theme-retro body #now-playing {
  color: var(--ft-white) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* Player */
html.theme-retro body .player-bevel {
  background: #000 !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html.theme-retro body #player-wrap {
  border: none !important;
  border-radius: 0 !important;
  background: #000 !important;
  box-shadow: none !important;
}

/* Buttons */
html.theme-retro body .btn,
html.theme-retro body .tool,
html.theme-retro body button.tool {
  background: transparent !important;
  color: var(--ft-white) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
  min-height: 32px !important;
  padding: 6px 12px !important;
}
html.theme-retro body .btn:hover,
html.theme-retro body .tool:hover {
  border-color: var(--ft-yellow) !important;
  color: var(--ft-yellow) !important;
  background: rgba(248, 236, 148, 0.06) !important;
  box-shadow: none !important;
}
html.theme-retro body .btn.primary,
html.theme-retro body .tool.primary {
  background: rgba(248, 236, 148, 0.1) !important;
  color: var(--ft-yellow) !important;
  border: 1px solid var(--ft-yellow) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.theme-retro body .btn.primary:hover,
html.theme-retro body .tool.primary:hover {
  background: rgba(248, 236, 148, 0.18) !important;
  color: #fff !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
html.theme-retro body .btn.ghost,
html.theme-retro body .tool.ghost-tool,
html.theme-retro body .btn.sm.ghost {
  background: transparent !important;
  border-color: var(--ft-border) !important;
  color: var(--ft-muted) !important;
}
html.theme-retro body .main-tabs button {
  min-height: 28px !important;
  box-shadow: none !important;
}

/* Inputs (general) */
html.theme-retro body .input,
html.theme-retro body input.input,
html.theme-retro body select.input,
html.theme-retro body textarea.input,
html.theme-retro body #live-q,
html.theme-retro body #mn-q,
html.theme-retro body #media-q,
html.theme-retro body #yt-q {
  background: var(--field) !important;
  color: var(--ft-white) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  caret-color: var(--ft-yellow) !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  outline: none !important;
}
html.theme-retro body .input:focus,
html.theme-retro body input.input:focus {
  border-color: var(--ft-yellow) !important;
  box-shadow: none !important;
  outline: none !important;
}
html.theme-retro body .input::placeholder {
  color: var(--ft-muted) !important;
  opacity: 0.75 !important;
}

/* ═══════════════════════════════════════════════════════════
   CHAT — simple, clean, fishtank-inspired
   ═══════════════════════════════════════════════════════════ */

/* Hide avatars */
html.theme-retro body .chat-avatar,
html.theme-retro body .chat-avatar-emoji {
  display: none !important;
}

/* Online bar */
html.theme-retro body #chat-toolbar,
html.theme-retro body .chat-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  margin: 0 0 8px !important;
  background: var(--ft-panel) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
html.theme-retro body #chat-online-count,
html.theme-retro body #chat-online-inline {
  color: var(--ft-yellow) !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: -0.5px !important;
  text-transform: uppercase !important;
}
html.theme-retro body #chat-online-count::before { content: "[ " !important; }
html.theme-retro body #chat-online-count::after { content: " ]" !important; }

/* Main chat card: one clean box */
html.theme-retro body #panel-chat .peer-main,
html.theme-retro body #panel-chat .chat-main-box,
html.theme-retro body .groupbox.chat-main-box {
  display: flex !important;
  flex-direction: column !important;
  background: var(--ft-panel) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* Voice strip inside chat card */
html.theme-retro body #panel-chat .voice-bar,
html.theme-retro body #voice-bar {
  margin: 0 !important;
  padding: 8px 10px !important;
  background: var(--ft-raised) !important;
  border: none !important;
  border-bottom: 1px solid var(--ft-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.theme-retro body .voice-title {
  color: var(--ft-white) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.3px !important;
}
html.theme-retro body .voice-status {
  color: var(--ft-yellow) !important;
  text-transform: uppercase !important;
  font-weight: 300 !important;
}

/* Message log — fills the card, no extra border */
html.theme-retro body #panel-chat .peer-chat-log,
html.theme-retro body .peer-chat-log,
html.theme-retro body .chat-log,
html.theme-retro body #mn-chat-log {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  background: rgba(0, 0, 0, 0.45) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--ft-white) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
}

/* Messages */
html.theme-retro body .peer-chat-line,
html.theme-retro body .mn-chat-line,
html.theme-retro body .chat-line {
  display: block !important;
  margin: 0 !important;
  padding: 3px 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: 0 !important;
}
html.theme-retro body .peer-chat-line:hover,
html.theme-retro body .mn-chat-line:hover,
html.theme-retro body .chat-line:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}
html.theme-retro body .peer-chat-line .pc-main,
html.theme-retro body .mn-chat-line .pc-main {
  display: block !important;
  width: 100% !important;
}
html.theme-retro body .peer-chat-line .pc-head,
html.theme-retro body .mn-chat-line .pc-head {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

html.theme-retro body .pc-who,
html.theme-retro body .peer-chat-line .pc-who,
html.theme-retro body .mn-who,
html.theme-retro body .chat-line .u {
  display: inline !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  color: var(--ft-yellow) !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  text-shadow: none !important;
  cursor: pointer !important;
}
html.theme-retro body .pc-who::after,
html.theme-retro body .mn-who::after,
html.theme-retro body .chat-line .u::after {
  content: " " !important;
}
html.theme-retro body .pc-who:hover,
html.theme-retro body .mn-who:hover {
  color: #fff !important;
  text-decoration: underline !important;
  background: none !important;
}
html.theme-retro body .peer-chat-line .pc-who.role-admin { color: var(--ft-red) !important; }
html.theme-retro body .peer-chat-line .pc-who.role-mod { color: var(--ft-cyan) !important; }
html.theme-retro body .peer-chat-line .pc-who.role-host { color: var(--ft-green) !important; }

html.theme-retro body .pc-time,
html.theme-retro body .mn-time {
  display: inline !important;
  color: var(--ft-muted) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: -0.5px !important;
  margin-left: 6px !important;
  text-shadow: none !important;
}
html.theme-retro body .pc-time::before,
html.theme-retro body .pc-time::after,
html.theme-retro body .mn-time::before,
html.theme-retro body .mn-time::after {
  content: none !important;
}

html.theme-retro body .pc-body,
html.theme-retro body .peer-chat-line .pc-body,
html.theme-retro body .mn-chat-line .pc-body {
  display: block !important;
  color: var(--ft-white) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  word-break: break-word !important;
}

html.theme-retro body .peer-chat-line .badge,
html.theme-retro body .mn-chat-line .badge,
html.theme-retro body .tts-badge {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 0 5px !important;
  background: rgba(248, 236, 148, 0.1) !important;
  border: 1px solid rgba(248, 236, 148, 0.35) !important;
  border-radius: 2px !important;
  color: var(--ft-yellow) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.3px !important;
  box-shadow: none !important;
}
html.theme-retro body .peer-chat-line .badge::before,
html.theme-retro body .peer-chat-line .badge::after,
html.theme-retro body .tts-badge::before,
html.theme-retro body .tts-badge::after {
  content: none !important;
}

html.theme-retro body .chat-gif {
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  margin-top: 4px !important;
  background: #000 !important;
}

/* Reply bar */
html.theme-retro body #chat-reply-bar {
  margin: 0 !important;
  padding: 6px 10px !important;
  background: rgba(248, 236, 148, 0.08) !important;
  border: none !important;
  border-top: 1px solid var(--ft-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.theme-retro body .chat-reply-who { color: var(--ft-yellow) !important; }
html.theme-retro body .chat-reply-label,
html.theme-retro body .chat-reply-snip { color: var(--ft-muted) !important; }

/* Compose — clean single row, like a proper chat box footer */
html.theme-retro body .peer-chat-compose,
html.theme-retro body #peer-chat-compose {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  background: var(--ft-panel) !important;
  border: none !important;
  border-top: 1px solid var(--ft-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  order: initial !important;
}
html.theme-retro body .peer-chat-compose > * {
  order: initial !important;
}

/* Text field: sits in a quiet inset well */
html.theme-retro body #peer-chat-input,
html.theme-retro body .peer-chat-compose #peer-chat-input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  background: #0c0e10 !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: -0.2px !important;
  caret-color: var(--ft-yellow) !important;
  appearance: none !important;
}
html.theme-retro body #peer-chat-input:focus {
  border-color: var(--ft-yellow) !important;
  box-shadow: none !important;
  outline: none !important;
  background: #0c0e10 !important;
}
html.theme-retro body #peer-chat-input::placeholder {
  color: #aaa !important;
  opacity: 0.75 !important;
}

/* GIF / TTS chips */
html.theme-retro body #chat-gif-toggle,
html.theme-retro body .peer-chat-compose .chat-tts-check {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 10px !important;
  min-height: 36px !important;
  height: 36px !important;
  max-width: none !important;
  background: transparent !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  color: var(--ft-white) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
html.theme-retro body #chat-gif-toggle:hover,
html.theme-retro body .peer-chat-compose .chat-tts-check:hover {
  border-color: var(--ft-yellow) !important;
  color: var(--ft-yellow) !important;
  background: transparent !important;
}
html.theme-retro body .peer-chat-compose .chat-tts-check input {
  accent-color: var(--ft-yellow) !important;
  margin-right: 4px !important;
}

/* Send button — yellow outline, compact */
html.theme-retro body #peer-chat-send,
html.theme-retro body #peer-chat-send.btn,
html.theme-retro body #peer-chat-send.btn.primary,
html.theme-retro body #peer-chat-send.btn.primary.sm {
  all: unset !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  background: rgba(248, 236, 148, 0.1) !important;
  border: 1px solid var(--ft-yellow) !important;
  border-radius: 4px !important;
  color: var(--ft-yellow) !important;
  font-family: var(--font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
html.theme-retro body #peer-chat-send:hover {
  background: rgba(248, 236, 148, 0.2) !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* GIF picker / TTS options inside card */
html.theme-retro body .chat-gif-picker,
html.theme-retro body .tts-options {
  margin: 0 !important;
  padding: 8px 10px !important;
  background: var(--ft-raised) !important;
  border: none !important;
  border-top: 1px solid var(--ft-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.theme-retro body .admin-chip,
html.theme-retro body .chat-gif-chips .admin-chip {
  background: transparent !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  color: var(--ft-white) !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.3px !important;
  box-shadow: none !important;
}
html.theme-retro body .admin-chip:hover {
  border-color: var(--ft-yellow) !important;
  color: var(--ft-yellow) !important;
}

/* Stream chat under player */
html.theme-retro body .chat-line .u {
  color: var(--ft-yellow) !important;
  font-weight: 700 !important;
}
html.theme-retro body .chat-line .t {
  color: var(--ft-white) !important;
  font-weight: 600 !important;
}

/* MN side */
html.theme-retro body.tab-chat #panel-chat .peer-side.mn-side,
html.theme-retro body .mn-now.mn-now-hero {
  background: var(--ft-panel) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Scrollbars */
html.theme-retro body *::-webkit-scrollbar { width: 6px; height: 6px; }
html.theme-retro body *::-webkit-scrollbar-track { background: transparent; }
html.theme-retro body *::-webkit-scrollbar-thumb {
  background: #505050 !important;
  border-radius: 2px;
}
html.theme-retro body *::-webkit-scrollbar-thumb:hover {
  background: #f8ec94 !important;
}

html.theme-retro body ::selection {
  background: rgba(248, 236, 148, 0.35) !important;
  color: #fff !important;
}

/* Mobile */
@media (max-width: 900px) {
  html.theme-retro body .player-col {
    padding: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ft-border) !important;
  }
  html.theme-retro body .player-card {
    padding: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
  }
  html.theme-retro body .player-bevel {
    border-left: none !important;
    border-right: none !important;
    border-radius: 0 !important;
  }
  html.theme-retro body .content-col {
    padding: 10px 12px 14px !important;
  }
  html.theme-retro body .peer-chat-compose {
    flex-wrap: wrap !important;
  }
  html.theme-retro body #peer-chat-input {
    flex: 1 1 100% !important;
  }
}


/* Voice bar layout — clean single strip */
#panel-chat .voice-bar,
#panel-chat .voice-bar.compact,
.voice-bar,
.voice-bar.compact {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

#panel-chat .voice-bar-row,
.voice-bar-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
}

#panel-chat .voice-bar-meta,
.voice-bar-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#panel-chat .voice-title,
.voice-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

#panel-chat .voice-status,
.voice-status {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
}

#panel-chat .voice-https-hint,
.voice-https-hint {
  font-size: 10px !important;
  line-height: 1.2 !important;
  opacity: 0.8 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px !important;
  margin: 0 !important;
}

#panel-chat .voice-actions-inline,
.voice-actions-inline {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

#panel-chat .voice-actions-inline .btn,
.voice-actions-inline .btn {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#panel-chat .voice-peers,
.voice-peers {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 4px !important;
  max-height: 96px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
}

#panel-chat .voice-peers.hidden,
.voice-peers.hidden,
#panel-chat .voice-peers[hidden],
.voice-peers[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  min-height: 0 !important;
  max-height: 0 !important;
}

#panel-chat .voice-peer-row,
.voice-peer-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  border-radius: 4px !important;
  min-height: 28px !important;
  box-sizing: border-box !important;
}

#panel-chat .voice-peer-name,
.voice-peer-name {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

#panel-chat .voice-peer-flags,
.voice-peer-flags {
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  opacity: 0.8 !important;
}

#panel-chat .voice-peer-row .btn,
.voice-peer-row .btn {
  min-height: 24px !important;
  height: 24px !important;
  padding: 0 8px !important;
  font-size: 10px !important;
  margin: 0 !important;
}

#panel-chat .voice-hint,
#panel-chat #voice-hint,
.voice-hint {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  opacity: 0.85 !important;
}

#panel-chat .voice-hint.hidden,
#panel-chat #voice-hint.hidden,
.voice-hint.hidden,
#panel-chat #voice-hint[hidden],
.voice-hint[hidden] {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Theme: light defaults already ok via face vars */
/* Theme: dark */
html.theme-dark body #panel-chat .voice-bar,
html.theme-dark body .voice-bar {
  background: #141b2a !important;
  border: 1px solid #2e3850 !important;
  color: #e8ecf4 !important;
}
html.theme-dark body #panel-chat .voice-title,
html.theme-dark body .voice-title { color: #f0f4fc !important; }
html.theme-dark body #panel-chat .voice-status,
html.theme-dark body .voice-status {
  color: #9dffc0 !important;
  background: rgba(109, 222, 160, 0.1) !important;
  border-color: rgba(109, 222, 160, 0.28) !important;
}
html.theme-dark body #panel-chat .voice-status.muted-me,
html.theme-dark body .voice-status.muted-me {
  color: #ffb38a !important;
  background: rgba(255, 160, 100, 0.1) !important;
  border-color: rgba(255, 160, 100, 0.28) !important;
}
html.theme-dark body #panel-chat .voice-peers,
html.theme-dark body .voice-peers {
  background: #0c111b !important;
  border: 1px solid #2e3850 !important;
}
html.theme-dark body #panel-chat .voice-peer-row,
html.theme-dark body .voice-peer-row {
  background: transparent !important;
  border: none !important;
  color: #e8ecf4 !important;
}
html.theme-dark body #panel-chat .voice-peer-row.me,
html.theme-dark body .voice-peer-row.me {
  background: rgba(76, 141, 255, 0.12) !important;
}

/* Theme: modern */
html.theme-modern body #panel-chat .voice-bar,
html.theme-modern body .voice-bar {
  background: rgba(22, 24, 32, 0.9) !important;
  border: 1px solid rgba(236, 232, 224, 0.1) !important;
}
html.theme-modern body #panel-chat .voice-title,
html.theme-modern body .voice-title { color: #f4f1ea !important; }
html.theme-modern body #panel-chat .voice-status,
html.theme-modern body .voice-status {
  color: #c9a227 !important;
  background: rgba(201, 162, 39, 0.12) !important;
  border-color: rgba(201, 162, 39, 0.28) !important;
}
html.theme-modern body #panel-chat .voice-peers,
html.theme-modern body .voice-peers {
  background: rgba(10, 12, 18, 0.65) !important;
  border: 1px solid rgba(236, 232, 224, 0.08) !important;
}
html.theme-modern body #panel-chat .voice-peer-row,
html.theme-modern body .voice-peer-row {
  background: transparent !important;
  border: none !important;
  color: #f4f1ea !important;
}
html.theme-modern body #panel-chat .voice-peer-row.me,
html.theme-modern body .voice-peer-row.me {
  background: rgba(107, 140, 206, 0.14) !important;
}

/* Theme: retro (fishtank slate) */
html.theme-retro body #panel-chat .voice-bar,
html.theme-retro body .voice-bar {
  background: #1e2226 !important;
  border: none !important;
  border-bottom: 1px solid #505050 !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
}
html.theme-retro body #panel-chat .voice-title,
html.theme-retro body .voice-title {
  color: #fff !important;
  letter-spacing: -0.3px !important;
}
html.theme-retro body #panel-chat .voice-status,
html.theme-retro body .voice-status {
  color: #f8ec94 !important;
  background: rgba(248, 236, 148, 0.1) !important;
  border-color: rgba(248, 236, 148, 0.3) !important;
  border-radius: 4px !important;
}
html.theme-retro body #panel-chat .voice-status.muted-me,
html.theme-retro body .voice-status.muted-me {
  color: #e47327 !important;
  background: rgba(228, 115, 39, 0.12) !important;
  border-color: rgba(228, 115, 39, 0.35) !important;
}
html.theme-retro body #panel-chat .voice-peers,
html.theme-retro body .voice-peers {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid #505050 !important;
  border-radius: 4px !important;
}
html.theme-retro body #panel-chat .voice-peer-row,
html.theme-retro body .voice-peer-row {
  background: transparent !important;
  border: none !important;
  color: #fff !important;
}
html.theme-retro body #panel-chat .voice-peer-row.me,
html.theme-retro body .voice-peer-row.me {
  background: rgba(248, 236, 148, 0.08) !important;
}
html.theme-retro body #panel-chat .voice-peer-flags,
html.theme-retro body .voice-peer-flags {
  color: #aaa !important;
}

@media (max-width: 700px) {
  #panel-chat .voice-bar-row,
  .voice-bar-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  #panel-chat .voice-actions-inline,
  .voice-actions-inline {
    width: 100% !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
  }
  #panel-chat .voice-https-hint,
  .voice-https-hint {
    max-width: 100% !important;
  }
}


/* Live Streams Netflix-style shelves */
.live-tools-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
}
.live-tools-row .input {
  min-width: 120px !important;
  max-width: 200px !important;
  flex: 1 1 140px !important;
}
.live-tools-sep {
  width: 1px !important;
  height: 22px !important;
  background: var(--line, #505050) !important;
  opacity: 0.55 !important;
  margin: 0 4px !important;
  flex: 0 0 auto !important;
}

#live-browse.mh-browse,
.live-browse {
  padding: 0 0 28px !important;
}
#live-rows.mh-rows,
#results-live,
#results-livetv,
#results-ppv {
  display: block !important;
}
#results-live .empty-state,
#results-livetv .empty-state,
#results-ppv .empty-state {
  padding: 16px 12px !important;
}

/* Landscape stream tiles (vs portrait movie posters) */
.live-mh-card.mh-card {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  position: relative !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  color: inherit !important;
  font: inherit !important;
}
.live-mh-card .live-mh-thumb,
.live-mh-card .mh-card-img {
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  background: #12141a !important;
  display: block !important;
}
.live-mh-card .mh-card-title {
  font-size: 12px !important;
  line-height: 1.25 !important;
  margin-top: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.live-mh-card .mh-card-sub {
  font-size: 10px !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  opacity: 0.9 !important;
}
.live-mh-card .mh-card-meta {
  position: absolute !important;
  top: 6px !important;
  left: 6px !important;
  right: 6px !important;
  display: flex !important;
  justify-content: space-between !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

#live-hero.mh-hero {
  margin-bottom: 12px !important;
}

html.theme-dark body .live-mh-card .mh-card-ph,
html.theme-modern body .live-mh-card .mh-card-ph,
html.theme-retro body .live-mh-card .mh-card-ph {
  background: linear-gradient(145deg, #2a2e38, #12141a) !important;
}

html.theme-retro body .live-tools-sep {
  background: #505050 !important;
}

@media (max-width: 700px) {
  .live-mh-card.mh-card {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
  }
  .live-tools-row .input {
    max-width: none !important;
    flex: 1 1 100% !important;
  }
  .live-tools-sep {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MODERN — readable text cascade
   Kill leftover light-theme black / navy / gray that fights the dark face.
   Uniform hierarchy: primary → muted → faint.
   ═══════════════════════════════════════════════════════════════════════════ */

html.theme-modern body {
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Shell surfaces inherit light text */
html.theme-modern body #app,
html.theme-modern body .workspace,
html.theme-modern body .player-col,
html.theme-modern body .content-col,
html.theme-modern body .panel,
html.theme-modern body .panel.active,
html.theme-modern body .groupbox,
html.theme-modern body .settings-box,
html.theme-modern body .peer-main,
html.theme-modern body .chat-main-box,
html.theme-modern body .mn-browse,
html.theme-modern body .chat-panel,
html.theme-modern body .sheet,
html.theme-modern body .player-card,
html.theme-modern body .player-info,
html.theme-modern body .player-toolbar,
html.theme-modern body .topbar,
html.theme-modern body .main-tabs {
  color: var(--text) !important;
}

/* Labels, fields, checks — base theme forces #000 */
html.theme-modern body label,
html.theme-modern body .field,
html.theme-modern body .field-label,
html.theme-modern body .filter-label,
html.theme-modern body .check,
html.theme-modern body .form-row,
html.theme-modern body .settings-row,
html.theme-modern body .auth-form label,
html.theme-modern body .tts-rate-label,
html.theme-modern body .chat-tts-check,
html.theme-modern body .music-len-label,
html.theme-modern body .subs-offset-label {
  color: var(--text) !important;
}

/* Secondary / meta — one muted tone everywhere */
html.theme-modern body .muted,
html.theme-modern body .panel-hint,
html.theme-modern body .lede,
html.theme-modern body .now-sub,
html.theme-modern body #now-sub,
html.theme-modern body .card .sub,
html.theme-modern body .mh-card-meta,
html.theme-modern body .mn-vote-sub,
html.theme-modern body .mn-result-hint,
html.theme-modern body .mn-now-meta,
html.theme-modern body .mn-now-kicker,
html.theme-modern body .chat-online-count,
html.theme-modern body .chat-status,
html.theme-modern body #chat-status,
html.theme-modern body .voice-https-hint,
html.theme-modern body .voice-hint,
html.theme-modern body #voice-hint,
html.theme-modern body .tts-status,
html.theme-modern body .tts-hint,
html.theme-modern body #tts-hint,
html.theme-modern body #music-hint,
html.theme-modern body #music-status,
html.theme-modern body #peer-chat-status,
html.theme-modern body #mn-search-status,
html.theme-modern body #mn-status,
html.theme-modern body .pc-time,
html.theme-modern body .peer-chat-line .pc-time,
html.theme-modern body .pc-house,
html.theme-modern body .voice-peer-flags,
html.theme-modern body .empty-state,
html.theme-modern body #player-empty,
html.theme-modern body #player-empty div:not(.empty-icon) {
  color: var(--muted) !important;
  opacity: 1 !important;
}

/* Tertiary */
html.theme-modern body .faint,
html.theme-modern body .input::placeholder,
html.theme-modern body input::placeholder,
html.theme-modern body textarea::placeholder {
  color: var(--faint) !important;
  opacity: 1 !important;
}

/* Primary titles / body copy */
html.theme-modern body h1,
html.theme-modern body h2,
html.theme-modern body h3,
html.theme-modern body .now-title,
html.theme-modern body #now-playing,
html.theme-modern body .card .title,
html.theme-modern body .mh-card-title,
html.theme-modern body .mn-vote-title,
html.theme-modern body .mh-hero-title,
html.theme-modern body .mn-now-title,
html.theme-modern body #mn-now-title,
html.theme-modern body .panel-head h2,
html.theme-modern body .section-title,
html.theme-modern body .groupbox-title,
html.theme-modern body .mh-row-title,
html.theme-modern body .mh-title,
html.theme-modern body .mn-side-title,
html.theme-modern body .ppv-section-title,
html.theme-modern body .live-section-title,
html.theme-modern body .chat-head,
html.theme-modern body .chat-head-title,
html.theme-modern body .voice-title,
html.theme-modern body .brand-text h1 {
  color: var(--text) !important;
}

/* Buttons & tools — never black on dark chrome */
html.theme-modern body .btn,
html.theme-modern body .tool,
html.theme-modern body button.tool,
html.theme-modern body button.btn,
html.theme-modern body .main-tabs button,
html.theme-modern body .topbar-right .tool,
html.theme-modern body .topbar-right .pill,
html.theme-modern body .topbar .ghost-tool,
html.theme-modern body .admin-chip,
html.theme-modern body .ghost-tool {
  color: var(--text) !important;
}

html.theme-modern body .main-tabs button {
  color: var(--muted) !important;
}

html.theme-modern body .main-tabs button:hover,
html.theme-modern body .main-tabs button.active {
  color: var(--text) !important;
}

html.theme-modern body .btn.primary,
html.theme-modern body .tool.primary,
html.theme-modern body button.btn.primary {
  color: #f8f5ef !important;
}

html.theme-modern body .btn.ghost,
html.theme-modern body .tool.ghost-tool,
html.theme-modern body .btn.sm.ghost {
  color: var(--text) !important;
}

/* Inputs */
html.theme-modern body .input,
html.theme-modern body input,
html.theme-modern body select,
html.theme-modern body textarea,
html.theme-modern body input.input,
html.theme-modern body select.input,
html.theme-modern body textarea.input,
html.theme-modern body #peer-chat-input,
html.theme-modern body #chat-input,
html.theme-modern body #live-q,
html.theme-modern body #mn-q,
html.theme-modern body #media-q,
html.theme-modern body #yt-q {
  color: var(--text) !important;
  caret-color: var(--text) !important;
}

html.theme-modern body option {
  background: var(--field) !important;
  color: var(--text) !important;
}

/* Stream site chat — base uses navy / black */
html.theme-modern body .chat-log,
html.theme-modern body #chat-log {
  color: var(--text) !important;
  background: rgba(12, 14, 20, 0.92) !important;
}

html.theme-modern body .chat-line {
  background: transparent !important;
  color: var(--text) !important;
}

html.theme-modern body .chat-line:nth-child(even) {
  background: rgba(236, 232, 224, 0.04) !important;
}

html.theme-modern body .chat-line .u,
html.theme-modern body .chat-line .u::after {
  color: #a8c4f0 !important;
}

html.theme-modern body .chat-line .t {
  color: var(--text) !important;
}

/* Movie Night peer chat */
html.theme-modern body .peer-chat-log,
html.theme-modern body #panel-chat .peer-chat-log {
  color: var(--text) !important;
}

html.theme-modern body .peer-chat-line,
html.theme-modern body .mn-chat-line {
  color: var(--text) !important;
}

html.theme-modern body .pc-body,
html.theme-modern body .peer-chat-line .pc-body,
html.theme-modern body .peer-chat-line > div.pc-body,
html.theme-modern body .mn-chat-line .pc-body {
  color: var(--text) !important;
}

html.theme-modern body .pc-who,
html.theme-modern body .peer-chat-line .pc-who,
html.theme-modern body .mn-who {
  color: #b4caf0 !important;
}

/* Role accents — light enough on dark graphite */
html.theme-modern body .pc-who.role-admin,
html.theme-modern body .peer-chat-line .pc-who.role-admin {
  color: #f0a0a0 !important;
}

html.theme-modern body .pc-who.role-mod,
html.theme-modern body .peer-chat-line .pc-who.role-mod {
  color: #9ec0f5 !important;
}

html.theme-modern body .pc-who.role-host,
html.theme-modern body .peer-chat-line .pc-who.role-host {
  color: #8fd4a8 !important;
}

html.theme-modern body .peer-chat-line.muted,
html.theme-modern body .peer-chat-line .muted {
  color: var(--muted) !important;
}

/* Links */
html.theme-modern body a,
html.theme-modern body .link {
  color: var(--link) !important;
}

html.theme-modern body a:hover {
  color: #b8d0f5 !important;
}

/* Admin / lists that ship with light-theme dark type */
html.theme-modern body .admin-user-card,
html.theme-modern body .admin-user-name,
html.theme-modern body .admin-user-meta,
html.theme-modern body .admin-user-roles,
html.theme-modern body .list-item,
html.theme-modern body .queue-item,
html.theme-modern body .lib-item,
html.theme-modern body .row-title,
html.theme-modern body .row-sub,
html.theme-modern body .sheet-list,
html.theme-modern body .sheet-head,
html.theme-modern body .sheet-head strong {
  color: var(--text) !important;
}

html.theme-modern body .admin-user-meta,
html.theme-modern body .row-sub,
html.theme-modern body .list-item .sub {
  color: var(--muted) !important;
}

/* Badges / pills */
html.theme-modern body .badge,
html.theme-modern body .pill,
html.theme-modern body #status-pill {
  color: var(--text) !important;
}

html.theme-modern body #status-pill {
  color: var(--muted) !important;
}

/* Empty player */
html.theme-modern body #player-empty {
  color: var(--muted) !important;
}

html.theme-modern body #player-empty .empty-icon {
  color: var(--text) !important;
  opacity: 0.85 !important;
}

/* Selects / range labels */
html.theme-modern body .tts-val,
html.theme-modern body #tts-rate-val,
html.theme-modern body #tts-volume-val,
html.theme-modern body #music-duration-val {
  color: var(--muted) !important;
}

/* Ensure selection remains readable */
html.theme-modern body ::selection {
  background: rgba(201, 162, 39, 0.35) !important;
  color: #fffdf6 !important;
}