:root{
  /* PumpkinOps — Clean Light Dashboard */
  --bg:#ffffff;
  --bg2:#f6f7fb;
  --panel:#ffffff;
  --panel2:#f9fafb;
  --text:#111827;
  --muted:#6b7280;
  --muted2:#374151;

  --accent:#f97316;    /* pumpkin orange */
  --accent2:#fb923c;   /* lighter orange */
  --accent3:#f59e0b;   /* amber */

  --ok:#16a34a;
  --warn:#d97706;
  --bad:#dc2626;

  --border: rgba(17,24,39,.10);
  --border2: rgba(249,115,22,.25);
  --shadow: 0 12px 28px rgba(17,24,39,.08);
  --shadow2: 0 10px 20px rgba(249,115,22,.06);

  --radius: 16px;
  --radius2: 20px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(900px 600px at 12% 8%, rgba(249,115,22,.10), transparent 60%),
    radial-gradient(900px 600px at 88% 18%, rgba(245,158,11,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

a{color:inherit; text-decoration:none}

.container{max-width:1260px; margin:0 auto; padding:18px 18px 28px}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.brand{display:flex; gap:12px; align-items:center}

.logo{
  width:44px; height:44px;
  border-radius:14px;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: var(--shadow2);
  display:grid; place-items:center;
  font-weight:900;
  border:1px solid rgba(255,255,255,.55);
}

.h1{font-size:16px; font-weight:900; letter-spacing:.2px}
.sub{color:var(--muted); font-size:12px}

.actions{display:flex; gap:10px; align-items:center}

/* Tabs */
.tabs{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top: 10px;
  z-index: 10;
  backdrop-filter: blur(10px);
}

.tab{
  appearance:none;
  border:1px solid transparent;
  background: transparent;
  color: var(--muted2);
  font-weight: 900;
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.tab:hover{ background: rgba(17,24,39,.04); transform: translateY(-1px); }
.tab.active{
  background: rgba(249,115,22,.10);
  border-color: rgba(249,115,22,.30);
  color: var(--text);
}

.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

.spacer{ height:14px; }

/* Buttons */
.btn{
  padding:10px 14px;
  border-radius: 12px;
  background: rgba(17,24,39,.04);
  border:1px solid var(--border);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
  transition: transform .08s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(17,24,39,.06); border-color: rgba(17,24,39,.16); }
.btn:active{ transform: translateY(0px); }

.btn.primary{
  background: linear-gradient(135deg, rgba(249,115,22,.95), rgba(251,146,60,.95));
  border-color: rgba(249,115,22,.35);
  color: #fff;
  box-shadow: var(--shadow2);
}
.btn.primary:hover{ border-color: rgba(249,115,22,.55); }

.btn.danger{
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.25);
  color: rgba(185,28,28,1);
}
.btn.danger:hover{ border-color: rgba(220,38,38,.40); }

/* Layout */
.grid{display:grid; gap:14px}
.cards{grid-template-columns: repeat(12, 1fr)}

/* ---------------------------
   Overview — Grower Essentials
---------------------------- */
.hero{
  background: rgba(255,255,255,.72);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius2) + 6px);
  box-shadow: var(--shadow);
  padding: 14px;
  backdrop-filter: blur(10px);
}

.hero-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.hero-h{ font-size:14px; font-weight: 950; letter-spacing: .2px; }
.hero-grid{ grid-template-columns: repeat(12, 1fr); }

.hero-card{
  position: relative;
  border-radius: var(--radius2);
  padding: 14px;
  border: 1px solid rgba(249,115,22,.22);
  background:
    radial-gradient(900px 180px at 10% 0%, rgba(249,115,22,.14), transparent 55%),
    radial-gradient(900px 180px at 90% 0%, rgba(245,158,11,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  box-shadow: var(--shadow2);
  overflow:hidden;
}

.hero-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.hero-k{ font-size:12px; color: var(--muted2); font-weight: 950; letter-spacing: .2px; }
.hero-v{ font-size:34px; font-weight: 950; letter-spacing: -1px; line-height: 1.05; margin-top: 4px; }
.hero-u{ font-size:12px; color: var(--muted); font-weight: 950; margin-left: 6px; }

.pill{
  font-size:12px;
  padding:7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(17,24,39,.03);
  color: var(--muted2);
  font-weight: 950;
  white-space: nowrap;
}
.pill.ok{ color: var(--ok); border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.08); }
.pill.warn{ color: var(--warn); border-color: rgba(217,119,6,.25); background: rgba(217,119,6,.10); }
.pill.bad{ color: var(--bad); border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.10); }
.pill.orange{ color: rgba(194,65,12,1); border-color: rgba(249,115,22,.25); background: rgba(249,115,22,.10); }

.meter{
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
  overflow:hidden;
  margin: 10px 0 8px 0;
}
.meter-fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(249,115,22,.92), rgba(245,158,11,.92));
  box-shadow: 0 8px 16px rgba(249,115,22,.10);
  transition: width .35s ease;
}

@media (max-width: 920px){
  .hero-card{ grid-column: span 12 !important; }
}

/* Cards */
.card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
  padding:14px;
}

.card.inset{
  background: var(--panel2);
  border-color: rgba(17,24,39,.08);
  box-shadow: none;
}

.card h3{
  margin:0 0 6px 0;
  font-size:13px;
  color: var(--muted2);
  font-weight: 950;
  letter-spacing: .2px;
}

.kpi{font-size:28px; font-weight:950; letter-spacing:-.6px; line-height:1.05}
.kpi small{font-size:12px; color: var(--muted); font-weight: 900}

.row{display:flex; justify-content:space-between; align-items:flex-end; gap:12px}

.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
  color: var(--muted2);
  font-weight: 900;
}

.badge.ok{ color: var(--ok); border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.08); }
.badge.warn{ color: var(--warn); border-color: rgba(217,119,6,.25); background: rgba(217,119,6,.10); }
.badge.bad{ color: var(--bad); border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.10); }
.badge.orange{ color: rgba(194,65,12,1); border-color: rgba(249,115,22,.25); background: rgba(249,115,22,.10); }

.mono{font-family: var(--mono)}

/* Tables */
.table{ width:100%; border-collapse:collapse; font-size:13px; }
.table th, .table td{ text-align:left; padding:10px 8px; border-bottom:1px solid rgba(17,24,39,.08); }
.table th{ color: var(--muted2); font-weight: 950; }
.table tr:hover td{ background: rgba(249,115,22,.05); }

/* Devices toolbar + better table ergonomics */
.devices-toolbar{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.devices-toolbar .input{ min-width: 260px; flex: 1 1 320px; }
.devices-toggles{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
.chip{ display:inline-flex; gap:8px; align-items:center; padding:6px 10px; border-radius:999px; border:1px solid rgba(17,24,39,.10); background: rgba(17,24,39,.03); color: var(--muted2); font-size:12px; font-weight: 950; user-select:none; }
.chip input{ width:16px; height:16px; }

.table thead th{ position: sticky; top: 0; background: var(--card); z-index: 2; box-shadow: 0 1px 0 rgba(17,24,39,.08); }
.table tbody tr:nth-child(even) td{ background: rgba(17,24,39,.015); }
.table td.ctrl-cell{ white-space: nowrap; }
.ctrl-wrap{ margin-right:12px; }

/* ---------------------------
   Automation: moisture meter cards
---------------------------- */
.moist-card{ grid-column: span 6; }
@media (max-width: 920px){ .moist-card{ grid-column: span 12; } }

.moist-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.moist-meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

.gauge{
  --pct: 0;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: conic-gradient(rgba(249,115,22,.95) calc(var(--pct) * 1%), rgba(17,24,39,.08) 0);
  display:grid;
  place-items:center;
  position:relative;
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
  border: 1px solid rgba(17,24,39,.10);
}
.gauge::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
}
.gauge .gauge-inner{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.gauge .gauge-val{ font-size:22px; font-weight: 950; letter-spacing:-.5px; }
.gauge .gauge-unit{ font-size:11px; color: var(--muted); font-weight: 900; }

.gauge.state-ok{ background: conic-gradient(rgba(22,163,74,.95) calc(var(--pct) * 1%), rgba(17,24,39,.08) 0); }
.gauge.state-warn{ background: conic-gradient(rgba(217,119,6,.95) calc(var(--pct) * 1%), rgba(17,24,39,.08) 0); }
.gauge.state-bad{ background: conic-gradient(rgba(220,38,38,.95) calc(var(--pct) * 1%), rgba(17,24,39,.08) 0); }

.auto-grid{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items:center;
}

.range-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.range-row input[type="range"]{ width: 220px; }
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
  font-size:12px;
  font-weight: 950;
  color: var(--muted2);
}

.btn-xs{
  padding:7px 10px;
  border-radius: 10px;
  font-weight: 950;
  border:1px solid var(--border);
  background: rgba(17,24,39,.04);
  cursor:pointer;
}
.btn-xs:hover{ background: rgba(17,24,39,.06); border-color: rgba(17,24,39,.16); }
.btn-xs.primary{ background: linear-gradient(135deg, rgba(249,115,22,.95), rgba(251,146,60,.95)); color:#fff; border-color: rgba(249,115,22,.35); }

/* Automation: Meross live status / quick toggles */
.auto-meross-wrap{
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.02);
  border-radius: 14px;
  padding: 12px;
  margin: 0 0 14px 0;
}
.auto-meross-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.auto-meross-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 10px; margin-top: 10px; }
.auto-meross-card{ grid-column: span 4; border: 1px solid rgba(17,24,39,.10); background: var(--card); border-radius: 14px; padding: 10px; box-shadow: 0 12px 30px rgba(17,24,39,.06); }
@media (max-width: 1100px){ .auto-meross-card{ grid-column: span 6; } }
@media (max-width: 640px){ .auto-meross-card{ grid-column: span 12; } }
.auto-meross-title{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.auto-meross-chans{ display:flex; flex-direction:column; gap:8px; margin-top: 10px; }
.auto-meross-chan{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.auto-meross-chan .sub{ margin:0; }
.auto-meross-chan .row{ margin:0; }
.btn-xs.danger{ background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); color: rgba(185,28,28,1); }

@media (max-width: 720px){
  .table th:nth-child(1), .table td:nth-child(1){ display:none; } /* hide EUI on small screens */
  .table th:nth-child(3), .table td:nth-child(3){ display:none; } /* hide Last Seen on small screens */
}

/* Inputs */
.input{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  background: #fff;
  border:1px solid rgba(17,24,39,.12);
  color: var(--text);
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input:focus{
  border-color: rgba(249,115,22,.55);
  box-shadow: 0 0 0 4px rgba(249,115,22,.12);
}

/* Notices */
.notice{
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(249,115,22,.22);
  background: rgba(249,115,22,.06);
  color: var(--muted2);
  font-size:13px;
}
.notice.subtle{
  border-color: rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
  color: var(--muted);
}

/* Meross control buttons */
.btn-sm{
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(17,24,39,.04);
  color: var(--text);
  font-weight: 950;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  user-select:none;
  min-width: 62px;
  text-align:center;
}
.btn-sm:hover{ transform: translateY(-1px); border-color: rgba(249,115,22,.35); }
.btn-sm:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-on{ background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.30); color: rgba(22,101,52,1); }
.btn-off{ background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); color: rgba(153,27,27,1); }
.ctrl-wrap{ display:inline-flex; gap:8px; align-items:center; margin-right:10px; }
.ctrl-lab{
  font-size:12px;
  color: var(--muted2);
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.12);
  background: rgba(17,24,39,.03);
  cursor:pointer;
  user-select:none;
}
.ctrl-lab:hover{ background: rgba(17,24,39,.06); }
.ctrl-lab:active{ transform: translateY(1px); }

/* Fungicide rotation module */
.spray-grid{ grid-template-columns: 1fr; gap:14px; }

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
  color: var(--muted2);
  font-size:12px;
  font-weight: 950;
}
.pill .dot{ width:8px; height:8px; border-radius:999px; background: var(--accent); box-shadow: 0 0 0 3px rgba(249,115,22,.12); }

/* Schedule banner + current week marker */
.week-banner{ border:1px solid rgba(249,115,22,.18); background: rgba(249,115,22,.06); border-radius: 16px; padding: 12px 14px; }
.week-banner-inner{ display:flex; flex-direction:column; gap:4px; }
.week-banner .kicker{ font-size:11px; font-weight: 1000; letter-spacing:.08em; color: rgba(194,65,12,1); }
.week-banner .title{ font-weight: 1000; font-size:14px; color: var(--text); }
.week-banner .sub{ font-size:12px; color: var(--muted); }

.week-cell{ display:flex; align-items:center; gap:8px; }
.tag-week{ display:inline-flex; align-items:center; padding:4px 8px; border-radius: 999px; font-size:11px; font-weight: 1000; border:1px solid rgba(249,115,22,.25); background: rgba(249,115,22,.10); color: rgba(194,65,12,1); }

.mini-table{ width:100%; border-collapse:collapse; font-size:13px; }
.mini-table th, .mini-table td{ padding:10px 10px; border-bottom:1px solid rgba(17,24,39,.08); vertical-align:top; }
.mini-table th{ color: var(--muted2); font-weight: 950; }
.mini-table tbody tr:nth-child(even) td{ background: rgba(17,24,39,.015); }
.mini-table tr:hover td{ background: rgba(249,115,22,.05); }
.mini-table tr.is-week td{ background: rgba(249,115,22,.07); }
.mini-table tr.is-week td:first-child{ border-left: 4px solid rgba(249,115,22,.85); }
.mini-table tr.is-week:hover td{ background: rgba(249,115,22,.10); }

.step-code{
  font-family: var(--mono);
  font-weight: 950;
  padding:6px 10px;
  border-radius: 12px;
  border:1px solid rgba(249,115,22,.25);
  background: rgba(249,115,22,.08);
  color: rgba(194,65,12,1);
  min-width: 44px;
  text-align:center;
}
.step-title{ font-weight: 950; }
.step-sub{ color: var(--muted); font-size:12px; margin-top:2px; }

.history{ display:grid; gap:8px; }
.hist-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.02);
}
.hist-left{ display:flex; gap:10px; align-items:center; }
.hist-meta{ color: var(--muted); font-size:12px; }

.lbl{ display:block; font-size:12px; color: var(--muted2); font-weight: 950; margin:0 0 6px 0; }

/* Responsive */
@media (max-width: 980px){
  .cards{grid-template-columns: 1fr}
  .tabs{ position: static; }
}

/* Rate chips */
.rate-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid var(--border);
  background: rgba(17,24,39,.03);
  color: var(--text);
  font-weight: 800;
  cursor:pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.chip:hover{ transform: translateY(-1px); background: rgba(249,115,22,.08); border-color: rgba(249,115,22,.25); }
.chip.muted{ color: var(--muted); background: rgba(17,24,39,.02); }
.chip.muted:hover{ background: rgba(17,24,39,.04); border-color: var(--border); }
.chip .tiny{ font-weight: 700; color: var(--muted); }

.rate-editor-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; align-items:end; }
.rate-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.rate-output{ border:1px solid var(--border); background: rgba(17,24,39,.03); border-radius: 16px; padding:14px; min-height:88px; }

@media (max-width: 980px){
  .rate-editor-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .rate-editor-grid{ grid-template-columns:1fr; }
}

/* Mix cells inside schedule */
.mix-lines{ display:flex; flex-direction:column; gap:6px; }
.mix-line{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mix-line .pname{ font-weight: 900; }
.mix-line .pval{ font-weight: 900; }
.mix-line .setbtn{ padding:6px 10px; border-radius: 999px; }

/* Make the schedule table more readable */
.mini-table th{ font-size:12px; color: var(--muted2); }
.mini-table td{ vertical-align: top; }

/* --- Soil (rev11.2) --- */
.soil-ppm-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.soil-ppm-grid .ppm-item{ display:flex; flex-direction:column; gap:6px; }
.soil-ppm-grid .ppm-item .lbl{ margin:0; }
.soil-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius: 999px; border:1px solid var(--border); background: rgba(17,24,39,.03); font-weight: 900; }
.soil-pill.good{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }
.soil-pill.bad{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); }
.soil-pill.warn{ border-color: rgba(249,115,22,.35); background: rgba(249,115,22,.08); }
.soil-summary{ white-space: pre-wrap; margin:0; padding:12px; border-radius:12px; border:1px solid var(--border); background: rgba(17,24,39,.02); }

@media (max-width: 980px){
  .soil-ppm-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}


/* --- Soil Sensors Cards --- */
.soil-sensors-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; }
.soil-sensor-card{ border:1px solid var(--border); background: rgba(17,24,39,.02); border-radius: var(--radius2); padding:12px; }
.soil-sensor-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:10px; }
.soil-sensor-name{ font-weight: 900; }
.soil-sensor-eui{ font-size:12px; color: var(--muted2); }
.soil-sensor-age{ font-size:12px; color: var(--muted2); }
.soil-sensor-vals{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.soil-v{ display:flex; flex-direction:column; gap:6px; }
.soil-v .lbl{ font-size:12px; color: var(--muted2); }
.soil-v .val{ font-weight: 900; }
.meter{ height:8px; border-radius:999px; border:1px solid var(--border); background: rgba(17,24,39,.03); overflow:hidden; }
.meter > span{ display:block; height:100%; width:0%; background: rgba(99,102,241,.35); }

@media (max-width: 980px){
  .soil-sensors-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .soil-sensors-grid{ grid-template-columns:repeat(1, minmax(0,1fr)); }
  .soil-sensor-vals{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* --- Modal --- */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(17,24,39,.55);
  z-index: 9999;
}
.modal-overlay.open{ display:flex; }
.modal{
  width: min(980px, 96vw);
  max-height: 90vh;
  overflow: auto;
  border-radius: var(--radius2);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 16px;
}

/* --- Overview UX improvements (sensors) --- */
.input-sm{ padding:6px 10px; font-size:13px; height:auto; width:auto; }
#sensor_picker{ max-width: 320px; }
.sensor-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; padding:2px 10px;
  border-radius:999px; border:1px solid var(--border);
  background: rgba(17,24,39,.03);
  white-space:nowrap;
}
.sensor-badge.ok{ background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); }
.sensor-badge.warn{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); }
.sensor-badge.bad{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); }

.soil-sensor-card{ cursor:pointer; transition: box-shadow .15s ease, border-color .15s ease; }
.soil-sensor-card:hover{ box-shadow: 0 6px 20px rgba(17,24,39,.08); }
.soil-sensor-card.active{
  border-color: rgba(99,102,241,.85) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

.soil-sensors-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1100px){
  .soil-sensors-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px){
  .soil-sensors-grid{ grid-template-columns: 1fr; }
  #sensor_picker{ max-width: 100%; width: 100%; }
}


/* Watering: grouped field sections */
.field-group{
  border:1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.02);
  border-radius: 14px;
  padding: 12px;
}
.field-group + .field-group{ margin-top: 10px; }
.fg-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight: 950;
  color: var(--muted2);
  margin: 0 0 10px 0;
}
.fg-title::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background: rgba(249,115,22,.75);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.fg-grid{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:10px;
  align-items:center;
}
@media (max-width: 520px){
  .fg-grid{ grid-template-columns: 1fr; }
}



/* Expenses */
.table-wrap{ width:100%; overflow:auto; border-radius:16px; }
.table th, .table td{ vertical-align: top; }
.table td .btn{ padding:6px 10px; }


/* Watering + Temperature live status styling */
.live-state{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-top:12px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 14px 28px rgba(17,24,39,.05);
}
.live-state-main{ display:flex; align-items:center; gap:12px; min-width:260px; flex:1 1 280px; }
.live-dot{
  width:14px; height:14px; border-radius:999px; flex:0 0 14px;
  background: rgba(148,163,184,.9);
  box-shadow: 0 0 0 6px rgba(148,163,184,.14);
}
.live-title{ font-size:16px; font-weight:950; letter-spacing:-.2px; }
.live-sub{ font-size:12px; color: var(--muted); margin-top:2px; }
.live-side{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:110px; }
.live-side-label{ font-size:11px; text-transform:uppercase; letter-spacing:.12em; color: var(--muted); font-weight:900; }
.live-side-value{ font-size:26px; line-height:1; font-weight:950; letter-spacing:-.8px; }
.live-state.is-live{
  border-color: rgba(22,163,74,.26);
  background: linear-gradient(135deg, rgba(22,163,74,.14), rgba(255,255,255,.92) 42%, rgba(22,163,74,.06));
}
.live-state.is-live .live-dot{
  background: rgba(22,163,74,.96);
  box-shadow: 0 0 0 0 rgba(22,163,74,.32);
  animation: pumpkinPulse 1.6s infinite;
}
.live-state.is-armed{
  border-color: rgba(59,130,246,.18);
  background: linear-gradient(135deg, rgba(59,130,246,.10), rgba(255,255,255,.92) 48%, rgba(59,130,246,.05));
}
.live-state.is-armed .live-dot{
  background: rgba(59,130,246,.9);
  box-shadow: 0 0 0 6px rgba(59,130,246,.14);
}
.live-state.is-alert{
  border-color: rgba(249,115,22,.26);
  background: linear-gradient(135deg, rgba(249,115,22,.14), rgba(255,255,255,.92) 48%, rgba(251,191,36,.06));
}
.live-state.is-alert .live-dot{
  background: rgba(249,115,22,.95);
  box-shadow: 0 0 0 0 rgba(249,115,22,.28);
  animation: pumpkinPulse 1.8s infinite;
}
.live-state.is-off,
.live-state.is-muted{
  border-color: rgba(148,163,184,.18);
  background: linear-gradient(135deg, rgba(148,163,184,.10), rgba(255,255,255,.92));
}
.live-state.is-off .live-dot,
.live-state.is-muted .live-dot{
  background: rgba(148,163,184,.9);
  box-shadow: 0 0 0 6px rgba(148,163,184,.14);
}
.status-chip-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.status-chip{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:16px;
  padding:10px 12px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 20px rgba(17,24,39,.04);
}
.status-chip .status-dot{
  width:12px; height:12px; border-radius:999px; flex:0 0 12px;
  background: rgba(148,163,184,.9);
  box-shadow: 0 0 0 5px rgba(148,163,184,.12);
}
.status-copy{ min-width:0; flex:1 1 auto; display:flex; flex-direction:column; }
.status-copy strong{ font-size:13px; line-height:1.1; }
.status-copy small{ font-size:11px; color: var(--muted); margin-top:2px; }
.status-value{ font-size:12px; font-weight:950; letter-spacing:.04em; text-transform:uppercase; }
.status-chip.is-on{
  border-color: rgba(22,163,74,.26);
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(255,255,255,.92));
}
.status-chip.is-on .status-dot{
  background: rgba(22,163,74,.96);
  box-shadow: 0 0 0 0 rgba(22,163,74,.28);
  animation: pumpkinPulse 1.6s infinite;
}
.status-chip.is-on .status-value{ color: var(--ok); }
.status-chip.is-off{
  border-color: rgba(148,163,184,.18);
  background: linear-gradient(135deg, rgba(148,163,184,.09), rgba(255,255,255,.9));
}
.status-chip.is-off .status-value{ color: var(--muted2); }
.status-chip.is-unknown{
  border-style: dashed;
  border-color: rgba(217,119,6,.24);
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(255,255,255,.9));
}
.status-chip.is-unknown .status-dot{ background: rgba(217,119,6,.92); box-shadow: 0 0 0 5px rgba(217,119,6,.14); }
@keyframes pumpkinPulse{
  0% { box-shadow: 0 0 0 0 rgba(22,163,74,.30); }
  70% { box-shadow: 0 0 0 10px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
.temp-card{
  position:relative;
  overflow:hidden;
}
.temp-card::after{
  content:"";
  position:absolute;
  inset:auto -20% -45% auto;
  width:220px;
  height:220px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(59,130,246,.08), transparent 62%);
  pointer-events:none;
}
@media (max-width: 720px){
  .live-side{ align-items:flex-start; }
  .live-side-value{ font-size:22px; }
}

#cameras_panel{
  overflow:hidden;
}
.camera-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  align-items:start;
}
.camera-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:100%;
  border-radius:22px;
  border:1px solid rgba(17,24,39,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  box-shadow:0 16px 30px rgba(17,24,39,.07);
  padding:12px;
}
.camera-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:0;
  flex-wrap:nowrap;
}
.camera-topbar > :first-child{
  min-width:0;
  flex:1 1 auto;
}
.camera-topbar .row{
  flex:0 0 auto;
}
.camera-topbar .btn,
.camera-footer .btn,
#cam_view_overlay .btn,
#cams_overlay .btn{
  padding:8px 12px;
  border-radius:10px;
}
.camera-title{
  font-size:16px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.02em;
  word-break:break-word;
}
.camera-subchips{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:6px;
}
.camera-subchips .badge{
  padding:4px 8px;
  font-size:10px;
}
.camera-media{
  position:relative;
  width:100%;
  min-height:0;
  aspect-ratio:16 / 9;
  border-radius:16px;
  overflow:hidden;
  background:radial-gradient(circle at top, rgba(34,197,94,.16), rgba(15,23,42,.94));
  border:1px solid rgba(255,255,255,.10);
}
.camera-empty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:20px;
}
.camera-footer{
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  margin-top:0;
}
#cam_view_body .camera-media{
  aspect-ratio:auto;
  padding-top:0;
  min-height:62vh;
}
#cams_overlay .modal{
  width:min(1280px, 96vw) !important;
  max-height:92vh;
}
#cams_overlay .table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--panel);
}
@media (max-width: 1100px){
  .camera-wall{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .camera-topbar{ flex-wrap:wrap; }
}
@media (max-width: 720px){
  .camera-wall{ grid-template-columns:1fr; }
  .camera-card{ padding:12px; border-radius:20px; }
  .camera-topbar{ flex-wrap:wrap; }
  .camera-topbar .row{ width:100%; }
  .camera-topbar .row .btn,
  .camera-topbar .row a.btn{ flex:1 1 0; text-align:center; }
}

.co2-card{position:relative;overflow:hidden;}
.co2-card::after{content:"";position:absolute;inset:auto -18% -40% auto;width:220px;height:220px;border-radius:999px;background:radial-gradient(circle, rgba(34,197,94,.10), transparent 62%);pointer-events:none;}
.co2-metric-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:12px;}
.co2-metric{border:1px solid rgba(17,24,39,.08);border-radius:16px;padding:10px 12px;background:rgba(255,255,255,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.co2-metric .k{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:900;}
.co2-metric .v{margin-top:4px;font-size:20px;font-weight:950;letter-spacing:-.03em;}
.co2-window-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border:1px solid rgba(17,24,39,.08);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(248,250,252,.92));box-shadow:inset 0 1px 0 rgba(255,255,255,.75);}
.co2-window-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
@media (max-width: 720px){.co2-window-bar{align-items:stretch;}.co2-window-controls{width:100%;}}
.co2-active-window{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px;padding:12px 14px;border:1px solid rgba(249,115,22,.18);border-radius:18px;background:linear-gradient(135deg,rgba(255,247,237,.96),rgba(255,255,255,.88));box-shadow:inset 0 1px 0 rgba(255,255,255,.75);}
.co2-active-window .input[type="time"],.co2-window-controls .input[type="time"]{font-weight:850;letter-spacing:.02em;}
@media (max-width:720px){.co2-active-window{align-items:stretch}.co2-active-window .co2-window-controls{width:100%;}.co2-active-window .input[type="time"]{flex:1;min-width:120px;}}



/* ---------------------------
   Overview Command Center
---------------------------- */
.overview-shell{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.overview-command,
.overview-sensecap,
#cameras_panel{
  position:relative;
  z-index:0;
  margin:0;
  transform:none;
}
.overview-sensecap,
#cameras_panel{
  clear:both;
}
#cameras_panel{
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
}
#cameras_panel > .spacer{
  display:none;
}
#cameras_wall_header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
#cameras_wall_header > :first-child{
  min-width:0;
}
#cameras_panel .camera-wall{
  margin:0;
  align-content:start;
}
.overview-command{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(900px 220px at 0% 0%, rgba(249,115,22,.12), transparent 55%),
    radial-gradient(720px 220px at 100% 0%, rgba(245,158,11,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
  border:1px solid rgba(249,115,22,.18);
  border-radius: calc(var(--radius2) + 8px);
  box-shadow: var(--shadow);
  padding:14px;
}
.overview-command-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.overview-command-badges{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.overview-command-tools{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(17,24,39,.08);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.92));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.overview-tools-title{
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted2);
  margin-bottom:4px;
}
.overview-command-tool-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.overview-status-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  margin-top:14px;
}
.overview-status-card{
  position:relative;
  overflow:hidden;
  border-radius: 22px;
  border:1px solid rgba(17,24,39,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
  box-shadow: 0 16px 34px rgba(17,24,39,.06);
  padding:16px;
}
.overview-status-card::after{
  content:"";
  position:absolute;
  right:-46px;
  bottom:-52px;
  width:160px;
  height:160px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(249,115,22,.10), transparent 64%);
  pointer-events:none;
}
.overview-status-card.is-live{
  border-color: rgba(22,163,74,.26);
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(255,255,255,.94) 44%, rgba(22,163,74,.05));
}
.overview-status-card.is-alert{
  border-color: rgba(249,115,22,.24);
  background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(255,255,255,.94) 48%, rgba(245,158,11,.05));
}
.overview-status-card.is-off{
  border-color: rgba(148,163,184,.20);
  background: linear-gradient(135deg, rgba(148,163,184,.10), rgba(255,255,255,.92));
}
.overview-status-card.is-armed{
  border-color: rgba(59,130,246,.18);
  background: linear-gradient(135deg, rgba(59,130,246,.08), rgba(255,255,255,.94) 50%, rgba(59,130,246,.05));
}
.overview-status-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.overview-status-kicker{
  font-size:12px;
  font-weight:950;
  color: var(--muted2);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.overview-status-value{
  font-size:34px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;
  margin-top:6px;
}
.overview-status-title{
  font-size:18px;
  line-height:1.15;
  font-weight:950;
  letter-spacing:-.02em;
  margin-top:12px;
}
.overview-status-sub{
  font-size:12px;
  color: var(--muted);
  margin-top:4px;
  min-height:32px;
}
.overview-chip-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.overview-mini-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.82);
  padding:7px 10px;
  font-size:11px;
  font-weight:900;
  color: var(--muted2);
  white-space:nowrap;
}
.overview-detail-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap:14px;
}
.overview-panel{
  height:100%;
}
.overview-live-grid,
.overview-timeline,
.overview-activity-grid{
  display:grid;
  gap:10px;
}
.overview-live-grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.overview-live-tile,
.overview-activity-card{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.90));
  padding:14px;
}
.overview-live-tile.is-live,
.overview-activity-card.is-live{
  border-color: rgba(22,163,74,.26);
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(255,255,255,.95));
}
.overview-live-tile.is-alert,
.overview-activity-card.is-alert{
  border-color: rgba(249,115,22,.24);
  background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(255,255,255,.95));
}
.overview-live-tile.is-off,
.overview-activity-card.is-off{
  border-color: rgba(148,163,184,.18);
  background: linear-gradient(135deg, rgba(148,163,184,.10), rgba(255,255,255,.94));
}
.overview-live-kicker,
.overview-activity-kicker{
  font-size:11px;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: var(--muted);
}
.overview-live-title,
.overview-activity-title{
  font-size:16px;
  font-weight:950;
  letter-spacing:-.02em;
  margin-top:5px;
}
.overview-live-sub,
.overview-activity-sub{
  font-size:12px;
  color: var(--muted);
  margin-top:4px;
}
.overview-live-meta,
.overview-activity-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  flex-wrap:wrap;
}
.overview-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
  padding:6px 10px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
  color: var(--muted2);
}
.overview-tag.water{ border-color: rgba(37,99,235,.24); background: rgba(37,99,235,.08); color: rgba(29,78,216,1); }
.overview-tag.fan{ border-color: rgba(59,130,246,.24); background: rgba(59,130,246,.08); color: rgba(37,99,235,1); }
.overview-tag.heat{ border-color: rgba(249,115,22,.24); background: rgba(249,115,22,.08); color: rgba(194,65,12,1); }
.overview-tag.co2{ border-color: rgba(16,185,129,.24); background: rgba(16,185,129,.08); color: rgba(5,150,105,1); }
.overview-live-state,
.overview-activity-time{
  font-size:11px;
  font-weight:900;
  color: var(--muted2);
}
.overview-env-strip{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.overview-env-card{
  border-radius:18px;
  border:1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.82);
  padding:14px;
}
.overview-env-k{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:950;
  color: var(--muted);
}
.overview-env-v{
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.05em;
  font-weight:950;
  margin-top:6px;
}
.overview-timeline-item{
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap:12px;
  align-items:flex-start;
  border-radius:18px;
  border:1px solid rgba(17,24,39,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.90));
  padding:14px;
}
.overview-timeline-item.is-live{ border-color: rgba(22,163,74,.26); }
.overview-timeline-item.is-off{ border-color: rgba(148,163,184,.18); }
.overview-timeline-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:56px;
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(17,24,39,.10);
  background: rgba(17,24,39,.03);
}
.overview-timeline-item.is-live .overview-timeline-pill{
  border-color: rgba(22,163,74,.24);
  background: rgba(22,163,74,.08);
  color: var(--ok);
}
.overview-timeline-item.is-off .overview-timeline-pill{
  border-color: rgba(148,163,184,.22);
  background: rgba(148,163,184,.10);
  color: var(--muted2);
}
.overview-timeline-title{
  font-size:15px;
  line-height:1.2;
  font-weight:950;
  letter-spacing:-.02em;
}
.overview-timeline-sub{
  font-size:12px;
  color: var(--muted);
  margin-top:4px;
}
.overview-timeline-time{
  font-size:11px;
  font-weight:900;
  color: var(--muted2);
  white-space:nowrap;
}
.overview-empty{
  border:1px dashed rgba(17,24,39,.14);
  border-radius:18px;
  background: rgba(255,255,255,.62);
  color: var(--muted);
  padding:16px;
  font-size:13px;
}
@media (max-width: 1120px){
  .overview-status-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-detail-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .overview-status-grid{ grid-template-columns: 1fr; }
  .overview-command-badges{ justify-content:flex-start; }
  .overview-env-strip{ grid-template-columns: 1fr; }
  .overview-timeline-item{ grid-template-columns: 1fr; }
  .overview-timeline-time{ white-space:normal; }
}


.overview-sensecap{
  margin-top: 2px;
}

.overview-sensecap .hero-title .badge{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}


/* --- Overview rebuild v2026.04.12.11 --- */
.overview-command-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px;}
.overview-mini-panel{border:1px solid rgba(17,24,39,.08);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,250,252,.92));padding:14px;box-shadow:0 10px 24px rgba(17,24,39,.05);min-width:0;}
.overview-mini-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.overview-mini-title{font-size:17px;line-height:1.15;font-weight:950;letter-spacing:-.02em;margin-top:2px;}
.overview-mini-copy{font-size:12px;color:var(--muted);margin-top:8px;}
.overview-mini-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;}
.overview-mini-stat{border:1px solid rgba(17,24,39,.08);border-radius:16px;background:rgba(255,255,255,.82);padding:10px 12px;min-width:0;}
.overview-mini-stat-k{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.10em;font-weight:950;color:var(--muted);margin-bottom:4px;}
.overview-mini-stat strong{display:block;font-size:18px;line-height:1.1;letter-spacing:-.03em;}
.overview-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px;}
.overview-action-grid .btn,.overview-card-actions .btn{width:100%;justify-content:center;}
.overview-next-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;border-top:1px solid rgba(17,24,39,.08);padding-top:12px;font-size:12px;}
.overview-next-label{font-weight:950;text-transform:uppercase;letter-spacing:.10em;color:var(--muted);}
.overview-alert-list{display:grid;gap:10px;margin-top:12px;}
.overview-alert-item{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid rgba(249,115,22,.16);border-radius:16px;background:rgba(255,247,237,.92);padding:12px;}
.overview-alert-item.is-error{border-color:rgba(220,38,38,.16);background:rgba(254,242,242,.95);}
.overview-alert-copy{min-width:0;}
.overview-alert-title{font-size:13px;font-weight:950;line-height:1.2;}
.overview-alert-sub{font-size:12px;color:var(--muted);margin-top:4px;}
.overview-alert-time{font-size:11px;font-weight:900;color:var(--muted2);white-space:nowrap;}
.overview-card-actions{margin-top:12px;padding-top:12px;border-top:1px solid rgba(17,24,39,.07);}
.overview-status-card .btn-small{padding:9px 12px;font-size:12px;border-radius:12px;}
.overview-health-ok{color:var(--ok);}
.overview-health-warn{color:var(--warn);}
.overview-health-bad{color:var(--bad);}
@media (max-width: 1120px){.overview-command-grid{grid-template-columns:1fr;}}
@media (max-width: 720px){.overview-mini-metrics,.overview-action-grid{grid-template-columns:1fr;}}

/* =========================================================
   PumpkinOps Unified Light Design System
   Build 2026.05.25.07
   Goal: premium, bright, readable, end-user friendly UI
   ========================================================= */

:root{
  color-scheme: light;
  --po-bg-0:#fffaf3;
  --po-bg-1:#f7f8fb;
  --po-bg-2:#ffffff;
  --po-surface:rgba(255,255,255,.92);
  --po-surface-2:rgba(255,255,255,.82);
  --po-surface-3:rgba(249,250,251,.92);
  --po-border:rgba(17,24,39,.10);
  --po-border-strong:rgba(17,24,39,.16);
  --po-text:#111827;
  --po-text-soft:#374151;
  --po-muted:#6b7280;
  --po-muted-2:#4b5563;
  --po-accent:#f97316;
  --po-accent-2:#fb923c;
  --po-accent-3:#f59e0b;
  --po-green:#16a34a;
  --po-yellow:#d97706;
  --po-red:#dc2626;
  --po-blue:#2563eb;
  --po-purple:#7c3aed;
  --po-radius-sm:12px;
  --po-radius:18px;
  --po-radius-lg:24px;
  --po-radius-xl:30px;
  --po-shadow:0 18px 55px rgba(17,24,39,.10);
  --po-shadow-soft:0 10px 30px rgba(17,24,39,.08);
  --po-glow:0 0 0 1px rgba(249,115,22,.10),0 18px 50px rgba(249,115,22,.10);

  --bg:var(--po-bg-0);
  --bg2:var(--po-bg-1);
  --panel:var(--po-surface);
  --panel2:var(--po-surface-2);
  --text:var(--po-text);
  --muted:var(--po-muted);
  --muted2:var(--po-text-soft);
  --accent:var(--po-accent);
  --accent2:var(--po-accent-2);
  --accent3:var(--po-accent-3);
  --ok:var(--po-green);
  --warn:var(--po-yellow);
  --bad:var(--po-red);
  --border:var(--po-border);
  --border2:rgba(249,115,22,.28);
  --shadow:var(--po-shadow);
  --shadow2:var(--po-glow);
  --radius:var(--po-radius);
  --radius2:var(--po-radius-lg);
}

html{background:var(--po-bg-0);}
body{
  min-height:100%;
  color:var(--po-text);
  background:
    radial-gradient(980px 620px at 12% -10%, rgba(249,115,22,.14), transparent 60%),
    radial-gradient(840px 540px at 86% 4%, rgba(251,146,60,.10), transparent 60%),
    radial-gradient(720px 520px at 55% 105%, rgba(22,163,74,.06), transparent 65%),
    linear-gradient(180deg, var(--po-bg-0) 0%, var(--po-bg-1) 54%, #ffffff 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(249,115,22,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,115,22,.045) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.22), transparent 74%);
  z-index:-1;
}
.container{width:min(100%,1440px);max-width:1440px;padding:clamp(12px,2vw,24px);}
.topbar{
  position:relative;margin-bottom:16px;padding:14px;border:1px solid var(--po-border);
  border-radius:var(--po-radius-xl);background:rgba(255,255,255,.86);
  box-shadow:var(--po-shadow-soft);backdrop-filter:blur(18px) saturate(1.12);
}
.logo{width:52px;height:52px;border-radius:18px;color:#1d1208;background:radial-gradient(circle at 28% 18%, rgba(255,255,255,.90), transparent 26%),linear-gradient(135deg,var(--po-accent-2),var(--po-accent));border:1px solid rgba(249,115,22,.26);box-shadow:0 16px 40px rgba(249,115,22,.18);}
.h1{font-size:20px;font-weight:950;letter-spacing:-.03em;}.sub{color:var(--po-muted);line-height:1.45;}.mono{font-family:var(--mono);}
.tabs{position:sticky;top:10px;z-index:40;gap:8px;margin-bottom:16px;padding:9px;border:1px solid var(--po-border);border-radius:999px;background:rgba(255,255,255,.88);box-shadow:var(--po-shadow-soft);backdrop-filter:blur(18px) saturate(1.18);}
.tab{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:10px 15px;border:1px solid transparent;color:var(--po-text-soft);border-radius:999px;background:transparent;letter-spacing:-.01em;transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;}
.tab::before{opacity:.92;font-size:15px;line-height:1;}.tab:nth-child(1)::before{content:"⌁";}.tab:nth-child(2)::before{content:"💧";}.tab:nth-child(3)::before{content:"🌡";}.tab:nth-child(4)::before{content:"CO₂";font-size:11px;font-weight:950;}.tab:nth-child(5)::before{content:"✦";}.tab:nth-child(6)::before{content:"$";font-weight:950;}.tab:nth-child(7)::before{content:"◌";}.tab:nth-child(8)::before{content:"⚡";}
.tab:hover,.tab:focus-visible{color:#7c2d12 !important;background:rgba(255,247,237,.96);border-color:rgba(249,115,22,.30);box-shadow:0 12px 30px rgba(249,115,22,.13);transform:translateY(-1px);outline:none;}.tab.active{color:#fff !important;background:linear-gradient(135deg,var(--po-accent-2),var(--po-accent));border-color:rgba(249,115,22,.40);box-shadow:0 14px 36px rgba(249,115,22,.22);}
.card,.hero,.overview-command,.overview-panel,.overview-mini-panel,.overview-status-card,.overview-env-card,.overview-live-tile,.overview-activity-card,.soil-sensor-card,.field-group,.notice,.table-wrap,.camera-card,.week-banner,.overview-sensecap{border:1px solid var(--po-border) !important;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.84)) !important;box-shadow:var(--po-shadow-soft) !important;backdrop-filter:blur(16px) saturate(1.08);color:var(--po-text);}
.card,.hero,.overview-command,.overview-mini-panel,.overview-status-card,.overview-panel,.table-wrap,.notice{border-radius:var(--po-radius-lg) !important;}
.card.inset,.overview-mini-stat,.overview-alert-item,.overview-timeline-item,.overview-live-tile,.overview-activity-card,.overview-env-card,.status-chip,.co2-metric,.soil-sensor-card,.mix-line,.hist-item,.week-cell{border:1px solid rgba(17,24,39,.08) !important;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(249,250,251,.88)) !important;color:var(--po-text);}
.card h3,.hero-h,.overview-tools-title,.overview-status-kicker,.kpi-title,.fg-title,.label,.k,.overview-mini-stat-k,.overview-env-k,.overview-live-kicker,.overview-activity-kicker{color:var(--po-text-soft) !important;letter-spacing:.02em;}.kpi,.hero-v,.overview-status-value,.overview-env-v,.overview-mini-stat strong,.gauge-val,.v,.live-side-value{color:var(--po-text) !important;text-shadow:none;}
.btn,.btn-xs,button,.setbtn{min-height:38px;border-radius:14px !important;border:1px solid rgba(17,24,39,.11) !important;color:var(--po-text) !important;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,250,251,.92)) !important;box-shadow:0 8px 20px rgba(17,24,39,.07);transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;}
.btn:hover,.btn-xs:hover,button:hover,.setbtn:hover{color:#7c2d12 !important;background:linear-gradient(135deg,rgba(255,247,237,.98),rgba(255,237,213,.94)) !important;border-color:rgba(249,115,22,.34) !important;box-shadow:0 14px 34px rgba(249,115,22,.16);transform:translateY(-1px);}.btn.primary,.btn-xs.primary,button.primary{color:#fff !important;background:linear-gradient(135deg,var(--po-accent-2),var(--po-accent)) !important;border-color:rgba(249,115,22,.38) !important;box-shadow:0 16px 34px rgba(249,115,22,.22);}.btn.danger,button.danger{color:#fff !important;background:linear-gradient(135deg,rgba(239,68,68,.92),rgba(185,28,28,.84)) !important;border-color:rgba(220,38,38,.35) !important;}
.badge,.pill,.sensor-badge,.soil-pill,.chip,.overview-tag{display:inline-flex;align-items:center;gap:6px;min-height:28px;border-radius:999px !important;border:1px solid rgba(17,24,39,.10) !important;color:var(--po-text-soft) !important;background:rgba(249,250,251,.90) !important;font-weight:900;}.badge.ok,.pill.ok,.sensor-badge.ok,.soil-pill.ok{color:var(--po-green) !important;background:rgba(22,163,74,.08) !important;border-color:rgba(22,163,74,.25) !important;}.badge.warn,.pill.warn,.sensor-badge.warn,.soil-pill.warn{color:var(--po-yellow) !important;background:rgba(217,119,6,.10) !important;border-color:rgba(217,119,6,.25) !important;}.badge.bad,.pill.bad,.sensor-badge.bad,.soil-pill.bad{color:var(--po-red) !important;background:rgba(220,38,38,.08) !important;border-color:rgba(220,38,38,.25) !important;}.badge.orange,.pill.orange{color:#c2410c !important;background:rgba(249,115,22,.10) !important;border-color:rgba(249,115,22,.25) !important;}
.input,input,select,textarea{color:var(--po-text) !important;background:rgba(255,255,255,.96) !important;border:1px solid rgba(17,24,39,.13) !important;border-radius:14px !important;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);}.input:focus,input:focus,select:focus,textarea:focus{border-color:rgba(249,115,22,.55) !important;box-shadow:0 0 0 4px rgba(249,115,22,.13), inset 0 1px 0 rgba(255,255,255,.65);}
.table,table{color:var(--po-text);border-collapse:separate;border-spacing:0;}.table th,table th{color:var(--po-muted);background:rgba(249,250,251,.95);text-transform:uppercase;letter-spacing:.08em;font-size:11px;}.table td,table td,.table th,table th{border-color:rgba(17,24,39,.08) !important;}.table tr:hover td,table tr:hover td{background:rgba(255,247,237,.70);}
.meter,.bar,.gauge{background:rgba(17,24,39,.06) !important;border-color:rgba(17,24,39,.10) !important;}.meter-fill,.bar > i,.gauge-inner{background:linear-gradient(90deg,var(--po-accent),var(--po-accent-2)) !important;}.status-dot,.live-dot,.dot{box-shadow:0 0 0 4px currentColor;}.live-state,.status-chip-grid{border-radius:var(--po-radius-lg);}
.overview-status-grid,.overview-command-grid,.overview-detail-grid,.overview-live-grid,.overview-activity-grid,.hero-grid,.cards{gap:16px;}.overview-status-card,.overview-mini-panel,.card,.hero{position:relative;overflow:hidden;}.overview-status-card::after,.overview-mini-panel::after,.card::after,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.50),transparent 32%,transparent 70%,rgba(249,115,22,.045));opacity:.72;}.overview-status-card > *,.overview-mini-panel > *,.card > *,.hero > *{position:relative;z-index:1;}
.notice.ok{border-color:rgba(22,163,74,.24) !important;background:rgba(22,163,74,.08) !important;}.notice.warn{border-color:rgba(217,119,6,.24) !important;background:rgba(217,119,6,.08) !important;}.notice.bad,.notice.error{border-color:rgba(220,38,38,.25) !important;background:rgba(220,38,38,.08) !important;}.notice.subtle{background:rgba(249,250,251,.90) !important;}
.status-chip,.soil-sensor-card,.camera-card,.auto-meross-row,.moist-head,.live-state{border-radius:var(--po-radius-lg) !important;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(249,250,251,.88)) !important;border:1px solid rgba(17,24,39,.08) !important;}.status-value,.soil-sensor-name,.auto-meross-title,.live-title,.step-title,.pname{color:var(--po-text) !important;font-weight:950;}
@media (max-width: 820px){html,body{width:100%;max-width:100%;overflow-x:hidden;}.container{width:100%;max-width:100%;padding:10px 10px calc(18px + env(safe-area-inset-bottom));}.topbar{border-radius:22px;margin-bottom:10px;align-items:flex-start;}.brand{min-width:0;}.h1{font-size:18px;}.actions{width:100%;justify-content:flex-start;flex-wrap:wrap;}.tabs{position:sticky;top:6px;width:100%;max-width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;border-radius:22px;padding:8px;scrollbar-width:none;}.tabs::-webkit-scrollbar{display:none;}.tab{flex:0 0 auto;min-height:42px;padding:10px 13px;font-size:13px;}.card,.hero,.overview-command,.overview-panel,.overview-mini-panel,.overview-status-card{border-radius:22px !important;padding:13px !important;}.row{align-items:flex-start;}.btn,.btn-xs,button{min-height:42px;}.overview-command-tool-actions,.overview-command-badges,.actions{gap:8px;}.overview-command-tool-actions .btn,.overview-action-grid .btn,.overview-card-actions .btn{width:100%;}.table-wrap{overflow-x:auto;}}
.tabs .tab{background:transparent !important;color:var(--po-text-soft) !important;box-shadow:none !important;border-color:transparent !important;}.tabs .tab:hover,.tabs .tab:focus-visible{color:#7c2d12 !important;background:rgba(255,247,237,.98) !important;border-color:rgba(249,115,22,.32) !important;box-shadow:0 14px 34px rgba(249,115,22,.16) !important;}.tabs .tab.active{color:#fff !important;background:linear-gradient(135deg,var(--po-accent-2),var(--po-accent)) !important;border-color:rgba(249,115,22,.38) !important;box-shadow:0 14px 36px rgba(249,115,22,.22) !important;}


.email-queue-actions .btn{min-height:38px}
@media(max-width:640px){.table.compact th,.table.compact td{font-size:12px}.email-queue-actions .btn{width:100%}}

/* CO2 tab: preserve the premium orange CO2 pill even if older cached tab CSS is present. */
.tabs .tab.tab-co2{gap:8px;}
.tabs .tab.tab-co2::before{content:none !important;}
.tabs .tab.tab-co2 .tab-glyph{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 7px;border-radius:999px;font-size:12px;font-weight:950;line-height:1;letter-spacing:.02em;color:#c2410c;background:rgba(249,115,22,.10);border:1px solid rgba(249,115,22,.22);}
.tabs .tab.tab-co2.active,
.tabs .tab.tab-co2[aria-selected="true"]{color:#fff !important;background:linear-gradient(135deg,var(--po-accent-2),var(--po-accent)) !important;border-color:rgba(249,115,22,.46) !important;box-shadow:0 16px 38px rgba(249,115,22,.25) !important;}
.tabs .tab.tab-co2.active .tab-glyph,
.tabs .tab.tab-co2[aria-selected="true"] .tab-glyph{color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);}

/* 2026-06-10 CO2 control rescue: keep the active-window control as a visible premium pill box. */
#tab-co2 .co2-window-bar,
#tab-co2 .co2-active-window{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(249,115,22,.28) !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.96), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, rgba(255,247,237,.98), rgba(255,255,255,.94) 54%, rgba(255,251,235,.94)) !important;
  box-shadow:
    0 18px 44px rgba(249,115,22,.12),
    inset 0 1px 0 rgba(255,255,255,.86) !important;
}
#tab-co2 .co2-window-bar::before,
#tab-co2 .co2-active-window::before{
  content:"";
  position:absolute;
  inset:-42% auto auto -8%;
  width:190px;
  height:190px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(249,115,22,.16), transparent 64%);
  pointer-events:none;
  z-index:-1;
}
#tab-co2 .co2-window-controls{
  border:1px solid rgba(249,115,22,.16) !important;
  border-radius:999px !important;
  padding:8px 10px !important;
  background:rgba(255,255,255,.74) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82) !important;
}
#tab-co2 .co2-window-controls .input[type="time"],
#tab-co2 .co2-active-window .input[type="time"]{
  min-height:38px !important;
  border-radius:999px !important;
  text-align:center;
  font-weight:950 !important;
  color:var(--po-text) !important;
  background:rgba(255,255,255,.96) !important;
}
#tab-co2 .co2-window-controls .badge,
#tab-co2 .co2-active-window .badge{
  color:#9a3412 !important;
  border-color:rgba(249,115,22,.28) !important;
  background:rgba(255,247,237,.96) !important;
}
@media(max-width:720px){
  #tab-co2 .co2-window-controls{border-radius:20px !important; width:100%; justify-content:flex-start;}
  #tab-co2 .co2-window-controls .input[type="time"]{flex:1 1 126px; width:auto !important;}
  #tab-co2 .co2-window-controls .badge{width:100%; justify-content:center;}
}