:root { color-scheme: dark; font-family: system-ui, -apple-system, sans-serif; background:#101318; color:#e8edf2; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(160deg,#101318,#171c24 55%,#101318); min-height:100vh; }
main { max-width:980px; margin:auto; padding:20px; }
header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
h1 { margin:0; font-size:2rem; }
header p { margin:.3rem 0 0; color:#9ba8b6; }
.panel { background:#171d25; border:1px solid #2b3441; border-radius:14px; padding:16px; margin:14px 0; box-shadow:0 8px 30px #0004; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0; }
button, select { background:#252e3a; color:#eef4fa; border:1px solid #3b4859; border-radius:9px; padding:10px 12px; font-size:1rem; }
button:hover { filter:brightness(1.15); cursor:pointer; }
button:disabled { opacity:.5; }
textarea { width:100%; background:#0f141a; color:#eef4fa; border:1px solid #364253; border-radius:9px; padding:12px; font:inherit; resize:vertical; }
audio { width:100%; margin:8px 0; }
.engine-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.engine { display:grid; gap:5px; background:#11171e; border:1px solid #344151; padding:12px; border-radius:10px; }
.engine b { display:flex; justify-content:space-between; }
.engine span { font-size:.78rem; width:max-content; padding:2px 7px; border-radius:10px; }
.engine.ok span { background:#174d31; color:#a9f7c9; }
.engine.off span { background:#55272b; color:#ffc2c8; }
.engine small, .muted { color:#9eabb9; }
pre { white-space:pre-wrap; word-break:break-word; color:#b7c5d4; }
.log { min-height:80px; max-height:220px; overflow:auto; background:#090d11; border-radius:10px; padding:12px; border:1px solid #26303c; }
.file input { max-width:220px; }
@media (max-width:600px){ main{padding:10px} header{align-items:flex-start} h1{font-size:1.6rem} button,select{min-height:44px} }

.compare { display:grid; gap:10px; margin-top:10px; }
.compare-card { display:grid; gap:6px; padding:10px; border-radius:9px; border:1px solid #344151; background:#0f151c; }
.compare-card small { color:#9eabb9; }
.compare-card .bad { color:#ffb5bd; }
.compare-card audio { margin:2px 0 0; }
