/* ═══════════════════════════════════════
   KEEN PRO — Shared Theme  (keen.css)
   ═══════════════════════════════════════ */

/* ── Common ── */
html, body { font-family: 'Cairo', sans-serif; -webkit-tap-highlight-color: transparent; }
::-webkit-scrollbar { display: none; }

/* ── Dark mode (default) ── */
html.dark, html.dark body { background: #0a0118 !important; color: #f1f5f9 !important; }

html.dark .bg-scene {
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(124,58,237,0.32) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(109,40,217,0.22) 0%, transparent 60%) !important;
}
html.dark .dot-grid {
    background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px) !important;
}
html.dark .orb-1 { background: radial-gradient(circle, rgba(124,58,237,0.28), transparent 70%) !important; }
html.dark .orb-2 { background: radial-gradient(circle, rgba(139,92,246,0.18), transparent 70%) !important; }

html.dark .glass-panel {
    background: rgba(15,5,40,0.65) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(124,58,237,0.15) !important;
}
html.dark .glass-header { background: rgba(10,1,24,0.82) !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
html.dark .glass-nav    { background: rgba(10,1,24,0.85) !important; border-top:    1px solid rgba(255,255,255,0.08) !important; }

/* ── Light mode ── */
html.light {
    background: linear-gradient(135deg, #f3e8ff 0%, #fefce8 55%, #ede9fe 100%) !important;
    min-height: 100vh;
}
html.light body { background: transparent !important; color: #1e1b4b !important; }

html.light .bg-scene {
    background:
        radial-gradient(ellipse 80% 50% at 15% -5%, rgba(124,58,237,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 70% 45% at 85% 105%, rgba(234,179,8,0.14) 0%, transparent 55%) !important;
}
html.light .dot-grid {
    background-image: radial-gradient(circle, rgba(124,58,237,0.1) 1px, transparent 1px) !important;
}
html.light .orb-1 { background: radial-gradient(circle, rgba(124,58,237,0.14), transparent 70%) !important; }
html.light .orb-2 { background: radial-gradient(circle, rgba(234,179,8,0.2),  transparent 70%) !important; }

html.light .glass-panel {
    background: rgba(255,255,255,0.72) !important;
    backdrop-filter: blur(28px) !important;
    -webkit-backdrop-filter: blur(28px) !important;
    border: 1px solid rgba(124,58,237,0.18) !important;
    color: #1e1b4b !important;
}
html.light .glass-header {
    background: rgba(255,255,255,0.82) !important;
    backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(124,58,237,0.12) !important;
}
html.light .glass-nav {
    background: rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(24px) !important;
    border-top: 1px solid rgba(124,58,237,0.12) !important;
}

/* Base text — covers html element too */
html.light { color: #1e1b4b !important; }

/* Text — doubled specificity with `body` to beat page-inline !important rules */
html.light .text-slate-800, html.light .text-slate-900,
html.light .text-slate-700, html.light .text-secondary,
html.light body .text-slate-800, html.light body .text-slate-900,
html.light body .text-slate-700, html.light body .text-secondary { color: #1e1b4b !important; }

html.light .text-slate-600,
html.light body .text-slate-600 { color: rgba(30,27,75,0.75) !important; }

html.light .text-slate-500, html.light .text-slate-400,
html.light body .text-slate-500, html.light body .text-slate-400 { color: rgba(30,27,75,0.62) !important; }

/* Backgrounds */
html.light .bg-white, html.light .bg-slate-50,
html.light .bg-slate-100, html.light .bg-slate-200 { background: rgba(255,255,255,0.55) !important; }
html.light .bg-white\/60 { background: rgba(255,255,255,0.6) !important; }

/* Borders */
html.light .border-slate-200, html.light .border-slate-300 { border-color: rgba(124,58,237,0.14) !important; }
html.light .dark\:border-slate-700, html.light .dark\:border-slate-800 { border-color: rgba(124,58,237,0.14) !important; }
html.light .divide-slate-200 > * + *, html.light .dark\:divide-slate-700 > * + * { border-color: rgba(124,58,237,0.1) !important; }

/* Dark-specific overrides in light mode */
html.light .dark\:bg-slate-800, html.light .dark\:bg-slate-900 { background: rgba(124,58,237,0.07) !important; }
html.light .dark\:text-slate-400 { color: rgba(30,27,75,0.5) !important; }

/* Inputs & selects */
html.light input:not([type=range]):not([type=checkbox]):not([type=radio]),
html.light select, html.light textarea {
    color: #1e1b4b !important;
    background: rgba(255,255,255,0.65) !important;
    border-color: rgba(124,58,237,0.2) !important;
}
html.light input::placeholder, html.light textarea::placeholder { color: rgba(30,27,75,0.38) !important; }
html.light select option { background: #f3e8ff; color: #1e1b4b; }

/* Buttons with dark bg */
html.light button.dark\:bg-slate-800 { background: rgba(124,58,237,0.08) !important; }

/* Sidebar/menu in light mode */
html.light #side-menu > div:last-child {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(32px) !important;
    border-left: 1px solid rgba(124,58,237,0.15) !important;
}

/* Popup/modal backdrops */
html.light .leaflet-popup-content-wrapper {
    background: rgba(255,255,255,0.95) !important;
    color: #1e1b4b !important;
    border: 1px solid rgba(124,58,237,0.15) !important;
}