:root {
  --body: #2b2d2f;
  --raised: #44474a;
  --deep: #1a1b1c;
  --lcd: #a8c66c;
  --lcd-ink: #1f2a10;
  --lcd-line: #3d5220;
  --glow: #c8e08a;
  --text: #e4e4e0;
  --muted: #b8b8b2;
  --orange: #e0773a;
  --key: #d4d4ce;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--body); }
body {
  color: var(--text);
  font-family: "Space Mono", ui-monospace, monospace;
  -webkit-tap-highlight-color: transparent;
  min-height: 100dvh;
}
main {
  max-width: 460px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 28px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
button { font: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.logo { font-family: "VT323", monospace; font-size: 30px; letter-spacing: 2px; color: var(--glow); }
.chip { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); background: none; border: 0; padding: 8px 0; min-height: 44px; }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: #9fd356; }
.chip.off { color: var(--lcd-ink); background: var(--lcd); border-radius: 8px; padding: 8px 12px; font-weight: 700; }

.lcd {
  background: var(--lcd);
  color: var(--lcd-ink);
  border: 6px solid var(--deep);
  border-radius: 10px;
  padding: 14px 16px;
  font-family: "VT323", monospace;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: inset 0 0 24px rgba(31, 42, 16, 0.25);
}
.lcd .row { display: flex; justify-content: space-between; gap: 12px; font-size: 28px; line-height: 1.05; }
.lcd .row.small { font-size: 21px; }
.lcd .row span { white-space: nowrap; }
.lcd .row span:last-child { text-align: right; }
.lcd .rule { border-top: 2px dashed var(--lcd-line); }
.lcd .msg { font-size: 20px; background: var(--lcd-ink); color: var(--lcd); padding: 3px 8px; align-self: flex-start; max-width: 100%; }
.lcd .msg.old { background: transparent; color: var(--lcd-ink); padding: 0 8px; opacity: 0.85; }

.label { font-size: 12px; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.group { display: flex; flex-direction: column; }

.page {
  height: 64px; border: 0; border-radius: 14px;
  background: var(--key); color: var(--deep);
  font-weight: 700; font-size: 18px;
  box-shadow: 0 5px 0 #8e8e88;
}
.key {
  min-height: 46px; border: 0; border-radius: 10px;
  background: var(--raised); color: var(--text);
  font-size: 15px; box-shadow: 0 3px 0 var(--deep);
}
.key[aria-pressed="true"] { background: var(--lcd); color: var(--lcd-ink); font-weight: 700; box-shadow: 0 3px 0 #5c7330; }
.page:active, .key:active, .big:active { transform: translateY(3px); box-shadow: none; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; background: var(--deep); padding: 4px; border-radius: 12px; }
.toggle button { min-height: 44px; border: 0; border-radius: 9px; background: transparent; color: var(--text); font-size: 15px; }
.toggle button[aria-pressed="true"] { background: var(--lcd); color: var(--lcd-ink); font-weight: 700; }

.big { min-height: 56px; border: 0; border-radius: 12px; font-size: 15px; background: var(--raised); color: var(--text); box-shadow: 0 4px 0 var(--deep); }
.big.now { background: var(--orange); color: var(--deep); font-weight: 700; box-shadow: 0 4px 0 #8a3f17; }

.panel { margin-top: 10px; display: flex; gap: 8px; align-items: stretch; }
.panel > * { flex: 1; }
.panel input[type="time"] {
  flex: 2; min-height: 46px; border-radius: 10px; border: 2px solid var(--raised);
  background: var(--deep); color: var(--glow); font: 22px "VT323", monospace; padding: 0 10px; color-scheme: dark;
}

.stats { border: 2px solid var(--raised); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.stats .head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.stats .nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-family: "VT323", monospace; color: var(--glow); }
.stats .nums div { display: flex; flex-direction: column; }
.stats .nums b { font-weight: 400; font-size: 30px; line-height: 1; }
.stats .nums span { font-size: 17px; color: var(--muted); }
.stats .who { font-size: 12px; color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.stats .empty { font-size: 13px; color: var(--muted); }

.note { font-size: 12px; color: var(--muted); line-height: 1.5; }
.warn { font-size: 13px; color: var(--deep); background: var(--orange); border-radius: 10px; padding: 10px 12px; line-height: 1.4; }

details { border-top: 1px solid var(--raised); padding-top: 10px; }
summary { font-size: 12px; letter-spacing: 1px; color: var(--muted); min-height: 44px; display: flex; align-items: center; }
details .grid2 { margin-top: 6px; }
details .key { font-size: 13px; }

.setup input[type="text"] {
  width: 100%; min-height: 54px; border-radius: 10px; border: 2px solid var(--raised);
  background: var(--deep); color: var(--glow);
  font: 30px "VT323", monospace; letter-spacing: 6px; text-transform: uppercase; padding: 0 14px;
}
.err { color: #ffb08a; font-size: 13px; min-height: 18px; }

#toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 24px);
  transform: translateX(-50%) translateY(20px); opacity: 0; transition: 0.2s;
  background: var(--lcd); color: var(--lcd-ink); font: 22px "VT323", monospace;
  padding: 8px 16px; border-radius: 8px; border: 3px solid var(--deep); pointer-events: none;
  width: max-content; max-width: calc(100vw - 40px); text-align: center; z-index: 10;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }