/* =====================================================================
   Auth (login/register) shared styles
   ===================================================================== */

.auth-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: var(--header-h);
}
@media (max-width: 900px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
}

.auth-aside {
    background: linear-gradient(135deg, var(--c-bg-2), var(--c-bg-1));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--sp-12);
    position: relative;
    overflow: hidden;
}
.auth-aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(0,240,255,0.25), transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(255,45,146,0.25), transparent 50%);
    animation: aside-pulse 6s ease-in-out infinite alternate;
}
@keyframes aside-pulse {
    from { transform: scale(1); }
    to { transform: scale(1.15); }
}
.auth-aside img {
    width: 280px; height: auto;
    filter: drop-shadow(0 24px 60px rgba(0,240,255,0.5));
    animation: aside-float 4s ease-in-out infinite;
    position: relative; z-index: 1;
}
@keyframes aside-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
}
.auth-aside h2 {
    color: var(--c-text-0);
    margin-top: var(--sp-6);
    position: relative; z-index: 1;
    text-align: center;
    font-size: var(--fs-xl);
}
.auth-aside p {
    color: var(--c-text-2);
    margin-top: var(--sp-3);
    text-align: center;
    max-width: 360px;
    position: relative; z-index: 1;
}

.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4);
}
.auth-card {
    width: 100%;
    max-width: 460px;
}
.auth-card h1 {
    font-size: var(--fs-2xl);
    background: var(--grad-neon);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: var(--sp-2);
}
.auth-card .subtitle {
    color: var(--c-text-2);
    margin-bottom: var(--sp-8);
}
.auth-form .field { margin-bottom: var(--sp-5); }
.auth-form > .field > label {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.auth-form .input-icon { position: relative; }
.auth-form .input-icon i {
    position: absolute;
    left: var(--sp-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--c-text-3);
}
.auth-form .input-icon .input {
    padding-left: calc(var(--sp-4) * 2 + 16px);
}
.auth-form .btn-submit {
    width: 100%;
    margin-top: var(--sp-6);
    font-size: var(--fs-lg);
}
.auth-meta {
    text-align: center;
    margin-top: var(--sp-6);
    color: var(--c-text-2);
    font-size: var(--fs-sm);
}
.auth-error {
    background: rgba(255,59,48,0.12);
    border: 1px solid rgba(255,59,48,0.4);
    color: var(--c-danger);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-sm);
    display: none;
}
.auth-error.show { display: block; }

/* Age group selection */
.age-group-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
}
@media (max-width: 540px) { .age-group-grid { grid-template-columns: 1fr; } }
.age-option { cursor: pointer; }
.age-option input { display: none; }
.age-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--sp-4) var(--sp-2);
    border-radius: var(--r-md);
    border: 1.5px solid rgba(255,255,255,0.1);
    background: rgba(10,14,39,0.5);
    transition: all var(--dur-norm) var(--ease-spring);
}
.age-emoji {
    font-size: 36px;
    margin-bottom: var(--sp-2);
    transition: transform var(--dur-norm);
}
.age-title {
    font-weight: var(--fw-bold);
    color: var(--c-text-0);
    font-size: var(--fs-sm);
}
.age-desc {
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    margin-top: 4px;
}
.age-option input:checked + .age-card {
    border-color: var(--c-neon-cyan);
    box-shadow: var(--glow-cyan);
    background: rgba(0,240,255,0.08);
}
.age-option input:checked + .age-card .age-emoji {
    transform: scale(1.2);
}
.age-option:hover .age-card {
    transform: translateY(-2px);
}