:root {
  --bg: #0f1724;
  --card: #0b1220;
  --accent: #00b894;
  --muted: #9aa4b2;
  --card-padding: 16px;
}
* { box-sizing: border-box; font-family: Inter, Arial, sans-serif; color: #e6eef6; }
body { margin: 0; background: linear-gradient(180deg,#071024,#07142a); }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 20px; background:rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,0.03); }
.brand { display:flex; gap:12px; align-items:center; }
.logo-placeholder { width:48px; height:48px; background:#072a40; border-radius:6px; display:inline-block; }
nav a { color:var(--muted); text-decoration:none; margin-left:14px; }
.grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; padding:20px; }
.card { background:rgba(255,255,255,0.03); padding:var(--card-padding); border-radius:8px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.status-row { display:flex; gap:18px; align-items:center; }
.gauge { background: linear-gradient(180deg,#082233,#06202b); width:160px; height:140px; border-radius:8px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.gauge-value { font-size:28px; font-weight:700; color:var(--accent); }
.gauge-label { font-size:12px; color:var(--muted); }
.lamp { text-align:center; }
.lamp-indicator { padding:8px 12px; border-radius:6px; font-weight:600; margin-top:6px; }
.lamp-on { background:#063; color:#dfffe8; }
.lamp-off { background:#330; color:#fff3e6; }
.history { margin-top:12px; }
.chart { grid-column: 2 / 3; }
.controls { grid-column: 1 / 2; }
.info { grid-column: 1 / 3; }
.info-table { width:100%; border-collapse: collapse; }
.info-table th { text-align:left; color:var(--muted); padding:6px 0; width:140px; }
.muted { color:var(--muted); font-size:13px; }
.foot { padding:14px 20px; color:var(--muted); text-align:right; font-size:12px; }
/* === Input & Select Fix === */
input, select, textarea, button {
  background-color: #0b182b;
  color: #e6eef6;
  border: 1px solid #22334a;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 4px rgba(0,184,148,0.5);
}

button {
  background-color: var(--accent);
  color: #0a141e;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #00d2a3;
}