/* Layout: fixed left menu + scrolling work area; quiet panels, state shown as pills */
:root {
  --bg: #f3f5f4; --panel: #ffffff; --fg: #1c2624; --muted: #66736f; --line: #dde3e1;
  --accent: #0f6b66; --accent-soft: #e2f0ee; --side: #14201e; --side-fg: #b9c7c3; --side-hover: #22312e;
  --ok: #1d7a3e; --ok-bg: #e3f3e8; --warn: #9a5a00; --warn-bg: #fdf1dc; --bad: #b3261e; --bad-bg: #fbe6e4;
  --info: #24539c; --info-bg: #e5edf9; --pur: #6b3fa0; --pur-bg: #efe7f8; --gray-bg: #eef1f0; --input: #ffffff;
  --display: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f1514; --panel: #172120; --fg: #e3ebe9; --muted: #93a39f; --line: #2a3735; --accent: #4fb8ae; --accent-soft: #1a3532;
  --side: #0a0f0e; --side-fg: #9fb0ac; --side-hover: #1a2524; --ok: #6fd193; --ok-bg: #173323; --warn: #f0b562; --warn-bg: #3a2b12;
  --bad: #f2928a; --bad-bg: #3d1c1a; --info: #8db4f0; --info-bg: #1a2a44; --pur: #c4a3ef; --pur-bg: #2c2140; --gray-bg: #222d2b; --input: #101817; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0f1514; --panel: #172120; --fg: #e3ebe9; --muted: #93a39f; --line: #2a3735; --accent: #4fb8ae; --accent-soft: #1a3532;
  --side: #0a0f0e; --side-fg: #9fb0ac; --side-hover: #1a2524; --ok: #6fd193; --ok-bg: #173323; --warn: #f0b562; --warn-bg: #3a2b12;
  --bad: #f2928a; --bad-bg: #3d1c1a; --info: #8db4f0; --info-bg: #1a2a44; --pur: #c4a3ef; --pur-bg: #2c2140; --gray-bg: #222d2b; --input: #101817; color-scheme: dark }

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 14px; line-height: 1.5; margin: 0; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; line-height: 1.2; }
h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; }
.muted { color: var(--muted); } .small { font-size: 12px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html, body { min-height: 100%; }
.app { display: flex; min-height: 640px; align-items: stretch; }
.side { width: 220px; flex: none; background: var(--side); color: var(--side-fg); }
.brand { padding: 18px 18px 14px; border-bottom: 1px solid #ffffff14; }
.brand b { display: block; font-family: var(--display); color: #fff; font-size: 17px; }
.brand span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.side nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.side nav button { background: none; border: 0; color: inherit; text-align: left; padding: 9px 12px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.side nav button:hover { background: var(--side-hover); color: #fff; }
.side nav button.on { background: var(--accent); color: #fff; }
.count { font-size: 11px; background: #b3261e; color: #fff; border-radius: 999px; padding: 0 7px; font-weight: 600; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.top h1 { flex: 1; }
.menu { display: none; border: 1px solid var(--line); background: var(--panel); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.demo-tag { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--warn); background: var(--warn-bg); padding: 3px 8px; border-radius: 4px; font-weight: 600; }
.work { padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 860px) {
  .side { position: fixed; top: 0; bottom: 0; left: -240px; z-index: 30; overflow-y: auto; transition: left .2s; }
  body.nav-open .side { left: 0; }
  .menu { display: inline-block; } .work { padding: 16px; } .top { padding: 10px 16px; } .demo-tag { display: none; }
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; min-width: 0; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; text-align: left; color: inherit; }
button.tile { cursor: pointer; } button.tile:hover { border-color: var(--accent); }
.tile .l { font-size: 12px; color: var(--muted); }
.tile .v { font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; }
.tile.bad { box-shadow: inset 3px 0 0 var(--bad); } .tile.warn { box-shadow: inset 3px 0 0 var(--warn); } .tile.ok { box-shadow: inset 3px 0 0 var(--ok); } .tile.inf { box-shadow: inset 3px 0 0 var(--info); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; white-space: nowrap; }
td.r, th.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--gray-bg); }
tfoot td { font-weight: 600; }
tr.absent { background: var(--bad-bg); } tr.ama { background: var(--info-bg); }
.empty { text-align: center; color: var(--muted); padding: 22px; }
.lnk { color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; text-align: left; }
.lnk.del { color: var(--bad); }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.p-ok { background: var(--ok-bg); color: var(--ok); } .p-warn { background: var(--warn-bg); color: var(--warn); } .p-bad { background: var(--bad-bg); color: var(--bad); }
.p-info { background: var(--info-bg); color: var(--info); } .p-gray { background: var(--gray-bg); color: var(--muted); } .p-pur { background: var(--pur-bg); color: var(--pur); }
.pos { color: var(--ok); font-weight: 600; } .neg { color: var(--bad); font-weight: 600; }
.btn { border: 1px solid transparent; border-radius: 6px; padding: 7px 13px; font-weight: 600; cursor: pointer; background: var(--accent); color: #fff; white-space: nowrap; text-decoration: none; display: inline-block; }
.btn.light { background: var(--panel); color: var(--fg); border-color: var(--line); }
.btn.go { background: #1d7a3e; color: #fff; } .btn.danger { background: #b3261e; color: #fff; }
.btn.sm { padding: 3px 10px; font-size: 12px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filters > div { min-width: 140px; } .filters .grow { flex: 1; min-width: 180px; }
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.form .full { grid-column: 1 / -1; }
label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 3px; }
input, select, textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); }
input[type=checkbox] { width: auto; }
textarea { resize: vertical; }
.hit { background: var(--warn-bg) !important; }
dl.kv { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 0; } dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; }
.att { display: flex; flex-wrap: wrap; gap: 6px; }
.att button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
.att button.on { color: #fff; border-color: transparent; }
.att button.on[data-s="present"] { background: #1d7a3e; } .att button.on[data-s="absent"] { background: #b3261e; }
.att button.on[data-s="medical"] { background: #6b3fa0; } .att button.on[data-s="amavasya"] { background: #24539c; }
.steps { display: flex; flex-wrap: wrap; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 10px; }
.step { flex: 1; min-width: 110px; padding: 8px; text-align: center; font-size: 12px; font-weight: 600; background: var(--gray-bg); color: var(--muted); }
.step small { display: block; font-weight: 400; font-size: 11px; }
.step.done { background: var(--ok-bg); color: var(--ok); } .step.cur { background: var(--accent); color: #fff; }
.msg { border: 1px dashed var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--line); }
.list li:last-child { border-bottom: 0; }
.preview-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 600; }
.customer-page { padding-block: 24px; padding-inline: 16px; }
.loaders { display: flex; flex-direction: column; gap: 8px; }
.photo-btn { cursor: pointer; }
.backbtn { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 6px; padding: 5px 10px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.backbtn:hover { border-color: var(--accent); color: var(--accent); }
kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--muted); background: var(--bg); }
tr.dayrow td { background: var(--accent-soft); color: var(--fg); font-size: 13px; border-bottom-color: var(--line); }
tbody tr.dayrow:hover { background: var(--accent-soft); }
.help { background: var(--info-bg); color: var(--info); border-radius: 6px; padding: 8px 12px; font-size: 13px; margin-bottom: 8px; }
.est-items input { min-width: 90px; }
/* ---- printed estimate slip: one full portrait page, A4 (210 × 297 mm) or US Letter (216 × 279 mm). Paper is always white. */
.slip-wrap { overflow-x: auto; padding-bottom: 4px; }
.slip { position: relative; background: #fff; color: #111; width: 100%; max-width: 880px; min-width: 660px; margin: 0 auto; aspect-ratio: 210 / 148; padding: 20px 24px;
  border: 1px solid #bbb; border-radius: 4px; font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.slip table { border-collapse: collapse; width: 100%; }
.slip-shri { text-align: center; font-family: "Noto Sans Devanagari", Mangal, "Nirmala UI", serif; font-weight: 700; font-size: 14px; line-height: 1; margin: -8px 0 6px; color: #b3261e; }
.slip-copy { position: absolute; top: 6px; right: 14px; font-size: 10px; letter-spacing: .12em; font-weight: 700; color: #555; }
.slip-head td { padding: 2px 6px; font-weight: 700; font-size: 13px; }
.slip-head .lab { width: 92px; } .slip-head .val { border-bottom: 1px solid #444; } .slip-head .r { text-align: right; width: 70px; }
.slip-title { text-align: center; font-weight: 800; font-size: 21px; margin: 6px 0 4px; }
.slip-items th, .slip-items td { border: 1px solid #444; padding: 2px 6px; font-size: 12px; height: 21px; font-weight: 700; text-transform: uppercase; }
.slip-items th { font-size: 12.5px; }
.slip-items .c { text-align: center; } .slip-items .amt { text-align: right; background: #d9d9d9; }
.slip-items tfoot td[colspan] { border: 0; }
.slip-items .gt-l { text-align: right; font-weight: 800; border: 0; } .slip-items .gt { text-align: right; font-weight: 800; font-size: 14px; }
.slip-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 20px; font-size: 11.5px; font-weight: 600; margin-top: 8px; }
.slip-foot { font-size: 12.5px; margin-top: 5px; } .slip-foot b { margin-right: 6px; }
.slip.colour { border-color: #0b3d91; }
.slip.colour .slip-items th { background: #0b3d91; color: #fff; border-color: #0b3d91; }
.slip.colour .slip-items td { border-color: #7d97c8; } .slip.colour .slip-items tfoot td[colspan], .slip.colour .slip-items .gt-l { border: 0; }
.slip.colour .slip-items .amt { background: #dce6f8; } .slip.colour .slip-items .gt { background: #0b3d91; color: #fff; border-color: #0b3d91; }
.slip.colour .slip-title, .slip.colour .slip-head .lab, .slip.colour .gt-l, .slip.colour .slip-copy, .slip.colour .slip-foot b { color: #0b3d91; }
.slip.colour .slip-head .val { border-color: #0b3d91; }
/* full page: drawn at its real size on screen (96 px per inch) and shrunk to fit by app.js; notes sit at the bottom like the paper slip */
.slip.paper-a4, .slip.paper-a5 { max-width: none; min-width: 0; margin: 0; aspect-ratio: auto; padding: 38px 44px; display: flex; flex-direction: column; overflow: hidden; transform-origin: top left; }
.slip.paper-a4 { width: 794px; height: 1123px; } .slip.paper-a5 { width: 559px; height: 794px; padding: 26px 26px; }
/* half A4: everything a little smaller so the same slip fits on 148 × 210 mm */
.slip.paper-a5 .slip-copy { font-size: 8px; top: 8px; right: 12px; } .slip.paper-a5 .slip-shri { font-size: 11px; margin: -10px 0 4px; }
.slip.paper-a5 .slip-head td { font-size: 10px; padding: 1px 4px; } .slip.paper-a5 .slip-head .lab { width: 64px; } .slip.paper-a5 .slip-head .r { width: 46px; }
.slip.paper-a5 .slip-title { font-size: 16px; margin: 4px 0 3px; }
.slip.paper-a5 .slip-items th, .slip.paper-a5 .slip-items td { font-size: 8.5px; height: 17px; padding: 1px 3px; } .slip.paper-a5 .slip-items th { font-size: 8.5px; }
.slip.paper-a5 .slip-items .gt { font-size: 10px; } .slip.paper-a5 .slip-notes { font-size: 8.5px; gap: 1px 12px; } .slip.paper-a5 .slip-foot { font-size: 9px; margin-top: 3px; }
.slip.paper-a4 .slip-notes, .slip.paper-a5 .slip-notes { margin-top: auto; padding-top: 10px; }
.paper-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.paper-pick .btn { width: 100%; white-space: normal; text-align: left; line-height: 1.3; }
.paper-pick .btn span { display: block; font-weight: 400; font-size: 12px; opacity: .85; }
.photos .ph { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lb { position: fixed; inset: 0; z-index: 60; background: rgba(5, 10, 9, .85); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lb-box { background: var(--panel); border-radius: 10px; width: 100%; max-width: 980px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.lb-head, .lb-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; }
.lb-head span { flex: 1; color: var(--muted); font-size: 13px; }
.lb-box > img { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #0b0f0e; }
.lb-foot { justify-content: space-between; }
.lb-thumbs { display: flex; gap: 6px; overflow-x: auto; flex: 1; justify-content: center; min-width: 0; }
.lb-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 6px; background: none; cursor: pointer; flex: none; }
.lb-thumbs button.on { border-color: var(--accent); }
.lb-thumbs img { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: 4px; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photos figure { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--gray-bg); }
.photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; max-width: 100%; }
.photos figcaption { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; padding: 6px 8px; font-size: 11px; color: var(--muted); }
.camera { background: #101817; border-radius: 10px; min-height: 220px; display: grid; place-items: center; text-align: center; color: #cfd8d6; margin: 8px 0; }
.scan { font-size: 14px; }
.face-ok { color: #6fd193; font-family: var(--display); font-size: 26px; } .face-bad { color: #f2928a; font-family: var(--display); font-size: 22px; }
.face-ok span, .face-bad span { font-family: var(--body); font-size: 14px; color: #cfd8d6; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 3px 6px 3px 12px; font-weight: 600; font-size: 13px; }
.chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 14px; }
.section { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.bigbtns { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bigbtn { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; min-height: 84px; }
.bigbtn b { font-family: var(--display); font-size: 17px; color: var(--accent); }
.bigbtn span { font-size: 12px; color: var(--muted); }
.bigbtn:hover { border-color: var(--accent); background: var(--accent-soft); }
.todo li { font-size: 15px; }
.note { background: var(--info-bg); color: var(--info); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.warnnote { background: var(--warn-bg); color: var(--warn); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.oknote { background: var(--ok-bg); color: var(--ok); border-radius: 6px; padding: 8px 12px; font-size: 13px; }
.confirm { background: var(--bad-bg); color: var(--bad); border-radius: 6px; padding: 6px 10px; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ocr-slip { font-family: var(--mono); font-size: 12px; background: var(--gray-bg); border-radius: 6px; padding: 10px; white-space: pre; overflow-x: auto; }
.bar { height: 6px; background: var(--gray-bg); border-radius: 999px; overflow: hidden; } .bar div { height: 100%; background: var(--accent); width: 0; transition: width .15s; }
.track { max-width: 520px; margin: 0 auto; }
.tsteps { list-style: none; margin: 14px 0; padding: 0 0 0 16px; border-left: 3px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.tsteps li { position: relative; color: var(--muted); display: flex; flex-direction: column; }
.tsteps li::before { content: ""; position: absolute; left: -25px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--line); }
.tsteps li.done, .tsteps li.cur { color: var(--fg); } .tsteps li.done::before { background: var(--ok); } .tsteps li.cur::before { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.toast { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: 420px; background: var(--side); color: #fff; padding: 10px 16px; border-radius: 6px; font-weight: 600; z-index: 50; }
.login { display: flex; justify-content: center; padding-block: 48px; padding-inline: 16px; }
.login .panel { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; padding: 24px; }
details > summary { cursor: pointer; font-weight: 600; }
/* ---- easy to use: bigger text and touch targets, pictures on every menu item, phone bottom bar */
body { font-size: 15px; }
.btn { padding: 10px 16px; min-height: 42px; font-size: 15px; border-radius: 8px; }
.btn.sm { padding: 6px 12px; min-height: 34px; font-size: 13px; }
input, select, textarea { padding: 10px 12px; min-height: 44px; font-size: 16px; border-radius: 8px; }
textarea { min-height: 0; }
input[type=radio], input[type=checkbox] { min-height: 0; width: 22px; height: 22px; accent-color: var(--accent); }
label { font-size: 13px; }
.lnk { min-height: 32px; }
.side { width: 240px; }
.side nav button { padding: 11px 12px; font-size: 15px; }
.nm { display: flex; align-items: center; gap: 10px; }
.ico { width: 24px; text-align: center; font-size: 18px; flex: none; }
.bigbtn .bi { font-size: 32px; line-height: 1; margin-bottom: 4px; }
.bigbtn b { font-size: 18px; }
.step { font-size: 13px; padding: 10px 6px; }
form[data-form="next"] button[type=submit], form[data-form="loadmore"] button[type=submit], form[data-form="est"] button[type=submit], form[data-form="estpay"] button[type=submit] { font-size: 17px; padding: 13px 26px; }
.bottombar { display: none; }
@media (max-width: 860px) {
  .bottombar { display: grid; grid-template-columns: repeat(var(--n), 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 10px rgba(0,0,0,.06); }
  .bottombar button { position: relative; background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 600; min-height: 62px; padding: 6px 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; }
  .bottombar button.on { color: var(--accent); background: var(--accent-soft); }
  .bottombar .bi { font-size: 24px; line-height: 1.1; }
  .bottombar .count { position: absolute; top: 4px; right: 18%; }
  .work { padding: 14px 12px 100px; gap: 14px; }
  .top { padding: 8px 12px; gap: 8px; }
  .top h1 { font-size: 18px; }
  .menu { font-weight: 600; padding: 8px 12px; border-radius: 8px; }
  .backbtn { padding: 8px 12px; border-radius: 8px; } .backbtn kbd { display: none; }
  .toast { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); max-width: none; }
  .bigbtns { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bigbtn { min-height: 120px; align-items: center; justify-content: center; text-align: center; padding: 12px 8px; }
  .bigbtn b { font-size: 16px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile .v { font-size: 19px; }
  .panel { padding: 14px 12px; border-radius: 10px; }
  .form { grid-template-columns: 1fr; }
  .step { min-width: 33%; }
  .todo li { font-size: 15px; } .todo li .btn { width: 100%; }
  form[data-form="next"] button[type=submit], form[data-form="loadmore"] button[type=submit], form[data-form="est"] button[type=submit], form[data-form="estpay"] button[type=submit] { width: 100%; }
  .tbl { margin: 0 -12px; padding: 0 12px; }
  .tbl::after { content: "← slide table to see more →"; display: block; text-align: center; font-size: 11px; color: var(--muted); padding-top: 4px; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 25; }
  dl.kv { grid-template-columns: 110px 1fr; }
}
/* ---- quick search (owner): see-through panel over the page, Alt + Space or the 🔍 button */
.pal { position: fixed; inset: 0; z-index: 70; background: rgba(8, 14, 13, .35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 8vh 16px 16px; }
.pal-box { width: 100%; max-width: 560px; max-height: 80vh; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: color-mix(in srgb, var(--panel) 78%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.pal-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 20px; }
.pal-top input { border: 0; background: transparent; font-size: 18px; min-height: 40px; padding: 4px 0; }
.pal-top input:focus-visible { outline: none; }
.pal-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.pal-list .grp { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding: 8px 10px 4px; }
.pal-list button { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: 0; border-radius: 8px; padding: 10px; cursor: pointer; font-size: 15px; min-height: 46px; }
.pal-list button .ico { font-size: 20px; }
.pal-list button small { margin-left: auto; color: var(--muted); font-size: 12px; text-align: right; }
.pal-list button.sel, .pal-list button:hover { background: var(--accent); color: #fff; } .pal-list button.sel small, .pal-list button:hover small { color: #e2f0ee; }
.pal-hint { font-size: 11px; color: var(--muted); padding: 8px 14px; border-top: 1px solid var(--line); }
.palbtn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
@media (max-width: 860px) { .pal { padding: 10px; } .pal-box { max-height: calc(100vh - 20px); } .pal-hint { display: none; } .palbtn kbd { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ================================================================== real website additions */
[hidden] { display: none !important; }
a { color: var(--accent); }
.side nav a, .side nav form button { background: none; border: 0; color: inherit; text-align: left; padding: 11px 12px; border-radius: 6px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; width: 100%; }
.side nav a:hover, .side nav form button:hover { background: var(--side-hover); color: #fff; }
.side nav a.on { background: var(--accent); color: #fff; }
.side nav form { margin: 0; }
a.tile, a.bigbtn { color: inherit; text-decoration: none; } a.tile:hover { border-color: var(--accent); }
.btn { text-align: center; }
.btn.big { font-size: 17px; padding: 13px 26px; min-height: 50px; }
.btn.go, a.btn.go { color: #fff; }
a.btn { color: #fff; } a.btn.light { color: var(--fg); }
.inline { display: inline; margin: 0; }
form.inline { display: inline-flex; align-items: center; }
.nowrap { flex-wrap: nowrap !important; }
.narrow { max-width: 860px; width: 100%; }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles.three .v { font-size: 18px; }
.toast.bad { background: var(--bad); } .toast.ok { background: var(--side); }
.badnote { background: var(--bad-bg); color: var(--bad); border-radius: 6px; padding: 8px 12px; font-size: 14px; font-weight: 600; }
.upper { text-transform: uppercase; }
.num-in { max-width: 120px; text-align: right; }
.inline-label { display: inline; margin: 0; }
tr.grand td { font-size: 17px; }
.filter-go { align-self: flex-end; }
.check { display: flex; align-items: center; gap: 10px; color: var(--fg); font-size: 15px; font-weight: 500; }
.howto { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.inline-details { display: inline-block; } .inline-details > summary { list-style: none; } .inline-details > summary::-webkit-details-marker { display: none; }
.loaders { display: flex; flex-direction: column; gap: 8px; } .slot select { max-width: 280px; } .slot-l { min-width: 64px; }
.loadtbl input { min-width: 80px; }
.est-items input, .est-items select { min-width: 80px; } .est-items td { vertical-align: top; } .est-items .unit { min-width: 76px; }
.lastprice:empty { display: none; }
/* yes / no choice as big buttons */
.choice { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-btn { margin: 0; cursor: pointer; }
.choice-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-btn span { display: inline-block; border: 2px solid var(--line); border-radius: 10px; padding: 10px 16px; font-size: 15px; font-weight: 600; color: var(--fg); background: var(--panel); }
.choice-btn input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.choice-btn input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* attendance status buttons (radio buttons, work without JavaScript) */
.att label { margin: 0; cursor: pointer; }
.att input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.att span { display: inline-block; border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 8px 14px; font-size: 14px; color: var(--fg); font-weight: 500; }
.att input:checked + span { color: #fff; border-color: transparent; }
.att .att-present input:checked + span { background: #1d7a3e; } .att .att-absent input:checked + span { background: #b3261e; }
.att .att-medical input:checked + span { background: #6b3fa0; } .att .att-amavasya input:checked + span { background: #24539c; }
.att .att-holiday input:checked + span { background: #9a5a00; }
.att input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* payment lines */
.payline { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.payline .pl-a { flex: 1 1 110px; min-width: 0; } .payline .pl-m { flex: 0 1 150px; min-width: 0; } .payline .pl-w { flex: 1 1 170px; min-width: 0; } .payline .pl-n { flex: 1 1 130px; min-width: 0; }
.payline [data-rmpay] { padding-bottom: 12px; }
/* camera */
.camera { position: relative; overflow: hidden; }
.camera video { width: 100%; max-height: 420px; object-fit: cover; display: block; border-radius: 10px; transform: scaleX(-1); }
.cam-msg { position: absolute; left: 8px; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; border-radius: 8px; padding: 10px; font-size: 16px; font-weight: 600; text-align: center; }
.cam-msg.ok { background: rgba(29,122,62,.92); font-size: 20px; } .cam-msg.bad { background: rgba(179,38,30,.9); }
/* photo viewer */
.lb[hidden] { display: none !important; }
@media (max-width: 860px) {
  .tiles.three { grid-template-columns: 1fr 1fr 1fr; } .tiles.three .v { font-size: 15px; }
  .btn.big { width: 100%; }
  .payline { border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
  .payline .pl-a, .payline .pl-m { flex: 1 1 45%; } .payline .pl-w, .payline .pl-n { flex: 1 1 100%; }
  .filters .filter-go { width: 100%; } .filters .filter-go .btn { width: 100%; }
  .bottombar a { position: relative; color: var(--muted); font-size: 12px; font-weight: 600; min-height: 62px; padding: 6px 2px; text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
  .bottombar a.on { color: var(--accent); background: var(--accent-soft); }
  .choice-btn { flex: 1 1 100%; } .choice-btn span { display: block; text-align: center; }
}
/* ================================================================== printing */
.print-page { background: #e9ecec; }
.print-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; background: var(--panel); border-bottom: 1px solid var(--line); }
.slip-page { padding: 16px; overflow: hidden; position: relative; }
.slip.bw { filter: grayscale(1); }
@media print {
  body, .print-page { background: #fff !important; }
  .side, .top, .bottombar, .noprint, .filters, .toast, .pal, .lb, .print-bar, .backbtn, .tbl::after { display: none !important; }
  .app { display: block; } .work { padding: 0; } .panel { border: 0; padding: 0; break-inside: auto; }
  .tbl { overflow: visible; margin: 0; padding: 0; } table { font-size: 11px; } th, td { padding: 4px 6px; }
  .slip-page { padding: 0; overflow: visible; break-after: page; } .slip-page:last-child { break-after: auto; }
  .slip-page { height: auto !important; }
  .slip { box-shadow: none; min-width: 0; max-width: none; width: 100% !important; aspect-ratio: auto; border: 0; padding: 9mm 10mm; transform: none !important; left: 0 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* estimate rows: add above / below, move, delete (computer: buttons; phone: ⋮ menu) */
.est-items td.rowact { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.ra-btns { display: grid; grid-template-columns: repeat(3, 26px); gap: 3px; }
.ra-btns .ra { background: none; border: 1px solid var(--line, rgba(127,127,127,.35)); color: inherit; border-radius: 6px; padding: 0; height: 24px; font-size: 12px; line-height: 1; cursor: pointer; width: 26px; }
.ra-btns .ra:hover:not(:disabled) { background: rgba(127,127,127,.15); }
.ra-btns .ra:disabled { opacity: .3; cursor: default; }
.ra-btns .ra.del { color: var(--bad); border-color: transparent; font-size: 15px; }
.ra-more { display: none; background: none; border: 1px solid var(--line, rgba(127,127,127,.35)); color: inherit; border-radius: 6px; font-size: 18px; line-height: 1; padding: 4px 7px; margin-left: 4px; cursor: pointer; }
.est-items td.snocell { white-space: nowrap; }
.est-items tr.ra-on td { background: rgba(127,127,127,.14); }
.rowsheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--panel, #1c2523); border-top: 1px solid var(--line, rgba(127,127,127,.35)); box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
.rowsheet .rs-in { max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rowsheet .rs-in b { grid-column: 1 / -1; font-size: 15px; padding: 2px 2px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowsheet button { background: rgba(127,127,127,.15); border: 0; color: inherit; border-radius: 8px; padding: 12px 10px; font-size: 15px; text-align: left; cursor: pointer; }
.rowsheet button:disabled { opacity: .35; }
.rowsheet button.del { color: var(--bad); }
.rowsheet button.light { text-align: center; }
@media (max-width: 760px) { .ra-btns { display: none; } .ra-more { display: inline-block; } .est-items td.rowact { padding: 0; } }

@media (min-width: 761px) { .est-items [data-f="qty"] { min-width: 64px; } .est-items th, .est-items td { padding-left: 6px; padding-right: 6px; } }