:root { --blue:#4f81bd; --line:#dfe3ea; --muted:#667085; --bg:#f6f7f9; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.45 system-ui, "Segoe UI", sans-serif; background:var(--bg); color:#1d2433; }
header { display:flex; justify-content:space-between; align-items:center; padding:10px 20px; background:var(--blue); color:#fff; }
header a, header .link { color:#fff; }
.brand { font-weight:600; text-decoration:none; font-size:16px; }
main { max-width:1150px; margin:0 auto; padding:20px 16px 60px; }
h1 { margin:6px 0 16px; } h2 { margin:28px 0 8px; font-size:17px; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); }
th, td { padding:7px 10px; border-bottom:1px solid var(--line); text-align:left; }
th { background:#eef2f8; font-weight:600; }
.n { text-align:right; font-variant-numeric:tabular-nums; }
tr.total td { font-weight:600; background:#f3f6fb; }
tr.manual td { background:#fff6e0; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:12px; }
.tile { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px; }
.tile span { display:block; color:var(--muted); } .tile b { font-size:22px; } .tile.good b { color:#137333; }
.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; margin:16px 0; }
.row { display:flex; gap:16px; flex-wrap:wrap; align-items:end; }
label { display:flex; flex-direction:column; gap:4px; color:var(--muted); }
.row label { flex-direction:row; align-items:center; gap:8px; }
input { padding:7px 9px; border:1px solid #c9ced8; border-radius:6px; font:inherit; }
td input { width:100%; text-align:right; }
button, .button { background:var(--blue); color:#fff; border:0; border-radius:6px; padding:8px 14px; font:inherit; cursor:pointer; text-decoration:none; display:inline-block; }
button.link { background:none; padding:0; text-decoration:underline; }
.actions { display:flex; gap:10px; align-items:center; margin:12px 0; flex-wrap:wrap; }
.inline { display:inline; }
.login { max-width:340px; margin:80px auto; display:flex; flex-direction:column; gap:12px; }
.error { color:#b42318; } .muted { color:var(--muted); }
.tag { background:#fde8b0; color:#7a4b00; border-radius:4px; padding:1px 6px; font-size:12px; }
fieldset legend { font-weight:600; padding:0 6px; }
header nav { display:flex; gap:4px; margin-left:24px; flex:1; }
header nav a { text-decoration:none; padding:6px 12px; border-radius:6px; opacity:.85; }
header nav a.on { background:rgba(255,255,255,.2); opacity:1; font-weight:600; }
.titlebar { display:flex; justify-content:space-between; align-items:center; }
a.tile { text-decoration:none; color:inherit; } a.tile.sel { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }
.tiles { margin-bottom:16px; }
.cat { border-radius:4px; padding:1px 8px; font-size:12px; font-weight:600; background:#e3ecfa; color:#1d4e9e; white-space:nowrap; }
tr.inactive td { color:#98a2b3; }
.form { max-width:480px; display:flex; flex-direction:column; gap:12px; }
select { padding:7px 9px; border:1px solid #c9ced8; border-radius:6px; font:inherit; }
label.check { flex-direction:row; align-items:center; gap:8px; }
button.danger { background:#b42318; }
.oprows td { vertical-align:top; } .oprows select, .oprows td input { width:100%; text-align:left; }
.oprows .hint { font-size:12px; margin-top:2px; } .oprows .cat-out { background:#f3f6fb; }
button.secondary { background:#fff; color:var(--blue); border:1px solid var(--blue); }
button.link { color:var(--blue); } header .link { color:#fff; } button.danger-link { color:#b42318; }
.titlebar .actions { margin:0; }
.status { border-radius:4px; padding:1px 8px; font-size:12px; font-weight:600; background:#eef0f3; color:#475467; }
.status.sent { background:#e3ecfa; color:#1d4e9e; } .status.paid { background:#dcf3e3; color:#137333; }
.filters { margin:0 0 12px; } .filters select { min-width:160px; }
td.links a { margin-right:8px; } label.grow { flex:1; } label.grow input { width:100%; }
.lines td input.num { width:100%; min-width:90px; text-align:right; } .lines td { vertical-align:middle; }
.lines tr.manual td, tr.manual td { background:#fff6e0; }
table.summary { max-width:480px; margin-top:16px; } table.summary td input { width:100%; text-align:right; }
a.button.secondary { background:#fff; color:var(--blue); border:1px solid var(--blue); }
.sheet { background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px; margin:12px 0; overflow-x:auto; }
.sheet-title { background:var(--blue); color:#fff; font-size:18px; font-weight:600; text-align:center; padding:8px; margin-bottom:12px; }
.sheet table.rate { width:auto; margin:0 0 12px auto; } .sheet tr.group th { text-align:center; }
tr.payable td { font-size:16px; }
.lines td input[name=extra_name] { text-align:left; }
.ok { color:#137333; } table.unmatched { margin:8px 0 12px; } table.unmatched th { background:#fff6e0; }
.titlebar { flex-wrap:wrap; gap:8px; }
footer { max-width:1150px; margin:0 auto; padding:0 16px 24px; font-size:12px; }
.sent { background:#f3f6fb; border:1px solid var(--line); border-radius:6px; padding:8px 10px; margin:8px 0; font-size:12px; overflow-wrap:anywhere; }
.sent > div { margin-top:6px; } .sent.failed { background:#fdecea; border-color:#f5c2bd; }
h2 .money { font-size:13px; font-weight:400; margin-left:8px; }
.cur-pick { min-width:70px; }
.warn { display:block; background:#fff6e0; color:#7a4b00; border:1px solid #f3d38a; border-radius:4px; padding:2px 6px; margin-top:4px; font-size:12px; }
.warn[hidden] { display:none; }
.status.pay-paid { background:#dcf3e3; color:#137333; } .status.pay-pending { background:#fff6e0; color:#7a4b00; }
.pay-form { display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .pay-form.compact input[name=payment_note] { width:120px; }
.pay-form select, .pay-form input { padding:4px 6px; } button.small { padding:4px 10px; font-size:13px; }
.receipts { display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .receipt { display:inline-flex; align-items:center; gap:2px; }
.receipt img { height:48px; max-width:80px; object-fit:cover; border:1px solid var(--line); border-radius:4px; }
#payment ~ .card .receipt img { height:120px; max-width:200px; }
.receipt-form { display:flex; flex-direction:column; gap:8px; max-width:520px; }
.paste-box { border:1px dashed #c9ced8; border-radius:6px; padding:10px; color:var(--muted); cursor:text; }
.paste-box:focus { outline:2px solid var(--blue); } .small-link { font-size:12px; } table.dash td { vertical-align:top; }
.add-line { margin:8px 0; align-items:end; } button.remove-line { font-size:12px; margin-left:4px; }
td.neg, .neg { color:#b42318; } .tile.bad b { color:#b42318; } .small-note { font-size:13px; font-weight:400; }

/* ---- Phones and small tablets (Build 2026-10-17.15) ---- */
.nav-toggle, .nav-btn { display:none; }
.nav-panel { display:flex; flex:1; align-items:center; justify-content:space-between; }
.tbl-wrap { width:100%; }
table.unmatched { display:block; overflow-x:auto; }
@media (max-width:800px) {
  header { flex-wrap:wrap; padding:10px 16px; }
  .nav-btn { display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; cursor:pointer; }
  .nav-btn span { display:block; height:3px; background:#fff; border-radius:2px; }
  .nav-panel { display:none; flex:0 0 100%; width:100%; flex-direction:column; align-items:stretch; }
  .nav-toggle:checked ~ .nav-panel { display:flex; }
  header nav { flex-direction:column; margin:8px 0 0; }
  header nav a { padding:12px; font-size:16px; }
  header .who { padding:12px; border-top:1px solid rgba(255,255,255,.3); display:flex; justify-content:space-between; align-items:center; }
  .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 8px; border:1px solid var(--line); background:#fff; }
  .tbl-wrap > table { border:0; }
  .tbl-wrap th:first-child, .tbl-wrap td:first-child { position:sticky; left:0; z-index:1; background:#fff; box-shadow:1px 0 0 var(--line); }
  .tbl-wrap th:first-child { background:#eef2f8; }
  .tbl-wrap tr.total td:first-child { background:#f3f6fb; } .tbl-wrap tr.manual td:first-child { background:#fff6e0; }
  .tbl-wrap td, .tbl-wrap th { white-space:nowrap; }
  .tbl-wrap td .warn, .tbl-wrap td .small-note, .tbl-wrap td .muted { white-space:normal; min-width:120px; }
  .lines td input.num { min-width:110px; } .lines td { min-width:90px; }
  .sheet { padding:8px; } .sheet table.rate { margin:0 0 12px; }
}
@media (max-width:640px) {
  main { padding:12px 12px 48px; }
  h1 { font-size:22px; }
  .tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .tile { padding:10px; } .tile b { font-size:17px; overflow-wrap:anywhere; }
  .row, .actions { flex-direction:column; align-items:stretch; }
  .row label, label { flex-direction:column; align-items:stretch; }
  label.check { flex-direction:row; align-items:center; }
  .form, .receipt-form, table.summary { max-width:100%; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { width:100%; font-size:16px; min-height:44px; }
  button:not(.link), .button { min-height:44px; font-size:16px; }
  td input:not([type=checkbox]), td select { min-height:40px; }
  .titlebar { flex-direction:column; align-items:stretch; } .titlebar .actions { margin:0; }
  .filters select { min-width:0; }
  .pay-form { flex-direction:column; align-items:stretch; } .pay-form.compact input[name=payment_note] { width:100%; }
  .login { margin:24px auto; max-width:100%; }
  /* lists as cards: one row per field, "label  value" */
  .tbl-wrap:has(> table.stack) { overflow:visible; border:0; background:none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display:block; width:100%; }
  table.stack { border:0; background:none; }
  table.stack tr.head { display:none; }
  table.stack tr { background:#fff; border:1px solid var(--line); border-radius:8px; margin:0 0 10px; padding:6px 10px; }
  table.stack td { border:0; padding:4px 0; white-space:normal; text-align:left; position:static; box-shadow:none; background:none; }
  table.stack td[data-label]::before { content:attr(data-label); display:block; font-size:12px; color:var(--muted); }
  table.stack td input, table.stack td select { text-align:left; }
  table.stack td:empty { display:none; }
}