:root { --bg:#0f1420; --panel:#171e2e; --line:#243049; --text:#e6ecff; --muted:#8ea0c6; --ok:#2ecc71; --warn:#f1c40f; --bad:#e74c3c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 "Segoe UI",system-ui,sans-serif; }
header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:var(--panel); border-bottom:1px solid var(--line); }
header h1 { font-size:18px; margin:0; }
#control-bar { display:flex; gap:8px; align-items:center; }
button { background:#223052; color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer; }
button:hover { filter:brightness(1.15); }
button.ok { background:#14532d; } button.danger { background:#7f1d1d; } button.ghost { background:transparent; }
nav { display:flex; gap:4px; padding:8px 20px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
nav button { border:none; background:transparent; color:var(--muted); padding:8px 12px; border-radius:8px 8px 0 0; }
nav button.active { color:var(--text); background:var(--bg); border:1px solid var(--line); border-bottom:none; }
main { padding:20px; }
.tab { display:none; } .tab.active { display:block; }
table { width:100%; border-collapse:collapse; margin:12px 0; background:var(--panel); border-radius:10px; overflow:hidden; }
th,td { padding:9px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:13px; }
th { background:#1c2740; color:var(--muted); position:sticky; top:0; }
.grid-form { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; background:var(--panel); padding:14px; border-radius:10px; border:1px solid var(--line); margin:10px 0 20px; }
.grid-form label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:12px; }
.grid-form input, .grid-form select, .grid-form textarea { background:#0d1322; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-bottom:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px; }
.card b { display:block; font-size:22px; }
.card span { color:var(--muted); font-size:12px; }
.row { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; }
.badge { padding:4px 10px; border-radius:999px; font-size:12px; }
.badge.live { background:#14532d; } .badge.dry { background:#78350f; } .badge.off { background:#7f1d1d; }
#toast { position:fixed; bottom:16px; right:16px; display:flex; flex-direction:column; gap:8px; z-index:50; }
.toast { background:#1c2740; border:1px solid var(--line); padding:10px 14px; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,.4); }
a { color:#7ab8ff; }