:root{
  --navy-950:#08132b; --navy-900:#0b1a3d; --navy-800:#122b5c;
  --royal-600:#1657d8; --sky-400:#3b9eff; --sky-200:#cfe4ff;
  --paper:#f5f8fd; --ink:#0b1a3d; --ink-soft:#5b6a8c; --line:#e3e9f5;
  --gold:#e8a93b;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter',sans-serif; color:var(--ink); background:var(--paper); opacity:0; transition:opacity .12s ease;}
body.ready{opacity:1;}
h1,h2,.display{font-family:'Sora',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}
.auth-toast{position:fixed;top:24px;right:24px;z-index:20;display:flex;align-items:center;gap:10px;max-width:min(380px,calc(100vw - 32px));padding:14px 18px;border:1px solid #8ed4b4;border-radius:8px;background:#e7f8ef;color:#145b45;box-shadow:0 12px 30px rgba(20,91,69,.16);font:600 13px "Inter",sans-serif;opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;}
.auth-toast.show{opacity:1;transform:translateY(0);}
.auth-toast-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#23966b;color:#fff;font-weight:800;}
@media (max-width:600px){.auth-toast{top:14px;right:16px;left:16px;max-width:none;}}

.screen{display:grid; grid-template-columns:0.95fr 1.05fr; min-height:100vh;}

/* -------- left brand panel -------- */
.brand-panel{
  background:radial-gradient(ellipse at 15% 0%, #10265a 0%, var(--navy-900) 55%, var(--navy-950) 100%);
  color:#fff; padding:52px 56px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.brand-watermark{position:absolute; right:50%; bottom:50%; transform:translate(50%,50%); opacity:0.03; width:clamp(320px,40vw,520px);}
.back-link{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:#b7c6f0; width:fit-content;}
.back-link:hover{color:#fff;}
.brand-mid{position:relative; z-index:2;}
.brand-crest{width:clamp(70px,10vw,100px); height:clamp(70px,10vw,100px); object-fit:contain; margin-bottom:26px;}
.brand-mid h1{font-size:30px; line-height:1.25; max-width:400px; letter-spacing:-0.3px;}
.brand-mid p{color:#a9b8e2; margin-top:14px; font-size:14px; max-width:380px; line-height:1.7;}
.role-note{
  background:rgba(59,158,255,0.1); border:1px solid rgba(59,158,255,0.28); border-radius:12px;
  padding:14px 16px; margin-top:26px; font-size:12.5px; color:#cfe0ff; display:flex; gap:10px; max-width:380px;
}
.role-note svg{width:17px; height:17px; flex:none; margin-top:1px; color:var(--sky-400);}
.brand-foot{position:relative; z-index:2; display:flex; align-items:center; gap:8px; color:#7f93c4; font-size:12px; font-family:'Sora';}
.brand-foot svg{width:14px; height:14px;}

/* -------- right form panel -------- */
.form-panel{display:flex; align-items:center; justify-content:center; padding:40px;}
.form-card{width:100%; max-width:400px;}
.form-card h2{font-size:23px; margin-bottom:6px;}
.form-card .sub{color:var(--ink-soft); font-size:13.5px; margin-bottom:26px;}

.role-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; background:#eef2fa; padding:5px; border-radius:12px; margin-bottom:26px;}
.role-tab{
  text-align:center; padding:9px 6px; border-radius:9px; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  cursor:pointer; transition:.15s; display:flex; align-items:center; justify-content:center; gap:6px;
}
.role-tab svg{width:14px; height:14px;}
.role-tab.active{background:#fff; color:var(--navy-900); box-shadow:0 4px 12px -6px rgba(11,26,61,0.25);}

.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--ink);}
.field .input-wrap{position:relative;}
.field input{
  width:100%; padding:11px 46px 11px 40px; border:1px solid var(--line); border-radius:10px;
  font-size:13.5px; font-family:'Inter'; outline:none; transition:border-color .15s;
}
.field input:focus{border-color:var(--royal-600);}
.field .input-wrap svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-soft);}
.field .toggle-password{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:none; border-radius:50%; background:transparent;
  color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s, color .15s;
}
.field .toggle-password:hover{
  background:rgba(11, 26, 61, 0.06);
  color:var(--ink);
}
.field .toggle-password svg{width:18px; height:18px;}
.field .hint{font-size:11.5px; color:var(--ink-soft); margin-top:6px;}

.row-between{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.remember{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft);}
.remember input{width:15px; height:15px; accent-color:var(--royal-600);}
.forgot{font-size:12.5px; color:var(--royal-600); font-weight:600;}

.btn-signin{
  width:100%; padding:12px; border:none; border-radius:10px; font-size:14px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--royal-600),var(--sky-400)); cursor:pointer; box-shadow:0 10px 22px -10px rgba(22,87,216,0.55);
  display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .15s;
}
.btn-signin:hover{transform:translateY(-1px);}
.btn-signin svg{width:15px; height:15px;}

.no-account{
  margin-top:22px; text-align:center; font-size:12.5px; color:var(--ink-soft);
  background:var(--paper); border:1px dashed var(--line); border-radius:10px; padding:14px;
}
.no-account b{color:var(--ink); display:block; margin-bottom:3px; font-family:'Sora'; font-size:12.5px;}

.demo-fill{font-size:11.5px; color:var(--royal-600); font-weight:600; cursor:pointer; text-align:center; margin-top:14px;}

.form-error{
  background:rgba(224,71,90,0.08); border:1px solid rgba(224,71,90,0.3);
  color:#c0303f; border-radius:9px; padding:10px 14px; font-size:13px;
  font-weight:500; margin-bottom:16px;
}

@media (max-width:880px){
  .screen{grid-template-columns:1fr;}
  .brand-panel{padding:36px 26px; min-height:280px;}
  .brand-mid h1{font-size:24px;}
  .brand-crest{width:clamp(60px,15vw,80px); height:clamp(60px,15vw,80px);}
}