:root { --fg:#1a1a1a; --bg:#fafafa; --muted:#666; --accent:#6441a5; --ok:#2e7d32; --off:#999; --card:#fff; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,Segoe UI,system-ui,sans-serif; color:var(--fg); background:var(--bg); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; border-bottom:1px solid #eee; background:#fff; }
.brand { font-weight:700; font-size:1.2em; color:var(--accent); text-decoration:none; }
.topbar nav { display:flex; gap:12px; align-items:center; }
.user { color:var(--muted); }
.logout-form { display:inline; margin:0; }
.logout-form button { background:none; border:1px solid #ddd; padding:4px 10px; border-radius:4px; cursor:pointer; }
main { max-width:960px; margin:0 auto; padding:24px; }
.btn { display:inline-block; padding:10px 18px; border-radius:6px; text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.login { text-align:center; padding:48px 0; }
.empty { color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.card { background:var(--card); border:1px solid #eee; border-radius:8px; padding:16px; }
.card-inactive { opacity:.7; }
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:.85em; }
.badge-ok { background:#e6f4ea; color:var(--ok); }
.badge-off { background:#eee; color:var(--off); }