/* ToplivoDlyaB — dark cyan tech default */

:root {
    --c-night: 7 11 20;
    --c-panel: 10 16 28;
    --c-card: 13 21 36;
    --c-neon: 34 211 238;
    --c-amber: 139 92 246;
    --c-tg: 34 211 238;
    --c-ink: 226 232 240;
    --c-muted: 100 116 139;
    --c-grid: 34 211 238;
    --c-border: 255 255 255;
    --shadow-neon: 0 0 28px -6px rgba(34, 211, 238, 0.45);
    --shadow-amber: 0 0 28px -6px rgba(139, 92, 246, 0.4);
    --shadow-tg: 0 0 28px -6px rgba(34, 211, 238, 0.5);
    color-scheme: dark;
}

html[data-theme="night"] {
    --c-night: 7 11 20;
    --c-panel: 10 16 28;
    --c-card: 13 21 36;
    --c-neon: 34 211 238;
    --c-amber: 139 92 246;
    --c-tg: 34 211 238;
    color-scheme: dark;
}

/* "day" toggle = slightly lighter slate for variety */
html:not([data-theme="night"]) {
    --c-night: 248 250 252;
    --c-panel: 241 245 249;
    --c-card: 255 255 255;
    --c-neon: 8 145 178;
    --c-amber: 124 58 237;
    --c-tg: 8 145 178;
    --c-ink: 15 23 42;
    --c-muted: 71 85 105;
    --shadow-neon: 0 10px 30px -10px rgba(8, 145, 178, 0.35);
    color-scheme: light;
}

html { scroll-behavior: smooth; }

body {
    background-color: rgb(var(--c-night));
    color: rgb(var(--c-ink));
}

.mesh-bg {
    background:
        radial-gradient(ellipse 60% 50% at 20% 0%, rgba(34, 211, 238, 0.12), transparent),
        radial-gradient(ellipse 50% 40% at 90% 20%, rgba(139, 92, 246, 0.1), transparent),
        rgb(var(--c-night));
}

.grid-bg {
    background-image:
        linear-gradient(rgba(var(--c-grid), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--c-grid), 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.glass-panel {
    background: rgba(13, 21, 36, 0.7);
    backdrop-filter: blur(12px);
}

.text-gradient {
    background: linear-gradient(90deg, #22d3ee, #8b5cf6);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.shadow-neon { box-shadow: var(--shadow-neon) !important; }

html:not([data-theme="night"]) .text-white { color: #0f172a !important; }
html:not([data-theme="night"]) .text-slate-200,
html:not([data-theme="night"]) .text-slate-300 { color: #334155 !important; }
html:not([data-theme="night"]) .text-slate-400 { color: #475569 !important; }
html:not([data-theme="night"]) .text-slate-500 { color: #64748b !important; }
html:not([data-theme="night"]) .text-slate-600 { color: #475569 !important; }
html:not([data-theme="night"]) .text-cyan-300,
html:not([data-theme="night"]) .text-cyan-400 { color: #0891b2 !important; }

html:not([data-theme="night"]) .site-header {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(8, 145, 178, 0.15) !important;
}
html:not([data-theme="night"]) .mesh-bg,
html:not([data-theme="night"]) .bg-\[\#0a101c\],
html:not([data-theme="night"]) .bg-\[\#0d1524\],
html:not([data-theme="night"]) .bg-\[\#070b14\] {
    background-color: #f8fafc !important;
}
html:not([data-theme="night"]) [class*="border-white/"] {
    border-color: rgba(8, 145, 178, 0.15) !important;
}
html:not([data-theme="night"]) .bg-neon,
html:not([data-theme="night"]) .js-buy { color: #fff !important; }

.theme-toggle {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--c-border), 0.12);
    background: rgba(var(--c-neon), 0.08);
    color: rgb(var(--c-neon));
}
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="night"] .theme-toggle .icon-sun { display: none; }
html[data-theme="night"] .theme-toggle .icon-moon { display: block; }

html[data-theme="night"] .text-white { color: #f8fafc !important; }