/* Аналитика — интерфейс. Тот же стиль, что у панели и облака: тёмная/светлая тема, карточки, таблицы. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg:#f3f5f9; --bg2:#ffffff; --bg3:#eef1f7; --line:#dbe1ec; --tx:#1b2333; --tx2:#566178; --tx3:#8a94a8;
  --acc:#2a62e6; --acc2:#2a62e6; --ok:#10a35a; --warn:#c98300; --err:#d83a4a;
  --shadow:0 8px 24px rgba(30,40,70,.12);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0b0f17; --bg2:#121826; --bg3:#182033; --line:#243049; --tx:#e6ebf5; --tx2:#9aa7bf; --tx3:#66738d;
  --acc:#4c8dff; --acc2:#7aa9ff; --ok:#2fd27f; --warn:#f2b441; --err:#ff5d6c;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--tx); font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
input, button, select { font:inherit; color:inherit; }
.muted { color:var(--tx2); }
.btn { border:1px solid var(--line); background:var(--bg3); padding:9px 14px; border-radius:10px; cursor:pointer; }
.btn.primary { background:var(--acc); border-color:var(--acc); color:#fff; }
.btn.danger { color:var(--err); }
.btn:disabled { opacity:.6; cursor:default; }
.btn.sm { padding:6px 10px; font-size:12.5px; }

/* вход */
.login { min-height:100vh; display:grid; place-items:center; padding:20px; }
.login-card { width:100%; max-width:360px; background:var(--bg2); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; }
.login-card .logo { width:52px; height:52px; border-radius:14px; background:var(--acc); color:#fff; display:grid; place-items:center; }
.login-card h1 { margin:6px 0 0; font-size:22px; }
.login-card p { margin:0 0 8px; }
.login-card input { padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--bg); }
.err { color:var(--err); font-size:13px; }

/* каркас */
.app { min-height:100vh; display:flex; flex-direction:column; }
.top { display:flex; align-items:center; gap:14px; padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px; background:var(--bg2); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:8px; color:var(--acc2); }
.brand b { color:var(--tx); font-size:15px; }
.site-select { padding:8px 12px; border-radius:9px; border:1px solid var(--line); background:var(--bg3); min-width:160px; }
.range-btns { display:flex; gap:4px; background:var(--bg3); border-radius:9px; padding:3px; }
.range-btns button { background:none; border:0; padding:6px 10px; border-radius:7px; color:var(--tx2); cursor:pointer; font-size:12.5px; }
.range-btns button.on { background:var(--acc); color:#fff; }
.tabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tabs button { background:none; border:0; padding:8px 12px; border-radius:9px; color:var(--tx2); cursor:pointer; white-space:nowrap; }
.tabs button.on { background:var(--bg3); color:var(--tx); }
.top-actions { display:flex; gap:6px; margin-left:auto; }
.icon-btn { background:var(--bg3); border:1px solid var(--line); width:34px; height:34px; border-radius:9px; cursor:pointer; }
.content { flex:1; padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px)); max-width:1400px; width:100%; margin:0 auto; }

/* карточки */
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.grid.wide { grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); }
.card { background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:14px 16px; min-width:0; }
.card h3 { margin:0 0 10px; font-size:13px; font-weight:600; color:var(--tx2); text-transform:uppercase; letter-spacing:.04em; }
.kpi { font-size:26px; font-weight:650; letter-spacing:-.02em; }
.kpi small { font-size:12.5px; color:var(--tx2); font-weight:400; margin-left:4px; }
.sub { color:var(--tx2); font-size:12.5px; margin-top:2px; }
.spark { width:100%; height:120px; margin-top:4px; display:block; }
.bar-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; }
.bar-row .name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row .track { flex:1.4; height:7px; background:var(--bg3); border-radius:5px; overflow:hidden; }
.bar-row .track i { display:block; height:100%; background:var(--acc); border-radius:5px; }
.bar-row .val { width:46px; text-align:right; color:var(--tx2); font-variant-numeric:tabular-nums; }
.pill { display:inline-block; padding:1px 8px; border-radius:20px; font-size:12px; background:var(--bg3); color:var(--tx2); border:1px solid var(--line); }
.pill.ok { color:var(--ok); border-color:rgba(16,163,90,.35); }
.pill.live { color:#fff; background:var(--err); border:0; animation:pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity:.55; } }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--tx2); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
.scroll-x { overflow-x:auto; }
.sec-title { margin:20px 2px 10px; font-size:15px; font-weight:600; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.field { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.field label { font-size:12.5px; color:var(--tx2); }
.field input, .field select { padding:9px 11px; border-radius:9px; border:1px solid var(--line); background:var(--bg); }
.mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; word-break:break-all; }
.snippet { background:var(--bg3); border-radius:9px; padding:10px 12px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; white-space:pre-wrap; word-break:break-all; }
.toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--bg3); border:1px solid var(--line); padding:10px 16px; border-radius:10px; box-shadow:var(--shadow); z-index:50; }
.empty { text-align:center; padding:50px 20px; color:var(--tx2); }
.empty .big { font-size:40px; margin-bottom:8px; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; padding:16px; z-index:60; }
.modal-card { background:var(--bg2); border:1px solid var(--line); border-radius:16px; padding:20px; width:100%; max-width:420px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:8px; }
.modal-card h3 { margin:0; font-size:17px; }

@media (max-width:820px) {
  .top { padding:10px 12px; }
  .content { padding:12px; }
  .site-select { flex:1; min-width:0; }
}