/* ============================================================
   SPOOFWARD — SPACE THEME  (v2 — comprehensive fix)
   Dark futuristic theme with glowing neon accents & star field
   ============================================================ */

/* ── CSS Variables Override ──────────────────────────────── */
:root[data-theme="space"] {
    --ms-blue:   #00d4ff;
    --ms-dark:   #0a0e1a;
    --ms-green:  #00ff88;
    --ms-bg:     #0d1117;
    --ms-card:   #111827;
    --ms-card-border: rgba(0, 212, 255, 0.12);
    --ms-text:   #e2e8f0;
    --ms-text-muted: #8892a4;
    --ms-glow:   rgba(0, 212, 255, 0.15);
    --ms-glow-strong: rgba(0, 212, 255, 0.3);
    --ms-accent: #7c3aed;
    --ms-accent-glow: rgba(124, 58, 237, 0.3);
    --ms-input-bg: #1a1f2e;
    --ms-input-border: rgba(0, 212, 255, 0.15);
    --ms-hover-bg: rgba(0, 212, 255, 0.06);
}

/* ── Star Field Background ──────────────────────────────── */
[data-theme="space"] #star-field {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0; pointer-events: none; overflow: hidden;
    background: radial-gradient(ellipse at 20% 50%, #0d1b2a 0%, #0a0e1a 60%, #000 100%);
}
[data-theme="space"] #star-field .stars-layer { position: absolute; width: 100%; height: 100%; background-repeat: repeat; }
[data-theme="space"] #star-field .stars-sm {
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 45% 45%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 80% 15%, rgba(255,255,255,0.4), transparent);
    background-size: 200px 200px; animation: drift-slow 120s linear infinite;
}
[data-theme="space"] #star-field .stars-md {
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(0,212,255,0.6), transparent),
        radial-gradient(1.5px 1.5px at 60% 70%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.5px 1.5px at 85% 20%, rgba(124,58,237,0.5), transparent),
        radial-gradient(1.5px 1.5px at 40% 90%, rgba(0,212,255,0.4), transparent);
    background-size: 300px 300px; animation: drift-slow 180s linear infinite reverse;
}
[data-theme="space"] #star-field .stars-lg {
    background-image:
        radial-gradient(2px 2px at 30% 40%, rgba(0,212,255,0.8), transparent),
        radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 50% 80%, rgba(124,58,237,0.6), transparent);
    background-size: 400px 400px;
    animation: twinkle 4s ease-in-out infinite alternate, drift-slow 240s linear infinite;
}
[data-theme="space"] #star-field .nebula {
    position: absolute; width: 100%; height: 100%;
    background:
        radial-gradient(ellipse 600px 400px at 20% 80%, rgba(124,58,237,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 500px 300px at 80% 20%, rgba(0,212,255,0.05) 0%, transparent 70%);
    animation: nebula-pulse 15s ease-in-out infinite alternate;
}
@keyframes drift-slow  { from { transform: translateY(0); } to { transform: translateY(-200px); } }
@keyframes twinkle     { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes nebula-pulse{ from { opacity: 0.4; } to { opacity: 1; } }
@keyframes glow-pulse  {
    0%, 100% { box-shadow: 0 0 5px var(--ms-glow), 0 0 20px var(--ms-glow); }
    50%      { box-shadow: 0 0 10px var(--ms-glow-strong), 0 0 40px var(--ms-glow); }
}

/* ============================================================
   GLOBAL RESETS
   ============================================================ */

[data-theme="space"] body {
    background: #0a0e1a !important;
    color: #cbd5e1 !important;
}

/* ============================================================
   TEXT COLORS — Light-on-dark overrides
   ============================================================ */

/* Dark text → light text */
[data-theme="space"] .text-gray-900 { color: #f1f5f9 !important; }
[data-theme="space"] .text-gray-800 { color: #e2e8f0 !important; }
[data-theme="space"] .text-gray-700 { color: #cbd5e1 !important; }
[data-theme="space"] .text-gray-600 { color: #94a3b8 !important; }
[data-theme="space"] .text-gray-500 { color: #8892a4 !important; }
[data-theme="space"] .text-gray-400 { color: #64748b !important; }

[data-theme="space"] .text-slate-900 { color: #f1f5f9 !important; }
[data-theme="space"] .text-slate-800 { color: #e2e8f0 !important; }
[data-theme="space"] .text-slate-700 { color: #cbd5e1 !important; }
[data-theme="space"] .text-slate-600 { color: #94a3b8 !important; }
[data-theme="space"] .text-slate-500 { color: #8892a4 !important; }

[data-theme="space"] .text-black { color: #f1f5f9 !important; }

/* Blue text → Cyan glow */
[data-theme="space"] .text-blue-900 { color: #7dd3fc !important; }
[data-theme="space"] .text-blue-800 { color: #7dd3fc !important; }
[data-theme="space"] .text-blue-700 { color: #00d4ff !important; }
[data-theme="space"] .text-blue-600 { color: #00d4ff !important; }

/* Indigo → brighter */
[data-theme="space"] .text-indigo-800 { color: #a5b4fc !important; }
[data-theme="space"] .text-indigo-700 { color: #a5b4fc !important; }
[data-theme="space"] .text-indigo-500 { color: #818cf8 !important; }

/* Status text: stay bright on dark backgrounds */
[data-theme="space"] .text-green-800 { color: #4ade80 !important; }
[data-theme="space"] .text-green-700 { color: #4ade80 !important; }
[data-theme="space"] .text-green-600 { color: #22c55e !important; }
[data-theme="space"] .text-red-800   { color: #fb7185 !important; }
[data-theme="space"] .text-red-700   { color: #fb7185 !important; }
[data-theme="space"] .text-red-600   { color: #f87171 !important; }
[data-theme="space"] .text-yellow-900{ color: #fbbf24 !important; }
[data-theme="space"] .text-yellow-800{ color: #fbbf24 !important; }
[data-theme="space"] .text-yellow-700{ color: #fbbf24 !important; }
[data-theme="space"] .text-amber-900 { color: #fbbf24 !important; }
[data-theme="space"] .text-amber-800 { color: #fbbf24 !important; }
[data-theme="space"] .text-amber-700 { color: #fbbf24 !important; }
[data-theme="space"] .text-orange-800{ color: #fb923c !important; }
[data-theme="space"] .text-orange-700{ color: #fb923c !important; }
[data-theme="space"] .text-orange-600{ color: #fb923c !important; }
[data-theme="space"] .text-emerald-800{ color: #34d399 !important; }
[data-theme="space"] .text-emerald-700{ color: #34d399 !important; }
[data-theme="space"] .text-purple-700 { color: #c084fc !important; }

/* ============================================================
   BACKGROUNDS — Dark surface overrides
   ============================================================ */

[data-theme="space"] .bg-white { background: #111827 !important; }
[data-theme="space"] .bg-gray-50 { background: #0f1520 !important; }
[data-theme="space"] .bg-gray-100 { background: #151c2c !important; }
[data-theme="space"] .bg-gray-200 { background: #1e293b !important; }
[data-theme="space"] .bg-slate-50 { background: #0a0e1a !important; }

/* Status backgrounds → subtle dark variants */
[data-theme="space"] .bg-green-50  { background: rgba(34, 197, 94, 0.1) !important; }
[data-theme="space"] .bg-green-100 { background: rgba(34, 197, 94, 0.12) !important; }
[data-theme="space"] .bg-green-200 { background: rgba(34, 197, 94, 0.15) !important; }
[data-theme="space"] .bg-red-50    { background: rgba(239, 68, 68, 0.1) !important; }
[data-theme="space"] .bg-red-100   { background: rgba(239, 68, 68, 0.12) !important; }
[data-theme="space"] .bg-red-200   { background: rgba(239, 68, 68, 0.15) !important; }
[data-theme="space"] .bg-yellow-50 { background: rgba(234, 179, 8, 0.1) !important; }
[data-theme="space"] .bg-yellow-100{ background: rgba(234, 179, 8, 0.12) !important; }
[data-theme="space"] .bg-yellow-200{ background: rgba(234, 179, 8, 0.15) !important; }
[data-theme="space"] .bg-blue-50   { background: rgba(0, 212, 255, 0.08) !important; }
[data-theme="space"] .bg-blue-100  { background: rgba(0, 212, 255, 0.1) !important; }
[data-theme="space"] .bg-amber-50  { background: rgba(245, 158, 11, 0.1) !important; }
[data-theme="space"] .bg-amber-100 { background: rgba(245, 158, 11, 0.12) !important; }
[data-theme="space"] .bg-orange-50 { background: rgba(249, 115, 22, 0.1) !important; }
[data-theme="space"] .bg-orange-100{ background: rgba(249, 115, 22, 0.12) !important; }
[data-theme="space"] .bg-emerald-50 { background: rgba(16, 185, 129, 0.1) !important; }
[data-theme="space"] .bg-emerald-100{ background: rgba(16, 185, 129, 0.12) !important; }
[data-theme="space"] .bg-purple-50 { background: rgba(168, 85, 247, 0.1) !important; }
[data-theme="space"] .bg-purple-100{ background: rgba(168, 85, 247, 0.12) !important; }
[data-theme="space"] .bg-indigo-50 { background: rgba(99, 102, 241, 0.1) !important; }

/* Primary buttons → cyan glow */
[data-theme="space"] .bg-blue-600 {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
}
[data-theme="space"] .bg-blue-700 {
    background: linear-gradient(135deg, #005bb5, #00b8d4) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
}
[data-theme="space"] .bg-blue-600:hover,
[data-theme="space"] .bg-blue-700:hover {
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.5) !important;
}

/* ============================================================
   BORDERS — Dark subtle borders
   ============================================================ */

[data-theme="space"] .border-gray-100 { border-color: rgba(255, 255, 255, 0.07) !important; }
[data-theme="space"] .border-gray-200 { border-color: rgba(255, 255, 255, 0.1) !important; }
[data-theme="space"] .border-gray-300 { border-color: rgba(255, 255, 255, 0.12) !important; }
[data-theme="space"] .border-blue-100 { border-color: rgba(0, 212, 255, 0.15) !important; }
[data-theme="space"] .border-blue-200 { border-color: rgba(0, 212, 255, 0.2) !important; }
[data-theme="space"] .border-green-100 { border-color: rgba(34, 197, 94, 0.2) !important; }
[data-theme="space"] .border-green-200 { border-color: rgba(34, 197, 94, 0.25) !important; }
[data-theme="space"] .border-red-100 { border-color: rgba(239, 68, 68, 0.2) !important; }
[data-theme="space"] .border-red-200 { border-color: rgba(239, 68, 68, 0.25) !important; }
[data-theme="space"] .border-red-300 { border-color: rgba(239, 68, 68, 0.3) !important; }
[data-theme="space"] .border-yellow-100 { border-color: rgba(234, 179, 8, 0.2) !important; }
[data-theme="space"] .border-yellow-200 { border-color: rgba(234, 179, 8, 0.25) !important; }
[data-theme="space"] .border-amber-100 { border-color: rgba(245, 158, 11, 0.2) !important; }
[data-theme="space"] .border-emerald-100 { border-color: rgba(16, 185, 129, 0.2) !important; }
[data-theme="space"] .border-emerald-200 { border-color: rgba(16, 185, 129, 0.25) !important; }
[data-theme="space"] .border-indigo-100 { border-color: rgba(99, 102, 241, 0.2) !important; }
[data-theme="space"] .border-orange-100 { border-color: rgba(249, 115, 22, 0.2) !important; }
[data-theme="space"] .border-orange-200 { border-color: rgba(249, 115, 22, 0.25) !important; }
[data-theme="space"] .border-purple-200 { border-color: rgba(168, 85, 247, 0.25) !important; }

/* ============================================================
   SHADOWS — Dark glow effect
   ============================================================ */

[data-theme="space"] .shadow,
[data-theme="space"] .shadow-sm,
[data-theme="space"] .shadow-md {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .shadow-lg,
[data-theme="space"] .shadow-xl {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.4), 0 0 2px rgba(0, 212, 255, 0.12) !important;
}

/* ============================================================
   HOVER STATES
   ============================================================ */

[data-theme="space"] .hover\:bg-gray-50:hover  { background: rgba(0, 212, 255, 0.05) !important; }
[data-theme="space"] .hover\:bg-gray-100:hover { background: rgba(0, 212, 255, 0.08) !important; }
[data-theme="space"] .hover\:bg-gray-200:hover { background: rgba(0, 212, 255, 0.1) !important; }
[data-theme="space"] .hover\:text-gray-800:hover { color: #f1f5f9 !important; }
[data-theme="space"] .hover\:text-gray-900:hover { color: #fff !important; }

/* ============================================================
   SIDEBAR
   ============================================================ */

[data-theme="space"] aside.fixed {
    background: rgba(10, 14, 26, 0.95) !important;
    border-right-color: rgba(0, 212, 255, 0.08) !important;
    backdrop-filter: blur(12px);
}

[data-theme="space"] aside .h-16 { border-bottom-color: rgba(0, 212, 255, 0.08) !important; }
[data-theme="space"] aside .font-semibold { color: #fff !important; }
[data-theme="space"] aside .text-xs.text-gray-500 { color: #5a6577 !important; }

/* Sidebar links */
[data-theme="space"] aside a.flex { color: #8892a4 !important; }
[data-theme="space"] aside a.flex:hover { background: rgba(0, 212, 255, 0.06) !important; color: #00d4ff !important; }

/* Active sidebar item */
[data-theme="space"] aside .bg-blue-50 {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
}
[data-theme="space"] aside .bg-blue-50,
[data-theme="space"] aside .bg-blue-50 * {
    color: #00d4ff !important;
}

/* Sidebar section labels */
[data-theme="space"] aside .text-xs.font-bold.uppercase { color: #4a5568 !important; }

/* Sidebar domain box */
[data-theme="space"] aside .bg-blue-50.border-blue-100 {
    background: rgba(0, 212, 255, 0.06) !important;
    border-color: rgba(0, 212, 255, 0.15) !important;
}

/* Sidebar logo container */
[data-theme="space"] aside .bg-gray-900 {
    background: transparent !important;
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}

/* ============================================================
   TOPBAR
   ============================================================ */

[data-theme="space"] .sticky.top-0.z-30,
[data-theme="space"] header.sticky {
    background: rgba(13, 17, 23, 0.9) !important;
    border-bottom-color: rgba(0, 212, 255, 0.08) !important;
    backdrop-filter: blur(12px);
}

[data-theme="space"] .sticky.top-0 label,
[data-theme="space"] .sticky.top-0 span,
[data-theme="space"] .sticky.top-0 div { color: #cbd5e1; }

[data-theme="space"] .sticky.top-0 select,
[data-theme="space"] header.sticky select {
    background: #1a1f2e !important;
    border-color: rgba(0, 212, 255, 0.15) !important;
    color: #e2e8f0 !important;
}

/* ============================================================
   FORM INPUTS — all types
   ============================================================ */

[data-theme="space"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
[data-theme="space"] textarea,
[data-theme="space"] select:not(.sr-only) {
    background: var(--ms-input-bg) !important;
    border-color: var(--ms-input-border) !important;
    color: #e2e8f0 !important;
}

[data-theme="space"] input:focus,
[data-theme="space"] textarea:focus,
[data-theme="space"] select:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15), 0 0 15px rgba(0, 212, 255, 0.1) !important;
}

[data-theme="space"] input::placeholder,
[data-theme="space"] textarea::placeholder {
    color: #5a6577 !important;
}

/* ============================================================
   TABLES
   ============================================================ */

[data-theme="space"] table     { border-color: rgba(255,255,255,0.06) !important; }
[data-theme="space"] thead     { background: rgba(0, 212, 255, 0.04) !important; }
[data-theme="space"] thead th  { color: #94a3b8 !important; border-color: rgba(255,255,255,0.06) !important; }
[data-theme="space"] tbody td  { color: #cbd5e1 !important; border-color: rgba(255,255,255,0.04) !important; }
[data-theme="space"] tbody tr:hover { background: rgba(0, 212, 255, 0.04) !important; }

/* ============================================================
   CODE BLOCKS & MONOSPACE — already dark bg, ensure visibility
   ============================================================ */

[data-theme="space"] code:not([class*="bg-gray-9"]),
[data-theme="space"] pre:not([class*="bg-gray-9"]) {
    background: #0f1520 !important;
    color: #e2e8f0 !important;
    border-color: rgba(0, 212, 255, 0.1) !important;
}

[data-theme="space"] .font-mono {
    color: #00d4ff !important;
}

/* Code blocks that are already dark (bg-gray-800/900) keep their colors */
[data-theme="space"] .bg-gray-800 { background: #1e293b !important; }
[data-theme="space"] .bg-gray-900:not(aside .bg-gray-900) { background: #0f172a !important; }

/* ============================================================
   TABS — Active/Inactive
   ============================================================ */

/* Tab active state: bg-white shadow → dark active */
[data-theme="space"] [class*="rounded"] > a.bg-white,
[data-theme="space"] [class*="rounded"] > button.bg-white {
    background: rgba(0, 212, 255, 0.12) !important;
    color: #00d4ff !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.1) !important;
}

/* ============================================================
   UPGRADE BANNERS / Gradient banners
   ============================================================ */

[data-theme="space"] .from-blue-50,
[data-theme="space"] [class*="from-blue-50"] {
    background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(124,58,237,0.06)) !important;
    border-color: rgba(0, 212, 255, 0.15) !important;
}

/* ============================================================
   BILLING PLANS / CARDS
   ============================================================ */

/* Plan cards are bg-white with border — already handled.
   Price text uses inline style color:#0F3D91 — override via attribute */
[data-theme="space"] [style*="color:#0F3D91"],
[data-theme="space"] [style*="color: #0F3D91"] {
    color: #00d4ff !important;
}

/* "CURRENT PLAN" badge */
[data-theme="space"] .bg-green-600 { background: #059669 !important; }
[data-theme="space"] .bg-green-500 { background: #10b981 !important; }

/* ============================================================
   ALERT BOXES / NOTIFICATION BADGES
   ============================================================ */

/* Green alerts */
[data-theme="space"] .bg-green-50.border { border-color: rgba(34, 197, 94, 0.25) !important; }
/* Red alerts */
[data-theme="space"] .bg-red-50.border { border-color: rgba(239, 68, 68, 0.25) !important; }
/* Yellow/Amber alerts */
[data-theme="space"] .bg-yellow-50.border { border-color: rgba(234, 179, 8, 0.25) !important; }
[data-theme="space"] .bg-amber-50.border { border-color: rgba(245, 158, 11, 0.25) !important; }

/* ============================================================
   DROPDOWN MENUS
   ============================================================ */

[data-theme="space"] .absolute.bg-white,
[data-theme="space"] [x-show] .bg-white,
[data-theme="space"] div[x-show].bg-white {
    background: #1a1f2e !important;
    border-color: rgba(0, 212, 255, 0.12) !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

[data-theme="space"] ::-webkit-scrollbar       { width: 8px; height: 8px; }
[data-theme="space"] ::-webkit-scrollbar-track  { background: #0a0e1a; }
[data-theme="space"] ::-webkit-scrollbar-thumb  { background: rgba(0, 212, 255, 0.2); border-radius: 4px; }
[data-theme="space"] ::-webkit-scrollbar-thumb:hover { background: rgba(0, 212, 255, 0.4); }

/* ============================================================
   DMARC LAYOUT (dmarc.blade.php)
   ============================================================ */

[data-theme="space"] header.sticky.top-0.z-40 {
    background: rgba(13, 17, 23, 0.9) !important;
    border-bottom-color: rgba(0, 212, 255, 0.08) !important;
    backdrop-filter: blur(12px);
}

[data-theme="space"] .rounded-2xl.border.bg-white {
    background: #111827 !important;
    border-color: rgba(0, 212, 255, 0.1) !important;
}

/* DMARC sidebar buttons and links */
[data-theme="space"] .bg-slate-200 { background: #1e293b !important; }

/* ============================================================
   FLOATING PARTICLES
   ============================================================ */

[data-theme="space"] .space-particle {
    position: fixed; width: 2px; height: 2px;
    background: #00d4ff; border-radius: 50%;
    pointer-events: none; z-index: 0;
    animation: float-particle linear infinite; opacity: 0;
}

@keyframes float-particle {
    0%   { opacity: 0; transform: translateY(0) scale(0); }
    10%  { opacity: 0.8; transform: scale(1); }
    90%  { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-100vh) scale(0.5); }
}


/* ============================================================
   MARKETING WEBSITE OVERRIDES — SPACE THEME
   Comprehensive dark futuristic overrides for all marketing pages
   ============================================================ */

/* ── CSS Variable Overrides for Marketing ────────────────
   The marketing site uses var(--text), var(--bg), etc. everywhere.
   Overriding these variables is the most effective way to theme it.
   ──────────────────────────────────────────────────────── */
[data-theme="space"] {
    /* Core text & background */
    --text: #e2e8f0 !important;
    --text-lt: #94a3b8 !important;
    --muted: #64748b !important;
    --subtle: #475569 !important;
    --border: rgba(0, 212, 255, 0.12) !important;
    --bg: #0a0e1a !important;
    --bg-soft: #0d1220 !important;
    --bg-soft2: #111827 !important;

    /* Color palette → space-themed */
    --blue: #00d4ff !important;
    --blue-dk: #0073ea !important;
    --blue-lt: rgba(0, 212, 255, 0.12) !important;
    --pink: #c084fc !important;
    --pink-lt: rgba(124, 58, 237, 0.12) !important;
    --orange: #a78bfa !important;
    --orange-lt: rgba(167, 139, 250, 0.12) !important;
    --green: #00ff88 !important;
    --green-lt: rgba(0, 255, 136, 0.12) !important;
    --purple: #a855f7 !important;
    --purple-lt: rgba(168, 85, 247, 0.12) !important;
    --cyan: #00d4ff !important;
    --cyan-lt: rgba(0, 212, 255, 0.12) !important;
    --yellow: #fbbf24 !important;
    --yellow-lt: rgba(251, 191, 36, 0.12) !important;
    --red: #f87171 !important;
    --red-lt: rgba(248, 113, 113, 0.12) !important;

    /* Card / surface overrides for blog & components */
    --card-bg: #0d1628 !important;
    --bg-light: #0d1628 !important;
    --primary-lt: rgba(0, 212, 255, 0.1) !important;
    --primary: #00d4ff !important;

    /* Shadows → dark with subtle glow */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 212, 255, 0.08) !important;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 212, 255, 0.1) !important;
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 212, 255, 0.15) !important;
    --shadow-glow: 0 12px 40px rgba(0, 212, 255, 0.25) !important;

    /* Gradients → space nebula */
    --grad-hero: linear-gradient(135deg, #0a0e1a 0%, #0d1b2a 40%, #0a1628 100%) !important;
    --grad-warm: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important;
    --grad-cool: linear-gradient(135deg, #0073ea 0%, #00d4ff 100%) !important;
    --grad-fresh: linear-gradient(135deg, #00d4ff 0%, #00ff88 100%) !important;
    --grad-bold: linear-gradient(135deg, #7c3aed 0%, #c084fc 100%) !important;
    --grad-sun: linear-gradient(135deg, #a855f7 0%, #c084fc 100%) !important;
}

/* ── Marketing Body ───────────────────────────────────── */
[data-theme="space"] body {
    background: #0a0e1a !important;
    color: #e2e8f0 !important;
}

/* ── Star field background for marketing pages ────────── */
[data-theme="space"] body::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -2;
    background:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 30% 60%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 50% 10%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 90% 40%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 15% 90%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 45% 45%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 80% 15%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 25% 35%, rgba(0,212,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 65% 75%, rgba(124,58,237,0.4), transparent),
        radial-gradient(1.5px 1.5px at 85% 25%, rgba(0,212,255,0.3), transparent),
        radial-gradient(2px 2px at 40% 50%, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 75% 15%, rgba(0,212,255,0.7), transparent);
    background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px,
                     200px 200px, 200px 200px, 200px 200px, 200px 200px,
                     300px 300px, 300px 300px, 300px 300px,
                     400px 400px, 400px 400px;
    pointer-events: none;
    animation: drift-slow 120s linear infinite;
}
[data-theme="space"] body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 800px 500px at 15% 80%, rgba(124,58,237,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 600px 400px at 85% 20%, rgba(0,212,255,0.06) 0%, transparent 70%),
        radial-gradient(ellipse 500px 300px at 50% 50%, rgba(0,115,234,0.04) 0%, transparent 70%);
    pointer-events: none;
    animation: nebula-pulse 15s ease-in-out infinite alternate;
}

/* ── Marketing Nav ────────────────────────────────────── */
[data-theme="space"] nav,
[data-theme="space"] nav.ms-nav,
[data-theme="space"] .ms-nav {
    background: rgba(10, 14, 26, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] nav.scrolled,
[data-theme="space"] nav.ms-nav.scrolled {
    background: rgba(10, 14, 26, 0.95) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(0, 212, 255, 0.15) !important;
}
[data-theme="space"] .nav-logo { color: #fff !important; }
[data-theme="space"] .nav-links a { color: #8892a4 !important; }
[data-theme="space"] .nav-links a:hover,
[data-theme="space"] .nav-links a.active { color: #00d4ff !important; }
[data-theme="space"] .nav-links a::after { background: linear-gradient(90deg, #00d4ff, #7c3aed) !important; }
[data-theme="space"] .btn-ghost-nav { color: #94a3b8 !important; }
[data-theme="space"] .btn-ghost-nav:hover { color: #fff !important; background: rgba(0, 212, 255, 0.1) !important; }
[data-theme="space"] .btn-nav-primary {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.35) !important;
    color: #fff !important;
}
[data-theme="space"] .btn-nav-primary:hover {
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5) !important;
    transform: translateY(-2px);
}

/* ── Hero Section (page-hero) ─────────────────────────── */
[data-theme="space"] .page-hero {
    background: linear-gradient(180deg, #0a0e1a 0%, #0d1b2a 50%, #0a1628 100%) !important;
    position: relative;
}
[data-theme="space"] .page-hero::before {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0,212,255,0.12), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(124,58,237,0.15), transparent 45%),
        radial-gradient(circle at 60% 20%, rgba(0,115,234,0.1), transparent 40%) !important;
}
[data-theme="space"] h1.ph-title { color: #fff !important; }
[data-theme="space"] h1.ph-title .grad-text {
    background: linear-gradient(135deg, #00d4ff 0%, #7c3aed 50%, #00d4ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
[data-theme="space"] h1.ph-title em::after {
    background: rgba(0, 212, 255, 0.25) !important;
}
[data-theme="space"] .ph-sub { color: #94a3b8 !important; }
[data-theme="space"] .ph-tag {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .ph-tag .dot {
    background: #00d4ff !important;
}
[data-theme="space"] .ph-tag .dot::before {
    background: #00d4ff !important;
}

/* ── Floating shapes → Space objects ─────────────────── */
[data-theme="space"] .floater-1 {
    background: linear-gradient(135deg, #00d4ff, #0073ea) !important;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.4) !important;
    opacity: 0.6 !important;
    border-radius: 50% !important;
}
[data-theme="space"] .floater-2 {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    box-shadow: 0 0 25px rgba(124, 58, 237, 0.4) !important;
    opacity: 0.5 !important;
}
[data-theme="space"] .floater-3 {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    box-shadow: 0 0 35px rgba(0, 212, 255, 0.3) !important;
    opacity: 0.5 !important;
    border-radius: 50% !important;
}
[data-theme="space"] .floater-4 {
    background: linear-gradient(135deg, #00d4ff, #7c3aed) !important;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.3) !important;
    opacity: 0.4 !important;
}
[data-theme="space"] .floater-5 {
    background: #00d4ff !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5) !important;
    opacity: 0.6 !important;
    border-radius: 50% !important;
    width: 6px !important;
    height: 6px !important;
}
[data-theme="space"] .floater-6 {
    background: #7c3aed !important;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4) !important;
    opacity: 0.5 !important;
    width: 8px !important;
    height: 8px !important;
}

/* ── Welcome page hero (different from page-hero) ─────── */
[data-theme="space"] .hero-section,
[data-theme="space"] section.hero {
    background: linear-gradient(180deg, #0a0e1a 0%, #0d1b2a 60%, #0a1628 100%) !important;
}

/* ── Section headings ─────────────────────────────────── */
[data-theme="space"] h2.big { color: #f1f5f9 !important; }
[data-theme="space"] h2.big em.u-pink::after { background: rgba(0, 212, 255, 0.3) !important; }
[data-theme="space"] h2.big em.u-blue::after { background: rgba(0, 212, 255, 0.3) !important; }
[data-theme="space"] h2.big em.u-orange::after { background: rgba(124, 58, 237, 0.3) !important; }
[data-theme="space"] h2.big em.u-green::after { background: rgba(0, 212, 255, 0.25) !important; }
[data-theme="space"] .section-lead { color: #94a3b8 !important; }

/* ── Section Tags ─────────────────────────────────────── */
[data-theme="space"] .section-tag {
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .tag-pink {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
}
[data-theme="space"] .tag-blue {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
}
[data-theme="space"] .tag-green {
    background: rgba(0, 255, 136, 0.1) !important;
    color: #00ff88 !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
}
[data-theme="space"] .tag-purple {
    background: rgba(124, 58, 237, 0.15) !important;
    color: #a78bfa !important;
    border-color: rgba(124, 58, 237, 0.25) !important;
}
[data-theme="space"] .tag-orange {
    background: rgba(124, 58, 237, 0.1) !important;
    color: #c084fc !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
}

/* ── Feature Cards ────────────────────────────────────── */
[data-theme="space"] .feature-card {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
    backdrop-filter: blur(12px);
}
[data-theme="space"] .feature-card::before {
    background: linear-gradient(135deg, #00d4ff, #7c3aed) !important;
}
[data-theme="space"] .feature-card:hover {
    border-color: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.1), 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-6px);
}
[data-theme="space"] .feature-title { color: #f1f5f9 !important; }
[data-theme="space"] .feature-desc { color: #8892a4 !important; }

/* Feature icon wraps → keep gradients but add glow */
[data-theme="space"] .feature-icon-wrap {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 212, 255, 0.15) !important;
}

/* ── Spotlight Sections ───────────────────────────────── */
[data-theme="space"] .spotlight-section {
    background: #0d1220 !important;
}
[data-theme="space"] .visual-card {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 212, 255, 0.2) !important;
}
[data-theme="space"] .check-list li { color: #cbd5e1 !important; }
[data-theme="space"] .check-list .ck {
    background: linear-gradient(135deg, #00d4ff, #0073ea) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3) !important;
}

/* ── Pricing Section ──────────────────────────────────── */
[data-theme="space"] .pricing-bg {
    background: #0d1220 !important;
}
[data-theme="space"] .pricing-toggle {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="space"] .toggle-btn {
    color: #64748b !important;
}
[data-theme="space"] .toggle-btn.active {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3) !important;
}
[data-theme="space"] .save-badge {
    background: rgba(0, 255, 136, 0.15) !important;
    color: #00ff88 !important;
}

/* ── Plan Cards ───────────────────────────────────────── */
[data-theme="space"] .plan-card {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 2px solid rgba(0, 212, 255, 0.1) !important;
    backdrop-filter: blur(12px);
}
[data-theme="space"] .plan-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 50px rgba(0, 212, 255, 0.08), 0 30px 60px rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(0, 212, 255, 0.25) !important;
}
[data-theme="space"] .plan-card.popular {
    border-color: #00d4ff !important;
    background: linear-gradient(180deg, rgba(13, 17, 23, 0.9) 0%, rgba(0, 212, 255, 0.05) 100%) !important;
    box-shadow: 0 0 60px rgba(0, 212, 255, 0.12), 0 0 1px rgba(0, 212, 255, 0.5) !important;
}
[data-theme="space"] .popular-badge {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.4) !important;
}
[data-theme="space"] .plan-name { color: #64748b !important; }
[data-theme="space"] .plan-price { color: #f1f5f9 !important; }
[data-theme="space"] .plan-curr { color: #00d4ff !important; }
[data-theme="space"] .plan-per { color: #64748b !important; }
[data-theme="space"] .plan-billed { color: #64748b !important; }
[data-theme="space"] .plan-desc { color: #8892a4 !important; }
[data-theme="space"] .plan-divider { background: rgba(0, 212, 255, 0.1) !important; }
[data-theme="space"] .plan-features li { color: #cbd5e1 !important; }
[data-theme="space"] .fi-y { color: #00d4ff !important; }
[data-theme="space"] .fi-n { color: #334155 !important; }

/* Plan buttons */
[data-theme="space"] .btn-plan.btn-o {
    border: 2px solid rgba(0, 212, 255, 0.2) !important;
    color: #cbd5e1 !important;
    background: transparent !important;
}
[data-theme="space"] .btn-plan.btn-o:hover {
    border-color: #00d4ff !important;
    color: #00d4ff !important;
    background: rgba(0, 212, 255, 0.05) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.15) !important;
}
[data-theme="space"] .btn-plan.btn-p {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3) !important;
}
[data-theme="space"] .btn-plan.btn-p:hover {
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5) !important;
}

/* ── Compare Table ────────────────────────────────────── */
[data-theme="space"] .compare-wrap {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="space"] table.compare th {
    background: rgba(0, 212, 255, 0.06) !important;
    color: #94a3b8 !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] table.compare td {
    color: #cbd5e1 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}
[data-theme="space"] table.compare tbody tr:hover {
    background: rgba(0, 212, 255, 0.04) !important;
}
[data-theme="space"] .compare-feat { color: #e2e8f0 !important; }
[data-theme="space"] .yes { color: #00d4ff !important; }
[data-theme="space"] .no { color: #334155 !important; }

/* ── Stats Section (dark banner) ──────────────────────── */
[data-theme="space"] .stats-section {
    background: linear-gradient(135deg, #060a14 0%, #0d1b2a 50%, #060a14 100%) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.08);
    border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}
[data-theme="space"] .stats-section::before {
    background-image:
        radial-gradient(circle at 15% 50%, rgba(0,212,255,0.12), transparent 40%),
        radial-gradient(circle at 85% 50%, rgba(124,58,237,0.12), transparent 40%) !important;
}
[data-theme="space"] .stat-num.grad-pink {
    background: linear-gradient(135deg, #00d4ff, #7c3aed) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
[data-theme="space"] .stat-num.grad-blue {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
[data-theme="space"] .stat-num.grad-green {
    background: linear-gradient(135deg, #00d4ff, #00ff88) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}
[data-theme="space"] .stat-num.grad-orange {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
}

/* ── FAQ Section ──────────────────────────────────────── */
[data-theme="space"] .faq-section {
    background: #0d1220 !important;
}
[data-theme="space"] .faq-item {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .faq-item:hover {
    border-color: rgba(0, 212, 255, 0.3) !important;
}
[data-theme="space"] .faq-q {
    color: #e2e8f0 !important;
}
[data-theme="space"] .faq-icon {
    background: rgba(0, 212, 255, 0.08) !important;
    color: #94a3b8 !important;
}
[data-theme="space"] .faq-icon.open {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    color: #fff !important;
}
[data-theme="space"] .faq-a {
    color: #8892a4 !important;
}

/* ── CTA Banner ───────────────────────────────────────── */
[data-theme="space"] .cta-banner {
    background: linear-gradient(135deg, #0d1b2a 0%, #0a1628 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 0 80px rgba(0, 212, 255, 0.08) inset !important;
}
[data-theme="space"] .cta-banner::before {
    background:
        radial-gradient(circle at 20% 30%, rgba(0,212,255,0.15), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(124,58,237,0.15), transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(0,115,234,0.1), transparent 60%) !important;
}
[data-theme="space"] .cta-banner h2 { color: #fff !important; }
[data-theme="space"] .cta-banner p { color: rgba(255,255,255,0.7) !important; }
[data-theme="space"] .btn-cta-white {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    color: #fff !important;
    box-shadow: 0 4px 25px rgba(0, 212, 255, 0.35) !important;
}
[data-theme="space"] .btn-cta-white:hover {
    box-shadow: 0 8px 40px rgba(0, 212, 255, 0.5) !important;
}
[data-theme="space"] .btn-cta-ghost {
    border-color: rgba(0, 212, 255, 0.3) !important;
    color: #00d4ff !important;
}
[data-theme="space"] .btn-cta-ghost:hover {
    border-color: #00d4ff !important;
    background: rgba(0, 212, 255, 0.08) !important;
}

/* ── General Buttons ──────────────────────────────────── */
[data-theme="space"] .btn-primary {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3) !important;
}
[data-theme="space"] .btn-primary:hover {
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5) !important;
}
[data-theme="space"] .btn-outline {
    border-color: rgba(0, 212, 255, 0.3) !important;
    color: #00d4ff !important;
}
[data-theme="space"] .btn-outline:hover {
    background: rgba(0, 212, 255, 0.08) !important;
    border-color: #00d4ff !important;
    color: #fff !important;
}
[data-theme="space"] .btn-cool {
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.35) !important;
}
[data-theme="space"] .btn-cool:hover {
    box-shadow: 0 14px 40px rgba(0, 212, 255, 0.5) !important;
}

/* ── Testimonial / Social Proof Cards ─────────────────── */
[data-theme="space"] .testimonial-card,
[data-theme="space"] .testi-card {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}

/* ── Team Cards ───────────────────────────────────────── */
[data-theme="space"] .team-card {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .team-card:hover {
    border-color: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="space"] .team-name { color: #f1f5f9 !important; }
[data-theme="space"] .team-role { color: #64748b !important; }

/* ── Timeline (about page) ────────────────────────────── */
[data-theme="space"] .timeline::before {
    background: linear-gradient(180deg, #00d4ff, #7c3aed, #0073ea, #00ff88) !important;
}
[data-theme="space"] .tl-item::before {
    background: #0d1117 !important;
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
}
[data-theme="space"] .tl-year { color: #00d4ff !important; }
[data-theme="space"] .tl-title { color: #f1f5f9 !important; }
[data-theme="space"] .tl-desc { color: #8892a4 !important; }

/* ── Prose Card (terms, privacy) ──────────────────────── */
[data-theme="space"] .prose-card {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="space"] .prose-card h2 { color: #f1f5f9 !important; }
[data-theme="space"] .prose-card h3 { color: #e2e8f0 !important; }
[data-theme="space"] .prose-card p,
[data-theme="space"] .prose-card li { color: #94a3b8 !important; }
[data-theme="space"] .prose-card a { color: #00d4ff !important; }
[data-theme="space"] .prose-meta { color: #64748b !important; }

/* ── Footer ───────────────────────────────────────────── */
[data-theme="space"] footer.ms-footer {
    background: #040811 !important;
    border-top: 1px solid rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .footer-top { border-bottom-color: rgba(0, 212, 255, 0.08) !important; }
[data-theme="space"] .footer-brand p { color: rgba(255,255,255,0.45) !important; }
[data-theme="space"] .footer-col h4 { color: rgba(0, 212, 255, 0.5) !important; }
[data-theme="space"] .footer-col ul li a { color: rgba(255,255,255,0.5) !important; }
[data-theme="space"] .footer-col ul li a:hover { color: #00d4ff !important; }
[data-theme="space"] .social-btn {
    border-color: rgba(0, 212, 255, 0.15) !important;
    color: rgba(255,255,255,0.5) !important;
}
[data-theme="space"] .social-btn:hover {
    border-color: #00d4ff !important;
    color: #00d4ff !important;
    background: rgba(0, 212, 255, 0.08) !important;
}

/* ── Mobile Menu ──────────────────────────────────────── */
[data-theme="space"] .mobile-menu {
    background: rgba(10, 14, 26, 0.97) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}
[data-theme="space"] .mobile-menu a {
    color: #94a3b8 !important;
    border-bottom-color: rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .mobile-menu a:hover { color: #00d4ff !important; }

/* ── Contact Modal ────────────────────────────────────── */
[data-theme="space"] .modal-card {
    background: #111827 !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 212, 255, 0.3) !important;
}
[data-theme="space"] .modal-card h3 { color: #f1f5f9 !important; }
[data-theme="space"] .modal-card .lead { color: #8892a4 !important; }
[data-theme="space"] .modal-close {
    background: rgba(0, 212, 255, 0.08) !important;
    color: #94a3b8 !important;
}
[data-theme="space"] .modal-close:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    color: #fff !important;
}
[data-theme="space"] .modal-form input,
[data-theme="space"] .modal-form textarea {
    background: #1a1f2e !important;
    border: 2px solid rgba(0, 212, 255, 0.12) !important;
    color: #e2e8f0 !important;
}
[data-theme="space"] .modal-form input:focus,
[data-theme="space"] .modal-form textarea:focus {
    border-color: #00d4ff !important;
    background: #1e2535 !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .modal-form input::placeholder,
[data-theme="space"] .modal-form textarea::placeholder {
    color: #4a5568 !important;
}

/* ── Cookie Consent ───────────────────────────────────── */
[data-theme="space"] [x-data*="cookieConsent"] > div {
    background: #111827 !important;
    border-color: rgba(0, 212, 255, 0.15) !important;
}

/* ── SEO Public Layout footer ─────────────────────────── */
[data-theme="space"] footer.border-t.border-gray-100 {
    background: #040811 !important;
    border-top-color: rgba(0, 212, 255, 0.08) !important;
}

/* ── Welcome page specific: domain scanner ────────────── */
[data-theme="space"] .scanner-wrap,
[data-theme="space"] .domain-scanner {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.08) !important;
}

/* ── Welcome page: trust logos / scroll bar ────────────── */
[data-theme="space"] .trust-bar,
[data-theme="space"] .logos-bar {
    background: rgba(13, 17, 23, 0.5) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.06) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.06) !important;
}

/* ── Steps / How it works cards ───────────────────────── */
[data-theme="space"] .step-card,
[data-theme="space"] .how-card {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .step-card:hover,
[data-theme="space"] .how-card:hover {
    border-color: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.08) !important;
}

/* ── Inline style override helpers (billing, etc) ─────── */
[data-theme="space"] [style*="color:#0B1B33"],
[data-theme="space"] [style*="color: #0B1B33"],
[data-theme="space"] [style*="color:#0f172a"],
[data-theme="space"] [style*="color: #0f172a"],
[data-theme="space"] [style*="color:#111827"],
[data-theme="space"] [style*="color: #111827"],
[data-theme="space"] [style*="color:#323338"],
[data-theme="space"] [style*="color: #323338"],
[data-theme="space"] [style*="color:#374151"],
[data-theme="space"] [style*="color: #374151"],
[data-theme="space"] [style*="color:#676879"],
[data-theme="space"] [style*="color: #676879"] {
    color: #e2e8f0 !important;
}
[data-theme="space"] [style*="background:#ffffff"],
[data-theme="space"] [style*="background: #ffffff"],
[data-theme="space"] [style*="background:#fff"],
[data-theme="space"] [style*="background: #fff"],
[data-theme="space"] [style*="background-color:#ffffff"],
[data-theme="space"] [style*="background-color: #ffffff"],
[data-theme="space"] [style*="background-color:#fff"],
[data-theme="space"] [style*="background-color: #fff"] {
    background: rgba(13, 17, 23, 0.7) !important;
}

/* ── Welcome page hero scanner input ──────────────────── */
[data-theme="space"] .scanner-input,
[data-theme="space"] .hero-input {
    background: rgba(26, 31, 46, 0.9) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
    color: #e2e8f0 !important;
}

/* ── Hamburger (mobile) ───────────────────────────────── */
[data-theme="space"] .hamburger span {
    background: #94a3b8 !important;
}

/* ============================================================
   WELCOME PAGE — Specific element overrides
   The welcome page has INLINE <style> with hardcoded #fff backgrounds
   and uses var(--text) which resolves via CSS variable overrides above.
   These selectors target elements with hardcoded colors.
   ============================================================ */

/* ── Welcome Hero ─────────────────────────────────────── */
[data-theme="space"] .hero {
    background: linear-gradient(180deg, #0a0e1a 0%, #0d1b2a 50%, #0a1628 100%) !important;
}
[data-theme="space"] .hero::before {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0,212,255,0.1), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(124,58,237,0.12), transparent 45%),
        radial-gradient(circle at 60% 20%, rgba(0,115,234,0.08), transparent 40%) !important;
}
[data-theme="space"] .hero-badge,
[data-theme="space"] .hero-badge * {
    background: rgba(13, 17, 23, 0.8) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
    color: #e2e8f0 !important;
}
[data-theme="space"] .hero-title,
[data-theme="space"] h1 {
    color: #f1f5f9 !important;
}
[data-theme="space"] .hero-sub,
[data-theme="space"] .hero-left p {
    color: #94a3b8 !important;
}

/* ── Scanner Box ──────────────────────────────────────── */
[data-theme="space"] .scanner-box {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.06) !important;
}
[data-theme="space"] .scanner-title {
    color: #e2e8f0 !important;
}
[data-theme="space"] .scanner-input {
    background: #1a1f2e !important;
    border-color: rgba(0, 212, 255, 0.15) !important;
    color: #e2e8f0 !important;
}
[data-theme="space"] .scanner-input:focus {
    background: #1e2535 !important;
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .scanner-btn {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
}
[data-theme="space"] .scanner-hint {
    color: #64748b !important;
}

/* ── Scan Results ─────────────────────────────────────── */
[data-theme="space"] .scan-results-card,
[data-theme="space"] .scan-results {
    background: rgba(13, 17, 23, 0.8) !important;
    border-color: rgba(0, 212, 255, 0.12) !important;
}
[data-theme="space"] .scan-proto-card {
    background: rgba(13, 17, 23, 0.6) !important;
    border-color: rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .scan-proto-name,
[data-theme="space"] .scan-rec-title {
    color: #e2e8f0 !important;
}
[data-theme="space"] .scan-proto-full,
[data-theme="space"] .scan-loading-sub {
    color: #64748b !important;
}
[data-theme="space"] .scan-rec-item {
    background: rgba(13, 17, 23, 0.5) !important;
    border-color: rgba(0, 212, 255, 0.08) !important;
    color: #cbd5e1 !important;
}
[data-theme="space"] .scan-back {
    color: #94a3b8 !important;
}

/* ── Float Cards (mockup previews) ────────────────────── */
[data-theme="space"] .float-card,
[data-theme="space"] .float-card-1,
[data-theme="space"] .float-card-2 {
    background: rgba(13, 17, 23, 0.85) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 212, 255, 0.2) !important;
}
[data-theme="space"] .mockup-card {
    background: rgba(13, 17, 23, 0.85) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 212, 255, 0.2) !important;
}
[data-theme="space"] .mockup-bar {
    background: rgba(0, 212, 255, 0.04) !important;
    border-bottom-color: rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .mockup-bar .url {
    background: rgba(26, 31, 46, 0.8) !important;
    color: #64748b !important;
}
[data-theme="space"] .mockup-dots span {
    opacity: 0.5;
}

/* ── Mockup inner elements ────────────────────────────── */
[data-theme="space"] .mockup-inner,
[data-theme="space"] .mockup-content {
    background: transparent !important;
}
[data-theme="space"] .mlist-row {
    background: rgba(0, 212, 255, 0.04) !important;
}
[data-theme="space"] .big-score-ring::before {
    background: #0d1117 !important;
}
[data-theme="space"] .score-card {
    background: rgba(0, 212, 255, 0.04) !important;
    border-color: rgba(0, 212, 255, 0.1) !important;
}

/* ── Trust Section ────────────────────────────────────── */
[data-theme="space"] .trust-section {
    background: rgba(13, 17, 23, 0.5) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.06) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.06) !important;
}
[data-theme="space"] .trust-label {
    color: #64748b !important;
}
[data-theme="space"] .trust-logo {
    color: #475569 !important;
}

/* ── Features section on welcome (uses section without class) ─── */
[data-theme="space"] section {
    color: #e2e8f0;
}

/* ── How It Works Section ─────────────────────────────── */
[data-theme="space"] .how-section,
[data-theme="space"] [id="how-it-works"],
[data-theme="space"] .how-it-works {
    background: #0a0e1a !important;
}

/* Step cards (4-grid) */
[data-theme="space"] .step-card {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .step-card:hover {
    border-color: rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}
[data-theme="space"] .step-num {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 15px rgba(0, 212, 255, 0.15) !important;
}
[data-theme="space"] .step-title {
    color: #f1f5f9 !important;
}
[data-theme="space"] .step-desc {
    color: #8892a4 !important;
}

/* Walk-through rows (detailed steps) */
[data-theme="space"] .walk-row {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .walk-row:hover {
    border-color: rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 212, 255, 0.2) !important;
}
[data-theme="space"] .walk-body h3 {
    color: #f1f5f9 !important;
}
[data-theme="space"] .walk-body p {
    color: #94a3b8 !important;
}
[data-theme="space"] .walk-stage {
    background: rgba(0, 212, 255, 0.12) !important;
    color: #00d4ff !important;
}
[data-theme="space"] .walk-features li {
    color: #cbd5e1 !important;
}
[data-theme="space"] .walk-features li::before {
    color: #00d4ff !important;
}
[data-theme="space"] .walk-icon {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3), 0 0 12px rgba(0, 212, 255, 0.15) !important;
}
[data-theme="space"] .walk-cta {
    background: linear-gradient(135deg, #0d1b2a 0%, #0a1628 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
}
[data-theme="space"] .walk-cta a {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.3) !important;
}

/* ── Proof / Social Proof Section ─────────────────────── */
[data-theme="space"] .proof-card,
[data-theme="space"] .testi-card {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .proof-card:hover,
[data-theme="space"] .testi-card:hover {
    border-color: rgba(0, 212, 255, 0.25) !important;
}
[data-theme="space"] .proof-text,
[data-theme="space"] .testi-text {
    color: #cbd5e1 !important;
}
[data-theme="space"] .proof-name,
[data-theme="space"] .testi-name {
    color: #f1f5f9 !important;
}
[data-theme="space"] .proof-role,
[data-theme="space"] .testi-role {
    color: #64748b !important;
}

/* ── Terms / Privacy page specific ────────────────────── */
[data-theme="space"] .last-updated-pill {
    background: rgba(0, 212, 255, 0.1) !important;
    border-color: rgba(0, 212, 255, 0.2) !important;
    color: #00d4ff !important;
}
[data-theme="space"] .last-updated-pill::before {
    background: #00d4ff !important;
}
[data-theme="space"] .contact-block {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), rgba(124, 58, 237, 0.06)) !important;
    border-color: rgba(0, 212, 255, 0.15) !important;
}
[data-theme="space"] .contact-block h3 {
    color: #00d4ff !important;
}
[data-theme="space"] .prose-card table th {
    background: rgba(0, 212, 255, 0.08) !important;
    border-color: rgba(0, 212, 255, 0.15) !important;
    color: #00d4ff !important;
}
[data-theme="space"] .prose-card table td {
    border-color: rgba(0, 212, 255, 0.08) !important;
    color: #94a3b8 !important;
}

/* ── Welcome page: ALL hardcoded #fff backgrounds ─────── */
[data-theme="space"] .mobile-menu {
    background: rgba(10, 14, 26, 0.97) !important;
    border-bottom-color: rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .mobile-menu a {
    color: #94a3b8 !important;
    border-bottom-color: rgba(0, 212, 255, 0.08) !important;
}

/* ── btn-nav-primary override (uses var(--text) = light in space) ─── */
[data-theme="space"] .btn-nav-primary {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.35) !important;
}
[data-theme="space"] .btn-nav-primary:hover {
    background: linear-gradient(135deg, #005bb5, #00b8d4) !important;
    box-shadow: 0 8px 30px rgba(0, 212, 255, 0.5) !important;
}

/* ── btn-primary / btn-outline (uses var(--text) as bg) ─── */
[data-theme="space"] .btn-primary,
[data-theme="space"] .btn-p {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    color: #fff !important;
}
[data-theme="space"] .btn-outline {
    border-color: rgba(0, 212, 255, 0.25) !important;
    color: #00d4ff !important;
    background: transparent !important;
}
[data-theme="space"] .btn-outline:hover {
    background: rgba(0, 212, 255, 0.08) !important;
    border-color: #00d4ff !important;
    color: #fff !important;
}

/* ── General: any #fff background card within space theme ─── */
[data-theme="space"] [style*="background:#fff"],
[data-theme="space"] [style*="background: #fff"],
[data-theme="space"] [style*="background-color:#fff"],
[data-theme="space"] [style*="background-color: #fff"],
[data-theme="space"] [style*="background:#ffffff"],
[data-theme="space"] [style*="background: #ffffff"],
[data-theme="space"] [style*="background-color:#ffffff"],
[data-theme="space"] [style*="background-color: #ffffff"] {
    background: rgba(13, 17, 23, 0.7) !important;
}

/* ── Ensure all section text is readable ──────────────── */
[data-theme="space"] .section-inner h2,
[data-theme="space"] .section-inner h3 {
    color: #f1f5f9 !important;
}
[data-theme="space"] .section-inner p {
    color: #94a3b8 !important;
}
[data-theme="space"] .centered h2 {
    color: #f1f5f9 !important;
}
[data-theme="space"] .centered p {
    color: #94a3b8 !important;
}

/* ============================================================
   WELCOME PAGE FOOTER — uses `footer { background: var(--text) }`
   Since --text is now light, footer becomes light. Override directly.
   ============================================================ */
[data-theme="space"] footer {
    background: #040811 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .footer-top {
    border-bottom-color: rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .fb-logo,
[data-theme="space"] .footer-brand .fb-logo {
    color: #fff !important;
}
[data-theme="space"] .footer-brand p {
    color: rgba(255, 255, 255, 0.45) !important;
}
[data-theme="space"] .footer-col h4 {
    color: rgba(0, 212, 255, 0.5) !important;
}
[data-theme="space"] .footer-col ul li a {
    color: rgba(255, 255, 255, 0.5) !important;
}
[data-theme="space"] .footer-col ul li a:hover {
    color: #00d4ff !important;
}
[data-theme="space"] .footer-bottom {
    color: rgba(255, 255, 255, 0.35) !important;
}
[data-theme="space"] .social-btn {
    border-color: rgba(0, 212, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.5) !important;
}
[data-theme="space"] .social-btn:hover {
    border-color: #00d4ff !important;
    color: #00d4ff !important;
    background: rgba(0, 212, 255, 0.08) !important;
}

/* ============================================================
   WELCOME HERO — Dashboard Mockup Card (right side animation)
   ============================================================ */
[data-theme="space"] .dashboard-mockup {
    background: rgba(13, 17, 23, 0.9) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 212, 255, 0.3) !important;
}
[data-theme="space"] .mockup-bar {
    background: rgba(0, 212, 255, 0.04) !important;
    border-bottom-color: rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .mockup-bar .url {
    background: rgba(26, 31, 46, 0.8) !important;
    color: #64748b !important;
}
[data-theme="space"] .mockup-body {
    background: transparent !important;
}
[data-theme="space"] .mockup-h-title {
    color: #e2e8f0 !important;
}
[data-theme="space"] .mockup-h-pill {
    background: rgba(0, 255, 136, 0.12) !important;
    color: #00ff88 !important;
}
[data-theme="space"] .ms-card {
    border: 1px solid rgba(0, 212, 255, 0.08);
}
[data-theme="space"] .ms-card .lbl {
    color: #64748b !important;
}
[data-theme="space"] .ms-card .val {
    color: #f1f5f9 !important;
}
[data-theme="space"] .mockup-chart {
    background: rgba(0, 212, 255, 0.04) !important;
    border: 1px solid rgba(0, 212, 255, 0.06);
}
[data-theme="space"] .chart-title {
    color: #64748b !important;
}
[data-theme="space"] .mlist-row {
    background: rgba(0, 212, 255, 0.04) !important;
    border: 1px solid rgba(0, 212, 255, 0.06);
}
[data-theme="space"] .mlist-name {
    color: #e2e8f0 !important;
}

/* Float cards (DMARC Passed, Score +12) around mockup */
[data-theme="space"] .float-card {
    background: rgba(13, 17, 23, 0.9) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 212, 255, 0.2) !important;
}
[data-theme="space"] .fc-text {
    color: #e2e8f0 !important;
}
[data-theme="space"] .fc-text small {
    color: #64748b !important;
}

/* Scanner results card */
[data-theme="space"] .scan-results-card {
    background: rgba(13, 17, 23, 0.8) !important;
    border-color: rgba(0, 212, 255, 0.12) !important;
}
[data-theme="space"] .scan-proto-card {
    background: rgba(0, 212, 255, 0.04) !important;
    border-color: rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .scan-risk-label {
    color: #f1f5f9 !important;
}
[data-theme="space"] .scan-overview {
    color: #e2e8f0 !important;
}

/* Risk banners in scan results */
[data-theme="space"] .risk-low {
    background: rgba(0, 255, 136, 0.1) !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
}
[data-theme="space"] .risk-medium {
    background: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.2) !important;
    color: #fbbf24 !important;
}
[data-theme="space"] .risk-high {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.2) !important;
    color: #f87171 !important;
}
[data-theme="space"] .risk-critical {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    color: #f87171 !important;
}

/* Score ring in mockup */
[data-theme="space"] .big-score-ring::before {
    background: #0d1117 !important;
}

/* Scanner btn uses var(--text) = light; override */
[data-theme="space"] .scanner-btn {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
}

/* Trust section override */
[data-theme="space"] .trust-section {
    background: rgba(13, 17, 23, 0.5) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.06) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.06) !important;
}
[data-theme="space"] .trust-label {
    color: #475569 !important;
}
[data-theme="space"] .trust-logo {
    color: #475569 !important;
}

/* Spotlight sections (alternating bg) */
[data-theme="space"] .spotlight-section {
    background: #0d1220 !important;
}
[data-theme="space"] .visual-card {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 212, 255, 0.2) !important;
}
[data-theme="space"] .score-card {
    background: rgba(0, 212, 255, 0.04) !important;
    border: 1px solid rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .check-list li {
    color: #cbd5e1 !important;
}
[data-theme="space"] .check-list .ck {
    background: linear-gradient(135deg, #00d4ff, #0073ea) !important;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3) !important;
}

/* CTA banner wrap */
[data-theme="space"] .cta-banner-wrap {
    background: transparent !important;
}

/* ── Pricing Stats Row ─────────────────────────────────── */
[data-theme="space"] .plan-stat {
    background: rgba(0, 212, 255, 0.06) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .plan-stat-val {
    color: #00d4ff !important;
}
[data-theme="space"] .plan-stat-label {
    color: #64748b !important;
}
[data-theme="space"] .plan-includes {
    color: #64748b !important;
}

/* ── Contact Page ──────────────────────────────────────── */
[data-theme="space"] .contact-form-card {
    background: rgba(13, 18, 32, 0.85) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 212, 255, 0.05) !important;
    backdrop-filter: blur(16px);
}
[data-theme="space"] .cf-title { color: #f1f5f9 !important; }
[data-theme="space"] .cf-sub { color: #94a3b8 !important; }
[data-theme="space"] .cf-label { color: #94a3b8 !important; }
[data-theme="space"] .cf-input {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
    color: #f1f5f9 !important;
}
[data-theme="space"] .cf-input::placeholder { color: #64748b !important; }
[data-theme="space"] .cf-input:focus {
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12) !important;
    background: rgba(15, 23, 42, 0.8) !important;
}
[data-theme="space"] .cf-btn {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.25) !important;
}
[data-theme="space"] .cf-btn:hover {
    background: linear-gradient(135deg, #005bb5, #00b8d4) !important;
}
[data-theme="space"] .cf-error {
    background: rgba(220, 38, 38, 0.1) !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
    color: #f87171 !important;
}
[data-theme="space"] .ci-card {
    background: rgba(13, 18, 32, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .ci-card:hover {
    border-color: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .ci-title { color: #f1f5f9 !important; }
[data-theme="space"] .ci-desc { color: #94a3b8 !important; }
[data-theme="space"] .ci-desc a { color: #00d4ff !important; }
[data-theme="space"] .ci-icon-blue { background: rgba(0, 212, 255, 0.12) !important; color: #00d4ff !important; }
[data-theme="space"] .ci-icon-purple { background: rgba(192, 132, 252, 0.12) !important; color: #c084fc !important; }
[data-theme="space"] .ci-icon-green { background: rgba(0, 255, 136, 0.12) !important; color: #00ff88 !important; }

/* Modal overrides for space theme */
[data-theme="space"] .modal-card {
    background: rgba(13, 18, 32, 0.95) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6) !important;
}
[data-theme="space"] .modal-card h3 { color: #f1f5f9 !important; }
[data-theme="space"] .modal-card .lead { color: #94a3b8 !important; }
[data-theme="space"] .modal-form input,
[data-theme="space"] .modal-form textarea {
    background: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
    color: #f1f5f9 !important;
}
[data-theme="space"] .modal-form input:focus,
[data-theme="space"] .modal-form textarea:focus {
    border-color: #00d4ff !important;
    background: rgba(15, 23, 42, 0.8) !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12) !important;
}
[data-theme="space"] .modal-close {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
}

/* Stats bar → consistent dark for welcome page */
[data-theme="space"] .stats-section {
    background: linear-gradient(135deg, #060a14 0%, #0d1b2a 50%, #060a14 100%) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.08) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
}

/* ───────── INSIDE SPOOFWARD (SCREENSHOTS) — space theme ───────── */
[data-theme="space"] .inside-section {
    background: #0d1220 !important;
}
[data-theme="space"] .inside-card {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.12) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 1px rgba(0, 212, 255, 0.2) !important;
    backdrop-filter: blur(12px);
}
[data-theme="space"] .inside-card:hover {
    border-color: rgba(0, 212, 255, 0.3) !important;
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.12), 0 30px 60px rgba(0, 0, 0, 0.5) !important;
    transform: translateY(-6px);
}
[data-theme="space"] .inside-frame {
    background: linear-gradient(135deg, #0a0f1d, #121a2e) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.08) !important;
}
[data-theme="space"] .inside-frame .browser-chrome {
    background: rgba(10, 15, 29, 0.9) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.12) !important;
}
[data-theme="space"] .inside-frame .placeholder {
    color: #64748b !important;
}
[data-theme="space"] .inside-title { color: #f1f5f9 !important; }
[data-theme="space"] .inside-desc { color: #8892a4 !important; }

/* ───────── ABOUT SPOOFWARD — space theme ───────── */
[data-theme="space"] .about-section {
    background: #0d1220 !important;
}
[data-theme="space"] .about-wrap p {
    color: #cbd5e1 !important;
}
[data-theme="space"] .about-wrap p strong {
    color: #f1f5f9 !important;
}
[data-theme="space"] .about-badge {
    background: rgba(13, 17, 23, 0.7) !important;
    border: 1px solid rgba(0, 212, 255, 0.18) !important;
    color: #cbd5e1 !important;
    backdrop-filter: blur(8px);
}
[data-theme="space"] .about-badge::before {
    background: #00ff88 !important;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6) !important;
}

/* ───────── SCREENSHOT LIGHTBOX — space theme ───────── */
[data-theme="space"] .ms-lightbox {
    background: rgba(5, 8, 18, 0.95) !important;
}
[data-theme="space"] .ms-lightbox-close {
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    color: #f1f5f9 !important;
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.2) !important;
}
[data-theme="space"] .ms-lightbox-close:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    border-color: rgba(0, 212, 255, 0.5) !important;
}
[data-theme="space"] .ms-lightbox-caption {
    color: #cbd5e1 !important;
    background: rgba(13, 17, 23, 0.8) !important;
    border: 1px solid rgba(0, 212, 255, 0.15) !important;
    backdrop-filter: blur(12px);
}

/* ── Blog pages ─────────────────────────────────────────── */

/* Blog index – cards */
[data-theme="space"] .blog-card {
    background: #0d1628 !important;
    border-color: rgba(0, 212, 255, 0.12) !important;
}
[data-theme="space"] .blog-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 8px rgba(0, 212, 255, 0.1) !important;
}
[data-theme="space"] .blog-card-title {
    color: #e2e8f0 !important;
}
[data-theme="space"] .blog-card-excerpt {
    color: #94a3b8 !important;
}
[data-theme="space"] .blog-card-footer {
    border-color: rgba(0, 212, 255, 0.12) !important;
    color: #00d4ff !important;
}
[data-theme="space"] .blog-card-cat {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
}
[data-theme="space"] .blog-card-img-placeholder {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(168, 85, 247, 0.08)) !important;
}

/* Blog index – category filter pills */
[data-theme="space"] .blog-cats a {
    border-color: rgba(0, 212, 255, 0.15) !important;
    color: #94a3b8 !important;
}
[data-theme="space"] .blog-cats a:hover,
[data-theme="space"] .blog-cats a.active {
    background: #00d4ff !important;
    color: #0a0e1a !important;
    border-color: #00d4ff !important;
}

/* Blog index – pagination */
[data-theme="space"] .blog-pagination a,
[data-theme="space"] .blog-pagination span {
    border-color: rgba(0, 212, 255, 0.12) !important;
    color: #94a3b8 !important;
}
[data-theme="space"] .blog-pagination span.current {
    background: #00d4ff !important;
    color: #0a0e1a !important;
    border-color: #00d4ff !important;
}
[data-theme="space"] .blog-pagination a:hover {
    background: rgba(0, 212, 255, 0.08) !important;
}

/* Blog show – post content */
[data-theme="space"] .post-content {
    color: #cbd5e1 !important;
}
[data-theme="space"] .post-content h2,
[data-theme="space"] .post-content h3 {
    color: #e2e8f0 !important;
}
[data-theme="space"] .post-content a {
    color: #00d4ff !important;
}
[data-theme="space"] .post-content blockquote {
    background: rgba(0, 212, 255, 0.05) !important;
    border-left-color: #00d4ff !important;
    color: #94a3b8 !important;
}
[data-theme="space"] .post-content pre {
    background: #0d1220 !important;
    border: 1px solid rgba(0, 212, 255, 0.1);
}

/* Blog show – tags */
[data-theme="space"] .post-tags a {
    background: rgba(0, 212, 255, 0.08) !important;
    color: #94a3b8 !important;
    border: 1px solid rgba(0, 212, 255, 0.12);
}
[data-theme="space"] .post-tags a:hover {
    background: rgba(0, 212, 255, 0.15) !important;
    color: #00d4ff !important;
}

/* Blog show – author box */
[data-theme="space"] .post-author {
    background: #0d1628 !important;
    border-color: rgba(0, 212, 255, 0.12) !important;
}
[data-theme="space"] .post-author-name {
    color: #e2e8f0 !important;
}
[data-theme="space"] .post-author-label {
    color: #64748b !important;
}
[data-theme="space"] .post-author-avatar {
    background: linear-gradient(135deg, #0073ea, #00d4ff) !important;
}

/* Blog show – meta category badge */
[data-theme="space"] .post-meta-cat {
    background: rgba(0, 212, 255, 0.1) !important;
    color: #00d4ff !important;
}

/* Blog show – related posts cards */
[data-theme="space"] .related-grid .blog-card {
    background: #0d1628 !important;
    border-color: rgba(0, 212, 255, 0.12) !important;
}