.long04-preview, .long04-screen {
  --long04-ink: #173a35;
  --long04-muted: #61736e;
  --long04-card: #ffffff;
  --long04-soft: #f3f5f0;
  --long04-border: #dce5df;
  --long04-accent: #277066;
  --long04-accent-soft: #e6f0ea;
  --long04-highlight: #f5eddc;
  color: var(--long04-ink);
  min-height: 100vh;
  background: var(--long04-soft);
}

:root[data-theme="dark"] .long04-preview, :root[data-theme="dark"] .long04-screen {
  --long04-ink: #e8eef0;
  --long04-muted: #b5c2c7;
  --long04-card: #202b31;
  --long04-soft: #151e23;
  --long04-border: #425157;
  --long04-accent: #84ced7;
  --long04-accent-soft: #243e43;
  --long04-highlight: #453c2b;
}

.long04-preview * { box-sizing: border-box; }
.long04-preview button,
.long04-preview select,
.long04-preview a { font: inherit; }
.long04-preview button:focus-visible,
.long04-preview select:focus-visible,
.long04-preview a:focus-visible,
.long04-preview [tabindex="0"]:focus-visible {
  outline: 3px solid #e19a42;
  outline-offset: 3px;
}
.long04-preview [hidden] { display: none !important; }

.long04-skip-link {
  position: absolute;
  z-index: 30;
  left: 12px;
  top: -80px;
  padding: 12px 16px;
  color: #fff;
  background: #17485b;
  border-radius: 8px;
}
.long04-skip-link:focus { top: 12px; }

.long04-toolbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 10px max(20px, calc((100vw - 1240px) / 2));
  border-bottom: 1px solid var(--long04-border);
  background: color-mix(in srgb, var(--long04-card) 94%, transparent);
  backdrop-filter: blur(12px);
}
.long04-toolbar-title { display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
.long04-toolbar-title b { font-size: 13px; letter-spacing: .01em; }
.long04-toolbar-title small { color: var(--long04-muted); font-size: 11px; }
.long04-toolbar-nav { display: flex; gap: 5px; min-width: 0; overflow-x: auto; padding: 3px 2px 5px; scrollbar-width: thin; }
.long04-toolbar-nav button {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--long04-muted);
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.long04-toolbar-nav button:hover { color: var(--long04-ink); background: var(--long04-soft); }
.long04-toolbar-nav button[aria-current="step"] {
  color: var(--long04-ink);
  border-color: var(--long04-border);
  background: var(--long04-accent-soft);
  font-weight: 700;
}
.long04-toolbar-actions { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.long04-toolbar-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 11px;
  border: 1px solid var(--long04-border);
  border-radius: 10px;
  color: var(--long04-ink);
  background: var(--long04-card);
  cursor: pointer;
  font-size: 12px;
}
.long04-toolbar-actions button:hover:not(:disabled) { border-color: var(--long04-accent); }
.long04-toolbar-actions button:disabled { opacity: .45; cursor: not-allowed; }
.long04-toolbar-actions img { width: 17px; height: 17px; }
.long04-toolbar-count { min-width: 42px; color: var(--long04-muted); font-size: 12px; text-align: center; }

.long04-screen { min-height: calc(100vh - 66px); }
.long04-screen .inner {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto;
  padding: 38px 0 52px;
}
.long04-screen .eyebrow { color: var(--long04-accent); }
.long04-screen h1 { max-width: 1000px; margin-bottom: 20px; color: var(--long04-ink); }
.long04-screen .screen-body { display: flex; flex-direction: column; gap: 22px; }
.long04-screen .footnote { max-width: 1120px; margin-top: 22px; color: var(--long04-muted); }
.long04-screen h2 { margin: 0; color: var(--long04-ink); font-size: clamp(20px, 2.3vw, 28px); line-height: 1.2; }
.long04-screen h3 { color: var(--long04-ink); }
.long04-screen p { color: var(--long04-muted); }

.long04-overview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); gap: 24px; align-items: stretch; }
.long04-overview-copy { display: flex; flex-direction: column; gap: 18px; }
.long04-lead { max-width: 790px; margin: 0; color: var(--long04-ink) !important; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.5; }
.long04-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.long04-kpi { display: flex; min-height: 142px; flex-direction: column; justify-content: space-between; gap: 7px; padding: 18px; border: 1px solid var(--long04-border); border-radius: 16px; background: var(--long04-card); }
.long04-kpi span { color: var(--long04-muted); font-size: 12px; line-height: 1.4; }
.long04-kpi b { color: var(--long04-ink); font-size: 16px; }
.long04-kpi strong { color: var(--long04-accent); font-size: 28px; line-height: 1; }
.long04-kpi small { color: var(--long04-muted); font-size: 12px; }
.long04-kpi-primary { border-color: color-mix(in srgb, var(--long04-accent) 35%, var(--long04-border)); background: var(--long04-accent-soft); }
.long04-search-base { display: flex; flex-direction: column; gap: 8px; padding: 15px 17px; border-radius: 14px; background: var(--long04-card); }
.long04-search-base h3 { margin: 0 0 5px; font-size: 14px; }
.long04-mini-stat { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 36px; border-top: 1px solid var(--long04-border); }
.long04-mini-stat img { width: 19px; height: 19px; }
.long04-mini-stat span { color: var(--long04-muted); font-size: 13px; }
.long04-mini-stat b { color: var(--long04-ink); font-size: 13px; }
.long04-overview-visual { position: relative; overflow: hidden; min-height: 330px; border-radius: 18px; background: var(--long04-accent-soft); }
.long04-overview-visual > img { display: block; width: 100%; height: 100%; min-height: 330px; object-fit: cover; }
.long04-overview-visual > div { position: absolute; right: 15px; bottom: 15px; left: 15px; display: flex; flex-direction: column; gap: 4px; padding: 15px 17px; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; color: #fff; background: rgba(16, 37, 43, .78); backdrop-filter: blur(10px); }
.long04-overview-visual span { font-size: 11px; opacity: .82; }
.long04-overview-visual b { font-size: 17px; }
.long04-overview-visual small { font-size: 11px; line-height: 1.45; opacity: .86; }
.long04-cjm-overview { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
.long04-section-heading { display: flex; justify-content: space-between; gap: 22px; align-items: end; }
.long04-section-heading p { max-width: 430px; margin: 0; font-size: 12px; line-height: 1.5; }
.long04-section-heading h2 { margin-top: 5px; }
.long04-stage-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.long04-stage-tile { display: flex; min-height: 200px; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--long04-border); border-radius: 15px; background: var(--long04-card); }
.long04-stage-tile img { width: 24px; height: 24px; }
.long04-stage-tile > span { color: var(--long04-accent); font-size: 11px; font-weight: 700; }
.long04-stage-tile b { color: var(--long04-ink); font-size: 15px; }
.long04-stage-tile small { color: var(--long04-accent); font-size: 11px; font-weight: 600; }
.long04-stage-tile p { margin: 0; font-size: 12px; line-height: 1.5; }

.long04-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 14px; border: 1px solid var(--long04-border); border-radius: 14px; background: var(--long04-card); }
.long04-filter { display: flex; min-width: 190px; flex: 1 1 190px; flex-direction: column; gap: 6px; }
.long04-filter > span { color: var(--long04-muted); font-size: 11px; font-weight: 600; }
.long04-select { width: 100%; min-height: 44px; padding: 9px 34px 9px 11px; border: 1px solid var(--long04-border); border-radius: 9px; color: var(--long04-ink); background: var(--long04-card); cursor: pointer; font-size: 13px; }
.long04-control-note { margin: -8px 0 0; color: var(--long04-muted); font-size: 12px; line-height: 1.5; }
.long04-live-summary { color: var(--long04-muted); font-size: 12px; line-height: 1.5; }
.long04-table-scroll { max-width: 100%; overflow: auto; overscroll-behavior-x: contain; border: 1px solid var(--long04-border); border-radius: 14px; background: var(--long04-card); scrollbar-width: thin; }
.long04-table { width: 100%; min-width: 850px; border-collapse: separate; border-spacing: 0; color: var(--long04-ink); background: var(--long04-card); font-size: 13px; }
.long04-table th,
.long04-table td { padding: 11px 12px; border-bottom: 1px solid var(--long04-border); text-align: left; vertical-align: middle; }
.long04-table thead th { position: sticky; z-index: 1; top: 0; color: var(--long04-muted); background: var(--long04-soft); font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.long04-table tbody tr:last-child th,
.long04-table tbody tr:last-child td { border-bottom: 0; }
.long04-table tbody tr:hover { background: color-mix(in srgb, var(--long04-accent-soft) 44%, transparent); }
.long04-table tbody tr.long04-others { background: var(--long04-accent-soft); font-weight: 700; }
.long04-ai-value strong { color: #2867c7; }
.long04-metric-label { display: inline-flex; align-items: center; gap: 5px; }
.long04-metric-label svg { width: 15px; height: 15px; flex: 0 0 15px; }
:root[data-theme="dark"] .long04-ai-value strong { color: #8fb9ff; }
.long04-place { width: 52px; color: var(--long04-muted); font-variant-numeric: tabular-nums; }
.long04-brand { display: inline-flex; min-width: 150px; align-items: center; gap: 8px; color: var(--long04-ink); font-weight: 650; }
.long04-brand-icon { width: 24px; height: 24px; object-fit: contain; border-radius: 5px; }
:root[data-theme="dark"] .long04-brand-icon { background: #fff; }
.long04-brand-mark { display: inline-grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid var(--long04-border); border-radius: 6px; color: var(--long04-accent); background: var(--long04-accent-soft); font-size: 9px; font-weight: 800; }
.long04-bar { display: block; width: 96px; height: 4px; margin-top: 5px; overflow: hidden; border-radius: 4px; background: var(--long04-soft); }
.long04-bar i { display: block; height: 100%; border-radius: inherit; background: var(--long04-accent); }
.long04-ai-value .long04-bar i { background: #2867c7; }
.long04-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 10px 15px; border: 1px solid var(--long04-border); border-radius: 9px; color: var(--long04-ink); background: var(--long04-card); cursor: pointer; font-size: 12px; font-weight: 650; }
.long04-button:hover { border-color: var(--long04-accent); background: var(--long04-accent-soft); }
.long04-button-secondary { align-self: flex-start; }
.long04-small-note { margin: -5px 0 0; color: var(--long04-muted); font-size: 11px; }
.long04-callout { margin: 0; padding: 15px 17px; border-left: 3px solid var(--long04-accent); border-radius: 0 11px 11px 0; color: var(--long04-muted); background: var(--long04-accent-soft); font-size: 13px; line-height: 1.55; }
.long04-callout b { color: var(--long04-ink); }
.long04-callout-muted { border-left-color: #c49852; background: var(--long04-highlight); }
.long04-insight { padding: 13px 15px; border-radius: 12px; color: var(--long04-muted); background: var(--long04-accent-soft); font-size: 13px; line-height: 1.55; }
.long04-insight b,
.long04-insight strong { color: var(--long04-ink); }
.long04-note { max-width: 1100px; margin: 0; color: var(--long04-muted); font-size: 12px; line-height: 1.55; }
.long04-channel-icon { display: inline-block; width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; vertical-align: middle; }
.long04-stage-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.long04-surface-label { display: flex; flex-direction: column; gap: 3px; color: var(--long04-accent); font-size: 12px; letter-spacing: .03em; }
.long04-surface-label span { color: var(--long04-muted); font-weight: 600; }
.long04-stage-button { min-height: 42px; padding: 8px 14px; border: 1px solid var(--long04-border); border-radius: 999px; color: var(--long04-ink); background: var(--long04-card); cursor: pointer; }
.long04-stage-button[aria-pressed="true"] { color: #fff; background: #277066; border-color: #277066; }
.long04-comparison-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 28%); gap: 16px; align-items: start; }
.long04-comparison-layout > .long04-insight { grid-column: 2; grid-row: 1; }
.long04-comparison-layout > .long04-table-scroll { grid-column: 1; grid-row: 1; }
@media (max-width: 800px) { .long04-comparison-layout { display: flex; flex-direction: column; } .long04-comparison-layout > * { width: 100%; } }
.long04-channel-cell { display: inline-flex; align-items: center; gap: 8px; color: var(--long04-ink); font-weight: 650; }
.long04-channel-cell small { display: block; color: var(--long04-muted); font-size: 10px; font-weight: 400; }
.long04-stage-task { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; border: 1px solid var(--long04-border); border-radius: 11px; background: var(--long04-card); }
.long04-stage-task b { color: var(--long04-ink); font-size: 13px; }
.long04-stage-task span { color: var(--long04-muted); font-size: 12px; line-height: 1.5; }
.long04-stage-role-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.long04-stage-role-notes p { margin: 0; padding: 13px 14px; border: 1px solid var(--long04-border); border-radius: 11px; background: var(--long04-card); font-size: 12px; line-height: 1.5; }
.long04-stage-role-notes b { color: var(--long04-ink); }
.long04-source-base { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--long04-muted); font-size: 12px; }
.long04-source-base b { color: var(--long04-ink); }
.long04-source-table { min-width: 620px; }
.long04-category { display: inline-flex; align-items: center; gap: 9px; color: var(--long04-ink); font-weight: 600; }
.long04-source-icon { width: 20px; height: 20px; flex: 0 0 20px; object-fit: contain; }
.long04-search-explainer { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(190px, .7fr)); gap: 12px; align-items: stretch; }
.long04-search-explainer > div:first-child { padding: 15px 0; }
.long04-search-explainer h2 { margin: 5px 0 8px; }
.long04-search-explainer p { max-width: 620px; margin: 0; font-size: 13px; line-height: 1.5; }
.long04-eyebrow { color: var(--long04-accent); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.long04-coverage-card { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 15px 17px; border: 1px solid var(--long04-border); border-radius: 14px; background: var(--long04-card); }
.long04-coverage-card b { color: var(--long04-ink); font-size: 13px; }
.long04-coverage-card strong { color: var(--long04-accent); font-size: 24px; }
.long04-coverage-card small { color: var(--long04-muted); font-size: 10px; line-height: 1.4; }
.long04-answer-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.long04-query-card { grid-column: 1 / -1; padding: 15px 17px; border: 1px solid var(--long04-border); border-radius: 13px; background: var(--long04-card); }
.long04-query-card h3 { margin: 6px 0; font-size: 18px; }
.long04-query-card small { color: var(--long04-muted); font-size: 11px; }
.long04-answer-card { min-width: 0; padding: 16px; border: 1px solid var(--long04-border); border-radius: 14px; background: var(--long04-card); }
.long04-answer-card header { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.long04-source-count { color: var(--long04-muted); font-size: 10px; }
.long04-answer-card blockquote { max-height: 230px; overflow: auto; margin: 12px 0; padding: 0 0 0 12px; border-left: 2px solid var(--long04-accent); color: var(--long04-ink); font-size: 12px; line-height: 1.6; }
.long04-answer-sources { padding-top: 10px; border-top: 1px solid var(--long04-border); }
.long04-answer-sources > b { color: var(--long04-muted); font-size: 10px; }
.long04-source-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0 0; padding: 0; list-style: none; }
.long04-source-links a { display: inline-flex; min-height: 34px; align-items: center; padding: 5px 9px; border: 1px solid var(--long04-border); border-radius: 999px; color: var(--long04-accent); font-size: 10px; text-decoration: none; }
.long04-source-links a:hover { text-decoration: underline; }
.long04-no-sources { display: block; margin-top: 6px; color: var(--long04-muted); font-size: 11px; }
.long04-conclusion-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.long04-conclusion-card { display: flex; min-height: 210px; flex-direction: column; gap: 9px; padding: 19px; border: 1px solid var(--long04-border); border-radius: 15px; background: var(--long04-card); }
.long04-conclusion-card > span { color: var(--long04-accent); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.long04-conclusion-card h2 { font-size: 20px; }
.long04-conclusion-card p { margin: 0; color: var(--long04-ink); font-size: 13px; line-height: 1.55; }
.long04-conclusion-card small { margin-top: auto; color: var(--long04-muted); font-size: 10px; line-height: 1.4; }
.long04-conclusion-primary { border-color: color-mix(in srgb, var(--long04-accent) 45%, var(--long04-border)); background: var(--long04-accent-soft); }

@media (max-width: 940px) {
  .long04-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .long04-toolbar-title { display: none; }
  .long04-toolbar-nav { grid-column: 1; grid-row: 1; }
  .long04-toolbar-actions { grid-column: 2; grid-row: 1; }
  .long04-overview-grid { grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); }
  .long04-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .long04-stage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .long04-search-explainer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .long04-search-explainer > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .long04-toolbar { padding: 7px 9px; }
  .long04-toolbar-nav { gap: 2px; }
  .long04-toolbar-nav button { min-height: 40px; padding: 6px 9px; font-size: 11px; }
  .long04-toolbar-actions { gap: 5px; }
  .long04-toolbar-actions button { width: 42px; min-height: 42px; padding: 8px; }
  .long04-toolbar-actions button span { display: none; }
  .long04-toolbar-count { display: none; }
  .long04-screen { min-height: calc(100vh - 58px); }
  .long04-screen .inner { width: calc(100% - 28px); padding: 25px 0 34px; }
  .long04-screen h1 { margin-bottom: 14px; font-size: clamp(27px, 8vw, 36px); line-height: 1.08; }
  .long04-screen .screen-body { gap: 17px; }
  .long04-overview-grid { grid-template-columns: 1fr; }
  .long04-overview-visual { min-height: 220px; }
  .long04-overview-visual > img { min-height: 220px; max-height: 250px; }
  .long04-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .long04-kpi { min-height: 126px; padding: 13px; border-radius: 13px; }
  .long04-kpi-primary { grid-column: 1 / -1; }
  .long04-kpi strong { font-size: 24px; }
  .long04-stage-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .long04-stage-tile { min-height: 194px; padding: 12px; }
  .long04-stage-tile b { font-size: 13px; }
  .long04-stage-tile small { font-size: 10px; }
  .long04-section-heading { align-items: start; flex-direction: column; gap: 7px; }
  .long04-controls { display: grid; grid-template-columns: 1fr; padding: 11px; gap: 9px; }
  .long04-filter { min-width: 0; width: 100%; }
  .long04-table { min-width: 780px; font-size: 12px; }
  .long04-table th, .long04-table td { padding: 10px 9px; }
  .long04-search-explainer { grid-template-columns: 1fr 1fr; gap: 8px; }
  .long04-search-explainer > div:first-child { grid-column: 1 / -1; }
  .long04-coverage-card { padding: 12px; }
  .long04-coverage-card strong { font-size: 20px; }
  .long04-answer-pair { grid-template-columns: 1fr; }
  .long04-query-card { grid-column: 1; }
  .long04-answer-card header { align-items: start; flex-direction: column; }
  .long04-stage-role-notes { grid-template-columns: 1fr; }
  .long04-conclusion-grid { grid-template-columns: 1fr; }
  .long04-conclusion-card { min-height: 0; padding: 15px; }
  .long04-conclusion-card h2 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .long04-preview *, .long04-preview *::before, .long04-preview *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Match the shared research palette, including its light and dark tokens. */
.long04-preview, .long04-screen,
:root[data-theme="dark"] .long04-preview, :root[data-theme="dark"] .long04-screen {
  --long04-ink: var(--text); --long04-muted: var(--muted); --long04-card: var(--bg);
  --long04-soft: var(--surface); --long04-border: var(--line); --long04-accent: var(--blue);
  --long04-accent-soft: var(--blue-fade); --long04-highlight: var(--surface);
}
.long04-preview, .long04-screen { background: var(--bg); }
.long04-stage-button[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--bg); }
.long04-rank-layout, .long04-cjm-layout, .long04-source-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 25%); gap: 24px; align-items: start; }
.long04-rank-main { min-width: 0; }
.long04-rank-insight { background: var(--blue-fade); border-radius: 16px; padding: 22px 24px; color: var(--text); }
.long04-rank-insight > span { display: block; color: var(--blue); font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.long04-rank-insight h2 { margin: 0 0 12px; font-size: 25px; }
.long04-rank-insight p { font-size: 16px; line-height: 1.4; margin: 0 0 12px; color: var(--muted); }
.long04-rank-shift { display: inline-flex; margin-left: 7px; color: var(--blue); font-size: 12px; font-weight: 700; }
.long04-rank-shift.down { color: #bb5d4c; }
.long04-comparison-layout > .long04-insight { background: var(--blue-fade); }
.long04-screen .long04-controls { padding: 0; gap: 10px; background: transparent; border: 0; border-radius: 0; }
.long04-screen .long04-filter { flex: 0 1 210px; min-width: 145px; gap: 2px; }
.long04-screen .long04-filter > span { font-size: 12px; }
.long04-screen .long04-native-metric, .long04-screen .long04-native-stage { position: absolute; width: 1px; height: 1px; min-width: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.long04-metric-controls { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.long04-metric-button { min-height: 34px; border: 0; border-radius: 8px; padding: 5px 10px; color: var(--muted); background: transparent; font-size: 14px; cursor: pointer; }
.long04-metric-button[aria-pressed="true"] { color: var(--blue); background: var(--blue-fade); font-weight: 700; }
.long04-screen .long04-select { min-height: 34px; padding: 5px 25px 5px 9px; font-size: 14px; }
.long04-screen .long04-stage-controls { gap: 7px; }
.long04-screen .long04-stage-button { min-height: 36px; font-size: 14px; }
.long04-stage-button img { width: 16px; height: 16px; object-fit: contain; margin-right: 5px; vertical-align: middle; }
:root[data-theme="dark"] .long04-surface-icons img[src$="chatgpt.svg"], :root[data-theme="dark"] .long04-surface-icons img[src$="gigachat.svg"], :root[data-theme="dark"] .long04-surface-icons img[src$="perplexity.svg"] { filter: invert(1); }
.long04-surface-label { gap: 2px; font-size: 15px; margin-bottom: 8px; }
.long04-surface-label span { color: var(--blue); }
.long04-surface-icons { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 6px; }
.long04-surface-icons .long04-channel-icon { width: 16px; height: 16px; }
@media (min-width: 801px) {
  #long04-overview { align-items: flex-start; padding: 12px 32px 24px; }
  #long04-overview .inner { width: 100%; padding: 0; }
  #long04-overview h1 { font-size: clamp(36px,3.5vw,48px); margin: 0 0 7px; }
  #long04-overview .screen-body { gap: 9px; }
  #long04-overview .long04-overview-grid { grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr); gap: 20px; }
  #long04-overview .long04-overview-copy { gap: 10px; }
  #long04-overview .long04-lead { font-size: 17px; line-height: 1.35; }
  #long04-overview .long04-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  #long04-overview .long04-kpi { min-height: 100px; padding: 12px 15px; gap: 4px; }
  #long04-overview .long04-kpi strong { font-size: 25px; }
  #long04-overview .long04-mini-stat { min-height: 25px; }
  #long04-overview .long04-search-base h3 { font-size: 13px; }
  #long04-overview .long04-overview-visual, #long04-overview .long04-overview-visual > img { min-height: 0; max-height: 320px; background: transparent; object-fit: contain; }
  #long04-overview .long04-cjm-overview { gap: 6px; padding: 0; }
  #long04-overview .long04-section-heading h2 { font-size: 18px; }
  #long04-overview .long04-stage-tile { display: grid; grid-template-columns: 20px 20px 1fr; align-items: center; min-height: 68px; gap: 4px; padding: 8px; border: 0; border-radius: 8px; background: var(--blue-fade); }
  #long04-overview .long04-stage-tile img { width: 18px; height: 18px; }
  #long04-overview .long04-stage-tile p { grid-column: 2 / -1; font-size: 11px; line-height: 1.2; }
  #long04-overview .footnote { margin-top: 6px !important; font-size: 12px; }
  .long04-screen:is(#long04-ai-ranking,#long04-search-ranking) { align-items: flex-start; padding: 12px 32px 28px; }
  .long04-screen:is(#long04-ai-ranking,#long04-search-ranking) .inner { width: 100%; padding: 0; }
  .long04-screen:is(#long04-ai-ranking,#long04-search-ranking) h1 { font-size: clamp(32px,3vw,42px); margin: 0 0 8px; }
  .long04-screen:is(#long04-ai-ranking,#long04-search-ranking) .screen-body { gap: 7px; }
  .long04-screen:is(#long04-ai-ranking,#long04-search-ranking) .footnote { margin-top: 6px !important; font-size: 13px; }
  .long04-rank-main .long04-table-scroll { border: 0; border-radius: 0; }
  .long04-rank-main .long04-table { min-width: 780px; font-size: 14px; line-height: 1.15; }
  .long04-rank-main .long04-table th, .long04-rank-main .long04-table td { padding: 4px 6px; height: 31px; }
  .long04-rank-main .long04-table th:nth-child(4), .long04-rank-main .long04-table td:nth-child(4) { display: none; }
  .long04-rank-main .long04-table thead th { font-size: 12px; background: var(--bg); }
  .long04-rank-main .long04-brand { min-width: 125px; gap: 5px; white-space: nowrap; }
  .long04-rank-main .long04-brand-icon, .long04-rank-main .long04-brand-mark { width: 21px; height: 21px; flex-basis: 21px; }
  .long04-rank-main .long04-place { width: 34px; }
  .long04-rank-main .long04-bar { display: inline-block; width: 75px; margin: 0 0 2px 5px; vertical-align: middle; }
  .long04-rank-main .long04-button { min-height: 30px; padding: 4px 0; border: 0; color: var(--blue); }
  .long04-rank-main .long04-live-summary, .long04-rank-main .long04-small-note { font-size: 12px; line-height: 1.2; }
  .long04-screen:is(#long04-ai-cjm,#long04-search-cjm) { align-items: flex-start; padding: 12px 32px 28px; }
  .long04-screen:is(#long04-ai-cjm,#long04-search-cjm) .inner { width: 100%; padding: 0; }
  .long04-screen:is(#long04-ai-cjm,#long04-search-cjm) h1 { font-size: clamp(32px,3vw,42px); margin: 0 0 8px; }
  .long04-screen:is(#long04-ai-cjm,#long04-search-cjm) .screen-body { gap: 7px; }
  .long04-cjm-layout .long04-table th, .long04-cjm-layout .long04-table td { padding: 4px 6px; height: 31px; font-size: 14px; }
  .long04-cjm-layout .long04-table th:nth-child(4), .long04-cjm-layout .long04-table td:nth-child(4) { display: none; }
  .long04-cjm-layout .long04-brand { white-space: nowrap; }
  .long04-stage-task { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .long04-screen:is(#long04-ai-sources,#long04-search-sources) { align-items: flex-start; padding: 12px 32px 28px; }
  .long04-screen:is(#long04-ai-sources,#long04-search-sources) .inner { width: 100%; padding: 0; }
  .long04-screen:is(#long04-ai-sources,#long04-search-sources) h1 { font-size: clamp(32px,3vw,42px); margin: 0 0 8px; }
  .long04-screen:is(#long04-ai-sources,#long04-search-sources) .screen-body { gap: 8px; }
  .long04-source-layout .long04-table { font-size: 14px; }
  .long04-source-layout .long04-table th, .long04-source-layout .long04-table td { padding: 6px; font-size: 13px; }
  .long04-source-layout .long04-channel-cell { font-size: 11px; }
}
@media (max-width: 800px) {
  .long04-rank-layout, .long04-cjm-layout, .long04-source-layout { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .long04-rank-insight { padding: 16px; }
  .long04-screen .long04-controls { display: flex; }
  .long04-screen .long04-filter { flex: 1 1 140px; }
}

/* Цвета изменения места и иконки метрик соответствуют исследованию. */
.long04-screen .long04-rank-shift.up {color:#087b42}
.long04-screen .long04-rank-shift.down {color:#b42331}
:root[data-theme="dark"] .long04-screen .long04-rank-shift.up {color:#66d79a}
:root[data-theme="dark"] .long04-screen .long04-rank-shift.down {color:#ff939b}
.long04-metric-button .long04-metric-label {gap:5px}
:root[data-theme="dark"] .long04-screen .long04-surface-icons img[src$="/chatgpt.svg"],
:root[data-theme="dark"] .long04-screen .long04-surface-icons img[src$="/gigachat.svg"],
:root[data-theme="dark"] .long04-screen .long04-surface-icons img[src$="/perplexity.svg"] {filter:invert(1)}

/* Скрытые переключатели и кнопки не должны появляться в общем дашборде. */
.long04-screen [hidden] {display:none !important}

/* Рейтинг и сравнение AI-моделей: оформление согласованных экранов новостроек. */
#long04-overview .inner {width:100%;max-width:none;margin:0 auto;padding:0}
#long04-overview .screen-body {gap:0}
#long04-overview .footnote:empty {display:none}
#long04-overview .direction-description {color:var(--muted)}
@media (min-width:801px) {
  #long04-overview {min-height:calc(100vh - 64px);align-items:stretch;padding:28px 32px 58px}
  #long04-overview h1 {font-size:clamp(44px,4.1vw,60px);margin:0 0 14px}
  #long04-overview .screen-body {gap:0}
}
@media (min-width:801px) and (max-height:740px) {
  #long04-overview {padding-top:20px;padding-bottom:48px}
  #long04-overview h1 {font-size:clamp(42px,4vw,54px);margin-bottom:10px}
}
#long04-ai-ranking .model-eyebrow,
#long04-ai-channels .model-eyebrow {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
#long04-ai-ranking .market-channel-icons,
#long04-ai-channels .market-channel-icons {gap:7px}
#long04-ai-ranking .market-channel-icons img,
#long04-ai-channels .market-channel-icons img {width:18px;height:18px}
#long04-ai-channels .inner {width:100%;max-width:none;padding:0}
#long04-ai-channels .screen-body {display:block}
#long04-ai-channels h1 {font-size:clamp(34px,3.2vw,46px);margin:4px 0 10px}
#long04-ai-ranking .long04-metric-controls,
#long04-ai-ranking .long04-live-summary,
#long04-ai-ranking .long04-small-note {display:none}
#long04-ai-ranking .long04-rank-layout {grid-template-columns:minmax(0,2.2fr) minmax(280px,.8fr);gap:24px}
#long04-ai-ranking .long04-rank-insight {padding:24px;min-width:0}
#long04-ai-ranking .long04-rank-main .long04-table th,
#long04-ai-ranking .long04-rank-main .long04-table td {height:38px}
#long04-ai-ranking .long04-rank-main .long04-table thead th svg {display:none}
#long04-ai-ranking .long04-rank-main .long04-table thead th {font-weight:400}
#long04-ai-ranking .long04-rank-main .long04-ai-value {white-space:nowrap}
#long04-ai-ranking .long04-rank-main .long04-bar {width:100px;height:7px}
#long04-ai-channels .long04-controls {margin:0 0 10px}
#long04-ai-channels .long04-metric-controls {gap:7px}
#long04-ai-channels .long04-metric-button {border:1px solid var(--line);border-radius:8px;padding:7px 11px;background:var(--surface);color:var(--muted);font-size:14px;font-weight:600;line-height:1.2}
#long04-ai-channels .long04-metric-button[aria-pressed="true"] {background:var(--blue);border-color:var(--blue);color:#fff}
#long04-ai-channels .long04-metric-label {gap:7px}
#long04-ai-channels .model-matrix .long04-brand {min-width:0;gap:8px;font-size:15px}
#long04-ai-channels .model-matrix .long04-brand-icon,
#long04-ai-channels .model-matrix .long04-brand-mark {width:24px;height:24px;flex-basis:24px}
#long04-ai-channels .model-matrix-channel .long04-channel-icon {display:block;margin:0 auto}
#long04-ai-channels .model-matrix-channel small {display:block;font-size:.85em;font-weight:400}
@media (max-width:800px) {
  #long04-ai-ranking .long04-rank-layout {grid-template-columns:1fr}
}
@media screen and (min-width:801px) and (max-height:850px) {
  #long04-ai-channels {align-items:flex-start;padding:18px 32px 30px}
  #long04-ai-channels .inner {margin:0 auto}
  #long04-ai-ranking .long04-rank-main .long04-table th,
  #long04-ai-ranking .long04-rank-main .long04-table td {height:33px}
}