/* Аналитика «Система ОП» — тёмная тема. Только суть: посещения + досматриваемость, крупно. */
:root{
  --red:#e4002b; --red-soft:#ff6d86; --red-hot:#ff2247;
  --bg:#070a10; --card:#0d121b; --card2:#111725;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.05);
  --txt:#eef2f8; --grey:#8b96a6; --grey2:#6f7b8b;
  --green:#2fd177; --yellow:#f5c451;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--txt);
  font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.wrap{height:100dvh;max-width:1680px;margin:0 auto;padding:16px 20px;
  display:flex;flex-direction:column;gap:14px;overflow:hidden}

/* плашка «демо-данные» */
.demo-banner{background:rgba(245,196,81,.12);border:1px solid rgba(245,196,81,.4);
  color:#f5c451;border-radius:12px;padding:10px 16px;font-size:13px;line-height:1.4;flex:0 0 auto}
.demo-banner b{color:#ffd98a;font-weight:800}
.demo-banner[hidden]{display:none}
.chart-empty{color:var(--grey);font-size:12px;padding:16px 0;text-align:center}

/* ---------- шапка ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;flex:0 0 auto}
.top-l{display:flex;flex-direction:column;gap:4px;min-width:0}
.top h1{font-size:22px;font-weight:900;margin:0;letter-spacing:-.3px}
.top .sub{color:var(--grey);font-size:12px;font-weight:600;margin:0}
.live{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-soft);width:max-content;
  background:rgba(228,0,43,.12);border:1px solid rgba(228,0,43,.35);padding:5px 12px;border-radius:20px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}
.periods{display:flex;gap:8px;flex-wrap:wrap}
.periods button{font-family:inherit;font-size:13px;font-weight:700;color:var(--grey);cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px;padding:9px 16px;transition:.16s}
.periods button:hover{color:#fff;border-color:rgba(228,0,43,.4)}
.periods button[aria-pressed="true"]{color:#fff;background:rgba(228,0,43,.14);border-color:rgba(228,0,43,.7)}

/* ---------- две зоны ---------- */
.board{flex:0 0 auto;display:flex;flex-direction:column;gap:14px}
.zone{background:linear-gradient(165deg,var(--card),var(--bg));border:1px solid var(--line);
  border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:16px;min-height:0}
.z-visits{flex:0 0 auto}
.z-watch{flex:0 0 auto}
.zone-h{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;color:var(--txt)}
.zone-h .dot{width:23px;height:23px;flex:0 0 auto;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:900;color:#fff;background:linear-gradient(140deg,var(--red-hot),#c30025)}

/* ---------- посещения (крупные числа) ---------- */
.hero-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.hero{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:15px;padding:18px 20px}
.hero.accent{background:linear-gradient(160deg,rgba(228,0,43,.16),rgba(228,0,43,.03));border-color:rgba(228,0,43,.42)}
.hero u{display:block;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);line-height:1.3}
.hero b{display:block;font-size:38px;font-weight:900;line-height:1;margin-top:12px;letter-spacing:-1px}
.hero s{display:block;text-decoration:none;font-size:12.5px;font-weight:700;color:var(--red-soft);margin-top:9px}
.hero s.calm{color:var(--grey2)}

/* ---------- досматриваемость: воронка + плитки ---------- */
.watch-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;align-items:start}
.watch-fn,.watch-tiles{display:flex;flex-direction:column;gap:12px}
.col-cap{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--grey2)}

.fn{display:flex;flex-direction:column;gap:12px}
.fn-row{display:grid;grid-template-columns:minmax(150px,1fr) 1.5fr 96px;align-items:center;gap:14px}
.fn-lbl{font-size:13.5px;font-weight:700;color:#cbd3df;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fn-bar{height:26px;border-radius:8px;background:rgba(255,255,255,.05);position:relative;overflow:hidden}
.fn-bar i{position:absolute;inset:0 auto 0 0;border-radius:8px;background:linear-gradient(90deg,var(--red-hot),#a8001f)}
.fn-val{text-align:right;font-size:15px;font-weight:800;white-space:nowrap}
.fn-val em{font-style:normal;color:var(--grey);font-weight:700;font-size:12px;margin-left:8px}

/* плитки удержания (2×2, крупно) */
.tiles{display:grid;gap:14px}
.tiles.c2{grid-template-columns:repeat(2,1fr)}
.tile{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  display:flex;flex-direction:column;justify-content:center}
.tile.hot{border-color:rgba(228,0,43,.42);background:rgba(228,0,43,.07)}
.tile u{display:block;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grey);line-height:1.3}
.tile b{display:block;font-size:32px;font-weight:900;line-height:1;margin-top:9px}
.tile s{display:block;text-decoration:none;font-size:11.5px;font-weight:700;color:var(--red-soft);margin-top:7px}
.tile s.calm{color:var(--grey2)}

/* ---------- откуда пришли + города ---------- */
.z-geo{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.geo-card{gap:12px;padding:14px 18px}
.brk{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.brk li{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:13.5px;font-weight:700}
.brk li span{color:#cbd3df;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brk li b{font-weight:900;font-size:14.5px}
.brk li i{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}
.brk li i u{position:absolute;inset:0 auto 0 0;text-decoration:none;border-radius:2px;
  background:linear-gradient(90deg,var(--red-hot),rgba(228,0,43,.35))}
.brk-empty{color:var(--grey2);font-size:12px;font-weight:600}

/* ---------- узкие экраны — столбик со скроллом ---------- */
@media(max-width:900px){
  .wrap{height:auto;overflow:visible;display:block;padding:16px}
  .top{margin-bottom:14px}
  .board{display:block}
  .zone{margin-bottom:14px}
  .hero-row{grid-template-columns:repeat(2,1fr)}
  .watch-grid{grid-template-columns:1fr;gap:16px}
  .z-geo{grid-template-columns:1fr}
  .hero b{font-size:30px}
}