/* Torkzt · auth.css — форма входа: страница и нижняя шторка.
   Один акцент на весь блок. Синие ссылки Bootstrap отсюда убраны намеренно:
   на скриншоте зелёный логотип, синяя лупа и синие ссылки спорили друг с
   другом, и кнопка «Войти» терялась среди них. */

:root {
  --auth-accent:       #00b874;
  --auth-accent-press: #009a61;
  --auth-accent-soft:  rgba(0, 184, 116, .14);
  --auth-ink:          #0f1720;
  --auth-muted:        #6b7683;
  --auth-line:         #e3e7ec;
  --auth-line-strong:  #cfd6dd;
  --auth-surface:      #fff;
  --auth-bg:           #f2f5f8;
  --auth-radius:       14px;
  --auth-danger:       #d64545;
}

/* ───────────────────────── страница /login.php ───────────────────────── */

.auth-page {
  min-height: calc(100vh - 220px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px 40px;
  background: var(--auth-bg);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--auth-surface);
  border: 1px solid var(--auth-line);
  border-radius: 20px;
  padding: 28px 24px 24px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 32px rgba(16, 24, 40, .06);
}

@media (max-width: 480px) {
  /* На телефоне карточка больше не висит посреди пустого серого поля:
     она прижата к верху и занимает ширину экрана. */
  .auth-page { min-height: 0; padding: 16px 12px 28px; }
  .auth-card { padding: 24px 18px 20px; border-radius: 18px; }
}

/* ─────────────────────────── общая форма ─────────────────────────── */

.auth-head { text-align: center; margin-bottom: 22px; }

.auth-title {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--auth-ink);
}

.auth-sub { margin: 0; font-size: 14.5px; color: var(--auth-muted); }

.auth-field { margin-bottom: 16px; }

.auth-field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--auth-ink);
}

.auth-input {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--auth-surface);
  border: 1.5px solid var(--auth-line-strong);
  border-radius: var(--auth-radius);
  transition: border-color .15s, box-shadow .15s;
}

.auth-input:focus-within {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 4px var(--auth-accent-soft);
}

.auth-input-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-left: 14px;
  color: #98a2ac;
  pointer-events: none;
}

.auth-input:focus-within .auth-input-ico { color: var(--auth-accent); }

.auth-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 14px 12px;
  /* 16px обязательны: при меньшем размере Safari на iOS зумит страницу
     при фокусе на поле и ломает вёрстку шторки */
  font-size: 16px;
  color: var(--auth-ink);
  border-radius: var(--auth-radius);
}

.auth-input input::placeholder { color: #a6aeb8; }

.auth-eye {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #98a2ac;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.auth-eye svg { width: 18px; height: 18px; }
.auth-eye .auth-eye-off { display: none; }
.auth-eye.is-on .auth-eye-on { display: none; }
.auth-eye.is-on .auth-eye-off { display: block; }
.auth-eye.is-on { color: var(--auth-accent); }

/* чекбокс */
.auth-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 20px;
  font-size: 14px;
  color: var(--auth-ink);
  cursor: pointer;
  user-select: none;
}

.auth-remember input {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 20px;
  accent-color: var(--auth-accent);
  cursor: pointer;
}

/* главная кнопка — сплошная заливка вместо бледного градиента */
.auth-submit {
  display: block;
  width: 100%;
  padding: 15px 16px;
  border: 0;
  border-radius: var(--auth-radius);
  background: var(--auth-accent);
  color: #fff;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 184, 116, .28);
  transition: background .15s, transform .06s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}

.auth-submit:hover { background: var(--auth-accent-press); }

.auth-submit:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(0, 184, 116, .24);
}

.auth-submit:focus-visible {
  outline: 3px solid var(--auth-accent-soft);
  outline-offset: 2px;
}

.auth-submit.is-busy { opacity: .7; pointer-events: none; }

/* разделитель и Google */
.auth-or {
  position: relative;
  margin: 18px 0;
  text-align: center;
}

.auth-or::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--auth-line);
}

.auth-or span {
  position: relative;
  padding: 0 12px;
  background: var(--auth-surface);
  font-size: 13px;
  color: var(--auth-muted);
}

.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--auth-line-strong);
  border-radius: var(--auth-radius);
  background: var(--auth-surface);
  color: var(--auth-ink);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.auth-google:hover {
  background: #f7f9fb;
  border-color: #b9c2cb;
  color: var(--auth-ink);
}

.auth-google svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* ссылки */
.auth-links {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
}

.auth-links a {
  color: var(--auth-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/* регистрация — не сноска мелким шрифтом, а вторая по важности кнопка */
.auth-signup {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--auth-line);
  text-align: center;
}

.auth-signup > span {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--auth-muted);
}

.auth-signup-btn {
  display: block;
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--auth-accent);
  border-radius: var(--auth-radius);
  background: transparent;
  color: var(--auth-accent-press);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.auth-signup-btn:hover {
  background: var(--auth-accent-soft);
  color: var(--auth-accent-press);
}

.auth-legal {
  margin: 18px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--auth-muted);
  text-align: center;
}

.auth-legal a { color: var(--auth-muted); text-decoration: underline; }

/* сообщение об ошибке внутри шторки */
.auth-error {
  display: none;
  margin: 0 0 16px;
  padding: 11px 13px;
  border: 1px solid #f3cfcf;
  border-radius: 12px;
  background: #fdf3f3;
  color: var(--auth-danger);
  font-size: 13.5px;
  line-height: 1.45;
}

.auth-error.is-shown { display: block; }

/* ─────────────────────── нижняя шторка (Bootstrap modal) ─────────────────────── */

.auth-sheet .modal-dialog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
}

.auth-sheet.show .modal-dialog { transform: translateY(0); }

.auth-sheet .modal-content {
  border: 0;
  border-radius: 22px 22px 0 0;
  background: var(--auth-surface);
  max-height: 92vh;
  max-height: 92dvh;
  box-shadow: 0 -8px 40px rgba(16, 24, 40, .18);
}

.auth-sheet-grip {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 10px 0 2px;
}

.auth-sheet-grip::before {
  content: "";
  width: 40px;
  height: 4px;
  border-radius: 4px;
  background: #d6dce2;
}

.auth-sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 18px 12px;
}

.auth-sheet-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--auth-ink);
}

.auth-sheet-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f0f3f6;
  color: var(--auth-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.auth-sheet-close svg { width: 15px; height: 15px; }

.auth-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 18px calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ───────────── профиль в шторке (вошедший пользователь) ───────────── */

.auth-profile { text-align: center; }

.auth-profile-name {
  margin: 2px 0 3px;
  font-size: 19px;
  font-weight: 800;
  color: var(--auth-ink);
}

.auth-profile-class { margin-bottom: 16px; font-size: 13px; }

.auth-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.auth-stat {
  flex: 1 1 0;
  padding: 11px 6px;
  border-radius: 14px;
  background: #f5f7f9;
}

.auth-stat b { display: block; font-size: 16px; font-weight: 800; }
.auth-stat span { font-size: 11.5px; color: var(--auth-muted); }

.auth-traffic {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--auth-ink);
}

.auth-traffic span { display: inline-flex; align-items: center; gap: 5px; }

.auth-menu {
  display: block;
  border: 1px solid var(--auth-line);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
}

.auth-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--auth-line);
  color: var(--auth-ink);
  font-size: 15px;
  text-decoration: none;
}

.auth-menu a:last-child { border-bottom: 0; }
.auth-menu a:active { background: #f5f7f9; }
.auth-menu a svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--auth-muted); }

.auth-logout {
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  border: 1.5px solid #f0d2d2;
  border-radius: var(--auth-radius);
  background: transparent;
  color: var(--auth-danger);
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
}

.auth-logout:hover { background: #fdf3f3; }

@media (prefers-reduced-motion: reduce) {
  .auth-sheet .modal-dialog,
  .auth-submit,
  .auth-input { transition: none; }
}