/* Вариант Б — игра цветов по референсам: чёрно-зелёная глубина, кислотный лайм, мягкое свечение.
   Вся типографика и все отступы берутся из переменных ниже: размеры шрифта — шкала из восьми ступеней, отступы — шаг 4 пикселя. */
:root {
  --bg: #050806;
  --bg-2: #08100a;
  --surface: #0d1a11;
  --surface-2: #132418;
  --surface-3: #1a3220;
  --line: rgba(190, 255, 60, 0.13);
  --line-2: rgba(190, 255, 60, 0.24);
  --text: #f4f8ef;
  --text-2: #b0c4b3;
  --text-3: #8ea593;
  --lime: #bdff1f;
  --lime-2: #d8ff5c;
  --mint: #8ef05a;
  --green: #2fbf3a;
  --forest: #0f3a1c;
  --lime-ink: #0a1500;
  --lime-soft: rgba(189, 255, 31, 0.13);
  --lime-glow: rgba(189, 255, 31, 0.38);
  --warn: #ffd84d;
  --warn-soft: rgba(255, 216, 77, 0.13);
  --bad: #ff8576;
  --bad-soft: rgba(255, 133, 118, 0.14);
  --info: #86dcff;
  --info-soft: rgba(134, 220, 255, 0.13);
  --radius: 22px;
  --radius-s: 14px;
  --f-head: "Manrope", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* шкала шрифтов: меньше 12 не бывает, между ступенями ничего не придумываем */
  --fs-2xs: 12px;   /* метки капсом, значки, счётчики */
  --fs-xs: 13px;    /* подписи, подсказки, названия полей */
  --fs-sm: 14px;    /* основной текст и кнопки */
  --fs-md: 16px;    /* название в карточке, крупный основной текст */
  --fs-lg: 18px;    /* заголовок блока (h3) */
  --fs-xl: 22px;    /* вторичные крупные значения */
  --fs-2xl: 28px;   /* заголовок страницы на телефоне, крупные цифры */
  --fs-3xl: 34px;   /* заголовок страницы на компьютере */
  --fw-regular: 400;
  --fw-medium: 600; /* названия, подписи полей, пункты меню */
  --fw-bold: 700;   /* заголовки, кнопки, значки */
  --lh-body: 1.5;
  --lh-snug: 1.35;  /* подписи в несколько строк, названия */
  --lh-head: 1.2;   /* заголовки */
  --lh-tight: 1.1;  /* крупные цифры */

  /* шкала отступов: шаг 4 пикселя */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --gutter: var(--sp-4);       /* боковое поле страницы на телефоне */
  --h-control: 48px;           /* высота кнопок и полей */
  --h-control-s: 44px;         /* высота малых кнопок: ниже 44 для пальца нельзя */
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: var(--fs-sm); line-height: var(--lh-body); -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: var(--fw-bold); letter-spacing: -0.02em; line-height: var(--lh-head); text-wrap: balance; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
/* переносы: в обычном тексте без одиноких слов в конце строки, в коротких подписях строки выравниваются по длине */
body { text-wrap: pretty; }
.hint, .cell-sub, .sub, .kpi .l, .kpi .d, .sum-main .d, .o-sub, .set .t span, .step .hint { text-wrap: balance; }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.acid { color: var(--lime); }

/* каркас */
.app { display: flex; flex-wrap: wrap; min-height: 100%;
  background:
    radial-gradient(760px 520px at 104% -6%, rgba(189,255,31,0.30), transparent 62%),
    radial-gradient(820px 560px at -8% 108%, rgba(47,191,58,0.30), transparent 60%),
    linear-gradient(180deg, #070c08, #050806); }
.side { flex: 0 0 256px; padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1); background: linear-gradient(180deg, rgba(15,40,22,0.55), rgba(6,12,8,0.7)); border-right: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-1) var(--sp-3) var(--sp-5); font-family: var(--f-head); font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: -0.02em; line-height: 1; }
.brand-mark { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; display: block; flex: none; }
.nav-sec { padding: var(--sp-5) var(--sp-3) var(--sp-2); font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); line-height: 1; }
.nav-i { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--h-control-s); padding: 0 var(--sp-4); border-radius: 999px; color: var(--text-2); font-weight: var(--fw-medium); line-height: var(--lh-snug); border: 1px solid transparent; }
.nav-i:hover { background: rgba(190,255,60,0.07); color: var(--text); }
.nav-i.on { background: var(--lime-soft); color: var(--lime); border-color: rgba(189,255,31,0.4); }
.nav-i .cnt { margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-2xs); line-height: 1; opacity: 0.75; }
.side-foot { margin-top: auto; padding: var(--sp-4) var(--sp-3) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-3); }
.main { flex: 999 1 560px; min-width: 0; padding: var(--sp-7) var(--sp-8) var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-6); }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); justify-content: space-between; }
.top .sub { color: var(--text-2); margin-top: var(--sp-1); max-width: 64ch; }
.top-r { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* карточки: тёмное стекло с зелёной кромкой */
.card { background: linear-gradient(160deg, rgba(26,50,32,0.72), rgba(9,18,12,0.86)); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6); box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
.card-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.grid { display: grid; gap: var(--sp-5); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-wide { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.kpi { background: linear-gradient(160deg, rgba(26,50,32,0.72), rgba(9,18,12,0.86)); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.kpi .l { color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.kpi .v { font-family: var(--f-head); font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: var(--lh-tight); }
.kpi .d { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-3); }
.kpi.hot { background: linear-gradient(135deg, var(--lime) 0%, var(--mint) 100%); border-color: transparent; box-shadow: 0 14px 44px rgba(189,255,31,0.28); }
.kpi.hot .l, .kpi.hot .d { color: rgba(10,21,0,0.72); }
.kpi.hot .v { color: var(--lime-ink); }

/* кнопки и поля */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--h-control); padding: 0 var(--sp-6); border-radius: 999px; border: 1px solid var(--line-2); background: rgba(190,255,60,0.06); color: var(--text); font: var(--fw-bold) var(--fs-sm)/1.2 var(--f-body); text-align: center; cursor: pointer; }
.btn svg { flex: none; }
.btn:hover { background: rgba(190,255,60,0.12); }
.btn.pri { background: linear-gradient(90deg, var(--lime), var(--mint)); border-color: transparent; color: var(--lime-ink); box-shadow: 0 8px 28px rgba(189,255,31,0.32); }
.btn.pri:hover { filter: brightness(1.06); }
.btn.ghost { background: transparent; }
.btn.dng { color: var(--bad); border-color: rgba(255,133,118,0.4); background: var(--bad-soft); }
.btn.sm { min-height: var(--h-control-s); padding: 0 var(--sp-4); font-size: var(--fs-xs); }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-2); font-weight: var(--fw-medium); }
.inp { min-height: var(--h-control); padding: 0 var(--sp-4); border-radius: var(--radius-s); border: 1px solid var(--line-2); background: rgba(3,8,5,0.7); color: var(--text); font: var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--f-body); width: 100%; }
.inp:focus { outline: 2px solid var(--lime); outline-offset: 1px; box-shadow: 0 0 0 6px rgba(189,255,31,0.12); }
.inp::placeholder { color: var(--text-3); }
.search { position: relative; flex: 1 1 240px; }
.search .inp { padding-left: var(--sp-9); }
.search svg { position: absolute; left: var(--sp-4); top: 15px; }
.hint { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-3); }

.badge { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: 999px; font-size: var(--fs-xs); line-height: 1.5; font-weight: var(--fw-bold); white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.badge.ok { background: rgba(142,240,90,0.14); color: var(--mint); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.info { background: var(--info-soft); color: var(--info); }

.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tab { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--h-control-s); padding: 0 var(--sp-4); border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font-weight: var(--fw-medium); line-height: 1.2; }
.tab:hover { background: rgba(190,255,60,0.07); color: var(--text); }
.tab.on { background: var(--lime-soft); border-color: var(--lime); color: var(--lime); font-weight: var(--fw-bold); }
.tab .n { font-family: var(--f-mono); font-size: var(--fs-2xs); opacity: 0.8; }

.tbl-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; min-width: 680px; }
table.t th { text-align: left; font-size: var(--fs-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: var(--fw-bold); line-height: 1.2; padding: 0 var(--sp-4) var(--sp-3); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
table.t td { padding: var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: none; }
table.t tbody tr:hover td { background: rgba(190,255,60,0.04); }
table.t td.r, table.t th.r { text-align: right; }
.cell-main { font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.cell-sub { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--text-3); margin-top: var(--sp-1); }

.prog { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; min-width: 90px; }
.prog > i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--lime)); border-radius: 999px; box-shadow: 0 0 12px var(--lime-glow); }
.prog.warn > i { background: var(--warn); box-shadow: none; }
.prog.bad > i { background: var(--bad); box-shadow: none; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.sp { margin-left: auto; }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--text-2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: var(--sp-2); }
.legend i.dot-lime { background: #bdff1f; } .legend i.dot-green { background: #2fbf3a; }
.divider { height: 1px; background: var(--line); }
.chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--surface-3); color: var(--text); font-size: var(--fs-xs); line-height: var(--lh-snug); font-family: var(--f-mono); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }

@media (max-width: 900px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-wide { grid-template-columns: minmax(0, 1fr); }
  .main { padding: var(--sp-5) var(--gutter) var(--sp-7); }
  .side { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--line); }
  .side-foot { display: none; }
}
/* формы: индикатор пароля, плашки */
.inp.err { border-color: var(--bad); box-shadow: 0 0 0 4px rgba(255,133,118,0.12); }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
.meter i { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); }
.meter i.on { background: var(--lime); box-shadow: 0 0 10px var(--lime-glow); }
.meter i.mid { background: var(--warn); }
.meter i.low { background: var(--bad); }
.callout { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4); border-radius: var(--radius-s); border: 1px solid var(--line-2); background: rgba(3,8,5,0.55); }
.callout b { display: block; line-height: var(--lh-snug); }
.callout.ok { background: var(--lime-soft); border-color: rgba(189,255,31,0.4); }
.callout.warn { background: var(--warn-soft); border-color: rgba(255,216,77,0.4); }
.callout.bad { background: var(--bad-soft); border-color: rgba(255,133,118,0.45); }
.callout.info { background: var(--info-soft); border-color: rgba(134,220,255,0.4); }
.pill-soon { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: var(--sp-1) var(--sp-2); white-space: nowrap; }
@media (max-width: 560px) {
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }      /* g4 остаётся по два в ряд: короткие цифры в столбик растягивают страницу зря */
  .g4 { gap: var(--sp-3); }
}