:root {
  color-scheme: light;
  --bg: oklch(97.2% 0.007 235);
  --bg-soft: oklch(95.9% 0.01 228);
  --surface: oklch(98.9% 0.005 235 / 0.92);
  --surface-strong: oklch(97.2% 0.008 235 / 0.98);
  --surface-stroke: oklch(79% 0.018 228 / 0.82);
  --surface-stroke-strong: oklch(63% 0.03 228 / 0.82);
  --ink: oklch(24% 0.025 235);
  --ink-soft: oklch(42% 0.018 232);
  --ink-faint: oklch(56% 0.016 230);
  --accent: oklch(45% 0.1 229);
  --accent-soft: oklch(90% 0.02 228);
  --accent-strong: oklch(31% 0.08 230);
  --positive: oklch(58% 0.12 153);
  --negative: oklch(60% 0.16 28);
  --neutral: oklch(63% 0.04 242);
  --warning: oklch(72% 0.11 84);
  --danger-surface: oklch(95% 0.04 28);
  --shadow-soft: 0 16px 44px oklch(30% 0.025 230 / 0.06);
  --shadow-panel: 0 10px 32px oklch(28% 0.024 230 / 0.07);
  --radius-lg: 1.75rem;
  --radius-md: 1rem;
  --radius-sm: 0.75rem;
  --font-body: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 14%, oklch(92% 0.03 88 / 0.7), transparent 30%),
    radial-gradient(circle at 84% 10%, oklch(91% 0.025 228 / 0.64), transparent 26%),
    linear-gradient(180deg, var(--bg), var(--bg-soft));
  line-height: 1.55;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to right, color-mix(in oklch, var(--surface-stroke) 14%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--surface-stroke) 12%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, transparent 0%, black 12%, black 88%, transparent 100%);
  opacity: 0.34;
}
button, input, select { font: inherit; }
button { border: 0; cursor: pointer; }
button:focus { outline: none; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid color-mix(in oklch, var(--accent) 60%, white 18%);
  outline-offset: 3px;
}
svg { display: block; width: 100%; max-width: 100%; }
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--surface);
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: 1rem; top: 1rem; }
.app-shell {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1rem, 1vw + 0.7rem, 1.6rem);
}
.app-shell > *,
.workspace > *,
.dashboard-main > *,
.panel > *,
.panel-head > *,
.failure-item > *,
.legend-row > *,
.header-meta > *,
.title-cluster,
.status-stack,
.header-actions,
.context-strip > * { min-width: 0; }
.ambient {
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  filter: blur(16px);
  opacity: 0.55;
}
.ambient-a {
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  top: -8vw;
  right: -8vw;
  background: radial-gradient(circle, oklch(86% 0.026 228 / 0.56), transparent 72%);
}
.ambient-b {
  width: 22vw;
  height: 22vw;
  border-radius: 50%;
  bottom: -7vw;
  left: -3vw;
  background: radial-gradient(circle, oklch(92% 0.03 88 / 0.46), transparent 74%);
}
.glass-panel {
  position: relative;
  z-index: 1;
  border: 1px solid var(--surface-stroke);
  background:
    linear-gradient(180deg, oklch(100% 0.002 100 / 0.84), oklch(98.2% 0.006 230 / 0.9)),
    var(--surface);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  box-shadow: var(--shadow-panel);
  isolation: isolate;
}
.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in oklch, white 56%, var(--surface-stroke) 44%);
  opacity: 0.42;
  pointer-events: none;
}
@supports not (backdrop-filter: blur(10px)) { .glass-panel { background: var(--surface-strong); } }
.app-header, .demo-banner, .error-banner, .context-strip, .panel, .control-rail { border-radius: var(--radius-lg); }
.app-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 2vw, 2.2rem);
  align-items: end;
  padding: clamp(1.3rem, 1.6vw, 2rem);
  overflow: clip;
}
.eyebrow {
  margin: 0 0 0.45rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.72rem;
  font-weight: 700;
}
h1, h2, h3 { margin: 0; }
h1, .panel h2, .control-rail h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; }
h1 { font-size: clamp(2.45rem, 5vw, 4.6rem); line-height: 0.94; max-width: 9ch; }
.subtitle { max-width: 58ch; margin: 0.9rem 0 0; color: var(--ink-soft); font-size: 1rem; }
.header-meta { display: grid; gap: 1rem; justify-items: end; }
.status-stack, .header-actions, .button-row, .error-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface) 84%, var(--accent-soft) 16%);
  border: 1px solid color-mix(in oklch, var(--surface-stroke) 76%, var(--accent) 24%);
  color: var(--accent-strong);
  font-size: 0.84rem;
  font-weight: 600;
}
.status-pill-subtle { color: var(--ink-soft); }
.status-pill[data-tone="error"] { color: var(--negative); background: color-mix(in oklch, var(--danger-surface) 78%, var(--surface) 22%); }
.status-pill[data-tone="stale"] { color: color-mix(in oklch, var(--warning) 65%, var(--ink) 35%); }
.button {
  min-height: 44px;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart);
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button[disabled] { cursor: progress; opacity: 0.72; }
.button-ghost { background: color-mix(in oklch, var(--surface) 82%, white 18%); border: 1px solid color-mix(in oklch, var(--surface-stroke-strong) 26%, var(--surface-stroke) 74%); color: var(--ink); }
.button-danger { background: color-mix(in oklch, var(--negative) 14%, white 86%); color: color-mix(in oklch, var(--negative) 72%, var(--ink) 28%); border: 1px solid color-mix(in oklch, var(--negative) 20%, white 80%); }
.demo-banner, .error-banner, .context-strip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.15rem; overflow: clip; }
.demo-banner p, .error-banner p, .context-copy, .rail-note, .panel-meta, .panel-foot, .failure-head p, .legend-meta, .metric-subcopy, .metric-context, .failure-item p { margin: 0; color: var(--ink-soft); }
.error-banner { background: linear-gradient(180deg, color-mix(in oklch, var(--danger-surface) 72%, white 28%), var(--danger-surface)); border: 1px solid color-mix(in oklch, var(--negative) 18%, white 82%); }
.workspace {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1rem, 1vw + 0.75rem, 1.5rem);
  grid-template-columns: minmax(280px, 332px) minmax(0, 1fr);
  align-items: start;
}
.control-rail {
  position: sticky;
  top: 1rem;
  padding: 1.2rem;
  display: grid;
  gap: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  scrollbar-width: thin;
}
.rail-head, .filters-form, .field, .slice-details { display: grid; gap: 0.55rem; }
.field label, .field-label, summary { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
select, input[type="date"], input[type="search"] {
  min-height: 46px;
  width: 100%;
  border-radius: 0.95rem;
  border: 1px solid var(--surface-stroke);
  background: color-mix(in oklch, white 82%, var(--accent-soft) 18%);
  color: var(--ink);
  padding: 0.8rem 0.95rem;
  transition: border-color var(--dur-fast) var(--ease-out-quart), background-color var(--dur-fast) var(--ease-out-quart);
}
.date-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented-control {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: color-mix(in oklch, var(--surface) 84%, var(--accent-soft) 16%);
  border: 1px solid var(--surface-stroke);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.segmented-control::-webkit-scrollbar { display: none; }
.segmented-control-compact { justify-content: flex-end; }
.segment {
  min-height: 40px;
  padding: 0.6rem 0.95rem;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
}
.segment.is-active { background: color-mix(in oklch, var(--accent) 12%, white 88%); color: var(--accent-strong); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent) 16%, white 84%); }
.slice-details { border: 1px solid color-mix(in oklch, var(--surface-stroke) 78%, white 22%); border-radius: var(--radius-md); padding: 0.75rem; background: color-mix(in oklch, var(--surface) 72%, white 28%); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; color: var(--ink-soft); }
.slice-details[open] summary::after { content: "–"; }
.chip-group { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.filter-chip { position: relative; }
.filter-chip input { position: absolute; opacity: 0; inset: 0; }
.filter-chip span {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in oklch, white 72%, var(--accent-soft) 28%);
  border: 1px solid color-mix(in oklch, var(--surface-stroke) 76%, white 24%);
  font-weight: 600;
  color: var(--ink-soft);
  transition: background-color var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) var(--ease-out-quart), color var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart);
}
.filter-chip input:checked + span { color: var(--accent-strong); background: color-mix(in oklch, var(--accent) 12%, white 88%); border-color: color-mix(in oklch, var(--accent) 28%, white 72%); }
.dashboard-main { display: grid; gap: clamp(1rem, 1vw + 0.85rem, 1.5rem); }
.context-strip { background: color-mix(in oklch, var(--surface) 86%, white 14%); border: 1px solid color-mix(in oklch, var(--surface-stroke) 84%, white 16%); align-items: flex-start; }
.context-copy { max-width: 74ch; }
.context-copy-secondary { text-align: right; max-width: 32ch; }
.kpi-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.metric-card {
  padding: 1rem 1.05rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, oklch(100% 0.003 120 / 0.92), oklch(97.6% 0.008 230 / 0.88));
  border: 1px solid color-mix(in oklch, var(--surface-stroke) 80%, white 20%);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 0.55rem;
  min-height: 150px;
  overflow: clip;
}
.metric-card::before {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklch, var(--accent) 55%, white 45%), transparent 68%);
  opacity: 0.72;
}
.metric-label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); font-weight: 700; }
.metric-value { font-size: clamp(1.65rem, 2vw, 2.4rem); line-height: 1; letter-spacing: -0.04em; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric-context, .metric-subcopy { font-size: 0.92rem; }
.dashboard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.95fr);
  grid-template-areas: "trend sentiment" "topics keywords" "pipeline pipeline";
}
.panel {
  display: grid;
  gap: 0.9rem;
  padding: 1rem 1rem 1.05rem;
  container-type: inline-size;
  overflow: clip;
}
.panel-trend { grid-area: trend; }
.panel-sentiment { grid-area: sentiment; }
.panel-topics { grid-area: topics; }
.panel-keywords { grid-area: keywords; }
.panel-pipeline { grid-area: pipeline; }
.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid color-mix(in oklch, var(--surface-stroke) 76%, white 24%);
}
.panel h2 { font-size: clamp(1.18rem, 1.7vw, 1.65rem); line-height: 1.02; }
.chart { min-height: 300px; max-width: 100%; }
.chart-short { min-height: 220px; }
.chart-donut { min-height: 200px; }
.sentiment-layout { display: grid; gap: 1rem; align-items: start; }
.donut-panel, .legend-list, .pipeline-summary, .failure-list, .failure-block { display: grid; gap: 0.7rem; }
.legend-row, .pipeline-card, .failure-item {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, white 78%, var(--accent-soft) 22%);
  border: 1px solid color-mix(in oklch, var(--surface-stroke) 80%, white 20%);
  overflow: clip;
}
.legend-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; }
.legend-swatch { width: 0.85rem; height: 0.85rem; border-radius: 50%; }
.pipeline-summary { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pipeline-card { min-height: 102px; }
.pipeline-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); font-weight: 700; }
.pipeline-value { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.03em; }
.failure-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; }
.failure-item { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.failure-item p, .failure-item strong { overflow-wrap: anywhere; }
.failure-item strong, .pipeline-value, .legend-value, svg .tick text, .chart text { font-variant-numeric: tabular-nums; }
.chart text, svg .tick text { fill: color-mix(in oklch, var(--ink-soft) 88%, white 12%); font-size: 11.5px; font-family: var(--font-body); }
svg .domain, svg .tick line { stroke: color-mix(in oklch, var(--surface-stroke) 82%, white 18%); }
.chart-empty, .chart-annotation, .chart-center-label { fill: color-mix(in oklch, var(--ink-soft) 90%, white 10%); }
.chart-empty { font-size: 14px; }
.chart-center-label { font-size: 14px; font-weight: 700; }
body[data-busy="true"] .chart, body[data-busy="true"] .metric-card, body[data-busy="true"] .pipeline-card, body[data-busy="true"] .failure-item, body[data-busy="true"] .legend-row { opacity: 0.78; }
@container (min-width: 540px) { .sentiment-layout { grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.88fr); } }
@media (hover: hover) {
  .metric-card, .pipeline-card, .legend-row, .failure-item { transition: transform var(--dur-med) var(--ease-out-quart), border-color var(--dur-med) var(--ease-out-quart); }
  .metric-card:hover, .pipeline-card:hover, .legend-row:hover, .failure-item:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--accent) 22%, var(--surface-stroke) 78%); }
}
@media (max-width: 1180px) {
  .workspace { grid-template-columns: 1fr; }
  .control-rail { position: static; max-height: none; }
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "trend trend" "sentiment topics" "keywords keywords" "pipeline pipeline"; }
}
@media (max-width: 860px) {
  .dashboard-grid { grid-template-columns: 1fr; grid-template-areas: "trend" "sentiment" "topics" "keywords" "pipeline"; }
  .chart { min-height: 260px; }
  .chart-short { min-height: 190px; }
}
@media (max-width: 760px) {
  .app-header, .context-strip, .demo-banner, .error-banner, .panel, .control-rail { border-radius: 1.3rem; }
  .app-header { grid-template-columns: 1fr; }
  .header-meta, .context-copy-secondary { justify-items: start; text-align: left; }
  .date-grid { grid-template-columns: 1fr; }
  .panel-head, .failure-head, .demo-banner, .error-banner, .context-strip { flex-direction: column; align-items: flex-start; }
  .segmented-control-compact { justify-content: flex-start; }
  .chart { min-height: 230px; }
  .chart-short { min-height: 176px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}