/* ===== ENEX Catalog Parser — design tokens & base ===== */

:root {
  /* Surfaces (cool neutral) */
  --bg:           #FAFBFC;
  --bg-elevated: #FFFFFF;
  --bg-sunken:   #F4F5F7;
  --bg-hover:    #F0F2F5;
  --bg-active:   #E8EBF0;
  --bg-codeblock:#0F1419;

  /* Text */
  --fg:          #1A1F29;
  --fg-muted:    #5B6472;
  --fg-subtle:   #8A93A1;
  --fg-faint:    #B4BBC6;
  --fg-on-dark:  #E4E7EC;

  /* Borders */
  --border:        #E3E6EB;
  --border-strong: #CDD2DA;
  --border-focus:  #4A6FD4;

  /* Accent — slate blue */
  --accent:        #3D5FC4;
  --accent-hover:  #34539E;
  --accent-active: #2C467F;
  --accent-bg:     #EEF2FB;
  --accent-fg:     #2C467F;

  /* Semaphore (restrained) */
  --ok:        #1F8A4C;
  --ok-bg:     #E8F5EE;
  --ok-border: #B8DCC4;
  --warn:        #B26A00;
  --warn-bg:     #FBF3E2;
  --warn-border: #ECD49A;
  --err:        #B42318;
  --err-bg:     #FCEBEA;
  --err-border: #ECC0BD;
  --info:        #1F5BA8;
  --info-bg:     #EAF1FB;
  --info-border: #BDD2EB;

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Radii */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 22, 36, 0.04), 0 0 0 1px rgba(15, 22, 36, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 22, 36, 0.06), 0 0 0 1px rgba(15, 22, 36, 0.04);
  --shadow-lg: 0 18px 40px -8px rgba(15, 22, 36, 0.18), 0 0 0 1px rgba(15, 22, 36, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* ===== Layout ===== */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: 48px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 13.5px;
}

.topbar__logo {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background: var(--fg);
  color: var(--bg-elevated);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
}

.topbar__brand small {
  color: var(--fg-subtle);
  font-weight: 500;
  font-size: 11.5px;
  font-family: var(--font-mono);
  padding-left: 8px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
}

.topbar__nav {
  display: flex;
  gap: 4px;
  align-items: center;
}

.topbar__nav a,
.topbar__nav button {
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--fg-muted);
  cursor: pointer;
  border-radius: var(--r-sm);
  font-weight: 500;
  text-decoration: none;
}
.topbar__nav a:hover,
.topbar__nav button:hover { background: var(--bg-hover); color: var(--fg); }
.topbar__nav a.is-active,
.topbar__nav button.is-active { background: var(--bg-active); color: var(--fg); }

.topbar__spacer { flex: 1; }

.topbar__user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-muted);
  font-size: 12.5px;
}
.topbar__user .avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-fg);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}

/* ===== Main ===== */

.main {
  flex: 1;
  padding: 24px 28px 80px;
  max-width: 1480px;
  margin: 0 auto;
  width: 100%;
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.page-header h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.page-header .sub {
  color: var(--fg-muted);
  font-size: 12.5px;
  margin-top: 4px;
}

.page-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ===== Sections ===== */

.section { margin-bottom: 32px; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px 10px;
}

.section__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  display: flex; align-items: center; gap: 10px;
}
.section__title .count {
  color: var(--fg-subtle);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.section__sub {
  font-size: 12px;
  color: var(--fg-subtle);
}

/* ===== Card / panel ===== */

.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* ===== Buttons ===== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--fg);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 80ms, border-color 80ms;
}
.btn:hover:not(:disabled) { background: var(--bg-hover); }
.btn:active:not(:disabled) { background: var(--bg-active); }
.btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 1px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* :not(:disabled) поднимает специфичность до уровня
   `.btn:hover:not(:disabled)` — иначе общий hover перекрывал primary и
   кнопка «белела» при наведении (PR-FILE-3b-FIX баг №3). */
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--primary:active:not(:disabled) { background: var(--accent-active); border-color: var(--accent-active); }

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

.btn--sm { height: 26px; padding: 0 9px; font-size: 12px; }
.btn--lg { height: 36px; padding: 0 16px; font-size: 13.5px; }

.btn--danger { color: var(--err); }
.btn--icon { padding: 0 8px; }

/* Инлайновый спиннер для индикации загрузки файлов (PR-FILE-3b-FIX №2). */
.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinner-rot 700ms linear infinite;
}
@keyframes spinner-rot { to { transform: rotate(360deg); } }

/* ===== UX busy-overlay (HTMX hx-indicator, CSS-only) =====
   Скрыт по умолчанию; HTMX вешает .htmx-request на #busy-overlay на время
   запроса форм с hx-indicator="#busy-overlay" → показывается. Модальный:
   перекрывает экран, блокирует клики (анти-двойной-submit). z-index выше всех
   (макс в проекте — 50). */
#busy-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
}
#busy-overlay.htmx-request {
  display: flex;
}
.busy-overlay__box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  font-size: 14px;
}
.spinner--lg {
  width: 22px;
  height: 22px;
  border-width: 3px;
  margin-right: 0;
}

/* ===== Badges ===== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--fg-muted);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--ok    { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-border); }
.badge--warn  { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-border); }
.badge--err   { background: var(--err-bg);  color: var(--err);  border-color: var(--err-border); }
.badge--info  { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.badge--phase { background: var(--accent-bg); color: var(--accent-fg); border-color: #C9D6F0; }

.badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.badge .dot--pulse {
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ===== Table ===== */

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.table th {
  text-align: left;
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  padding: 10px 14px;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover { background: var(--bg-hover); }

.table .num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.table .mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-muted); }
.table .right { text-align: right; }
/* Колонка действий остаётся обычной table-cell. display:flex на <td>
   выводит ячейку из вертикального ритма строки (vertical-align не
   действует на flex-контейнер) → кнопки уезжают вниз ~12px (E10).
   Right-align + nowrap; зазор между кнопками — margin, не flex-gap. */
.table td.actions { text-align: right; white-space: nowrap; padding-right: 10px; }
.table td.actions > * + * { margin-left: 4px; }
.table td.actions .btn { vertical-align: middle; }

/* Широкая таблица скроллится по горизонтали, а не подрезается панелью
   (.panel имеет overflow:hidden ради радиуса) — правый край и колонка
   действий больше не обрезаются на узком/широком окне (E9). */
.table-scroll { overflow-x: auto; }

/* ===== Onboarding cards ===== */

.ob-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 12px;
}

.ob-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.ob-card.is-attention {
  border-color: var(--warn-border);
  background: linear-gradient(180deg, #FDF8EC 0%, var(--bg-elevated) 30%);
}

.ob-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ob-card__title {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ob-card__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  color: var(--fg-muted);
}
.ob-card__meta b {
  color: var(--fg);
  font-weight: 500;
  font-family: var(--font-mono);
}
.ob-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

/* Progress */
.progress {
  height: 6px;
  background: var(--bg-active);
  border-radius: 3px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.progress--striped .progress__bar {
  background-image: linear-gradient(45deg,
    rgba(255,255,255,0.18) 25%, transparent 25%,
    transparent 50%, rgba(255,255,255,0.18) 50%,
    rgba(255,255,255,0.18) 75%, transparent 75%);
  background-size: 12px 12px;
  animation: stripes 1.2s linear infinite;
}
@keyframes stripes {
  0% { background-position: 0 0; }
  100% { background-position: 12px 0; }
}
.progress--warn .progress__bar { background: var(--warn); }

/* ===== Onboarding Wizard ===== */

.wiz {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 36, 0.32);
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 50;
  animation: fade 140ms ease-out;
}
/* Native `hidden` атрибут должен скрывать модалку. Без этого правила
   `.wiz { display: flex }` перебивает user-agent stylesheet, и модалка
   видна сразу при загрузке Dashboard — UI-блокер. */
.wiz[hidden] {
  display: none !important;
}
@keyframes fade { from { opacity: 0; } }

.wiz__panel {
  margin: 32px;
  background: var(--bg-elevated);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.wiz__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wiz__title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wiz__close {
  border: none;
  background: transparent;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--fg-muted);
  font-size: 18px;
  display: grid; place-items: center;
}
.wiz__close:hover { background: var(--bg-hover); color: var(--fg); }

.wiz__body { padding: 24px 28px; overflow: auto; flex: 1; }

.wiz__steps {
  display: flex;
  gap: 6px;
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.wiz__steps span.is-current { color: var(--fg); font-weight: 600; }
.wiz__steps span.is-done { color: var(--ok); }

/* Phase track */
.phase-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 8px 0 24px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.phase {
  padding: 14px 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
}
.phase__num {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  color: var(--fg-faint);
}
.phase__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.phase.is-done .phase__dot { background: var(--ok); }
.phase.is-current {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--accent-fg);
  box-shadow: 0 0 0 3px rgba(61, 95, 196, 0.12);
}
.phase.is-current .phase__dot {
  background: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
.phase__name { font-weight: 600; color: inherit; font-size: 11.5px; }
.phase__hint { color: var(--fg-faint); font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.phase.is-current .phase__hint { color: var(--accent-fg); }
.phase.is-done .phase__hint { color: var(--ok); }

/* Logs */
.logs {
  background: var(--bg-codeblock);
  color: var(--fg-on-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: var(--r-md);
  padding: 14px 16px;
  max-height: 280px;
  overflow: auto;
  line-height: 1.55;
}
.logs__row { display: flex; gap: 14px; }
.logs__ts { color: #6E7B92; flex-shrink: 0; }
.logs__msg { white-space: pre-wrap; word-break: break-word; }
.logs__msg .em { color: #8FB3FF; }
.logs__msg .ok { color: #6FD09B; }
.logs__msg .warn { color: #F0C36D; }
.logs__cursor {
  display: inline-block;
  width: 7px; height: 12px;
  background: var(--fg-on-dark);
  vertical-align: -2px;
  animation: blink 1s steps(2) infinite;
  margin-left: 2px;
}
@keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* Form */
.form-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px 18px;
  align-items: center;
}
.form-grid label { color: var(--fg-muted); font-size: 12.5px; }
.form-grid .help { color: var(--fg-subtle); font-size: 11.5px; margin-top: 2px; grid-column: 2; }

.input,
.select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg-elevated);
  font-size: 13px;
  transition: border-color 80ms, box-shadow 80ms;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(61, 95, 196, 0.14);
}
.input--lg { height: 38px; font-size: 14px; padding: 0 12px; font-family: var(--font-mono); }
.input--sm { height: 28px; font-size: 12.5px; }

.input-row { display: flex; gap: 8px; align-items: center; }

.radio-row { display: flex; gap: 4px; }
.radio-pill {
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  padding: 5px 12px;
  font-size: 12.5px;
  cursor: pointer;
  border-radius: var(--r-sm);
}
.radio-pill.is-on {
  background: var(--accent-bg);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.collapse-head {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer;
  color: var(--fg-muted);
  font-size: 12.5px;
  padding: 8px 0;
  user-select: none;
}
.collapse-head .chev { transition: transform 140ms; display: inline-block; }
.collapse-head.is-open .chev { transform: rotate(90deg); }

/* Result panel */
.result {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 20px;
  background: var(--bg-elevated);
}
.result--ok { border-color: var(--ok-border); background: linear-gradient(180deg, var(--ok-bg) 0%, var(--bg-elevated) 50%); }
.result--warn { border-color: var(--warn-border); background: linear-gradient(180deg, var(--warn-bg) 0%, var(--bg-elevated) 50%); }
.result--err { border-color: var(--err-border); background: linear-gradient(180deg, var(--err-bg) 0%, var(--bg-elevated) 50%); }

.result__head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.result__head .icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  color: #fff;
}
.result--ok .result__head .icon { background: var(--ok); }
.result--warn .result__head .icon { background: var(--warn); }
.result--err .result__head .icon { background: var(--err); }

/* ===== Banners / inline alerts =====
   Использовались в шаблонах (онбординг, бренд-цикл, first-parse), но класс не
   был определён → рендерились без стилей. Лёгкий inline-алерт (тоньше .result):
   фон+граница по семафор-токенам, текст оставляем --fg (не перекрашиваем, чтобы
   кнопки/ссылки внутри читались). */
.banner {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 13px;
  line-height: 1.5;
}
.banner--ok { background: var(--ok-bg); border-color: var(--ok-border); }
.banner--warn { background: var(--warn-bg); border-color: var(--warn-border); }
.banner--err { background: var(--err-bg); border-color: var(--err-border); }
.banner--info { background: var(--info-bg); border-color: var(--info-border); }

.kv {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
  font-size: 13px;
}
.kv dt { color: var(--fg-muted); }
.kv dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; }

/* YAML preview */
.yaml {
  background: var(--bg-codeblock);
  color: var(--fg-on-dark);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  padding: 14px 16px;
  border-radius: var(--r-md);
  margin-top: 12px;
  max-height: 320px;
  overflow: auto;
}
.yaml .k { color: #8FB3FF; }
.yaml .v { color: #E4E7EC; }
.yaml .s { color: #D8B4FE; }
.yaml .c { color: #6E7B92; font-style: italic; }
.yaml .todo { color: #F0C36D; font-style: italic; }
.yaml .num { color: #6FD09B; }

/* Wizard footer */
.wiz__foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* Detail page */
.detail-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}

.kv-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.kv-block h3 {
  margin: 0 0 14px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-muted);
  font-weight: 600;
}
.kv-block dl { margin: 0; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background: var(--bg-elevated);
  padding: 14px 16px;
}
.stat__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.stat__value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.stat__sub {
  font-size: 11.5px;
  color: var(--fg-subtle);
  margin-top: 2px;
}

/* Empty state */
.empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--fg-subtle);
  font-size: 13px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}

/* Filter bar */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.toolbar .input { height: 28px; max-width: 240px; }
.toolbar .spacer { flex: 1; }

/* Status text utilities */
.txt-ok    { color: var(--ok); }
.txt-warn  { color: var(--warn); }
.txt-err   { color: var(--err); }
.txt-muted { color: var(--fg-muted); }
.txt-mono  { font-family: var(--font-mono); font-size: 0.93em; }

/* Inline sparkline */
.spark {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}
.spark span {
  width: 3px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.65;
}

/* HTMX-style attention pulse */
.attention-pulse {
  position: absolute;
  top: 12px; right: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 0 rgba(178, 106, 0, 0.5);
  animation: ring 1.8s ease-out infinite;
}
@keyframes ring {
  0% { box-shadow: 0 0 0 0 rgba(178, 106, 0, 0.45); }
  100% { box-shadow: 0 0 0 10px rgba(178, 106, 0, 0); }
}

/* ===== Auth screen ===== */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg);
}

.auth__brand-pane {
  background: linear-gradient(160deg, #14213D 0%, #1F2C4B 55%, #283963 100%);
  color: #E4E7EC;
  padding: 56px 56px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth__brand-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 23px, rgba(255,255,255,0.04) 24px),
    repeating-linear-gradient(90deg, transparent 0, transparent 23px, rgba(255,255,255,0.04) 24px);
  pointer-events: none;
}
.auth__brand-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15px;
}
.auth__brand-head .topbar__logo {
  width: 28px; height: 28px;
  font-size: 13px;
  background: #fff;
  color: var(--fg);
}
.auth__brand-head small {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(228, 231, 236, 0.6);
  padding-left: 10px;
  border-left: 1px solid rgba(228, 231, 236, 0.2);
  margin-left: 4px;
  font-weight: 500;
}
.auth__brand-body {
  position: relative;
  max-width: 420px;
}
.auth__brand-body h1 {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.auth__brand-body p {
  margin: 0 0 24px;
  color: rgba(228, 231, 236, 0.72);
  font-size: 14px;
  line-height: 1.6;
}
.auth__brand-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 0;
  border-top: 1px solid rgba(228, 231, 236, 0.12);
  padding-top: 20px;
  margin-top: 28px;
}
.auth__brand-stat {
  padding-right: 32px;
  border-right: 1px solid rgba(228, 231, 236, 0.12);
}
.auth__brand-stat:last-child { border-right: none; }
.auth__brand-stat + .auth__brand-stat { padding-left: 32px; }
.auth__brand-stat__value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.auth__brand-stat__label {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(228, 231, 236, 0.5);
  margin-top: 2px;
}
.auth__brand-foot {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: rgba(228, 231, 236, 0.4);
}

.auth__form-pane {
  display: grid;
  place-items: center;
  padding: 56px 32px;
}
.auth__card {
  width: 100%;
  max-width: 380px;
}
.auth__card h2 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.auth__card .auth__sub {
  color: var(--fg-muted);
  font-size: 13px;
  margin-bottom: 28px;
}

.auth__field {
  margin-bottom: 14px;
}
.auth__field label {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
  font-weight: 500;
}
.auth__field .input {
  width: 100%;
  height: 38px;
  font-size: 14px;
}
.auth__field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.auth__field-row a {
  font-size: 12px;
}

.auth__submit {
  width: 100%;
  height: 40px;
  justify-content: center;
  font-size: 14px;
  margin-top: 8px;
}

.auth__divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 22px 0 14px;
  color: var(--fg-subtle);
  font-size: 11.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.auth__divider::before, .auth__divider::after {
  content: "";
  height: 1px;
  background: var(--border);
}

.auth__sso {
  width: 100%;
  height: 38px;
  justify-content: center;
  font-size: 13px;
  gap: 8px;
}
.auth__sso .sso-mark {
  width: 16px; height: 16px;
  border-radius: 3px;
  background: var(--fg);
  color: var(--bg-elevated);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700;
}

.auth__hint {
  margin-top: 22px;
  padding: 12px 14px;
  background: var(--bg-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: 12px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  line-height: 1.6;
}
.auth__hint b { color: var(--fg); font-weight: 600; }

.auth__error {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--err-bg);
  border: 1px solid var(--err-border);
  border-radius: var(--r-sm);
  color: var(--err);
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== User menu (topbar dropdown) ===== */

.user-menu-trigger {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-muted);
  font-size: 12.5px;
  font-family: inherit;
}
.user-menu-trigger:hover { background: var(--bg-hover); color: var(--fg); }
.user-menu-trigger.is-open { background: var(--bg-active); color: var(--fg); }

.user-menu {
  position: absolute;
  top: 44px;
  right: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  width: 240px;
  z-index: 30;
  overflow: hidden;
  animation: menu-in 120ms ease-out;
}
@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px); }
}
.user-menu__head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
}
.user-menu__name { font-weight: 600; font-size: 13px; }
.user-menu__mail { color: var(--fg-muted); font-size: 12px; font-family: var(--font-mono); margin-top: 2px; }
.user-menu__role { margin-top: 8px; }
.user-menu__items { padding: 6px 0; }
.user-menu__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.user-menu__item:hover { background: var(--bg-hover); }
.user-menu__item .kbd {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--fg-faint);
  font-family: var(--font-mono);
}
.user-menu__item.is-danger { color: var(--err); }
.user-menu__sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.user-menu__overlay {
  position: fixed;
  inset: 0;
  z-index: 25;
}

/* ===== Profile screen ===== */

.profile-hero {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 24px 26px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  margin-bottom: 24px;
}
.profile-hero__avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14213D 0%, #3D5FC4 100%);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.profile-hero__info { flex: 1; }
.profile-hero__name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.profile-hero__mail {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.profile-hero__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--fg-muted);
}
.profile-hero__meta b {
  color: var(--fg);
  font-weight: 600;
  font-family: var(--font-mono);
}
.profile-hero__actions {
  display: flex;
  gap: 8px;
  align-self: flex-start;
}

.profile-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.profile-tab {
  border: none;
  background: transparent;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
}
.profile-tab:hover { color: var(--fg); }
.profile-tab.is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: start;
}

.activity {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.activity__item {
  display: grid;
  grid-template-columns: 16px 110px 1fr auto;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 13px;
}
.activity__item:last-child { border-bottom: none; }
.activity__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fg-faint);
  justify-self: center;
}
.activity__dot--ok   { background: var(--ok); }
.activity__dot--warn { background: var(--warn); }
.activity__dot--info { background: var(--info); }
.activity__time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
}
.activity__desc { color: var(--fg); }
.activity__desc code {
  font-size: 12px;
  color: var(--fg-muted);
}
.activity__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-subtle);
}

.notif-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.notif-row:last-child { border-bottom: none; }
.notif-row__label { font-weight: 500; font-size: 13.5px; }
.notif-row__hint { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }

.toggle {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border-strong);
  position: relative;
  border: none;
  cursor: pointer;
  transition: background 120ms;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: left 120ms;
}
.toggle.is-on { background: var(--accent); }
.toggle.is-on::after { left: 18px; }

.tokens-table {
  margin: 0;
}
.tokens-table .mono-mask {
  font-family: var(--font-mono);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

/* ===== Footer credit ===== */
.footer {
  padding: 16px 28px 24px;
  color: var(--fg-faint);
  font-size: 11.5px;
  font-family: var(--font-mono);
  text-align: center;
  border-top: 1px solid var(--border);
  margin-top: auto;
}