/* HLAR-MON. Все значения из DESIGN.md. Слои: canvas → l1 (раздел) → l2 (карточка) → l3 (строка). */
:root {
  --c-canvas: #0C0F12; --c-l1: #12161A; --c-l2: #181D22; --c-l3: #20262C;
  --c-text: #E6EBF0; --c-text-2: #9BA6B2; --c-text-3: #6B7682; --c-line: rgb(255 255 255 / 0.06);
  --c-ok: #5CCB98; --c-warn: #E9B04E; --c-crit: #FF6B5E; --c-none: #2A3138; --c-accent: #8CB6E3;
  --c-crit-wash: rgb(255 107 94 / 0.08); --c-warn-wash: rgb(233 176 78 / 0.08);
  --shadow-card: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 12px 32px -18px rgb(0 0 0 / 0.6);
  --shadow-bar: 0 10px 30px -12px rgb(0 0 0 / 0.55);
  color-scheme: dark;

  --f-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px;
  --r-section: 28px; --r-card: 20px; --r-inner: 12px; --r-control: 12px; --r-pill: 999px;

  --m-micro: 140ms; --m-small: 220ms; --m-medium: 320ms;
  --m-ease: cubic-bezier(0.2, 0, 0, 1); --m-ease-enter: cubic-bezier(0, 0, 0, 1); --m-ease-exit: cubic-bezier(0.3, 0, 1, 1);

  --edge: var(--s-7);

  /* интерактивный кит → роли DESIGN.md */
  --ui-focus-ring: var(--c-accent);
  --ui-highlight: rgb(255 255 255 / 0.10);
  --ui-row-hover: rgb(255 255 255 / 0.03);
  --ui-row-press: rgb(255 255 255 / 0.06);
  --ui-seg-track: transparent;
  --ui-seg-indicator: var(--c-l3);
}
@media (prefers-color-scheme: light) {
  :root {
    --c-canvas: #EEF1F4; --c-l1: #F7F9FB; --c-l2: #FFFFFF; --c-l3: #F0F3F6;
    --c-text: #12171C; --c-text-2: #4F5B67; --c-text-3: #7C8792; --c-line: rgb(16 24 32 / 0.08);
    --c-ok: #1F8A5B; --c-warn: #9A6A00; --c-crit: #C93A2E; --c-none: #DCE2E8; --c-accent: #2F6DB0;
    --c-crit-wash: rgb(201 58 46 / 0.06); --c-warn-wash: rgb(154 106 0 / 0.06);
    --shadow-card: 0 1px 2px rgb(16 24 32 / 0.04), 0 12px 32px -20px rgb(16 24 32 / 0.25);
    --shadow-bar: 0 10px 30px -14px rgb(16 24 32 / 0.25);
    --ui-highlight: rgb(0 0 0 / 0.06); --ui-row-hover: rgb(16 24 32 / 0.03); --ui-row-press: rgb(16 24 32 / 0.06);
    color-scheme: light;
  }
}
@media (max-width: 1023px) { :root { --edge: var(--s-6); } }
@media (max-width: 639px) { :root { --edge: var(--s-4); } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--c-canvas); color: var(--c-text); font: 400 15px/1.45 var(--f-ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.num { font-family: var(--f-num); font-variant-numeric: tabular-nums; font-size: 13px; line-height: 1.3; letter-spacing: 0; }
.muted { color: var(--c-text-2); }
.faint { color: var(--c-text-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── статус-метки: форма + цвет + слово ───────────────────────────────────── */
.mark { display: inline-block; flex: none; width: 10px; height: 10px; transition: background-color var(--m-small) var(--m-ease), color var(--m-small) var(--m-ease); }
.mark--ok { width: 8px; height: 8px; margin: 1px; border-radius: 50%; background: var(--c-ok); }
.mark--warn { background: var(--c-warn); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.mark--crit { width: 9px; height: 9px; margin: 0.5px; background: var(--c-crit); transform: rotate(45deg); border-radius: 1.5px; }
.mark--none { width: 8px; height: 8px; margin: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-text-3); }
.mark--off { width: 8px; height: 8px; margin: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--c-text-3); }
.t-ok { color: var(--c-ok); } .t-warn { color: var(--c-warn); } .t-crit { color: var(--c-crit); }

/* ── шапка ─────────────────────────────────────────────────────────────── */
.bar { position: sticky; top: 0; z-index: 20; padding: var(--s-3) var(--edge); background: color-mix(in srgb, var(--c-canvas) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
.bar__in { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: var(--s-4); }
.brand { display: flex; align-items: baseline; gap: var(--s-1); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.brand__dot { font-family: var(--f-num); font-weight: 500; font-size: 13px; color: var(--c-text-3); }
.nav { position: relative; display: flex; gap: var(--s-1); padding: var(--s-1); border-radius: var(--r-pill); background: var(--c-l1); margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav__ind { position: absolute; top: var(--s-1); bottom: var(--s-1); left: 0; border-radius: var(--r-pill); background: var(--c-l3); transform: translateX(var(--x, 0)); width: var(--w, 0); transition: transform 460ms var(--ui-spring-snap), width 460ms var(--ui-spring-snap); }
.nav a { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-4); border-radius: var(--r-pill); text-decoration: none; color: var(--c-text-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.nav a[aria-current="true"] { color: var(--c-text); }
.nav a .mark { width: 6px; height: 6px; }
.bar__side { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; }
.fresh { color: var(--c-text-3); font-size: 12px; }
.fresh--stale { color: var(--c-warn); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); height: 36px; min-width: 36px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-control); background: var(--c-l1); color: var(--c-text-2); text-decoration: none; font-size: 13px; font-weight: 500; cursor: pointer; }
.icon-btn svg { width: 16px; height: 16px; }
@media (max-width: 1023px) { .bar__in { flex-wrap: wrap; } .nav { order: 3; margin: 0; width: 100%; } .bar__side { margin-left: auto; } }
@media (max-width: 639px) { .icon-btn__label { display: none; } }

/* ── каркас ────────────────────────────────────────────────────────────── */
main { max-width: 1440px; margin: 0 auto; padding: var(--s-4) var(--edge) var(--s-9); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
main > *, .section > *, .status > * { min-width: 0; }
.section { grid-template-columns: minmax(0, 1fr); }
.section { display: grid; gap: var(--s-4); min-width: 0; }
.section__head { display: flex; align-items: baseline; gap: var(--s-3); padding: 0 var(--s-1); }
.section__head h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.section__head .meta { color: var(--c-text-3); font-size: 13px; }
.section__head .meta .num { font-size: 13px; }

.surface { background: var(--c-l1); border-radius: var(--r-section); padding: var(--s-2); }
.card { background: var(--c-l2); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--s-5); min-width: 0; transition: background-color var(--m-medium) var(--m-ease); }
.card--warn { background: linear-gradient(var(--c-warn-wash), var(--c-warn-wash)), var(--c-l2); }
.card--crit { background: linear-gradient(var(--c-crit-wash), var(--c-crit-wash)), var(--c-l2); }
@media (max-width: 639px) { .card { padding: var(--s-4); } }

/* ── статус ────────────────────────────────────────────────────────────── */
.status { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: var(--s-4); align-items: start; }
.status__main { padding: var(--s-6); }
.status__title { display: flex; align-items: center; gap: var(--s-3); margin: 0; font-size: 40px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.status__title .mark { transform-origin: center; }
.status__title .mark--ok { width: 14px; height: 14px; }
.status__title .mark--warn { width: 18px; height: 16px; }
.status__title .mark--crit { width: 15px; height: 15px; }
.status__facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-4); color: var(--c-text-2); font-size: 13px; }
.status__facts b { font-family: var(--f-num); font-weight: 500; color: var(--c-text); }
.problems { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.problem { border-radius: var(--r-inner); background: var(--c-l3); }
.problem summary { list-style: none; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 16px; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-inner); cursor: pointer; }
.problem summary::-webkit-details-marker { display: none; }
.problem__text { min-width: 0; }
.problem__since { color: var(--c-text-3); font-size: 12px; }
.problem__body { display: grid; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 10px + var(--s-3)); font-size: 13px; color: var(--c-text-2); }
.problem__body b { color: var(--c-text); font-weight: 500; }
.problem--enter { animation: problem-in var(--m-medium) var(--m-ease-enter) both; }
@keyframes problem-in { from { opacity: 0; transform: translateY(-8px); } }
.ui-chevron svg { width: 16px; height: 16px; color: var(--c-text-3); }

.host { padding: var(--s-5); display: grid; gap: var(--s-4); }
.host h3, .card h3 { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 600; }
.kv { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-2) var(--s-3); align-items: center; font-size: 13px; }
.kv .lbl { color: var(--c-text-2); }
.kv .val { text-align: right; font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.meter { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--c-l3); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--c-text-3); transition: width var(--m-medium) var(--m-ease); }
.meter--warn i { background: var(--c-warn); } .meter--crit i { background: var(--c-crit); }
@media (max-width: 1023px) { .status { grid-template-columns: minmax(0, 1fr); } .status__title { font-size: 32px; } }
@media (max-width: 639px) { .problem summary { grid-template-columns: 10px minmax(0, 1fr) 16px; } .problem__since { grid-column: 2; grid-row: 2; } .problem summary .ui-chevron { grid-column: 3; grid-row: 1; } }
@media (max-width: 639px) { .status__main { padding: var(--s-4); } .status__title { font-size: 28px; } }

/* ── проекты ───────────────────────────────────────────────────────────── */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
@media (max-width: 1279px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .projects { grid-template-columns: 1fr; } }
.proj { display: grid; gap: var(--s-4); }
.proj__head { display: flex; align-items: center; gap: var(--s-3); }
.proj__head h3 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj__state { font-size: 13px; font-weight: 500; }
.issues { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; font-size: 13px; }
.issues li { display: flex; gap: var(--s-2); align-items: baseline; }
.issues .mark { transform: translateY(1px); }

.strip { display: grid; grid-template-columns: repeat(96, minmax(0, 1fr)); gap: 2px; height: 20px; }
.strip i { border-radius: 2px; background: var(--c-none); transition: background-color var(--m-small) var(--m-ease); }
.strip i.s-ok { background: color-mix(in srgb, var(--c-ok) 55%, var(--c-none)); }
.strip i.s-crit { background: var(--c-crit); }
.strip__legend { display: flex; justify-content: space-between; margin-top: var(--s-1); color: var(--c-text-3); font-size: 11px; font-family: var(--f-num); }

.rows { display: grid; gap: 0; }
.rows details { border-top: 1px solid var(--c-line); }
.rows details:first-child { border-top: 0; }
.rows summary { list-style: none; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto 16px; align-items: center; gap: var(--s-3); min-height: 40px; padding: var(--s-2) var(--s-2); margin: 0 calc(var(--s-2) * -1); border-radius: var(--r-inner); cursor: pointer; font-size: 13px; }
.rows summary::-webkit-details-marker { display: none; }
.rows summary svg.ic { width: 16px; height: 16px; color: var(--c-text-3); }
.rows summary .val { display: flex; align-items: center; gap: var(--s-2); color: var(--c-text-2); }
.rows summary .val .num { color: var(--c-text); }
.sub { display: grid; gap: var(--s-1); padding: var(--s-1) 0 var(--s-3) calc(16px + var(--s-3)); }
.sub__row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); font-size: 13px; min-height: 24px; }
.sub__row .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub__row .meta { color: var(--c-text-3); }

/* ── виртуалки ─────────────────────────────────────────────────────────── */
.infra { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
@media (max-width: 1023px) { .infra { grid-template-columns: 1fr; } }
.vmtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.vmtable th { text-align: left; font-weight: 500; font-size: 12px; letter-spacing: 0.02em; color: var(--c-text-3); padding: 0 var(--s-3) var(--s-3); white-space: nowrap; }
.vmtable td { padding: var(--s-3); border-top: 1px solid var(--c-line); vertical-align: middle; }
.vmtable td:first-child, .vmtable th:first-child { padding-left: var(--s-2); }
.vmtable tr.is-problem td { background: var(--c-crit-wash); }
.vmname { display: grid; grid-template-columns: 10px auto; gap: 2px var(--s-2); align-items: center; }
.vmname b { font-weight: 600; }
.vmname .role { grid-column: 2; color: var(--c-text-3); font-size: 12px; }
.cellbar { display: grid; gap: var(--s-1); min-width: 96px; }
.cellbar .num { font-size: 12px; color: var(--c-text-2); }
.flag { display: inline-flex; align-items: center; gap: var(--s-1); padding: 2px var(--s-2); border-radius: var(--r-pill); background: var(--c-l3); color: var(--c-text-2); font-size: 12px; white-space: nowrap; }
.flag svg { width: 12px; height: 12px; }
.tablewrap { overflow-x: auto; }
@media (max-width: 759px) {
  .vmtable thead { display: none; }
  .vmtable, .vmtable tbody, .vmtable tr, .vmtable td { display: block; width: 100%; }
  .vmtable tr { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-2); border-top: 1px solid var(--c-line); }
  .vmtable td { border: 0; padding: 0; }
  .vmtable td:first-child { grid-column: 1 / -1; }
  .vmtable td[data-l]::before { content: attr(data-l); display: block; color: var(--c-text-3); font-size: 11px; margin-bottom: 2px; }
}

/* ── VPN, трафик, бэкапы ───────────────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); align-items: start; }
@media (max-width: 1023px) { .grid-3 { grid-template-columns: 1fr; } }
.big { display: flex; align-items: baseline; gap: var(--s-2); }
.big .num { font-size: 28px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--c-text); }
.big .unit { color: var(--c-text-2); font-size: 13px; }
.spark { display: block; width: 100%; height: 56px; }
.spark path.line { fill: none; stroke: var(--c-text-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark path.area { fill: color-mix(in srgb, var(--c-text-2) 10%, transparent); stroke: none; }
.spark circle { fill: var(--c-text); }
.list { display: grid; }
.list__row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--c-line); font-size: 13px; min-height: 40px; }
.list__row:first-child { border-top: 0; }
.list__row .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__row .right { display: flex; align-items: center; gap: var(--s-3); color: var(--c-text-2); }
.bars { display: flex; align-items: center; gap: var(--s-2); min-width: 120px; }
.bars .meter { flex: 1; }
.tag { font-family: var(--f-num); font-size: 11px; color: var(--c-text-3); padding: 1px 6px; border-radius: 6px; background: var(--c-l3); }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.card-title h3 { display: flex; align-items: center; gap: var(--s-2); }
.card-title h3 svg { width: 18px; height: 18px; color: var(--c-text-3); }

.trows { display: grid; }
.trow { display: grid; grid-template-columns: 10px minmax(0, 1fr) minmax(60px, 140px) 76px 64px 48px 64px; gap: var(--s-3); align-items: center; min-height: 40px; padding: var(--s-2) 0; border-top: 1px solid var(--c-line); font-size: 13px; }
.trow > :nth-child(n+4) { text-align: right; }
.trow .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow--head { min-height: 0; border-top: 0; padding-top: 0; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--c-text-3); }
@media (max-width: 639px) { .trow { grid-template-columns: 10px minmax(0, 1fr) 76px 64px; } .trow > :nth-child(3), .trow > :nth-child(6), .trow > :nth-child(7) { display: none; } }

/* ── загрузка и ошибки ─────────────────────────────────────────────────── */
.sk { border-radius: var(--r-inner); background: linear-gradient(90deg, var(--c-l2) 0%, var(--c-l3) 50%, var(--c-l2) 100%); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.banner { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-inner); background: var(--c-warn-wash); color: var(--c-text); font-size: 13px; }
.banner[hidden] { display: none; }
.fade-in { animation: fade var(--m-medium) var(--m-ease-enter) both; }
@keyframes fade { from { opacity: 0; } }
footer { max-width: 1440px; margin: 0 auto; padding: 0 var(--edge) var(--s-8); color: var(--c-text-3); font-size: 12px; display: flex; gap: var(--s-4); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .problem--enter, .fade-in { animation: fade var(--m-small) linear both; }
  .sk { animation: none; }
  .nav__ind { transition-duration: 0.01ms; }
}