:root {
  --bg: #0f1115;
  --card: #1a1d24;
  --fg: #e8eaed;
  --muted: #9aa0a6;
  --accent: #4f8cff;
  --error: #ff6b6b;
  --ok: #4caf50;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, sans-serif;
}
#app { max-width: 560px; margin: 0 auto; padding: 16px; }
.card { background: var(--card); border-radius: 12px; padding: 20px; margin-top: 16px; }
h1 { font-size: 1.4rem; margin: 0 0 12px; }
p { margin: 8px 0; }
label { display: block; margin: 12px 0; color: var(--muted); }
input, textarea {
  width: 100%; margin-top: 4px; padding: 10px; border-radius: 8px;
  border: 1px solid #2a2e37; background: #11141a; color: var(--fg); font: inherit;
}
button {
  padding: 12px 18px; border: 0; border-radius: 8px; background: var(--accent);
  color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.ghost { background: transparent; border: 1px solid #2a2e37; color: var(--fg); }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.progress { color: var(--muted); font-size: 0.85rem; }
.status { color: var(--muted); min-height: 1.4em; }
.error { color: var(--error); }
code { background: #11141a; padding: 4px 8px; border-radius: 6px; word-break: break-all; }
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
td { padding: 6px 4px; border-bottom: 1px solid #2a2e37; }
td:last-child { text-align: right; color: var(--muted); }
ul { padding-left: 18px; }

/* --- visual target-state panel --- */
.remote { background: #11141a; border: 1px solid #2a2e37; border-radius: 14px; padding: 18px; text-align: center; margin: 4px 0 14px; }
.remote.off { opacity: 0.62; }
.remote-free .free-label { font-size: 1.3rem; font-weight: 700; margin-top: 6px; }
.mode { font-size: 0.8rem; letter-spacing: 0.07em; color: var(--accent); text-transform: uppercase; font-weight: 700; }
.mode.warm { color: #ff8a5c; }
.mode.neutral { color: var(--muted); }
.mode.hi, .chip.hi, .temp.hi { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.temp { font-size: 3.2rem; font-weight: 800; line-height: 1; margin: 6px 0; }
.temp span { font-size: 1.2rem; vertical-align: super; color: var(--muted); }
.temp.na { font-size: 1.1rem; font-weight: 600; color: #6a7079; padding: 16px 0; }
.pow { font-size: 2.6rem; margin: 8px 0; }
.chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.chip { background: #1a1d24; border: 1px solid #2a2e37; border-radius: 20px; padding: 5px 12px; font-size: 0.8rem; color: #cfd3d8; }
.instr { color: #cfd3d8; }
.aim { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--muted); font-size: 0.85rem; margin: 8px 0; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); animation: pulse 1.4s infinite; }
.pulse-lg { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); margin: 4px auto 8px; animation: pulse 1.3s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(79,140,255,.55); } 70% { box-shadow: 0 0 0 12px rgba(79,140,255,0); } 100% { box-shadow: 0 0 0 0 rgba(79,140,255,0); } }

/* --- capture feedback --- */
.feedback { border-radius: 12px; padding: 14px; text-align: center; margin: 12px 0; }
.feedback:empty { display: none; }
.fb-wait { background: rgba(79,140,255,.08); border: 1px solid rgba(79,140,255,.3); }
.fb-ok { background: rgba(76,175,80,.10); border: 1px solid rgba(76,175,80,.4); }
.fb-warn { background: rgba(255,170,60,.10); border: 1px solid rgba(255,170,60,.5); }
.big { font-size: 1rem; font-weight: 600; }
.ok-check { font-size: 1.8rem; color: var(--ok); }
.warn-i { font-size: 1.6rem; color: #ffaa3c; }
.count { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }

/* --- waveform sparkline --- */
svg.wave { display: block; margin: 8px auto 2px; width: 100%; max-width: 220px; height: 34px; }
svg.wave rect { fill: var(--ok); opacity: 0.85; }

/* --- review screen --- */
.meta { color: var(--muted); font-size: 0.85rem; }
.review-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #20242c; }
.review-row .ic { width: 18px; text-align: center; }
.review-row.st-ok .ic { color: var(--ok); }
.review-row.st-warn .ic { color: #ffaa3c; }
.review-row.st-skip .ic, .review-row.st-missing .ic { color: #6a7079; }
.review-row .rl { flex: 1; }
.review-row svg.wave, .extras-list svg.wave { width: 80px; height: 18px; margin: 0; }
.review-row .n { color: var(--muted); font-size: 0.75rem; width: 56px; text-align: right; }
.wave-skip { width: 80px; }
.summary { background: #11141a; border: 1px solid #2a2e37; border-radius: 10px; padding: 10px 12px; margin: 12px 0; font-size: 0.85rem; color: #cfd3d8; }
.extras-list .row-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #20242c; }
.extras-list .row-item span:first-child { flex: 1; }
.extras-list .row-item .n { color: var(--muted); font-size: 0.75rem; }