:root {
  --bg: #0b0f14;
  --panel: #121821;
  --text: #e6eef7;
  --muted: #96a3b5;
  --green: #2ecc71;
  --yellow: #f1c40f;
  --red: #e74c3c;
  --gray: #586279;
  --accent: #5ea2ff;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif; }

header { padding: 28px 20px 8px; text-align:center; }
h1 { margin:0 0 4px; font-weight:700; letter-spacing:.5px; }
.sub { margin:0; color:var(--muted); }

main { max-width: 860px; margin: 14px auto 40px; padding: 0 12px; display:grid; gap:16px; }
.panel { background:var(--panel); border:1px solid #1e2633; border-radius:14px; padding:16px; }
.tips h2 { margin:0 0 8px; }
.tips ul { margin:0; padding-left:18px; color:var(--muted); }

.status-row { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
button { background:var(--accent); border:none; color:#00122a; padding:10px 14px; border-radius:10px; font-weight:700; cursor:pointer; }
button:hover { filter: brightness(1.05); }
.tag { color:var(--muted); }

.meter { display:flex; justify-content:center; padding:18px 0 6px; }
.dot { width:64px; height:64px; border-radius:50%; border:3px solid #101521; box-shadow: 0 0 0 6px #0e141f inset; }
.dot-green { background:var(--green); }
.dot-yellow { background:var(--yellow); }
.dot-red { background:var(--red); }
.dot-gray { background:var(--gray); }

.readouts { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; text-align:center; }
.readouts span { font-weight:700; }

.advanced summary { cursor:pointer; color:var(--muted); }
.grid { margin-top:10px; display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
label { display:grid; gap:6px; color:var(--muted); }
input[type="number"] { background:#0c121c; color:var(--text); border:1px solid #1d2635; border-radius:8px; padding:8px; }

.hint { color:var(--muted); margin:10px 0 0; }
.c-red{ color:var(--red); font-weight:700; }
.c-yellow{ color:var(--yellow); font-weight:700; }
.c-green{ color:var(--green); font-weight:700; }

footer { text-align:center; color:var(--gray); padding: 6px 0 28px; }