/* DM: как логотип — металл/уголь + электрический синий + огненный красный (не «просто серый») */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&display=swap');

:root,
[data-theme="dark"] {
    --primary-color: #00aeef;
    --primary-dark: #0088c6;
    --secondary-color: #5cd4ff;
    --accent-color: #e63946;
    --button-primary-color: #00aeef;
    --button-download-color: #22c55e;
    --button-file-color: #00aeef;
    --auth-primary-color: #00aeef;
    /* База: холодный уголь, не нейтральный серый */
    --bg: #0e141c;
    --surface: #15202c;
    --border: #3a5a78;
    --text-primary: #eef2f8;
    --text-secondary: #c5d0e0;
    --text-muted: #8fa3b8;
    --gradient-primary: linear-gradient(135deg, #006699 0%, #00aeef 42%, #5cd4ff 100%);
    --gradient-secondary: linear-gradient(135deg, #b91c1c 0%, #e63946 45%, #ff6b35 100%);
    --dark-bg: #0a1018;
    --dark-surface: #182530;
    --dark-border: color-mix(in srgb, var(--primary-color) 22%, #243241);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 40, 70, 0.35), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 14px 40px rgba(0, 60, 90, 0.25), 0 8px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] body {
    background:
        radial-gradient(ellipse 110% 70% at 8% 12%, rgba(0, 174, 239, 0.28), transparent 45%),
        radial-gradient(ellipse 95% 60% at 96% 6%, rgba(230, 57, 70, 0.22), transparent 42%),
        radial-gradient(ellipse 80% 55% at 50% 108%, rgba(255, 107, 53, 0.14), transparent 48%),
        linear-gradient(165deg, #0a121c 0%, #101820 38%, #0c1018 72%, #0a0e14 100%);
    background-color: var(--bg);
    background-attachment: fixed;
}

[data-theme="light"] {
    --primary-color: #00aeef;
    --primary-dark: #0088c6;
    --secondary-color: #5cd4ff;
    --accent-color: #e63946;
    --button-primary-color: #00aeef;
    --button-download-color: #22c55e;
    --button-file-color: #00aeef;
    --auth-primary-color: #00aeef;
    --bg: #0e141c;
    --surface: #15202c;
    --border: #3a5a78;
    --text-primary: #eef2f8;
    --text-secondary: #c5d0e0;
    --text-muted: #8fa3b8;
    --gradient-primary: linear-gradient(135deg, #006699 0%, #00aeef 42%, #5cd4ff 100%);
    --gradient-secondary: linear-gradient(135deg, #b91c1c 0%, #e63946 45%, #ff6b35 100%);
    --dark-bg: #0a1018;
    --dark-surface: #182530;
    --dark-border: color-mix(in srgb, var(--primary-color) 22%, #243241);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 20px rgba(0, 40, 70, 0.35), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 14px 40px rgba(0, 60, 90, 0.25), 0 8px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="light"] body {
    background:
        radial-gradient(ellipse 110% 70% at 8% 12%, rgba(0, 174, 239, 0.28), transparent 45%),
        radial-gradient(ellipse 95% 60% at 96% 6%, rgba(230, 57, 70, 0.22), transparent 42%),
        radial-gradient(ellipse 80% 55% at 50% 108%, rgba(255, 107, 53, 0.14), transparent 48%),
        linear-gradient(165deg, #0a121c 0%, #101820 38%, #0c1018 72%, #0a0e14 100%);
    background-color: var(--bg);
    background-attachment: fixed;
}

:root {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text-primary);
    --bs-secondary-bg: var(--surface);
    --bs-tertiary-bg: var(--surface);
    --bs-border-color: var(--border);
    --bs-emphasis-color: var(--text-primary);
    --bs-heading-color: var(--text-primary);
    --bs-link-color: var(--primary-color);
    --bs-link-hover-color: var(--secondary-color);
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-color: var(--text-primary);
    --bs-dropdown-link-color: var(--text-primary);
    --bs-dropdown-link-hover-color: var(--text-primary);
    --bs-dropdown-link-hover-bg: rgba(0, 174, 239, 0.1);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: color-mix(in srgb, var(--accent-color) 35%, var(--primary-color));
    --bs-dropdown-header-color: var(--text-muted);
    --bs-dropdown-divider-bg: color-mix(in srgb, var(--primary-color) 15%, var(--border));
    --bs-list-group-bg: var(--surface);
    --bs-list-group-color: var(--text-primary);
    --bs-list-group-border-color: var(--border);
}

/* Шапка: тонкая «искра» снизу — синий слева, красный справа */
.navbar {
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 28%, var(--border)) !important;
    box-shadow:
        0 1px 0 color-mix(in srgb, var(--primary-color) 35%, transparent),
        0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Карточки и панели: синий кант + лёгкий красный подсвет снизу */
.card:not(.auth-card),
.product-card,
.home-tg-bar,
.home-feature-card,
.admin-card {
    border-color: color-mix(in srgb, var(--primary-color) 25%, var(--dark-border, var(--border))) !important;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary-color) 12%, transparent),
        0 10px 28px rgba(0, 0, 0, 0.35),
        0 1px 0 color-mix(in srgb, var(--accent-color) 18%, transparent) !important;
}

.btn-primary,
.btn-success {
    box-shadow: 0 4px 18px color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.btn-danger,
.badge.bg-danger {
    box-shadow: 0 2px 12px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

/* Название сайта — металл + двойное свечение синее/красное */
.navbar-brand {
    font-family: 'Orbitron', 'Inter', system-ui, sans-serif;
    letter-spacing: 0.1em;
    filter: drop-shadow(0 0 14px color-mix(in srgb, var(--primary-color) 55%, transparent))
        drop-shadow(0 0 26px color-mix(in srgb, var(--accent-color) 40%, transparent));
}

.navbar-nav .nav-link:hover {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--primary-color) 18%, transparent),
        color-mix(in srgb, var(--accent-color) 10%, transparent)
    ) !important;
    color: var(--text-primary) !important;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary-color) 38%, transparent) !important;
}

::selection {
    background: color-mix(in srgb, var(--primary-color) 40%, var(--accent-color));
    color: #fff;
}

@media (max-width: 991.98px) {
    .navbar .navbar-collapse,
    .navbar .dropdown-menu {
        --bs-dropdown-bg: var(--surface);
        background-color: var(--surface) !important;
    }
}