/* Панель онлайн-маркетинга Estee.
   Визуальный язык намеренно НЕ такой, как у дашборда клиник (плотные таблицы)
   и не как у консоли агентов (тёмная техническая): здесь витрина — тёплый
   светлый фон, воздух, крупные числа, тонкие линии. Просьба Рустама 31.08. */

:root{
  --bg:#faf9f7; --card:#fff; --ink:#1a1a18; --ink-2:#6b6a64; --ink-3:#a3a199;
  --line:#e8e5df; --accent:#6b7b5e; --accent-soft:#eef1ea;
  --up:#4b7a4e; --down:#a4534a; --warn:#b4823a;
  --r:14px; --shadow:0 1px 2px rgba(26,26,24,.04), 0 8px 24px rgba(26,26,24,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2{margin:0;font-weight:600;letter-spacing:-.01em}
button{font:inherit;cursor:pointer}

/* ── вход ─────────────────────────────────────────────── */
.login-body{display:grid;place-items:center;min-height:100vh}
.login{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:40px 36px;width:min(360px,92vw);text-align:center}
.login h1{font-size:26px;margin-bottom:4px}
.login .sub{color:var(--ink-2);font-size:14px;margin:0 0 24px}
.login input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:16px;background:#fff;margin-bottom:12px}
.login input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
.login button{width:100%;padding:12px;border:0;border-radius:10px;background:var(--accent);
  color:#fff;font-weight:600}
.login .err{color:var(--down);font-size:14px;min-height:20px;margin-top:10px}
.mark{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  font-weight:600;margin-bottom:18px}

/* ── шапка ────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);background:var(--bg);
  position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:baseline;gap:14px}
.brand .mark{margin:0}
.brand .sect{font-size:20px;font-weight:600;letter-spacing:-.01em}
.controls{display:flex;gap:10px;flex-wrap:wrap}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;color:var(--ink-2);padding:7px 15px;border-radius:999px;
  font-size:14px}
.seg button.on{background:var(--accent);color:#fff;font-weight:600}
.seg.small button{padding:6px 12px;font-size:13px}

/* ── блоки ────────────────────────────────────────────── */
main{padding:8px clamp(16px,4vw,48px) 40px;max-width:1240px;margin:0 auto}
.block{margin-top:34px}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:16px}
.block-head h2{font-size:19px}
.period{color:var(--ink-3);font-size:13px}
.foot{color:var(--ink-3);font-size:13px;margin:12px 2px 0}

/* ── карточки чисел ───────────────────────────────────── */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow)}
.card .t{font-size:13px;color:var(--ink-2);margin-bottom:10px}
.card .v{font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.card .u{font-size:13px;color:var(--ink-3);margin-left:6px;font-weight:400}
.card .d{margin-top:10px;font-size:13px;display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--ink-2)}
.card .d.up{color:var(--up)} .card .d.down{color:var(--down)}
.card .n{margin-top:10px;font-size:12px;color:var(--ink-3);line-height:1.45}
.card .v.none{color:var(--ink-3);font-size:26px}

/* ── карточка на картах ───────────────────────────────── */
.maps{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;box-shadow:var(--shadow)}
.funnel{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}
.fbar{border-radius:10px;padding:14px 16px;min-width:90px}
.fbar.shown{background:var(--accent-soft)}
.fbar.entered{background:var(--accent);color:#fff}
.fbar .fv{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.fbar .fl{font-size:12px;opacity:.85;margin-top:2px}
.hint{font-size:13px;color:var(--ink-2);margin:14px 0 0;line-height:1.55}
.acts{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.act{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:9px 12px;background:var(--bg);border-radius:9px}
.act .an{font-size:13px;color:var(--ink-2)}
.act .av{font-weight:600;font-variant-numeric:tabular-nums}

/* ── поиск ────────────────────────────────────────────── */
.search{display:grid;gap:14px;grid-template-columns:minmax(260px,1fr) 2fr}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow)}
.stat{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.stat:last-child{border-bottom:0}
.stat .sl{font-size:13px;color:var(--ink-2)}
.stat .sv{font-weight:600;font-variant-numeric:tabular-nums}
.qrow{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.qrow:last-child{border-bottom:0}
.qrow .q{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .n{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
.qrow .dd{font-variant-numeric:tabular-nums;font-weight:600;min-width:44px;text-align:right}
.qrow .dd.up{color:var(--up)} .qrow .dd.down{color:var(--down)}
.tag{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--accent-soft);
  color:var(--accent);margin-left:6px}

/* ── свежесть ─────────────────────────────────────────── */
.fresh{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.src{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;font-size:13px}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--up)}
.dot.stale{background:var(--warn)} .dot.fail{background:var(--down)}
.src .st{color:var(--ink-3);margin-left:auto;font-size:12px;white-space:nowrap}

/* ── низ ──────────────────────────────────────────────── */
.bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px clamp(16px,4vw,48px);border-top:1px solid var(--line);color:var(--ink-3);
  font-size:12px}
.bottom form{margin:0}
.link{border:0;background:none;color:var(--ink-3);text-decoration:underline;font-size:12px}

@media (max-width:820px){
  .search{grid-template-columns:1fr}
  .card .v{font-size:28px}
}


/* ── Отзывы: строка на площадку, наша выделена ─────────────────────────── */
.rep { display: flex; flex-direction: column; gap: 8px; }
.rrow {
  display: grid; grid-template-columns: minmax(160px, 2fr) repeat(5, minmax(64px, 1fr));
  gap: 8px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card);
}
.rrow.own { border-color: var(--accent); background: var(--accent-soft); }
.rname { font-weight: 600; font-size: 14px; }
.rplat { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.rcell { text-align: right; }
.rcell b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; }
.rcell span { font-size: 11px; color: var(--ink-3); }
.rcell.hi b { color: var(--accent); }
.hint.warn { color: var(--warn); }
@media (max-width: 720px) {
  .rrow { grid-template-columns: 1fr 1fr 1fr; }
  .rname { grid-column: 1 / -1; }
}