:root { --ink:#12154e; --muted:#747a9c; --purple:#6654f4; --purple-dark:#4f3de3; --line:#e3e5f3; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; font-family:"Bon",Tahoma,sans-serif; color:var(--ink); background:#f8f9ff; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.auth-page { min-height:100vh; overflow-x:hidden; }
.auth-shell { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; direction:ltr; background:linear-gradient(135deg,#f7f8ff,#fff); }
.auth-visual,.auth-form-side { position:relative; min-width:0; direction:rtl; }
.auth-visual { min-height:100vh; overflow:hidden; border-right:1px solid #e8e9f5; background:radial-gradient(circle at 48% 44%,rgba(255,255,255,.95) 0 18%,transparent 42%),radial-gradient(circle at 7% 16%,#dcdfff 0 2%,transparent 2.3%),radial-gradient(circle at 90% 72%,#d9ddff 0 1.7%,transparent 2%),linear-gradient(145deg,#eef1ff 0%,#f9faff 48%,#e8eaff 100%); }
.auth-visual::before,.auth-visual::after { content:""; position:absolute; width:760px; height:240px; left:-80px; border:2px solid rgba(123,111,242,.13); border-radius:50%; transform:rotate(-11deg); }
.auth-visual::before { top:20%; }.auth-visual::after { top:29%; width:690px; opacity:.6; }
.visual-note { position:absolute; z-index:4; top:9%; left:9%; width:185px; margin:0; color:#3027a2; font-size:20px; font-weight:800; line-height:1.7; transform:rotate(-7deg); }
.visual-note::after { content:"↶"; display:inline-block; margin-right:10px; font-size:42px; transform:rotate(-20deg); }
.visual-sphere { position:absolute; z-index:2; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#bcb5ff 35%,#7564f2 72%); box-shadow:0 12px 26px rgba(75,57,186,.17); }
.sphere-one { width:34px;height:34px;left:4%;top:18%; }.sphere-two { width:48px;height:48px;left:46%;top:11%; }
.robot-halo { position:absolute; z-index:1; width:510px; height:380px; left:50%; top:47%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,#fff 0 21%,#e8e8ff 22% 48%,transparent 49%),repeating-radial-gradient(circle,transparent 0 54px,rgba(109,93,239,.16) 55px 57px); }
.auth-robot { position:absolute; z-index:3; width:min(57vw,520px); max-width:68%; left:50%; top:48%; transform:translate(-50%,-50%); filter:drop-shadow(0 25px 22px rgba(55,43,142,.18)); }
.auth-social { position:absolute; z-index:5; width:78px; filter:drop-shadow(0 14px 16px rgba(42,32,120,.17)); animation:auth-float 4s ease-in-out infinite; }
.auth-instagram { left:34%;top:18%; }.auth-telegram { left:64%;top:23%;animation-delay:-.8s }.auth-youtube { left:73%;top:38%;animation-delay:-1.5s }.auth-x { left:67%;top:50%;animation-delay:-2.2s }
.security-badge,.security-shield { position:absolute; z-index:5; display:grid; place-items:center; color:white; filter:drop-shadow(0 14px 16px rgba(42,32,120,.17)); }
.security-badge { left:68%;top:34%;width:90px;height:90px;border-radius:24px;background:linear-gradient(135deg,#8c7bff,#5b48ee);font-size:48px;transform:rotate(-8deg); }
.security-shield { left:64%;top:51%;width:120px;height:130px;border-radius:44% 44% 52% 52%;background:linear-gradient(145deg,#7966ff,#4935d0);border:8px solid #a79bff; }
.security-shield i { position:relative;width:42px;height:35px;border:4px solid white;border-radius:8px; }
.security-shield i::before { content:"";position:absolute;width:23px;height:23px;border:4px solid white;border-bottom:0;border-radius:16px 16px 0 0;left:5px;top:-23px; }
.security-shield i::after { content:"";position:absolute;width:5px;height:11px;border-radius:5px;background:white;left:15px;top:9px; }
.auth-benefits { position:absolute; z-index:7; inset:auto 6% 6% 6%; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:13px; border:1px solid rgba(255,255,255,.85); border-radius:20px; background:rgba(255,255,255,.67); box-shadow:0 16px 38px rgba(52,42,145,.08); backdrop-filter:blur(14px); }
.auth-benefits div { display:grid; grid-template-columns:45px 1fr; grid-template-rows:auto auto; gap:1px 10px; align-items:center; padding:7px; }
.auth-benefits div+div { border-right:1px solid #e4e5f2; }
.auth-benefits span { grid-row:1/3; width:45px;height:45px;display:grid;place-items:center;border-radius:13px;color:#5441e5;background:#efedff;font-size:20px; }
.auth-benefits strong { font-size:12px; }.auth-benefits small { color:var(--muted);font-size:9px; }
.auth-form-side { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:90px 7vw 60px; background:radial-gradient(circle at 25% 18%,#f0f1ff 0,transparent 25%),#fbfcff; }
.auth-toolbar { position:absolute; z-index:5; top:34px; inset-inline:8%; display:flex; justify-content:space-between; align-items:center; }
.auth-toolbar>div { display:flex;gap:10px;direction:ltr; }.auth-toolbar button,.auth-toolbar span,.back-link { min-height:42px;display:flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid #e3e4f1;border-radius:22px;background:rgba(255,255,255,.78);color:#30345e;font-size:12px;box-shadow:0 6px 18px rgba(42,37,110,.05); }
.auth-toolbar button { width:42px;padding:0;cursor:pointer; }.back-link { gap:8px; }
.auth-card { width:min(100%,520px); min-height:610px; display:flex; flex-direction:column; justify-content:center; padding:42px 48px; border:1px solid rgba(226,227,241,.9); border-radius:25px; background:rgba(255,255,255,.9); box-shadow:0 22px 70px rgba(55,45,140,.09); backdrop-filter:blur(12px); }
.auth-brand { display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:55px; }
.auth-brand>span:last-child { display:grid;gap:2px; }.auth-brand strong { font-size:18px;font-weight:900; }.auth-brand small { color:var(--muted);font-size:9px; }
.auth-brand-mark { position:relative;width:49px;height:42px;border:3px solid var(--purple);border-radius:14px;background:#f0efff;box-shadow:inset 0 0 0 3px white; }
.auth-brand-mark::before { content:"";position:absolute;width:3px;height:10px;background:var(--purple);top:-11px;left:20px; }.auth-brand-mark::after { content:"";position:absolute;width:15px;height:7px;border-bottom:2px solid var(--purple);border-radius:0 0 12px 12px;left:14px;bottom:7px; }
.auth-brand-mark i { position:absolute;width:5px;height:5px;border-radius:50%;background:var(--purple);top:13px; }.auth-brand-mark i:first-child{right:11px}.auth-brand-mark i:last-child{left:11px}
.auth-copy { text-align:center;margin-bottom:32px; }.auth-copy h1 { margin:0 0 10px;font-size:31px;line-height:1.4;font-weight:900; }.auth-copy p { margin:0;color:var(--muted);font-size:14px;line-height:2; }.auth-copy b { color:#555c84;letter-spacing:1px; }
.auth-form { display:grid;gap:10px; }.auth-form label { font-size:12px;font-weight:700; }
.phone-field { height:60px;display:flex;direction:ltr;border:1.5px solid #d8d9eb;border-radius:10px;background:#fff;overflow:hidden;transition:.2s; }.phone-field:focus-within{border-color:var(--purple);box-shadow:0 0 0 4px rgba(101,84,244,.11)}.phone-field.field-error{border-color:#dc3f5c}
.country-code { width:105px;display:flex;align-items:center;justify-content:center;gap:9px;border-right:1px solid #e6e7f1;color:#30345f; }.country-code i{font-style:normal;font-size:13px}
.iran-flag { position:relative;width:23px;height:16px;border-radius:2px;background:linear-gradient(to bottom,#239f40 0 33.33%,#fff 33.33% 66.66%,#da0000 66.66%);box-shadow:0 0 0 1px rgba(25,28,70,.08); }.iran-flag::after{content:"◆";position:absolute;inset:2px 0 auto;text-align:center;color:#da0000;font-size:8px;line-height:12px}
.phone-field input { min-width:0;flex:1;border:0;outline:0;padding:0 18px;color:var(--ink);font-size:15px;letter-spacing:.5px; }.phone-field input::placeholder{color:#8b90ab}
.auth-submit { position:relative; min-height:60px;display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px;border:0;border-radius:10px;color:#fff;background:linear-gradient(135deg,#7767ff,#5845e9);box-shadow:0 14px 28px rgba(91,72,231,.22);font-weight:800;cursor:pointer;transition:.2s; }.auth-submit:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(91,72,231,.3)}.auth-submit:disabled{opacity:.72;cursor:wait;transform:none}
.button-loader { display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite; }.is-loading .button-loader{display:block}.is-loading .button-label,.is-loading>span:not(.button-label){display:none}
.privacy-note { margin:25px 0 0;text-align:center;color:var(--muted);font-size:11px; }.privacy-note span{color:var(--purple);font-size:20px;vertical-align:middle;margin-left:6px}
.error-message { margin:0;color:#cf3150;font-size:11px;line-height:1.8; }.status-message { margin:-12px 0 18px;padding:10px;border-radius:8px;color:#137a62;background:#e9faf5;text-align:center;font-size:11px; }.centered-error{text-align:center}
.otp-form { gap:14px; }.otp-inputs { display:grid;grid-template-columns:repeat(6,1fr);gap:10px; }.otp-digit { width:100%;min-width:0;height:62px;border:1.5px solid #d9daeb;border-radius:9px;outline:0;text-align:center;color:var(--ink);font-size:23px;font-weight:700;transition:.2s; }.otp-digit:focus,.otp-digit.filled{border-color:var(--purple);box-shadow:0 0 0 3px rgba(101,84,244,.1)}
.otp-submit { margin-top:8px; }.resend-form { display:flex;align-items:center;justify-content:center;gap:9px;margin-top:21px;color:var(--muted);font-size:11px; }.resend-form button{min-height:34px;border:0;background:transparent;color:#5547dc;cursor:pointer}.resend-form button:disabled{color:#7f84a4;cursor:default}.change-phone{display:block;margin-top:10px;text-align:center;color:#5749df;font-size:11px}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.dashboard-page { min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(circle at 15% 20%,#dedaff,transparent 30%),linear-gradient(140deg,#f8f9ff,#eef2ff);font-family:"Bon",Tahoma,sans-serif; }.dashboard-card{width:min(100%,620px);padding:50px;text-align:center;border:1px solid #e0e1f0;border-radius:25px;background:#fff;box-shadow:0 25px 70px rgba(44,35,130,.12)}.dashboard-robot{font-size:70px}.dashboard-card h1{font-size:30px}.dashboard-card>p{color:var(--muted)}.dashboard-card .jalali-date{display:inline-block;padding:8px 15px;border-radius:30px;background:#efedff;color:#5143dd}.dashboard-actions{display:flex;align-items:stretch;justify-content:center;gap:12px;margin-top:28px}.dashboard-actions a,.dashboard-actions button{min-height:46px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;padding:0 20px;border:0;border-radius:9px;color:#fff;background:var(--purple);cursor:pointer;font-weight:700;line-height:1}.dashboard-actions form{display:flex;margin:0}.dashboard-actions button{color:var(--ink);background:#f0f1f8}
@keyframes auth-float { 0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)} } @keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1050px){.auth-shell{grid-template-columns:.85fr 1.15fr}.auth-card{padding:38px 32px}.auth-visual{min-height:100vh}.auth-benefits{grid-template-columns:1fr;inset:auto 7% 4%}.auth-benefits div+div{border-right:0;border-top:1px solid #e4e5f2}.auth-benefits div:nth-child(3){display:none}.auth-social{width:62px}.visual-note{font-size:16px}.auth-robot{max-width:82%}}
@media(max-width:760px){.auth-shell{display:block}.auth-visual{display:none}.auth-form-side{min-height:100svh;padding:90px 18px 28px}.auth-toolbar{top:20px;inset-inline:18px}.auth-card{width:100%;min-height:auto;padding:34px 24px;border-radius:20px}.auth-brand{margin-bottom:38px}.auth-copy h1{font-size:27px}.otp-inputs{gap:6px}.otp-digit{height:56px;font-size:20px}.dashboard-card{padding:35px 20px}.dashboard-actions{flex-direction:column}.dashboard-actions a,.dashboard-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}