@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --black: #07090c;
  --nav: #0a0806;
  --panel: #111820;
  --panel-2: #0d1117;
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --faint: rgba(255, 255, 255, 0.42);
  --teal: #5a9a9b;
  --teal-light: #6db0b1;
  --white-button: #f7f7f5;
  --linkedin: #78aee8;
  --instagram: #d977a1;
  --youtube: #e45a5a;
  --spotify: #55d784;
  --newsletter: #d8b46a;
  --website: #9a88ff;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background: var(--black);
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.01em;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255, 248, 235, 0.07);
  background: var(--nav);
}

.site-nav {
  width: min(100% - 42px, 1360px);
  height: 60px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand-lockup {
  display: block;
  width: 100px;
  flex: 0 0 auto;
}

.brand-lockup img {
  display: block;
  width: 100%;
  height: auto;
}

.nav-list,
.header-actions,
.hero-actions,
.sync-status,
.board-header,
.metric-row,
.post-row,
.queue-row,
.pipeline-row,
.signal-row,
.analysis-row,
.destination-row {
  display: flex;
  align-items: center;
}

.nav-list {
  gap: clamp(20px, 3vw, 44px);
}

.nav-list a,
.join-button,
.primary-button,
.secondary-button,
.mode-pill,
.pill,
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.nav-list a {
  color: rgba(255, 255, 255, 0.86);
  transition: color 180ms ease;
}

.nav-list a:hover {
  color: var(--teal-light);
}

.header-actions {
  gap: 14px;
}

.mode-pill {
  color: var(--faint);
}

.join-button,
.primary-button,
.secondary-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  padding: 0 24px;
}

.join-button,
.primary-button {
  background: var(--teal);
  color: #fff;
}

.secondary-button {
  background: var(--white-button);
  color: var(--black);
}

.dashboard-main {
  min-height: calc(100vh - 60px);
  background:
    radial-gradient(circle at 82% 0%, rgba(90, 154, 155, 0.13), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 360px),
    var(--black);
}

.dashboard-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--line-soft);
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--teal-light);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
.summary-card strong {
  font-family: "DM Serif Display", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}

h1 {
  max-width: 980px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 0.98;
}

h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
}

.hero-copy {
  max-width: 720px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.5;
}

.sync-status {
  width: fit-content;
  gap: 12px;
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: rgba(7, 9, 12, 0.62);
  color: var(--muted);
}

.sync-status strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.sync-status span:last-child {
  font-size: 12px;
}

.dot {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #b78a36;
  box-shadow: 0 0 0 5px rgba(183, 138, 54, 0.16);
}

.dot.ok {
  background: var(--teal-light);
  box-shadow: 0 0 0 5px rgba(90, 154, 155, 0.18);
}

.shell {
  width: min(100% - 42px, 1360px);
  margin: 0 auto;
  padding: 18px 0 68px;
}

.summary-grid,
.channel-grid,
.insight-grid,
.profile-strip,
.performance-grid,
.comparison-grid {
  display: grid;
  gap: 14px;
}

.summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 14px;
}

.compact-summary {
  margin-top: 18px;
}

.profile-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.summary-card,
.performance-card,
.comparison-card,
.profile-card,
.channel-card,
.board {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}

.summary-card {
  min-height: 118px;
  padding: 18px;
}

.summary-card em {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.control-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(13, 17, 23, 0.86);
}

.period-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.period-button {
  min-height: 38px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: 0 14px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.period-button.active {
  border-color: rgba(90, 154, 155, 0.6);
  background: rgba(90, 154, 155, 0.18);
  color: var(--teal-light);
}

.mini-toggle {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.range-button {
  min-height: 34px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: 0 12px;
  background: var(--panel-2);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.range-button.active {
  border-color: rgba(90, 154, 155, 0.64);
  color: var(--teal-light);
  background: rgba(90, 154, 155, 0.16);
}

.insight-board {
  scroll-margin-top: 80px;
}

.focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.focus-grid .board {
  margin-top: 0;
}

.focus-grid .board-header {
  display: grid;
  align-items: start;
  gap: 14px;
}

.focus-grid .insight-layout {
  grid-template-columns: 1fr;
}

.focus-grid .bar-row {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
}

.focus-grid .mini-toggle {
  width: 100%;
}

.focus-grid .bar-track {
  grid-column: 1 / -1;
  order: 3;
}

.insight-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.34fr);
  gap: 16px;
}

.bar-list {
  display: grid;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel-2);
}

.bar-meta strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.bar-meta a {
  color: inherit;
}

.bar-meta span,
.empty-insight,
.read-box p {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.bar-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.bar-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal-light);
}

.bar-row b {
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
}

.read-box,
.empty-insight {
  padding: 16px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(90, 154, 155, 0.08);
}

.read-box strong {
  display: block;
  margin-bottom: 8px;
  color: var(--teal-light);
}

.read-box span {
  display: block;
  margin-top: 10px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.5;
}

.comparison-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comparison-card {
  display: grid;
  gap: 14px;
  min-height: 220px;
  padding: 18px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    var(--panel-2);
}

.comparison-card.selected {
  border-color: rgba(90, 154, 155, 0.72);
  box-shadow: inset 0 0 0 1px rgba(90, 154, 155, 0.3);
}

.comparison-card.primary {
  background:
    linear-gradient(180deg, rgba(90, 154, 155, 0.12), transparent),
    var(--panel-2);
}

.priority-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid rgba(90, 154, 155, 0.42);
  border-radius: 2px;
  color: var(--teal-light);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.comparison-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.comparison-card dt {
  color: var(--faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.comparison-card dd {
  margin: 4px 0 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 30px;
  line-height: 1;
}

.comparison-card > strong {
  color: var(--teal-light);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.comparison-card p,
.decision-row p,
.deep-dive p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.comparison-card p {
  display: none;
}

.deep-dive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.72fr);
  gap: 18px;
}

.deep-dive {
  display: grid;
  gap: 18px;
}

.deep-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.deep-title > span {
  color: var(--muted);
  font-size: 13px;
}

.deep-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.deep-metrics div,
.decision-row {
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel-2);
}

.deep-metrics span {
  display: block;
  color: var(--faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.deep-metrics strong {
  display: block;
  margin-top: 8px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
}

.decision-list {
  display: grid;
  gap: 10px;
}

.decision-row strong {
  display: block;
  margin-bottom: 4px;
}

.performance-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 16px;
}

.performance-card {
  min-height: 108px;
  padding: 16px;
  background: var(--panel-2);
}

.performance-card span,
.performance-card em {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.performance-card strong {
  display: block;
  margin: 12px 0 8px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
}

.filter-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.profile-card {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(90, 154, 155, 0.055), transparent),
    var(--panel-2);
}

.profile-card > span {
  color: var(--muted);
  font-size: 13px;
}

.profile-card strong {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
}

.profile-card em {
  color: var(--faint);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.summary-card span,
.channel-card .label,
.post-meta,
.queue-meta,
.pipeline-meta,
.board-header p,
.setup-copy,
.signal-copy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.content-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel-2);
}

.content-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.content-table th,
.content-table td {
  padding: 14px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.content-table th {
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.content-table td {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.content-table tr.proxy-row td {
  background: rgba(255, 255, 255, 0.025);
}

.content-table td strong {
  display: block;
  max-width: 420px;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.content-table td strong a {
  color: inherit;
}

.content-table td span {
  display: block;
  margin-top: 4px;
  color: var(--faint);
}

.post-cell {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.post-thumb {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  object-fit: cover;
  background: var(--panel);
}

.post-thumb.empty {
  display: grid !important;
  place-items: center;
  color: var(--teal-light) !important;
  font-size: 18px;
  font-weight: 700;
}

.learning-shell {
  display: grid;
  gap: 18px;
}

.analysis-controls {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel);
}

.channel-switcher {
  display: grid;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel);
}

.channel-switcher h2 {
  margin: 5px 0 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.channel-picker-copy {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.channel-switcher-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.channel-switch {
  min-height: 92px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.channel-switch[hidden] {
  display: none;
}

.channel-switch > span:nth-child(2) {
  display: grid;
  gap: 5px;
  text-align: left;
}

.channel-switch strong {
  color: var(--text);
  font-size: 13px;
}

.channel-switch small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.channel-picker-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--teal);
  border-radius: 50%;
  color: var(--teal-light);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.channel-picker-arrow {
  color: var(--teal-light);
  font-size: 18px;
}

.channel-switch:hover,
.channel-switch.active {
  border-color: var(--teal);
  background: rgba(90, 154, 155, 0.14);
  color: var(--text);
}

.channel-focus #content-intelligence,
.channel-focus #learnings,
.channel-focus #content-record,
.channel-focus #data-health {
  display: none;
}

.channel-focus .section-heading {
  margin-top: 10px;
}

.channel-focus .channel-section {
  margin-top: 0;
  border-color: rgba(90, 154, 155, 0.42);
}

.channel-start .analysis-controls,
.channel-start #overview-grid,
.channel-start .question-board,
.channel-start .board:not(.question-board),
.channel-start #channels {
  display: none;
}

.channel-start .channel-switcher {
  margin-top: 34px;
  padding: 26px;
}

.instagram-insights-grid {
  align-items: stretch;
}

.instagram-format-row,
.instagram-hashtag-row {
  display: grid;
  grid-template-columns: minmax(90px, .8fr) 90px minmax(120px, 1.4fr) minmax(180px, 1.8fr);
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--line, #27333a);
  color: var(--muted, #9fb2ba);
  font-size: 12px;
}
.instagram-format-row strong,
.instagram-hashtag-row strong { color: var(--text, #f4f7f8); }
.instagram-format-row i { display: block; height: 6px; background: #1c272d; border-radius: 3px; overflow: hidden; }
.instagram-format-row i .minimal-bar { display: block; height: 100%; }
.instagram-growth-stat { display: flex; align-items: baseline; gap: 12px; margin: 8px 0 16px; }
.instagram-growth-stat strong { font-size: 30px; color: var(--text, #fff); }
.instagram-growth-stat span { color: var(--muted, #9fb2ba); }
.instagram-alert { margin-top: 16px; padding: 12px 14px; border-left: 3px solid #df9b54; color: #e7c59e; background: rgba(223,155,84,.08); }
.instagram-trend-bars { min-height: 96px; }

@media (max-width: 760px) {
  .instagram-format-row,
  .instagram-hashtag-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .instagram-format-row i { grid-column: 1 / -1; }
}

/* Header navigation opens one focused working area instead of relying on hidden anchors. */
.nav-focus .analysis-controls,
.nav-focus .channel-switcher,
.nav-focus .brief-shell,
.nav-focus #overview-grid,
.nav-focus .question-board,
.nav-focus .board:not(#content-intelligence):not(#learnings):not(#data-health),
.nav-focus #content-record,
.nav-focus #data-health,
.nav-focus #content-intelligence,
.nav-focus #learnings,
.nav-focus #channels {
  display: none;
}

.nav-focus.nav-channels #channels,
.nav-focus.nav-content-intelligence #content-intelligence,
.nav-focus.nav-learnings #learnings,
.nav-focus.nav-data-health #data-health {
  display: block;
}

.nav-focus #channels,
.nav-focus #content-intelligence,
.nav-focus #learnings,
.nav-focus #data-health {
  margin-top: 34px;
}

.competitor-analysis {
  margin-top: 28px;
  border-top: 1px solid var(--line);
  padding-top: 26px;
}

.competitor-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.competitor-heading h3 {
  margin: 4px 0 8px;
  font-size: 1.55rem;
}

.competitor-heading p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  max-width: 680px;
}

.competitor-period {
  color: var(--accent);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.competitor-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  margin-top: 20px;
}

.competitor-summary article {
  padding: 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.competitor-summary article:last-child { border-right: 0; }
.competitor-summary span, .competitor-summary small { display: block; color: var(--muted); }
.competitor-summary span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.competitor-summary strong { display: block; margin: 8px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.competitor-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--line); }
.competitor-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.competitor-table th, .competitor-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.competitor-table th:first-child, .competitor-table td:first-child { text-align: left; width: 34%; }
.competitor-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.competitor-table tr:last-child td { border-bottom: 0; }
.competitor-table td:first-child strong { display: block; }
.competitor-bar { display: block; height: 5px; background: var(--panel); margin-top: 9px; }
.competitor-bar i { display: block; height: 100%; background: var(--accent); }

.competitor-watch { margin-top: 16px; padding: 16px; border: 1px dashed var(--line); color: var(--muted); }
.competitor-watch > div:first-child strong, .competitor-watch > div:first-child span { display: block; }
.competitor-watch > div:first-child span { margin-top: 5px; }
.watch-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.watch-status span { color: var(--text); font-size: .82rem; }
.watch-status b { display: block; color: var(--muted); font-weight: 400; margin-top: 4px; }

@media (max-width: 760px) {
  .competitor-heading { display: block; }
  .competitor-period { display: block; margin-top: 12px; }
  .competitor-summary { grid-template-columns: 1fr; }
  .competitor-summary article { border-right: 0; border-bottom: 1px solid var(--line); }
  .competitor-summary article:last-child { border-bottom: 0; }
  .watch-status { grid-template-columns: repeat(2, 1fr); }
}

.brief-shell {
  margin-top: 26px;
}

.minimal-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.minimal-head h2 {
  margin: 5px 0 0;
  font-size: 26px;
}

.record-count,
.minimal-panel-head span {
  color: var(--muted);
  font-size: 12px;
}

.minimal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  background: var(--line);
}

.minimal-metrics div {
  display: grid;
  gap: 7px;
  min-height: 78px;
  padding: 14px 16px;
  background: var(--panel);
}

.minimal-metrics span {
  color: var(--muted);
  font-size: 12px;
}

.minimal-metrics strong {
  color: var(--text);
  font-size: 22px;
  font-weight: 600;
}

.minimal-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: 14px;
}

.minimal-panel {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}

.top-posts-panel {
  margin-bottom: 14px;
}

.post-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.content-post-card {
  display: grid;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--panel-2);
  overflow: hidden;
}

.post-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px 8px;
  color: var(--muted);
  font-size: 11px;
}

.post-rank {
  color: var(--teal-light);
  font-weight: 800;
}

.post-preview {
  display: block;
  min-height: 132px;
  margin: 0 12px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
}

.post-preview img {
  display: block;
  width: 100%;
  height: 132px;
  object-fit: cover;
}

.post-preview p {
  display: -webkit-box;
  margin: 13px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.post-card-title {
  display: -webkit-box;
  margin: 12px 12px 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.post-card-metrics span {
  color: var(--muted);
  font-size: 10px;
}

.post-card-metrics b {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 15px;
}

.post-card-score {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px 13px;
  border-top: 1px solid var(--line-soft);
}

.post-card-score span {
  color: var(--muted);
  font-size: 11px;
}

.post-card-score strong {
  color: var(--teal-light);
  font-size: 13px;
}

.post-card-score i {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--panel);
}

.post-card-score i .minimal-bar {
  height: 100%;
}

.minimal-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.minimal-panel-head h3 {
  margin: 0;
  font-size: 16px;
}

.engagement-bars,
.signal-list,
.website-bars {
  display: grid;
  gap: 14px;
}

.engagement-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.4fr) minmax(100px, 1fr) 48px;
  align-items: center;
  gap: 12px;
}

.engagement-title,
.website-title,
.signal-row > div:first-child {
  min-width: 0;
}

.engagement-title {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.engagement-title b {
  color: var(--faint);
  font-size: 12px;
}

.engagement-title a,
.website-title a {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engagement-title small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11px;
}

.engagement-row > strong {
  color: var(--text);
  font-size: 13px;
  text-align: right;
}

.engagement-track,
.website-track {
  overflow: hidden;
  height: 9px;
  border-radius: 2px;
  background: var(--panel-2);
}

.minimal-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.engagement-fill,
.views-fill {
  background: var(--teal);
}

.likes-fill,
.legend-likes {
  background: var(--linkedin);
}

.comments-fill,
.legend-comments {
  background: var(--teal-light);
}

.clicks-fill,
.legend-clicks {
  background: var(--newsletter);
}

.opens-fill,
.legend-opens {
  background: var(--teal-light);
}

.newsletter-report-head h2 {
  max-width: 620px;
}

.newsletter-preview {
  background: linear-gradient(135deg, rgba(216, 180, 106, 0.16), rgba(17, 25, 32, 0.9));
}

.newsletter-preview p {
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.newsletter-card-metrics {
  grid-template-columns: repeat(3, 1fr);
}

.youtube-sort-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 12px;
  color: var(--muted);
  font-size: 11px;
}

.youtube-sort-button {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.youtube-sort-button:hover,
.youtube-sort-button.active {
  border-color: var(--teal);
  background: rgba(94, 166, 166, 0.12);
  color: var(--text);
}

.youtube-post-card .post-card-metrics {
  grid-template-columns: repeat(4, 1fr);
}

.signal-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 12px;
  align-items: center;
}

.signal-row strong,
.signal-row span,
.website-title small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-row strong {
  color: var(--text);
  font-size: 12px;
}

.signal-row span,
.website-title small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.signal-bars {
  display: grid;
  gap: 5px;
}

.signal-bars i,
.website-track i {
  display: block;
  overflow: hidden;
  height: 5px;
  border-radius: 2px;
  background: var(--panel-2);
}

.signal-bars i .minimal-bar,
.website-track i .minimal-bar {
  height: 100%;
}

.signal-legend {
  display: flex;
  gap: 16px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 11px;
}

.signal-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.signal-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.legend-views {
  background: var(--teal);
}

.website-panel {
  max-width: 920px;
}

.website-report-head h2 {
  margin-bottom: 6px;
}

.website-source-note {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.metric-reference {
  margin-top: 20px;
  border-top: 1px solid var(--line);
}

.metric-reference-head,
.metric-reference-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.metric-reference-head {
  color: var(--text);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-reference-row {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.metric-reference-row > strong {
  color: var(--text);
}

.metric-reference-row b {
  color: var(--teal-light);
}

.metric-reference + .queue-list {
  margin-top: 20px;
}

@media (max-width: 680px) {
  .metric-reference-head,
  .metric-reference-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

.website-range-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0 12px;
  color: var(--muted);
  font-size: 11px;
}

.website-range-button {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.website-range-button:hover,
.website-range-button.active {
  border-color: var(--teal);
  background: rgba(94, 166, 166, 0.12);
  color: var(--text);
}

.website-date-form {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: 8px;
}

.website-date-form label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 10px;
}

.website-date-form input {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
  color: var(--text);
  font: inherit;
  padding: 4px 6px;
}

.website-metrics small {
  display: block;
  margin-top: 5px;
  color: var(--teal-light);
  font-size: 10px;
}

.website-metrics small.down {
  color: #e28f8f;
}

.website-ga4-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.website-ga4-metrics small.neutral {
  color: var(--muted);
}

.website-chart-legend {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
}

.website-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.website-chart-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.website-table-panel {
  max-width: none;
}

.website-table-wrap {
  overflow-x: auto;
}

.website-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.website-table th,
.website-table td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}

.website-table th:first-child,
.website-table td:first-child {
  width: 42%;
  text-align: left;
}

.website-table th {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.website-table td b {
  color: var(--text);
  font-weight: 600;
}

.website-table td a {
  display: block;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  text-decoration: none;
}

.data-coverage-note {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.website-table td .website-section-label {
  display: block;
  margin-bottom: 4px;
  color: var(--teal-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.website-table td a:hover {
  color: var(--teal-light);
}

.website-table td small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  text-overflow: ellipsis;
  font-size: 10px;
}

.website-missing-page-data {
  display: grid;
  gap: 6px;
  padding: 18px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.website-missing-page-data strong {
  color: var(--text);
}

.website-trend-panel {
  max-width: none;
}

.website-trend-bars {
  min-height: 180px;
}

.website-winner-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: none;
  border-color: rgba(94, 166, 166, 0.5);
}

.website-winner-panel h3,
.website-winner-panel p {
  margin: 0;
}

.website-winner-panel h3 {
  margin-top: 5px;
  font-size: 20px;
}

.website-winner-panel p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.website-winner-panel > strong {
  color: var(--teal-light);
  font-size: 22px;
  text-align: right;
}

.website-winner-panel > strong span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
}

.website-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 1.2fr);
  align-items: center;
  gap: 18px;
}

.website-track {
  display: grid;
  gap: 4px;
  height: auto;
  overflow: visible;
  background: transparent;
}

.minimal-empty,
.minimal-empty-state {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.minimal-empty-state {
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--panel);
}

.minimal-empty-state h2 {
  margin: 6px 0 0;
  color: var(--text);
  font-size: 24px;
}

.brief-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 12px;
}

.brief-heading h2 {
  margin: 5px 0 0;
  font-size: 26px;
}

.brief-period {
  color: var(--muted);
  font-size: 12px;
}

.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 12px;
}

.brief-card {
  min-height: 236px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
}

.brief-card h3,
.brief-card p {
  max-width: 520px;
}

.brief-label {
  display: block;
  margin-bottom: 22px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brief-lead {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.35;
}

.brief-evidence {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.worked-list {
  display: grid;
  gap: 12px;
}

.worked-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.worked-item strong,
.worked-item span,
.worked-item p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.worked-item strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
  white-space: nowrap;
}

.worked-item span {
  margin-top: 3px;
  color: var(--teal-light);
  font-size: 11px;
}

.worked-item p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.brief-cta {
  margin-top: 22px;
}

.details-panel {
  margin-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
}

.details-panel summary {
  width: fit-content;
  padding: 14px 0;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.details-copy,
.technical-details {
  padding: 0 0 18px;
}

.details-copy p {
  margin: 8px 0;
  font-size: 13px;
  line-height: 1.5;
}

.technical-details > * {
  margin-top: 16px;
}

.channel-start .brief-shell {
  display: none;
}

.channel-focus .details-panel #channels,
.channel-focus .details-panel #content-intelligence,
.channel-focus .details-panel #learnings,
.channel-focus .details-panel #content-record,
.channel-focus .details-panel #data-health {
  display: block;
}

.analysis-controls > div > span,
.analysis-controls label {
  display: grid;
  gap: 8px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.decision-grid,
.quick-grid,
.top-content-grid,
.intelligence-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.decision-grid {
  grid-template-columns: minmax(0, 1.45fr) repeat(3, minmax(190px, 0.75fr));
  align-items: stretch;
}

.insight-card .delta {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.delta.up {
  color: #86efac;
}

.delta.down {
  color: #fca5a5;
}

.delta.neutral {
  color: var(--faint);
}

.decision-card {
  min-height: 210px;
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel);
}

.decision-card.primary {
  background: linear-gradient(135deg, rgba(90, 154, 155, 0.14), rgba(255, 255, 255, 0.03));
}

.decision-card.action {
  border-color: rgba(90, 154, 155, 0.5);
}

.decision-card > span,
.decision-metrics small {
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.decision-card h2,
.decision-card h3 {
  margin: 12px 0 0;
  color: var(--text);
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0;
}

.decision-card h3 {
  font-size: 25px;
}

.decision-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.decision-post {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}

.decision-post .post-thumb {
  width: 72px;
  height: 72px;
}

.decision-post h2 {
  margin: 0;
}

.decision-post h2 a {
  color: inherit;
}

.decision-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.decision-metrics div {
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
}

.decision-metrics strong {
  display: block;
  margin-top: 6px;
  color: var(--teal-light);
  font-size: 15px;
  line-height: 1.25;
}

.quick-card,
.ranking-card,
.trend-card,
.breakdown-card,
.learning-card {
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel-2);
}

.quick-card {
  min-height: 132px;
  padding: 16px;
}

.quick-card span,
.ranking-card h3,
.trend-card h3,
.breakdown-card h3,
.learning-card > span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.quick-card strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: 20px;
  line-height: 1.25;
}

.quick-card p,
.breakdown-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.quick-card.strong {
  border-color: rgba(90, 154, 155, 0.48);
}

.quick-card.weak {
  border-color: rgba(229, 211, 145, 0.4);
}

.quick-card.insufficient {
  opacity: 0.82;
}

.ranking-card,
.trend-card,
.breakdown-card {
  padding: 14px;
}

.comparison-card {
  grid-column: span 2;
}

.comparison-card table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
}

.comparison-card th,
.comparison-card td {
  padding: 10px 8px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  text-align: left;
  vertical-align: top;
}

.comparison-card th {
  color: var(--faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.post-cell.compact {
  grid-template-columns: 38px minmax(0, 1fr);
}

.post-cell.compact .post-thumb {
  width: 38px;
  height: 38px;
}

.ranking-card ol {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ranking-card li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
}

.ranking-card .post-thumb {
  width: 42px;
  height: 42px;
}

.ranking-card strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.35;
}

.ranking-card strong a {
  color: inherit;
}

.ranking-card span,
.ranking-card b {
  color: var(--muted);
  font-size: 12px;
}

.ranking-card b {
  color: var(--teal-light);
}

.section-heading {
  margin: 28px 0 8px;
}

.section-heading h2 {
  margin: 0;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 400;
}

#channel-sections {
  display: grid;
  gap: 18px;
}

.confidence {
  align-self: start;
  min-width: max-content;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.confidence.strong {
  color: #86efac;
}

.confidence.weak {
  color: #fde68a;
}

.confidence.insufficient {
  color: var(--faint);
}

.channel-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.channel-metrics div {
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.025);
}

.channel-metrics span {
  color: var(--faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.channel-metrics strong {
  display: block;
  margin-top: 8px;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
}

.channel-analysis-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.trend-bars {
  display: flex;
  align-items: end;
  gap: 8px;
  min-height: 164px;
  margin-top: 14px;
}

.trend-bars > div {
  display: grid;
  align-items: end;
  justify-items: center;
  gap: 8px;
  flex: 1;
  min-width: 16px;
  height: 150px;
}

.trend-bars span {
  display: block;
  width: 100%;
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--teal);
}

.trend-bars em {
  writing-mode: vertical-rl;
  color: var(--faint);
  font-size: 9px;
  font-style: normal;
}

.chart-note {
  margin: 6px 0 0;
  color: var(--faint);
  font-size: 11px;
}

.decision-bars {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.decision-bar-row {
  display: grid;
  grid-template-columns: minmax(80px, 0.8fr) minmax(100px, 1.4fr) 42px;
  gap: 10px;
  align-items: center;
}

.decision-bar-row > span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decision-bar-row > div {
  height: 9px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.decision-bar-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal);
}

.decision-bar-row b {
  color: var(--teal-light);
  font-size: 12px;
  text-align: right;
}

.breakdown-card table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
}

.breakdown-card th,
.breakdown-card td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 12px;
  text-align: left;
}

.breakdown-card th {
  color: var(--faint);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.learning-list {
  display: grid;
  gap: 12px;
}

.learning-card {
  padding: 16px;
}

.learning-card dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 0;
}

.learning-card dt {
  color: var(--teal-light);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.learning-card dd {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.channel-dot {
  display: inline-block !important;
  width: 9px;
  height: 9px;
  margin: 0 7px 0 0 !important;
  border-radius: 999px;
  vertical-align: middle;
}

.channel-dot.linkedin {
  background: var(--linkedin);
}

.channel-dot.instagram {
  background: var(--instagram);
}

.channel-dot.youtube {
  background: var(--youtube);
}

.channel-dot.spotify {
  background: var(--spotify);
}

.channel-dot.newsletter {
  background: var(--newsletter);
}

.channel-dot.website {
  background: var(--website);
}

.empty-cell {
  text-align: center !important;
  color: var(--faint) !important;
}

.summary-card span {
  display: block;
  min-height: 18px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.summary-card strong {
  display: block;
  margin-top: 14px;
  font-size: 42px;
  line-height: 1;
}

.insight-grid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  margin-bottom: 18px;
}

.board {
  padding: 22px;
  margin-top: 18px;
}

.insight-grid .board {
  margin-top: 0;
}

.board-header {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.board-header.compact {
  margin-bottom: 14px;
}

select {
  min-width: 168px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 12px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
}

.chart-wrap {
  width: 100%;
  min-height: 280px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(90, 154, 155, 0.08), transparent),
    var(--panel-2);
}

#growth-chart {
  display: block;
  width: 100%;
  height: 280px;
}

.signal-stack,
.post-list,
.queue-list,
.pipeline-list {
  display: grid;
  gap: 10px;
}

.signal-row,
.post-row,
.queue-row,
.pipeline-row,
.analysis-row,
.destination-row {
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--panel-2);
}

.signal-name,
.post-row strong,
.queue-row strong,
.pipeline-row strong,
.analysis-row strong,
.destination-row strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}

.analysis-list,
.destination-list {
  display: grid;
  gap: 10px;
}

.analysis-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}

.analysis-row p,
.destination-row p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.destination-row {
  display: block;
}

.destination-row span {
  display: block;
  margin-bottom: 6px;
  color: var(--teal-light);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.channel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.channel-card {
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent),
    var(--panel);
}

.channel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.platform {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}

.badge {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 2px;
  color: var(--black);
  background: var(--teal);
  font-weight: 700;
}

.linkedin .badge {
  background: var(--linkedin);
}

.instagram .badge {
  background: var(--instagram);
}

.youtube .badge {
  background: var(--youtube);
}

.spotify .badge {
  background: var(--spotify);
}

.newsletter .badge {
  background: var(--newsletter);
}

.website .badge {
  background: var(--website);
}

.metric-row {
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.metric-row strong {
  font-size: 18px;
  font-weight: 600;
}

.trend-up {
  color: var(--teal-light);
}

.trend-flat {
  color: var(--faint);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: 22px;
}

.pill {
  flex: 0 0 auto;
  border-radius: 2px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.pill.connected {
  background: rgba(90, 154, 155, 0.16);
  color: var(--teal-light);
}

.pill.measured {
  background: rgba(220, 170, 90, 0.16);
  color: #e5bd78;
}

.pill.linked {
  background: rgba(120, 174, 232, 0.14);
  color: var(--linkedin);
}

.pill.pending {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.setup-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 22px;
}

.setup-copy {
  margin-top: 12px;
  max-width: 500px;
}

@media (max-width: 980px) {
  .site-nav {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    padding: 16px 0;
  }

  .nav-list {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }

  .insight-grid,
  .deep-dive-grid,
  .focus-grid,
  .insight-layout,
  .split,
  .setup-grid,
  .brief-grid,
  .minimal-visual-grid,
  .post-card-grid {
    grid-template-columns: 1fr;
  }

  .comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-controls,
  .learning-card dl {
    grid-template-columns: 1fr;
  }

  .analysis-controls {
    display: grid;
  }

  .channel-switcher {
    display: grid;
    align-items: start;
  }

  .brief-heading {
    align-items: start;
  }

  .channel-switcher-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decision-grid,
  .quick-grid,
  .top-content-grid,
  .intelligence-grid,
  .channel-analysis-grid {
    grid-template-columns: 1fr;
  }

  .decision-metrics {
    grid-template-columns: 1fr;
  }

  .channel-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .minimal-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .header-actions .mode-pill {
    display: none;
  }

  .join-button {
    min-height: 38px;
    padding: 0 14px;
  }

  .dashboard-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .summary-grid,
  .channel-grid,
  .profile-strip,
  .performance-grid,
  .comparison-grid,
  .deep-metrics {
    grid-template-columns: 1fr;
  }

  .control-bar {
    display: grid;
  }

  .board-header {
    display: block;
  }

  .mini-toggle {
    margin-top: 12px;
  }

  .bar-row {
    grid-template-columns: 1fr;
  }

  .filter-row {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 12px;
  }

  .ranking-card li {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .ranking-card li b {
    grid-column: 2;
  }

  .channel-metrics {
    grid-template-columns: 1fr;
  }

  .minimal-head,
  .minimal-panel-head {
    display: block;
  }

  .record-count,
  .minimal-panel-head span {
    display: block;
    margin-top: 7px;
  }

  .engagement-row {
    grid-template-columns: minmax(150px, 1fr) 70px;
  }

  .engagement-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .website-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .post-card-grid {
    grid-template-columns: 1fr;
  }

  select {
    width: 100%;
    margin-top: 12px;
  }

  .channel-switcher-list {
    grid-template-columns: 1fr;
  }

  .minimal-metrics {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .site-nav,
  .hero-inner,
  .shell {
    width: min(100% - 24px, 1360px);
  }

  .brand-lockup {
    width: 86px;
  }

  .nav-list {
    gap: 14px;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
  }

  .summary-card strong {
    font-size: 42px;
  }

  .post-row,
  .queue-row,
  .pipeline-row,
  .signal-row,
  .analysis-row,
  .destination-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .analysis-row {
    display: flex;
  }
}