html body.dh-auth{ --primary-color: var(--dh-brand); --secondary-color: #be185d; --bg-color: var(--dh-bg); --card-bg: var(--dh-surface); --text-color: var(--dh-text); --text-muted: var(--dh-muted); --border-color: var(--dh-border); --shadow: var(--dh-shadow); --shadow-hover: var(--dh-shadow); --radius: 24px; --input-bg: var(--dh-surface); --toggle-bg: var(--dh-surface); --toggle-icon: #a74d08; background: var(--dh-bg); color: var(--dh-text); font-family: var(--dh-font, 'Vazirmatn', 'Vazir', Tahoma, sans-serif); min-height: 100vh; display: grid; place-items: center; margin: 0; padding: clamp(1rem, 3vw, 2.25rem); position: relative; transition: background-color .25s ease, color .25s ease} html body.dh-auth::before{ content: ''; position: fixed; inset: 0; background: radial-gradient(600px 300px at 85% 0%, var(--dh-brand-soft), transparent 70%), radial-gradient(500px 260px at 10% 100%, var(--dh-brand-soft), transparent 72%); pointer-events: none; z-index: 0} html body.dh-auth.dark-mode, html.dark-mode body.dh-auth, html[data-theme="dark"] body.dh-auth{ --toggle-bg: var(--dh-surface-2); --toggle-icon: #fbbf24} body.dh-auth .auth-wrap{ position: relative; z-index: 1; width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden} body.dh-auth .auth-aside{ position: relative; isolation: isolate; background: var(--dh-hero); color: #fff; padding: clamp(1.6rem, 4vw, 2.75rem); display: flex; flex-direction: column; gap: 1rem; justify-content: center} body.dh-auth .auth-aside::before{ content: ''; position: absolute; inset: 0; background-image: var(--dh-pattern); background-size: var(--dh-pattern-size); opacity: .5; z-index: -1} body.dh-auth .auth-aside__brand{ display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: #fff; text-decoration: none; font-size: 1.05rem} body.dh-auth .auth-aside__brand i{ width: 42px; height: 42px; border-radius: 13px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .18)} body.dh-auth .auth-aside h2{ color: #fff; font-size: clamp(1.15rem, 3vw, 1.5rem); margin: .5rem 0 0; line-height: 1.7} body.dh-auth .auth-aside p{ color: rgba(255, 255, 255, .93); margin: 0} body.dh-auth .auth-benefits{ list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .55rem} body.dh-auth .auth-benefits li{ display: flex; gap: .5rem; align-items: flex-start; color: rgba(255, 255, 255, .95); font-size: .92rem} body.dh-auth .auth-benefits i{ margin-top: .55rem; color: #fff} body.dh-auth .login-container, body.dh-auth .login-box, body.dh-auth.dh-register .auth-wrap{ max-width: 1040px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr)} body.dh-auth .register-container{ padding: clamp(1.5rem, 4vw, 2.75rem); display: flex; flex-direction: column; justify-content: center; min-width: 0} body.dh-auth .logo-area{ text-align: center; margin-bottom: 1.35rem} body.dh-auth .logo-area i{ display: inline-grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; font-size: 1.4rem; background-image: var(--dh-kpi-1); color: #fff; margin-bottom: .8rem; box-shadow: var(--dh-shadow-soft)} body.dh-auth .logo-area h1{ font-size: 1.3rem; font-weight: 800; color: var(--text-color); margin: 0} body.dh-auth .logo-area p{ color: var(--text-muted); margin: .4rem 0 0; font-size: .9rem} body.dh-auth .form-group{ position: relative; margin-bottom: .95rem} body.dh-auth .form-control, body.dh-auth input[type="text"], body.dh-auth input[type="password"], body.dh-auth input[type="email"], body.dh-auth input[type="file"], body.dh-auth textarea, body.dh-auth select{ width: 100%; background: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 12px; padding: .7rem 2.6rem .7rem .9rem; font-family: inherit; font-size: .95rem; line-height: 1.8; box-sizing: border-box} body.dh-auth textarea{ padding-inline-start: .9rem; resize: vertical} body.dh-auth input[type="file"]{ padding-inline-start: .9rem} body.dh-auth .form-control::placeholder{ color: var(--text-muted)} body.dh-auth .form-control:focus, body.dh-auth input:focus, body.dh-auth textarea:focus, body.dh-auth select:focus{ border-color: var(--primary-color); box-shadow: 0 0 0 .2rem var(--dh-brand-ring); outline: 0} body.dh-auth .form-icon{ position: absolute; top: 50%; inset-inline-end: .95rem; transform: translateY(-50%); color: var(--text-muted); pointer-events: none} body.dh-auth .checkbox-wrapper{ display: flex; align-items: center; gap: .5rem; margin: .35rem 0 1rem; font-size: .9rem; color: var(--text-color)} body.dh-auth .checkbox-wrapper input[type="checkbox"]{ width: 1.1rem; height: 1.1rem; accent-color: var(--primary-color)} body.dh-auth .checkbox-wrapper label{ margin: 0; cursor: pointer} body.dh-auth .btn{ border: 0; border-radius: 12px; padding: .75rem 1.1rem; font-family: inherit; font-weight: 700; font-size: .98rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-decoration: none; transition: filter .16s ease, background-color .16s ease, color .16s ease} body.dh-auth .btn-primary{ width: 100%; background-image: var(--dh-hero); background-color: var(--primary-color); color: #fff} body.dh-auth .btn-primary:hover, body.dh-auth .btn-primary:focus{ filter: brightness(1.07); color: #fff} body.dh-auth .btn-secondary, body.dh-auth .btn-info{ background: var(--dh-surface-2); color: var(--text-color); border: 1px solid var(--border-color)} body.dh-auth .btn-secondary:hover, body.dh-auth .btn-info:hover{ background: var(--dh-brand-soft); color: var(--dh-link-2)} body.dh-auth .btn-block{ width: 100%} body.dh-auth .alert{ border: 0; border-radius: 12px; padding: .75rem .95rem; font-size: .9rem; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem} body.dh-auth .alert-success{ background: rgba(21, 128, 61, .14); color: var(--dh-success-text)} body.dh-auth .alert-danger{ background: rgba(185, 28, 28, .12); color: var(--dh-danger-text)} body.dh-auth .alert-info{ background: var(--dh-brand-soft); color: var(--dh-link-2)} body.dh-auth .divider{ display: flex; align-items: center; gap: .75rem; color: var(--text-muted); font-size: .82rem; margin: 1.25rem 0} body.dh-auth .divider::before, body.dh-auth .divider::after{ content: ''; height: 1px; background: var(--border-color); flex: 1} body.dh-auth .links{ margin-top: 1rem; text-align: center; font-size: .88rem} body.dh-auth .links a{ color: var(--dh-link); text-decoration: none; display: block; margin-top: .45rem} body.dh-auth .links a:hover{ text-decoration: underline} body.dh-auth .auth-foot{ margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-color); display: grid; grid-template-columns: 1fr 1fr; gap: .6rem} body.dh-auth .auth-hint{ background: var(--dh-surface-2); border: 1px solid var(--border-color); border-radius: 12px; padding: .7rem .9rem; color: var(--text-muted); font-size: .82rem; line-height: 1.9; margin-bottom: 1rem} body.dh-auth .theme-toggle{ position: fixed; top: 1rem; inset-inline-start: 1rem; width: 46px; height: 46px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--toggle-bg); color: var(--toggle-icon); display: grid; place-items: center; cursor: pointer; z-index: 5; box-shadow: var(--shadow); transition: transform .16s ease, background-color .16s ease} body.dh-auth .theme-toggle:hover{ transform: translateY(-2px)} body.dh-auth .theme-toggle i{ font-size: 1.05rem} @media (max-width: 899.98px){ body.dh-auth .auth-wrap, body.dh-auth.dh-register .auth-wrap{ grid-template-columns: 1fr; max-width: 520px} body.dh-auth .auth-aside{ padding: 1.35rem 1.5rem} body.dh-auth .auth-aside h2{ font-size: 1.05rem} body.dh-auth .auth-benefits{ display: none}} @media (max-width: 575.98px){ body.dh-auth{ padding: .75rem} body.dh-auth .auth-wrap{ border-radius: 18px} body.dh-auth .login-container{ padding: 1.35rem} body.dh-auth .logo-area i{ width: 50px; height: 50px}} body.dh-auth .dh-hp{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px} body.dh-auth .dh-human-check{ display: flex; align-items: center; gap: .5rem; margin: .9rem 0 1.1rem; padding: .65rem .8rem; border: 1px solid var(--border-color); border-radius: 12px; background: var(--dh-surface-2); font-size: .9rem; color: var(--text-color)} body.dh-auth .dh-human-check input[type="checkbox"]{ width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--primary-color); flex: 0 0 auto} body.dh-auth .dh-human-check label{ margin: 0; cursor: pointer; line-height: 1.6} body.dh-auth .dh-human-check input[type="checkbox"]:focus-visible{ outline: 2px solid var(--primary-color); outline-offset: 2px}