:root{
  --ink:#0d0f12;
  --ink-inv:#fff;
  --ok:#1f7a3e;
  --err:#b3261e;
  --bg:#fff;
  --surface:#f6f7f8;
  --border:#dcdfe3;
  --border-strong:#b5bbc2;
  --txt:#0d0f12;
  --txt2:#585f66;
  --txt3:#858c93;
  --focus:#0a84ff;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
[data-theme=dark]{
  --ink:#f2f4f6;
  --ink-inv:#0a0b0d;
  --ok:#4ac47a;
  --err:#ff6b6b;
  --bg:#0a0b0d;
  --surface:#14171a;
  --border:#262a2f;
  --border-strong:#3a4046;
  --txt:#f2f4f6;
  --txt2:#a6adb4;
  --txt3:#7a8188;
  --focus:#4aa3ff;
  color-scheme:dark;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  font:400 16px/1.5 var(--font);
  background:var(--bg);
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px;
  transition:background-color .15s,color .15s;
}

img,svg{display:block;max-width:100%;height:auto}
.ic{width:20px;height:20px;display:inline-block;vertical-align:middle;flex-shrink:0;pointer-events:none}

a:focus-visible,button:focus-visible,input:focus-visible,label:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

.back-btn,.theme-btn{
  position:fixed;
  top:20px;
  height:36px;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--bg);
  color:var(--txt2);
  font:500 13px/1 var(--font);
  text-decoration:none;
  cursor:pointer;
  z-index:10;
  transition:background-color .15s,border-color .15s,color .15s;
}
.back-btn{padding:0 12px 0 8px;gap:6px;left:20px}
.theme-btn{width:36px;padding:0;justify-content:center;right:20px}
.back-btn:hover,.theme-btn:hover{background:var(--surface);border-color:var(--border-strong);color:var(--txt)}
.back-btn .ic{width:14px;height:14px}
.theme-btn .ic{width:16px;height:16px;position:absolute}
.theme-btn .i-sun,.theme-btn .i-moon,.theme-btn .i-auto{opacity:0;pointer-events:none}
[data-theme-pref=light] .theme-btn .i-sun,
[data-theme-pref=dark] .theme-btn .i-moon,
[data-theme-pref=system] .theme-btn .i-auto{opacity:1;pointer-events:auto}

.auth-wrap{width:100%;max-width:400px;display:flex;flex-direction:column;gap:16px}

.auth-brand{display:flex;align-items:center;gap:8px}
.brand-mark{
  width:28px;height:28px;
  border-radius:6px;
  background:var(--ink);
  color:var(--ink-inv);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.9rem;line-height:1;
}
.brand-txt{font-weight:600;font-size:.95rem;letter-spacing:-.01em}
.brand-txt span{color:var(--txt2);font-weight:400}

.auth-card{
  padding:28px 24px 22px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
}

.auth-head{margin-bottom:20px}
.auth-head h1{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-bottom:4px}
.auth-head p{font-size:.875rem;color:var(--txt2)}

/* step */
.steps{display:flex;align-items:center;gap:6px;margin-bottom:18px}
.step-dot{
  width:24px;height:24px;
  border-radius:50%;
  border:1px solid var(--border-strong);
  background:var(--bg);
  color:var(--txt3);
  display:flex;align-items:center;justify-content:center;
  font:600 .7rem var(--font);
  flex-shrink:0;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s;
}
.step-dot.active{background:var(--ink);border-color:var(--ink);color:var(--ink-inv);transform:scale(1.06)}
.step-dot.done{background:var(--ok);border-color:var(--ok);color:#fff}
.step-line{flex:1;height:1px;background:var(--border);border-radius:1px;transition:background-color .2s}
.step-line.done{background:var(--ok)}

/* alert */
.alert{display:none;align-items:flex-start;gap:8px;padding:10px 12px;border:1px solid;border-radius:6px;font-size:.8125rem;line-height:1.5;margin-bottom:14px;word-break:break-word}
.alert.show{display:flex}
.alert .ic{width:16px;height:16px;flex-shrink:0;margin-top:1px}
.alert.error{background:color-mix(in srgb,var(--err) 8%,var(--surface));border-color:var(--err);color:var(--err)}
.alert.success{background:color-mix(in srgb,var(--ok) 8%,var(--surface));border-color:var(--ok);color:var(--ok)}
.alert.info{background:var(--surface);border-color:var(--border-strong);color:var(--txt2)}

/* form group */
.form-group{
  max-height:0;overflow:hidden;opacity:0;margin-bottom:0;
  transition:max-height .3s ease,opacity .2s ease,margin-bottom .2s ease;
}
.form-group.visible{max-height:220px;opacity:1;margin-bottom:14px}

.label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:5px;color:var(--txt)}
.label-optional{font-weight:400;color:var(--txt3)}

.input-box{position:relative;display:flex;align-items:center}
.input-ic{position:absolute;left:12px;color:var(--txt3);pointer-events:none;width:16px;height:16px;z-index:2}

.input-box input{
  width:100%;
  padding:11px 40px;
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:6px;
  font-family:inherit;font-size:16px;font-weight:400;
  color:var(--txt);
  outline:none;
  min-width:0;
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s,box-shadow .15s,background-color .15s;
}
.input-box input::placeholder{color:var(--txt3)}
.input-box input:hover{border-color:var(--border-strong)}
.input-box input:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 20%,transparent);
}
.input-box input.invalid{border-color:var(--err)}
.input-box input.valid{border-color:var(--ok)}
.input-box input:-webkit-autofill,
.input-box input:-webkit-autofill:hover,
.input-box input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--txt);
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset;
  transition:background-color 5000s ease-in-out 0s;
}

.eye{
  position:absolute;right:4px;
  width:32px;height:32px;
  border:none;background:none;border-radius:6px;
  color:var(--txt3);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:background-color .15s,color .15s;
  z-index:2;
}
.eye:hover{background:var(--surface);color:var(--txt)}
.eye .ic{width:16px;height:16px}

.input-status{
  position:absolute;right:10px;top:50%;
  transform:translateY(-50%);
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;z-index:2;
  transition:opacity .15s;
}
.input-status.show{opacity:1}
.input-status .loading-spinner-sm{
  width:14px;height:14px;
  border:2px solid color-mix(in srgb,var(--focus) 25%,transparent);
  border-top-color:var(--focus);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.input-status .ic{width:16px;height:16px;stroke-width:2.5}
.input-status.success .ic{color:var(--ok)}
.input-status.error .ic{color:var(--err)}

.form-hint{font-size:.75rem;color:var(--txt3);margin-top:5px;min-height:15px;line-height:1.4}
.form-hint.error{color:var(--err)}
.form-hint.success{color:var(--ok)}

/* terms */
.terms-group{
  max-height:0;overflow:hidden;opacity:0;margin-bottom:0;
  transition:max-height .3s ease,opacity .2s ease,margin-bottom .2s ease;
}
.terms-group.visible{max-height:300px;opacity:1;margin-bottom:14px}

.terms-box{
  display:flex;align-items:flex-start;gap:8px;
  padding:10px 12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:6px;
  cursor:pointer;
  transition:border-color .15s,background-color .15s;
}
.terms-box:hover{border-color:var(--border-strong)}
.terms-box input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}

.check-box{
  width:16px;height:16px;
  border:1px solid var(--border-strong);
  border-radius:4px;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:2px;
  transition:background-color .15s,border-color .15s;
}
.check-box svg{width:10px;height:10px;color:var(--ink-inv);opacity:0}
.terms-box input:checked+.check-box{background:var(--ink);border-color:var(--ink)}
.terms-box input:checked+.check-box svg{opacity:1}
.terms-box input:focus-visible+.check-box{outline:2px solid var(--focus);outline-offset:2px}

.terms-text{font-size:.78rem;color:var(--txt2);line-height:1.55}
.terms-text a{color:var(--txt);text-decoration:underline;text-underline-offset:2px}
.terms-text a:hover{color:var(--ink)}

/* status */
.status{
  display:flex;flex-direction:column;gap:5px;
  max-height:0;overflow:hidden;opacity:0;margin-bottom:0;
  transition:max-height .2s ease,margin-bottom .2s ease,opacity .15s;
}
.status.visible{max-height:44px;margin-bottom:12px;opacity:1}

.status-bar{width:100%;height:3px;border-radius:2px;overflow:hidden;background:var(--border)}
.status-bar-fill{height:100%;width:0;background:var(--ink);transition:width .2s,background-color .15s}
.status[data-state=running] .status-bar-fill{width:40%}
.status[data-state=done] .status-bar-fill{width:100%;background:var(--ok)}
.status[data-state=failed] .status-bar-fill{width:100%;background:var(--err)}

.status-label{font-size:.75rem;color:var(--txt2)}
.status[data-state=done] .status-label{color:var(--ok)}
.status[data-state=failed] .status-label{color:var(--err)}

/* submit */
.btn-submit{
  width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:42px;
  border:none;border-radius:6px;
  background:var(--ink);
  color:var(--ink-inv);
  font-family:inherit;font-weight:500;font-size:.9375rem;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .15s;
  margin-top:4px;
}
.btn-submit:hover:not(:disabled){opacity:.88}
.btn-submit:disabled{opacity:.5;cursor:not-allowed}
.btn-submit .ic{width:16px;height:16px}

.spinner{
  width:14px;height:14px;
  border:2px solid color-mix(in srgb,var(--ink-inv) 35%,transparent);
  border-top-color:var(--ink-inv);
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* foot */
.auth-foot{font-size:.8125rem;color:var(--txt2);margin-top:14px;text-align:center}
.auth-foot a{color:var(--txt);text-decoration:underline;text-underline-offset:2px}

.recaptcha-note{margin-top:10px;font-size:.6875rem;color:var(--txt3);line-height:1.5;text-align:center}
.recaptcha-note a{color:var(--txt3);text-decoration:underline;text-underline-offset:2px}
.recaptcha-note a:hover{color:var(--txt2)}

@media (max-width:520px){
  body{padding:16px 14px;align-items:flex-start;padding-top:72px}
  .auth-card{padding:22px 18px 18px}
  .auth-head h1{font-size:1.2rem}
  .back-btn{top:14px;left:14px;height:34px;padding:0 10px 0 6px}
  .theme-btn{top:14px;right:14px;width:34px;height:34px}
}
@media (max-width:360px){
  .back-btn span{display:none}
  .back-btn{width:34px;padding:0;justify-content:center}
  .terms-box{padding:9px 10px}
  .terms-text{font-size:.74rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media print{body{display:none!important}}