:root {
  --bg: #0f1b16;
  --panel: #16261f;
  --ink: #e9f3ec;
  --muted: #8aa69b;
  --accent: #4fd1a5;
  --warn: #f0b25c;
  --err: #ef6f6f;
  --ok: #6fd68f;
  font-family: system-ui, sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; background: var(--bg); color: var(--ink); padding: 2rem; }

.topbar { display: flex; gap: 1rem; align-items: center; margin-bottom: 2rem; }
.brand { font-weight: 700; letter-spacing: 0.05em; color: var(--accent); }
.user { color: var(--muted); margin-left: auto; }
.link { background: none; border: none; color: var(--accent); cursor: pointer; }

.panel { background: var(--panel); border: 1px solid #243b31; border-radius: 10px; padding: 1.5rem; max-width: 60rem; }
.panel h1 { margin-top: 0; }
.panel h2 { border-bottom: 1px solid #243b31; padding-bottom: 0.4rem; margin-top: 2rem; }

label { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0.3rem 0; }
input, select { background: #0c1814; color: var(--ink); border: 1px solid #2c4a3c; border-radius: 5px; padding: 0.3rem 0.4rem; }
button { background: var(--accent); color: #06231a; border: none; border-radius: 5px; padding: 0.4rem 0.8rem; font-weight: 600; cursor: pointer; }
button:hover { filter: brightness(1.1); }

.grid { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
.grid th, .grid td { border: 1px solid #243b31; padding: 0.3rem 0.5rem; text-align: left; }
.grid thead th, .grid tfoot th { background: #102019; color: var(--muted); }

.status b { color: var(--accent); }
#config-status[data-status="applied"] { color: var(--ok); }
#config-status[data-status="pending"] { color: var(--warn); }
#config-status[data-status="none"] { color: var(--muted); }

.fatal, .error { color: var(--err); }
.muted { color: var(--muted); font-size: 0.85rem; }
[hidden] { display: none !important; }
/* A channel the device has STOPPED watering after repeated runs that moved no
   water. Loud on purpose: it renders as an ordinary idle row otherwise, and the
   two mean opposite things — one is a plant being kept, the other a plant being
   abandoned. */
tr.faulted td {
  background: #4a1111;
  color: #ffd7d7;
  font-weight: 600;
}