/* Dark mode for the owner's dashboard (and login). On when <html data-theme="dark">: set by app-theme.js from the
   owner's choice (Settings -> Appearance, or the sidebar button), remembered in this browser. */
:root[data-theme="dark"] {
  --bg: #0E0E11; --surface: #17171B; --band: #212127; --ink: #ECECEF; --muted: #9A9AA5; --border: #2A2A31;
  --primary: #ECECEF; --primary-hover: #FFFFFF; --accent: #8F75FF; --accent-dark: #A995FF; --accent-light: #6B55D9;
  --accent-soft: #272040; --ok-soft: #272040; --danger: #FF6B6B; --ok: #4CC487;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --iridescent-text: linear-gradient(100deg, #9C86FF 0%, #C08CF2 40%, #EFA5F2 70%, #8EC9F5 100%);
  color-scheme: dark;
}
:root[data-theme="dark"] body { background-color: var(--bg); color: var(--ink);
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); }
:root[data-theme="dark"] .logo, :root[data-theme="dark"] .logo-svg { color: var(--ink); }
/* Light buttons and bubbles on dark: dark text */
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .bubble.owner, :root[data-theme="dark"] .chat-form .send,
:root[data-theme="dark"] .pill.active, :root[data-theme="dark"] .interval-toggle .pill.active .save,
:root[data-theme="dark"] .play-btn, :root[data-theme="dark"] .toast { color: #111113; }
:root[data-theme="dark"] .topbar { background: rgba(14,14,17,.82); }
:root[data-theme="dark"] .call-dock { background: rgba(14,14,17,.92); }
:root[data-theme="dark"] .tomorrow-card { background: var(--surface); }
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { color: var(--ink); }
:root[data-theme="dark"] .edit-form textarea, :root[data-theme="dark"] .input-wrap { background: var(--surface); }
:root[data-theme="dark"] .tag.urgent, :root[data-theme="dark"] .trial-pill.urgent,
:root[data-theme="dark"] .bill-banner.urgent { background: #3A1C1F; }
:root[data-theme="dark"] .switch span::after { background: #ECECEF; }
/* The glowing cards (Poppy / the check-in) on a dark base */
:root[data-theme="dark"] .meet-card { border-color: rgba(255,255,255,.08);
  background: radial-gradient(120% 90% at 0% 0%, rgba(124,92,255,.34), transparent 55%),
    radial-gradient(90% 80% at 100% 10%, rgba(231,162,240,.2), transparent 60%),
    radial-gradient(90% 90% at 70% 100%, rgba(142,201,245,.18), transparent 60%), #16151C; }
:root[data-theme="dark"] .meet-card::before { background: rgba(0,0,0,.15); }
:root[data-theme="dark"] .side-panel, :root[data-theme="dark"] .call.side { box-shadow: -12px 0 40px rgba(0,0,0,.5); }

/* The sidebar's light/dark button */

/* Support chat (support-chat.js): its dark buttons use --ink, which turns light in dark mode */
:root[data-theme="dark"] .sc-bubble, :root[data-theme="dark"] .sc-send:not(:disabled) { background: var(--accent); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
:root[data-theme="dark"] .sc-bubble:hover { background: var(--accent-dark, var(--accent)); }
:root[data-theme="dark"] .sc-send:disabled { background: var(--border); }
:root[data-theme="dark"] .sc-m.err { background: rgba(220, 60, 60, .16); }