:root {
  color-scheme: dark;
  --bg: #0f0f12;
  --bg-2: #14131a;
  --panel: #1d1b29;
  --panel-2: #242235;
  --topbar: #1b1a27;
  --line: #302e42;
  --line-2: #3d3a55;
  --text: #f5f1ff;
  --muted: #a99abd;
  --accent: #55efd5;
  --accent-2: #a954d8;
  --accent-3: #ffb28f;
  --danger: #ff6b81;
  --warning: #ffd166;
  --good: #64f4c4;
  --shadow: rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
}
body.is-loading::before,
body.htmx-request::before {
  content: "";
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, #2563eb, #60a5fa, transparent);
  animation: loading-bar 1.05s ease-in-out infinite;
}
a { color: inherit; }
.shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
}
.sidebar {
  min-height: calc(100vh - 44px);
  display: block;
  background: var(--topbar);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 20px 12px;
  box-shadow: 0 18px 40px var(--shadow);
}
.brand {
  font-weight: 850;
  font-size: 20px;
  letter-spacing: 0;
  margin-bottom: 22px;
  padding: 0 12px;
}
.brand::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 18px;
  margin-right: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), #d8ff79);
  vertical-align: -3px;
}
.nav { display: grid; gap: 5px; }
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #e7deef;
  padding: 10px 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 650;
  font-size: 13px;
  text-transform: none;
}
.nav svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
}
.nav a:hover,
.nav a.active {
  color: var(--accent);
  border-color: rgba(85,239,213,.35);
  background: rgba(38, 65, 99, .42);
}
.nav a.active svg { opacity: 1; }
.content {
  padding: 0;
  min-width: 0;
  max-width: calc(100vw - 298px);
}
.topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 18px;
  padding: 0;
  background: transparent;
  color: var(--text);
}
h1 { margin: 0; font-size: 23px; letter-spacing: 0; font-weight: 780; }
h2 {
  font-size: 13px;
  margin: 0 0 14px;
  color: #c9b6e5;
  font-weight: 740;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.topline .muted { color: var(--muted); }
.source-title {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.source-title.page-title { align-items: center; }
.source-title > div { min-width: 0; }
.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
}
.source-logo {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.94);
  padding: 4px;
}
.source-logo.small {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  padding: 3px;
}
.source-logo.compact {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  padding: 3px;
}
.source-logo.tiny {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  padding: 2px;
  margin-right: 6px;
  vertical-align: -5px;
}
.source-logo.large {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  padding: 6px;
}
.source-logo.fallback {
  display: inline-grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(85,239,213,.18), rgba(169,84,216,.24));
  color: var(--accent);
  font-weight: 850;
  border-color: rgba(85,239,213,.28);
  padding: 0;
}
.article-source-chip {
  margin-bottom: 10px;
  color: var(--muted);
  font-weight: 750;
}
.grid { display: grid; gap: 16px; }
.stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.card, .panel {
  background: linear-gradient(180deg, rgba(36,34,53,.98), rgba(28,26,41,.98));
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px var(--shadow);
}
.card {
  padding: 15px 16px;
  position: relative;
  overflow: hidden;
}
.stat-value { font-size: 22px; font-weight: 800; color: var(--accent); line-height: 1.05; }
.stat-label { color: #d9cdea; font-size: 10px; margin-top: 0; text-transform: uppercase; font-weight: 760; }
.columns { display: grid; grid-template-columns: 1.12fr .88fr; gap: 16px; align-items: start; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 18px; align-items: stretch; }
.panel { padding: 16px; margin-bottom: 14px; min-width: 0; }
.table { width: 100%; border-collapse: collapse; }
.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}
.table-scroll .table {
  width: max-content;
  min-width: 100%;
}
.table th, .table td {
  text-align: left;
  border-bottom: 1px solid rgba(75,56,103,.7);
  padding: 9px 8px;
  vertical-align: top;
}
.table th {
  color: #bca9d4;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: rgba(255,255,255,.025);
}
.table tr:hover td { background: rgba(255,255,255,.025); }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(255,255,255,.08);
  color: #ddd4ea;
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
  margin: 1px;
}
.badge.active, .badge.success, .badge.parsed {
  background: rgba(85,239,213,.14);
  color: var(--accent);
  border-color: rgba(85,239,213,.35);
}
.badge.running {
  background: rgba(32,169,233,.16);
  color: #34c3ff;
  border-color: rgba(32,169,233,.4);
}
.badge.paused, .badge.partial {
  background: rgba(255,209,102,.13);
  color: var(--warning);
  border-color: rgba(255,209,102,.32);
}
.badge.failed {
  background: rgba(255,107,129,.13);
  color: var(--danger);
  border-color: rgba(255,107,129,.35);
}
.badge.video {
  background: rgba(169,84,216,.18);
  color: #dfb7ff;
  border-color: rgba(169,84,216,.42);
}
.badge.article {
  background: rgba(85,239,213,.11);
  color: var(--accent);
  border-color: rgba(85,239,213,.28);
}
.badge.warning {
  background: rgba(255,209,102,.13);
  color: var(--warning);
  border-color: rgba(255,209,102,.32);
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
button, .button {
  border: 1px solid rgba(85,239,213,.55);
  background: rgba(85,239,213,.15);
  color: var(--accent);
  border-radius: 7px;
  padding: 8px 11px;
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-weight: 760;
  font-size: 13px;
}
button:hover, .button:hover { background: rgba(85,239,213,.24); }
button.secondary, .button.secondary {
  background: rgba(255,255,255,.05);
  color: #e8dcf5;
  border-color: rgba(255,255,255,.18);
}
button.danger {
  background: rgba(255,107,129,.08);
  color: var(--danger);
  border-color: rgba(255,107,129,.38);
}
button.danger:hover {
  background: rgba(255,107,129,.16);
}
input, select {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 9px 10px;
  font: inherit;
  background: rgba(255,255,255,.06);
  color: var(--text);
}
input.check {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
select option { background: #1f1230; color: var(--text); }
label {
  display: grid;
  gap: 6px;
  color: #c7b7dc;
  font-size: 12px;
  font-weight: 690;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.form-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.edit-spider-form {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.edit-spider-form label,
.edit-spider-form input,
.edit-spider-form select {
  min-width: 0;
  max-width: 100%;
}
.edit-spider-form input,
.edit-spider-form select {
  width: 100%;
}
.spider-static-facts {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.diagnosis {
  margin-top: 14px;
  border-left: 4px solid var(--accent);
  padding-left: 12px;
}
.detail-diagnosis-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 38px;
  margin-top: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}
.alert-box {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  color: #eadff4;
}
.alert-box.warning {
  border-color: rgba(255,209,102,.42);
  background: rgba(255,209,102,.09);
}
.diagnosis-preview-grid {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}
.diagnosis-news-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}
.diagnosis-news-card img,
.diagnosis-news-card .image-placeholder {
  width: 132px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.diagnosis-news-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.diagnosis-news-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.diagnosis-news-body a,
.diagnosis-news-body p {
  min-width: 0;
  overflow-wrap: anywhere;
}
.link-list { margin: 8px 0 0; padding-left: 18px; }
.timeline { display: grid; gap: 12px; }
.timeline.compact { gap: 8px; }
.event {
  border-left: 3px solid var(--line-2);
  padding: 8px 0 8px 12px;
  background: rgba(255,255,255,.025);
}
.event.success { border-color: var(--good); }
.event.failed { border-color: var(--danger); }
.event.partial { border-color: var(--warning); }
.thumb {
  width: 88px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,.06);
}
.article-hero {
  display: grid;
  grid-template-columns: minmax(220px, 400px) 1fr;
  gap: 18px;
  align-items: start;
}
.hero-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line-2);
}
.article-slideshow {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.article-slide-stage {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}
.article-slide-stage .hero-image {
  display: block;
}
.slide-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 34px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border-color: rgba(255,255,255,.16);
  background: rgba(10,8,16,.68);
  color: #fff;
  font-size: 30px;
  line-height: 1;
}
.slide-button.prev { left: 8px; }
.slide-button.next { right: 8px; }
.slide-status {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(8,6,14,.74);
  border: 1px solid rgba(255,255,255,.12);
  color: #dffcf8;
  font-size: 11px;
  font-weight: 800;
}
.slide-status[data-state="saving"] { color: var(--warning); }
.slide-status[data-state="error"] { color: var(--danger); }
.article-slide-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}
.slide-thumb {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.slide-thumb.active {
  border-color: rgba(85,239,213,.9);
  box-shadow: 0 0 0 2px rgba(85,239,213,.14);
}
.slide-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: #050508;
}
.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.meta-grid div {
  display: grid;
  gap: 4px;
  border-left: 2px solid rgba(85,239,213,.45);
  padding-left: 10px;
}
.article-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
.article-content-panel {
  min-width: 0;
}
.article-text {
  white-space: pre-wrap;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  line-height: 1.65;
  font-size: 16px;
  margin: 0;
  max-width: 880px;
  color: #f4edf8;
}
.article-detail-sidebar {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.article-coverage-seed {
  border-left: 3px solid rgba(85,239,213,.75);
}
.coverage-candidate-list {
  display: grid;
  gap: 10px;
}
.coverage-candidate-row {
  display: grid;
  grid-template-columns: 28px 88px minmax(0, 1fr) 128px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}
.coverage-candidate-row.seed {
  border-color: rgba(85,239,213,.45);
  background: linear-gradient(90deg, rgba(85,239,213,.10), rgba(255,255,255,.035));
}
.article-coverage-seed .coverage-candidate-row {
  grid-template-columns: 112px minmax(0, 1fr);
}
.coverage-candidate-row > .thumb,
.coverage-candidate-row > .image-placeholder {
  width: 88px;
  height: 58px;
  border-radius: 6px;
  object-fit: cover;
}
.article-coverage-seed .coverage-candidate-row > .thumb,
.article-coverage-seed .coverage-candidate-row > .image-placeholder {
  width: 112px;
  height: 72px;
}
.coverage-candidate-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.coverage-candidate-main strong,
.coverage-candidate-main a {
  min-width: 0;
  overflow-wrap: anywhere;
}
.coverage-candidate-score {
  display: grid;
  gap: 4px;
  justify-items: end;
  text-align: right;
  min-width: 0;
}
.coverage-candidate-score strong {
  color: var(--accent);
}
.coverage-candidate-score .muted {
  display: -webkit-box;
  max-width: 128px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.candidate-rank,
.toolbar-note {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.toolbar-note {
  align-self: center;
  line-height: 1.35;
}
.article-images-panel {
  padding-bottom: 14px;
}
.article-image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.article-image-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  background: rgba(255,255,255,.05);
  aspect-ratio: 16 / 10;
}
.article-image-tile.main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 7;
}
.article-image-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.article-image-tile span {
  position: absolute;
  left: 7px;
  bottom: 7px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(8,6,14,.72);
  color: #f7f2fb;
  font-size: 10px;
  font-weight: 800;
}
.technical-details {
  padding: 0;
  overflow: hidden;
}
.technical-details summary {
  cursor: pointer;
  padding: 12px 14px;
  color: #d7c8e8;
  font-weight: 820;
  text-transform: uppercase;
  font-size: 12px;
}
.technical-details[open] summary {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.technical-details .json-block {
  margin: 12px;
}
.json-block {
  white-space: pre-wrap;
  overflow: auto;
  max-height: 360px;
  background: rgba(0,0,0,.18);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  color: #e6ddef;
}
.image-list { display: grid; gap: 12px; }
.image-list div { display: grid; grid-template-columns: 88px 1fr; gap: 10px; align-items: start; }
.breakable { overflow-wrap: anywhere; word-break: break-word; }
.bulkbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  margin-bottom: 14px;
}
.bulkbar select {
  min-width: 220px;
}
.articles-panel,
#bulk-articles {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.articles-panel .table-scroll {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px;
}
.view-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.view-tabs a {
  text-decoration: none;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
}
.view-tabs a.active,
.view-tabs a:hover {
  color: var(--accent);
  border-color: rgba(85,239,213,.35);
}
.view-tabs span { color: inherit; opacity: .75; }
.filterbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}
.filter-actions { padding-bottom: 1px; }
.articles-table { table-layout: fixed; }
.articles-table .col-check { width: 42px; }
.articles-table .col-image { width: 108px; }
.articles-table .col-title { width: 330px; }
.articles-table .col-source { width: 170px; }
.articles-table .col-author { width: 170px; }
.articles-table .col-cats { width: 150px; }
.articles-table .col-status { width: 105px; }
.articles-table .col-text { width: 135px; }
.articles-table .col-url { width: 82px; }
.articles-table td,
.articles-table th {
  overflow-wrap: anywhere;
}
.articles-table .col-title strong {
  display: block;
  line-height: 1.35;
}
.small-metric { color: var(--muted); font-size: 18px; margin-left: 3px; }
.metric-card {
  min-height: 78px;
  display: grid;
  gap: 7px;
  padding: 11px 12px;
}
.metric-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.metric-note {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
  margin-top: 1px;
}
.metric-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  min-width: 0;
  white-space: nowrap;
}
.metric-row strong {
  color: var(--text);
  font-size: 10px;
  font-weight: 780;
}
.metric-row span:not(:first-child) {
  margin-left: 6px;
}
.metric-bar {
  height: 2px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.metric-bar span {
  display: block;
  height: 100%;
  max-width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #20a9e9);
}
.metric-card.success .metric-bar span { background: linear-gradient(90deg, var(--good), var(--accent)); }
.metric-card.warning .metric-bar span { background: linear-gradient(90deg, var(--warning), var(--accent-3)); }
.metric-card.failed .metric-bar span { background: linear-gradient(90deg, var(--danger), #ff9aa9); }
.metric-card.running .metric-bar span { background: linear-gradient(90deg, #34c3ff, var(--accent)); }
.metric-card.schedule .metric-bar span { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.metric-filter-card {
  color: inherit;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.metric-filter-card:hover,
.metric-filter-card.active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: linear-gradient(180deg, rgba(48, 46, 68, .98), rgba(32, 30, 47, .98));
}
.metric-filter-card:hover {
  transform: translateY(-1px);
}
.metric-card.ai-spend {
  color: inherit;
  text-decoration: none;
  border-color: rgba(85,239,213,.24);
}
.metric-card.ai-spend::after {
  content: "";
  position: absolute;
  inset: auto 10px 9px auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(85,239,213,.16), transparent 66%);
  pointer-events: none;
}
.metric-card.ai-spend .metric-bar span { background: linear-gradient(90deg, #20a9e9, var(--accent)); }
.cost-value {
  color: #e8fff9;
  font-size: 18px;
  white-space: nowrap;
}
.good-text { color: var(--good) !important; }
.spark.bars {
  height: 56px;
  display: flex;
  align-items: end;
  gap: 12px;
  padding-top: 8px;
}
.spark.bars i {
  display: block;
  width: 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #24aeea, var(--accent));
}
.spark.line {
  height: 48px;
  border-radius: 8px;
  background:
    linear-gradient(140deg, transparent 0 14%, rgba(85,239,213,.6) 15% 17%, transparent 18% 34%, rgba(169,84,216,.65) 35% 37%, transparent 38% 54%, rgba(85,239,213,.6) 55% 57%, transparent 58%),
    linear-gradient(180deg, transparent, rgba(85,239,213,.10));
  border-bottom: 1px solid rgba(85,239,213,.25);
}
.progress {
  height: 9px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}
.progress.big { height: 14px; margin-top: 8px; }
.progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #20a9e9);
  border-radius: inherit;
}
.skeleton-stack {
  display: grid;
  gap: 9px;
}
.skeleton-stack span,
.skeleton-line {
  display: block;
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), rgba(96,165,250,.18), rgba(255,255,255,.045));
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.skeleton-stack span:nth-child(2) { width: 82%; }
.skeleton-stack span:nth-child(3) { width: 64%; }
.skeleton-loading {
  position: relative;
}
.skeleton-loading,
.skeleton-loading * {
  cursor: wait !important;
}
.skeleton-loading :is(
  .stat-value,
  .stat-label,
  .metric-note,
  .metric-row,
  .badge,
  h1,
  h2,
  h3,
  p,
  strong,
  small,
  dt,
  dd,
  th,
  td,
  label > span,
  .muted,
  .trend-sources,
  .coverage-facts,
  .ops-facts,
  .ops-url,
  .run-event-meta,
  .article-meta,
  .category-count
) {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  text-shadow: none !important;
}
.skeleton-loading :is(
  .stat-value,
  .stat-label,
  .metric-note,
  .metric-row,
  .badge,
  h1,
  h2,
  h3,
  p,
  strong,
  small,
  dt,
  dd,
  th,
  td,
  label > span,
  .muted,
  .trend-sources,
  .coverage-facts,
  .ops-facts,
  .ops-url,
  .run-event-meta,
  .article-meta,
  .category-count
)::after {
  content: "";
  position: absolute;
  inset: 2px 0;
  min-height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), rgba(96,165,250,.2), rgba(255,255,255,.045));
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.15s ease-in-out infinite;
}
.skeleton-loading :is(.panel, .card, .trend-card, .coverage-item, .news-card, .spider-card, .ops-row, tr) {
  animation: subtle-pulse 1.8s ease-in-out infinite;
}
.skeleton-loading :is(img, .image-placeholder, .thumb, .hero-image, .source-logo) {
  opacity: .18;
  filter: grayscale(1);
}
.skeleton-loading :is(input, select, textarea) {
  color: transparent;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), rgba(96,165,250,.18), rgba(255,255,255,.045));
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.15s ease-in-out infinite;
}
.skeleton-loading :is(button, .button) {
  opacity: .7;
}
.skeleton-loading .progress span,
.skeleton-loading .metric-bar span,
.skeleton-loading .trend-ai-progress span {
  background: linear-gradient(90deg, rgba(37,99,235,.28), rgba(96,165,250,.68), rgba(37,99,235,.28));
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.15s ease-in-out infinite;
}
.skeleton-loading.ai-pending .trend-card,
.skeleton-loading.ai-pending .trend-hero,
.skeleton-loading.ai-pending .coverage-list,
.skeleton-loading.ai-pending .story-timeline {
  border-color: rgba(96,165,250,.3);
}
.donut {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 38%, #20a9e9 38% 72%, var(--accent-2) 72% 100%);
  position: relative;
}
.donut::after {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--panel);
}
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 12px; }
.news-card {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255,255,255,.035);
}
.news-card img {
  width: 92px;
  height: 58px;
  object-fit: cover;
  border-radius: 7px;
}
.news-card p { margin: 4px 0 0; }
.category-stats { grid-template-columns: repeat(4, minmax(160px, 1fr)); }
.category-card { text-decoration: none; min-height: 130px; }
.category-card:hover { border-color: rgba(85,239,213,.45); transform: translateY(-1px); }
.live-panel { border-color: rgba(85,239,213,.28); }
.error-panel {
  border-color: rgba(255,107,129,.45);
  background: linear-gradient(180deg, rgba(54,30,45,.98), rgba(32,24,36,.98));
}
.run-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.run-head p { margin: 4px 0 0; }
.run-progress { margin: 18px 0; }
.progress-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
}
.progress-label strong { color: var(--accent); }
.run-stats { grid-template-columns: repeat(5, minmax(120px, 1fr)); margin-top: 16px; }
.run-stats .card { min-height: 100px; }
.live-indicator {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--accent);
  font-weight: 760;
}
.live-indicator span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(85,239,213,.7);
  animation: pulse 1.4s infinite;
}
.run-facts {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px;
  margin: 0;
}
.run-facts dt { color: var(--muted); }
.run-facts dd { margin: 0; }
.danger-text { color: var(--danger); }
.danger-zone {
  border-color: rgba(255,107,129,.22);
  background:
    linear-gradient(135deg, rgba(255,107,129,.08), rgba(255,255,255,.025) 42%),
    var(--panel);
}
.compact-text {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.45;
}
.spider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}
.spider-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
}
.spider-card:hover {
  border-color: rgba(85,239,213,.32);
  background: rgba(255,255,255,.045);
}
.spider-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.spider-card h3 {
  margin: 0;
  font-size: 16px;
}
.spider-card p { margin: 4px 0 0; }
.spider-facts {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 7px 10px;
  margin: 0;
  font-size: 13px;
}
.spider-facts dt { color: var(--muted); }
.spider-facts dd { margin: 0; min-width: 0; }
.run-events {
  display: grid;
  gap: 12px;
}
.run-event {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
}
.run-event.success { border-left-color: var(--good); }
.run-event.failed { border-left-color: var(--danger); }
.run-event.partial { border-left-color: var(--warning); }
.run-event-media img,
.image-placeholder {
  width: 112px;
  height: 68px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: rgba(0,0,0,.2);
}
.run-event-media img {
  display: block;
  object-fit: cover;
}
.image-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
}
.run-event-body {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.run-event-body strong {
  line-height: 1.35;
}
.run-event-top,
.run-event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.run-event-meta {
  color: var(--muted);
  font-size: 12px;
}
.run-event-meta span:not(:last-child)::after {
  content: "·";
  margin-left: 6px;
  color: rgba(255,255,255,.36);
}
.run-event-url {
  font-size: 12px;
}
.run-event-actions {
  display: grid;
  gap: 8px;
}
.run-event-actions .button {
  text-align: center;
  white-space: nowrap;
}
.spider-news-grid .news-card {
  grid-template-columns: 92px minmax(0, 1fr) auto;
}
.spider-news-grid .image-placeholder {
  width: 92px;
  height: 58px;
}
.health-summary { margin-bottom: 18px; }
.health-chart-panel {
  overflow: visible;
  padding: 14px 16px;
}
.run-chart {
  position: relative;
  min-height: 150px;
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 20%, rgba(169,84,216,.16), transparent 32%),
    radial-gradient(circle at 82% 10%, rgba(85,239,213,.12), transparent 30%),
    linear-gradient(180deg, rgba(85,239,213,.055), transparent 58%),
    rgba(0,0,0,.14);
  overflow: hidden;
}
.run-chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.chart-grid-line {
  stroke: rgba(255,255,255,.065);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}
.chart-axis-label {
  fill: var(--muted);
  font-size: 11px;
}
.chart-area {
  fill: url("#chartAreaGradient");
}
.chart-line {
  fill: none;
  stroke: url("#chartLineGradient");
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-line-glow {
  stroke: rgba(85,239,213,.32);
  stroke-width: 3.5;
  filter: blur(4px);
  opacity: .48;
}
.chart-point-ring {
  fill: rgba(15,15,18,.82);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 5px rgba(85,239,213,.20));
  transition: r .14s ease, stroke-width .14s ease, filter .14s ease;
}
.chart-point-ring.active {
  r: 8.8;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 10px rgba(85,239,213,.52));
}
.chart-point-logo {
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition: transform .14s ease, filter .14s ease;
  transform-box: fill-box;
  transform-origin: center;
}
.chart-point-logo.active {
  transform: scale(1.12);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.42));
}
.chart-dot {
  stroke: rgba(12,11,18,.96);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 5px rgba(85,239,213,.22));
  transition: r .14s ease, stroke .14s ease, filter .14s ease;
}
.chart-dot.active {
  r: 5.2;
  stroke: rgba(255,255,255,.92);
  filter: drop-shadow(0 0 10px rgba(85,239,213,.62));
}
.chart-dot.running {
  animation: pulse 1.4s infinite;
}
.chart-guide {
  stroke: rgba(255,255,255,.18);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}
.chart-hit {
  fill: transparent;
  cursor: pointer;
}
.chart-tooltip {
  position: absolute;
  z-index: 5;
  width: min(300px, calc(100% - 20px));
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(85,239,213,.32);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(36,34,53,.98), rgba(17,16,25,.98));
  box-shadow: 0 18px 42px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events: none;
}
.tooltip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.chart-tooltip strong,
.tooltip-metrics strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}
.tooltip-head > strong {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.tooltip-head b {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  background: rgba(255,255,255,.07);
  color: var(--muted);
}
.tooltip-head b.success { color: var(--good); background: rgba(100,244,196,.13); }
.tooltip-head b.partial { color: var(--warning); background: rgba(255,209,102,.13); }
.tooltip-head b.failed { color: var(--danger); background: rgba(255,107,129,.13); }
.tooltip-head b.running { color: #34c3ff; background: rgba(52,195,255,.13); }
.chart-tooltip span,
.chart-tooltip em {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  font-style: normal;
}
.tooltip-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.tooltip-metrics span {
  padding: 7px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.035);
}
.tooltip-metrics strong {
  display: block;
  color: var(--accent);
  font-size: 15px;
}
.chart-empty {
  fill: var(--muted);
  font-size: 13px;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.chart-legend i.success { background: var(--good); }
.chart-legend i.partial { background: var(--warning); }
.chart-legend i.failed { background: var(--danger); }
.chart-legend i.running { background: #34c3ff; }
.health-grid { display: grid; gap: 14px; }
.operational-panel {
  padding: 14px 14px 10px;
}
.run-head.compact {
  margin-bottom: 10px;
}
.run-head.compact h2 {
  margin-bottom: 2px;
}
.ops-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
}
.ops-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.ops-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  padding: 6px 9px;
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  color: #d9cdea;
  font-size: 11px;
}
.ops-tab:hover,
.ops-tab.active {
  border-color: rgba(85,239,213,.45);
  background: linear-gradient(135deg, rgba(85,239,213,.18), rgba(32,169,233,.12));
  color: #f2fffb;
}
.ops-tab span {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  color: var(--accent);
  font-size: 10px;
  font-weight: 850;
}
.ops-search {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.ops-search span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}
.ops-search input {
  height: 34px;
  padding: 7px 10px;
  font-size: 12px;
}
.ops-list {
  display: grid;
  gap: 11px;
}
.ops-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.ops-pagination span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ops-row {
  display: grid;
  grid-template-columns: 430px 360px 92px minmax(360px, 1fr);
  align-items: start;
  gap: 12px;
  padding: 13px 12px 12px;
  border: 1px solid rgba(255,255,255,.075);
  border-left: 3px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
    rgba(0,0,0,.08);
}
.ops-row.success { border-left-color: var(--good); }
.ops-row.partial,
.ops-row.warning { border-left-color: var(--warning); }
.ops-row.failed { border-left-color: var(--danger); }
.ops-row.running { border-left-color: #34c3ff; }
.ops-row.paused { opacity: .72; }
.ops-source {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.ops-source h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
}
.ops-source p {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.25;
}
.ops-url {
  width: min(360px, 100%);
  min-height: 28px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ops-status-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 41px;
}
.ops-metrics {
  display: grid;
  grid-template-columns: repeat(4, 84px);
  gap: 8px;
  justify-content: start;
}
.ops-metrics div {
  min-width: 0;
  height: 44px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 7px;
  background: rgba(255,255,255,.032);
}
.ops-metrics span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.1;
  text-transform: uppercase;
  font-weight: 760;
}
.ops-metrics strong {
  display: block;
  margin-top: 3px;
  color: var(--accent);
  font-size: 15px;
  line-height: 1;
}
.ops-progress {
  width: 86px;
  margin-top: 18px;
}
.ops-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(72px, 1fr));
  gap: 5px 12px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}
.ops-facts span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ops-facts b {
  color: #d9cdea;
  font-weight: 760;
}
.ops-facts .wide {
  grid-column: 1 / -1;
}
.ops-message {
  grid-column: 1 / -1;
  margin: -3px 0 0 41px;
  font-size: 11px;
  line-height: 1.35;
}
.ops-timeline {
  grid-column: 1 / span 2;
  margin-left: 41px;
}
.ops-actions {
  grid-column: 4;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}
.ops-actions form {
  margin: 0;
}
.ops-actions button,
.ops-actions .button {
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.ops-empty {
  margin: 6px 2px 2px;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,.13);
  border-radius: 8px;
}
.trend-summary {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  margin-bottom: 14px;
}
.ai-job-panel {
  border-color: rgba(85,239,213,.24);
}
.trend-ai-status {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: -2px 0 12px;
  padding: 9px 11px;
  border: 1px solid rgba(85,239,213,.20);
  border-radius: 8px;
  background: rgba(85,239,213,.045);
  color: var(--muted);
  font-size: 12px;
}
.trend-ai-status strong {
  color: var(--accent);
  margin-right: 7px;
}
.trend-ai-status > div {
  display: flex;
  gap: 10px;
  align-items: center;
}
.trend-ai-status > div:last-child {
  justify-content: flex-end;
}
.trend-ai-progress {
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.trend-ai-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #20a9e9);
  transition: width .28s ease;
}
.ai-job-card {
  display: grid;
  gap: 12px;
}
.ai-job-card.running {
  animation: subtle-pulse 1.8s ease-in-out infinite;
}
.ai-cost-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}
.ai-cost-row span {
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 7px;
  background: rgba(255,255,255,.032);
  color: var(--muted);
  font-size: 12px;
}
.ai-cost-row strong {
  color: var(--accent);
}
.ai-diff-list {
  display: grid;
  gap: 8px;
}
.ai-diff-item {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 8px;
  background: rgba(0,0,0,.12);
  animation: diff-arrive .38s ease-out both;
}
.ai-diff-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.diff-line {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  font-size: 12px;
}
.diff-line span,
.diff-summary span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 760;
}
.diff-line del {
  color: rgba(255,107,129,.78);
  text-decoration-color: rgba(255,107,129,.65);
}
.diff-line ins {
  color: var(--good);
  text-decoration: none;
  animation: text-change .9s ease-out both;
}
.diff-summary p {
  margin: 4px 0 0;
  color: #dacee7;
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trend-toolbar {
  display: grid;
  grid-template-columns: 150px 150px minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
}
.trend-toolbar.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.trend-toolbar.compact strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}
.trend-toolbar.compact .trend-rule-note {
  margin: 4px 0 0;
}
.trend-rule-note {
  margin: 12px 0 0;
  font-size: 12px;
}
.check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
}
.trend-list {
  display: grid;
  gap: 12px;
}
.trend-dashboard {
  display: grid;
  gap: 14px;
}
.trend-section-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin-top: 2px;
}
.trend-section-head h2 {
  margin: 2px 0 0;
  font-size: 21px;
  line-height: 1.15;
  color: var(--text);
}
.trend-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.trend-tabs {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: thin;
}
.trend-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.12);
  background: linear-gradient(135deg, #55efd5, #b9f8ed);
  color: #090812;
  text-decoration: none;
  font-size: 12px;
  font-weight: 720;
}
.trend-tabs a:hover {
  color: #090812;
  border-color: rgba(255,255,255,.55);
  filter: brightness(1.08);
}
.trend-tabs a.active {
  color: #090812;
  border-color: rgba(255,255,255,.78);
  box-shadow: 0 0 0 2px rgba(255,255,255,.16), 0 14px 26px rgba(85,239,213,.13);
}
.trend-tabs a:nth-child(2n) { background: linear-gradient(135deg, #ffd166, #ffe8a6); }
.trend-tabs a:nth-child(3n) { background: linear-gradient(135deg, #7dd3fc, #c9efff); }
.trend-tabs a:nth-child(4n) { background: linear-gradient(135deg, #f5a3c7, #ffd4e7); }
.trend-tabs a:nth-child(5n) { background: linear-gradient(135deg, #a7f3d0, #d8ffee); }
.trend-tabs a:nth-child(6n) { background: linear-gradient(135deg, #c4b5fd, #e7ddff); }
.trend-tabs strong {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.14);
  color: #090812;
  font-size: 11px;
}
.trend-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px 132px minmax(0, 1fr) 132px;
  gap: 14px;
  align-items: center;
  padding: 12px;
  margin-bottom: 0;
  background:
    linear-gradient(135deg, rgba(85,239,213,.075), transparent 34%),
    linear-gradient(180deg, rgba(36,34,53,.98), rgba(28,26,41,.98));
}
.trend-card:hover {
  border-color: rgba(85,239,213,.36);
  background:
    linear-gradient(135deg, rgba(85,239,213,.11), transparent 36%),
    linear-gradient(180deg, rgba(39,37,57,.98), rgba(29,27,43,.98));
}
.trend-card.featured {
  min-height: 0;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "media media"
    "rank body"
    "aside aside";
  align-items: start;
  overflow: hidden;
  padding: 0;
  border-color: rgba(85,239,213,.18);
}
.trend-card.featured .trend-rank {
  grid-area: rank;
  position: static;
  margin: 14px 0 0 14px;
  background: rgba(85,239,213,.12);
  backdrop-filter: none;
}
.trend-card.featured .trend-media {
  grid-area: media;
  position: relative;
  inset: auto;
}
.trend-card.featured .trend-media::after {
  content: none;
}
.trend-card.featured .trend-media img,
.trend-card.featured .trend-media .image-placeholder {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}
.trend-card.featured .trend-body {
  grid-area: body;
  position: relative;
  z-index: 1;
  padding: 13px 14px 0 4px;
}
.trend-card.featured .trend-body h2 {
  font-size: 17px;
  line-height: 1.22;
  -webkit-line-clamp: 2;
}
.trend-card.featured .trend-body p {
  -webkit-line-clamp: 4;
}
.trend-card.featured .keyword-row {
  display: flex;
}
.trend-card.featured .trend-aside {
  grid-area: aside;
  position: static;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.065);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
}
.trend-card.featured .trend-aside .muted {
  display: inline;
}
.trend-card.ai-pending .trend-meta .badge,
.trend-card.ai-pending .trend-body h2,
.trend-card.ai-pending .trend-body p,
.trend-card.ai-pending .trend-sources,
.trend-card.ai-pending .trend-aside strong,
.trend-dashboard.htmx-request .trend-card .trend-meta .badge,
.trend-dashboard.htmx-request .trend-card .trend-body h2,
.trend-dashboard.htmx-request .trend-card .trend-body p,
.trend-dashboard.htmx-request .trend-card .trend-sources,
.trend-dashboard.htmx-request .trend-card .trend-aside strong,
.trend-list.htmx-request .trend-card .trend-meta .badge,
.trend-list.htmx-request .trend-card .trend-body h2,
.trend-list.htmx-request .trend-card .trend-body p,
.trend-list.htmx-request .trend-card .trend-sources,
.trend-list.htmx-request .trend-card .trend-aside strong {
  position: relative;
  overflow: hidden;
}
.trend-card.ai-pending .trend-body h2 a,
.trend-card.ai-pending .trend-body p,
.trend-card.ai-pending .trend-meta .badge,
.trend-card.ai-pending .trend-sources > span,
.trend-card.ai-pending .trend-aside strong,
.trend-dashboard.htmx-request .trend-card .trend-body h2 a,
.trend-dashboard.htmx-request .trend-card .trend-body p,
.trend-dashboard.htmx-request .trend-card .trend-meta .badge,
.trend-dashboard.htmx-request .trend-card .trend-sources > span,
.trend-dashboard.htmx-request .trend-card .trend-aside strong,
.trend-list.htmx-request .trend-card .trend-body h2 a,
.trend-list.htmx-request .trend-card .trend-body p,
.trend-list.htmx-request .trend-card .trend-meta .badge,
.trend-list.htmx-request .trend-card .trend-sources > span,
.trend-list.htmx-request .trend-card .trend-aside strong {
  color: transparent;
}
.trend-card.ai-pending .trend-meta .badge::after,
.trend-card.ai-pending .trend-body h2::after,
.trend-card.ai-pending .trend-body p::after,
.trend-card.ai-pending .trend-sources::after,
.trend-card.ai-pending .trend-aside strong::after,
.trend-dashboard.htmx-request .trend-card .trend-meta .badge::after,
.trend-dashboard.htmx-request .trend-card .trend-body h2::after,
.trend-dashboard.htmx-request .trend-card .trend-body p::after,
.trend-dashboard.htmx-request .trend-card .trend-sources::after,
.trend-dashboard.htmx-request .trend-card .trend-aside strong::after,
.trend-list.htmx-request .trend-card .trend-meta .badge::after,
.trend-list.htmx-request .trend-card .trend-body h2::after,
.trend-list.htmx-request .trend-card .trend-body p::after,
.trend-list.htmx-request .trend-card .trend-sources::after,
.trend-list.htmx-request .trend-card .trend-aside strong::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045), rgba(96,165,250,.2), rgba(255,255,255,.045));
  background-size: 220% 100%;
  animation: skeleton-shimmer 1.15s ease-in-out infinite;
}
.trend-card.ai-pending .trend-body h2::after,
.trend-dashboard.htmx-request .trend-card .trend-body h2::after,
.trend-list.htmx-request .trend-card .trend-body h2::after {
  height: 43px;
}
.trend-card.ai-pending .trend-body p::after,
.trend-dashboard.htmx-request .trend-card .trend-body p::after,
.trend-list.htmx-request .trend-card .trend-body p::after {
  height: 38px;
}
.trend-card.ai-pending .trend-sources::after,
.trend-dashboard.htmx-request .trend-card .trend-sources::after,
.trend-list.htmx-request .trend-card .trend-sources::after {
  height: 20px;
}
.trend-card.ai-updated {
  border-color: rgba(85,239,213,.38);
  animation: card-refresh .9s ease-out both;
}
.trend-card.ai-updated .trend-body h2,
.trend-card.ai-updated .trend-body p {
  animation: text-change .95s ease-out both;
}
.badge.ai-badge {
  background: rgba(85,239,213,.13);
  color: var(--accent);
  border-color: rgba(85,239,213,.32);
}
.trend-rank {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(85,239,213,.12);
  border: 1px solid rgba(85,239,213,.28);
  color: var(--accent);
  font-weight: 850;
  font-size: 12px;
}
.trend-media img,
.trend-media .image-placeholder {
  width: 132px;
  height: 78px;
  border-radius: 7px;
  object-fit: cover;
}
.trend-body {
  min-width: 0;
}
.trend-body h2,
.trend-hero h2 {
  margin: 7px 0 6px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
  text-transform: none;
}
.trend-body h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trend-body h2 a {
  text-decoration: none;
}
.trend-body p,
.trend-hero p {
  margin: 0;
  color: #cfc2dd;
  line-height: 1.45;
}
.trend-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.trend-card-summary {
  max-width: 72ch;
  font-size: 13px;
}
.trend-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.inline-category-form {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin: 0;
}
.inline-category-form select {
  width: auto;
  min-width: 128px;
  max-width: 210px;
  height: 26px;
  padding: 3px 26px 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 760;
  color: #090812;
  border-color: rgba(85,239,213,.45);
  background: var(--accent);
}
.inline-category-form .badge {
  height: 24px;
  align-items: center;
}
.keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.keyword-row span {
  color: var(--muted);
  font-size: 11px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.07);
}
.trend-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 10px;
  max-height: 25px;
  overflow: hidden;
}
.trend-card .keyword-row {
  display: none;
}
.trend-aside {
  display: grid;
  justify-items: end;
  gap: 4px;
  font-size: 12px;
}
.trend-aside form {
  margin: 0;
  width: 100%;
}
.trend-aside .button,
.trend-aside button {
  width: 100%;
  min-height: 30px;
  padding: 6px 8px;
  text-align: center;
  font-size: 12px;
}
.trend-aside strong {
  color: var(--accent);
  font-size: 17px;
}
.trend-hero {
  display: grid;
  grid-template-columns: minmax(230px, 380px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.trend-story-layout {
  grid-template-columns: .88fr 1.12fr;
}
.coverage-summary {
  margin: 0;
  color: #e8dff1;
  font-size: 15px;
  line-height: 1.58;
}
.coverage-hero-card {
  position: relative;
  overflow: hidden;
}
.coverage-hero-card .trend-meta {
  margin-bottom: 10px;
}
.coverage-edit-toggle {
  min-height: 26px;
  padding: 4px 10px;
  font-size: 11px;
}
.coverage-editor-stage {
  position: relative;
  transition: min-height .18s ease;
}
.coverage-read-view,
.coverage-inline-editor {
  transition: opacity .16s ease, transform .16s ease;
}
.coverage-read-view h2 {
  margin-top: 0;
}
.coverage-read-view p {
  color: #e8dff1;
  line-height: 1.56;
}
.coverage-inline-editor {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}
.coverage-hero-card.is-editing .coverage-read-view {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}
.coverage-hero-card.is-editing .coverage-inline-editor {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.save-confirmation {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 7px 10px;
  border: 1px solid rgba(85,239,213,.42);
  border-radius: 999px;
  background: rgba(85,239,213,.16);
  color: var(--accent);
  font-size: 12px;
  font-weight: 820;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  transition: opacity .22s ease, transform .22s ease;
}
.save-confirmation.is-hiding {
  opacity: 0;
  transform: translateY(-5px);
}
.coverage-editorial-form {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.4fr);
  gap: 12px;
  align-items: end;
}
.coverage-editorial-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.coverage-editorial-form textarea {
  min-height: 118px;
  resize: vertical;
  line-height: 1.45;
}
.coverage-editorial-form label:nth-child(2) {
  grid-row: span 2;
}
.coverage-editorial-form .actions {
  justify-content: flex-start;
}
.coverage-inline-editor .actions {
  align-self: end;
}
.coverage-image-picker {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 220px);
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
}
.coverage-image-option {
  margin: 0;
  scroll-snap-align: start;
}
.coverage-image-option button {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 7px;
  text-align: left;
  color: var(--text);
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
}
.coverage-image-option button:hover {
  border-color: rgba(85,239,213,.45);
  background: rgba(85,239,213,.075);
}
.coverage-image-option.selected button {
  border-color: rgba(85,239,213,.72);
  background: rgba(85,239,213,.105);
  box-shadow: 0 0 0 1px rgba(85,239,213,.18) inset;
}
.coverage-image-option img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(255,255,255,.04);
}
.coverage-image-option span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.coverage-image-option strong {
  color: var(--accent);
  font-size: 12px;
}
.coverage-image-option small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.story-timeline {
  display: grid;
  gap: 0;
  position: relative;
}
.story-timeline-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  position: relative;
  padding: 0 0 14px;
}
.story-timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 17px;
  bottom: -2px;
  width: 1px;
  background: linear-gradient(180deg, rgba(85,239,213,.55), rgba(85,239,213,.08));
}
.story-dot {
  width: 13px;
  height: 13px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px rgba(85,239,213,.08);
  z-index: 1;
}
.story-timeline-item strong {
  display: block;
  margin: 2px 0 3px;
  color: var(--text);
  line-height: 1.35;
}
.story-timeline-item p {
  margin: 0;
  color: #cfc2dd;
  font-size: 13px;
  line-height: 1.45;
}
.trend-hero-media {
  min-width: 0;
}
.hero-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.coverage-list {
  display: grid;
  gap: 10px;
}
.coverage-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.075);
  border-left: 3px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(255,255,255,.028);
}
.coverage-item.representative {
  border-left-color: var(--accent);
  background: rgba(85,239,213,.045);
}
.coverage-media .thumb,
.small-placeholder {
  width: 88px;
  height: 56px;
}
.coverage-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.coverage-body strong {
  line-height: 1.32;
}
.coverage-body p {
  margin: 0;
  font-size: 12px;
}
.coverage-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.coverage-facts > span:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  color: rgba(255,255,255,.32);
}
.coverage-actions {
  display: grid;
  gap: 8px;
}
.coverage-actions .button {
  text-align: center;
  white-space: nowrap;
}
.health-card {
  display: grid;
  gap: 13px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.028);
}
.health-card.success { border-color: rgba(85,239,213,.38); }
.health-card.partial,
.health-card.warning { border-color: rgba(255,209,102,.42); }
.health-card.failed { border-color: rgba(255,107,129,.45); }
.health-card.running { border-color: rgba(32,169,233,.45); }
.health-card.paused { opacity: .72; }
.health-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.health-card h3 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0;
}
.health-card p { margin: 4px 0 0; }
.health-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.health-metrics div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
  background: rgba(0,0,0,.13);
}
.health-metrics strong {
  display: block;
  color: var(--accent);
  font-size: 19px;
  line-height: 1;
}
.health-metrics span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}
.progress.slim {
  height: 7px;
  margin: 0;
}
.health-facts {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 7px 10px;
  margin: 0;
  font-size: 13px;
}
.health-facts dt { color: var(--muted); }
.health-facts dd {
  margin: 0;
  min-width: 0;
}
.mini-timeline {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 14px;
}
.run-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.2);
}
.run-dot.success { background: var(--good); border-color: var(--good); }
.run-dot.partial { background: var(--warning); border-color: var(--warning); }
.run-dot.failed { background: var(--danger); border-color: var(--danger); }
.run-dot.running { background: #34c3ff; border-color: #34c3ff; animation: pulse 1.4s infinite; }
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 14px;
}
.button.disabled {
  opacity: .45;
  pointer-events: none;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 10px rgba(85,239,213,0); }
  100% { box-shadow: 0 0 0 0 rgba(85,239,213,0); }
}
@keyframes loading-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes subtle-pulse {
  0%, 100% { border-color: rgba(96,165,250,.22); }
  50% { border-color: rgba(96,165,250,.48); }
}
@keyframes diff-arrive {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes text-change {
  0% { background: rgba(85,239,213,.18); box-shadow: 0 0 0 3px rgba(85,239,213,.10); }
  100% { background: transparent; box-shadow: none; }
}
@keyframes card-refresh {
  0% { box-shadow: 0 0 0 1px rgba(85,239,213,.10), 0 0 0 rgba(85,239,213,0); }
  35% { box-shadow: 0 0 0 1px rgba(85,239,213,.34), 0 0 28px rgba(85,239,213,.10); }
  100% { box-shadow: 0 18px 40px var(--shadow); }
}
@media (max-width: 1380px) {
  .ops-row {
    grid-template-columns: 340px 340px 82px minmax(280px, 1fr);
  }
  .ops-url {
    width: min(290px, 100%);
  }
  .ops-metrics {
    grid-template-columns: repeat(4, 78px);
  }
  .ops-actions button,
  .ops-actions .button {
    padding-inline: 7px;
  }
}
@media (max-width: 1000px) {
  .shell { grid-template-columns: 1fr; }
  .content { max-width: calc(100vw - 56px); }
  .sidebar { min-height: auto; }
  .stats { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .ops-toolbar {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ops-row {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
  }
  .ops-url {
    width: min(420px, 100%);
  }
  .ops-metrics {
    grid-template-columns: repeat(4, minmax(72px, 1fr));
  }
  .ops-progress {
    width: 100%;
    margin-top: 0;
  }
  .ops-timeline,
  .ops-actions {
    grid-column: 1 / -1;
  }
  .ops-actions {
    justify-content: flex-start;
    margin-left: 41px;
  }
  .columns, .dashboard-grid, .form-grid, .form-grid.compact, .article-hero, .article-detail-layout, .meta-grid, .news-grid, .run-stats, .filterbar, .trend-toolbar, .trend-hero, .trend-feature-grid, .ai-cost-row, .trend-ai-status, .coverage-editorial-form { grid-template-columns: 1fr; }
  .trend-ai-status > div:last-child { justify-content: flex-start; }
  .filter-actions { padding-bottom: 0; }
  .trend-card { grid-template-columns: 42px 120px minmax(0, 1fr); }
  .coverage-candidate-row { grid-template-columns: 24px 72px minmax(0, 1fr); }
  .coverage-candidate-score { grid-column: 3; justify-items: start; text-align: left; }
  .trend-media img,
  .trend-media .image-placeholder {
    width: 120px;
    height: 72px;
  }
  .trend-aside {
    grid-column: 1 / -1;
    justify-items: start;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
  }
  .coverage-item { grid-template-columns: 88px minmax(0, 1fr); }
  .coverage-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
  .run-event { grid-template-columns: 96px minmax(0, 1fr); }
  .run-event-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
  .run-event-media img,
  .run-event-media .image-placeholder {
    width: 96px;
    height: 60px;
  }
}
@media (max-width: 720px) {
  .shell { padding: 14px; }
  .content { max-width: calc(100vw - 28px); }
  .sidebar { padding: 16px; }
  .nav a { padding: 8px 10px; }
  .topline { align-items: flex-start; gap: 12px; flex-direction: column; }
  .stats { grid-template-columns: 1fr; }
  .ops-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .ops-tab {
    flex: 0 0 auto;
  }
  .ops-url {
    max-width: min(72vw, 42ch);
  }
  .ops-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .ops-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ops-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ops-timeline,
  .ops-actions {
    margin-left: 0;
  }
  .ops-message {
    margin-left: 0;
  }
  .news-card { grid-template-columns: 1fr; }
  .bulkbar { align-items: stretch; flex-direction: column; }
  .bulkbar .actions,
  .filter-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .bulkbar select,
  .bulkbar button,
  .filter-actions button,
  .filter-actions .button {
    width: 100%;
  }
  .view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .spider-grid { grid-template-columns: 1fr; }
  .spider-card-head { flex-direction: column; }
  .trend-card { grid-template-columns: 1fr; }
  .trend-rank { position: absolute; margin: 8px; }
  .trend-card.featured .trend-rank {
    position: static;
    margin: 14px 0 0 14px;
  }
  .trend-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .trend-section-head h2 {
    font-size: 19px;
  }
  .trend-media img,
  .trend-media .image-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .trend-aside { grid-auto-flow: row; }
  .coverage-item { grid-template-columns: 1fr; }
  .coverage-media .thumb,
  .small-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .run-event { grid-template-columns: 1fr; }
  .run-event-media img,
  .run-event-media .image-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .spider-news-grid .news-card { grid-template-columns: 1fr; }
  .spider-news-grid .image-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .table-scroll .table { min-width: 820px; }
  .articles-table .col-image,
  .articles-table .col-cats {
    display: none;
  }
  .articles-table .col-author,
  .articles-table .col-text {
    display: none;
  }
}

/* ShadCN-like refresh: neutral surfaces, tighter controls, calmer hierarchy. */
:root {
  --bg: #09090b;
  --bg-2: #0c0c0f;
  --panel: #111113;
  --panel-2: #18181b;
  --topbar: #0c0c0f;
  --line: #27272a;
  --line-2: #3f3f46;
  --text: #fafafa;
  --muted: #a1a1aa;
  --accent: #f43f5e;
  --accent-2: #22c55e;
  --accent-3: #38bdf8;
  --danger: #fb7185;
  --warning: #fbbf24;
  --good: #34d399;
  --shadow: rgba(0, 0, 0, .42);
}
body {
  font-size: 13px;
  line-height: 1.5;
  background:
    radial-gradient(circle at 18% -10%, rgba(244,63,94,.08), transparent 28%),
    radial-gradient(circle at 82% -8%, rgba(56,189,248,.06), transparent 30%),
    var(--bg);
}
.shell {
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 20px;
  padding: 16px;
}
.sidebar {
  min-height: calc(100vh - 32px);
  position: sticky;
  top: 16px;
  background: rgba(12,12,15,.88);
  border-color: rgba(63,63,70,.72);
  border-radius: 10px;
  padding: 14px 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.32);
  backdrop-filter: blur(16px);
}
.brand {
  display: flex;
  align-items: center;
  height: 42px;
  margin: 0 0 14px;
  padding: 0 10px;
  font-size: 17px;
  letter-spacing: -.02em;
}
.brand::before {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fb7185, #f43f5e);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.nav { gap: 3px; }
.nav a {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 7px;
  color: #d4d4d8;
  font-size: 12px;
  font-weight: 640;
}
.nav a:hover {
  color: var(--text);
  background: rgba(255,255,255,.055);
  border-color: transparent;
}
.nav a.active {
  color: #fff;
  background: rgba(244,63,94,.14);
  border-color: rgba(244,63,94,.28);
  box-shadow: inset 0 0 0 1px rgba(244,63,94,.06);
}
.nav a.active svg { color: #fb7185; }
.content { max-width: calc(100vw - 260px); }
.topline {
  min-height: 48px;
  margin-bottom: 14px;
  padding: 0 2px;
}
h1 {
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -.03em;
}
h2 {
  color: #d4d4d8;
  font-size: 12px;
  letter-spacing: .02em;
}
.muted { color: var(--muted); }
.card,
.panel {
  background: rgba(17,17,19,.88);
  border-color: rgba(63,63,70,.76);
  border-radius: 8px;
  box-shadow: 0 16px 45px rgba(0,0,0,.22);
}
.panel {
  padding: 14px;
  margin-bottom: 12px;
}
.card { padding: 13px 14px; }
.card:hover,
.panel:hover { border-color: rgba(82,82,91,.9); }
.stat-card {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 5px;
}
.stat-value {
  color: var(--text);
  font-size: 24px;
  letter-spacing: -.035em;
}
.stat-label {
  color: var(--muted);
  font-size: 11px;
  text-transform: none;
  font-weight: 620;
}
.badge {
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #18181b;
  border-color: #3f3f46;
  color: #d4d4d8;
  font-size: 11px;
  font-weight: 640;
}
.badge.active,
.badge.success,
.badge.parsed,
.badge.article,
.badge.ai-badge {
  background: rgba(34,197,94,.10);
  color: #86efac;
  border-color: rgba(34,197,94,.24);
}
.badge.running {
  background: rgba(56,189,248,.10);
  color: #7dd3fc;
  border-color: rgba(56,189,248,.24);
}
.badge.failed,
.badge.danger {
  background: rgba(244,63,94,.10);
  color: #fb7185;
  border-color: rgba(244,63,94,.26);
}
.badge.warning,
.badge.paused,
.badge.partial {
  background: rgba(251,191,36,.10);
  color: #fde68a;
  border-color: rgba(251,191,36,.24);
}
button,
.button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: rgba(244,63,94,.44);
  background: #f43f5e;
  color: #fff;
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 690;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(244,63,94,.14);
  transition: background .14s ease, border-color .14s ease, transform .14s ease, color .14s ease;
}
button:hover,
.button:hover {
  background: #fb7185;
  transform: translateY(-1px);
}
button.secondary,
.button.secondary {
  background: #18181b;
  color: #f4f4f5;
  border-color: #3f3f46;
  box-shadow: none;
}
button.secondary:hover,
.button.secondary:hover {
  background: #27272a;
  border-color: #52525b;
}
button.danger,
.button.danger {
  color: #fecdd3;
  background: rgba(244,63,94,.10);
  border-color: rgba(244,63,94,.30);
  box-shadow: none;
}
button.danger:hover,
.button.danger:hover { background: rgba(244,63,94,.18); }
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(244,63,94,.72);
  outline-offset: 2px;
}
input,
select,
textarea {
  border-color: #3f3f46;
  background: #09090b;
  color: var(--text);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: 13px;
}
select option {
  background: #09090b;
  color: var(--text);
}
label {
  color: #d4d4d8;
  font-size: 11px;
  font-weight: 650;
}
.trend-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-numbers {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-section {
  margin-top: 12px;
}
.dashboard-run-list,
.dashboard-news-list {
  display: grid;
  gap: 7px;
}
.dashboard-run {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) minmax(160px, auto);
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(63,63,70,.72);
  border-radius: 8px;
  background: rgba(24,24,27,.62);
  color: inherit;
  text-decoration: none;
}
.dashboard-run:hover,
.dashboard-news-item:hover {
  border-color: rgba(244,63,94,.34);
  background: rgba(39,39,42,.78);
}
.dashboard-run strong,
.dashboard-news-item strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dashboard-run small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-run-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.dashboard-run-stats b,
.dashboard-run-stats em,
.dashboard-run-stats i {
  color: #fafafa;
  font-style: normal;
}
.dashboard-run-stats i {
  color: #fb7185;
}
.dashboard-news-item {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 9px;
  border: 1px solid rgba(63,63,70,.72);
  border-radius: 8px;
  background: rgba(24,24,27,.55);
}
.dashboard-news-item .thumb,
.dashboard-news-item .image-placeholder {
  width: 82px;
  height: 52px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid rgba(63,63,70,.72);
}
.dashboard-news-item a {
  text-decoration: none;
}
.dashboard-news-item a:hover {
  color: #fb7185;
}
.dashboard-news-item p {
  margin: 3px 0 0;
  font-size: 12px;
}
.trend-toolbar {
  grid-template-columns: 160px 170px minmax(0, 1fr);
  gap: 10px;
}
.trend-toolbar.compact { border-top-color: rgba(63,63,70,.72); }
.trend-rule-note { color: var(--muted); }
.trend-tabs {
  gap: 6px;
  padding: 4px 0 10px;
}
.trend-tabs a {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 7px;
  border-color: #3f3f46;
  background: #18181b !important;
  color: #d4d4d8;
  font-size: 12px;
  font-weight: 650;
  box-shadow: none;
}
.trend-tabs a:hover {
  background: #27272a !important;
  color: #fff;
  border-color: #52525b;
  filter: none;
}
.trend-tabs a.active {
  background: #f4f4f5 !important;
  color: #09090b;
  border-color: #f4f4f5;
  box-shadow: none;
}
.trend-tabs strong {
  min-width: 19px;
  height: 19px;
  background: rgba(255,255,255,.10);
  color: inherit;
  font-size: 10px;
}
.trend-tabs a.active strong { background: rgba(9,9,11,.12); }
.trend-list {
  display: grid;
  gap: 8px;
}
.trend-card {
  grid-template-columns: 36px 118px minmax(0, 1fr) 116px;
  gap: 13px;
  padding: 10px;
  background: rgba(17,17,19,.90);
  border-color: rgba(63,63,70,.76);
  box-shadow: none;
}
.trend-card:hover {
  background: rgba(24,24,27,.92);
  border-color: rgba(244,63,94,.38);
}
.trend-rank {
  width: 28px;
  height: 28px;
  background: #18181b;
  border-color: #3f3f46;
  color: #a1a1aa;
  font-size: 11px;
}
.trend-media img,
.trend-media .image-placeholder {
  width: 118px;
  height: 72px;
  border-radius: 7px;
  border: 1px solid rgba(63,63,70,.74);
}
.trend-body h2,
.trend-hero h2 {
  margin: 6px 0 5px;
  font-size: 17px;
  line-height: 1.24;
  letter-spacing: -.025em;
}
.trend-body h2 a:hover { color: #fb7185; }
.trend-body p,
.trend-hero p {
  color: #a1a1aa;
  line-height: 1.5;
}
.trend-card-summary {
  font-size: 12px;
  max-width: 82ch;
}
.trend-meta { gap: 4px; }
.trend-sources {
  margin-top: 8px;
  gap: 4px;
}
.source-logo.tiny {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #f4f4f5;
}
.trend-aside { gap: 5px; }
.trend-aside strong {
  color: #f4f4f5;
  font-size: 16px;
  letter-spacing: -.02em;
}
.trend-aside .button,
.trend-aside button {
  min-height: 30px;
  font-size: 12px;
}
.trend-hero {
  grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  background:
    linear-gradient(135deg, rgba(244,63,94,.08), transparent 38%),
    rgba(17,17,19,.92);
  border-color: rgba(63,63,70,.82);
}
.trend-hero-media img,
.trend-hero-media .image-placeholder {
  border-radius: 8px;
  border: 1px solid rgba(63,63,70,.82);
}
.coverage-hero-card .trend-meta { margin-bottom: 8px; }
.coverage-edit-toggle { margin-left: auto; }
.inline-category-form select {
  height: 26px;
  min-width: 126px;
  color: #09090b;
  background: #f4f4f5;
  border-color: #f4f4f5;
  font-size: 11px;
}
.coverage-read-view p { color: #d4d4d8; }
.coverage-editorial-form textarea { background: #09090b; }
.save-confirmation {
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.28);
  color: #86efac;
  box-shadow: 0 14px 35px rgba(0,0,0,.28);
}
.coverage-image-option button {
  background: #18181b;
  border-color: #3f3f46;
  color: #f4f4f5;
  box-shadow: none;
}
.coverage-image-option button:hover {
  background: #27272a;
  border-color: #52525b;
}
.coverage-image-option.selected button {
  border-color: rgba(34,197,94,.44);
  background: rgba(34,197,94,.10);
}
.coverage-item {
  background: rgba(17,17,19,.72);
  border-color: rgba(63,63,70,.76);
}
.coverage-item.representative {
  border-color: rgba(244,63,94,.34);
  background: rgba(244,63,94,.06);
}
.table th {
  color: #a1a1aa;
  background: rgba(255,255,255,.02);
  letter-spacing: .02em;
}
.table th,
.table td { border-bottom-color: rgba(63,63,70,.72); }
.empty-state {
  border-style: dashed;
  background: rgba(17,17,19,.56);
}
@media (max-width: 980px) {
  .shell {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .sidebar {
    position: static;
    min-height: 0;
  }
  .content {
    max-width: calc(100vw - 24px);
  }
  .trend-summary {
    grid-template-columns: 1fr;
  }
  .dashboard-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .trend-card {
    grid-template-columns: 32px 112px minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .dashboard-numbers {
    grid-template-columns: 1fr;
  }
  .dashboard-run,
  .dashboard-news-item {
    grid-template-columns: 1fr;
  }
  .dashboard-run-stats {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .dashboard-news-item .thumb,
  .dashboard-news-item .image-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .trend-card {
    grid-template-columns: 1fr;
  }
  .trend-rank {
    position: absolute;
    margin: 8px;
  }
  .trend-media img,
  .trend-media .image-placeholder {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .trend-aside {
    justify-items: stretch;
  }
  .trend-toolbar {
    grid-template-columns: 1fr;
  }
}

/* Blue product accent and dashboard tab refinements. */
:root {
  --accent: #38bdf8;
  --accent-2: #2563eb;
  --accent-3: #60a5fa;
}
body {
  background:
    radial-gradient(circle at 18% -10%, rgba(56,189,248,.10), transparent 28%),
    radial-gradient(circle at 82% -8%, rgba(37,99,235,.08), transparent 30%),
    var(--bg);
}
.brand::before,
button,
.button {
  background: linear-gradient(135deg, #38bdf8, #2563eb);
}
.nav a.active {
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.30);
  box-shadow: inset 0 0 0 1px rgba(56,189,248,.08);
}
.nav a.active svg,
.trend-body h2 a:hover,
.dashboard-news-item a:hover {
  color: #7dd3fc;
}
button,
.button {
  border-color: rgba(56,189,248,.46);
  box-shadow: 0 10px 24px rgba(37,99,235,.16);
}
button:hover,
.button:hover {
  background: linear-gradient(135deg, #7dd3fc, #3b82f6);
}
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline-color: rgba(56,189,248,.76);
}
.trend-card:hover,
.dashboard-run:hover,
.dashboard-news-item:hover {
  border-color: rgba(56,189,248,.36);
}
.trend-hero {
  background:
    linear-gradient(135deg, rgba(56,189,248,.09), transparent 38%),
    rgba(17,17,19,.92);
}
.coverage-item.representative {
  border-color: rgba(56,189,248,.34);
  background: rgba(56,189,248,.06);
}
.dashboard-run-chart {
  margin-bottom: 10px;
}
.dashboard-content-tabs {
  padding-top: 12px;
}
.dashboard-tab-switch {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  background: #09090b;
}
.dashboard-tab-switch button {
  min-height: 28px;
  padding: 6px 11px;
  box-shadow: none;
}
.dashboard-tab-switch button.active {
  color: #09090b;
  background: #f4f4f5;
  border-color: #f4f4f5;
}
.dashboard-tab-panel {
  display: none;
}
.dashboard-tab-panel.active {
  display: block;
}
.dashboard-tab-panel[hidden] {
  display: none !important;
}
.dashboard-run-list {
  max-height: 310px;
  overflow: auto;
  padding-right: 2px;
}
.dashboard-chart-area {
  fill: url(#dashboardChartAreaGradient);
}
.dashboard-chart-line {
  stroke: url(#dashboardChartLineGradient);
}
@media (max-width: 720px) {
  .dashboard-tab-switch {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ShadCN-like visual refresh: neutral dark surface, blue accent, compact dashboard rhythm. */
:root {
  --radius: .625rem;
  --background: #09090b;
  --foreground: #fafafa;
  --card: #18181b;
  --card-foreground: #fafafa;
  --popover: #18181b;
  --popover-foreground: #fafafa;
  --primary: #60a5fa;
  --primary-foreground: #020617;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --accent: #38bdf8;
  --accent-foreground: #020617;
  --destructive: #fb7185;
  --border: rgba(255,255,255,.10);
  --input: rgba(255,255,255,.14);
  --ring: #60a5fa;
  --chart-1: #60a5fa;
  --chart-2: #22d3ee;
  --chart-3: #34d399;
  --chart-4: #facc15;
  --chart-5: #a78bfa;
  --sidebar: #111113;
  --sidebar-foreground: #d4d4d8;
  --sidebar-primary: #60a5fa;
  --sidebar-primary-foreground: #020617;
  --sidebar-accent: #1f2937;
  --sidebar-accent-foreground: #fafafa;
  --sidebar-border: rgba(255,255,255,.10);
  --sidebar-ring: #60a5fa;
  --bg: var(--background);
  --bg-2: #0d0d10;
  --panel: var(--card);
  --panel-2: #1f1f23;
  --topbar: var(--sidebar);
  --line: var(--border);
  --line-2: rgba(255,255,255,.16);
  --text: var(--foreground);
  --muted: var(--muted-foreground);
  --accent-2: #2563eb;
  --accent-3: #93c5fd;
  --danger: var(--destructive);
  --warning: #facc15;
  --good: #34d399;
  --shadow: rgba(0,0,0,.22);
}

@supports (color: oklch(0.145 0 0)) {
  :root {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.62 0.18 255);
    --primary-foreground: oklch(0.145 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.72 0.15 236);
    --accent-foreground: oklch(0.145 0 0);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.62 0.18 255);
    --chart-1: oklch(0.62 0.18 255);
    --chart-2: oklch(0.696 0.17 215);
    --chart-3: oklch(0.696 0.17 162.48);
    --chart-4: oklch(0.769 0.188 70.08);
    --chart-5: oklch(0.627 0.265 303.9);
    --sidebar: oklch(0.18 0 0);
    --sidebar-foreground: oklch(0.92 0 0);
    --sidebar-primary: oklch(0.62 0.18 255);
    --sidebar-primary-foreground: oklch(0.145 0 0);
    --sidebar-accent: oklch(0.245 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.62 0.18 255);
  }
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  background:
    radial-gradient(circle at 50% -22%, rgba(96,165,250,.10), transparent 31rem),
    linear-gradient(180deg, #0a0a0c 0%, var(--background) 46%);
  color: var(--foreground);
}

a { text-underline-offset: 3px; }

.shell {
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 14px;
  padding: 12px;
}

.sidebar {
  position: sticky;
  top: 12px;
  min-height: calc(100vh - 24px);
  border-radius: var(--radius);
  padding: 12px 9px;
  background: color-mix(in oklch, var(--sidebar) 96%, transparent);
  border-color: var(--sidebar-border);
  box-shadow: none;
}

.brand {
  display: flex;
  align-items: center;
  height: 36px;
  margin: 0 0 14px;
  padding: 0 9px;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: 0;
}

.brand::before {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset;
  vertical-align: 0;
}

.nav { gap: 2px; }

.nav a {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--sidebar-foreground);
  font-size: 12px;
  font-weight: 560;
  letter-spacing: 0;
}

.nav svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.8;
  opacity: .72;
}

.nav a:hover {
  color: var(--foreground);
  background: var(--sidebar-accent);
  border-color: transparent;
}

.nav a.active {
  color: var(--foreground);
  background: linear-gradient(90deg, rgba(96,165,250,.18), rgba(56,189,248,.08));
  border-color: rgba(96,165,250,.32);
  box-shadow: none;
}

.content {
  max-width: calc(100vw - 214px);
  padding: 0;
}

.topline {
  min-height: 42px;
  margin-bottom: 12px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--border);
}

h1 {
  font-size: 18px;
  font-weight: 720;
  letter-spacing: -.015em;
}

h2 {
  color: var(--foreground);
  font-size: 11px;
  font-weight: 660;
  letter-spacing: .02em;
  margin-bottom: 8px;
}

.muted,
.topline .muted {
  color: var(--muted-foreground);
}

.grid { gap: 10px; }

.stats,
.dashboard-numbers {
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
}

.card,
.panel {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: color-mix(in oklch, var(--card) 96%, transparent);
  box-shadow: none;
}

.card:hover,
.panel:hover {
  border-color: rgba(255,255,255,.16);
}

.card { padding: 12px; }
.panel { padding: 12px; margin-bottom: 10px; }

.stat-card {
  min-height: 72px;
  display: grid;
  align-content: space-between;
}

.stat-value {
  color: var(--foreground);
  font-size: 22px;
  font-weight: 710;
  letter-spacing: -.03em;
}

.stat-label {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 520;
  text-transform: none;
}

button,
.button {
  min-height: 30px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid rgba(96,165,250,.40);
  background: linear-gradient(180deg, rgba(96,165,250,.98), rgba(37,99,235,.98));
  color: #eff6ff;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
}

button:hover,
.button:hover {
  background: linear-gradient(180deg, rgba(147,197,253,1), rgba(59,130,246,1));
  border-color: rgba(147,197,253,.64);
  transform: none;
}

button.secondary,
.button.secondary {
  color: var(--foreground);
  background: var(--secondary);
  border-color: var(--border);
}

button.secondary:hover,
.button.secondary:hover {
  color: var(--foreground);
  background: #303034;
  border-color: rgba(255,255,255,.18);
}

button.danger,
.button.danger {
  color: #fecdd3;
  background: rgba(244,63,94,.10);
  border-color: rgba(244,63,94,.30);
}

input,
select,
textarea {
  min-height: 32px;
  border-radius: calc(var(--radius) - 2px);
  background: #101013;
  border-color: var(--input);
  color: var(--foreground);
  font-size: 12px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
.button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(96,165,250,.60);
  outline-offset: 2px;
}

.badge {
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #d4d4d8;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  font-size: 10px;
  font-weight: 560;
}

.badge.active,
.badge.success,
.badge.parsed,
.badge.healthy {
  color: #bfdbfe;
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.26);
}

.badge.failed,
.badge.error,
.badge.danger {
  color: #fecdd3;
  background: rgba(244,63,94,.11);
  border-color: rgba(244,63,94,.28);
}

.run-head {
  margin-bottom: 10px;
  gap: 12px;
}

.run-head p {
  margin-top: 3px;
  font-size: 12px;
}

.dashboard-run-chart,
.run-chart {
  height: 164px;
  border-radius: calc(var(--radius) - 1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    #0f0f12;
  border-color: var(--border);
}

.chart-grid-line { stroke: rgba(255,255,255,.07); }
.chart-axis-label,
.chart-empty { fill: var(--muted-foreground); }
.chart-line { stroke-width: 1.45; }
.chart-line-glow {
  stroke-width: 5;
  opacity: .08;
}
.chart-point-ring { stroke-width: 1.35; }
.chart-guide { stroke: rgba(96,165,250,.42); }

.chart-tooltip {
  width: min(310px, calc(100% - 20px));
  border-radius: var(--radius);
  border-color: rgba(96,165,250,.24);
  background: rgba(18,18,21,.96);
  box-shadow: 0 16px 42px rgba(0,0,0,.38);
}

.chart-legend {
  margin: 8px 0 10px;
  color: var(--muted-foreground);
  font-size: 11px;
}

.dashboard-run-list,
.dashboard-news-list {
  gap: 6px;
}

.dashboard-run {
  grid-template-columns: 13px minmax(0, 1fr) minmax(152px, auto);
  padding: 8px;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255,255,255,.025);
  border-color: var(--border);
}

.dashboard-run:hover,
.dashboard-news-item:hover {
  border-color: rgba(96,165,250,.28);
  background: rgba(96,165,250,.055);
}

.dashboard-run strong,
.dashboard-news-item strong {
  font-size: 12px;
  font-weight: 640;
}

.dashboard-run small,
.dashboard-news-item p {
  color: var(--muted-foreground);
  font-size: 11px;
}

.dashboard-run-stats {
  color: var(--muted-foreground);
  font-size: 11px;
}

.dashboard-content-tabs {
  padding-top: 10px;
}

.dashboard-tab-switch {
  padding: 2px;
  border-radius: calc(var(--radius) - 1px);
  border-color: var(--border);
  background: #0f0f12;
}

.dashboard-tab-switch button {
  min-height: 27px;
  padding: 5px 10px;
  border: 0;
  color: var(--muted-foreground);
  background: transparent;
}

.dashboard-tab-switch button.active {
  color: var(--foreground);
  background: #27272a;
  border-color: transparent;
}

.trend-tabs {
  gap: 5px;
  padding: 2px 0 10px;
}

.trend-tabs a {
  min-height: 28px;
  padding: 5px 8px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted-foreground);
  background: transparent !important;
  border-color: var(--border);
  font-size: 11px;
  font-weight: 560;
}

.trend-tabs a:hover {
  color: var(--foreground);
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.16);
}

.trend-tabs a.active {
  color: #eff6ff;
  background: rgba(96,165,250,.18) !important;
  border-color: rgba(96,165,250,.34);
}

.trend-tabs strong {
  min-width: 18px;
  height: 18px;
  background: rgba(255,255,255,.08);
  font-size: 10px;
}

.trend-list { gap: 8px; }

.trend-card {
  grid-template-columns: 34px 112px minmax(0, 1fr) 112px;
  gap: 12px;
  padding: 9px;
  border-radius: var(--radius);
  background: rgba(24,24,27,.78);
  border-color: var(--border);
}

.trend-card:hover {
  background: rgba(31,31,35,.82);
  border-color: rgba(96,165,250,.28);
}

.trend-rank {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.28);
  font-size: 10px;
}

.trend-media img,
.trend-media .image-placeholder {
  width: 112px;
  height: 68px;
  border-radius: calc(var(--radius) - 2px);
  border-color: var(--border);
}

.trend-body h2,
.trend-hero h2 {
  margin: 5px 0 4px;
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -.015em;
}

.trend-body h2 a:hover,
.dashboard-news-item a:hover {
  color: #93c5fd;
}

.trend-card-summary,
.trend-body p,
.trend-hero p {
  color: var(--muted-foreground);
  font-size: 12px;
  line-height: 1.45;
}

.trend-aside strong {
  color: #93c5fd;
  font-size: 15px;
}

.trend-aside .button,
.trend-aside button {
  min-height: 28px;
}

.dashboard-news-item {
  grid-template-columns: 74px minmax(0, 1fr);
  padding: 8px;
  border-radius: calc(var(--radius) - 2px);
  background: rgba(255,255,255,.025);
  border-color: var(--border);
}

.dashboard-news-item .thumb,
.dashboard-news-item .image-placeholder {
  width: 74px;
  height: 48px;
  border-radius: calc(var(--radius) - 3px);
  border-color: var(--border);
}

.table th {
  color: var(--muted-foreground);
  background: rgba(255,255,255,.035);
  font-size: 10px;
  font-weight: 620;
}

.table th,
.table td {
  border-bottom-color: var(--border);
  padding: 8px;
}

.filterbar,
.bulkbar,
.trend-toolbar {
  border-color: var(--border);
  background: rgba(255,255,255,.025);
  border-radius: var(--radius);
}

.source-logo {
  border-radius: calc(var(--radius) - 2px);
  border-color: var(--border);
}

@media (max-width: 980px) {
  .sidebar {
    position: static;
  }
  .content {
    max-width: calc(100vw - 24px);
  }
}

/* Dashboard fidelity layer: mirrors the restrained ShadCN analytics reference. */
:root {
  --radius: .625rem;
  --background: #0a0a0a;
  --foreground: #fafafa;
  --card: #171717;
  --card-foreground: #fafafa;
  --popover: #171717;
  --popover-foreground: #fafafa;
  --primary: #3b82f6;
  --primary-foreground: #eff6ff;
  --secondary: #262626;
  --secondary-foreground: #fafafa;
  --muted-surface: #262626;
  --muted-foreground: #a1a1aa;
  --accent: #2563eb;
  --accent-foreground: #eff6ff;
  --destructive: #ff6568;
  --border: rgba(255, 255, 255, .10);
  --input: rgba(255, 255, 255, .15);
  --ring: #60a5fa;
  --sidebar: #171717;
  --sidebar-foreground: #e4e4e7;
  --sidebar-accent: #262626;
  --sidebar-border: rgba(255, 255, 255, .10);
  --bg: var(--background);
  --bg-2: #0d0d0d;
  --panel: var(--card);
  --panel-2: #1c1c1c;
  --topbar: var(--background);
  --line: var(--border);
  --line-2: rgba(255, 255, 255, .16);
  --text: var(--foreground);
  --muted: var(--muted-foreground);
  --accent-2: #2563eb;
  --accent-3: #93c5fd;
  --danger: var(--destructive);
  --warning: #fbbf24;
  --good: #10b981;
  --shadow: rgba(0, 0, 0, .28);
}

@supports (color: oklch(0.145 0 0)) {
  :root {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.205 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.205 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.62 0.19 255);
    --primary-foreground: oklch(0.97 0.02 255);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted-surface: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.55 0.22 260);
    --accent-foreground: oklch(0.97 0.02 255);
    --destructive: oklch(0.704 0.191 22.216);
    --border: oklch(1 0 0 / 10%);
    --input: oklch(1 0 0 / 15%);
    --ring: oklch(0.7 0.14 250);
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.92 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
  }
}

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

body {
  color: var(--foreground);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
.stat-value,
.brand {
  letter-spacing: 0;
}

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

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  width: 224px;
  min-height: 100vh;
  max-height: 100vh;
  padding: 0 10px 10px;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid var(--sidebar-border);
  border-radius: 0;
  background: var(--sidebar);
  box-shadow: none;
}

.brand {
  flex: 0 0 49px;
  height: 49px;
  display: flex;
  align-items: center;
  margin: 0 -10px 8px;
  padding: 0 15px;
  border-bottom: 1px solid var(--sidebar-border);
  color: var(--foreground);
  font-size: 15px;
  font-weight: 650;
}

.brand::before {
  width: 16px;
  height: 16px;
  margin-right: 9px;
  border: 2px solid #d4d4d8;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--sidebar), inset 0 0 0 5px #60a5fa;
}

.nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}

.nav-label {
  display: block;
  margin: 10px 8px 4px;
  color: #85858d;
  font-size: 11px;
  font-weight: 500;
}

.nav a,
.sidebar-footer > a {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #c4c4ca;
  font-size: 13px;
  font-weight: 500;
}

.nav svg,
.sidebar-footer svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}

.nav a:hover,
.sidebar-footer > a:hover {
  color: var(--foreground);
  background: rgba(255, 255, 255, .045);
  border-color: transparent;
}

.nav a.active {
  color: var(--foreground);
  background: var(--sidebar-accent);
  border-color: var(--border);
  box-shadow: inset 2px 0 #60a5fa;
}

.nav a.active svg {
  color: #60a5fa;
  opacity: 1;
}

.sidebar-footer {
  flex: 0 0 auto;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-footer > .global-ai-usage {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 4px 11px;
  min-height: 78px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(96, 165, 250, .28);
  border-radius: 9px;
  background:
    radial-gradient(circle at 12% 15%, rgba(96, 165, 250, .16), transparent 46%),
    linear-gradient(145deg, rgba(59, 130, 246, .10), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.sidebar-footer > .global-ai-usage:hover {
  border-color: rgba(96, 165, 250, .48);
  background-color: rgba(59, 130, 246, .08);
  transform: translateY(-1px);
}

.sidebar-footer > .global-ai-usage > svg {
  grid-row: 1 / 3;
  align-self: center;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid rgba(96, 165, 250, .3);
  border-radius: 9px;
  color: #60a5fa;
  background: rgba(59, 130, 246, .14);
  opacity: 1;
}

.global-ai-usage-copy {
  min-width: 0;
}

.global-ai-usage-copy strong,
.global-ai-usage-copy small {
  display: block;
}

.global-ai-usage-copy strong {
  color: var(--foreground);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}

.global-ai-usage-copy small {
  overflow: hidden;
  margin-top: 3px;
  color: #a1a1aa;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-ai-usage-value {
  grid-column: 2;
  color: #dbeafe;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  line-height: 1.15;
}

.content {
  width: 100%;
  max-width: calc(100vw - 224px);
  min-width: 0;
  padding: 0;
}

.topline {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 8px 22px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 10, .96);
}

.page-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.page-title-icon {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  color: #d4d4d8;
}

.page-title-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

h1,
.topline h1 {
  margin: 0;
  color: var(--foreground);
  font-size: 16px;
  font-weight: 600;
}

h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
}

.dashboard-page {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.grid {
  gap: 14px;
}

.stats,
.dashboard-numbers {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card,
.panel,
.dashboard-data-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.card:hover,
.panel:hover {
  border-color: rgba(255, 255, 255, .14);
}

.card {
  padding: 20px;
}

.panel {
  margin: 0;
  padding: 20px;
}

.stat-card {
  min-height: 154px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

.stat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.stat-label {
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
}

.stat-period {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #d4d4d8;
  background: rgba(255, 255, 255, .025);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.stat-link:hover {
  color: #bfdbfe;
  border-color: rgba(96, 165, 250, .4);
}

.stat-value {
  margin-top: 3px;
  color: var(--foreground);
  font-size: 29px;
  font-weight: 650;
  line-height: 1.22;
  font-variant-numeric: tabular-nums;
}

.stat-value-money {
  font-size: clamp(22px, 2vw, 29px);
}

.stat-foot {
  display: grid;
  gap: 2px;
  margin-top: auto;
  padding-top: 18px;
}

.stat-foot strong {
  color: #e4e4e7;
  font-size: 12px;
  font-weight: 550;
}

.stat-foot span {
  color: var(--muted-foreground);
  font-size: 11px;
}

button,
.button {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(96, 165, 250, .42);
  border-radius: 6px;
  color: var(--primary-foreground);
  background: var(--primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

button:hover,
.button:hover {
  border-color: rgba(147, 197, 253, .62);
  background: #4b8df8;
  transform: none;
}

button.secondary,
.button.secondary {
  color: #e4e4e7;
  background: rgba(255, 255, 255, .035);
  border-color: var(--border);
}

button.secondary:hover,
.button.secondary:hover,
button.secondary.active,
.button.secondary.active {
  color: var(--foreground);
  background: var(--secondary);
  border-color: rgba(255, 255, 255, .16);
}

.run-head {
  margin: 0 0 18px;
}

.run-head p {
  margin: 3px 0 0;
  color: var(--muted-foreground);
  font-size: 12px;
}

.activity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.activity-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.activity-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted-foreground);
  font-size: 10px;
}

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

.activity-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.activity-legend i.processed { background: #60a5fa; }
.activity-legend i.new { background: #d4d4d8; }

.chart-range {
  display: inline-flex;
  align-items: center;
}

.chart-range button {
  min-height: 30px;
  border-radius: 0;
  box-shadow: none;
}

.chart-range button:first-child { border-radius: 6px 0 0 6px; }
.chart-range button:last-child { border-radius: 0 6px 6px 0; }
.chart-range button + button { margin-left: -1px; }

.dashboard-run-chart,
.run-chart {
  position: relative;
  height: 286px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dashboard-run-chart::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, .055);
  border-bottom: 1px solid rgba(255, 255, 255, .055);
}

.dashboard-run-chart svg {
  width: 100%;
  height: 100%;
  display: block;
}

.chart-grid-line {
  stroke: rgba(255, 255, 255, .065);
  stroke-width: 1;
}

.chart-axis-label,
.chart-empty {
  fill: #71717a;
  font-size: 10px;
}

.dashboard-chart-area {
  fill: url(#dashboardChartAreaGradient);
}

.dashboard-chart-primary,
.dashboard-chart-secondary {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-chart-primary {
  stroke: #60a5fa;
  stroke-width: 1.45;
}

.dashboard-chart-secondary {
  stroke: #d4d4d8;
  stroke-width: 1.1;
  opacity: .78;
}

.chart-guide {
  stroke: rgba(147, 197, 253, .4);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}

.chart-hit-column {
  fill: transparent;
  cursor: pointer;
}

.chart-point-ring {
  fill: var(--card);
  stroke: #60a5fa;
  stroke-width: 1.4;
}

.chart-point-ring.failed { stroke: var(--destructive); }
.chart-point-ring.partial { stroke: var(--warning); }
.chart-point-logo { pointer-events: none; }

.chart-dot {
  fill: #60a5fa;
  stroke: var(--card);
  stroke-width: 1.5;
}

.chart-dot.failed { fill: var(--destructive); }
.chart-dot.partial { fill: var(--warning); }

.chart-tooltip {
  top: 14px !important;
  right: 14px;
  left: auto !important;
  width: min(300px, calc(100% - 28px));
  padding: 11px;
  border: 1px solid rgba(96, 165, 250, .26);
  border-radius: 8px;
  background: rgba(23, 23, 23, .97);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .42);
  backdrop-filter: blur(10px);
}

.dashboard-content-tabs {
  display: grid;
  gap: 12px;
}

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

.dashboard-tab-switch {
  width: fit-content;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
}

.dashboard-tab-switch button {
  min-height: 28px;
  padding: 4px 9px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--muted-foreground);
}

.dashboard-tab-switch button.active {
  color: var(--foreground);
  background: var(--secondary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.dashboard-tab-switch button span {
  min-width: 18px;
  display: inline-grid;
  place-items: center;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 999px;
  color: #bfdbfe;
  background: rgba(59, 130, 246, .13);
  font-size: 9px;
}

.dashboard-tab-panel[hidden],
.dashboard-panel-link[hidden] {
  display: none !important;
}

.trend-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  padding: 0;
  overflow-x: auto;
  border: 0;
  background: transparent;
}

.trend-tabs a {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #8f8f98;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.trend-tabs a:hover {
  color: #e4e4e7;
  background: rgba(255, 255, 255, .035);
}

.trend-tabs a.active {
  color: #eff6ff;
  background: rgba(59, 130, 246, .13);
  border-color: rgba(96, 165, 250, .28);
}

.trend-tabs strong {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  color: inherit;
  background: rgba(255, 255, 255, .065);
  font-size: 9px;
  font-weight: 600;
}

.dashboard-data-card {
  overflow: hidden;
}

.dashboard-list-head {
  min-height: 38px;
  display: grid;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  color: #a1a1aa;
  background: rgba(255, 255, 255, .045);
  font-size: 11px;
  font-weight: 550;
}

.coverage-list-head {
  grid-template-columns: minmax(390px, 1fr) 140px 110px 85px 58px;
}

.news-list-head {
  grid-template-columns: minmax(440px, 1fr) 180px 140px 130px;
}

.trend-list,
.dashboard-news-list {
  display: grid;
  gap: 0;
}

.trend-card,
.dashboard-coverage-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px 84px minmax(260px, 1fr) 140px 110px 85px 58px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.trend-card:last-child,
.dashboard-news-item:last-child {
  border-bottom: 0;
}

.trend-card:hover,
.dashboard-news-item:hover {
  border-color: var(--border);
  background: rgba(59, 130, 246, .035);
  transform: none;
}

.trend-rank {
  width: auto;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
  color: #71717a;
  background: transparent;
  font-size: 10px;
  font-weight: 550;
  text-align: center;
}

.trend-media img,
.trend-media .image-placeholder {
  width: 84px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 6px;
  object-fit: cover;
}

.trend-body {
  min-width: 0;
}

.trend-body h2,
.trend-hero h2 {
  margin: 0 0 3px;
  color: var(--foreground);
  font-size: 12px;
  font-weight: 580;
  line-height: 1.35;
  letter-spacing: 0;
}

.trend-body h2 a,
.dashboard-news-item a {
  color: inherit;
  text-decoration: none;
}

.trend-body h2 a:hover,
.dashboard-news-item a:hover {
  color: #93c5fd;
}

.trend-card-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin: 0;
  color: var(--muted-foreground);
  font-size: 10px;
  line-height: 1.4;
}

.coverage-category-cell,
.coverage-signal-cell,
.trend-aside {
  min-width: 0;
  color: #d4d4d8;
  font-size: 10px;
}

.coverage-signal-cell {
  display: grid;
  gap: 1px;
}

.coverage-signal-cell strong {
  color: #e4e4e7;
  font-size: 12px;
  font-weight: 600;
}

.coverage-signal-cell span {
  color: var(--muted-foreground);
}

.trend-aside {
  display: grid;
  justify-items: start;
  gap: 1px;
}

.trend-aside strong {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 600;
}

.row-action {
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
}

.badge {
  min-height: 20px;
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #c4c4ca;
  background: rgba(255, 255, 255, .025);
  font-size: 9px;
  font-weight: 500;
}

.dashboard-news-item {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(440px, 1fr) 180px 140px 130px;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.dashboard-news-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.dashboard-news-item .thumb,
.dashboard-news-item .image-placeholder {
  width: 74px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 6px;
  object-fit: cover;
}

.dashboard-news-item strong {
  display: block;
  overflow: hidden;
  color: #e4e4e7;
  font-size: 11px;
  font-weight: 560;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-news-item p {
  margin: 3px 0 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-news-source {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c4c4ca;
  font-size: 10px;
}

.dashboard-news-source span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-news-item time {
  color: var(--muted-foreground);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.source-logo.tiny {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: 5px;
  object-fit: contain;
  background: #fff;
}

.empty-state {
  padding: 28px;
  text-align: center;
}

@media (max-width: 1180px) {
  .stats,
  .dashboard-numbers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coverage-list-head,
  .news-list-head {
    display: none;
  }

  .trend-card,
  .dashboard-coverage-row {
    grid-template-columns: 22px 84px minmax(240px, 1fr) 100px 58px;
  }

  .coverage-category-cell,
  .trend-aside {
    display: none;
  }

  .dashboard-news-item {
    grid-template-columns: minmax(360px, 1fr) 150px 110px;
  }

  .dashboard-news-category {
    display: none;
  }

  .activity-head-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}

@media (max-width: 820px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    width: 100%;
    min-height: auto;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-border);
  }

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

  .nav-label,
  .brand {
    display: none;
  }

  .sidebar-footer {
    display: block;
    margin-top: 8px;
    padding: 8px 0 0;
  }

  .sidebar-footer > .global-ai-usage {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 9px 12px;
  }

  .sidebar-footer > .global-ai-usage > svg {
    width: 34px;
    height: 34px;
  }

  .global-ai-usage-value {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    font-size: 15px;
  }

  .content {
    max-width: 100vw;
  }

  .dashboard-page {
    padding: 14px;
  }

  .topline {
    padding: 8px 14px;
  }

  .activity-head,
  .dashboard-content-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .activity-head-actions {
    justify-content: flex-start;
  }

  .activity-legend {
    width: 100%;
  }

  .dashboard-run-chart,
  .run-chart {
    height: 230px;
  }

  .trend-card,
  .dashboard-coverage-row {
    grid-template-columns: 72px minmax(0, 1fr) 58px;
  }

  .trend-rank,
  .coverage-signal-cell {
    display: none;
  }

  .trend-media img,
  .trend-media .image-placeholder {
    width: 72px;
    height: 46px;
  }

  .dashboard-news-item {
    grid-template-columns: minmax(0, 1fr) 110px;
  }

  .dashboard-news-source {
    display: none;
  }
}

.trends-page {
  display: grid;
  gap: 16px;
}

.trends-explainer {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.trends-explainer p {
  margin: 0;
  color: var(--muted);
}

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

.external-trend-card {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-left: 3px solid var(--border);
}

.page-body .external-trend-card {
  padding: 0;
}

.external-trend-card.candidate { border-left-color: #22c55e; }
.external-trend-card.created { border-left-color: var(--accent); }

.external-trend-media {
  min-height: 100%;
  border-right: 1px solid var(--border);
  background: #111113;
}

.external-trend-media > a,
.external-trend-image-fallback {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 178px;
  display: block;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.external-trend-media img {
  width: 100%;
  height: 100%;
  min-height: 178px;
  display: block;
  object-fit: cover;
  transition: transform .2s ease;
}

.external-trend-media a:hover img {
  transform: scale(1.025);
}

.external-trend-media a > span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  overflow: hidden;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 5px;
  color: #f4f4f5;
  background: rgba(9, 9, 11, .78);
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}

.external-trend-image-fallback {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 7px;
  color: #71717a;
  background:
    radial-gradient(circle at 30% 25%, rgba(96, 165, 250, .08), transparent 45%),
    linear-gradient(145deg, #171717, #111113);
}

.external-trend-image-fallback svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.external-trend-image-fallback span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.external-trend-content {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.external-trend-content > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.external-trend-card h2 {
  margin: 4px 0 0;
  font-size: 1rem;
  line-height: 1.3;
}

.external-trend-heading {
  min-width: 0;
}

.external-trend-heading .trend-meta {
  align-items: center;
  gap: 4px;
}

.trend-signal {
  min-height: 18px;
  padding: 2px 5px;
  border-color: rgba(96, 165, 250, .24);
  color: #bfdbfe;
  background: rgba(59, 130, 246, .08);
  font-size: 9px;
}

.trend-signal.noticias {
  border-color: rgba(16, 185, 129, .25);
  color: #a7f3d0;
  background: rgba(16, 185, 129, .08);
}

.trend-signal.curiosidade {
  border-color: rgba(167, 139, 250, .26);
  color: #ddd6fe;
  background: rgba(139, 92, 246, .09);
}

.trend-signal.eventos {
  border-color: rgba(251, 191, 36, .24);
  color: #fde68a;
  background: rgba(245, 158, 11, .08);
}

.trend-confidence {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.external-trend-rank {
  min-width: 28px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.external-trend-signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.external-trend-signals > div {
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, .025);
}

.external-trend-signals strong,
.external-trend-signals span {
  display: block;
}

.external-trend-signals strong {
  overflow: hidden;
  font-size: .84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-trend-signals span {
  margin-top: 1px;
  color: var(--muted);
  font-size: .63rem;
  line-height: 1.25;
}

.external-trend-articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.external-trend-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 8px;
  padding: 7px 8px;
  border: 1px solid rgba(96, 165, 250, .16);
  border-radius: 6px;
  background: rgba(59, 130, 246, .035);
}

.external-trend-evidence > div:first-child strong,
.external-trend-evidence > div:first-child span {
  display: block;
}

.external-trend-evidence > div:first-child strong {
  font-size: 11px;
}

.external-trend-evidence > div:first-child span,
.external-trend-evidence p {
  color: var(--muted);
  font-size: 9px;
}

.external-trend-evidence .external-trend-last-validation {
  padding-top: 4px;
  border-top: 1px solid rgba(251, 191, 36, .16);
  color: #fde68a;
}

.external-trend-evidence p {
  grid-column: 1 / -1;
  margin: 0;
}

.external-trend-publishers {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
}

.external-trend-publishers span {
  max-width: 82px;
  overflow: hidden;
  padding: 2px 5px;
  border-radius: 999px;
  color: #cbd5e1;
  background: rgba(255, 255, 255, .055);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-trend-articles a {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
}

.external-trend-articles a:hover {
  border-color: var(--accent);
}

.external-trend-articles a.accepted {
  border-color: rgba(16, 185, 129, .18);
}

.external-trend-articles a.excluded {
  border-color: rgba(251, 191, 36, .2);
  background: rgba(245, 158, 11, .035);
}

.external-trend-articles span {
  overflow: hidden;
  color: var(--muted);
  font-size: .61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-trend-articles strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.external-trend-articles small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.external-trend-articles a.excluded small {
  color: #fcd34d;
}

.external-trend-more {
  align-self: center;
  color: var(--muted);
  font-size: 9px;
}

.external-trend-empty {
  min-height: 36px;
  margin: 0;
  font-size: 11px;
}

.external-trend-content > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}

.external-trend-content > footer > .muted {
  font-size: 10px;
}

.external-trend-content > footer .button,
.external-trend-content > footer button {
  min-height: 30px;
  padding: 5px 8px;
  font-size: 11px;
}

@media (max-width: 1050px) {
  .trends-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .external-trend-card {
    grid-template-columns: 98px minmax(0, 1fr);
  }
  .external-trend-media > a,
  .external-trend-media img,
  .external-trend-image-fallback {
    min-height: 100%;
  }
  .external-trend-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .external-trend-content > header { grid-template-columns: auto minmax(0, 1fr); }
  .external-trend-articles { grid-template-columns: 1fr; }
  .external-trend-articles a:nth-child(n+2) { display: none; }
  .external-trend-evidence { grid-template-columns: 1fr; }
  .external-trend-publishers { justify-content: flex-start; }
  .external-trend-evidence p { grid-column: 1; }
  .external-trend-content > footer {
    align-items: center;
    flex-wrap: wrap;
  }
  .trends-explainer { align-items: flex-start; flex-direction: column; }
}

.coverage-detail-tabs {
  display: flex;
  gap: 5px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
}

.coverage-detail-tabs button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: transparent;
  background: transparent;
}

.coverage-detail-tabs button.active {
  border-color: rgba(96, 165, 250, .3);
  color: #eff6ff;
  background: rgba(59, 130, 246, .14);
}

.coverage-detail-tabs button span {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  font-size: 11px;
}

.coverage-decisions-panel {
  padding: 0;
  overflow: hidden;
}

.coverage-decisions-panel > .section-heading {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.coverage-decisions-panel .coverage-audit-list {
  border-top: 0;
  display: grid;
  gap: 14px;
  padding: 16px;
  background: rgba(0, 0, 0, .12);
}

.coverage-decision-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  background: var(--card);
}

.coverage-decision-card.merge { border-left-color: #22c55e; }
.coverage-decision-card.error { border-left-color: #ef4444; }
.coverage-decision-card.enrichment { border-left-color: var(--accent); }

.coverage-decision-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.coverage-decision-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fbbf24;
  background: rgba(245, 158, 11, .12);
  font-size: 22px;
  font-weight: 800;
}

.coverage-decision-card.merge .coverage-decision-icon {
  color: #4ade80;
  background: rgba(34, 197, 94, .12);
}

.coverage-decision-card.error .coverage-decision-icon {
  color: #f87171;
  background: rgba(239, 68, 68, .12);
}

.coverage-decision-card.enrichment .coverage-decision-icon {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.coverage-change-block {
  display: grid;
  gap: 8px;
}

.coverage-change-block > small {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.coverage-change-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.coverage-change-values > div {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.coverage-change-values span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.coverage-change-values p {
  margin: 0;
  line-height: 1.45;
}

.coverage-decision-head > div {
  display: grid;
  gap: 3px;
}

.coverage-decision-head > div > strong {
  font-size: 17px;
}

.coverage-decision-head time {
  color: var(--muted-foreground);
  font-size: 12px;
}

.coverage-decision-comparison {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
}

.coverage-decision-subject {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--foreground);
  background: rgba(255, 255, 255, .025);
}

.coverage-decision-subject.related:hover {
  border-color: rgba(96, 165, 250, .4);
  background: rgba(59, 130, 246, .06);
}

.coverage-decision-subject small,
.coverage-decision-explanation small {
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.coverage-decision-subject strong {
  font-size: 15px;
  line-height: 1.4;
}

.coverage-decision-subject span {
  color: var(--muted-foreground);
  font-size: 12px;
}

.coverage-decision-operator {
  display: grid;
  place-items: center;
  color: #fbbf24;
  font-size: 24px;
  font-weight: 800;
}

.coverage-decision-card.merge .coverage-decision-operator {
  color: #4ade80;
}

.coverage-decision-explanation {
  padding: 14px 16px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .025);
}

.coverage-decision-explanation p {
  margin: 5px 0 0;
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.55;
}

.coverage-decision-confidence {
  display: grid;
  gap: 7px;
}

.coverage-decision-confidence > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted-foreground);
  font-size: 12px;
}

.coverage-decision-confidence strong {
  color: var(--foreground);
}

.decision-confidence-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}

.decision-confidence-bar span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: #f59e0b;
}

.coverage-decision-card.merge .decision-confidence-bar span {
  background: #22c55e;
}

.coverage-decision-technical {
  color: var(--muted-foreground);
  font-size: 12px;
}

.coverage-decision-technical summary {
  cursor: pointer;
  color: #93c5fd;
}

.coverage-decision-technical[open] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.coverage-decision-technical[open] summary {
  width: 100%;
}

@media (max-width: 820px) {
  .coverage-detail-tabs {
    overflow-x: auto;
  }

  .coverage-detail-tabs button {
    flex: 0 0 auto;
  }

  .coverage-decision-head {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .coverage-decision-head > .badge {
    grid-column: 2;
    justify-self: start;
  }

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

  .coverage-decision-operator {
    min-height: 24px;
  }
}

@media (max-width: 560px) {
  .stats,
  .dashboard-numbers {
    grid-template-columns: 1fr;
  }

  .topline .actions .secondary {
    display: none;
  }

  .stat-card {
    min-height: 132px;
  }

  .activity-head-actions,
  .chart-range {
    width: 100%;
  }

  .chart-range button {
    flex: 1;
  }

  .activity-head-actions > .button {
    display: none;
  }

  .dashboard-tab-switch {
    width: 100%;
  }

  .dashboard-tab-switch button {
    flex: 1;
  }

  .trend-card,
  .dashboard-coverage-row {
    grid-template-columns: 62px minmax(0, 1fr);
    padding: 9px;
  }

  .trend-media img,
  .trend-media .image-placeholder {
    width: 62px;
    height: 42px;
  }

  .row-action {
    display: none;
  }

  .dashboard-news-item {
    grid-template-columns: 1fr;
  }

  .dashboard-news-item time {
    display: none;
  }
}

/* Shared application surfaces. The dashboard keeps its own composition above; every
   operational and editorial screen uses this quieter, consistent page system. */
.page-body {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 18px;
  padding: 22px;
}

.page-body > .panel,
.page-body > .grid,
.page-body > section,
.page-body > div {
  min-width: 0;
  margin: 0;
}

.page-body .panel {
  min-width: 0;
  margin: 0;
  padding: 18px;
}

.page-body .panel.data-panel {
  padding: 0;
  overflow: hidden;
}

.section-heading,
.coverage-list-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.section-heading {
  margin-bottom: 16px;
}

.data-panel > .section-heading {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.section-heading h2,
.coverage-list-toolbar h2 {
  margin: 0;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
}

.section-heading p,
.coverage-list-toolbar p {
  margin: 3px 0 0;
  color: var(--muted-foreground);
  font-size: 11px;
}

.page-body label {
  gap: 6px;
  color: #d4d4d8;
  font-size: 11px;
  font-weight: 550;
}

.page-body input,
.page-body select,
.page-body textarea {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--input);
  border-radius: 6px;
  color: var(--foreground);
  background: #101010;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .16);
  font-size: 12px;
}

.page-body textarea {
  width: 100%;
  resize: vertical;
}

.page-body input::placeholder,
.page-body textarea::placeholder {
  color: #71717a;
}

.page-body .actions {
  gap: 7px;
}

.page-body .run-head {
  min-width: 0;
  align-items: flex-start;
  margin: 0 0 16px;
}

.page-body .run-head h2 {
  margin: 0;
  font-size: 14px;
}

.page-body .stat-card {
  min-height: 128px;
  padding: 17px 18px;
}

.page-body .stat-value {
  font-size: 27px;
}

.page-body .stat-foot {
  padding-top: 12px;
}

.page-body .badge {
  margin: 0;
}

.page-body .table-scroll {
  max-width: 100%;
  border: 0;
  border-radius: 0;
}

.page-body .table {
  color: #d4d4d8;
  font-size: 11px;
}

.page-body .table th,
.page-body .table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.page-body .table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 38px;
  color: var(--muted-foreground);
  background: #222;
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}

.page-body .table tbody tr:last-child td {
  border-bottom: 0;
}

.page-body .table tbody tr:hover td {
  background: rgba(59, 130, 246, .04);
}

.page-body .source-chip {
  min-width: 0;
  color: #d4d4d8;
  font-weight: 550;
  text-decoration: none;
}

.page-body .source-logo.small {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 6px;
}

.page-body .source-logo.large {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 4px;
  border-radius: 8px;
}

.topline .source-title.page-title {
  min-width: 0;
}

.topline .source-title.page-title > div {
  min-width: 0;
}

.topline .source-title.page-title .muted {
  max-width: min(72vw, 900px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 821px) {
  .topline > .actions {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }
}

/* Shared news-list typography. News must remain readable in every context. */
.articles-panel .col-title strong,
.category-detail-page .table td strong,
.dashboard-news-item strong,
.coverage-detail-page .coverage-body > strong,
.spider-detail-page .news-card strong,
.article-coverage-page .article-coverage-seed strong,
.article-coverage-page .coverage-candidate-main strong,
.run-event-body > strong,
.diagnosis-news-card strong {
  display: inline-block;
  color: var(--foreground);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.42;
}

.dashboard-news-item p,
.coverage-detail-page .coverage-body > p,
.article-coverage-page .article-coverage-seed p,
.diagnosis-news-card p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
}

.articles-panel .col-title > .muted,
.spider-detail-page .news-card p,
.article-coverage-page .coverage-candidate-main > .muted,
.run-event-meta {
  font-size: 13px;
  line-height: 1.45;
}

.articles-panel .articles-table tbody td {
  line-height: 1.45;
}

/* Dashboard readability fixes after the global density increase. */
.activity-panel {
  padding: 0;
  overflow: hidden;
}

.activity-panel .activity-head {
  margin: 0;
  padding: 18px 20px 6px;
}

.activity-panel .dashboard-run-chart {
  width: 100%;
  height: 340px;
}

.chart-point-ring {
  stroke-width: 2;
}

.dashboard-content-tabs .trend-tabs {
  max-width: 100%;
  padding-bottom: 4px;
}

.dashboard-content-tabs .trend-tabs a {
  flex: 0 0 auto;
}

.dashboard-content-tabs .trend-tabs a > span {
  display: inline;
  min-width: max-content;
}

.dashboard-coverage-row {
  min-height: 104px;
  gap: 14px;
  padding: 12px 16px;
}

@media (min-width: 1181px) {
  .dashboard-coverage-row {
    grid-template-columns: 28px 104px minmax(300px, 1fr) 160px 120px 96px 68px;
  }
}

.dashboard-coverage-row .trend-media img,
.dashboard-coverage-row .trend-media .image-placeholder {
  width: 104px;
  height: 66px;
}

.dashboard-coverage-row .trend-body h2 {
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 1.35;
}

.dashboard-coverage-row .trend-card-summary {
  font-size: 13px;
  line-height: 1.45;
}

.dashboard-coverage-row .coverage-category-cell,
.dashboard-coverage-row .coverage-signal-cell,
.dashboard-coverage-row .trend-aside {
  font-size: 12px;
}

.dashboard-news-item {
  min-height: 94px;
  padding: 12px 16px;
}

.dashboard-news-main {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 13px;
}

.dashboard-news-item .thumb,
.dashboard-news-item .image-placeholder {
  width: 96px;
  height: 62px;
}

.dashboard-news-item strong {
  font-size: 15px;
}

.dashboard-news-item p,
.dashboard-news-source,
.dashboard-news-item time {
  font-size: 13px;
}

@media (max-width: 820px) {
  .activity-panel .dashboard-run-chart {
    height: 260px;
  }

  .dashboard-coverage-row .trend-media img,
  .dashboard-coverage-row .trend-media .image-placeholder {
    width: 72px;
    height: 46px;
  }
}

@media (max-width: 560px) {
  .dashboard-coverage-row .trend-media img,
  .dashboard-coverage-row .trend-media .image-placeholder {
    width: 62px;
    height: 42px;
  }
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 160px;
  padding: 34px;
  border-style: dashed;
  color: var(--muted-foreground);
  text-align: center;
}

/* Coverage index */
.coverage-index-page .page-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coverage-controls .trend-toolbar {
  display: grid;
  grid-template-columns: 170px 170px minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.coverage-controls .trend-toolbar.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--border);
}

.coverage-controls .trend-rule-note {
  margin: 10px 0 0;
  font-size: 11px;
}

.coverage-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 14px;
}

.coverage-action-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "icon controls";
  gap: 14px 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
}

.coverage-action-card.ai-action {
  border-color: rgba(59, 130, 246, .32);
  background:
    linear-gradient(135deg, rgba(59, 130, 246, .10), transparent 55%),
    rgba(255, 255, 255, .018);
}

.coverage-action-icon {
  grid-area: icon;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .065);
  color: var(--muted);
  font-size: 21px;
  font-weight: 800;
}

.ai-action .coverage-action-icon {
  color: #93c5fd;
  background: rgba(59, 130, 246, .16);
}

.coverage-action-copy {
  grid-area: copy;
  min-width: 0;
}

.coverage-action-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 6px;
}

.coverage-action-title strong {
  font-size: 15px;
}

.coverage-action-copy > p {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.coverage-action-rule {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 10px;
  color: #a7b0c0;
  font-size: 11px;
}

.coverage-action-controls {
  grid-area: controls;
  display: flex;
  align-items: end;
  gap: 10px;
}

.coverage-action-controls label {
  width: 160px;
}

.coverage-action-controls .audit-button {
  color: #e5e7eb;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .055);
}

.coverage-controls-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.coverage-controls-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.coverage-ai-result {
  display: grid;
  gap: 13px;
  margin: -2px 0 14px;
  padding: 16px 18px;
  border: 1px solid rgba(59, 130, 246, .30);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(59, 130, 246, .09), transparent 45%),
    var(--card);
}

.coverage-ai-result.success {
  border-color: rgba(34, 197, 94, .32);
  background:
    linear-gradient(135deg, rgba(34, 197, 94, .08), transparent 45%),
    var(--card);
}

.coverage-ai-result.failed {
  border-color: rgba(239, 68, 68, .34);
}

.coverage-ai-result-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.coverage-ai-result-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #93c5fd;
  background: rgba(59, 130, 246, .16);
  font-size: 20px;
  font-weight: 850;
}

.coverage-ai-result.success .coverage-ai-result-icon {
  color: #86efac;
  background: rgba(34, 197, 94, .14);
}

.coverage-ai-result.failed .coverage-ai-result-icon {
  color: #fca5a5;
  background: rgba(239, 68, 68, .14);
}

.coverage-ai-result-head > div {
  display: grid;
  gap: 2px;
}

.coverage-ai-result-head strong {
  font-size: 16px;
}

.coverage-ai-result-eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.coverage-ai-result-message {
  margin: 0;
  color: #d9dde6;
  font-size: 13px;
  line-height: 1.5;
}

.coverage-ai-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
}

.coverage-ai-progress-row .trend-ai-progress {
  height: 5px;
}

.coverage-ai-progress-row > strong {
  text-align: right;
  font-size: 11px;
}

.coverage-ai-result-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.coverage-ai-result-metrics > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, .12);
}

.coverage-ai-result-metrics span {
  color: var(--muted);
  font-size: 10px;
}

.coverage-ai-result-metrics strong {
  color: var(--text);
  font-size: 13px;
}

.coverage-data-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.coverage-audit-history {
  padding: 0;
  overflow: hidden;
}

.coverage-audit-history summary {
  padding: 13px 16px;
}

.coverage-audit-list {
  border-top: 1px solid var(--border);
}

.coverage-audit-row {
  display: grid;
  grid-template-columns: 100px 112px 72px 42px minmax(220px, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.coverage-audit-row:last-child {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .coverage-audit-row {
    grid-template-columns: 90px 105px 64px 40px minmax(160px, 1fr);
  }

  .coverage-audit-row small {
    grid-column: 1 / -1;
  }
}

.coverage-list-toolbar {
  padding: 15px 18px 12px;
}

.coverage-sort-tabs {
  flex: 0 0 auto;
  margin: 0;
}

.coverage-sort-tabs a {
  white-space: nowrap;
}

.coverage-data-card > .trend-tabs {
  margin: 0;
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--border);
}

.coverage-index-list {
  display: grid;
  gap: 0;
}

.coverage-index-card {
  min-height: 106px;
  display: grid;
  grid-template-columns: 24px 112px minmax(280px, 1fr) 112px;
  align-items: center;
  gap: 13px;
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.coverage-index-card:last-child {
  border-bottom: 0;
}

.coverage-index-card:hover {
  border-color: var(--border);
  background: rgba(59, 130, 246, .035);
  transform: none;
}

.coverage-index-card .trend-rank {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: #71717a;
  background: transparent;
  text-align: center;
}

.coverage-index-card .trend-media img,
.coverage-index-card .trend-media .image-placeholder {
  width: 112px;
  height: 70px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.coverage-index-card .trend-body h2 {
  margin: 5px 0 4px;
  color: #f4f4f5;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.coverage-index-card .trend-card-summary {
  max-width: 92ch;
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.45;
}

.coverage-index-card .trend-sources {
  margin-top: 7px;
}

.coverage-index-card .trend-aside {
  justify-items: stretch;
  gap: 5px;
}

.coverage-index-card .trend-aside strong {
  color: #93c5fd;
  font-size: 13px;
}

.coverage-index-card .trend-aside .button,
.coverage-index-card .trend-aside button {
  width: 100%;
  min-height: 28px;
}

/* Article index */
.article-filters-panel .view-tabs {
  gap: 4px;
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.article-filters-panel .view-tabs a {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--muted-foreground);
  background: transparent;
  font-size: 11px;
  font-weight: 550;
}

.article-filters-panel .view-tabs a:hover {
  color: var(--foreground);
  background: rgba(255, 255, 255, .04);
}

.article-filters-panel .view-tabs a.active {
  color: #eff6ff;
  border-color: rgba(96, 165, 250, .28);
  background: rgba(59, 130, 246, .13);
}

.article-filters-panel .filterbar {
  display: grid;
  grid-template-columns: minmax(190px, .9fr) minmax(240px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.article-filters-panel > .muted {
  margin: 13px 0 0;
  font-size: 11px;
}

.articles-panel > form {
  min-width: 0;
}

.articles-panel .bulkbar {
  min-height: 50px;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: rgba(255, 255, 255, .018);
}

.articles-panel .trend-tabs {
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.articles-panel .bulkbar select {
  min-width: 190px;
  width: 220px;
}

.articles-panel .table-scroll {
  max-height: min(70vh, 780px);
  overflow: auto;
}

.articles-panel .articles-table {
  min-width: 1260px;
}

.articles-panel .thumb {
  width: 72px;
  height: 46px;
}

.articles-panel .col-title strong {
  color: #e4e4e7;
  font-size: 11px;
  font-weight: 580;
}

.articles-panel .pagination {
  min-height: 54px;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

/* Spider management */
.scheduler-panel {
  padding: 14px 18px !important;
}

.scheduler-panel .run-head {
  align-items: center;
  margin: 0;
}

.spider-create-panel .form-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.spider-create-panel .form-grid .wide {
  grid-column: span 2;
}

.spider-list-panel .spider-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.spider-list-panel .spider-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(260px, 1.05fr) minmax(360px, 1.4fr) auto;
  align-items: center;
  gap: 18px;
  padding: 13px 18px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.spider-list-panel .spider-card:last-child {
  border-bottom: 0;
}

.spider-list-panel .spider-card:hover {
  border-color: var(--border);
  background: rgba(59, 130, 246, .035);
}

.spider-list-panel .spider-card h3 {
  font-size: 13px;
  font-weight: 600;
}

.spider-list-panel .spider-card-head {
  min-width: 0;
}

.spider-list-panel .spider-card-head > div {
  min-width: 0;
}

.spider-list-panel .spider-card-head .breakable {
  display: -webkit-box;
  max-width: 52ch;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--muted-foreground);
  font-size: 10px;
}

.spider-list-panel .spider-facts {
  grid-template-columns: repeat(5, minmax(70px, 1fr));
  gap: 4px 12px;
  font-size: 10px;
}

.spider-list-panel .spider-facts dt {
  grid-row: 1;
  color: #71717a;
}

.spider-list-panel .spider-facts dd {
  grid-row: 2;
  color: #d4d4d8;
  white-space: nowrap;
}

.spider-list-panel .spider-card > .actions {
  justify-content: flex-end;
}

.spider-list-panel .spider-card > .actions button,
.spider-list-panel .spider-card > .actions .button {
  min-height: 27px;
  padding: 4px 8px;
  font-size: 10px;
}

/* Categories */
.categories-page .category-create-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.15fr);
  align-items: end;
  gap: 24px;
}

.categories-page .category-create-panel h2,
.categories-page .category-create-panel p {
  margin: 3px 0;
}

.categories-page .category-create-panel form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.categories-page .category-create-panel input,
.categories-page .category-create-panel button {
  min-width: 0;
}

.categories-page .category-stats {
  grid-template-columns: repeat(4, minmax(190px, 1fr));
}

.categories-page .category-card {
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  color: inherit;
}

.categories-page .category-card:hover {
  border-color: rgba(96, 165, 250, .32);
  background: rgba(59, 130, 246, .04);
  transform: none;
}

.categories-page .category-card-link {
  color: inherit;
  text-decoration: none;
}

.categories-page .category-rename-form {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.categories-page .category-rename-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.categories-page .category-rename-form input,
.categories-page .category-rename-form button {
  min-width: 0;
}

/* Details */
.coverage-detail-page,
.article-detail-page,
.spider-detail-page,
.run-detail-page,
.article-coverage-page,
.category-detail-page {
  gap: 16px;
}

.coverage-detail-page #coverage-detail-workspace {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.coverage-detail-page #coverage-detail-workspace > .panel {
  margin: 0;
}

.coverage-detail-page .coverage-hero-card {
  grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
  gap: 20px;
  padding: 18px;
  background: var(--card);
}

.coverage-detail-page .coverage-hero-card .hero-image,
.coverage-detail-page .coverage-hero-card .hero-placeholder {
  border-radius: 7px;
}

.coverage-detail-page .coverage-read-view h2 {
  margin: 8px 0 7px;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.28;
}

.coverage-detail-page .coverage-read-view > p {
  margin: 0;
  color: #d4d4d8;
  font-size: 13px;
  line-height: 1.55;
}

.coverage-detail-page .meta-grid,
.article-detail-page .meta-grid {
  gap: 10px;
}

.coverage-detail-page .meta-grid,
.article-detail-page .meta-grid {
  grid-template-columns: repeat(4, minmax(112px, 1fr));
}

.coverage-detail-page .meta-grid div,
.article-detail-page .meta-grid div {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-left: 2px solid #60a5fa;
  border-radius: 6px;
  background: rgba(255, 255, 255, .018);
}

.coverage-detail-page .coverage-image-picker {
  grid-auto-columns: minmax(170px, 210px);
  gap: 9px;
}

.coverage-detail-page .coverage-image-option button {
  gap: 7px;
  padding: 6px;
  border-color: var(--border);
  background: rgba(255, 255, 255, .025);
}

.coverage-detail-page .coverage-image-option.selected button {
  border-color: rgba(96, 165, 250, .5);
  background: rgba(59, 130, 246, .08);
}

.coverage-detail-page .coverage-image-option strong {
  color: #93c5fd;
}

.coverage-detail-page .coverage-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.coverage-detail-page .coverage-item {
  grid-template-columns: 78px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-left: 2px solid transparent;
  border-radius: 0;
  background: transparent;
}

.coverage-detail-page .coverage-item:last-child {
  border-bottom: 0;
}

.coverage-detail-page .coverage-item.representative {
  border-left-color: #60a5fa;
  background: rgba(59, 130, 246, .04);
}

.coverage-detail-page .coverage-media .thumb,
.coverage-detail-page .small-placeholder {
  width: 78px;
  height: 50px;
}

.coverage-detail-page .coverage-body p {
  font-size: 11px;
}

.coverage-detail-page .story-timeline {
  margin-top: 14px;
}

.dossier-panel { display: grid; gap: 18px; }
.dossier-short { margin: 0; font-size: 1.08rem; line-height: 1.65; font-weight: 650; }
.dossier-lead-grid, .dossier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dossier-lead-grid article, .dossier-grid > div, .dossier-changes {
  padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-soft, rgba(36, 99, 235, .04));
}
.dossier-lead-grid span { color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.dossier-lead-grid p, .dossier-fact p, .dossier-narrative p { margin: 7px 0 0; line-height: 1.58; }
.dossier-grid h3 { margin: 0 0 10px; font-size: .92rem; }
.dossier-grid ul, .dossier-grid ol, .dossier-changes ul { margin: 8px 0 0; padding-left: 20px; }
.dossier-grid li, .dossier-changes li { margin: 7px 0; line-height: 1.45; }
.dossier-fact { padding: 10px 0; border-top: 1px solid var(--border); }
.dossier-fact:first-of-type { border-top: 0; padding-top: 0; }
.dossier-fact.uncertain { border-left: 3px solid #d99026; padding-left: 10px; }
.dossier-evidence { display: inline-flex; margin: 6px 6px 0 0; font-size: .75rem; font-weight: 700; }
.dossier-narrative summary { cursor: pointer; font-weight: 750; }

@media (max-width: 760px) {
  .dossier-lead-grid, .dossier-grid { grid-template-columns: 1fr; }
}

.publication-state { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; }
.publication-state.publishable { color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); }
.publication-state.updating { color: #93c5fd; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3); }
.publication-state.review { color: #fbbf24; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3); }
.briefing-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.briefing-status { display: grid; gap: 2px; min-width: 190px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft, rgba(36,99,235,.04)); }
.briefing-status strong { font-size: .82rem; }
.briefing-status small { color: var(--muted); font-size: .72rem; }
.briefing-status.ready { border-color: rgba(34,197,94,.35); }
.briefing-status.stale { border-color: rgba(245,158,11,.4); }
.briefing-status.generating { border-color: rgba(59,130,246,.45); }
.coverage-publication-reason, .evidence-quality-reason { color: #fbbf24 !important; font-size: .76rem !important; }
.publication-contract { display: grid; gap: 5px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.publication-contract span, .publication-contract small { color: var(--muted); }
.dossier-version-list { display: grid; gap: 7px; }
.dossier-version-list article { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); }
.badge.warning { color: #fbbf24; border-color: rgba(245,158,11,.35); }

@media (max-width: 680px) {
  .briefing-panel-actions { justify-content: flex-start; }
  .briefing-status { width: 100%; min-width: 0; }
  .dossier-version-list article { grid-template-columns: auto 1fr; }
}

.article-detail-page .article-hero {
  grid-template-columns: minmax(340px, 520px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.article-detail-page .article-hero h2 {
  margin: 12px 0 4px;
  color: var(--foreground);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.32;
}

.article-detail-page .article-slide-stage,
.article-detail-page .article-slide-stage .hero-image {
  border-radius: 7px;
}

.article-detail-page .article-slide-thumbs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.article-detail-page .slide-thumb {
  border-radius: 5px;
  background: #111;
}

.article-detail-page .slide-thumb.active {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, .16);
}

.article-detail-page .article-detail-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
}

.article-detail-page .article-content-panel {
  padding: 22px 26px;
}

.article-detail-page .article-text {
  max-width: 78ch;
  color: #e4e4e7;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.75;
}

.article-detail-page .article-detail-sidebar {
  gap: 10px;
}

.article-detail-page .technical-details summary {
  padding: 12px 14px;
  color: #d4d4d8;
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
}

.article-detail-page .json-block {
  color: #d4d4d8;
  background: #101010;
  font-size: 10px;
}

.spider-detail-page .health-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.spider-detail-page .dashboard-grid {
  grid-template-columns: minmax(0, 1.4fr) minmax(330px, .6fr);
  gap: 16px;
}

.spider-detail-page .dashboard-grid > *,
.spider-detail-page .news-card > *,
.spider-detail-page .timeline .event {
  min-width: 0;
}

.spider-detail-page .timeline .event,
.spider-detail-page .timeline .event .muted {
  overflow-wrap: anywhere;
}

.spider-detail-page .news-grid {
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.spider-detail-page .news-card {
  grid-template-columns: 92px minmax(0, 1fr) auto;
  padding: 9px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.spider-detail-page .news-card:last-child {
  border-bottom: 0;
}

.spider-detail-page .news-card img,
.spider-detail-page .news-card .image-placeholder {
  width: 92px;
  height: 58px;
}

.spider-detail-page .timeline {
  gap: 0;
}

.spider-detail-page .timeline .event {
  padding: 11px 12px;
  border-left-width: 2px;
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.article-coverage-page .coverage-candidate-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.article-coverage-page .coverage-candidate-row {
  margin: 0;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.article-coverage-page .coverage-candidate-row:last-child {
  border-bottom: 0;
}

.article-coverage-page .coverage-candidate-row.seed {
  border: 1px solid rgba(96, 165, 250, .3);
  border-radius: 7px;
  background: rgba(59, 130, 246, .045);
}

.article-coverage-page .coverage-candidate-score strong {
  color: #93c5fd;
}

/* Health */
.health-page .health-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.health-page .ai-spend .metric-main {
  display: grid;
  gap: 3px;
}

.health-page .ai-spend .cost-value {
  font-size: clamp(17px, 1.65vw, 23px);
  white-space: nowrap;
}

.health-page .ai-spend .metric-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  font-size: 9px;
}

.run-detail-page .run-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.run-diagnosis-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(130px, .7fr));
  gap: 0;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, .018);
}

.run-diagnosis-bar > div {
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--border);
}

.run-diagnosis-bar > div:last-child {
  border-right: 0;
}

.run-diagnosis-bar dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.run-diagnosis-bar dd {
  min-width: 0;
  margin: 0;
  color: var(--foreground);
  font-size: 13px;
}

.run-diagnosis-bar .run-diagnosis-current {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  border-right: 0;
}

.run-log-panel {
  margin-top: 14px;
}

.run-log {
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(0, 0, 0, .18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
}

.run-log-line {
  display: grid;
  grid-template-columns: 64px 46px minmax(0, 1fr);
  gap: 9px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
  color: var(--foreground);
}

.run-log-line:last-child {
  border-bottom: 0;
}

.run-log-line time {
  color: var(--muted-foreground);
}

.run-log-level {
  color: #67e8f9;
  font-weight: 750;
}

.run-log-line.warning .run-log-level,
.run-log-line.muted .run-log-level {
  color: var(--warning);
}

.run-log-line.error .run-log-level {
  color: var(--destructive);
}

.run-log-line.live .run-log-level {
  color: var(--good);
}

.health-page .health-chart-panel {
  padding: 18px;
}

.health-page .run-chart {
  height: 250px;
}

.health-page .ops-toolbar {
  gap: 12px;
  padding: 12px 0;
}

.health-page .ops-toolbar > .trend-tabs {
  min-width: 0;
  margin: 0;
}

.health-page .ops-toolbar > .ops-health-tabs {
  grid-column: 1 / -1;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.health-page .ops-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
}

.health-page .ops-row {
  grid-template-columns: minmax(220px, 1fr) 300px 72px minmax(190px, 1.25fr);
  gap: 10px;
  width: 100%;
  border-color: var(--border);
  border-radius: 0;
  background: transparent;
}

.health-page .ops-metrics {
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 6px;
}

.health-page .ops-metrics div {
  height: 42px;
  padding: 6px 7px;
}

.health-page .ops-progress {
  width: 100%;
}

.health-page .ops-facts {
  grid-template-columns: repeat(2, minmax(80px, 1fr));
}

.health-page .ops-row:last-child {
  border-bottom: 0;
}

/* Skeletons stay inside their component and use the same neutral palette. */
.page-body .skeleton-loading::after,
.page-body .htmx-request::after {
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, .025), rgba(96, 165, 250, .11), rgba(255, 255, 255, .025));
  background-size: 220% 100%;
}

@media (max-width: 1180px) {
  .spider-detail-page .edit-spider-form .form-grid.compact {
    grid-template-columns: 1fr;
  }

  .spider-create-panel .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spider-create-panel .form-grid .wide {
    grid-column: 1 / -1;
  }

  .spider-list-panel .spider-card {
    grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr);
  }

  .spider-list-panel .spider-card > .actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .categories-page .category-stats {
    grid-template-columns: repeat(3, minmax(170px, 1fr));
  }

  .article-detail-page .article-hero {
    grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  }

  .coverage-detail-page .meta-grid,
  .article-detail-page .meta-grid {
    grid-template-columns: repeat(3, minmax(112px, 1fr));
  }

  .spider-detail-page .health-summary,
  .health-page .health-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .page-body {
    gap: 14px;
    padding: 14px;
  }

  .coverage-index-page .page-metrics,
  .categories-page .category-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .categories-page .category-create-panel {
    grid-template-columns: 1fr;
  }

  .coverage-index-card {
    grid-template-columns: 96px minmax(0, 1fr) 100px;
  }

  .coverage-index-card .trend-rank {
    display: none;
  }

  .coverage-index-card .trend-media img,
  .coverage-index-card .trend-media .image-placeholder {
    width: 96px;
    height: 62px;
  }

  .article-filters-panel .filterbar,
  .coverage-controls .trend-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coverage-action-grid {
    grid-template-columns: 1fr;
  }

  .article-filters-panel .filter-actions,
  .coverage-controls .trend-toolbar .actions {
    grid-column: 1 / -1;
  }

  .spider-list-panel .spider-card {
    grid-template-columns: 1fr;
  }

  .health-page .ops-row {
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr);
  }

  .spider-list-panel .spider-card > .actions {
    grid-column: auto;
  }

  .coverage-detail-page .coverage-hero-card,
  .article-detail-page .article-hero,
  .article-detail-page .article-detail-layout,
  .spider-detail-page .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .run-detail-page .run-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

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

  .run-diagnosis-bar > div:nth-child(2) {
    border-right: 0;
  }

  .run-diagnosis-bar > div:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }

  .article-detail-page .article-hero .article-slideshow {
    max-width: 660px;
  }
}

@media (max-width: 640px) {
  .categories-page .category-create-panel form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .topline {
    align-items: stretch;
  }

  .topline > .actions {
    justify-content: flex-start;
  }

  .topline .actions .secondary {
    display: inline-flex;
  }
}

@media (max-width: 620px) {
  .page-body .panel {
    padding: 14px;
  }

  .page-body .stat-card {
    min-height: 112px;
    padding: 14px;
  }

  .coverage-index-page .page-metrics,
  .categories-page .category-stats,
  .spider-detail-page .health-summary,
  .health-page .health-summary,
  .article-filters-panel .filterbar,
  .coverage-controls .trend-toolbar,
  .spider-create-panel .form-grid {
    grid-template-columns: 1fr;
  }

  .coverage-controls .trend-toolbar.compact {
    grid-template-columns: 1fr;
  }

  .coverage-action-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "icon"
      "copy"
      "controls";
  }

  .coverage-action-controls,
  .coverage-controls-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .coverage-action-controls label {
    width: 100%;
  }

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

  .coverage-index-card {
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: start;
    padding: 11px;
  }

  .coverage-index-card .trend-media img,
  .coverage-index-card .trend-media .image-placeholder {
    width: 78px;
    height: 52px;
  }

  .coverage-index-card .trend-aside {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
  }

  .coverage-index-card .trend-aside .muted {
    display: none;
  }

  .articles-panel .bulkbar,
  .section-heading,
  .coverage-list-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .articles-panel .bulkbar .actions {
    width: 100%;
  }

  .articles-panel .bulkbar select {
    width: 100%;
  }

  .coverage-detail-page .coverage-item {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .coverage-detail-page .coverage-media .thumb,
  .coverage-detail-page .small-placeholder {
    width: 68px;
    height: 46px;
  }

  .coverage-detail-page .coverage-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .article-detail-page .article-slide-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .article-detail-page .article-content-panel {
    padding: 18px;
  }

  .coverage-detail-page .meta-grid,
  .article-detail-page .meta-grid,
  .run-detail-page .run-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spider-list-panel .spider-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spider-list-panel .spider-facts dt,
  .spider-list-panel .spider-facts dd {
    grid-row: auto;
  }

  .article-coverage-page .coverage-candidate-row {
    grid-template-columns: 24px 72px minmax(0, 1fr);
  }

  .article-coverage-page .coverage-candidate-score {
    grid-column: 3;
    justify-items: start;
    text-align: left;
  }

  .health-page .ops-row {
    grid-template-columns: 1fr;
  }

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

/* Coverage hero hierarchy: controls first, then aligned media and editorial copy. */
.coverage-detail-page .coverage-hero-card .coverage-hero-toolbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--border);
}

.coverage-hero-toolbar .coverage-toolbar-separator {
  width: 1px;
  height: 24px;
  margin: 0 3px;
  background: var(--border);
}

.coverage-hero-toolbar .inline-category-form {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

.coverage-hero-toolbar .inline-category-form select {
  width: auto;
  min-width: 128px;
  height: 30px;
  padding: 0 30px 0 10px;
  border-color: var(--border);
  border-radius: 7px;
  color: var(--text);
  background-color: rgba(255, 255, 255, .025);
  font-size: 12px;
  font-weight: 550;
}

.coverage-hero-toolbar .coverage-edit-toggle {
  margin-left: auto;
}

.coverage-detail-page .coverage-story-content {
  min-width: 0;
  align-self: start;
}

.coverage-detail-page .coverage-editor-stage {
  min-height: 0 !important;
  transition: none;
}

.coverage-detail-page .coverage-read-view,
.coverage-detail-page .coverage-inline-editor {
  position: static;
  inset: auto;
  transform: none;
  transition: none;
}

.coverage-detail-page .coverage-inline-editor {
  display: none;
  opacity: 1;
  pointer-events: auto;
}

.coverage-detail-page .coverage-hero-card.is-editing .coverage-read-view {
  display: none;
  opacity: 1;
  transform: none;
}

.coverage-detail-page .coverage-hero-card.is-editing .coverage-inline-editor {
  display: grid;
  opacity: 1;
  transform: none;
}

.coverage-detail-page .coverage-inline-editor label:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.coverage-detail-page .coverage-inline-editor label:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: 2;
}

.coverage-detail-page .coverage-inline-editor label:nth-child(3) {
  grid-column: 2;
  grid-row: 1;
}

.coverage-detail-page .coverage-inline-editor .actions {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: auto;
}

@media (max-width: 1180px) {
  .coverage-detail-page .coverage-hero-card .coverage-hero-toolbar {
    flex-wrap: wrap;
  }

  .coverage-hero-toolbar .coverage-edit-toggle {
    margin-left: 0;
  }
}

@media (max-width: 620px) {
  .coverage-detail-page .coverage-hero-card .coverage-hero-toolbar {
    align-items: stretch;
  }

  .coverage-hero-toolbar .coverage-toolbar-separator {
    display: none;
  }

  .coverage-hero-toolbar .inline-category-form {
    flex: 1 1 100%;
  }

  .coverage-hero-toolbar .inline-category-form select {
    flex: 1;
  }

  .coverage-detail-page .coverage-inline-editor label:nth-child(1),
  .coverage-detail-page .coverage-inline-editor label:nth-child(2),
  .coverage-detail-page .coverage-inline-editor label:nth-child(3),
  .coverage-detail-page .coverage-inline-editor .actions {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Coverage refinements: show every option and keep secondary information quiet. */
.coverage-detail-page .coverage-media-card .coverage-image-picker {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: visible;
  scroll-snap-type: none;
}

.coverage-detail-page .coverage-image-option {
  width: 100%;
}

.coverage-detail-page .meta-grid {
  grid-template-columns: minmax(180px, 1.7fr) repeat(3, minmax(96px, .75fr));
  gap: 0;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.coverage-detail-page .meta-grid div {
  gap: 3px;
  min-width: 0;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.coverage-detail-page .meta-grid div:first-child {
  padding-left: 0;
}

.coverage-detail-page .meta-grid div:last-child {
  padding-right: 0;
  border-right: 0;
}

.coverage-detail-page .meta-grid .muted {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .01em;
}

.coverage-detail-page .meta-grid strong {
  color: #a1a1aa;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

.coverage-detail-page .coverage-inline-editor {
  grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr);
  gap: 10px 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, .015);
}

.coverage-detail-page .coverage-inline-editor label {
  gap: 4px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .01em;
  text-transform: none;
}

.coverage-detail-page .coverage-inline-editor label:nth-child(2) {
  grid-column: 1 / -1;
  grid-row: auto;
}

.coverage-detail-page .coverage-inline-editor input,
.coverage-detail-page .coverage-inline-editor textarea {
  padding: 8px 10px;
  font-size: 12px;
}

.coverage-detail-page .coverage-inline-editor textarea {
  min-height: 78px;
}

.coverage-detail-page .coverage-inline-editor .actions {
  grid-column: 1 / -1;
  gap: 8px;
}

.save-confirmation.error {
  border-color: rgba(239, 68, 68, .42);
  color: #fca5a5;
  background: rgba(239, 68, 68, .14);
}

@media (max-width: 1180px) {
  .coverage-detail-page .meta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 10px;
  }

  .coverage-detail-page .meta-grid div:nth-child(2) {
    border-right: 0;
  }

  .coverage-detail-page .meta-grid div:nth-child(3) {
    padding-left: 0;
  }
}

@media (max-width: 620px) {
  .coverage-detail-page .coverage-media-card .coverage-image-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .coverage-detail-page .coverage-inline-editor {
    grid-template-columns: 1fr;
  }

  .coverage-detail-page .coverage-inline-editor label:nth-child(2),
  .coverage-detail-page .coverage-inline-editor .actions {
    grid-column: auto;
  }
}

/* Keep the edit action anchored and give the editorial form a usable canvas. */
.coverage-detail-page .coverage-hero-card .coverage-hero-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.coverage-detail-page .coverage-toolbar-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  margin: 0;
}

.coverage-detail-page .coverage-hero-toolbar .coverage-edit-toggle {
  align-self: center;
  min-width: 84px;
  margin: 0;
  white-space: nowrap;
}

.coverage-detail-page .coverage-inline-editor {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  padding: 16px;
}

.coverage-detail-page .coverage-inline-editor label:nth-child(1),
.coverage-detail-page .coverage-inline-editor label:nth-child(2),
.coverage-detail-page .coverage-inline-editor label:nth-child(3),
.coverage-detail-page .coverage-inline-editor .actions {
  grid-column: 1;
  grid-row: auto;
}

.coverage-detail-page .coverage-inline-editor input {
  min-height: 42px;
  font-size: 13px;
}

.coverage-detail-page .coverage-inline-editor textarea {
  min-height: 180px;
  padding: 11px 12px;
  font-size: 13px;
  line-height: 1.55;
}

.coverage-detail-page .coverage-inline-editor .actions {
  justify-content: flex-end;
  margin-top: 2px;
}

@media (max-width: 700px) {
  .coverage-detail-page .coverage-hero-card .coverage-hero-toolbar {
    grid-template-columns: 1fr;
  }

  .coverage-detail-page .coverage-hero-toolbar .coverage-edit-toggle {
    width: 100%;
  }
}

/* Manual category ordering. */
.category-order-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
}

.category-order-toolbar > div {
  display: grid;
  gap: 2px;
}

.category-order-toolbar strong {
  font-size: 13px;
}

.category-order-toolbar .muted {
  font-size: 12px;
}

.category-order-toolbar form {
  margin: 0;
}

.category-order-toolbar button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.categories-page .category-card {
  position: relative;
  transition: border-color .15s ease, opacity .15s ease, transform .15s ease;
}

.categories-page .category-card.is-dragging {
  z-index: 2;
  opacity: .55;
  transform: scale(.985);
}

.category-order-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -4px -4px 10px;
}

.category-order-controls > div {
  display: flex;
  gap: 4px;
}

.category-order-controls button {
  display: grid;
  width: 28px;
  min-height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
}

.category-order-controls button:hover:not(:disabled) {
  color: var(--text);
  border-color: rgba(96, 165, 250, .55);
  background: rgba(59, 130, 246, .08);
}

.category-order-controls button:disabled {
  cursor: not-allowed;
  opacity: .25;
}

.category-order-controls .category-drag-handle {
  cursor: grab;
  font-size: 18px;
  line-height: 1;
}

.category-order-controls .category-drag-handle:active {
  cursor: grabbing;
}

@media (max-width: 620px) {
  .category-order-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .category-order-toolbar button {
    width: 100%;
  }
}

/* Settings */
.settings-page, .settings-page-header { max-width: 960px; margin-inline: auto; }
.settings-page-header { margin-bottom: 20px; }
.settings-card { overflow: hidden; padding: 0; }
.settings-card-heading { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 20px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); }
.settings-card-heading h2 { margin: 2px 0 0; color: var(--text); font-size: 16px; text-transform: none; }
.settings-card-heading p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.settings-provider-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #464153; border-radius: 10px; color: #ddd6e7; background: #18171f; font-size: 19px; }
.settings-connection { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; font-weight: 720; }
.settings-connection i { width: 6px; height: 6px; border-radius: 50%; background: #756c80; }
.settings-connection.connected { color: var(--accent); border-color: rgba(85,239,213,.2); background: rgba(85,239,213,.05); }
.settings-connection.connected i { background: var(--accent); box-shadow: 0 0 8px rgba(85,239,213,.4); }
.settings-form { display: grid; gap: 19px; padding: 22px 20px 20px; }
.settings-form > label, .settings-field-grid > label { display: grid; gap: 7px; color: #ddd6e7; font-size: 11px; font-weight: 680; }
.settings-form label small { color: var(--muted); font-size: 9px; font-weight: 450; }
.settings-field-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 14px; }
.settings-form input, .settings-form select { width: 100%; min-height: 40px; border-color: var(--line-2); background: #15141d; }
.settings-key-input { position: relative; }
.settings-key-input input { padding-right: 84px; }
.settings-key-input > span { position: absolute; top: 50%; right: 11px; padding: 3px 6px; border-radius: 5px; color: #bfb5ca; background: rgba(255,255,255,.06); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; transform: translateY(-50%); pointer-events: none; }
.settings-security-note { display: flex; align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.018); }
.settings-security-note svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: #a99abd; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-security-note div { display: grid; gap: 2px; }
.settings-security-note strong { font-size: 10px; }
.settings-security-note span { color: var(--muted); font-size: 9px; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.settings-actions > span { color: var(--muted); font-size: 10px; }
.settings-actions > span strong { color: #d8d0e2; }
.settings-actions button { min-height: 39px; }
@media (max-width: 640px) { .settings-card-heading { grid-template-columns: 44px minmax(0,1fr); } .settings-connection { grid-column: 2; justify-self: start; } .settings-field-grid { grid-template-columns: 1fr; } .settings-actions { align-items: stretch; flex-direction: column; } .settings-actions button { width: 100%; } }

/* Collection search */
.search-input-wrap { position: relative; min-width: 0; }
.search-input-wrap svg { position: absolute; z-index: 1; top: 50%; left: 11px; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; transform: translateY(-50%); pointer-events: none; }
.search-input-wrap input { width: 100%; padding-left: 36px; }
.search-input-wrap:focus-within svg { stroke: var(--accent); }
.article-filters-panel .article-search-field { min-width: 260px; }
.coverage-search-form { display: grid; gap: 7px; padding: 14px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); }
.coverage-search-form > label { color: #cfc5da; font-size: 10px; font-weight: 700; }
.coverage-search-controls { display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; gap: 8px; }
.coverage-search-controls input { min-height: 38px; border-color: var(--line-2); background: #15141d; }
.coverage-search-controls button, .coverage-search-controls .button { min-height: 38px; }
@media (max-width: 600px) { .coverage-search-controls { grid-template-columns: 1fr 1fr; } .coverage-search-controls .search-input-wrap { grid-column: 1 / -1; } }

/* Comfortable density: designed to be readable at the browser's native 100% zoom. */
body {
  font-size: 17px;
}

h1,
.topline h1 {
  font-size: 20px;
}

h2,
.page-body .run-head h2,
.section-heading h2,
.coverage-list-toolbar h2 {
  font-size: 17px;
}

.brand {
  min-height: 56px;
  font-size: 19px;
}

.nav-label {
  font-size: 13px;
}

.nav a,
.sidebar-footer > a {
  min-height: 42px;
  gap: 11px;
  padding: 9px 11px;
  font-size: 16px;
}

.nav svg,
.sidebar-footer svg {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
}

.topline {
  min-height: 56px;
  padding: 10px 24px;
}

.dashboard-page,
.page-body {
  gap: 20px;
  padding: 24px;
}

button,
.button {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 14px;
}

.page-body label {
  font-size: 14px;
}

.page-body input,
.page-body select,
.page-body textarea {
  min-height: 40px;
  padding: 9px 12px;
  font-size: 15px;
}

.section-heading p,
.coverage-list-toolbar p,
.run-head p {
  font-size: 14px;
}

.badge,
.page-body .badge {
  min-height: 22px;
  padding: 3px 8px;
  font-size: 11px;
}

.trend-tabs a {
  min-height: 34px;
  padding: 6px 11px;
  font-size: 14px;
}

.trend-tabs strong {
  min-width: 20px;
  font-size: 11px;
}

.page-body .table {
  font-size: 14px;
}

.page-body .table th {
  height: 44px;
  font-size: 12px;
}

.page-body .table th,
.page-body .table td {
  padding: 12px 14px;
}

.stat-label,
.stat-foot strong {
  font-size: 14px;
}

.stat-foot span,
.stat-period {
  font-size: 12px;
}

@media (min-width: 821px) {
  .shell {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .sidebar {
    width: 280px;
  }

  .content {
    max-width: calc(100vw - 280px);
  }
}

/* Final readability overrides: these must remain after the compact page rules. */
.articles-panel .articles-table {
  min-width: 1420px;
}

.articles-panel .articles-table .col-title {
  width: 390px;
}

.articles-panel .articles-table .col-title strong,
.category-detail-page .table td strong {
  display: inline-block;
  color: var(--foreground);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.45;
}

.coverage-index-page .coverage-index-card .trend-body h2 {
  margin: 5px 0 6px;
  color: var(--foreground);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.42;
}

.coverage-index-page .coverage-index-card .trend-card-summary {
  max-width: 92ch;
  color: var(--muted-foreground);
  font-size: 15px;
  line-height: 1.58;
}

.coverage-index-page .coverage-index-card .trend-meta,
.coverage-index-page .coverage-index-card .trend-aside {
  font-size: 13px;
  line-height: 1.45;
}

.coverage-index-page .coverage-index-card {
  min-height: 126px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.articles-panel .articles-table .col-title > .muted {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
}

.articles-panel .articles-table tbody td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 13px;
  line-height: 1.45;
}

.articles-panel .thumb {
  width: 84px;
  height: 54px;
}

/* News index follows the full-width list used on the dashboard. */
.articles-panel .table-scroll {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.articles-panel .table-scroll .articles-table {
  width: 100%;
}

.articles-panel .articles-table a {
  color: inherit;
  text-decoration: none;
}

.articles-panel .articles-table .col-title a:hover,
.articles-panel .articles-table .col-url a:hover {
  color: #93c5fd;
}

.articles-panel .articles-table tbody tr:hover td {
  background: rgba(59, 130, 246, .035);
}

.coverage-detail-page .coverage-body > strong,
.spider-detail-page .news-card strong,
.article-coverage-page .article-coverage-seed strong,
.article-coverage-page .coverage-candidate-main strong,
.run-event-body > strong,
.diagnosis-news-card strong {
  display: inline-block;
  color: var(--foreground);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.42;
}

.coverage-detail-page .coverage-body > p,
.diagnosis-news-card .compact-text {
  margin-top: 7px;
  font-size: 15px;
  line-height: 1.58;
}

.spider-detail-page .news-card p,
.article-coverage-page .coverage-candidate-main > .muted,
.run-event-meta,
.diagnosis-news-card p.muted {
  font-size: 13px;
  line-height: 1.45;
}

.activity-panel .dashboard-run-chart {
  height: 220px;
}

@media (max-width: 820px) {
  .activity-panel .dashboard-run-chart {
    height: 190px;
  }
}

.runs-page {
  max-width: none;
}

.runs-page > section {
  max-width: none;
}

.runs-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.runs-chart-panel .dashboard-run-chart {
  height: 220px;
}

.runs-history-panel {
  padding: 0;
  overflow: hidden;
}

.runs-history-panel > .section-heading {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.runs-history-list {
  display: grid;
}

.run-history-card {
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto minmax(480px, 2fr) auto;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
}

.run-history-card:last-child {
  border-bottom: 0;
}

.run-history-card.success { border-left-color: #22c55e; }
.run-history-card.partial,
.run-history-card.running { border-left-color: #f59e0b; }
.run-history-card.failed { border-left-color: #ef4444; }

.run-history-card:hover {
  background: rgba(59, 130, 246, .035);
}

.run-history-source {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}

.run-history-source .source-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.run-history-source div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.run-history-source strong {
  overflow: hidden;
  color: var(--foreground);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-history-source span,
.run-history-meta {
  color: var(--muted-foreground);
  font-size: 12px;
}

.run-history-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(70px, 1fr));
  gap: 8px;
}

.run-history-metrics span,
.run-history-meta span {
  display: grid;
  gap: 2px;
}

.run-history-metrics strong {
  color: var(--foreground);
  font-size: 17px;
}

.run-history-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.run-history-meta strong {
  color: var(--foreground);
  font-size: 13px;
}

.run-history-card > p {
  max-height: 3.1em;
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
}

.run-history-source {
  grid-column: 1;
  grid-row: 1;
}

.run-history-card > .badge {
  grid-column: 2;
  grid-row: 1;
}

.run-history-metrics {
  grid-column: 3;
  grid-row: 1;
}

.run-history-card > .button {
  grid-column: 4;
  grid-row: 1;
  white-space: nowrap;
}

.run-history-meta {
  grid-column: 1 / 3;
  grid-row: 2;
}

.run-history-card > p {
  grid-column: 3 / 5;
  grid-row: 2;
}

@media (max-width: 1280px) {
  .run-history-card {
    grid-template-columns: minmax(220px, 1fr) auto minmax(360px, 1.8fr) auto;
  }

  .run-history-meta {
    grid-column: 1 / 3;
  }

  .run-history-card > p {
    grid-column: 3 / 5;
  }
}

@media (max-width: 820px) {
  .runs-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .run-history-card {
    grid-template-columns: 1fr auto;
  }

  .run-history-metrics,
  .run-history-meta,
  .run-history-card > p {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .run-history-card > .button {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: start;
  }

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

.card-collapse-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.card-collapse-chevron {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  transition: transform .18s ease;
}

[data-collapsible-card].is-collapsed .card-collapse-chevron {
  transform: rotate(180deg);
}

[data-collapsible-card].is-collapsed .section-heading {
  margin-bottom: 0;
}

/* Spacious spider management cards. */
.manage-spiders-page {
  gap: 18px;
}

.manage-spiders-page .operational-panel {
  padding: 20px;
}

.manage-spiders-page .ops-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.manage-spiders-page .spider-manage-card {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 20px;
  min-height: 188px;
  padding: 18px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
}

.manage-spiders-page .spider-manage-card:last-child {
  border-bottom: 1px solid var(--border);
}

.manage-spiders-page .spider-manage-card:hover {
  border-color: rgba(96, 165, 250, .28);
  background: rgba(59, 130, 246, .035);
}

.manage-spiders-page .spider-manage-card .ops-source {
  gap: 10px;
}

.manage-spiders-page .spider-manage-card .ops-url {
  min-height: 0;
  -webkit-line-clamp: 1;
}

.manage-spiders-page .spider-manage-card .ops-facts {
  grid-column: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-left: 41px;
}

.manage-spiders-page .ops-run-history {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-left: 41px;
}

.manage-spiders-page .ops-run-history .ops-timeline {
  margin: 0;
}

.manage-spiders-page .ops-last-result {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.manage-spiders-page .spider-manage-card .ops-actions {
  grid-column: 1 / -1;
  grid-row: auto;
  align-self: end;
  width: auto;
  padding-left: 41px;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.manage-spiders-page .spider-manage-card .ops-actions button,
.manage-spiders-page .spider-manage-card .ops-actions .button {
  min-width: 0;
  text-align: center;
}

.manage-spiders-page .spider-manage-card .ops-message {
  grid-column: 1 / -1;
  margin: 0 0 0 41px;
}

@media (max-width: 1180px) {
  .manage-spiders-page .ops-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .manage-spiders-page .spider-manage-card {
    grid-template-columns: 1fr;
  }

  .manage-spiders-page .spider-manage-card .ops-actions {
    grid-column: 1;
    grid-row: auto;
    width: auto;
    flex-direction: row;
    padding-left: 0;
  }

  .manage-spiders-page .spider-manage-card .ops-facts,
  .manage-spiders-page .ops-run-history {
    padding-left: 0;
  }
}

.coverage-controls > .collapsible-card-body {
  display: grid;
  gap: 12px;
}

.coverage-controls.is-collapsed,
.activity-panel.is-collapsed {
  min-height: 0;
}

.field-help {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.feed-discovery {
  margin-top: 18px;
}

.feed-source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.feed-source-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
}

.feed-source-tabs button.active {
  color: var(--foreground);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--panel) 82%, var(--accent) 18%);
}

.feed-source-tabs strong {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--accent);
  font-size: 10px;
}

.feed-source-tab-help {
  margin: 8px 2px 0;
}

.feed-source-empty {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent));
}

.spider-scan-progress {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 18px;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 88%, var(--accent) 12%);
}

.spider-scan-spinner {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spider-scan-spin .8s linear infinite;
}

@keyframes spider-scan-spin {
  to { transform: rotate(360deg); }
}

.spider-scan-copy {
  min-width: 0;
  flex: 1;
}

.spider-scan-copy h3,
.spider-scan-copy p {
  margin: 2px 0;
}

.spider-scan-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}

.spider-scan-steps span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.spider-scan-steps i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
}

.spider-scan-steps .active { color: var(--text); }
.spider-scan-steps .active i { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.spider-scan-steps .done i { background: var(--success); }

.feed-discovery-toolbar {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) minmax(180px, auto);
  align-items: end;
  gap: 16px;
  margin: 16px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 85%, var(--accent) 15%);
}

.feed-discovery-selection {
  display: grid;
  gap: 5px;
}

.feed-discovery-selection > strong {
  color: var(--accent);
  font-size: 11px;
}

.feed-filter {
  width: 100%;
}

.feed-select-all {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-weight: 800;
}

.feed-select-all input,
.feed-candidate-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

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

.feed-candidate {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.feed-candidate[hidden] {
  display: none;
}

.feed-candidate:has([data-feed-checkbox]:checked) {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 17%, transparent);
}

.feed-candidate.existing {
  border-style: dashed;
}

.feed-candidate-header {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 92%, var(--accent) 8%);
}

.feed-candidate-header > input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.feed-candidate-title {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 9px;
}

.feed-candidate-title > div {
  min-width: 0;
}

.feed-candidate-title strong,
.feed-candidate-title span {
  display: block;
}

.feed-candidate-title strong {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-candidate-title span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.feed-method-icon {
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.feed-method-icon.section { background: #8067dc; }
.feed-method-icon.sitemap { background: #b77b21; }
.feed-method-icon.api { background: #168a72; }
.feed-method-icon.arc { background: #e05236; }
.feed-method-icon.google_news { background: #4285f4; }

.feed-candidate-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 12px;
}

.feed-candidate-heading,
.feed-save-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.feed-url,
.feed-origin {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-origin {
  margin: 5px 0 0;
}

.feed-preview {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel) 94%, var(--accent) 6%);
}

.feed-preview-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}

.feed-preview-heading strong {
  font-size: 11px;
}

.feed-preview-heading span {
  color: var(--muted);
  font-size: 9px;
}

.feed-preview-list {
  display: grid;
  gap: 6px;
}

.feed-preview-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 5px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.feed-preview-item:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.feed-preview-item img,
.feed-preview-placeholder {
  width: 88px;
  height: 58px;
  border-radius: 6px;
}

.feed-preview-item img {
  object-fit: cover;
}

.feed-preview-placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface);
  font-size: 10px;
  font-weight: 900;
}

.feed-preview-copy {
  min-width: 0;
}

.feed-preview-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.feed-preview-copy small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.feed-preview-copy > span {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.feed-candidate-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.feed-candidate-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
}

.feed-candidate-meta strong {
  color: var(--text);
}

.feed-save-actions {
  margin-top: 14px;
}

.spider-new-page {
  max-width: 1180px;
  margin-inline: auto;
}

.spider-creation-panel {
  padding: clamp(18px, 3vw, 30px);
}

.spider-discovery-action {
  margin-top: 14px;
}

@media (max-width: 900px) {
  .feed-candidate-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feed-discovery-toolbar { grid-template-columns: 1fr 1fr; }
  .feed-filter { grid-column: 1 / -1; grid-row: 1; }
}

@media (max-width: 640px) {
  .feed-discovery-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .feed-candidate-list,
  .feed-discovery-toolbar,
  .spider-scan-steps { grid-template-columns: 1fr; }
  .feed-filter { grid-column: auto; grid-row: auto; }
  .spider-scan-progress { padding: 16px; }
  .spider-scan-steps { gap: 6px; }
}
/* Authentication and user management */
.backup-page-header { margin-bottom: 18px; }
.backup-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; margin: 14px 0; }
.backup-card, .backup-list-card, .backup-operation { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 14px 34px rgba(0,0,0,.16); }
.backup-card { position: relative; overflow: hidden; padding: 20px; }
.backup-card::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(85,239,213,.55), transparent); }
.backup-restore-card::before { background: linear-gradient(90deg, transparent, rgba(255,107,129,.48), transparent); }
.backup-card-heading { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.backup-card-heading h2 { margin: 2px 0 0; font-size: 16px; color: var(--text); }
.backup-card-icon, .backup-operation-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(85,239,213,.22); border-radius: 9px; color: var(--accent); background: rgba(85,239,213,.09); font-size: 20px; font-weight: 800; }
.backup-card-icon.restore { color: #fda4af; border-color: rgba(255,107,129,.25); background: rgba(255,107,129,.08); }
.backup-card > .muted { margin: 14px 0 0; font-size: 12px; line-height: 1.55; }
.backup-form { display: grid; gap: 13px; margin-top: 18px; }
.backup-form label { display: grid; gap: 7px; color: #ddd7e7; font-size: 12px; font-weight: 650; }
.backup-form input, .backup-form select { width: 100%; border-color: var(--line-2); background: #15141d; }
.backup-form input[type="file"] { padding: 9px; color: var(--muted); }
.backup-form button { min-height: 39px; }
.backup-notes { margin: 17px 0 0; padding: 14px 14px 14px 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.018); display: grid; gap: 6px; font-size: 11px; }
.backup-operation { display: grid; gap: 12px; padding: 16px 18px; background: linear-gradient(135deg, rgba(85,239,213,.07), transparent 44%), var(--panel); }
.backup-operation-head { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.backup-operation-head > div { display: grid; gap: 2px; }
.backup-operation-head small { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .09em; }
.backup-operation-head strong { font-size: 13px; }
.backup-operation-head b { color: var(--accent); font-size: 13px; font-variant-numeric: tabular-nums; }
.backup-operation p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.backup-operation.success { border-color: rgba(34,197,94,.38); background: linear-gradient(135deg, rgba(34,197,94,.08), transparent 44%), var(--panel); }
.backup-operation.failed { border-color: rgba(244,63,94,.42); background: linear-gradient(135deg, rgba(244,63,94,.08), transparent 44%), var(--panel); }
.backup-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #111018; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.backup-progress span { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, #20a9e9, var(--accent)); box-shadow: 0 0 15px rgba(85,239,213,.45); transition: width .45s ease; }
.backup-progress-note { padding-left: 54px; }
.backup-spinner { width: 18px; height: 18px; border: 2px solid rgba(85,239,213,.18); border-top-color: var(--accent); border-radius: 50%; animation: backup-spin .8s linear infinite; }
@keyframes backup-spin { to { transform: rotate(360deg); } }
.backup-list-card { padding: 18px; }
.backup-list-card .run-head { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.backup-list-card .table { margin-top: 4px; }
.backup-table td:first-child { max-width: 420px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .backup-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .backup-card-heading, .backup-operation-head { grid-template-columns: 38px minmax(0,1fr); } .backup-card-heading > .badge, .backup-operation-head > b { display: none; } .backup-progress-note { padding-left: 0; } }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; overflow-x: hidden; background: #0f0f12; color: var(--text); }
.auth-page::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 0, rgba(139,92,246,.09), transparent 36%); }
.auth-page::after { content: ""; position: fixed; inset: 0; opacity: .18; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.auth-shell { position: relative; z-index: 1; width: min(430px, 100%); }
.auth-card { width: 100%; padding: 30px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, rgba(36,34,53,.97), rgba(27,26,39,.98)); box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.025); }
.auth-setup-card { width: min(540px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 28px; color: var(--text); font-size: 17px; font-weight: 830; }
.auth-brand > span { width: 9px; height: 17px; border-radius: 2px; background: #a78bfa; box-shadow: 0 0 16px rgba(167,139,250,.14); }
.auth-heading { display: flex; align-items: flex-start; gap: 13px; }
.auth-heading h1 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.auth-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.auth-icon { display: grid; place-items: center; width: 39px; height: 39px; flex: 0 0 auto; border: 1px solid #3a3745; border-radius: 9px; color: #c4b5fd; background: rgba(255,255,255,.035); }
.auth-icon svg, .auth-alert svg, .auth-form button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-alert { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding: 11px 12px; border: 1px solid rgba(255,107,129,.32); border-radius: 8px; color: #fecdd3; background: rgba(255,107,129,.08); font-size: 11px; }
.auth-alert svg { width: 16px; height: 16px; flex: 0 0 auto; }
.auth-form { display: grid; gap: 16px; margin-top: 24px; }
.auth-form-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-form label { display: grid; gap: 7px; color: #ddd6e7; font-size: 11px; font-weight: 680; }
.auth-form input, .auth-form select { width: 100%; min-height: 42px; border: 1px solid #3a3745; border-radius: 8px; outline: none; color: #f4f4f5; background: #141419; caret-color: #c4b5fd; font-size: 13px; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.auth-form input::placeholder { color: #71677d; opacity: 1; }
.auth-form input:hover { border-color: #504b5e; }
.auth-form input:focus { border-color: #8b7aaf; background: #17171d; box-shadow: 0 0 0 3px rgba(139,122,175,.13); }
.auth-form input:-webkit-autofill, .auth-form input:-webkit-autofill:hover, .auth-form input:-webkit-autofill:focus { -webkit-text-fill-color: #f4f4f5; caret-color: #c4b5fd; box-shadow: 0 0 0 1000px #141419 inset, 0 0 0 3px rgba(139,122,175,.1); transition: background-color 9999s ease-out; }
.auth-input { position: relative; }
.auth-input > svg { position: absolute; z-index: 1; top: 50%; left: 12px; width: 16px; height: 16px; fill: none; stroke: #80748d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); pointer-events: none; }
.auth-input input { padding-left: 38px; }
.auth-input:focus-within > svg { stroke: #c4b5fd; }
.auth-form button { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; margin-top: 2px; border: 1px solid #e4e4e7; border-radius: 8px; color: #18181b; background: #f4f4f5; font-size: 12px; font-weight: 780; box-shadow: 0 8px 22px rgba(0,0,0,.2); cursor: pointer; }
.auth-form button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.auth-form button:active { transform: translateY(0); }
.auth-form button svg { width: 16px; height: 16px; }
.auth-footnote { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: #756b81; font-size: 10px; text-align: center; }
@media (max-width: 560px) { .auth-page { padding: 16px; } .auth-card { padding: 24px 20px; } .auth-setup-card { width: min(100%, calc(100vw - 32px)); } .auth-form-columns { grid-template-columns: 1fr; } }
.signed-user { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px; }
.signed-user div { display: grid; gap: 2px; min-width: 0; }
.signed-user strong, .signed-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.signed-user small { color: var(--muted, #77828b); }
.link-button { background: none; border: 0; padding: 4px; color: inherit; text-decoration: underline; cursor: pointer; }
.users-page { max-width: 1240px; margin-inline: auto; }
.users-page-header { max-width: 1240px; margin-inline: auto; margin-bottom: 20px; }
.users-page-header .muted { margin-top: 4px; font-size: 13px; }
.users-new-button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border: 1px solid rgba(85,239,213,.5); border-radius: 8px; color: #10211f; background: var(--accent); font-size: 12px; font-weight: 760; text-decoration: none; box-shadow: 0 8px 22px rgba(85,239,213,.12); }
.users-new-button:hover { filter: brightness(1.04); }
.users-new-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.users-alert { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid; border-radius: 8px; font-size: 12px; }
.users-alert.success { color: #a7f3d0; border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.08); }
.users-alert.error { color: #fecdd3; border-color: rgba(251,113,133,.3); background: rgba(251,113,133,.08); }
.users-alert span { opacity: .76; }
.user-create-panel { padding: 20px; scroll-margin-top: 20px; }
.user-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.user-section-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid rgba(85,239,213,.25); border-radius: 9px; color: var(--accent); background: rgba(85,239,213,.08); }
.user-section-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.user-section-heading h2, .users-list-heading h2 { margin: 0; color: var(--text); font-size: 14px; text-transform: none; }
.user-section-heading p, .users-list-heading p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.user-create-form { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr .8fr auto; gap: 12px; align-items: end; margin: 0; }
.user-create-form label, .user-card-fields label:not(.user-active-toggle) { display: grid; gap: 6px; color: #d8d0e2; font-size: 11px; font-weight: 680; }
.user-create-form input, .user-create-form select, .user-card input, .user-card select { min-height: 38px; border-color: var(--line-2); background: #15141d; }
.user-create-form button { min-height: 38px; white-space: nowrap; }
.username-input { position: relative; }
.username-input > span { position: absolute; z-index: 1; left: 11px; top: 50%; color: var(--muted); transform: translateY(-50%); }
.username-input input { padding-left: 27px; }
.users-list-section { margin-top: 24px; }
.users-list-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 2px; }
.users-count { padding: 4px 9px; border: 1px solid rgba(85,239,213,.18); border-radius: 999px; color: var(--accent); background: rgba(85,239,213,.07); font-size: 10px; font-weight: 720; }
.user-list { display: grid; gap: 10px; }
.user-card { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(180deg, rgba(36,34,53,.98), rgba(28,26,41,.98)); box-shadow: 0 12px 28px rgba(0,0,0,.15); }
.user-card.is-inactive { opacity: .68; }
.user-card-summary { display: grid; grid-template-columns: 40px minmax(180px,1fr) auto; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line); }
.user-avatar { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(169,84,216,.32); border-radius: 50%; color: #e8c7fa; background: linear-gradient(135deg, rgba(169,84,216,.24), rgba(85,239,213,.12)); font-size: 14px; font-weight: 820; }
.user-identity { min-width: 0; }
.user-name-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.user-name-line > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.user-identity > span { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.user-you, .user-status { padding: 2px 6px; border-radius: 999px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.user-you { color: #d8c6e7; background: rgba(255,255,255,.07); }
.user-status.active { color: var(--accent); background: rgba(85,239,213,.09); }
.user-status.inactive { color: #fda4af; background: rgba(255,107,129,.1); }
.user-login { display: grid; justify-items: end; gap: 2px; color: var(--muted); font-size: 9px; }
.user-login strong { color: #cfc5db; font-size: 10px; font-weight: 620; }
.user-card-fields { display: grid; grid-template-columns: 1.15fr .7fr 1fr minmax(150px,.8fr) auto; align-items: end; gap: 12px; padding: 15px 17px 17px; }
.user-active-toggle { display: flex; align-items: center; gap: 9px; min-height: 38px; cursor: pointer; }
.user-active-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-track { position: relative; width: 32px; height: 18px; flex: 0 0 auto; border: 1px solid var(--line-2); border-radius: 999px; background: #121119; transition: .18s ease; }
.toggle-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #857991; transition: .18s ease; }
.user-active-toggle input:checked + .toggle-track { border-color: rgba(85,239,213,.55); background: rgba(85,239,213,.18); }
.user-active-toggle input:checked + .toggle-track::after { left: 16px; background: var(--accent); }
.user-active-toggle input:focus-visible + .toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.user-active-toggle > span:last-child { display: grid; line-height: 1.2; }
.user-active-toggle strong { color: #d8d0e2; font-size: 11px; }
.user-active-toggle small { margin-top: 2px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.user-card-fields button { min-height: 38px; white-space: nowrap; }
@media (max-width: 1120px) {
  .user-create-form { grid-template-columns: 1fr 1fr; }
  .user-create-form button { grid-column: 2; }
  .user-card-fields { grid-template-columns: 1fr 1fr; }
  .user-card-fields button { justify-self: end; }
}
@media (max-width: 620px) {
  .users-page-header { align-items: flex-start; gap: 14px; }
  .users-new-button { padding-inline: 11px; }
  .user-create-form, .user-card-fields { grid-template-columns: 1fr; }
  .user-create-form button, .user-card-fields button { grid-column: auto; width: 100%; }
  .user-card-summary { grid-template-columns: 40px minmax(0,1fr); }
  .user-login { grid-column: 2; justify-items: start; }
  .users-alert { align-items: flex-start; flex-direction: column; gap: 2px; }
}
/* AutoNews News simulator -------------------------------------------------- */
.content:has(.simulator-page) { padding: 0; max-width: calc(100vw - 260px); background: #eef1f6; }
.simulator-page { min-height: 100vh; color: #202124; --news-blue: #1a73e8; --news-ink: #202124; --news-muted: #5f6368; --news-line: #dadce0; --news-bg: #f8fafd; }
.simulator-admin-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 28px 36px 22px; border-bottom: 1px solid #dde2ea; background: rgba(255,255,255,.88); backdrop-filter: blur(18px); }
.simulator-admin-head h1 { margin: 3px 0 5px; font-size: 25px; letter-spacing: -.025em; color: #172033; }
.simulator-admin-head p { margin: 0; color: #667085; }
.simulator-admin-head .simulator-eyebrow { color: #1a73e8; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.simulator-device-switch { display: flex; gap: 4px; padding: 4px; border: 1px solid #d8dde7; border-radius: 12px; background: #f6f8fb; }
.simulator-device-switch button { display: flex; align-items: center; gap: 7px; border: 0; border-radius: 9px; padding: 8px 11px; color: #5e687a; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.simulator-device-switch button.active { color: #1a73e8; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.1); }
.simulator-device-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.simulator-stage { padding: 30px 36px 56px; transition: padding .25s ease; }
.simulator-runtime-error { margin: 0 0 16px; padding: 13px 16px; border: 1px solid #f2b8b5; border-radius: 10px; color: #8c1d18; background: #fce8e6; font-size: 13px; font-weight: 700; }
.news-app-shell { position: relative; width: 100%; min-height: 760px; margin: 0 auto; overflow: hidden; border: 1px solid #d7dce5; border-radius: 20px; background: var(--news-bg); box-shadow: 0 20px 60px rgba(33,50,78,.12); transition: width .3s ease, border-radius .3s ease; }
.news-app-shell button { min-height: 0; border-width: 0; box-shadow: none; letter-spacing: normal; line-height: normal; transform: none; }
.news-app-shell button:hover { box-shadow: none; transform: none; }
.simulator-stage[data-device="phone"] { padding-top: 28px; }
.simulator-stage[data-device="phone"] .news-app-shell { width: 390px; min-height: 820px; max-height: calc(100vh - 170px); overflow-y: auto; border-radius: 34px; border: 8px solid #172033; box-shadow: 0 28px 70px rgba(17,24,39,.25); }
.news-app-header { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--news-line); }
.news-app-toolbar { display: grid; grid-template-columns: auto auto minmax(220px, 720px) auto; align-items: center; gap: 14px; min-height: 68px; padding: 0 24px; }
.news-icon-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; color: #4d5156; background: transparent; cursor: pointer; }
.news-icon-button:hover { background: #f1f3f4; }
.news-icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.news-brand { display: flex; align-items: center; gap: 9px; white-space: nowrap; color: #3c4043; text-decoration: none; font-size: 20px; letter-spacing: -.025em; }
.news-brand b { color: #5f6368; font-weight: 500; }
.news-brand-mark { position: relative; display: grid; grid-template-columns: 8px 8px; grid-template-rows: 8px 8px; gap: 2px; width: 18px; height: 18px; transform: rotate(-4deg); }
.news-brand-mark i { display: block; border-radius: 2px; background: #4285f4; }
.news-brand-mark i:nth-child(2) { background: #ea4335; }
.news-brand-mark i:nth-child(3) { grid-column: span 2; background: linear-gradient(90deg,#fbbc04 48%,#34a853 48%); }
.news-search { display: flex; align-items: center; gap: 12px; width: min(100%,680px); margin: 0 auto; padding: 0 15px; min-height: 46px; border-radius: 24px; color: #5f6368; background: #f1f3f4; font-size: 14px; }
.news-search svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.news-search span { flex: 1; }
.news-search kbd { padding: 2px 7px; border: 1px solid #d5d9dd; border-radius: 5px; background: #fff; box-shadow: none; }
.news-avatar { width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; background: #7e57c2; font-weight: 800; cursor: pointer; }
.news-category-tabs { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: 0 24px; scrollbar-width: none; }
.news-category-tabs::-webkit-scrollbar { display: none; }
.news-category-tabs button { position: relative; flex: 0 0 auto; min-height: 46px; padding: 0 14px; border: 0; color: #5f6368; background: transparent; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.news-category-tabs button::after { position: absolute; right: 12px; bottom: 0; left: 12px; height: 3px; border-radius: 3px 3px 0 0; background: transparent; content: ""; }
.news-category-tabs button.active { color: var(--news-blue); }
.news-category-tabs button.active::after { background: var(--news-blue); }
.news-tab-skeleton { align-self: center; width: 96px; height: 13px; margin: 0 10px; border-radius: 9px; background: #e7e9ec; animation: news-pulse 1.4s infinite; }
.news-tab-skeleton.short { width: 64px; }
.news-app-main { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 80px; }
.news-feed-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 20px; }
.news-overline { margin: 0 0 6px; color: var(--news-blue); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.news-feed-heading h2 { margin: 0 0 7px; color: var(--news-ink); font-size: clamp(25px,3vw,34px); line-height: 1.1; letter-spacing: -.035em; }
.news-feed-heading p:last-child { margin: 0; color: var(--news-muted); font-size: 14px; }
.news-period-picker { display: flex; flex: 0 0 auto; gap: 3px; padding: 4px; border: 1px solid var(--news-line); border-radius: 22px; background: #fff; }
.news-period-picker button { min-width: 54px; padding: 8px 10px; border: 0; border-radius: 17px; color: #5f6368; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.news-period-picker button.active { color: #0b57d0; background: #e8f0fe; }
.news-feed-meta { display: flex; align-items: center; justify-content: space-between; min-height: 34px; margin-bottom: 12px; color: #6b7280; font-size: 12px; }
.news-feed-meta button { display: inline-flex; align-items: center; gap: 6px; border: 0; color: #1a73e8; background: transparent; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.news-feed-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.news-feed-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; }
.news-feature-layout { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 16px; align-items: start; }
.news-feature-layout.single { grid-template-columns: 1fr; }
.news-feature-stack { display: grid; grid-auto-rows: max-content; gap: 16px; align-content: start; align-self: start; }
.news-feature-stack .news-card { grid-column: auto; align-self: start; height: max-content; }
.news-feature-stack .news-card-button { height: auto; min-height: 0; }
.simulator-page .news-card { position: relative; display: block; grid-template-columns: none; grid-column: span 4; align-items: stretch; gap: 0; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--news-line); border-radius: 15px; background: #fff; box-shadow: 0 1px 2px rgba(60,64,67,.05); transition: transform .18s ease, box-shadow .18s ease; }
.simulator-page .news-card:hover { transform: translateY(-2px); box-shadow: 0 5px 18px rgba(60,64,67,.12); }
.simulator-page .news-card-featured { grid-column: span 7; }
.news-card-button { display: flow-root; width: 100%; max-width: none; height: auto; min-height: 100%; gap: 0; padding: 0; border: 0; border-radius: 0; text-align: left; color: inherit; background: transparent; box-shadow: none; font: inherit; cursor: pointer; transform: none; }
.news-card-button:hover { color: inherit; background: transparent; box-shadow: none; transform: none; }
.news-card-media { position: relative; aspect-ratio: 16/8.4; overflow: hidden; background: linear-gradient(135deg,#dbe7fb,#edf2fa); }
.simulator-page .news-card-featured .news-card-media { aspect-ratio: 16/8.7; }
.simulator-page .news-card-compact .news-card-media { float: right; width: 36%; min-height: 148px; aspect-ratio: auto; margin: 14px 14px 10px 10px; border-radius: 10px; }
.news-card-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border: 0; transition: transform .35s ease; }
.simulator-page .news-card:hover .news-card-media img { transform: scale(1.025); }
.simulator-page .news-card.is-read .news-card-media img { filter: grayscale(1); opacity: .72; }
.simulator-page .news-card.is-read:hover .news-card-media img { filter: grayscale(1); opacity: .82; }
.news-card-media .no-image { display: grid; place-items: center; width: 100%; height: 100%; color: #7d91b4; }
.news-card-media .no-image svg { width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.news-card-body { padding: 16px 17px 15px; }
.simulator-page .news-card-featured .news-card-body { padding: 21px 22px 20px; }
.news-card-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; color: #5f6368; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; }
.news-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #ea4335; box-shadow: 0 0 0 4px rgba(234,67,53,.11); }
.news-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa0a6; box-shadow: 0 0 0 4px rgba(95,99,104,.1); }
.news-status-dot.developing { background: #ea4335; box-shadow: 0 0 0 4px rgba(234,67,53,.11); }
.news-status-dot.updated { background: #1a73e8; box-shadow: 0 0 0 4px rgba(26,115,232,.11); }
.simulator-page .news-card h3 { display: -webkit-box; margin: 0 0 10px; overflow: hidden; color: #202124; font-size: 17px; line-height: 1.26; letter-spacing: -.018em; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.simulator-page .news-card-featured h3 { max-width: 800px; font-size: clamp(23px,2.5vw,31px); line-height: 1.13; -webkit-line-clamp: 3; }
.news-card-summary { display: -webkit-box; margin: 0 0 15px; overflow: hidden; color: #5f6368; font-size: 13px; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.simulator-page .news-card:not(.news-card-featured) .news-card-summary { -webkit-line-clamp: 2; }
.news-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #74777b; font-size: 11px; }
.news-card-source-stack { display: flex; flex: 0 0 auto; align-items: center; padding-right: 3px; }
.news-source-avatar { display: grid; place-items: center; width: 24px; height: 24px; margin-right: -6px; overflow: hidden; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #5c6bc0; font-size: 8px; font-weight: 800; }
.news-source-avatar img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.news-card-save { position: absolute; right: 9px; bottom: 8px; z-index: 3; width: 34px; height: 34px; }
.news-card-save.saved { color: #1a73e8; }
.news-card-save.saved svg { fill: #d7e7ff; }
.news-card-skeleton { min-height: 300px; padding: 16px; }
.news-card-skeleton div { height: 150px; margin-bottom: 20px; border-radius: 11px; background: #e9ecef; }
.news-card-skeleton span { display: block; width: 86%; height: 13px; margin: 10px 0; border-radius: 10px; background: #e9ecef; }
.news-card-skeleton span:last-child { width: 48%; }
.news-card-skeleton > * { animation: news-pulse 1.4s infinite; }
.news-load-more { display: block; margin: 28px auto 0; padding: 11px 22px; border: 1px solid #a8c7fa; border-radius: 22px; color: #0b57d0; background: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.news-scroll-sentinel { width: 100%; height: 1px; margin-top: 18px; }
.news-scroll-sentinel.is-loading { height: 42px; background: radial-gradient(circle,#1a73e8 2px,transparent 3px) center/12px 12px no-repeat; animation: news-pulse 1s infinite; }
.news-feed-empty { padding: 78px 20px; text-align: center; color: #5f6368; }
.news-feed-empty > span { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; color: #7d8da6; background: #edf2f9; }
.news-feed-empty svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.news-feed-empty h3 { margin: 0 0 7px; color: #303134; }
.news-feed-empty p { margin: 0; }
.news-bottom-nav { display: none; }
.news-detail-dialog { width: min(920px,calc(100vw - 36px)); max-width: none; max-height: min(860px,calc(100vh - 32px)); padding: 0; overflow: hidden; border: 0; border-radius: 22px; background: #f8fafd; box-shadow: 0 30px 90px rgba(15,23,42,.28); }
.news-detail-dialog::backdrop { background: rgba(17,24,39,.55); backdrop-filter: blur(5px); }
.news-detail-panel { max-height: inherit; overflow-y: auto; }
.news-detail-panel > header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 14px; border-bottom: 1px solid #e0e3e7; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.news-detail-panel > header > div { display: flex; }
.news-detail-content { padding-bottom: 42px; }
.news-detail-hero { position: relative; min-height: 340px; display: flex; align-items: flex-end; padding: 34px; overflow: hidden; color: #fff; background: #24344d; }
.news-detail-hero::before { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.08),rgba(6,13,24,.88)); content: ""; }
.news-detail-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-detail-hero-copy { position: relative; z-index: 1; max-width: 760px; }
.news-detail-hero-copy .news-card-kicker { color: #e8eaed; }
.news-detail-hero h2 { margin: 0; font-size: clamp(28px,5vw,45px); line-height: 1.03; letter-spacing: -.04em; }
.news-detail-summary { padding: 28px 34px 8px; color: #3c4043; font-size: 16px; line-height: 1.65; }
.news-detail-sources { padding: 10px 34px 36px; }
.news-detail-sources h3 { margin: 0 0 5px; font-size: 20px; }
.news-detail-sources > p { margin: 0 0 18px; color: #6b7280; font-size: 13px; }
.news-source-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 14px 0; border-top: 1px solid #e2e5e9; color: inherit; text-decoration: none; }
.news-source-logo { display: grid; place-items: center; width: 42px; height: 42px; overflow: hidden; border: 1px solid #e1e4e8; border-radius: 50%; color: #fff; background: #5c6bc0; font-size: 13px; font-weight: 800; }
.news-source-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.news-source-copy { min-width: 0; }
.news-source-copy strong { display: -webkit-box; overflow: hidden; font-size: 14px; line-height: 1.3; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.news-source-copy small { display: block; margin-top: 5px; color: #6b7280; }
.news-source-row > svg { width: 19px; height: 19px; fill: none; stroke: #5f6368; stroke-width: 1.7; }
.news-toast { position: fixed; right: 28px; bottom: 28px; z-index: 100; max-width: 340px; padding: 12px 17px; border-radius: 10px; color: #fff; background: #303134; box-shadow: 0 7px 28px rgba(0,0,0,.23); font-size: 13px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: .2s ease; }
.news-toast.visible { opacity: 1; transform: translateY(0); }
@keyframes news-pulse { 0%,100%{opacity:.55} 50%{opacity:1} }

@media (max-width: 1050px) {
  .content:has(.simulator-page) { max-width: calc(100vw - 72px); }
  .simulator-admin-head { padding: 23px 24px 18px; }
  .simulator-stage { padding: 24px; }
  .news-app-toolbar { grid-template-columns: auto auto 1fr auto; }
  .news-search { min-width: 0; }
  .news-avatar { display: none; }
  .simulator-page .news-card { grid-column: span 6; }
  .news-feature-layout { grid-template-columns: 1fr; }
  .news-feature-stack { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #simulator-app .news-feature-stack .news-card { grid-column: auto; width: 100%; }
  .simulator-page .news-card-featured { grid-column: auto; }
}

@media (max-width: 700px) {
  .content:has(.simulator-page) { max-width: 100vw; }
  .simulator-admin-head { align-items: flex-start; padding: 20px 16px; }
  .simulator-admin-head > div:first-child p:last-child { display: none; }
  .simulator-device-switch { display: none; }
  .simulator-stage { padding: 0; }
  .news-app-shell, .simulator-stage[data-device="phone"] .news-app-shell { width: 100%; min-height: calc(100vh - 98px); max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .news-app-toolbar { grid-template-columns: auto 1fr auto; gap: 5px; min-height: 58px; padding: 0 10px; }
  .news-menu-button { display: none; }
  .news-brand { font-size: 18px; }
  .news-search { display: none; }
  .news-category-tabs { padding: 0 8px; }
  .news-category-tabs button { min-height: 43px; padding: 0 11px; }
  .news-app-main { width: calc(100% - 24px); padding: 22px 0 88px; }
  .news-feed-heading { display: block; margin-bottom: 15px; }
  .news-feed-heading h2 { font-size: 27px; }
  .news-feed-heading p:last-child { font-size: 13px; }
  .news-period-picker { margin-top: 17px; overflow-x: auto; }
  .news-period-picker button { flex: 1 0 auto; min-width: 52px; }
  .news-feed-grid { display: block; }
  .news-feature-layout, .news-feature-stack { display: block; }
  .simulator-page .news-card { margin-bottom: 12px; }
  .simulator-page .news-card-media { float: right; width: 116px; min-height: 108px; aspect-ratio: 1/1; margin: 14px; border-radius: 10px; }
  .simulator-page .news-card-body { min-height: 136px; padding: 15px; }
  .simulator-page .news-card h3 { font-size: 14px; line-height: 1.25; -webkit-line-clamp: 4; }
  .news-card-summary { display: none; }
  .news-card-footer { padding-right: 0; }
  .news-bottom-nav { position: sticky; bottom: 0; z-index: 15; display: grid; grid-template-columns: repeat(2,1fr); min-height: 64px; border-top: 1px solid #dadce0; background: rgba(255,255,255,.97); backdrop-filter: blur(14px); }
  .news-bottom-nav button { display: grid; place-items: center; align-content: center; gap: 3px; border: 0; color: #5f6368; background: transparent; font: inherit; font-size: 10px; }
  .news-bottom-nav button.active { color: #1a73e8; }
  .news-bottom-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .news-detail-dialog { width: 100vw; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .news-detail-hero { min-height: 310px; padding: 25px 20px; }
  .news-detail-hero h2 { font-size: 31px; }
  .news-detail-summary { padding: 22px 20px 5px; font-size: 15px; }
  .news-detail-sources { padding: 10px 20px 30px; }
}

.simulator-stage[data-device="phone"] .news-app-toolbar { grid-template-columns: 1fr auto; gap: 5px; min-height: 58px; padding: 0 12px; }
.simulator-stage[data-device="phone"] .news-menu-button, .simulator-stage[data-device="phone"] .news-search { display: none; }
.simulator-stage[data-device="phone"] .news-brand { font-size: 18px; }
.simulator-stage[data-device="phone"] .news-category-tabs { padding: 0 8px; }
.simulator-stage[data-device="phone"] .news-app-main { width: calc(100% - 24px); padding: 22px 0 22px; }
.simulator-stage[data-device="phone"] .news-feed-heading { display: block; }
.simulator-stage[data-device="phone"] .news-feed-heading h2 { font-size: 27px; }
.simulator-stage[data-device="phone"] .news-period-picker { margin-top: 17px; overflow-x: auto; }
.simulator-stage[data-device="phone"] .news-period-picker button { min-width: 52px; }
.simulator-stage[data-device="phone"] .news-feed-grid { display: block; }
.simulator-stage[data-device="phone"] .news-feature-layout, .simulator-stage[data-device="phone"] .news-feature-stack { display: block; }
.simulator-stage[data-device="phone"] .news-card { display: block; grid-template-columns: none; gap: 0; padding: 0; margin-bottom: 12px; }
.simulator-stage[data-device="phone"] .news-card, .simulator-stage[data-device="phone"] .news-card:nth-child(1), .simulator-stage[data-device="phone"] .news-card:nth-child(2), .simulator-stage[data-device="phone"] .news-card:nth-child(3) { min-height: 136px; height: auto; overflow: hidden; }
.simulator-stage[data-device="phone"] .news-card-button { display: flow-root; width: 100%; height: auto; min-height: 136px; border-radius: 0; box-shadow: none; }
.simulator-stage[data-device="phone"] .news-card-media { float: right; width: 116px; min-height: 108px; aspect-ratio: 1/1; margin: 14px; border-radius: 10px; }
.simulator-stage[data-device="phone"] .news-card-body, .simulator-stage[data-device="phone"] .news-card:nth-child(1) .news-card-body { min-height: 136px; padding: 15px; }
.simulator-stage[data-device="phone"] .news-card h3, .simulator-stage[data-device="phone"] .news-card:nth-child(1) h3 { font-size: 14px; line-height: 1.25; -webkit-line-clamp: 4; }
.simulator-stage[data-device="phone"] .news-card-summary { display: none; }
.simulator-stage[data-device="phone"] .news-bottom-nav { position: sticky; bottom: 0; z-index: 15; display: grid; grid-template-columns: repeat(2,1fr); min-height: 64px; border-top: 1px solid #dadce0; background: rgba(255,255,255,.97); }
.simulator-stage[data-device="phone"] .news-bottom-nav button { display: grid; place-items: center; align-content: center; gap: 3px; border: 0; color: #5f6368; background: transparent; font: inherit; font-size: 10px; }
.simulator-stage[data-device="phone"] .news-bottom-nav button.active { color: #1a73e8; }
.simulator-stage[data-device="phone"] .news-bottom-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Coverage detail: selected cover and its alternatives live in one ShadCN-like card. */
.coverage-detail-page .coverage-hero-card {
  grid-template-columns: minmax(340px, 440px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 24px;
}

.coverage-detail-page .coverage-media-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .018);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

.coverage-media-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.coverage-media-heading > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.coverage-media-eyebrow {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.coverage-media-heading small,
.coverage-image-option small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.coverage-selected-image {
  padding: 12px 12px 0;
}

.coverage-detail-page .coverage-selected-image .hero-image,
.coverage-detail-page .coverage-selected-image .hero-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .035);
}

.coverage-detail-page .coverage-media-card .coverage-image-picker {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  overflow-x: auto;
  border-top: 1px solid var(--border);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}

.coverage-detail-page .coverage-image-option {
  min-width: 0;
  scroll-snap-align: start;
}

.coverage-detail-page .coverage-image-option button {
  display: grid;
  gap: 6px;
  width: 100%;
  min-height: 0;
  padding: 5px;
  color: var(--text);
  text-align: left;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  box-shadow: none;
}

.coverage-detail-page .coverage-image-option button:hover {
  border-color: var(--border);
  background: rgba(255, 255, 255, .045);
}

.coverage-detail-page .coverage-image-option.selected button {
  border-color: rgba(96, 165, 250, .72);
  background: rgba(59, 130, 246, .1);
  box-shadow: 0 0 0 1px rgba(96, 165, 250, .12);
}

.coverage-detail-page .coverage-image-option .coverage-image-thumb {
  position: relative;
  display: block;
  width: 100%;
}

.coverage-detail-page .coverage-image-option img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 5px;
  background: rgba(255, 255, 255, .035);
}

.coverage-image-check {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid !important;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 2px solid #18181b;
  border-radius: 999px;
  color: #fff;
  background: #3b82f6;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.coverage-detail-page .coverage-image-option small {
  display: block;
  padding: 0 2px 1px;
}

.coverage-image-empty {
  margin: 0;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
}

@media (max-width: 1100px) {
  .coverage-detail-page .coverage-hero-card {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .coverage-detail-page .coverage-hero-card {
    grid-template-columns: 1fr;
  }

  .coverage-detail-page .coverage-media-card {
    width: min(100%, 620px);
  }
}

@media (max-width: 620px) {
  .coverage-detail-page .coverage-hero-card {
    gap: 18px;
    padding: 14px;
  }

  .coverage-media-heading {
    padding: 12px;
  }

  .coverage-detail-page .coverage-media-card .coverage-image-picker {
    grid-auto-columns: 92px;
  }
}

/* Final coverage cascade: the thumbnail collection always expands in place. */
.coverage-detail-page .coverage-media-card .coverage-image-picker {
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: visible;
  scrollbar-width: auto;
  scroll-snap-type: none;
}

@media (max-width: 620px) {
  .coverage-detail-page .coverage-media-card .coverage-image-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
  }
}

/* Simulator desktop: compact stories must never absorb the featured card height. */
@media (min-width: 1051px) {
  #simulator-app .news-feature-layout {
    align-items: stretch;
  }

  #simulator-app .news-feature-stack {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    height: 100%;
    min-height: 0;
  }

  #simulator-app .news-feature-stack > .news-card {
    flex: none;
    align-self: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  #simulator-app .news-feature-stack > .news-card > .news-card-button {
    display: flow-root;
    height: auto;
    min-height: 0;
  }
}

/* Fallback for sessions that still have the pre-wrapper simulator DOM. */
@media (min-width: 701px) {
  #simulator-app .news-feed-grid:not(:has(.news-feature-layout)) > .news-card:nth-child(2),
  #simulator-app .news-feed-grid:not(:has(.news-feature-layout)) > .news-card:nth-child(3) {
    align-self: start;
    height: max-content;
    min-height: 0;
  }

  #simulator-app .news-feed-grid:not(:has(.news-feature-layout)) > .news-card:nth-child(2) > .news-card-button,
  #simulator-app .news-feed-grid:not(:has(.news-feature-layout)) > .news-card:nth-child(3) > .news-card-button {
    height: auto;
    min-height: 0;
  }
}

/* Cards inside the feature wrapper use its two columns, never the outer 12-column grid. */
#simulator-app .news-feature-layout > .news-card-featured,
#simulator-app .news-feature-layout > .news-feature-stack {
  grid-column: auto;
}