@font-face { font-family: VazirAuth; src: url('/font/vazir/Vazir.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: VazirAuth; src: url('/font/vazir/Vazir-Medium.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: VazirAuth; src: url('/font/vazir/Vazir-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root { color-scheme: light; --auth-ink: #29223e; --auth-muted: #786787; --auth-brand: #794bce; --auth-brand-hover: #6236b2; --auth-line: #e2d7ef; --auth-bg: #f3f1fa; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 30px;
    font: 14px/1.75 VazirAuth, Tahoma, sans-serif;
    color: var(--auth-ink);
    background:
        radial-gradient(ellipse at 84% 2%, #d8c6ff9c, transparent 56%),
        radial-gradient(ellipse at 0% 35%, #f8d9e975, transparent 48%),
        radial-gradient(ellipse at 70% 100%, #d3eeea60, transparent 55%), var(--auth-bg);
    background-attachment: fixed;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--auth-brand); }
:focus-visible { outline: 3px solid #9562d5; outline-offset: 3px; }
.auth-shell {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    width: min(940px, 100%);
    border: 1px solid #fffffff0;
    border-radius: 30px;
    background: #ffffffad;
    box-shadow: 0 22px 75px #65418c14, inset 0 1px #fff;
}
.auth-intro { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 32px; border-radius: 29px; background: linear-gradient(145deg, #aa83ec, #8054d7); color: #fff; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; font-size: 1.05rem; font-weight: 700; }
.auth-brand-mark { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border: 1px solid #ffffffe0; border-radius: 15px; background: #ffffffde; box-shadow: 0 4px 16px #61408c12; }
.auth-brand-mark img { display: block; max-width: 32px; max-height: 32px; object-fit: contain; }
.auth-intro-content { position: relative; z-index: 1; margin-top: 55px; }
.auth-audience { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; border: 1px solid #ffffff55; border-radius: 30px; background: #ffffff19; color: #fff; font-size: .8rem; font-weight: 600; }
.auth-intro-content p { max-width: 270px; margin: 15px 0 0; font-size: 1.35rem; line-height: 1.9; font-weight: 700; }
.auth-intro-rule { display: none; }
.auth-form-panel { display: grid; place-items: center; min-width: 0; padding: 32px clamp(25px, 4vw, 55px); }
.auth-form-wrap { width: min(360px, 100%); }
.auth-back { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-bottom: 15px; color: #82669e; font-size: .78rem; text-decoration: none; }
.auth-back i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #eee5fa; color: #8553c5; }
.auth-form-wrap h1 { margin: 0 0 23px; font-size: 1.4rem; line-height: 1.6; font-weight: 700; }
.auth-form { display: grid; gap: 16px; }
.auth-field { display: grid; gap: 7px; min-width: 0; }
.auth-field label { font-size: .84rem; font-weight: 600; }
.auth-field input,
.auth-field select { display: block; width: 100%; min-width: 0; height: 48px; padding: 10px 13px; border: 1px solid var(--auth-line); border-radius: 14px; background: #ffffffd9; color: var(--auth-ink); transition: border-color .15s, box-shadow .15s; }
.auth-field input:hover { border-color: #c9afe3; }
.auth-field input:focus,
.auth-field select:focus { border-color: #aa84d4; box-shadow: 0 0 0 3px #a075ef20; outline: 0; }
.auth-field input.is-invalid { border-color: #c64c70; }
.auth-password { position: relative; }
.auth-password input { padding-left: 80px; }
.auth-password-toggle { position: absolute; inset-inline-end: 7px; top: 5px; min-width: 64px; height: 38px; padding: 0 9px; border: 0; border-radius: 10px; background: #f0e8fb; color: #7d54aa; font-size: .77rem; font-weight: 600; }
.auth-password-toggle:hover { background: #e7daf8; }
.auth-captcha-row { display: flex; align-items: center; gap: 8px; }
.auth-captcha { display: flex; align-items: center; justify-content: center; min-height: 63px; overflow: hidden; border: 1px solid var(--auth-line); border-radius: 14px; background: #fff; }
.auth-captcha-row .auth-captcha { flex: 1; min-width: 0; }
.auth-captcha img { display: block; max-width: 100%; max-height: 64px; object-fit: contain; }
.auth-captcha-refresh { flex: none; min-height: 44px; padding: 7px 10px; border: 1px solid #e3d7ef; border-radius: 12px; background: #faf7ff; color: #7d54aa; font-size: .77rem; font-weight: 600; }
.auth-captcha-refresh:hover { background: #eee5fa; }
.auth-captcha-refresh:disabled { opacity: .65; cursor: wait; }
.auth-field-error { font-size: .78rem; color: #ac3459; }
.auth-feedback { padding: 10px 12px; border: 1px solid #efcfda; border-radius: 13px; background: #fff3f7; color: #a23456; font-size: .82rem; }
.auth-submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 49px; margin-top: 5px; padding: 11px 16px; border: 0; border-radius: 15px; background: linear-gradient(135deg, #a075ef, #7549dc); color: #fff; box-shadow: 0 6px 18px #9363db25; font-weight: 700; }
.auth-submit:hover { background: var(--auth-brand); }
.auth-submit:active { transform: translateY(1px); }
.auth-submit:disabled { opacity: .66; cursor: wait; }
.auth-forgot { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; font-size: .79rem; text-decoration: none; }
.auth-forgot:hover { text-decoration: underline; }
.auth-help { margin: 0 0 5px; color: var(--auth-muted); font-size: .81rem; }
.auth-change-identity { display: inline-flex; min-height: 40px; align-items: center; font-size: .8rem; }
.learning-art { position: relative; isolation: isolate; width: 300px; height: 255px; margin-inline: auto; pointer-events: none; }
.learning-art-orbit { position: absolute; inset: 15px 15px 5px; border: 1px solid #ffffff9c; border-radius: 50%; transform: rotate(-25deg); box-shadow: 0 0 0 18px #ffffff12, 0 0 0 40px #ffffff08; }
.learning-art-book { position: absolute; top: 55px; right: 48px; display: grid; place-items: center; width: 155px; height: 155px; border: 1px solid #fffffff0; border-radius: 39px; color: #8a5cd1; background: linear-gradient(140deg, #fff, #f2e7ffb3); box-shadow: 15px 20px 40px #66429f2b, inset 0 2px #fff; transform: rotate(-13deg); font-size: 4.5rem; }
.learning-art-note { position: absolute; top: 15px; left: 12px; display: flex; flex-direction: column; gap: 9px; width: 89px; height: 110px; padding: 17px; border: 1px solid #ffffffce; border-radius: 23px; background: #ffffffad; color: #8b6ab4; box-shadow: 0 10px 28px #69468c12; transform: rotate(12deg); font-size: 1.2rem; }
.learning-art-note span { width: 100%; height: 5px; border-radius: 8px; background: #c7b1e785; }
.learning-art-note span:last-child { width: 65%; }
.learning-art-check { position: absolute; bottom: 4px; left: 30px; display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid #fffffff0; border-radius: 20px; background: linear-gradient(145deg, #edfff4, #d4efdf); color: #62a17c; box-shadow: 0 10px 25px #51337312; transform: rotate(9deg); font-size: 1.7rem; }
.learning-art-spark { position: absolute; top: 15px; right: 30px; color: #f6edc9; font-size: 2.4rem; }
.auth-intro .learning-art { margin-block: auto; max-width: 100%; }
@media (max-width: 700px) {
    body { padding: 16px; }
    .auth-shell { grid-template-columns: 1fr; max-width: 470px; border-radius: 27px; }
    .auth-intro { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-height: 90px; padding: 17px 21px; border-radius: 26px; }
    .auth-intro-content { margin: 0; }
    .auth-intro-content p,
    .auth-intro .learning-art { display: none; }
    .auth-form-panel { padding: 18px 26px 25px; }
    .auth-form-wrap h1 { font-size: 1.3rem; margin-bottom: 19px; }
    .auth-back { margin-bottom: 10px; }
    .auth-field input,
    .auth-field select { font-size: 16px; }
}
@media (max-width: 390px) {
    body { padding: 12px; }
    .auth-intro { padding: 16px; }
    .auth-brand { font-size: .9rem; gap: 8px; }
    .auth-brand-mark { width: 40px; height: 40px; }
    .auth-audience { padding-inline: 8px; font-size: .73rem; }
    .auth-form-panel { padding: 15px 19px 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }