/* Демо отчётов (/demo): тёмная витрина для руководителя. Цвета серий проверены для фона карточек #111c2e. */
:root {
  color-scheme: dark;
  --bg: #0a1322; --bg-2: #0d182b; --surface: #111c2e; --surface-2: #16233a; --surface-3: #1b2a45;
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .14);
  --ink: #eef2fb; --ink-2: #b7c1d6; --muted: #7f8aa3;
  --accent: #2dd4bf; --accent-ink: #062a26; --accent-soft: rgba(45, 212, 191, .14);
  --good: #0ca30c; --good-ink: #4ade80; --warn: #fab219; --bad: #d03b3b; --bad-ink: #f87171;
  --radius: 16px; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font);
  background-image: radial-gradient(1200px 500px at 15% -10%, rgba(45, 212, 191, .07), transparent 60%),
                    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, .08), transparent 60%); background-attachment: fixed; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* верхняя панель */
.dz-top { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 18px 0;
  background: rgba(10, 19, 34, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.dz-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 800; font-size: 17px; flex: none; }
.dz-logo .logo-mark svg { width: 30px; height: 30px; display: block; }
.dz-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 99px; border: 1px solid rgba(45, 212, 191, .45);
  color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; flex: none; }
.dz-dot, .dz-live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(45, 212, 191, .18); }
.dz-tabs { order: 3; flex-basis: 100%; display: flex; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0;
  padding: 2px 0 10px; }
.dz-tabs::-webkit-scrollbar { display: none; }
.dz-tabs a { padding: 8px 14px; border-radius: 99px; text-decoration: none; color: var(--ink-2); font-weight: 600; white-space: nowrap;
  transition: background-color .15s, color .15s; }
.dz-tabs a:hover { background: var(--surface-2); color: var(--ink); }
.dz-tabs a.on { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 22px -10px rgba(45, 212, 191, .8); }
.dz-right { display: flex; align-items: center; gap: 12px; flex: none; margin-left: auto; }
.dz-upd { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.dz-langs { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.dz-langs button { border: 0; background: none; padding: 4px 8px; border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.dz-langs button.on { background: var(--surface-3); color: var(--ink); }
.dz-cta { padding: 8px 14px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #14b8a6); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 13px; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(99, 102, 241, .9); }

/* заголовок и фильтры */
.dz-main { max-width: 1440px; margin: 0 auto; padding: 22px 20px 90px; }
.dz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dz-titles h1 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.dz-sub { margin-top: 4px; color: var(--accent); font-size: 13px; }
.dz-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dz-filters.dz-fc .dz-presets, .dz-filters.dz-fc .dz-dates { opacity: .45; }
.dz-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.dz-seg button { border: 0; background: none; padding: 6px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.dz-seg button:hover { color: var(--ink); background: rgba(255, 255, 255, .04); }
.dz-seg button.on { background: var(--accent); color: var(--accent-ink); }
.dz-dates { display: inline-flex; gap: 6px; }
.dz-date { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
  font-size: 12px; color: var(--muted); }
.dz-date input { border: 0; background: var(--surface-2); border-radius: 8px; padding: 5px 7px; font-size: 12.5px; color: var(--ink); color-scheme: dark; }
.dz-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.dz-btn:hover { border-color: var(--line-2); color: var(--ink); }
.dz-dd { position: relative; }
.dz-dd-t { color: var(--ink); }
.dz-dd-v { color: var(--accent); }
.dz-dd-v.on { color: var(--warn); }
.dz-caret { color: var(--muted); font-size: 10px; }
.dz-dd-p { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 270px; max-height: 360px; overflow: auto; padding: 6px;
  border-radius: 14px; background: #0f1a2c; border: 1px solid var(--line-2); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8); }
.dz-dd.open .dz-dd-p { display: block; }
.dz-dd-all { width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 9px; color: var(--accent); font-weight: 700; cursor: pointer; }
.dz-dd-all:hover, .dz-dd-row:hover { background: var(--surface-2); }
.dz-dd-row { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: 13px; }
.dz-dd-row input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
.dz-dd-row span { flex: 1; }
.dz-only { border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; padding: 2px 6px; border-radius: 6px; opacity: 0; }
.dz-dd-row:hover .dz-only { opacity: 1; }
.dz-only:hover { color: var(--accent); background: var(--accent-soft); }
.dz-reset { color: var(--ink-2); }

/* фильтры страницы */
.dz-tabbar { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 16px 0 0; }
.dz-tb { display: inline-flex; align-items: center; gap: 8px; }
.dz-tb-l { color: var(--muted); font-size: 12px; }

/* показатели */
.dz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0 0; }
.dz-kpi { position: relative; overflow: hidden; padding: 16px 18px; border-radius: var(--radius); background: linear-gradient(160deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); }
.dz-kpi::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 191, .12), transparent 70%); pointer-events: none; }
.dz-kpi-l { color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dz-kpi-v { margin-top: 6px; font-size: clamp(19px, 1.65vw, 26px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: break-word; }
.dz-kpi-f { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; min-height: 22px; }
.dz-kpi-n { color: var(--muted); font-size: 12px; }
.dz-delta { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; }
.dz-delta.up { background: rgba(12, 163, 12, .16); color: var(--good-ink); }
.dz-delta.down { background: rgba(208, 59, 59, .16); color: var(--bad-ink); }
.dz-delta.flat { background: var(--surface-3); color: var(--ink-2); }

/* карточки */
.dz-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.dz-card { grid-column: span 12; min-width: 0; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.dz-card.s4 { grid-column: span 4; } .dz-card.s5 { grid-column: span 5; } .dz-card.s6 { grid-column: span 6; }
.dz-card.s7 { grid-column: span 7; } .dz-card.s8 { grid-column: span 8; }
.dz-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dz-card-h h2 { margin: 0; font-size: 15px; font-weight: 700; }
.dz-unit { color: var(--muted); font-size: 11.5px; text-align: right; }
.dz-chart { width: 100%; }

/* таблицы */
.dz-table-wrap { overflow-x: auto; margin: 0 -4px; }
.dz-table-wrap.scroll { max-height: 300px; overflow-y: auto; }
.dz-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.dz-table th { position: sticky; top: 0; z-index: 1; background: var(--surface); text-align: left; padding: 8px 8px; color: var(--muted); font-size: 11px;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dz-table th.num, .dz-table td.num { text-align: right; }
.dz-table th.sortable { cursor: pointer; user-select: none; }
.dz-table th.sortable:hover { color: var(--ink); }
.dz-table th.asc::after { content: " ▲"; color: var(--accent); }
.dz-table th.desc::after { content: " ▼"; color: var(--accent); }
.dz-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dz-table tbody tr:hover td { background: rgba(255, 255, 255, .025); }
.dz-table td b { display: block; font-weight: 700; }
.dz-table td small { display: block; color: var(--muted); font-size: 11.5px; }
.dz-table td.strong { font-weight: 800; }
.dz-table td.neg { color: var(--bad-ink); }
.dz-table td.pos { color: var(--ink); }
.dz-empty { text-align: center; color: var(--muted); padding: 24px !important; }
.dz-mini { display: block; height: 4px; margin-top: 5px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.dz-mini-f { display: block; height: 100%; border-radius: 4px; background: #3987e5; }
.dz-badge { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dz-badge.good { background: rgba(12, 163, 12, .16); color: var(--good-ink); }
.dz-badge.warn { background: rgba(250, 178, 25, .14); color: #fcd34d; }
.dz-badge.bad { background: rgba(208, 59, 59, .18); color: var(--bad-ink); }
.dz-badge.a { background: rgba(57, 135, 229, .2); color: #9ec5f4; }
.dz-badge.b { background: rgba(144, 133, 233, .2); color: #c4bdf7; }
.dz-badge.c { background: var(--surface-3); color: var(--ink-2); }
.dz-d { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.dz-d.up { color: var(--good-ink); } .dz-d.down { color: var(--bad-ink); }

/* подсказка графиков (ECharts): цвет серии — классом, без встроенных стилей */
.dz-tt { min-width: 150px; }
.tt-h { color: var(--muted); font-size: 11.5px; margin-bottom: 4px; }
.tt-r { display: flex; align-items: center; gap: 8px; line-height: 1.6; }
.tt-r b { color: var(--ink); font-weight: 700; }
.tt-r span { color: var(--ink-2); font-size: 12px; }
.tt-k { display: inline-block; width: 12px; height: 3px; border-radius: 2px; background: #888; }
.k3987e5 { background: #3987e5; } .kd95926 { background: #d95926; } .k199e70 { background: #199e70; } .kc98500 { background: #c98500; }
.kd55181 { background: #d55181; } .k008300 { background: #008300; } .k9085e9 { background: #9085e9; } .ke66767 { background: #e66767; }
.k0ca30c { background: #0ca30c; } .kfab219 { background: #fab219; } .kec835a { background: #ec835a; } .kd03b3b { background: #d03b3b; }
.ka32020 { background: #a32020; } .k2dd4bf { background: #2dd4bf; } .k86b6ef { background: #86b6ef; } .k7f8aa3 { background: #7f8aa3; }
.k4b5670 { background: #4b5670; }

/* низ и уведомление */
.dz-foot { margin-top: 26px; color: var(--muted); font-size: 12.5px; text-align: center; }
.dz-foot a { color: var(--accent); text-decoration: none; font-weight: 700; }
.dz-noscript { color: var(--ink-2); }
.dz-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 14px; background: #172742; border: 1px solid var(--line-2); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .8); }
.dz-toast button { border: 0; border-radius: 9px; padding: 6px 10px; background: var(--accent); color: var(--accent-ink); font-weight: 700; cursor: pointer; }

/* адаптив */
@media (max-width: 1200px) {
  .dz-upd { display: none; }
  .dz-card.s4, .dz-card.s5, .dz-card.s6, .dz-card.s7, .dz-card.s8 { grid-column: span 6; }
  .dz-card.s8 { grid-column: span 12; }
  .dz-card.s4 { grid-column: span 12; }
}
@media (max-width: 980px) {
  .dz-top { padding: 10px 14px 0; gap: 8px 10px; }
  .dz-tabs { justify-content: flex-start; }
  .dz-pill { display: none; }
  .dz-head { flex-direction: column; }
  .dz-filters { justify-content: flex-start; }
  .dz-card.s4, .dz-card.s5, .dz-card.s6, .dz-card.s7, .dz-card.s8 { grid-column: span 12; }
}
@media (max-width: 600px) {
  .dz-main { padding: 16px 12px 90px; }
  .dz-cta { display: none; }
  .dz-titles h1 { font-size: 21px; }
  .dz-presets { width: 100%; overflow-x: auto; }
  .dz-dates { width: 100%; }
  .dz-date { flex: 1; }
  .dz-date input { width: 100%; }
  .dz-dd-p { right: auto; left: 0; width: min(290px, calc(100vw - 30px)); }
  .dz-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dz-kpi { padding: 12px 14px; }
  .dz-kpi-v { font-size: 20px; }
  .dz-card { padding: 14px 12px; }
}
.dz-cta .ic { width: 15px; height: 15px; vertical-align: -3px; }