:root {
  --bg: #f4f6f7; --card: #fff; --ink: #1c2530; --muted: #64707d; --line: #dde3e8;
  --brand: #0f766e; --brand-dark: #0b5953; --brand-soft: #e3f4f2;
  --red: #b42318; --red-soft: #fdecea; --amber: #b54708; --amber-soft: #fff4e0;
  --blue: #1d4ed8; --blue-soft: #e8efff; --green: #067647; --green-soft: #e3f6ec; --violet: #5b3fc4; --violet-soft: #efeafd;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink); background: var(--bg); }
a { color: var(--brand-dark); }
h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h3 { font-size: .95rem; margin: 0 0 .4rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.loading, .empty { color: var(--muted); padding: 1.5rem; text-align: center; }
.hidden { display: none !important; }

/* top bar */
.topbar { background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 20; }
.topbar-in { max-width: 1280px; margin: 0 auto; padding: .55rem 1rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: .2px; color: #fff; text-decoration: none; white-space: nowrap; }
.brand small { display: block; font-weight: 400; opacity: .8; font-size: .7rem; }
.nav { display: flex; gap: .25rem; overflow-x: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.nav a { color: #e8f6f4; text-decoration: none; padding: .4rem .7rem; border-radius: 7px; white-space: nowrap; }
.nav a.active, .nav a:hover { background: rgba(255,255,255,.18); color: #fff; }
.who { display: flex; align-items: center; gap: .6rem; font-size: .85rem; white-space: nowrap; }
.who a, .who button { color: #fff; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }

main { max-width: 1280px; margin: 0 auto; padding: 1rem; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; }

/* buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem .95rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 40px; }
.btn:hover { background: #f1f5f7; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.danger { color: var(--red); border-color: #f1b8b3; }
.btn.small { padding: .3rem .6rem; min-height: 32px; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .2rem; }
input, select, textarea { width: 100%; padding: .55rem .65rem; border: 1px solid #c3ccd3; border-radius: 8px; font: inherit; background: #fff; color: var(--ink); min-height: 40px; }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus, .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
input[type=file] { padding: .4rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; }
.form-grid .wide { grid-column: 1 / -1; }
.form-actions { margin-top: .9rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.hint { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.form-error { color: var(--red); font-weight: 600; }

/* badges */
.badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: #eef1f3; color: #44505c; text-decoration: none; }
a.badge:hover { filter: brightness(.95); }
.s-pending { background: var(--amber-soft); color: var(--amber); }
.s-uploaded, .s-ready { background: var(--blue-soft); color: var(--blue); }
.s-review { background: #ffe9d6; color: #b2420a; }
.s-progress { background: var(--violet-soft); color: var(--violet); }
.s-disc { background: var(--red-soft); color: var(--red); }
.s-done { background: var(--green-soft); color: var(--green); }

/* stat cards */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat { display: block; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; text-decoration: none; color: inherit; }
.stat:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.stat b { display: block; font-size: 1.9rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .85rem; }
.stat.warn { border-left-color: #f59e0b; } .stat.bad { border-left-color: #dc2626; } .stat.info { border-left-color: #3b82f6; } .stat.good { border-left-color: #16a34a; } .stat.violet { border-left-color: #7c3aed; }
.stat.zero b { color: var(--muted); }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chips a { text-decoration: none; }
.cols { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* tables */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: .55rem .75rem; background: #f8fafb; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: .6rem .75rem; border-bottom: 1px solid #edf0f2; vertical-align: top; }
.table tr.click { cursor: pointer; }
.table tr.click:hover td { background: #f3faf9; }
.table .num { text-align: right; white-space: nowrap; }
.table-wrap { overflow-x: auto; }
.disc-link { display: inline-block; margin: 0 .2rem .2rem 0; }

/* record page */
.details { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1.2rem; }
.details dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.details dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--line); margin-bottom: 1rem; overflow-x: auto; }
.tabs a { padding: .6rem 1rem; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.tabs a.active { color: var(--brand-dark); border-bottom-color: var(--brand); }
.notice { border-radius: 8px; padding: .65rem .85rem; margin-bottom: .75rem; border: 1px solid; }
.notice.warn { background: var(--amber-soft); border-color: #f5cf95; color: #7a3300; }
.notice.bad { background: var(--red-soft); border-color: #f1b8b3; color: #7a1d14; }
.notice.info { background: var(--blue-soft); border-color: #bcd0ff; color: #1b3a99; }
.notice.good { background: var(--green-soft); border-color: #a6dfc0; color: #05603a; }
.notice ul { margin: .3rem 0 0 1.1rem; padding: 0; }
.check-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.pdf-pane { display: none; }
.pdf-note { font-size: .82rem; color: var(--muted); margin: 0 0 .4rem; }
.pdf-frame { width: 100%; height: calc(100vh - 170px); min-height: 480px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
@media (min-width: 1100px) {
  .check-layout.with-pdf { grid-template-columns: minmax(380px, 5fr) minmax(480px, 6fr); align-items: start; }
  .pdf-pane { display: block; position: sticky; top: 70px; }
}

.item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; overflow: hidden; }
.item.review { border-color: #f5a25d; }
.item.is-discrepancy { border-color: #f1a49c; }
.item.is-matched { border-color: #9ad8b6; }
.item-head { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; padding: .6rem .85rem; background: #f8fafb; border-bottom: 1px solid var(--line); }
.item-head .title { font-weight: 700; flex: 1; min-width: 160px; overflow-wrap: anywhere; }
.item-head .ln { color: var(--muted); font-weight: 600; }
.item-body { padding: .6rem .85rem .85rem; }
.cmp { display: grid; grid-template-columns: 8.5rem 1fr 1fr; gap: .35rem .75rem; align-items: center; }
.cmp .hd { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.cmp .lbl { font-weight: 600; font-size: .88rem; }
.cmp .inv { padding: .4rem .6rem; background: #f3f5f7; border-radius: 7px; min-height: 40px; display: flex; align-items: center; overflow-wrap: anywhere; }
.cmp .phys { min-height: 40px; display: flex; align-items: center; }
.cmp .phys.diff-text { font-weight: 700; color: var(--red); }
.cmp input.diff { border-color: #dc2626; background: var(--red-soft); }
.cmp input.ok { border-color: #16a34a; background: var(--green-soft); }
.cmp .row-diff .inv { background: #fde7e4; }
.item-notes { margin-top: .6rem; display: grid; grid-template-columns: 1fr 14rem; gap: .6rem; }
.item-actions { margin-top: .7rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
details.edit { margin-top: .6rem; border-top: 1px dashed var(--line); padding-top: .5rem; }
details.edit summary { cursor: pointer; font-weight: 600; color: var(--brand-dark); }
.pdf-read { font-size: .78rem; color: var(--muted); }
.progress-bar { display: flex; align-items: center; gap: .6rem; }
.progress-bar progress { flex: 1; height: 14px; }
.sticky-actions { position: sticky; bottom: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem 1rem; display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; box-shadow: 0 -4px 12px rgba(0,0,0,.06); }
.sticky-actions .progress-bar { flex: 1; min-width: 180px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: .6rem 0 .6rem 1rem; border-left: 3px solid var(--line); margin-left: .3rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .95rem; width: 11px; height: 11px; border-radius: 50%; background: var(--brand); }
.timeline .when { font-size: .78rem; color: var(--muted); }
.timeline .note { white-space: pre-wrap; overflow-wrap: anywhere; }
.thumbs { display: flex; gap: .6rem; flex-wrap: wrap; }
.thumbs img { height: 110px; width: auto; max-width: 100%; border-radius: 8px; border: 1px solid var(--line); display: block; }
.big-compare { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .75rem; }
.big-compare > div { background: #f3f5f7; border-radius: 9px; padding: .7rem .85rem; }
.big-compare .orig { background: #eef2f6; }
.big-compare .corr { background: var(--red-soft); }
.big-compare .diff { background: var(--amber-soft); }
.big-compare small { display: block; color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .3px; }
.big-compare b { font-size: 1.15rem; overflow-wrap: anywhere; }

/* login */
.login { max-width: 400px; margin: 8vh auto; padding: 0 1rem; }
.login .card { padding: 1.5rem; }
.login h1 { text-align: center; margin-bottom: .2rem; }
.login p.sub { text-align: center; color: var(--muted); margin: 0 0 1rem; }
.login .field { margin-bottom: .8rem; }

/* toasts & modal */
#toasts { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; max-width: calc(100vw - 2rem); }
.toast { background: #1c2530; color: #fff; padding: .7rem 1rem; border-radius: 9px; box-shadow: 0 4px 14px rgba(0,0,0,.25); max-width: 420px; }
.toast.error { background: var(--red); }
.toast.success { background: var(--green); }
.overlay { position: fixed; inset: 0; background: rgba(15,23,32,.5); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 1rem; }
.modal { background: #fff; border-radius: 12px; padding: 1.2rem; width: 100%; max-width: 420px; }

/* phones: tables become cards */
@media (max-width: 760px) {
  main { padding: .7rem; }
  .topbar-in { gap: .5rem; }
  .who { width: 100%; justify-content: space-between; }
  .cols { grid-template-columns: 1fr; }
  .table.stack thead { display: none; }
  .table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
  .table.stack tr { border-bottom: 8px solid var(--bg); padding: .5rem .2rem; background: #fff; }
  .table.stack td { border: 0; padding: .2rem .75rem; display: flex; gap: .6rem; justify-content: space-between; text-align: right; }
  .table.stack td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; font-size: .8rem; flex: 0 0 38%; }
  .table.stack td.num { text-align: right; }
  .cmp { grid-template-columns: 1fr 1fr; }
  .cmp .hd.lbl-hd { display: none; }
  .cmp .lbl { grid-column: 1 / -1; margin-top: .4rem; }
  .item-notes { grid-template-columns: 1fr; }
  .big-compare { grid-template-columns: 1fr; }
  .btn { min-height: 44px; }
  input, select, textarea { font-size: 16px; }
}

/* quick tap tally */
.quick { display: grid; gap: .7rem; }
.btn.ok { background: var(--green-soft); border: 3px solid #8fd3b0; color: var(--green); }
.btn.ok:hover { background: #d3f0e1; }
.btn.ok.done { background: var(--green); border-color: var(--green); color: #fff; }
.btn.big { width: 100%; flex-direction: column; gap: 0; font-size: 1.15rem; padding: .8rem 1rem; min-height: 64px; border-radius: 16px; letter-spacing: .3px; }
.btn.big small { font-weight: 500; font-size: .8rem; opacity: .85; }
.step { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: #3b8f8a; text-transform: uppercase; letter-spacing: .4px; }
.step-n { display: inline-flex; width: 2rem; height: 2rem; border-radius: 50%; background: #3b8f8a; color: #fff; align-items: center; justify-content: center; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: .15rem; min-height: 76px; padding: .6rem; border: 3px solid #bfdedb; background: #e3f1ef; border-radius: 18px; cursor: pointer; font: inherit; color: #1d3a63; }
.tile b { text-transform: uppercase; letter-spacing: .3px; font-size: .95rem; }
.tile span { color: #3b8f8a; font-size: .8rem; }
.tile:hover { background: #d3ebe8; }
.tile.on { border-color: var(--brand); background: #c4e8e3; box-shadow: inset 0 0 0 2px var(--brand); }
.tile.on b::after { content: " ✓"; }
.tile.bad { border-color: #f1c4c4; background: #fdeaea; color: #a52a2a; }
.tile.bad span { color: #7a3b3b; }
.tile.bad:hover { background: #fadcdc; }
.tile.bad.on { border-color: var(--red); background: #f9d0d0; box-shadow: inset 0 0 0 2px var(--red); }
.quick-detail { padding-top: .2rem; }

/* chips, upload, whatsapp, status tiles */
.chips-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.chip { border: 2px solid #bfdedb; background: #e3f1ef; border-radius: 999px; padding: .4rem .85rem; font: inherit; font-weight: 600; color: #1d3a63; cursor: pointer; min-height: 38px; }
.chip:hover { background: #d3ebe8; }
.tile.wa, a.tile.wa { border-color: #8fd9a8; background: #e5f8ec; color: #0b6b2d; text-decoration: none; }
.tile.wa span { color: #1d7a3d; }
.tile.wa:hover { background: #d2f1de; }
a.btn.wa { background: #25d366; border-color: #1ebe5b; color: #05361a; }
a.btn.wa:hover { background: #20c05c; }
.tile.good { border-color: #8fd3b0; background: var(--green-soft); }
.tile.good.on { border-color: var(--green); background: #c9eedb; box-shadow: inset 0 0 0 2px var(--green); }
.tile.upload { cursor: pointer; min-height: 110px; border-style: dashed; }
.tile.upload b { font-size: 1.15rem; }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.btn.primary.big { color: #fff; }
.btn.looks-right { margin-bottom: .6rem; }

/* one-tap OK / ISSUE + issue window */
.ok-issue { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.btn.issue { background: #fdeaea; border: 3px solid #f1b3b3; color: var(--red); }
.btn.issue:hover { background: #fadcdc; }
.btn.issue.done { background: var(--red); border-color: var(--red); color: #fff; }
.issue-summary { margin: .55rem 0 0 1.1rem; padding: 0; color: var(--red); font-weight: 600; font-size: .9rem; }
.overlay.top { align-items: flex-start; overflow-y: auto; padding: 1rem .6rem 3rem; }
.modal.wide { max-width: 680px; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; }
.modal.wide .quick-detail { margin-top: .8rem; }
.modal.wide .quick-extra { margin-top: .8rem; }

/* one-line tally rows */
.trow{background:var(--card,#fff);border:1px solid #d9e0e4;border-radius:10px;margin:0 0 8px;padding:8px 10px}
.trow.is-matched{border-color:#9fd4b4;background:#f3fbf6}
.trow.is-discrepancy{border-color:#eca9a2;background:#fff6f5}
.trow-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.trow-name{flex:1 1 180px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.trow-vals{display:flex;gap:14px;flex-wrap:wrap}
.trow .cell{display:flex;flex-direction:column;min-width:52px}
.trow .cell small{font-size:.68rem;color:#6b7780;text-transform:uppercase;letter-spacing:.03em}
.trow .cell b{font-size:.95rem}
.trow-btns{display:flex;gap:8px;margin-left:auto}
.trow-btns .btn{min-width:84px;min-height:44px;font-weight:700}
.trow-issue{margin-top:6px;padding-top:6px;border-top:1px dashed #e3b3ae;font-size:.85rem}
.trow-issue .issue-summary{margin:0 0 2px;padding-left:18px}
@media (max-width:640px){.trow-name{flex-basis:100%}.trow-btns{width:100%;margin-left:0}.trow-btns .btn{flex:1}}

.wa-final{border:2px solid #25d366;background:#effcf3;margin-top:10px}
.wa-final .btn.wa.big{min-height:52px;font-size:1.05rem;font-weight:700}
.trow-main{gap:8px;flex-wrap:nowrap}
.trow-name{flex:1 1 90px}
.trow-vals{gap:10px;flex-wrap:nowrap;flex:0 0 auto}
.trow .cell{min-width:40px}
.trow-btns .btn{min-width:68px;padding-left:8px;padding-right:8px}
@media (max-width:640px){.trow-main{flex-wrap:wrap}.trow-vals{flex-wrap:wrap;gap:12px}}
@media (min-width:641px) and (max-width:1100px){.check-layout.with-pdf{grid-template-columns:1fr}}