:root { --green:#1f5130; --bg:#f4f6f3; --card:#fff; --muted:#6b7280; --danger:#c0392b; --warn:#d68910; --radius:12px; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--bg); color:#1d2420; }
a { color:var(--green); }
header.top { background:var(--green); color:#fff; padding:.6rem 1rem; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }
header.top a, header.top .link { color:#fff; text-decoration:none; margin-left:.9rem; font-size:.95rem; }
header.top .brand { margin:0; font-weight:700; font-size:1.05rem; }
main { max-width:1100px; margin:0 auto; padding:1rem; }
footer { text-align:center; color:var(--muted); font-size:.8rem; padding:2rem 1rem; }
h1 { font-size:1.4rem; margin:.4rem 0 1rem; } h2 { font-size:1.15rem; } h3 { font-size:1rem; margin:.2rem 0 .6rem; }
.card { display:block; background:var(--card); border-radius:var(--radius); padding:1rem; margin-bottom:1rem; box-shadow:0 1px 3px rgba(0,0,0,.08); color:inherit; text-decoration:none; }
.card.narrow { max-width:420px; margin:2rem auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.sensor { border-left:6px solid #2ecc71; }
.sensor.warn { border-left-color:var(--warn); } .sensor.danger { border-left-color:var(--danger); }
.sensor-head { display:flex; justify-content:space-between; gap:.5rem; margin-bottom:.4rem; }
.values { display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); text-align:center; gap:.3rem; margin:.4rem 0; }
.values .v { display:block; font-size:1.35rem; font-weight:700; }
.values.big .v { font-size:1.8rem; }
.values .u { display:block; font-size:.75rem; color:var(--muted); }
.muted { color:var(--muted); } .small, small { font-size:.82rem; }
.alert { padding:.45rem .7rem; border-radius:8px; margin:.35rem 0; font-size:.9rem; }
.alert.danger { background:#fdecea; color:var(--danger); font-weight:600; }
.alert.warn { background:#fef5e7; color:#9a6400; }
.flash { padding:.6rem .8rem; border-radius:8px; margin-bottom:1rem; background:#e8f6ee; color:var(--green); }
.flash.error { background:#fdecea; color:var(--danger); }
.tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; align-items:center; }
.tabs a { padding:.4rem .8rem; border-radius:999px; background:#fff; text-decoration:none; font-size:.9rem; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.tabs a.active { background:var(--green); color:#fff; }
.tabs a.right { margin-left:auto; }
.chart { position:relative; height:220px; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:.4rem .3rem; border-bottom:1px solid #eceeea; vertical-align:top; }
table.kv th { width:55%; font-weight:500; color:var(--muted); }
.scroll { overflow-x:auto; }
form.stack { display:flex; flex-direction:column; gap:.7rem; }
form.inline { display:inline; } details.inline { display:inline-block; margin-left:.4rem; }
.grid-form { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.7rem; align-items:end; margin-top:.8rem; }
label { display:flex; flex-direction:column; font-size:.85rem; color:#374151; gap:.25rem; }
input, select { font:inherit; padding:.55rem .6rem; border:1px solid #cfd6cf; border-radius:8px; background:#fff; width:100%; }
button { font:inherit; padding:.55rem .9rem; border-radius:8px; border:1px solid #cfd6cf; background:#fff; cursor:pointer; }
button.primary { background:var(--green); color:#fff; border-color:var(--green); }
button.danger { background:var(--danger); color:#fff; border-color:var(--danger); }
button.small, summary.small { padding:.25rem .55rem; font-size:.8rem; cursor:pointer; }
button.link { background:none; border:0; padding:0; }
.danger-zone { margin-top:1rem; } .danger-zone summary { color:var(--danger); cursor:pointer; }
code.key { font-size:.95rem; word-break:break-all; background:#f1f3f0; padding:.3rem .5rem; border-radius:6px; }
pre { background:#1d2420; color:#e7efe9; padding:.8rem; border-radius:8px; overflow-x:auto; font-size:.8rem; }
.farm-filter { margin-bottom:.5rem; } .farm-filter select { max-width:320px; }
.farm-title small { font-weight:400; color:var(--muted); }
.crumbs { margin:0; font-size:.9rem; }
@media (max-width:520px) { header.top nav { width:100%; } header.top nav a:first-child { margin-left:0; } .tabs a.right { margin-left:0; } }