:root{
  --bg-void:#0a0d13; --bg-panel:#10141c; --bg-panel-2:#141924; --bg-raised:#181e2a;
  --line:#1e2530; --line-soft:#171c26;
  --text:#e7e9ee; --text-dim:#8891a0; --text-faint:#4d5563;
  --amber:#e8a33d; --teal:#2fd6a9; --coral:#ef6461;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:var(--bg-void); color:var(--text); font-family:'Inter', sans-serif;
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
.mono{ font-family:'JetBrains Mono',monospace; }

.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(#171c26 1px, transparent 1px), linear-gradient(90deg, #171c26 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 55% at 50% 0%, black 30%, transparent 85%);
  opacity:.45;
}


/* ---------- 2. LAYOUT SHELL ---------- */
nav{ position:relative; z-index:2; border-bottom:1px solid var(--line); }
nav .inner{ max-width:1100px; margin:0 auto; padding:0 32px; height:66px; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px; font-family:'Space Grotesk',sans-serif; }
.logo svg{ width:20px; height:20px; }
nav .nav-link{ font-size:13.5px; color:var(--text-dim); }
nav .nav-link:hover{ color:var(--text); }

.page{
  position:relative; z-index:1; min-height:calc(100vh - 67px);
  display:flex; align-items:center; justify-content:center; padding:60px 24px;
}
.auth-card{
  width:420px; max-width:100%; background:var(--bg-panel); border:1px solid var(--line);
  border-radius:16px; padding:38px 34px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
}
/* модификатор для карточек с иконкой-статусом по центру и более широким контентом
   (forgot-password / new-password / verify-account) */
.auth-card.wide{ width:440px; padding:40px 34px; text-align:center; }

.auth-icon{ width:44px; height:44px; border-radius:10px; background:var(--bg-raised); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:19px; }

.auth-head{ text-align:center; margin-bottom:28px; }
.auth-card h1{ font-family:'Space Grotesk',sans-serif; font-size:23px; font-weight:600; margin-bottom:8px; }
.auth-head p, .auth-card > p{ font-size:13.5px; color:var(--text-dim); line-height:1.6; }


/* ---------- 3. OAUTH BUTTONS + DIVIDER ---------- */
.oauth-group{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; }
.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; padding:12px; border-radius:9px; border:1px solid var(--line);
  background:var(--bg-panel-2); color:var(--text); font-size:14px; font-weight:600;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.oauth-btn:hover{ border-color:var(--text-faint); background:var(--bg-raised); }
.oauth-btn svg{ width:18px; height:18px; flex-shrink:0; }
.oauth-btn.apple svg{ fill:var(--text); }

.divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--text-faint); font-size:12px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.divider::before, .divider::after{ content:""; flex:1; height:1px; background:var(--line); }


/* ---------- 4. FORM FIELDS ---------- */
.form-row{ margin-bottom:16px; }
.form-row-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.form-row label{ display:block; font-size:11.5px; color:var(--text-faint); margin-bottom:7px; font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.04em; }
.form-row a.forgot{ font-size:11.5px; color:var(--text-faint); }
.form-row a.forgot:hover{ color:var(--amber); }
.form-row input{
  width:100%; background:var(--bg-panel-2); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; color:var(--text); font-size:14px; outline:none; font-family:'JetBrains Mono',monospace;
  transition:border-color .15s;
}
.form-row input:focus{ border-color:var(--amber); }
.form-row input.invalid{ border-color:var(--coral); }
.form-row.split{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-hint{ font-size:11.5px; color:var(--text-faint); margin-top:6px; }


/* ---------- 5. SUBMIT BUTTON & AUXILIARY LINKS ---------- */
.submit-btn{
  width:100%; padding:13px; border-radius:9px; background:var(--amber); color:#1a1002; font-weight:700;
  font-size:14.5px; border:none; cursor:pointer; margin-top:6px; font-family:'Inter',sans-serif;
}
.submit-btn:hover{ background:#f0af51; }
.submit-btn:disabled{ opacity:.5; cursor:not-allowed; }

.switch-line{ text-align:center; margin-top:22px; font-size:13px; color:var(--text-dim); }
.switch-line a{ color:var(--amber); font-weight:600; }
.switch-line a:hover{ text-decoration:underline; }

.legal-note{ text-align:center; font-size:11.5px; color:var(--text-faint); margin-top:18px; line-height:1.6; }
.legal-note a{ color:var(--text-dim); text-decoration:underline; }

/* полноширинные кнопки-ссылки (используются на verify-account: "Войти",
   "Отправить письмо повторно" и т.п. вместо <button> формы) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:9px; font-size:14px; font-weight:600; cursor:pointer; border:1px solid transparent; width:100%; }
.btn-primary{ background:var(--amber); color:#1a1002; }
.btn-primary:hover{ background:#f0af51; }
.btn-ghost{ color:var(--text-dim); border-color:var(--line); background:transparent; }
.btn-ghost:hover{ color:var(--text); border-color:var(--text-faint); }


/* ---------- 6. ERROR BOX ---------- */
.error-box{
  background:rgba(239,100,97,0.08); border:1px solid rgba(239,100,97,0.35); color:var(--coral);
  border-radius:8px; padding:10px 14px; font-size:12.5px; margin-bottom:18px; display:none;
}
.error-box.show{ display:block; }


/* ==========================================================================
   7. FORGOT-PASSWORD: состояние "письмо отправлено"
   ========================================================================== */
.sent-state{ display:none; text-align:center; }
.sent-state.show{ display:block; }
.sent-state .auth-icon{ background:rgba(47,214,169,0.12); color:var(--teal); }
.sent-state p{ font-size:13.5px; color:var(--text-dim); line-height:1.7; margin-bottom:22px; }
.sent-state p b{ color:var(--text); }
.resend-link{ font-size:12.5px; color:var(--text-faint); }
.resend-link a{ color:var(--amber); font-weight:600; }


/* ==========================================================================
   8. NEW-PASSWORD: индикатор силы пароля + совпадение паролей
   ========================================================================== */
.strength{ display:flex; gap:4px; margin-top:9px; }
.strength i{ flex:1; height:3px; border-radius:2px; background:var(--line); display:block; }
.strength.weak i:nth-child(1){ background:var(--coral); }
.strength.medium i:nth-child(1), .strength.medium i:nth-child(2){ background:var(--amber); }
.strength.strong i{ background:var(--teal); }
.strength-label{ font-size:11px; color:var(--text-faint); margin-top:6px; }

.match-hint{ font-size:11.5px; margin-top:6px; display:none; }
.match-hint.show{ display:block; }
.match-hint.ok{ color:var(--teal); }
.match-hint.bad{ color:var(--coral); }

.req-list{ list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:5px; }
.req-list li{ font-size:11.5px; color:var(--text-faint); display:flex; gap:7px; align-items:center; }
.req-list li::before{ content:"○"; font-size:9px; }
.req-list li.met{ color:var(--teal); }
.req-list li.met::before{ content:"●"; color:var(--teal); }


/* ==========================================================================
   9. VERIFY-ACCOUNT: статус-иконки, состояния (view), спиннер
   ========================================================================== */
.status-icon{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; font-size:28px; }
.status-icon.pending{ background:var(--bg-raised); color:var(--amber); }
.status-icon.success{ background:rgba(47,214,169,0.12); color:var(--teal); }
.status-icon.error{ background:rgba(239,100,97,0.1); color:var(--coral); }

.desc{ font-size:13.5px; color:var(--text-dim); line-height:1.7; margin-bottom:26px; }
.desc b{ color:var(--text); }

/* переключение состояний одной страницы: ожидание / проверка / успех / ошибка.
   В реальном Django-view рендерится только один блок сразу через контекст —
   класс .show используется здесь только для JS-демонстрации всех состояний. */
.view{ display:none; }
.view.show{ display:block; }

.spinner{
  width:22px; height:22px; border-radius:50%; border:2.5px solid var(--line); border-top-color:var(--amber);
  animation:spin .8s linear infinite; margin:0 auto;
}
@keyframes spin{ to{ transform:rotate(360deg); } }