.auth-page {
    min-height: 100dvh;
    padding: 22px 16px;
    display: grid;
    place-items: center;
}

.auth-card {
    width: min(100%, 520px);
    padding: 25px 22px;
    border: 1px solid rgba(84, 177, 235, .16);
    border-radius: 23px;
    background:
        radial-gradient(circle at 50% 0%, rgba(52, 152, 213, .12), transparent 30%),
        rgba(7, 17, 28, .96);
    box-shadow: 0 24px 75px rgba(0,0,0,.36);
}

.auth-card--register {
    width: min(100%, 680px);
}

.auth-card__header {
    text-align: center;
}

.auth-logo {
    width: 58px;
    height: 65px;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    clip-path: polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
    color: #b9eaff;
    background: linear-gradient(145deg,#52b8ed,#0c5c8b);
    font-size: 25px;
    font-weight: 900;
}

.auth-logo span {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    display: grid;
    place-items: center;
    clip-path: inherit;
    background: #07131f;
}

.auth-card__eyebrow {
    color: #5d90a9;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
}

.auth-card__header h1 {
    margin: 8px 0 5px;
    color: #edf8ff;
    font-size: 24px;
}

.auth-card__header p {
    max-width: 480px;
    margin: 0 auto;
    color: #718696;
    font-size: 11px;
    line-height: 1.5;
}

.auth-form {
    margin-top: 20px;
    display: grid;
    gap: 13px;
}

.register-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-field {
    display: grid;
    gap: 6px;
}

.form-field label,
.form-group legend {
    color: #9fbdcc;
    font-size: 10px;
    font-weight: 800;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid rgba(84, 177, 235, .14);
    border-radius: 12px;
    outline: 0;
    color: #e7f5fc;
    background: rgba(5, 15, 25, .9);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: rgba(76, 190, 247, .58);
    box-shadow: 0 0 0 3px rgba(66, 179, 236, .07);
}

.form-hint,
.label-optional {
    color: #587484;
    font-size: 8px;
}

.form-error,
.form-alert {
    color: #ff9aaa;
    font-size: 9px;
}

.form-alert {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 91, 112, .18);
    border-radius: 11px;
    background: rgba(107, 25, 37, .15);
}

.form-group {
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-row {
    margin-top: 7px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.choice-card {
    min-height: 42px;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(84, 177, 235, .12);
    border-radius: 11px;
    color: #9cb9c8;
    background: rgba(9, 24, 37, .68);
    font-size: 10px;
}

.choice-card input {
    accent-color: #50c5fb;
}

.rules-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #718b9a;
    font-size: 9px;
    line-height: 1.45;
}

.rules-checkbox input {
    margin-top: 2px;
    accent-color: #50c5fb;
}

.rules-checkbox__box {
    display: none;
}

.rules-checkbox a {
    color: #6ac4ee;
}

.auth-submit {
    min-height: 44px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 13px;
    cursor: pointer;
    color: #06131d;
    background: linear-gradient(145deg,#a6e4ff,#42b4ec);
    font-weight: 900;
    font-size: 11px;
}

.auth-card__footer {
    margin-top: 16px;
    color: #607b8b;
    text-align: center;
    font-size: 9px;
}

.auth-card__footer a {
    color: #67bfe8;
}

@media (max-width: 620px) {
    .auth-page { padding: 12px; align-items: start; }
    .auth-card { padding: 20px 15px; }
    .register-grid { grid-template-columns: 1fr; gap: 11px; }
}

@media (max-height: 720px) and (min-width: 621px) {
    .auth-page { padding-top: 8px; padding-bottom: 8px; }
    .auth-card { padding-top: 16px; padding-bottom: 16px; }
    .auth-logo { width: 48px; height: 54px; }
    .auth-form { margin-top: 13px; gap: 9px; }
}

/* =========================================================
   VULYK NIGHT FINISH v1 — 2026-08-15
   Login/register primary button
   ========================================================= */


.auth-submit {
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    color: #06131d;
    background: linear-gradient(135deg, #8edcff 0%, #58c0f7 48%, #39a9ed 100%);
    box-shadow: 0 12px 30px rgba(53, 172, 235, .20), inset 0 1px 0 rgba(255,255,255,.38);
    font-weight: 900;
}
.auth-submit:hover { filter: brightness(1.04); }
.auth-submit:active { transform: translateY(1px) scale(.995); }

@media (max-width: 620px) {
    .auth-page {
        min-height: calc(100dvh - 76px);
        padding: 8px 12px 12px;
        place-items: start center;
    }
    .auth-card {
        width: 100%;
        max-width: 520px;
        margin: 0;
        padding: 18px 15px;
    }
    .auth-card--register { max-width: 680px; }
    .auth-form, .register-grid, .form-field { min-width: 0; }
    .register-grid { grid-template-columns: 1fr; gap: 11px; }
    .form-field input, .form-field select, .form-field textarea { max-width: 100%; }
}

/* =========================================================
   VULYK AUTH SHELL v52 — login/register/rules in one style
   ========================================================= */
body.auth-body{
    min-height:100dvh;
    margin:0;
    overflow-x:hidden;
    color:#eaf8ff;
    background:
        radial-gradient(circle at 50% 12%,rgba(28,142,230,.16),transparent 31%),
        radial-gradient(circle at 7% 72%,rgba(24,99,182,.10),transparent 29%),
        radial-gradient(circle at 93% 80%,rgba(0,194,255,.07),transparent 27%),
        #030913;
}
body.auth-body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    opacity:.16;
    background-image:
        linear-gradient(rgba(70,173,245,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(70,173,245,.07) 1px,transparent 1px);
    background-size:42px 42px;
    transform:perspective(800px) rotateX(58deg) scale(1.35) translateY(18%);
    transform-origin:center bottom;
}
body.auth-body .ambient{opacity:.18;filter:blur(130px)}
.auth-main{position:relative;z-index:2;min-height:100dvh}
.auth-page{position:relative;min-height:100dvh;padding:34px 18px;place-items:center}
.auth-card{
    border-color:rgba(75,194,255,.24);
    background:
        radial-gradient(circle at 50% -10%,rgba(51,168,241,.15),transparent 34%),
        linear-gradient(145deg,rgba(11,29,47,.97),rgba(4,13,24,.985));
    box-shadow:0 28px 90px rgba(0,0,0,.52),0 0 55px rgba(32,161,255,.055),inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter:blur(18px);
}
.auth-logo{filter:drop-shadow(0 0 16px rgba(69,190,255,.33))}
.auth-card__eyebrow{color:#5ebeea;letter-spacing:.18em}
.auth-card__header h1{font-size:25px;letter-spacing:-.02em}
.auth-card__header p{color:#7d98aa}
.auth-card--rules{width:min(100%,680px)}
.rules-document{
    margin-top:20px;
    padding:17px 18px;
    max-height:55vh;
    overflow:auto;
    border:1px solid rgba(72,184,242,.17);
    border-radius:15px;
    color:#a9c3d2;
    background:rgba(3,13,23,.68);
    font-size:11px;
    line-height:1.72;
    white-space:normal;
}
.rules-document__actions{margin-top:14px}
.rules-back{text-decoration:none}
@media(max-width:620px){
    .auth-page{padding:18px 12px;place-items:start center}
    .auth-card{margin:auto 0}
    .auth-card--register{margin:0}
    .rules-document{max-height:60vh}
}

/* VULYK REGISTER BIRTH SELECTS v53 */
.birth-date-selects{
    display:grid;
    grid-template-columns:.8fr 1.35fr 1fr;
    gap:8px;
}
.birth-date-selects select{min-width:0;width:100%;}
@media(max-width:420px){
    .birth-date-selects{grid-template-columns:.85fr 1.25fr .95fr;gap:6px;}
    .birth-date-selects select{padding-left:9px;padding-right:7px;font-size:10px;}
}