:root {
  color-scheme: dark;
  --auth-bg: #05070d;
  --auth-panel: #0d101c;
  --auth-text: #f5f4fa;
  --auth-muted: #a9a8b7;
  --auth-soft: #77788c;
  --auth-line: rgba(255,255,255,.11);
  --auth-line-strong: rgba(177,126,255,.32);
  --auth-purple: #9b5cff;
  --auth-green: #55e98b;
  --auth-danger: #ff7d8c;
  --auth-shadow: 0 28px 80px rgba(0,0,0,.42);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--auth-bg); }
body.auth-page {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 79% 10%, rgba(109,45,232,.16), transparent 30rem),
    radial-gradient(circle at 8% 68%, rgba(85,233,139,.035), transparent 28rem),
    var(--auth-bg);
  color: var(--auth-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.auth-page a { color: inherit; }
.auth-page button, .auth-page input { font: inherit; }
.auth-page button { cursor: pointer; }
.auth-page img { display: block; max-width: 100%; }
.auth-page :focus-visible { outline: 3px solid var(--auth-green); outline-offset: 3px; }

.auth-header {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--auth-line);
  background: rgba(5,7,13,.84);
  backdrop-filter: blur(20px);
}

.auth-header-inner {
  width: min(1200px, calc(100% - 48px));
  min-height: 68px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.auth-brand { width: max-content; display: inline-flex; align-items: center; text-decoration: none; }
.auth-brand img { width: 220px; height: 52px; object-fit: contain; }
.auth-header-action { display: flex; align-items: center; gap: 10px; color: var(--auth-muted); font-size: .86rem; }

.auth-header-link {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--auth-line);
  border-radius: 9px;
  background: rgba(255,255,255,.025);
  color: var(--auth-text) !important;
  font-weight: 800;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.auth-header-link:hover { transform: translateY(-1px); border-color: rgba(155,92,255,.3); background: rgba(155,92,255,.08); }

.auth-main { width: 100%; flex: 1; display: grid; place-items: center; padding: clamp(36px,7vh,76px) 24px; }
.auth-stage { width: min(100%, 520px); margin: 0 auto; }
.auth-page-register .auth-stage { width: min(100%, 680px); }
.auth-heading { margin-bottom: 20px; text-align: center; }
.auth-eyebrow { display: inline-block; margin-bottom: 10px; color: var(--auth-green); font-size: .72rem; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.auth-heading h1 { margin: 0; font-size: clamp(2rem,4vw,2.85rem); line-height: 1.04; letter-spacing: -.04em; }
.auth-heading p { max-width: 560px; margin: 11px auto 0; color: var(--auth-muted); font-size: .95rem; line-height: 1.55; }

.auth-card {
  width: 100%;
  padding: clamp(24px,4vw,34px);
  border: 1px solid var(--auth-line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), rgba(13,16,28,.94);
  box-shadow: var(--auth-shadow);
}

.account-login-form, .auth-registration-form { display: grid; gap: 18px; }
.account-login-form label, .auth-registration-form label { display: grid; gap: 8px; color: var(--auth-text); font-size: .84rem; font-weight: 760; }
.account-login-form input,
.auth-registration-form input[type="text"],
.auth-registration-form input[type="email"],
.auth-registration-form input[type="password"] {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--auth-line);
  border-radius: 10px;
  background: rgba(5,7,13,.68);
  color: var(--auth-text);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.account-login-form input::placeholder, .auth-registration-form input::placeholder { color: #686b7c; }
.account-login-form input:hover,
.auth-registration-form input[type="text"]:hover,
.auth-registration-form input[type="email"]:hover,
.auth-registration-form input[type="password"]:hover { border-color: rgba(255,255,255,.17); }
.account-login-form input:focus,
.auth-registration-form input[type="text"]:focus,
.auth-registration-form input[type="email"]:focus,
.auth-registration-form input[type="password"]:focus {
  outline: none;
  border-color: rgba(155,92,255,.66);
  background: rgba(7,9,16,.9);
  box-shadow: 0 0 0 3px rgba(155,92,255,.11);
}

.auth-password-row { margin: -4px 0 0; display: flex; align-items: center; justify-content: flex-end; }
.auth-text-link, .auth-link-row a, .auth-consent a, .auth-success-panel a { color: #c8a9ff; font-weight: 760; text-decoration: none; }
.auth-text-link:hover, .auth-link-row a:hover, .auth-consent a:hover, .auth-success-panel a:hover { color: var(--auth-green); text-decoration: underline; text-underline-offset: 3px; }

.primary-button, .secondary-button {
  min-height: 48px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 850;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.primary-button { border: 1px solid transparent; background: linear-gradient(135deg, var(--auth-purple), #7931ea); color: #fff; box-shadow: 0 12px 34px rgba(123,50,236,.27); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(123,50,236,.38); }
.primary-button:disabled { cursor: wait; opacity: .7; transform: none; }
.secondary-button { border: 1px solid var(--auth-line); background: rgba(255,255,255,.025); color: var(--auth-text); }
.secondary-button:hover { transform: translateY(-1px); border-color: rgba(155,92,255,.3); background: rgba(155,92,255,.07); }
.auth-card .primary-button { width: 100%; }

.auth-divider { margin: 22px 0; display: flex; align-items: center; gap: 12px; color: var(--auth-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--auth-line); }
.auth-secondary-actions { display: grid; gap: 10px; }
.auth-link-row { margin-top: 18px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; color: var(--auth-muted); font-size: .82rem; }
.auth-link-row-centered { text-align: center; }

.auth-notice, .auth-inline-status, .account-login-error {
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid var(--auth-line);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  color: var(--auth-muted);
  font-size: .82rem;
  line-height: 1.45;
}
.auth-notice[hidden], .auth-inline-status[hidden], .account-login-error[hidden], .auth-success-panel[hidden], [data-local-login-panel][hidden] { display: none !important; }
.auth-notice.is-success, .auth-success-panel { border-color: rgba(85,233,139,.22); background: rgba(85,233,139,.055); }
.auth-notice.is-success { color: #c9f7d6; }
.account-login-error { color: #ffd5db !important; border-color: rgba(255,125,140,.24); background: rgba(255,125,140,.06); }
.auth-inline-status { margin-top: -4px; margin-bottom: 0; }
.auth-inline-status[data-error="true"] { color: #ffd5db; border-color: rgba(255,125,140,.24); background: rgba(255,125,140,.06); }
.auth-captcha { min-height: 0; }
.auth-captcha:not([hidden]) { display: flex; justify-content: center; }

.auth-field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.password-strength-panel { padding: 16px; border: 1px solid var(--auth-line); border-radius: 12px; background: rgba(255,255,255,.018); }
.password-strength-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: .78rem; }
.password-strength-heading strong { color: var(--auth-text); }
.password-strength-heading span { color: var(--auth-muted); }
.password-strength-heading span[data-score="0"], .password-strength-heading span[data-score="1"], .password-strength-heading span[data-score="2"] { color: #ff9aa5; }
.password-strength-heading span[data-score="4"], .password-strength-heading span[data-score="5"] { color: var(--auth-green); }
.password-strength-meter { height: 5px; margin: 11px 0 14px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.08); }
.password-strength-meter i { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--auth-danger); transition: width .2s ease, background .2s ease; }
.password-strength-meter[data-score="1"] i { width: 20%; }
.password-strength-meter[data-score="2"] i { width: 40%; }
.password-strength-meter[data-score="3"] i { width: 60%; background: #ffb347; }
.password-strength-meter[data-score="4"] i { width: 80%; background: #b9df5d; }
.password-strength-meter[data-score="5"] i { width: 100%; background: var(--auth-green); }
.password-checklist { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 18px; list-style: none; color: var(--auth-soft); font-size: .74rem; }
.password-checklist li::before { content: "○"; display: inline-block; width: 18px; color: var(--auth-soft); }
.password-checklist li[data-passed="true"] { color: #bdfbcb; }
.password-checklist li[data-passed="true"]::before { content: "✓"; color: var(--auth-green); }

.auth-consent { grid-template-columns: 18px minmax(0,1fr) !important; align-items: start; gap: 10px !important; color: var(--auth-muted) !important; font-size: .78rem !important; font-weight: 500 !important; line-height: 1.45; }
.auth-consent input { width: 16px !important; min-height: 16px !important; height: 16px; margin: 2px 0 0; accent-color: var(--auth-purple); }

.auth-success-panel { padding: 22px; border: 1px solid rgba(85,233,139,.22); border-radius: 14px; text-align: center; }
.auth-success-icon { width: 44px; height: 44px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; background: rgba(85,233,139,.12); color: var(--auth-green); font-weight: 900; }
.auth-success-panel h2 { margin: 0; font-size: 1.35rem; }
.auth-success-panel p { margin: 9px 0 18px; color: var(--auth-muted); line-height: 1.55; }

.account-prototype-note { margin: 18px 0 10px; color: var(--auth-muted); font-size: .78rem; line-height: 1.45; }
.test-account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.test-account-card { min-height: 66px; padding: 11px; display: grid; gap: 3px; text-align: left; border: 1px solid var(--auth-line); border-radius: 10px; background: rgba(255,255,255,.02); color: var(--auth-text); }
.test-account-card:hover { border-color: var(--auth-line-strong); background: rgba(155,92,255,.06); }
.test-account-card span, .test-account-card small { color: var(--auth-muted); }

.auth-footer {
  flex: 0 0 auto;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--auth-line);
  color: var(--auth-soft);
  font-size: .72rem;
}
.auth-footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.auth-footer a { color: var(--auth-muted); text-decoration: none; }
.auth-footer a:hover { color: var(--auth-text); }
.login-page-version { color: var(--auth-soft); }

@media (max-width: 720px) {
  .auth-header-inner, .auth-footer { width: min(100% - 32px, 680px); }
  .auth-header-inner { min-height: 62px; }
  .auth-brand img { width: 176px; height: 44px; }
  .auth-header-action span { display: none; }
  .auth-main { padding: 34px 16px 44px; }
  .auth-card { border-radius: 16px; }
  .auth-field-grid, .password-checklist { grid-template-columns: 1fr; }
  .auth-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 420px) {
  .auth-header-link { min-height: 38px; padding: 0 11px; font-size: .78rem; }
  .auth-brand img { width: 156px; }
  .auth-heading h1 { font-size: 2rem; }
  .auth-card { padding: 22px 18px; }
  .test-account-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-page *, .auth-page *::before, .auth-page *::after {
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}