/* صفحه‌های ورود و ثبت‌نام - هماهنگ با تم صفحه‌ی اصلی سایت (فیروزه‌ای نئونی روی زمینه‌ی تیره) */
.auth-body {
    --bg: #01121b; --panel: rgba(1, 28, 38, .72); --panel-2: rgba(1, 37, 45, .7); --line: rgba(34, 230, 214, .28);
    --text: #fff; --muted: #9fc2c8; --teal: #22e6d6; --teal-2: #19c7d6; --red: #ff6b85;
    min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--text); font-size: 13px; line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(900px 520px at 105% -4%, rgba(0, 120, 130, .55), transparent 62%),
        radial-gradient(700px 420px at 50% 62%, rgba(2, 52, 73, .55), transparent 70%),
        linear-gradient(180deg, #010e14 0%, #01202d 55%, #011c2a 100%);
    background-attachment: fixed;
}
html:has(.auth-body) { background: #01121b; color-scheme: dark; }

.auth-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 16px; }

/* لوگو مثل صفحه‌ی اصلی */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-dot { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, #1ff0d2 0%, #16a9f5 100%); box-shadow: 0 6px 24px rgba(22, 200, 235, .35); }
.brand-name { font-family: "Outfit", sans-serif; font-size: 28px; font-weight: 500; letter-spacing: .01em; color: #eaf6fa; line-height: 1; }

/* کارت نئونی مثل پنل‌های صفحه‌ی اصلی */
.auth-card {
    width: 100%; max-width: 440px; padding: 24px 24px 22px;
    border: 1.5px solid rgba(34, 230, 214, .7); border-radius: 26px; background: var(--panel);
    box-shadow: 0 0 24px rgba(34, 230, 214, .22), inset 0 0 20px rgba(34, 230, 214, .08);
}
.auth-card-wide { max-width: 640px; }
.auth-back { color: var(--muted); font-size: 12px; }
.auth-back:hover { color: var(--teal); }

.eyebrow { color: var(--teal); font-size: 12px; font-weight: 800; }
h1 { margin: 2px 0 4px; font-size: 24px; font-weight: 800; line-height: 1.5; }
.description { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.9; }

.field { margin-bottom: 12px; min-width: 0; }
label, .field-label { display: block; margin-bottom: 5px; color: #d9f4f6; font-size: 12px; font-weight: 700; }
.input {
    width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px;
    outline: 0; background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(34, 230, 214, .18); }
.input::placeholder { color: #5b8189; }
.input:disabled, .input[readonly] { opacity: .7; cursor: not-allowed; }
.input:-webkit-autofill { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 40px #022b36 inset; caret-color: var(--text); }
.input-phone { direction: ltr; text-align: left; letter-spacing: 1px; }
select.input {
    appearance: none; padding-inline-end: 38px; margin-bottom: 12px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322e6d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 14px center;
}
.field select.input { margin-bottom: 0; }
select.input option { background: #022b36; color: var(--text); }

.btn {
    display: flex; justify-content: center; align-items: center; width: 100%; min-height: 48px; margin-top: 16px;
    border: 0; border-radius: 999px; color: #052a34; background: linear-gradient(90deg, #16e3cf 0%, #3df3db 50%, #16e3cf 100%);
    font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 34px rgba(34, 230, 214, .28); transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(34, 230, 214, .42); }
.btn:focus-visible, .auth-back:focus-visible, a:focus-visible { outline: 3px solid rgba(34, 230, 214, .6); outline-offset: 3px; }

.error, .input-error { margin: -8px 0 10px; color: var(--red); font-size: 11px; }
.field .error { margin: 4px 0 0; }
.message { margin-bottom: 12px; padding: 9px 12px; border: 1px solid rgba(34, 230, 214, .4); border-radius: 12px; background: rgba(34, 230, 214, .08); color: #7ceed8; font-size: 12px; }
.message-error { border-color: rgba(255, 107, 133, .45); background: rgba(255, 107, 133, .08); color: #ff9aae; }

.form-footer { margin-top: 16px; text-align: center; color: var(--muted); font-size: 12px; }
.form-footer a, .password-row a { color: var(--teal); font-weight: 700; }
.form-footer a:hover, .password-row a:hover { text-decoration: underline; }
.terms { margin: 12px 0 0; color: #7ea3aa; font-size: 11px; line-height: 2; text-align: center; }

.password-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.password-row label { margin-bottom: 5px; }
.password-row a { font-size: 11px; }
.remember { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.remember input { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }

.role-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-option { position: relative; margin: 0; }
.role-option input { position: absolute; opacity: 0; }
.role-option span { display: block; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); text-align: center; font-weight: 700; cursor: pointer; }
.role-option input:checked + span { border-color: var(--teal); background: rgba(34, 230, 214, .12); color: var(--teal); }

/* دکمه‌ی نمایش رمز (به‌جای دکمه‌ی پیش‌فرض مرورگر که در این طرح بیرون از فیلد می‌افتاد) */
.input-wrap { position: relative; }
.input.has-toggle { padding-inline-end: 14px; padding-inline-start: 44px; }
.pw-toggle {
    position: absolute; top: 50%; left: 8px; transform: translateY(-50%); display: grid; place-items: center;
    width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer;
}
.pw-toggle:hover { color: var(--teal); background: rgba(34, 230, 214, .1); }
.pw-toggle .eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .eye-on { display: none; }
.pw-toggle[aria-pressed="true"] .eye-off { display: block; }
input::-ms-reveal, input::-ms-clear { display: none; }
input::-webkit-credentials-auto-fill-button { visibility: hidden; pointer-events: none; }

/* فرم دو ستونه: همه‌ی فیلدها در یک صفحه و بدون اسکرول */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* صفحه‌های کوتاه (موبایل افقی یا لپ‌تاپ کوچک): فشرده‌تر */
@media (max-height: 760px) {
    .auth-page { gap: 8px; padding: 10px 14px; }
    .brand-dot { width: 28px; height: 28px; } .brand-name { font-size: 22px; }
    .auth-card { padding: 16px 18px 16px; border-radius: 22px; }
    .description { display: none; }
    h1 { font-size: 20px; margin-bottom: 8px; }
    .field { margin-bottom: 8px; }
    label, .field-label { margin-bottom: 3px; font-size: 11px; }
    .input { min-height: 38px; padding: 5px 12px; font-size: 12px; border-radius: 12px; }
    .btn { min-height: 44px; margin-top: 10px; }
    .auth-back { font-size: 11px; }
}
@media (max-width: 480px) {
    .auth-card { padding: 16px 14px; border-radius: 22px; }
    .form-grid { gap: 0 8px; }
    h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }