.seo-page {
    --seo-bg-1: #101723;
    --seo-bg-2: #0d121a;
    --seo-bg-3: #0d121a;
    --seo-glow-1: rgba(24, 58, 96, 0.14);
    --seo-glow-2: rgba(24, 58, 96, 0.14);
    --seo-card: #141d29;
    --seo-line: #273649;
    --seo-panel: #0f1722;
    --seo-panel-line: #2e3b4f;
    --seo-text: #e7eef9;
    --seo-muted: #9ab0c8;
    --seo-accent: #3aa9f0;
    --seo-link-text: #032341;
    --seo-link-1: #8ad8ff;
    --seo-link-2: #3aa9f0;
    --seo-link-shadow: rgba(46, 152, 222, 0.35);
    --seo-breadcrumb-hover: #8ed7ff;
}

html.seo-page:not(.theme-telegram),
body.seo-page:not(.theme-telegram) {
    --seo-bg-1: rgba(11, 8, 7, 0.9);
    --seo-bg-2: rgba(16, 12, 10, 0.86);
    --seo-bg-3: rgba(14, 10, 8, 0.38);
    --seo-glow-1: rgba(255, 138, 52, 0.18);
    --seo-glow-2: rgba(255, 104, 36, 0.14);
    --seo-card: rgba(30, 25, 22, 0.84);
    --seo-line: rgba(140, 117, 97, 0.46);
    --seo-panel: rgba(25, 21, 18, 0.88);
    --seo-panel-line: rgba(124, 104, 87, 0.44);
    --seo-text: #f2ece5;
    --seo-muted: #c8b8a8;
    --seo-accent: #ffbe77;
    --seo-link-text: #231304;
    --seo-link-1: #ffcb4d;
    --seo-link-2: #ff9f10;
    --seo-link-shadow: rgba(255, 145, 36, 0.34);
    --seo-breadcrumb-hover: #ffd7ab;
}

html.seo-page {
    min-height: 100%;
    background-color: var(--seo-bg-2);
    background-image:
        radial-gradient(1200px 620px at 12% 10%, var(--seo-glow-1), transparent 68%),
        radial-gradient(980px 640px at 88% 86%, var(--seo-glow-2), transparent 72%),
        linear-gradient(180deg, var(--seo-bg-1) 0%, var(--seo-bg-2) 100%);
}

html.seo-page:not(.theme-telegram) {
    background-image:
        radial-gradient(1200px 620px at 12% 10%, var(--seo-glow-1), transparent 68%),
        radial-gradient(980px 640px at 88% 86%, var(--seo-glow-2), transparent 72%),
        linear-gradient(to right, var(--seo-bg-1) 0%, var(--seo-bg-2) 42%, var(--seo-bg-3) 70%, var(--seo-bg-2) 100%);
}

body.seo-page {
    min-height: 100%;
    margin: 0;
    background: transparent;
}

.seo-wrap {
    width: min(860px, 100% - 32px);
    margin: 34px auto;
}

.seo-shell {
    border: 1px solid var(--seo-line);
    border-radius: 18px;
    padding: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)), var(--seo-card);
}

.seo-kicker {
    margin: 0 0 10px;
    color: var(--seo-accent);
    font-family: "Manrope", sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.seo-title {
    margin: 0;
    color: var(--seo-text);
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.15rem);
    font-weight: 700;
    line-height: 1.2;
}

.seo-intro {
    margin: 14px 0 0;
    color: var(--seo-muted);
    font-family: "Manrope", sans-serif;
    line-height: 1.6;
    max-width: 860px;
}

.seo-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.seo-card {
    border-radius: 14px;
    border: 1px solid var(--seo-panel-line);
    background: var(--seo-panel);
    padding: 18px;
}

.seo-card h2,
.seo-card h3 {
    margin: 0;
    color: var(--seo-text);
    font-family: "Manrope", sans-serif;
    font-size: 1.08rem;
    font-weight: 800;
}

.seo-card p {
    margin: 10px 0 0;
    color: var(--seo-muted);
    font-family: "Manrope", sans-serif;
    line-height: 1.55;
}

.seo-link {
    display: inline-flex;
    margin-top: 14px;
    text-decoration: none;
    font-family: "Manrope", sans-serif;
    font-weight: 800;
    color: var(--seo-link-text);
    background: linear-gradient(180deg, var(--seo-link-1) 0%, var(--seo-link-2) 100%);
    border-radius: 999px;
    padding: 10px 14px;
    box-shadow: 0 6px 14px var(--seo-link-shadow);
}

.seo-stack {
    margin-top: 16px;
    display: grid;
    gap: 16px;
}

.seo-panel {
    border-radius: 14px;
    border: 1px solid var(--seo-panel-line);
    background: var(--seo-panel);
    padding: 16px;
}

.seo-panel h2 {
    margin: 0;
    color: var(--seo-text);
    font-family: "Manrope", sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
}

.seo-list {
    margin: 10px 0 0;
    padding-left: 20px;
    color: var(--seo-muted);
    font-family: "Manrope", sans-serif;
    line-height: 1.6;
}

.seo-list li + li {
    margin-top: 6px;
}

.seo-breadcrumbs {
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-family: "Manrope", sans-serif;
    color: var(--seo-muted);
    font-size: 0.9rem;
}

.seo-breadcrumbs a {
    color: var(--seo-accent);
    text-decoration: none;
}

.seo-breadcrumbs a:hover {
    color: var(--seo-breadcrumb-hover);
}

.seo-intro-tight {
    margin-top: 8px;
}

.seo-combo-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.seo-combo-card {
    border: 1px solid var(--seo-panel-line);
    border-radius: 12px;
    background: var(--seo-panel);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.seo-combo-card h3 {
    margin: 0;
    color: var(--seo-text);
    font-family: "Manrope", sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.3;
    max-width: 100%;
}

.seo-combo-card p {
    margin: 6px 0 0;
    color: var(--seo-muted);
    font-family: "Manrope", sans-serif;
    font-size: 0.88rem;
    line-height: 1.45;
}

.seo-combo-pos {
    margin: 0 0 8px;
    color: var(--seo-accent);
    font-family: "Manrope", sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.seo-combo-image {
    width: 100%;
    height: 128px;
    object-fit: cover;
    border-radius: 10px;
    margin: 0;
    display: block;
}

.seo-kind-badge {
    display: inline-flex;
    margin: 0;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--seo-panel-line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--seo-muted);
    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.seo-promo-panel {
    text-align: center;
    padding: 20px 18px;
}

.seo-promo-text {
    margin: 0;
    color: var(--seo-accent);
    font-family: "Manrope", sans-serif;
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 800;
    line-height: 1.3;
}

.seo-promo-lead {
    color: var(--seo-text);
}

.seo-promo-accent {
    color: var(--seo-accent);
}

.seo-promo-link {
    margin-top: 14px;
    font-size: 1rem;
    padding: 12px 18px;
}

.seo-empty {
    margin-top: 10px;
    border: 1px dashed var(--seo-panel-line);
    border-radius: 12px;
    background: var(--seo-panel);
    padding: 14px;
}

.seo-empty-title {
    margin: 0;
    color: var(--seo-text);
    font-family: "Manrope", sans-serif;
    font-size: 1rem;
    font-weight: 800;
}

.seo-empty-text {
    margin: 8px 0 0;
    color: var(--seo-muted);
    font-family: "Manrope", sans-serif;
    line-height: 1.5;
}

.seo-cipher-word {
    margin: 10px 0 0;
    text-align: center;
    color: var(--seo-text);
    font-family: "Russo One", sans-serif;
    font-size: clamp(2rem, 5.5vw, 3.3rem);
    letter-spacing: 0.08em;
    line-height: 1.1;
    word-break: break-word;
}

.seo-cipher-window {
    margin: 12px 0 0;
    text-align: center;
    color: var(--seo-muted);
    font-family: "Manrope", sans-serif;
    font-size: 0.93rem;
    line-height: 1.45;
}

@media (max-width: 900px) {
    .seo-wrap {
        width: min(860px, 100% - 16px);
        margin: 18px auto;
    }

    .seo-shell {
        padding: 20px 18px;
    }

    .seo-grid {
        grid-template-columns: 1fr;
    }

    .seo-combo-grid {
        grid-template-columns: 1fr;
    }
}