:root{
  --bg:#0b1220;
  --card:#0e1630aa;
  --glass:#ffffff10;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --primary:#3b82f6;
  --accent:#f59e0b;
  --green:#10b981;
  --pink:#ec4899;
  --purple:#a855f7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial;
  background: radial-gradient(1200px 900px at 80% -10%, #1f2937 0%, #0b1220 45%) fixed;
  color:var(--text);
}

.glass{backdrop-filter: blur(8px); background: var(--glass); border:1px solid #ffffff12; border-radius:18px}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; margin:14px; gap:12px;
}
.brand{display:flex; gap:12px; align-items:center}
.brand h1{margin:0; font-size:1.2rem}
.brand small{color:var(--muted)}

.i{width:22px; height:22px}
.i-city-grad{width:26px; height:26px}

.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--primary); color:white; border:none; padding:10px 14px;
  border-radius:12px; cursor:pointer; font-weight:600; box-shadow: 0 6px 18px #3b82f633;
  transition:.2s transform,.2s filter, .2s background;
}
.btn:hover{transform: translateY(-1px)}
.btn.ghost{background:#1f2937; color:#dbeafe; border:1px solid #3b82f640}
.btn.outline{background:transparent; color:#93c5fd; border:1px solid #60a5fa66}
.btn.primary{background:linear-gradient(135deg,#2563eb,#3b82f6)}

.container{padding:14px; max-width:1200px; margin:0 auto}

.filters{padding:16px; margin-bottom:14px}
.badge-row{display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:12px; margin-bottom:14px}
.metric{display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:#11182799; border:1px solid #ffffff12}
.metric .label{color:#cbd5e1; font-size:.85rem}
.metric .value{font-size:1.25rem; font-weight:800}
.metric.temp{box-shadow: inset 0 0 0 1px #f59e0b44}
.metric.hum{box-shadow: inset 0 0 0 1px #3b82f644}
.metric.water{box-shadow: inset 0 0 0 1px #10b98144}
.metric.feed{box-shadow: inset 0 0 0 1px #ec489944}
.metric.time{box-shadow: inset 0 0 0 1px #a855f744}

.filter-grid{
  display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:10px; align-items:end
}
.filter-grid label{display:flex; flex-direction:column; font-size:.9rem; color:#cbd5e1; gap:6px}
.filter-grid select{
  background:#0b1220; color:var(--text); border:1px solid #ffffff22; padding:10px; border-radius:10px;
}
.filter-actions{grid-column: span 6; display:flex; gap:10px; flex-wrap:wrap}

.chart{padding:10px}
canvas{width:100%; max-height:560px}

.footer{max-width:1200px; margin:0 auto 30px; color:#9ca3af; text-align:center; padding:8px 14px}
.year::after{content: attr(data-year)}

@media (max-width: 1020px){
  .badge-row{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .badge-row{grid-template-columns:1fr}
  .filter-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .filter-actions{grid-column: span 2}
}

.chart-title{margin:6px 8px 12px;color:#cbd5e1;font-size:0.95rem;font-weight:600}


.alert{
  padding:12px; border-radius:10px; margin:10px 0;
  font-weight:600; text-align:center;
}
.alert.hidden{display:none}
.alert.ok{background:#064e3b; color:#bbf7d0; border:1px solid #059669}
.alert.warn{background:#7f1d1d; color:#fecaca; border:1px solid #dc2626}


.thresholds{
  display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:10px; margin-top:10px; align-items:end
}
.thresholds label{display:flex; flex-direction:column; font-size:.9rem; color:#cbd5e1; gap:6px}
.thresholds input, .thresholds select{
  background:#0b1220; color:#e5e7eb; border:1px solid #ffffff22; padding:10px; border-radius:10px;
}
.thresholds .th-actions{display:flex; gap:10px; align-items:center}
.btn.success{background: linear-gradient(135deg, #059669, #10b981)}
.th-error{color:#fecaca; font-size:.85rem}
@media(max-width: 920px){
  .thresholds{ grid-template-columns: repeat(2, minmax(0,1fr)) }
}


.table-wrap{overflow:auto}
.log{padding:10px; margin-top:12px}
.log-header{display:flex; align-items:center; justify-content:space-between}
.log-table{width:100%; border-collapse:collapse; font-size:.92rem}
.log-table thead th{position:sticky; top:0; background:#0b1220; color:#cbd5e1; text-align:left; padding:10px; border-bottom:1px solid #ffffff22}
.log-table tbody td{padding:8px 10px; border-bottom:1px dashed #ffffff14; color:#e5e7eb}
.badge-warn{background:#f59e0b; color:#111827; padding:3px 8px; border-radius:999px; font-weight:800; font-size:.75rem}
.badge-crit{background:#ef4444; color:#fff; padding:3px 8px; border-radius:999px; font-weight:800; font-size:.75rem}
.zoom-actions{display:flex; gap:10px}