@import url("/assets/marka.css");
body.center{
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(700px 500px at 90% 110%, rgba(16,185,129,.12), transparent 60%),
    var(--bg);
  min-height:100dvh;
}
.shell{width:100%;max-width:400px;padding:24px}
.logo{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.mark{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),#6366f1);
  font-size:20px;box-shadow:0 8px 24px rgba(59,130,246,.3)
}
.logo h1{margin:0;font-size:22px;letter-spacing:-.3px}
.logo p{margin:2px 0 0;font-size:13px;color:var(--muted)}

.panel{
  background:rgba(23,28,34,.85);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px;box-shadow:0 20px 50px rgba(0,0,0,.45);backdrop-filter:blur(8px)
}
.panel h2{margin:0 0 4px;font-size:17px}
.panel .sub{margin:0 0 20px;font-size:13px;color:var(--muted)}

.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.field input{
  width:100%;padding:12px 13px;border-radius:10px;border:1px solid var(--line);
  background:#0d1117;color:var(--fg);font-size:15px;transition:border-color .15s,box-shadow .15s
}
.field input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.field input::placeholder{color:#4b5563}

.pwwrap{position:relative}
.pwwrap input{padding-right:44px}
.eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:8px;font-size:15px;cursor:pointer;opacity:.6;color:var(--fg)
}
.eye:hover{opacity:1}

.primary{
  width:100%;padding:12px;border:0;border-radius:10px;font-size:15px;font-weight:600;
  background:linear-gradient(135deg,var(--acc),#6366f1);color:#fff;cursor:pointer;
  margin-top:6px;transition:transform .1s,opacity .15s
}
.primary:hover{opacity:.92}
.primary:active{transform:scale(.99)}
.primary:disabled{opacity:.55;cursor:default}

#code{text-align:center;letter-spacing:8px;font-size:22px;font-family:ui-monospace,monospace;padding:14px}
.err{color:#f87171;font-size:13px;margin:12px 0 0;min-height:18px;text-align:center}
.hp{position:absolute;left:-9999px}
.foot{text-align:center;margin-top:18px;font-size:12px;color:#4b5563}
.step{animation:rise .25s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.back{background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;margin-top:14px;width:100%}
.back:hover{color:var(--fg)}