/* ============================================================
   ATHLETIUS — компоненты и экраны
   ============================================================ */

/* ---------- Общие контролы ---------- */
.field{ position:relative; margin-bottom:12px; }
.field__box{
  display:flex; align-items:center; gap:10px;
  background:rgba(20,23,28,.72);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:0 14px;
  height:49px;
  backdrop-filter:blur(6px);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.field__box:focus-within{
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-dim);
  background:rgba(20,23,28,.9);
}
.field__icon{ color:var(--muted); flex:0 0 auto; display:flex; }
.field__box input{
  flex:1 1 auto; min-width:0;
  background:none; border:none; outline:none;
  font-size:16px; color:var(--text);
  height:100%;
}
.field__box input::placeholder{ color:var(--muted); }
.field__toggle{
  flex:0 0 auto; color:var(--muted); display:flex; padding:6px;
  min-width:36px; min-height:36px; align-items:center; justify-content:center;
}
.field__toggle:active{ color:var(--text); }
.field.is-invalid .field__box{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,77,94,.15); }
.field__error{
  color:var(--danger); font-size:13px; font-weight:500;
  margin:6px 4px 0; min-height:0;
}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; height:49px;
  border-radius:var(--r-md);
  font-size:17px; font-weight:700;
  letter-spacing:.2px;
  transition:transform .08s, box-shadow .2s, background .2s, border-color .2s;
  user-select:none;
}
.btn:active{ transform:translateY(1px) scale(.995); }
.btn--primary{
  background:var(--grad-red);
  color:var(--red-ink);
  box-shadow:var(--shadow-red);
}
.btn--primary[disabled]{ opacity:.55; box-shadow:none; }
.btn--primary.is-loading{ color:transparent; position:relative; }
.btn--primary.is-loading::after{
  content:""; position:absolute; width:20px; height:20px;
  border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite;
}
.btn--ghost{
  background:rgba(16,18,22,.55);
  color:var(--text);
  border:1px solid var(--red-deep);
  backdrop-filter:blur(6px);
}
.btn--ghost:active{ background:rgba(228,23,43,.1); border-color:var(--red); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ============================================================
   Экран 01 — Авторизация (стартовый)
   ============================================================ */
.login{
  position:relative;
  min-height:100dvh;
  display:flex; flex-direction:column;
  overflow:hidden;
}
/* Слои фона (атмосфера запечена в изображении) */
.login__bg{
  position:absolute; inset:0; z-index:-3;
  background:#060405 url('../assets/bg-login.jpg') center top / cover no-repeat;
}
.login__bg::after{ /* лёгкий скрим снизу — гарантия читаемости на любых высотах */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 46%, rgba(6,4,5,.35) 66%, rgba(6,4,5,.85) 100%);
}
.login__scroll{
  position:relative; z-index:1;
  flex:1 1 auto;
  display:flex; flex-direction:column;
  padding:calc(var(--safe-top) + 8px) 22px calc(var(--safe-bottom) + 8px);
  min-height:100dvh;
}

/* Слоган слева сверху — рукописный шрифт с росчерком, вырезан из макета (1:1) */
.login__slogan{
  width:min(40vw, 156px);
  margin:0 0 0 2px;
}
.login__slogan img{
  width:100%; height:auto;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.6));
}

/* Логотип + приветствие */
.login__hero{
  flex:1 1 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  margin-top:0;
}
.login__logo{
  width:min(51vw, 190px); height:auto;
  filter:drop-shadow(0 8px 34px rgba(0,0,0,.6));
  margin-bottom:4px;
}
.login__welcome{
  font-family:var(--font-display); font-weight:800;
  font-size:27px; line-height:1.0; letter-spacing:-.3px;
  text-transform:none;
  background:linear-gradient(180deg,#ffffff 0%,#dfe3e7 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.login__welcome .brand{
  color:var(--red); -webkit-text-fill-color:var(--red);
}
.login__sub{
  color:var(--text-dim); font-size:14px; line-height:1.28;
  margin-top:4px; max-width:320px;
}

/* Форма */
.login__form{ padding-top:6px; }
.login__forgot{
  display:block; text-align:right;
  color:var(--red-bright); font-size:14px; font-weight:600;
  margin:2px 2px 6px;
}
.login__actions{ display:flex; flex-direction:column; gap:12px; }

/* Футер-бренд */
.login__footer{
  text-align:center;
  color:var(--text-dim);
  font-family:var(--font-display); font-weight:600;
  text-transform:uppercase; letter-spacing:.3px;
  font-size:11.5px; white-space:nowrap;
  margin:3px -8px 0;
}
.login__footer .sep{ color:var(--red); margin:0 6px; }
.login__footer .tick{
  display:block; width:40px; height:3px; margin:10px auto 0;
  background:var(--grad-red); border-radius:2px;
}

/* ============================================================
   Плейсхолдеры разделов (route/placeholder по ТЗ)
   ============================================================ */
.ph{
  min-height:100dvh; display:flex; flex-direction:column;
  padding:calc(var(--safe-top) + 20px) 22px calc(var(--nav-h) + var(--safe-bottom) + 28px);
}
.ph__top{ display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.ph__back{
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--line); color:var(--text);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface);
}
.ph__title{ font-family:var(--font-display); font-weight:700; font-size:26px; }
.ph__body{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; color:var(--muted); }
.ph__badge{
  font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  color:var(--red-bright); background:var(--red-dim);
  padding:6px 12px; border-radius:999px;
}
.ph__logo{ width:120px; opacity:.5; margin-bottom:6px; }
.ph__hint{ max-width:280px; font-size:14px; line-height:1.5; }

/* ============================================================
   Нижняя навигация (для рабочих разделов; 5 пунктов, ТЗ п.2.1)
   ============================================================ */
.tabbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:0; width:100%; max-width:var(--maxw); z-index:40;
  display:flex; justify-content:space-around; align-items:stretch;
  height:calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:rgba(10,11,13,.86);
  border-top:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.tabbar__item{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); font-size:11px; font-weight:600;
  min-height:44px;
}
.tabbar__item.is-active{ color:var(--red-bright); }
.tabbar__item .ic{ width:24px; height:24px; }