@font-face {
    font-family: 'IRANSansX';
    src: url('/Content/fonts/IRANSansWeb(FaNum).ttf') format('truetype');
    font-weight: 100 900;
    font-display: swap;
}
:root {
    --brand-500: #14b8a6;
    --brand-600: #0d9488;
    --brand-700: #0f766e;
    --brand-800: #115e59;
    --ink-900: #0b1a1f;
    --ink-700: #2f4750;
    --ink-500: #6c828c;
    --ink-400: #93a6ae;
    --line: #e4efec;
    --err: #d64545;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'IRANSansX', 'Segoe UI', Tahoma, Arial, sans-serif;
    direction: rtl;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(900px 460px at 90% -10%, #ccfbf1, transparent 60%),
        radial-gradient(700px 420px at 5% 110%, #e8f0ff, transparent 55%),
        linear-gradient(180deg, #f4faf9, #fff);
    color: var(--ink-700);
    padding: 24px;
    -webkit-font-smoothing: antialiased;
}
.auth-card {
    width: 100%; max-width: 420px;
    background: #fff; border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 30px 70px -24px rgba(13,148,136,.28);
    padding: 36px 32px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 26px; }
.auth-brand .mark {
    width: 46px; height: 46px; border-radius: 14px;
    background: linear-gradient(150deg, var(--brand-500), var(--brand-800));
    display: flex; align-items: center; justify-content: center; color: #fff;
    box-shadow: 0 12px 26px -12px rgba(13,148,136,.75);
}
.auth-brand b { font-size: 18px; font-weight: 800; color: var(--ink-900); }
.auth-brand small { display: block; font-size: 11px; color: var(--ink-400); font-weight: 500; }
.auth-title { font-size: 20px; font-weight: 800; color: var(--ink-900); text-align: center; }
.auth-sub { font-size: 13px; color: var(--ink-500); text-align: center; margin: 6px 0 26px; }
.auth-sub b { color: var(--ink-900); font-variant-numeric: tabular-nums; }

.fld { margin-bottom: 16px; }
.fld label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-700); margin-bottom: 7px; }
.fld input {
    width: 100%; height: 50px;
    border: 1.5px solid var(--line); border-radius: 12px;
    background: #f8fbfa; padding: 0 16px;
    font-family: inherit; font-size: 16px; color: var(--ink-900);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.fld input:focus { outline: none; border-color: var(--brand-500); background: #fff; box-shadow: 0 0 0 4px rgba(20,184,166,.16); }
.fld input.otp { text-align: center; letter-spacing: 12px; font-weight: 800; font-size: 22px; }
.fld input[dir="ltr"] { direction: ltr; text-align: right; }

.btn {
    width: 100%; height: 50px; border: none; border-radius: 12px;
    background: var(--brand-700); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 16px 34px -16px rgba(15,118,110,.8);
    transition: background .15s, transform .12s;
}
.btn:hover { background: var(--brand-800); }
.btn:active { transform: translateY(1px); }

.auth-err {
    background: #fdecec; border: 1px solid #f4caca; border-right: 3px solid var(--err);
    color: #8f2828; font-size: 12.5px; border-radius: 10px; padding: 10px 13px; margin-bottom: 16px;
}
.auth-note {
    background: #eefaf7; border: 1px dashed #a7e8de; color: #0c5c48;
    font-size: 12.5px; border-radius: 10px; padding: 10px 13px; margin-bottom: 16px; text-align: center;
}
.auth-note b { font-size: 16px; letter-spacing: 3px; }

.auth-foot { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--ink-400); }
.auth-foot a { color: var(--brand-700); font-weight: 700; text-decoration: none; }
.auth-foot form { display: inline; }
.auth-foot button.link {
    background: none; border: none; color: var(--brand-700); font-family: inherit;
    font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 0;
}
.back-home { margin-top: 22px; text-align: center; }
.back-home a { color: var(--ink-400); font-size: 12.5px; text-decoration: none; }
.back-home a:hover { color: var(--brand-700); }
.field-validation-error, .text-danger { color: var(--err); font-size: 11.5px; display: block; margin-top: 5px; }