:root{
  color-scheme:dark;
  --bg:#061016;
  --panel:#0b1b23;
  --edge:rgba(120,177,190,.22);
  --text:#edf8f7;
  --muted:#91aeb1;
  --mint:#68e4c0;
  --cyan:#79cfe5;
  --coral:#ff9b91;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;overflow-x:hidden}
body{
  min-height:100svh;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 16%,rgba(40,141,145,.2),transparent 34%),
    radial-gradient(circle at 82% 78%,rgba(31,95,123,.2),transparent 37%),
    var(--bg);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(126,205,201,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(126,205,201,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at center,#000,transparent 78%);
}
button,input{font:inherit}
.login-shell{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:
    max(18px,env(safe-area-inset-top))
    max(18px,env(safe-area-inset-right))
    max(18px,env(safe-area-inset-bottom))
    max(18px,env(safe-area-inset-left));
}
.login-card{
  position:relative;
  width:min(500px,100%);
  padding:34px;
  border:1px solid var(--edge);
  border-radius:28px;
  background:linear-gradient(160deg,rgba(15,38,47,.97),rgba(8,22,29,.99));
  box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.035);
}
.brand{display:flex;align-items:center;gap:11px}
.brand>span:last-child{display:grid}
.brand strong{font-size:15px;letter-spacing:.01em}
.brand small{font-size:10px;color:var(--muted)}
.brand-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(104,228,192,.45);
  border-radius:12px;
  background:rgba(104,228,192,.08);
}
.brand-mark i{
  width:14px;
  height:20px;
  border:2px solid var(--mint);
  border-radius:45% 45% 40% 40%;
  box-shadow:inset 0 -5px rgba(104,228,192,.13);
}
.security-pill{
  position:absolute;
  right:24px;
  top:29px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid var(--edge);
  border-radius:99px;
  color:var(--muted);
  font-size:10px;
}
.security-pill i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 4px rgba(104,228,192,.08);
}
.eyebrow{
  margin:38px 0 9px;
  color:var(--mint);
  font-size:10px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}
h1{
  margin:0;
  font-size:clamp(38px,8vw,54px);
  line-height:.98;
  letter-spacing:-.055em;
}
.lead{
  margin:17px 0 22px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.login-form{display:grid;gap:16px}
.field{display:grid;gap:7px}
.field label{
  color:#cfe4e3;
  font-size:12px;
  font-weight:700;
}
.field input{
  width:100%;
  height:52px;
  padding:0 14px;
  border:1px solid rgba(145,174,177,.32);
  border-radius:13px;
  outline:none;
  color:var(--text);
  background:rgba(4,14,19,.58);
  font-size:16px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.field input:hover{border-color:rgba(145,174,177,.52)}
.field input:focus{
  border-color:var(--mint);
  background:rgba(4,14,19,.78);
  box-shadow:0 0 0 3px rgba(104,228,192,.13);
}
.field input[aria-invalid="true"]{border-color:var(--coral)}
.password-control{position:relative}
.password-control input{padding-right:68px}
.password-toggle{
  position:absolute;
  top:50%;
  right:6px;
  min-width:56px;
  min-height:40px;
  padding:0 8px;
  transform:translateY(-50%);
  border:0;
  border-radius:9px;
  color:var(--mint);
  background:transparent;
  font-size:11px;
  font-weight:750;
  cursor:pointer;
}
.password-toggle:hover{background:rgba(104,228,192,.08)}
.password-toggle:focus-visible,.primary:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:2px;
}
.notice{
  margin:0;
  min-height:42px;
  padding:11px 12px;
  border:1px solid rgba(255,155,145,.38);
  border-radius:11px;
  background:rgba(91,30,29,.18);
  color:#ffd0cb;
  font-size:12px;
  line-height:1.4;
}
.notice[hidden]{display:none}
.primary{
  width:100%;
  min-height:54px;
  margin-top:2px;
  border:0;
  border-radius:14px;
  color:#062021;
  background:linear-gradient(135deg,var(--mint),var(--cyan));
  box-shadow:0 12px 30px rgba(104,228,192,.15);
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}
.primary:hover:not(:disabled){filter:brightness(1.05)}
.primary:active:not(:disabled){transform:translateY(1px)}
.primary:disabled{cursor:wait;filter:saturate(.45);opacity:.68}
.button-busy{display:none}
.primary[aria-busy="true"] .button-label{display:none}
.primary[aria-busy="true"] .button-busy{display:inline}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:22px;
  padding-top:17px;
  border-top:1px solid var(--edge);
  color:#78999d;
  font-size:10px;
}
.trust-row span{display:flex;align-items:center;gap:6px}
.trust-row i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(104,228,192,.72);
}

@media(max-width:560px){
  .login-card{padding:24px 20px;border-radius:22px}
  .security-pill{position:static;width:max-content;margin:20px 0 0}
  .eyebrow{margin-top:25px}
  .lead{font-size:13px}
}
@media(max-height:690px) and (min-width:561px){
  .login-shell{place-items:start center}
  .login-card{padding-top:24px;padding-bottom:24px}
  .eyebrow{margin-top:22px}
  .lead{margin:12px 0 16px}
  .login-form{gap:12px}
  .trust-row{margin-top:16px;padding-top:13px}
}
@media(prefers-reduced-motion:no-preference){
  .login-card{animation:enter .35s cubic-bezier(.2,.8,.2,1)}
  @keyframes enter{
    from{opacity:0;transform:translateY(10px) scale(.985)}
    to{opacity:1;transform:none}
  }
}