/* Youseeka login. Light and dark via [data-theme] (set by theme.js before paint). */
:root{--bg:#f4f3f8;--panel:#fff;--ink:#1d1e2c;--sub:#6c6980;--faint:#8f8ba1;--line:#e7e5ee;--field:#fafafc;--field-line:#dedbe8;--field-focus:#7a5fe0;--accent:#6b50cc;--accent-2:#8a6ff0;--accent-ink:#fff;--ring:rgba(122,95,224,.22);--chip:#f1edff;--chip-ink:#5a3fc0;--danger-bg:#fff1f3;--danger-line:#f6d3da;--danger:#b23a52;--card-shadow:0 1px 2px rgba(23,27,42,.04),0 18px 50px rgba(23,27,42,.06);color-scheme:light}
[data-theme="dark"]{--bg:#0f1118;--panel:#161925;--ink:#eceaf5;--sub:#a9a5bd;--faint:#8a86a0;--line:#262b3c;--field:#11141e;--field-line:#2c3144;--field-focus:#9d86ff;--accent:#7a5fe0;--accent-2:#9a82ff;--ring:rgba(157,134,255,.28);--chip:#241e44;--chip-ink:#c4b5ff;--danger-bg:#2b1720;--danger-line:#4a2532;--danger:#f2a3b4;--card-shadow:0 1px 2px rgba(0,0,0,.4),0 18px 50px rgba(0,0,0,.35);color-scheme:dark}
*{box-sizing:border-box}
html{font-family:Vazirmatn,Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);font-synthesis:none}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--bg)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--field-focus);outline-offset:3px}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ic::before,.control::before,.reveal::before,.refresh::before,.challenge legend::before,.error::before,.submit::after,.trust li::before,.secure::before{content:"";flex:none;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* Layout */
.login-shell{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(440px,1fr) 1.08fr;max-width:1760px;margin:0 auto}
.login-panel{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:36px clamp(28px,5vw,80px) 28px;background:var(--panel)}
.login-head{width:100%;max-width:400px;margin:0 auto}
.login-brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px}
.wordmark{display:flex;flex-direction:column;font:700 17px/1 Arial,sans-serif;letter-spacing:3px;color:var(--ink)}
.wordmark small{font-size:9px;letter-spacing:6px;margin-top:6px;color:var(--accent-2)}
.login-greeting{margin-top:clamp(40px,9vh,96px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--chip-ink);background:var(--chip);padding:5px 12px;border-radius:999px}
h1{font-size:clamp(30px,3.2vw,38px);font-weight:800;line-height:1.4;margin:16px 0 6px;letter-spacing:-.3px}
.intro{font-size:15px;color:var(--sub);margin:0 0 28px;line-height:1.9}
.login-card{width:100%;max-width:400px;margin:0 auto}

/* Fields */
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.control{position:relative;display:flex;align-items:center}
.control::before{position:absolute;inset-inline-start:15px;width:19px;height:19px;color:var(--faint);pointer-events:none;transition:color .2s}
.icon-user::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c1-4 4.2-6 8-6s7 2 8 6'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c1-4 4.2-6 8-6s7 2 8 6'/></svg>")}
.icon-lock::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='10.5' width='15' height='10' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='10.5' width='15' height='10' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/></svg>")}
.control:focus-within::before{color:var(--field-focus)}
.control input{width:100%;min-height:52px;padding:0 46px 0 16px;border:1.5px solid var(--field-line);border-radius:14px;background:var(--field);color:var(--ink);font-size:15px;transition:border-color .2s,box-shadow .2s,background .2s}
.control.has-action input{padding-left:50px}
.control input::placeholder{color:var(--faint);opacity:.7}
.control input:hover{border-color:color-mix(in srgb,var(--field-line),var(--field-focus) 35%)}
.control input:focus{outline:none;border-color:var(--field-focus);box-shadow:0 0 0 4px var(--ring);background:var(--panel)}
.reveal{position:absolute;inset-inline-end:6px;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--faint);font-size:0}
.reveal::before{width:20px;height:20px;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>")}
.reveal[aria-pressed="true"]::before{-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3l18 18'/><path d='M10.6 5.1A10.9 10.9 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.1M6.6 6.6C3.7 8.5 2 12 2 12s3.6 7 10 7a9.8 9.8 0 0 0 5.4-1.6'/><path d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3l18 18'/><path d='M10.6 5.1A10.9 10.9 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.1M6.6 6.6C3.7 8.5 2 12 2 12s3.6 7 10 7a9.8 9.8 0 0 0 5.4-1.6'/><path d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/></svg>")}
.reveal:hover{background:var(--chip);color:var(--chip-ink)}

/* Security puzzle */
.challenge{margin:22px 0 18px;padding:14px 16px 12px;border:1.5px dashed var(--field-line);border-radius:16px;background:color-mix(in srgb,var(--field),transparent 30%)}
.challenge legend{display:flex;align-items:center;gap:6px;padding:0 6px;font-size:12px;font-weight:700;color:var(--sub)}
.challenge legend::before{width:15px;height:15px;color:var(--accent-2);-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 4.5 6v5.5c0 4.5 3.2 8.2 7.5 9.5 4.3-1.3 7.5-5 7.5-9.5V6z'/><path d='m9 12 2 2 4-4'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 4.5 6v5.5c0 4.5 3.2 8.2 7.5 9.5 4.3-1.3 7.5-5 7.5-9.5V6z'/><path d='m9 12 2 2 4-4'/></svg>")}
.challenge-row{display:flex;align-items:center;gap:10px}
.question{flex:1;margin:0;font:700 22px/1 Arial,sans-serif;letter-spacing:2px;color:var(--ink);white-space:nowrap}
.challenge-row input{width:92px;min-height:46px;border:1.5px solid var(--field-line);border-radius:12px;background:var(--panel);color:var(--ink);text-align:center;font:700 18px Arial,sans-serif;transition:border-color .2s,box-shadow .2s}
.challenge-row input::placeholder{font:400 13px Vazirmatn,Tahoma,sans-serif;color:var(--faint)}
.challenge-row input:focus{outline:none;border-color:var(--field-focus);box-shadow:0 0 0 4px var(--ring)}
.refresh{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1.5px solid var(--field-line);border-radius:12px;background:var(--panel);color:var(--sub);transition:transform .35s,color .2s,background .2s}
.refresh::before{width:19px;height:19px;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/><path d='M4 3v5h5'/><path d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/><path d='M20 21v-5h-5'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/><path d='M4 3v5h5'/><path d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/><path d='M20 21v-5h-5'/></svg>")}
.refresh:hover:not(:disabled){color:var(--chip-ink);background:var(--chip);transform:rotate(-90deg)}
.refresh:disabled{opacity:.5;cursor:wait}
.hint{margin:10px 0 0;font-size:12px;color:var(--faint);line-height:1.8}

/* Messages and actions */
.error{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 14px;border:1px solid var(--danger-line);border-radius:12px;background:var(--danger-bg);color:var(--danger);font-size:13px;line-height:1.9}
.error::before{width:18px;height:18px;margin-top:3px;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5M12 16.5h.01'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5M12 16.5h.01'/></svg>")}
.submit{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:54px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--accent-ink);font-size:15px;font-weight:700;box-shadow:0 10px 24px rgba(107,80,204,.32);transition:transform .15s,box-shadow .2s,filter .2s}
.submit::after{width:19px;height:19px;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='m11 6-6 6 6 6'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='m11 6-6 6 6 6'/></svg>");transition:transform .2s}
.submit:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 14px 30px rgba(107,80,204,.4)}
.submit:hover:not(:disabled)::after{transform:translateX(-3px)}
.submit:active:not(:disabled){transform:translateY(1px)}
.submit:disabled{cursor:not-allowed;filter:saturate(.6);opacity:.65;box-shadow:none}
/* While a sign-in is being checked (login.js fills #loginStatus), show a spinner. */
.login-card:has(#loginStatus:not(:empty)) .submit::after{-webkit-mask:none;mask:none;background:transparent;border:2.5px solid currentColor;border-inline-end-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.status{min-height:20px;margin:10px 0 0;font-size:12px;color:var(--sub);text-align:center}
.help{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:2;color:var(--sub);text-align:center}
.login-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:400px;margin:auto auto 0;padding-top:28px;font-size:11px;color:var(--faint)}
.secure{display:inline-flex;align-items:center;gap:6px}
.secure::before{width:13px;height:13px;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='10.5' width='15' height='10' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='10.5' width='15' height='10' rx='2.5'/><path d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/></svg>")}

/* Visual side (desktop) */
.login-visual{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:40px;padding:56px clamp(40px,6vw,96px);color:#fff;background:radial-gradient(60% 50% at 75% 18%,rgba(138,111,240,.42),transparent 70%),radial-gradient(55% 45% at 15% 85%,rgba(74,51,176,.5),transparent 70%),linear-gradient(160deg,#1c1f33,#121421 60%,#0d0f19)}
.login-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 60% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 60% 40%,#000 30%,transparent 75%);pointer-events:none}
.login-visual>*{position:relative}
.visual-eyebrow{font:600 11px Arial,sans-serif;letter-spacing:3px;color:#b9abf2}
.login-visual h2{margin:18px 0 14px;font-size:clamp(32px,3.4vw,50px);line-height:1.55;font-weight:800}
.login-visual h2 em{font-style:normal;background:linear-gradient(90deg,#c9bbff,#8f74ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.visual-copy p{max-width:430px;margin:0;font-size:15px;line-height:2.1;color:#b5b0cb}
.preview-card{max-width:420px;padding:22px 24px;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.035));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.preview-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#c9c4dd}
.chip{padding:3px 10px;border-radius:999px;background:rgba(66,224,170,.14);color:#6fe3bb;font-size:12px;font-weight:700}
.preview-card strong{display:block;margin:10px 0 6px;font-size:32px;font-weight:800}
.preview-card strong small{font-size:13px;font-weight:500;color:#b5b0cb}
.spark{display:block;width:100%;height:84px}
.spark-line{fill:none;stroke:#a993ff;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.preview-legend{display:flex;gap:18px;margin-top:10px;font:12px Arial,Vazirmatn,sans-serif;color:#c9c4dd}
.preview-legend i{display:inline-block;width:8px;height:8px;margin-inline-end:6px;border-radius:2px}
.c1{background:#8f74ff}.c2{background:#c9bbff}.c3{background:#42c99c}
.trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0;list-style:none;font-size:13px;color:#c9c4dd}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{width:16px;height:16px;color:#8f74ff;-webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12.5 4.5 4.5L19 7.5'/></svg>")}

/* Theme toggle, placed in the brand row by pwa.js */
.login-brand-row .theme-toggle{margin:0;background:var(--field);border-color:var(--field-line);color:var(--sub)}
.login-brand-row .theme-toggle:hover{background:var(--chip);color:var(--chip-ink)}

/* Phones and small tablets: native-app layout, hero band + sheet */
@media (max-width:900px){
  .login-shell{display:block}
  .login-visual{display:none}
  .login-panel{padding:0;background:var(--panel)}
  .login-head{max-width:none;padding:calc(18px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) 54px max(22px,env(safe-area-inset-left));color:#fff;background:radial-gradient(80% 90% at 85% 0,rgba(138,111,240,.55),transparent 70%),linear-gradient(165deg,#1f2238,#121421)}
  .login-head .wordmark{color:#fff}
  .login-head .wordmark small{color:#c9bbff}
  .login-greeting{margin-top:34px}
  .login-head .eyebrow{background:rgba(255,255,255,.12);color:#e2dbff}
  .login-head h1{margin-top:12px}
  .login-head .intro{color:#c9c4dd;margin-bottom:0}
  .login-head .theme-toggle{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#e9e5f8}
  .login-card{max-width:520px;margin-top:-30px;padding:28px max(22px,env(safe-area-inset-right)) 8px max(22px,env(safe-area-inset-left));background:var(--panel);border-radius:26px 26px 0 0;position:relative}
  .login-foot{max-width:520px;padding:22px max(22px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left))}
  .control input,.challenge-row input{font-size:16px}
}
@media (max-width:900px){[data-theme="dark"] .login-card{border-top:1px solid #2a2f42;box-shadow:0 -14px 30px rgba(0,0,0,.35)}}
@media (max-width:380px){.question{font-size:19px;letter-spacing:1px}.challenge-row input{width:76px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation-duration:.01ms!important}}
#otpForm{display:flex;flex-direction:column;gap:14px}
#otpForm[hidden]{display:none}
.otp-title{margin:0;font-size:19px;color:var(--ink)}
#otpCode{letter-spacing:.35em;font-size:20px;text-align:center}
.link-button{align-self:center;border:0;background:none;color:var(--accent);font:inherit;font-size:13px;cursor:pointer;padding:6px 10px;border-radius:8px}
.link-button:hover{text-decoration:underline}
.link-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.or-divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;margin:4px 0}
.or-divider[hidden]{display:none}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.passkey-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border:1px solid var(--field-line);border-radius:14px;background:var(--field);color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.passkey-button[hidden]{display:none}
.passkey-button::before{content:'';width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.85 12.15 19 4M18 5l2 2M15 8l2 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M10.85 12.15 19 4M18 5l2 2M15 8l2 2'/%3E%3C/svg%3E") center/contain no-repeat}
.passkey-button:hover{border-color:var(--accent)}
.passkey-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.passkey-button:disabled{opacity:.6;cursor:wait}