/* pages/_login.css — Aurora login (Theme-v1 "login.html" design), self-contained for the public page.
   Tokens inlined so it needs no theme.css. Only the roles + sign-in steps are used by the server flow;
   forgot/MFA are handled by their own controllers. */
:root{
  --font-base:'Plus Jakarta Sans','Segoe UI',Roboto,Arial,sans-serif;
  --text:#16222E; --heading:#022E59; --text-muted:#5A6B7B;
  --brand:#03519B; --accent:#F0741D; --accent-dark:#D45F0E;
  --grad-blue:linear-gradient(135deg,#1E73C8 0%,#03519B 100%);
  --cat-approval-bg:rgba(3,81,155,.10); --cat-warning-bg:rgba(240,116,29,.14);
  --cat-success-bg:rgba(31,157,107,.12); --cat-success:#1F9D6B; --cat-alert:#D64545; --cat-warning:#C9760E;
  --transition:.24s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
svg{display:block}
body{
  font-family:var(--font-base);color:var(--text);min-height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(620px 420px at 90% -6%, rgba(3,81,155,.10), transparent 60%),
    radial-gradient(560px 460px at 4% 100%, rgba(30,115,200,.12), transparent 60%),
    linear-gradient(180deg,#EAF2FB 0%, #DCEAF8 100%);
}
.login-shell{width:100%;max-width:1120px}
.login-card{display:grid;grid-template-columns:1.05fr 1fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(2,31,61,.20);min-height:624px}

.login-left{position:relative;overflow:hidden;background:linear-gradient(155deg,#2C8AE6 0%, #03519B 60%, #023D77 100%);color:#fff;padding:44px 42px;display:flex;flex-direction:column}
.login-left::before{content:"";position:absolute;inset:0;background:
  radial-gradient(420px 240px at 88% 14%, rgba(255,255,255,.12), transparent 70%),
  radial-gradient(360px 240px at 6% 96%, rgba(240,116,29,.18), transparent 70%);pointer-events:none}
.brand{position:relative;z-index:1}
.brand img{width:190px;height:auto}
.brandmark{font-weight:800;font-size:2rem;letter-spacing:-.5px;line-height:1;display:inline-flex;align-items:flex-start}
.brandmark .b1{color:var(--accent)} .brandmark .b2{color:#fff} .brandmark .b3{color:#fff;margin-left:2px}
.brandmark sup{font-size:.7rem;margin-left:3px;opacity:.85}
.brandsub{font-size:.72rem;font-weight:800;letter-spacing:.22em;color:rgba(255,255,255,.82);margin-top:6px}
.brand-tag{position:relative;z-index:1;margin-top:20px;font-size:1.02rem;line-height:1.5;color:rgba(255,255,255,.9);max-width:340px}
.illu{position:relative;z-index:1;margin-top:auto;align-self:center;width:100%;max-width:380px}

.login-right{padding:44px 50px;display:flex;flex-direction:column;justify-content:center;position:relative;min-width:0}
.step{display:none;animation:fadeUp .35s ease}
.step.is-active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}

.step-title{font-size:1.5rem;color:var(--heading);font-weight:800;margin-bottom:5px}
.muted{color:var(--text-muted);font-size:.92rem;margin-bottom:20px}
.step-back{background:transparent;border:0;color:var(--text-muted);font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer;margin-bottom:16px;display:inline-flex;align-items:center;gap:6px;transition:var(--transition)}
.step-back:hover{color:var(--brand)}
.role-chip{display:inline-flex;align-items:center;gap:8px;background:var(--cat-approval-bg);color:var(--brand);font-weight:800;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;padding:6px 13px;border-radius:50px;margin-bottom:14px}

.role-list{display:flex;flex-direction:column;gap:14px;margin:20px 0 18px}
.role{display:flex;align-items:center;gap:18px;width:100%;background:#fff;border:1.5px solid #E4EAF0;border-radius:16px;padding:18px 20px;cursor:pointer;transition:var(--transition);font-family:inherit;text-align:left;box-shadow:0 4px 14px rgba(2,31,61,.05);text-decoration:none}
.role:hover{border-color:var(--brand);box-shadow:0 14px 30px rgba(3,81,155,.16);transform:translateY(-2px)}
.role-ic{width:52px;height:52px;flex-shrink:0;border-radius:14px;display:grid;place-items:center;background:var(--cat-approval-bg);color:var(--brand)}
.role-ic svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.8;fill:none}
.role--client .role-ic{background:rgba(10,99,181,.12);color:#0A63B5}
.role--partner .role-ic{background:var(--cat-warning-bg);color:var(--accent-dark)}
.role-tx{flex:1;font-size:1rem;color:var(--text-muted);line-height:1.3}
.role-tx b{display:block;font-size:1.12rem;color:var(--heading);letter-spacing:.02em;margin-top:2px}
.role-go{color:var(--brand);font-size:1.4rem;transition:var(--transition)}
.role:hover .role-go{transform:translateX(4px)}

.fl{display:block;font-size:.8rem;font-weight:700;color:var(--text);margin:14px 0 7px}
.field{display:flex;align-items:center;gap:10px;border:1.5px solid #E4EAF0;border-radius:12px;padding:12px 14px;transition:var(--transition);background:#fff}
.field:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(3,81,155,.12)}
.field svg{width:18px;height:18px;stroke:var(--text-muted);stroke-width:2;fill:none;flex-shrink:0}
.field input{border:0;outline:0;font-family:inherit;font-size:.95rem;width:100%;color:var(--text);background:transparent}
.pw-toggle{border:0;background:transparent;color:var(--text-muted);font-size:.76rem;font-weight:800;cursor:pointer;flex-shrink:0}
.pw-toggle:hover{color:var(--brand)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 18px;font-size:.86rem}
.check{display:inline-flex;align-items:center;gap:8px;color:var(--text-muted);cursor:pointer}
.check input{accent-color:var(--brand);width:15px;height:15px}
.link{color:var(--brand);font-weight:700;text-decoration:none;cursor:pointer;background:none;border:0;font-family:inherit;font-size:inherit}
.link:hover{text-decoration:underline}
.btn-primary{width:100%;border:0;border-radius:12px;padding:14px;background:var(--grad-blue);color:#fff;font-family:inherit;font-weight:800;font-size:.96rem;cursor:pointer;box-shadow:0 10px 24px rgba(3,81,155,.26);transition:var(--transition);display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(3,81,155,.32)}
.alt{margin-top:18px;font-size:.86rem;color:var(--text-muted);text-align:center}
.login-msg{margin-bottom:14px}
.login-msg .alert{border-radius:12px;padding:11px 14px;font-size:.86rem;font-weight:700}
.login-msg .alert-danger{background:rgba(214,69,69,.1);color:#B42318}
.login-msg .alert-success{background:var(--cat-success-bg);color:#1F7A4D}

.login-foot{display:flex;justify-content:flex-end;padding:14px 6px 0;font-size:.78rem;color:var(--text-muted)}
.login-foot a{color:var(--brand);text-decoration:none;font-weight:700}

@media(max-width:880px){
  .login-card{grid-template-columns:1fr}
  .login-left{padding:30px 28px;min-height:auto}
  .illu{display:none}
  .brand-tag{margin-top:14px}
  .login-right{padding:32px 26px}
}
@media(max-width:420px){ body{padding:12px} .login-right{padding:26px 20px} }