/* =====================================================================
 * hifaces — компоненты
 * design-system/components.css
 * Зависит от tokens.css (подключить раньше).
 *
 * Минимальный набор из NFR §1 + прототипов v3:
 *   .btn (+ variants)    — кнопки
 *   .field / input       — поля форм
 *   .card                — карточки
 *   .badge / .st         — бейджи статусов
 *   .alert               — алерты (info/success/error)
 *   .bar                 — полосы использования
 *   .wiz / .wizbar       — прогресс-бар визарда
 *
 * Без фреймворков. Vanilla CSS, классы из прототипов v3.
 * ===================================================================== */

/* ---------- Reset (минимальный) ---------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: var(--lh-base);
  font-size: var(--fs-md);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a {
  color: var(--acc);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--acc-h); }

.muted { color: var(--ink2); }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--acc);
  margin-bottom: var(--sp-2);
}

/* ---------- Контейнеры ---------- */
.wrap { max-width: var(--container-public); margin: 0 auto; padding: 0 var(--sp-6); }

/* =====================================================================
 * Кнопки
 * ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: inherit;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-5);
  border: var(--bd-w) solid transparent;
  cursor: pointer;
  line-height: 1.2;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.btn-primary { background: var(--acc); color: #fff; }
.btn-primary:hover { background: var(--acc-h); }
.btn-primary:disabled { background: var(--disabled); cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--bd);
}
.btn-ghost:hover { background: var(--card); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #9A3A33; }
.btn-danger:disabled { background: var(--disabled); cursor: not-allowed; }

.btn-danger-ghost {
  background: transparent;
  color: var(--danger);
  border-color: var(--danger-bd);
}
.btn-danger-ghost:hover { background: var(--danger-bg); }

.btn-sm { padding: var(--sp-2) 14px; font-size: var(--fs-sm); border-radius: var(--r-md); }
.btn-block { width: 100%; }

/* =====================================================================
 * Поля ввода
 * ===================================================================== */
.field { margin-bottom: var(--sp-5); }
.field > label,
.field label.cap {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.field .hint {
  font-size: var(--fs-sm);
  color: var(--ink2);
  margin-top: var(--sp-2);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--bg);
  border: var(--bd-w) solid var(--bd);
  border-radius: var(--r-lg);
  padding: var(--sp-3) 14px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: var(--shadow-focus);
}

textarea { min-height: 120px; resize: vertical; }

/* 6-значный код */
.code-input {
  letter-spacing: 0.5em;
  text-align: center;
  font-size: 1.6rem;
  font-weight: var(--fw-semibold);
  padding: var(--sp-4);
}

/* Inline-edit (как на странице агента) */
input.inline-edit {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--ink);
  background: var(--bg);
  border: var(--bd-w) solid var(--acc);
  border-radius: var(--r-lg);
  padding: var(--sp-2) var(--sp-3);
  letter-spacing: var(--ls-tight);
}

/* =====================================================================
 * Карточки
 * ===================================================================== */
.card {
  background: var(--card);
  border: var(--bd-w) solid var(--bd);
  border-radius: var(--r-3xl);
  padding: var(--sp-6);
  margin-bottom: var(--sp-5);
}
.card.danger-card { border-color: var(--danger-bd); }

/* Key-value, как на странице агента */
.kv {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding: var(--sp-2) 0;
  border-top: var(--bd-w) solid var(--bd);
}
.kv:first-of-type { border-top: none; }
.kv .muted { color: var(--ink2); }

/* Конфигурация тайлы (3 в ряд) */
.cfg-detail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.cfg-stat {
  background: var(--bg);
  border: var(--bd-w) solid var(--bd);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  text-align: center;
}
.cfg-stat .v { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.cfg-stat .l { font-size: var(--fs-xs); color: var(--ink2); margin-top: 2px; }

@media (max-width: 760px) { .cfg-detail { grid-template-columns: 1fr; } }

/* =====================================================================
 * Бейджи статусов
 * ===================================================================== */
.st {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.st-active { background: var(--ok-bg); color: var(--ok); }
.st-stopped { background: var(--alt); color: var(--ink2); }
.st-error { background: var(--danger-bg); color: var(--danger); }
.st-warn { background: var(--warn-bg); color: var(--warn); }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

/* Бейдж инвайта (register panel) */
.badge-invite {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--ok-bg);
  border: var(--bd-w) solid var(--ok-bd);
  color: var(--ok);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}

/* =====================================================================
 * Алерты
 * ===================================================================== */
.alert {
  border-radius: var(--r-xl);
  padding: var(--sp-4);
  font-size: var(--fs-sm);
  border: var(--bd-w) solid var(--bd);
  background: var(--alt);
  color: var(--ink2);
  margin-bottom: var(--sp-5);
}
.alert-info { background: var(--alt); border-color: var(--bd); color: var(--ink2); }
.alert-success { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.alert-error { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }

/* =====================================================================
 * Полосы использования
 * ===================================================================== */
.usage-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-1);
}
.bar {
  height: 8px;
  background: var(--alt);
  border-radius: var(--sp-1);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.bar > i {
  display: block;
  height: 100%;
  background: var(--acc);
  border-radius: var(--sp-1);
  transition: width var(--transition-base);
}
.bar.warn > i { background: var(--warn); }
.bar.danger > i { background: var(--danger); }

.usage-totals {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--bd-w) solid var(--bd);
}
.usage-totals .usage-row { font-size: var(--fs-xs); margin-bottom: var(--sp-1); }

/* =====================================================================
 * Визард (прогресс-бар)
 * ===================================================================== */
.wizbar { display: flex; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-7); }
.wseg {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--bd);
  transition: background 300ms ease;
}
.wseg.done { background: var(--ok); }
.wseg.cur { background: var(--acc); }

/* =====================================================================
 * Auth-card и email-display
 * ===================================================================== */
.auth-card {
  width: 100%;
  max-width: var(--container-auth);
  background: var(--card);
  border: var(--bd-w) solid var(--bd);
  border-radius: var(--r-3xl);
  padding: var(--sp-8);
}
.email-display {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) 14px;
  background: var(--bg);
  border-radius: var(--r-lg);
  border: var(--bd-w) solid var(--bd);
}
.email-display b { color: var(--ink); }

.divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink2);
  font-size: var(--fs-sm);
  margin: var(--sp-6) 0;
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* Чекбокс-согласие */
.consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  margin: var(--sp-1) 0 var(--sp-5);
  cursor: pointer;
}
.consent input { width: auto; margin-top: 3px; }
.consent span { color: var(--ink2); }

/* =====================================================================
 * Confirm overlay (модальные)
 * ===================================================================== */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 24, 21, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--sp-5);
}
.confirm-overlay.show { display: flex; }
.confirm-box {
  background: var(--bg);
  border-radius: var(--r-4xl);
  padding: var(--sp-8);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

/* =====================================================================
 * Nav (публичный + /app)
 * ===================================================================== */
nav {
  border-bottom: var(--bd-w) solid var(--bd);
  background: rgba(245, 241, 234, 0.88);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}
.logo { font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); font-size: var(--fs-lg); flex-shrink: 0; }
.logo span { color: var(--acc); }

.nav-actions { display: flex; gap: var(--sp-2); align-items: center; flex-shrink: 0; }
.nav-btn {
  padding: var(--sp-2) 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--ink2);
  cursor: pointer;
  text-decoration: none;
  border: var(--bd-w) solid transparent;
  transition: all var(--transition-fast);
}
.nav-btn:hover { color: var(--ink); background: var(--card); }
.nav-btn.current { color: var(--ink); background: var(--card); border-color: var(--bd); }
.nav-btn.danger { color: var(--danger); }
.nav-email { font-size: var(--fs-xs); color: var(--ink2); padding: 0 var(--sp-2); }