:root {
  --bg: #f4f3ef; --surface: #fff; --surface-2: #efede7; --text: #1a1d1b; --muted: #5d6661;
  --border: #dcd9d0; --accent: #1f6f5c; --good: #1f7a4d; --warn: #a86a00; --bad: #b3261e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121413; --surface: #1b1e1c; --surface-2: #232724; --text: #e8ebe8; --muted: #9aa49e;
    --border: #2f3531; --accent: #7fd8bc; --good: #6fd39b; --warn: #f0b34a; --bad: #ff8a80;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, sans-serif; }
h1 { margin: 0 0 4px; font-size: 22px; }
body:not(.engine) .engine-only, body.engine .web-only { display: none; }
.brand img { display: block; height: 34px; width: auto; }
.intro { flex: 1; }
.sample { display: grid; gap: 4px; justify-items: start; margin: 12px 0 0; }
.chip { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
p.indent { margin: -2px 0 8px 24px; }
h2 { margin: 0 0 10px; font-size: 15px; }
h3 { margin: 0 0 10px; font-size: 15px; word-break: break-all; }
h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.top { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.top p { margin: 0; color: var(--muted); max-width: 70ch; }
.grid { display: grid; gap: 16px; padding: 16px 24px 24px; grid-template-columns: 300px 1fr; grid-template-areas: "c r" "l l"; }
.controls { grid-area: c; } .results { grid-area: r; min-width: 0; } .logs { grid-area: l; }
@media (max-width: 860px) {
  .grid { grid-template-columns: 1fr; grid-template-areas: "c" "r" "l"; padding: 12px 16px; }
  .top { flex-direction: column; align-items: flex-start; padding: 16px; }
  .brand img { height: 28px; }
}
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.controls h2:not(:first-child) { margin-top: 18px; }
.drop { display: grid; gap: 2px; place-items: center; text-align: center; padding: 18px; border: 2px dashed var(--border); border-radius: 12px; cursor: pointer; }
.drop.over { border-color: var(--accent); }
.drop span, .hint, small { color: var(--muted); font-size: 13px; }
.list-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 12px 0 6px; }
.logs .list-head { margin-top: 0; }
.list-head h2 { margin: 0; }
.files { list-style: none; margin: 0; padding: 0; max-height: 140px; overflow: auto; }
.files li { padding: 3px 0; }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.row.indent { margin-left: 24px; }
.row-gap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
select { font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 6px; }
.btn { display: inline-flex; justify-content: center; align-items: center; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn.primary { color: #0d1a15; } }
.btn.block { width: 100%; margin-top: 16px; }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.result { border-top: 1px solid var(--border); padding: 14px 0; }
.result:first-child { border-top: 0; padding-top: 0; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 560px) { .trio { grid-template-columns: 1fr; } }
.trio figure { margin: 0; }
.trio img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); border-radius: 8px; }
.trio figcaption { font-size: 12px; color: var(--muted); text-align: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.stats div { background: var(--surface-2); border-radius: 8px; padding: 6px 10px; }
.stats dt { font-size: 12px; color: var(--muted); } .stats dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.notes { margin: 0 0 12px; padding-left: 18px; font-size: 13px; }
.metas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 560px) { .metas { grid-template-columns: 1fr; } }
.meta { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.meta li { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px solid var(--border); }
.meta li span:last-child { color: var(--muted); text-align: right; word-break: break-all; }
.meta li.high span:first-child { color: var(--bad); font-weight: 600; }
.good { color: var(--good); font-size: 13px; margin: 0; }
.log { list-style: none; margin: 0 0 8px; padding: 8px; height: 320px; overflow: auto; background: var(--surface-2); border-radius: 8px; font: 12.5px/1.5 ui-monospace, Consolas, monospace; }
.log li { display: grid; grid-template-columns: 70px 64px 1fr; gap: 8px; }
.log li[hidden] { display: none; }
.log time { color: var(--muted); }
.log li.browser b { color: var(--accent); } .log li.engine b { color: var(--warn); }
.log li.warn span { color: var(--warn); } .log li.error span { color: var(--bad); }
@media (max-width: 560px) { .log li { grid-template-columns: 1fr; gap: 0; padding-bottom: 4px; } }