/**
 * Кнопка «Войти через Telegram» на login/register.
 * База — classic. Дальше каждый design-* пересобирает форму, металл и свечение.
 */

.btn-telegram {
    --tg-ink: #fff;
    --tg-muted: rgba(255, 255, 255, 0.78);
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 16px 12px 12px;
    color: var(--tg-ink);
    text-decoration: none;
    text-align: left;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-bottom: 4px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), transparent 42%),
        linear-gradient(135deg, #3db6ef 0%, #229ED9 48%, #157eb8 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 10px 28px rgba(21, 126, 184, 0.38);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.btn-telegram::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.22), transparent 46%);
    pointer-events: none;
    z-index: 0;
}
.btn-telegram::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 36%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-18deg);
    animation: tgSheen 5.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
.btn-telegram .tg-icon,
.btn-telegram .tg-text,
.btn-telegram .tg-arrow {
    position: relative;
    z-index: 2;
}
.tg-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    color: var(--tg-ink);
    transition: transform 0.22s ease, background 0.22s ease;
}
.tg-icon svg { display: block; }
.tg-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.tg-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
}
.tg-sub {
    font-size: 11px;
    font-weight: 500;
    color: var(--tg-muted);
    letter-spacing: 0.02em;
}
.tg-arrow {
    flex-shrink: 0;
    opacity: 0.85;
    color: var(--tg-ink);
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.btn-telegram:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        0 16px 36px rgba(21, 126, 184, 0.48);
}
.btn-telegram:hover .tg-icon { transform: translateY(-1px); background: rgba(255,255,255,0.24); }
.btn-telegram:hover .tg-arrow { transform: translateX(4px); opacity: 1; }
.btn-telegram:active { transform: translateY(0); }

@keyframes tgSheen {
    0% { left: -40%; }
    35% { left: 130%; }
    100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-telegram::after { animation: none; display: none; }
}

/* ── Modern: тёплое золото, как кабинет ── */
body.design-modern .btn-telegram {
    --tg-ink: #241d16;
    --tg-muted: rgba(36, 29, 22, 0.62);
    border-radius: 14px;
    border: 1px solid rgba(177, 134, 59, 0.35);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.28), transparent 40%),
        linear-gradient(135deg, #f0d79f, #d3a75a 52%, #b1863b);
    box-shadow:
        inset 0 1px 0 rgba(255, 247, 230, 0.55),
        0 12px 28px rgba(177, 134, 59, 0.28);
}
body.design-modern .btn-telegram .tg-icon {
    border-radius: 12px;
    background: rgba(36, 29, 22, 0.1);
    box-shadow: inset 0 0 0 1px rgba(36, 29, 22, 0.12);
}
body.design-modern .btn-telegram:hover {
    box-shadow:
        inset 0 1px 0 rgba(255, 247, 230, 0.7),
        0 18px 36px rgba(177, 134, 59, 0.4);
}
body.design-modern.auth-page.dark .btn-telegram {
    --tg-ink: #f4ead6;
    --tg-muted: rgba(244, 234, 214, 0.62);
    background:
        linear-gradient(180deg, rgba(240, 215, 159, 0.16), transparent 50%),
        #191410;
    border-color: rgba(236, 210, 154, 0.32);
    box-shadow: inset 0 1px 0 rgba(236, 210, 154, 0.14), 0 12px 28px rgba(0,0,0,0.35);
}
body.design-modern.auth-page.dark .btn-telegram .tg-icon {
    background: rgba(236, 210, 154, 0.1);
    box-shadow: inset 0 0 0 1px rgba(236, 210, 154, 0.22);
}

/* ── Nexus: голографический неон ── */
body.design-nexus .btn-telegram {
    --tg-ink: #f4f1ff;
    --tg-muted: rgba(201, 190, 255, 0.78);
    border-radius: 0;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    border: 1px solid rgba(139, 108, 255, 0.45);
    background:
        linear-gradient(90deg, rgba(23, 198, 214, 0.18), transparent 30%),
        linear-gradient(135deg, #2a2158, #171c38 55%, #122c40);
    box-shadow:
        0 0 0 1px rgba(23, 198, 214, 0.12) inset,
        0 12px 36px rgba(109, 77, 255, 0.28);
}
body.design-nexus .btn-telegram .tg-icon {
    border-radius: 0;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    background: rgba(23, 198, 214, 0.16);
    box-shadow: 0 0 16px rgba(23, 198, 214, 0.25);
    color: #9af7ff;
}
body.design-nexus .tg-title {
    font-family: var(--font-display, Orbitron, sans-serif);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 12px;
}
body.design-nexus .btn-telegram:hover {
    box-shadow:
        0 0 0 1px rgba(23, 198, 214, 0.28) inset,
        0 0 28px rgba(109, 77, 255, 0.35);
}

/* ── Orion: шампанское стекло, в пару к золотому «Войти» ── */
body.design-orion .btn-telegram {
    --tg-ink: #f3e0b5;
    --tg-muted: rgba(243, 224, 181, 0.62);
    border-radius: 999px;
    padding: 11px 18px 11px 11px;
    border: 1px solid rgba(243, 224, 196, 0.32);
    background:
        linear-gradient(180deg, rgba(243, 224, 196, 0.14), rgba(16, 18, 24, 0.2) 48%),
        rgba(12, 14, 19, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(243, 224, 196, 0.22),
        0 10px 28px rgba(0, 0, 0, 0.35);
}
body.design-orion .btn-telegram .tg-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #f3e0b5, #d4b483 58%, #8a6a3a);
    color: #1a140c;
    box-shadow: 0 0 0 3px rgba(212, 180, 131, 0.16), 0 6px 16px rgba(0,0,0,0.28);
}
body.design-orion .tg-title {
    font-family: var(--font-display, Cinzel, serif);
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 13px;
}
body.design-orion .tg-sub {
    font-family: var(--font-ui, Manrope, sans-serif);
    font-weight: 500;
}
body.design-orion .btn-telegram:hover {
    border-color: rgba(243, 224, 196, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(243, 224, 196, 0.3),
        0 16px 36px rgba(0, 0, 0, 0.4),
        0 0 24px rgba(212, 180, 131, 0.16);
}
body.design-orion.light-theme .btn-telegram {
    --tg-ink: #1a140c;
    --tg-muted: rgba(26, 20, 12, 0.55);
    background: linear-gradient(180deg, #fffdf8, #f4efe6);
    border-color: rgba(184, 148, 94, 0.35);
    box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(26, 20, 12, 0.08);
}

/* ── Citadel: имперская печать ── */
body.design-citadel .btn-telegram {
    --tg-ink: #efe4cc;
    --tg-muted: rgba(239, 228, 204, 0.62);
    border-radius: 4px;
    border: 1px solid rgba(201, 164, 74, 0.42);
    background:
        linear-gradient(180deg, rgba(201, 164, 74, 0.14), transparent 42%),
        #120e0a;
    box-shadow: inset 0 0 0 1px rgba(201, 164, 74, 0.12), 0 12px 28px rgba(0,0,0,0.4);
}
body.design-citadel .btn-telegram .tg-icon {
    border-radius: 3px;
    background: linear-gradient(180deg, #f3dd9a, #c9a44a 55%, #7a6230);
    color: #120e0a;
    box-shadow: 0 0 0 1px rgba(243, 221, 154, 0.35);
}
body.design-citadel .tg-title {
    font-family: var(--font-display, Forum, serif);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
}
body.design-citadel .tg-sub {
    font-family: var(--font-serif, "Cormorant Garamond", serif);
    font-style: italic;
    letter-spacing: 0.04em;
}
body.design-citadel .btn-telegram:hover {
    border-color: rgba(243, 221, 154, 0.6);
    box-shadow: 0 0 22px rgba(201, 164, 74, 0.18), 0 14px 32px rgba(0,0,0,0.45);
}
body.design-citadel.light-theme .btn-telegram {
    --tg-ink: #1d1711;
    --tg-muted: rgba(29, 23, 17, 0.58);
    background: linear-gradient(180deg, #f7f0de, #efe4cc);
    border-color: rgba(122, 98, 48, 0.35);
}

/* ── Aetherion: угловатый HUD ── */
body.design-aetherion .btn-telegram {
    --tg-ink: #e7f4ff;
    --tg-muted: rgba(154, 247, 255, 0.7);
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border: 1px solid rgba(62, 232, 255, 0.4);
    background:
        linear-gradient(90deg, rgba(62, 232, 255, 0.16), transparent 28%),
        linear-gradient(180deg, #0b1528, #070b16);
    box-shadow: 0 0 22px rgba(62, 232, 255, 0.16), inset 0 0 18px rgba(62, 232, 255, 0.06);
    font-family: var(--font-ui, Rajdhani, sans-serif);
}
body.design-aetherion .btn-telegram .tg-icon {
    border-radius: 0;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: rgba(62, 232, 255, 0.12);
    box-shadow: none;
    color: #3ee8ff;
}
body.design-aetherion .tg-title {
    font-family: var(--font-display, Orbitron, sans-serif);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
}
body.design-aetherion .tg-sub {
    font-family: var(--font-mono, "Share Tech Mono", monospace);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 10px;
}
body.design-aetherion .btn-telegram:hover {
    box-shadow: 0 0 28px rgba(62, 232, 255, 0.28);
    border-color: rgba(62, 232, 255, 0.7);
}
body.design-aetherion.light-theme .btn-telegram {
    --tg-ink: #071018;
    --tg-muted: rgba(7, 16, 24, 0.58);
    background: linear-gradient(180deg, #ffffff, #e8f4ff);
    border-color: rgba(13, 115, 138, 0.35);
    box-shadow: 0 10px 24px rgba(13, 115, 138, 0.1);
}
body.design-aetherion.light-theme .btn-telegram .tg-icon {
    color: #0d738a;
    background: rgba(13, 115, 138, 0.1);
}

/* Разделитель «или войдите через сайт» — в тон кнопке */
body.design-orion .divider,
body.design-citadel .divider,
body.design-nexus .divider,
body.design-aetherion .divider,
body.design-modern .divider {
    letter-spacing: 0.14em;
}
body.design-orion .divider { color: var(--text-muted); }
body.design-orion .divider::before,
body.design-orion .divider::after { background: rgba(243, 224, 196, 0.16); }
body.design-citadel .divider { color: var(--primary); font-family: var(--font-serif, serif); font-style: italic; letter-spacing: 0.08em; text-transform: none; }
body.design-citadel .divider::before,
body.design-citadel .divider::after { background: rgba(201, 164, 74, 0.28); }
body.design-nexus .divider { color: var(--text-muted); }
body.design-nexus .divider::before,
body.design-nexus .divider::after { background: rgba(139, 108, 255, 0.28); }
body.design-aetherion .divider {
    color: var(--primary);
    font-family: var(--font-mono, monospace);
    font-size: 10px;
}
body.design-aetherion .divider::before,
body.design-aetherion .divider::after { background: rgba(62, 232, 255, 0.28); }

@media (max-width: 899px) {
    body.design-nexus .btn-telegram,
    body.design-aetherion .btn-telegram { clip-path: none; border-radius: 14px; }
    body.design-nexus .btn-telegram .tg-icon,
    body.design-aetherion .btn-telegram .tg-icon { clip-path: none; border-radius: 10px; }
}