:root {
  --bar-h: 44px;
  --bg: #3a3f46; --barbg: #1b2a3a; --fg: #eef1f4; --muted: #9aa6b2; --panel: #f6f7f9; --pfg: #1c2228;
  --line: #ff2020; --btn: #2c3e52; --btnon: #3d7bd9; --border: #c9ced6;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
body.night {
  --bg: #050607; --barbg: #0d0f12; --fg: #c8a0a0; --muted: #7a6060; --panel: #121417; --pfg: #c9b4b4;
  --line: #ff3030; --btn: #1d2126; --btnon: #6b2020; --border: #2a2e33;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); overflow: hidden;
  font: 15px -apple-system, "Segoe UI", system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
button, select, input { font: inherit; }
#bar { position: fixed; left: 0; right: 0; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  min-height: calc(var(--bar-h) + var(--safe-t)); padding: var(--safe-t) calc(6px + var(--safe-r)) 0 calc(10px + var(--safe-l));
  background: var(--barbg); color: var(--fg); transition: background .1s; }
#clock { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
#get { font: bold 20px ui-monospace, Menlo, Consolas, monospace; letter-spacing: .5px; }
#get.stale { color: #888; }
#warp { font: 15px ui-monospace, Menlo, monospace; color: var(--muted); }
#state { font-weight: bold; font-size: 13px; color: #f0a040; }
#state.run { color: #6fdc7a; } #state.paused { color: #ffd84a; }
#pageinfo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
#progress { font-size: 13px; color: var(--muted); white-space: nowrap; }
#progress.done { color: #6fdc7a; font-weight: bold; }
#alert { color: #fff; border-radius: 4px; padding: 2px 8px; font-weight: bold; white-space: nowrap; max-width: 34vw;
  overflow: hidden; text-overflow: ellipsis; }
#buttons { display: flex; gap: 5px; }
.tb { min-width: 40px; height: 34px; padding: 0 9px; border: 0; border-radius: 7px; background: var(--btn); color: var(--fg);
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tb.on { background: var(--btnon); color: #fff; }
.tb:disabled { opacity: .4; }
#scroller { position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--bar-h) + var(--safe-t)); overflow: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-x pan-y; }
#content { position: relative; margin: 0 auto; }
.page { position: absolute; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); overflow: hidden;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.page img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; }
.page svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.page .plabel { position: absolute; right: 4px; top: 2px; font-size: 11px; color: #999; }
body.night .page { background: #1c1d20; }
#getline { position: absolute; height: 0; border-top: 2px solid var(--line); z-index: 5; pointer-events: none; display: none;
  box-shadow: 0 0 3px rgba(255,0,0,.6); }
#getline-tag { position: absolute; left: 0; top: -17px; font: bold 11px ui-monospace, Menlo, monospace; color: #fff;
  background: var(--line); padding: 0 4px; border-radius: 3px; }
#snapback { position: fixed; z-index: 25; right: calc(16px + var(--safe-r)); bottom: calc(20px + var(--safe-b));
  padding: 12px 18px; border: 0; border-radius: 24px; background: #d32f2f; color: #fff; font-weight: bold; font-size: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.5); }
#toast { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(80px + var(--safe-b));
  background: rgba(20,20,20,.92); color: #fff; padding: 9px 16px; border-radius: 8px; max-width: 80vw; }
/* panes */
.pane, #drawer { position: fixed; z-index: 30; background: var(--panel); color: var(--pfg); display: flex; flex-direction: column;
  box-shadow: 0 0 16px rgba(0,0,0,.5); }
.pane[hidden], #drawer[hidden] { display: none; }
.pane-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.pane-head .close { margin-left: auto; }
.pane .tb, #drawer .tb, #sheet .tb { background: #dfe3e8; color: #1c2228; }
body.night .pane .tb, body.night #drawer .tb, body.night #sheet .tb { background: #262a30; color: var(--pfg); }
#chkpane { top: calc(var(--bar-h) + var(--safe-t)); bottom: 0; right: 0; width: min(560px, 48vw); padding-right: var(--safe-r); }
@media (orientation: portrait) {
  #chkpane { left: 0; width: auto; top: 46vh; padding-left: var(--safe-l); }
  #drawer { left: 0; width: auto !important; top: 34vh; }
}
#chk-label { min-width: 70px; text-align: center; font-weight: bold; }
#chk-book { max-width: 46%; }
#chk-info { font-size: 12px; padding: 3px 8px; color: #b06000; }
#chk-info:empty { display: none; }
#chk-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; background: #888; }
#chk-img { display: block; width: 100%; background: #fff; }
#drawer { top: calc(var(--bar-h) + var(--safe-t)); bottom: 0; right: 0; width: min(440px, 92vw); padding-right: var(--safe-r); }
#drawer-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 8px 10px calc(10px + var(--safe-b)); }
.mk { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--border); cursor: pointer; }
.mk .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; }
.mk .t { flex: 1; min-width: 0; }
.mk .t div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk .ttg { font: 13px ui-monospace, Menlo, monospace; white-space: nowrap; }
.mk.past { opacity: .5; }
.muted { color: #7b8794; font-size: 13px; }
.calc h4 { margin: 14px 0 6px; }
.calc label { display: block; margin: 6px 0 2px; font-size: 13px; color: #6b7785; }
.calc input, .calc select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: #111; }
body.night .calc input, body.night .calc select, body.night #chk-book, body.night #sheet textarea, body.night .live select {
  background: #0b0c0e; color: var(--pfg); border-color: var(--border); }
.readout { font: bold 16px ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; padding: 6px 8px; margin: 4px 0;
  background: #e9eef4; border-radius: 6px; }
body.night .readout { background: #1a1d21; }
.small { font: 12px ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.warn { color: #c05000; font-size: 13px; white-space: pre-wrap; }
/* sheet (long press) */
#sheet-bg { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.35); }
#sheet { position: fixed; z-index: 41; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b));
  width: min(520px, 96vw); max-height: 80vh; overflow: auto; background: var(--panel); color: var(--pfg); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
#sheet h3 { margin: 0 0 8px; font-size: 15px; }
#sheet .row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; align-items: center; }
#sheet .col { width: 44px; height: 44px; border-radius: 22px; border: 3px solid transparent; }
#sheet .col.sel { border-color: #111; box-shadow: 0 0 0 2px #fff inset; }
body.night #sheet .col.sel { border-color: #ddd; }
#sheet textarea { width: 100%; min-height: 54px; border: 1px solid var(--border); border-radius: 8px; padding: 6px; }
#sheet .big { flex: 1; height: 44px; border: 0; border-radius: 10px; background: #dfe3e8; color: #1c2228; font-weight: 600; }
#sheet .big.primary { background: #1e88e5; color: #fff; }
#sheet .big.danger { background: #e53935; color: #fff; }
body.night #sheet .big { background: #262a30; color: var(--pfg); }
body.night #sheet .big.primary { background: #3a1818; } body.night #sheet .big.danger { background: #5a1010; }
.menu-item { display: block; width: 100%; text-align: left; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: inherit; }
.menu-item.on::after { content: " \2713"; color: #43a047; font-weight: bold; }
/* live checklist */
.live table { width: 100%; border-collapse: collapse; font-size: 13px; }
.live td { padding: 6px 4px; border-bottom: 1px solid var(--border); vertical-align: top; }
.live td.m { width: 34px; text-align: center; font-size: 16px; cursor: pointer; }
.live tr.head td { font-weight: bold; background: #dde3ea; }
body.night .live tr.head td { background: #1d2025; }
.live tr.cur td { background: #fff3c4; } .live tr.done td { color: #8a949e; background: #e8f5e9; }
body.night .live tr.cur td { background: #3a2a10; } body.night .live tr.done td { background: #10200f; color: #6a6060; }
.live .ok { color: #2e7d32; font-weight: bold; } .live .bad { color: #d32f2f; font-weight: bold; } .live .unk { color: #888; }
.live select { padding: 6px; border-radius: 6px; max-width: 100%; }
.live .status { font-size: 12px; margin: 6px 0; }
.flash { animation: fl .44s steps(1) 5; }
@keyframes fl { 50% { background: var(--fc); } }
.calc label.cb { display: flex; align-items: center; gap: 8px; color: inherit; font-size: 14px; margin: 10px 0 4px; }
.calc label.cb input { width: auto; }
@media (orientation: landscape) {
  body.pane-open #scroller { right: min(560px, 48vw); }
}
.live .row > select:nth-child(2) { flex: 1; min-width: 0; }

/* ---- standalone PWA additions */
#clock { cursor: pointer; border-radius: 7px; padding: 2px 6px; -webkit-tap-highlight-color: transparent; }
#clock.on { background: var(--btnon); }
#offline { font-size: 12px; white-space: nowrap; padding: 2px 6px; border-radius: 6px; background: var(--btn); color: var(--muted); }
#offline.okb { color: #6fdc7a; } #offline.busy { color: #ffd84a; } #offline.warnb { color: #f0a040; }
body.night .page img, body.night #chk-img { filter: invert(.89) brightness(.93) hue-rotate(180deg); }
body.night #chk-img { background: #fff; }
.clockp .row { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.clockp label { display: block; margin: 12px 0 2px; font-size: 13px; color: #6b7785; }
.clockp input { flex: 1; min-width: 0; padding: 8px; font: 18px ui-monospace, Menlo, monospace; border: 1px solid var(--border); border-radius: 6px; }
body.night .clockp input { background: #0b0c0e; color: var(--pfg); }
.clockp .tb { height: 44px; min-width: 56px; font-size: 16px; }
.clockp .tb.on, #drawer .clockp .tb.on { background: var(--btnon); color: #fff; }
.clockp .tb.wide { flex: 1; }
.readout.big { font-size: 26px; text-align: center; }
@media (max-width: 700px) { #pageinfo { display: none; } }