@charset "UTF-8";
/* ============================================================================
   /vhod.php — вход в админку клуба. Заменил собой закрытый owner-портал.
   Токены и шрифты берём из styles.css (подключается первым) — это обычная
   страница сайта, а не остаток отдельного кабинета со своей вёрсткой.
   Красный здесь ровно один: кнопка. Она единственное действие на экране.
   ============================================================================ */

.vh-body{ background:var(--bg); color:var(--ink-1); font-family:var(--font-ui); }

.vh{
  min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:40px 20px calc(40px + env(safe-area-inset-bottom,0px));
  position:relative;
}
/* Верхний спот + саржа: сцена, а не пустой фон. На грани видимости. */
.vh::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(680px 430px at 50% 2%, rgba(228,18,30,.10), transparent 68%),
    repeating-linear-gradient(52deg, rgba(255,255,255,.013) 0 1px, transparent 1px 3px);
}

.vh-card{ position:relative; z-index:1; width:100%; max-width:460px; text-align:center; }

.vh-eyebrow{
  margin:0 0 20px; font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3);
}

/* Медальон: керамическая фишка с бортом кольцами, свет только вниз. */
.vh-mark{
  width:60px; height:60px; margin:0 auto 24px; border-radius:50%;
  display:grid; place-items:center; color:var(--red-ink);
  background:radial-gradient(120% 120% at 50% 10%, #1B1D25, #0B0C11 72%);
  box-shadow:
    0 0 0 5px #101117,
    0 0 0 6px rgba(255,255,255,.08),
    0 0 0 11px #08090C,
    0 14px 30px rgba(228,18,30,.16),
    inset 0 -10px 22px rgba(0,0,0,.6);
}
.vh-mark svg{ width:25px; height:25px; display:block; }

.vh-title{
  margin:0 0 12px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(24px,6.4vw,33px); line-height:1.12; letter-spacing:-.02em;
  color:var(--ink);
}
.vh-sub{
  margin:0 0 26px; font-size:14.5px; line-height:1.55; color:var(--ink-2);
}
.vh-sub b{ color:var(--ink-1); font-weight:600; }

.vh-form{ text-align:left; }
.vh-lbl{
  display:block; margin:0 0 8px; font-size:12.5px; color:var(--ink-3); text-align:center;
}
.vh-row{ display:flex; gap:8px; align-items:stretch; }

.vh-inp{
  flex:1 1 auto; min-width:0; height:48px; padding:0 15px;
  border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font:inherit; font-size:15px;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.vh-inp::placeholder{ color:var(--ink-4); }
.vh-inp:focus{
  outline:none; border-color:rgba(255,42,55,.5);
  box-shadow:0 0 0 3px rgba(228,18,30,.16);
}

.vh-go{
  flex:0 0 auto; height:48px; padding:0 20px; border:0; border-radius:var(--r-sm);
  cursor:pointer; font:inherit; font-size:14.5px; font-weight:700; color:#fff;
  background:var(--red-grad); box-shadow:var(--shadow-cta);
  transition:filter .16s ease, transform .16s ease;
}
.vh-go:hover{ filter:brightness(1.07); }
.vh-go:active{ transform:translateY(1px); }

.vh-err{
  margin:10px 0 0; font-size:12.5px; line-height:1.45; color:var(--red-ink); text-align:center;
}

.vh-meta{ margin:26px 0 0; font-size:12.5px; color:var(--ink-3); }
.vh-link{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; }
.vh-link:hover{ color:var(--ink); }

@media (max-width:380px){
  .vh-row{ flex-direction:column; }
  .vh-go{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .vh-inp, .vh-go{ transition:none; }
}