:root {
  --bg:#0f1115; --panel:#171a21; --panel-2:#1e222b;
  --border:#2a2f3a; --text:#e8ecf1; --muted:#9aa3b2;
  --accent:#4ecdc4; --warn:#ffb84d; --danger:#ff6b6b;
  --ok:#58d68d; --shadow:0 2px 12px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f6f7fa; --panel:#fff; --panel-2:#f1f3f7;
    --border:#d9dde4; --text:#1a1d24; --muted:#5a6370;
    --accent:#1b9e94; --ok:#2a8a4d; --shadow:0 1px 4px rgba(0,0,0,.08);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.app-header { display:flex; align-items:center; gap:1rem; padding:.9rem 1.5rem; background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.app-header h1 { font-size:1.15rem; margin:0; letter-spacing:.2px; }
.app-header nav { display:flex; gap:.8rem; margin-left:1rem; flex:1; }
.app-header nav a { color:var(--muted); text-decoration:none; font-size:.9rem; padding:.3rem .6rem; border-radius:6px; }
.app-header nav a.active { color:var(--text); background:var(--panel-2); }
.status-icons { display:flex; gap:.7rem; align-items:center; margin-left:auto; margin-right:1rem; flex-wrap:wrap; }
.status-icon { display:flex; align-items:center; }
.status-icon .icon { width:18px; height:18px; stroke-width:2; }
.status-icon .icon.ok { color:var(--ok); }
.status-icon .icon.err { color:var(--danger); }
.status-icon .icon.warn { color:var(--warn); }
.status-icon .icon.storm { color:#a855f7; }
.status-icon .icon.active { color:var(--accent); }
.status-icon .icon.grey { color:var(--muted); opacity:.4; }
.api-key { display:flex; align-items:center; gap:.4rem; }
.api-key input { background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:.35rem .6rem; font-size:.85rem; width:200px; }
.api-key button, .actions button { background:var(--accent); color:#06242a; border:0; border-radius:6px; padding:.4rem .9rem; font-weight:600; cursor:pointer; font-size:.85rem; }
.api-key button:hover, .actions button:hover { opacity:.9; }
.actions button.warn { background:var(--warn); color:#3b2600; }
.actions button.secondary { background:var(--panel-2); color:var(--text); border:1px solid var(--border); }
.badge { font-size:.75rem; padding:.2rem .5rem; border-radius:4px; background:var(--panel-2); color:var(--muted); }
.badge.ok { background:rgba(88,214,141,.15); color:var(--ok); }
.badge.err { background:rgba(255,107,107,.15); color:var(--danger); }

main { max-width:1100px; margin:1.5rem auto; padding:0 1.5rem; display:grid; gap:1rem; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:1rem 1.2rem; }
.card h2 { margin:0 0 .8rem; font-size:.95rem; letter-spacing:.3px; color:var(--muted); text-transform:uppercase; font-weight:600; }

.status-grid { display:grid; grid-template-columns:160px 1fr; gap:1.5rem; align-items:center; }
.gauge { text-align:center; }
.soc-big { font-size:3rem; font-weight:700; color:var(--accent); line-height:1; }
.soc-sub { font-size:.75rem; color:var(--muted); margin-top:.25rem; }
.battery-sub { font-size:.8rem; color:var(--muted); margin-top:.4rem; }
.rings { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.2rem; }
.ring { position:relative; height:120px; background:var(--panel-2); border:1px solid var(--border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
.ring-fill { width:100%; height:0%; transition:height .6s cubic-bezier(.4,.8,.3,1); opacity:.55; }
.ring[data-kind="solar"]  .ring-fill { background:linear-gradient(to top, rgba(255,184,77,.9), rgba(255,184,77,.35)); }
.ring[data-kind="export"] .ring-fill { background:linear-gradient(to top, rgba(78,205,196,.9), rgba(78,205,196,.35)); }
.ring[data-kind="home"]   .ring-fill { background:linear-gradient(to top, rgba(110,166,255,.9), rgba(110,166,255,.35)); }
.ring-label { position:absolute; inset:.6rem .7rem auto .7rem; display:flex; justify-content:space-between; align-items:center; }
.ring-label .k { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
.ring-label > *:last-child { font-weight:600; font-size:.95rem; }

.chips { list-style:none; padding:0; margin:1rem 0 0; display:flex; flex-wrap:wrap; gap:1rem 1.5rem; }
.chips li { display:flex; flex-direction:column; gap:.15rem; }
.chips .k { color:var(--muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.3px; }
.chips li > *:last-child { font-size:.95rem; font-weight:600; }

.pill { background:var(--panel-2); padding:.2rem .6rem; border-radius:999px; font-size:.85rem; display:inline-block; width:fit-content; font-weight:600; }
.pill.hold, .pill.yellow { background:rgba(255,184,77,.18); color:var(--warn); }
.pill.absorb { background:rgba(78,205,196,.2); color:var(--accent); }
.pill.complete { background:rgba(88,214,141,.18); color:var(--ok); }
.pill.storm, .pill.red { background:rgba(255,107,107,.18); color:var(--danger); }
.pill.orange { background:rgba(255,152,0,.18); color:#ffa940; }

.updated { color:var(--muted); font-size:.75rem; margin-top:1rem; }

.activity-banner { display:flex; align-items:center; gap:1rem; padding:.4rem 0; }
.activity-icon { flex-shrink:0; }
.activity-icon .icon { width:32px; height:32px; stroke-width:1.8; }
.activity-content { flex:1; min-width:0; }
.activity-title { font-size:1.15rem; font-weight:700; line-height:1.3; }
.activity-detail { font-size:.85rem; color:var(--muted); margin-top:.15rem; line-height:1.4; }
.activity-badges { display:flex; flex-wrap:wrap; gap:.5rem; flex-shrink:0; }
.activity-badge { padding:.3rem .7rem; border-radius:999px; font-size:.78rem; font-weight:600; white-space:nowrap; }
#activityCard.state-hold    { border-color:var(--warn); }
#activityCard.state-absorb  { border-color:var(--accent); }
#activityCard.state-storm   { border-color:#a855f7; }
#activityCard.state-dump    { border-color:var(--accent); }
#activityCard.state-normal  { border-color:var(--ok); }
#activityCard.state-hold   .activity-icon .icon { color:var(--warn); }
#activityCard.state-absorb .activity-icon .icon { color:var(--accent); }
#activityCard.state-storm  .activity-icon .icon { color:#a855f7; }
#activityCard.state-dump   .activity-icon .icon { color:var(--accent); }
#activityCard.state-normal .activity-icon .icon { color:var(--ok); }

.cards-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; padding:0; background:transparent; border:0; box-shadow:none; }
.cards-row .sub-card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:.9rem 1rem; box-shadow:var(--shadow); }
.cards-row .sub-card.active { border-color:var(--accent); }
.cards-row h3 { margin:0 0 .6rem; font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; font-weight:600; }
.sub-body { font-size:.88rem; color:var(--text); line-height:1.5; }
.sub-body .kv { display:flex; justify-content:space-between; padding:.18rem 0; border-bottom:1px dashed var(--border); }
.sub-body .kv:last-child { border-bottom:0; }
.sub-body .kv span { color:var(--muted); }

.actions { display:flex; flex-wrap:wrap; gap:.6rem; }
.action-result { margin-top:.7rem; color:var(--muted); font-size:.85rem; min-height:1em; }

table { width:100%; border-collapse:collapse; font-size:.85rem; }
th, td { text-align:left; padding:.55rem .5rem; border-bottom:1px solid var(--border); vertical-align:top; }
th { color:var(--muted); font-weight:500; text-transform:uppercase; font-size:.7rem; letter-spacing:.3px; }

.settings-cards { display:grid; gap:1rem; }
.settings-section { font-size:.8rem; color:var(--accent); text-transform:uppercase; letter-spacing:.4px; margin:1.2rem 0 .5rem; padding-bottom:.3rem; border-bottom:1px solid var(--border); }
.settings-section:first-child { margin-top:0; }
.settings-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:.7rem 1rem; margin-bottom:.3rem; }
.settings-grid label { display:flex; flex-direction:column; font-size:.8rem; color:var(--muted); gap:.25rem; }
.settings-grid label span { color:var(--text); font-size:.82rem; }
.settings-grid input, .settings-grid select { background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:5px; padding:.4rem .55rem; font-size:.9rem; }
.settings-grid input::placeholder { color:var(--muted); opacity:.6; }
.settings-grid input[type="checkbox"] { width:fit-content; height:1.15rem; }
.dry-windows { margin-bottom:.6rem; display:flex; flex-wrap:wrap; gap:.5rem; }
.dry-badge { background:rgba(88,214,141,.15); color:var(--ok); padding:.25rem .6rem; border-radius:999px; font-size:.82rem; font-weight:600; }
.weather-scroll { max-height:400px; overflow-y:auto; }
#weatherTable td:nth-child(2) { font-size:1.1rem; text-align:center; }
.weather-dry td { color:var(--text); }
.weather-wet td { color:var(--muted); }
.weather-wet td:nth-child(6) { color:#60a5fa; font-weight:600; }
.weather-past td { opacity:.35; }
.weather-now td { font-weight:600; background:rgba(78,205,196,.08); }

.plug-list { margin-top:1rem; }
.plug-row { display:flex; align-items:center; gap:.8rem; padding:.5rem .2rem; border-bottom:1px solid var(--border); }
.plug-row strong { flex:0 0 auto; }
.plug-row .muted { color:var(--muted); font-size:.75rem; font-family: SF Mono, Menlo, monospace; flex:1; }
.plug-row button { flex:0 0 auto; }

pre { background:var(--panel-2); border:1px solid var(--border); border-radius:6px; padding:.8rem; overflow-x:auto; font-size:.78rem; line-height:1.4; max-height:420px; overflow-y:auto; margin:0; }
.log-controls { display:flex; gap:.8rem; align-items:flex-end; margin-bottom:.6rem; }
.log-controls input, .log-controls select { background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:5px; padding:.25rem .5rem; font-size:.8rem; }

.admin-top { display:grid; grid-template-columns:1fr 1fr; gap:1rem; background:transparent; border:none; box-shadow:none; padding:0; }
.health-grid { display:grid; grid-template-columns:1fr 1fr; gap:.6rem .8rem; }
.health-item { display:flex; flex-direction:column; gap:.15rem; }
.health-item .k { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.3px; }
.health-item .v { font-size:1rem; font-weight:600; display:flex; align-items:center; gap:.4rem; }
.health-item .v.small { font-size:.85rem; font-weight:500; }
.status-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.status-dot.ok { background:var(--ok); box-shadow:0 0 4px rgba(88,214,141,.5); }
.status-dot.err { background:var(--danger); box-shadow:0 0 4px rgba(255,107,107,.5); }
.status-dot.grey { background:var(--muted); opacity:.4; }
.status-dot.warn { background:var(--warn); box-shadow:0 0 4px rgba(255,184,77,.5); }
.status-dot.storm { background:#a855f7; box-shadow:0 0 4px rgba(168,85,247,.5); }
.status-dot.active { background:var(--accent); box-shadow:0 0 4px rgba(78,205,196,.5); }
.upstreams { display:flex; gap:1.2rem; margin-top:.4rem; }
.upstream { display:flex; align-items:center; gap:.35rem; font-size:.85rem; font-weight:500; }

#jobsTable td:first-child, #jobsTable th:first-child { width:18px; padding-right:0; }
.job-dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.job-dot.ran { background:var(--ok); box-shadow:0 0 4px rgba(88,214,141,.5); }
.job-dot.idle { background:var(--muted); opacity:.4; }
.relative-time { color:var(--muted); font-size:.8rem; }

@media (max-width: 640px) {
  .status-grid { grid-template-columns:1fr; }
  .rings { grid-template-columns:repeat(2, 1fr); }
  .admin-top { grid-template-columns:1fr; }
}