@font-face { font-family: Montserrat; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/__account/montserrat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/__account/montserrat-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --bg: #f4f6f9;
  --card: #ffffff;
  --soft: #f1f3f7;
  --line: rgba(30, 40, 60, .1);
  --text: #2e2d2c;
  --muted: #6e6e6b;
  --faint: #9a9a96;
  --blue: #2c68ff;
  --red: #e5383b;
  --red-bg: rgba(229, 56, 59, .1);
  --green: #00a04b;
  --green-bg: rgba(0, 221, 104, .12);
  --grad: linear-gradient(45deg, #2c68ff, #00dd68);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f1114;
    --card: #181b20;
    --soft: #20242a;
    --line: rgba(255, 255, 255, .1);
    --text: #f3f4f2;
    --muted: #a3a6a2;
    --faint: #7d817c;
    --red: #ff5a5d;
    --green: #2fd37a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 16px/1.5 Montserrat, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
.wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); gap: 18px; }
.card { position: relative; overflow: hidden; width: 100%; max-width: 400px; background: var(--card); border-radius: 30px; padding: 40px 30px 30px; box-shadow: 0 1px 2px rgba(30, 40, 60, .04), 0 12px 32px rgba(30, 40, 60, .08); text-align: center; }
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad); }
.login-brand { display: flex; justify-content: center; align-items: flex-start; gap: 13px; color: var(--text); }
.login-brand .logo-mark { width: 50px; height: 50px; flex: none; }
.login-brand .logo-word { height: 43px; width: auto; margin-top: 4.3px; }
.tagline { margin: 8px 0 26px; font-size: 11px; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--muted); }
h1 { margin: 0 0 6px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.muted { color: var(--muted); margin: 0; }
form { display: flex; flex-direction: column; gap: 12px; text-align: left; margin-top: 22px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.field input { font: inherit; font-size: 16px; font-weight: 500; color: var(--text); background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; outline: none; width: 100%; }
.field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(44, 104, 255, .16); }
.hint { margin: -2px 0 0; font-size: 12.5px; color: var(--faint); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; border-radius: 999px; padding: 14px 20px; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none; margin-top: 6px; }
.btn.primary { background: var(--grad); color: #fff; box-shadow: 0 8px 22px rgba(44, 104, 255, .24); }
.btn.primary:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .6; cursor: default; }
section > .btn { margin-top: 22px; }
.link { display: inline-block; margin-top: 18px; color: var(--blue); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.link:hover { text-decoration: underline; }
.msg { border-radius: 14px; padding: 11px 14px; font-size: 14px; font-weight: 600; text-align: left; }
.msg.error { background: var(--red-bg); color: var(--red); }
.msg.ok { background: var(--green-bg); color: var(--green); margin-top: 20px; }
.foot { margin: 0; font-size: 13px; color: var(--faint); text-align: center; }
.foot a { color: var(--muted); }
@media (max-width: 420px) {
  .card { padding: 36px 22px 26px; border-radius: 26px; }
  .login-brand .logo-mark { width: 44px; height: 44px; }
  .login-brand .logo-word { height: 38px; margin-top: 3.8px; }
}