:root {
  --bezel: #1C1C1E; --gold: #B9A46A; --key: #2E2E31; --key-ink: #C9C9C2;
  --lcd: #B7C2A0; --ink: #1F2617; --ghost: rgba(31, 38, 23, 0.10);
}
body.lit { --lcd: #7FD8C0; }
* { box-sizing: border-box; }
html, body { margin: 0; background: #2A2A2C; }
body {
  min-height: 100vh; display: flex; justify-content: center; align-items: flex-start;
  font-family: 'VT323', monospace; font-size: 20px; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.watch { background: var(--bezel); border-radius: 28px; padding: 14px 12px 12px; width: min(100vw - 16px, 420px); margin: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.brand { display: flex; justify-content: space-between; color: var(--gold); font-size: 15px; letter-spacing: 1px; margin: 0 6px 8px; }
.lcd { background: var(--lcd); border-radius: 10px; padding: 12px 14px; min-height: 62vh; line-height: 1.15; overflow-wrap: anywhere; }
.seg { font-family: 'DSEG7 Classic', monospace; font-size: 52px; position: relative; text-align: right; margin-top: 4px; }
.seg .ghost { position: absolute; right: 0; color: var(--ghost); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rule { border-top: 2px solid var(--ink); margin: 8px 0; }
.macro { display: grid; grid-template-columns: 22px 1fr 72px; gap: 6px; align-items: center; }
.bar { display: flex; gap: 3px; }
.bar i { width: 11px; height: 12px; background: var(--ink); display: block; }
.bar i.off { background: var(--ghost); }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.key { background: var(--key); color: var(--key-ink); border: 0; border-radius: 8px; padding: 12px 0; font-family: inherit; font-size: 17px; letter-spacing: 1px; cursor: pointer; }
.key:active { transform: scale(0.97); }
.lcd button, .lcd input, .lcd select, .lcd textarea {
  font-family: inherit; font-size: 19px; color: var(--ink); background: transparent;
  border: 2px solid var(--ink); border-radius: 0; padding: 2px 6px; cursor: pointer;
}
.lcd input[type=range] { accent-color: var(--ink); border: 0; padding: 0; width: 100%; }
.lcd input[type=checkbox] { accent-color: var(--ink); width: 18px; height: 18px; }
.lcd textarea { width: 100%; min-height: 90px; resize: vertical; }
.lcd input.num { width: 64px; }
.lcd input.wide { width: 100%; }
.lcd button.on { background: var(--ink); color: var(--lcd); }
.tap { cursor: pointer; }
.small { font-size: 16px; }
.msg { background: var(--ink); color: var(--lcd); padding: 2px 6px; margin: 6px 0; }
.blink { animation: blink 0.15s steps(1) 4; }
@keyframes blink { 50% { opacity: 0; } }
.chart { position: relative; height: 170px; margin: 6px 0 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-items: center; }
.meals { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
[x-cloak] { display: none !important; }