:root {
    --bg: #F3F5F9;
    --surface: #FFFFFF;
    --surface-2: #F7F8FB;
    --border: #E1E5ED;
    --text: #171B2B;
    --text-muted: #6B7284;
    --accent: #2F7D6B;
    --accent-contrast: #FFFFFF;
    --accent-soft: #DFF0EA;
    --success-bg: #DFF5E6;
    --success-text: #157A42;
    --danger-bg: #FBE4E1;
    --danger-text: #B23A2E;
    --shadow: 0 1px 2px rgba(23,27,43,0.04), 0 8px 24px rgba(23,27,43,0.06);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #12141C;
      --surface: #1A1D28;
      --surface-2: #21242F;
      --border: #2C303D;
      --text: #E7E9F1;
      --text-muted: #9BA0B1;
      --accent: #4FB89D;
      --accent-contrast: #06231C;
      --accent-soft: #163B33;
      --success-bg: #163826;
      --success-text: #6FDA9C;
      --danger-bg: #3A1E1B;
      --danger-text: #F19488;
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
    }
  }
  :root[data-theme="dark"] {
    --bg: #12141C;
    --surface: #1A1D28;
    --surface-2: #21242F;
    --border: #2C303D;
    --text: #E7E9F1;
    --text-muted: #9BA0B1;
    --accent: #4FB89D;
    --accent-contrast: #06231C;
    --accent-soft: #163B33;
    --success-bg: #163826;
    --success-text: #6FDA9C;
    --danger-bg: #3A1E1B;
    --danger-text: #F19488;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; margin: 0; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-variant-numeric: tabular-nums;
  }

  label.f-label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
  .field { display: flex; flex-direction: column; min-width: 0; }

  .inp, select.inp, textarea.inp {
    width: 100%; padding: 9px 11px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 7px; font-size: 13.5px; color: var(--text); font-family: inherit;
  }
  .inp:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

  .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; }
  .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn-primary { background: var(--accent); color: var(--accent-contrast); }
  .btn-primary:hover { filter: brightness(1.08); }
  .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
  .btn-ghost:hover { background: var(--surface-2); }

  .hidden { display: none !important; }

  .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
  .login-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px; box-shadow: var(--shadow); }
  .login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
  .brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .login-brand-name { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
  .login-brand-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
  .login-tabs { display: flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 22px; }
  .login-tab { flex: 1; text-align: center; padding: 8px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; user-select: none; }
  .login-tab.active { background: var(--accent); color: var(--accent-contrast); }
  .login-field { margin-bottom: 16px; }
  .login-error { background: var(--danger-bg); color: var(--danger-text); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; margin-bottom: 16px; }
  .login-footer-link { text-align: center; font-size: 12.5px; color: var(--text-muted); margin-top: 16px; }

  .success-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
  .success-card { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px; box-shadow: var(--shadow); text-align: center; }
  .success-icon { width: 52px; height: 52px; border-radius: 999px; background: var(--success-bg); color: var(--success-text); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
  .success-title { font-weight: 800; font-size: 17px; margin-bottom: 6px; }
  .success-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; }
  .success-info { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; text-align: left; font-size: 13px; margin-bottom: 22px; }
  .success-info div + div { margin-top: 6px; }
  .success-info b { color: var(--text-muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; display: inline-block; min-width: 90px; }

.login-brand-name { margin: 0; }
.full-width { width: 100%; justify-content: center; }
.login-tab { cursor: default; }
.login-tab[aria-disabled="true"] { opacity: .65; }
.password-field { position: relative; }
.password-field .inp { padding-right: 78px; }
.password-toggle { position: absolute; right: 6px; top: 4px; bottom: 4px; border: 0; border-radius: 4px; background: var(--surface-2); color: var(--text); cursor: pointer; font: inherit; font-size: 12px; padding: 0 8px; }
.password-toggle:focus-visible { outline: 2px solid var(--accent); }
.btn:disabled { opacity: .7; cursor: wait; }
.success-info { overflow-wrap: anywhere; }
@media (max-width: 420px) { .login-wrap { padding: 16px; } .login-card { padding: 24px; } }