/* ============================================================
   Кнопка переключения темы (тема-независимые стили)
   ============================================================ */

.theme-toggle-btn {
    padding: 6px 10px;
    min-width: 36px;
    line-height: 1;
    background: transparent;
    border: 1px solid var(--border);
    font-size: 15px;
}

.theme-toggle-btn:hover {
    opacity: 0.8;
}

/* ============================================================
   Светлая тема — переопределения под html[data-theme="light"]
   ============================================================ */

html[data-theme="light"] {
    --bg: #f7f9fc;
    --bg-light: #ffffff;
    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, 0.08);
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border: #dce3ee;
    --danger: #ef4444;
    --panel: rgba(255, 255, 255, 0.95);
    --panel2: rgba(247, 249, 252, 0.9);
    --muted: #64748b;
    --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] body {
    background: linear-gradient(to bottom, #ffffff, #f3f6fb);
    color: var(--text-main);
}

html[data-theme="light"] header {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border);
}

html[data-theme="light"] .navbar,
html[data-theme="light"] .header,
html[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--border);
}

html[data-theme="light"] nav a:hover {
    background: var(--accent-soft);
    color: var(--text-main);
}
html[data-theme="light"] nav a.nav-active {
    color: var(--accent);
    background: var(--accent-soft);
    font-weight: 500;
}

html[data-theme="light"] .btn-ghost {
    background: #ffffff;
    color: var(--text-main);
    border-color: var(--border);
}

html[data-theme="light"] .btn-ghost:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

html[data-theme="light"] .badge {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.5);
}

html[data-theme="light"] .card {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

html[data-theme="light"] .chart {
    background: #f9fbff;
    border-color: var(--border);
}

html[data-theme="light"] .feature {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

html[data-theme="light"] .testimonial {
    background: #ffffff;
    border-color: var(--border);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

html[data-theme="light"] .cta-final {
    border-color: rgba(37, 99, 235, 0.35);
    background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 55%),
        radial-gradient(circle at bottom right, rgba(37, 99, 235, 0.05), transparent 55%),
        #ffffff;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

html[data-theme="light"] footer {
    background: #ffffff;
    border-color: var(--border);
}

html[data-theme="light"] .login-input {
    background: #ffffff;
    border-color: var(--border);
    color: var(--text-main);
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .widget-card,
html[data-theme="light"] .feature-card {
    border-color: var(--border);
    box-shadow: var(--shadow);
}

/* ============================================================
   Главная страница — тёмные блоки-вырезки в светлой теме
   ============================================================ */

html[data-theme="light"] .ai-mock-incident {
    background: #f1f5f9;
    border-color: #dce3ee;
    color: #1e293b;
}

html[data-theme="light"] .ai-mock-url {
    color: #2563eb;
}

html[data-theme="light"] .how-step {
    background: #ffffff;
    border-color: #dce3ee;
}

html[data-theme="light"] .how-step--ai {
    background:
        radial-gradient(ellipse at top left, rgba(251,191,36,0.08), transparent 60%),
        #ffffff;
    border-color: rgba(251,191,36,0.45);
    box-shadow: 0 0 0 1px rgba(251,191,36,0.1), 0 12px 32px rgba(251,191,36,0.06);
}

html[data-theme="light"] .notify-card {
    background: #ffffff;
    border-color: #dce3ee;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

html[data-theme="light"] .email-subject {
    background: #f8fafc;
    border-color: #dce3ee;
    color: #1e293b;
}

html[data-theme="light"] .notify-body,
html[data-theme="light"] .telegram-message {
    color: #64748b;
}

html[data-theme="light"] .notify-body strong,
html[data-theme="light"] .telegram-message strong,
html[data-theme="light"] .notify-top {
    color: #1e293b;
}

html[data-theme="light"] .notify-status {
    color: #1e40af;
    background: rgba(59,130,246,0.08);
    border-color: rgba(59,130,246,0.25);
}

html[data-theme="light"] .status-badge-red {
    color: #991b1b;
    background: rgba(220,38,38,0.1);
    border-color: rgba(220,38,38,0.25);
}

html[data-theme="light"] .telegram-message code {
    color: #991b1b;
    background: rgba(239,68,68,0.07);
    border-color: rgba(239,68,68,0.2);
}

html[data-theme="light"] .strat-section-card {
    background: #ffffff;
    border-color: #dce3ee;
}

html[data-theme="light"] .strat-section-card--eu {
    border-color: rgba(0,51,160,0.3);
    background:
        radial-gradient(ellipse at top right, rgba(210,40,40,0.05), transparent 50%),
        radial-gradient(ellipse at bottom left, rgba(0,51,160,0.07), transparent 55%),
        #ffffff;
    box-shadow: 0 4px 16px rgba(0,51,160,0.06);
}

html[data-theme="light"] .ai-vs-others {
    background: #f8fafc;
    opacity: 1;
}

html[data-theme="light"] .ai-vs-us {
    border-color: rgba(251,191,36,0.4);
    background: rgba(251,191,36,0.05);
}

html[data-theme="light"] .ai-diagnosis-text,
html[data-theme="light"] .ai-vs-us .ai-vs-text {
    color: #92400e;
}

html[data-theme="light"] .tg-ai-text {
    color: #92400e;
}

html[data-theme="light"] .badge-ai {
    color: #92400e;
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.35);
}