/* Sign-in page — isolated modern skin. */
.auth-page {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(16px, 3vw, 34px);
    display: grid;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse at center,
        rgba(3, 18, 24, .9) 0%,
        rgba(4, 22, 29, .72) 42%,
        rgba(5, 24, 31, .4) 67%,
        transparent 96%);
}

.auth-panel {
    position: relative;
    width: min(100%, 560px);
    min-height: 0;
    padding: clamp(24px, 3vw, 34px);
    display: flex;
    justify-content: flex-start;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.auth-panel::before {
    display: none;
}

.auth-head,
.auth-language,
.auth-social-list,
.auth-legacy {
    width: 100%;
    max-width: none;
}

.auth-head {
    gap: 15px;
    padding-bottom: 19px;
    border-color: rgba(255,255,255,.065);
}

.auth-icon {
    width: 58px;
    height: 58px;
    color: #183039;
    background: linear-gradient(145deg, #f6d575, #dda23f);
    border: 1px solid rgba(255,237,174,.42);
    border-radius: 17px;
    box-shadow: 0 12px 26px rgba(204,141,37,.17);
    font-size: 23px;
}

.auth-head h2 {
    font-size: clamp(26px, 2.6vw, 32px);
    letter-spacing: -.035em;
}
.auth-head p { margin-top: 6px; color: rgba(227,241,244,.68); font-size: 14px; }

.auth-language { margin-top: 17px; }
.auth-language > span { font-size: 13px; }
.auth-language-options { gap: 7px; }
.auth-language-options button {
    min-height: 39px;
    padding: 7px 11px;
    color: rgba(231,244,247,.76);
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.075);
    border-radius: 11px;
    font-size: 13px;
}
.auth-language-options button.active {
    color: #fff;
    background: rgba(75,190,214,.12);
    border-color: rgba(88,207,230,.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.auth-social-list { margin-top: 18px; gap: 11px; }
.auth-social,
.auth-telegram-card {
    min-height: 72px;
    padding: 11px 14px;
    gap: 13px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 15px;
    box-shadow: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.auth-social-primary {
    min-height: 72px;
    background: linear-gradient(135deg, rgba(85,207,230,.07), rgba(255,255,255,.025));
    border: 1px solid rgba(96,207,226,.16);
}

.auth-social-google {
    background:
        linear-gradient(110deg, rgba(66,133,244,.09), rgba(234,67,53,.10) 48%, rgba(251,188,5,.09)),
        rgba(255,255,255,.035);
    border-color: rgba(241,184,74,.28);
    box-shadow: inset 3px 0 0 rgba(234,67,53,.58);
}

.auth-telegram-card {
    background:
        linear-gradient(110deg, rgba(42,171,238,.14), rgba(19,103,154,.055)),
        rgba(255,255,255,.03);
    border-color: rgba(72,188,230,.3);
    box-shadow: inset 3px 0 0 rgba(55,184,232,.62);
}
.auth-social:hover,
.auth-telegram-button:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.055);
    border-color: rgba(102,210,229,.24);
}

.auth-social-google:hover,
.auth-social-google:focus-visible {
    color: #fff;
    background:
        linear-gradient(110deg, rgba(66,133,244,.16), rgba(234,67,53,.19) 48%, rgba(251,188,5,.17)),
        rgba(255,255,255,.045);
    border-color: rgba(246,194,87,.5);
    box-shadow: inset 4px 0 0 rgba(239,73,61,.9), 0 10px 24px rgba(180,76,35,.12);
}

.auth-telegram-button:hover,
.auth-telegram-button:focus-visible {
    color: #fff;
    background:
        linear-gradient(110deg, rgba(42,171,238,.27), rgba(19,103,154,.13)),
        rgba(255,255,255,.04);
    border-color: rgba(82,203,241,.55);
    box-shadow: inset 4px 0 0 rgba(70,203,245,.92), 0 10px 24px rgba(28,139,183,.14);
}
.auth-social-mark {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 21px;
}
.auth-social-google .auth-social-mark { color:#f5c968; background:rgba(241,188,72,.1); }
.auth-telegram-mark { color:#72d5ef; background:rgba(53,174,210,.11); }
.auth-social strong,.auth-telegram-card strong { font-size: 17px; }
.auth-social small,.auth-telegram-card small { color:rgba(225,240,244,.62); font-size:12px; }
.auth-social > .fa-arrow-right,.auth-telegram-card > .fa-arrow-right { color:rgba(221,238,242,.45); }

.auth-legacy { margin-top:17px; padding-top:15px; border-color:rgba(255,255,255,.06); }
.auth-legacy-toggle {
    width:100%; min-height:42px; padding:9px 12px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    color:rgba(224,239,243,.62); background:rgba(255,255,255,.025);
    border:1px solid rgba(255,255,255,.055); border-radius:11px;
    font-size:12px; font-weight:800; text-align:left;
    transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.auth-legacy-toggle:hover { color:rgba(240,249,250,.88); background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.09); }
.auth-legacy-toggle i { transition:transform .2s ease; }
.auth-legacy-open .auth-legacy-toggle i { transform:rotate(180deg); }
.auth-legacy-expand {
    max-height:0; margin-top:0; overflow:hidden; opacity:0; transform:translateY(-5px); pointer-events:none;
    transition:max-height .24s ease,margin-top .2s ease,opacity .18s ease,transform .2s ease;
}
.auth-legacy-open .auth-legacy-expand { max-height:110px; margin-top:9px; opacity:1; transform:translateY(0); pointer-events:auto; }
.auth-legacy-title { display:none; }
.auth-legacy-links { gap:9px; }
.auth-legacy-link {
    min-height:42px;
    padding:9px 11px;
    background:rgba(255,255,255,.025);
    border-color:rgba(255,255,255,.06);
    border-radius:11px;
    font-size:12px;
}

@media (max-width: 576px) and (orientation: portrait) {
    body:has(.auth-page) .header a[href="/signin"] {
        padding-inline: 12px !important;
    }
    .auth-page { padding: 10px; align-items:center; }
    .auth-panel {
        width:100%;
        padding:20px 16px;
        border-radius:0;
    }
    .auth-head { gap:12px; padding-bottom:15px; }
    .auth-icon { width:50px; height:50px; border-radius:15px; font-size:20px; }
    .auth-head h2 { font-size:25px; }
    .auth-head p { font-size:13px; }
    .auth-language { margin-top:14px; gap:8px; }
    .auth-language-options { flex:1 1 auto; }
    .auth-language-options button { flex:1 1 0; min-width:0; justify-content:center; padding-inline:7px; }
    .auth-social-list { margin-top:15px; gap:10px; }
    .auth-social,.auth-social-primary,.auth-telegram-card { min-height:68px; }
    .auth-social strong,.auth-telegram-card strong { font-size:16px; }
    .auth-social small,.auth-telegram-card small { font-size:12px; }
    .auth-legacy { margin-top:14px; padding-top:13px; }
    .auth-legacy-toggle,
    .auth-legacy-link { font-size:9.5px !important; }
}

@media (orientation: landscape) and (max-width: 932px) and (max-height: 520px) {
    body:has(.auth-page) .header a[href="/signin"] {
        padding-inline: 12px !important;
    }
    .auth-page { padding:8px 14px; }
    .auth-panel {
        width:min(100%,760px);
        padding:15px 17px;
        display:grid;
        grid-template-columns:minmax(340px,1.12fr) minmax(300px,.88fr);
        grid-template-rows:auto auto minmax(0,1fr);
        column-gap:18px;
        row-gap:10px;
        border-radius:0;
    }
    .auth-head { grid-column:1; grid-row:1; padding-bottom:10px; }
    .auth-icon { width:42px; height:42px; border-radius:13px; font-size:18px; }
    .auth-head h2 { font-size:21px; }
    .auth-head p { font-size:12px; }
    .auth-language { grid-column:1; grid-row:2; margin:0; display:block; }
    .auth-language > span { display:block; margin-bottom:6px; font-size:12px; }
    .auth-language-options button { min-height:34px; padding:5px 8px; font-size:11px; }
    .auth-social-list {
        grid-column:2;
        grid-row:1/4;
        margin:0;
        grid-template-columns:minmax(0,1fr);
        align-content:center;
        gap:9px;
    }
    .auth-social,.auth-social-primary,.auth-telegram-card { min-height:68px; padding:10px 12px; }
    .auth-social-mark { width:38px; height:38px; font-size:18px; }
    .auth-social strong,.auth-telegram-card strong { font-size:15px; }
    .auth-social small,.auth-telegram-card small { font-size:11px; }
    .auth-legacy { grid-column:1; grid-row:3; margin:0; padding-top:9px; align-self:end; }
    .auth-legacy-title { margin-bottom:6px; font-size:11px; }
    .auth-legacy-link { min-height:36px; padding:7px 8px; font-size:11px; }
    .auth-legacy-toggle,
    .auth-legacy-link { font-size:9.5px !important; }
}