.output-observer {--observer-ink: #17231b; --observer-muted: #536158; --observer-page: #f7f5ee; --observer-panel: #fffdf6; --observer-line: #93a79e; max-width: 860px; margin: 0 auto; padding: 24px; color: var(--observer-ink); background: var(--observer-page);}
:where(html[data-theme="dark"]) .output-observer {--observer-ink: #edf4ee; --observer-muted: #a9b7ad; --observer-page: #0e1511; --observer-panel: #17201a; --observer-line: #536158;}
.output-observer a {color: #365e9b; background: var(--observer-page);}
:where(html[data-theme="dark"]) .output-observer a {color: #a8caff;}
.output-observer h1 {font-size: 1.3rem; margin: 0 0 16px;}
.output-observer header, .observer-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 16px;}
.output-observer label:has(input:disabled) {color: var(--observer-muted); background: var(--observer-page);}
.observer-items {width: 100%; border-collapse: collapse; margin-bottom: 20px; color: var(--observer-ink); background: var(--observer-page); text-align: left;}
.observer-items th {font-size: .85rem; font-weight: 400; color: var(--observer-muted); background: var(--observer-page); padding: 8px 10px;}
.observer-items td {border-top: 1px solid var(--observer-line); padding: 12px 10px; vertical-align: top;}
.observer-score {width: 84px; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums;}
.observer-case p {line-height: 1.5; margin: 4px 0 0;}
.observer-case a {display: inline-block; margin-top: 4px; font-size: .85rem;}
.output-observer [data-error=true] {color: var(--observer-ink); background: var(--observer-panel); border-left: 3px solid #e88b67; padding-left: 12px;}
@media (max-width: 620px) {.output-observer {padding: 16px;}}