/* Панель praxo.pro. Цвета бренда — с заглушки praxo.pro; графики и статусы — по правилам dataviz (роли --s1, --s2, --good…). */
:root {
  color-scheme: light;
  --bg: #f3f6fa; --surface: #ffffff; --fg: #0f1d2b; --muted: #5b6b7b; --line: #dce6f0; --line2: #c6d3e0;
  --brand1: #4099DA; --brand2: #0064AC; --link: #0064AC;
  --s1: #2a78d6; --s2: #eb6834; --grid: #e6ecf2; --axis: #c3c2b7; --tick: #6b7a89; --xhair: #5b6b7b;
  --good: #0ca30c; --warning: #fab219; --serious: #ec835a; --critical: #d03b3b; --info: #93a6b9;
  --errbg: #fdecec; --shadow: 0 1px 2px rgba(15, 29, 43, .06);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --bg: #0b141c; --surface: #12202c; --fg: #eaf2fa; --muted: #93a6b9; --line: #1f3549; --line2: #2b4660;
    --brand1: #5aaee8; --brand2: #3d9be0; --link: #7cc0f0;
    --s1: #3987e5; --s2: #d95926; --grid: #1c2e3e; --axis: #383835; --tick: #8fa1b3; --xhair: #93a6b9;
    --info: #5b6b7b; --errbg: #3a1d1d; --shadow: none;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b141c; --surface: #12202c; --fg: #eaf2fa; --muted: #93a6b9; --line: #1f3549; --line2: #2b4660;
  --brand1: #5aaee8; --brand2: #3d9be0; --link: #7cc0f0;
  --s1: #3987e5; --s2: #d95926; --grid: #1c2e3e; --axis: #383835; --tick: #8fa1b3; --xhair: #93a6b9;
  --info: #5b6b7b; --errbg: #3a1d1d; --shadow: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--link); }
h1 { font-size: 26px; margin: 8px 0 12px; }
h2 { font-size: 18px; margin: 0 0 10px; }
h3 { font-size: 15px; margin: 14px 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }

/* шапка */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 16px; background: var(--surface);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; color: var(--fg); text-decoration: none; }
.brand.big { font-size: 22px; margin-bottom: 14px; }
.lg1 { fill: var(--brand1); } .lg2 { fill: var(--brand2); }
.stagebadge { background: var(--warning); color: #0f1d2b; border-radius: 6px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.top nav { display: flex; gap: 4px; flex-wrap: wrap; }
.top nav a, .tabs a { padding: 6px 12px; border-radius: 8px; text-decoration: none; color: var(--fg); }
.top nav a[aria-current], .tabs a[aria-current] { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line2); font-weight: 600; }
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.who .role { color: var(--muted); }
.who form { margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; text-decoration: underline; }

main { max-width: 1240px; margin: 0 auto; padding: 12px 16px 40px; }
footer { max-width: 1240px; margin: 0 auto; padding: 0 16px 28px; color: var(--muted); font-size: 13px; }
.sec { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 0 0 16px; box-shadow: var(--shadow); }
.sec.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 12px 20px; }

/* статусы: всегда значок + текст, цвет не несёт смысл один */
.st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13.5px; }
.st .ic { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; }
.st-ok .ic { background: var(--good); }
.st-warn .ic { background: var(--warning); color: #0f1d2b; }
.st-serious .ic { background: var(--serious); color: #0f1d2b; }
.st-crit .ic { background: var(--critical); }
.st-info .ic { background: var(--info); }
.att { list-style: none; margin: 0; padding: 0; }
.att li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); }
.att li:first-child { border-top: 0; }
.att .st { min-width: 118px; }
.allok { margin: 0 0 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* плитки */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.tl { color: var(--muted); font-size: 13px; }
.tv { font-size: 28px; font-weight: 650; margin: 2px 0; }
.ts { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* карточки порталов */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; }
.ph { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ph a { font-weight: 600; text-decoration: none; }
.pn { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.pn b { color: var(--fg); font-weight: 600; }

/* таблицы */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.t th, table.t td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t thead th { color: var(--muted); font-weight: 600; font-size: 12.5px; white-space: normal; vertical-align: bottom; }
table.t tbody th { font-weight: 600; white-space: nowrap; }
table.t tbody th .small { display: block; font-weight: 400; }
table.t td.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.wide { min-width: 1500px; }
table.t td .small { display: block; margin-top: 2px; }

/* вкладки периода */
.tabs { display: flex; gap: 4px; margin: 0 0 12px; flex-wrap: wrap; }

/* графики */
figure.chart { margin: 0; min-width: 0; }
figure.chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
figure.chart h3 { margin: 0 0 6px; }
.legend { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; font-size: 13px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.plotwrap { position: relative; }
svg.plot { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
svg.plot:focus { outline: 2px solid var(--brand1); outline-offset: 2px; border-radius: 4px; }
.grid { stroke: var(--grid); stroke-width: 1; }
.axis { stroke: var(--axis); stroke-width: 1; }
.thresh { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.tick, .dlabel { fill: var(--tick); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.dlabel { fill: var(--muted); }
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.s1 { stroke: var(--s1); } .s2 { stroke: var(--s2); }
.legend line { stroke-width: 2; }
.xhair { stroke: var(--xhair); stroke-width: 1; }
.tip { position: absolute; top: 0; pointer-events: none; background: var(--surface); border: 1px solid var(--line2); border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); white-space: nowrap; z-index: 2; }
.tip .tt { color: var(--muted); margin-bottom: 2px; }
.tip .tr { display: flex; align-items: center; gap: 6px; }
.tip .tr b { font-weight: 650; }
.tip .k { width: 12px; height: 2px; display: inline-block; }
.tip .k.s1 { background: var(--s1); } .tip .k.s2 { background: var(--s2); }
.empty { color: var(--muted); }
.note { color: var(--muted); font-size: 13px; margin: 6px 0 0; }
details.tbl { margin-top: 6px; font-size: 13px; }
details.tbl summary { cursor: pointer; color: var(--link); }
details.tbl table { border-collapse: collapse; margin-top: 6px; }
details.tbl td, details.tbl th { padding: 3px 10px 3px 0; text-align: left; font-variant-numeric: tabular-nums; }

/* вход */
body.plainpage { display: grid; place-items: start center; min-height: 100vh; padding: 6vh 16px 32px; }
.card.auth { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px; box-shadow: var(--shadow); }
.card.auth h1 { font-size: 22px; }
.form { display: grid; gap: 12px; margin: 12px 0; }
.form.inline { margin: 0; }
.form label { display: grid; gap: 4px; font-size: 14px; color: var(--muted); }
.form input { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 8px; background: var(--bg); color: var(--fg); }
.form input:focus { outline: 2px solid var(--brand1); outline-offset: 1px; }
.form button[type=submit]:not(.link) { font: inherit; font-weight: 600; padding: 10px 14px; border: 0; border-radius: 8px; background: var(--brand2); color: #fff; cursor: pointer; }
.err { background: var(--errbg); border-left: 3px solid var(--critical); padding: 8px 12px; border-radius: 6px; }
.steps { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.qr { background: #fff; border-radius: 10px; padding: 8px; width: max-content; }
.qr img { display: block; }
.key code { font-size: 15px; letter-spacing: .5px; word-break: break-all; }

@media (max-width: 640px) {
  .top { position: static; }
  h1 { font-size: 22px; }
  .who { margin-left: 0; width: 100%; }
  .tv { font-size: 24px; }
  .att li { flex-direction: column; gap: 2px; }
}
@media (forced-colors: active) { .st .ic { border: 1px solid CanvasText; } }