:root { --green:#1a7f37; --red:#b42318; --border:#ddd; --muted:#667; }
* { box-sizing:border-box; }
body { font-family:system-ui,sans-serif; margin:0; background:#f6f7f8; color:#1c1c1e; }
header { display:flex; align-items:center; gap:1rem; padding:.7rem 1.2rem; background:#fff;
         border-bottom:1px solid var(--border); position:sticky; top:0; }
header h1 { font-size:1.15rem; margin:0; }
#statusbar { flex:1; font-size:.85rem; color:var(--muted); }
.hidden { display:none !important; }
main { max-width:64rem; margin:1rem auto; padding:0 1rem; }
nav { display:flex; gap:.4rem; margin-bottom:1rem; flex-wrap:wrap; }
nav button { background:#e8eaed; border:none; padding:.5rem 1rem; border-radius:.5rem; cursor:pointer; }
nav button.active { background:var(--green); color:#fff; }
.bar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
.card { background:#fff; border:1px solid var(--border); border-radius:.6rem; padding:1rem; margin:.8rem 0; }
.card h3 { margin:.1rem 0 .4rem; }
label { display:block; margin:.5rem 0; font-size:.9rem; }
input, select { width:100%; max-width:24rem; padding:.45rem; border:1px solid var(--border);
                border-radius:.4rem; font-size:1rem; }
button { background:var(--green); color:#fff; border:none; padding:.5rem .9rem;
         border-radius:.5rem; cursor:pointer; font-size:.92rem; }
button.ghost { background:#e8eaed; color:#1c1c1e; }
button.danger { background:var(--red); }
button:disabled { opacity:.5; }
.row-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.kv { font-size:.9rem; color:var(--muted); margin:.15rem 0; word-break:break-all; }
.kv b { color:#1c1c1e; }
.badge { display:inline-block; padding:.1rem .5rem; border-radius:1rem; font-size:.78rem; }
.badge.on  { background:#d1f0d9; color:var(--green); }
.badge.off { background:#fbdad6; color:var(--red); }
.snippet { background:#f0f2f4; border-radius:.4rem; padding:.5rem; font-family:monospace;
           font-size:.85rem; word-break:break-all; margin:.4rem 0; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border);
        border-radius:.6rem; font-size:.88rem; }
th, td { text-align:left; padding:.45rem .6rem; border-bottom:1px solid #eee; }
.err { color:var(--red); }
#toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%);
         background:#1c1c1e; color:#fff; padding:.6rem 1.1rem; border-radius:.5rem; }
#login { max-width:22rem; margin:12vh auto; }