:root{
  --bg:#000;
  --text:#e9eaee;
  --muted:#a7adb5;
  --panel:#191919;
  --border:#262a31;
  --green:#22c36a;
  --red:#ef5350;

  --accent:#f5a623; /* для кнопок скидання пароля */
}

/* BASE */
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;
  display:grid;
  place-items:center;
  padding:24px;
}

/* FORM WRAPPERS (unified for login, reset, request, invalid) */
.auth-container{
  width:100%;
  max-width:420px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:0 10px 40px rgba(0,0,0,.45);
  display:grid;
  gap:14px;
}

.auth-container h2{
  margin:0 0 6px;
  font-weight:900;
  letter-spacing:.2px;
}

.auth-container p{
  font-size:14px;
  color:var(--muted);
  margin:0 0 10px;
}

/* INPUTS */
.auth-container input[type="email"],
.auth-container input[type="password"],
.auth-container input[type="text"]{
  height:44px;
  border-radius:12px;
  border:1px solid #2a2d34;
  background:#111214;
  color:var(--text);
  padding:0 12px;
  outline:none;
}

.auth-container input[type="email"]:focus,
.auth-container input[type="password"]:focus,
.auth-container input[type="text"]:focus{
  border-color:#3a3f48;
}

/* BUTTONS */
.auth-container .btn{
  height:44px;
  border:none;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  background:var(--green);
  color:#0b0b0b;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.auth-container .btn:hover{
  filter:brightness(1.05);
}

/* Accent button (for password reset submit) */
.auth-container .btn-accent{
  height:35px;
  border:none;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
  background:var(--green);
  color:#0b0b0b;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* LINKS */
.links{
  margin-top:6px;
  text-align:center;
}

.links a{
  font-size:14px;
  color:var(--muted);
  text-decoration:none;
  transition:.2s;
}

.links a:hover{
  color:var(--text);
}

/* ERROR BOX */
.error-messages{
  background:#3a1e1f;
  border:1px solid #5a2a2d;
  color:#ffb3b3;
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
}

.error-messages ul{
  margin:0;
  padding-left:18px;
}

/* SUCCESS BOX */
.success-box{
  background:#112619;
  border:1px solid #1d4c2c;
  color:#b6ffce;
  border-radius:12px;
  padding:12px;
  font-size:14px;
}

/* INVALID TOKEN PAGE STYLE */
.invalid-box{
  background:#241e1e;
  border:1px solid #3b3232;
  color:#ffcccc;
  border-radius:12px;
  padding:12px;
  font-size:14px;
}

/* SCROLLBARS */
:root {
  --sb-size: 8px;
  --sb-track: #1e1f22;
  --sb-thumb: #7e828a;
  --sb-thumb-hover: #a0a6af;
  --sb-corner: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}

*::-webkit-scrollbar {
  width: var(--sb-size);
  height: var(--sb-size);
}
*::-webkit-scrollbar-track { background: var(--sb-track); }
*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 8px;
  border: 2px solid var(--sb-track);
}
*::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); }
*::-webkit-scrollbar-corner { background: var(--sb-corner); }

html, body, * { scrollbar-gutter: stable both-edges; }