:root {
  --ink: #132238;
  --muted: #64748b;
  --line: #e5e9f0;
  --panel: #ffffff;
  --canvas: #f5f7fa;
  --nav: #102033;
  --nav-soft: #1a3048;
  --blue: #2563eb;
  --cyan: #0f8da6;
  --green: #1d9b68;
  --amber: #d97706;
  --red: #d14343;
  --purple: #7257c8;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px rgba(15, 23, 42, .035);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--canvas); }

body {
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.shell { min-height: 100vh; }

.sidebar {
  width: 232px;
  height: 100vh;
  min-height: 0;
  padding: 24px 18px 20px;
  background: var(--nav);
  color: #dce7f3;
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  overflow: hidden;
}

.brand { display: grid; gap: 8px; padding: 2px 8px 24px; position: relative; z-index: 1; }
.brand-logo { display: block; width: 166px; height: 34px; object-fit: contain; object-position: left center; }
.brand-product { color: #92a8bd; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #eff6ff;
  color: var(--nav);
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: -.04em;
}

.brand-name { font-size: 15px; font-weight: 700; color: #fff; }
.brand-sub { margin-top: 2px; font-size: 10px; color: #91a7bd; letter-spacing: .08em; text-transform: uppercase; }
.nav-label { padding: 0 10px 8px; font-size: 10px; color: #6f89a2; letter-spacing: .12em; }
.nav { display: grid; gap: 4px; position: relative; z-index: 1; }

.nav-item {
  width: 100%;
  border: 0;
  padding: 9px 10px;
  border-radius: 8px;
  color: #aebed0;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.25;
}

.nav-item.active { background: var(--nav-soft); color: #fff; }
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item:focus-visible, .top-select:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.nav-icon { width: 17px; height: 17px; display: grid; place-items: center; }
.nav-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; }

.side-bottom { margin-top: auto; border-top: 1px solid rgba(255,255,255,.08); padding: 16px 8px 0; }
.sidebar-watermark { position: absolute; width: 170px; height: 170px; object-fit: contain; right: -58px; bottom: 70px; opacity: .035; pointer-events: none; }
.station { display: flex; align-items: center; gap: 9px; color: #b6c6d7; font-size: 11px; }
.station-dot { width: 8px; height: 8px; border-radius: 50%; background: #48c78e; box-shadow: 0 0 0 4px rgba(72,199,142,.12); }
.station-meta { margin-top: 7px; color: #6f89a2; font-size: 10px; }

.workspace { min-width: 0; min-height: 100vh; margin-left: 232px; padding: 20px 28px 26px; }

.topbar { min-height: 58px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.page-title { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; }
.page-kicker { margin-top: 5px; color: var(--muted); font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 9px; }

.demo-badge, .status-chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 7px;
  padding: 7px 10px;
  color: #435269;
  font-size: 11px;
}

.demo-badge { border-color: #bfdbfe; color: #1d4ed8; background: #eff6ff; font-weight: 700; }

.select-control {
  min-width: 0;
  height: 31px;
  display: inline-flex;
  align-items: center;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #435269;
}
.select-control:hover { border-color: #b9c9dc; background: #f8fafc; color: #203249; }
.select-icon { width: 15px; height: 15px; margin-left: 9px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; }
.top-select { min-width: 0; height: 100%; appearance: none; border: 0; outline: 0; background: transparent; padding: 0 26px 0 10px; color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.select-icon + .sr-only + .top-select { padding-left: 7px; }
.select-chevron { position: absolute; right: 8px; width: 13px; height: 13px; pointer-events: none; fill: none; stroke: #8a97a8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.grain-switch { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.grain-button { border: 0; min-width: 30px; padding: 5px 8px; border-radius: 5px; color: #748397; background: transparent; cursor: pointer; font-size: 11px; }
.grain-button:hover { color: #203249; background: #f1f5f9; }
.grain-button.active { color: #fff; background: var(--blue); font-weight: 700; }
.window-label { color: #526379; font-size: 11px; white-space: nowrap; }
.window-label.fixed { padding: 7px 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-weight: 700; }

.freshness {
  min-height: 42px;
  margin: 5px 0 15px;
  padding: 10px 12px;
  border: 1px solid #d8e5ec;
  background: #f8fbfc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 8px;
  color: #44566b;
  font-size: 11px;
}

.fresh-left, .fresh-right { display: flex; align-items: center; gap: 18px; }
.fresh-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.dot.warn { background: var(--amber); }
.dot.bad { background: var(--red); }
.fresh-strong { color: var(--ink); font-weight: 650; }

.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.kpi-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.kpi {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px 14px 12px;
  box-shadow: var(--shadow);
}

.kpi-label { color: var(--muted); font-size: 11px; display: flex; justify-content: space-between; gap: 6px; }
.kpi-value { margin-top: 8px; font-size: 24px; line-height: 1; font-weight: 730; letter-spacing: -.035em; color: #14243a; }
.kpi-foot { margin-top: 8px; font-size: 10px; color: #8390a3; display: flex; align-items: center; gap: 5px; }
.delta.up { color: var(--green); }
.delta.down { color: var(--red); }
.delta.neutral { color: var(--amber); }

.grid { display: grid; gap: 12px; margin-bottom: 12px; }
.grid.two { grid-template-columns: 1.65fr 1fr; }
.grid.equal { grid-template-columns: 1fr 1fr; }
.grid.three { grid-template-columns: 1.2fr 1fr .9fr; }

.panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: var(--shadow);
  padding: 13px 15px;
}

.panel.flush { padding: 0; overflow: hidden; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-head.inset { padding: 13px 15px 0; }
.panel-title { font-size: 13px; font-weight: 700; color: #203249; }
.panel-sub { margin-top: 3px; color: #8895a6; font-size: 10px; }
.panel-tools { color: #8090a3; font-size: 10px; white-space: nowrap; }

.chart { width: 100%; height: 206px; display: block; }
.chart.short { height: 160px; }
.chart text { font-family: inherit; fill: #7b8797; font-size: 10px; }
.gridline { stroke: #edf0f4; stroke-width: 1; }
.axis { stroke: #dbe1e8; stroke-width: 1; }
.line-main { fill: none; stroke: var(--blue); stroke-width: 2.5; }
.line-second { fill: none; stroke: var(--cyan); stroke-width: 2; }
.area-main { fill: url(#areaBlue); }

.legend { display: flex; align-items: center; gap: 14px; font-size: 10px; color: #64748b; }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; }

.bar-list { display: grid; gap: 12px; padding-top: 4px; }
.bar-row { display: grid; grid-template-columns: 88px 1fr 46px; gap: 9px; align-items: center; font-size: 11px; }
.bar-track { height: 8px; background: #edf1f5; border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--blue); }
.bar-fill.cyan { background: var(--cyan); }
.bar-fill.green { background: var(--green); }
.bar-fill.purple { background: var(--purple); }
.bar-value { text-align: right; color: #435269; font-weight: 650; }

.table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.table th { padding: 9px 12px; text-align: left; color: #8491a3; font-size: 10px; font-weight: 600; background: #fafbfc; border-bottom: 1px solid var(--line); }
.table td { padding: 9px 12px; border-bottom: 1px solid #edf0f4; font-size: 11px; color: #405168; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.strong { color: #15263b; font-weight: 650; }
.table-scroll { overflow-x: auto; scrollbar-width: thin; }
.time-table { min-width: 900px; }
.log-table { min-width: 1080px; }
.change { font-weight: 700; color: #6b7788; }
.change.good { color: var(--green); }
.change.warn { color: var(--amber); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 9px !important; color: #65758b !important; }

.channel { display: flex; align-items: center; gap: 8px; }
.channel-mark { width: 24px; height: 24px; border: 1px solid #dce3eb; border-radius: 6px; display: grid; place-items: center; font-size: 9px; font-weight: 800; background: #fff; color: #26384f; }
.channel-mark.blue { background: #eff6ff; border-color: #cfe0ff; color: #2457c5; }
.channel-mark.orange { background: #fff5e9; border-color: #f6dcc0; color: #b9610e; }
.channel-mark.red { background: #fff0f0; border-color: #f2cccc; color: #b12f36; }
.channel-mark.green { background: #edf9f4; border-color: #cceadd; color: #19734f; }
.channel-mark.douyin { background: #f3f4f6; border-color: #d9dde3; color: #111827; }
.channel-mark.xiaohongshu { background: #fff0f1; border-color: #f3ccd0; color: #c52835; }
.channel-mark.wechat { background: #ecf9f2; border-color: #caead8; color: #168653; }
.channel-mark.bilibili { background: #eef8fc; border-color: #cbe9f3; color: #1683a5; }
.channel-mark.toutiao { background: #fff2ed; border-color: #f1d2c5; color: #c5492e; }
.channel-mark.google { background: #eef5ff; border-color: #cadcff; color: #1e5fc9; }
.channel-mark.alibaba { background: #fff4e8; border-color: #f3d6b5; color: #bc6208; }
.channel-mark.ads1688 { background: #fff0f0; border-color: #f0cccc; color: #bd3238; font-size: 7px; }
.channel-mark.meta { background: #f1f2ff; border-color: #d6d8fa; color: #4a56c8; }
.channel-mark.website { background: #eef5ff; border-color: #cadcff; color: #245dcc; }
.channel-mark.b2bmedia { background: #f3efff; border-color: #ddd2fa; color: #6b48bd; }
.channel-mark.edm { background: #eef5ff; border-color: #cadcff; color: #245dcc; font-size: 7px; }
.channel-mark.linkedin { background: #eef6ff; border-color: #c9ddf5; color: #0a66c2; }
.channel-mark.whatsapp { background: #edf9f2; border-color: #cbead8; color: #168653; font-size: 7px; }
.channel small { display: block; margin-top: 3px; color: #8a97a8; font-size: 9px; font-weight: 400; }

.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 5px; font-size: 9px; font-weight: 650; background: #f1f5f9; color: #53657a; }
.tag.good { background: #ecf8f2; color: #177153; }
.tag.warn { background: #fff6e7; color: #a45c08; }
.tag.bad { background: #fff0f0; color: #b6383e; }
.tag.blue { background: #eef5ff; color: #275ab6; }

.decision-list, .event-list { display: grid; gap: 8px; }
.decision { padding: 9px 10px; background: #f8fafc; border-left: 3px solid var(--blue); border-radius: 0 6px 6px 0; }
.decision.warn { border-left-color: var(--amber); }
.decision-title { font-size: 11px; font-weight: 650; color: #26384e; }
.decision-meta { margin-top: 4px; color: #8491a3; font-size: 9px; }

.boss-brief {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 12px;
  padding: 14px 16px;
  border: 1px solid #cfdceb;
  border-left: 4px solid var(--blue);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow);
}
.brief-score { display: flex; align-items: baseline; gap: 3px; flex-wrap: wrap; }
.brief-score span { width: 100%; color: #75859a; font-size: 10px; }
.brief-score b { color: #173052; font-size: 30px; line-height: 1; }
.brief-score small { color: #8a97a8; font-size: 10px; }
.brief-title { color: #1e3047; font-size: 13px; font-weight: 750; }
.brief-copy { margin-top: 4px; color: #55657a; font-size: 11px; line-height: 1.55; }
.brief-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.brief-tags span { padding: 3px 7px; border-radius: 4px; background: #eef6ff; color: #315f9e; font-size: 9px; }
.brief-tags span.warn { background: #fff5e7; color: #a5600c; }
.brief-link { border: 0; color: #2459b8; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; white-space: nowrap; }
.brief-link:hover { text-decoration: underline; }
.executive-flow-panel { margin-bottom: 12px; }
.executive-flow-table { min-width: 1260px; }
.executive-flow-table td { padding-top: 11px; padding-bottom: 11px; line-height: 1.4; }
.flow-metric { color: #20364f !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-conclusion { color: #52647a !important; line-height: 1.5 !important; }
.flow-action { display: grid; align-items: start; gap: 5px; }
.flow-action .tag { width: max-content; }
.flow-action > span:last-child { color: #40546c; font-size: 10px; line-height: 1.4; }
.executive-lenses { margin-bottom: 12px; }
.executive-lens-list { display: grid; gap: 0; }
.executive-lens-list > div { padding: 9px 0; border-bottom: 1px solid #edf0f4; }
.executive-lens-list > div:first-child { padding-top: 1px; }
.executive-lens-list > div:last-child { padding-bottom: 1px; border-bottom: 0; }
.executive-lens-list > div.warn { padding-left: 9px; border-left: 3px solid var(--amber); }
.executive-lens-list span { display: block; color: #8491a3; font-size: 9px; }
.executive-lens-list b { display: block; margin-top: 4px; color: #24384f; font-size: 11px; line-height: 1.45; }
.executive-lens-list p { margin: 3px 0 0; color: #6d7c8e; font-size: 9px; line-height: 1.55; }

.analysis-hero {
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 28px;
  align-items: center;
  margin-bottom: 12px;
  padding: 22px 24px;
  border-radius: 10px;
  background: #14283f;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.analysis-hero::after { content: ""; position: absolute; width: 210px; height: 210px; right: -85px; top: -95px; border: 32px solid rgba(255,255,255,.035); border-radius: 50%; }
.eyebrow { color: #87b3e9; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.analysis-hero h2 { max-width: 900px; margin: 8px 0 0; font-size: 19px; line-height: 1.45; letter-spacing: -.015em; }
.analysis-hero p { max-width: 930px; margin: 8px 0 0; color: #b9c9da; font-size: 11px; line-height: 1.6; }
.analysis-score { position: relative; z-index: 1; padding-left: 22px; border-left: 1px solid rgba(255,255,255,.13); }
.analysis-score span, .analysis-score small { display: block; color: #9eb2c7; font-size: 10px; }
.analysis-score b { display: block; margin: 5px 0; font-size: 42px; line-height: 1; }
.analysis-flow-panel { margin-bottom: 12px; }
.analysis-flow-table { min-width: 1180px; }
.analysis-flow-table td { padding-top: 11px; padding-bottom: 11px; line-height: 1.45; }
.executive-linkage { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.executive-link-node { flex: 1 0 142px; padding: 12px 11px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fafbfc; }
.executive-link-node span { display: block; color: #7d8b9c; font-size: 9px; }
.executive-link-node b { display: block; margin-top: 6px; color: #21364f; font-size: 12px; }
.executive-link-arrow { align-self: center; color: #9aa7b7; font-size: 16px; }
.cross-flow-insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #edf0f4; }
.cross-flow-insights > div { padding-left: 9px; border-left: 3px solid var(--blue); }
.cross-flow-insights > div.warn { border-left-color: var(--amber); }
.cross-flow-insights b { display: block; color: #2a3e55; font-size: 10px; }
.cross-flow-insights span { display: block; margin-top: 4px; color: #718096; font-size: 9px; line-height: 1.5; }
.management-decision-table { min-width: 1180px; }
.management-decision-table td { padding-top: 11px; padding-bottom: 11px; line-height: 1.45; }

.strategy-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-bottom: 12px; }
.strategy-card { padding: 15px 16px; border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 9px; background: #fff; box-shadow: var(--shadow); }
.strategy-card.warn { border-top-color: var(--amber); }
.strategy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.strategy-type { color: #3566aa; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.strategy-card h3 { margin: 10px 0 12px; color: #1b2d44; font-size: 14px; }
.strategy-row { display: grid; grid-template-columns: 64px 1fr; gap: 9px; margin-top: 7px; }
.strategy-row span { color: #8b97a7; font-size: 9px; }
.strategy-row p { margin: 0; color: #506176; font-size: 10px; line-height: 1.5; }
.strategy-impact { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 11px; padding-top: 10px; border-top: 1px solid #edf0f4; }
.strategy-impact span { color: #8b97a7; font-size: 9px; }
.strategy-impact b { color: #167352; font-size: 10px; text-align: right; }

.incident { padding: 4px 2px 2px; }
.incident-head { display: flex; align-items: center; gap: 9px; color: #24374e; font-size: 12px; }
.incident-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.incident-grid span { padding: 8px; border: 1px solid var(--line); border-radius: 6px; color: #8390a2; font-size: 9px; }
.incident-grid b { display: block; margin-top: 4px; color: #35475e; font-size: 10px; }
.incident p { margin: 12px 0 0; color: #65758a; font-size: 10px; line-height: 1.6; }

.funnel { display: grid; gap: 6px; padding: 5px 0 0; }
.funnel-step { height: 30px; margin: auto; border-radius: 5px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: #fff; font-size: 10px; }
.funnel-step:nth-child(1) { width: 100%; background: #2f6fe4; }
.funnel-step:nth-child(2) { width: 84%; background: #3389cb; }
.funnel-step:nth-child(3) { width: 66%; background: #2b9c9a; }
.funnel-step:nth-child(4) { width: 49%; background: #31906a; }
.funnel-step:nth-child(5) { width: 31%; background: #567164; }

.pipeline { display: flex; align-items: center; gap: 7px; min-height: 92px; }
.pipe-node { flex: 1; min-width: 0; padding: 10px 8px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfd; text-align: center; }
.pipe-num { font-size: 17px; font-weight: 720; color: #1d3047; }
.pipe-label { margin-top: 4px; font-size: 9px; color: #748397; }
.pipe-arrow { color: #9aa6b5; }

.health-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.health-card { padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfd; }
.health-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.health-name { font-size: 11px; font-weight: 650; }
.health-meta { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; color: #8290a2; font-size: 9px; }
.health-meta b { display: block; margin-top: 2px; color: #405168; font-size: 10px; font-weight: 620; }
.health-module-table { min-width: 1100px; }
.health-module-table td { padding-top: 10px; padding-bottom: 10px; }
.health-path { color: #52657c !important; }
.health-ops-grid { grid-template-columns: minmax(0, 1.55fr) minmax(320px, .9fr) !important; }

.timeline { position: relative; height: 172px; padding: 19px 7px 0; }
.timeline-line { position: absolute; left: 18px; right: 18px; top: 85px; height: 2px; background: #dfe5ec; }
.timeline-events { position: relative; height: 120px; display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; }
.time-event { text-align: center; position: relative; }
.time-event::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; margin: 0 auto 12px; background: var(--green); border: 3px solid #e7f7f0; }
.time-event.warn::before { background: var(--amber); border-color: #fff3df; }
.time-event.bad::before { background: var(--red); border-color: #fdeaea; }
.time-name { font-size: 9px; color: #4d5f75; }
.time-value { margin-top: 3px; font-size: 8px; color: #93a0af; }

.donut-wrap { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 174px; }
.donut { width: 124px; height: 124px; border-radius: 50%; background: conic-gradient(var(--blue) 0 38%, var(--cyan) 38% 63%, var(--green) 63% 82%, var(--amber) 82% 94%, #e6eaf0 94% 100%); position: relative; }
.donut::after { content: "94%"; position: absolute; inset: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 19px; font-weight: 750; color: #1b2e45; }
.donut-legend { display: grid; gap: 8px; color: #607086; font-size: 10px; }
.donut-legend span { display: flex; align-items: center; gap: 7px; }
.donut-legend i { width: 8px; height: 8px; border-radius: 2px; }

.heatmap { display: grid; grid-template-columns: 70px repeat(7, 1fr); gap: 4px; align-items: center; }
.heat-label { font-size: 9px; color: #748397; }
.heat-cell { height: 22px; border-radius: 4px; background: #e9eef4; }
.heat-cell.l1 { background: #d9e7fb; }
.heat-cell.l2 { background: #9ebff3; }
.heat-cell.l3 { background: #5b8fe6; }
.heat-cell.l4 { background: #2c67cd; }

.footer-note { margin-top: 11px; color: #8a97a8; font-size: 9px; display: flex; justify-content: space-between; }

.intel-results-panel + .intel-results-panel { margin-top: 12px; }
.intel-results-table { min-width: 1180px; }
.intel-results-table td { padding-top: 8px; padding-bottom: 8px; line-height: 1.35; }
.intel-results-table th { white-space: nowrap; }
.mono-keyword { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: #28405e !important; font-size: 10px !important; }
.topic-title { color: #203249 !important; }
.intent-label { display: inline-flex; padding: 2px 5px; border-radius: 4px; background: #f2f5f8; color: #52647a; font-size: 9px; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 15px; border-top: 1px solid var(--line); background: #fafbfc; }
.pagination-summary { color: #7d8b9c; font-size: 10px; }
.pagination-controls { display: flex; align-items: center; gap: 4px; }
.page-button { min-width: 28px; height: 26px; border: 1px solid #dce3eb; border-radius: 5px; padding: 0 8px; background: #fff; color: #627287; font-size: 9px; cursor: pointer; }
.page-button:hover:not(:disabled) { border-color: #b9c9dc; color: #203249; }
.page-button.active { border-color: #b9d0fb; background: #eef5ff; color: #245dcc; font-weight: 700; }
.page-button:disabled { opacity: .45; cursor: not-allowed; }
.page-button:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }

.media-toolbar {
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: var(--shadow);
}
.media-toolbar > div:not(.media-compare-note) { display: flex; align-items: center; gap: 9px; }
.media-toolbar-label { color: #718096; font-size: 10px; white-space: nowrap; }
.segmented { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid #dce3eb; border-radius: 6px; background: #f5f7fa; }
.segment { border: 0; padding: 5px 10px; border-radius: 4px; background: transparent; color: #68778b; font-size: 10px; cursor: pointer; }
.segment:hover { color: #203249; background: #fff; }
.segment.active { background: #fff; color: #245dcc; font-weight: 700; box-shadow: 0 1px 2px rgba(25, 45, 75, .1); }
.segment:focus-visible, .channel-tab:focus-visible { outline: 2px solid #93c5fd; outline-offset: 1px; }
.media-compare-note { margin-left: auto; color: #7b899b; font-size: 10px; white-space: nowrap; }
.media-compare-note b { color: #31465f; }
.media-freshness { margin-top: 5px; }
.media-channel-table .table { min-width: 980px; }
.media-channel-table .table td { padding-top: 11px; padding-bottom: 11px; }
.metric-stack { display: grid; justify-items: end; gap: 3px; }
.metric-stack b { color: #21344c; font-size: 11px; font-variant-numeric: tabular-nums; }
.metric-stack small { color: #8b98a8; font-size: 9px; white-space: nowrap; }
.metric-stack small .media-delta { margin-left: 2px; }
.media-delta { display: inline-flex; align-items: center; color: #69788a; font-size: 10px; font-weight: 700; white-space: nowrap; }
.media-delta.good { color: var(--green); }
.media-delta.bad { color: var(--red); }
.media-delta.neutral { color: #8491a3; }
.media-delta.warn { color: var(--amber); }
.media-delta.compact { font-size: 9px; }
.status-mini-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.media-analysis-grid, .ads-analysis-grid, .b2b-analysis-grid, .marketing-analysis-grid { grid-template-columns: minmax(0, 1.72fr) minmax(300px, .8fr); }
.ads-channel-table .table { min-width: 1180px; }
.ads-channel-table .table td { padding-top: 11px; padding-bottom: 11px; }
.b2b-channel-table .table { min-width: 1280px; }
.b2b-channel-table .table td { padding-top: 11px; padding-bottom: 11px; }
.marketing-channel-table .table { min-width: 1160px; }
.marketing-channel-table .table td { padding-top: 11px; padding-bottom: 11px; }
.marketing-content-table .table { min-width: 980px; }
.marketing-process-panel { margin-bottom: 12px; overflow: hidden; }
.marketing-process-scroll { overflow-x: auto; scrollbar-width: thin; padding: 4px 0 2px; }
.marketing-process { display: grid; grid-template-columns: repeat(8, minmax(116px, 1fr)); gap: 18px; min-width: 1050px; }
.marketing-stage { position: relative; min-width: 0; padding: 12px 11px 11px; border: 1px solid #dfe6ee; border-radius: 7px; background: #fafbfd; }
.marketing-stage::after { content: '›'; position: absolute; right: -14px; top: 50%; color: #9aa7b7; font-size: 19px; line-height: 1; transform: translateY(-50%); }
.marketing-stage:last-child::after { display: none; }
.marketing-stage.result { border-color: #cdddf2; background: #f3f8ff; }
.marketing-stage span { display: block; overflow: hidden; color: #738297; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.marketing-stage b { display: block; margin: 8px 0 6px; color: #1c3350; font-size: 20px; letter-spacing: -.03em; }
.ad-terms-table { min-width: 760px; }
.channel-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 13px; }
.channel-tab { border: 1px solid #dce3eb; padding: 5px 9px; border-radius: 5px; background: #fff; color: #6b7a8d; font-size: 9px; cursor: pointer; }
.channel-tab:hover { border-color: #b9c9dc; color: #26394f; }
.channel-tab.active { border-color: #b9d0fb; background: #eef5ff; color: #245dcc; font-weight: 700; }
.trend-summary { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 0 4px -2px 2px; }
.trend-summary > div:first-child { display: flex; align-items: baseline; gap: 9px; }
.trend-summary span { color: #718096; font-size: 10px; }
.trend-summary b { color: #172b44; font-size: 20px; letter-spacing: -.03em; }
.trend-summary .legend { padding-bottom: 2px; }
.legend i.dash { width: 14px; height: 0; margin-bottom: 3px; border-top: 2px dashed #9aa7b7; border-radius: 0; background: transparent; }
.media-chart { width: 100%; height: 224px; display: block; }
.media-chart text { font-family: inherit; fill: #8491a3; font-size: 9px; }
.media-area { fill: url(#mediaArea); }
.ads-area { fill: url(#adsArea); }
.b2b-area { fill: url(#b2bArea); }
.marketing-area { fill: url(#marketingArea); }
.media-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.media-line.current { stroke: #2563eb; stroke-width: 2.5; }
.media-line.previous { stroke: #9aa7b7; stroke-width: 1.8; stroke-dasharray: 6 6; }
.media-point { fill: #fff; stroke: #2563eb; stroke-width: 2; }
.media-source-flow { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 12px; padding-top: 11px; border-top: 1px solid #edf0f4; color: #56687e; font-size: 9px; }
.media-source-flow span { padding: 5px 7px; border: 1px solid #dfe6ee; border-radius: 5px; background: #fafbfc; white-space: nowrap; }
.media-source-flow i { color: #9aa7b7; font-style: normal; }

@media (max-width: 1100px) {
  .sidebar { width: 190px; padding-left: 14px; padding-right: 14px; }
  .brand-logo { width: 150px; }
  .workspace { margin-left: 190px; padding-left: 18px; padding-right: 18px; }
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .freshness { flex-wrap: wrap; align-items: flex-start; }
  .fresh-left, .fresh-right { flex-wrap: wrap; }
  .strategy-grid { grid-template-columns: 1fr; }
  .media-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 10px 18px; }
  .media-compare-note { width: 100%; margin-left: 0; }
  .media-analysis-grid, .ads-analysis-grid, .b2b-analysis-grid, .marketing-analysis-grid { grid-template-columns: 1fr; }
  .pagination { align-items: flex-start; flex-direction: column; gap: 8px; }
  .cross-flow-insights { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .workspace-health .grid.two, .workspace-health .grid.equal { grid-template-columns: 1fr; }
  .workspace-health .health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workspace-health .health-ops-grid { grid-template-columns: 1fr !important; }
  .executive-lenses, .analysis-leadership-lenses { grid-template-columns: 1fr !important; }
  .analysis-hero { grid-template-columns: 1fr; }
  .analysis-score { padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.13); border-left: 0; }
}