/* ─────────────────────────────────────────────────────────────────────────
 * FERMA v3 — design system (redesign_b · 2026-05-10).
 *
 * One source of truth for the entire v3 UI:
 *   1. Tokens (color/geometry/type)
 *   2. Reset / base
 *   3. Boot shell
 *   4. Primitives (.shell, .tb*, .kpi*, .sec*, .list*, .tbl*, .seg*, .btn,
 *      .inp, .dot, .tag, .skel, .state-*, .v3-ar-status, utilities)
 *   5. Page-specific minimums (overview attention grid, server phone-row,
 *      analytics charts, settings rows)
 *   6. Body-class flags (driven by FermaV3Settings)
 *   7. Legacy compat — minimal styles to keep not-yet-migrated views
 *      readable during the rewrite. Will be removed when all views are on
 *      the new primitives.
 *
 * Rules of the design:
 *   • One accent (amber #d6a84f). No blue.
 *   • OK is silence. Status indicated only by 6px dot or 2px left line.
 *   • Tabular numerics for clicks/balances/intervals.
 *   • Stable heights — KPIs, rows, grids reserve min-height so refresh
 *     never reshuffles layout.
 * ───────────────────────────────────────────────────────────────────────── */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* Surfaces — brutalist black for the main canvas; surfaces lift slightly
     so legacy panels remain visible during the migration. */
  --bg:         #000000;
  --surface:    #0d0d0f;
  --surface-2:  #16161a;
  --line:       rgba(255, 255, 255, 0.06);
  --line-soft:  rgba(255, 255, 255, 0.04);

  /* Text */
  --text:    rgba(255, 255, 255, 0.92);
  --text-2:  rgba(255, 255, 255, 0.62);
  --text-3:  rgba(255, 255, 255, 0.40);

  /* Accent — single color across the entire UI */
  --accent:        #d6a84f;
  --accent-soft:   rgba(214, 168, 79, 0.12);
  --accent-line:   rgba(214, 168, 79, 0.32);
  --accent-strong: rgba(214, 168, 79, 0.55);

  /* Status — used ONLY in dots / thin left lines / reason text */
  --ok:    #58c783;
  --warn:  #d6a84f;
  --bad:   #d56a6a;
  --sim:   rgba(180,140,220,0.7);   /* SIM-проблема; единое значение для diagnostics и server */

  /* Geometry */
  --page-max:        1200px;
  --page-pad:        24px;
  --page-pad-tablet: 14px;
  --radius-sm:       8px;
  --radius:          12px;
  --gap:             12px;
  --row-h:           44px;
  --topbar-h:        56px;

  /* Legacy aliases — keep existing rules in transition working with new
     palette. Removed in Phase 2 cleanup. */
  --soft:       var(--text-2);
  --muted:      var(--text-3);
  --faint:      var(--text-3);
  --red:        var(--bad);
  --green:      var(--ok);
  --orange:     var(--warn);
  --accent-2:   var(--accent-soft);
  --line-2:     var(--line);
  --radius-old: var(--radius);
}

/* ── 2. Reset / base ────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* Резерв места под вертикальный scrollbar всегда — иначе при появлении/
     исчезновении скролла (раскрытие/сворачивание в аналитике) viewport-width
     меняется на 15px и контент горизонтально «скачет». */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}
body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--text); }
button { font: inherit; }
code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}
.tabular { font-variant-numeric: tabular-nums; }
img { max-width: 100%; }
::selection { background: var(--accent-soft); color: var(--text); }

/* Nice scrollbar in WebKit, calm */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12); }

/* ── 3. Boot shell (visible before app.js boots) ────────────────────────── */
.boot-shell {
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 10px;
  color: var(--text-2);
}
.boot-mark {
  width: 44px; height: 44px;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px;
  color: var(--text);
  position: relative;
}
.boot-mark-3 {
  position: absolute;
  right: 4px; bottom: 2px;
  font-size: 9px;
  color: var(--text-3);
  font-weight: 600;
}
.boot-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 0.01em; }
.boot-sub   { font-size: 12px; color: var(--text-3); }

.boot-stages {
  margin: 14px auto 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 280px;
  font-size: 12px;
  text-align: left;
}
.boot-stage { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.boot-stage-mark {
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
}
.boot-stage.pending .boot-stage-mark::before { content: '·'; }
.boot-stage.running { color: var(--text); }
.boot-stage.running .boot-stage-mark::before { content: '…'; }
.boot-stage.ok { color: var(--text-2); }
.boot-stage.ok .boot-stage-mark::before { content: '✓'; color: var(--ok); }
.boot-stage.fail { color: var(--bad); }
.boot-stage.fail .boot-stage-mark::before { content: '×'; color: var(--bad); }

.boot-error {
  margin: 14px auto 0;
  padding: 12px 14px;
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: left;
  font-size: 12px;
}
.boot-error-title { font-weight: 600; color: var(--bad); margin-bottom: 6px; font-size: 13px; }
.boot-error-msg { color: var(--text-2); margin-bottom: 10px; line-height: 1.45; }
.boot-error-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.boot-error-actions .btn { font-size: 12px; padding: 4px 10px; }
.boot-error-details {
  display: none;
  margin: 10px 0 0;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-3);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
}
.boot-error.show-details .boot-error-details { display: block; }

/* Auth gate / boot error */
.auth-gate {
  max-width: 420px;
  margin: 12vh auto;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.auth-gate h2 { font-size: 16px; margin: 0 0 8px; font-weight: 600; }
.auth-gate p  { color: var(--text-2); margin: 0 0 16px; }

/* ── 4. Primitives ──────────────────────────────────────────────────────── */

/* Page shell */
.shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 8px var(--page-pad) 60px;
}
@media (max-width: 760px) {
  .shell { padding: 6px var(--page-pad-tablet) 40px; }
}

/* Topbar — single component used by every view via Shell.topbar() */
.tb {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: var(--topbar-h);
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
}
.tb-brand { display: flex; align-items: center; gap: 10px; }
.tb-mark {
  width: 28px; height: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  position: relative;
}
.tb-mark-3 {
  position: absolute; right: 3px; bottom: 1px;
  font-size: 8px; color: var(--text-3); font-weight: 600;
}
.tb-title  { font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.tb-tag    {
  font-size: 10px; color: var(--text-3);
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.tb-nav { display: flex; gap: 0; justify-self: center; }
.tb-link {
  padding: 6px 12px;
  color: var(--text-2);
  font-size: 13px;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tb-link:hover { color: var(--text); }
.tb-link.active { color: var(--text); border-bottom-color: var(--accent); }
.tb-link.tb-ext { color: var(--text-3); }
.tb-link.tb-ext:hover { color: var(--text-2); }
.tb-actions { display: flex; align-items: center; gap: 12px; justify-self: end; }
.tb-meta {
  font-size: 11px; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.tb-meta b   { color: var(--text-2); font-weight: 500; }
.tb-meta .bad { color: var(--bad); }
.tb-sub      { font-size: 11px; color: var(--text-3); }

@media (max-width: 760px) {
  .tb { grid-template-columns: 1fr auto; gap: 10px; }
  .tb-nav { grid-column: 1 / -1; justify-self: stretch; overflow-x: auto; }
  .tb-actions { gap: 8px; }
}

/* Auto-refresh status (injected into .tb-actions / legacy .who by settings.js) */
.v3-ar-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-size: 11px;
  color: var(--text-3);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.v3-ar-status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--text-3);
}
.v3-ar-status:hover { color: var(--text-2); border-color: var(--line); }
.v3-ar-status.idle::before,
.v3-ar-status.manual::before { background: var(--text-3); }
.v3-ar-status.paused          { color: var(--warn); }
.v3-ar-status.paused::before  { background: var(--warn); }
.v3-ar-status.on              { color: var(--text-2); }
.v3-ar-status.on::before      { background: var(--ok); }
@media (max-width: 760px) {
  .v3-ar-status { font-size: 10px; padding: 2px 6px; }
}

/* Page title */
.page-titles { margin: 16px 0 14px; }
.page-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.page-sub   { font-size: 12px; color: var(--text-3); margin: 4px 0 0; }

/* Sections */
.sec { margin: 24px 0; }
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.sec-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 0; }
.sec-meta  { font-size: 11px; color: var(--text-3); }
.sec-right { display: inline-flex; align-items: center; gap: 10px; }
.sec-counter {
  font-size: 11px; color: var(--text-2);
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  min-width: 24px; text-align: center;
}

/* KPI grid + tile */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 14px 0 10px;
  min-height: 92px;
}
@media (max-width: 760px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }

.kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 92px;
  justify-content: center;
}
.kpi-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kpi-value {
  font-size: 26px; font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.kpi-sub { font-size: 11px; color: var(--text-3); }
.kpi.warn .kpi-value { color: var(--warn); }
.kpi.bad  .kpi-value { color: var(--bad); }

/* Inline secondary stats */
.inline-stats {
  display: flex; flex-wrap: wrap;
  column-gap: 16px; row-gap: 4px;
  font-size: 12px; color: var(--text-3);
  margin: 8px 0 0;
}
.inline-stats > span b { color: var(--text-2); font-weight: 500; }
.inline-stats > span .warn { color: var(--warn); }
.inline-stats > span .bad  { color: var(--bad); }

/* Status dots */
.dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  vertical-align: middle;
  flex: 0 0 auto;
  background: var(--text-3);
}
.dot-ok       { background: var(--ok); }
.dot-warn     { background: var(--warn); }
.dot-bad      { background: var(--bad); }
.dot-offline  { background: var(--text-3); }
.dot-none, .dot-na { background: transparent; }

/* Tag chips */
.tag {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-3);
  white-space: nowrap;
}
.tag.warn { color: var(--warn); border-color: var(--accent-soft); }
.tag.bad  { color: var(--bad);  border-color: rgba(213, 106, 106, 0.28); }
.tag.ok   { color: var(--text-2); }

/* Compact list rows */
.list { display: flex; flex-direction: column; }
.list-row {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: var(--row-h);
  padding: 0 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease;
}
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--surface-2); }
.list-row .num { font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; }
.list-row .dim { color: var(--text-3); }

/* Table */
.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 13px;
}
.tbl thead th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 500;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  user-select: none;
}
.tbl tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--text);
  height: var(--row-h);
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { cursor: pointer; transition: background 0.12s ease; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.row-loading { cursor: default; opacity: 0.55; }
.tbl tbody tr.row-loading:hover { background: transparent; }
.tbl td.num { font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; }
.tbl th.num { text-align: right; }
.tbl td.dim { color: var(--text-3); }
.tbl td.warn { color: var(--warn); }
.tbl td.bad  { color: var(--bad); }
.tbl td .warn { color: var(--warn); }
.tbl td .bad  { color: var(--bad); }
.tbl td code  { color: var(--text); font-size: 12px; }

/* Segmented control */
.seg {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.seg-btn {
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.seg-btn:hover  { color: var(--text); }
.seg-btn.active { background: var(--surface-2); color: var(--text); }
.seg-btn .cnt {
  font-size: 10px;
  color: var(--text-3);
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.seg-btn.active .cnt { color: var(--accent); border-color: var(--accent-soft); }

/* Buttons */
.btn {
  padding: 5px 12px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover    { background: var(--surface-2); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary  { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.btn.primary:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn.ghost    { background: transparent; border-color: transparent; color: var(--text-2); padding: 5px 10px; }
.btn.ghost:hover { color: var(--text); background: var(--surface); }
.btn.danger   { background: rgba(213,106,106,0.12); border-color: rgba(213,106,106,0.45); color: var(--bad); }
.btn.danger:hover { background: rgba(213,106,106,0.20); border-color: var(--bad); color: #f0a8a8; }

/* Inputs / selects */
.inp, select.inp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  min-width: 0;
  transition: border-color 0.12s ease;
}
.inp::placeholder { color: var(--text-3); }
.inp:focus, select.inp:focus { outline: none; border-color: var(--accent-line); }
select.inp { padding-right: 22px; }

/* Toggle (used by settings) */
.tgl {
  width: 36px; height: 20px;
  appearance: none; -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  flex: 0 0 auto;
}
.tgl::before {
  content: '';
  position: absolute; left: 2px; top: 1px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--text-2);
  transition: all 0.14s ease;
}
.tgl:checked {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
.tgl:checked::before { left: 18px; background: var(--accent); }
.tgl:disabled { opacity: 0.45; cursor: not-allowed; }

/* Skeleton shimmer */
.skel {
  display: inline-block;
  background: linear-gradient(90deg, var(--surface), var(--surface-2), var(--surface));
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s linear infinite;
  border-radius: 4px;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* States */
.state-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 12.5px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.state-loading {
  padding: 14px;
  color: var(--text-3);
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.state-error {
  padding: 14px;
  color: var(--bad);
  font-size: 12.5px;
  border: 1px solid rgba(213, 106, 106, 0.28);
  border-radius: var(--radius);
  background: rgba(213, 106, 106, 0.04);
}

/* Utilities */
.muted, .dim { color: var(--text-3); }
.row-flex { display: flex; align-items: center; gap: 8px; }
.spacer   { flex: 1; }
.hidden   { display: none !important; }
.bad-text  { color: var(--bad); }
.warn-text { color: var(--warn); }

/* Footer line */
.foot {
  font-size: 11px; color: var(--text-3);
  margin-top: 36px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  letter-spacing: 0.01em;
}
.foot code { color: var(--text-2); }

/* ── 5. Page-specific minimums ──────────────────────────────────────────── */

/* Overview — Attention top-N grid */
.ov-attention {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.att-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--warn);
  border-radius: var(--radius);
  min-height: 80px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.att-card.bad { border-left-color: var(--bad); }
.att-card:hover { background: var(--surface-2); }
.att-card .att-name {
  font-size: 13px; font-weight: 600;
  display: flex; align-items: baseline; gap: 8px;
}
.att-card .att-name code { color: var(--text); font-weight: 600; }
.att-card .att-loc {
  font-size: 11px; color: var(--text-3); font-weight: 400;
}
.att-card .att-line { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.att-card .att-line .warn { color: var(--warn); }
.att-card .att-line .bad  { color: var(--bad); }

/* Overview — server table column template */
.tbl.tbl-servers thead th:nth-child(3),
.tbl.tbl-servers tbody td:nth-child(3),
.tbl.tbl-servers thead th:nth-child(4),
.tbl.tbl-servers tbody td:nth-child(4),
.tbl.tbl-servers thead th:nth-child(5),
.tbl.tbl-servers tbody td:nth-child(5) { width: 90px; }
.tbl.tbl-servers thead th:last-child,
.tbl.tbl-servers tbody td:last-child   { width: 28px; text-align: center; }

/* Server controls row */
.controls-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.controls-row .spacer { flex: 1; }

/* Min-heights so list/grid/table don't reshuffle on refresh */
.kpi-grid          { min-height: 92px; }
.ov-attention      { min-height: 96px; }
.tbl.tbl-servers   { min-height: 240px; }
.list              { min-height: 240px; }

/* ── 6. Body-class flags (settings → CSS) ───────────────────────────────── */
body.v3-compact          { font-size: 12.5px; line-height: 1.4; }
body.v3-compact .kpi     { padding: 12px 14px; min-height: 84px; }
body.v3-compact .kpi-value { font-size: 24px; }
body.v3-compact .list-row, body.v3-compact .tbl tbody td { height: 40px; min-height: 40px; }
body.v3-show-debug .legacy-debug { display: block; }
body:not(.v3-show-debug) .legacy-debug-hide-by-default { display: none; }
body.v3-compact .sec { margin: 18px 0; }

/* ── 7. Legacy compat ───────────────────────────────────────────────────────
 * Minimal styling so views not yet migrated to the new design system stay
 * readable. Remove once overview/server/problems/analytics/settings all
 * render via FermaV3Shell primitives.
 *
 * Convention: legacy classes here are intentionally muted — no traffic-light
 * flooding, no blue accents, no kислотные greens.
 * ───────────────────────────────────────────────────────────────────────── */

.app-shell {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 8px var(--page-pad) 60px;
}
@media (max-width: 760px) { .app-shell { padding: 6px var(--page-pad-tablet) 40px; } }

/* Legacy topbar (used by server.js, problems.js, analytics.js, settings.js
   until they're rewritten). Visually maps to the new .tb chrome. */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 8px;
  min-height: var(--topbar-h);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 28px; height: 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}
.brand h1 { font-size: 14px; font-weight: 600; margin: 0; letter-spacing: -0.005em; }
.brand-tag {
  font-size: 10px; color: var(--text-3);
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.who {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  color: var(--text-3); font-size: 11px;
}
.who b { color: var(--text-2); font-weight: 500; }
.v3-nav { display: flex; gap: 0; margin-left: 18px; }
.v3-nav-link {
  padding: 6px 12px;
  color: var(--text-2);
  font-size: 13px;
  border-bottom: 1.5px solid transparent;
}
.v3-nav-link:hover { color: var(--text); }
.v3-nav-link.active { color: var(--text); border-bottom-color: var(--accent); }
.v3-nav-link.placeholder { color: var(--text-3); }
.v3-nav-link.external { color: var(--text-3); margin-left: 6px; }
.v3-nav-soon { display: none; }

/* Legacy buttons */
.ov-btn {
  padding: 5px 10px; font-size: 12px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px; cursor: pointer;
}
.ov-btn:hover { background: var(--surface-2); }
.ov-btn.ghost { background: transparent; color: var(--text-2); border-color: transparent; }
.ov-btn.ghost:hover { color: var(--text); background: var(--surface); }
.ov-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Legacy KPI grid (problems/analytics still use these until rewritten) */
.ov-kpis, .v3-pr-kpis, .v3-an-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 14px 0 10px;
  min-height: 92px;
}
.ov-kpi {
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-height: 92px;
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center;
}
.ov-kpi.ok, .ov-kpi.warn, .ov-kpi.bad { border-color: var(--line); }
.ov-kpi-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.ov-kpi-value { font-size: 24px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.ov-kpi-value .warn { color: var(--warn); }
.ov-kpi-value .bad  { color: var(--bad); }
.ov-kpi.warn .ov-kpi-value { color: var(--warn); }
.ov-kpi.bad  .ov-kpi-value { color: var(--bad); }
.ov-kpi-sub { font-size: 11px; color: var(--text-3); }
.ov-load {
  font-size: 11px; color: var(--text-3);
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.ov-section, .v3-section { margin: 22px 0; }
.ov-section h3, .v3-section h3 {
  font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 10px;
}
.ov-h3-meta { color: var(--text-3); font-weight: 400; font-size: 11px; margin-left: 8px; }
.ov-foot {
  font-size: 11px; color: var(--text-3);
  margin-top: 36px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* Legacy cards (location/server) — silent neutral with thin status line */
.ov-loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; min-height: 110px; }
.ov-srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; min-height: 220px; }
.ov-srv-group { margin: 16px 0; }
.ov-srv-group-head { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }

.ov-loc-card, .ov-srv-card {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 84px;
  transition: background 0.12s ease;
}
.ov-loc-card:hover, .ov-srv-card:hover { background: var(--surface-2); }
.ov-loc-card.bad, .ov-srv-card.bad     { border-left-color: var(--bad); }
.ov-loc-card.warn, .ov-srv-card.warn   { border-left-color: var(--warn); }
.ov-loc-card.ok, .ov-srv-card.ok,
.ov-loc-card.unknown, .ov-srv-card.unknown,
.ov-loc-card.none, .ov-srv-card.none   { border-left-color: var(--line); }
.ov-loc-card.none, .ov-srv-card.none   { opacity: 0.6; }
.ov-loc-head, .ov-srv-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.ov-loc-name, .ov-srv-name { font-size: 13px; font-weight: 600; }
.ov-loc-status, .ov-srv-status {
  font-size: 10px; color: var(--text-3);
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ov-loc-status.warn, .ov-srv-status.warn { color: var(--warn); border-color: var(--accent-soft); }
.ov-loc-status.bad,  .ov-srv-status.bad  { color: var(--bad);  border-color: rgba(213, 106, 106, 0.28); }
.ov-loc-line, .ov-srv-line {
  font-size: 12px; color: var(--text-2);
  margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.ov-loc-line b, .ov-srv-line b { color: var(--text); font-weight: 600; }
.ov-loc-line .warn, .ov-srv-line .warn { color: var(--warn); }
.ov-loc-line .bad, .ov-srv-line .bad   { color: var(--bad); }
.ov-loc-line .muted, .ov-srv-line .muted { color: var(--text-3); }
.ov-loc-progress { font-size: 11px; color: var(--text-3); margin-top: 4px; }

.ov-srv-line2 { font-size: 11.5px; color: var(--text-3); }
.ov-empty-line { font-size: 12px; color: var(--text-3); }
.ov-empty-line.bad  { color: var(--bad); }
.ov-empty-line.warn { color: var(--warn); }

/* Legacy problems-summary (overview) */
.ov-problems { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0; }
.ov-problems.empty, .ov-problems.ok { color: var(--text-3); font-size: 12.5px; border-color: var(--line-soft); background: transparent; }
.ov-problems h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.ov-prob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .ov-prob-grid { grid-template-columns: 1fr; } }
.ov-prob-col { min-width: 0; }
.ov-prob-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 6px; }
.ov-prob-list { list-style: none; margin: 0; padding: 0; }
.ov-prob-list li { font-size: 12.5px; color: var(--text-2); padding: 3px 0; }
.ov-prob-list b  { color: var(--text); font-variant-numeric: tabular-nums; }
.ov-prob-link { color: var(--text); border-bottom: 1px dotted var(--line); }
.ov-prob-link:hover { border-bottom-color: var(--text-2); }

/* Server page legacy */
.v3-server-topbar {}
.v3-bcrumbs { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); }
.v3-back { color: var(--text-2); }
.v3-back:hover { color: var(--text); }
.v3-sep { color: var(--text-3); }
.v3-bcrumb-link { color: var(--text-2); }
.v3-bcrumb-link:hover { color: var(--text); }
.v3-bcrumb-current { color: var(--text); }
.v3-bcrumb-current code { color: var(--text); }

.v3-srv-head {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 12px 0;
}
.v3-srv-head.bad     { border-left-color: var(--bad); }
.v3-srv-head.warn    { border-left-color: var(--warn); }
.v3-srv-head.ok,
.v3-srv-head.unknown,
.v3-srv-head.none    { border-left-color: var(--line); }
.v3-srv-head-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.v3-srv-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.v3-srv-name { font-size: 16px; font-weight: 600; }
.v3-srv-name code { color: var(--text); font-size: 14px; }
.v3-srv-loc { font-size: 12px; color: var(--text-3); }
.v3-srv-loc .muted { color: var(--text-3); }
.v3-srv-status { font-size: 10px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.v3-srv-status.warn { color: var(--warn); border-color: var(--accent-soft); }
.v3-srv-status.bad  { color: var(--bad); border-color: rgba(213, 106, 106, 0.28); }
.v3-srv-head-line { font-size: 13px; color: var(--text-2); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.v3-srv-head-line.sub { font-size: 11.5px; color: var(--text-3); }
.v3-srv-head-line b { color: var(--text); font-variant-numeric: tabular-nums; }
.v3-srv-head-line .warn { color: var(--warn); }
.v3-srv-head-line .bad  { color: var(--bad); }

/* Legacy filters (segmented row of buttons) */
.v3-filters { margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.v3-filter-row { display: flex; flex-wrap: wrap; gap: 4px; }
.v3-filter-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.v3-grouping { font-size: 12px; color: var(--text-3); }
.v3-grouping-label { color: var(--text-3); margin-right: 4px; }
.v3-filter-btn, .v3-group-btn {
  padding: 5px 10px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}
.v3-filter-btn:hover, .v3-group-btn:hover { color: var(--text); background: var(--surface-2); }
.v3-filter-btn.active, .v3-group-btn.active {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--accent-soft);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.v3-filter-btn .cnt, .v3-group-btn .cnt {
  font-size: 10px; color: var(--text-3); margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.v3-filter-btn.active .cnt, .v3-group-btn.active .cnt { color: var(--accent); }

.v3-search, .v3-select {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  color: var(--text);
}
.v3-search::placeholder { color: var(--text-3); }
.v3-search:focus, .v3-select:focus { outline: none; border-color: var(--accent-line); }

/* Legacy phone rows (server page) */
.v3-phones { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 240px; }
.v3-phones.empty { padding: 28px; text-align: center; color: var(--text-3); }
.v3-empty { padding: 28px; text-align: center; color: var(--text-3); font-size: 12px; }
.v3-phone-row { border-bottom: 1px solid var(--line-soft); border-left: 2px solid var(--line); }
.v3-phone-row:last-child { border-bottom: none; }
.v3-phone-row.bad     { border-left-color: var(--bad); }
.v3-phone-row.warn    { border-left-color: var(--warn); }
.v3-phone-row.ok,
.v3-phone-row.offline,
.v3-phone-row.unknown { border-left-color: var(--line); }
.v3-phone-row.offline, .v3-phone-row.unknown { opacity: 0.7; }
.v3-phone-head {
  display: grid;
  grid-template-columns: 12px 1.2fr 80px 80px 80px 1fr 24px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.v3-phone-head:hover { background: var(--surface-2); }
.v3-phone-row.open .v3-phone-head { background: var(--surface-2); }
.v3-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--text-3);
}
.v3-phone-row.warn .v3-dot { background: var(--warn); }
.v3-phone-row.bad  .v3-dot { background: var(--bad); }
.v3-phone-row.ok   .v3-dot,
.v3-phone-row.offline .v3-dot,
.v3-phone-row.unknown .v3-dot { background: var(--text-3); }
.v3-phone-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-phone-num { font-size: 13px; font-weight: 600; color: var(--text); }
.v3-phone-num .muted { color: var(--text-3); font-weight: 400; }
.v3-phone-ser { font-size: 11px; color: var(--text-3); }
.v3-phone-ser code { color: var(--text-3); font-size: 11px; }
.v3-phone-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v3-phone-cell-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.v3-phone-cell-value { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.v3-phone-cell.warn .v3-phone-cell-value { color: var(--warn); }
.v3-phone-cell.bad  .v3-phone-cell-value { color: var(--bad); }
.v3-phone-cell.ok   .v3-phone-cell-value { color: var(--text-2); }
.v3-phone-status { font-size: 12px; color: var(--text-2); min-width: 0; }
.v3-phone-statline { font-size: 12px; color: var(--text-2); }
.v3-phone-row.bad  .v3-phone-statline { color: var(--bad); }
.v3-phone-row.warn .v3-phone-statline { color: var(--warn); }
.v3-phone-row.ok   .v3-phone-statline { color: var(--text-2); }
.v3-phone-check { font-size: 10px; color: var(--text-3); }
.v3-phone-toggle { color: var(--text-3); font-size: 12px; text-align: center; }
.v3-phone-row.open .v3-phone-toggle { color: var(--text); }
.v3-phone-detail {
  padding: 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
}
.v3-phone-actions { display: flex; flex-direction: column; gap: 10px; }
.v3-phone-actions-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.v3-phone-actions-row.primary { padding-bottom: 6px; }
.v3-act-btn {
  padding: 5px 12px; font-size: 12px;
  background: var(--surface);
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: not-allowed;
}
.v3-act-note { font-size: 11px; color: var(--text-3); margin-left: 8px; }
.v3-srv-actions, .v3-phone-logs { font-size: 12px; }
.v3-srv-actions summary, .v3-phone-logs summary {
  cursor: pointer; color: var(--text-3); padding: 4px 0;
  list-style: none;
}
.v3-srv-actions summary::-webkit-details-marker,
.v3-phone-logs summary::-webkit-details-marker { display: none; }
.v3-srv-actions summary::before, .v3-phone-logs summary::before { content: '▸ '; }
.v3-srv-actions[open] summary::before, .v3-phone-logs[open] summary::before { content: '▾ '; }
.v3-empty-line { font-size: 12px; color: var(--text-3); padding: 8px 0; }

@media (max-width: 760px) {
  .v3-phone-head {
    grid-template-columns: 12px 1fr 24px;
    grid-template-rows: auto auto auto;
    gap: 4px 10px;
    padding: 9px 12px;
  }
  .v3-phone-id    { grid-column: 2; grid-row: 1; }
  .v3-phone-cell  { display: inline-block; margin-right: 12px; grid-column: 2; grid-row: 2; }
  .v3-phone-status{ grid-column: 2; grid-row: 3; }
  .v3-phone-toggle{ grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .v3-dot         { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 5px; }
}

/* Highlight (?serial=...) — amber wash */
.v3-phone-row.v3-highlight .v3-phone-head { background: rgba(214, 168, 79, 0.07); }
.v3-phone-row.v3-flash {
  animation: v3-flash 1.6s ease-out 1;
}
@keyframes v3-flash {
  0%   { box-shadow: 0 0 0 0 rgba(214, 168, 79, 0.55) inset; }
  20%  { box-shadow: 0 0 0 3px rgba(214, 168, 79, 0.40) inset; }
  100% { box-shadow: 0 0 0 0 rgba(214, 168, 79, 0)    inset; }
}

/* Problems list legacy */
.v3-pr-head { margin: 14px 0 6px; }
.v3-pr-head h2 { font-size: 19px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.v3-pr-head .sub { font-size: 12px; color: var(--text-3); margin: 4px 0 0; }
.v3-pr-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 240px; }
.v3-pr-list.empty { padding: 28px; text-align: center; color: var(--text-3); }
.v3-pr-group { border-bottom: 1px solid var(--line); }
.v3-pr-group:last-child { border-bottom: none; }
.v3-pr-group > summary {
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface-2);
  user-select: none;
  display: flex; align-items: center; gap: 10px;
}
.v3-pr-group > summary::-webkit-details-marker { display: none; }
.v3-pr-group > summary::before { content: '▸ '; color: var(--text-3); }
.v3-pr-group[open] > summary::before { content: '▾ '; }
.v3-pr-grp-name { font-weight: 600; color: var(--text); }
.v3-pr-grp-count { font-variant-numeric: tabular-nums; color: var(--text-3); }
.v3-pr-grp-sub { color: var(--text-3); font-size: 11px; }
.v3-pr-group-body {}
.v3-pr-row {
  display: grid;
  grid-template-columns: 12px 1.5fr 80px 80px 80px 1.4fr 80px;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid var(--line);
}
.v3-pr-row:last-child { border-bottom: none; }
.v3-pr-row.bad      { border-left-color: var(--bad); }
.v3-pr-row.warn     { border-left-color: var(--warn); }
.v3-pr-row.offline  { border-left-color: var(--line); opacity: 0.78; }
.v3-pr-row.bad  .v3-dot { background: var(--bad); }
.v3-pr-row.warn .v3-dot { background: var(--warn); }
.v3-pr-row.offline .v3-dot { background: var(--text-3); }
.v3-pr-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-pr-num { font-size: 13px; font-weight: 600; }
.v3-pr-num .muted { color: var(--text-3); font-weight: 400; }
.v3-pr-ser { font-size: 11px; color: var(--text-3); }
.v3-pr-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v3-pr-cell .v3-phone-cell-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.v3-pr-cell .v3-phone-cell-value { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.v3-pr-cell.warn .v3-phone-cell-value { color: var(--warn); }
.v3-pr-cell.bad  .v3-phone-cell-value { color: var(--bad); }
.v3-pr-reason { font-size: 12.5px; color: var(--text-2); }
.v3-pr-row.bad     .v3-pr-reason { color: var(--bad); }
.v3-pr-row.warn    .v3-pr-reason { color: var(--warn); }
.v3-pr-row.offline .v3-pr-reason { color: var(--text-3); }
.v3-pr-open { justify-self: end; }

@media (max-width: 760px) {
  .v3-pr-row {
    grid-template-columns: 12px 1fr auto;
    grid-template-rows: auto auto auto auto;
    gap: 4px 10px;
  }
  .v3-pr-id     { grid-column: 2; grid-row: 1; }
  .v3-pr-cell   { display: inline-block; margin-right: 12px; grid-column: 2; grid-row: 2; }
  .v3-pr-reason { grid-column: 2; grid-row: 3; }
  .v3-pr-open   { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .v3-dot       { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 5px; }
}

/* Analytics legacy */
.v3-an-tbl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.v3-an-table { margin: 22px 0; }
.v3-an-table h3 { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: var(--text); }
.v3-an-table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.v3-an-srv-sort { font-size: 11px; color: var(--text-3); display: inline-flex; gap: 4px; align-items: center; }
.v3-an-tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 12.5px;
}
.v3-an-tbl thead th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 500; padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.v3-an-tbl tbody td { padding: 8px 12px; border-bottom: 1px solid var(--line-soft); color: var(--text); }
.v3-an-tbl tbody tr:last-child td { border-bottom: none; }
.v3-an-tbl tbody tr:hover { background: var(--surface-2); }
.v3-an-tbl td.num { font-variant-numeric: tabular-nums; color: var(--text-2); text-align: right; }
.v3-an-tbl th.num { text-align: right; }
.v3-an-tbl td.num.warn { color: var(--warn); }
.v3-an-tbl td.num.bad  { color: var(--bad); }
.v3-an-tbl td.num.ok   { color: var(--text-2); }
.v3-an-tbl td.bar { width: 30%; }
.v3-an-tbl th.bar { width: 30%; }
.v3-an-bar { width: 100%; height: 6px; background: rgba(255, 255, 255, 0.04); border-radius: 999px; overflow: hidden; }
.v3-an-bar-fill { height: 100%; background: var(--accent); border-radius: inherit; }
.v3-an-srv-link { color: var(--text); }
.v3-an-srv-link:hover { color: var(--accent); }
.v3-an-srv-link code { color: var(--text); }
.v3-an-meta { font-size: 11px; color: var(--text-3); }
.v3-an-chart { margin: 22px 0; }
.v3-an-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.v3-an-chart-head h3 { font-size: 13px; font-weight: 600; margin: 0; }
.v3-chart {
  width: 100%; height: 140px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.v3-chart-bg { fill: transparent; }
.v3-chart-label { fill: var(--text-3); font-size: 3.5px; text-anchor: middle; }
.v3-chart-ref { stroke: var(--text-3); stroke-width: 0.3; stroke-dasharray: 1.5 1.5; }
.v3-chart-legend { font-size: 11px; color: var(--text-3); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.v3-chart-legend i { display: inline-block; width: 10px; height: 6px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.v3-chart-legend .leg-ok { background: var(--ok); }
.v3-chart-legend .leg-warn { background: var(--warn); }
.v3-chart-legend .leg-bad { background: var(--bad); }
.v3-an-insights { margin: 14px 0; display: flex; flex-direction: column; gap: 6px; }
.v3-an-insight {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

/* Settings legacy */
.v3-set-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 12px 0;
  overflow: hidden;
}
.v3-set-head { padding: 12px 16px 8px; border-bottom: 1px solid var(--line-soft); }
.v3-set-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.v3-set-head .sub { color: var(--text-3); font-size: 11.5px; margin: 4px 0 0; line-height: 1.5; }
.v3-set-body { padding: 0; }
.v3-set-row {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.v3-set-row:last-child { border-bottom: none; }
.v3-set-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v3-set-row-label { font-size: 13px; color: var(--text); }
.v3-set-row-hint  { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.v3-set-row.locked { opacity: 0.6; }
.v3-set-lock {
  font-size: 9px; color: var(--text-3);
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.v3-toggle input[type="checkbox"] {
  width: 36px; height: 20px;
  appearance: none; -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  flex: 0 0 auto;
}
.v3-toggle input[type="checkbox"]::before {
  content: ''; position: absolute; left: 2px; top: 1px;
  width: 14px; height: 14px;
  border-radius: 999px;
  background: var(--text-2);
  transition: all 0.14s ease;
}
.v3-toggle input[type="checkbox"]:checked { background: var(--accent-soft); border-color: var(--accent-line); }
.v3-toggle input[type="checkbox"]:checked::before { left: 18px; background: var(--accent); }
.v3-toggle input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }
.v3-set-status { padding: 8px 16px; color: var(--text-2); font-size: 11.5px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); }
.v3-set-status b { color: var(--text); }
.v3-set-status .muted { color: var(--text-3); }
.v3-select-row select { min-width: 160px; }
.v3-set-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.v3-set-jsonbox {
  margin: 10px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  overflow: hidden;
}
.v3-set-jsonbox > summary {
  padding: 8px 12px; cursor: pointer; color: var(--text-3); font-size: 11.5px;
  user-select: none; list-style: none;
}
.v3-set-jsonbox > summary::-webkit-details-marker { display: none; }
.v3-set-jsonbox > summary::before { content: '▸ '; color: var(--text-3); }
.v3-set-jsonbox[open] > summary::before { content: '▾ '; }
.v3-set-jsonbox textarea {
  width: 100%; box-sizing: border-box;
  background: var(--surface);
  color: var(--text);
  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  border: none;
  border-top: 1px solid var(--line-soft);
  padding: 10px 12px;
  resize: vertical; display: block;
}
.v3-set-jsonbox textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent-line); }
.v3-set-jsonactions {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--line-soft);
}
.v3-set-jsonactions .spacer { flex: 1; }
.v3-set-jsonactions .muted { font-size: 11px; }
.v3-set-jsonactions .muted.bad { color: var(--bad); }

/* Old debug blocks (overview/server) — calm */
.ov-debug { font-size: 12px; }
.ov-debug summary {
  padding: 8px 12px; cursor: pointer; color: var(--text-3); font-size: 11.5px;
  background: transparent; user-select: none; list-style: none;
}
.ov-debug summary::-webkit-details-marker { display: none; }
.ov-debug summary::before { content: '▸ '; color: var(--text-3); }
.ov-debug[open] summary::before { content: '▾ '; }
.ov-debug-body { padding: 10px 12px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 8px; }
.ov-debug-body .picker { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.ov-debug-body .picker label { font-size: 11.5px; color: var(--text-3); }
.ov-debug-body .picker select {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 8px; font-size: 12px; color: var(--text);
}
.ov-dbg-head, .dbg-rows { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ov-dbg-head th, .ov-dbg-head td { padding: 4px 8px; text-align: left; vertical-align: top; }
.ov-dbg-head th { color: var(--text-3); font-weight: 500; }
.ov-dbg-head td { color: var(--text-2); font-variant-numeric: tabular-nums; }
.ov-dbg-head td.warn { color: var(--warn); }
.ov-dbg-head td.bad  { color: var(--bad); }
.ov-dbg-head td.ok   { color: var(--text-2); }
.dbg-rows th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); padding: 4px 6px; }
.dbg-rows td { padding: 4px 6px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dbg-rows td.warn { color: var(--warn); }
.dbg-rows td.bad  { color: var(--bad); }
.dbg-rows td.ok   { color: var(--text-2); }
.dbg-rows tr.disc { opacity: 0.6; }
.v3-dbg-errs { margin: 8px 0; padding: 6px 8px; border: 1px solid rgba(213, 106, 106, 0.18); background: rgba(213, 106, 106, 0.04); border-radius: 8px; font-size: 11.5px; }
.v3-dbg-errs summary { color: var(--bad); cursor: pointer; }
.v3-dbg-errs pre { color: var(--text-2); overflow: auto; font-size: 11px; margin: 4px 0 0; }
.v3-dbg-dropped { margin: 8px 0; padding: 6px 8px; border: 1px solid var(--accent-soft); background: rgba(214, 168, 79, 0.03); border-radius: 8px; font-size: 11.5px; }
.v3-dbg-dropped summary { color: var(--warn); cursor: pointer; }
.v3-dbg-dropped pre { color: var(--text-2); overflow: auto; font-size: 11px; margin: 4px 0 0; }

/* Pills (legacy) */
.v3-pill {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-3);
}
.v3-pill.ok   { color: var(--text-2); border-color: var(--line); }
.v3-pill.warn { color: var(--warn); border-color: var(--accent-soft); }
.v3-pill.bad  { color: var(--bad);  border-color: rgba(213, 106, 106, 0.28); }

/* Skeleton list (very early boot) */
.skeleton-list { font-size: 11.5px; color: var(--text-3); }
.skeleton-list dd.ok   { color: var(--text-2); }
.skeleton-list dd.warn { color: var(--warn); }
.skeleton-list dd.bad  { color: var(--bad); }

/* Error block (used by app.js) */
.ov-err {
  padding: 14px;
  border: 1px solid rgba(213, 106, 106, 0.28);
  background: rgba(213, 106, 106, 0.04);
  color: var(--bad);
  border-radius: var(--radius);
  font-size: 12.5px;
}

/* Hide legacy fixed pill if anything still tries to render it */
.v3-ar-pill { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
 * Brutalist chrome — global hamburger + slide-out drawer + minimalist bar.
 *
 * Hamburger and drawer live in <body> (mounted once by ferma_v3_app.js)
 * so they survive view re-renders. The bar comes from Shell.topbar()
 * and is rendered per-view. Legacy view topbars hide their inline nav.
 * ───────────────────────────────────────────────────────────────────────── */

/* Kill all in-page nav strips — navigation now lives only in the drawer */
.v3-nav, .tb-nav { display: none !important; }
.v3-nav-link, .tb-link { display: none; }
/* (Legacy v2-link inside topbar gets hidden too; v2 still accessible via drawer footer) */

/* Hamburger button — fixed top-left, always visible */
.burger {
  position: fixed;
  top: 14px; left: 14px;
  width: 38px; height: 38px;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  cursor: pointer;
  z-index: 60;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.burger:hover { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); }
.burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: rgba(255,255,255,0.7);
  border-radius: 999px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
body.drawer-open .burger { border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.04); }
body.drawer-open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.drawer-open .burger span:nth-child(2) { opacity: 0; }
body.drawer-open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Drawer overlay */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 80;
}
.drawer-overlay.on { opacity: 1; pointer-events: auto; }

/* Drawer */
.drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 288px;
  background: #050507;
  border-right: 1px solid var(--line);
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.15, 1);
  z-index: 90;
  display: flex; flex-direction: column;
  padding: 24px 0;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 26px 26px;
}
.drawer-brand {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}
.drawer-close {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  line-height: 1;
  transition: color 0.15s ease;
}
.drawer-close:hover { color: var(--text); }

.drawer-nav {
  padding: 8px 0;
  flex: 1;
  display: flex; flex-direction: column;
}
.drawer-link {
  display: block;
  padding: 14px 26px;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--text-2);
  border-left: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.drawer-link:hover {
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.drawer-link.active {
  color: var(--text);
  border-left-color: var(--accent);
}

.drawer-foot {
  padding: 16px 26px;
  border-top: 1px solid var(--line-soft);
}
.drawer-foot a {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.drawer-foot a:hover { color: var(--text-2); }

/* New minimalist bar (rendered by Shell.topbar) */
.bar {
  display: flex; align-items: center;
  padding: 18px 24px 18px 64px;     /* leave space for the burger */
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  min-height: 64px;
  margin-bottom: 0;
}
.bar-where {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px;
  letter-spacing: 0.005em;
}
.bar-brand {
  /* «Печатные» — uppercase + лёгкий letter-spacing для воздуха.
     Один и тот же стиль на FERMA-brand и на «ты здесь»-сегмент;
     разница только в цвете (см. .bar-brand-current). */
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.bar-brand:hover { color: var(--accent); }
/* Текущий сегмент (имя сервера / страница) — приглушённый цвет, чтобы
   «ФЕРМА» оставалась визуальным якорем. На hover — accent. */
.bar-brand-current {
  color: var(--text-2);
}
.bar-brand-current:hover { color: var(--accent); }
.bar-sep   {
  color: var(--text-3);
  font-weight: 300;
  letter-spacing: 0;
  margin: 0 -2px;  /* visually tighter to neighbours */
}
.bar-page  { color: var(--text-2); }
.bar-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
}
.bar-updated {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  cursor: help;
  white-space: nowrap;
}
.adb-last {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.adb-last .bar-updated { color: var(--text-2); font-size: 13px; }
.adb-last .bad { color: var(--bad); font-size: 12px; }
.bar-updated[hidden] { display: none; }
.bar-updated.is-refreshing {
  color: var(--text-3);
  opacity: 0.7;
  font-style: italic;
  animation: v3-flash 1.6s ease-in-out infinite;
}
@media (max-width: 760px) {
  .bar-updated { display: none; }
}

@media (max-width: 760px) {
  .bar { padding: 14px 16px 14px 60px; min-height: 56px; }
}

/* ── Overview brutalist layout ─────────────────────────────────────────── */
.page {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 28px 80px;
}
@media (max-width: 760px) { .page { padding: 0 18px 60px; } }

/* Hello block — single calm sentence + meta */
.hello {
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--line-soft);
}
.hello-line {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}
.hello-line .accent { color: var(--accent); }
.hello-meta {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: 0.005em;
}
.hello-meta b { color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.hello-meta .warn { color: var(--warn); }
.hello-meta .bad  { color: var(--bad); }

@media (max-width: 760px) {
  .hello { padding: 26px 0 20px; }
  .hello-line { font-size: 17px; }
}

/* Locations — tight by default, blocks reveal on hover with smooth growth */
.locations {
  display: flex;
  flex-direction: column;
}
.loc {
  position: relative;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.22s ease;
}
.loc:hover {
  background: rgba(255,255,255,0.018);
}
.loc-name {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text);
  margin: 0;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.loc:hover .loc-name { color: #fff; }
.loc.has-warn .loc-name::after,
.loc.has-bad  .loc-name::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 999px;
  vertical-align: middle;
}
.loc.has-warn .loc-name::after { background: var(--warn); }
.loc.has-bad  .loc-name::after { background: var(--bad); }

/* Minimalist meta line — hidden until hover, then a single calm row. */
.loc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  transition: max-height 0.34s cubic-bezier(0.2, 0.7, 0.15, 1),
              opacity 0.22s ease,
              margin-top 0.34s ease;
}
.loc:hover .loc-meta,
.loc.open  .loc-meta {
  max-height: 32px;
  opacity: 1;
  margin-top: 8px;
}
.loc-meta b { color: var(--text-2); font-weight: 500; }
.loc-meta .warn { color: var(--warn); }
.loc-meta .bad  { color: var(--bad); }
.loc-meta .meta-loading { color: var(--text-3); font-style: italic; }

@media (max-width: 760px) {
  .loc-meta { gap: 4px 14px; font-size: 12px; }
}

/* ── Farm-loading hero: centred "Проверяю ферму" → slides up into place ── */
.hello {
  transition:
    min-height 0.85s cubic-bezier(0.2, 0.7, 0.15, 1),
    padding    0.85s cubic-bezier(0.2, 0.7, 0.15, 1),
    gap        0.85s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.hello-line,
.hello-meta {
  transition:
    font-size 0.7s cubic-bezier(0.2, 0.7, 0.15, 1),
    margin    0.7s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.farm-loading .hello {
  min-height: calc(100vh - 220px);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  border-bottom-color: transparent;
  flex-wrap: nowrap;
}
/* В loading-режиме hello-dot и точка-сепаратор перед meta ломают
   визуальное центрирование (создают асимметричные элементы по бокам
   от текста). Прячем их — остаётся одна красивая колонка по центру. */
.farm-loading .hello-dot { display: none; }
.farm-loading .hello-meta::before { display: none; }
.farm-loading .hello-line {
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  animation: v3-hello-pulse 1.6s ease-in-out infinite;
  max-width: 720px;
  width: 100%;
  text-align: center;
  display: block;
  margin: 0 auto;
}
.farm-loading .hello-meta {
  font-size: 14px;
  margin: 4px auto 0;
  opacity: 0.85;
  max-width: 720px;
  width: 100%;
  text-align: center;
  display: block;
  font-variant-numeric: tabular-nums;
}
.farm-loading .locations,
.farm-loading .clicks-panel {
  display: none;
}
/* Problems-view: при centred-loader (.farm-loading) видна только .hello,
   остальные блоки .dg-app скрыты — никаких «прыжков» при промежуточных
   _render'ах во время загрузки. После .farm-ready — плавный fade-in. */
.farm-loading .dg-app > *:not(.hello) { display: none; }
.dg-app > *:not(.hello) {
  opacity: 1;
  transition: opacity 0.45s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.farm-ready .dg-app > *:not(.hello) { opacity: 1; }
/* Centred «Проверяю ферму» — топбар (с кнопкой «Обновить» и плашкой
   «обновлено») и burger (три точки в углу) скрыты во время загрузки,
   плавно появляются при .farm-ready (это синхронно тоггл'ится на _root
   и на <body> из overview.js#_markFarmReady — потому что .burger
   живёт под body, а .bar — внутри #app). */
.bar { transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.15, 1); }
.farm-loading .bar { opacity: 0; pointer-events: none; }
.burger { transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.15, 1); }
body.farm-loading .burger { opacity: 0; pointer-events: none; }
/* Скрываем .hello placeholder в .dg-app когда не идёт centred-state — он
   используется ТОЛЬКО для лоадера problems-view. */
.dg-app > .hello { display: none; }
.farm-loading .dg-app > .hello { display: flex; }
@keyframes v3-hello-pulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.55; }
}
@media (max-width: 720px) {
  .farm-loading .hello { min-height: calc(100vh - 180px); gap: 10px; }
  .farm-loading .hello-line { font-size: 24px; max-width: 92%; }
  .farm-loading .hello-meta { font-size: 13px; max-width: 92%; }
}

/* ── First-load stagger animations ─────────────────────────────────────── */
@keyframes v3-bar-in    { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes v3-hello-in  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v3-loc-in    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v3-burger-in { from { opacity: 0; transform: scale(0.86); }      to { opacity: 1; transform: scale(1); } }

/* Burger appears once per app boot */
.burger {
  animation: v3-burger-in 0.45s 0.12s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}

/* Animations only fire while the root carries .v3-first.
   overview.js adds the class on first mount and removes it after 1.1s. */
.v3-first .bar    { animation: v3-bar-in   0.4s  ease-out backwards; }
.v3-first .hello  { animation: v3-hello-in 0.5s  0.12s cubic-bezier(0.2, 0.7, 0.15, 1) backwards; }

/* Locations are hidden until the farm finishes loading. When the JS adds
   .farm-ready to the root, each location transitions in with a stagger
   delay top-to-bottom. .farm-ready stays permanent so subsequent number
   updates don't trigger the animation again. */
.locations .loc {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.15, 1),
              transform 0.55s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.farm-ready .locations .loc {
  opacity: 1;
  transform: translateY(0);
}
.farm-ready .locations .loc:nth-child(1) { transition-delay: 0.00s; }
.farm-ready .locations .loc:nth-child(2) { transition-delay: 0.10s; }
.farm-ready .locations .loc:nth-child(3) { transition-delay: 0.20s; }
.farm-ready .locations .loc:nth-child(4) { transition-delay: 0.30s; }
.farm-ready .locations .loc:nth-child(5) { transition-delay: 0.40s; }
.farm-ready .locations .loc:nth-child(6) { transition-delay: 0.50s; }
.farm-ready .locations .loc:nth-child(7) { transition-delay: 0.58s; }
.farm-ready .locations .loc:nth-child(n+8) { transition-delay: 0.66s; }

/* Drawer link entries get a subtle stagger when drawer opens */
.drawer.open .drawer-link {
  animation: v3-hello-in 0.32s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
.drawer.open .drawer-link:nth-child(1) { animation-delay: 0.04s; }
.drawer.open .drawer-link:nth-child(2) { animation-delay: 0.08s; }
.drawer.open .drawer-link:nth-child(3) { animation-delay: 0.12s; }
.drawer.open .drawer-link:nth-child(4) { animation-delay: 0.16s; }

/* Server list inside opened location — clean vertical list, no jagged grids */
.loc-servers {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.36s cubic-bezier(0.2, 0.7, 0.15, 1),
              opacity 0.22s ease,
              margin-top 0.36s ease;
}
.loc.open .loc-servers {
  max-height: 2000px;
  opacity: 1;
  margin-top: 18px;
}
.loc-servers-list {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}
.loc-srv-row {
  display: grid;
  grid-template-columns: 1fr auto 8px;
  align-items: center;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease, color 0.15s ease;
}
.loc-srv-row:last-child { border-bottom: none; }
.loc-srv-row:hover { background: rgba(255,255,255,0.04); }
.loc-srv-row .loc-srv-name code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
}
.loc-srv-row .loc-srv-stats {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}
.loc-srv-row .loc-srv-stats .dim { opacity: 0.55; }
.loc-srv-row .loc-srv-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: transparent;
  justify-self: center;
}
.loc-srv-row.warn .loc-srv-dot { background: var(--warn); }
.loc-srv-row.bad  .loc-srv-dot { background: var(--bad); }
.loc-srv-row.loading { opacity: 0.55; }
.loc-srv-row.loading:hover { background: transparent; }

/* Stagger-in for server rows when their location opens */
.loc.open .loc-srv-row {
  animation: v3-srv-in 0.34s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
.loc.open .loc-srv-row:nth-child(1) { animation-delay: 0.02s; }
.loc.open .loc-srv-row:nth-child(2) { animation-delay: 0.04s; }
.loc.open .loc-srv-row:nth-child(3) { animation-delay: 0.06s; }
.loc.open .loc-srv-row:nth-child(4) { animation-delay: 0.08s; }
.loc.open .loc-srv-row:nth-child(5) { animation-delay: 0.10s; }
.loc.open .loc-srv-row:nth-child(6) { animation-delay: 0.12s; }
.loc.open .loc-srv-row:nth-child(7) { animation-delay: 0.14s; }
.loc.open .loc-srv-row:nth-child(8) { animation-delay: 0.16s; }
.loc.open .loc-srv-row:nth-child(9) { animation-delay: 0.18s; }
.loc.open .loc-srv-row:nth-child(n+10) { animation-delay: 0.20s; }
@keyframes v3-srv-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .loc { padding: 18px 0; }
  .loc-name { font-size: 22px; letter-spacing: -0.015em; }
  .loc-servers-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
  .loc-srv { padding: 12px 14px; }
}

/* Footer mark — pinned to the bottom of the page even on short content */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.shell {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.page {
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* ── Crumb (back link) ──────────────────────────────────────────────────── */
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 32px 0 8px;
  padding: 4px 0;
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: 0.005em;
  transition: color 0.15s ease, transform 0.15s ease;
}
.crumb:hover { color: var(--text-2); transform: translateX(-2px); }
.crumb code { color: inherit; font-size: 12px; }

/* ── Page hero (used by server / problems / analytics / settings) ───────── */
.hero-page {
  padding: 12px 0 26px;
  border-bottom: 1px solid var(--line-soft);
}
.hero-page .hero-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
  color: var(--text);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-page .hero-title code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 30px;
  color: var(--text);
  letter-spacing: -0.018em;
}
.hero-page .hero-title .dot {
  width: 7px; height: 7px;
  align-self: center;
  margin-bottom: 4px;
}
.hero-page .hero-meta {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.hero-page .hero-meta b   { color: var(--text-2); font-weight: 500; }
.hero-page .hero-meta .warn { color: var(--warn); }
.hero-page .hero-meta .bad  { color: var(--bad); }
@media (max-width: 760px) {
  .hero-page { padding: 10px 0 20px; }
  .hero-page .hero-title { font-size: 26px; }
  .hero-page .hero-title code { font-size: 24px; }
}

/* ── Problems stats board (minimal cards) ───────────────────────────────── */
.pr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin: 10px 0 22px;
}
.pr-stats-empty { grid-template-columns: 1fr; }
.pr-stat-ok {
  padding: 18px 16px;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--ok);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-2);
  background: rgba(255,255,255,0.012);
}
.pr-card {
  padding: 12px 14px 14px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 90px;
}
.pr-card-h {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.pr-buckets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pr-bucket {
  text-align: center;
  padding: 6px 4px 4px;
  border-left: 1px solid var(--line-soft);
}
.pr-bucket:first-child { border-left: none; }
.pr-bucket-n {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.1;
}
.pr-bucket.warn .pr-bucket-n { color: var(--warn); }
.pr-bucket.bad  .pr-bucket-n { color: var(--bad);  }
.pr-bucket-l {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
}
.pr-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pr-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.pr-list-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pr-list-n {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.pr-list-n.bad  { color: var(--bad); }
.pr-list-n.warn { color: var(--warn); }
.pr-empty { font-size: 12px; }
.pr-card-oldest .pr-oldest-num {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pr-card-oldest .pr-oldest-num .nonum {
  font-size: 14px; font-style: italic; font-weight: 400; color: var(--text-3);
}
.pr-card-oldest .pr-oldest-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
  color: var(--text-3);
}
.pr-card-oldest .pr-oldest-age {
  color: var(--bad);
  font-weight: 600;
}

/* ── Phone number detect inline block ───────────────────────────────────── */
.ph-num-detect {
  margin: 0 16px 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-2);
}
.ph-num-detect[hidden] { display: none; }
.ph-num-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ph-num-grid code {
  font-size: 13px;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  padding: 1px 6px;
  border-radius: 2px;
}
.ph-num-l { color: var(--text-3); font-size: 12px; min-width: 70px; display: inline-block; }
.ph-num-note { margin-top: 4px; font-size: 12px; color: var(--text-3); }
.ph-num-detect .ok  { color: var(--ok); }
.ph-num-detect .bad { color: var(--bad); }
.ph-num-loading { font-size: 12px; }
.ph-num-saved {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
}
.ph-num-saved code {
  font-size: 13.5px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  padding: 2px 8px;
  border-radius: 3px;
}
.ph-num-actions { margin-top: 10px; display: flex; gap: 6px; justify-content: flex-end; }

/* Мини-форма выбора режима, открывается по клику «Номер» (USSD не стартует
   автоматически — пользователь решает, включать ли SMS-fallback). */
.ph-num-prompt-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.ph-num-prompt-row { margin: 6px 0; }
.ph-num-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-2);
  user-select: none;
}
.ph-num-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
.ph-num-prompt-hint { margin-top: 6px; font-size: 11px; }

.ph-num-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 3px;
  vertical-align: middle;
  cursor: help;
}
.ph-num-badge.sms {
  color: #ffb155;
  background: rgba(255, 177, 85, 0.12);
  border: 1px solid rgba(255, 177, 85, 0.45);
}

.ph-num-sms {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  font-size: 12px;
}
.ph-num-sms-head { color: var(--text-2); }
.ph-num-sms-head b { color: var(--text); font-weight: 600; }
.ph-num-sms-body  { margin-top: 6px; }
.ph-num-sms-body summary {
  cursor: pointer;
  color: var(--text-3);
  font-size: 11px;
  user-select: none;
}
.ph-num-sms-body pre {
  margin: 6px 0 0;
  padding: 6px 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  color: var(--text);
}

/* ── Body-scroll lock пока открыта плавающая модалка ───────────────────
   iOS Safari игнорирует overflow:hidden на body для touchmove внутри
   non-scrollable areas — поэтому используется fixed-position трюк:
   .v3-float-open ставится на <html>+<body> из JS (см. _ensureFloatRoot
   и _closeScrFloat/_closeSmsFloat). Сохранённый scrollY восстанавливается
   при закрытии. Без этого drag по body модалки (скриншот/sms) проскролливал
   страницу под ним. */
html.v3-float-open,
body.v3-float-open {
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: none;
}
body.v3-float-open {
  position: fixed;
  width: 100%;
}

/* ── Floating phone windows (screenshot / sms) ─────────────────────────── */
.v3-float {
  position: fixed;
  top: 80px;
  right: 24px;
  width: 720px;
  height: 540px;
  /* На узких экранах (iPad/портрет) дефолтная ширина 760px вылезает за viewport
     и кнопка «Закрыть» уходит вправо за overflow:hidden. Безусловный max-width
     / max-height страхует, не ломая drag/resize. */
  max-width:  calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  z-index: 800;
  background: #0b0b0e;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* contain не даёт overscroll-всплытию долететь до body, даже если
     scroll-lock временно снят (например, между двумя модалками). */
  overscroll-behavior: contain;
}
.v3-float-scr { width: 280px; height: 580px; }
.v3-float-sms { width: 760px; height: 560px; }
.v3-float-head {
  display: flex;
  align-items: center;
  gap: 8px;
  /* padding-right оставляет место под absolute-кнопку «Закрыть»,
     которая теперь pinned к правому верху, чтобы не терялась за overflow. */
  padding: 8px 38px 8px 10px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.018);
  cursor: grab;
  user-select: none;
  /* touch-action: none — критично для iPad: без этого drag по шапке
     одновременно скроллит фоновую страницу (pointermove не cancel'ит
     native scroll). Тот же fix на ручке resize ниже. */
  touch-action: none;
  flex-wrap: wrap;
  row-gap: 6px;
  position: relative;
}
.v3-float-head:active { cursor: grabbing; }
.v3-float-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-right: auto;
  white-space: nowrap;
}
.v3-float-btn,
.v3-float-close {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--text-2);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  flex-shrink: 0;
}
.v3-float-btn:hover,
.v3-float-close:hover { color: var(--text); border-color: var(--line); background: rgba(255,255,255,0.03); }
.v3-float-btn:disabled { opacity: 0.5; cursor: default; }
/* Кнопка «Закрыть» прикреплена к правому верху шапки независимо от того,
   сколько контролов уехало на следующую строку при wrap'е. */
.v3-float-close {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 2px 7px;
  font-size: 14px;
  z-index: 2;
}
.v3-float-sel {
  background: #0b0b0e;
  color: var(--text);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  flex-shrink: 0;
  color-scheme: dark;
}
.v3-float-sel option {
  background: #0b0b0e;
  color: var(--text);
}
.v3-float-state { flex-shrink: 0; font-size: 11.5px; color: var(--text-3); min-width: 16px; }
.v3-float-state .v3-scr-st.run { color: var(--warn); animation: v3-spin 1.2s linear infinite; display: inline-block; }
.v3-float-state .v3-scr-st.ok  { color: var(--ok); }
.v3-float-state .v3-scr-st.err { color: var(--bad); }
@keyframes v3-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.v3-float-body {
  flex: 1;
  overflow: hidden;
  display: flex;
}
.v3-float-resize {
  position: absolute;
  right: 0; bottom: 0;
  width: 18px; height: 18px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 calc(50% - 1px), var(--text-3) calc(50% - 1px) 50%, transparent 50% calc(50% + 4px), var(--text-3) calc(50% + 4px) calc(50% + 5px), transparent calc(50% + 5px));
  opacity: 0.6;
  /* touch-action: none страхует тот же скролл-баг, что и на drag-handle. */
  touch-action: none;
}
.v3-float-resize:hover { opacity: 1; }

/* Screenshot body */
.v3-scr-body {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  /* image обычно влезает целиком (object-fit:contain), но iOS Safari
     всё равно пытается «pan» по контейнеру — отключаем touch-pan, оставляя
     pinch-zoom (manipulation вместо none — на случай если кто-то
     ресайзнёт окно крупнее картинки). overscroll:contain страхует. */
  touch-action: manipulation;
  overscroll-behavior: contain;
}
.v3-scr-body img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* картинка не должна сама ловить drag — все жесты идут в контейнер */
  pointer-events: none;
}

/* SMS body: two panels */
.v3-sms-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  flex: 1;
  overflow: hidden;
}
.v3-sms-senders {
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Внутренний скролл sender'ов работает (pan-y), но overscroll не уходит
     в body — иначе iPad на «дотяге до конца» проскролливает страницу. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.v3-sms-si {
  appearance: none;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  text-align: left;
  padding: 7px 9px;
  border-radius: 4px;
  color: var(--text-2);
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v3-sms-si:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.v3-sms-si.active { background: rgba(255,255,255,0.06); border-color: var(--line); color: var(--text); }
.v3-sms-si-row1 { display: flex; align-items: center; gap: 8px; }
.v3-sms-si-ico { font-size: 12px; width: 14px; text-align: center; opacity: 0.85; }
.v3-sms-si.cat-important .v3-sms-si-ico { color: var(--warn); }
.v3-sms-si.cat-balance   .v3-sms-si-ico { color: var(--ok); }
.v3-sms-si.cat-operator  .v3-sms-si-ico { color: var(--accent); }
.v3-sms-si.cat-system    .v3-sms-si-ico { color: var(--bad); }
.v3-sms-si-name { flex: 1; font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-sms-si-count {
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 9px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.v3-sms-si-preview { font-size: 11.5px; color: var(--text-3); padding-left: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-sms-si-time    { font-size: 10.5px; color: var(--text-3); padding-left: 22px; }
.v3-sms-si-empty   { padding: 12px; font-size: 12px; color: var(--text-3); font-style: italic; }
.v3-sms-si-empty.bad { color: var(--bad); }

.v3-sms-msgs {
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* То же, что у sender'ов: вертикальный скролл сообщений работает,
     но overscroll не утаскивает страницу. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.v3-sms-msg {
  background: rgba(255,255,255,0.018);
  border-left: 2px solid var(--line-soft);
  border-radius: 0 4px 4px 0;
  padding: 7px 10px;
}
.v3-sms-msg.cat-important { border-left-color: var(--warn); }
.v3-sms-msg.cat-balance   { border-left-color: var(--ok); }
.v3-sms-msg.cat-operator  { border-left-color: var(--accent); }
.v3-sms-msg.cat-system    { border-left-color: var(--bad); }
.v3-sms-msg-head { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 3px; }
.v3-sms-msg-from { color: var(--text-2); font-weight: 600; }
.v3-sms-msg-time { color: var(--text-3); }
.v3-sms-msg-body { font-size: 13px; color: var(--text-2); white-space: pre-wrap; word-break: break-word; }
.v3-sms-msg-empty { color: var(--text-3); font-style: italic; padding: 12px; font-size: 12px; }

.v3-sms-search {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--text);
  font-size: 12px;
  padding: 4px 8px;
  width: 130px;
  outline: none;
}
.v3-sms-search:focus { border-color: var(--accent-soft); }
.v3-sms-filters { display: flex; gap: 4px; flex-shrink: 0; }
.v3-sms-fbtn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-soft);
  color: var(--text-3);
  border-radius: 3px;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
}
.v3-sms-fbtn:hover { color: var(--text-2); border-color: var(--line); }
.v3-sms-fbtn.active { color: var(--text); background: rgba(255,255,255,0.05); border-color: var(--line); }

.ph-detail-note.ok  { color: var(--ok); }
.ph-detail-note.bad { color: var(--bad); }

@media (max-width: 760px) {
  .v3-float { left: 8px; right: 8px; top: 60px; width: auto !important; height: calc(100vh - 80px) !important; }
  .v3-sms-body { grid-template-columns: 1fr; }
  .v3-sms-senders { display: none; }
}

/* ── Telegram-алерты (страница автообновлений) ──────────────────────────── */
.al-section .al-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
}
.al-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.al-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.al-row:last-child { border-bottom: none; }
.al-row-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.al-row-label { font-size: 13.5px; color: var(--text); font-weight: 500; }
.al-row-hint  { font-size: 12px;   color: var(--text-3); }
.al-sub-head {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.al-meta {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
}
.al-meta b { color: var(--text-2); font-weight: 500; }
.al-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.al-preview {
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
}
.al-preview-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.al-preview-body {
  margin: 0;
  font: 12.5px/1.5 ui-monospace, Menlo, Consolas, monospace;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}
.al-preview-body b { color: var(--text); }
.al-preview-body i { color: var(--text-3); font-style: italic; }
.al-preview-body code {
  font-size: 12px;
  color: var(--text);
  background: rgba(255,255,255,0.04);
  padding: 0 4px;
  border-radius: 2px;
}
@media (max-width: 880px) {
  .al-section .al-grid { grid-template-columns: 1fr; }
}

/* ── Сравнение серверов (горизонтальные мини-бары) ───────────────────────── */
.pr-srv-compare {
  margin: 4px 0 22px;
  padding: 14px 16px 16px;
  background: rgba(255,255,255,0.014);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.pr-srv-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pr-srv-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.pr-srv-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pr-srv-row {
  display: grid;
  grid-template-columns: 180px 1fr 150px;
  align-items: center;
  gap: 14px;
  padding: 6px 8px;
  border-radius: 4px;
  color: var(--text-2);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.pr-srv-row:hover { background: rgba(255,255,255,0.03); color: var(--text); }
.pr-srv-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-srv-name code { font-size: 13px; color: var(--text); font-weight: 600; }
.pr-srv-bar {
  position: relative;
  height: 14px;
  background: rgba(255,255,255,0.022);
  border-radius: 3px;
  overflow: hidden;
}
.pr-srv-bar-avg {
  position: absolute;
  left: 0; top: 50%;
  height: 1px;
  background: var(--text-3);
  opacity: 0.6;
  transform: translateY(-0.5px);
  transition: width 0.4s cubic-bezier(0.2,0.7,0.15,1);
}
.pr-srv-bar-today {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--text-2);
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.2,0.7,0.15,1), background 0.2s ease;
}
.pr-srv-row.warn .pr-srv-bar-today { background: var(--warn); }
.pr-srv-row.bad  .pr-srv-bar-today { background: var(--bad);  }
.pr-srv-vals {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.pr-srv-vals b { color: var(--text); font-weight: 600; }
.pr-srv-vals .bad  { color: var(--bad); font-weight: 600; }
.pr-srv-vals .warn { color: var(--warn); font-weight: 600; }
.pr-srv-vals .ok   { color: var(--ok);  font-weight: 500; }
.pr-srv-cause {
  grid-column: 1 / -1;
  font-size: 11px;
  padding: 2px 0 0 4px;
  margin-top: -2px;
}
.pr-srv-more {
  margin-top: 10px;
  font-size: 12px;
  text-align: center;
}
@media (max-width: 760px) {
  .pr-srv-row {
    grid-template-columns: 1fr 110px;
    grid-template-areas:
      'name vals'
      'bar  bar';
    row-gap: 4px;
  }
  .pr-srv-name { grid-area: name; }
  .pr-srv-vals { grid-area: vals; }
  .pr-srv-bar  { grid-area: bar; }
}

/* Age pill on problem tiles */
.ph-age {
  display: inline-block;
  margin-left: auto;
  padding: 1px 6px 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ph-age.warn { color: var(--warn); border-color: rgba(214,168,79,0.35); }
.ph-age.bad  { color: var(--bad);  border-color: rgba(232,93,93,0.4);  }
.ph.long::before { animation: pr-pulse 2.2s ease-in-out infinite; }
@keyframes pr-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ── Filter bar (segmented + selects + search, calm) ────────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 16px;
  flex-wrap: wrap;
}
.filter-bar .spacer { flex: 1; }
.filter-bar .inp { background: rgba(255,255,255,0.022); }
.filter-bar .seg {
  background: rgba(255,255,255,0.022);
  border-color: var(--line-soft);
}

/* ── Phone tile grid (problems uses this; server uses .ph-list below) ──── */
.phones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  min-height: 220px;
}
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.022);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s ease,
              border-color 0.18s ease,
              transform 0.2s ease,
              grid-column 0.2s ease;
}
.ph:hover {
  background: rgba(255,255,255,0.045);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}
.ph::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  border-radius: 10px 0 0 10px;
}
.ph.warn::before { background: var(--warn); }
.ph.bad::before  { background: var(--bad); }
.ph.offline { opacity: 0.7; }

/* ── Phone list (server page) — compact rows with hover detail + click-to-act ── */
.ph-list {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  min-height: 240px;
}
.ph-item {
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
  transition: background 0.18s ease, border-left-color 0.18s ease;
}
.ph-item:last-child { border-bottom: none; }
/* Server hero — smart-balance row. Минимализм, без бордеров. */
.hero-smart-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.smart-btn {
  background: transparent;
  color: var(--text-2);
  border: none;
  padding: 7px 14px;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.smart-btn:hover { background: rgba(214, 168, 79, 0.08); color: var(--text); }
.smart-btn:disabled { opacity: 0.4; cursor: default; }
.smart-btn.hard:hover { background: rgba(255, 110, 110, 0.10); color: #ff9090; }
.smart-status { font-size: 12px; }

.ph-item.warn      { border-left-color: var(--warn); }
.ph-item.bad       { border-left-color: var(--bad); }
/* SIM-mark phones: серая «как offline», явный бейдж «SIM BLOCK». Фиолетовый
   убран по фидбэку 19.05.2026: одинаковый цвет с обычными проблемами создавал
   шум, юзер хочет «эти телефоны не рабочие, не учитываются в кликах —
   серые внизу списка». Сортировка: _sortKey=6 (последняя группа). */
.ph-item.sim-block {
  opacity: 0.6;
  background: rgba(255,255,255,0.012);
  border-left-color: var(--line);
}
.ph-item.sim-block .ph-num,
.ph-item.sim-block .ph-ser,
.ph-item.sim-block .ph-ser code,
.ph-item.sim-block .ph-cell-value,
.ph-item.sim-block .ph-cell-label,
.ph-item.sim-block .ph-reason { color: var(--text-3); }
.ph-item.sim-block .ph-reason { font-weight: 600; letter-spacing: 0.02em; }
.ph-item.sim-block .ph-num::after {
  content: 'SIM BLOCK';
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px 0;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--text-3);
  border: 1px solid var(--line);
  border-radius: 4px;
  vertical-align: middle;
}
.ph-item.offline { opacity: 0.55; background: rgba(255,255,255,0.012); }
.ph-item.offline .ph-num,
.ph-item.offline .ph-ser,
.ph-item.offline .ph-ser code,
.ph-item.offline .ph-cell-value,
.ph-item.offline .ph-cell-label { color: var(--text-3); }
.ph-item.offline .ph-num::after {
  content: 'OFFLINE';
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px 0;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--text-3);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  vertical-align: middle;
}
.ph-item.highlight .ph-row { background: rgba(214, 168, 79, 0.08); }

.ph-row {
  display: grid;
  grid-template-columns: 12px minmax(180px, 1.6fr) 90px 90px 80px minmax(140px, 1.2fr) 16px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.18s ease;
  /* iPad / touch fix: убирает 300мс задержку перед click и блокирует
     iOS-«sticky hover», из-за которого первый тап триггерил только
     :hover и не разворачивал строку (требовался второй клик). */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Hit-area fix (rev 2026-05-28): любой клик внутри .ph-row должен
   обрабатываться её click-handler'ом. Раньше клик в центр строки
   (по столбцу БАЛАНС) иногда не раскрывал карточку — нужно было
   попасть в номер слева. Защита: дети .ph-row не получают pointer-
   events, событие всплывает к row. В .ph-row нет input'ов/кнопок
   (только span/div/code), text-selection не страдает. */
.ph-row > * { pointer-events: none; }
/* hover применяем ТОЛЬКО на устройствах с настоящим hover (мышь, тачпад).
   На touch-only (iPad, телефон) hover-style не применяется и не «съедает»
   первый тап. */
@media (hover: hover) {
  .ph-row:hover { background: rgba(255,255,255,0.04); }
}
.ph-item.open .ph-row { background: rgba(255,255,255,0.045); }

.ph-row .ph-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: transparent;
  justify-self: center;
}
.ph-item.warn      .ph-row .ph-dot { background: var(--warn); }
.ph-item.bad       .ph-row .ph-dot { background: var(--bad); }
.ph-item.offline   .ph-row .ph-dot { background: var(--text-3); }
/* Политика 2026-05-28: SIM-проблема (SIM_BLOCKED / SIM_CHECK_BAD /
   NO_SERVICE / NO_OPERATOR) показывается фиолетовым дотом — стыкуется
   с .dg-seg-sim в diagnostics. До этой правки дот был прозрачным,
   и SIM-состояние было видно только по серому тексту. */
.ph-item.sim-block .ph-row .ph-dot { background: var(--sim); }

.ph-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-id .ph-num {
  font-size: 13.5px; font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ph-id .ph-num .nonum { color: var(--text-3); font-style: italic; font-weight: 400; }
.ph-id .ph-ser {
  font-size: 11px;
  color: var(--text-3);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.ph-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ph-cell .ph-cell-label {
  font-size: 9.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ph-cell .ph-cell-value {
  font-size: 13px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.ph-cell.warn .ph-cell-value { color: var(--warn); }
.ph-cell.bad  .ph-cell-value { color: var(--bad); }

.ph-reason {
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.005em;
}
.ph-item.warn .ph-reason { color: var(--warn); }
.ph-item.bad  .ph-reason { color: var(--bad); }
.ph-item .ph-row:hover .ph-check {
  display: block;
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 2px;
}
.ph-check { display: none; }

.ph-toggle {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  transition: transform 0.22s ease, color 0.18s ease;
}
.ph-item.open .ph-toggle { transform: rotate(180deg); color: var(--accent); }

.ph-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.018);
  border-top: 1px solid transparent;
  transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.15, 1),
              opacity 0.22s ease,
              border-top-color 0.22s ease;
}
.ph-item.open .ph-detail {
  /* 1500px — потолок, достаточный для wizard (7 шагов + кнопки + результат).
     Раньше было 360px, и шаги SIM-check/Detect-number резались снизу с
     overflow:hidden. Анимация max-height продолжает работать гладко. */
  max-height: 1500px;
  opacity: 1;
  border-top-color: var(--line-soft);
  overflow-y: auto;   /* если контент всё-таки длиннее — внутренний скролл */
}
.ph-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 24px;
  padding: 16px;
}
.ph-detail-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line-soft);
}
.ph-detail-actions .btn {
  background: rgba(255,255,255,0.022);
  border: 1px solid var(--line-soft);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ph-detail-actions .btn:hover { background: rgba(255,255,255,0.045); color: var(--text); }
.ph-detail-actions .btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ph-detail-note {
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
  align-self: center;
}

/* Stagger-in for phone rows on first mount */
.v3-first .ph-list .ph-item {
  animation: v3-srv-in 0.4s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
.v3-first .ph-list .ph-item:nth-child(1) { animation-delay: 0.02s; }
.v3-first .ph-list .ph-item:nth-child(2) { animation-delay: 0.04s; }
.v3-first .ph-list .ph-item:nth-child(3) { animation-delay: 0.06s; }
.v3-first .ph-list .ph-item:nth-child(4) { animation-delay: 0.08s; }
.v3-first .ph-list .ph-item:nth-child(5) { animation-delay: 0.10s; }
.v3-first .ph-list .ph-item:nth-child(6) { animation-delay: 0.12s; }
.v3-first .ph-list .ph-item:nth-child(7) { animation-delay: 0.14s; }
.v3-first .ph-list .ph-item:nth-child(8) { animation-delay: 0.16s; }
.v3-first .ph-list .ph-item:nth-child(n+9) { animation-delay: 0.18s; }

@media (max-width: 760px) {
  .ph-row {
    grid-template-columns: 12px 1fr 16px;
    grid-template-rows: auto auto auto;
    gap: 4px 12px;
    padding: 10px 14px;
  }
  .ph-id     { grid-column: 2; grid-row: 1; }
  .ph-cell   { grid-column: 2; grid-row: 2; flex-direction: row; gap: 8px; }
  .ph-cell .ph-cell-label::after { content: ':'; }
  .ph-reason { grid-column: 2; grid-row: 3; }
  .ph-toggle { grid-column: 3; grid-row: 1 / span 3; align-self: center; }
  .ph-row .ph-dot { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 7px; }
}

.ph-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; min-width: 0;
}
.ph-num {
  font-size: 13.5px; font-weight: 500;
  color: var(--text);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph-num .nonum {
  color: var(--text-3); font-style: italic; font-weight: 400;
}
.ph-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: transparent;
}
/* удалено 2026-05-28: .ph (без -item) — legacy-наследие, в JS не используется.
   Актуальные правила — .ph-item.warn/.bad/.offline/.sim-block .ph-dot выше. */

.ph-stats {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 12px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.ph-stats .clicks {
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
}
.ph.bad  .ph-stats .clicks { color: var(--bad); }
.ph.warn .ph-stats .clicks { color: var(--warn); }
.ph-stats .reason {
  font-size: 12px;
  color: var(--text-3);
}
.ph.warn .ph-stats .reason { color: var(--warn); }
.ph.bad  .ph-stats .reason { color: var(--bad); }

.ph-ser {
  font-size: 11px;
  color: var(--text-3);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ph.loading {
  opacity: 0.55;
  cursor: default;
}
.ph.loading:hover {
  transform: none;
  background: rgba(255,255,255,0.022);
  border-color: var(--line-soft);
}

/* Stagger-in for phone tiles */
.v3-first .ph,
.phones-grid.fresh .ph {
  animation: v3-srv-in 0.42s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
.v3-first .ph:nth-child(1),       .phones-grid.fresh .ph:nth-child(1)       { animation-delay: 0.04s; }
.v3-first .ph:nth-child(2),       .phones-grid.fresh .ph:nth-child(2)       { animation-delay: 0.06s; }
.v3-first .ph:nth-child(3),       .phones-grid.fresh .ph:nth-child(3)       { animation-delay: 0.08s; }
.v3-first .ph:nth-child(4),       .phones-grid.fresh .ph:nth-child(4)       { animation-delay: 0.10s; }
.v3-first .ph:nth-child(5),       .phones-grid.fresh .ph:nth-child(5)       { animation-delay: 0.12s; }
.v3-first .ph:nth-child(6),       .phones-grid.fresh .ph:nth-child(6)       { animation-delay: 0.14s; }
.v3-first .ph:nth-child(7),       .phones-grid.fresh .ph:nth-child(7)       { animation-delay: 0.16s; }
.v3-first .ph:nth-child(8),       .phones-grid.fresh .ph:nth-child(8)       { animation-delay: 0.18s; }
.v3-first .ph:nth-child(n+9),     .phones-grid.fresh .ph:nth-child(n+9)     { animation-delay: 0.20s; }

/* Open state — tile expands to a full-row card with detail panel */
.ph.open {
  grid-column: 1 / -1;
  background: var(--surface);
  border-color: var(--line);
  cursor: default;
  transform: none;
}
.ph.open:hover { transform: none; background: var(--surface); }
.ph-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.15, 1),
              opacity 0.22s ease,
              margin-top 0.4s ease;
}
.ph.open .ph-detail {
  max-height: 480px;
  opacity: 1;
  margin-top: 14px;
}
.ph-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.ph-detail-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 0;
}
.ph-detail-label {
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ph-detail-value {
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ph-detail-value.warn { color: var(--warn); }
.ph-detail-value.bad  { color: var(--bad); }
.ph-detail-value.dim  { color: var(--text-3); }
.ph-detail-note {
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
  align-self: center;
}

/* ── Group header (used by problems for location grouping) ──────────────── */
.group-head {
  display: flex; align-items: baseline;
  gap: 10px;
  margin: 28px 0 10px;
  font-size: 11.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.group-head:first-child { margin-top: 6px; }
.group-head .group-name { color: var(--text-2); font-weight: 600; }
.group-head .group-cnt {
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,0.022);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
}

/* ── Empty / loading states for pages ───────────────────────────────────── */
.page-empty {
  margin: 40px 0;
  padding: 40px 20px;
  text-align: center;
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
  color: var(--text-3);
  font-size: 13px;
}

/* ── Analytics gate / progress / error blocks ───────────────────────────── */
.an-gate, .an-progress, .an-error-block {
  max-width: 480px;
  margin: 60px auto;
  padding: 32px 28px;
  background: rgba(255,255,255,0.022);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  animation: v3-gate-in 0.45s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
@keyframes v3-gate-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.an-gate {
  text-align: center;
}
.an-gate h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0 0 6px;
}
.an-gate p {
  font-size: 12.5px;
  color: var(--text-3);
  margin: 0 0 22px;
  line-height: 1.5;
}
.an-gate-info {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  margin: 0 0 24px;
  text-align: left;
}
.an-gate-info-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
}
.an-gate-info-row .label { color: var(--text-3); }
.an-gate-info-row .value {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.an-gate-info-row .value.warn { color: var(--warn); }
.an-gate-info-row .value.bad  { color: var(--bad); }
.an-gate-info-row .value code { color: var(--text); }
.an-gate-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.an-gate-actions .btn { padding: 9px 20px; font-size: 13px; min-width: 140px; }
.an-gate-hint {
  margin-top: 16px;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.005em;
  line-height: 1.5;
}

/* Progress (refresh in flight) */
.an-progress h2 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  margin: 0 0 6px;
}
.an-progress-phase {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 22px;
  letter-spacing: 0.005em;
}
.an-progress-bar {
  height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.an-progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(214, 168, 79, 0.4);
}
.an-progress-bar-fill.indeterminate {
  width: 30% !important;
  animation: v3-progress-indet 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes v3-progress-indet {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}
.an-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 8px;
}
.an-progress-meta .pct { color: var(--accent); }
.an-progress-actions {
  margin-top: 22px;
  display: flex; justify-content: center;
}

/* Error block */
.an-error-block {
  text-align: center;
  border-color: rgba(213, 106, 106, 0.28);
}
.an-error-block h2 {
  font-size: 17px; font-weight: 600;
  color: var(--bad); margin: 0 0 8px;
}
.an-error-block p {
  font-size: 12.5px; color: var(--text-3); margin: 0 0 18px;
  line-height: 1.5;
}
.an-error-block .an-gate-actions { margin-top: 8px; }

/* ── Analytics primitives (tabs, sections, day-parts, server list) ──────── */
.an-section { margin: 26px 0; }
.an-section .pulse-svg { margin-top: 6px; }

.an-day-parts {
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}
.an-day-row {
  display: grid;
  grid-template-columns: 1.2fr 90px 90px 70px 60px;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12.5px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.an-day-row:last-child { border-bottom: none; }
.an-day-row .an-day-label { color: var(--text); }
.an-day-row .an-day-label .dim { color: var(--text-3); margin-left: 6px; font-size: 11px; }
.an-day-row .num   { color: var(--text-2); text-align: right; }
.an-day-row .num.dim { color: var(--text-3); }
.an-day-row .delta { color: var(--text-3); text-align: right; }
.an-day-row .delta.warn { color: var(--warn); }
.an-day-row .delta.bad  { color: var(--bad); }

.an-srv-list {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}
.an-srv-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(80px, 2fr) 80px 70px 60px;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.an-srv-row:last-child { border-bottom: none; }
.an-srv-row:hover { background: rgba(255,255,255,0.04); }
.an-srv-row .an-srv-name {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
  font-size: 12.5px;
}
.an-srv-row .an-srv-name code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 500; color: var(--text);
}
.an-srv-row .an-srv-name .dim {
  font-size: 11px; color: var(--text-3);
}
.an-srv-row .an-srv-bar {
  height: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  overflow: hidden;
}
.an-srv-row .an-srv-bar-fill {
  height: 100%;
  background: var(--accent);
  opacity: 0.65;
  border-radius: inherit;
  transition: width 0.4s ease;
}
.an-srv-row .num   { font-size: 12.5px; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.an-srv-row .num.dim { color: var(--text-3); }
.an-srv-row .delta { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.an-srv-row .delta.warn { color: var(--warn); }
.an-srv-row .delta.bad  { color: var(--bad); }

/* Attention rows — dedicated layout with reason text */
.an-att-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) 70px minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1.6fr);
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid var(--bad);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.an-att-row:last-child { border-bottom: none; }
.an-att-row:hover { background: rgba(255,255,255,0.04); }
.an-att-row .an-att-name {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px;
}
.an-att-row .an-att-name code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text); font-weight: 500;
}
.an-att-row .an-att-name .dim { color: var(--text-3); font-size: 11px; }
.an-att-row .num { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.an-att-row .num.dim { color: var(--text-3); }
.an-att-row .num.bad { color: var(--bad); }
.an-att-row .an-att-reason {
  font-size: 11.5px;
  color: var(--text-3);
  letter-spacing: 0.005em;
}

.an-insight-list {
  display: flex; flex-direction: column; gap: 6px;
}
.an-insight {
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--text-2);
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  letter-spacing: 0.005em;
}

@media (max-width: 760px) {
  .an-srv-row {
    grid-template-columns: 1fr 50px 60px;
    grid-template-rows: auto auto;
  }
  .an-srv-row .an-srv-name { grid-column: 1 / -1; grid-row: 1; }
  .an-srv-row .an-srv-bar  { display: none; }
  .an-srv-row .num         { grid-row: 2; }
  .an-srv-row .delta       { grid-row: 2; }
  .an-att-row {
    grid-template-columns: 1fr 60px;
    grid-template-rows: auto auto auto;
  }
  .an-att-row .an-att-name { grid-column: 1 / -1; grid-row: 1; }
  .an-att-row .num         { grid-row: 2; }
  .an-att-row .an-att-reason { grid-column: 1 / -1; grid-row: 3; }
}

/* ── Settings primitives (compact rows) ─────────────────────────────────── */
.set-section { margin: 32px 0; }
.set-section-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
  font-weight: 600;
  margin: 0 0 12px;
}
.set-section-head .set-locked-tag {
  font-size: 9.5px;
  padding: 1px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 500;
}
.set-list {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
}
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  min-height: 50px;
}
.set-row:last-child { border-bottom: none; }
.set-row-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.set-row-label { font-size: 13px; color: var(--text); }
.set-row-hint  { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.set-row.locked { opacity: 0.55; }
.set-row .set-locked {
  font-size: 9.5px;
  padding: 1px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.set-row .inp { min-width: 150px; }

/* When auto-refresh is OFF, dim/disable everything below the master toggle */
.set-list.ar-off > .set-row + .set-row {
  opacity: 0.4;
}
.set-list.ar-off > .set-row + .set-row select.inp,
.set-list.ar-off > .set-row + .set-row .tgl {
  pointer-events: none;
  cursor: not-allowed;
}

.set-service {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--text-3);
}
.set-service code { color: var(--text-2); font-size: 11.5px; }
.set-service .spacer { flex: 1; }

.set-jsonbox {
  margin-top: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.018);
}
.set-jsonbox > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-3);
  list-style: none;
  user-select: none;
}
.set-jsonbox > summary::-webkit-details-marker { display: none; }
.set-jsonbox > summary::before { content: '▸ '; color: var(--text-3); }
.set-jsonbox[open] > summary::before { content: '▾ '; color: var(--accent); }
.set-jsonbox textarea {
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font: 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  border: none;
  border-top: 1px solid var(--line-soft);
  padding: 12px 14px;
  resize: vertical;
  display: block;
  box-sizing: border-box;
}
.set-jsonbox textarea:focus { outline: none; }
.set-jsonbox-actions {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
}
.set-jsonbox-actions .spacer { flex: 1; }
.set-jsonbox-status { font-size: 11.5px; color: var(--text-3); }
.set-jsonbox-status.bad { color: var(--bad); }

/* Stagger-in for set-section on first mount */
.v3-first .set-section {
  animation: v3-hello-in 0.5s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
.v3-first .set-section:nth-child(2) { animation-delay: 0.10s; }
.v3-first .set-section:nth-child(3) { animation-delay: 0.18s; }
.v3-first .set-section:nth-child(4) { animation-delay: 0.26s; }
.v3-first .set-section:nth-child(5) { animation-delay: 0.34s; }

.v3-first .an-section {
  animation: v3-hello-in 0.5s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
.v3-first .an-section:nth-child(1) { animation-delay: 0.06s; }
.v3-first .an-section:nth-child(2) { animation-delay: 0.14s; }
.v3-first .an-section:nth-child(3) { animation-delay: 0.22s; }
.v3-first .an-section:nth-child(4) { animation-delay: 0.30s; }

/* ── Logs popover trigger (lives inside .bar-right.who) ─────────────────── */
.logs-pop-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.logs-pop-trigger:hover { color: var(--text-2); border-color: var(--line); }
.logs-pop-trigger.open { color: var(--text); border-color: var(--accent-soft); background: var(--accent-soft); }
.logs-pop-trigger.has-warn  { color: var(--warn); border-color: var(--accent-soft); }
.logs-pop-trigger.has-error { color: var(--bad);  border-color: rgba(213,106,106,0.32); }
.logs-pop-trigger .lpt-pulse {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--text-3);
}
.logs-pop-trigger.has-warn  .lpt-pulse { background: var(--warn); }
.logs-pop-trigger.has-error .lpt-pulse {
  background: var(--bad);
  animation: v3-dock-pulse 1.4s ease-in-out infinite;
}
.logs-pop-trigger .lpt-count { font-variant-numeric: tabular-nums; opacity: 0.75; }

/* ── Logs popover (floats under the topbar trigger) ─────────────────────── */
.logs-pop {
  position: fixed;
  top: 60px; right: 14px;
  width: 420px;
  max-width: calc(100vw - 28px);
  background: #050507;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  z-index: 75;
  font-size: 12px;
  box-shadow: 0 16px 44px -16px rgba(0,0,0,0.75);
  display: none;
  flex-direction: column;
  transform-origin: top right;
}
.logs-pop.open {
  display: flex;
  animation: v3-logs-pop-in 0.28s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
@keyframes v3-logs-pop-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes v3-dock-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.logs-pop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
}
.logs-pop-head .label { flex: 1; color: var(--text-2); }
.logs-pop-head .count {
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  padding: 1px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.005em;
}
.logs-pop-head .close-btn {
  background: transparent;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s ease;
}
.logs-pop-head .close-btn:hover { color: var(--text); }

.logs-pop-list {
  max-height: 460px;
  overflow-y: auto;
  padding: 4px 0;
}
.logs-pop-list::-webkit-scrollbar { width: 6px; }
.logs-pop-list::-webkit-scrollbar-thumb { background: var(--surface-2); }

.logs-row {
  display: grid;
  grid-template-columns: 38px 80px 1fr;
  gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px;
  align-items: baseline;
  animation: v3-logs-row-in 0.28s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
@keyframes v3-logs-row-in {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}
.logs-row:last-child { border-bottom: none; }
.logs-row .lr-time {
  font-size: 10px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.logs-row .lr-src {
  font-size: 10.5px;
  color: var(--text-3);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logs-row .lr-msg {
  color: var(--text-2);
  letter-spacing: 0.005em;
  word-break: break-word;
  line-height: 1.45;
}
.logs-row.error .lr-msg,
.logs-row.fatal .lr-msg,
.logs-row.critical .lr-msg { color: var(--bad); }
.logs-row.warn  .lr-msg { color: var(--warn); }
.logs-row.error .lr-src, .logs-row.fatal .lr-src { color: var(--bad); opacity: 0.7; }
.logs-row.warn  .lr-src { color: var(--warn); opacity: 0.7; }
.logs-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}

@media (max-width: 760px) {
  .logs-pop { right: 8px; left: 8px; width: auto; }
}

/* ── Operations Dock (fixed bottom-right; visible only when tasks active) ── */
.ops-dock {
  position: fixed;
  bottom: 14px; right: 14px;
  width: 340px;
  max-width: calc(100vw - 28px);
  background: #050507;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  z-index: 65;
  font-size: 12px;
  box-shadow: 0 14px 40px -16px rgba(0,0,0,0.75);
  animation: v3-ops-dock-in 0.45s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
.ops-dock.empty { display: none !important; }
@keyframes v3-ops-dock-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ops-dock-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 600;
}
.ops-dock-head .label { flex: 1; color: var(--text-2); }
.ops-dock-head .count {
  font-variant-numeric: tabular-nums;
  font-size: 10.5px;
  padding: 1px 7px;
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 500;
  text-transform: none;
}
.ops-task {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft);
  animation: v3-ops-task-in 0.34s cubic-bezier(0.2, 0.7, 0.15, 1) backwards;
}
@keyframes v3-ops-task-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ops-task:last-child { border-bottom: none; }
.ops-task-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.ops-task-label {
  font-size: 12.5px; color: var(--text);
  font-weight: 500;
}
.ops-task-pct {
  font-size: 11px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}
.ops-task-bar {
  height: 3px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.ops-task-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(214, 168, 79, 0.4);
}
.ops-task-bar-fill.indeterminate {
  width: 30% !important;
  animation: v3-progress-indet 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.ops-task-phase {
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.005em;
}
.ops-task.done .ops-task-pct      { color: var(--ok); }
.ops-task.done .ops-task-bar-fill { background: var(--ok); box-shadow: 0 0 8px rgba(88, 199, 131, 0.35); }
.ops-task.error .ops-task-pct      { color: var(--bad); }
.ops-task.error .ops-task-bar-fill { background: var(--bad); box-shadow: none; }

@media (max-width: 760px) {
  .ops-dock { right: 8px; bottom: 8px; left: 8px; width: auto; max-width: none; }
}


/* ─────────────────────────────────────────────────────────────────────────
 * Radical overview — Pulse hero · Watchlist · Cellular farm grid
 * (replaces the Phase-1 KPI grid + table layout).
 * ───────────────────────────────────────────────────────────────────────── */

/* Pulse hero — large hourly bar chart with inline metrics */
.pulse {
  background: var(--surface);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px 18px;
  margin: 8px 0 24px;
}
.pulse-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 14px;
}
.pulse-now { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.pulse-big {
  font-size: 36px; font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}
.pulse-now-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pulse-secondary {
  display: flex; align-items: baseline; gap: 18px;
  font-size: 12px; color: var(--text-3);
  flex-wrap: wrap;
}
.pulse-secondary span { display: inline-flex; align-items: baseline; gap: 6px; }
.pulse-secondary b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 13px; }
.pulse-delta { font-variant-numeric: tabular-nums; font-weight: 500; }
.pulse-delta.up   { color: var(--ok); }
.pulse-delta.down { color: var(--bad); }
.pulse-delta.flat { color: var(--text-3); }

.pulse-svg {
  width: 100%;
  height: 72px;
  display: block;
  margin: 6px 0 4px;
  overflow: visible;
}
.pulse-svg .bar      { fill: var(--accent); opacity: 0.78; transition: opacity 0.18s ease; }
.pulse-svg .bar.now  { opacity: 1; }
.pulse-svg .bar.future { opacity: 0.16; fill: var(--text-3); }
.pulse-svg .bar.weak { opacity: 0.42; }
.pulse-svg .bar.bad  { fill: var(--bad);  opacity: 0.85; }
.pulse-svg .ref-line {
  stroke: var(--text-3);
  stroke-width: 0.4;
  stroke-dasharray: 1.6 1.6;
  opacity: 0.45;
}
.pulse-svg .now-line {
  stroke: var(--accent);
  stroke-width: 0.6;
  opacity: 0.55;
}
.pulse-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--text-3);
  margin: 0 1px;
  letter-spacing: 0.04em;
}
.pulse-foot {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 12px; color: var(--text-3);
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.pulse-foot b {
  color: var(--text-2); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.pulse-foot .warn { color: var(--warn); }
.pulse-foot .bad  { color: var(--bad); }

.pulse.empty {
  padding: 28px 24px;
  color: var(--text-3);
  font-size: 12.5px;
  text-align: center;
  background: var(--surface);
  background-image: none;
}
.pulse.empty .pulse-empty-title { font-size: 14px; color: var(--text-2); margin-bottom: 6px; font-weight: 500; }

/* Watchlist */
.watchlist {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
  min-height: 56px;
}
.watch-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 12.5px;
}
.watch-row {
  display: grid;
  grid-template-columns: 12px minmax(160px, 1.2fr) minmax(120px, 1fr) minmax(180px, 1.6fr);
  align-items: center;
  gap: 16px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.12s ease;
}
.watch-row:last-child { border-bottom: none; }
.watch-row:hover { background: var(--surface-2); }
.watch-row .watch-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--warn);
}
.watch-row.bad .watch-dot { background: var(--bad); }
.watch-name {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
}
.watch-name code {
  font-size: 13px; font-weight: 600;
  color: var(--text); letter-spacing: -0.005em;
}
.watch-name .watch-loc {
  font-size: 11px; color: var(--text-3);
}
.watch-bar {
  height: 4px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.watch-bar-fill {
  height: 100%;
  background: var(--warn);
  opacity: 0.6;
  border-radius: inherit;
  transition: width 0.4s ease;
}
.watch-row.bad .watch-bar-fill { background: var(--bad); opacity: 0.7; }
.watch-reason {
  font-size: 12.5px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.watch-row.warn .watch-reason { color: var(--warn); }
.watch-row.bad  .watch-reason { color: var(--bad); }

@media (max-width: 760px) {
  .watch-row {
    grid-template-columns: 12px 1fr;
    grid-template-rows: auto auto auto;
    gap: 4px 12px;
  }
  .watch-name   { grid-column: 2; grid-row: 1; }
  .watch-bar    { grid-column: 2; grid-row: 2; }
  .watch-reason { grid-column: 2; grid-row: 3; }
  .watch-row .watch-dot { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin-top: 6px; }
}

/* Cellular farm grid */
.farm-controls {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.farm-controls .spacer { flex: 1; }

.farm-loc {
  margin-bottom: 18px;
}
.farm-loc-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.farm-loc-head .farm-loc-name { color: var(--text-2); font-weight: 600; }
.farm-loc-head .farm-loc-count { color: var(--text-3); font-variant-numeric: tabular-nums; }

.farm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 6px;
  min-height: 90px;
}

.farm-cell {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 5px;
  padding: 9px 11px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  min-height: 76px;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  isolation: isolate;
  text-align: left;
  color: inherit;
}
.farm-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  border-radius: 10px 10px 0 0;
}
.farm-cell.warn::before { background: var(--warn); }
.farm-cell.bad::before  { background: var(--bad); }
.farm-cell.warn { padding-top: 11px; }
.farm-cell.bad  { padding-top: 11px; }
.farm-cell:hover {
  background: var(--surface-2);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -8px rgba(0,0,0,0.6);
  z-index: 2;
}
.farm-cell.loading { opacity: 0.55; cursor: default; }

.farm-cell-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.farm-cell-name {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.farm-cell-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 999px;
  background: transparent;
}
.farm-cell.warn .farm-cell-dot { background: var(--warn); }
.farm-cell.bad  .farm-cell-dot { background: var(--bad); }

.farm-cell-stats {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
}
.farm-cell-stats .active { color: var(--text); font-weight: 500; }
.farm-cell-stats .active .dim { color: var(--text-3); font-weight: 400; }
.farm-cell-stats .clicks { color: var(--text-3); margin-left: auto; }

.farm-cell-bar {
  height: 3px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.farm-cell-bar-fill {
  height: 100%;
  background: var(--accent);
  opacity: 0.7;
  border-radius: inherit;
  transition: width 0.4s ease;
}
.farm-cell.warn .farm-cell-bar-fill { background: var(--warn); opacity: 0.8; }
.farm-cell.bad  .farm-cell-bar-fill { background: var(--bad);  opacity: 0.55; }

/* Settings · apply bar (Stage 10b — apply button + dirty state). */
.set-apply-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--text-3);
}
.set-apply-bar .spacer { flex: 1; }
.set-apply-bar .set-apply-text { font-variant-numeric: tabular-nums; }
.set-apply-bar.dirty {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}
.set-apply-bar.saving { color: var(--text-2); }
.set-apply-bar.saved  { color: var(--text-2); }
.set-apply-bar.warn   { color: var(--warn); border-color: var(--warn); }
.set-apply-bar.error  { color: var(--bad);  border-color: var(--bad); }

/* ── Scheduler / Автообновление (cron reboot windows) ──────────────────── */
.sched-page { display: flex; flex-direction: column; gap: 14px; }
.sched-page .hero-page { margin-bottom: 4px; }
.sched-page .hero-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.sched-page .hero-meta .sched-phrase {
  font-size: 14px; font-weight: 600; color: var(--text);
}
.sched-page .hero-meta .dim { font-size: 12px; }
.sched-page .hero-sub {
  font-size: 12px; color: var(--text-3); line-height: 1.5;
  margin: 6px 0 0;
}
.sched-page .hero-sub code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; color: var(--text-2);
}

/* Section heading hint (повторяется в settings/scheduler) */
.set-section-hint {
  margin-left: 10px; font-size: 11px; color: var(--text-3);
  font-weight: 400; text-transform: none; letter-spacing: 0;
}

/* ── Серверы в авто-ребуте — flat list editor ─────────────────────────── */
.sched-servers-body { padding: 0 12px 12px; }
.sched-srv-stats {
  padding: 10px 4px 12px;
  font-size: 11.5px; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.sched-srv-rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sched-srv-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(140px, 1.6fr) 180px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: background 120ms;
}
.sched-srv-row:last-child { border-bottom: none; }
.sched-srv-row.out { background: rgba(0,0,0,0.02); }
.sched-srv-row.in  { background: rgba(214,168,79,0.04); }
.sched-srv-row:hover { background: var(--surface-2); }
.sched-srv-name {
  display: inline-flex; align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.sched-srv-name code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--text);
}
.sched-srv-warn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; font-size: 11px;
  color: var(--warn); cursor: help;
}
.sched-srv-state {
  font-size: 11.5px; color: var(--text-3);
  letter-spacing: 0.01em;
}
.sched-srv-row.in .sched-srv-state { color: var(--text-2); }
.sched-srv-pick {
  width: 100%;
  height: 28px; padding: 0 8px;
  font-size: 12px;
}
.sched-srv-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px 0;
}
.sched-srv-foot .spacer { flex: 1 1 auto; }
.sched-srv-foot .set-apply-text {
  font-size: 11.5px; color: var(--text-3);
}
.sched-srv-foot .set-apply-text.saving { color: var(--accent); }
.sched-srv-foot .set-apply-text.saved  { color: var(--ok); }
.sched-srv-foot .set-apply-text.error  { color: var(--bad); }
@media (max-width: 760px) {
  .sched-srv-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .sched-srv-pick { width: 100%; }
}

/* Grid of window cards */
.sched-cards {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  padding: 12px;
}

/* Single window card */
.sched-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.12s ease, opacity 0.12s ease;
}
.sched-card.off { opacity: 0.55; }
.sched-card.busy { border-color: var(--accent-line); }
.sched-card.kind-check  { border-left: 3px solid var(--ok); }
.sched-card.kind-reboot { border-left: 3px solid var(--bad); }
.sched-card.dirty       { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line) inset; }
.sched-card.fresh       { border-color: var(--accent-line); }
.sched-card.fresh::after {
  content: 'новое';
  position: absolute; top: -8px; right: 10px;
  padding: 0 6px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--accent); color: var(--bg); border-radius: 3px;
}
.sched-card { position: relative; }
.sched-card.deleted {
  border-left: 3px solid var(--text-3);
  background: var(--bg);
  opacity: 0.7;
}
.sched-card.deleted .sched-card-title {
  text-decoration: line-through; color: var(--text-3);
}

.sched-card-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: center;
}
.sched-card-id {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
}
.sched-card-title {
  font-size: 15px; font-weight: 600; color: var(--text);
}
.sched-card-tag {
  display: inline-block; padding: 1px 7px; font-size: 10px;
  border-radius: 4px; border: 1px solid var(--line);
  text-transform: lowercase; letter-spacing: 0.02em;
  font-weight: 600;
}
.sched-card-tag.reboot { color: var(--bad); border-color: var(--bad); }
.sched-card-tag.check  { color: var(--ok);  border-color: var(--ok); }
.sched-card-tag.warn   { color: var(--warn); border-color: var(--warn); }

/* Time row (HH:MM inputs + delete) */
.sched-time-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.sched-time-label {
  font-size: 12px; color: var(--text-3); min-width: 56px;
}
.sched-time-input {
  width: 56px; padding: 4px 6px;
  font-size: 14px; text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.sched-time-input:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.sched-time-colon {
  font-size: 14px; font-weight: 600; color: var(--text-2);
  user-select: none;
}
.sched-time-hint { font-size: 11px; margin-left: 4px; }

.sched-card-del {
  margin-left: auto;
  width: 26px; height: 26px; padding: 0;
  font-size: 14px; line-height: 1;
  color: var(--text-3);
}
.sched-card-del:hover { color: var(--bad); border-color: var(--bad); }
.sched-card-restore { font-size: 11px; padding: 3px 10px; }

/* Add new window button row */
.sched-add-row {
  padding: 10px 12px 4px;
  display: flex; justify-content: flex-start;
}
.sched-add-row .btn { font-size: 12px; }

.sched-card-tgl {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--text-3); user-select: none;
  cursor: pointer;
}
.sched-card-tgl .sched-tgl-state { min-width: 28px; text-align: right; }
.sched-card.busy .sched-card-tgl { opacity: 0.6; }

/* Body — two-column label:value list */
.sched-card-body {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px; row-gap: 4px;
  font-size: 12px;
  border-top: 1px dashed var(--line-soft);
  padding-top: 10px;
  margin: 0;
}
.sched-card-body dt { color: var(--text-3); }
.sched-card-body dd { color: var(--text-2); margin: 0; }
.sched-card-body dd code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}
.sched-card-body dd b { color: var(--text); }
.sched-card-body dd.ok   { color: var(--ok); }
.sched-card-body dd.warn { color: var(--warn); }

/* Recent runs list (collapsible) */
.sched-runs-wrap > summary { cursor: pointer; list-style: none; }
.sched-runs-wrap > summary::-webkit-details-marker { display: none; }
.sched-runs-wrap > summary::after { content: ' ▾'; color: var(--text-3); font-size: 10px; }
.sched-runs-wrap[open] > summary::after { content: ' ▴'; }

.sched-runs { display: flex; flex-direction: column; gap: 4px; padding: 6px 12px; }
.sched-run {
  display: grid;
  grid-template-columns: 110px 18px 120px 1fr;
  column-gap: 10px;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--line-soft);
}
.sched-run:last-child { border-bottom: none; }
.sched-run-ts { color: var(--text-2); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sched-run-icon.ok   { color: var(--ok); }
.sched-run-icon.warn { color: var(--warn); }
.sched-run-window { color: var(--text-3); font-size: 11px; }
.sched-run-body { color: var(--text-2); }
.sched-run-body .warn { color: var(--warn); }
.sched-run-body .dim  { color: var(--text-3); }

/* ════════════════════════════════════════════════════════════════════════
 * COMMAND CENTER (.cc-*) — серверные action-модули в стиле v3 tactical.
 *
 * Четыре модуля: SCRIPT HEALTH (auto-fix), REBOOT ALL, BALANCE, INTERNET.
 * Каждый — карточка с cursor-reactive glow в духе analytics hero;
 * клик раскрывает operation drawer внутри карточки.
 * ════════════════════════════════════════════════════════════════════════ */

.cc {
  margin: 18px 0 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.cc.cc-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1280px) {
  .cc        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cc.cc-5   { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .cc        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc.cc-5   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 580px)  {
  .cc        { grid-template-columns: 1fr; }
  .cc.cc-5   { grid-template-columns: 1fr; }
}
/* «Команды» — обычная колонка, такой же поведение как у соседей. */

/* ── Модуль (карточка) ─────────────────────────────────────────────── */
.cc-mod {
  position: relative;
  padding: 14px 16px 12px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition:
    background 320ms cubic-bezier(.22,.61,.36,1),
    border-color 320ms cubic-bezier(.22,.61,.36,1),
    transform 320ms cubic-bezier(.22,.61,.36,1),
    box-shadow 320ms cubic-bezier(.22,.61,.36,1);
}
.cc-mod::before {
  /* Cursor-reactive glow в духе .an-anchor::before.
   * Асимметричный fade: появление быстрое (140 мс), уход медленный (560 мс),
   * чтобы при ведении мышью между карточками за курсором тянулся «шлейф». */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%),
    rgba(214,168,79,0.14),
    rgba(214,168,79,0.04) 38%,
    transparent 68%);
  opacity: 0;
  transition: opacity 560ms cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  z-index: 0;
}
.cc-mod:hover::before { transition-duration: 140ms; }
.cc-mod::after {
  /* Тонкая полоска слева — индикатор последнего результата. */
  content: "";
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px;
  background: transparent;
  transition: background 320ms ease, box-shadow 320ms ease;
  border-radius: 2px;
  z-index: 1;
}
.cc-mod.tone-ok::after   { background: var(--ok);   box-shadow: 0 0 14px rgba(88,199,131,0.45); }
.cc-mod.tone-warn::after { background: var(--warn); box-shadow: 0 0 14px rgba(214,168,79,0.45); }
.cc-mod.tone-bad::after  { background: var(--bad);  box-shadow: 0 0 14px rgba(213,106,106,0.45); }
.cc-mod.tone-run::after  { background: var(--accent); box-shadow: 0 0 18px rgba(214,168,79,0.55); }

.cc-mod:hover {
  background: rgba(255,255,255,0.034);
  border-color: rgba(255,255,255,0.10);
  transform: translateY(-1px);
  box-shadow:
    0 0 28px rgba(214,168,79,0.10),
    0 12px 36px -16px rgba(0,0,0,0.65);
}
.cc-mod:hover::before { opacity: 1; }

.cc-mod.is-open {
  background: rgba(255,255,255,0.040);
  border-color: rgba(214,168,79,0.32);
}
.cc-mod.is-open::before { opacity: 1; }
.cc-mod.is-busy { cursor: progress; }

/* Если в ряду есть открытая карточка — остальные «дышат» базовым свечением,
 * чтобы было видно «можно зайти». Свечение использует тот же --mx/--my, что
 * обновляется глобальным трекером курсора. */
.cc.has-open .cc-mod:not(.is-open)::before { opacity: 0.45; }
.cc.has-open .cc-mod:not(.is-open):hover::before { opacity: 1; }

/* Тонкая горизонтальная «scanner»-линия под рядом карточек — появляется
 * только когда есть открытая, и подсвечивается у курсора. */
.cc.has-open::after {
  content: "";
  position: absolute; left: 0; right: 0;
  bottom: -8px; height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(214,168,79,0.04) 20%,
    rgba(214,168,79,0.32) var(--cc-mx, 50%),
    rgba(214,168,79,0.04) 80%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.22,.61,.36,1);
}
.cc.has-open::after { opacity: 0.7; }
.cc { position: relative; }

.cc-mod > * { position: relative; z-index: 2; }

/* ── Шапка модуля ──────────────────────────────────────────────────── */
.cc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  /* На узких карточках длинный state-лейбл («Ошибка авто-фикса», «На паузе»)
     ранее урезался parent.overflow:hidden — теперь wrap на новую строку. */
  flex-wrap: wrap;
  row-gap: 4px;
  min-width: 0;
}
.cc-orb {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  box-shadow: 0 0 0 0 rgba(214,168,79,0);
  flex-shrink: 0;
  transition: background 320ms ease, box-shadow 320ms ease;
}
.cc-orb.is-pulsing {
  background: var(--accent);
  animation: cc-pulse 1.4s ease-out infinite;
}
.cc-orb.is-ok {
  background: var(--ok);
  box-shadow: 0 0 12px rgba(88,199,131,0.55);
  animation: cc-breathe 3.2s ease-in-out infinite;
}
.cc-orb.is-bad {
  background: var(--bad);
  box-shadow: 0 0 14px rgba(213,106,106,0.65);
  animation: cc-pulse-bad 1.1s ease-out infinite;
}
.cc-orb.is-warn {
  background: var(--warn);
  box-shadow: 0 0 12px rgba(214,168,79,0.55);
  animation: cc-breathe 2.6s ease-in-out infinite;
}

@keyframes cc-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(214,168,79,0.45); }
  70%  { box-shadow: 0 0 0 10px rgba(214,168,79,0);    }
  100% { box-shadow: 0 0 0 0   rgba(214,168,79,0);    }
}
@keyframes cc-pulse-bad {
  0%   { box-shadow: 0 0 0 0   rgba(213,106,106,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(213,106,106,0);    }
  100% { box-shadow: 0 0 0 0   rgba(213,106,106,0);    }
}
@keyframes cc-breathe {
  0%, 100% { filter: brightness(1.0); }
  50%      { filter: brightness(1.4); }
}

.cc-title {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  flex: 0 1 auto;
  min-width: 0;
}
.cc-state {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  /* min-width:0 + word-break — иначе длинный state съезжал за overflow:hidden. */
  flex: 0 1 auto;
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cc-state.ok   { color: var(--ok); }
.cc-state.warn { color: var(--warn); }
.cc-state.bad  { color: var(--bad); }
.cc-state.run  { color: var(--accent); }

.cc-sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-2);
  min-height: 18px;
  line-height: 1.35;
}
.cc-sub b { color: var(--text); font-weight: 600; }

/* ── Drawer (operation panel) ─────────────────────────────────────── */
.cc-drawer {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition:
    max-height 420ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms ease,
    margin-top 320ms ease,
    border-top-color 320ms ease;
}
.cc-mod.is-open .cc-drawer {
  max-height: 1200px;
  opacity: 1;
  margin-top: 12px;
  padding-top: 12px;
  border-top-color: var(--line-soft);
}

.cc-drawer-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  color: var(--text-2);
  padding: 4px 0;
  /* Без wrap длинные value (serial, путь к скрипту, USSD-ответ) обрезались
     parent.cc-mod{overflow:hidden}. Теперь — переносим, не урезаем. */
  flex-wrap: wrap;
  min-width: 0;
}
.cc-drawer-row .l {
  color: var(--text-3);
  min-width: 84px;
  flex: 0 0 auto;
}
.cc-drawer-row .v {
  color: var(--text);
  /* min-width:0 — обязателен в flex-child, иначе word-break не сработает
     и текст вылезет за границу карточки. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cc-drawer-row .v.ok   { color: var(--ok); }
.cc-drawer-row .v.warn { color: var(--warn); }
.cc-drawer-row .v.bad  { color: var(--bad); }

.cc-drawer-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.45;
}
/* "Сервер занят: подключаюсь к текущей проверке" — info-нотис, не ошибка. */
.cc-drawer-note.cc-drawer-note-info {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(91, 157, 255, 0.10);
  border: 1px solid rgba(91, 157, 255, 0.30);
  border-radius: 6px;
  color: #cfe1ff;
  font-size: 12px;
  font-weight: 500;
}

.cc-drawer-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.cc-drawer-actions .btn { font-size: 12px; }

.cc-cta {
  width: 100%;
  padding: 9px 14px;
  background: linear-gradient(180deg, rgba(214,168,79,0.18), rgba(214,168,79,0.10));
  border: 1px solid rgba(214,168,79,0.42);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 120ms ease;
}
.cc-cta:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(214,168,79,0.26), rgba(214,168,79,0.14));
  border-color: rgba(214,168,79,0.65);
  box-shadow: 0 0 24px rgba(214,168,79,0.28);
}
.cc-cta:active:not(:disabled) { transform: translateY(1px); }
.cc-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cc-cta.danger {
  background: linear-gradient(180deg, rgba(213,106,106,0.20), rgba(213,106,106,0.10));
  border-color: rgba(213,106,106,0.50);
}
.cc-cta.danger:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(213,106,106,0.30), rgba(213,106,106,0.14));
  border-color: rgba(213,106,106,0.75);
  box-shadow: 0 0 26px rgba(213,106,106,0.32);
}

/* ── Progress bar ─────────────────────────────────────────────────── */
.cc-progress {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}
.cc-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(214,168,79,0.4), var(--accent));
  border-radius: 3px;
  transition: width 320ms cubic-bezier(.22,.61,.36,1);
  box-shadow: 0 0 12px rgba(214,168,79,0.32);
}
.cc-progress.is-done .cc-progress-fill {
  background: linear-gradient(90deg, rgba(88,199,131,0.4), var(--ok));
  box-shadow: 0 0 12px rgba(88,199,131,0.30);
}
.cc-progress.is-err .cc-progress-fill {
  background: linear-gradient(90deg, rgba(213,106,106,0.4), var(--bad));
}

/* Indeterminate stream — ползущий блик. */
.cc-progress.is-indeterminate .cc-progress-fill {
  width: 32%;
  animation: cc-indeterminate 1.4s cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes cc-indeterminate {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(420%); }
}

/* ── Phones grid (live reboot view) ──────────────────────────────── */
.cc-phones {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}
.cc-phones::-webkit-scrollbar { width: 6px; }
.cc-phones::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 3px; }

.cc-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.022);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  font-size: 10.5px;
  color: var(--text-2);
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease;
  opacity: 0;
  animation: cc-pill-in 320ms cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes cc-pill-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-pill .cc-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  flex-shrink: 0;
}
.cc-pill .cc-pill-serial { font-family: var(--font-mono); }

.cc-pill.is-pending  { color: var(--text-3); }
.cc-pill.is-pending  .cc-pill-dot { background: rgba(255,255,255,0.20); }
.cc-pill.is-running  { color: var(--accent); border-color: rgba(214,168,79,0.32); background: rgba(214,168,79,0.05); }
.cc-pill.is-running  .cc-pill-dot { background: var(--accent); animation: cc-pulse 1.4s ease-out infinite; }
.cc-pill.is-offline  { color: var(--text-3); }
.cc-pill.is-offline  .cc-pill-dot { background: var(--text-3); }
.cc-pill.is-online   { color: var(--ok); border-color: rgba(88,199,131,0.32); background: rgba(88,199,131,0.05); }
/* Политика «дот только при проблеме» (2026-05-28): is-online сам по себе
   уже зелёный (border+background+text), отдельный дот не нужен. Pulse-glow
   также убран — это статус, не процесс (для процесса есть is-running). */
.cc-pill.is-online   .cc-pill-dot { background: transparent; box-shadow: none; }
.cc-pill.is-error    { color: var(--bad); border-color: rgba(213,106,106,0.32); background: rgba(213,106,106,0.05); }
.cc-pill.is-error    .cc-pill-dot { background: var(--bad); }
.cc-pill.is-negative,
.cc-pill.is-online.is-negative {
  color: var(--bad);
  border-color: rgba(213,106,106,0.55);
  background: rgba(213,106,106,0.12);
}
.cc-pill.is-negative .cc-pill-dot,
.cc-pill.is-online.is-negative .cc-pill-dot {
  background: var(--bad);
  box-shadow: 0 0 8px rgba(213,106,106,0.55);
}

/* Карточка модуля целиком — кликабельная зона toggle (всё, кроме .cc-drawer
   и интерактивных контролов). Подсказка указателем, чтобы было ощущение
   кнопки. */
.cc-mod[data-cc-mod] { cursor: pointer; }
.cc-mod[data-cc-mod] .cc-drawer { cursor: auto; }

.cc-phones-summary {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
}
.cc-phones-summary b { color: var(--text); font-weight: 600; }
.cc-phones-summary .ok b   { color: var(--ok); }
.cc-phones-summary .bad b  { color: var(--bad); }
.cc-phones-summary .run b  { color: var(--accent); }

/* Auto-refresh hint pill в углу drawer */
.cc-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 10px;
  color: var(--text-3);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}

/* End of CSS. */

/* ── Commands module (5th cc-mod) ─────────────────────────────────────── */
/* Карточка ведёт себя как все остальные модули — drawer из обычных
   cc-drawer-row. Никакой кастомной сетки и переполнения. */

/* Заголовок: не дай длинному state-лейблу выпереть, .cc-title прижимается,
   .cc-state получает min-width:0 + ellipsis. */
.cc-mod.cc-cmds .cc-head { min-width: 0; }
.cc-mod.cc-cmds .cc-title { flex-shrink: 0; }
.cc-mod.cc-cmds .cc-state {
  min-width: 0;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cc-mod.cc-cmds .cc-sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Строки команд: используем обычный .cc-drawer-row, добавляем семантику
   <code> в label и узкий правый столбец под статус. */
.cc-cmd-line .l code {
  color: var(--text);
  font-weight: 600;
  font-size: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
}
.cc-cmd-line .v {
  text-align: right;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* Кнопки действий — компактные, в ряд, не на всю ширину */
.cc-mod.cc-cmds .cc-drawer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.cc-mod.cc-cmds .cc-drawer-actions .cc-cta {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────────────────────────────────────
   Обновить клики — заметная кнопка в hello (overview) и hero-page (server)
   Lite-only refresh: тянет ТОЛЬКО агрегаты по серверам, без per-device
   JOIN'а и без перезагрузки данных по телефонам/ADB.
   ───────────────────────────────────────────────────────────────────────── */
/* Clicks panel (overview) — компактная плашка между hello и locations.
   Минималистично, под общий v3-дизайн (acent — amber/gold). */
/* Clicks-блок (overview) — горизонтальная полоса в общей сетке страницы,
   как .hello и .loc: прозрачный фон, без оранжевых акцентов и закруглений,
   только тонкая нижняя разделительная линия. Появляется после загрузки
   через .is-revealed (плавный fade-in), скрыта при .is-hidden. */
.clicks-panel {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 22px 0 20px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
  opacity: 1;
  max-height: 120px;
  transform: translateY(0);
  transition:
    opacity 240ms ease,
    max-height 260ms ease,
    transform 240ms ease,
    margin 240ms ease,
    padding 240ms ease,
    border-color 240ms ease;
  overflow: hidden;
}
.clicks-panel.is-hidden {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  border-bottom-width: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
.clicks-panel.is-revealed { /* sentinel — на случай дополнительных вступительных эффектов */ }
.clicks-panel-label {
  font-size: 12.5px;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--text-3);
  font-weight: 400;
}
.clicks-panel-value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}
.clicks-panel-value.is-counting {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.clicks-panel-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.clicks-panel-ts {
  font-size: 12.5px;
  color: var(--text-3);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .clicks-panel { flex-wrap: wrap; padding: 18px 0 16px; gap: 10px; }
  .clicks-panel-value { font-size: 22px; }
  .clicks-panel-actions { width: 100%; justify-content: space-between; }
}

/* Refresh-кнопка кликов — ghost-стиль из общей библиотеки кнопок v3:
   прозрачная, без оранжевых акцентов, проявляется на hover через
   var(--surface). Используется и в overview, и в hero сервера. */
.clicks-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.hero-page .clicks-refresh-btn,
.hero .clicks-refresh-btn { margin-top: 12px; }
.clicks-refresh-btn:hover {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
.clicks-refresh-btn:active { transform: scale(0.98); }
.clicks-refresh-btn[disabled],
.clicks-refresh-btn.loading {
  opacity: 0.55;
  cursor: progress;
  pointer-events: none;
}
.clicks-refresh-btn.loading .clicks-refresh-ic {
  animation: clicks-refresh-spin 1s linear infinite;
}
.clicks-refresh-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  font-size: 12px;
  line-height: 1;
  border-radius: 0;
  background: transparent;
  color: var(--text-3);
}
.clicks-refresh-btn:hover .clicks-refresh-ic { color: var(--text-2); }
@keyframes clicks-refresh-spin { to { transform: rotate(360deg); } }

/* ── Tariff diagnose inline panel (v3) — same brutalist style as ph-num-detect ── */
.ph-tariff-box {
  margin: 0 16px 16px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.ph-tariff-box[hidden] { display: none; }
.ph-tariff-loading {
  display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2);
}
.ph-tariff-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08); border-top-color: var(--accent);
  animation: tariff-spin .8s linear infinite; flex-shrink: 0;
}
@keyframes tariff-spin { to { transform: rotate(360deg); } }
.ph-tariff-err { font-size: 12px; padding: 4px 0; }

.ph-tariff-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.ph-tariff-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid transparent;
}
.ph-tariff-pill.bad  { color: var(--bad);  background: rgba(213,106,106,0.10); border-color: rgba(213,106,106,0.32); }
.ph-tariff-pill.warn { color: var(--warn); background: var(--accent-soft);     border-color: var(--accent-line); }
.ph-tariff-pill.ok   { color: var(--ok);   background: rgba(88,199,131,0.08);  border-color: rgba(88,199,131,0.28); }
.ph-tariff-pill.dim  { color: var(--text-3); background: rgba(255,255,255,0.02); border-color: var(--line); }
.ph-tariff-sub { font-size: 11px; }

.ph-tariff-summary {
  font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 10px; line-height: 1.45;
}
.ph-tariff-h {
  margin: 12px 0 6px; font-size: 10px; color: var(--text-3);
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
}
.ph-tariff-reasons { display: flex; flex-direction: column; gap: 6px; }
.ph-tariff-reason {
  padding: 8px 10px; border-radius: 4px;
  background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft);
}
.ph-tariff-reason.sev-high { border-color: rgba(213,106,106,0.32); background: rgba(213,106,106,0.04); }
.ph-tariff-reason.sev-mid  { border-color: var(--accent-line);     background: rgba(214,168,79,0.04); }
.ph-tariff-reason-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px;
}
.ph-tariff-reason-head b { color: var(--text); font-size: 12.5px; font-weight: 600; }
.ph-tariff-reason-explain { font-size: 12px; color: var(--text-2); margin-bottom: 4px; }
.ph-tariff-reason-fix     { font-size: 12px; color: var(--warn); }
.ph-tariff-reason-fix b   { color: var(--text); font-weight: 600; }
.ph-tariff-reason-when    { font-size: 11px; margin-top: 4px; }

.ph-tariff-empty {
  padding: 10px 12px; border-radius: 4px;
  background: rgba(255,255,255,0.018); border: 1px dashed var(--line);
  color: var(--text-2); font-size: 12px;
}
.ph-tariff-recs { margin: 0; padding: 0; font-size: 12px; color: var(--text-2); line-height: 1.6; list-style: none; }
.ph-tariff-recs li { margin-bottom: 6px; }
.ph-tariff-rec.ussd {
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.ph-tariff-rec-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ph-tariff-rec-lab { flex: 1 1 auto; min-width: 0; }
.ph-tariff-fix {
  font-size: 11.5px;
  padding: 5px 11px;
  flex-shrink: 0;
}
.ph-tariff-fix-result {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line-soft);
  font-size: 12px;
}
.ph-tariff-fix-result[hidden] { display: none; }
.ph-tariff-fix-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
}
.ph-tariff-fix-err { padding: 6px 0; }
.ph-tariff-fix-head { margin-bottom: 6px; }
.ph-tariff-fix-steps {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 11.5px;
  color: var(--text-2);
}
.ph-tariff-fix-steps li {
  padding: 3px 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.ph-tariff-fix-steps li.ok .ico   { color: var(--ok); }
.ph-tariff-fix-steps li.warn .ico { color: var(--warn); }
.ph-tariff-fix-steps li b { font-weight: 500; color: var(--text); }
.ph-tariff-fix-steps .ico { flex-shrink: 0; width: 12px; text-align: center; font-weight: 700; }
.ph-tariff-fix-text {
  margin-top: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.ph-tariff-fix-text > summary {
  cursor: pointer; padding: 6px 8px;
  color: var(--text-3); font-size: 11px;
  list-style: none;
}
.ph-tariff-fix-text[open] > summary { border-bottom: 1px solid var(--line-soft); color: var(--warn); }
.ph-tariff-fix-text pre {
  margin: 0; padding: 8px;
  font-size: 11px;
  color: var(--text-2);
  white-space: pre-wrap;
  word-break: break-word;
}

/* SIM_BLOCKED — серые неактивные кнопки + подсказка */
.ph-detail-actions.sim-blocked .btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.ph-detail-actions.sim-blocked .btn[data-ph-action="sim-check"] {
  opacity: 1;
  cursor: pointer;
}
.ph-sim-freed {
  margin: 10px 0;
  padding: 10px 12px;
  background: rgba(88,199,131,0.08);
  border: 1px solid rgba(88,199,131,0.32);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ph-sim-freed b { color: var(--ok); font-weight: 600; }
.ph-sim-freed .btn { flex-shrink: 0; }

/* Number-detect: лог шагов */
.ph-num-steps {
  margin-top: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
}
.ph-num-steps > summary {
  cursor: pointer;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  list-style: none;
}
.ph-num-steps > summary::-webkit-details-marker { display: none; }
.ph-num-steps[open] > summary {
  border-bottom: 1px solid var(--line-soft);
  color: var(--warn);
}
.ph-num-steps ol {
  margin: 0; padding: 8px 12px;
  list-style: none;
  font-size: 12px;
  color: var(--text-2);
}
.ph-num-steps li {
  padding: 4px 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.ph-num-steps li.ok .ico   { color: var(--ok); }
.ph-num-steps li.warn .ico { color: var(--warn); }
.ph-num-steps li b { color: var(--text); font-weight: 500; }
.ph-num-steps .ico { flex-shrink: 0; width: 12px; text-align: center; font-weight: 700; }
.ph-tariff-ussd {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--text); font-family: ui-monospace, monospace; font-size: 12px; font-weight: 600;
}

.ph-tariff-evidence { margin-top: 12px; border: 1px solid var(--line-soft); border-radius: 4px; }
.ph-tariff-evidence > summary {
  list-style: none; padding: 7px 10px; font-size: 11px; color: var(--text-3);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.ph-tariff-evidence > summary:hover  { color: var(--text-2); }
.ph-tariff-evidence[open] > summary  { border-bottom: 1px solid var(--line-soft); color: var(--warn); }
.ph-tariff-evidence-list {
  padding: 6px 10px 8px; display: flex; flex-direction: column; gap: 6px;
  max-height: 280px; overflow: auto;
}
.ph-tariff-ev-row {
  padding: 7px 8px; background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft); border-radius: 3px;
}
.ph-tariff-ev-meta { font-size: 10px; margin-bottom: 3px; }
.ph-tariff-ev-body { font-size: 12px; color: var(--text-2); line-height: 1.4; word-break: break-word; }

.ph-tariff-actions { display: flex; gap: 6px; margin-top: 12px; justify-content: flex-end; }
/* ── /Tariff diagnose inline panel ───────────────────────────────────────────── */

/* ── SIM check inline panel (same shape as Tariff) ───────────────────────── */
.ph-sim-box { margin-top: 8px; }
.ph-sim-loading {
  display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2);
}
.ph-sim-spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.08); border-top-color: var(--accent);
  animation: tariff-spin .8s linear infinite; flex-shrink: 0;
}
.ph-sim-err { font-size: 12px; padding: 4px 0; }
.ph-sim-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-bottom: 8px; flex-wrap: wrap;
}
.ph-sim-pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  border: 1px solid transparent;
}
.ph-sim-pill.bad  { color: var(--bad);  background: rgba(213,106,106,0.10); border-color: rgba(213,106,106,0.32); }
.ph-sim-pill.warn { color: var(--warn); background: var(--accent-soft);     border-color: var(--accent-line); }
.ph-sim-pill.ok   { color: var(--ok);   background: rgba(88,199,131,0.08);  border-color: rgba(88,199,131,0.28); }
.ph-sim-pill.dim  { color: var(--text-3); background: rgba(255,255,255,0.02); border-color: var(--line); }
.ph-sim-sub { font-size: 11px; }
.ph-sim-verdict { font-size: 12.5px; color: var(--text-2); line-height: 1.45; margin-bottom: 8px; }
.ph-sim-row { font-size: 12.5px; color: var(--text); margin: 4px 0; }
.ph-sim-row b { font-weight: 600; }
.ph-sim-details { margin-top: 8px; border: 1px solid var(--line-soft); border-radius: 4px; }
.ph-sim-details > summary {
  list-style: none; padding: 6px 10px; font-size: 11px; color: var(--text-3);
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
}
.ph-sim-details > summary:hover { color: var(--text-2); }
.ph-sim-details[open] > summary { border-bottom: 1px solid var(--line-soft); color: var(--warn); }
.ph-sim-grid {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px;
  padding: 8px 10px; font-size: 12px;
}
.ph-sim-grid b { color: var(--text); font-family: ui-monospace, monospace; }
.ph-sim-grid b.ok   { color: var(--ok); }
.ph-sim-grid b.warn { color: var(--warn); }
.ph-sim-grid b.bad  { color: var(--bad); }
.ph-sim-text {
  margin: 0; padding: 8px 10px; font-size: 11.5px; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto;
}
.ph-sim-actions { display: flex; gap: 6px; margin-top: 12px; justify-content: flex-end; }
/* ── /SIM check inline panel ─────────────────────────────────────────────── */

/* ── Silent servers block (overview) ─────────────────────────────────────
   Большая видимая плашка над списком локаций. Появляется ТОЛЬКО если есть
   серверы с last_activity старше 30 мин — иначе секции вообще нет в DOM. */
.silent-servers {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: rgba(213, 106, 106, 0.05);
  border: 1px solid rgba(213, 106, 106, 0.32);
  border-left: 3px solid var(--bad);
  border-radius: 5px;
}
.silent-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 13px;
}
.silent-head b   { color: var(--bad); font-size: 14px; }
.silent-icon     { font-size: 14px; color: var(--bad); }
.silent-list {
  display: flex; flex-direction: column; gap: 4px;
}
.silent-item {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr auto auto;
  align-items: baseline; gap: 10px;
  padding: 6px 10px; background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft); border-radius: 4px;
  font-size: 12px;
}
.silent-item.bad   { border-color: rgba(213,106,106,0.32); }
.silent-item.warn  { border-color: rgba(214,168,79,0.32); }
.silent-name {
  font-weight: 600; color: var(--text); text-decoration: none;
  font-size: 13px;
}
.silent-name:hover { color: var(--accent); }
.silent-dur     { color: var(--text-2); }
.silent-item.bad  .silent-dur b { color: var(--bad); }
.silent-item.warn .silent-dur b { color: var(--warn); }
.silent-since   { font-size: 11px; }
.silent-devs    { font-size: 11px; }
@media (max-width: 600px) {
  .silent-item {
    grid-template-columns: 1fr auto;
    gap: 4px 10px;
  }
  .silent-since, .silent-devs { grid-column: span 2; }
}
/* ── /Silent servers block ───────────────────────────────────────────── */

/* ── Auth gate (v3, без зависимости от v2) ───────────────────────────────── */
.auth-gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg);
}
.auth-card {
  width: 320px; padding: 28px 26px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.auth-logo {
  width: 48px; height: 48px; margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line);
  border-radius: 8px; font-weight: 800; font-size: 20px; letter-spacing: -.04em;
  position: relative;
}
.auth-logo-3 { font-size: 11px; vertical-align: top; margin-left: 2px; opacity: .85; }
.auth-title {
  text-align: center; font-size: 18px; font-weight: 700; color: var(--text);
  letter-spacing: -.02em; margin-bottom: 2px;
}
.auth-sub { text-align: center; font-size: 11px; color: var(--text-3); margin-bottom: 18px; text-transform: uppercase; letter-spacing: .12em; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-field { display: flex; flex-direction: column; gap: 4px; }
.auth-field label { font-size: 11px; color: var(--text-3); letter-spacing: .04em; }
.auth-field input {
  height: 34px; padding: 0 10px; font-size: 13px;
  background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 5px; outline: none; transition: border-color .12s;
}
.auth-field input:focus { border-color: var(--accent-line); }
.auth-error {
  min-height: 16px; font-size: 12px; color: var(--bad);
}
.auth-btn {
  height: 36px; padding: 0 14px; margin-top: 4px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text);
  border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.auth-btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.auth-btn:disabled { opacity: .5; cursor: wait; }
/* ── /Auth gate ─────────────────────────────────────────────────────────── */

/* ── Hello inline (статус-точка + строка + meta в одну линию) ──────────── */
.hello.hello-inline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 22px 0 20px;
}
.hello.hello-inline .hello-line {
  font-size: 17px;
  display: inline;
  margin: 0;
}
.hello.hello-inline .hello-meta {
  font-size: 12.5px;
  color: var(--text-3);
  margin: 0;
  letter-spacing: 0.005em;
}
.hello.hello-inline .hello-meta::before {
  /* Тонкий разделитель «середина точкой» между статус-текстом и meta. */
  content: "·";
  margin-right: 8px;
  color: var(--text-3);
  opacity: 0.6;
}
.hello-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--text-3);
  flex-shrink: 0;
  align-self: center;
  transition: background-color .25s, box-shadow .25s;
}
.hello-dot.ok   { background: var(--ok);   box-shadow: 0 0 6px rgba(88,199,131,.55); }
.hello-dot.warn { background: var(--warn); box-shadow: 0 0 6px rgba(214,168,79,.55); }
.hello-dot.bad  { background: var(--bad);  box-shadow: 0 0 6px rgba(213,106,106,.55); }
.hello-dot.dim  { background: var(--text-3); opacity: 0.4; }

@media (max-width: 600px) {
  .hello.hello-inline { padding: 16px 0 14px; gap: 8px; }
  .hello.hello-inline .hello-line { font-size: 15px; }
  .hello.hello-inline .hello-meta { display: block; width: 100%; }
  .hello.hello-inline .hello-meta::before { display: none; }
}
/* ── /Hello inline ─────────────────────────────────────────────────────── */

/* ── Auth screen v2: минималистичный чёрный экран с blur за мышкой ───── */
.auth-screen {
  position: fixed; inset: 0;
  background: #000;
  color: #e8e8e8;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.auth-screen-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(214,168,79,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(176,124,255,0.03) 0%, transparent 55%);
  pointer-events: none;
}
.auth-screen-fog {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.07) 0%,
    rgba(255,255,255,0.025) 30%,
    transparent 70%
  );
  transition: background 0.12s linear;
  filter: blur(40px);
  will-change: background;
}
.auth-screen-card {
  position: relative; z-index: 1;
  width: 320px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 28px;
}
.auth-screen-title {
  text-align: center;
  font-weight: 300;
  letter-spacing: 0.5em;
  font-size: 22px;
  color: #d6a84f;
  text-indent: 0.5em;
}
.auth-screen-form {
  display: flex; flex-direction: column; gap: 16px;
}
.auth-screen-form input {
  background: transparent;
  color: #e8e8e8;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 10px 4px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
  letter-spacing: 0.02em;
  font-family: inherit;
}
.auth-screen-form input::placeholder {
  color: rgba(255,255,255,0.32);
  font-weight: 300;
  letter-spacing: 0.06em;
}
.auth-screen-form input:focus {
  border-bottom-color: #d6a84f;
}
.auth-screen-form input:-webkit-autofill {
  -webkit-text-fill-color: #e8e8e8;
  -webkit-box-shadow: 0 0 0 1000px transparent inset;
  caret-color: #e8e8e8;
  transition: background-color 999999s;
}
.auth-screen-error {
  min-height: 16px;
  font-size: 12px;
  color: #ff8a8a;
  letter-spacing: 0.02em;
}
.auth-screen-btn {
  background: transparent;
  color: #d6a84f;
  border: none;
  padding: 12px 4px;
  font-size: 13px;
  letter-spacing: 0.3em;
  cursor: pointer;
  text-align: center;
  transition: color 0.2s ease, letter-spacing 0.2s ease;
  margin-top: 8px;
  font-family: inherit;
}
.auth-screen-btn:hover { color: #ffd28a; letter-spacing: 0.36em; }
.auth-screen-btn:disabled { color: rgba(214,168,79,0.4); cursor: default; }

/* Старый auth-gate / auth-card — на всякий, оставим скрытыми если где-то
   ещё рендерится дефолт. Новый _renderAuthGate использует .auth-screen. */
.auth-gate { display: none; }

/* ── Analytics v2: TG-stats dashboard ──────────────────────────────── */
.an-page {
  padding-top: 8px;
  /* Layout-shift fix (2026-05-28): фиксируем ширину равной max-width=980.
     До этой правки flex-parent сжимал .an-page до min-content (~760px)
     когда дни были свёрнуты, и расширял до 980 при раскрытии detail с
     длинными строками. Колонка 1fr внутри .an-days-table сжималась/росла
     вместе с этим, отсюда «съезжание» при клике на день. */
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  min-width: 0;
}
.an-controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.an-window-tabs { display: flex; gap: 4px; }
.an-window-tab {
  background: transparent; color: var(--text-3); border: none;
  padding: 6px 12px; font-size: 12px; letter-spacing: 0.05em;
  cursor: pointer; border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease;
}
.an-window-tab:hover { background: rgba(214,168,79,0.06); color: var(--text-2); }
.an-window-tab.active { background: rgba(214,168,79,0.12); color: #d6a84f; }
.an-data-range { font-size: 11px; letter-spacing: 0.03em; }

.an-cards {
  display: grid;
  /* 4 фиксированных колонки — все 4 карточки (Последний / Предыдущий /
     Среднее / Лучший) всегда в одну строку, как и хотел пользователь.
     На узком экране (iPad portrait < 720px) — 2 колонки. */
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
  width: 100%;
}
@media (max-width: 720px) {
  .an-cards { grid-template-columns: repeat(2, 1fr); }
}
.an-card {
  background: rgba(255,255,255,0.025); border-radius: 6px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.an-card-label { font-size: 11px; letter-spacing: 0.08em; color: var(--text-3); text-transform: uppercase; }
.an-card-value { font-size: 28px; font-weight: 300; color: var(--text); }
.an-card-sub { font-size: 11px; }
.an-card-delta { font-size: 11px; margin-top: 4px; letter-spacing: 0.02em; }
.an-card-delta.good { color: #6ad888; }
.an-card-delta.bad  { color: #ff8a8a; }

.an-h2 { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 10px; font-weight: 400; }

/* Стабильная ширина для блоков аналитики — иначе раскрытие/сворачивание
   дня может вызвать перерасчёт ширины (особенно когда внутренний
   detail-grid имеет другие min-content требования). */
.an-cards, .an-days-section, .an-hourly-section, .an-insights {
  width: 100%;
  max-width: 100%;
}
.an-days-section .an-days, .an-hourly-section .an-hourly { width: 100%; }

.an-insights { margin-bottom: 18px; }
.an-insights-list { display: flex; flex-direction: column; gap: 8px; }
.an-insight { padding: 12px 14px; border-radius: 6px; border-left: 2px solid transparent; }
.an-insight.info { background: rgba(214,168,79,0.04); border-left-color: rgba(214,168,79,0.5); }
.an-insight.warn { background: rgba(255,180,80,0.06); border-left-color: #ffb050; }
.an-insight.good { background: rgba(106,216,136,0.06); border-left-color: #6ad888; }
.an-insight-title { font-weight: 500; margin-bottom: 4px; }
.an-insight-body { font-size: 12px; color: var(--text-2); }

.an-days-table {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.012);
  /* Явная ширина — иначе при раскрытии длинного контента flex-родитель
     может пересчитать min-content и таблица «прыгает». */
  width: 100%;
}
.an-days-row {
  display: grid;
  /* 4 колонки: День (фикс ширина для даты) / Клики (число) / Бар (растягивается) / Конв.% */
  grid-template-columns: 130px 100px 1fr 100px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background 0.12s ease;
}
.an-days-row:last-child { border-bottom: none; }
@media (hover: hover) {
  .an-days-row:not(.an-days-head):hover { background: rgba(255,255,255,0.035); }
}
.an-days-row.an-days-head {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); cursor: default; padding: 10px 18px;
  background: rgba(255,255,255,0.02);
}
.an-days-row.open { background: rgba(214, 168, 79, 0.05); }
.an-days-cell.day {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--text);
}
.an-days-cell.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}
.an-days-cell.num b { font-size: 14px; }
.an-day-toggle { color: var(--text-3); font-size: 11px; }
.an-bar {
  background: rgba(255,255,255,0.06);
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
}
.an-bar-fill {
  background: linear-gradient(90deg, #d6a84f, #f0c878);
  height: 100%;
  transition: width 0.3s ease;
  border-radius: inherit;
}

.an-days-detail {
  background: rgba(255,255,255,0.015); padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 12px;
}
.an-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.an-detail-grid > div { display: flex; flex-direction: column; gap: 3px; }
.an-detail-grid b { font-weight: 500; }
.an-stations { display: flex; flex-direction: column; gap: 4px; }
.an-stations-h { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
.an-station { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; }
.an-station-name { color: var(--text-2); }
.an-station-v { font-variant-numeric: tabular-nums; }

.an-hourly-bars { display: flex; gap: 3px; align-items: flex-end; height: 140px; padding: 12px 0; }
.an-hour { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 18px; }
.an-hour-bar { width: 100%; max-width: 24px; background: rgba(214,168,79,0.5); border-radius: 2px 2px 0 0; transition: height 0.2s ease; }
.an-hour.with-main  .an-hour-bar { background: #6ad888; }
.an-hour.only-extra .an-hour-bar { background: #ffb050; }
.an-hour.idle       .an-hour-bar { background: rgba(255,255,255,0.15); }
.an-hour-label { font-size: 9px; color: var(--text-3); }
.an-hourly-legend { display: flex; gap: 14px; font-size: 11px; margin-top: 8px; }
.an-hourly-legend .lg::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 1px; }
.an-hourly-legend .lg.with-main::before  { background: #6ad888; }
.an-hourly-legend .lg.only-extra::before { background: #ffb050; }
.an-hourly-legend .lg.idle::before       { background: rgba(255,255,255,0.15); }

.an-msg { padding: 24px; text-align: center; color: var(--text-3); }
.an-msg.bad { color: #ff8a8a; }

/* Decom-сервер (raevsk_20) — серый, без статусной обводки */
.loc-srv-row.decom { opacity: 0.45; }
.loc-srv-row.decom .loc-srv-name code { color: var(--text-3); }
.loc-srv-row.decom .loc-srv-dot { background: transparent; border: 1px dashed rgba(255,255,255,0.2); }
.loc-srv-row.decom:hover { opacity: 0.65; }

/* Smart-USSD follow-up внутри карточки баланса */
.cc-smart {
  margin-top: 14px; padding: 12px 14px;
  border-radius: 6px;
  background: rgba(176,124,255,0.05);
  border-left: 2px solid rgba(176,124,255,0.5);
  display: flex; flex-direction: column; gap: 8px;
}
.cc-smart-empty { background: rgba(106,216,136,0.04); border-left-color: rgba(106,216,136,0.4); }
.cc-smart-empty .cc-smart-icon { color: #6ad888; margin-right: 6px; }
.cc-smart-head { font-weight: 500; letter-spacing: 0.02em; }
.cc-smart-body { font-size: 12px; color: var(--text-2); }
.cc-smart-msg { margin-top: 6px; font-size: 12px; }
.cc-smart-msg.good { color: #6ad888; }
.cc-smart-buckets { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cc-smart-buckets .bk {
  background: rgba(255,255,255,0.04); padding: 4px 10px; border-radius: 3px;
  font-size: 11px; letter-spacing: 0.04em;
}
.cc-smart-buckets .bk b { color: var(--text); }
.cc-smart-buckets .bk-ok          { background: rgba(106,216,136,0.08); }
.cc-smart-buckets .bk-negative    { background: rgba(255,180,80,0.10); }
.cc-smart-buckets .bk-sim_blocked { background: rgba(176,124,255,0.10); }
.cc-smart-buckets .bk-no_service  { background: rgba(255,138,138,0.10); }
.cc-smart-buckets .bk-airplane    { background: rgba(255,180,80,0.10); }
.cc-smart-cta-wrap { margin-top: 4px; }
.cc-smart-cta { font-size: 12px !important; }

/* Analytics gate (cache / fresh) */
.an-gate-page { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.an-gate { max-width: 540px; width: 100%; }
.an-gate-title { text-align: center; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 20px; }
.an-gate-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.an-gate-btn {
  background: transparent; color: var(--text); border: none;
  border-radius: 6px; padding: 18px 16px;
  text-align: left; cursor: pointer;
  transition: background 0.18s ease;
  display: flex; flex-direction: column; gap: 6px;
}
.an-gate-btn:hover { background: rgba(214,168,79,0.06); }
.an-gate-btn.primary { background: rgba(214,168,79,0.08); }
.an-gate-btn.primary:hover { background: rgba(214,168,79,0.14); }
.an-gate-btn:disabled { opacity: 0.4; cursor: default; }
.an-gate-btn-head { font-size: 14px; font-weight: 500; }
.an-gate-btn-sub  { font-size: 12px; color: var(--text-2); }

/* Кнопка «источник» в верхней панели аналитики */
.an-controls-right { display: flex; align-items: center; gap: 10px; }
.an-gate-link {
  background: transparent; color: var(--text-3); border: none;
  padding: 4px 8px; font-size: 11px; letter-spacing: 0.08em; cursor: pointer;
  border-radius: 3px;
}
.an-gate-link:hover { background: rgba(255,255,255,0.04); color: var(--text-2); }

/* Day-picker — выбор конкретного дня за период */
.an-day-picker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.an-day-picker-wrap:focus-within {
  border-color: rgba(214,168,79,0.45);
  background: rgba(214,168,79,0.04);
}
.an-day-picker {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0;
  padding: 2px 0;
  color-scheme: dark;
  min-width: 110px;
}
.an-day-picker::-webkit-calendar-picker-indicator { filter: invert(0.7); cursor: pointer; }
.an-day-picker:focus { outline: none; }
.an-day-clear {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.an-day-clear:hover { color: var(--bad); }

/* Раскрытый день — больше воздуха, мини-разделы */
.an-days-detail {
  background: rgba(255,255,255,0.018);
  padding: 16px 20px 18px;
  border-left: 2px solid rgba(214,168,79,0.32);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: an-detail-in 200ms ease-out;
}
@keyframes an-detail-in {
  from { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
  to   { opacity: 1; max-height: 800px; padding-top: 16px; padding-bottom: 18px; }
}
.an-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line-soft);
}
.an-detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.an-detail-grid .dim {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.an-detail-grid b {
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.an-stations-h {
  font-size: 10.5px !important;
  letter-spacing: 0.10em !important;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 8px;
}
.an-days-detail .an-station {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12.5px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.an-days-detail .an-station:last-child { border-bottom: none; }
.an-days-detail .an-station-name { color: var(--text-2); }
.an-days-detail .an-station-v {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 500;
}

/* Подсветка compare-day-строки чётче */
.an-days-row.compare {
  background: rgba(214,168,79,0.14) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
.an-days-row.compare:hover { background: rgba(214,168,79,0.18) !important; }

/* Подсветка compare-day */
.an-days-row.compare { background: rgba(214,168,79,0.10); }
.an-days-row.compare:hover { background: rgba(214,168,79,0.14); }
.an-h2-hint { font-size: 11px; font-weight: 400; letter-spacing: 0.03em; text-transform: none; }

/* Воронка found_rate (2026-05-28): родная стилистика панели вместо
   старых GitHub-цветов #30363d/#0d1117. Используем var(--surface) +
   var(--line-soft) как остальные секции analytics. */
.an-funnel {
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 18px 0;
  background: var(--surface);
}
.an-funnel-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.an-funnel-head .an-h2 { margin: 0; }
.an-funnel-kpi {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  letter-spacing: -0.01em;
}
.an-funnel-meta { font-size: 12.5px; }
.an-funnel-label {
  margin: 14px 0 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.an-funnel-stations {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.an-funnel-stn {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 8px 12px;
  min-width: 104px;
  background: rgba(255,255,255,0.015);
}
.an-funnel-stn-lbl { font-size: 11px; letter-spacing: 0.02em; }
.an-funnel-stn-val {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin: 2px 0;
}
.an-funnel-stn-delta { font-size: 11px; font-variant-numeric: tabular-nums; }
.an-funnel-worst {
  display: flex; flex-direction: column;
  margin-top: 4px;
}
.an-funnel-worst-row {
  display: flex; justify-content: space-between;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--text);
  font-size: 13px;
  transition: background 120ms ease;
}
.an-funnel-worst-row:last-child { border-bottom: none; }
.an-funnel-worst-row:hover { background: rgba(255,255,255,0.025); }
.an-funnel-worst-name b { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 500; }
.an-funnel-worst-val { font-variant-numeric: tabular-nums; }
.an-funnel-updated {
  font-size: 11px;
  margin-top: 12px;
  letter-spacing: 0.02em;
}
.an-card-x {
  position: absolute; top: 6px; right: 6px;
  background: transparent; color: var(--text-3); border: none;
  font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 3px;
}
.an-card-x:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.an-card { position: relative; }

/* ════════════════════════════════════════════════════════════════════════
 * ДИАГНОСТИКА (.dg-*) — редизайн «Проблем» 18.05.2026.
 * Минимализм: светофор + аккордеоны категорий + топ-3 серверов.
 * ════════════════════════════════════════════════════════════════════════ */
.dg-app {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 24px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;   /* base для .dg-load-overlay */
}

/* Diagnostics load overlay (2026-05-28, SF7+SF8).
   Поверх каркаса диагностики пока идёт обход 40 серверов. Spinner +
   progress N/total — пользователь видит "загружаю", а не "прыгающие
   цифры" 98→90→80→71%. После Promise.all обкатывается fade-out 280мс,
   потом полный _render() рисует финальную картину. */
.dg-load-overlay {
  position: absolute; inset: 0;
  z-index: 5;
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  transition: opacity 280ms cubic-bezier(.2,.7,.2,1);
  opacity: 1;
  border-radius: 8px;
}
.dg-load-overlay.is-done { opacity: 0; pointer-events: none; }
.dg-load-spinner {
  width: 56px; height: 56px;
  border: 4px solid rgba(255,255,255,0.08);
  border-top-color: var(--warn);
  border-radius: 50%;
  animation: v3-spin 1.0s linear infinite;
}
.dg-load-text {
  color: var(--text-2);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.dg-load-count {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.dg-load-bar {
  width: 280px; height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.dg-load-bar-fill {
  display: block; height: 100%;
  background: var(--warn);
  width: 0;
  transition: width 280ms cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 8px rgba(214,168,79,0.45);
}

/* C (2026-05-28): server-page overlay при cold mount (loadServerData ~1с).
   Аналогичен diagnostics. Position: fixed центрированный поверх page. */
.srv-page { position: relative; }
.srv-load-overlay {
  position: fixed; inset: 0;
  z-index: 6;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  transition: opacity 280ms cubic-bezier(.2,.7,.2,1);
  opacity: 1;
}
.srv-load-overlay.is-done { opacity: 0; pointer-events: none; }
.srv-load-spinner {
  width: 56px; height: 56px;
  border: 4px solid rgba(255,255,255,0.08);
  border-top-color: var(--warn);
  border-radius: 50%;
  animation: v3-spin 1.0s linear infinite;
}
.srv-load-text {
  color: var(--text-2);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.srv-load-sub {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 14px;
  color: var(--text);
}

/* B (2026-05-28): hello-loader для overview cold mount.
   Виден только при .farm-loading. Spinner + count + bar — компактнее
   diagnostics overlay (нет fixed-затемнения). */
.hello-loader {
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
  margin-top: 28px;
  width: 100%;
  max-width: 360px;
}
.farm-loading .hello-loader { display: flex; }
.hello-loader-spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: var(--warn);
  border-radius: 50%;
  animation: v3-spin 1.0s linear infinite;
}
.hello-loader-count {
  font-size: 18px; font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.hello-loader-bar {
  width: 240px; height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.hello-loader-bar i {
  display: block; height: 100%;
  background: var(--warn);
  width: 0;
  transition: width 280ms cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 0 8px rgba(214,168,79,0.45);
}
/* Без .farm-loading скрываем loader полностью (даже если случайно остался). */
:not(.farm-loading) > .hello > .hello-loader { display: none; }
.dg-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dg-title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}
.dg-sub {
  font-size: 13px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.dg-sub b { color: var(--text); font-weight: 600; }

/* .dg-load (старая текст-плашка "обновляется… N/total") заменена на
   .dg-load-overlay со spinner'ом. Класс оставлен пустым на случай если
   где-то остался legacy-вызов; можно удалить полностью позже. */
.dg-load { display: none; }

/* ── Hero: центральный radial gauge со здоровьем фермы ────────────────── */
.dg-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 0 8px;
}
.dg-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
}
.dg-ring {
  position: relative;
  width: 220px; height: 220px;
}
.dg-ring-svg { width: 100%; height: 100%; display: block; }
.dg-ring-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.dg-ring-pct {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dg-ring-pct span {
  font-size: 22px;
  color: var(--text-3);
  font-weight: 500;
  margin-left: 4px;
}
.dg-ring.tone-ok   .dg-ring-pct { color: var(--ok); }
.dg-ring.tone-warn .dg-ring-pct { color: var(--warn); }
.dg-ring.tone-bad  .dg-ring-pct { color: var(--bad); }

.dg-hero-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  font-size: 13px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.dg-hs-item b { color: var(--text); font-weight: 600; margin-right: 4px; }
.dg-hs-item b.ok   { color: var(--ok); }
.dg-hs-item b.warn { color: var(--warn); }
.dg-hs-item b.bad  { color: var(--bad); }
.dg-hs-sep { color: var(--line); }

/* ── Сегментный bar распределения режимов ──────────────────────────────── */
.dg-seg-wrap { display: flex; flex-direction: column; gap: 12px; }
.dg-seg {
  display: flex;
  width: 100%;
  height: 14px;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-soft);
}
.dg-seg-fill {
  display: block; height: 100%;
  transition: width 600ms cubic-bezier(.2,.7,.2,1), filter 200ms ease;
}
.dg-seg-fill:hover { filter: brightness(1.18); }
.dg-seg-bad  { background: var(--bad); }
.dg-seg-warn { background: var(--warn); }
.dg-seg-sim  { background: var(--sim); }
.dg-seg-ok   { background: rgba(88,199,131,0.55); }

.dg-leg {
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.dg-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.dg-leg-dot {
  width: 8px; height: 8px; border-radius: 2px;
  display: inline-block;
}
.dg-leg-n {
  color: var(--text); font-weight: 600; min-width: 22px;
}
.dg-leg-lab { color: var(--text-3); letter-spacing: 0.01em; }
.dg-cat-dot {
  width: 8px; height: 8px; border-radius: 2px;
  flex-shrink: 0;
}
.dg-allgood {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
  color: var(--ok);
  font-size: 14px;
  letter-spacing: 0.01em;
}

/* ── Секции ────────────────────────────────────────────────────────────── */
.dg-sec-title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin: 0 0 14px;
}

/* ── Категории-аккордеоны ─────────────────────────────────────────────── */
.dg-cats { display: flex; flex-direction: column; }
.dg-cat {
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 0 4px;
}
.dg-cat:last-child { border-bottom: none; }
.dg-cat-head {
  appearance: none;
  width: 100%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
}
.dg-cat-head.is-empty {
  cursor: default;
  color: var(--text-3);
}
.dg-cat-head:hover:not(.is-empty) {
  color: var(--text);
}
.dg-cat-tri {
  width: 14px;
  text-align: center;
  color: var(--text-3);
  font-size: 11px;
  flex-shrink: 0;
}
.dg-cat-lab {
  font-size: 15px;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}
.dg-cat-n {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  background: rgba(255,255,255,0.05);
  padding: 2px 10px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
  text-align: center;
}
.dg-cat-head.sev-bad .dg-cat-n  { background: rgba(213,106,106,0.18); color: var(--bad);  }
.dg-cat-head.sev-warn .dg-cat-n { background: rgba(214,168,79,0.15); color: var(--warn); }
.dg-cat-head.is-empty .dg-cat-n { background: rgba(255,255,255,0.04); color: var(--text-3); }
.dg-cat-hint {
  font-size: 12px;
  color: var(--text-3);
  padding: 0 0 6px 24px;
  margin-top: -6px;
}

/* ── Раскрытое тело: список телефонов ─────────────────────────────────── */
.dg-cat-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0 12px 24px;
  animation: dg-fade 220ms cubic-bezier(.22,.61,.36,1);
}
@keyframes dg-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dg-ph {
  display: grid;
  grid-template-columns: 110px 1fr 90px auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.018);
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-2);
  font-size: 13px;
  transition: background 160ms ease, border-color 160ms ease;
}
.dg-ph:hover {
  background: rgba(255,255,255,0.035);
  border-color: var(--line-soft);
  color: var(--text);
}
.dg-ph-srv code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-3);
}
.dg-ph:hover .dg-ph-srv code { color: var(--text-2); }
.dg-ph-num {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dg-ph-num .dim { color: var(--text-3); font-style: italic; }
.dg-ph-ser {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-3);
  text-align: right;
}
.dg-ph-open {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 160ms ease;
  white-space: nowrap;
}
.dg-ph:hover .dg-ph-open { opacity: 1; color: var(--accent); }
@media (max-width: 640px) {
  .dg-ph { grid-template-columns: 1fr auto; gap: 8px; }
  .dg-ph-ser, .dg-ph-open { display: none; }
}
.dg-more { font-size: 12px; padding: 6px 10px; color: var(--text-3); }
.dg-empty {
  font-size: 13px;
  color: var(--text-3);
  font-style: italic;
  padding: 8px 10px;
}

/* ── Топ-3 серверов ───────────────────────────────────────────────────── */
.dg-top { display: flex; flex-direction: column; gap: 6px; }
.dg-top-row {
  display: grid;
  grid-template-columns: 32px 110px 1fr 120px 16px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.022);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-2);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.dg-top-row:hover {
  background: rgba(255,255,255,0.04);
  border-color: var(--line);
  color: var(--text);
  transform: translateY(-1px);
}
.dg-top-rank {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.dg-top-name code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text);
}
.dg-top-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.dg-top-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--bad), rgba(213,106,106,0.6));
}
.dg-top-n {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  text-align: right;
}
.dg-top-arrow {
  color: var(--text-3);
  font-size: 14px;
  text-align: right;
}
.dg-top-row:hover .dg-top-arrow { color: var(--accent); }
@media (max-width: 720px) {
  .dg-top-row { grid-template-columns: 28px 1fr 80px; gap: 10px; padding: 10px 12px; }
  .dg-top-bar, .dg-top-arrow { display: none; }
}

/* server_autorefresh banner — миграция стек с другого VPS */
.sar-banner {
  margin: 10px 0 14px;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}
.sar-banner-warn {
  background: rgba(214,168,79,0.10);
  border: 1px solid rgba(214,168,79,0.32);
}
.sar-banner b { color: var(--warn); font-weight: 600; }
.sar-banner code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
}

/* ── Server-picker modal (для блоков автообновления) ───────────────────── */
.blk-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 95;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.18s ease;
  padding: 20px;
}
.blk-modal-overlay.on { opacity: 1; }

.blk-modal {
  background: var(--bg-1, #0a0a0c);
  border: 1px solid var(--line, #2a2a30);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex; flex-direction: column;
  font-size: 13px;
}
.blk-modal-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, #2a2a30);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.blk-modal-search {
  margin: 12px 16px 4px;
  font-size: 13px;
}
.blk-modal-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 12px;
}
.blk-modal-foot {
  border-top: 1px solid var(--line, #2a2a30);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 8px;
}
.blk-modal-foot .spacer { flex: 1; }

/* Confirm-модалка для деструктивных действий (settings → Сбросить). */
.set-confirm { max-width: 440px; }
.set-confirm-body {
  padding: 14px 16px 4px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}
.set-confirm-body p { margin: 0 0 8px; }
.set-confirm-body code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--text);
}
.set-confirm-warn { color: var(--bad); font-weight: 500; }

.blk-srv-pick-loc { margin: 10px 0 4px; }
.blk-srv-pick-loc-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; cursor: pointer;
  border-bottom: 1px dashed var(--line-soft, #1b1b1f);
  margin-bottom: 4px;
}
.blk-srv-pick-loc-name { color: var(--text-2, #c0c0c8); }
.blk-srv-pick-loc-count { font-size: 11px; margin-left: auto; }
.blk-srv-pick-srvs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 2px 12px;
  padding-left: 22px;
}
.blk-srv-pick-row {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; padding: 2px 0;
}
.blk-srv-pick-name { font-size: 12px; }

/* ── Wizard steps (SIM check / Detect number v2) ───────────────────────── */
.wiz-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.wiz-step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 8px;
  padding: 4px 8px;
  border-left: 2px solid var(--border, #2a2a30);
  transition: border-color .15s, background .15s;
}
.wiz-step-icon {
  font-weight: bold;
  text-align: center;
  color: var(--text-2, #8a8a90);
}
.wiz-step-label {
  color: var(--text, #d0d0d6);
}
.wiz-step-detail {
  grid-column: 2;
  font-size: 11px;
  color: var(--text-2, #8a8a90);
  margin-top: 1px;
}
.wiz-pending .wiz-step-icon { color: var(--text-3, #555); }
.wiz-pending .wiz-step-label { color: var(--text-2, #8a8a90); }
.wiz-running { border-left-color: #ffb84d; background: rgba(255,184,77,.04); }
.wiz-running .wiz-step-icon { color: #ffb84d; }
.wiz-done    { border-left-color: #4caf50; }
.wiz-done    .wiz-step-icon { color: #4caf50; }
.wiz-fail    { border-left-color: #e64a4a; background: rgba(230,74,74,.04); }
.wiz-fail    .wiz-step-icon { color: #e64a4a; }

/* ── Server-page: clicks history (30 days) ───────────────────────────────── */
.srv-history {
  margin: 24px 0 16px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.srv-history-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.srv-history-title {
  font-size: 14px; font-weight: 600; color: var(--text);
  margin: 0; letter-spacing: 0.02em;
}
.srv-history-meta { font-size: 12px; }
.srv-history-body {
  display: flex; flex-direction: column; gap: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}
.srv-history-row {
  display: grid;
  grid-template-columns: 95px 1fr 80px 60px;
  gap: 12px;
  align-items: center;
  padding: 5px 8px;
  border-radius: 4px;
  transition: background 0.12s ease;
}
@media (hover: hover) {
  .srv-history-row:hover { background: rgba(255,255,255,0.03); }
}
.srv-history-row.today {
  background: rgba(214, 168, 79, 0.08);
}
.srv-history-row.today .srv-history-day { color: #d6a84f; font-weight: 600; }
.srv-history-day { color: var(--text-2); }
.srv-history-bar {
  position: relative; height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px; overflow: hidden;
}
.srv-history-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, #d6a84f, #f0c878);
  border-radius: inherit;
  transition: width 0.3s ease;
  display: block;
}
.srv-history-clicks {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.srv-history-delta {
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.srv-history-delta.ok  { color: var(--ok, #4caf50); }
.srv-history-delta.bad { color: var(--bad, #e64a4a); }
.srv-history-delta.dim { color: var(--text-3); }

/* ── Server-page: click history (collapsible summary v2) ──────────────── */
.srv-history-summary {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; gap: 16px;
  padding: 14px 20px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .srv-history-summary:hover { background: rgba(255,255,255,0.035); border-color: var(--line); }
}
.srv-history-summary[aria-expanded="true"] {
  border-radius: 8px 8px 0 0;
  border-bottom-color: transparent;
}
.srv-history-summary-main {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
}
.srv-history-summary-label {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.srv-history-summary-today {
  font-size: 22px; font-weight: 600; color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.srv-history-summary-today.ok  { color: var(--ok, #4caf50); }
.srv-history-summary-today.bad { color: var(--bad, #e64a4a); }
.srv-history-summary-side {
  display: flex; align-items: center; gap: 14px;
}
.srv-history-summary-avg { font-size: 12px; }
.srv-history-summary-arrow { color: var(--text-3); font-size: 12px; }

.srv-history-expand {
  border: 1px solid var(--line-soft);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: rgba(255,255,255,0.012);
  padding: 14px 20px 18px;
  margin-top: -1px;
}
.srv-history-expand[hidden] { display: none; }
.srv-history-expand-head {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 10px;
}

/* ── Server hero: clicks pill (history dropdown inside hero) ─────────────── */
/* Заменяет отдельную секцию .srv-history — теперь история раскрывается   */
/* прямо из числа кликов в hero-meta, как часть единого блока сервера.    */
.hero-clicks-pill {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 2px 8px; margin: 0;
  background: none; border: 1px dashed transparent; border-radius: 6px;
  color: inherit; font: inherit; cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.hero-clicks-pill:hover {
  border-color: var(--line);
  background: rgba(255,255,255,0.025);
}
.hero-clicks-pill[aria-expanded="true"] {
  border-color: var(--line);
  background: rgba(255,255,255,0.04);
}
.hero-clicks-pill b { font-variant-numeric: tabular-nums; }
.hero-clicks-avg { font-size: 11px; }
.hero-clicks-arrow { color: var(--text-3); font-size: 11px; margin-left: 2px; }

.hero-clicks-history {
  margin-top: 14px; padding: 14px 16px;
  background: rgba(255,255,255,0.012);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.hero-clicks-history[hidden] { display: none; }

/* ── Косметика истории кликов (v21): связь с числом + анимация + бары ───── */
.hero-clicks-history {
  margin-top: 8px;
  background: rgba(214,168,79,0.05);
  border: 1px solid rgba(214,168,79,0.16);
  border-left: 3px solid #d6a84f;            /* жёлтый акцент = связь с кликами */
  transform-origin: top center;
}
.hero-clicks-history:not([hidden]) {
  animation: srvHistReveal 340ms ease-out both;   /* «вырастает» из числа */
}
@keyframes srvHistReveal {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
/* бары: тоньше, скруглённее, градиент тёмный→светлый, рост справа-налево + stagger */
.srv-history-bar { height: 6px; border-radius: 6px; }
.srv-history-bar-fill {
  width: var(--fill-w, 0%);
  background: linear-gradient(90deg, #b8862f 0%, #f3cf7a 100%);
  border-radius: 6px;
  transform-origin: right center;
  animation: srvBarFill 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes srvBarFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (hover: hover) {
  .srv-history-row:hover .srv-history-bar-fill { filter: brightness(1.22); }
}
.srv-history-clicks { font-size: 11px; }     /* цифры справа чуть мельче */
@media (prefers-reduced-motion: reduce) {
  .hero-clicks-history:not([hidden]), .srv-history-bar-fill { animation: none; }
}

/* ── v22: плавное закрытие + компактность ──────────────────────────────── */
.hero-clicks-history.is-closing {
  animation: srvHistHide 280ms ease-in both;     /* сжимается обратно в число */
}
@keyframes srvHistHide {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
.hero-clicks-history .srv-history-row {
  grid-template-columns: 78px 1fr 64px 46px;
  padding: 3px 8px;
}
.hero-clicks-history .srv-history-body { gap: 2px; }
.hero-clicks-history .srv-history-bar { height: 4px; border-radius: 4px; }
.hero-clicks-history .srv-history-bar-fill { border-radius: 4px; }
.hero-clicks-history .srv-history-day { font-size: 11px; }
.hero-clicks-history .srv-history-clicks { font-size: 11px; }
.hero-clicks-history .srv-history-delta { font-size: 10px; }
@media (prefers-reduced-motion: reduce) {
  .hero-clicks-history.is-closing { animation: none; }
}
.hero-clicks-history .srv-history-expand-head {
  margin-bottom: 10px;
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-clicks-history .srv-history-body {
  display: flex; flex-direction: column; gap: 2px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
}