@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

/* =====================================================================
   Agoran RTC — Theme v2 "DEEP REDESIGN" (built 2026-11-10)
   ---------------------------------------------------------------------
   v1 only recolored the original Streamly UI. v2 changes the DESIGN
   LANGUAGE itself so nothing of the old dashboard is recognizable:
     - new typography: Sora (display) + Manrope (UI) replace Inter
     - floating, detached sidebar "monolith" (shell gains padding/gap,
       sidebar becomes a rounded, shadowed card instead of a flat strip)
     - glass pill topbar (full border + radius + soft shadow)
     - pill CTAs with gradient fills, layered shadows, hover lift
     - much rounder shape system (radius scale pushed up everywhere)
     - cards = soft layered shadows on panel-tinted borders
     - tables = spaced row-cards with a tinted pill header row
     - rounded inputs with soft focus halo, tinted slate palette
   Loads AFTER agoran-theme.css; panel scoping stays on
   <html data-panel="admin|user"> (route watcher in index.html).
   Safety: no display:none, no width changes, no removed content.
   Only padding/gap on the app shell, radius, shadows, colors, fonts.
   ===================================================================== */

/* ================= per-panel design tokens ================= */
html[data-panel="admin"] {
  --v2-accent: #7c3aed;
  --v2-accent-deep: #6d28d9;
  --v2-accent-2: #a855f7;
  --v2-grad: linear-gradient(135deg, #7c3aed 0%, #a855f7 58%, #c084fc 135%);
  --v2-grad-brand: linear-gradient(110deg, #7c3aed 0%, #a855f7 55%, #d8b4fe 110%);
  --v2-ink: #251239;
  --v2-ink-soft: #46335f;
  --v2-muted: #6f6390;
  --v2-border: #e2d5f8;
  --v2-border-soft: #ede6fc;
  --v2-tint-50: #f4effe;
  --v2-tint-100: #eadffc;
  --v2-tint-200: #d9c8f7;
  --v2-canvas: radial-gradient(1200px 520px at 88% -10%, rgba(168, 85, 247, .15), transparent 60%),
               radial-gradient(900px 460px at -12% 0%, rgba(124, 58, 237, .10), transparent 55%),
               linear-gradient(180deg, #fbfaff 0%, #f4effe 100%);
  --v2-side-bg: radial-gradient(560px 190px at 50% 112%, rgba(216, 180, 254, .38), transparent 70%),
                linear-gradient(168deg, #33136a 0%, #4c1d95 46%, #6d28d9 84%, #7c3aed 100%);
  --v2-side-shadow: 0 24px 48px -16px rgba(76, 29, 149, .55), 0 4px 14px rgba(76, 29, 149, .22);
  --v2-card-shadow: 0 1px 2px rgba(46, 16, 101, .05), 0 12px 32px -12px rgba(76, 29, 149, .16);
  --v2-btn-shadow: 0 10px 22px -8px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
  --v2-btn-shadow-hover: 0 14px 28px -8px rgba(124, 58, 237, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
  --v2-ring: rgba(124, 58, 237, .16);
  --v2-glow: rgba(124, 58, 237, .22);
  --v2-scroll: #c9b3f2;
  --v2-shadow-xl: 0 20px 44px -12px rgba(46, 16, 101, .22), 0 4px 12px rgba(46, 16, 101, .07);
  --v2-shadow-2xl: 0 32px 64px -16px rgba(46, 16, 101, .3), 0 8px 20px rgba(46, 16, 101, .1);
}

html[data-panel="user"] {
  --v2-accent: #f4502a;
  --v2-accent-deep: #d93e1d;
  --v2-accent-2: #ff7a3c;
  --v2-grad: linear-gradient(135deg, #f4502a 0%, #ff7a3c 58%, #ffb03a 135%);
  --v2-grad-brand: linear-gradient(110deg, #f4502a 0%, #ff7a3c 55%, #ffb03a 110%);
  --v2-ink: #2e1a10;
  --v2-ink-soft: #57392a;
  --v2-muted: #8a6f5c;
  --v2-border: #f3ddcb;
  --v2-border-soft: #faecdd;
  --v2-tint-50: #fff3e8;
  --v2-tint-100: #ffe7d2;
  --v2-tint-200: #ffd3ae;
  --v2-canvas: radial-gradient(1200px 520px at 88% -10%, rgba(255, 122, 60, .14), transparent 60%),
               radial-gradient(900px 460px at -12% 0%, rgba(244, 80, 42, .09), transparent 55%),
               linear-gradient(180deg, #fffcf8 0%, #fff3e8 100%);
  --v2-side-bg: radial-gradient(560px 190px at 50% 112%, rgba(244, 80, 42, .42), transparent 70%),
                linear-gradient(168deg, #1a0d07 0%, #2a140c 48%, #3d1c0e 85%, #4a2110 100%);
  --v2-side-shadow: 0 24px 48px -16px rgba(59, 26, 10, .5), 0 4px 14px rgba(59, 26, 10, .2);
  --v2-card-shadow: 0 1px 2px rgba(84, 36, 10, .05), 0 12px 32px -12px rgba(190, 80, 30, .18);
  --v2-btn-shadow: 0 10px 22px -8px rgba(244, 80, 42, .55), inset 0 1px 0 rgba(255, 255, 255, .32);
  --v2-btn-shadow-hover: 0 14px 28px -8px rgba(244, 80, 42, .6), inset 0 1px 0 rgba(255, 255, 255, .32);
  --v2-ring: rgba(244, 80, 42, .16);
  --v2-glow: rgba(244, 80, 42, .22);
  --v2-scroll: #f0bd97;
  --v2-shadow-xl: 0 20px 44px -12px rgba(84, 36, 10, .22), 0 4px 12px rgba(84, 36, 10, .07);
  --v2-shadow-2xl: 0 32px 64px -16px rgba(84, 36, 10, .3), 0 8px 20px rgba(84, 36, 10, .1);
}

/* ================= typography (both panels) ================= */
html[data-panel] body {
  font-family: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  letter-spacing: .002em;
}
html[data-panel] .font-sans {
  font-family: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}
html[data-panel] h1, html[data-panel] h2, html[data-panel] h3, html[data-panel] h4,
html[data-panel] [class*="text-2xl"], html[data-panel] [class*="text-3xl"],
html[data-panel] [class*="text-4xl"], html[data-panel] [class*="text-5xl"] {
  font-family: 'Sora', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.018em;
}
html[data-panel] .font-mono, html[data-panel] kbd, html[data-panel] code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ================= shape system: much rounder ================= */
html[data-panel] .rounded { border-radius: 10px !important; }
html[data-panel] .rounded-md { border-radius: 12px !important; }
html[data-panel] .rounded-lg { border-radius: 16px !important; }
html[data-panel] .rounded-xl { border-radius: 20px !important; }
html[data-panel] .rounded-2xl { border-radius: 26px !important; }
html[data-panel] .rounded-3xl { border-radius: 34px !important; }

/* ================= shadow system: soft + layered + tinted ================= */
html[data-panel] .shadow-xs, html[data-panel] .shadow-2xs {
  box-shadow: 0 1px 2px rgba(15, 10, 30, .05), 0 2px 8px -2px var(--v2-ring) !important;
}
html[data-panel] .shadow-sm {
  box-shadow: 0 1px 3px rgba(15, 10, 30, .05), 0 6px 18px -6px var(--v2-ring) !important;
}
html[data-panel] .shadow-md { box-shadow: var(--v2-card-shadow) !important; }
html[data-panel] .shadow-lg { box-shadow: var(--v2-card-shadow) !important; }
html[data-panel] .shadow-xl { box-shadow: var(--v2-shadow-xl) !important; }
html[data-panel] .shadow-2xl { box-shadow: var(--v2-shadow-2xl) !important; }

/* ================= tinted slate palette (identity layer) ================= */
html[data-panel] .border-slate-200 { border-color: var(--v2-border) !important; }
html[data-panel] .border-slate-200\/70 { border-color: var(--v2-border) !important; }
html[data-panel] .border-slate-100 { border-color: var(--v2-border-soft) !important; }
html[data-panel] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--v2-border-soft); }
html[data-panel] .bg-slate-50 { background-color: var(--v2-tint-50) !important; }
html[data-panel] .bg-slate-100 { background-color: var(--v2-tint-100) !important; }
html[data-panel] .text-slate-900 { color: var(--v2-ink) !important; }
html[data-panel] .text-slate-700 { color: var(--v2-ink-soft) !important; }
html[data-panel] .text-slate-500 { color: var(--v2-muted) !important; }
html[data-panel] .hover\:bg-slate-50:hover { background-color: var(--v2-tint-50) !important; }
html[data-panel] .hover\:bg-slate-100:hover { background-color: var(--v2-tint-100) !important; }
html[data-panel] ::selection { background: var(--v2-accent); color: #fff; }

/* brand gradient utility (notification dots, logo marks, active nav) */
html[data-panel] .bg-gradient-brand { background-image: var(--v2-grad-brand) !important; }

/* glass surfaces the app already uses */
html[data-panel] .glass-panel {
  background: rgba(255, 255, 255, .85) !important;
  border: 1px solid var(--v2-border) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: var(--v2-card-shadow);
}
html[data-panel] .card-hover-glow:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -12px var(--v2-glow), 0 0 0 1px var(--v2-ring) !important;
}

/* =====================================================================
   FLOATING SHELL — the dashboard stops being a flat full-bleed grid.
   The app shell (h-screen flex) gains padding + gap on a tinted canvas;
   the sidebar becomes a detached rounded monolith; the topbar becomes
   a floating glass pill-bar. Targets the shell precisely via :has()
   on its real desktop sidebar (aside with w-[264px]); without :has
   support the v1 look simply remains (graceful fallback).
   ===================================================================== */
#root > div:has(> aside[class*="w-[264px]"]),
div[class*="h-screen bg-[#F8FAFC] flex overflow-hidden"] {
  background: var(--v2-canvas) !important;
  background-color: var(--v2-tint-50) !important;
  padding: clamp(10px, 1.3vw, 18px);
  gap: clamp(10px, 1.3vw, 18px);
}
#root > div:has(> aside[class*="w-[264px]"]) > div {
  gap: clamp(10px, 1.3vw, 18px);
}

/* --- floating sidebar monolith (desktop) --- */
html[data-panel] aside[class*="w-[264px]"] {
  background: var(--v2-side-bg) !important;
  border: none !important;
  border-radius: 26px !important;
  box-shadow: var(--v2-side-shadow) !important;
}
/* sidebar logo strip + footer dividers get a touch more presence */
html[data-panel] aside[class*="w-[264px]"] > div:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
}
/* active nav item inside the sidebar */
html[data-panel="admin"] aside .bg-gradient-brand {
  background: rgba(255, 255, 255, .16) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 8px 20px -6px rgba(20, 5, 50, .45) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff !important;
}
html[data-panel="user"] aside .bg-gradient-brand {
  background-image: var(--v2-grad) !important;
  box-shadow: 0 10px 22px -6px rgba(244, 80, 42, .55), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  color: #fff !important;
}
/* inactive sidebar items: rounder hover cushion */
html[data-panel] aside nav button, html[data-panel] aside button[class*="rounded-xl"] {
  border-radius: 14px !important;
}

/* --- mobile drawer sidebar matches the monolith --- */
html[data-panel] aside[class*="max-w-[300px]"] {
  background: var(--v2-side-bg) !important;
  border-radius: 0 26px 26px 0 !important;
  box-shadow: var(--v2-side-shadow) !important;
  color: #e9e2f5;
}
/* standalone dark drawer (docs / menu) follows the panel identity too */
html[data-panel] aside[class*="bg-[#0F172A]"] {
  background: var(--v2-side-bg) !important;
}

/* --- glass pill topbar --- */
#root > div:has(> aside[class*="w-[264px]"]) > div > header {
  background: rgba(255, 255, 255, .78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--v2-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px -14px var(--v2-glow), 0 2px 6px rgba(15, 10, 30, .04) !important;
}
/* header search trigger becomes a soft tinted pill */
html[data-panel] header button[class*="bg-slate-100/70"] {
  background: var(--v2-tint-50) !important;
  border-radius: 999px !important;
  padding-left: 1rem;
  padding-right: .8rem;
}
html[data-panel] header button[class*="bg-slate-100/70"]:hover {
  background: #fff !important;
  border-color: var(--v2-tint-200) !important;
  box-shadow: 0 6px 16px -6px var(--v2-ring);
}
html[data-panel] header kbd {
  background: #fff;
  border: 1px solid var(--v2-border);
  border-bottom-width: 2px;
  border-radius: 7px;
  padding: .05rem .35rem;
}

/* =====================================================================
   BUTTONS — pill CTAs with gradient, layered shadow, hover lift.
   (Toggle switches / icon buttons keep their own shapes: the pill
   rules only match CTA-sized padding or brand-colored buttons.)
   ===================================================================== */
html[data-panel] button, html[data-panel] a { -webkit-tap-highlight-color: transparent; }

/* primary (brand) */
html[data-panel] button.bg-blue-600, html[data-panel] a.bg-blue-600,
html[data-panel] button.bg-blue-700, html[data-panel] a.bg-blue-700 {
  background-color: var(--v2-accent) !important;
  background-image: var(--v2-grad) !important;
  border-radius: 999px !important;
  box-shadow: var(--v2-btn-shadow) !important;
  border-color: transparent !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
html[data-panel] button.bg-blue-600:hover, html[data-panel] a.bg-blue-600:hover,
html[data-panel] button.bg-blue-700:hover, html[data-panel] a.bg-blue-700:hover {
  background-color: var(--v2-accent-deep) !important;
  box-shadow: var(--v2-btn-shadow-hover) !important;
  transform: translateY(-1px);
  filter: brightness(1.03);
}
html[data-panel] button.bg-blue-600:active, html[data-panel] a.bg-blue-600:active {
  transform: translateY(0) scale(.98);
}
/* any non-button brand-colored element (chips, dots, progress) gets the gradient too */
html[data-panel] .bg-blue-600 { background-image: var(--v2-grad); }
html[data-panel] .bg-blue-500 { background-image: var(--v2-grad); }

/* danger / success primaries follow the same pill language */
html[data-panel] button.bg-rose-600, html[data-panel] a.bg-rose-600 {
  background-image: linear-gradient(135deg, #f43f5e 0%, #e11d48 60%, #fb7185 135%) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px -8px rgba(225, 29, 72, .5), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
html[data-panel] button.bg-rose-600:hover { transform: translateY(-1px); }
html[data-panel] button.bg-emerald-600, html[data-panel] a.bg-emerald-600,
html[data-panel] button.bg-green-600, html[data-panel] a.bg-green-600 {
  background-image: linear-gradient(135deg, #10b981 0%, #059669 60%, #34d399 135%) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 22px -8px rgba(5, 150, 105, .5), inset 0 1px 0 rgba(255, 255, 255, .3) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}
html[data-panel] button.bg-emerald-600:hover, html[data-panel] button.bg-green-600:hover { transform: translateY(-1px); }

/* secondary: white / outlined CTA-sized buttons become soft pills */
html[data-panel] button[class*="bg-white"][class*="px-4"],
html[data-panel] button[class*="bg-white"][class*="px-5"],
html[data-panel] button[class*="bg-white"][class*="px-3.5"],
html[data-panel] a[class*="bg-white"][class*="px-4"],
html[data-panel] a[class*="bg-white"][class*="px-5"] {
  border-radius: 999px !important;
  border-color: var(--v2-border) !important;
  box-shadow: 0 2px 6px rgba(15, 10, 30, .04), 0 8px 18px -10px var(--v2-ring) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
html[data-panel] button[class*="bg-white"][class*="px-4"]:hover,
html[data-panel] button[class*="bg-white"][class*="px-5"]:hover,
html[data-panel] button[class*="bg-white"][class*="px-3.5"]:hover,
html[data-panel] a[class*="bg-white"][class*="px-4"]:hover,
html[data-panel] a[class*="bg-white"][class*="px-5"]:hover {
  border-color: var(--v2-tint-200) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 10, 30, .05), 0 12px 24px -10px var(--v2-ring) !important;
}

/* focus visibility everywhere */
html[data-panel] button:focus-visible, html[data-panel] a:focus-visible,
html[data-panel] [role="button"]:focus-visible {
  outline: 2px solid var(--v2-accent);
  outline-offset: 2px;
}

/* =====================================================================
   INPUTS / SELECTS / TEXTAREAS — rounded, tinted, soft focus halo.
   Element selectors: every form field in the app gets the new feel,
   whatever utility classes the compiled bundle composed.
   ===================================================================== */
html[data-panel] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-panel] select, html[data-panel] textarea {
  border-radius: 14px !important;
  border-color: var(--v2-border) !important;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
html[data-panel] textarea { border-radius: 16px !important; }
html[data-panel] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
html[data-panel] select:focus, html[data-panel] textarea:focus {
  border-color: var(--v2-accent) !important;
  box-shadow: 0 0 0 4px var(--v2-ring), 0 6px 16px -8px var(--v2-ring) !important;
  outline: none;
}
html[data-panel] input::placeholder, html[data-panel] textarea::placeholder {
  color: var(--v2-muted);
  opacity: .75;
}
html[data-panel] input[type="checkbox"], html[data-panel] input[type="radio"],
html[data-panel] input[type="range"] {
  accent-color: var(--v2-accent);
}
html[data-panel] label {
  letter-spacing: .01em;
}

/* =====================================================================
   CARDS — white surfaces get the tinted border + layered soft shadow.
   ===================================================================== */
html[data-panel] .bg-white.rounded-2xl, html[data-panel] .bg-white.rounded-3xl,
html[data-panel] .bg-white.rounded-xl {
  border-color: var(--v2-border) !important;
  box-shadow: var(--v2-card-shadow);
}
/* dropdowns / popovers (rounded-2xl + shadow-xl + border) float higher */
html[data-panel] .rounded-2xl.shadow-xl, html[data-panel] .rounded-2xl.shadow-2xl {
  border-color: var(--v2-border) !important;
}

/* stat icon chips: a little rounder, a little deeper */
html[data-panel] .bg-blue-50.rounded-xl, html[data-panel] .bg-blue-50.rounded-2xl,
html[data-panel] .bg-blue-100.rounded-xl, html[data-panel] .bg-blue-100.rounded-2xl {
  box-shadow: inset 0 0 0 1px var(--v2-ring), 0 6px 14px -6px var(--v2-ring);
}

/* =====================================================================
   TABLES — spaced row-cards with a tinted pill header row.
   (border-collapse:separate + vertical spacing; cell ring borders
   draw each row as its own card. divide-y row borders are neutralized
   so only the ring shows.)
   ===================================================================== */
html[data-panel] table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}
html[data-panel] thead tr { border-bottom: none !important; }
html[data-panel] thead th {
  background: var(--v2-tint-50);
  color: var(--v2-muted) !important;
  padding-top: .6rem;
  padding-bottom: .6rem;
  border-bottom: none !important;
}
html[data-panel] thead th:first-child {
  border-top-left-radius: 12px; border-bottom-left-radius: 12px;
  padding-left: .9rem;
}
html[data-panel] thead th:last-child {
  border-top-right-radius: 12px; border-bottom-right-radius: 12px;
  padding-right: .9rem;
}
html[data-panel] tbody tr { border-top: none !important; background: transparent; }
html[data-panel] tbody td {
  background: #fff;
  border-top: 1px solid var(--v2-border-soft);
  border-bottom: 1px solid var(--v2-border-soft);
  transition: background-color .15s ease;
}
html[data-panel] tbody td:first-child {
  border-left: 1px solid var(--v2-border-soft);
  border-top-left-radius: 14px; border-bottom-left-radius: 14px;
  padding-left: .9rem;
}
html[data-panel] tbody td:last-child {
  border-right: 1px solid var(--v2-border-soft);
  border-top-right-radius: 14px; border-bottom-right-radius: 14px;
  padding-right: .9rem;
}
html[data-panel] tbody tr:hover td { background: var(--v2-tint-50); }

/* =====================================================================
   BADGES / STATUS PILLS — softer ring, firmer type.
   ===================================================================== */
html[data-panel] span.rounded-full {
  box-shadow: inset 0 0 0 1px rgba(15, 10, 30, .05);
  font-weight: 600;
  letter-spacing: .012em;
}

/* =====================================================================
   TABS & SETTINGS NAV — active item becomes a raised white pill.
   (The app marks the active settings item with bg-blue-50 +
   border-blue-200/60; v1 tints those, v2 raises the surface.)
   ===================================================================== */
html[data-panel] button[class*="border-blue-200/60"] {
  background-color: #fff !important;
  border-color: var(--v2-tint-200) !important;
  box-shadow: 0 6px 16px -6px var(--v2-ring), 0 1px 3px rgba(15, 10, 30, .05) !important;
  border-radius: 999px !important;
}
/* segmented tracks tint with the panel */
html[data-panel] [class*="bg-slate-100"] { border-color: var(--v2-border-soft); }

/* =====================================================================
   MODALS / DIALOGS — deep radius, cinematic shadow, softer scrim.
   ===================================================================== */
html[data-panel] [role="dialog"] {
  border-radius: 28px !important;
  border-color: var(--v2-border) !important;
  box-shadow: var(--v2-shadow-2xl) !important;
}
html[data-panel] div.fixed.inset-0[class*="backdrop-blur"] {
  -webkit-backdrop-filter: blur(7px) saturate(1.25);
  backdrop-filter: blur(7px) saturate(1.25);
}

/* =====================================================================
   SCROLLBARS — thin, tinted, unobtrusive.
   ===================================================================== */
html[data-panel] { scrollbar-width: thin; scrollbar-color: var(--v2-scroll) transparent; }
html[data-panel] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-panel] ::-webkit-scrollbar-track { background: transparent; }
html[data-panel] ::-webkit-scrollbar-thumb {
  background: var(--v2-scroll);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
html[data-panel] ::-webkit-scrollbar-thumb:hover { background: var(--v2-accent-2); background-clip: padding-box; }

/* =====================================================================
   ADMIN LOGIN — the dark gateway becomes a deep-violet aurora room.
   (The page shell is min-h-screen bg-[#0F172A]; its form card and
   fields are picked up by the generic card/input rules above.)
   ===================================================================== */
html[data-panel="admin"] div[class*="min-h-screen"][class*="bg-[#0F172A]"] {
  background: radial-gradient(900px 480px at 85% -5%, rgba(168, 85, 247, .28), transparent 60%),
              radial-gradient(760px 420px at 8% 108%, rgba(124, 58, 237, .3), transparent 60%),
              linear-gradient(160deg, #1d0b3d 0%, #12071f 58%, #0d0518 100%) !important;
}

/* USER AUTH / MARKETING shells keep the warm canvas wash */
html[data-panel="user"] div[class*="min-h-screen"][class*="from-blue-50/60"] {
  background-image: linear-gradient(180deg, var(--v2-tint-50) 0%, #ffffff 55%, var(--v2-tint-50) 100%) !important;
}

/* =====================================================================
   Motion safety — honor reduced-motion for the new transforms.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html[data-panel] button.bg-blue-600:hover, html[data-panel] a.bg-blue-600:hover,
  html[data-panel] button.bg-rose-600:hover, html[data-panel] button.bg-emerald-600:hover,
  html[data-panel] .card-hover-glow:hover {
    transform: none !important;
  }
}