/* ============================================================
   GEEK CLUB — общий стиль сайта
   Сюда идёт только то, что должно быть одинаковым на ВСЕХ страницах:
   шрифты, цветовые токены, базовый reset, переиспользуемые атомы
   интерфейса (кнопки, поля ввода, статусы, спиннер).

   Специфичная вёрстка конкретной страницы (сетка ПК на кассе,
   таблица зарплаты и т.п.) сюда НЕ выносится — она остаётся в
   собственном <style> каждой страницы.
   ============================================================ */

@font-face{
  font-family:'RoadRadio';
  src: url('fonts/roadradio-bold.otf') format('opentype');
  font-weight: 700 900;
  font-display: swap;
}

:root{
  /* базовые поверхности */
  --bg:#090a0a; --panel:#111313; --panel2:#171919; --line:#2a2d2d;
  /* текст */
  --text:#f1f1eb; --muted:#858b88;
  /* акценты */
  --accent:#e4372c; --accent2:#91ff4e;
  /* шрифты */
  --display:'RoadRadio', sans-serif;
  --body:'Manrope', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}

/* ---------------- reset ---------------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--text); font-family:var(--body);
  min-height:100vh;
  min-height:100dvh;
}
/* лёгкая шумовая текстура поверх всего сайта */
body:before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.028;
  background:repeating-linear-gradient(0deg,#fff 0,#fff 1px,transparent 1px,transparent 4px);
}

/* ---------------- типографские ярлыки ---------------- */
.kicker{ font:600 9px var(--mono); color:var(--accent); letter-spacing:.16em; }

/* ---------------- поля ввода ---------------- */
.field-label{
  display:block; font:600 8px var(--mono); color:var(--muted); letter-spacing:.12em; text-transform:uppercase;
  margin-top:22px;
}
.field-input{
  display:block; width:100%; height:47px; margin-top:7px;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  padding:0 15px; letter-spacing:.2em; font-family:var(--mono); font-size:13px; outline:none;
  line-height:45px;
}
.field-input:focus{ border-color:var(--accent); }

/* показать/скрыть пароль */
.pass-wrap{ position:relative; }
.pass-wrap .field-input{ padding-right:46px; }
.eye-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--muted); cursor:pointer; padding:6px;
  display:flex; align-items:center; justify-content:center;
}
.eye-btn:hover{ color:var(--accent); }
.eye-btn svg{ width:18px; height:18px; display:block; }
.eye-btn .icon-off{ display:none; }
.eye-btn.showing .icon-on{ display:none; }
.eye-btn.showing .icon-off{ display:block; }

/* ---------------- кнопки ---------------- */
.primary{
  width:100%; margin-top: 22px; height:51px; border:0; background:var(--accent);
  font:800 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#0a0a0a;
  display:flex; align-items:center; justify-content:center; gap:10px; padding:0 18px; cursor:pointer;
}
.primary:hover{ background: color-mix(in srgb, var(--accent) 85%, #fff); }
.primary:disabled{ background:var(--panel2); color:var(--muted); cursor:not-allowed; }

/* ---------------- статусы/сообщения ---------------- */
.err-msg{ font:500 10px var(--mono); color:var(--accent); margin-top:12px; min-height:14px; letter-spacing:.05em; }

.spinner-inline{
  display:inline-block; width:12px; height:12px; border:2px solid var(--line); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle; margin-right:6px;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------------- topbar / навигация (общая для всех страниц) ---------------- */
.topbar{
  height:64px; display:flex; align-items:center; gap:24px; padding:0 24px;
  position:sticky; top:0; z-index:50;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
.brand-mark img{ width:34px; height:34px; object-fit:contain; display:block; }
.brand-copy{ display:flex; flex-direction:column; }
.brand-copy b{ font:700 16px var(--display); letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
.brand-copy b span{ color:var(--accent); }

.tabs{ display:flex; align-self:stretch; gap:2px; overflow-x:auto; }
.tab{
  display:flex; align-items:center; height:100%; padding:0 16px;
  font:700 12px var(--display); letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap;
}
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--text); border-color:var(--accent); }
.tab sup{ color:var(--accent); font:600 7px var(--mono); margin-left:4px; vertical-align:top; }

.header-tools{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn-hdr{
  height:34px; display:inline-flex; align-items:center; gap:6px; padding:0 13px;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  font:600 10px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; text-decoration:none;
}
.btn-hdr:hover{ border-color:var(--accent); color:var(--text); }
.btn-hdr.switch{ border-color: color-mix(in srgb, var(--accent2) 45%, transparent); color:var(--accent2); }
.btn-hdr.switch:hover{ border-color:var(--accent2); }

@media (max-width:860px){
  .topbar{ height:auto; min-height:60px; flex-wrap:wrap; padding:10px 14px; gap:10px; }
  .tabs{ order:3; width:100%; height:40px; }
}