:root{
  --bg:#0f1720;
  --accent:#06b6d4;
  --text:#e6eef6;
  --green:#16a34a;
  --red:#ef4444;
  --gray:#6b7280;
  --meter-bg:rgba(255,255,255,0.08);
  --meter-fill:#60a5fa;
}

html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:var(--bg);color:var(--text)}
main{max-width:720px;margin:24px auto;padding:20px;background:linear-gradient(180deg,#071021 0%, #081426 100%);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,0.6)}
h1{margin:0 0 12px;font-size:1.4rem}
h2{margin:10px 0;font-size:1.1rem}
.block{margin:16px 0;padding:12px;border-radius:8px;background:rgba(255,255,255,0.03)}
.explain{margin:6px 0 8px;line-height:1.5}
.controls{display:flex;gap:8px;align-items:center;margin:8px 0}
button{background:var(--accent);color:#022;border:none;padding:10px 14px;border-radius:8px;font-weight:600;cursor:pointer}
button[disabled]{opacity:0.45;cursor:not-allowed}
.status{margin-top:8px;padding:8px;border-radius:6px;background:rgba(255,255,255,0.04)}
.bullets{margin:8px 0 14px;padding-left:18px}
.bullets li{margin:4px 0}

.led-wrap{display:flex;justify-content:center;align-items:center;margin:16px 0}
.led{width:140px;height:140px;border-radius:50%;box-shadow:0 0 0 6px rgba(255,255,255,0.06) inset, 0 0 24px rgba(0,0,0,0.5)}
.led-text{text-align:center;font-weight:600;margin-top:6px}
.led-green{background:radial-gradient(closest-side, #22c55e, var(--green));box-shadow:0 0 0 6px rgba(255,255,255,0.08) inset, 0 0 18px rgba(34,197,94,0.55)}
.led-red{background:radial-gradient(closest-side, #f87171, var(--red));box-shadow:0 0 0 6px rgba(255,255,255,0.08) inset, 0 0 18px rgba(248,113,113,0.55)}
.led-gray{background:radial-gradient(closest-side, #9ca3af, var(--gray));box-shadow:0 0 0 6px rgba(255,255,255,0.08) inset, 0 0 18px rgba(156,163,175,0.35)}

.legend{margin-top:12px;line-height:1.6}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot-green{background:var(--green)}
.dot-red{background:var(--red)}
.dot-gray{background:var(--gray)}
footer{margin-top:18px;text-align:center;color:rgba(255,255,255,0.6);font-size:0.85rem}

/* Vúmetro */
.meter{margin-top:12px}
.meter-label{font-size:0.9rem;color:rgba(255,255,255,0.7);margin-bottom:6px}
.meter-bar{height:10px;background:var(--meter-bg);border-radius:6px;overflow:hidden}
#meter-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--meter-fill))}
.meter-leds{display:flex;gap:4px;margin-top:6px}
.mled{width:16px;height:10px;border-radius:3px;background:rgba(255,255,255,0.08)}
.mled.on{background:linear-gradient(180deg,#4cc3ff,#1d9bf0)}