/* =================== THEME / BASE =================== */
:root{
  --bg:#1f1f1f;
  --card:#2b2b2b;
  --text:#eee;
  --muted:#bbb;
  --border:#3a3a3a;
  --accent:#b39dff;
  --accent-hover:#9c87ff;
  --danger:#ef4444;
  --success:#22c55e;
}

*{ box-sizing: border-box; }

html, body{
  height:100%;
}

body{
  margin:0;
  font: 14px/1.45 -apple-system, system-ui, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:var(--bg);
  /* центрируем карточку */
  display:grid;
  place-items:center;
  /* небольшой паддинг на маленьких экранах */
  padding:20px;
}

/* =================== LAYOUT =================== */

/* Внешняя обёртка страницы (есть в твоих HTML) */
.wrap{
  width:100%;
  max-width: 460px;
  /* карточка */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 22px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Бренд сверху */
.brand{
  display:flex; flex-direction:column; align-items:center;
  gap:12px; margin-bottom:18px;
}
.brand img{ width:84px; height:84px; border-radius:18px; }
.brand h1{ margin:0; font-size:24px; letter-spacing:.4px; color:#f1f1f1; text-align:center; }

/* Заголовки внутри страниц (если понадобятся) */
h2{ margin:10px 0 8px; font-size:18px; color:#fff; }
p{ margin:8px 0; color:var(--muted); }

/* =================== FORMS =================== */

.field{
  display:flex; flex-direction:column; gap:6px; margin-bottom:14px;
}
.field > label{ font-size:12px; color:#9a9ab3; }
.field input{
  padding:12px 14px;
  border-radius:12px;
  background:#222; color:#fff;
  border:1px solid #26262e; outline:none;
}
.field input::placeholder{ color:#8e8ea6; }
.field input:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(179,157,255,.18);
}

/* Кнопки */
.actions{ display:flex; gap:10px; margin-top:8px; }
.btn{
  padding:12px 16px; border-radius:14px; border:0; cursor:pointer; font-weight:700;
  transition: transform .05s ease, background .15s ease, opacity .15s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--accent); color:#111; flex:1; }
.btn-primary:hover{ background:var(--accent-hover); }

.btn-ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--border);
}

/* Ссылки (если будут) */
a.link{ color:#c9c9c9; text-decoration:none; }
a.link:hover{ text-decoration:underline; }

/* Сообщения (общий блок + варианты) */
.msg{
  margin:10px 0 6px;
  padding:10px 12px;
  border-radius:10px;
  font-weight:600;
  display:none;           /* включаем из JS */
  word-wrap:break-word;
}
.msg.ok{
  display:block;
  background:#063b24;
  color:var(--success);
  border:1px solid #0e6b3f;
}
.msg.err{
  display:block;
  background:#3b0d0d;
  color:var(--danger);
  border:1px solid #7f1d1d;
}

/* Деактивация */
button[disabled], .btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* =================== RESPONSIVE =================== */

/* Чуть компактнее на очень узких экранах */
@media (max-width: 380px){
  .wrap{ padding:18px 16px; border-radius:14px; }
  .brand img{ width:72px; height:72px; border-radius:16px; }
  .brand h1{ font-size:22px; }
}

/* =================== SPECIAL STATES (VERIFY/NEWPASS) =================== */

/* Центровка коротких одноэкранных состояний (например, verify ok/err) */
.state{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
}
.state .title{ font-size:18px; font-weight:800; color:#fff; }
.state .desc{ color:var(--muted); }

/* Кнопка «Back to login» как вторичная */
.actions .btn-secondary{
  background:#26262e; color:#fff; border:1px solid var(--border);
}
.actions .btn-secondary:hover{ background:#2f2f36; }

/* =================== ACCESSIBILITY =================== */

:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* =================== OPTIONAL: LIGHT SCHEME (если вдруг понадобится) =================== */
/*
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f7fb; --card:#fff; --text:#0b0b0f; --muted:#555; --border:#e6e6ef;
    --accent:#6d5efc; --accent-hover:#5848fb;
  }
  body{ color:var(--text); background:var(--bg); }
  .wrap{ border:1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.06); }
  .field input{ background:#fff; color:#0b0b0f; border-color:#d8d8e6; }
  .btn-primary{ color:#fff; }
}
*/