:root {
  color-scheme: dark;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --bg: #0a0d12;
  --panel: #111820;
  --border: #25313d;
  --text: #e6edf5;
  --muted: #97a5b4;
  --accent: #77ddb0;
  --danger: #ffaaaa;
}

* { box-sizing: border-box; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at 50% 9%, rgba(49, 102, 83, .15), transparent 45%), var(--bg);
  color: var(--text);
}
a { color: inherit; }
.login-shell { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 44px 22px 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; margin: 0 auto 30px; text-decoration: none; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(116, 220, 174, .24); border-radius: 12px; background: rgba(97, 200, 153, .08); color: var(--accent); }
.brand-mark svg { width: 33px; height: 33px; }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { font-size: 18px; font-weight: 650; letter-spacing: -.45px; }
.brand-copy small { color: #8492a3; font-size: 8px; font-weight: 600; letter-spacing: 1.4px; }
.login-card { width: min(100%, 424px); border: 1px solid rgba(138, 163, 184, .17); border-radius: 15px; background: linear-gradient(145deg, rgba(23, 33, 43, .98), rgba(15, 21, 29, .98)); padding: 33px 34px 25px; box-shadow: 0 24px 80px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .025); }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #a6b4c1; font-size: 10px; font-weight: 580; letter-spacing: .35px; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(119, 221, 176, .09); }
h1 { margin: 17px 0 8px; font-size: 25px; font-weight: 620; letter-spacing: -.6px; }
.intro { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
#login-form { margin-top: 27px; }
.field-group { display: grid; gap: 8px; margin-bottom: 17px; }
.field-group label { color: #d6e0e9; font-size: 11px; font-weight: 560; }
.field-group input { width: 100%; min-height: 47px; border: 1px solid #34424f; border-radius: 8px; outline: none; background: #0d141b; padding: 0 13px; color: var(--text); font: inherit; font-size: 13px; transition: border-color .16s ease, box-shadow .16s ease; }
.field-group input:hover { border-color: #536574; }
.field-group input:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(119, 221, 176, .13); }
.field-group small { color: #7f8e9f; font-size: 10px; }
.form-error { display: none; margin: 0 0 14px; border: 1px solid rgba(255, 137, 137, .22); border-radius: 7px; background: rgba(115, 43, 49, .16); padding: 10px 11px; color: var(--danger); font-size: 11px; line-height: 1.5; }
.form-error.visible { display: block; }
.submit-button { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 9px; border: 1px solid #70d9aa; border-radius: 8px; background: #72d9ab; color: #0b281c; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; transition: background .16s ease, transform .12s ease; }
.submit-button:hover:not(:disabled) { background: #8ce8bb; }
.submit-button:active:not(:disabled) { transform: translateY(1px); }
.submit-button:focus-visible { outline: 3px solid rgba(119, 221, 176, .3); outline-offset: 3px; }
.submit-button:disabled { opacity: .72; cursor: wait; }
.submit-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.security-note { display: flex; align-items: flex-start; gap: 8px; border-top: 1px solid #25313b; margin-top: 23px; padding-top: 16px; color: #8493a3; font-size: 10px; line-height: 1.6; }
.lock-icon { flex: 0 0 auto; color: #86cba8; }
.lock-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.page-footer { display: flex; width: min(100%, 424px); align-items: center; justify-content: space-between; margin-top: 18px; color: #6f7e8e; font-size: 9px; }
.page-footer > span { display: inline-flex; align-items: center; gap: 7px; }
.page-footer i { width: 5px; height: 5px; border-radius: 50%; background: #75d4a7; }
.page-footer a { color: #93a2b2; text-decoration: none; }
.page-footer a:hover { color: var(--accent); }
.setup-card { padding-top: 31px; }
.setup-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(119, 221, 176, .2); border-radius: 11px; background: rgba(119, 221, 176, .07); margin-bottom: 22px; color: var(--accent); }
.setup-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; }
.setup-card pre { overflow-x: auto; border: 1px solid #293945; border-radius: 8px; background: #0b1117; margin: 22px 0 12px; padding: 14px; color: #bcebd2; font-size: 12px; }
.setup-help { margin: 0; color: #8290a0; font-size: 10px; line-height: 1.7; }
.skip-link { position: absolute; top: 12px; left: 12px; z-index: 2; transform: translateY(-160%); border-radius: 5px; background: #dff7ea; padding: 8px 10px; color: #10241a; font-size: 12px; }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 520px) { .login-shell { justify-content: flex-start; padding: max(35px, 8vh) 17px 20px; } .brand { margin-bottom: 24px; } .login-card { padding: 27px 22px 22px; } h1 { font-size: 23px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }