:root{
  --desk:#E8E7E5; --app:#FCFCFB; --tint:#F4F3F1; --line:#E3E1DE;
  --ink:#131211; --ink-2:#4A4540; --ink-3:#736C65;
  --solid:#1A1817; --accent:#3F6F52; --crit:#AC3524;
  --r-app:22px; --r-lg:16px; --r:11px; --pill:999px;
  --sans:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --display:"Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --shadow:0 1px 2px rgba(19,18,17,.04), 0 12px 32px -12px rgba(19,18,17,.18);
}
@media (prefers-color-scheme: dark){
  :root{
    --desk:#100F0E; --app:#1B1A18; --tint:#232120; --line:#2E2C2A;
    --ink:#F4F2EF; --ink-2:#BDB6AE; --ink-3:#948D85;
    --solid:#F4F2EF; --accent:#7FB18F; --crit:#EC8672;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="light"]{
  --desk:#E8E7E5; --app:#FCFCFB; --tint:#F4F3F1; --line:#E3E1DE;
  --ink:#131211; --ink-2:#4A4540; --ink-3:#736C65;
  --solid:#1A1817; --accent:#3F6F52; --crit:#AC3524;
  --shadow:0 1px 2px rgba(19,18,17,.04), 0 12px 32px -12px rgba(19,18,17,.18);
}
:root[data-theme="dark"]{
  --desk:#100F0E; --app:#1B1A18; --tint:#232120; --line:#2E2C2A;
  --ink:#F4F2EF; --ink-2:#BDB6AE; --ink-3:#948D85;
  --solid:#F4F2EF; --accent:#7FB18F; --crit:#EC8672;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--desk); color:var(--ink);
  font-family:var(--sans); font-size:14.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:grid; place-items:center; padding:24px;
}
svg{width:17px;height:17px;flex:none}

.card{
  width:100%; max-width:390px; background:var(--app);
  border-radius:var(--r-app); box-shadow:var(--shadow);
  padding:34px 32px 28px;
}
.brand{display:flex; align-items:center; gap:11px; margin-bottom:26px}
.mark{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:var(--accent); position:relative;
}
.mark::after{
  content:""; position:absolute; inset:9px 9px auto 9px; height:5px;
  border-radius:2px; background:var(--app); box-shadow:0 8px 0 var(--app);
}
.brand b{font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:-.01em}
.brand span{display:block; font-size:12px; color:var(--ink-3); font-weight:400; letter-spacing:0}

h1{font-family:var(--display); font-size:21px; font-weight:600; margin:0 0 4px; letter-spacing:-.015em}
.sub{color:var(--ink-3); font-size:13px; margin:0 0 22px}

label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin:0 0 6px}
.field{margin-bottom:15px}
input{
  width:100%; font:inherit; color:var(--ink); background:var(--tint);
  border:1px solid transparent; border-radius:var(--r); padding:11px 13px;
  transition:border-color .12s, background .12s;
}
input:focus{outline:none; border-color:var(--accent); background:var(--app)}
input::placeholder{color:var(--ink-3)}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.peek{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  padding:8px; border-radius:8px; display:grid; place-items:center;
}
.peek:hover{color:var(--ink); background:var(--tint)}

button.go{
  width:100%; font:inherit; font-weight:600; cursor:pointer;
  background:var(--solid); color:var(--app);
  border:0; border-radius:var(--pill); padding:12px 18px; margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:opacity .12s, transform .06s;
}
button.go:hover{opacity:.88}
button.go:active{transform:translateY(1px)}
button.go[disabled]{opacity:.5; cursor:progress}

.msg{
  display:none; align-items:flex-start; gap:9px; margin:0 0 16px;
  padding:11px 13px; border-radius:var(--r); font-size:13px; line-height:1.45;
}
.msg.show{display:flex}
.msg.err{background:color-mix(in srgb, var(--crit) 12%, transparent); color:var(--crit)}
.msg.ok{background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent)}
.msg svg{margin-top:1px}

.foot{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3); text-align:center; line-height:1.6;
}
.spin{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid color-mix(in srgb, var(--app) 40%, transparent);
  border-top-color:var(--app); animation:sp .6s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .spin{animation-duration:2s} }