:root {
  color-scheme: light;
  --bg: #f7f5f0;
  --surface: rgba(255, 255, 255, 0.82);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --line: rgba(32, 35, 39, 0.09);
  --line-soft: rgba(32, 35, 39, 0.06);
  --text: #25272b;
  --muted: #747980;
  --faint: #a1a5ab;
  --accent: #4967df;
  --green: #23885f;
  --amber: #9c6b21;
  --red: #b9433c;
  --shadow: 0 26px 90px rgba(30, 36, 44, 0.11);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(73, 103, 223, 0.09), transparent 34rem),
    radial-gradient(circle at 95% 12%, rgba(213, 147, 68, 0.10), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }
p, h1, h2, strong { margin: 0; }
h1, h2, strong { letter-spacing: -0.035em; }
h1 { font-size: clamp(32px, 4vw, 54px); line-height: .98; font-weight: 680; }
h2 { font-size: 20px; line-height: 1.18; font-weight: 650; }

.shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  min-height: 100vh;
  padding: 22px;
}

.rail {
  position: sticky;
  top: 22px;
  height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 4px 2px 24px; }
.mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--surface-strong);
}
.brand-name { font-size: 14px; font-weight: 680; }
.brand-note { margin-top: 2px; color: var(--muted); font-size: 12px; }
.nav-list { display: grid; gap: 4px; }
.nav-item {
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}
.nav-item:hover, .nav-item.active { color: var(--text); background: rgba(32,35,39,.055); }
.rail-note {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.main-surface {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,.55);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.9);
}
.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 38px 42px 30px;
  border-bottom: 1px solid var(--line-soft);
}
.topbar-meta { padding-top: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
}
.lead-copy, .section-copy {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 16px;
  padding: 28px 42px 8px;
}
.focus-card, .panel, .target-card, .post-list-item, .post-reader, .empty-state {
  border: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
}
.focus-card {
  min-height: 190px;
  padding: 26px;
  border-radius: var(--radius-lg);
}
.primary-focus {
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.72)),
    var(--surface);
}
.focus-card h2 { max-width: 700px; font-size: clamp(24px, 3vw, 38px); }
.focus-card .lead-copy { max-width: 640px; margin-top: 12px; }
.focus-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.soft-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  color: var(--muted);
  font-size: 13px;
}
.soft-pill.danger { color: var(--red); }
.next-action-card {
  margin-top: 24px;
  padding: 16px 18px;
  border-top: 1px solid var(--line-soft);
}
.next-action-kicker {
  display: block;
  margin-bottom: 6px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.next-action-card strong {
  display: block;
  font-size: 17px;
  line-height: 1.25;
}
.next-action-card p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.section { padding: 34px 42px 8px; }
.section:last-child { padding-bottom: 42px; }
.calm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.section-copy { max-width: 480px; }

.content-workspace {
  display: grid;
  grid-template-columns: minmax(260px, .42fr) minmax(0, .58fr);
  gap: 16px;
  align-items: stretch;
}
.post-list {
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: 760px;
  overflow: auto;
  padding-right: 2px;
}
.post-list-item {
  width: 100%;
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: var(--radius-md);
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.post-list-item:hover, .post-list-item.selected {
  background: var(--surface-strong);
  border-color: rgba(73,103,223,.22);
}
.post-list-title { font-size: 15px; font-weight: 660; line-height: 1.35; }
.post-list-meta, .post-list-status, .post-list-performance { color: var(--muted); font-size: 12px; line-height: 1.35; }
.post-list-status { color: var(--amber); font-weight: 650; }
.post-list-performance { color: var(--accent); }
.post-reader {
  min-height: 520px;
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
}
.reader-inner { padding: 28px; }
.reader-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.reader-title { max-width: 620px; }
.reader-action {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.62);
}
.reader-action span {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reader-action strong {
  display: block;
  margin-top: 7px;
  font-size: 17px;
  line-height: 1.25;
}
.reader-action p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.reader-action.ready strong { color: var(--green); }
.reader-action.needs-image strong,
.reader-action.needs-send-check strong,
.reader-action.needs-text-shorten strong { color: var(--amber); }
.reader-action.blocked strong { color: var(--red); }
.post-metrics-line {
  margin-top: 18px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
}
.reader-text {
  margin-top: 26px;
  color: #1f2226;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.55;
  letter-spacing: -0.015em;
  white-space: pre-wrap;
}
.reader-review {
  margin-top: 28px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(32,35,39,.045);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.state {
  flex: none;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}
.state::before, .badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 999px;
  background: var(--faint);
  vertical-align: 1px;
}
.state.published::before, .state.ready::before, .badge.running::before { background: var(--green); }
.state.approved::before, .state.draft::before, .state.needs-image::before, .state.needs-send-check::before, .state.unsupported-publish::before, .badge.paused::before { background: var(--amber); }
.state.blocked::before, .state.needs-fix::before, .state.needs-text-shorten::before { background: var(--red); }

.insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 16px;
}
.panel {
  min-width: 0;
  border-radius: var(--radius-lg);
  padding: 22px;
}
.panel-header.compact { margin-bottom: 16px; }
.insight-panel { min-height: 250px; }
.learning-list { display: grid; gap: 10px; }
.learning-head {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.learning-head strong { font-size: 18px; line-height: 1.25; }
.learning-head span, .learning-note-row { color: var(--muted); font-size: 14px; line-height: 1.55; }
.learning-note-row { padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.62); }
.top-posts { display: grid; gap: 10px; }
.top-post-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.64);
}
.top-post-title { font-size: 14px; font-weight: 650; line-height: 1.35; }
.top-post-meta { margin-top: 6px; color: var(--muted); font-size: 12px; }
.top-post-score { color: var(--accent); font-size: 13px; white-space: nowrap; }

.activity-chart {
  min-height: 178px;
  display: grid;
  grid-template-columns: repeat(14, minmax(12px, 1fr));
  align-items: end;
  gap: 8px;
  padding-top: 10px;
}
.activity-day { min-width: 0; display: grid; grid-template-rows: 132px 18px 18px; align-items: end; text-align: center; }
.activity-bar-wrap {
  height: 132px;
  display: flex;
  align-items: end;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(32,35,39,.035), rgba(32,35,39,.07));
  padding: 4px;
}
.activity-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(73,103,223,.68), rgba(73,103,223,.25));
}
.activity-count { margin-top: 6px; color: var(--text); font-size: 12px; font-weight: 650; }
.activity-label { color: var(--faint); font-size: 10px; transform: rotate(-35deg); transform-origin: center top; }
.bar-list { display: grid; gap: 14px; }
.bar-row { display: grid; gap: 8px; }
.bar-row-top { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.bar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 560; }
.bar-value { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-track { height: 10px; overflow: hidden; border-radius: 999px; background: rgba(32,35,39,.07); }
.bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, rgba(35,136,95,.72), rgba(35,136,95,.32)); }

.targets-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.target-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  padding: 18px;
  border-radius: var(--radius-md);
}
.target-title { font-size: 15px; font-weight: 680; }
.target-destination, .target-line { margin-top: 6px; color: var(--muted); font-size: 13px; }
.target-line { grid-column: 1 / -1; }
.badge {
  align-self: start;
  padding: 6px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--muted);
  font-size: 12px;
}
.empty-state { border-radius: var(--radius-md); padding: 24px; color: var(--muted); text-align: center; font-size: 14px; }

@media (max-width: 1120px) {
  .shell, .overview-grid, .content-workspace, .insight-grid, .targets-grid { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; }
  .post-reader { min-height: auto; }
}

@media (max-width: 640px) {
  .shell { padding: 10px; }
  .topbar, .section, .overview-grid { padding-left: 18px; padding-right: 18px; }
  .topbar, .calm-header { display: grid; }
  .reader-inner, .focus-card, .panel { padding: 20px; }
  .activity-chart { gap: 4px; }
  .activity-label { display: none; }
  .top-post-row { grid-template-columns: 1fr; }
}