:root {
  color-scheme: light;
  --ink: #1d2b44;
  --text: #42506a;
  --muted: #738098;
  --primary: #4358d6;
  --primary-dark: #3046ba;
  --primary-soft: #eef1ff;
  --line: #e6eaf1;
}
* { box-sizing: border-box; }
body { min-height: 100vh; min-height: 100svh; margin: 0; display: flex; flex-direction: column; color: var(--text); background: radial-gradient(ellipse at 15% 4%, #e8edff 0, transparent 47%), radial-gradient(ellipse at 94% 96%, #e9edfc 0, transparent 43%), #f4f6fa; font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
[hidden] { display: none !important; }
.brand { position: absolute; top: 34px; left: 42px; display: flex; align-items: center; gap: 11px; color: var(--ink); font-size: 16px; font-weight: 650; line-height: 1.4; }
.brand-mark { display: grid; place-items: center; width: 39px; height: 41px; border-radius: 10px; background: var(--primary); color: #fff; font-size: 24px; box-shadow: 0 5px 12px #4358d618; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .12em; }
.login-main { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 90px 24px 24px; }
.login-card { width: 100%; max-width: 432px; padding: 32px 38px 0; overflow: hidden; border: 1px solid #e2e7f2; border-radius: 18px; background: #fff; box-shadow: 0 18px 65px -24px #30426328, 0 3px 12px #30426304; }
.card-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border: 1px solid #e0e5ff; border-radius: 13px; color: var(--primary); background: var(--primary-soft); }
.card-mark svg { width: 25px; height: 25px; }
.eyebrow { color: var(--primary); font-size: 11px; letter-spacing: .09em; font-weight: 650; }
h1 { margin: 8px 0 7px; color: var(--ink); font-size: 29px; font-weight: 650; letter-spacing: -.04em; line-height: 1.4; }
.subtitle { margin: 0 0 24px; color: var(--muted); font-size: 13px; }
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 8px; color: #34435e; font-size: 13px; font-weight: 550; }
.input-shell { display: flex; align-items: center; gap: 10px; min-height: 47px; padding: 0 13px; border: 1px solid #dce2ee; border-radius: 8px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.input-shell:focus-within { border-color: #7d8be4; box-shadow: 0 0 0 3px #4358d60b; }
.input-shell > svg { flex: 0 0 18px; width: 18px; height: 18px; color: #8c98af; }
input { width: 100%; min-width: 0; padding: 12px 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; }
input::placeholder { color: #a0aabc; font-size: 13px; }
input:disabled { opacity: .65; }
.password-toggle { flex-shrink: 0; padding: 5px 2px; border: 0; color: #72809c; background: transparent; font-size: 12px; }
.password-toggle:hover { color: var(--primary); }
.feedback { margin: -2px 0 16px; padding: 10px 12px; border: 1px solid #f3d8d8; border-radius: 7px; background: #fff6f6; color: #b34040; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.submit-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 47px; margin-top: 7px; padding: 11px 16px; border: 1px solid var(--primary); border-radius: 8px; color: #fff; background: var(--primary); font-weight: 550; box-shadow: 0 4px 9px #4358d616; transition: background .15s; }
.submit-button:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.submit-button:disabled { opacity: .72; }
.submit-button svg { width: 17px; height: 17px; }
.card-foot { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 26px -38px 0; padding: 14px 12px; border-top: 1px solid #edf0f6; background: #fbfcfe; color: #8a95a9; font-size: 11px; }
.foot-dot { width: 5px; height: 5px; border-radius: 50%; background: #8f9de1; }
.page-note { margin: 18px 0 0; color: #929caf; font-size: 11px; }
footer { padding: 0 20px 22px; text-align: center; color: #a0a8b8; font-size: 11px; letter-spacing: .05em; }
button:focus-visible { outline: 3px solid #a3afea; outline-offset: 3px; }
@media (max-width: 520px) {
  .brand { top: 25px; left: 25px; }
  .brand-mark { width: 34px; height: 36px; font-size: 21px; }
  .login-main { padding: 110px 20px 35px; }
  .login-card { padding: 31px 27px 0; border-radius: 15px; }
  .card-foot { margin-right: -27px; margin-left: -27px; }
  h1 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }