:root {
  --bg: #fbf7ef;
  --card: #ffffff;
  --ink: #221d16;
  --muted: #6d6456;
  --line: #e7ddcb;
  --accent: #e39a1f;
  --accent-ink: #4a3509;
  --ok: #2f8f4e;
  --tight: #c47a12;
  --over: #c23b2e;
  --heat: #fff6e6;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(34,29,22,.06), 0 8px 24px rgba(34,29,22,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120d; --card: #201b14; --ink: #f0e9dc; --muted: #a79c89;
    --line: #342c20; --accent: #f4b43a; --accent-ink: #15120d;
    --ok: #5fcf83; --tight: #e8ad4c; --over: #ef7a6d; --heat: #2a2114;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 640px; margin: 0 auto; padding: 32px 16px 96px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.intro h1 {
  margin: 0 0 4px; font-size: 2rem; letter-spacing: -.02em;
}
.lede { margin: 0; color: var(--muted); font-size: 1.05rem; }

.panel, .out, .notes {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-top: 18px;
}

.addbar { display: flex; gap: 8px; }
.addbar select { flex: 1; min-width: 0; }

select, input[type="number"] {
  font: inherit; color: inherit; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px;
}
select:focus-visible, input:focus-visible, .btn:focus-visible, .jack:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.btn {
  font: inherit; cursor: pointer; border: 1px solid var(--line);
  background: var(--card); color: var(--ink);
  border-radius: 10px; padding: 9px 14px;
}
.btn--go { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.btn--quiet { color: var(--muted); }
.btn:hover { filter: brightness(.98); }

.items { margin: 14px 0 6px; display: flex; flex-direction: column; gap: 8px; }
.item {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.item--heat { background: var(--heat); }
.item__name { font-weight: 600; min-width: 0; }
.item__watts, .item__qty { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: .85rem; }
.item__watts input { width: 82px; }
.item__qty input { width: 54px; }
.item__rm { font: inherit; font-size: .85rem; cursor: pointer; background: none; border: 0; color: var(--over); text-decoration: underline; padding: 4px; }
.empty { color: var(--muted); margin: 10px 2px; }

.controls { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--muted); }
.field select { color: var(--ink); }
.check { display: flex; align-items: center; gap: 8px; font-size: .9rem; align-self: end; }

.actions { display: flex; gap: 8px; margin-top: 16px; }

.gauge { margin-bottom: 8px; }
.gauge__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gauge__head span { color: var(--muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.gauge__track { height: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin: 10px 0 6px; }
.gauge__fill { height: 100%; border-radius: 999px; transition: width .25s ease; }
.gauge--ok .gauge__fill { background: var(--ok); }
.gauge--tight .gauge__fill { background: var(--tight); }
.gauge--over .gauge__fill { background: var(--over); }
.gauge--ok strong { color: var(--ok); }
.gauge--tight strong { color: var(--tight); }
.gauge--over strong { color: var(--over); }
.gauge__room { margin: 2px 0 0; color: var(--muted); font-size: .9rem; }

.warns { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.warn { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: .92rem; border: 1px solid var(--line); }
.warn--danger { background: color-mix(in srgb, var(--over) 12%, var(--card)); border-color: color-mix(in srgb, var(--over) 35%, var(--line)); }
.warn--warn { background: color-mix(in srgb, var(--tight) 12%, var(--card)); border-color: color-mix(in srgb, var(--tight) 35%, var(--line)); }
.warn--info { background: var(--bg); }
.warn--ok { background: color-mix(in srgb, var(--ok) 10%, var(--card)); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); }

.notes h2 { font-size: 1.1rem; margin: 0 0 8px; }
.notes p { margin: 0 0 10px; color: var(--muted); }
.notes a { color: var(--accent-ink); }
@media (prefers-color-scheme: dark) { .notes a { color: var(--accent); } }
.fineprint { font-size: .85rem; }

.jack {
  position: fixed; right: 18px; bottom: 18px; width: 64px; height: 64px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card);
  box-shadow: var(--shadow); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.jack.is-alarm { animation: pulse 1s ease-in-out infinite; }
.jack.wiggle { animation: wiggle .6s ease; }
.jack-bubble {
  position: fixed; right: 18px; bottom: 90px; max-width: min(300px, 80vw);
  background: var(--ink); color: var(--bg); padding: 10px 13px; border-radius: 12px;
  font-size: .9rem; box-shadow: var(--shadow); opacity: 0; transform: translateY(6px);
  transition: opacity .2s, transform .2s; pointer-events: none;
}
.jack-bubble.show { opacity: 1; transform: translateY(0); }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@media (prefers-reduced-motion: reduce) { .jack.is-alarm, .jack.wiggle { animation: none; } .gauge__fill { transition: none; } }