/* ==== Auth (Login & Register) ==== */
.auth-section {
    padding-top: 24px;
}
/* فاصله‌ی کم از منو */
.auth-center {
    min-height: auto; /* دیگر وسط عمودی نشود */
    display: flex;
    justify-content: center; /* وسطِ افقی بماند */
    align-items: flex-start; /* بچسبد به بالا */
    padding-top: 12px; /* کمی فاصله امن */
}

.auth-wrap {
    width: min(960px, 100%);
}

/* ===== Phosphor animated border ===== */

/* دکمه‌ها همان قبلی */
.btn-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    border: none;
    font-weight: 900;
    color: #061321;
    background: linear-gradient(135deg,#1e90ff,#06c6d4);
    box-shadow: 0 10px 24px rgba(6,198,212,.25);
    transition: transform .2s ease, filter .2s ease;
    position: relative;
    overflow: hidden
}

    .btn-glow:hover {
        filter: brightness(1.06);
        transform: translateY(-2px)
    }

    .btn-glow:active {
        transform: translateY(0) scale(.98)
    }

.form-inner {
    background: #0b1430;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}

label.form-label {
    font-weight: 800;
    margin-bottom: .35rem
}

.form-ghost {
    background: #0b1430;
    border: 1px solid var(--border);
    color: #eaf3ff
}

    .form-ghost:focus {
        border-color: #5e78b8;
        box-shadow: 0 0 0 .2rem rgba(30,144,255,.15)
    }

select.form-ghost {
    background: #0b1430;
    color: #eaf3ff
}

.btn-glow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .7rem 1.2rem;
    border-radius: 999px;
    border: none;
    font-weight: 900;
    color: #061321;
    background: linear-gradient(135deg,#1e90ff,#06c6d4);
    box-shadow: 0 10px 24px rgba(6,198,212,.25);
    transition: transform .2s ease, filter .2s ease;
    position: relative;
    overflow: hidden;
}

    .btn-glow:hover {
        filter: brightness(1.06);
        transform: translateY(-2px)
    }

    .btn-glow:active {
        transform: translateY(0) scale(.98)
    }

.error-banner {
    display: none;
    margin: 0 0 12px 0;
    padding: .6rem .9rem;
    border-radius: 12px;
    border: 1px solid #8a2f3f;
    background: rgba(255,80,100,.08);
    color: #ffdce1;
    font-weight: 800
}

    .error-banner.show {
        display: block
    }

/* captcha chip */
.captcha-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--border);
    color: #cfe3ff;
    font-weight: 800;
    white-space: nowrap
}


/* متغیر قابل‌انیمیت برای زاویه */
@property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes spin360 {
    to {
        --angle: 360deg;
    }
}

/* حلقه فسفری بدون pseudo-element */
.auth-card {
    --b: 3px; /* ضخامت حلقه (۶ تا 10 خوبه) */
    position: relative;
    border: var(--b) solid transparent;
    border-radius: 22px;
    /* دو بک‌گراند: 1) داخل، 2) حلقه‌ی دور */
    background: linear-gradient(180deg,#0f1730,#111b35) padding-box, conic-gradient(from var(--angle) at 50% 50%, #00f5ff, #28dcff, #0099ff, #2f6fff, #00f5ff) border-box;
    animation: spin360 8s linear infinite; /* اگر خواستی کندتر: 10s */
    box-shadow: 0 0 24px rgba(0,229,255,.20); /* هاله بیرونی نرم */
}

/* محتوای داخلی */
.auth-body {
    border-radius: calc(22px - var(--b));
    padding: 18px;
    background: transparent; /* داخل را form-inner می‌پوشاند */
    border: 1px solid rgba(120,168,255,.25); /* خط داخلی ظریف */
}