:root {
  color-scheme: light;
  --brand-200: #ded1eb;
  --brand-300: #c5add9;
  --brand-500: #7a4b9f;
  --brand-600: #593086;
  --brand-700: #49266f;
  --brand-950: #1a0a2c;
  --stone-0: #ffffff;
  --stone-25: #fffcf8;
  --stone-50: #f7f4ef;
  --stone-200: #dfd8d0;
  --stone-300: #c9bfb6;
  --stone-600: #695e64;
  --stone-900: #211b26;
  --negative-strong: #8e3735;
  --negative-soft: #f8e8e7;
  --text: var(--stone-900);
  --muted: var(--stone-600);
  --line: var(--stone-200);
  --line-strong: var(--stone-300);
  --focus: var(--brand-300);
  --shadow: 0 18px 42px rgba(33, 27, 38, 0.08);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  background: var(--stone-50);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  max-width: 100%;
  font: inherit;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.auth-body {
  display: grid;
  min-height: 100vh;
  overflow-x: hidden;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(247, 243, 250, 0.92), rgba(255, 249, 234, 0.62)),
    var(--stone-50);
}

.auth-shell {
  width: min(450px, 100%);
}

.auth-panel {
  overflow: hidden;
  border: 1px solid rgba(89, 48, 134, 0.12);
  border-radius: 18px;
  padding: 30px;
  background: var(--stone-25);
  box-shadow: var(--shadow);
}

.brand-row {
  display: flex;
  min-height: 32px;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  display: block;
  width: 184px;
  max-width: min(154px, 100%);
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
}

.brand-name {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 24px;
  align-items: center;
  border-left: 1px solid rgba(89, 48, 134, 0.18);
  padding-left: 10px;
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.auth-panel h1 {
  margin: 28px 0 20px;
  color: var(--brand-950);
  font-size: 32px;
  line-height: 1.1;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.login-form input {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  outline: none;
  padding: 0 12px;
  background: var(--stone-0);
  color: var(--text);
}

.login-form input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-200);
}

.login-form button {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 0 14px;
  color: #ffffff;
  background: var(--brand-600);
  cursor: pointer;
  font-weight: 720;
  white-space: nowrap;
}

.login-form button:hover {
  background: var(--brand-700);
  transform: translateY(-1px);
}

.login-form button:focus-visible,
.login-form input:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--focus);
}

.form-error {
  margin: 0 0 14px;
  border: 1px solid rgba(184, 77, 74, 0.22);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--negative-strong);
  background: var(--negative-soft);
  font-size: 14px;
}

@media (max-width: 520px) {
  .auth-body {
    padding: 16px;
  }

  .auth-panel {
    padding: 24px;
  }
}

/* Accepted Login v2 reference. Kept here so authenticated route CSS never
 * consumes the public Login blocking budget. */
@media (min-width: 761px) {
  [data-finance-ui="v2"].auth-body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    padding: var(--finance-space-6);
    color: var(--finance-text-primary);
    background:
      radial-gradient(circle at 18% 15%, rgba(209, 161, 58, 0.18), transparent 30%),
      radial-gradient(circle at 82% 78%, rgba(89, 48, 134, 0.24), transparent 38%),
      linear-gradient(135deg, #f9f6f1 0%, #f2ecf6 52%, #eee5f4 100%);
    font-family: var(--finance-font-sans);
  }

  [data-finance-ui="v2"].auth-body::before,
  [data-finance-ui="v2"].auth-body::after {
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    content: "";
    pointer-events: none;
  }

  [data-finance-ui="v2"].auth-body::before {
    top: -18vw;
    left: -12vw;
    width: 46vw;
    height: 46vw;
    background: rgba(89, 48, 134, 0.08);
    filter: blur(2px);
  }

  [data-finance-ui="v2"].auth-body::after {
    right: -8vw;
    bottom: -24vw;
    width: 52vw;
    height: 52vw;
    border: 1px solid rgba(89, 48, 134, 0.12);
    box-shadow: inset 0 0 0 18px rgba(255, 255, 255, 0.18);
  }

  [data-finance-ui="v2"] .auth-shell {
    width: min(480px, 100%);
  }

  [data-finance-ui="v2"] .auth-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--finance-radius-lg);
    padding: var(--finance-space-6);
    color: var(--finance-text-primary);
    background:
      linear-gradient(var(--finance-surface-floating), var(--finance-surface-floating)) padding-box,
      linear-gradient(135deg, rgba(89, 48, 134, 0.34), rgba(209, 161, 58, 0.3)) border-box;
    box-shadow: var(--finance-elevation-overlay);
    backdrop-filter: blur(22px) saturate(130%);
  }

  [data-finance-ui="v2"] .auth-panel::before {
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--finance-color-plan), var(--finance-color-brand));
    content: "";
  }

  [data-finance-ui="v2"] .brand-row {
    min-height: 52px;
    gap: var(--finance-space-3);
    border: 1px solid rgba(89, 48, 134, 0.1);
    border-radius: var(--finance-radius-md);
    padding: var(--finance-space-2) var(--finance-space-3);
    background: var(--finance-surface-chrome);
  }

  [data-finance-ui="v2"] .brand-logo {
    width: 172px;
    max-width: min(58%, 172px);
  }

  [data-finance-ui="v2"] .brand-name {
    min-height: 28px;
    border-left-color: rgba(89, 48, 134, 0.22);
    color: var(--finance-color-brand-strong);
    font-size: var(--finance-font-metadata);
    letter-spacing: 0.08em;
  }

  [data-finance-ui="v2"] .auth-panel h1 {
    margin: var(--finance-space-6) 0 var(--finance-space-5);
    color: var(--finance-color-brand-strong);
    font-size: var(--finance-font-title);
    font-weight: 720;
    letter-spacing: -0.035em;
    line-height: 1.05;
  }

  [data-finance-ui="v2"] .login-form {
    gap: var(--finance-space-4);
  }

  [data-finance-ui="v2"] .login-form label {
    gap: var(--finance-space-2);
    color: var(--finance-text-secondary);
    font-size: var(--finance-font-metadata);
    font-weight: 680;
  }

  [data-finance-ui="v2"] .login-form input {
    min-height: 46px;
    border-color: var(--finance-border-strong);
    border-radius: var(--finance-radius-sm);
    padding: 0 var(--finance-space-3);
    color: var(--finance-text-primary);
    background: var(--finance-surface-data);
    font-size: var(--finance-font-control);
  }

  [data-finance-ui="v2"] .login-form input:hover {
    border-color: rgba(89, 48, 134, 0.48);
  }

  [data-finance-ui="v2"] .login-form input:focus,
  [data-finance-ui="v2"] .login-form input:focus-visible {
    border-color: var(--finance-focus-color);
    outline: 2px solid var(--finance-focus-color);
    outline-offset: var(--finance-focus-offset);
    box-shadow: var(--finance-focus-ring);
  }

  [data-finance-ui="v2"] .login-form button {
    min-height: 46px;
    border-radius: var(--finance-radius-sm);
    color: var(--finance-text-on-dark);
    background: linear-gradient(135deg, var(--finance-color-brand), var(--finance-color-brand-strong));
    box-shadow: 0 10px 22px rgba(89, 48, 134, 0.2);
    font-size: var(--finance-font-control);
  }

  [data-finance-ui="v2"] .login-form button:hover {
    background: linear-gradient(135deg, #684093, var(--finance-color-brand-strong));
    box-shadow: 0 12px 26px rgba(89, 48, 134, 0.26);
  }

  [data-finance-ui="v2"] .login-form button:focus-visible {
    outline: 2px solid var(--finance-focus-color);
    outline-offset: var(--finance-focus-offset);
    box-shadow: var(--finance-focus-ring);
  }

  [data-finance-ui="v2"] .form-error {
    border-color: rgba(184, 77, 74, 0.32);
    border-radius: var(--finance-radius-sm);
    color: #7c2f2d;
    background: #fff3f2;
    font-size: var(--finance-font-body);
    line-height: var(--finance-line-body);
  }
}