:root { color-scheme: dark; --bg:#14171c; --card:#1e232b; --line:#2e3540; --text:#e6e9ee; --muted:#8b95a3; --accent:#2f9e6b; --danger:#c0392b; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui, sans-serif; background:var(--bg); color:var(--text); }
.hidden { display:none !important; }
header { display:flex; align-items:center; gap:.75rem; padding:.6rem 1rem; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
header nav { display:flex; gap:.25rem; }
.spacer { flex:1; }
main { padding:1rem; max-width:1200px; margin:0 auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:1rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1rem; margin-bottom:1rem; }
.card h2 { margin:.1rem 0 .7rem; font-size:1.1rem; }
.card h3 { margin:.8rem 0 .3rem; font-size:.95rem; }
button, select, input { font:inherit; color:inherit; background:#2a313b; border:1px solid var(--line); border-radius:6px; padding:.4rem .7rem; }
button { cursor:pointer; }
button:hover:not(:disabled) { background:#35404d; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); }
button.danger { background:var(--danger); border-color:var(--danger); }
nav button.active { background:var(--accent); border-color:var(--accent); }
label { display:block; margin:.5rem 0; }
label input:not([type=checkbox]), label select { display:block; width:100%; margin-top:.2rem; }
.login { max-width:340px; margin:15vh auto; }
.login button { width:100%; margin-top:.5rem; }
.inline { display:flex; gap:.5rem; flex-wrap:wrap; }
.inline input, .inline select { flex:1; min-width:140px; }
.camera { background:#000; border-radius:6px; min-height:200px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.camera img { width:100%; display:block; }
.camera img:not([src]) { display:none; }
.muted { color:var(--muted); }
.error { color:#ff8a7a; min-height:1.2em; margin:.4rem 0 0; }
.banner { background:#7a5b00; padding:.4rem 1rem; text-align:center; }
.toast { position:fixed; right:1rem; bottom:1rem; background:#2a313b; border:1px solid var(--line); padding:.7rem 1rem; border-radius:8px; z-index:10; max-width:80vw; }
.toast.err { border-color:var(--danger); }
.badge { font-size:.8rem; padding:.1rem .5rem; border-radius:10px; background:#444; margin-left:.4rem; vertical-align:middle; }
.badge.running { background:var(--accent); } .badge.paused, .badge.prepare { background:#b9770e; }
.badge.failed, .badge.offline { background:var(--danger); } .badge.finish { background:#2874a6; }
dl { display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem; margin:0 0 .6rem; }
dt { color:var(--muted); } dd { margin:0; }
progress { width:100%; height:12px; }
.buttons { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.8rem; }
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line); vertical-align:middle; }
td.actions { white-space:nowrap; text-align:right; }
td.actions button { margin-left:.25rem; }
.thumb { width:56px; height:56px; object-fit:contain; background:#111; border-radius:4px; }
dialog { background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:10px; min-width:min(380px, 92vw); }
dialog::backdrop { background:rgba(0,0,0,.6); }
dialog menu { display:flex; justify-content:flex-end; gap:.5rem; padding:0; margin:1rem 0 0; }
.confirm { margin-top:1rem; color:#ffd479; }
code { background:#111; padding:.1rem .35rem; border-radius:4px; user-select:all; }
details { margin:.6rem 0; }
summary { cursor:pointer; color:var(--muted); }
.checks { list-style:none; padding:0; margin:.8rem 0 0; }
.checks li { padding:.3rem 0; border-bottom:1px solid var(--line); }
.checks .ok::before { content:"✔ "; color:#4cd68a; }
.checks .bad::before { content:"✘ "; color:#ff8a7a; }
.banner a, .banner button { margin-left:.5rem; }