/* ══════════════════════════════════════════════════════════════════════
   WPZ DARK MODE
   Loaded last so it wins over styles.css and the inline <style> blocks.
   Everything is scoped to html[data-theme="dark"], so light mode is
   byte-for-byte unchanged when the attribute is absent.

   Strategy, in layers:
     1. Re-point the design tokens (covers every var()-driven surface).
     2. Neutralise the "liquid glass" whites structurally — the app has
        ~500 hardcoded rgba(255,255,255,x) backgrounds across panels,
        cards, windows, bubbles, menus and inputs.
     3. Fix text/border colors that were tuned for a white background.
     4. Keep brand color, media and emoji untouched.
   ══════════════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  /* Neutral charcoal palette anchored on the user's reference swatch
     #1b1b1c (Aug 2026) — replaced the original navy family. */
  --surface: rgba(30, 30, 31, 0.95);
  --surface-strong: rgba(25, 25, 26, 0.985);
  --surface-soft: #161617;
  --surface-tint: #232324;
  --border: rgba(255, 255, 255, 0.09);
  --text: #ececee;
  --muted: #a0a0a6;
  --shadow: 0 22px 52px rgba(0, 0, 0, 0.55);
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.4);
  --blue-dark: #6aaef0;
  --blue-soft: #1e1f22;
  --online: #41c16b;
  --accent: linear-gradient(135deg, #2c405a 0%, #223349 100%);
  --accent-ink: #dce9f7;
  --bubble: rgba(34, 34, 36, 0.98);
  --bubble-own: #252f3d;
  --bubble-system: #202021;

  /* Dark-mode palette used by the rules below. */
  --d-bg: #141415;
  --d-panel: #1b1b1c;
  --d-panel-2: #222223;
  --d-raised: #2a2a2c;
  --d-line: rgba(255, 255, 255, 0.09);
  --d-line-soft: rgba(255, 255, 255, 0.06);
  --d-ink: #ececee;
  --d-ink-soft: #c3c3c8;
  --d-ink-mute: #939399;
  --d-accent: #5aa7ff;

  color-scheme: dark;
}

/* ── 1. Page canvas ─────────────────────────────────────────────────── */
html[data-theme="dark"] body{
  color: var(--d-ink);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #161617 0%, #111112 100%);
}

/* ── 2. Glass surfaces ──────────────────────────────────────────────────
   Broad structural sweep: any element whose class marks it as a surface
   gets the dark panel treatment. Background-image is cleared so the
   light gradients don't shine through; specific components refine below. */
html[data-theme="dark"] [class*="panel"],
html[data-theme="dark"] [class*="card"],
html[data-theme="dark"] [class*="window"],
html[data-theme="dark"] [class*="modal"],
html[data-theme="dark"] [class*="popup"],
html[data-theme="dark"] [class*="menu"],
html[data-theme="dark"] [class*="dropdown"],
html[data-theme="dark"] [class*="sheet"],
html[data-theme="dark"] [class*="tray"],
html[data-theme="dark"] [class*="drawer"],
html[data-theme="dark"] [class*="tooltip"],
html[data-theme="dark"] [class*="reader"],
html[data-theme="dark"] [class*="-box"],
html[data-theme="dark"] [class*="section"]{
  background-image: none;
  background-color: var(--d-panel);
  border-color: var(--d-line);
  color: var(--d-ink);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* Rows, list items, chips, pills: one step lighter than their container. */
html[data-theme="dark"] [class*="item"],
html[data-theme="dark"] [class*="row"],
html[data-theme="dark"] [class*="chip"],
html[data-theme="dark"] [class*="pill"],
html[data-theme="dark"] [class*="tile"]:not([class*="title"]),
html[data-theme="dark"] [class*="entry"],
html[data-theme="dark"] [class*="bubble"],
html[data-theme="dark"] [class*="field"]{
  background-image: none;
  border-color: var(--d-line-soft);
  color: var(--d-ink);
}
/* …but only paint a background where the light theme had one. */
html[data-theme="dark"] [class*="item"]:not([class*="empty"]),
html[data-theme="dark"] [class*="chip"],
html[data-theme="dark"] [class*="pill"],
html[data-theme="dark"] [class*="tile"]:not([class*="title"]),
html[data-theme="dark"] [class*="bubble"]:not([class*="wrap"]){
  background-color: var(--d-panel-2);
}
/* Layout wrappers must stay transparent — painting them creates blocks.
   These selectors match on a SUBSTRING, so a container merely named after
   what it contains gets caught: .pm-bubble-wrap holds the meta row and the
   bubble, and was painted as though it were a bubble itself, drawing a grey
   slab behind every own-message row in the PM window. Anything *-wrap is a
   container by convention. */
html[data-theme="dark"] [class*="wrap"]:not([class*="card"]):not([class*="panel"]),
html[data-theme="dark"] [class*="row"]:not([class*="item"]):not([class*="bubble"]):not([class*="card"]),
html[data-theme="dark"] [class*="section"]:not([class*="card"]),
html[data-theme="dark"] .message-row,
html[data-theme="dark"] .message-stack,
html[data-theme="dark"] .message-meta,
html[data-theme="dark"] .message-tools,
html[data-theme="dark"] .message-reactions,
html[data-theme="dark"] .support-msg-row,
html[data-theme="dark"] .social-pm-msg,
html[data-theme="dark"] .pm-float-row{
  background-color: transparent;
  box-shadow: none;
}

/* ── 3. Chat surfaces ───────────────────────────────────────────────── */
html[data-theme="dark"] .chat-shell,
html[data-theme="dark"] .chat-main,
html[data-theme="dark"] .message-log,
html[data-theme="dark"] .rooms-panel,
html[data-theme="dark"] .roster-panel,
html[data-theme="dark"] .room-header,
html[data-theme="dark"] .message-form,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .app-header{
  background-image: none;
  background-color: var(--d-panel);
  border-color: var(--d-line);
  color: var(--d-ink);
}
html[data-theme="dark"] .message-bubble{
  background-color: var(--d-panel-2) !important;
  color: var(--d-ink);
  border-color: var(--d-line-soft);
}
html[data-theme="dark"] .message-row.is-own .message-bubble{
  background-color: #252f3d !important;
}
html[data-theme="dark"] .message-system-card{
  background-color: var(--d-panel-2) !important;
  color: var(--d-ink);
}
html[data-theme="dark"] .message-byline,
html[data-theme="dark"] .message-time,
html[data-theme="dark"] .message-system-time{
  color: var(--d-ink-mute);
}
html[data-theme="dark"] .message-user{ color: var(--d-ink); }
html[data-theme="dark"] .room-item,
html[data-theme="dark"] .roster-item{
  background-color: var(--d-panel-2);
  color: var(--d-ink);
}
html[data-theme="dark"] .room-item.is-active,
html[data-theme="dark"] .room-item:hover,
html[data-theme="dark"] .roster-item:hover{
  background-color: var(--d-raised);
}

/* ── 4. Inputs & buttons ────────────────────────────────────────────── */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background-color: #161617 !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{ color: #7d90a5 !important; }
html[data-theme="dark"] button{
  color: var(--d-ink);
}
html[data-theme="dark"] .theme-button,
html[data-theme="dark"] .wpz-inbox-icon-btn,
html[data-theme="dark"] .support-action-btn,
html[data-theme="dark"] .message-tool,
html[data-theme="dark"] .message-edit-btn,
html[data-theme="dark"] .message-delete-btn{
  background-image: none;
  background-color: var(--d-raised);
  border-color: var(--d-line);
  color: var(--d-ink);
}
html[data-theme="dark"] .theme-button:hover,
html[data-theme="dark"] .message-tool:hover{
  background-color: #2e2e30;
}
/* Primary/accent actions keep their blue identity. */
html[data-theme="dark"] button[type="submit"],
html[data-theme="dark"] .wpz-announce-btn-primary,
html[data-theme="dark"] .wpz-announce-btn-link,
html[data-theme="dark"] .vip-channels-item-join,
html[data-theme="dark"] .merch-buy-btn,
html[data-theme="dark"] .monthly-support-cta{
  background-image: linear-gradient(135deg, #4a93ff 0%, #2f6fd0 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Composer Send goes flat solid blue + semibold (owner's pick, Aug 2026)
   — sampled #5387e8; hover a touch darker instead of the gradient lift. */
html[data-theme="dark"] .message-form button[type="submit"]{
  background-image: none !important;
  background-color: #5387e8 !important;
  color: #fff !important;
  font-weight: 600;
}
html[data-theme="dark"] .message-form button[type="submit"]:hover{
  background-color: #4a7cd9 !important;
}

/* ── 5. Typography contrast ─────────────────────────────────────────── */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] b,
html[data-theme="dark"] label,
html[data-theme="dark"] p,
html[data-theme="dark"] span:not([class*="ico"]):not([class*="badge"]):not([class*="avatar"]),
html[data-theme="dark"] div{
  color: inherit;
}
html[data-theme="dark"] [style*="color: #17334d"],
html[data-theme="dark"] [style*="color:#17334d"],
html[data-theme="dark"] [style*="color: #1c3a5c"],
html[data-theme="dark"] [style*="color:#1c3a5c"],
html[data-theme="dark"] [style*="color: #16202c"],
html[data-theme="dark"] [style*="color:#16202c"]{
  color: var(--d-ink) !important;
}
/* Inline light backgrounds from generated markup. */
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background:white"]{
  background-color: var(--d-panel-2) !important;
}

/* ── 6. Things that must NOT be recolored ───────────────────────────── */
html[data-theme="dark"] .wpz-social-ico,
html[data-theme="dark"] .wpz-social-ico svg,
html[data-theme="dark"] .message-avatar,
html[data-theme="dark"] [class*="avatar"],
html[data-theme="dark"] .wpz-custom-emoji,
html[data-theme="dark"] .emoji-popup-chip,
html[data-theme="dark"] .wpz-vip-badge,
html[data-theme="dark"] .wpz-owner-badge,
html[data-theme="dark"] .wpz-pop-badge,
html[data-theme="dark"] .wpz-verified-badge,
html[data-theme="dark"] .wpz-champagne-banner,
html[data-theme="dark"] .wpz-thanks-window,
html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] iframe{
  background-image: revert;
}
html[data-theme="dark"] .message-avatar,
html[data-theme="dark"] .social-avatar,
html[data-theme="dark"] .vip-call-avatar,
html[data-theme="dark"] .wpz-avatar{
  color: #fff;
}
/* Celebration strips keep their gold/blue identity, just darker glass. */
html[data-theme="dark"] .wpz-champagne-banner{
  background-image: linear-gradient(135deg, rgba(84, 62, 12, 0.9), rgba(52, 40, 12, 0.92)) !important;
  border-color: rgba(216, 164, 49, 0.45) !important;
  color: #ffe9b8 !important;
}
html[data-theme="dark"] .wpz-champagne-banner.is-support{
  background-image: linear-gradient(135deg, rgba(24, 48, 80, 0.95), rgba(20, 38, 62, 0.95)) !important;
  border-color: rgba(90, 167, 255, 0.4) !important;
  color: #d8e9ff !important;
}
html[data-theme="dark"] .wpz-thanks-window{
  background-image: linear-gradient(135deg, rgba(24, 40, 60, 0.95), rgba(20, 32, 48, 0.95)) !important;
  border-color: rgba(90, 167, 255, 0.32) !important;
}

/* ── 7. Scrollbars & selection ──────────────────────────────────────── */
html[data-theme="dark"] ::-webkit-scrollbar-track{ background: #121a24; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: #2c3d52; border-radius: 999px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: #3a5070; }
html[data-theme="dark"] ::selection{ background: rgba(90, 167, 255, 0.35); color: #fff; }

/* ── 8. Theme toggle button ─────────────────────────────────────────── */
.wpz-theme-toggle{
  appearance: none;
  border: 1px solid rgba(90, 167, 255, 0.32);
  background: rgba(255, 255, 255, 0.75);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  padding: 0;
  transition: transform 140ms ease, background 200ms ease, box-shadow 200ms ease;
}
.wpz-theme-toggle:hover{ transform: scale(1.08); box-shadow: 0 6px 18px rgba(31, 38, 135, 0.18); }
html[data-theme="dark"] .wpz-theme-toggle{
  background: #22304a !important;
  border-color: rgba(150, 185, 220, 0.3) !important;
}

/* ── 9. Targeted fixes found by contrast audit ──────────────────────── */
html[data-theme="dark"] .topbar-recent-donations,
html[data-theme="dark"] .track-of-the-week-banner,
html[data-theme="dark"] .room-pinned,
html[data-theme="dark"] .session-strip,
html[data-theme="dark"] .support-bar-dock,
html[data-theme="dark"] .monthly-support-bar,
html[data-theme="dark"] .topbar-spotify-dock,
html[data-theme="dark"] .channel-unread,
html[data-theme="dark"] .wpz-inbox-thread-unread,
html[data-theme="dark"] .soft-badge,
html[data-theme="dark"] .room-badges{
  background-image: none !important;
  background-color: var(--d-panel-2) !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .track-of-the-week-banner,
html[data-theme="dark"] .room-pinned{
  color: var(--d-ink-soft) !important;
}
/* Unread pills keep the accent identity. */
html[data-theme="dark"] .channel-unread,
html[data-theme="dark"] .wpz-inbox-thread-unread{
  background-color: #2f6fd0 !important;
  color: #fff !important;
}
/* Row action buttons (Edit/Delete) were white-on-white. */
html[data-theme="dark"] .message-edit-btn,
html[data-theme="dark"] .message-delete-btn,
html[data-theme="dark"] .pm-edit-btn,
html[data-theme="dark"] .pm-delete-btn,
html[data-theme="dark"] .support-msg-act{
  background-color: var(--d-raised) !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink-soft) !important;
}
/* Toasts. */
html[data-theme="dark"] .wpz-toast{
  background-image: none !important;
  background-color: #222223 !important;
  border: 1px solid var(--d-line) !important;
  color: var(--d-ink) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
}
/* Confirm / prompt dialogs. */
/* The base scrim is a pale blue (rgba(95,132,171,.18)) tuned for the light
   theme — over a charcoal page it's invisible, so the dialog looked like it
   was floating on a flat black void with nothing dimmed behind it. Dark gets
   its own scrim and a heavier blur so the room clearly recedes.
   Both wpzConfirm() and wpzPrompt() render into .wpz-confirm-modal. */
html[data-theme="dark"] .wpz-confirm-modal{
  background: rgba(6, 8, 12, 0.58) !important;
  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
}
html[data-theme="dark"] #wpzConfirmModal .wpz-modal-card,
html[data-theme="dark"] #wpzPromptModal .wpz-modal-card,
html[data-theme="dark"] .wpz-modal-card{
  background-color: var(--d-panel) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
}
/* Announcement takeovers: dark glass, accents intact. */
html[data-theme="dark"] .wpz-announce-modal{
  background: rgba(6, 12, 20, 0.55);
}
html[data-theme="dark"] .wpz-announce-card{
  background-image: linear-gradient(135deg, rgba(26, 36, 50, 0.95) 0%, rgba(20, 28, 40, 0.97) 55%, rgba(24, 34, 48, 0.95) 100%) !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .wpz-announce-title,
html[data-theme="dark"] .wpz-announce-message{ color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-announce-meta,
html[data-theme="dark"] .wpz-announce-timer{ color: var(--d-ink-mute) !important; }
/* Emoji / GIF pickers. */
html[data-theme="dark"] .emoji-popup,
html[data-theme="dark"] .gif-popup,
html[data-theme="dark"] #emojiPopup,
html[data-theme="dark"] #gifSearchPanel{
  background-color: var(--d-panel) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .emoji-popup-chip{ background-color: transparent !important; }
html[data-theme="dark"] .emoji-popup-chip:hover{ background-color: var(--d-raised) !important; }
/* Inbox / PM / profile windows. */
html[data-theme="dark"] .social-pm-bubble,
html[data-theme="dark"] .pm-float-bubble,
html[data-theme="dark"] .support-msg-bubble{
  background-color: var(--d-panel-2) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .social-pm-msg.is-mine .social-pm-bubble,
html[data-theme="dark"] .pm-float-row.me .pm-float-bubble,
html[data-theme="dark"] .support-msg-bubble.admin-reply{
  background-color: #252f3d !important;
}
/* Profile card hero keeps its gradient; body goes dark. */
html[data-theme="dark"] #wpzProfileModalCard{
  background-color: var(--d-panel) !important;
  color: var(--d-ink) !important;
}
/* Admin panel tables. */
html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td{
  background-color: transparent !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line-soft) !important;
}
html[data-theme="dark"] thead th{ background-color: var(--d-panel-2) !important; }
/* Muted helper text everywhere. */
html[data-theme="dark"] [class*="muted"],
html[data-theme="dark"] [class*="hint"],
html[data-theme="dark"] [class*="sub"],
html[data-theme="dark"] [class*="meta"],
html[data-theme="dark"] [class*="label"],
html[data-theme="dark"] [class*="empty"],
html[data-theme="dark"] small{
  color: var(--d-ink-mute) !important;
}

/* ── 10. Audit round 2 ──────────────────────────────────────────────── */
/* Inline-styled card (VIP aura) and any element whose inline style sets a
   near-white background — generated markup uses these a lot. */
html[data-theme="dark"] .wpz-modal-card.wpz-vip-aura,
html[data-theme="dark"] [style*="rgba(245, 248, 255"],
html[data-theme="dark"] [style*="rgba(255, 255, 255"]{
  background-color: var(--d-panel) !important;
  background-image: none !important;
  color: var(--d-ink) !important;
}
/* Inputs that set their background inline (search fields in the social
   window) — the earlier rule lost to the inline style. */
html[data-theme="dark"] input[style],
html[data-theme="dark"] textarea[style]{
  background-color: #161617 !important;
  color: var(--d-ink) !important;
}
/* Notification rows. */
html[data-theme="dark"] .wpz-notification-item{
  background-color: var(--d-panel-2) !important;
  border-color: var(--d-line-soft) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .wpz-notification-item.is-unread{
  background-color: #242c38 !important;
}
html[data-theme="dark"] .wpz-notification-item:hover{
  background-color: var(--d-raised) !important;
}

/* ── 11. Beating id-scoped !important rules ─────────────────────────── */
html[data-theme="dark"] #socialWindow .social-search input,
html[data-theme="dark"] #socialWindow input[type="text"],
html[data-theme="dark"] #socialWindow #socialSearch{
  background: #161617 !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: none !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] #socialWindow .wpz-social-reqgroup{
  background: var(--d-panel-2) !important;
  border: 1px solid var(--d-line) !important;
}
html[data-theme="dark"] .wpz-confirm-card{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  color: var(--d-ink) !important;
  /* Base shadow is a light-theme blue that vanishes on charcoal — without
     this the card sits flat on the newly-darkened scrim. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65) !important;
}

/* ── 12. Text contrast pass ─────────────────────────────────────────── */
html[data-theme="dark"] .theme-button,
html[data-theme="dark"] .session-link,
html[data-theme="dark"] .book-wpz-link,
html[data-theme="dark"] .main-menu-dd-link,
html[data-theme="dark"] .totw-title,
html[data-theme="dark"] .totw-label,
html[data-theme="dark"] .nick-name:not([style*="color"]),
html[data-theme="dark"] .room-title,
html[data-theme="dark"] .roster-title,
html[data-theme="dark"] .support-btn,
html[data-theme="dark"] .wpz-bell,
html[data-theme="dark"] .monthly-support-label,
html[data-theme="dark"] .monthly-support-amount,
html[data-theme="dark"] .topbar-recent-donations-label,
html[data-theme="dark"] .topbar-spotify-title,
html[data-theme="dark"] .topbar-spotify-track{
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .session-link,
html[data-theme="dark"] .book-wpz-link{
  background-color: var(--d-raised) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .session-link:hover,
html[data-theme="dark"] .book-wpz-link:hover{ background-color: #2e2e30 !important; }
/* Gold badges keep dark ink on their gold fill. The OWNER badge has its
   own dark aurora gradient with light text — leave it entirely alone. */
html[data-theme="dark"] .wpz-vip-badge,
html[data-theme="dark"] .wpz-pop-badge{
  color: #4a3400 !important;
}
/* Roster nicknames + role chips. */
html[data-theme="dark"] .nick-role{ color: var(--d-ink-soft) !important; }

/* ── 13. Profile popover & inline-styled action buttons ─────────────── */
html[data-theme="dark"] .wpz-profile-popover{
  background-color: var(--d-panel) !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
/* These buttons carry inline light backgrounds from generated markup. */
html[data-theme="dark"] .wpz-profile-popover button[style],
html[data-theme="dark"] #friendPopoverBtn,
html[data-theme="dark"] #profilePopoverBtn,
html[data-theme="dark"] .wpz-profile-popover .theme-button{
  background: var(--d-raised) !important;
  background-image: none !important;
  color: var(--d-ink) !important;
  border: 1px solid var(--d-line) !important;
}
html[data-theme="dark"] .wpz-profile-popover button[style]:hover{
  background: #2e2e30 !important;
}
/* Primary Message action stays blue. */
html[data-theme="dark"] #msgPopoverBtn{
  background-image: linear-gradient(135deg, #4a93ff 0%, #2f6fd0 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* Disabled states read as disabled, not invisible. */
html[data-theme="dark"] .wpz-profile-popover button[disabled]{
  background: #1a2330 !important;
  color: #6f8298 !important;
  border-color: var(--d-line-soft) !important;
}
/* Any remaining inline light-grey button backgrounds across the app. */
html[data-theme="dark"] [style*="#e2e8f0"],
html[data-theme="dark"] [style*="#cbd5e1"],
html[data-theme="dark"] [style*="#f1f5f9"],
html[data-theme="dark"] [style*="#f8fafc"],
html[data-theme="dark"] [style*="#eef6ff"]{
  background-color: var(--d-raised) !important;
  background-image: none !important;
  color: var(--d-ink) !important;
}
/* Popover text tuned for white cards. */
html[data-theme="dark"] .wpz-profile-popover [style*="color: #17334d"],
html[data-theme="dark"] .wpz-profile-popover [style*="color:#17334d"],
html[data-theme="dark"] .wpz-profile-popover [style*="color: #1e293b"],
html[data-theme="dark"] .wpz-profile-popover [style*="color: #475569"],
html[data-theme="dark"] .wpz-profile-popover [style*="color: #000"]{
  color: var(--d-ink) !important;
}

/* ── 14. Custom username colors ─────────────────────────────────────────
   VIPs pick their own name color against a WHITE background, so dark
   picks (navy, indigo, maroon) vanish on dark panels. Brightening the
   rendered text keeps the user's hue while making it readable. */
html[data-theme="dark"] .wpz-modal-title[style*="color"],
html[data-theme="dark"] .message-user[style*="color"],
html[data-theme="dark"] .nick-name[style*="color"],
html[data-theme="dark"] .social-detail-name[style*="color"]{
  filter: brightness(2.1) saturate(1.15);
}
/* The OWNER badge must render exactly as designed in both themes. */
html[data-theme="dark"] .wpz-owner-badge{
  background-image: linear-gradient(120deg, #14293e 0%, #1f5078 30%, #3d8ab8 50%, #6fc3e8 65%, #1f5078 85%, #14293e 100%) !important;
  color: #eaf6ff !important;
  border-color: rgba(140, 210, 255, 0.55) !important;
}
html[data-theme="dark"] .wpz-owner-penguin{ filter: none !important; }

/* Titles are text, not surfaces — never paint them. */
html[data-theme="dark"] [class*="title"]{
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Report / danger buttons: red ink on a dark red wash, not red-on-red. */
html[data-theme="dark"] .wpz-profile-report-btn,
html[data-theme="dark"] .support-action-btn.wpz-profile-report-btn,
html[data-theme="dark"] [class*="danger"],
html[data-theme="dark"] [class*="report-btn"],
html[data-theme="dark"] .social-remove-btn,
html[data-theme="dark"] #socialSecondaryButton{
  background: rgba(190, 60, 60, 0.18) !important;
  background-image: none !important;
  color: #ff9c9c !important;
  border: 1px solid rgba(224, 82, 82, 0.45) !important;
}
html[data-theme="dark"] .wpz-profile-report-btn:hover,
html[data-theme="dark"] [class*="report-btn"]:hover,
html[data-theme="dark"] #socialSecondaryButton:hover{
  background: rgba(200, 70, 70, 0.3) !important;
}

/* ── 15. Booking form (hover popup + pinned window) ─────────────────── */
html[data-theme="dark"] .bookings-hover-popup,
html[data-theme="dark"] #bookingsHoverPopup,
html[data-theme="dark"] .bk-form,
html[data-theme="dark"] .bk-form-group,
html[data-theme="dark"] .bk-grid-2,
html[data-theme="dark"] .bk-popup-head{
  background: var(--d-panel) !important;
  background-image: none !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .bk-popup-title{ color: var(--d-ink) !important; }
html[data-theme="dark"] .bk-form label,
html[data-theme="dark"] .bk-form-group > span,
html[data-theme="dark"] .bk-label{ color: var(--d-ink-soft) !important; }
html[data-theme="dark"] .bk-section-title,
html[data-theme="dark"] .bk-form h5{ color: var(--d-accent) !important; }
html[data-theme="dark"] .bk-open-full-btn,
html[data-theme="dark"] .bk-submit,
html[data-theme="dark"] .bk-form button{
  background: var(--d-raised) !important;
  background-image: none !important;
  color: var(--d-ink) !important;
  border: 1px solid var(--d-line) !important;
}
html[data-theme="dark"] .bk-form button[type="submit"]{
  background-image: linear-gradient(135deg, #4a93ff 0%, #2f6fd0 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .bk-input,
html[data-theme="dark"] .bk-form input,
html[data-theme="dark"] .bk-form select,
html[data-theme="dark"] .bk-form textarea{
  background: #161617 !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
}

/* ── 16. Admin panel ────────────────────────────────────────────────── */
html[data-theme="dark"] [class^="admin-"],
html[data-theme="dark"] [class*=" admin-"]{
  background-image: none;
  border-color: var(--d-line);
  color: var(--d-ink);
}
/* Quick-tools chips: the blanket rule above recolors the text but leaves
   styles.css's hardcoded `background:#fff`, so they rendered near-white on
   white (1.07:1). Background and hover both need the charcoal treatment. */
html[data-theme="dark"] .admin-shortcut{
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: #8fc4ff !important;
}
html[data-theme="dark"] .admin-shortcut:hover{
  background: #34343a !important;
  border-color: rgba(143, 196, 255, 0.45) !important;
  color: #b9daff !important;
}
html[data-theme="dark"] .admin-stat,
html[data-theme="dark"] .admin-status-bar,
html[data-theme="dark"] .admin-status-bar-row,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .admin-box,
html[data-theme="dark"] .admin-list-item,
html[data-theme="dark"] .admin-ticket-item{
  background: var(--d-panel-2) !important;
  background-image: none !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .admin-stats,
html[data-theme="dark"] .admin-section,
html[data-theme="dark"] .admin-tabs,
html[data-theme="dark"] .admin-body{
  background: transparent !important;
}
html[data-theme="dark"] .admin-stat-value,
html[data-theme="dark"] .admin-value{ color: var(--d-ink) !important; }
html[data-theme="dark"] .admin-stat-label,
html[data-theme="dark"] .admin-section-label,
html[data-theme="dark"] .admin-label{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .admin-tab{
  background: var(--d-raised) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .admin-tab.is-active,
html[data-theme="dark"] .admin-tab[aria-selected="true"]{
  background: #2f6fd0 !important;
  color: #fff !important;
}
/* Server statistics report tiles. */
html[data-theme="dark"] .wpz-stat-tile,
html[data-theme="dark"] .wpz-stats-table td,
html[data-theme="dark"] .wpz-stats-table th{
  background: var(--d-panel-2) !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line-soft) !important;
}

/* ── 17. Notification panel / generic modal cards ───────────────────── */
html[data-theme="dark"] .wpz-modal-card,
html[data-theme="dark"] #wpzNotificationPanel .wpz-modal-card,
html[data-theme="dark"] .wpz-modal-title,
html[data-theme="dark"] .wpz-modal-head{
  background: var(--d-panel) !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .wpz-modal-title{ background: transparent !important; }
html[data-theme="dark"] .wpz-modal-round-btn,
html[data-theme="dark"] #wpzNotificationClose,
html[data-theme="dark"] #wpzNotificationClear{
  background: var(--d-raised) !important;
  background-image: none !important;
  color: var(--d-ink) !important;
  border-color: var(--d-line) !important;
}

/* ── 18. Monthly support popup ──────────────────────────────────────── */
html[data-theme="dark"] .monthly-support-popup,
html[data-theme="dark"] .monthly-support-stats,
html[data-theme="dark"] .monthly-support-presets,
html[data-theme="dark"] .monthly-support-pay,
html[data-theme="dark"] .monthly-support-recent{
  background: var(--d-panel) !important;
  background-image: none !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .monthly-support-stat,
html[data-theme="dark"] .monthly-support-preset,
html[data-theme="dark"] .monthly-support-pay-btn,
html[data-theme="dark"] .monthly-support-recent-item,
html[data-theme="dark"] .monthly-support-recent-empty{
  background: var(--d-panel-2) !important;
  background-image: none !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .monthly-support-stat-label,
html[data-theme="dark"] .monthly-support-section-label,
html[data-theme="dark"] .preset-xp{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .monthly-support-stat-value{ color: var(--d-ink) !important; }
html[data-theme="dark"] .monthly-support-preset:hover,
html[data-theme="dark"] .monthly-support-pay-btn:hover{ background: var(--d-raised) !important; }
/* Recurring presets keep their warm accent, with readable ink. */
html[data-theme="dark"] .monthly-support-preset[data-recurring="1"]{
  background: rgba(216, 140, 60, 0.22) !important;
  border-color: rgba(240, 170, 90, 0.45) !important;
  color: #ffd9ab !important;
}
html[data-theme="dark"] .monthly-support-preset.is-recommended{
  box-shadow: 0 0 0 2px rgba(240, 170, 90, 0.4) !important;
}
/* Champagne CTA keeps its gold. */
html[data-theme="dark"] .monthly-support-champagne{
  background-image: linear-gradient(135deg, rgba(94, 72, 18, 0.95), rgba(60, 46, 14, 0.95)) !important;
  border-color: rgba(240, 200, 90, 0.5) !important;
  color: #ffe9b8 !important;
}

/* ── 19. Floating PM window rows ────────────────────────────────────── */
html[data-theme="dark"] .pm-float-row,
html[data-theme="dark"] .pm-float-row.me,
html[data-theme="dark"] .pm-float-log,
html[data-theme="dark"] .pm-float-meta{
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .pm-float-bubble{
  background: var(--d-panel-2) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .pm-float-row.me .pm-float-bubble{
  background: #252f3d !important;
}
html[data-theme="dark"] .monthly-support-provider,
html[data-theme="dark"] .monthly-support-leaderboard-empty,
html[data-theme="dark"] .monthly-support-leaderboard-item,
html[data-theme="dark"] .monthly-support-goal,
html[data-theme="dark"] .monthly-support-progress{
  background: var(--d-panel-2) !important;
  background-image: none !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .monthly-support-provider:hover{ background: var(--d-raised) !important; }
html[data-theme="dark"] .monthly-support-leaderboard-empty{ color: var(--d-ink-mute) !important; }

/* ── 20. Listening room ────────────────────────────────────────────────── */
html[data-theme="dark"] .listen-stage {
  background: linear-gradient(135deg, var(--d-panel), var(--d-panel-2)) !important;
  border-color: rgba(216, 164, 49, 0.3) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .listen-title,
html[data-theme="dark"] .listen-idle-copy strong,
html[data-theme="dark"] .listen-dock-copy strong,
html[data-theme="dark"] .listen-picker-head strong,
html[data-theme="dark"] .listen-picker-copy strong { color: var(--d-ink) !important; }
html[data-theme="dark"] .listen-sub,
html[data-theme="dark"] .listen-count,
html[data-theme="dark"] .listen-progress-time,
html[data-theme="dark"] .listen-hint,
html[data-theme="dark"] .listen-idle-copy span,
html[data-theme="dark"] .listen-dock-copy span,
html[data-theme="dark"] .listen-picker-copy span { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .listen-sub b { color: #e7b93c !important; }
html[data-theme="dark"] .listen-progress { background: rgba(150, 185, 220, 0.14) !important; }
html[data-theme="dark"] .listen-vote,
html[data-theme="dark"] .listen-btn,
html[data-theme="dark"] .listen-booth-chip,
html[data-theme="dark"] .listen-dock-woot {
  background: var(--d-raised) !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .listen-vote.is-woot.is-active,
html[data-theme="dark"] .listen-btn.is-primary,
html[data-theme="dark"] .listen-booth-chip.is-me,
html[data-theme="dark"] .listen-dock-woot.is-active {
  background: linear-gradient(135deg, #b98b1e, #8a621a) !important;
  border-color: rgba(231, 185, 60, 0.6) !important;
  color: #ffe9ad !important;
}
html[data-theme="dark"] .listen-vote.is-meh.is-active {
  background: rgba(120, 130, 150, 0.25) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .listen-booth-row { border-top-color: rgba(216, 164, 49, 0.22); }
html[data-theme="dark"] .listen-dock {
  background: linear-gradient(135deg, var(--d-raised), var(--d-panel-2)) !important;
  border-color: rgba(216, 164, 49, 0.35) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .listen-picker-card {
  background: linear-gradient(160deg, var(--d-panel), var(--d-panel-2)) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .listen-picker-search {
  background: var(--d-raised) !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .listen-picker-row:hover {
  background: rgba(216, 164, 49, 0.14) !important;
  border-color: rgba(216, 164, 49, 0.28) !important;
}
html[data-theme="dark"] .listen-picker-noart { background: rgba(216, 164, 49, 0.18) !important; }
html[data-theme="dark"] .listen-picker-dur { color: var(--d-ink-mute) !important; background: rgba(150, 185, 220, 0.12) !important; }
html[data-theme="dark"] .listen-picker-dur.is-full { color: #ffe9ad !important; background: linear-gradient(135deg, #b98b1e, #8a621a) !important; }

/* ── 21. Reference charcoal pass (user swatch #1b1b1c — Aug 2026) ──────
   The topbar/session pills, Book WPZ, the profile card boxes, the PM
   float and the Inbox all kept light liquid-glass gradients (declared
   with !important) that render as washed grey pills/blocks on dark.
   Everything below re-surfaces them on the flat charcoal the user
   picked as reference. */
html[data-theme="dark"]{
  --d-flat: #1b1b1c;        /* base surface (the reference swatch) */
  --d-flat-2: #232324;      /* raised: pills, cards, bubbles */
  --d-flat-3: #2c2c2e;      /* hover */
  --d-flat-line: rgba(255, 255, 255, 0.09);
  --d-flat-ink: #e9e9eb;
  --d-flat-mute: #9a9aa0;
}

/* Session + topbar pills: Inbox / Friend list / Blocked users,
   Notifications / My profile, Login */
html[data-theme="dark"] .user-actions .theme-button,
html[data-theme="dark"] .topbar-actions .theme-button,
html[data-theme="dark"] .wpz-top-tools .theme-button,
html[data-theme="dark"] #loginButton{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .user-actions .theme-button:hover,
html[data-theme="dark"] .topbar-actions .theme-button:hover,
html[data-theme="dark"] .wpz-top-tools .theme-button:hover,
html[data-theme="dark"] #loginButton:hover{
  background: var(--d-flat-3) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] .wpz-bell-badge{
  background: #4a93ff !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Book WPZ — keeps its CTA identity via blue ink on the charcoal */
html[data-theme="dark"] .book-wpz-link{
  background: var(--d-flat-2) !important;
  border: 1px solid rgba(122, 168, 226, 0.4) !important;
  color: #9ec8ff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .book-wpz-link:hover{
  background: var(--d-flat-3) !important;
}

/* Profile card: bio / favorite track / badges boxes + XP rail */
html[data-theme="dark"] .wpz-profile-box{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-profile-box .wpz-k{ color: var(--d-flat-mute) !important; }
html[data-theme="dark"] .wpz-xp-track{ background: rgba(255, 255, 255, 0.08) !important; }

/* PM floating windows */
html[data-theme="dark"] .pm-float-window{
  background: var(--d-flat) !important;
  border: 1px solid var(--d-flat-line) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .pm-float-header{
  background: var(--d-flat-2) !important;
  border-bottom: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .pm-float-title,
html[data-theme="dark"] .pm-float-title-wrap{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .pm-float-log{ background: var(--d-flat) !important; }
html[data-theme="dark"] .pm-float-bubble{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .pm-float-row.me .pm-float-bubble{
  background: #252f3d !important;
  border-color: rgba(122, 168, 226, 0.28) !important;
}
html[data-theme="dark"] .pm-float-input-row{
  background: var(--d-flat-2) !important;
  border-top: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .pm-float-input{
  background: var(--d-flat) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .pm-float-typing{ color: var(--d-flat-mute) !important; background: transparent !important; }
html[data-theme="dark"] .pm-float-close{ color: var(--d-flat-mute) !important; background: transparent !important; }
html[data-theme="dark"] .pm-float-reaction-stack,
html[data-theme="dark"] .pm-float-reactions{ background: transparent !important; }
html[data-theme="dark"] .pm-float-reaction-btn,
html[data-theme="dark"] .pm-float-reaction{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}

/* PM dialog (modal variant) */
html[data-theme="dark"] .pm-chat-dialog-modal .pm-log{ background: var(--d-flat) !important; }
html[data-theme="dark"] .pm-bubble{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .pm-meta,
html[data-theme="dark"] .pm-time{ color: var(--d-flat-mute) !important; }

/* Inbox window */
html[data-theme="dark"] .wpz-inbox{
  background: var(--d-flat) !important;
  border: 1px solid var(--d-flat-line) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .wpz-inbox-top{
  background: var(--d-flat-2) !important;
  border-bottom: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .wpz-inbox-title{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .wpz-inbox-left,
html[data-theme="dark"] .wpz-inbox-right,
html[data-theme="dark"] .wpz-inbox-thread-list,
html[data-theme="dark"] .wpz-inbox-log{ background: var(--d-flat) !important; }
html[data-theme="dark"] .wpz-inbox-left{ border-right: 1px solid var(--d-flat-line) !important; }
html[data-theme="dark"] .wpz-inbox-thread{
  background: transparent !important;
  border: 1px solid transparent !important;
}
html[data-theme="dark"] .wpz-inbox-thread:hover{ background: var(--d-flat-2) !important; }
html[data-theme="dark"] .wpz-inbox-thread.is-active,
html[data-theme="dark"] .wpz-inbox-thread.active{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .wpz-inbox-thread-name,
html[data-theme="dark"] .wpz-inbox-conv-name{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .wpz-inbox-thread-preview,
html[data-theme="dark"] .wpz-inbox-rec-hint,
html[data-theme="dark"] .wpz-inbox-empty{ color: var(--d-flat-mute) !important; }
html[data-theme="dark"] .wpz-inbox-conv-head,
html[data-theme="dark"] .wpz-inbox-compose{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .wpz-inbox-search-wrap input,
html[data-theme="dark"] .wpz-inbox-compose input,
html[data-theme="dark"] .wpz-inbox-compose textarea{
  background: var(--d-flat) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-inbox-icon-btn{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-inbox-icon-btn:hover{ background: var(--d-flat-3) !important; }

/* PM floating window internals (shell bg is repainted from JS —
   wpzRepaintInlineSurfaces — because it's an inline !important style) */
html[data-theme="dark"] .pm-chat-dialog-modal .drag-handle{ border-bottom-color: var(--d-flat-line) !important; }
html[data-theme="dark"] .pm-chat-dialog-modal .pm-target-name{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .pm-chat-dialog-modal input[type="text"]{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .pm-chat-dialog-modal [id^="pmFriendSelectDropdown"]{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .pm-chat-dialog-modal .support-action-btn{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .pm-chat-dialog-modal .support-action-btn[type="submit"]{
  background: #4a93ff !important;
  border-color: #4a93ff !important;
  color: #fff !important;
}
html[data-theme="dark"] .pm-user{ color: var(--d-flat-ink) !important; }

/* Section eyebrows (ABOUT / PENGUIN XP / BADGES…) carry inline
   rgba(0,0,0,0.45) — near-invisible navy on the charcoal. */
html[data-theme="dark"] .member-context-eyebrow{ color: var(--d-ink-mute) !important; }

/* ── 22. Main-menu hover popups (Tour Dates / Merch / Newsletter /
   Download / Bookings) — the white cards under the menu row. The broad
   [class*="popup"] sweep painted their INNER title/desc elements dark
   while the shells stayed white (hence the black text-bars). Shells go
   charcoal, inner text elements go transparent. */
html[data-theme="dark"] .tour-dates-hover-popup,
html[data-theme="dark"] .merch-hover-popup,
html[data-theme="dark"] .subscribe-hover-popup,
html[data-theme="dark"] .download-hover-popup,
html[data-theme="dark"] .bookings-hover-popup{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .td-popup-title,
html[data-theme="dark"] .td-popup-desc,
html[data-theme="dark"] .sub-popup-title,
html[data-theme="dark"] .dl-popup-title,
html[data-theme="dark"] .dl-popup-desc,
html[data-theme="dark"] .merch-more-head{
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .td-popup-title,
html[data-theme="dark"] .sub-popup-title,
html[data-theme="dark"] .dl-popup-title{ color: var(--d-ink) !important; }
html[data-theme="dark"] .td-popup-desc,
html[data-theme="dark"] .dl-popup-desc,
html[data-theme="dark"] .merch-more-head,
html[data-theme="dark"] .sub-form-group label,
html[data-theme="dark"] .dl-form-group label,
html[data-theme="dark"] .sub-checkbox-wrap span{ color: var(--d-ink-mute) !important; }

/* Tour date rows */
html[data-theme="dark"] .td-event{
  background: var(--d-panel-2) !important;
  border: 1px solid var(--d-line-soft) !important;
}
html[data-theme="dark"] .td-event:hover{ background: var(--d-raised) !important; }
html[data-theme="dark"] .td-event-name{ color: var(--d-ink) !important; }
html[data-theme="dark"] .td-event-place{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .td-event-date{
  background: var(--d-raised) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .td-event-month,
html[data-theme="dark"] .td-event-day{ color: #9ec8ff !important; }

/* Merch "Also available" rows */
html[data-theme="dark"] .merch-more-item{
  background: var(--d-panel-2) !important;
  border: 1px solid var(--d-line-soft) !important;
}
html[data-theme="dark"] .merch-more-item:hover{ background: var(--d-raised) !important; }
html[data-theme="dark"] .merch-more-name{ color: var(--d-ink) !important; }
html[data-theme="dark"] .merch-more-price{ color: var(--d-ink-mute) !important; }

/* Newsletter / Download inputs already go dark via the global input
   rule — keep their pills on the flat tone and the CTAs blue. */
html[data-theme="dark"] .sub-input,
html[data-theme="dark"] .dl-input{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .sub-submit-btn,
html[data-theme="dark"] .dl-submit-btn{
  background: linear-gradient(135deg, #4a93ff 0%, #2f6fd0 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* VIP room header actions (Create channel / Voice chat / Video chat /
   Channels) + the roster "N online" pill — both were white liquid-glass
   gradients with !important. */
html[data-theme="dark"] .vip-call-join-btn{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .vip-call-join-btn:hover{
  background: var(--d-flat-3) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .vip-channels-count{
  background: rgba(74, 147, 255, 0.22) !important;
  color: #9ec8ff !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .names-count{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #8fc3ff !important;
}

/* Track-of-the-week poll: Vote pills were light-blue gradients whose
   ink washed out on the charcoal (only the active "Your vote" read). */
html[data-theme="dark"] .wpz-poll-votebtn{
  background: var(--d-flat-2) !important;
  border: 1px solid rgba(122, 168, 226, 0.35) !important;
  color: #9ec8ff !important;
}
html[data-theme="dark"] .wpz-poll-votebtn:hover{ background: var(--d-flat-3) !important; }
html[data-theme="dark"] .wpz-poll-votebtn.is-mine{
  background: linear-gradient(135deg, #4a93ff, #2f6fd0) !important;
  color: #fff !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .wpz-poll-votes{ color: var(--d-ink-mute) !important; }

/* Spotify dock transport buttons (prev/next were white circles) */
html[data-theme="dark"] .spdock-btn{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .spdock-btn:hover{
  background: var(--d-flat-3) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

/* Message hover toolbar (Reply + quick reacts) — white glass pill */
html[data-theme="dark"] .message-tools{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .message-tools .message-tool{
  background: transparent !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .message-tools .message-tool:hover{
  background: var(--d-flat-3) !important;
}

/* Byline reaction chips ("🐧 1") — light blue pills */
html[data-theme="dark"] .message-reaction-pill{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .message-reaction-pill.is-own{
  background: rgba(74, 147, 255, 0.22) !important;
  border-color: rgba(122, 168, 226, 0.4) !important;
  color: #9ec8ff !important;
}

/* ── 23. Social window (Friend list / Blocked users) ────────────────────
   Shell + list/detail panels are white glass with !important; rows and
   action buttons were light-blue/pink pills with washed-out ink. */
html[data-theme="dark"] .social-window,
html[data-theme="dark"] #socialWindow{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .social-window-header{
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .social-list-panel,
html[data-theme="dark"] .social-detail{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .social-item{
  background: var(--d-raised) !important;
  border: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .social-item:hover,
html[data-theme="dark"] .social-item.is-active{
  background: var(--d-flat-3) !important;
  border-color: rgba(122, 168, 226, 0.35) !important;
}
html[data-theme="dark"] .social-name,
html[data-theme="dark"] .social-detail-name,
html[data-theme="dark"] #socialDetailName{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .social-sub,
html[data-theme="dark"] .social-detail-sub,
html[data-theme="dark"] .social-detail-note,
html[data-theme="dark"] .social-detail-empty,
html[data-theme="dark"] .social-empty,
html[data-theme="dark"] .social-count-label{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .social-detail-card,
html[data-theme="dark"] .social-detail-hero{ background: transparent !important; }
html[data-theme="dark"] .social-tab{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .social-tab.is-active{
  background: rgba(74, 147, 255, 0.22) !important;
  color: #9ec8ff !important;
  border-color: rgba(122, 168, 226, 0.4) !important;
}
html[data-theme="dark"] .social-secondary{
  background: var(--d-raised) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .social-secondary.is-danger{
  background: rgba(196, 61, 61, 0.16) !important;
  border-color: rgba(240, 120, 120, 0.4) !important;
  color: #ff9c9c !important;
}
html[data-theme="dark"] .social-primary{
  background: linear-gradient(135deg, #4a93ff 0%, #2f6fd0 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}
/* Block form (inline light-pink styles) */
html[data-theme="dark"] #wpzBlockAddForm{
  background: rgba(196, 61, 61, 0.10) !important;
  border-top-color: rgba(240, 120, 120, 0.25) !important;
}
html[data-theme="dark"] #wpzBlockAddForm input,
html[data-theme="dark"] #wpzBlockUsername,
html[data-theme="dark"] #wpzBlockUserInput{
  background: var(--d-flat) !important;
  border: 1px solid rgba(240, 120, 120, 0.3) !important;
  color: #ffb9b9 !important;
}

/* Reply bar ("Replying to @…") — grey glass with washed ink */
html[data-theme="dark"] .message-reply-bar{
  background: var(--d-flat-2) !important;
  border: 1px solid rgba(122, 168, 226, 0.3) !important;
  color: #9ec8ff !important;
}
html[data-theme="dark"] .message-reply-clear{
  background: var(--d-raised) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}

/* Support Center (staff tickets view): stat chips + filter tab bar were
   grey glass. Status colors brighten for dark. */
html[data-theme="dark"] .wpz-tstat{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .wpz-tstat.is-urgent b{ color: #ff9c9c !important; }
html[data-theme="dark"] .wpz-tstat.is-pending b{ color: #ffd077 !important; }
html[data-theme="dark"] .wpz-tstat.is-solved b{ color: #7fe0a5 !important; }
html[data-theme="dark"] .wpz-tstat.is-reply b{ color: #9ec8ff !important; }
html[data-theme="dark"] .wpz-tickets-tabs{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .wpz-tickets-tab{
  background: transparent !important;
  color: var(--d-ink-soft) !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .wpz-tickets-tab.is-active{
  background: rgba(74, 147, 255, 0.25) !important;
  color: #cfe4ff !important;
}
html[data-theme="dark"] .wpz-tickets-search{
  background: var(--d-flat) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}

/* Donation popup preset pills (€5–€100, Custom €, Champagne Pop keeps
   its gold identity elsewhere) — grey/light-blue glass with washed ink */
html[data-theme="dark"] .live-donate-amt{
  background: var(--d-flat-2) !important;
  background-image: none !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .live-donate-amt:hover{ background: var(--d-flat-3) !important; }
html[data-theme="dark"] .live-donate-amt.is-active{
  background: rgba(74, 147, 255, 0.25) !important;
  border-color: rgba(122, 168, 226, 0.45) !important;
  color: #cfe4ff !important;
}
html[data-theme="dark"] .live-donate-custom{
  background: var(--d-flat) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .live-donate-pop{
  background: linear-gradient(135deg, #b98b1e, #8a621a) !important;
  border-color: rgba(231, 185, 60, 0.6) !important;
  color: #ffe9ad !important;
}

/* Topbar brand lockup — the logo pill stayed light blue. The wordmark
   PNG is white, so it sits perfectly on the charcoal. */
html[data-theme="dark"] .brand-mark-shell{
  background: var(--d-flat-2) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--d-flat-line) !important;
}

/* VIP perks lists (VIP menu popup + profile perks) — navy ink washed
   out on the charcoal */
html[data-theme="dark"] .vip-popup-perks li,
html[data-theme="dark"] .vip-popup-perks,
html[data-theme="dark"] .wpz-vip-locked-perks span,
html[data-theme="dark"] .vip-popup-title{ color: var(--d-ink-soft) !important; }
/* Hover kept the light theme's cream wash, which erased the now-light perk
   text. Charcoal raise + gold ink instead — same "lights up" read. */
html[data-theme="dark"] .vip-popup-perks li:hover{
  background: var(--d-raised) !important;
  color: #ffd977 !important;
}
html[data-theme="dark"] .vip-popup-eyebrow{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .vip-popup-price,
html[data-theme="dark"] .vip-popup-price strong{ color: #ffd977 !important; }

/* Floating channel windows (multi-room): composer input + icon buttons
   were light glass */
html[data-theme="dark"] .chan-window{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
}
html[data-theme="dark"] .chan-window-head{ background: var(--d-flat-2) !important; border-bottom-color: var(--d-flat-line) !important; }
html[data-theme="dark"] .chan-window-title{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .chan-window-log{ background: transparent !important; }
html[data-theme="dark"] .chan-window-form input{
  background: var(--d-flat) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .chan-window-icon-btn{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .chan-window-icon-btn:hover{ background: var(--d-flat-3) !important; }

/* Profile card: the modal head strip sits ON the banner image — the
   surface sweep painted it charcoal, leaving a black bar. */
html[data-theme="dark"] #wpzProfileModalCard .wpz-modal-head{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Profile admin tools (Warn / Mute / Kick / Timeout / Ban / VIP) —
   grey panel with white pills and invisible labels */
html[data-theme="dark"] .wpz-profile-admin{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .wpz-profile-admin-btns button{
  background: var(--d-raised) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-profile-admin-btns button:hover{ background: var(--d-flat-3) !important; }
html[data-theme="dark"] .wpz-profile-admin-btns button.is-danger,
html[data-theme="dark"] .wpz-profile-admin-btns button[data-admin-action="ban"]{
  background: rgba(196, 61, 61, 0.16) !important;
  border-color: rgba(240, 120, 120, 0.4) !important;
  color: #ff9c9c !important;
}
html[data-theme="dark"] .wpz-profile-admin-note{ color: #ff9c9c !important; }

/* Sidebar right-click menu ("Open in floating window") — navy ink */
html[data-theme="dark"] .chan-context-menu{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .chan-context-item{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .chan-context-item:hover{ background: var(--d-flat-3) !important; }

/* Champagne-pop info card (checkout side panel): keep the champagne
   identity but on dark gold — kills the black row bars on cream. */
html[data-theme="dark"] .wpz-pop-info{
  background: linear-gradient(160deg, #26200f, #1d1a10) !important;
  border: 1px solid rgba(216, 164, 49, 0.45) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .wpz-pop-info-title{ color: #ffe9ad !important; background: transparent !important; }
html[data-theme="dark"] .wpz-pop-info-section{ color: #e7b93c !important; background: transparent !important; }
html[data-theme="dark"] .wpz-pop-info-item{
  background: rgba(216, 164, 49, 0.10) !important;
  border: 1px solid rgba(216, 164, 49, 0.18) !important;
  color: #f4e6c0 !important;
  box-shadow: none !important;
}

/* Donation perks preview under the presets */
html[data-theme="dark"] .live-donate-perks .ldp-row{ color: var(--d-ink-soft) !important; }
html[data-theme="dark"] .live-donate-perks .ldp-row b{ color: #9ec8ff !important; }
html[data-theme="dark"] .live-donate-perks.is-gold{
  background: linear-gradient(135deg, #26200f, #1d1a10) !important;
  border-color: rgba(216, 164, 49, 0.45) !important;
}
html[data-theme="dark"] .live-donate-perks.is-gold .ldp-row{ color: #f4e6c0 !important; }
html[data-theme="dark"] .live-donate-perks.is-gold .ldp-row b{ color: #ffd977 !important; }

/* Quick-donate "Continue to secure checkout" CTA — light-blue glass
   with washed ink; goes solid accent blue like the other primary CTAs. */
html[data-theme="dark"] .wpz-quickdonate-go{
  background: linear-gradient(135deg, #4a93ff 0%, #2f6fd0 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] .wpz-quickdonate-perks,
html[data-theme="dark"] .wpz-quickdonate-perks span{ color: var(--d-ink-soft) !important; background: transparent !important; }

/* Inbox conversation actions: Call/Video wore the light blue-glass
   gradient (white pill, invisible ink on dark). Block turns dark-red. */
html[data-theme="dark"] .wpz-inbox-call-pill.is-voice,
html[data-theme="dark"] .wpz-inbox-call-pill.is-video{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-inbox-call-pill.is-voice:hover,
html[data-theme="dark"] .wpz-inbox-call-pill.is-video:hover{
  background: var(--d-flat-3) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .wpz-inbox-call-pill.is-block{
  background: rgba(196, 61, 61, 0.14) !important;
  border: 1px solid rgba(240, 120, 120, 0.35) !important;
  color: #ff9c9c !important;
}

/* Voice-clip recording strip — light pink glass turned muddy on dark */
html[data-theme="dark"] .wpz-inbox-recording{
  background: rgba(196, 61, 61, 0.16) !important;
  border-top: 1px solid rgba(240, 120, 120, 0.35) !important;
  color: #ffb9b9 !important;
}
html[data-theme="dark"] .wpz-inbox-rec-hint{ color: #e89d9d !important; }

/* The social window's inner shell is id-scoped white glass
   (#socialWindow .social-shell, specificity 1-1-0) — it out-ranked the
   class-level charcoal rules and kept the panels grey. */
html[data-theme="dark"] #socialWindow .social-shell{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] #socialWindow .social-list-panel{
  border-right: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] #socialWindow .social-detail-avatar{
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}

/* Merch popup hero: product name was #17334d navy on the dark hero */
html[data-theme="dark"] .merch-product-title{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .merch-product-price{ color: #8fc3ff !important; }

/* Country flag emoji inside custom-colored names: the brightness filter
   that rescues dark VIP name colors was washing out the flag — counter
   it on the flag so it renders ~1:1. */
html[data-theme="dark"] .wpz-modal-title[style*="color"] .wpz-country-flag,
html[data-theme="dark"] .message-user[style*="color"] .wpz-country-flag,
html[data-theme="dark"] .nick-name[style*="color"] .wpz-country-flag{
  display: inline-block;
  filter: brightness(0.476) saturate(0.87);
}

/* Monthly support "BEST IMPACT" tag — keep solid white on the orange */
html[data-theme="dark"] .monthly-support-recommended{
  background: linear-gradient(135deg, #ff8c42 0%, #ff5f5f 100%) !important;
  color: #fff !important;
}

/* "+N more said thanks" hover card — white glass with washed names */
html[data-theme="dark"] .wpz-thanks-more-pop{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .wpz-thanks-more-head{ color: #ff9c9c !important; background: transparent !important; }
html[data-theme="dark"] .wpz-thanks-more-user{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .wpz-thanks-more-av{
  background: rgba(74, 147, 255, 0.25) !important;
  color: #cfe4ff !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .wpz-thanks-more-close{
  background: var(--d-raised) !important;
  color: var(--d-flat-ink) !important;
  border-color: var(--d-flat-line) !important;
}
/* The strip's inline thanker names + count pill */
html[data-theme="dark"] .wpz-thanks-window-item,
html[data-theme="dark"] .wpz-thanks-window-more{ color: var(--d-flat-ink) !important; }

/* Notifications panel buttons (Close / Dismiss all) — light glass pills */
html[data-theme="dark"] #wpzNotificationPanel .wpz-close,
html[data-theme="dark"] #wpzNotificationPanel .theme-button,
html[data-theme="dark"] .wpz-close{
  background: var(--d-flat-2) !important;
  background-image: none !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
  text-shadow: none !important;
}
html[data-theme="dark"] #wpzNotificationPanel .wpz-close:hover,
html[data-theme="dark"] #wpzNotificationPanel .theme-button:hover,
html[data-theme="dark"] .wpz-close:hover{
  background: var(--d-flat-3) !important;
}

/* GIF picker: category chips + Go button were light glass pills */
html[data-theme="dark"] .gif-cat-chip{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .gif-cat-chip:hover{ background: var(--d-flat-3) !important; }
html[data-theme="dark"] .gif-cat-chip.is-active{
  background: rgba(74, 147, 255, 0.25) !important;
  border-color: rgba(122, 168, 226, 0.45) !important;
  color: #cfe4ff !important;
}
html[data-theme="dark"] #gifSearchGo,
html[data-theme="dark"] .gif-search-go{
  background: linear-gradient(135deg, #4a93ff 0%, #2f6fd0 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Composer photo (paperclip) button — light circle among dark siblings */
html[data-theme="dark"] .photo-button{
  background: var(--d-flat-2) !important;
  background-image: none !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .photo-button:hover{ background: var(--d-flat-3) !important; }

/* Floating Twitch window chrome (the stream itself is Twitch's iframe) */
html[data-theme="dark"] .wpz-twitch-float{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
}
html[data-theme="dark"] .wpz-twitch-float-head{
  background: var(--d-flat-2) !important;
  border-bottom: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .wpz-twitch-float-title{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .wpz-twitch-float-btn{
  background: var(--d-raised) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-twitch-float-btn:hover{ background: var(--d-flat-3) !important; }

/* Verified check — explicit blue (the `background-image: revert` in the
   badge-restore rule nuked its gradient to transparent/white). */
html[data-theme="dark"] .wpz-verified-badge{
  /* Deeper than the light-theme gradient. #5aa7ff is tuned to sit on a white
     page; on near-black it reads as a glowing pale dot next to the name.
     A dark hairline ring separates it from bright text instead of the light
     theme's drop shadow, which is invisible here. */
  background: linear-gradient(135deg, #4a93ff, #1f5fa8) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .wpz-verified-badge::after{ border-color: #ffffff !important; }
html[data-theme="dark"] .wpz-verified-pill{
  background: rgba(74, 147, 255, 0.2) !important;
  border-color: rgba(122, 168, 226, 0.45) !important;
  color: #9ec8ff !important;
}

/* Champagne Pop tier in the support popup — gold bottle-glass like the
   light theme, instead of a flat charcoal pill. The earlier generic
   .monthly-support-preset charcoal rule was flattening it. */
html[data-theme="dark"] .monthly-support-preset.monthly-support-pop{
  background: linear-gradient(135deg, #b9891c 0%, #8a621a 55%, #6e4d12 100%) !important;
  border: 1px solid rgba(231, 185, 60, 0.65) !important;
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.28), inset 0 1px 0 rgba(255, 240, 190, 0.35) !important;
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .monthly-support-pop-main{ color: #fff3d6 !important; }
html[data-theme="dark"] .monthly-support-pop-sub{ color: #ffe9ad !important; }
/* Same shimmer sweep as the VIP badge / support bar */
html[data-theme="dark"] .monthly-support-preset.monthly-support-pop::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-160%) skewX(-15deg);
  animation: wpzVipSpark 9s linear infinite;
  animation-delay: 2s;
  pointer-events: none;
}

/* Preset hover preview card */
html[data-theme="dark"] .wpz-preset-hover{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .wpz-preset-hover-amt{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .wpz-preset-hover-rows span{ color: var(--d-ink-soft) !important; }
html[data-theme="dark"] .wpz-preset-hover-hint{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wpz-preset-hover.is-gold{
  background: linear-gradient(160deg, #26200f, #1d1a10) !important;
  border: 1px solid rgba(231, 185, 60, 0.55) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), 0 0 18px rgba(255, 200, 80, 0.2) !important;
}
html[data-theme="dark"] .wpz-preset-hover.is-gold .wpz-preset-hover-amt{ color: #ffe9ad !important; }
html[data-theme="dark"] .wpz-preset-hover.is-gold .wpz-preset-hover-rows span{ color: #f4e6c0 !important; }
html[data-theme="dark"] .wpz-preset-hover.is-gold .wpz-preset-hover-hint{ color: #e7b93c !important; }

/* VIP MEMBER topbar button — the [class*="menu"] surface sweep flattened
   its gold to charcoal. Dark-gold + shimmer so it stands out like light. */
html[data-theme="dark"] .vip-menu-btn{
  background: linear-gradient(135deg, #b9891c 0%, #8a621a 60%, #6e4d12 100%) !important;
  border: 1px solid rgba(231, 185, 60, 0.6) !important;
  color: #fff3d6 !important;
  box-shadow: 0 0 16px rgba(255, 200, 80, 0.25), inset 0 1px 0 rgba(255, 240, 190, 0.3) !important;
  position: relative;
  overflow: hidden;
}
html[data-theme="dark"] .vip-menu-btn:hover{
  background: linear-gradient(135deg, #cf9c22 0%, #9c7020 60%, #7d581a 100%) !important;
  box-shadow: 0 0 22px rgba(255, 200, 80, 0.35), inset 0 1px 0 rgba(255, 240, 190, 0.35) !important;
}
html[data-theme="dark"] .vip-menu-btn::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: translateX(-160%) skewX(-15deg);
  animation: wpzVipSpark 11s linear infinite;
  animation-delay: 3s;
  pointer-events: none;
}

/* Book WPZ — give it the same "stands out like light mode" treatment as
   its gold VIP neighbor: deep blue gradient + glow instead of flat
   charcoal with blue text. */
html[data-theme="dark"] .book-wpz-link{
  background: linear-gradient(135deg, #2c5f9e 0%, #1f4677 100%) !important;
  border: 1px solid rgba(122, 168, 226, 0.55) !important;
  color: #dcecff !important;
  box-shadow: 0 0 16px rgba(90, 167, 255, 0.25), inset 0 1px 0 rgba(200, 225, 255, 0.25) !important;
}
html[data-theme="dark"] .book-wpz-link:hover{
  background: linear-gradient(135deg, #356fb8 0%, #275389 100%) !important;
  box-shadow: 0 0 22px rgba(90, 167, 255, 0.35), inset 0 1px 0 rgba(200, 225, 255, 0.3) !important;
}

/* Discord-style row tint on hover — the light theme's soft blue
   gradient is invisible on charcoal. */
html[data-theme="dark"] .message-row:hover{
  background: rgba(255, 255, 255, 0.05) !important;
}

/* "Confirm your support" dialog: amount readout was white glass; Cancel
   was a light grey pill. */
html[data-theme="dark"] .wpz-donate-amount-readout{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-confirm-cancel{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-confirm-cancel:hover{ background: var(--d-flat-3) !important; }
html[data-theme="dark"] .wpz-donate-field-label{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wpz-donate-benefits span{ color: var(--d-ink-soft) !important; }

/* Booking modal backdrop: the [class*="modal"] surface sweep painted the
   full-screen overlay opaque charcoal — restore the translucent blur so
   the app shows through behind the card. */
html[data-theme="dark"] .bookings-full-modal{
  background: rgba(8, 8, 10, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Full-screen overlay backdrops: the surface sweeps painted them opaque
   charcoal, hiding the app entirely. All *-backdrop elements + known
   overlay wrappers go back to translucent-with-blur. */
html[data-theme="dark"] [class*="backdrop"],
html[data-theme="dark"] .merch-checkout-overlay,
html[data-theme="dark"] .wpz-quickdonate-overlay{
  background: rgba(8, 8, 10, 0.55) !important;
  background-image: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

/* Merch catalog window: product cards were light grey with white ink */
html[data-theme="dark"] .merch-catalog-item{
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .merch-catalog-item:hover{
  background: var(--d-flat-3) !important;
  border-color: rgba(122, 168, 226, 0.35) !important;
}
html[data-theme="dark"] .merch-catalog-name{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .merch-catalog-price{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .merch-catalog-item img{ border-radius: 10px; }
html[data-theme="dark"] .merch-catalog-noimg{ background: var(--d-raised) !important; color: var(--d-ink-mute) !important; }
/* Profile modal backdrop — same opaque-sweep fix */
html[data-theme="dark"] .wpz-profile-modal{
  background: rgba(8, 8, 10, 0.55) !important;
  background-image: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
}

/* Staff dossier popup — light glass shell survived while its inner rows
   went dark (black bars in the FLAGS box, invisible labels). */
html[data-theme="dark"] .wpz-dossier{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .wpz-dossier-head{
  background: var(--d-flat-2) !important;
  border-bottom: 1px solid var(--d-flat-line) !important;
}
html[data-theme="dark"] .wpz-dossier-title{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .wpz-dossier-body{ background: transparent !important; }
html[data-theme="dark"] .wpz-dossier-section{
  background: transparent !important;
  color: var(--d-ink-mute) !important;
  border-color: var(--d-flat-line) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .wpz-dossier-row{ background: transparent !important; box-shadow: none !important; }
html[data-theme="dark"] .wpz-dossier-label{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wpz-dossier-value{ color: var(--d-flat-ink) !important; background: transparent !important; }
html[data-theme="dark"] .wpz-dossier-warn{
  background: rgba(196, 61, 61, 0.14) !important;
  border: 1px solid rgba(240, 120, 120, 0.35) !important;
  color: #ffb9b9 !important;
}
html[data-theme="dark"] .wpz-dossier-warn *{ background: transparent !important; color: #ffb9b9 !important; }
html[data-theme="dark"] .wpz-dossier-copy{
  background: var(--d-raised) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-dossier-close{ color: var(--d-ink-mute) !important; background: transparent !important; }

/* Roster right-click menu (Member actions / Moderation / Support ticket) */
html[data-theme="dark"] .member-context-menu{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .member-context-name{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .member-context-item{
  background: var(--d-flat-2) !important;
  background-image: none !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
html[data-theme="dark"] .member-context-item:hover{ background: var(--d-flat-3) !important; }
html[data-theme="dark"] .member-context-item.is-danger,
html[data-theme="dark"] .member-context-item[data-action="ban"],
html[data-theme="dark"] .member-context-item[data-action="block"]{
  background: rgba(196, 61, 61, 0.14) !important;
  border-color: rgba(240, 120, 120, 0.35) !important;
  color: #ff9c9c !important;
}

/* ── VIP group call panel (dark) ─────────────────────────────────────
   The default light-glass palette clashes with the approved dark theme,
   so the whole call window uses the same charcoal/glass vocabulary as the
   rest of the chat UI. */
html[data-theme="dark"] .vip-call-panel,
html[data-theme="dark"] .vip-call-body,
html[data-theme="dark"] .vip-call-chat{
  background: rgba(35, 35, 38, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: var(--d-ink, #e8e8e8);
}
html[data-theme="dark"] .vip-call-head,
html[data-theme="dark"] .vip-call-title,
html[data-theme="dark"] .vip-call-count,
html[data-theme="dark"] .vip-call-section-label{
  color: var(--d-ink-soft, #b6b6b8);
}
html[data-theme="dark"] .vip-call-title{ color: #f0f0f2 !important; }
html[data-theme="dark"] .vip-call-panel .wpz-inbox-icon-btn{
  color: var(--d-ink-soft, #b6b6b8);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .vip-call-panel .wpz-inbox-icon-btn:hover{
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}
html[data-theme="dark"] .vip-call-panel .wpz-inbox-icon-btn.is-danger{
  color: #ff8a8a;
  background: rgba(255, 99, 99, 0.12);
}
html[data-theme="dark"] .vip-call-stage-tile,
html[data-theme="dark"] .vip-call-tile-media{
  background: rgba(45, 45, 48, 0.95);
  border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="dark"] .vip-call-stage-name,
html[data-theme="dark"] .vip-call-tile-name{
  color: var(--d-ink, #e8e8e8);
}
html[data-theme="dark"] .vip-call-tile:hover{
  background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .vip-call-stage-tile.is-speaking{
  box-shadow: 0 0 0 2px rgba(90, 167, 255, 0.65), 0 6px 18px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .vip-call-mute-badge,
html[data-theme="dark"] .vip-call-localmute-badge{
  color: var(--d-ink-soft, #b6b6b8);
}
html[data-theme="dark"] .vip-call-stage-actions .vip-call-mod-btn,
html[data-theme="dark"] .vip-call-mod-btn{
  background: rgba(255, 255, 255, 0.10);
  color: var(--d-ink, #e8e8e8);
}
html[data-theme="dark"] .vip-call-stage-actions .vip-call-mod-btn:hover,
html[data-theme="dark"] .vip-call-mod-btn:hover{
  background: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .vip-call-chat-log:empty::before{
  color: var(--d-ink-soft, #b6b6b8);
}
html[data-theme="dark"] .vip-call-chat-row{
  color: var(--d-ink, #e8e8e8);
}
html[data-theme="dark"] .vip-call-chat-row strong{
  color: #a8cfff;
}
html[data-theme="dark"] .vip-call-chat-form input{
  background: rgba(30, 30, 33, 0.95);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f0f0f2;
}
html[data-theme="dark"] .vip-call-chat-form input::placeholder{
  color: var(--d-ink-soft, #b6b6b8);
}
html[data-theme="dark"] .vip-call-chat-form input:focus{
  border-color: rgba(90, 167, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(90, 167, 255, 0.15);
}
html[data-theme="dark"] .vip-call-chat-form button{
  background: var(--d-flat, #5aa7ff) !important;
  color: var(--d-flat-ink, #0c0c0c) !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .vip-call-chat-form button:hover{
  filter: brightness(1.12);
}
html[data-theme="dark"] .vip-call-stage-fake{
  background: linear-gradient(135deg, #3a4a63 0%, #242b3d 100%);
  color: #c8d9f0;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .vip-stage-menu{
  background: rgba(35, 35, 38, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .vip-stage-menu button{
  color: var(--d-ink, #e8e8e8);
}
html[data-theme="dark"] .vip-stage-menu button:hover{
  background: rgba(255, 255, 255, 0.12);
}

/* VIP gift chooser — deep royal purple to match the gift banner/popup. */
/* Gift dialog wears the site's gold, not purple — gifting VIP is a gold
   moment here (the VIP badge, the aura, the gift button all use it), and a
   purple sheet read as a different product. */
html[data-theme="dark"] .wpz-gift-card{
  background: linear-gradient(160deg, #3a2c12, #1d1608) !important;
  border: 1px solid rgba(216, 164, 49, 0.5) !important;
}
html[data-theme="dark"] .wpz-gift-title{ color: #ffe9b8 !important; }
html[data-theme="dark"] .wpz-gift-sub,
html[data-theme="dark"] .wpz-gift-anon{ color: #e8d3a4 !important; }
html[data-theme="dark"] .wpz-gift-note{ color: #bfa670 !important; }
html[data-theme="dark"] .wpz-gift-opt{
  background: rgba(216, 164, 49, 0.12) !important;
  border-color: rgba(216, 164, 49, 0.32) !important;
  color: #ffeeca !important;
}
html[data-theme="dark"] .wpz-gift-opt span{ color: #ffd977 !important; }
html[data-theme="dark"] .wpz-gift-opt.is-active{
  background: linear-gradient(135deg, #f6c13c, #d8862c) !important;
  border-color: rgba(255, 233, 168, 0.8) !important;
  color: #3a2708 !important;
}
html[data-theme="dark"] .wpz-gift-opt.is-active span{ color: #4d3608 !important; }
html[data-theme="dark"] .wpz-gift-custom-input{
  color: #ffeeca !important;
  background: rgba(30, 22, 8, 0.7) !important;
  border-color: rgba(216, 164, 49, 0.4) !important;
}
html[data-theme="dark"] .wpz-gift-opt.is-active .wpz-gift-custom-input{
  background: rgba(58, 39, 8, 0.9) !important;
  border-color: rgba(77, 54, 8, 0.55) !important;
  color: #fff6e0 !important;
}
html[data-theme="dark"] .wpz-gift-opt.wpz-gift-opt-custom:focus-visible{
  outline-color: rgba(255, 217, 119, 0.85);
}
html[data-theme="dark"] .wpz-gift-go{
  background: linear-gradient(135deg, #ffd977, #f0a52c) !important;
  color: #3a2708 !important;
  box-shadow: 0 8px 20px rgba(216, 134, 44, 0.45) !important;
}
html[data-theme="dark"] .wpz-gift-close{ color: #ffd977 !important; }
/* Gift CTA matches the gold gift dialog it opens. */
html[data-theme="dark"] .vip-popup-buy.is-gift{
  background: linear-gradient(135deg, #ffd977, #f0a52c) !important;
  border-color: rgba(216, 164, 49, 0.6) !important;
  color: #3a2708 !important;
}
html[data-theme="dark"] .vip-popup-buy.is-gift:hover{
  background: linear-gradient(135deg, #ffe3a0, #e89a1f) !important;
  color: #2e1f05 !important;
}
/* The roster menu's id-scoped white-glass shell (#memberContextMenu,
   1-0-0) out-ranked the class-level charcoal rule — match the id. */
html[data-theme="dark"] #memberContextMenu{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] #memberContextMenu .member-context-eyebrow{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] #memberContextMenu .member-context-name{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] #memberContextMenu .member-context-header{ border-bottom-color: var(--d-flat-line) !important; }

/* VIP gift banner — deep royal purple in dark */
html[data-theme="dark"] .wpz-gift-banner{
  background: linear-gradient(135deg, #2a1d45 0%, #1f1633 100%) !important;
  border: 1px solid rgba(166, 108, 255, 0.5) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), 0 0 16px rgba(140, 90, 220, 0.25) !important;
  color: #dcc8ff !important;
}
html[data-theme="dark"] .wpz-gift-banner-close{ color: #b493e8 !important; }
html[data-theme="dark"] .wpz-gift-chip{
  background: rgba(166, 108, 255, 0.14) !important;
  border-color: rgba(166, 108, 255, 0.4) !important;
  color: #dcc8ff !important;
}
html[data-theme="dark"] .wpz-gift-chip.is-more{ background: rgba(166, 108, 255, 0.28) !important; }
html[data-theme="dark"] .wpz-gift-banner-thanks{
  background: rgba(166, 108, 255, 0.22) !important;
  border-color: rgba(166, 108, 255, 0.5) !important;
  color: #dcc8ff !important;
}
html[data-theme="dark"] .wpz-announce-modal.is-vipgift .wpz-announce-card{
  border-color: rgba(166, 108, 255, 0.55) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(140, 90, 220, 0.3) !important;
}
html[data-theme="dark"] .wpz-announce-modal.is-vipgift .wpz-announce-eyebrow{ color: #b493e8 !important; }
html[data-theme="dark"] .wpz-announce-modal.is-vipgift-mega .wpz-announce-card{
  border-color: rgba(197, 166, 255, 0.8) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.65),
    0 0 70px rgba(140, 90, 220, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}
html[data-theme="dark"] .wpz-announce-modal.is-vipgift-mega .wpz-announce-eyebrow{
  background: linear-gradient(135deg, rgba(166, 108, 255, 0.4), rgba(140, 90, 220, 0.3)) !important;
  border-color: rgba(197, 166, 255, 0.7) !important;
  color: #f2e8ff !important;
}
html[data-theme="dark"] .wpz-announce-modal.is-vipgift-mega .wpz-announce-title{
  animation: wpzGiftTitleShine 3.2s ease-in-out infinite, wpzMegaTitlePulse 1.8s ease-in-out infinite alternate;
}
/* The [class*="chip"] surface sweep painted the chip CONTAINERS dark —
   they're layout wrappers, not chips. */
html[data-theme="dark"] .wpz-gift-pop-chips,
html[data-theme="dark"] .wpz-gift-banner-chips{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Thanks strip chips — translucent pills, not flat black boxes */
html[data-theme="dark"] .wpz-thanks-window-item{
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .wpz-thanks-window-list{ background: transparent !important; }
html[data-theme="dark"] .wpz-thanks-window-more{
  background: rgba(74, 147, 255, 0.2) !important;
  border-color: rgba(122, 168, 226, 0.4) !important;
  color: #cfe4ff !important;
}
/* Belt & suspenders for the popup body band */
html[data-theme="dark"] .wpz-announce-message,
html[data-theme="dark"] .wpz-gift-pop-welcome{
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .wpz-thanks-window{ animation: wpzChampagneBannerIn 380ms cubic-bezier(0.34, 1.56, 0.64, 1), wpzThanksGlowDark 3.2s ease-in-out infinite !important; }
@keyframes wpzThanksGlowDark{
  0%, 100% { box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); }
  50%      { box-shadow: 0 3px 18px rgba(226, 51, 61, 0.35); }
}
html[data-theme="dark"] .gift-vip-button{
  background: linear-gradient(135deg, #b98b1e, #8a621a) !important;
  border-color: rgba(231, 185, 60, 0.55) !important;
}

/* ── Floating Operator Panel (dark) ───────────────────────────────────────
   Written alongside the light rules, not retrofitted. Every interactive
   surface below defines its own :hover — the blanket [class^="admin-"] rule
   recolors text but never backgrounds, which is exactly how the quick-tools
   chips ended up white-on-white. */
html[data-theme="dark"] .admin-panel.op-window{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .op-window-head{
  background: var(--d-flat-2) !important;
  border-bottom-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .op-window-title{ color: var(--d-ink) !important; }
html[data-theme="dark"] .op-window-btn{
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .op-window-btn:hover{
  background: #3a3a40 !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .op-nav{
  background: var(--d-flat-2) !important;
  border-right-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .op-nav-item{
  background: transparent !important;
  border-color: transparent !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .op-nav-item:hover{
  background: var(--d-raised) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .op-nav-item.is-active{
  background: linear-gradient(135deg, #2f4a6b, #24384f) !important;
  border-color: rgba(143, 196, 255, 0.4) !important;
  color: #d8ebff !important;
}
html[data-theme="dark"] .op-nav-badge{ background: #e5484d !important; color: #fff !important; }
html[data-theme="dark"] .op-pane{ background: var(--d-panel) !important; }
html[data-theme="dark"] .op-window-grip{
  background:
    linear-gradient(135deg, transparent 46%, rgba(143, 196, 255, 0.45) 46%, rgba(143, 196, 255, 0.45) 54%, transparent 54%),
    linear-gradient(135deg, transparent 70%, rgba(143, 196, 255, 0.45) 70%, rgba(143, 196, 255, 0.45) 78%, transparent 78%) !important;
}
/* .op-launcher is a Main Menu dropdown link — the existing
   .main-menu-dd-link dark rules already cover it. */

/* ── Owner broadcast (dark) ───────────────────────────────────────────────
   These controls carry inline style="" attributes, so every rule here needs
   !important to win. The textarea is the subtle case: its background-COLOR
   was already themed dark, but its inline light linear-gradient paints on
   top as background-IMAGE, so it rendered silver. Killing the image is the
   actual fix, not recolouring the background. */
html[data-theme="dark"] #ownerAnnounceMessage{
  background-image: none !important;
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-ink) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] #ownerAnnounceMessage::placeholder{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .owner-template-chip{
  background-image: none !important;
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: #8fc4ff !important;
}
html[data-theme="dark"] .owner-template-chip:hover{
  background: #34343a !important;
  border-color: rgba(143, 196, 255, 0.45) !important;
  color: #b9daff !important;
}

/* ── Bookings section (dark) ──────────────────────────────────────────────
   Written with the light rules, not retrofitted. Every interactive surface
   defines its own :hover here — that omission is what left the quick-tools
   chips white-on-white and the perk rows unreadable. */
html[data-theme="dark"] .bk-view-btn,
html[data-theme="dark"] .bk-new-btn,
html[data-theme="dark"] .bk-act,
html[data-theme="dark"] .bk-cal-nav,
html[data-theme="dark"] .bk-cal-today{
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: #8fc4ff !important;
}
html[data-theme="dark"] .bk-view-btn:hover,
html[data-theme="dark"] .bk-new-btn:hover,
html[data-theme="dark"] .bk-act:hover,
html[data-theme="dark"] .bk-cal-nav:hover,
html[data-theme="dark"] .bk-cal-today:hover{
  background: #34343a !important;
  border-color: rgba(143,196,255,0.45) !important;
  color: #b9daff !important;
}
html[data-theme="dark"] .bk-view-btn.is-active{
  background: linear-gradient(135deg,#2f4a6b,#24384f) !important;
  border-color: rgba(143,196,255,0.4) !important;
  color: #d8ebff !important;
}
html[data-theme="dark"] .bk-act-primary,
html[data-theme="dark"] .bk-act-primary:hover{
  background: linear-gradient(135deg,#4a93ff,#2f7ff0) !important;
  border-color: #4a93ff !important;
  color: #fff !important;
}
html[data-theme="dark"] .bk-act-danger{ color: #ff8f95 !important; border-color: rgba(255,143,149,0.35) !important; }
html[data-theme="dark"] .bk-act-danger:hover{ background: #4a2326 !important; color: #ffc2c5 !important; }
html[data-theme="dark"] .bk-error{ background: #4a2326 !important; color: #ffc2c5 !important; }
html[data-theme="dark"] .bk-empty,
html[data-theme="dark"] .bk-tile-label,
html[data-theme="dark"] .bk-col-title,
html[data-theme="dark"] .bk-group-title,
html[data-theme="dark"] .bk-mini-meta,
html[data-theme="dark"] .bk-drawer-sub,
html[data-theme="dark"] .bk-field,
html[data-theme="dark"] .bk-table th{ color: var(--d-ink-mute) !important; }

html[data-theme="dark"] .bk-tile{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .bk-tile-value,
html[data-theme="dark"] .bk-mini-name,
html[data-theme="dark"] .bk-cal-title,
html[data-theme="dark"] .bk-drawer-title,
html[data-theme="dark"] .bk-table td{ color: var(--d-ink) !important; }

html[data-theme="dark"] .bk-mini{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .bk-mini:hover{ background: var(--d-raised) !important; }
html[data-theme="dark"] .bk-mini-warn{
  background: rgba(90, 62, 20, 0.35) !important;
  border-color: rgba(216,164,49,0.35) !important;
}
html[data-theme="dark"] .bk-mini-warn:hover{ background: rgba(120, 84, 28, 0.45) !important; }
html[data-theme="dark"] .bk-mini-date{ color: #8fc4ff !important; }

html[data-theme="dark"] .bk-input{
  background-image: none !important;
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .bk-input::placeholder{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .bk-check{ color: var(--d-ink-soft) !important; }

html[data-theme="dark"] .bk-table th{ border-bottom-color: var(--d-line) !important; }
html[data-theme="dark"] .bk-table td{ border-bottom-color: var(--d-line-soft) !important; }
html[data-theme="dark"] .bk-table tbody tr:hover{ background: var(--d-raised) !important; }

/* Status pills keep their hue but move to dark-surface tints. */
html[data-theme="dark"] .bk-status-new{ background: #24384f !important; color: #9fcbff !important; }
html[data-theme="dark"] .bk-status-hold{ background: #4a3a1c !important; color: #ffd28a !important; }
html[data-theme="dark"] .bk-status-confirmed{ background: #1e4531 !important; color: #8ee0ac !important; }
html[data-theme="dark"] .bk-status-done{ background: #33343a !important; color: #b6bcc6 !important; }
html[data-theme="dark"] .bk-status-declined{ background: #4a2326 !important; color: #ff9ea3 !important; }
html[data-theme="dark"] .bk-status-cancelled{ background: #33343a !important; color: #9aa1ac !important; }

html[data-theme="dark"] .bk-cal-dow span{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .bk-cal-cell{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .bk-cal-cell:hover{ background: var(--d-raised) !important; }
html[data-theme="dark"] .bk-cal-cell.is-empty{ background: transparent !important; border-color: transparent !important; }
html[data-theme="dark"] .bk-cal-cell.is-today{ border-color: rgba(143,196,255,0.6) !important; }
html[data-theme="dark"] .bk-cal-cell.has-confirmed{ background: rgba(30,69,49,0.45) !important; }
html[data-theme="dark"] .bk-cal-num{ color: #8fc4ff !important; }

html[data-theme="dark"] .bk-drawer{ background: rgba(0,0,0,0.55) !important; }
html[data-theme="dark"] .bk-drawer-card{
  background: var(--d-panel) !important;
  border-left-color: var(--d-line) !important;
  box-shadow: -24px 0 60px rgba(0,0,0,0.6) !important;
}
html[data-theme="dark"] .bk-drawer-head{ border-bottom-color: var(--d-flat-line) !important; }
html[data-theme="dark"] .bk-drawer-actions{ border-top-color: var(--d-flat-line) !important; }
html[data-theme="dark"] .bk-drawer-close{
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .bk-drawer-close:hover{ background: #3a3a40 !important; color: #fff !important; }
html[data-theme="dark"] .bk-history-when{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .bk-history-what{ color: var(--d-ink-soft) !important; }
html[data-theme="dark"] .bk-field-error{ color: #ff9ea3 !important; }
html[data-theme="dark"] .bk-new-card{
  background: var(--d-panel) !important;
  border-color: var(--d-line) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6) !important;
}
html[data-theme="dark"] .bk-req{ color: #ff9ea3 !important; }
/* Same conic ring, charcoal fill. The padding-box layer has to be opaque or
   the ring shows through the middle of the pill. */
html[data-theme="dark"] .room-operator-btn{
  border-color: transparent !important;
  background:
    linear-gradient(135deg, #26241c, #1f1e19) padding-box,
    conic-gradient(from var(--wpz-aura-angle),
      rgba(216, 164, 49, 0.28) 0%,
      rgba(255, 216, 115, 1) 14%,
      rgba(255, 247, 214, 1) 22%,
      rgba(247, 183, 51, 1) 32%,
      rgba(216, 164, 49, 0.28) 48%,
      rgba(216, 164, 49, 0.28) 62%,
      rgba(255, 216, 115, 0.85) 76%,
      rgba(255, 247, 214, 1) 84%,
      rgba(216, 164, 49, 0.28) 96%) border-box !important;
  color: #ffd977 !important;
}
html[data-theme="dark"] .room-operator-btn:hover,
html[data-theme="dark"] .room-operator-btn:focus-visible{
  color: #fff3cf !important;
  box-shadow: 0 0 20px rgba(247, 183, 51, 0.5), 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .room-operator-btn:focus-visible{
  outline-color: rgba(255, 217, 119, 0.8) !important;
}
@keyframes wpzOpBeaconDark {
  0%, 100% { box-shadow: 0 0 0 rgba(247, 183, 51, 0), 0 2px 10px rgba(0, 0, 0, 0.45); }
  50%      { box-shadow: 0 0 16px rgba(247, 183, 51, 0.4), 0 2px 10px rgba(0, 0, 0, 0.5); }
}
html[data-theme="dark"] .room-operator-btn{
  animation: wpzVipAuraSpin 6s linear infinite, wpzOpBeaconDark 3.6s ease-in-out infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] .room-operator-btn{ animation: none !important; }
}
/* XP "to next level" readout sits beside the Penguin XP eyebrow. */
html[data-theme="dark"] .wpz-xp-eyebrow{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wpz-xp-next{ color: #8fc4ff !important; }
html[data-theme="dark"] .op-nav-group{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .op-nav-group.has-rule{ border-top-color: var(--d-flat-line) !important; }
html[data-theme="dark"] .chan-window-gift-btn{
  background: linear-gradient(135deg, #6b5a22, #4a3d14) !important;
  border-color: rgba(216, 164, 49, 0.45) !important;
}
html[data-theme="dark"] .chan-window-gift-btn:hover{
  background: linear-gradient(135deg, #86702b, #5e4d1a) !important;
}
html[data-theme="dark"] .wpz-donate-count{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wpz-donate-count.is-near{ color: #ffc25c !important; }

/* Inbox conversation menu. styles.css scopes this by ID
   (#wpzInboxThreadMenu) with !important, which outranks the
   .member-context-menu class rule above no matter how many !importants it
   carries — so the white glass survived into dark mode and the two danger
   items became unreadable on it. Matched at ID specificity to win. */
html[data-theme="dark"] #wpzInboxThreadMenu{
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] #wpzInboxThreadMenu .member-context-item.is-danger{
  background: rgba(196, 61, 61, 0.16) !important;
  border-color: rgba(240, 120, 120, 0.4) !important;
  color: #ff9c9c !important;
}
html[data-theme="dark"] #wpzInboxThreadMenu .member-context-item.is-danger:hover{
  background: rgba(196, 61, 61, 0.28) !important;
  color: #ffc2c2 !important;
}

/* Inline social-PM delete ✕. Had no dark rule at all: a light pink gradient
   circle sitting on a charcoal bubble, with the glyph nearly lost in it. */
html[data-theme="dark"] .social-pm-delete-btn{
  background-image: none !important;
  background: #4a2326 !important;
  border: 1px solid rgba(240, 120, 120, 0.45) !important;
  color: #ffb4b4 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .social-pm-delete-btn:hover{
  background: #6a2b30 !important;
  border-color: rgba(255, 160, 160, 0.7) !important;
  color: #ffdede !important;
}

/* @mention autocomplete. No dark rule existed: a near-white gradient panel
   floating over the charcoal composer. */
html[data-theme="dark"] .mention-autocomplete{
  background-image: none !important;
  background: var(--d-panel) !important;
  border: 1px solid var(--d-line) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .mention-autocomplete-item{ color: #8fc4ff !important; }
html[data-theme="dark"] .mention-autocomplete-item:hover,
html[data-theme="dark"] .mention-autocomplete-item.is-selected{
  background: var(--d-raised) !important;
  color: #cfe6ff !important;
}
html[data-theme="dark"] .mention-autocomplete-item.is-staff{ color: #ffb567 !important; }
html[data-theme="dark"] .mention-autocomplete-item.is-staff:hover,
html[data-theme="dark"] .mention-autocomplete-item.is-staff.is-selected{
  background: rgba(255, 140, 66, 0.18) !important;
  color: #ffd0a0 !important;
}
html[data-theme="dark"] .mention-autocomplete-hint{ color: var(--d-ink-mute) !important; }

/* ── Support ticket window (dark) ─────────────────────────────────────────
   No dark rules existed for this surface: the status pills stayed near-white
   with light labels, the staff reply bubble kept its pale blue gradient with
   white text on it, and the composer's circular buttons were light glass. */
html[data-theme="dark"] .admin-ticket-status-btn{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-ticket-status-btn:hover{
  background: var(--d-raised) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
/* The active pill keeps white text, so it needs a genuinely dark fill. */
html[data-theme="dark"] .admin-ticket-status-btn.is-active{
  background: linear-gradient(135deg, #2f4a6b, #24384f) !important;
  border-color: rgba(143, 196, 255, 0.4) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .admin-ticket-status-dot{
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35) inset !important;
}

/* Staff reply bubble: pale blue with white text was the worst offender. */
html[data-theme="dark"] .support-msg-bubble.admin-reply{
  background-image: none !important;
  background: #2f4a6b !important;
  border: 1px solid rgba(143, 196, 255, 0.32) !important;
  color: #eaf3ff !important;
}
html[data-theme="dark"] .support-msg-bubble{
  background-image: none !important;
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .admin-ticket-window-log,
html[data-theme="dark"] .admin-ticket-detail-log{
  background: var(--d-panel) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .admin-ticket-window-eyebrow,
html[data-theme="dark"] .admin-ticket-window-subtitle{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .admin-ticket-window-title{ color: var(--d-ink) !important; }

html[data-theme="dark"] .admin-ticket-window-form .admin-ticket-icon-btn{
  background-image: none !important;
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .admin-ticket-window-form .admin-ticket-icon-btn:hover{
  background: var(--d-raised) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .td-event-meta{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .td-event-tickets{
  background-image: none !important;
  background: linear-gradient(135deg, #6b5a22, #4a3d14) !important;
  border-color: rgba(216, 164, 49, 0.5) !important;
  color: #ffd977 !important;
}
html[data-theme="dark"] .td-event-tickets:hover{ color: #fff0c2 !important; }

/* Friend-request PENDING pill: white background survived into dark mode,
   leaving pale grey text on near-white. Also covers the Cancel action. */
html[data-theme="dark"] .wpz-social-reqpending{
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .wpz-social-reqactions .wpz-social-decline,
html[data-theme="dark"] .wpz-social-cancel{
  background: rgba(196, 61, 61, 0.16) !important;
  border-color: rgba(240, 120, 120, 0.35) !important;
  color: #ff9c9c !important;
}
html[data-theme="dark"] .wpz-social-reqactions .wpz-social-decline:hover,
html[data-theme="dark"] .wpz-social-cancel:hover{
  background: rgba(196, 61, 61, 0.28) !important;
  color: #ffc2c2 !important;
}

/* Room action bar: same hierarchy in dark. The base pills were charcoal on
   charcoal — legible but inert, so they read as labels rather than actions. */
html[data-theme="dark"] .vip-call-join-btn{
  background: var(--d-raised) !important;
  border: 1px solid rgba(143, 196, 255, 0.28) !important;
  color: #cfe2ff !important;
}
html[data-theme="dark"] .vip-call-join-btn:hover{
  background: #34343a !important;
  border-color: rgba(143, 196, 255, 0.6) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] #vipCreateCallBtn.vip-call-join-btn{
  background: linear-gradient(135deg, #4a93ff, #2f79ef) !important;
  border-color: rgba(143, 196, 255, 0.55) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 12px rgba(47, 121, 239, 0.45) !important;
}
html[data-theme="dark"] #vipCreateCallBtn.vip-call-join-btn:hover{
  background: linear-gradient(135deg, #5ea3ff, #2266dd) !important;
  box-shadow: 0 6px 18px rgba(47, 121, 239, 0.6) !important;
}
html[data-theme="dark"] #vipChannelsBtn.vip-call-join-btn{
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
/* Matched at ID specificity: the light-theme #vipVoiceChatBtn / #vipVideoChatBtn
   rules set a navy #1a4f9b that would otherwise win here and leave dark blue
   text on charcoal. */
html[data-theme="dark"] #vipVoiceChatBtn.vip-call-join-btn,
html[data-theme="dark"] #vipVideoChatBtn.vip-call-join-btn{
  border-color: rgba(143, 196, 255, 0.4) !important;
  color: #cfe2ff !important;
}
html[data-theme="dark"] #vipVoiceChatBtn.vip-call-join-btn:hover,
html[data-theme="dark"] #vipVideoChatBtn.vip-call-join-btn:hover{
  border-color: rgba(143, 196, 255, 0.75) !important;
  color: #ffffff !important;
}

/* Composer circles (GIF / emoji). No dark rule existed: var(--surface-tint)
   resolves light, so they were white discs beside the charcoal composer. The
   gift button keeps its gold and is excluded. */
html[data-theme="dark"] .gif-button:not(.gift-vip-button),
html[data-theme="dark"] .gif-search-toggle,
html[data-theme="dark"] .emoji-button{
  background-image: none !important;
  background: var(--d-flat-2) !important;
  border: 1px solid var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .gif-button:not(.gift-vip-button):hover,
html[data-theme="dark"] .gif-search-toggle:hover,
html[data-theme="dark"] .emoji-button:hover{
  background: var(--d-raised) !important;
  color: #ffffff !important;
}

/* VIP room action bar in gold (dark). Matched at ID specificity — the
   light-theme #vip*Btn rules above are 1-1-0 and would otherwise win. */
html[data-theme="dark"] .vip-call-join-btn{
  background: var(--d-raised) !important;
  border: 1px solid rgba(216, 164, 49, 0.3) !important;
  color: #ffe9b8 !important;
}
html[data-theme="dark"] .vip-call-join-btn:hover{
  background: #34342c !important;
  border-color: rgba(216, 164, 49, 0.65) !important;
  color: #fff6e0 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] #vipCreateCallBtn.vip-call-join-btn{
  background: linear-gradient(135deg, #ffd977, #f0a52c) !important;
  border-color: rgba(255, 233, 168, 0.65) !important;
  color: #3a2708 !important;
  box-shadow: 0 3px 12px rgba(216, 134, 44, 0.45) !important;
}
html[data-theme="dark"] #vipCreateCallBtn.vip-call-join-btn:hover{
  background: linear-gradient(135deg, #ffe3a0, #e89a1f) !important;
  box-shadow: 0 6px 18px rgba(216, 134, 44, 0.6) !important;
}
html[data-theme="dark"] #vipVoiceChatBtn.vip-call-join-btn,
html[data-theme="dark"] #vipVideoChatBtn.vip-call-join-btn{
  border-color: rgba(216, 164, 49, 0.42) !important;
  color: #ffe9b8 !important;
}
html[data-theme="dark"] #vipVoiceChatBtn.vip-call-join-btn:hover,
html[data-theme="dark"] #vipVideoChatBtn.vip-call-join-btn:hover{
  border-color: rgba(216, 164, 49, 0.8) !important;
  color: #fff6e0 !important;
}
html[data-theme="dark"] #vipChannelsBtn.vip-call-join-btn{
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] body.wpz-room-vip .message-form button[type="submit"]{
  background: linear-gradient(135deg, #ffd977, #f0a52c) !important;
  border-color: rgba(255, 233, 168, 0.6) !important;
  color: #3a2708 !important;
}
html[data-theme="dark"] body.wpz-room-vip .message-form button[type="submit"]:hover{
  background: linear-gradient(135deg, #ffe3a0, #e89a1f) !important;
  color: #2e1f05 !important;
}
html[data-theme="dark"] body.wpz-room-vip .wpz-confirm-btn.wpz-confirm-ok{
  background: linear-gradient(135deg, #ffd977, #f0a52c) !important;
  border-color: rgba(255, 233, 168, 0.6) !important;
  color: #3a2708 !important;
}
html[data-theme="dark"] body.wpz-room-vip .wpz-confirm-btn.wpz-confirm-ok:hover{
  background: linear-gradient(135deg, #ffe3a0, #e89a1f) !important;
  color: #2e1f05 !important;
}

/* VIP room header bar (dark): warm charcoal rather than a light wash. */
html[data-theme="dark"] body.wpz-room-vip .room-header{
  border-color: rgba(216, 164, 49, 0.4) !important;
  background:
    linear-gradient(90deg, rgba(216, 164, 49, 0.14), rgba(216, 164, 49, 0.03) 42%, rgba(216, 164, 49, 0.12)),
    var(--d-panel) !important;
  box-shadow: 0 0 0 1px rgba(216, 164, 49, 0.12) inset,
              0 10px 28px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] body.wpz-room-vip .room-title{ color: #ffe9b8 !important; }
html[data-theme="dark"] body.wpz-room-vip .room-avatar{ color: #ffd977 !important; border-color: rgba(216, 164, 49, 0.4) !important; }

/* Default room header bar (dark) — blue sibling of the VIP gold. */
html[data-theme="dark"] .room-header{
  border-color: rgba(90, 167, 255, 0.34) !important;
  background:
    linear-gradient(90deg, rgba(90, 167, 255, 0.13), rgba(90, 167, 255, 0.03) 42%, rgba(90, 167, 255, 0.11)),
    var(--d-panel) !important;
  box-shadow: 0 0 0 1px rgba(90, 167, 255, 0.10) inset,
              0 10px 28px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .room-avatar{ color: #8fc4ff !important; }

/* Recent-supporters strip (dark) — rose sibling of the room-header bars. */
html[data-theme="dark"] .topbar-recent-donations{
  border: 1px solid rgba(90, 167, 255, 0.34) !important;
  background:
    linear-gradient(90deg, rgba(90, 167, 255, 0.13), rgba(90, 167, 255, 0.03) 45%, rgba(90, 167, 255, 0.11)),
    var(--d-panel) !important;
  box-shadow: 0 0 0 1px rgba(90, 167, 255, 0.10) inset,
              0 8px 22px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .topbar-recent-donations-label{ color: #8fc4ff !important; }
html[data-theme="dark"] .topbar-recent-donations-empty{ color: var(--d-ink-soft) !important; }

/* Channels menu in the VIP room (dark) — gold Join, warm menu edge. */
html[data-theme="dark"] body.wpz-room-vip .vip-channels-item-join{
  background: linear-gradient(135deg, #ffd977, #f0a52c) !important;
  color: #3a2708 !important;
  box-shadow: 0 4px 12px rgba(216, 134, 44, 0.4) !important;
}
html[data-theme="dark"] body.wpz-room-vip .vip-channels-menu{
  border-color: rgba(216, 164, 49, 0.4) !important;
}
html[data-theme="dark"] body.wpz-room-vip .vip-channels-item:hover{
  border-color: rgba(216, 164, 49, 0.45) !important;
  background: rgba(216, 164, 49, 0.10) !important;
}
html[data-theme="dark"] body.wpz-room-vip .vip-channels-item-name{ color: #ffe9b8 !important; }
html[data-theme="dark"] body.wpz-room-vip .vip-channels-item-count{ color: #ffd977 !important; }

/* VIP call controls (dark): gold, Leave stays red. */
html[data-theme="dark"] .vip-call-controls .wpz-inbox-icon-btn{
  background-image: none !important;
  background: rgba(216, 164, 49, 0.14) !important;
  border-color: rgba(216, 164, 49, 0.45) !important;
  color: #ffd977 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .vip-call-controls .wpz-inbox-icon-btn:hover{
  background: rgba(216, 164, 49, 0.26) !important;
  border-color: rgba(255, 217, 119, 0.7) !important;
  color: #fff6e0 !important;
}
html[data-theme="dark"] #vipCallLeaveBtn.wpz-inbox-icon-btn{
  background: rgba(196, 61, 61, 0.2) !important;
  border-color: rgba(240, 120, 120, 0.5) !important;
  color: #ff9c9c !important;
}
html[data-theme="dark"] #vipCallLeaveBtn.wpz-inbox-icon-btn:hover{
  background: rgba(196, 61, 61, 0.34) !important;
  color: #ffc2c2 !important;
}

/* ── Gift/VIP checkout card: restore the gold aura ────────────────────────
   The ring is a conic gradient painted into the border via border-box, but
   the blanket [class*="card"] rule sets background-image:none — so the
   animation kept spinning an angle nothing was drawing, and the border fell
   back to a plain hairline. Repaint both layers with a charcoal padding-box
   fill; it must be opaque or the ring shows through the card. */
html[data-theme="dark"] .vip-checkout-card{
  border: 3px solid transparent !important;
  background:
    linear-gradient(180deg, #232018, #1a1710) padding-box,
    conic-gradient(from var(--wpz-aura-angle),
      rgba(255, 205, 90, 0.18) 0%,
      rgba(255, 216, 115, 0.9) 12%,
      rgba(255, 243, 196, 1) 20%,
      rgba(247, 183, 51, 0.95) 30%,
      rgba(255, 205, 90, 0.18) 45%,
      rgba(255, 205, 90, 0.18) 55%,
      rgba(255, 216, 115, 0.7) 70%,
      rgba(255, 243, 196, 0.9) 78%,
      rgba(255, 205, 90, 0.18) 92%) border-box !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] .vip-checkout-head{
  background: rgba(216, 164, 49, 0.10) !important;
  border-bottom-color: rgba(216, 164, 49, 0.28) !important;
}
html[data-theme="dark"] .vip-checkout-title{ color: #ffe9b8 !important; }
html[data-theme="dark"] .vip-checkout-close{
  background: rgba(216, 164, 49, 0.16) !important;
  border-color: rgba(216, 164, 49, 0.45) !important;
  color: #ffd977 !important;
}
html[data-theme="dark"] .vip-checkout-close:hover{
  background: rgba(216, 164, 49, 0.3) !important;
  color: #fff6e0 !important;
}
/* Stripe renders its own white iframe here — keep the mount white so the
   embedded form is not framed by a dark seam. */
html[data-theme="dark"] .vip-checkout-mount{ background: #ffffff !important; }

/* ── System modal heading + lead (access-restricted / timeout / VIP) ───────
   #wpzSystemModal builds its panel with style.cssText, which serializes hex
   colors to rgb() — so the [style*="color: #17334d"] selectors in section 5
   never match its heading (the panel itself only goes dark because its
   inline border happens to contain an rgba() string). Class hooks instead. */
html[data-theme="dark"] .wpz-sysmodal-title{
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .wpz-sysmodal-body{
  color: var(--d-ink-soft) !important;
}
/* VIP storefront variant — warm gold heading to match the aura ring, star
   and CTA (same tone as .vip-checkout-title). */
html[data-theme="dark"] .wpz-vip-aura .wpz-sysmodal-title{
  color: #ffe9b8 !important;
  text-shadow: 0 1px 18px rgba(216, 164, 49, 0.35);
}

/* New-VIP strip: keep the gold identity, drop the light fill. */
html[data-theme="dark"] .wpz-champagne-banner.wpz-vip-banner{
  background: linear-gradient(135deg, rgba(216, 164, 49, 0.20), rgba(216, 164, 49, 0.10)) !important;
  border-color: rgba(216, 164, 49, 0.45) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 233, 184, 0.14) !important;
}
html[data-theme="dark"] .wpz-champagne-banner.wpz-vip-banner .wpz-champagne-banner-text{
  color: #ffe9b8 !important;
}
html[data-theme="dark"] .wpz-champagne-banner.wpz-vip-banner .wpz-champagne-banner-close{
  color: #d8a431 !important;
}

/* Donor rail: dimmer sheen and a gold-tinted welcome pulse on charcoal. */
html[data-theme="dark"] .topbar-recent-donations::after{
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.07) 50%, transparent 62%) !important;
}
html[data-theme="dark"] .topbar-recent-donations-item:hover{
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Top supporters board on charcoal. */
html[data-theme="dark"] .topbar-donor-board{
  background: linear-gradient(90deg, rgba(216, 164, 49, 0.16), rgba(216, 164, 49, 0.05) 45%, rgba(216, 164, 49, 0.13)) !important;
  border-color: rgba(216, 164, 49, 0.38) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}
html[data-theme="dark"] .topbar-donor-board-label{ color: #d8a431 !important; }
html[data-theme="dark"] .topbar-donor-board-item{
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(216, 164, 49, 0.3) !important;
  color: #ffe9b8 !important;
}
html[data-theme="dark"] .topbar-donor-board-item .total{ color: #d8a431 !important; }
html[data-theme="dark"] .topbar-donor-board-item:first-child{
  background: linear-gradient(120deg, rgba(216, 164, 49, 0.28), rgba(216, 164, 49, 0.12)) !important;
  color: #fff6e0 !important;
}

/* ── VIP buy CTA: gold in dark mode ──────────────────────────────────────
   The gift button below it had an explicit dark override and stayed gold,
   while the primary "Get VIP" button rendered flat/silver — the odd result
   of the popup being the paid CTA and looking less premium than the
   secondary action. Pinned here with the same gold identity, plus a
   rotating aura ring so it reads as the hero action of the panel. */
html[data-theme="dark"] .vip-popup-buy:not(.is-gift){
  background: linear-gradient(135deg, #ffe9a8 0%, #f6c13c 45%, #ffb347 100%) !important;
  background-color: #f6c13c !important;
  border: 1px solid rgba(216, 164, 49, 0.6) !important;
  color: #4a340a !important;
  box-shadow: 0 10px 26px rgba(216, 164, 49, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
html[data-theme="dark"] .vip-popup-buy:not(.is-gift):hover{
  background: linear-gradient(135deg, #fff2c4 0%, #ffcf55 45%, #ffbe5c 100%) !important;
  color: #3a2708 !important;
}

/* Say-thanks button in the header strip (dark). */
html[data-theme="dark"] .wpz-thanks-window-btn{
  background: linear-gradient(135deg, #e8677f, #c9435f) !important;
  border-color: rgba(232, 103, 127, 0.45) !important;
  color: #fff !important;
}
html[data-theme="dark"] .wpz-thanks-window-btn.is-thanked,
html[data-theme="dark"] .wpz-thanks-window-btn:disabled{
  background: linear-gradient(135deg, #6d4650, #5b3a44) !important;
  color: #d9c2c8 !important;
}

/* Notification cards kept their LIGHT-mode gradient in dark mode: the rules
   in section 9 set background-color but never cleared background-image, so a
   pale blue linear-gradient painted over the charcoal and showed up as faint
   bands behind the text. Clear the image on the card and its inner chips. */
html[data-theme="dark"] .wpz-notification-item,
html[data-theme="dark"] .wpz-notification-item.is-unread,
html[data-theme="dark"] .wpz-notification-item:hover,
html[data-theme="dark"] .wpz-notification-item > *,
html[data-theme="dark"] .wpz-notif-body,
html[data-theme="dark"] .wpz-notif-time,
html[data-theme="dark"] .wpz-notif-text{
  background-image: none !important;
}
/* The icon chip keeps a gradient, but a gold one that belongs in the theme. */
html[data-theme="dark"] .wpz-notif-icon{
  background-image: linear-gradient(135deg, rgba(216, 164, 49, 0.35), rgba(216, 164, 49, 0.15)) !important;
  color: #ffe9b8 !important;
}

/* ═══ Community events (dark) ════════════════════════════════════════════ */
html[data-theme="dark"] .wpz-trivia-strip{
  background: linear-gradient(160deg, rgba(122, 90, 248, 0.18), rgba(90, 122, 255, 0.10)), var(--d-panel) !important;
  border-color: rgba(139, 90, 248, 0.45) !important;
}
html[data-theme="dark"] .wpz-trivia-q{ color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-trivia-opt{
  background: var(--d-raised) !important;
  border-color: rgba(139, 90, 248, 0.35) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .wpz-trivia-timer{ color: #b49aff !important; }
/* 🗳 Vote poll — same shell, teal instead of violet. Listed after the
   trivia rules above because the strip carries BOTH classes. */
html[data-theme="dark"] .wpz-poll-strip{
  background: linear-gradient(160deg, rgba(0, 176, 185, 0.20), rgba(0, 140, 190, 0.12)), var(--d-panel) !important;
  border-color: rgba(0, 176, 185, 0.45) !important;
}
html[data-theme="dark"] .wpz-poll-opt{
  background: var(--d-raised) !important;
  border-color: rgba(0, 176, 185, 0.38) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .wpz-poll-strip .wpz-trivia-timer{ color: #4fd6de !important; }
html[data-theme="dark"] .wpz-poll-total{ color: #4fd6de !important; }
html[data-theme="dark"] .wpz-poll-pct{ color: #4fd6de !important; }
html[data-theme="dark"] .wpz-poll-fill{
  background: linear-gradient(90deg, rgba(0, 176, 185, 0.42), rgba(0, 144, 200, 0.26)) !important;
}
html[data-theme="dark"] .wpz-spin-btn{
  background: var(--d-raised);
  border-color: var(--d-line);
  color: var(--d-ink);
}
html[data-theme="dark"] .wpz-spin-btn.is-ready{
  background: linear-gradient(135deg, rgba(216,164,49,0.4), rgba(216,164,49,0.2));
  border-color: rgba(216, 164, 49, 0.55);
}
html[data-theme="dark"] .wpz-spin-card{
  background: linear-gradient(180deg, rgba(27,27,28,0.98), rgba(22,22,23,0.96)) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .wpz-spin-title,
html[data-theme="dark"] .wpz-spin-result{ color: var(--d-ink) !important; }

/* Admin Events tab (dark). */
html[data-theme="dark"] .admin-trivia-row{
  background: var(--d-raised) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .admin-trivia-form input[type="text"]{
  background: #161617 !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .admin-events-note{ color: #4ade80; }
html[data-theme="dark"] .admin-events-note.is-error{ color: #f87171; }

html[data-theme="dark"] .admin-dxp-status{ background: var(--d-raised) !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
html[data-theme="dark"] .admin-dxp-status.is-live{ color: #ffe9b8 !important; border-color: rgba(216,164,49,0.5) !important; }
html[data-theme="dark"] .admin-dxp-fields input{ background: #161617 !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
html[data-theme="dark"] #spinResetMsg{ background: #161617 !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-spin-win-sub{ color: var(--d-ink-mute) !important; }

html[data-theme="dark"] .wpz-roulette-strip{
  background: linear-gradient(160deg, rgba(232,103,127,0.18), rgba(216,164,49,0.10)), var(--d-panel) !important;
  border-color: rgba(232,103,127,0.45) !important;
}
html[data-theme="dark"] .wpz-roulette-text,
html[data-theme="dark"] .wpz-roulette-result{ color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-roulette-input{ background: #161617 !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-roulette-lucky{ background: var(--d-raised) !important; color: #ff9db0 !important; }
html[data-theme="dark"] .admin-roulette input{ background: #161617 !important; border-color: var(--d-line) !important; color: var(--d-ink) !important; }
html[data-theme="dark"] .admin-shirt-row{ background: rgba(216,164,49,0.14) !important; color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-dxp-banner{
  background: linear-gradient(135deg, rgba(216,164,49,0.32), rgba(216,164,49,0.16)) !important;
  border-color: rgba(216,164,49,0.5) !important;
  color: #ffe9b8 !important;
}
html[data-theme="dark"] .wpz-dxp-clock{ background: rgba(0,0,0,0.35) !important; color: #fff6e0 !important; }
html[data-theme="dark"] .wpz-rt-card{
  background: linear-gradient(180deg, rgba(27,27,28,0.98), rgba(22,22,23,0.96)) !important;
  border-color: rgba(232,103,127,0.4) !important;
}
html[data-theme="dark"] .wpz-rt-title,
html[data-theme="dark"] .wpz-rt-status{ color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-rt-yours{ color: var(--d-ink-mute) !important; }

/* ── Double XP on the donation checkout (dark) ─────────────────────────
   The light theme's gold wash is a pale cream that reads as a blown-out
   white square on charcoal. Dark gets a deep amber card with the same
   gold rim, so the "something special is on" signal survives the theme. */
html[data-theme="dark"] .wpz-quickdonate-card.is-dxp{
  background: linear-gradient(160deg, #2a2110 0%, #221c12 55%, #2e2413 100%) !important;
  border-color: rgba(216, 164, 49, 0.55) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(216, 164, 49, 0.4) !important;
}
html[data-theme="dark"] .wpz-quickdonate-card.is-dxp .wpz-quickdonate-perks{
  background: rgba(216, 164, 49, 0.09) !important;
  border-color: rgba(216, 164, 49, 0.26) !important;
}
html[data-theme="dark"] .wpz-quickdonate-card.is-dxp .wpz-quickdonate-amount,
html[data-theme="dark"] .wpz-quickdonate-card.is-dxp .wpz-quickdonate-title{
  color: #ffd977 !important;
}
/* The strip itself keeps its light gold — it is the one element that
   should stay bright — but its ink must stay dark against that gold. */
html[data-theme="dark"] .wpz-qd-dxp{ color: #3d2c05 !important; }
html[data-theme="dark"] .wpz-xp-boosted{ color: #ffd977 !important; }
html[data-theme="dark"] .wpz-xp-was{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wpz-xp-boost-tag{ color: #3d2c05 !important; }

/* ── VIP sale banner (dark) ────────────────────────────────────────────
   The light pink wash blows out on charcoal, same as the gold one did. */
html[data-theme="dark"] .wpz-vipsale-banner{
  background: linear-gradient(135deg, rgba(216,164,49,0.36), rgba(216,164,49,0.18)) !important;
  border-color: rgba(216,164,49,0.55) !important;
  color: #ffe9b8 !important;
}
/* The CTA keeps its bright gold — it is the thing being clicked — so its
   ink has to stay dark against it. */
html[data-theme="dark"] .wpz-vipsale-cta{ color: #3d2c05 !important; }
html[data-theme="dark"] .vip-popup-price.is-sale strong{ color: #ffd977 !important; }
html[data-theme="dark"] .vip-popup-price.is-sale s{ color: var(--d-ink-mute) !important; }

/* ── Community leaderboard (dark) ──────────────────────────────────────
   The light-blue wash and #2c4a68 ink both vanish on charcoal. */
html[data-theme="dark"] .wpz-lb{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .wpz-lb-title,
html[data-theme="dark"] .wpz-lb-note,
html[data-theme="dark"] .wpz-lb-empty{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wpz-lb-chip{
  background: var(--d-flat-3, #2b2b2c) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-lb-chip.is-active{
  background: linear-gradient(135deg, #4a93ff, #2f6fd0) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html[data-theme="dark"] .wpz-lb-name{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .wpz-lb-row.is-rank1 .wpz-lb-name{ color: #ffd977 !important; }
html[data-theme="dark"] .wpz-lb-row:hover{ background: rgba(122,168,226,0.12) !important; }
html[data-theme="dark"] .wpz-lb-value{ color: #7aa8e2 !important; }
html[data-theme="dark"] .wpz-lb-rank{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wpz-lb-select{
  background: var(--d-flat-3, #2b2b2c) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wpz-spin-again,
html[data-theme="dark"] .wpz-roulette-rebuy{
  background: rgba(216,164,49,0.16) !important;
  border-color: rgba(216,164,49,0.45) !important;
  color: #ffd977 !important;
}
html[data-theme="dark"] .wpz-spin-again:hover,
html[data-theme="dark"] .wpz-roulette-rebuy:hover{ background: rgba(216,164,49,0.28) !important; }
html[data-theme="dark"] .wpz-gift-sale{ color: #3d2c05 !important; }
html[data-theme="dark"] .wpz-gift-was{ color: #cfc4a6 !important; opacity: 0.8 !important; }
html[data-theme="dark"] .wpz-gift-now{ color: #ffd977 !important; }
/* The active (gold-filled) option has dark ink, so its prices must flip. */
html[data-theme="dark"] .wpz-gift-opt.is-active .wpz-gift-now{ color: #3d2c05 !important; }
html[data-theme="dark"] .wpz-gift-opt.is-active .wpz-gift-was{ color: #6b5410 !important; }

/* Events tab cards (dark) */
html[data-theme="dark"] .admin-ev-card{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .admin-ev-card-title{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .admin-ev-card-sub{ color: var(--d-ink-mute) !important; opacity: 1; }

/* ── Engagement suite ─────────────────────────────────────────────────── */
html[data-theme="dark"] .wpz-quests{
  background: rgba(255,255,255,0.04); border-color: var(--d-flat-line);
}
html[data-theme="dark"] .wpz-q-label{ color: var(--d-flat-ink); }
html[data-theme="dark"] .wpz-q-row.is-done{ background: rgba(74,222,128,0.08); }
html[data-theme="dark"] .wpz-q-row.is-done .wpz-q-label{ color: #4ade80; }
html[data-theme="dark"] .wpz-q-bar{ background: rgba(255,255,255,0.1); }
html[data-theme="dark"] .wpz-q-val, html[data-theme="dark"] .wpz-q-bonus{ color: var(--d-ink-mute); }
html[data-theme="dark"] .wpz-q-bonus.is-done, html[data-theme="dark"] .wpz-q-row.is-done .wpz-q-val{ color: #4ade80; }

html[data-theme="dark"] .wpz-lb-tab{
  border-color: var(--d-flat-line); color: var(--d-ink-mute); background: transparent;
}
html[data-theme="dark"] .wpz-lb-tab:hover{ background: rgba(255,255,255,0.06); }
html[data-theme="dark"] .wpz-lb-tab.is-on{ background: #3b82f6; border-color: #3b82f6; color: #fff; }
html[data-theme="dark"] .wpz-lb-champ{ background: rgba(255,217,119,0.1); color: #ffd977; }

html[data-theme="dark"] .wpz-shop-btn{
  background: linear-gradient(135deg, #2a2416, #322a17);
  border-color: rgba(255,217,119,0.3); color: #ffd977;
}
html[data-theme="dark"] .wpz-shop-bal{ background: rgba(255,217,119,0.14); }
html[data-theme="dark"] .wpz-shop-card{
  background: #202021; border-color: var(--d-flat-line);
}
html[data-theme="dark"] .wpz-shop-title{ color: var(--d-flat-ink); }
html[data-theme="dark"] .wpz-shop-balance{ color: #ffd977; background: rgba(255,217,119,0.12); }
html[data-theme="dark"] .wpz-shop-close{ color: var(--d-ink-mute); }
html[data-theme="dark"] .wpz-shop-close:hover{ background: rgba(255,255,255,0.08); color: var(--d-flat-ink); }
html[data-theme="dark"] .wpz-shop-item{
  background: #262627; border-color: var(--d-flat-line);
}
html[data-theme="dark"] .wpz-shop-item-name{ color: var(--d-flat-ink); }
html[data-theme="dark"] .wpz-shop-item-desc{ color: var(--d-ink-mute); }
html[data-theme="dark"] .wpz-shop-flair{
  background: rgba(255,255,255,0.05); border-color: var(--d-flat-line);
}
html[data-theme="dark"] .wpz-shop-flair:hover{ background: rgba(255,255,255,0.1); }
html[data-theme="dark"] .wpz-shop-buy.is-poor{ background: #3a3a3c; color: #8a8a8e; }
html[data-theme="dark"] .wpz-shop-gift{
  background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.25);
}
html[data-theme="dark"] .wpz-shop-gift .wpz-shop-invite-head{ color: #93c5fd; }
html[data-theme="dark"] .wpz-shop-gift .wpz-shop-invite-sub{ color: var(--d-ink-mute); }
html[data-theme="dark"] .wpz-shop-gift .wpz-shop-invite-row input{
  background: #1b1b1c; border-color: rgba(96,165,250,0.3); color: var(--d-flat-ink);
}
html[data-theme="dark"] .wpz-shop-invite{
  background: rgba(74,222,128,0.07); border-color: rgba(74,222,128,0.2);
}
html[data-theme="dark"] .wpz-shop-donate{
  background: linear-gradient(135deg, rgba(87, 68, 19, 0.55), rgba(58, 49, 24, 0.55));
  border-color: rgba(255, 217, 119, 0.4);
}
html[data-theme="dark"] .wpz-shop-donate .wpz-shop-invite-head{ color: #ffd977; }
html[data-theme="dark"] .wpz-shop-donate .wpz-shop-invite-sub{ color: #d8c184; }
html[data-theme="dark"] .wpz-shop-donate-btn{
  background: linear-gradient(135deg, #574413, #7a5c14);
  border-color: rgba(255, 217, 119, 0.5);
  color: #ffe9ad;
}
html[data-theme="dark"] .wpz-shop-donate-btn span{ color: #ffd977; }
html[data-theme="dark"] .wpz-shop-donate-btn:hover{ filter: brightness(1.12); }
/* Golden bubble stays golden in the dark — that is the entire point. */
html[data-theme="dark"] .message-bubble.is-fx-golden{
  background: linear-gradient(135deg, #574413, #7a5c14) !important;
  border-color: rgba(255, 217, 119, 0.55) !important;
  color: #ffe9ad !important;
}
html[data-theme="dark"] .wpz-profile-title{ color: var(--d-ink-mute); }
html[data-theme="dark"] .wpz-shop-title-input,
html[data-theme="dark"] .wpz-shop-beer-input{
  background: #1b1b1c; border-color: var(--d-flat-line); color: var(--d-flat-ink);
}
/* A broad dark rule elsewhere repaints text inside the shop card, so this
   needs the same weight to keep the counter quiet rather than headline-white. */
html[data-theme="dark"] .wpz-shop-item .wpz-shop-count{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wpz-shop-item .wpz-shop-count.is-full{ color: #e8b23a !important; }
html[data-theme="dark"] .wpz-shop-invite-head{ color: #4ade80; }
html[data-theme="dark"] .wpz-shop-invite-sub{ color: var(--d-ink-mute); }
html[data-theme="dark"] .wpz-shop-invite-row input{
  background: #1b1b1c; border-color: var(--d-flat-line); color: var(--d-flat-ink);
}

html[data-theme="dark"] .wpz-pred-banner{
  background: linear-gradient(135deg, rgba(147,51,234,0.14), rgba(79,70,229,0.12));
  border-color: rgba(167,139,250,0.3);
}
html[data-theme="dark"] .wpz-pred-q{ color: #c4b5fd; }
html[data-theme="dark"] .wpz-pred-meta, html[data-theme="dark"] .wpz-pred-foot,
html[data-theme="dark"] .wpz-pred-x{ color: #9d8fc7; }
html[data-theme="dark"] .wpz-pred-opt{
  background: #262627; border-color: rgba(167,139,250,0.3); color: #ddd6fe;
}
html[data-theme="dark"] .wpz-pred-opt:hover{ background: rgba(167,139,250,0.12); }
html[data-theme="dark"] .wpz-pred-pct{ color: #c4b5fd; }
html[data-theme="dark"] .wpz-pred-pct-fill{ background: rgba(167,139,250,0.16); }

html[data-theme="dark"] .wpz-prefs-section{
  background: rgba(255,255,255,0.04); border-color: var(--d-flat-line);
}
html[data-theme="dark"] .wpz-prefs-title{ color: var(--d-flat-ink); }
html[data-theme="dark"] .wpz-prefs-toggle{ color: var(--d-flat-ink); }
html[data-theme="dark"] .wpz-prefs-note{ color: var(--d-ink-mute); }

html[data-theme="dark"] .admin-pred-row{
  background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.22);
}
html[data-theme="dark"] .admin-pred-q{ color: #c4b5fd; }
html[data-theme="dark"] .admin-pred-meta{ color: #9d8fc7; }
html[data-theme="dark"] #adminSectionEvents #predQ,
html[data-theme="dark"] #adminSectionEvents #predOpts{
  background: #1b1b1c; border-color: var(--d-flat-line); color: var(--d-flat-ink);
}
/* VIP perks hover sheet: full dark-gold conversion (the cream card looked
   pasted-in). Items swap to a dark-tuned traveling highlight — same motion,
   readable at every frame. */
html[data-theme="dark"] .wpz-vip-perks-hover{
  background: linear-gradient(165deg, #2a2416, #3a3118) !important;
  border-color: rgba(255, 217, 119, 0.45) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 217, 119, 0.18) !important;
}
html[data-theme="dark"] .wpz-vip-perks-hover,
html[data-theme="dark"] .wpz-vip-perks-hover *{
  color: #ffe9ad !important;
}
html[data-theme="dark"] .wpz-vip-perks-hover .wpz-announce-benefits-title{
  color: #ffd977 !important;
}
html[data-theme="dark"] .wpz-vip-perks-hover .wpz-announce-benefits-item{
  animation-name: wpzPerkIn, wpzPerkCycleDark !important;
}
@keyframes wpzPerkCycleDark{
  0%, 7.7%, 100%{ background: transparent; transform: translateX(0); }
  3.8%{ background: rgba(255, 217, 119, 0.22); transform: translateX(5px); }
}

/* The soft VIP upsell block + its Upgrade pill, dark-gold with punchy ink. */
html[data-theme="dark"] .wpz-vip-profile-section.is-soft{
  background: linear-gradient(135deg, rgba(87, 68, 19, 0.5), rgba(58, 49, 24, 0.5)) !important;
  border-color: rgba(255, 217, 119, 0.4) !important;
}
html[data-theme="dark"] .wpz-vip-soft-highlights{ color: #d8c184 !important; }
html[data-theme="dark"] .wpz-vip-soft-btn{
  background: linear-gradient(135deg, #ffe9b8 0%, #ffd47e 100%) !important;
  color: #4d3a08 !important;
  border: 1px solid rgba(216, 164, 49, 0.5) !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

/* Country autocomplete: light panel + whitened text = invisible Sweden. */
html[data-theme="dark"] .wpz-country-suggest{
  background: #262627 !important;
  border-color: rgba(124, 192, 255, 0.4) !important;
}
html[data-theme="dark"] .wpz-country-suggest button{
  color: #e8f2ff !important;
}
html[data-theme="dark"] .wpz-country-suggest button:hover{
  background: rgba(124, 192, 255, 0.16) !important;
}

/* Spam-shield countdown pill: pale pink pill kept its light gradient while
   the text went near-white — the seconds were unreadable. */
html[data-theme="dark"] .spam-shield-timer{
  background: linear-gradient(135deg, #5c1f1f 0%, #7a2a2a 100%) !important;
  color: #ffd4d4 !important;
  border: 1px solid rgba(255, 150, 150, 0.35);
}

/* Email-verify bar: the light-gold gradient survived into dark mode while
   the text went white — white on pale gold is invisible. Full dark-gold. */
html[data-theme="dark"] .wpz-emailverify-bar{
  background: linear-gradient(135deg, #3a3118, #574413) !important;
  border-color: rgba(255, 217, 119, 0.45) !important;
  color: #ffe9ad !important;
}
html[data-theme="dark"] .wpz-emailverify-bar strong{ color: #ffd977 !important; }

html[data-theme="dark"] .admin-xp-history{
  background: rgba(255,255,255,0.04); border-color: var(--d-flat-line);
}
html[data-theme="dark"] .admin-xp-htitle, html[data-theme="dark"] .admin-xp-hwhen{ color: var(--d-ink-mute); }
html[data-theme="dark"] .admin-xp-hlabel{ color: var(--d-flat-ink); }
html[data-theme="dark"] .admin-xp-hamt{ color: #4ade80; }
html[data-theme="dark"] .admin-xp-hamt.is-neg{ color: #f87171; }

/* Emoji picker search — one pill: the WRAPPER carries the look, the input
   stays transparent (the generic dark input rule shouts, so we shout back). */
html[data-theme="dark"] .emoji-popup-search{
  background: #29292b !important;
  border: 1px solid rgba(124, 192, 255, 0.45) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .emoji-popup-search:focus-within{
  border-color: #7cc0ff !important;
  box-shadow: 0 0 0 2px rgba(124, 192, 255, 0.4) !important;
}
html[data-theme="dark"] #emojiPopupSearch{
  background-color: transparent !important;
  border: none !important;
  color: #e8f2ff !important;
  outline: none !important;
}
html[data-theme="dark"] #emojiPopupSearch::placeholder{ color: #9db1c5 !important; }

/* ── Notification reader ─────────────────────────────────────────────────
   The [class*="reader"] surface sweep near the top of this file matches
   EVERY node in the card — head, title, body, meta, close button — not
   just the card, so each one painted itself as a panel with a drop
   shadow. Stacked behind the text that reads as black bars. Only the
   card is a surface here; everything inside it is content. */
html[data-theme="dark"] .wpz-notif-reader{
  background-color: rgba(0, 0, 0, 0.55);
  box-shadow: none;
}
html[data-theme="dark"] .wpz-notif-reader-card{
  background-color: var(--d-panel);
  border-color: var(--d-line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
html[data-theme="dark"] .wpz-notif-reader-head,
html[data-theme="dark"] .wpz-notif-reader-icon,
html[data-theme="dark"] .wpz-notif-reader-title,
html[data-theme="dark"] .wpz-notif-reader-body,
html[data-theme="dark"] .wpz-notif-reader-meta,
html[data-theme="dark"] .wpz-notif-reader-actions{
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}
html[data-theme="dark"] .wpz-notif-reader-body{ color: var(--d-ink); }
html[data-theme="dark"] .wpz-notif-reader-title,
html[data-theme="dark"] .wpz-notif-reader-meta{ color: var(--d-ink-mute); }
html[data-theme="dark"] .wpz-notif-reader-close{
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--d-line);
  color: var(--d-ink-soft);
  box-shadow: none;
}
html[data-theme="dark"] .wpz-notif-reader-close:hover{ background-color: rgba(255, 255, 255, 0.13); }
/* The shop CTA keeps its brand gradient — the sweep would flatten it. */
html[data-theme="dark"] .wpz-notif-reader-cta{
  background-image: linear-gradient(135deg, #ff7ac8, #b45cf0);
  background-color: transparent;
  border-color: rgba(216, 92, 168, 0.5);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
}