:root {
  --canvas: var(--bg);
  --surface: var(--panel-bg);
  --green: var(--status-success);
  --blue: var(--status-info);
  --coral: var(--status-danger);
  --soft-green: color-mix(in srgb, var(--status-success) 13%, var(--panel-bg));
  --soft-blue: color-mix(in srgb, var(--status-info) 13%, var(--panel-bg));
  --soft-gold: color-mix(in srgb, var(--status-warning) 14%, var(--panel-bg));
  --soft-red: color-mix(in srgb, var(--status-danger) 13%, var(--panel-bg));
  --violet: var(--support-blue-soft);
  --teal: var(--support-teal-strong);
  --neutral-tile: color-mix(in srgb, var(--muted) 54%, var(--panel-bg));
}
* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var(--thai); letter-spacing: 0; transition: color 240ms ease, background-color 240ms ease; }
button, select { font: inherit; }
.app-header { min-height: 76px; padding: 14px clamp(16px, 4vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--ink); background: var(--hud-bg); border-bottom: 4px solid var(--cyan); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; min-width: 0; gap: 12px; }
.brand img { flex: 0 0 auto; border: 1px solid var(--line-2); border-radius: 6px; object-fit: cover; filter: var(--emblem-shadow); }
.brand p, .eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.brand p { color: var(--muted); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: var(--display); font-size: 21px; line-height: 1.2; }
h2 { margin-bottom: 0; font-family: var(--display); font-size: 22px; }
h3 { margin-bottom: 0; font-family: var(--display); font-size: 17px; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.privacy-mark { padding: 5px 8px; color: var(--support-teal); border: 1px solid var(--line-2); border-radius: 4px; font-size: 10px; font-weight: 800; }
.command-button { min-height: 44px; padding: 6px 11px; color: var(--ink); border: 1px solid var(--line-2); border-radius: 5px; background: var(--input-bg); cursor: pointer; }
.theme-control { display: flex; min-height: 44px; padding: 3px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--input-bg); }
.theme-option { min-width: 76px; min-height: 36px; padding: 6px 10px; border: 0; border-radius: 4px; color: var(--muted); background: transparent; cursor: pointer; }
.theme-option[aria-pressed="true"] { color: var(--solid-ink); background: var(--gold); font-weight: 800; }
.theme-option:focus-visible, .command-button:focus-visible, .tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.view-tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; padding: 8px clamp(16px, 4vw, 48px); overflow-x: auto; background: var(--hud-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.tab { flex: 0 0 auto; min-height: 34px; padding: 6px 12px; border: 0; border-bottom: 3px solid transparent; color: var(--muted); background: transparent; cursor: pointer; }
.tab.active { color: var(--ink); border-bottom-color: var(--green); font-weight: 800; }
main { width: min(1280px, calc(100% - 32px)); margin: 20px auto 40px; }
.view { display: none; }
.view.active { display: block; }
.loading-band, .error-band { margin-bottom: 16px; padding: 12px 15px; border: 1px solid var(--line); background: var(--surface); }
.error-band { color: var(--coral); border-color: var(--coral); background: var(--soft-red); }
.section-heading, .panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-heading { margin-bottom: 16px; }
.section-heading > p, .panel-heading > span { margin: 0; color: var(--muted); font-size: 12px; }
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: var(--surface); }
.kpi { position: relative; min-width: 0; padding: 20px; overflow: hidden; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--blue); transform: scaleX(0); transform-origin: left; animation: lineReveal 700ms ease forwards; }
.kpi:nth-child(2)::before { background: var(--green); animation-delay: 80ms; }
.kpi:nth-child(3)::before { background: var(--violet); animation-delay: 160ms; }
.kpi:nth-child(4)::before { background: var(--gold); animation-delay: 240ms; }
.kpi span, .recovery-grid span { display: block; color: var(--muted); font-size: 12px; }
.kpi strong, .recovery-grid strong { display: block; margin: 5px 0 3px; overflow-wrap: anywhere; font-size: 26px; }
.kpi small, .recovery-grid small { color: var(--faint); font-size: 11px; }
.overview-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; margin-top: 16px; }
.visual-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; margin-top: 16px; }
.panel { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; transition: color 240ms ease, background-color 240ms ease, border-color 240ms ease; }
.panel-heading { padding: 17px 18px; border-bottom: 1px solid var(--line); }
.priority-list { display: grid; }
.priority-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.priority-item:last-child { border-bottom: 0; }
.priority-item i { width: 10px; height: 10px; border-radius: 2px; background: var(--coral); }
.priority-item strong { display: block; font-size: 13px; }
.priority-item span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.priority-item b { color: var(--coral); font-size: 14px; white-space: nowrap; }
.quality-pulse { display: grid; grid-template-columns: 170px minmax(0,1fr); align-items: center; gap: 16px; padding: 18px; }
.quality-ring { position: relative; width: 150px; aspect-ratio: 1; margin: auto; }
.quality-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.quality-ring circle { fill: none; stroke-width: 10; }
.ring-base { stroke: var(--line-2); }
.ring-value { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 301.6; stroke-dashoffset: 301.6; transition: stroke-dashoffset 900ms ease; }
.quality-ring > div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.quality-ring strong { font-size: 31px; line-height: 1; }
.quality-ring span { margin-top: 5px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.pulse-metrics { display: grid; gap: 13px; }
.pulse-metrics > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; align-items: center; }
.pulse-metrics span { color: var(--muted); font-size: 11px; }
.pulse-metrics strong { font-size: 14px; }
.pulse-metrics i { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--line-2); }
.pulse-metrics b { display: block; width: 0; height: 100%; background: var(--teal); transition: width 800ms ease; }
.pulse-metrics > div:nth-child(2) b { background: var(--violet); }
.pulse-metrics > div:nth-child(3) b { background: var(--gold); }
.footprint-visual { padding: 22px 18px 18px; }
.footprint-bar { display: flex; height: 34px; overflow: hidden; border-radius: 5px; background: var(--line-2); }
.footprint-segment { position: relative; width: 0; min-width: 2px; transition: width 900ms ease; }
.footprint-segment::after { content: ""; position: absolute; inset: 0 1px 0 0; background: currentColor; }
.footprint-legend { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; margin-top: 18px; }
.footprint-key { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 8px; font-size: 11px; }
.footprint-key i { width: 10px; height: 10px; border-radius: 2px; background: currentColor; }
.footprint-key span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footprint-key b { color: var(--muted); font-weight: 600; }
.heatmap-panel { margin-top: 16px; }
.quality-heatmap { display: grid; grid-template-columns: repeat(15,minmax(18px,1fr)); gap: 6px; padding: 18px; }
.heat-tile { position: relative; aspect-ratio: 1; min-height: 22px; border: 0; border-radius: 3px; background: var(--neutral-tile); cursor: pointer; transform: translateY(7px); opacity: 0; animation: tileIn 420ms ease forwards; }
.heat-tile.good { background: var(--green); }
.heat-tile.watch { background: var(--gold); }
.heat-tile.risk { background: var(--coral); }
.heat-tile.none { background: var(--neutral-tile); }
.heat-tile:hover, .heat-tile:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; transform: translateY(-2px); }
.bar-list { padding: 12px 18px 16px; }
.bar-row { margin: 10px 0; }
.bar-meta { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 5px; font-size: 12px; }
.bar-meta span:last-child { color: var(--muted); }
.bar-track { height: 8px; overflow: hidden; border-radius: 3px; background: var(--line-2); }
.bar-fill { height: 100%; background: var(--blue); transform: scaleX(0); transform-origin: left; animation: lineReveal 760ms ease forwards; }
.bar-row:nth-child(2n) .bar-fill { background: var(--green); }
.bar-row:nth-child(3n) .bar-fill { background: var(--gold); }
.truth-band { display: flex; align-items: flex-start; gap: 16px; margin-top: 16px; padding: 14px 17px; border: 1px solid var(--gold); background: var(--soft-gold); }
.truth-band strong { flex: 0 0 auto; color: var(--gold); }
.truth-band span { color: var(--muted); font-size: 12px; line-height: 1.6; }
.filters { display: flex; gap: 10px; }
.filters label { color: var(--muted); font-size: 11px; }
select { display: block; min-width: 170px; height: 44px; margin-top: 4px; padding: 5px 28px 5px 9px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--ink); background: var(--input-bg); }
.quality-legend { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 10px; color: var(--muted); font-size: 11px; }
.quality-legend span { display: flex; align-items: center; gap: 6px; }
.quality-legend i { width: 9px; height: 9px; border-radius: 2px; }
i.good { background: var(--green); } i.watch { background: var(--gold); } i.risk { background: var(--coral); } i.none { background: var(--neutral-tile); }
.quality-list { display: grid; gap: 8px; }
.quality-row { display: grid; grid-template-columns: minmax(240px, 1.3fr) repeat(4, minmax(95px, .55fr)); align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--green); }
.quality-row.watch { border-left-color: var(--gold); }
.quality-row.risk { border-left-color: var(--coral); }
.quality-row.none { border-left-color: var(--neutral-tile); }
.quality-name strong { display: block; font-size: 13px; }
.quality-name span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.quality-metric span { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.quality-metric strong { display: block; margin-top: 3px; font-size: 15px; }
.database-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.database-card { padding: 17px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--blue); border-radius: 6px; }
.database-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.database-card h3 { font-size: 15px; }
.database-card header span { color: var(--green); font-size: 10px; font-weight: 800; }
.database-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 17px 0 0; }
.database-card dt { color: var(--muted); font-size: 10px; }
.database-card dd { margin: 3px 0 0; font-weight: 800; }
.engine-panel { margin-top: 16px; }
.recovery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.recovery-grid article { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.recovery-grid article:nth-child(1) { border-top: 4px solid var(--blue); }
.recovery-grid article:nth-child(2) { border-top: 4px solid var(--green); }
.recovery-grid article:nth-child(3) { border-top: 4px solid var(--gold); }
.recovery-grid article:nth-child(4) { border-top: 4px solid var(--coral); }
.pipeline-panel { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr 28px 1fr; align-items: center; gap: 0; margin-top: 16px; padding: 16px; color: var(--ink); background: var(--hud-bg); border: 1px solid var(--line-2); }
.pipeline-step { min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 2px 9px; }
.pipeline-step b { grid-row: 1 / 3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--solid-ink); background: var(--gold); }
.pipeline-step span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.pipeline-step strong { color: var(--support-teal); font-size: 9px; }
.pipeline-panel > i { height: 2px; background: var(--line-2); transform: scaleX(0); transform-origin: left; animation: lineReveal 600ms ease forwards; }
.pipeline-panel > i:nth-of-type(1) { animation-delay: 120ms; }
.pipeline-panel > i:nth-of-type(2) { animation-delay: 260ms; }
.pipeline-panel > i:nth-of-type(3) { animation-delay: 400ms; }
.action-panel { margin-top: 16px; padding: 18px; }
.action-panel ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: item; }
.action-panel li { position: relative; min-width: 0; padding: 14px; background: var(--card); border: 1px solid var(--line); counter-increment: item; }
.action-panel li::before { content: counter(item); display: block; margin-bottom: 10px; color: var(--blue); font-size: 20px; font-weight: 800; }
.action-panel li strong { display: block; font-size: 13px; }
.action-panel li span { display: block; margin-top: 6px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.empty { padding: 28px; color: var(--muted); text-align: center; background: var(--surface); border: 1px solid var(--line); }
dialog { width: min(420px, calc(100% - 32px)); padding: 20px; border: 1px solid var(--line); border-radius: 6px; }
dialog { color: var(--ink); background: var(--panel-bg); }
dialog::backdrop { background: color-mix(in srgb, var(--bg) 72%, transparent); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.dialog-heading h2 { font-size: 18px; }
.dialog-heading button { width: 34px; height: 34px; border: 0; background: transparent; font-size: 24px; cursor: pointer; }
dialog p { margin: 18px 0 0; color: var(--muted); }
footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; padding: 0 18px 30px; color: var(--faint); text-align: center; font-size: 11px; }
.online-pill { display: inline-flex; align-items: center; gap: 6px; }
.online-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: statusPulse 2s ease-in-out infinite; }
.online-pill b { font-weight: 700; }
.view.active { animation: viewIn 320ms ease both; }

@keyframes lineReveal { to { transform: scaleX(1); } }
@keyframes tileIn { to { transform: translateY(0); opacity: 1; } }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes statusPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 900px) {
  .kpi-grid, .recovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(2) { border-right: 0; }
  .kpi:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .overview-grid { grid-template-columns: 1fr; }
  .visual-grid { grid-template-columns: 1fr; }
  .quality-row { grid-template-columns: minmax(210px, 1fr) repeat(2, minmax(90px, .5fr)); }
  .quality-metric:nth-last-child(-n+2) { display: none; }
  .database-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .action-panel ol { grid-template-columns: repeat(2, 1fr); }
  .quality-heatmap { grid-template-columns: repeat(10,minmax(18px,1fr)); }
}
@media (max-width: 560px) {
  .app-header { align-items: flex-start; flex-wrap: wrap; padding: 12px 14px; }
  .brand img { width: 40px; height: 40px; }
  h1 { font-size: 18px; }
  .privacy-mark { display: none; }
  .header-actions { gap: 5px; }
  .theme-control { min-height: 50px; }
  .theme-option { min-width: 60px; min-height: 44px; padding-inline: 8px; font-size: 11px; }
  .view-tabs { padding: 7px 10px; }
  main { width: min(100% - 20px, 520px); margin-top: 14px; }
  .section-heading { align-items: flex-start; }
  .filters-heading { display: block; }
  .filters { margin-top: 12px; }
  .filters label { flex: 1; }
  select { width: 100%; min-width: 0; }
  .kpi-grid, .recovery-grid, .database-grid { grid-template-columns: 1fr; }
  .kpi { border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi:last-child { border-bottom: 0; }
  .quality-row { grid-template-columns: minmax(0, 1fr) 78px; gap: 8px; }
  .quality-metric { text-align: right; }
  .quality-metric:not(:first-of-type) { display: none; }
  .priority-item { grid-template-columns: 10px minmax(0, 1fr); }
  .priority-item b { grid-column: 2; }
  .database-card dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .action-panel ol { grid-template-columns: 1fr; }
  .quality-pulse { grid-template-columns: 120px minmax(0,1fr); padding: 14px; }
  .quality-ring { width: 116px; }
  .quality-ring strong { font-size: 25px; }
  .footprint-legend { grid-template-columns: 1fr; }
  .quality-heatmap { grid-template-columns: repeat(6,minmax(26px,1fr)); gap: 7px; padding: 14px; }
  .pipeline-panel { grid-template-columns: 1fr; gap: 8px; }
  .pipeline-panel > i { width: 2px; height: 12px; margin-left: 13px; transform: scaleY(0); transform-origin: top; animation-name: pipelineDown; }
  .truth-band { display: block; }
  .truth-band span { display: block; margin-top: 6px; }
}
@keyframes pipelineDown { to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}