/* ══════════════════════════════════════════════════════════════════════
   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);
}
/* The room you're in. §2's [class*="item"] sweep gives every channel row the
   same #222223, which left the active one identifiable only by a 12%-opacity
   shadow — i.e. not at all. Same specificity as that sweep, so the !important
   is what settles it rather than source order. */
html[data-theme="dark"] .channel-item.active{
  background-color: rgba(47, 111, 208, 0.24) !important;
  border-color: rgba(90, 167, 255, 0.5) !important;
  box-shadow: 0 6px 18px rgba(8, 30, 62, 0.5) !important;
}
html[data-theme="dark"] .channel-item.active::before{ background: #5aa7ff !important; }
html[data-theme="dark"] .channel-item.active .channel-avatar{
  background-color: rgba(90, 167, 255, 0.24) !important;
  color: #cfe4ff !important;
}
html[data-theme="dark"] .channel-item.active strong{ color: #ffffff !important; }
html[data-theme="dark"] .channel-item.active .channel-topic{ color: #cfe4ff !important; }

/* ── 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{
  /* Blur removed 2026-08-16 — typing lag, see styles.css note. The dark
     dim carries the separation on its own. */
  background: rgba(6, 8, 12, 0.66) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !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; }
/* …except the aurora badges, whose own dark gradients need light ink.
   The generic .nick-role rule above out-specifies .wpz-sop-badge, so the
   SOP chip rendered grey-on-violet without this. */
html[data-theme="dark"] .nick-role.wpz-sop-badge{ color: #f4e7ff !important; }
html[data-theme="dark"] .nick-role.wpz-aop-badge{ color: #e4fff2 !important; }
html[data-theme="dark"] .wpz-sop-badge .wpz-sop-star{ color: #ffd47e !important; }

/* ── 13. Profile popover & inline-styled action buttons ─────────────── */
/* Profile modal scrollbar keeps the slim glass look in dark. */
html[data-theme="dark"] #wpzProfileModalCard{
  scrollbar-color: rgba(140, 180, 230, 0.30) transparent;
}
html[data-theme="dark"] #wpzProfileModalCard::-webkit-scrollbar-thumb{
  background: rgba(140, 180, 230, 0.28) !important;
}
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;
}
/* Gated to real pointers — iOS first-tap-hover trap; see the 2026-08-12
   note near line 354. The VIP call header buttons were missed by that pass
   ("hide does nothing" on iPhone, 2026-08-14). */
@media (hover: hover) and (pointer: fine) {
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,
/* ── WPZ Limited storefront ──────────────────────────────────────────── */
html[data-theme="dark"] .wshop-window{
  background: var(--d-panel) !important;
  border-color: var(--d-line) !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.7) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .wshop-head{ border-bottom-color: var(--d-flat-line) !important; }
html[data-theme="dark"] .wshop-title,
html[data-theme="dark"] .wshop-name,
html[data-theme="dark"] .wshop-price,
html[data-theme="dark"] .wshop-line-name,
html[data-theme="dark"] .wshop-line-total,
html[data-theme="dark"] .wshop-qty span,
html[data-theme="dark"] .wshop-totals .is-total{ color: var(--d-ink) !important; }
html[data-theme="dark"] .wshop-eyebrow,
html[data-theme="dark"] .wshop-desc,
html[data-theme="dark"] .wshop-cart-title,
html[data-theme="dark"] .wshop-cart-empty,
html[data-theme="dark"] .wshop-line-meta,
html[data-theme="dark"] .wshop-totals,
html[data-theme="dark"] .wshop-note,
html[data-theme="dark"] .wshop-close{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .wshop-card,
html[data-theme="dark"] .wshop-cart{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .wshop-shot{ background: var(--d-raised) !important; }
html[data-theme="dark"] .wshop-size,
html[data-theme="dark"] .wshop-qty button,
html[data-theme="dark"] .wshop-input{
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .wshop-size:hover:not(:disabled){
  background: linear-gradient(135deg,#4a93ff,#2f6fd0) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html[data-theme="dark"] .wshop-input::placeholder{ color: var(--d-ink-mute) !important; }
/* .wshop-input above sets the `background` SHORTHAND, which resets
   background-image to none — that silently erases the country select's arrow
   in dark mode. Draw it back, in a colour that reads on the dark field. */
html[data-theme="dark"] .wshop-country{
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237e93a8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 11px center !important;
}
html[data-theme="dark"] .wshop-country option{ background: var(--d-raised); color: var(--d-flat-ink); }
html[data-theme="dark"] .wshop-close:hover{ background: var(--d-flat-2) !important; color: var(--d-ink) !important; }
html[data-theme="dark"] .wshop-nudge{ background: rgba(87,217,154,.10) !important; color: #57d99a !important; }
html[data-theme="dark"] .wshop-msg.is-error{ color: #ff8f84 !important; }

/* ── Shop admin ──────────────────────────────────────────────────────── */
html[data-theme="dark"] .sa-tab,
html[data-theme="dark"] .sa-btn,
html[data-theme="dark"] .sa-stat,
html[data-theme="dark"] .sa-order,
html[data-theme="dark"] .sa-product{
  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"] .sa-tab.is-on,
html[data-theme="dark"] .sa-btn.is-primary{
  background: linear-gradient(135deg,#4a93ff,#2f6fd0) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html[data-theme="dark"] .sa-btn.is-danger{
  background: rgba(255,143,132,.10) !important;
  border-color: rgba(255,143,132,.28) !important;
  color: #ff8f84 !important;
}
html[data-theme="dark"] .sa-dim,
html[data-theme="dark"] .sa-empty,
html[data-theme="dark"] .sa-stat span,
html[data-theme="dark"] .sa-field > span{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .sa-ref,
html[data-theme="dark"] .sa-total,
html[data-theme="dark"] .sa-stat b,
html[data-theme="dark"] .sa-items,
html[data-theme="dark"] .sa-product-name,
html[data-theme="dark"] .sa-form-head{ color: var(--d-ink) !important; }
html[data-theme="dark"] .sa-input,
html[data-theme="dark"] .sa-addr{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .sa-check{ color: var(--d-ink-soft) !important; }
html[data-theme="dark"] .sa-order.is-alert,
html[data-theme="dark"] .sa-stat.is-alert{
  background: rgba(255,143,132,.07) !important;
  border-color: rgba(255,143,132,.32) !important;
}
html[data-theme="dark"] .sa-stat.is-alert b,
html[data-theme="dark"] .sa-warn{ color: #ff8f84 !important; }
html[data-theme="dark"] .sa-low{
  background: rgba(216,164,49,.10) !important;
  border-color: rgba(216,164,49,.28) !important;
  color: #ffd977 !important;
}
html[data-theme="dark"] .sa-ship{
  background: rgba(87,217,154,.07) !important;
  border-color: rgba(87,217,154,.24) !important;
}
html[data-theme="dark"] .sa-ship.is-alert{
  background: rgba(255,143,132,.07) !important;
  border-color: rgba(255,143,132,.30) !important;
}
html[data-theme="dark"] .sa-ship-head b{ color: #57d99a !important; }
html[data-theme="dark"] .sa-ship.is-alert .sa-ship-head b{ color: #ff8f84 !important; }
html[data-theme="dark"] .sa-ship-row{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .sa-ship-row > span:first-child{ color: var(--d-ink-mute) !important; }

/* ── Services panel ──────────────────────────────────────────────────── */
html[data-theme="dark"] .services-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"] .sv-popup-title{ color: var(--d-ink) !important; }
html[data-theme="dark"] .sv-popup-desc,
html[data-theme="dark"] .sv-card-lead,
html[data-theme="dark"] .sv-card-delivery,
html[data-theme="dark"] .sv-form-note,
html[data-theme="dark"] .sv-empty,
html[data-theme="dark"] .sv-field > span{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .sv-card{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .sv-card-name,
html[data-theme="dark"] .sv-card-price,
html[data-theme="dark"] .sv-form-title,
html[data-theme="dark"] .sv-form-price{ color: var(--d-ink) !important; }
html[data-theme="dark"] .sv-card-blurb{ color: var(--d-ink-soft) !important; }
html[data-theme="dark"] .sv-card-icon{ background: var(--d-raised) !important; }
html[data-theme="dark"] .sv-card-btn{
  background-image: none !important;
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink) !important;
}
/* The primary action keeps its blue in dark mode — it is the one thing on
   this panel that should not blend into the card. */
html[data-theme="dark"] .sv-card-btn.is-primary{
  background: linear-gradient(135deg, #4a93ff 0%, #2f6fd0 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .sv-back{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-mute) !important;
}
html[data-theme="dark"] .sv-field input,
html[data-theme="dark"] .sv-field textarea{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-flat-ink) !important;
}
html[data-theme="dark"] .sv-field input::placeholder,
html[data-theme="dark"] .sv-field textarea::placeholder{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .sv-msg.is-error{ color: #ff8f84 !important; }
html[data-theme="dark"] .sv-count{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .sv-count.is-over{ color: #ff8f84 !important; }

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;
}

/* Newsletter signup result line. The light-mode green and red both fail
   contrast on the charcoal panel, so each gets a lifted variant. */
html[data-theme="dark"] .sub-msg.is-ok{ color: #57d99a !important; }
html[data-theme="dark"] .sub-msg.is-error{ color: #ff8f84 !important; }

/* Already-subscribed badge. The light-mode forest green reads as near-black
   on the charcoal panel, so the tint, border and ink all lift together. */
html[data-theme="dark"] .sub-verified{
  background: rgba(87, 217, 154, 0.10) !important;
  border-color: rgba(87, 217, 154, 0.28) !important;
}
html[data-theme="dark"] .sub-verified-mark{ background: #2f9d68 !important; color: #fff !important; }
html[data-theme="dark"] .sub-verified-title{ color: #57d99a !important; }
html[data-theme="dark"] .sub-verified-mail,
html[data-theme="dark"] .sub-verified-note{ color: var(--d-ink-mute) !important; }

/* ── Free-downloads library ───────────────────────────────────────────
   The panel already goes dark via the popup rule above; these are the
   parts added for the file list, which carry their own light-mode inks. */
html[data-theme="dark"] .dl-msg.is-ok{ color: #57d99a !important; }
html[data-theme="dark"] .dl-msg.is-error,
html[data-theme="dark"] .dl-join-msg.is-error{ color: #ff8f84 !important; }
html[data-theme="dark"] .dl-greeting,
html[data-theme="dark"] .dl-item-title,
html[data-theme="dark"] .dl-join-text{ color: var(--d-ink) !important; }
html[data-theme="dark"] .dl-group,
html[data-theme="dark"] .dl-item-meta,
html[data-theme="dark"] .dl-close,
html[data-theme="dark"] .dl-join-consent{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .dl-item{ border-bottom-color: var(--d-flat-line) !important; }
html[data-theme="dark"] .dl-library{
  scrollbar-color: rgba(220, 226, 232, 0.26) transparent !important;
}
/* Must match the popup's own background (--d-panel), or the sticky header
   shows as a lighter band over the rows sliding under it. */
html[data-theme="dark"] .dl-lib-head{ background: var(--d-panel) !important; }
html[data-theme="dark"] .dl-library::-webkit-scrollbar-thumb{
  background: rgba(220, 226, 232, 0.22) !important;
}
html[data-theme="dark"] .dl-library::-webkit-scrollbar-thumb:hover{
  background: rgba(220, 226, 232, 0.4) !important;
}
html[data-theme="dark"] .dl-item:hover{ background: var(--d-flat-2) !important; }
html[data-theme="dark"] .dl-group::after{ background: var(--d-flat-line) !important; }
html[data-theme="dark"] .dl-group-count{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .dl-item-icon{
  background: var(--d-flat-2) !important;
  color: var(--d-ink-mute) !important;
}
/* Ghost until hovered — the light-mode blue ink is unreadable on charcoal. */
html[data-theme="dark"] .dl-get{
  background: transparent !important;
  border-color: rgba(122, 173, 255, 0.34) !important;
  color: #9cc4f5 !important;
}
html[data-theme="dark"] .dl-close:hover{
  background: var(--d-flat-2) !important;
  color: var(--d-ink) !important;
}
/* …and filled once the row is reached for. Declared AFTER the ghost rule
   above, because two equally specific !important rules are settled by source
   order — the old filled-by-default rule lived here and silently won. */
html[data-theme="dark"] .dl-item:hover .dl-get,
html[data-theme="dark"] .dl-get:hover{
  background: linear-gradient(135deg, #4a93ff 0%, #2f6fd0 100%) !important;
  color: #ffffff !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;
}
/* Compact Remove-friend pill (2026-08-16): quiet outline, no fill, so the
   shrunken button doesn't glow like a primary action on charcoal. ID weight
   required: section 14's `html[data-theme=dark] #socialSecondaryButton`
   catch-all (~line 641) out-guns any class-only rule here. */
html[data-theme="dark"] #socialSecondaryButton.is-compact-danger,
html[data-theme="dark"] .social-secondary.is-compact-danger{
  background: transparent !important;
  border: 1px solid rgba(240, 120, 120, 0.4) !important;
  color: #e69090 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] #socialSecondaryButton.is-compact-danger:hover,
html[data-theme="dark"] .social-secondary.is-compact-danger:hover{
  background: rgba(196, 61, 61, 0.14) !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{
  /* Was #26200f→#1d1a10: so dark the item rows disappeared into it and the
     whole panel read as a murky smudge next to the white Stripe checkout.
     Lifted enough to separate the rows while staying unmistakably gold. */
  background: linear-gradient(160deg, #322c1b, #262214) !important;
  border: 1px solid rgba(216, 164, 49, 0.55) !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{
  /* 10% gold on a near-black panel is invisible — the rows had no edges. */
  background: rgba(255, 214, 120, 0.13) !important;
  border: 1px solid rgba(255, 205, 90, 0.30) !important;
  color: #fbf1da !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 4;
  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 3;
  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);
}
/* Gated to real pointers — iOS first-tap-hover trap; see the 2026-08-12
   note near line 354. The VIP call header buttons were missed by that pass
   ("hide does nothing" on iPhone, 2026-08-14). */
@media (hover: hover) and (pointer: fine) {
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; }
/* The native calendar is drawn by the browser, not by us — `color-scheme` is
   the only way to make it dark. Left light, it opens as a white sheet over a
   black form and the calendar icon vanishes into the field. */
html[data-theme="dark"] .bk-date{ color-scheme: dark !important; }
html[data-theme="dark"] .bk-date::-webkit-calendar-picker-indicator{
  filter: invert(1) !important;
  opacity: 0.6 !important;
}
html[data-theme="dark"] .bk-date:hover::-webkit-calendar-picker-indicator{ opacity: 1 !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;
}
/* ↩ PM reply button (2026-08-16): same dark treatment as the ✕ above — its
   light-blue gradient read as a blank pale blob on charcoal bubbles. */
html[data-theme="dark"] .social-pm-reply-btn{
  background-image: none !important;
  background: #1f3350 !important;
  border: 1px solid rgba(120, 168, 224, 0.55) !important;
  color: #b8d4f4 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .social-pm-reply-btn:hover{
  background: #2a4468 !important;
  border-color: rgba(150, 195, 245, 0.75) !important;
  color: #dcebfb !important;
}
html[data-theme="dark"] .social-pm-quote{
  background: rgba(120, 168, 224, 0.16) !important;
  border-left-color: rgba(120, 168, 224, 0.7) !important;
}
html[data-theme="dark"] .wpz-inbox-replybar{
  background: rgba(120, 168, 224, 0.14) !important;
  border-left-color: rgba(120, 168, 224, 0.7) !important;
  color: #cfe0f3 !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; }
/* Admin-channel picker keeps its violet identity in dark too. */
html[data-theme="dark"] .mention-autocomplete.is-admin-channel{
  border-color: rgba(170, 130, 220, 0.34) !important;
}
html[data-theme="dark"] .mention-autocomplete.is-admin-channel .mention-autocomplete-item{
  color: #cfa8f5 !important;
}
html[data-theme="dark"] .mention-autocomplete.is-admin-channel .mention-autocomplete-item:hover,
html[data-theme="dark"] .mention-autocomplete.is-admin-channel .mention-autocomplete-item.is-selected{
  background: rgba(150, 110, 200, 0.22) !important;
  color: #ecd9ff !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; }

/* Played shows. The light-mode treatment leans on pale greys that vanish
   into the charcoal panel, so the whole row is re-toned rather than dimmed:
   opacity alone would leave the strike-through invisible. */
html[data-theme="dark"] .td-event.is-done{
  opacity: 0.72 !important;
  background-image: none !important;
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .td-event.is-done:hover{
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .td-event.is-done .td-event-name{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .td-event.is-done .td-event-name,
html[data-theme="dark"] .td-event.is-done .td-event-place{
  text-decoration-color: rgba(220, 226, 232, 0.55) !important;
}
html[data-theme="dark"] .td-event.is-done .td-event-date{
  background-image: none !important;
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .td-event.is-done .td-event-month,
html[data-theme="dark"] .td-event.is-done .td-event-day{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .td-event-done{
  background: var(--d-raised) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-mute) !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;
}
/* Gated to real pointers — iOS first-tap-hover trap; see the 2026-08-12
   note near line 354. The VIP call header buttons were missed by that pass
   ("hide does nothing" on iPhone, 2026-08-14). */
@media (hover: hover) and (pointer: fine) {
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;
}
/* Gated to real pointers — iOS first-tap-hover trap; see the 2026-08-12
   note near line 354. The VIP call header buttons were missed by that pass
   ("hide does nothing" on iPhone, 2026-08-14). */
@media (hover: hover) and (pointer: fine) {
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{
  /* Gold conic ring removed 2026-08-15 — the golden frame around the Stripe
     iframe ran phones hot and laggy (device video). Plain charcoal card. */
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: linear-gradient(180deg, #232425, #1b1b1c) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !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);
}

/* ══ Auth modal (login / sign up) ══════════════════════════════════════════
   dark.css had NO rules for this panel at all, so it kept its light
   `linear-gradient(...white...)` from styles.css while the global dark text
   colour turned the labels light — white-on-white. Overriding
   background-color alone does nothing here: the white is a background-IMAGE
   painted over it, so the gradient itself has to be replaced. */
html[data-theme="dark"] .auth-panel {
  background-image: none !important;
  background-color: var(--d-panel, #1b1b1c) !important;
  border-color: var(--d-line, rgba(255,255,255,0.12)) !important;
  color: var(--d-ink, #ececee) !important;
}
/* The VIP funnel keeps its gold ring — only the white face behind it goes. */
html[data-theme="dark"] .auth-modal.is-vip-flow .auth-panel {
  background:
    linear-gradient(180deg, #1f1f21, #191a1c) 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;
}
html[data-theme="dark"] .auth-panel-header { background: transparent !important; }
html[data-theme="dark"] .auth-panel-header h2,
html[data-theme="dark"] .auth-panel-header p,
html[data-theme="dark"] .auth-copy { color: var(--d-ink, #ececee) !important; }
/* Labels were the worst of it — pale grey intended for a white card. */
html[data-theme="dark"] .auth-form label {
  color: var(--d-ink-mute, #939399) !important;
}
html[data-theme="dark"] .auth-form input {
  background-color: #161617 !important;
  background-image: none !important;
  border-color: var(--d-line, rgba(255,255,255,0.14)) !important;
  color: var(--d-ink, #ececee) !important;
}
html[data-theme="dark"] .auth-form input::placeholder { color: #7d8a97 !important; }
html[data-theme="dark"] .auth-form input:focus {
  border-color: rgba(143, 192, 247, 0.65) !important;
}

/* The heading block inside the auth modal paints its own charcoal, which sat
   as a visibly different rectangle on the panel's slightly lighter gradient. */
html[data-theme="dark"] #authModal .panel-heading,
html[data-theme="dark"] .auth-panel .panel-heading {
  background: transparent !important;
}

/* ══ PM "New message from…" toast ══════════════════════════════════════════
   Never themed — it kept the light frosted-glass card (a white gradient plus
   a near-white border) and navy text, so in dark mode it arrived as a bright
   white slab. As with the auth panel, the white is a background-IMAGE, so
   background-color alone would not have touched it. */
html[data-theme="dark"] .wpz-pm-notify {
  background: linear-gradient(180deg, rgba(38,38,40,0.94), rgba(28,28,30,0.92)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .wpz-pm-notify-title { color: var(--d-ink, #ececee) !important; }
html[data-theme="dark"] .wpz-pm-notify-body  { color: var(--d-ink-mute, #939399) !important; }
html[data-theme="dark"] .wpz-pm-notify-close {
  background: rgba(255,255,255,0.10) !important;
  color: var(--d-ink-mute, #939399) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
html[data-theme="dark"] .wpz-pm-notify-close:hover {
  background: rgba(255,255,255,0.18) !important;
  color: var(--d-ink, #ececee) !important;
}
html[data-theme="dark"] .wpz-pm-notify-avatar {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: var(--d-ink-mute, #939399) !important;
}

html[data-theme="dark"] .wpz-cam-picker {
  background: var(--d-panel, #1b1b1c) !important;
  border-color: var(--d-line, rgba(255,255,255,0.12)) !important;
}
html[data-theme="dark"] .wpz-cam-item { color: var(--d-ink, #ececee) !important; }
html[data-theme="dark"] .wpz-cam-item:hover { background: rgba(255,255,255,0.10) !important; }
html[data-theme="dark"] .wpz-cam-item.is-on { background: rgba(143,192,247,0.20) !important; }

html[data-theme="dark"] .wpz-call-resume {
  background: linear-gradient(180deg, rgba(38,38,40,0.98), rgba(28,28,30,0.96)) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
html[data-theme="dark"] .wpz-call-resume-text { color: var(--d-ink, #ececee) !important; }
html[data-theme="dark"] .wpz-call-resume-no { color: var(--d-ink-mute, #939399) !important; }

/* ── Email Send section (operator panel → Management) ──────────────────────
 *
 * !important throughout, matching the .bk-* block above: these panels are
 * repainted by their module after the theme is applied, and a plain override
 * loses to the base rule when the subtree is rebuilt.
 */
html[data-theme="dark"] .ml-view-btn,
html[data-theme="dark"] .ml-btn,
html[data-theme="dark"] .ml-tab {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--d-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .ml-view-btn:hover,
html[data-theme="dark"] .ml-btn:hover,
html[data-theme="dark"] .ml-tab:hover { background: rgba(90,167,255,0.16) !important; color: var(--d-accent) !important; }
html[data-theme="dark"] .ml-view-btn.is-active,
html[data-theme="dark"] .ml-tab.is-active {
  background: rgba(90,167,255,0.2) !important; color: var(--d-accent) !important;
  border-color: rgba(90,167,255,0.4) !important;
}
html[data-theme="dark"] .ml-btn-primary {
  background: linear-gradient(135deg,#4a93ff,#2f7ff0) !important; color: #fff !important; border-color: #2f7ff0 !important;
}
html[data-theme="dark"] .ml-btn-danger {
  background: linear-gradient(135deg,#e8564a,#cf3b2f) !important; color: #fff !important; border-color: #cf3b2f !important;
}
html[data-theme="dark"] .ml-btn:disabled,
html[data-theme="dark"] .ml-btn-danger:disabled {
  background: rgba(255,255,255,0.04) !important; color: var(--d-ink-mute) !important;
  border-color: var(--d-line-soft) !important;
}

html[data-theme="dark"] .ml-live-on  { background: rgba(232,86,74,0.18) !important; color: #ff9a8e !important; border-color: rgba(232,86,74,0.4) !important; }
html[data-theme="dark"] .ml-live-off { background: rgba(90,167,255,0.14) !important; color: var(--d-accent) !important; border-color: rgba(90,167,255,0.32) !important; }

html[data-theme="dark"] .ml-alert-error { background: rgba(232,86,74,0.16) !important; color: #ff9a8e !important; }
html[data-theme="dark"] .ml-alert-ok { background: rgba(79,163,110,0.16) !important; color: #7fd6a0 !important; }
html[data-theme="dark"] .ml-dim,
html[data-theme="dark"] .ml-check,
html[data-theme="dark"] .ml-merge,
html[data-theme="dark"] .ml-empty { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-h3,
html[data-theme="dark"] .ml-toolbar-label,
html[data-theme="dark"] .ml-sample-head,
html[data-theme="dark"] .ml-field > span,
html[data-theme="dark"] .ml-preview-head > span { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-field > span em { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-ok { color: #7fd6a0 !important; }

html[data-theme="dark"] .ml-table th { color: var(--d-ink-mute) !important; border-bottom-color: var(--d-line) !important; }
html[data-theme="dark"] .ml-table td { color: var(--d-ink) !important; border-bottom-color: var(--d-line-soft) !important; }
html[data-theme="dark"] .ml-table tbody tr.ml-row:hover { background: rgba(90,167,255,0.1) !important; }
html[data-theme="dark"] .ml-row-sub { color: var(--d-ink-mute) !important; }

html[data-theme="dark"] .ml-status-draft { background: rgba(255,255,255,0.07) !important; color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-status-approved { background: rgba(216,160,58,0.18) !important; color: #e8bd6d !important; }
html[data-theme="dark"] .ml-status-sending { background: rgba(90,167,255,0.18) !important; color: var(--d-accent) !important; }
html[data-theme="dark"] .ml-status-sent { background: rgba(79,163,110,0.18) !important; color: #7fd6a0 !important; }
html[data-theme="dark"] .ml-status-cancelled,
html[data-theme="dark"] .ml-status-failed { background: rgba(232,86,74,0.18) !important; color: #ff9a8e !important; }

html[data-theme="dark"] .ml-tile,
html[data-theme="dark"] .ml-seg,
html[data-theme="dark"] .ml-sample {
  background: var(--d-panel-2) !important; border-color: var(--d-line) !important;
}
html[data-theme="dark"] .ml-seg:hover { background: rgba(90,167,255,0.12) !important; }
html[data-theme="dark"] .ml-tile-value,
html[data-theme="dark"] .ml-seg,
html[data-theme="dark"] .ml-country { color: var(--d-ink) !important; }
html[data-theme="dark"] .ml-tile-label { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-tile-good .ml-tile-value { color: #7fd6a0 !important; }
html[data-theme="dark"] .ml-tile-warn .ml-tile-value { color: #ff9a8e !important; }
html[data-theme="dark"] .ml-seg-count { color: var(--d-accent) !important; }
html[data-theme="dark"] .ml-seg-flag.is-safe { background: rgba(79,163,110,0.2) !important; color: #7fd6a0 !important; }
html[data-theme="dark"] .ml-seg-flag.is-judgement { background: rgba(216,160,58,0.2) !important; color: #e8bd6d !important; }
html[data-theme="dark"] .ml-country { border-bottom-color: var(--d-line-soft) !important; }

html[data-theme="dark"] .ml-field input,
html[data-theme="dark"] .ml-field select,
html[data-theme="dark"] .ml-field textarea,
html[data-theme="dark"] .ml-step-body input,
html[data-theme="dark"] .ml-mini input {
  background: var(--d-panel-2) !important; border-color: var(--d-line) !important; color: var(--d-ink) !important;
}
html[data-theme="dark"] .ml-field input:disabled,
html[data-theme="dark"] .ml-field select:disabled,
html[data-theme="dark"] .ml-field textarea:disabled,
html[data-theme="dark"] .ml-step-body input:disabled {
  background: rgba(255,255,255,0.03) !important; color: var(--d-ink-mute) !important;
}
html[data-theme="dark"] .ml-merge code,
html[data-theme="dark"] .ml-import code { background: rgba(90,167,255,0.16) !important; color: var(--d-accent) !important; }
html[data-theme="dark"] .ml-locked { background: rgba(216,160,58,0.16) !important; color: #e8bd6d !important; }
html[data-theme="dark"] .ml-warn {
  background: rgba(216,160,58,0.12) !important; color: #e8bd6d !important; border-color: rgba(216,160,58,0.28) !important;
}
html[data-theme="dark"] .ml-warn code { background: rgba(216,160,58,0.2) !important; color: #f0cd8c !important; }

html[data-theme="dark"] .ml-preview-subject { color: var(--d-ink) !important; }
/* Not themed: it is a faithful preview of the email, which is black in every
   client regardless of what theme this panel is in. */
html[data-theme="dark"] .ml-preview-stage { border-color: var(--d-line) !important; }
html[data-theme="dark"] .ml-preview-text {
  background: var(--d-panel-2) !important; border-color: var(--d-line) !important; color: var(--d-ink-soft) !important;
}

html[data-theme="dark"] .ml-send {
  background: rgba(232,140,90,0.09) !important; border-color: rgba(232,140,90,0.26) !important;
}
html[data-theme="dark"] .ml-send-title { color: #f0a97e !important; }
html[data-theme="dark"] .ml-step { background: rgba(255,255,255,0.04) !important; border-color: rgba(232,140,90,0.16) !important; }
html[data-theme="dark"] .ml-step.is-done { background: rgba(79,163,110,0.1) !important; border-color: rgba(79,163,110,0.28) !important; }
html[data-theme="dark"] .ml-step-head { color: var(--d-ink) !important; }
html[data-theme="dark"] .ml-step-note { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-mini { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-blockers {
  background: rgba(255,255,255,0.03) !important; color: #e0a882 !important; border-color: rgba(232,140,90,0.3) !important;
}
html[data-theme="dark"] .ml-send-running {
  background: rgba(90,167,255,0.1) !important; border-color: rgba(90,167,255,0.28) !important;
}
html[data-theme="dark"] .ml-send-running .ml-send-title { color: var(--d-accent) !important; }
html[data-theme="dark"] .ml-progress { background: rgba(255,255,255,0.08) !important; }
/* Engagement stats tiles */
html[data-theme="dark"] .ml-stats { border-top-color: var(--d-line) !important; }
html[data-theme="dark"] .ml-stats-head { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-stat {
  background: rgba(255,255,255,0.04) !important; border-color: var(--d-line) !important;
}
html[data-theme="dark"] .ml-stat-n { color: var(--d-ink) !important; }
html[data-theme="dark"] .ml-stat-l { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-stats-links { color: var(--d-ink-soft) !important; }
html[data-theme="dark"] .ml-stats-live { color: #4fd39b !important; }

/* ── Email Send: selection + delete ───────────────────────────────────── */
html[data-theme="dark"] .ml-sel { accent-color: #4a93ff; }
html[data-theme="dark"] .ml-sel-locked { color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .ml-row.is-selected { background: rgba(90,167,255,0.14) !important; }
html[data-theme="dark"] .ml-selbar {
  background: rgba(232,140,90,0.1) !important; border-color: rgba(232,140,90,0.26) !important;
}
html[data-theme="dark"] .ml-selbar-count { color: #f0a97e !important; }

/* ── Email Send: campaign photo ───────────────────────────────────────── */
html[data-theme="dark"] .ml-hero-thumb { border-color: var(--d-line) !important; }
html[data-theme="dark"] .ml-hero-meta input {
  background: var(--d-panel-2) !important; border-color: var(--d-line) !important; color: var(--d-ink) !important;
}
html[data-theme="dark"] .ml-hero-drop {
  background: rgba(255,255,255,0.03) !important; border-color: var(--d-line) !important;
}
html[data-theme="dark"] .ml-hero-drop:hover { background: rgba(90,167,255,0.1) !important; }
html[data-theme="dark"] .ml-hero-drop-label { color: var(--d-accent) !important; }

/* ── Email Send: live preview state ───────────────────────────────────── */
html[data-theme="dark"] .ml-dirty { color: #e8bd6d !important; }


/* ── Shop admin: queue chips and per-size stock ───────────────────────────
 *
 * The dark sheet paints .sa-btn/.sa-order flat, and these new pieces need
 * their own treatment or they arrive as identical grey lozenges — which
 * defeats the point of them: the whole job of a stock chip is to be a
 * different colour when a size has run out. */
html[data-theme="dark"] .sa-chip{
  background: var(--d-flat-2) !important;
  border-color: var(--d-flat-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .sa-chip b{
  background: rgba(255,255,255,.08) !important;
  color: var(--d-ink) !important;
}
html[data-theme="dark"] .sa-chip:hover{ border-color: rgba(90,167,255,.45) !important; }
/* The selected queue must read as selected — this is the one chip that keeps
   its colour in both themes. */
html[data-theme="dark"] .sa-chip.is-on{
  background: linear-gradient(135deg,#4a93ff,#2f6fd0) !important;
  border-color: transparent !important;
  color: #fff !important;
}
html[data-theme="dark"] .sa-chip.is-on b{ background: rgba(255,255,255,.22) !important; color: #fff !important; }
html[data-theme="dark"] .sa-chip.is-live:not(.is-on) b{ background: rgba(87,217,154,.16) !important; color: #57d99a !important; }

html[data-theme="dark"] .sa-size-chip{ background: rgba(87,217,154,.12) !important; color: #57d99a !important; }
html[data-theme="dark"] .sa-size-chip.is-low{ background: rgba(255,197,87,.14) !important; color: #ffc557 !important; }
html[data-theme="dark"] .sa-size-chip.is-out{ background: rgba(255,143,132,.14) !important; color: #ff8f84 !important; }
html[data-theme="dark"] .sa-size-chip b{ background: rgba(0,0,0,.28) !important; }

html[data-theme="dark"] .sa-order.is-open{
  background: var(--d-raised) !important;
  border-color: rgba(90,167,255,.42) !important;
}
html[data-theme="dark"] .sa-order-line:hover{ background: rgba(90,167,255,.08) !important; }
html[data-theme="dark"] .sa-order-line{ color: var(--d-ink) !important; }
html[data-theme="dark"] .sa-ref{ color: var(--d-ink) !important; }
html[data-theme="dark"] .sa-total{ color: var(--d-ink) !important; }
html[data-theme="dark"] .sa-who{ color: var(--d-flat-ink) !important; }
html[data-theme="dark"] .sa-where,
html[data-theme="dark"] .sa-when,
html[data-theme="dark"] .sa-lbl,
html[data-theme="dark"] .sa-caret{ color: var(--d-ink-mute) !important; }
html[data-theme="dark"] .sa-size{ background: rgba(90,167,255,.16) !important; color: #8fc0ff !important; }
html[data-theme="dark"] .sa-flag.is-soft{ color: #ffc557 !important; }
html[data-theme="dark"] .sa-status.is-paid,
html[data-theme="dark"] .sa-status.is-shipped,
html[data-theme="dark"] .sa-status.is-delivered{ background: rgba(87,217,154,.20) !important; color: #6ee7a8 !important; }
html[data-theme="dark"] .sa-status.is-packed{ background: rgba(255,197,87,.18) !important; color: #ffc557 !important; }
html[data-theme="dark"] .sa-status.is-oversold,
html[data-theme="dark"] .sa-status.is-cancelled,
html[data-theme="dark"] .sa-status.is-refunded{ background: rgba(255,143,132,.18) !important; color: #ff8f84 !important; }
html[data-theme="dark"] .sa-status.is-pending{ background: rgba(255,255,255,.08) !important; color: var(--d-ink-mute) !important; }


/* Stock alerts — the amber/red panel must survive the flat dark treatment. */
html[data-theme="dark"] .sa-stock{
  background: rgba(255,197,87,.08) !important;
  border-color: rgba(255,197,87,.26) !important;
}
html[data-theme="dark"] .sa-stock.is-alert{
  background: rgba(255,143,132,.07) !important;
  border-color: rgba(255,143,132,.28) !important;
}
html[data-theme="dark"] .sa-stock-name{ color: var(--d-flat-ink) !important; }


/* Lost-sale panel — the dark sheet flattens .sa-btn and would flatten this. */
html[data-theme="dark"] .sa-recover{
  background: rgba(87,217,154,.07) !important;
  border-color: rgba(87,217,154,.22) !important;
}
html[data-theme="dark"] .sa-recover.is-off{
  background: rgba(255,255,255,.04) !important;
  border-color: var(--d-flat-line) !important;
}
html[data-theme="dark"] .sa-recover-head b{ color: #57d99a !important; }
html[data-theme="dark"] .sa-recover.is-off .sa-recover-head b{ color: var(--d-ink-mute) !important; }

html[data-theme="dark"] .sa-voucher-amt,
html[data-theme="dark"] .sa-voucher-code{ color: #57d99a !important; }

html[data-theme="dark"] .sa-chip.is-stock b{ background: rgba(255,143,132,.16) !important; color: #ff8f84 !important; }
html[data-theme="dark"] .sa-chip.is-stock.is-on b{ background: rgba(255,255,255,.22) !important; color: #fff !important; }

/* ── shop analytics tab (dark) ── */
html[data-theme="dark"] .sa-ana-chart { background: rgba(255,255,255,.05) !important; }
html[data-theme="dark"] .sa-ana-legend { color: #9aa1a8 !important; }
html[data-theme="dark"] .sa-ana-step-label { color: #c2c7d0 !important; }
html[data-theme="dark"] .sa-ana-step-bar { background: rgba(255,255,255,.08) !important; }
html[data-theme="dark"] .sa-ana-table td { border-top-color: rgba(255,255,255,.09) !important; }
html[data-theme="dark"] .sa-ana-table th { color: #8b939c !important; }

/* op-nav management separators (dark) */
html[data-theme="dark"] .op-nav-sep{ background: rgba(255,255,255,.10) !important; }

/* mailout audience badges (dark) */
html[data-theme="dark"] .ml-aud-news { background: rgba(76,196,255,.14) !important; color: #7fd0ff !important; }
html[data-theme="dark"] .ml-aud-cust { background: rgba(240,180,41,.16) !important; color: #f0b429 !important; }
html[data-theme="dark"] .ml-aud-all { background: rgba(63,191,108,.15) !important; color: #57d99a !important; }

html[data-theme="dark"] .sa-btn-danger { color: #ff8f84 !important; border-color: rgba(255,143,132,.35) !important; }
html[data-theme="dark"] .sa-btn-danger:hover { background: rgba(255,143,132,.12) !important; }

/* ── Booking full modal card (now the ONLY booking surface on touch —
   client.js routes the trigger tap here ≤980px). The overlay was skinned
   above but the card itself stayed rgba(255,255,255,.99) with an unskinned
   head strip: a white bar with --d-ink (light) title text in dark mode. */
html[data-theme="dark"] .bookings-full-card{
  background: var(--d-panel) !important;
  border-color: var(--d-line) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .bookings-full-head{
  background: var(--d-panel) !important;
  border-bottom-color: var(--d-line) !important;
}
html[data-theme="dark"] .bookings-full-close{ color: var(--d-ink-soft) !important; }
html[data-theme="dark"] .bookings-full-body{ background: var(--d-panel) !important; }

/* ⚙ OPERATOR chip — dark: the op-panel's active-nav steel gradient with a
   light-blue keyline glow, so the staff door stands apart from the flat
   charcoal pills around it. */
html[data-theme="dark"] #wpzOperatorChip {
  background: linear-gradient(135deg, #2f4a6b 0%, #24384f 100%) !important;
  border: 1px solid rgba(143, 196, 255, 0.45) !important;
  color: #d8ebff !important;
  box-shadow: 0 0 0 1px rgba(143, 196, 255, 0.14),
              0 0 12px rgba(90, 167, 255, 0.28) !important;
}
html[data-theme="dark"] #wpzOperatorChip:hover {
  background: linear-gradient(135deg, #3a5a80 0%, #2c4560 100%) !important;
  box-shadow: 0 0 0 1px rgba(143, 196, 255, 0.28),
              0 0 16px rgba(90, 167, 255, 0.45) !important;
}


/* Staff "Summon by email" pill in the inbox header — amber on charcoal,
   matching the recolored voice/video/block pills above. */
html[data-theme="dark"] .wpz-inbox-call-pill.is-summon{
  background: rgba(222, 184, 92, 0.12) !important;
  border: 1px solid rgba(222, 184, 92, 0.4) !important;
  color: #e8c877 !important;
}
html[data-theme="dark"] .wpz-inbox-call-pill.is-summon:hover{
  background: rgba(222, 184, 92, 0.2) !important;
}


/* Nudge pill on charcoal — matches the recolored voice/video pills. */
html[data-theme="dark"] .wpz-inbox-call-pill.is-nudge{
  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-nudge:hover{
  background: var(--d-flat-3) !important;
}


/* Sent-request pills — matched sent-request pair on the standard dark
   button palette: neutral charcoal chip for Pending, the same charcoal
   pill with a soft red accent for Cancel. Overrides the earlier recolor. */
html[data-theme="dark"] .wpz-social-reqpending{
  background: var(--d-raised) !important;
  border: 1px solid var(--d-line) !important;
  color: var(--d-ink-soft) !important;
}
html[data-theme="dark"] .wpz-social-reqactions .wpz-social-cancel,
html[data-theme="dark"] .wpz-social-cancel{
  background: var(--d-raised) !important;
  border: 1px solid rgba(240, 120, 120, 0.3) !important;
  color: #ff9c9c !important;
}
html[data-theme="dark"] .wpz-social-reqactions .wpz-social-cancel:hover,
html[data-theme="dark"] .wpz-social-cancel:hover{
  background: rgba(196, 61, 61, 0.22) !important;
  color: #ffc2c2 !important;
}


/* Mod Tools banned-IP rows on charcoal. */
html[data-theme="dark"] .wpz-ipban-row{
  background: var(--d-raised) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .wpz-ipban-ip{ color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-ipban-remove{
  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-ipban-remove:hover{ background: rgba(196, 61, 61, 0.28) !important; }


/* Link previews on charcoal. */
html[data-theme="dark"] .wpz-link-placeholder{
  background: rgba(143, 196, 255, 0.12) !important;
  border-color: rgba(143, 196, 255, 0.3) !important;
  color: #9ec9ff !important;
}
html[data-theme="dark"] .wpz-link-card{
  background: var(--d-raised) !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .wpz-link-card.is-risky{
  border-color: rgba(240, 120, 120, 0.45) !important;
  background: rgba(196, 61, 61, 0.12) !important;
}
html[data-theme="dark"] .wpz-link-card-title{ color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-link-card-desc{ color: var(--d-ink-soft) !important; }
html[data-theme="dark"] .wpz-link-window{
  background: #202022 !important;
  border-color: var(--d-line) !important;
}
html[data-theme="dark"] .wpz-link-window-head{
  background: rgba(143, 196, 255, 0.08) !important;
  border-bottom-color: var(--d-line) !important;
}
html[data-theme="dark"] .wpz-link-window-title{ color: var(--d-ink) !important; }
html[data-theme="dark"] .wpz-link-window-openext,
html[data-theme="dark"] .wpz-link-window-close{
  background: var(--d-flat-2) !important;
  border-color: var(--d-line) !important;
  color: #9ec9ff !important;
}
html[data-theme="dark"] .wpz-link-window-note{
  color: var(--d-ink-soft) !important;
  border-top-color: var(--d-line) !important;
}