/* ==========================================================================
   Пример отчёта «Живая аналитика сайта». Порт дизайна SCG
   «Живая аналитика - отчёт». Токены — scg_tokens.css.
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background: var(--bg-2);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 var(--space-10); }

/* ============ TOP BAR ============ */
.topbar { border-bottom: 1px solid var(--ink-200); background: var(--white); }
.topbar-inner {
  max-width: 1020px; margin: 0 auto; padding: var(--space-4) var(--space-10);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; flex: none; }
.brand .brand-logo { display: block; width: 73px; height: auto; }
.brand .brand-tag { font-weight: var(--fw-medium); font-size: 10px; letter-spacing: -0.3px; color: var(--fg-3); padding-left: 2px; }
.top-actions { display: flex; align-items: center; gap: var(--space-3); }
.back-link { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--fg-2); text-decoration: none; transition: color var(--dur-base) var(--ease-standard); }
.back-link:hover { color: var(--scg-navy); }
.back-link svg { width: 16px; height: 16px; }
.btn-ghost { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--scg-navy); background: var(--white); border: 1px solid var(--ink-300); border-radius: var(--radius-md); padding: 8px 14px; cursor: pointer; text-decoration: none; transition: border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); }
.btn-ghost:hover { border-color: var(--scg-navy); background: var(--ink-50); }
.btn-ghost svg { width: 16px; height: 16px; }

/* ============ REPORT HEAD ============ */
.rhead { padding: var(--space-12) 0 var(--space-8); }
.rhead .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--scg-navy); background: rgba(115,215,238,0.2); border-radius: var(--radius-pill); padding: 6px 13px 6px 10px; margin-bottom: var(--space-5); }
.rhead .eyebrow svg { width: 15px; height: 15px; }
.rhead h1 { font-weight: var(--fw-medium); font-size: var(--text-4xl); line-height: 1.06; letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0 0 var(--space-4); }
.rhead .meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.rhead .meta .m { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-base); color: var(--fg-2); }
.rhead .meta .m svg { width: 16px; height: 16px; color: var(--ink-400); }
.rhead .meta .m b { color: var(--ink-900); font-weight: var(--fw-medium); }

/* ============ KPI ROW ============ */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-lg); padding: var(--space-6); }
.kpi .v { font-weight: var(--fw-medium); font-size: var(--text-4xl); line-height: 1; letter-spacing: var(--tracking-tight); color: var(--ink-900); }
.kpi .l { font-size: var(--text-sm); color: var(--fg-3); margin-top: var(--space-3); line-height: var(--lh-snug); }
.kpi .delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); font-weight: var(--fw-medium); margin-top: var(--space-3); }
.kpi .delta svg { width: 14px; height: 14px; }
.kpi .delta.up { color: var(--status-success); }
.kpi.accent { background: var(--scg-navy); border-color: var(--scg-navy); }
.kpi.accent .v { color: var(--scg-cyan); }
.kpi.accent .l { color: rgba(255,255,255,0.72); }
.kpi.accent .tagline { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--scg-cyan); margin-top: var(--space-3); }
.kpi.accent .tagline svg { width: 13px; height: 13px; }

/* ============ MAIN CONCLUSION ============ */
.conclusion { position: relative; background: var(--scg-navy); border-radius: var(--radius-xl); padding: var(--space-12); overflow: hidden; margin-bottom: var(--space-12); }
.conclusion::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; background: radial-gradient(circle, rgba(206,39,192,0.3) 0%, rgba(206,39,192,0) 62%); pointer-events: none; }
.conclusion::after { content: ""; position: absolute; width: 340px; height: 340px; left: -120px; bottom: -180px; background: radial-gradient(circle, rgba(115,215,238,0.28) 0%, rgba(115,215,238,0) 64%); pointer-events: none; }
.conclusion .inner { position: relative; z-index: 2; max-width: 760px; }
.conclusion .eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--scg-cyan); margin-bottom: var(--space-5); }
.conclusion .eyebrow svg { width: 15px; height: 15px; }
.conclusion .statement { font-family: var(--font-serif); font-size: var(--text-3xl); line-height: 1.28; color: var(--white); margin: 0 0 var(--space-6); text-wrap: balance; }
.conclusion p { font-size: var(--text-md); line-height: var(--lh-relaxed); color: rgba(255,255,255,0.82); margin: 0; }
.conclusion p .hl { color: var(--scg-cyan); font-weight: var(--fw-medium); }

/* ============ SECTION ============ */
.section { margin-bottom: var(--space-12); }
.section-title { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.section-title h2 { font-weight: var(--fw-medium); font-size: var(--text-2xl); letter-spacing: var(--tracking-snug); color: var(--ink-900); margin: 0; }
.section-title .n { font-size: var(--text-sm); color: var(--fg-3); }

/* ============ RECOMMENDATIONS ============ */
.recs { display: flex; flex-direction: column; gap: var(--space-5); }
.rec { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-xl); padding: var(--space-8); }
.rec-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); }
.rec-num { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--scg-navy); color: var(--white); font-weight: var(--fw-medium); font-size: var(--text-lg); }
.rec-head h3 { font-weight: var(--fw-medium); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--ink-900); margin: 4px 0 0; }
.rec-block { margin-bottom: var(--space-5); }
.rec-block:last-of-type { margin-bottom: 0; }
.rec-block .bl { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); margin-bottom: 7px; }
.rec-block .bl svg { width: 14px; height: 14px; color: var(--ink-400); }
.rec-block p { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; }
.rec-block p + p { margin-top: var(--space-2); }

/* action sub-block (highlighted) */
.action-box { background: rgba(115,215,238,0.1); border: 1px solid rgba(115,215,238,0.4); border-radius: var(--radius-lg); padding: var(--space-6); margin: var(--space-5) 0; }
.action-box .bl { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--scg-navy); }
.action-box .bl svg { width: 14px; height: 14px; color: var(--scg-cyan); }
.action-box .todo { font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--ink-900); margin: 0 0 var(--space-2); line-height: var(--lh-snug); }
.action-box p { font-size: var(--text-base); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; }
.add-btn {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-5);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--fw-medium);
  color: var(--fg-on-dark); background: var(--scg-navy); border: none; border-radius: var(--radius-md);
  padding: 11px 18px; cursor: pointer; box-shadow: var(--shadow-xs);
  transition: filter var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.add-btn svg { width: 16px; height: 16px; }
.add-btn:hover { filter: brightness(1.12); }
.add-btn.added { background: rgba(31,138,91,0.12); color: var(--status-success); box-shadow: none; cursor: default; }
.add-btn.added:hover { filter: none; }

.rec-foot { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--ink-200); font-size: var(--text-sm); color: var(--fg-3); line-height: var(--lh-snug); }
.rec-foot svg { width: 15px; height: 15px; flex: none; color: var(--ink-400); margin-top: 1px; }
.rec-foot b { color: var(--fg-2); font-weight: var(--fw-medium); }

/* ============ CHANNELS TABLE ============ */
.panel { background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--radius-xl); padding: var(--space-8); }
.ch-row { display: grid; grid-template-columns: 150px 1fr minmax(190px, auto) 150px; gap: var(--space-5); align-items: center; padding: var(--space-4) 0; }
.ch-row + .ch-row { border-top: 1px solid var(--ink-200); }
.ch-row .ch-name { font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--ink-900); }
.ch-bar { height: 8px; border-radius: var(--radius-pill); background: var(--ink-100); overflow: hidden; }
.ch-bar i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--scg-navy); }
.ch-nums { font-size: var(--text-sm); color: var(--fg-2); white-space: nowrap; }
.ch-nums b { color: var(--ink-900); font-weight: var(--fw-medium); }
.ch-tag { justify-self: start; font-size: var(--text-xs); font-weight: var(--fw-medium); border-radius: var(--radius-pill); padding: 5px 11px; white-space: nowrap; }
.ch-tag.best { background: rgba(31,138,91,0.12); color: var(--status-success); }
.ch-tag.stable { background: rgba(18,16,84,0.08); color: var(--scg-navy); }
.ch-tag.potential { background: rgba(115,215,238,0.22); color: var(--scg-navy); }
.ch-tag.mid { background: var(--ink-100); color: var(--fg-3); }
.ch-tag.check { background: rgba(176,122,16,0.14); color: #8A5A12; }

/* ============ TECH HEALTH ============ */
.health-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.health-col { display: flex; flex-direction: column; gap: var(--space-3); }
.health-col-title { margin: 0 0 var(--space-1); font-weight: var(--fw-medium); font-size: var(--text-base); letter-spacing: var(--tracking-snug); color: var(--ink-900); }
.hitem { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--ink-50); border: 1px solid var(--ink-200); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-size: var(--text-base); line-height: var(--lh-snug); color: var(--fg-1); }
.hitem .hi { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; }
.hitem .hi svg { width: 14px; height: 14px; }
.hitem.ok .hi { background: rgba(31,138,91,0.14); color: var(--status-success); }
.hitem.warn .hi { background: rgba(176,122,16,0.16); color: #8A5A12; }
.hitem.warn { background: rgba(176,122,16,0.06); border-color: rgba(176,122,16,0.25); }

.report-foot { text-align: center; padding: var(--space-8) 0 var(--space-16); color: var(--fg-3); font-size: var(--text-sm); }
.report-foot-title { margin: 0 0 var(--space-3); font-weight: var(--fw-medium); font-size: var(--text-xl); letter-spacing: var(--tracking-snug); color: var(--ink-900); }
.report-foot p { margin: 0 auto; max-width: 680px; font-size: var(--text-base); line-height: var(--lh-snug); color: var(--fg-2); }

/* ============ RESPONSIVE ============ */
@media (max-width: 860px) {
  .wrap { padding: 0 var(--space-6); }
  .topbar-inner { padding: var(--space-4) var(--space-6); }
  .kpis { grid-template-columns: 1fr 1fr; }
  .ch-row { grid-template-columns: 1fr auto; gap: var(--space-3) var(--space-4); }
  .ch-bar { grid-column: 1 / -1; order: 3; }
  .ch-tag { justify-self: end; }
  .health-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .rhead { padding: var(--space-8) 0 var(--space-6); }
  .rhead h1 { font-size: var(--text-3xl); }
  .kpis { grid-template-columns: 1fr 1fr; }
  .conclusion { padding: var(--space-8); }
  .conclusion .statement { font-size: var(--text-2xl); }
  .rec { padding: var(--space-6); }
  .panel { padding: var(--space-6); }
  .top-actions .btn-ghost span { display: none; }
}