:root{--bg:#f7f8fa;--fg:#1b2430;--mut:#6b7686;--card:#fff;--bd:#d5dbe4;--ac:#2a5c9a;--hl:#e8f0fa}
@media(prefers-color-scheme:dark){:root{--bg:#12171e;--fg:#e6eaf0;--mut:#8f9bad;--card:#1b222c;--bd:#323c4b;--ac:#6ea3e0;--hl:#223149}}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#app{max-width:1200px;margin:0 auto;padding:16px}
h1{font-size:20px;margin:0 0 12px;font-weight:650}h4{margin:14px 0 4px;font-size:14px}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
button,select,input{font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--bd);border-radius:6px;padding:6px 9px}
button{cursor:pointer}button:hover{border-color:var(--ac)}
button.on{background:var(--ac);border-color:var(--ac);color:#fff}
:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
.w{overflow-x:auto;border:1px solid var(--bd);border-radius:8px;background:var(--card)}
table{border-collapse:collapse;width:100%}
th,td{padding:3px 6px;border-bottom:1px solid var(--bd);text-align:left;white-space:nowrap}
th{font-weight:600;background:var(--hl)}
td input,td select{width:100%;border-color:transparent;background:transparent;padding:4px}
td input:hover,td select:hover,td input:focus{border-color:var(--bd);background:var(--card)}
td input.s{width:60px}td input.t{min-width:220px}td input.m{min-width:100px}
.mut,small{color:var(--mut)}td b{color:var(--ac)}ul{margin:0;padding-left:18px}