/* Временная тема: штатный стиль CRM с тонким слоем трещин. */

body.theme-apocalypse {
    --apocalypse-ink: #334155;
    --apocalypse-accent: #4f46e5;
    --apocalypse-accent-soft: rgba(79, 70, 229, 0.2);
    background-color: #f8fafc;
    background-image:
        linear-gradient(rgba(248, 250, 252, 0.62), rgba(248, 250, 252, 0.62)),
        url("../img/apocalypse-cracks.svg?v=3"),
        var(--bg-gradient);
    background-position: center, center top, center;
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: cover, 680px 510px, cover;
}

/* Отдельный слой делает трещины видимыми поверх карточек и таблиц. */
body.theme-apocalypse::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1080;
    pointer-events: none;
    background-image: url("../img/apocalypse-cracks.svg?v=3");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: 620px 465px;
    opacity: 0.08;
    filter:
        brightness(1.01)
        saturate(1.04)
        drop-shadow(0 0 1px rgba(79, 70, 229, 0.08));
    animation: apocalypse-crack-flash 9s ease-in-out infinite;
}

/* Шапка находится выше общего слоя, поэтому получает собственные мерцающие трещины. */
body.theme-apocalypse .app-header::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: url("../img/apocalypse-cracks.svg?v=3") center 18% / 620px 465px repeat;
    opacity: 0.08;
    animation: apocalypse-crack-flash 9s ease-in-out infinite;
}

body.theme-apocalypse .app-header .header-content {
    position: relative;
    z-index: 2;
}

/* Баннер продолжает светлый визуальный язык системы, а не заменяет его. */
.apocalypse-banner__eyebrow {
    display: none !important;
}

.apocalypse-banner {
    position: relative;
    z-index: 10;
    overflow: hidden;
    color: var(--brand-text);
    background-color: rgba(255, 255, 255, 0.88);
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)),
        url("../img/apocalypse-cracks.svg?v=3"),
        radial-gradient(ellipse 45% 120% at 50% 0%, rgba(139, 92, 246, 0.12), transparent 68%),
        linear-gradient(120deg, rgba(239, 246, 255, 0.96), rgba(248, 250, 252, 0.96), rgba(238, 242, 255, 0.96));
    background-position: center, center 35%, center, center;
    background-repeat: no-repeat, repeat, no-repeat, no-repeat;
    background-size: cover, 960px 720px, cover, cover;
    border-top: 1px solid rgba(16, 100, 209, 0.2);
    border-bottom: 2px solid rgba(16, 100, 209, 0.3);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 24px rgba(15, 23, 42, 0.08);
}

.apocalypse-banner::before,
.apocalypse-banner::after {
    content: "";
    position: absolute;
    top: 50%;
    width: min(20vw, 19rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(16, 100, 209, 0.35));
}

.apocalypse-banner::before {
    left: 0;
}

.apocalypse-banner::after {
    right: 0;
    transform: rotate(180deg);
}

.apocalypse-banner__inner {
    min-height: 92px;
    display: grid;
    grid-template-columns: 48px minmax(0, auto) 48px;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.apocalypse-banner__seal {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    color: #4f46e5;
    background: rgba(255, 255, 255, 0.68);
    border: 2px solid rgba(79, 70, 229, 0.35);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 4px rgba(255, 255, 255, 0.72),
        inset 0 0 0 5px rgba(16, 100, 209, 0.15),
        0 4px 14px rgba(79, 70, 229, 0.13);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.apocalypse-banner__message {
    min-width: 20rem;
    text-align: center;
}

/* Скрывает строку и в старом закэшированном варианте partial-шаблона. */
.apocalypse-banner__eyebrow {
    display: none !important;
}

.apocalypse-banner__title,
.apocalypse-banner__verse {
    margin: 0;
}

.apocalypse-banner__title {
    color: #334155;
    font-family: Inter, "Segoe UI", sans-serif;
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow: 0 0 18px rgba(99, 102, 241, 0.18);
    animation: apocalypse-glow 5s ease-in-out infinite;
}

.apocalypse-banner__verse {
    margin-top: 0.2rem;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.apocalypse-banner__verse span {
    margin: 0 0.45rem;
    color: #6366f1;
}

.apocalypse-banner__rune {
    color: rgba(79, 70, 229, 0.42);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.8rem;
    text-align: center;
}

@keyframes apocalypse-glow {
    0%, 100% {
        opacity: 0.9;
        text-shadow: 0 0 12px rgba(99, 102, 241, 0.12);
    }
    50% {
        opacity: 1;
        text-shadow: 0 0 22px rgba(99, 102, 241, 0.28);
    }
}

@keyframes apocalypse-crack-flash {
    0%, 100% {
        opacity: 0.06;
        filter:
            brightness(1)
            saturate(1.02)
            drop-shadow(0 0 0.5px rgba(79, 70, 229, 0.06));
    }
    48% {
        opacity: 0.07;
        filter:
            brightness(1.02)
            saturate(1.04)
            drop-shadow(0 0 1px rgba(99, 102, 241, 0.08));
    }
    52% {
        opacity: 0.13;
        filter:
            brightness(1.06)
            saturate(1.08)
            drop-shadow(0 0 1px rgba(99, 102, 241, 0.12));
    }
    58% {
        opacity: 0.08;
        filter:
            brightness(1.02)
            saturate(1.03)
            drop-shadow(0 0 1px rgba(79, 70, 229, 0.08));
    }
}

@media (max-width: 768px) {
    body.theme-apocalypse {
        background-size: cover, 560px 420px, cover;
    }

    body.theme-apocalypse::before {
        background-size: 520px 390px;
    }

    .apocalypse-banner__inner {
        min-height: 82px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 0.75rem;
    }

    .apocalypse-banner__message {
        min-width: 0;
        text-align: left;
    }

    .apocalypse-banner__seal {
        width: 40px;
        height: 40px;
        font-size: 0.62rem;
    }

    .apocalypse-banner__rune,
    .apocalypse-banner::before,
    .apocalypse-banner::after {
        display: none;
    }

    .apocalypse-banner__title {
        font-size: 1.22rem;
    }

    .apocalypse-banner__verse {
        font-size: 0.59rem;
        letter-spacing: 0.06em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apocalypse-banner__title {
        animation: none;
    }

    body.theme-apocalypse::before {
        animation: none;
        opacity: 0.08;
    }

    body.theme-apocalypse .app-header::after {
        animation: none;
        opacity: 0.08;
    }
}

@media print {
    .apocalypse-banner {
        display: none !important;
    }

    body.theme-apocalypse {
        background-image: none !important;
    }

    body.theme-apocalypse::before {
        display: none !important;
    }
}