/* Login + password pages */
body.is-login{ min-height:100%; background:radial-gradient(1100px 600px at 80% -10%,#1f3275 0,transparent 60%),radial-gradient(900px 500px at 0% 110%,#2a1f63 0,transparent 55%),var(--navy-900); color:#fff; overflow-x:hidden; }
.login-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.07) 1.2px,transparent 1.4px); background-size:26px 26px; mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%); }
.login-wrap{ position:relative; z-index:2; min-height:100vh; display:grid; place-items:center; padding:92px 18px 40px; }
.login-card{ position:relative; width:min(980px,100%); display:grid; grid-template-columns:1.05fr 1fr; background:#fff; color:var(--ink); border:3px solid var(--navy-800); border-radius:28px; box-shadow:10px 10px 0 var(--amber),0 40px 80px rgba(0,0,0,.45); overflow:hidden; animation:card-in .7s cubic-bezier(.2,1.1,.3,1) both; }
@keyframes card-in{ from{ opacity:0; transform:translateY(30px) scale(.97) } to{ opacity:1; transform:none } }

/* mascot side */
.login-hero{ position:relative; background:linear-gradient(160deg,var(--navy-700),var(--navy-900)); color:#fff; padding:34px 28px 28px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; min-height:520px; overflow:hidden; }
.login-hero::before{ content:""; position:absolute; inset:auto -20% -30% -20%; height:70%; background:radial-gradient(closest-side,rgba(255,200,61,.35),transparent); }
.hero-bubble{ position:relative; z-index:2; background:#fff; color:var(--navy-800); font-weight:700; border-radius:18px; padding:10px 16px; margin-bottom:18px; font-size:14px; max-width:280px; box-shadow:0 8px 20px rgba(0,0,0,.25); transition:opacity .2s; }
.hero-bubble::after{ content:""; position:absolute; bottom:-9px; left:50%; width:18px; height:18px; background:#fff; transform:translateX(-50%) rotate(45deg); border-radius:3px; }
.hero-mascot{ position:relative; z-index:2; margin-inline:auto; }
.hero-brand{ position:relative; z-index:2; margin-top:6px; }
.hero-brand h2{ font-size:26px; font-weight:800; letter-spacing:-.4px; color:var(--amber-300); }
.hero-brand p{ font-size:12.5px; color:#b8c3e3; margin-top:2px; }
.hero-floor{ position:absolute; left:12%; right:12%; bottom:92px; height:18px; z-index:1; background:radial-gradient(closest-side,rgba(0,0,0,.4),transparent); }

/* form side */
.login-form-side{ padding:40px 38px 30px; display:flex; flex-direction:column; justify-content:center; }
.login-form-side h1{ font-size:24px; font-weight:800; color:var(--navy-800); }
.login-form-side .sub{ color:var(--muted); margin:2px 0 20px; font-size:13px; }
.portal-tabs{ position:relative; display:grid; grid-template-columns:1fr 1fr; background:#eef1f7; border-radius:14px; padding:4px; margin-bottom:22px; }
.portal-tabs button{ position:relative; z-index:2; border:0; background:none; padding:10px 8px; border-radius:11px; font-weight:700; color:var(--ink-soft); display:flex; align-items:center; justify-content:center; gap:7px; transition:color .2s; }
.portal-tabs button.is-on{ color:var(--navy-900); }
.portal-tabs .pill{ position:absolute; z-index:1; top:4px; bottom:4px; width:calc(50% - 4px); inset-inline-start:4px; background:var(--amber); border-radius:11px; box-shadow:0 3px 0 var(--amber-700); transition:inset-inline-start .35s cubic-bezier(.3,1.3,.5,1); }
.portal-tabs[data-portal="admin"] .pill{ inset-inline-start:calc(50%); }
.f-group{ margin-bottom:14px; }
.f-group label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.f-input{ position:relative; }
.f-input svg{ position:absolute; inset-inline-start:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted); pointer-events:none; }
.f-input input{ width:100%; height:48px; border:2px solid var(--border); border-radius:13px; background:#fafbfd; padding:0 14px; padding-right:44px; padding-left:14px; outline:none; transition:.18s; direction:ltr; text-align:right; font-size:15px; }
.f-input input::placeholder{ color:#a6afbd; direction:rtl; }
.f-input input:focus{ border-color:var(--amber); background:#fff; box-shadow:0 0 0 4px rgba(255,183,3,.22); }
.f-input .eye{ position:absolute; inset-inline-end:8px; top:50%; transform:translateY(-50%); border:0; background:none; width:34px; height:34px; border-radius:9px; color:var(--muted); display:grid; place-items:center; }
.f-input .eye:hover{ background:#eef1f7; color:var(--ink); }
.f-input .eye svg{ position:static; transform:none; }
.f-input.has-eye input{ padding-left:46px; }
.btn-login{ width:100%; height:50px; border:0; border-radius:14px; background:var(--navy-800); color:#fff; font-weight:800; font-size:15.5px; display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 4px 0 #050b1f; transition:transform .12s,box-shadow .12s,background .2s; margin-top:6px; }
.btn-login:hover{ background:var(--navy-700); } .btn-login:active{ transform:translateY(3px); box-shadow:0 1px 0 #050b1f; }
.btn-login[disabled]{ opacity:.7; cursor:progress; }
.btn-login .spin{ width:18px; height:18px; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:none; }
.btn-login.is-loading .spin{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.login-error{ background:var(--danger-soft); color:#991b1b; border:1.5px solid #f5b5b5; border-radius:12px; padding:10px 13px; font-size:13px; margin-bottom:14px; display:flex; gap:8px; align-items:flex-start; animation:err-in .3s ease both; }
@keyframes err-in{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.login-foot{ margin-top:22px; font-size:11.5px; color:var(--muted); text-align:center; }
.caps-hint{ font-size:11.5px; color:var(--warn); margin-top:5px; display:none; } .caps-hint.is-on{ display:block; }
.pw-rules{ font-size:12px; color:var(--muted); margin:-4px 0 12px; }

@media (max-width:820px){
  .login-card{ grid-template-columns:1fr; box-shadow:6px 6px 0 var(--amber),0 30px 60px rgba(0,0,0,.4); }
  .login-hero{ min-height:0; padding:22px 18px 14px; order:-1; }
  .hero-mascot{ --mascot-size:150px !important; }
  .hero-floor,.hero-brand p{ display:none; }
  .login-form-side{ padding:26px 22px 22px; }
  .login-wrap{ padding-top:84px; }
}
.login-error[hidden]{display:none}