:root {
  --bg: #f6f7f5; --surface: #ffffff; --ink: #172026; --muted: #44525a; --line: #e2e6e3;
  --brand: #0f766e; --brand-ink: #ffffff; --brand-soft: #d9f0ec;
  --accent: #FFBF3F; --accent-ink: #141414;
  --good: #15803d; --bad: #b91c1c; --warn: #b45309; --warn-soft: #fdf0d5; --bad-soft: #fde4e1; --good-soft: #dcf5e5;
  --shadow: 0 1px 2px rgba(20,30,30,.06), 0 4px 16px rgba(20,30,30,.04);
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1413; --surface: #171d1c; --ink: #e9eeec; --muted: #95a29f; --line: #232c2a;
    --brand: #4cc2b2; --brand-ink: #08201d; --brand-soft: #18302d;
    --accent: #FFBF3F; --accent-ink: #141414;
    --good: #4ade80; --bad: #f87171; --warn: #fbbf24; --warn-soft: #3a2f10; --bad-soft: #3d1b19; --good-soft: #12301d;
    --shadow: none;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
h1 { font-size: 1.5rem; margin: 22px 0 4px; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
h3 { font-size: .95rem; margin: 0 0 6px; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .right { text-align: right; } .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
a { color: var(--brand); }

.top { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.bar { display: flex; align-items: center; gap: 20px; min-height: 56px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-weight: 800; }
nav { display: flex; gap: 4px; overflow-x: auto; }
nav a { padding: 8px 12px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 500; white-space: nowrap; }
nav a:hover { background: var(--bg); color: var(--ink); }
nav a.on { background: var(--accent); color: var(--accent-ink); font-weight: 650; }

.grid { display: grid; gap: 14px; }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); min-width: 0; }
.stat .lbl { color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.stat .val { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; margin: 2px 0; }
.delta { font-size: .85rem; font-weight: 600; } .up { color: var(--bad); } .down { color: var(--good); }
.sec { margin: 22px 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sec h2 { margin: 0; }

.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: none; padding: 6px 14px; border-radius: 7px; color: var(--muted); font: inherit; font-weight: 500; cursor: pointer; }
.seg button.on { background: var(--brand); color: var(--brand-ink); }
.chart { position: relative; height: 280px; }
.chart.sm { height: 230px; }

button, .btn { font: inherit; cursor: pointer; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 8px 14px; font-weight: 500; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { border-color: var(--brand); }
button.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
button.danger { color: var(--bad); }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; width: 100%; min-width: 0; }
label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: 3px; }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--bg); }
.scroll { overflow-x: auto; }

.bar-row { display: grid; grid-template-columns: minmax(80px, 1.2fr) 2fr auto; gap: 10px; align-items: center; padding: 5px 0; }
.bar-row .track { height: 8px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.bar-row .fill { height: 100%; background: var(--brand); border-radius: 99px; }
.pill { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .76rem; font-weight: 600; background: var(--brand-soft); color: var(--brand); }
.pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.good { background: var(--good-soft); color: var(--good); }

.drop { border: 2px dashed var(--line); border-radius: var(--radius); padding: 34px 16px; text-align: center; background: var(--surface); cursor: pointer; }
.drop.over, .drop:hover { border-color: var(--brand); background: var(--brand-soft); }
.drop strong { display: block; font-size: 1.05rem; }
.notice { padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); margin: 10px 0; font-size: .9rem; }
.notice.ok { background: var(--good-soft); color: var(--good); } .notice.bad { background: var(--bad-soft); color: var(--bad); }
.draft { display: grid; grid-template-columns: 160px 1fr; gap: 16px; margin-top: 14px; }
.draft img.thumb { width: 100%; border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; display: block; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.items td { padding: 4px; } .items input, .items select { padding: 5px 6px; }
.items .c-name { min-width: 180px; } .items .c-cat { min-width: 120px; } .items .c-n { width: 82px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }

.tip { border-left: 4px solid var(--brand); } .tip.high { border-left-color: var(--bad); } .tip.med { border-left-color: var(--warn); } .tip.info { border-left-color: var(--muted); }
.tip h3 { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.progress { height: 10px; border-radius: 99px; background: var(--bg); overflow: hidden; margin: 8px 0 4px; }
.progress > div { height: 100%; background: var(--brand); } .progress.over > div { background: var(--bad); }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: start center; overflow-y: auto; padding: 24px 12px; z-index: 50; }
.modal[hidden] { display: none; }
.modal-card { background: var(--surface); border-radius: var(--radius); padding: 18px; width: min(920px, 100%); position: relative; }
.x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; padding: 0; font-size: 1.3rem; line-height: 1; }
.modal img.full { max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; }
.empty { text-align: center; padding: 36px 12px; color: var(--muted); }
.results a { word-break: break-all; }

@media (max-width: 640px) and (pointer: coarse) {
  .draft { grid-template-columns: 1fr; } .draft img.thumb { max-width: 150px; }
  h1 { font-size: 1.3rem; } .stat .val { font-size: 1.45rem; }
  .bar { gap: 6px; padding-top: 6px; }
}

.picker { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; }
.pick-row { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 240px; }
.pick-row button { width: 40px; height: 38px; padding: 0; font-size: 1.2rem; line-height: 1; }
.pick-row select { height: 38px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- compact density (dashboard-first) ---- */
.grid { gap: 10px; }
.card { padding: 12px 14px; }
.sec { margin: 14px 0 6px; } .sec h2 { font-size: .98rem; }
h2 { margin-bottom: 6px; }
.chart { height: 230px; } .chart.sm { height: 190px; }
.dash-head { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin: 10px 0 10px; }
.dash-head h1 { margin: 0; font-size: 1.25rem; }
.picker { flex: 1; justify-content: flex-end; gap: 8px; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; }
.seg { padding: 2px; border-radius: 9px; } .seg button { padding: 4px 11px; font-size: .88rem; border-radius: 7px; }
.pick-row { flex: 1 1 280px; max-width: 440px; min-width: 0; gap: 6px; }
.pick-row button { width: 32px; height: 32px; font-size: 1.05rem; }
.pick-row select { height: 32px; padding: 3px 8px; font-size: .9rem; }
.cols-3.stats { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 8px; }
.stat { padding: 9px 13px; }
.stat .lbl { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat .val { font-size: 1.3rem; margin: 1px 0 0; line-height: 1.25; }
.stat .delta, .stat .small { font-size: .78rem; }
.stat .progress { height: 6px; margin: 4px 0 2px; }
.bar-row { padding: 3px 0; gap: 8px; font-size: .9rem; }
td { padding: 6px 8px; } th { padding: 5px 8px; }
@media (pointer: coarse) {
  .pick-row button { width: 40px; height: 40px; } .pick-row select { height: 40px; }
  .seg button { padding: 8px 13px; } nav a { padding: 10px 12px; }
}
@media (max-width: 640px) and (pointer: coarse) { .picker { justify-content: flex-start; } .cols-3.stats { grid-template-columns: repeat(2, 1fr); } }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
.cols-4 .card h2 { font-size: .92rem; }
.cols-4 .chart.sm { height: 210px; }
/* in the 4-up breakdown, put the bar under the name so long product names don't wrap into tall rows */
.cols-4 .bar-row { grid-template-columns: 1fr auto; row-gap: 3px; padding: 4px 0; }
.cols-4 .bar-row > :nth-child(1) { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cols-4 .bar-row > :nth-child(1) > div:first-child { overflow: hidden; text-overflow: ellipsis; }
.cols-4 .bar-row > :nth-child(3) { grid-area: 1 / 2; }
.cols-4 .bar-row .track { grid-area: 2 / 1 / 3 / 3; height: 5px; }

/* ================= second pass ================= */
/* explicit dark theme (the toggle) — same palette as the system-dark block above */
:root[data-theme="dark"] {
  --bg: #0f1413; --surface: #171d1c; --ink: #e9eeec; --muted: #95a29f; --line: #232c2a;
  --brand: #4cc2b2; --brand-ink: #08201d; --brand-soft: #18302d;
  --good: #4ade80; --bad: #f87171; --warn: #fbbf24; --warn-soft: #3a2f10; --bad-soft: #3d1b19; --good-soft: #12301d;
  --shadow: none; color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

.bar { flex-wrap: nowrap; gap: 12px; }
nav { flex: 1; min-width: 0; }
nav a { padding: 6px 10px; font-size: .92rem; }
.tools { display: flex; gap: 4px; align-items: center; margin-left: auto; }
button.icon { position: relative; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 9px; font-size: 1rem; background: none; border-color: transparent; }
button.icon:hover { background: var(--bg); border-color: var(--line); }
button.icon.txt { width: auto; padding: 0 10px; font-size: .85rem; color: var(--muted); }
.badge { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; border-radius: 99px; padding: 0 4px; background: var(--bad); color: #fff; font-size: .68rem; font-weight: 700; line-height: 16px; text-align: center; }
.badge[hidden] { display: none; }
button.txt, .btn.txt { background: none; border-color: transparent; color: var(--muted); padding: 5px 9px; font-size: .88rem; }
button.txt:hover, .btn.txt:hover { color: var(--ink); border-color: var(--line); }
.btn.big { padding: 10px 18px; font-size: 1rem; }
.btn.primary, a.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.pick-row .txt { white-space: nowrap; height: 32px; border-color: var(--line); }
.pick-row .btn.txt { display: inline-flex; align-items: center; }

.warn-t { color: var(--warn); } .good-t { color: var(--good); }
.down { color: var(--good); }
label.inline { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: .9rem; margin: 0; }
label.inline input { width: auto; }
.filters { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.filters .chk { display: flex; align-items: center; min-height: 34px; flex-wrap: wrap; gap: 8px; }
.ck { width: 34px; text-align: center; padding-left: 4px; padding-right: 4px; } .ck input { width: auto; }
.bulkbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; position: sticky; top: 60px; z-index: 5; }
.bulkbar[hidden] { display: none; } .bulkbar .grp { display: inline-flex; gap: 6px; align-items: center; } .bulkbar input, .bulkbar select { width: auto; padding: 5px 7px; }
.sim-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sim-row:last-child { border-bottom: 0; }

.budgets { margin-top: 8px; }
.bud-head { display: flex; justify-content: space-between; align-items: baseline; } .bud-head h2 { margin: 0 0 6px; font-size: .92rem; }
.bud-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 16px; }
.bud-top { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; } .bud .progress { height: 6px; margin: 3px 0 2px; }
.bud.warn .progress > div { background: var(--warn); }
.bud-inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 6px 10px; margin-top: 4px; }
.bud-inputs > div { display: flex; align-items: center; gap: 6px; } .bi-name { flex: 1; font-size: .85rem; min-width: 0; } .bud-inputs input { width: 82px; padding: 5px 7px; }

.li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.li:last-child { border-bottom: 0; } .li input[type=checkbox] { width: auto; flex: none; }
.li-main { flex: 1; min-width: 0; } .li.done .li-main > div:first-child { text-decoration: line-through; color: var(--muted); }
.li .qty { width: 64px; padding: 4px 6px; } .li-p { min-width: 62px; text-align: right; }
.addf { display: flex; gap: 8px; margin-bottom: 6px; }
.list-grid { align-items: start; }

.cmp-pick { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; } .cmp-pick > div:not(.vs) { flex: 1; min-width: 220px; } .vs { color: var(--muted); padding-bottom: 8px; }
.acts { white-space: nowrap; } .acts button { padding: 4px 9px; font-size: .85rem; }
textarea { resize: vertical; }
.alert { margin: 8px 0; padding: 10px 12px; } .alert-t { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; margin-bottom: 3px; }

.login-body { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-card { width: min(360px, 100%); padding: 22px; }

@media (max-width: 760px) and (pointer: coarse) {
  .bar { flex-wrap: wrap; row-gap: 0; } nav { order: 3; flex-basis: 100%; } .tools { order: 2; }
  .bulkbar { top: 100px; }
}
@media (pointer: coarse) {
  button.icon { width: 40px; height: 40px; } nav a { padding: 10px 12px; }
  .ck input, .li input[type=checkbox] { width: 20px; height: 20px; }
  .btn.big { padding: 14px 20px; }
}
[hidden] { display: none !important; }
.picker { flex-wrap: wrap; }
.pick-row { flex: 1 1 380px; max-width: 600px; }
.pick-sel { flex: 1 1 140px; min-width: 120px; }
@media (max-width: 760px) and (pointer: coarse) { .pick-row { flex-basis: 100%; max-width: none; } .pick-row .txt { padding: 5px 8px; } }
.pick-row button.txt, .pick-row a.btn.txt { width: auto; padding: 0 10px; flex: none; }
@media (pointer: coarse) { .pick-row button.txt { width: auto; } }
.wide { grid-column: 1 / -1; }
#b-month { max-width: 240px; }

button.big-btn { padding: 10px 16px; font-size: 1rem; }
@media (pointer: coarse) { button.big-btn { padding: 14px 18px; } }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80; max-width: min(560px, calc(100vw - 24px)); padding: 11px 16px; border-radius: 12px;
  background: var(--good-soft); color: var(--good); border: 1px solid var(--good); font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.toast.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.toast[hidden] { display: none; }

.range-label { padding: 6px 10px; font-size: .9rem; color: var(--muted); white-space: nowrap; }

/* ---- savings page ---- */
.ins-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; margin: 4px 0 2px; border-left: 4px solid var(--good); }
.ins-head .lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ins-big { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--good); }
.ins-counts { display: flex; gap: 22px; } .ins-counts div { display: flex; flex-direction: column; align-items: center; } .ins-counts b { font-size: 1.4rem; line-height: 1.1; } .ins-counts span { font-size: .75rem; color: var(--muted); }
.seg .cnt { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 3px; border-radius: 99px; background: rgba(127,127,127,.2); font-size: .72rem; line-height: 18px; }
.ins { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.ins.dismissed { opacity: .6; }
.ins-top { display: flex; gap: 10px; align-items: flex-start; } .ins-ico { font-size: 1.35rem; line-height: 1.2; }
.ins-title { flex: 1; min-width: 0; } .ins h3 { margin: 0 0 4px; font-size: .98rem; line-height: 1.3; } .ins-sub { display: flex; gap: 6px; flex-wrap: wrap; }
.facts { display: flex; gap: 8px; flex-wrap: wrap; } .fact { display: flex; flex-direction: column; background: var(--bg); border-radius: 9px; padding: 5px 11px; } .fact span { font-size: .7rem; color: var(--muted); } .fact b { font-size: .95rem; }
.mbars { display: grid; gap: 5px; } .mbar { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto; gap: 8px; align-items: center; font-size: .82rem; }
.mb-t { height: 9px; background: var(--bg); border-radius: 99px; overflow: hidden; } .mb-f { display: block; height: 100%; border-radius: 99px; background: var(--muted); }
.mb-f.good { background: var(--good); } .mb-f.bad { background: var(--bad); } .mb-f.neutral { background: var(--brand); }
.irows { display: grid; gap: 3px; font-size: .86rem; } .irow { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--line); } .irow:last-child { border-bottom: 0; }
.ins-tip { margin: 0; font-size: .88rem; color: var(--muted); }
.ins-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } .ins-actions button { padding: 4px 10px; font-size: .84rem; }
@media (max-width: 640px) and (pointer: coarse) { .ins-counts { gap: 14px; } .mbar { grid-template-columns: 90px 1fr auto; } }

.bar-row.link { cursor: pointer; border-radius: 8px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; transition: background .12s; }
.bar-row.link:hover { background: var(--bg); } .bar-row.link:hover .fill { filter: brightness(1.15); }
.cat-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; } .cat-bar .grow { flex: 1; } .cat-bar .btn { padding: 5px 12px; font-size: .88rem; }
button.lnk { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; text-underline-offset: 2px; font: inherit; cursor: pointer; text-align: left; }
tfoot td { border-top: 2px solid var(--line); font-weight: 600; }

.confirm-ov { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); }
.confirm-card { width: min(420px, 100%); background: var(--surface); color: var(--ink); border-radius: 14px; padding: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.4); }
.confirm-card h2 { margin: 0 0 8px; font-size: 1.1rem; }
.cf-details { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 8px 0; padding: 9px 12px; background: var(--bg); border-radius: 9px; font-size: .9rem; }
.cf-details dt { color: var(--muted); } .cf-details dd { margin: 0; font-weight: 600; word-break: break-word; }
.confirm-card .actions { margin-top: 12px; justify-content: flex-end; }
button.danger.solid { background: #b91c1c; border-color: #b91c1c; color: #fff; }
button.danger.solid:disabled { opacity: .45; }

button.searchbtn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px; border-radius: 9px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
button.searchbtn:hover { color: var(--ink); border-color: var(--brand); }
button.searchbtn kbd { font: inherit; font-size: .75rem; padding: 0 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.s-form { display: flex; gap: 8px; margin: 6px 0 8px; } .s-form input { flex: 1; font-size: 1rem; padding: 9px 11px; } .s-form select { width: auto; }
.s-facts { margin: 6px 0 10px; } .s-facts .fact b { font-size: 1.02rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { padding: 5px 12px; border-radius: 99px; font-size: .88rem; background: var(--bg); }
@media (max-width: 760px) and (pointer: coarse) { button.searchbtn .st, button.searchbtn kbd { display: none; } button.searchbtn { width: 34px; padding: 0; justify-content: center; } .s-form { flex-wrap: wrap; } .s-form input { flex-basis: 100%; } }
@media (pointer: coarse) { button.searchbtn { height: 40px; } .chip { padding: 9px 14px; } }

.pay-items td { padding: 3px; } .pay-items input, .pay-items select { padding: 5px 6px; }
.pay-items .pi-name { min-width: 170px; } .pay-items .pi-cat { min-width: 118px; } .pay-items .pi-pay { min-width: 112px; } .pay-items .pi-ref { min-width: 128px; }
.pay-items .pi-n { width: 86px; min-width: 70px; } .pay-items .pi-qty { white-space: nowrap; min-width: 118px; }
.pay-items .pi-qty input { width: 64px; display: inline-block; } .pay-items .pi-qty select { width: 52px; display: inline-block; margin-left: 4px; padding-left: 3px; }
.pay-items [data-t] { text-align: right; padding-right: 8px; white-space: nowrap; }

.fields.adm { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.sys { grid-template-columns: 130px 1fr; } .sys dd { font-weight: 500; }

/* gear menu (Settings, Admin, Log out) */
.menu-wrap { position: relative; }
button.icon.on { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 170px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.22); display: grid; gap: 2px; }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-decoration: none; font: inherit; cursor: pointer; }
.menu a:hover, .menu button:hover, .menu a:focus-visible, .menu button:focus-visible { background: var(--bg); }
.menu a.on { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
nav { scrollbar-width: thin; }
@media (pointer: coarse) { .menu a, .menu button { padding: 12px 14px; } }

.keyrow { display: flex; gap: 8px; align-items: center; margin-top: 5px; }
button.danger.small { padding: 3px 10px; font-size: .84rem; }
.fields.adm input, .fields.adm select { background: var(--surface); border-color: color-mix(in srgb, var(--muted) 40%, var(--line)); }
.fields.adm input::placeholder { color: var(--muted); opacity: .85; }

.retry-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .retry-note span:first-child { flex: 1; min-width: 200px; }
button.retry { background: #b91c1c; border-color: #b91c1c; color: #fff; padding: 5px 14px; font-weight: 600; }

.discard-bar { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); align-items: center; }

.active-box { margin: 4px 0 8px; padding: 9px 12px; border-radius: 10px; background: var(--good-soft); border: 1px solid var(--good); }
.active-box.off { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.active-box .dot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--good); vertical-align: 0; }
.active-box code { font-size: .85em; }

.menu-who { padding: 6px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.nowrap { white-space: nowrap; }
.users-tbl select, .users-tbl input { padding: 4px 6px; font-size: .86rem; }
.users-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; align-items: end; margin-top: 10px; }

/* Admin: use the full width — AI providers side by side, cards in two columns */
.admin-grid { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.prov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-top: 10px; }
.prov { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.prov .fields.adm { grid-template-columns: 1fr; }

/* ---- phone view: keep the important columns on screen, trim spacing ---- */
@media (max-width: 640px) and (pointer: coarse) {
  .wrap, main { padding-left: 10px; padding-right: 10px; }
  .bar { min-height: 0; padding-top: 4px; padding-bottom: 0; }
  .brand { font-size: 1rem; } .logo { width: 24px; height: 24px; }
  nav a { padding: 8px 10px; font-size: .9rem; }
  h1 { margin: 12px 0 4px; font-size: 1.2rem; }
  .sec { margin: 10px 0 4px; }
  .card { padding: 10px 11px; }
  .grid { gap: 8px; }
  table { font-size: .86rem; }
  td { padding: 6px 4px; } th { padding: 5px 4px; font-size: .68rem; letter-spacing: 0; }
  td.ck, th.ck { width: 26px; padding-left: 2px; padding-right: 2px; }
  .pill { font-size: .68rem; padding: 1px 7px; }
  .small { font-size: .78rem; }
  table.hide3 :is(thead th, tbody td):nth-child(3),
  table.hide45 :is(thead th, tbody td):nth-child(n+4):nth-child(-n+5),
  table.hide56 :is(thead th, tbody td):nth-child(n+5) { display: none; }
  table.hide45 tfoot td[colspan] { colspan: 1; }
  .acts { white-space: normal; } .acts button { margin: 2px 2px 0 0; }
  .seg button { padding: 5px 9px; }
  button.big-btn { padding: 8px 12px; font-size: .95rem; }
  .tip h3 { font-size: .92rem; }
  .tip .actions { gap: 6px; } .tip .actions button, .tip .actions .btn { padding: 6px 10px; font-size: .85rem; }
  body { padding-bottom: 60px; }
}

/* ---- phone view, round 2: smaller type, roomier tabs, no overflowing inputs ---- */
@media (max-width: 640px) and (pointer: coarse) {
  body { font-size: 13.5px; }
  nav { gap: 8px; }
  nav a { padding: 8px 12px; font-size: .88rem; }
  table { font-size: .8rem; }
  th { font-size: .62rem; }
  td .small, td .muted.small { font-size: .72rem; }
  .pill { font-size: .62rem; padding: 0 6px; }
  .num b, td b { font-weight: 650; }
  h1 { font-size: 1.1rem; } h2, .sec h2 { font-size: .92rem; }
  .stat .val { font-size: 1.15rem; } .stat .lbl { font-size: .62rem; }
  .picker, .seg { width: 100%; }
  .seg { display: flex; box-sizing: border-box; }
  .seg button { flex: 1 1 auto; padding: 5px 3px; font-size: .78rem; white-space: nowrap; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fields > div:first-child:nth-last-child(n+3) { grid-column: 1 / -1; }
  input, select, textarea { font-size: 16px; max-width: 100%; box-sizing: border-box; }
  input[type=date] { -webkit-appearance: none; appearance: none; min-height: 34px; }
  label { font-size: .74rem; }
}

/* keep the selected tab off the header's bottom line */
nav { padding: 2px 0 8px; }
@media (max-width: 760px) and (pointer: coarse) { .bar { padding-bottom: 0; } }

/* "More" dropdown: phones show 4 tabs + More; wider screens show every tab */
.more-wrap { display: none; }
#more-btn { font: inherit; font-weight: 500; border: 0; background: none; color: var(--muted); padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
#more-btn.on { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
@media (max-width: 640px) and (pointer: coarse) {
  nav { gap: 2px; overflow: visible; }
  nav a.m-more { display: none; }
  .more-wrap { display: block; }
  nav a, #more-btn { padding: 7px 8px; font-size: .84rem; }
}

/* accent (#FFBF3F): used sparingly - selected tab, logo, small highlights */
::selection { background: var(--accent); color: var(--accent-ink); }
.top { border-bottom: 2px solid var(--accent); }
.tip.info { border-left-color: var(--accent); }
.drop.over, .drop:hover { border-color: var(--accent); }
.progress > div { background: var(--brand); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--accent); }
button.primary:hover { box-shadow: 0 0 0 2px var(--accent); }

/* purchase-without-receipt form on phones: stacked item cards instead of a wide table */
.modal { grid-template-columns: minmax(0, 1fr); }
.modal-card { min-width: 0; }
@media (max-width: 640px) and (pointer: coarse) {
  .modal { padding: 12px 8px; }
  .modal-card { padding: 14px 12px; overflow-x: hidden; }
  .pi-fields > div:first-child { grid-column: auto !important; }
  .pi-fields > div[style] { grid-column: 1 / -1 !important; }
  .pay-items, .pay-items tbody { display: block; }
  .pay-items thead { display: none; }
  .pay-items tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; position: relative; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pay-items td { display: block; padding: 0; border: 0; min-width: 0; }
  .pay-items td::before { content: attr(data-l); display: block; font-size: .68rem; color: var(--muted); margin-bottom: 2px; }
  .pay-items td.pi-name { grid-column: 1 / -1; padding-right: 34px; }
  .pay-items td.pi-del { position: absolute; top: 8px; right: 0; }
  .pay-items td.pi-del button { padding: 2px 9px; }
  .pay-items td.pi-total { align-self: end; padding-bottom: 8px; font-weight: 600; }
  .pay-items .c-name, .pay-items .c-cat, .pay-items .c-n, .pay-items td { min-width: 0; width: auto; }
  .pay-items td.pi-qty { display: flex; flex-wrap: wrap; align-items: center; }
  .pay-items td.pi-qty::before { flex-basis: 100%; }
  .pay-items .pi-qty { min-width: 0; white-space: normal; }
  .pay-items .pi-qty input { flex: 1 1 0; width: auto; min-width: 0; } .pay-items .pi-qty select { flex: 0 0 64px; width: 64px; margin-left: 6px; }
  .pay-items .pi-n { width: auto; min-width: 0; }
  .items input, .items select { padding: 7px 8px; }
}

/* date and time boxes: same size, left-aligned, never wider than their column (iOS) */
@media (max-width: 640px) and (pointer: coarse) {
  input[type=date], input[type=time] { display: block; width: 100%; min-width: 0; max-width: 100%; height: 40px; min-height: 40px; box-sizing: border-box; text-align: left; -webkit-appearance: none; appearance: none; }
  input[type=date]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.2em; }
  .pi-fields > div { min-width: 0; }
}

/* added items as compact lines (phones only) */
.pi-list { display: none; }
@media (max-width: 640px) and (pointer: coarse) {
  #pi-rows tr:not(:last-child) { display: none; }
  .pi-list { display: block; margin-top: 6px; }
  .pi-line { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .74rem; }
  .pi-line .pn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .pi-line .pm, .pi-line .pp { flex: none; white-space: nowrap; color: var(--muted); }
  .pi-line .pm b { color: var(--ink); }
  .pi-line button { padding: 0 7px; font-size: .95rem; line-height: 1.3; flex: none; }

  /* smaller type and tighter fields on the Add receipts page and its forms */
  .drop { padding: 18px 12px; } .drop strong { font-size: .9rem; } .drop span { font-size: .75rem; }
  .btn.big, button.big-btn { padding: 8px 12px; font-size: .85rem; }
  .modal-card h2 { font-size: .95rem; } .modal-card p.small { font-size: .72rem; }
  .modal input, .modal select, .modal textarea, .items input, .items select { padding: 4px 8px; font-size: 14px; min-height: 32px; }
  .modal input[type=date], .modal input[type=time] { height: 34px; min-height: 34px; }
  .modal label, .pay-items td::before { font-size: .66rem; margin-bottom: 1px; }
  .modal .fields { gap: 6px; margin-bottom: 8px; }
  .pay-items tr { padding: 6px 0; gap: 4px 6px; }
  .modal button { font-size: .85rem; padding: 6px 12px; }
}

/* phones: 16px fields stop iOS zooming the page when one is tapped (that zoom looked like overflow); compact via padding instead */
@media (max-width: 640px) and (pointer: coarse) {
  .modal input, .modal select, .modal textarea, .items input, .items select { font-size: 16px; padding: 3px 8px; min-height: 32px; }
  .modal input[type=date], .modal input[type=time] { height: 34px; min-height: 34px; }
  .modal-card, .modal-card * { max-width: 100%; }
  .pay-items tr { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pay-items td.pi-name { grid-column: 1 / -1; }
  .pay-items td.pi-cat { grid-column: span 3; }
  .pay-items td.pi-qty { grid-column: span 2; }
  .pay-items td.pi-price { grid-column: span 2; }
  .pay-items td.pi-total { grid-column: span 3; text-align: right; }
  .pay-items td.pi-pay { grid-column: span 2; }
  .pay-items td.pi-ref { grid-column: span 3; }
  .pay-items .pi-qty input { flex: 1 1 0; } .pay-items .pi-qty select { flex: 0 0 52px; width: 52px; margin-left: 4px; padding-left: 4px; padding-right: 2px; }
  .pay-items select { text-overflow: ellipsis; }
}

/* phones: small square checkboxes, tidy receipts footer, one-line filter checkboxes */
@media (max-width: 640px) and (pointer: coarse) {
  input[type=checkbox] { -webkit-appearance: none; appearance: none; width: 16px !important; height: 16px !important; min-height: 0 !important; padding: 0; margin: 0; flex: none; border: 1.5px solid var(--muted); border-radius: 3px; background: var(--surface); display: inline-grid; place-content: center; vertical-align: -3px; }
  input[type=checkbox]:checked { background: var(--brand); border-color: var(--brand); }
  input[type=checkbox]:checked::after { content: ''; width: 4px; height: 8px; border: solid var(--brand-ink); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
  td.ck, th.ck { width: 24px; }
  table .mh { display: none; }
  #list td:nth-child(2) { font-size: .72rem; } #list td:nth-child(2) .small { font-size: .66rem; }
  #list tfoot td { padding-top: 8px; }
  .chk { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 18px; }
  .chk label.inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .76rem; margin: 0; }
}

/* phones: fact boxes and tip buttons stay on one line and stretch across the row */
@media (max-width: 640px) and (pointer: coarse) {
  .facts { gap: 6px; }
  .fact { flex: 1 1 auto; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 10px; }
  .fact span, .fact b { white-space: nowrap; }
  .fact span { font-size: .68rem; } .fact b, .s-facts .fact b { font-size: .86rem; }
  .tip .actions { gap: 6px; flex-wrap: wrap; }
  .tip .actions button, .tip .actions .btn { flex: 1 1 auto; white-space: nowrap; text-align: center; padding: 6px 8px; font-size: .78rem; }
  .tip .actions button.txt { flex: 0 0 auto; }
}

/* subscription */
.bill-grid { align-items: start; }
.bill-grid .card input { margin-bottom: 4px; }

/* test drive + locked features */
body.unsub #bell { display: none; }
nav a.lk::after, #more-menu a.lk::after { content: ' 🔒'; font-size: .72em; }
.trial-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; background: var(--ink); color: var(--bg); border-radius: 12px; padding: 9px 14px; margin: 10px 0; font-size: .88rem; }
.trial-bar .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; padding: 6px 14px; }
.tb-dots { display: inline-flex; gap: 4px; vertical-align: middle; margin: 0 4px; }
.tb-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--accent); }
.tb-dots i.on { background: var(--accent); }
.lock-hook { margin: 12px 0; padding: 14px 16px; border-radius: 14px; background: var(--ink); color: var(--bg); text-align: center; }
.lock-hook .lbl { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; }
.lock-hook .big { font-family: Georgia, serif; font-size: 2.2rem; color: var(--accent); font-weight: 700; line-height: 1.2; }
.lock-grid { align-items: stretch; }
.lock-list { margin: 6px 0 10px; padding-left: 20px; display: grid; gap: 6px; }
.lock-preview { position: relative; overflow: hidden; min-height: 190px; }
.lock-blur { filter: blur(5px); opacity: .75; user-select: none; display: grid; gap: 10px; }
.mock-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--bg); border-radius: 10px; }
.lock-over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; background: color-mix(in srgb, var(--surface) 55%, transparent); }
.lock-over span { font-size: 1.8rem; } .lock-over small { color: var(--muted); }
.lock-dlg .lock-ico { text-align: center; font-size: 2.2rem; }
@media (max-width: 640px) and (pointer: coarse) { .trial-bar { font-size: .78rem; padding: 8px 10px; } .trial-bar .btn.primary { flex: 1 1 100%; text-align: center; } .lock-hook .big { font-size: 1.8rem; } }

/* light / dark switch on public pages */
.theme-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.05rem; line-height: 1; cursor: pointer; display: inline-grid; place-items: center; }
.theme-btn:hover { border-color: var(--accent); }
.auth-body > .theme-btn { position: fixed; top: 14px; right: 14px; z-index: 5; }
.lp-actions { align-items: center; }

/* light / dark switch: square-ish track, knob with a moon or sun, label on the other side */
.tswitch { position: relative; flex: none; width: 112px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: #eceeed; color: #141414; transition: background .25s, border-color .25s; display: inline-block; }
.tswitch[data-mode="dark"] { background: #141414; color: #fff; border-color: rgba(255, 255, 255, .28); }
.tswitch:hover { border-color: var(--accent); }
.tswitch .ts-knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 6px; background: #fff; color: #141414; display: grid; place-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .25s; }
.tswitch[data-mode="light"] .ts-knob { transform: translateX(78px); }
.tswitch .ico-sun, .tswitch[data-mode="light"] .ico-moon { display: none; }
.tswitch[data-mode="light"] .ico-sun { display: block; }
.tswitch .ts-text { position: absolute; top: 0; bottom: 0; width: 64px; display: flex; align-items: center; justify-content: center; text-align: center; white-space: pre-line; font-size: .56rem; font-weight: 800; letter-spacing: .05em; line-height: 1.1; pointer-events: none; }
.tswitch[data-mode="dark"] .ts-text { left: 36px; }
.tswitch[data-mode="light"] .ts-text { left: 8px; }
@media (max-width: 640px) and (pointer: coarse) {
  .tswitch { width: 56px; height: 30px; }
  .tswitch .ts-knob { width: 22px; height: 22px; }
  .tswitch[data-mode="light"] .ts-knob { transform: translateX(26px); }
  .tswitch .ts-text { display: none; }
}

/* clearer hover and keyboard-focus colours: an amber tint with a visible edge */
:root { --hover: color-mix(in srgb, #FFBF3F 24%, var(--surface)); --hover-strong: color-mix(in srgb, #FFBF3F 42%, var(--surface)); }
nav a:not(.on):hover, nav a:not(.on):focus-visible, #more-btn:not(.on):hover { background: var(--hover-strong); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
nav a.on:hover { filter: brightness(1.06); }
.menu a:not(.on):hover, .menu button:hover, .menu a:not(.on):focus-visible, .menu button:focus-visible { background: var(--hover-strong); color: var(--ink); }
button:not(.primary):not(.tswitch):not(.theme-btn):not(.lp-burger):not(:disabled):hover, .btn:not(.primary):hover { background: var(--hover); border-color: var(--accent); color: var(--ink); }
button.primary:hover, .btn.primary:hover { filter: brightness(1.08); }
button.icon:hover { background: var(--hover-strong); border-color: var(--accent); }
button.txt:hover, .btn.txt:hover { background: var(--hover); border-color: var(--accent); color: var(--ink); }
button.danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.seg button:not(.on):hover { background: var(--hover-strong); color: var(--ink); }
tr.click:hover td { background: var(--hover); }
.bar-row.link:hover { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); }
.bar-row.link:hover .fill { filter: brightness(1.2); }
.drop:hover { background: var(--hover); }
button.searchbtn:hover { background: var(--hover); border-color: var(--accent); }

/* light/dark switch: a dark edge in light mode (stays dark on hover) */
.tswitch[data-mode="light"], .tswitch[data-mode="light"]:hover { border: 1.5px solid #141414; }
.tswitch[data-mode="light"]:focus-visible { outline: 2px solid #141414; outline-offset: 2px; }

/* hamburger menus: amber in light mode, normal surface in dark mode */
:root { --burger-bg: #FFBF3F; --burger-ink: #141414; --burger-line: rgba(20, 20, 20, .25); --burger-hover: #ffd070; --burger-on: #141414; --burger-on-ink: #FFBF3F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --burger-bg: var(--surface); --burger-ink: var(--ink); --burger-line: var(--line); --burger-hover: var(--hover-strong); --burger-on: #FFBF3F; --burger-on-ink: #141414; } }
:root[data-theme="dark"] { --burger-bg: var(--surface); --burger-ink: var(--ink); --burger-line: var(--line); --burger-hover: var(--hover-strong); --burger-on: #FFBF3F; --burger-on-ink: #141414; }
.lp-burger { background: var(--burger-bg); border-color: var(--burger-line); }
.lp-burger span { background: var(--burger-ink); }
.lp-burger:hover { background: var(--burger-hover); border-color: var(--burger-ink); }

/* light/dark switch: smaller on desktop (phones keep their own smaller size) */
@media (min-width: 641px), (pointer: fine) {
  .tswitch { width: 86px; height: 28px; border-radius: 7px; }
  .tswitch .ts-knob { top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 5px; }
  .tswitch .ts-knob svg { width: 13px; height: 13px; }
  .tswitch[data-mode="light"] .ts-knob { transform: translateX(58px); }
  .tswitch .ts-text { width: 50px; font-size: .5rem; }
  .tswitch[data-mode="dark"] .ts-text { left: 28px; }
  .tswitch[data-mode="light"] .ts-text { left: 6px; }
}
/* light/dark switch, final form: no words, and the free side is as wide as the knob (two equal squares) */
.tswitch, .tools .tswitch, .lp-actions .tswitch { --k: 22px; width: calc(var(--k) * 2 + 7px); height: calc(var(--k) + 6px); border-radius: 7px; }
.tswitch .ts-text { display: none !important; }
.tswitch .ts-knob, .tools .tswitch .ts-knob, .lp-actions .tswitch .ts-knob { top: 2px; left: 2px; width: var(--k); height: var(--k); border-radius: 5px; }
.tswitch .ts-knob svg, .tools .tswitch .ts-knob svg, .lp-actions .tswitch .ts-knob svg { width: calc(var(--k) - 9px); height: calc(var(--k) - 9px); }
.tswitch[data-mode="light"] .ts-knob, .tools .tswitch[data-mode="light"] .ts-knob, .lp-actions .tswitch[data-mode="light"] .ts-knob { transform: translateX(var(--k)); }
@media (max-width: 640px) and (pointer: coarse) { .tswitch, .tools .tswitch, .lp-actions .tswitch { --k: 20px; } }

/* hamburger menus look the same in dark mode as in light mode: amber with dark lines */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --burger-bg: #FFBF3F; --burger-ink: #141414; --burger-line: rgba(20, 20, 20, .25); --burger-hover: #ffd070; --burger-on: #141414; --burger-on-ink: #FFBF3F; } }
:root[data-theme="dark"] { --burger-bg: #FFBF3F; --burger-ink: #141414; --burger-line: rgba(20, 20, 20, .25); --burger-hover: #ffd070; --burger-on: #141414; --burger-on-ink: #FFBF3F; }

/* settings button: solid person-with-gear icon, clearly visible in light and dark mode */
#gear { color: var(--ink); }
#gear .gear-ico { display: block; }
#gear.on, #gear.on .gear-ico { color: var(--accent-ink); }

/* message boxes: error (soft red), success (green), info (teal), warning (amber). Same look in the app and on the sign-in pages. */
:root {
  --m-err-bg: #FEF3F2; --m-err-bd: #FDA29B; --m-err-tx: #B42318;
  --m-ok-bg: #ECFDF3; --m-ok-bd: #A6F4C5; --m-ok-tx: #067647;
  --m-info-bg: #E7F5F3; --m-info-bd: #9FD6CF; --m-info-tx: #0F3F3B;
  --m-warn-bg: #FFF6E0; --m-warn-bd: #F2D28A; --m-warn-tx: #6B4300;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --m-err-bg: #3a1a17; --m-err-bd: #7d2f28; --m-err-tx: #ffb4ab;
  --m-ok-bg: #12301d; --m-ok-bd: #25683f; --m-ok-tx: #86e3ab;
  --m-info-bg: #18302d; --m-info-bd: #2a6f68; --m-info-tx: #c2ece7;
  --m-warn-bg: #3a2f10; --m-warn-bd: #7a6320; --m-warn-tx: #fbd37a; } }
:root[data-theme="dark"] {
  --m-err-bg: #3a1a17; --m-err-bd: #7d2f28; --m-err-tx: #ffb4ab;
  --m-ok-bg: #12301d; --m-ok-bd: #25683f; --m-ok-tx: #86e3ab;
  --m-info-bg: #18302d; --m-info-bd: #2a6f68; --m-info-tx: #c2ece7;
  --m-warn-bg: #3a2f10; --m-warn-bd: #7a6320; --m-warn-tx: #fbd37a;
}
.notice { background: var(--m-warn-bg); border: 1px solid var(--m-warn-bd); color: var(--m-warn-tx); border-radius: 10px; line-height: 1.45; }
.notice::before { content: '⚠\00a0'; font-weight: 700; }
.notice.bad { background: var(--m-err-bg); border-color: var(--m-err-bd); color: var(--m-err-tx); }
.notice.ok { background: var(--m-ok-bg); border-color: var(--m-ok-bd); color: var(--m-ok-tx); }
.notice.ok::before { content: '✓\00a0'; }
.notice.info { background: var(--m-info-bg); border-color: var(--m-info-bd); color: var(--m-info-tx); }
.notice.info::before { content: 'ℹ\00a0'; }
.notice a { color: inherit; font-weight: 650; }
.notice code { color: inherit; }
/* one-line results under forms (account, passwords, billing, admin...) */
[role="status"].small.up:not(:empty), [role="alert"].small.up:not(:empty),
[role="status"].small.good-t:not(:empty) { display: inline-block; padding: 7px 11px; border: 1px solid; border-radius: 9px; line-height: 1.4; }
[role="status"].small.up:not(:empty), [role="alert"].small.up:not(:empty) { background: var(--m-err-bg); border-color: var(--m-err-bd); color: var(--m-err-tx); }
[role="status"].small.up:not(:empty)::before, [role="alert"].small.up:not(:empty)::before { content: '⚠\00a0'; font-weight: 700; }
[role="status"].small.good-t:not(:empty) { background: var(--m-ok-bg); border-color: var(--m-ok-bd); color: var(--m-ok-tx); }
[role="status"].small.good-t:not(:empty)::before { content: '✓\00a0'; font-weight: 700; }

/* settings icon: amber in dark mode */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #gear:not(.on) { color: #FFBF3F; } }
:root[data-theme="dark"] #gear:not(.on) { color: #FFBF3F; }

/* "Subscribed · 30 days left" in the settings menu: a subtle bold chip that reads well in light and dark mode */
.who-sub { display: block; margin-top: 4px; font-size: .85rem; font-weight: 700; line-height: 1.4; } /* plain text, lined up with the name above */
.who-sub.ok { color: var(--m-ok-tx); }
.who-sub.no { color: var(--m-err-tx); }

/* Tips page */
.tips-page { display: grid; gap: 8px; margin-top: 12px; }
.tip-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.tip-sec > summary { cursor: pointer; list-style: none; padding: 13px 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tip-sec > summary::-webkit-details-marker { display: none; }
.tip-sec > summary::after { content: '+'; font-size: 1.2rem; line-height: 1; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; flex: none; }
.tip-sec[open] > summary::after { content: '−'; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tip-body { padding: 0 16px 14px; line-height: 1.55; }
.tip-body ul, .tip-body ol { margin: 4px 0; padding-left: 22px; display: grid; gap: 6px; }
.tip-body table td { vertical-align: top; padding: 8px 6px; border-bottom: 1px solid var(--line); } .tip-body table td:first-child { width: 36%; }
@media (max-width: 640px) and (pointer: coarse) { .tip-body table td:first-child { width: 42%; } .tip-body { font-size: .92rem; } }

/* the 1 year / All time buttons become a drop-down on phones */
.seg .seg-more { display: none; }
@media (max-width: 640px) and (pointer: coarse) {
  .seg .seg-extra { display: none; }
  .seg .seg-more { display: block; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 500; padding: 5px 4px; border-radius: 7px; width: auto; min-width: 0; flex: 0 0 auto; }
  .seg .seg-more.on { background: var(--brand); color: var(--brand-ink); }
}

/* receipt form on a phone held upright: only the essentials, in small spacing; sideways or on desktop everything shows */
@media (max-width: 640px) and (pointer: coarse) and (orientation: portrait) {
  .fields .f-opt { display: none; }
  .fields > div:first-child { grid-column: 1 / -1; }
  .items .c-cat { display: none; }
  .items { font-size: .8rem; }
  .items th { font-size: .62rem; padding: 4px 2px; }
  .items td { padding: 3px 2px; }
  .items input, .items select { padding: 3px 4px; min-height: 30px; }
  .items .c-name { min-width: 80px; } .items .c-n { width: auto; min-width: 0; }
  .items td.c-n input[data-f="qty"] { width: 38px; padding-left: 2px; padding-right: 2px; } .items td.c-n select[data-f="unit"] { width: 46px; padding-left: 2px; padding-right: 0; }
  .items td.c-n input[data-f="unit_price"], .items td.c-n input[data-f="total"] { width: 58px; padding-left: 3px; padding-right: 2px; }
  .items td:last-child button { padding: 2px 6px; }
  .draft .fields { gap: 6px; margin-bottom: 8px; }
  .draft .fields label, .modal .fields label { font-size: .66rem; }
  .draft .notice { padding: 7px 10px; font-size: .78rem; margin: 6px 0; }
}

/* phones: the receipt form column may shrink, so nothing is pushed off the right edge */
@media (max-width: 640px) and (pointer: coarse) { .draft { grid-template-columns: minmax(0, 1fr); } .draft > div { min-width: 0; } .draft .scroll { max-width: 100%; } }

/* Admin hub and its sections */
.admin-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 14px; }
.hub-tile { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.hub-tile b { display: block; font-size: 1.02rem; margin-bottom: 3px; }
.hub-tile span { color: var(--muted); font-size: .88rem; }
.hub-tile:hover { border-color: var(--accent); background: var(--hover); }
.back-link { display: inline-block; margin: 14px 0 0; color: var(--brand); font-weight: 650; text-decoration: none; }
.back-link:hover { text-decoration: underline; }

/* ===== desktop: left sidebar, full-width content (screens 901px and wider; phones are untouched) ===== */
.sidebar, .side-toggle { display: none; }
@media (min-width: 901px), (pointer: fine) {
  :root { --sw: 252px; }
  body.side-collapsed { --sw: 72px; }
  body.has-sidebar .sidebar { display: flex; flex-direction: column; position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: var(--sw); background: var(--surface); border-right: 1px solid var(--line); padding: 14px 12px; gap: 6px; overflow: hidden auto; transition: width .22s ease; }
  body.has-sidebar header.top, body.has-sidebar main.wrap { margin-left: var(--sw); transition: margin-left .22s ease; }
  body.has-sidebar header.top .wrap { max-width: none; padding: 0 28px; }
  body.has-sidebar main.wrap { max-width: none; padding-left: 28px; padding-right: 28px; }
  body.has-sidebar header.top .brand, body.has-sidebar header.top #nav { display: none; }
  body.has-sidebar header.top .bar { flex-wrap: nowrap; gap: 12px; min-height: 58px; padding-top: 0; padding-bottom: 0; }
  body.has-sidebar .side-toggle { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 0; cursor: pointer; }
  body.has-sidebar header.top .tools { margin-left: auto; }

  .sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.12rem; white-space: nowrap; }
  .sb-brand .logo { flex: none; }
  .sb-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .sb-group { display: grid; gap: 2px; margin-bottom: 10px; }
  .sb-title { padding: 8px 12px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .sb-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 550; white-space: nowrap; }
  .sb-nav a svg { flex: none; }
  .sb-nav a.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
  .sb-nav a.lk::after { content: '🔒'; font-size: .7em; margin-left: auto; }
  .sb-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--line); margin-top: 6px; white-space: nowrap; }
  .sb-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .82rem; border: 2px solid var(--accent); }
  .sb-user .sb-label { display: grid; line-height: 1.25; overflow: hidden; } .sb-user small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }

  /* collapsed: an icon rail */
  body.side-collapsed .sb-label, body.side-collapsed .sb-title, body.side-collapsed .sb-nav a.lk::after { display: none; }
  body.side-collapsed .sidebar { padding: 14px 10px; align-items: center; }
  body.side-collapsed .sb-brand { padding: 6px 0 14px; justify-content: center; }
  body.side-collapsed .sb-nav { align-items: center; }
  body.side-collapsed .sb-group { margin-bottom: 4px; }
  body.side-collapsed .sb-nav a { width: 44px; height: 44px; padding: 0; justify-content: center; }
  body.side-collapsed .sb-user { border-top: 0; padding: 10px 0; justify-content: center; }
}
/* the sidebar's hover colours follow the site-wide hover rule (hover.css) */

/* ===== desktop dashboard look: greeting, icon KPI cards, roomier rounded cards (phones untouched) ===== */
.dash-greet, .stat .ico { display: none; }
@media (min-width: 901px), (pointer: fine) {
  body.has-sidebar { --bg: #f4f6f5; --radius: 14px; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.has-sidebar { --bg: #0f1413; } }
  :root[data-theme="dark"] body.has-sidebar { --bg: #0f1413; }
  body.has-sidebar main.wrap { padding-top: 6px; }
  body.has-sidebar .dash-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 14px 0 4px; }
  body.has-sidebar .dash-greet h1 { margin: 0; font-size: 1.6rem; }
  body.has-sidebar .dash-greet p { margin: 2px 0 0; color: var(--muted); }
  body.has-sidebar .dash-greet .btn { background: var(--ink); color: var(--surface); border-color: var(--ink); border-radius: 9px; padding: 9px 16px; font-weight: 650; text-decoration: none; }
  body.has-sidebar .dash-head > h1 { display: none; }
  body.has-sidebar .dash-head { margin: 10px 0 14px; }
  body.has-sidebar .card { padding: 20px 22px; border-radius: 14px; box-shadow: 0 1px 2px rgba(15, 30, 28, .04); }
  body.has-sidebar .grid { gap: 16px; }
  body.has-sidebar .cols-3.stats { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
  body.has-sidebar .stat { position: relative; padding: 18px 20px; }
  body.has-sidebar .stat .ico { display: grid; place-items: center; position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 10px; color: #fff; }
  body.has-sidebar .stat.k1 .ico { background: var(--brand); } body.has-sidebar .stat.k2 .ico { background: #2563eb; }
  body.has-sidebar .stat.k3 .ico { background: #d97706; } body.has-sidebar .stat.k4 .ico { background: #7c3aed; }
  body.has-sidebar .stat .lbl { font-size: .8rem; text-transform: none; letter-spacing: 0; padding-right: 52px; }
  body.has-sidebar .stat .val { font-size: 1.9rem; margin: 6px 0 4px; line-height: 1.15; }
  body.has-sidebar .stat .delta, body.has-sidebar .stat .small { font-size: .82rem; }
  body.has-sidebar .sec { margin: 26px 0 12px; } body.has-sidebar .sec h2 { font-size: 1.12rem; }
  body.has-sidebar .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.has-sidebar .cols-4 .card h2 { font-size: 1.02rem; margin: 0 0 12px; }
  body.has-sidebar .cols-4 .chart.sm { height: 250px; }
  body.has-sidebar .chart { height: 320px; } body.has-sidebar .chart.sm { height: 250px; }
  body.has-sidebar .card.scroll { padding: 6px 10px; }
}

/* ===== Reports page and the dashboard outlook line ===== */
.dash-brief { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: .9rem; }
.dash-brief b { color: var(--brand); white-space: nowrap; }
.rep-grid { margin-top: 4px; } .rep-wide { margin-top: 14px; }
.rep h2 { margin: 0; font-size: 1.05rem; } .rep h3 { margin: 16px 0 6px; font-size: .86rem; color: var(--muted); font-weight: 650; }
.rep-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rep-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 4px 0 6px; } .rep-big b { font-size: 1.8rem; letter-spacing: -.02em; }
.rep-lines { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.rep-next { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); font-size: .9rem; }
.rep .irow { align-items: flex-start; }
.fc-track { position: relative; height: 12px; border-radius: 99px; background: var(--line); margin: 8px 0 12px; overflow: visible; }
.fc-proj, .fc-spent { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; } .fc-proj { background: #f3c680; } .fc-spent { background: var(--brand); }
.fc-budget { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--ink); border-radius: 2px; }
.sc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0; }
.sc-box { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 2px; } .sc-box b { font-size: 1.5rem; } .sc-box span, .sc-box small { color: var(--muted); font-size: .8rem; }
.sc-box.good { border-color: var(--brand); background: var(--brand-soft); }
@media (min-width: 901px), (pointer: fine) { body.has-sidebar .rep-grid { gap: 16px; } body.has-sidebar .rep-big b { font-size: 2.1rem; } }

.pay-set { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pay-set input { width: 84px; }

/* sortable Price / Total column headers in the purchases lists */
.th-sort { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.th-sort span { opacity: .55; font-size: .85em; } .th-sort.on span, .th-sort:hover span { opacity: 1; }
.th-sort:hover { text-decoration: underline; }

/* ===== desktop top bar: flat icon buttons, then the user's avatar, name and role ===== */
.fs-btn, .user-chip { display: none; }
@media (min-width: 901px), (pointer: fine) {
  body.has-sidebar header.top .tools { gap: 6px; }
  body.has-sidebar .tools button.icon, body.has-sidebar .tools button.searchbtn, body.has-sidebar .tools .fs-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); }
  body.has-sidebar .tools button.searchbtn .st, body.has-sidebar .tools button.searchbtn kbd { display: none; }
  body.has-sidebar .tools button.icon svg, body.has-sidebar .tools button.searchbtn svg { width: 20px; height: 20px; }
  body.has-sidebar .tools button.icon:hover, body.has-sidebar .tools button.searchbtn:hover { background: var(--hover); color: var(--ink); border: 0; }
  body.has-sidebar .tools button.icon.on { background: var(--accent); color: var(--accent-ink); }
  body.has-sidebar #gear { color: var(--muted); } body.has-sidebar #gear.on, body.has-sidebar #gear.on .gear-ico { color: var(--accent-ink); }
  body.has-sidebar .tools .badge { top: 2px; right: 2px; background: var(--brand); }
  /* the theme switch becomes one icon that shows the mode you would switch to */
  body.has-sidebar .tools .tswitch { display: inline-grid !important; place-items: center; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 50% !important; background: none !important; color: var(--muted) !important; }
  body.has-sidebar .tools .tswitch:hover { background: var(--hover) !important; color: var(--ink) !important; }
  body.has-sidebar .tools .tswitch .ts-knob { position: static !important; transform: none !important; width: 24px !important; height: 24px !important; background: none !important; box-shadow: none !important; color: inherit !important; }
  body.has-sidebar .tools .tswitch .ts-knob svg { width: 21px !important; height: 21px !important; }
  body.has-sidebar .tools .tswitch[data-mode="dark"] .ico-moon, body.has-sidebar .tools .tswitch[data-mode="light"] .ico-sun { display: none !important; }
  body.has-sidebar .tools .tswitch[data-mode="dark"] .ico-sun, body.has-sidebar .tools .tswitch[data-mode="light"] .ico-moon { display: block !important; }
  body.has-sidebar .tools .fs-btn { cursor: pointer; } body.has-sidebar .tools .fs-btn:hover { background: var(--hover); color: var(--ink); }
  body.has-sidebar .tools .user-chip { display: inline-flex; align-items: center; gap: 10px; height: 46px; margin: 0 4px 0 8px; padding: 0 10px 0 14px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
  body.has-sidebar .tools .user-chip[hidden] { display: none; }
  body.has-sidebar .tools .user-chip:hover { background: none; }
  .uc-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .85rem; border: 2px solid var(--accent); }
  .uc-txt { display: grid; line-height: 1.2; } .uc-txt b { font-size: .92rem; white-space: nowrap; } .uc-txt small { color: var(--muted); font-size: .76rem; white-space: nowrap; }
}

.tools .ico-l { display: none; }
@media (min-width: 901px), (pointer: fine) {
  body.has-sidebar .tools .em { display: none; } body.has-sidebar .tools .ico-l { display: block; }
  body.has-sidebar .tools .user-chip:hover { border-color: var(--line); }
}
@media (min-width: 901px), (pointer: fine) {
  body.has-sidebar .tools button.icon, body.has-sidebar .tools button.searchbtn, body.has-sidebar .tools .fs-btn, body.has-sidebar #gear { color: var(--ink); }
  body.has-sidebar .tools .tswitch { color: var(--ink) !important; }
  body.has-sidebar .tools .ico-l { stroke-width: 2; }
}
button.icon.fs-btn { display: none; }
[data-sec="referrals"] h3 { margin: 18px 0 6px; font-size: .92rem; } [data-sec="referrals"] .facts { margin-top: 6px; }

.inbox { display: grid; gap: 8px; margin-bottom: 12px; } .inbox-item.new { border-left: 4px solid var(--accent); } .inbox-item .alert-t { display: flex; justify-content: space-between; gap: 10px; }
/* the bell stays visible for a member who has a message, even without a subscription */
body.unsub.has-notice #bell { display: inline-grid; }

.paywall { text-align: center; padding: 28px 20px; max-width: 560px; margin: 14px auto; } .paywall .pw-ico { font-size: 2.2rem; } .paywall h2 { margin: 6px 0; } .paywall p { margin: 8px 0; }

/* ===== desktop dashboard (dash.js): greeting, KPI cards, trend, donut, insights, lists, bottom strip ===== */
.hdr-search { display: none; }
@media (min-width: 901px), (pointer: fine) {
  body.has-sidebar .hdr-search { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; max-width: 520px; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); cursor: text; }
  body.has-sidebar .hdr-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; cursor: text; padding: 0; height: auto; }
  body.has-sidebar .hdr-search:hover { border-color: var(--brand); }
  body.has-sidebar .tools #search-btn { display: none; }
  body.has-sidebar .tools { flex: none; }

  .sb-plan { display: grid; gap: 3px; margin: 8px 4px 4px; padding: 12px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-soft); font-size: .8rem; color: var(--ink); }
  .sb-plan a { color: var(--brand); font-weight: 650; text-decoration: none; } .sb-plan a:hover { text-decoration: underline; }
  .sb-badge { display: inline-block; justify-self: start; padding: 1px 9px; border-radius: 99px; background: var(--brand); color: #fff; font-weight: 700; font-size: .72rem; } .sb-badge.warn { background: var(--accent); color: var(--accent-ink); }
  body.side-collapsed .sb-plan { display: none; }

  .dd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 16px 0 16px; flex-wrap: wrap; }
  .dd-hi { margin: 0; font-size: 1.8rem; letter-spacing: -.01em; } .dd-sub { margin: 2px 0 0; color: var(--muted); }
  .dd-top .picker { display: grid; gap: 8px; justify-items: end; margin: 0; }
  .dd-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .dd .card { padding: 20px 22px; border-radius: 16px; }
  .dd-kpi { grid-column: span 3; display: flex; align-items: center; gap: 16px; }
  .dd-ins { grid-column: 10 / span 3; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 12px; background: linear-gradient(180deg, var(--brand-soft), var(--surface) 60%); }
  .dd-trend { grid-column: span 5; } .dd-cat { grid-column: span 4; }
  .dd-rec { grid-column: span 5; } .dd-prod { grid-column: span 4; } .dd-price { grid-column: span 3; }
  .dd-bottom { grid-column: span 12; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; padding: 0 !important; }
  @media (max-width: 1320px) { .dd-kpi { grid-column: span 4; } .dd-ins { grid-column: span 12; grid-row: auto; } .dd-trend { grid-column: span 7; } .dd-cat { grid-column: span 5; } .dd-rec { grid-column: span 12; } .dd-prod, .dd-price { grid-column: span 6; } }

  .dd-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; }
  .dd-ico.teal { background: rgba(15, 118, 110, .16); color: var(--brand); } .dd-ico.violet { background: rgba(124, 58, 237, .16); color: #7c3aed; } .dd-ico.blue { background: rgba(37, 99, 235, .16); color: #2563eb; }
  .dd-ico.amber { background: rgba(217, 119, 6, .16); color: #d97706; } .dd-ico.green { background: rgba(5, 150, 105, .16); color: #059669; } .dd-ico.soft { width: 40px; height: 40px; border-radius: 12px; background: rgba(124, 58, 237, .14); color: #7c3aed; }
  .dd-kpi .lbl { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--muted); }
  .dd-val { font-size: 1.65rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .dd-chip { font-size: .78rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; } .dd-chip.down { background: rgba(5, 150, 105, .16); color: #059669; } .dd-chip.up { background: rgba(220, 38, 38, .14); color: var(--bad); }

  .dd-ch { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 12px; } .dd-ch h2 { margin: 0; font-size: 1.05rem; } .dd-ch p { margin: 0; }
  .dd-ins .dd-ch { justify-content: flex-start; } .dd-pill { margin-left: auto; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: rgba(5, 150, 105, .16); color: #059669; }
  .dd-tip { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .dd-tip:first-of-type { border-top: 0; }
  .dd-tip b { font-weight: 650; font-size: .92rem; line-height: 1.35; } .dd-tip p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .dd-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; }
  .dd-btn { display: inline-block; margin-top: auto; align-self: flex-start; padding: 8px 14px; border: 1px solid var(--brand); border-radius: 10px; color: var(--brand); font-weight: 650; font-size: .86rem; text-decoration: none; background: transparent; }
  .dd-btn:hover { background: var(--brand); color: #fff; } .dd-btn.alt { background: #4f46e5; border-color: #4f46e5; color: #fff; } .dd-btn.alt:hover { background: #4338ca; border-color: #4338ca; }

  .dd-tog { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
  .dd-tog button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font-size: .8rem; font-weight: 650; color: var(--muted); cursor: pointer; } .dd-tog button.on { background: var(--brand); color: #fff; }
  .dd-chart { height: 290px; position: relative; }
  .dd-catbody { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: center; }
  .dd-donut { position: relative; height: 190px; } .dd-donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } .dd-donut-c b { font-size: 1.02rem; } .dd-donut-c span { font-size: .72rem; color: var(--muted); }
  .dd-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .dd-leg { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 46px; gap: 8px; align-items: center; font-size: .82rem; cursor: pointer; padding: 3px 4px; border-radius: 6px; } .dd-leg:hover { background: var(--hover); }
  .dd-dot { width: 10px; height: 10px; border-radius: 50%; } .dd-ln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-leg .num { text-align: right; }

  .dd-table { width: 100%; border-collapse: collapse; } .dd-table th { text-align: left; font-size: .72rem; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); } .dd-table th.right { text-align: right; }
  .dd-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } .dd-table tr.click { cursor: pointer; } .dd-table tr.click:hover td { background: var(--hover); }
  .dd-th { width: 46px; } .dd-th img { display: block; width: 38px; height: 46px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); } .dd-th span { display: grid; place-items: center; width: 38px; height: 46px; border-radius: 6px; background: var(--bg); }
  .dd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; width: 100%; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; }
  .dd-price .dd-row { grid-template-columns: minmax(0, 1fr) auto; }
  .dd-rn { display: grid; min-width: 0; } .dd-rn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } .dd-go { color: var(--muted); }
  .dd-pc { display: grid; justify-items: end; } .dd-pc.up b { color: var(--bad); } .dd-pc.down b { color: #059669; }

  .dd-bsec { display: flex; gap: 16px; padding: 22px 24px; border-left: 1px solid var(--line); } .dd-bsec:first-child { border-left: 0; }
  .dd-bsec h3 { margin: 0 0 4px; font-size: 1rem; } .dd-bsec p { margin: 2px 0; } .dd-big { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; margin: 2px 0 8px; } .dd-big span { font-size: .9rem; color: var(--muted); font-weight: 600; }
  .dd-bsec > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .dd-bad { color: var(--bad); } .dd-good { color: #059669; }
  .dd-quick { display: grid; gap: 4px; align-content: start; } .dd-quick h3 { margin-bottom: 6px; }
  .dd-qa { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-radius: 10px; color: var(--ink); text-decoration: none; } .dd-qa:hover { background: var(--hover); } .dd-qa span { display: grid; } .dd-qa small { color: var(--muted); font-size: .76rem; }
}
@media (min-width: 901px), (pointer: fine) {
  .dd-trend { grid-column: span 4; } .dd-cat { grid-column: span 5; }
  .dd-catbody { grid-template-columns: 140px minmax(0, 1fr); gap: 14px; } .dd-donut { height: 150px; }
  .dd-leg { grid-template-columns: 10px minmax(0, 1fr) auto 40px; gap: 6px; font-size: .78rem; }
  .dd-donut-c b { font-size: .86rem; }
  @media (max-width: 1320px) { .dd-trend { grid-column: span 6; } .dd-cat { grid-column: span 6; } }
}
@media (min-width: 901px), (pointer: fine) { .dd-table .pill { white-space: nowrap; } }
@media (min-width: 901px), (pointer: fine) { body.has-sidebar .trial-bar { display: none; } } /* the sidebar plan box shows the same thing */

/* ===== phones: slide-in menu drawer, flat icon top bar, and the new dashboard stacked in one column ===== */
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; text-decoration: none; color: var(--ink); font-weight: 800; font-size: 1.12rem; white-space: nowrap; }
.sb-brand .logo { flex: none; }
.sb-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sb-group { display: grid; gap: 2px; margin-bottom: 10px; }
.sb-title { padding: 8px 12px 4px; font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.sb-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 550; white-space: nowrap; }
.sb-nav a svg { flex: none; }
.sb-nav a.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.sb-nav a.lk::after { content: '🔒'; font-size: .7em; margin-left: auto; }
.sb-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--line); margin-top: 6px; white-space: nowrap; }
.sb-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .82rem; border: 2px solid var(--accent); }
.sb-user .sb-label { display: grid; line-height: 1.25; overflow: hidden; } .sb-user small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }

.sb-close, .menu-btn, .drawer-scrim { display: none; }
/* ===== phone top bar (same look as desktop): flat icon buttons, then the user's avatar, name and role ===== */
.fs-btn, .user-chip { display: none; }
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar header.top .tools { gap: 6px; }
  body.has-sidebar .tools button.icon, body.has-sidebar .tools button.searchbtn, body.has-sidebar .tools .fs-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); }
  body.has-sidebar .tools button.searchbtn .st, body.has-sidebar .tools button.searchbtn kbd { display: none; }
  body.has-sidebar .tools button.icon svg, body.has-sidebar .tools button.searchbtn svg { width: 20px; height: 20px; }
  body.has-sidebar .tools button.icon:hover, body.has-sidebar .tools button.searchbtn:hover { background: var(--hover); color: var(--ink); border: 0; }
  body.has-sidebar .tools button.icon.on { background: var(--accent); color: var(--accent-ink); }
  body.has-sidebar #gear { color: var(--muted); } body.has-sidebar #gear.on, body.has-sidebar #gear.on .gear-ico { color: var(--accent-ink); }
  body.has-sidebar .tools .badge { top: 2px; right: 2px; background: var(--brand); }
  /* the theme switch becomes one icon that shows the mode you would switch to */
  body.has-sidebar .tools .tswitch { display: inline-grid !important; place-items: center; width: 40px !important; height: 40px !important; border: 0 !important; border-radius: 50% !important; background: none !important; color: var(--muted) !important; }
  body.has-sidebar .tools .tswitch:hover { background: var(--hover) !important; color: var(--ink) !important; }
  body.has-sidebar .tools .tswitch .ts-knob { position: static !important; transform: none !important; width: 24px !important; height: 24px !important; background: none !important; box-shadow: none !important; color: inherit !important; }
  body.has-sidebar .tools .tswitch .ts-knob svg { width: 21px !important; height: 21px !important; }
  body.has-sidebar .tools .tswitch[data-mode="dark"] .ico-moon, body.has-sidebar .tools .tswitch[data-mode="light"] .ico-sun { display: none !important; }
  body.has-sidebar .tools .tswitch[data-mode="dark"] .ico-sun, body.has-sidebar .tools .tswitch[data-mode="light"] .ico-moon { display: block !important; }
  body.has-sidebar .tools .fs-btn { cursor: pointer; } body.has-sidebar .tools .fs-btn:hover { background: var(--hover); color: var(--ink); }
  body.has-sidebar .tools .user-chip { display: inline-flex; align-items: center; gap: 10px; height: 46px; margin: 0 4px 0 8px; padding: 0 10px 0 14px; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; }
  body.has-sidebar .tools .user-chip[hidden] { display: none; }
  body.has-sidebar .tools .user-chip:hover { background: none; }
  .uc-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: .85rem; border: 2px solid var(--accent); }
  .uc-txt { display: grid; line-height: 1.2; } .uc-txt b { font-size: .92rem; white-space: nowrap; } .uc-txt small { color: var(--muted); font-size: .76rem; white-space: nowrap; }
}

.tools .ico-l { display: none; }
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .tools .em { display: none; } body.has-sidebar .tools .ico-l { display: block; }
  body.has-sidebar .tools .user-chip:hover { border-color: var(--line); }
}
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .tools button.icon, body.has-sidebar .tools button.searchbtn, body.has-sidebar .tools .fs-btn, body.has-sidebar #gear { color: var(--ink); }
  body.has-sidebar .tools .tswitch { color: var(--ink) !important; }
  body.has-sidebar .tools .ico-l { stroke-width: 2; }
}

.dd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 16px 0 16px; flex-wrap: wrap; }
.dd-hi { margin: 0; font-size: 1.8rem; letter-spacing: -.01em; } .dd-sub { margin: 2px 0 0; color: var(--muted); }
.dd-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; }
.dd-ico.teal { background: rgba(15, 118, 110, .16); color: var(--brand); } .dd-ico.violet { background: rgba(124, 58, 237, .16); color: #7c3aed; } .dd-ico.blue { background: rgba(37, 99, 235, .16); color: #2563eb; }
.dd-ico.amber { background: rgba(217, 119, 6, .16); color: #d97706; } .dd-ico.green { background: rgba(5, 150, 105, .16); color: #059669; } .dd-ico.soft { width: 40px; height: 40px; border-radius: 12px; background: rgba(124, 58, 237, .14); color: #7c3aed; }
.dd-kpi .lbl { text-transform: none; letter-spacing: 0; font-size: .85rem; color: var(--muted); }
.dd-val { font-size: 1.65rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dd-chip { font-size: .78rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; } .dd-chip.down { background: rgba(5, 150, 105, .16); color: #059669; } .dd-chip.up { background: rgba(220, 38, 38, .14); color: var(--bad); }
.dd-ch { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-bottom: 12px; } .dd-ch h2 { margin: 0; font-size: 1.05rem; } .dd-ch p { margin: 0; }
.dd-ins .dd-ch { justify-content: flex-start; } .dd-pill { margin-left: auto; font-size: .7rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: rgba(5, 150, 105, .16); color: #059669; }
.dd-tip { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); } .dd-tip:first-of-type { border-top: 0; }
.dd-tip b { font-weight: 650; font-size: .92rem; line-height: 1.35; } .dd-tip p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dd-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; }
.dd-btn { display: inline-block; margin-top: auto; align-self: flex-start; padding: 8px 14px; border: 1px solid var(--brand); border-radius: 10px; color: var(--brand); font-weight: 650; font-size: .86rem; text-decoration: none; background: transparent; }
.dd-btn:hover { background: var(--brand); color: #fff; } .dd-btn.alt { background: #4f46e5; border-color: #4f46e5; color: #fff; } .dd-btn.alt:hover { background: #4338ca; border-color: #4338ca; }
.dd-tog { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.dd-tog button { border: 0; background: none; padding: 5px 12px; border-radius: 8px; font-size: .8rem; font-weight: 650; color: var(--muted); cursor: pointer; } .dd-tog button.on { background: var(--brand); color: #fff; }
.dd-chart { height: 290px; position: relative; }
.dd-catbody { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; align-items: center; }
.dd-donut { position: relative; height: 190px; } .dd-donut-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; } .dd-donut-c b { font-size: 1.02rem; } .dd-donut-c span { font-size: .72rem; color: var(--muted); }
.dd-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dd-leg { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 46px; gap: 8px; align-items: center; font-size: .82rem; cursor: pointer; padding: 3px 4px; border-radius: 6px; } .dd-leg:hover { background: var(--hover); }
.dd-dot { width: 10px; height: 10px; border-radius: 50%; } .dd-ln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-leg .num { text-align: right; }
.dd-table { width: 100%; border-collapse: collapse; } .dd-table th { text-align: left; font-size: .72rem; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); } .dd-table th.right { text-align: right; }
.dd-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } .dd-table tr.click { cursor: pointer; } .dd-table tr.click:hover td { background: var(--hover); }
.dd-th { width: 46px; } .dd-th img { display: block; width: 38px; height: 46px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); } .dd-th span { display: grid; place-items: center; width: 38px; height: 46px; border-radius: 6px; background: var(--bg); }
.dd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; width: 100%; padding: 10px 6px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; }
.dd-price .dd-row { grid-template-columns: minmax(0, 1fr) auto; }
.dd-rn { display: grid; min-width: 0; } .dd-rn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } .dd-go { color: var(--muted); }
.dd-pc { display: grid; justify-items: end; } .dd-pc.up b { color: var(--bad); } .dd-pc.down b { color: #059669; }
.dd-bsec { display: flex; gap: 16px; padding: 22px 24px; border-left: 1px solid var(--line); } .dd-bsec:first-child { border-left: 0; }
.dd-bsec h3 { margin: 0 0 4px; font-size: 1rem; } .dd-bsec p { margin: 2px 0; } .dd-big { font-size: 1.7rem; font-weight: 750; letter-spacing: -.02em; margin: 2px 0 8px; } .dd-big span { font-size: .9rem; color: var(--muted); font-weight: 600; }
.dd-bsec > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .dd-bad { color: var(--bad); } .dd-good { color: #059669; }
.dd-quick { display: grid; gap: 4px; align-content: start; } .dd-quick h3 { margin-bottom: 6px; }
.dd-qa { display: flex; align-items: center; gap: 12px; padding: 6px 4px; border-radius: 10px; color: var(--ink); text-decoration: none; } .dd-qa:hover { background: var(--hover); } .dd-qa span { display: grid; } .dd-qa small { color: var(--muted); font-size: .76rem; }
.sb-plan { display: grid; gap: 3px; margin: 8px 4px 4px; padding: 12px; border: 1px solid var(--brand); border-radius: 12px; background: var(--brand-soft); font-size: .8rem; color: var(--ink); }
.sb-plan a { color: var(--brand); font-weight: 650; text-decoration: none; }
.sb-plan[hidden] { display: none; }
.sb-badge { display: inline-block; justify-self: start; padding: 1px 9px; border-radius: 99px; background: var(--brand); color: #fff; font-weight: 700; font-size: .72rem; } .sb-badge.warn { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar { padding-bottom: 20px; }
  body.drawer-open { overflow: hidden; }
  body.has-sidebar .sidebar { display: flex; flex-direction: column; position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; width: min(86vw, 330px); background: var(--surface); border-right: 1px solid var(--line); padding: 14px 12px 20px; gap: 6px; overflow: hidden auto; transform: translateX(-104%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
  body.drawer-open .sidebar { transform: none; visibility: visible; transition: transform .25s ease; }
  body.has-sidebar .drawer-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(5, 12, 11, .55); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.drawer-open .drawer-scrim { opacity: 1; pointer-events: auto; }
  .sb-close { display: grid; place-items: center; position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; cursor: pointer; }
  .sb-nav a { padding: 12px 12px; }
  .sb-brand { padding-right: 44px; }

  body.has-sidebar header.top .bar { flex-wrap: nowrap; gap: 2px; padding-top: 6px; padding-bottom: 6px; min-height: 60px; align-items: center; }
  body.has-sidebar header.top #nav, body.has-sidebar header.top .side-toggle, body.has-sidebar .hdr-search, body.has-sidebar .tools .fs-btn { display: none !important; }
  body.has-sidebar header.top .brand { font-size: 0; gap: 0; flex: none; } body.has-sidebar header.top .brand .logo { width: 34px; height: 34px; font-size: 1.05rem; }
  body.has-sidebar .menu-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; }
  body.has-sidebar header.top .tools { margin-left: auto; order: 0; gap: 0; flex: none; }
  body.has-sidebar .tools button.icon, body.has-sidebar .tools button.searchbtn, body.has-sidebar .tools .tswitch { width: 40px !important; height: 40px !important; }
  body.has-sidebar .tools .user-chip { height: 44px; margin: 0 2px; padding: 0 4px; border-left: 0; gap: 0; }
  body.has-sidebar .tools .user-chip .uc-txt { display: none; }
  .uc-av { width: 36px; height: 36px; font-size: .8rem; }
  body.has-sidebar .trial-bar { display: none; }

  /* the dashboard, one column */
  .dd-top { display: block; margin: 6px 0 12px; } .dd-hi { margin: 0; font-size: 1.45rem; } .dd-sub { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
  .dd-top .picker { margin-top: 10px; }
  .dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .dd .card { padding: 16px; border-radius: 16px; }
  .dd-kpi { display: flex; align-items: center; gap: 12px; padding: 14px !important; } .dd-kpi:first-child { grid-column: 1 / -1; }
  .dd-kpi .dd-ico { width: 42px; height: 42px; border-radius: 12px; } .dd-val { font-size: 1.35rem; }
  .dd-trend, .dd-cat, .dd-ins, .dd-rec, .dd-prod, .dd-price, .dd-bottom { grid-column: 1 / -1; }
  .dd-trend { order: 1; } .dd-cat { order: 2; } .dd-ins { order: 3; display: flex; flex-direction: column; gap: 10px; } .dd-rec { order: 4; } .dd-prod { order: 5; } .dd-price { order: 6; } .dd-bottom { order: 7; }
  .dd-chart { height: 230px; position: relative; }
  .dd-catbody { display: grid; grid-template-columns: 1fr; gap: 12px; } .dd-donut { position: relative; height: 190px; width: 190px; margin: 0 auto; }
  .dd-leg { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 44px; gap: 8px; align-items: center; font-size: .84rem; padding: 5px 4px; }
  .dd-bottom { display: grid; grid-template-columns: 1fr; padding: 0 !important; }
  .dd-bsec { border-left: 0; border-top: 1px solid var(--line); padding: 16px; } .dd-bsec:first-child { border-top: 0; }
  .dd-table th:nth-child(4), .dd-table td:nth-child(4) { display: none; }
  .dd-tog button { padding: 5px 9px; }
}
@media (max-width: 900px) and (pointer: coarse) {
  .dd-kpi:not(:first-child) { flex-direction: column; align-items: flex-start; gap: 8px; }
  .dd-trend .dd-ch { flex-wrap: wrap; } .dd-tog button { white-space: nowrap; }
  .dd-kpi .lbl { font-size: .8rem; }
}
@media (max-width: 900px) and (pointer: coarse) { body.has-sidebar .sidebar .sb-nav { order: 0; flex: 1 1 auto; flex-basis: auto; } }

/* ===== phones: app-style look (bottom tab bar, round header buttons, hero card, quick actions, activity list) ===== */
.tabbar, .sb-theme { display: none; }
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar { padding-bottom: 96px; }
  body.has-sidebar.no-tabbar { padding-bottom: 20px; }

  /* header: soft round buttons */
  body.has-sidebar header.top { background: var(--bg); border-bottom: 0; position: sticky; top: 0; z-index: 20; }
  body.has-sidebar header.top .bar { min-height: 62px; padding: 8px 14px; gap: 8px; }
  body.has-sidebar header.top .menu-btn, body.has-sidebar .tools button.icon, body.has-sidebar .tools button.searchbtn { width: 42px !important; height: 42px !important; border-radius: 50% !important; background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: 0 1px 3px rgba(15, 30, 28, .06); margin: 0; }
  body.has-sidebar .tools #theme, body.has-sidebar .tools #gear { display: none !important; }
  body.has-sidebar .tools { gap: 8px; }
  body.has-sidebar .tools .user-chip { padding: 0; margin: 0; height: 42px; }
  .uc-av { width: 42px; height: 42px; border-width: 2px; }
  body.has-sidebar header.top .brand { margin-left: 2px; }
  body.has-sidebar header.top .brand .logo { width: 36px; height: 36px; border-radius: 12px; }

  /* bottom tab bar */
  body.has-sidebar .tabbar { display: grid; grid-template-columns: 1fr 1fr 76px 1fr 1fr; align-items: end; position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); height: 66px; padding: 0 6px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 10px 30px rgba(10, 30, 28, .18); }
  body.no-tabbar .tabbar, body.drawer-open .tabbar { display: none; }
  .tabbar a, .tabbar button { display: grid; justify-items: center; gap: 2px; padding: 8px 2px 2px; border: 0; background: none; color: var(--muted); font-size: .68rem; font-weight: 600; text-decoration: none; cursor: pointer; }
  .tabbar a.on, .tabbar button.on { color: var(--brand); }
  .tabbar a.on span, .tabbar button.on span { position: relative; } .tabbar a.on span::after, .tabbar button.on span::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 14px; height: 3px; margin-left: -7px; border-radius: 3px; background: var(--accent); }
  .tabbar .tab-add { width: 58px; height: 58px; margin: 0 auto 14px; padding: 0; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 20px rgba(217, 140, 0, .45); border: 4px solid var(--bg); }
  .tabbar .tab-add.on { color: var(--accent-ink); }
  .drawer-scrim { z-index: 65; }

  /* dashboard */
  .mb { display: grid; gap: 14px; padding-top: 2px; }
  .mb-hello h1 { margin: 0; font-size: 1.15rem; font-weight: 400; color: var(--muted); } .mb-hello h1 b { font-weight: 750; color: var(--ink); } /* "Good afternoon, Name 👋" on one line, the name bold */
  .mb-hero { position: relative; overflow: hidden; padding: 18px 18px 14px; border-radius: 26px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, #1fb59e 0%, rgba(31, 181, 158, 0) 55%), linear-gradient(145deg, #06302d 0%, #0b5f58 60%, #0f766e 100%); box-shadow: 0 14px 30px rgba(8, 70, 64, .28); }
  .mb-hero-top { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; opacity: .9; }
  .mb-eyebtn { display: grid; place-items: center; width: 34px; height: 34px; border: 0 !important; border-radius: 50%; background: rgba(255, 255, 255, .14) !important; color: #fff !important; cursor: pointer; }
  .mb-big { margin: 6px 0 2px; font-size: 2.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
  .mb-hero-sub { display: flex; gap: 8px; align-items: center; font-size: .82rem; opacity: .92; flex-wrap: wrap; }
  .mb-delta { padding: 2px 9px; border-radius: 99px; font-weight: 700; background: rgba(255, 255, 255, .18); } .mb-delta.down { color: #86efac; } .mb-delta.up { color: #fecaca; }
  .mb-spark { height: 96px; margin: 8px -6px 6px; position: relative; }
  .mb-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .22); }
  .mb-chips button { padding: 7px 0; border: 0 !important; border-radius: 12px; background: none !important; color: rgba(255, 255, 255, .8) !important; font-size: .76rem; font-weight: 700; cursor: pointer; }
  .mb-chips button.on { background: #fff !important; color: #06302d !important; }
  .mb-nav { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; }
  .mb-nav button { height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.2rem; }
  .mb-nav select { height: 40px; border-radius: 20px; text-align: center; text-align-last: center; font-weight: 650; background: var(--surface); }
  .mb-range { text-align: center; color: var(--muted); font-size: .86rem; }

  .mb-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .mb-act { display: grid; justify-items: center; gap: 6px; font-size: .78rem; font-weight: 650; color: var(--ink); text-decoration: none; }
  .mb-act span { display: grid; place-items: center; width: 100%; aspect-ratio: 1.25; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--brand); box-shadow: 0 1px 3px rgba(15, 30, 28, .05); }
  .mb-act:nth-child(2) span { color: #7c3aed; } .mb-act:nth-child(3) span { color: #2563eb; } .mb-act:nth-child(4) span { color: #d97706; }

  .mb-h { margin: 6px 0 0; font-size: 1.08rem; } .mb-h span { color: var(--muted); font-size: .8rem; font-weight: 500; } .mb-h.in { margin: 0 0 10px; }
  .mb-rowhead { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; } .mb-rowhead .mb-h { margin: 0; } .mb-rowhead a { color: var(--brand); font-size: .86rem; font-weight: 650; text-decoration: none; }
  .mb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mb-tile { display: grid; gap: 2px; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
  .mb-tile span { color: var(--muted); font-size: .8rem; } .mb-tile b { font-size: 1.22rem; letter-spacing: -.01em; } .mb-tile small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .mb-budget { padding: 18px; border-radius: 24px; background: #0f1413; color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .22); }
  .mb-b-top { display: flex; justify-content: space-between; align-items: baseline; opacity: .92; } .mb-b-top b { font-size: 1.7rem; }
  .mb-b-line { margin: 4px 0 10px; font-size: 1.15rem; font-weight: 700; } .mb-b-line small { font-weight: 500; opacity: .7; }
  .mb-b-track { height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .14); overflow: hidden; } .mb-b-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #34d399, #FFBF3F); }
  .mb-b-note { margin-top: 10px; font-size: .82rem; opacity: .75; }
  .mb-b-btn { display: inline-block; margin-top: 12px; padding: 10px 18px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; }

  .mb-card { padding: 16px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
  .mb-cat { display: grid; grid-template-columns: 124px 1fr; gap: 14px; align-items: center; } .mb-donut { position: relative; height: 124px; }
  .mb-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .mb-cat li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; font-size: .86rem; cursor: pointer; }
  .mb-cat li i { width: 10px; height: 10px; border-radius: 50%; } .mb-cat li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .mb-snap { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; } .mb-snap::-webkit-scrollbar { display: none; }
  .mb-tip { flex: 0 0 78%; scroll-snap-align: start; display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 22px; background: linear-gradient(160deg, var(--brand-soft), var(--surface)); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .mb-tip-i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(217, 119, 6, .16); color: #d97706; }
  .mb-tip b { font-size: .95rem; line-height: 1.3; } .mb-tip small { color: var(--muted); font-size: .8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mb-tip em { font-style: normal; font-weight: 700; font-size: .8rem; color: #059669; }

  .mb-list { display: grid; padding: 4px 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
  .mb-tx { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border: 0 !important; border-bottom: 1px solid var(--line) !important; border-radius: 0 !important; background: none !important; color: var(--ink); text-decoration: none; text-align: left; width: 100%; cursor: pointer; } .mb-tx:last-child { border-bottom: 0 !important; }
  .mb-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #fff; font-weight: 800; } .mb-av.soft { background: var(--bg); color: var(--ink); }
  .mb-tx-m { display: grid; min-width: 0; } .mb-tx-m b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } .mb-tx-m small { color: var(--muted); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mb-tx-a { font-size: .95rem; } .mb-pc.up { color: var(--bad); } .mb-pc.down { color: #059669; }
  .hide-amt .amt { filter: blur(9px); user-select: none; }
}
@media (max-width: 900px) and (pointer: coarse) { .mb-budget { border: 1px solid rgba(255,255,255,.1); } }
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .tabbar a, body.has-sidebar .tabbar button { background: none !important; border-radius: 0 !important; color: var(--muted); padding: 8px 2px 2px; }
  body.has-sidebar .tabbar a.on, body.has-sidebar .tabbar button.on { background: none !important; color: var(--brand); }
  body.has-sidebar .tabbar a.tab-add, body.has-sidebar .tabbar a.tab-add.on { background: var(--accent) !important; color: var(--accent-ink); border-radius: 50% !important; padding: 0; }
  .tabbar span { line-height: 1.2; }
}

/* ===== offline bar and waiting photos ===== */
.off-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 9px 16px; font-size: .86rem; background: var(--brand-soft); color: var(--ink); border-bottom: 1px solid var(--line); }
.off-bar[hidden] { display: none; }
.off-bar.off { background: #fef3c7; color: #3b2a00; } .off-bar.bad { background: var(--m-err-bg); color: var(--m-err-tx); }
.off-bar button { margin-left: auto; padding: 4px 12px; border-radius: 99px; font-size: .8rem; }
@media (min-width: 901px), (pointer: fine) { body.has-sidebar .off-bar { margin-left: var(--sw); } }
.pp { margin: 10px 0; } .pp-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); } .pp-row img { width: 44px; height: 54px; object-fit: cover; border-radius: 8px; } .pp-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending-list { margin: 8px 0; display: grid; gap: 3px; }

/* ===== phones, round 2: tighter top bar with a light/dark button, a smaller hero and chart, filled action tiles, a bottom bar that always fits ===== */
@media (max-width: 900px) and (pointer: coarse) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body.has-sidebar { overflow-x: clip; max-width: 100%; } /* clip, not hidden: hidden on both made the body its own scroll box, so the sticky top bar scrolled away */
  body.has-sidebar header.top .bar { min-height: 54px; padding: 6px 12px; gap: 6px; }
  body.has-sidebar header.top .brand .logo { width: 32px; height: 32px; border-radius: 10px; font-size: .95rem; }
  body.has-sidebar header.top .menu-btn, body.has-sidebar .tools button.icon, body.has-sidebar .tools button.searchbtn, body.has-sidebar .tools .tswitch { width: 36px !important; height: 36px !important; }
  body.has-sidebar .menu-btn svg, body.has-sidebar .tools .ico-l, body.has-sidebar .tools button.icon svg, body.has-sidebar .tools button.searchbtn svg { width: 18px !important; height: 18px !important; }
  body.has-sidebar .tools { gap: 6px !important; }
  body.has-sidebar .tools #theme { display: inline-grid !important; border: 1px solid var(--line) !important; background: var(--surface) !important; box-shadow: 0 1px 3px rgba(15, 30, 28, .06); }
  body.has-sidebar .tools #theme .ts-knob svg { width: 17px !important; height: 17px !important; }
  body.has-sidebar .tools .user-chip { height: 36px; } .uc-av { width: 34px; height: 34px; font-size: .72rem; }
  body.has-sidebar .tools .badge { min-width: 15px; height: 15px; line-height: 15px; font-size: .6rem; top: -2px; right: -2px; }

  .mb { gap: 12px; }
  .mb-hello h1 { font-size: 1.02rem; }
  .mb-hero { padding: 14px 16px 12px; border-radius: 22px; }
  .mb-hero-top { font-size: .78rem; } .mb-eyebtn { width: 30px; height: 30px; } .mb-eyebtn svg { width: 16px; height: 16px; }
  .mb-big { font-size: 1.65rem; margin: 2px 0; } .mb-hero-sub { font-size: .74rem; gap: 6px; } .mb-delta { padding: 1px 7px; }
  .mb-spark { height: 58px; margin: 6px -4px 8px; }
  .mb-chips { gap: 2px; padding: 3px; border-radius: 13px; } .mb-chips button { padding: 5px 0; font-size: .7rem; border-radius: 10px; }
  .mb-nav { grid-template-columns: 34px 1fr 34px; gap: 6px; } .mb-nav button { height: 34px; font-size: 1rem; } .mb-nav select { height: 34px; font-size: .84rem; border-radius: 17px; padding: 0 10px; }

  .mb-acts { gap: 8px; }
  .mb-act { gap: 5px; font-size: .7rem; font-weight: 600; color: var(--ink); }
  .mb-act span { width: 52px; height: 52px; aspect-ratio: auto; border: 0; border-radius: 16px; color: #fff; box-shadow: 0 6px 14px rgba(15, 30, 28, .16); }
  .mb-act span svg { width: 22px; height: 22px; }
  .mb-act:nth-child(1) span { background: linear-gradient(145deg, #12a08f, #0b5f58); color: #fff; }
  .mb-act:nth-child(2) span { background: linear-gradient(145deg, #a78bfa, #7c3aed); color: #fff; }
  .mb-act:nth-child(3) span { background: linear-gradient(145deg, #4ade80, #16a34a); color: #fff; }
  .mb-act:nth-child(4) span { background: linear-gradient(145deg, #fbbf24, #d97706); color: #fff; }

  .mb-h { font-size: .98rem; } .mb-h span { font-size: .74rem; } .mb-rowhead a { font-size: .8rem; }
  .mb-tiles { gap: 8px; } .mb-tile { padding: 11px 12px; border-radius: 16px; } .mb-tile span { font-size: .72rem; } .mb-tile b { font-size: 1.02rem; } .mb-tile small { font-size: .68rem; }
  .mb-budget { padding: 14px 16px; border-radius: 20px; } .mb-b-top { font-size: .82rem; } .mb-b-top b { font-size: 1.3rem; } .mb-b-line { font-size: .98rem; margin: 2px 0 8px; } .mb-b-track { height: 10px; } .mb-b-note { font-size: .74rem; margin-top: 8px; }
  .mb-card { padding: 14px; border-radius: 18px; } .mb-cat { grid-template-columns: 104px 1fr; } .mb-donut { height: 104px; } .mb-cat li { font-size: .8rem; }
  .mb-tip { padding: 12px; border-radius: 18px; } .mb-tip b { font-size: .86rem; } .mb-tip small { font-size: .74rem; }
  .mb-snap { margin: 0; padding: 2px 0 6px; }
  .mb-list { padding: 2px 12px; border-radius: 18px; } .mb-tx { grid-template-columns: 38px 1fr auto; gap: 10px; padding: 9px 0; } .mb-av { width: 38px; height: 38px; border-radius: 12px; font-size: .86rem; } .mb-tx-m b { font-size: .86rem; } .mb-tx-m small { font-size: .7rem; } .mb-tx-a { font-size: .84rem; }

  /* bottom bar: shorter, always fully on screen */
  body.has-sidebar .tabbar { height: 60px; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); padding: 0 4px 5px; border-radius: 22px; grid-template-columns: 1fr 1fr 64px 1fr 1fr; }
  body.has-sidebar .tabbar a, body.has-sidebar .tabbar button { padding: 6px 0 0 !important; gap: 1px; font-size: .62rem; }
  .tabbar svg { width: 21px; height: 21px; }
  body.has-sidebar .tabbar a.tab-add, body.has-sidebar .tabbar a.tab-add.on { width: 50px; height: 50px; margin: 0 auto 12px; border-width: 3px; }
  .tabbar a.tab-add svg { width: 24px; height: 24px; }
  body.has-sidebar { padding-bottom: 88px; }
}
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .tools #theme.tswitch[data-mode] { border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--ink) !important; }
  body.has-sidebar .tabbar { height: 62px; padding-bottom: 8px; }
  .tabbar a.on span::after, .tabbar button.on span::after { display: none; }
  body.has-sidebar .tabbar a.on svg, body.has-sidebar .tabbar button.on svg { filter: drop-shadow(0 2px 4px rgba(15, 118, 110, .25)); }
  body.has-sidebar .tabbar a.on span, body.has-sidebar .tabbar button.on span { font-weight: 800; }
}

/* phones: the bottom bar is a solid, square bar fixed to the bottom edge (nothing shows around or under it) */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .tabbar { left: 0; right: 0; bottom: 0; height: calc(64px + env(safe-area-inset-bottom)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-radius: 0; border: 0; border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -4px 16px rgba(15, 30, 28, .08); grid-template-columns: repeat(5, 1fr); align-items: center; transform: translateZ(0); will-change: transform; }
  body.has-sidebar .tabbar a, body.has-sidebar .tabbar button { display: grid; justify-items: center; align-content: center; gap: 3px; height: 100%; padding: 0 !important; font-size: .66rem; }
  body.has-sidebar .tabbar a svg, body.has-sidebar .tabbar button svg { width: 22px; height: 22px; box-sizing: content-box; padding: 4px 16px; border-radius: 99px; transition: background .15s; filter: none !important; }
  body.has-sidebar .tabbar a.on svg, body.has-sidebar .tabbar button.on svg { background: var(--brand-soft); color: var(--brand); }
  /* the add button sits inside the bar, not floating above it */
  body.has-sidebar .tabbar a.tab-add, body.has-sidebar .tabbar a.tab-add.on { width: 46px; height: 46px; margin: 0 auto; padding: 0 !important; border: 0; border-radius: 50% !important; background: var(--accent) !important; color: var(--accent-ink); box-shadow: 0 4px 12px rgba(217, 140, 0, .35); align-self: center; justify-self: center; }
  body.has-sidebar .tabbar a.tab-add svg { width: 24px; height: 24px; padding: 0; background: none !important; }
  body.has-sidebar { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* expenses from your notes: one card per row, fields wrap on phones */
.nt-list { display: grid; gap: 10px; margin: 8px 0 12px; }
.nt-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.nt-row.flag { border-color: #e0a100; box-shadow: inset 4px 0 0 #e0a100; }
.nt-grid { display: grid; grid-template-columns: 140px minmax(0, 1.2fr) minmax(0, 1.6fr) 120px 140px 160px; gap: 8px; }
.nt-grid label { display: grid; gap: 3px; font-size: .75rem; color: var(--muted); min-width: 0; }
.nt-grid input, .nt-grid select { width: 100%; min-width: 0; }
.nt-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.nt-warn { color: #b77800; }
@media (max-width: 900px) and (pointer: coarse) { .nt-grid { grid-template-columns: 1fr 1fr; } .nt-grid .nt-what, .nt-grid .nt-cat { grid-column: 1 / -1; } }

.nt-local { margin: 0 0 8px; font-size: .85rem; } .nt-local input { margin: 0; flex: none; width: 18px; height: 18px; }

/* app lock (Android app): the page stays hidden until the passcode is entered */
html.pin-locked body > :not(#pin-lock) { visibility: hidden !important; }
#pin-lock { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); background: #051f1d; color: #fff; outline: none; overflow-y: auto; }
#pin-lock .pl-box { width: min(320px, 100%); text-align: center; }
#pin-lock .pl-logo { width: 56px; height: 56px; border-radius: 14px; margin-bottom: 10px; }
#pin-lock .pl-title { margin: 0 0 4px; font-size: 1.2rem; color: #fff; }
#pin-lock .pl-sub { margin: 0 0 16px; font-size: .85rem; color: rgba(255,255,255,.7); min-height: 1.2em; }
#pin-lock .pl-dots { display: flex; justify-content: center; gap: 16px; margin: 6px 0 8px; }
#pin-lock .pl-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); transition: background .1s; }
#pin-lock .pl-dots i.on { background: #4cc2b2; border-color: #4cc2b2; }
#pin-lock .pl-dots.shake { animation: pl-shake .35s; }
@keyframes pl-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
#pin-lock .pl-msg { min-height: 2.6em; margin: 0 0 8px; font-size: .85rem; color: #fbbf24; }
#pin-lock .pl-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 14px 22px; justify-content: center; }
/* keys: just the number; a soft circle only while pressed (no square tap flash, no stuck hover colour) */
#pin-lock .pl-keys button { width: 72px; height: 72px; border-radius: 50%; border: 0; background: transparent !important; color: #fff !important; font-size: 1.8rem; font-weight: 500; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: background .12s; }
#pin-lock .pl-keys button:hover, #pin-lock .pl-keys button:focus { background: transparent !important; box-shadow: none !important; outline: none; }
#pin-lock .pl-keys button.down, #pin-lock .pl-keys button.down:hover { background: rgba(76, 194, 178,.32) !important; }
#pin-lock .pl-keys button:focus-visible { outline: 2px solid #4cc2b2; outline-offset: 2px; }
#pin-lock .pl-links button { -webkit-tap-highlight-color: transparent; }
#pin-lock .pl-links button:hover, #pin-lock .pl-links button:focus { background: none !important; color: #5eead4 !important; box-shadow: none !important; }
#pin-lock .pl-links { display: grid; gap: 6px; margin-top: 18px; }
#pin-lock .pl-links button { background: none; border: 0; color: #5eead4; font-size: .9rem; padding: 6px; }

/* phones: a short list for picking a day/week/month that closes when you tap anywhere else */
.sel-pop-bg { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.25); }
.sel-pop { position: fixed; z-index: 81; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.3); padding: 4px; }
.sel-pop button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-radius: 8px; padding: 10px 12px; color: var(--ink); font: inherit; font-size: .9rem; }
.sel-pop button.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

/* shopping list: Save, Copy and Share under the list */
.list-share { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); flex-wrap: wrap; align-items: center; }

/* M-Pesa: statement upload, search with "add as general shopping", money in and out */
.mp-up { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) and (pointer: coarse) { .mp-up { grid-template-columns: 1fr; } }
.mp-sms { margin-top: 10px; } .mp-sms summary { cursor: pointer; font-size: .88rem; color: var(--muted); padding: 4px 0; } .mp-sms textarea { margin-top: 6px; }
.mp-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; } .mp-search input { flex: 1 1 240px; }
.mp-flow td, .mp-flow th { white-space: nowrap; }


/* TrackstatementKe offer for long M-Pesa statements */
.ts-card { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line)); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 55%), var(--surface); }
.ts-card h2 { margin: 10px 0 6px; font-size: 1.25rem; }
.ts-card p { margin: 0 0 10px; max-width: 70ch; line-height: 1.55; }
.ts-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; background: color-mix(in srgb, #FFBF3F 22%, transparent); color: var(--ink); font-size: .78rem; font-weight: 700; }
.ts-points { display: flex; flex-wrap: wrap; gap: 6px 18px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .88rem; }
.ts-points li::before { content: '✓'; color: var(--brand); font-weight: 800; margin-right: 6px; }
.ts-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ts-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 99px; background: linear-gradient(135deg, #0f766e, #14b8a6); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 8px 22px rgba(15, 118, 110, .35); transition: transform .15s, box-shadow .15s; }
.ts-btn:hover, .ts-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(15, 118, 110, .45); color: #fff; }
.ts-btn svg { transition: transform .15s; } .ts-btn:hover svg { transform: translateX(3px); }
/* phones: smaller text and buttons in the M-Pesa payments list */
@media (max-width: 900px) and (pointer: coarse) {
  .mp-list table { font-size: .8rem; }
  .mp-list td, .mp-list th { padding: 7px 6px; }
  .mp-list .small { font-size: .7rem; }
  .mp-list td.num b { font-size: .82rem; }
  .mp-list .acts { white-space: nowrap; }
  .mp-list .acts button { padding: 4px 9px; font-size: .72rem; border-radius: 8px; min-height: 0; }
  .mp-list .acts button.txt { padding: 4px 4px; }
  .mp-list .pill { font-size: .66rem; padding: 1px 7px; }
}

/* receipt form: quick fixes when the items and the total differ */
.diff-fix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, #FFBF3F 14%, transparent); }
.diff-fix input { flex: 1 1 220px; } .diff-fix select { width: auto; }
.diff-note { margin: 2px 0 10px; color: var(--muted); }
/* TrackstatementKe offer as a pop-up the person closes */
.ts-pop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .55); overflow-y: auto; }
.ts-pop .ts-card { width: min(460px, 100%); margin: 0; padding: 18px 18px 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.ts-pop .ts-x { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 1.2rem; line-height: 1; }
.ts-pop .ts-top { padding-right: 34px; }
.ts-pop .ts-later { display: block; margin-top: 2px; padding: 4px 0; }
@media (max-width: 900px) and (pointer: coarse) {
  .ts-pop { padding: 20px 18px; }
  .ts-pop .ts-card { padding: 16px 14px 14px; }
  .ts-pop .ts-card h2 { font-size: 1.05rem; }
  .ts-pop .ts-card p, .ts-pop .ts-points { font-size: .84rem; }
  .ts-pop .ts-btn { padding: 10px 16px; font-size: .88rem; }
}
.ts-lead { font-weight: 600; font-size: .9rem; } .ts-sep { color: var(--muted); }

/* phones: the hide-amounts eye sits in the middle of a round button */
.mb-eyebtn { padding: 0 !important; width: 36px !important; height: 36px !important; min-width: 0; box-sizing: border-box; line-height: 0; flex: none; }
.mb-eyebtn svg { width: 18px !important; height: 18px !important; display: block; margin: 0; }
/* phones: the M-Pesa payments list without its frame, smaller text, and the buttons stacked so they all fit */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .card.mp-list { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; overflow-x: visible; }
  body.has-sidebar .mp-list table { width: 100%; table-layout: auto; font-size: .74rem !important; }
  body.has-sidebar .mp-list th { font-size: .62rem !important; padding: 6px 4px !important; }
  body.has-sidebar .mp-list td { font-size: .74rem !important; padding: 8px 4px !important; vertical-align: middle; }
  body.has-sidebar .mp-list td .small, body.has-sidebar .mp-list td .muted { font-size: .64rem !important; }
  body.has-sidebar .mp-list td.num b { font-size: .76rem !important; white-space: nowrap; }
  body.has-sidebar .mp-list .acts { white-space: normal !important; width: 1%; }
  body.has-sidebar .mp-list .acts button { display: block; width: 100%; margin: 0 0 4px; padding: 5px 8px !important; font-size: .66rem !important; line-height: 1.2; white-space: nowrap; }
  body.has-sidebar .mp-list .acts button.txt { padding: 2px 4px !important; margin: 0; }
  body.has-sidebar .mp-list .acts .small { white-space: nowrap; }
}

/* when a receipt was added, in very small text */
.added-at { font-size: .64rem; color: var(--muted); opacity: .8; margin-top: 2px; white-space: nowrap; }
h2 + .added-at { margin: -6px 0 8px; }
/* phones: the receipts list without its frame, so the table uses the full width */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .card#list { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
}
/* a switched-off button looks switched off */
button:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }

/* phone dashboard: the big amount is a button to its receipts */
.mb-big-btn { display: inline-flex; align-items: center; gap: 6px; background: none !important; border: 0 !important; padding: 0 !important; color: inherit !important; font-family: inherit; cursor: pointer; text-align: left; box-shadow: none !important; }
.mb-big-btn .mb-go { font-size: .55em; opacity: .7; font-weight: 600; }
.range-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; background: var(--brand-soft); font-size: .86rem; }
/* phones: Quick overview tiles shorter, the title and the amount on one line */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .mb-tile { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 6px; row-gap: 2px; padding: 9px 11px !important; min-height: 0 !important; }
  body.has-sidebar .mb-tile > span { font-size: .74rem !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.has-sidebar .mb-tile > b { font-size: .92rem !important; margin: 0 !important; white-space: nowrap; text-align: right; }
  body.has-sidebar .mb-tile > small { grid-column: 1 / -1; font-size: .66rem !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.has-sidebar .mb-tiles { gap: 8px !important; }
}
/* the big spending figure: no button colour or rounded box on hover, just a light fade and the arrow nudging right */
#mb-total, #mb-total:hover, #mb-total:focus-visible, #mb-total:active { background: none !important; background-color: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: inherit !important; filter: none !important; transform: none !important; }
#mb-total:hover, #mb-total:active { opacity: .85; }
#mb-total .mb-go { transition: transform .15s; } #mb-total:hover .mb-go { transform: translateX(3px); }
#mb-total:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 3px; }
/* the big spending figure (phone hero and desktop Total spent) turns our amber when hovered or pressed, and opens its receipts */
.big-figure { display: inline-flex; align-items: center; gap: 6px; background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; color: inherit !important; font-family: inherit; cursor: pointer; box-shadow: none !important; transition: color .15s; }
#dd-total { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; } /* desktop: the size comes from the KPI box; the phone figure keeps its own big size (.mb-big) */
#mb-total:hover, #mb-total:active, #mb-total:focus-visible, #dd-total:hover, #dd-total:active, #dd-total:focus-visible { color: #FFBF3F !important; opacity: 1; }
#dd-total, #dd-total:hover, #dd-total:focus-visible, #dd-total:active { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; transform: none !important; }
#dd-total .mb-go { font-size: .7em; opacity: .6; transition: transform .15s; } #dd-total:hover .mb-go { transform: translateX(3px); opacity: 1; }
:root[data-theme="light"] #dd-total:hover, :root[data-theme="light"] #dd-total:active { color: #c98a00 !important; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) #dd-total:hover, :root:not([data-theme="dark"]) #dd-total:active { color: #c98a00 !important; } }

/* Admin -> AI usage */
.ai-tabs { margin-bottom: 12px; }
.ai-day { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ai-day input[type=date] { width: auto; }
.ai-day button:not(.txt) { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
.ai-groups { gap: 12px; margin: 6px 0 4px; }
.ai-groups h3 { margin: 6px 0 4px; font-size: .9rem; }
.ai-mini td { padding: 4px 6px; font-size: .84rem; }
.ai-calls td { vertical-align: top; }
@media (max-width: 900px) and (pointer: coarse) { .ai-groups { grid-template-columns: 1fr !important; } }
/* Purchase without a receipt: only what is needed (date, place type, item, category, price, paid via).
   Time, shop name, quantity and transaction ID can be added later by editing the receipt. Quantity is 1. */
#pi-rows .pi-qty, .pay-items th.pi-qty, #pi-rows .pi-ref, .pay-items th.pi-ref, .pi-fields .pi-extra { display: none !important; }
/* the focus ring stays inside the box (it was spilling over the edges), in our amber */
input:focus-visible, select:focus-visible, textarea:focus-visible, input:focus, select:focus, textarea:focus { outline: 2px solid #FFBF3F !important; outline-offset: -2px !important; box-shadow: none !important; }
/* category purchases list: on phones only Date, Item (shop underneath) and Total; quantity and price are one tap away */
.ptab .pt-sub { display: none; }
@media (max-width: 900px) and (pointer: coarse) {
  .ptab .pt-shop, .ptab .pt-qty, .ptab .pt-price { display: none !important; }
  .ptab .pt-sub { display: block; margin-top: 2px; }
  .ptab td, .ptab th { padding: 8px 6px; }
  .ptab td:nth-child(2) { width: 100%; }
  .ptab .lnk { text-align: left; }
}
/* every cell's first line on one level: the date, the item name and the total; the pop-up's button padding off the item link
   and the sortable headings (it pushed the name right and down and made Date / Total bigger than Item) */
.ptab td { vertical-align: top; }
.modal .ptab .lnk, .modal .ptab .th-sort { padding: 0; margin: 0; min-height: 0; font-size: inherit; line-height: inherit; }
.ptab thead th { vertical-align: bottom; }
/* category "By item" list: on phones only Item (times, price and last paid underneath) and Total */
.itab .it-sub { display: none; }
.itab td { vertical-align: top; }
.modal .itab .lnk { padding: 0; margin: 0; min-height: 0; font-size: inherit; line-height: inherit; text-align: left; }
@media (max-width: 900px) and (pointer: coarse) {
  .itab .it-x { display: none !important; }
  .itab .it-sub { display: block; margin-top: 2px; }
  .itab td, .itab th { padding: 8px 6px; }
  .itab td:first-child { width: 100%; }
  .itab td:last-child { white-space: nowrap; }
}
/* receipt form: the category drop-down sits under the item name on an upright phone (the Category column is hidden there) */
.items .cat-inline { display: none; }
@media (max-width: 640px) and (pointer: coarse) and (orientation: portrait) {
  .items .cat-inline { display: block; width: 100%; margin-top: 4px; min-height: 28px; font-size: .72rem; padding: 2px 4px; color: var(--muted); }
}

/* Receipts filter: Search, Period (one-tap choices, Custom opens From / To), Sort by, Show only */
.rf .rf-sec { margin: 0 0 12px; }
.rf .rf-h { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.rf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rf-chips button { padding: 6px 12px; border-radius: 99px; font-size: .82rem; border: 1px solid var(--line); background: var(--bg); }
.rf-chips button.on { background: var(--brand) !important; color: var(--brand-ink, #fff) !important; border-color: var(--brand) !important; }
.rf-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.rf-dates label { font-size: .78rem; }
.rf-date { position: relative; display: flex; align-items: center; }
.rf-date svg { position: absolute; left: 10px; color: var(--muted); pointer-events: none; }
.rf-date input { padding-left: 34px; min-height: 42px; }
.rf-date .rf-ph { display: none; position: absolute; left: 34px; color: var(--muted); pointer-events: none; font-size: .92rem; }
.rf-date.empty .rf-ph { display: block; }
.rf-date.empty input { color: transparent; }
.rf-date.empty input:focus { color: inherit; }
.rf-date.empty input:focus + .rf-ph { display: none; }
.rf-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.rf-row .rf-sec { margin-bottom: 0; }
.rf .chk { display: grid; gap: 6px; }
@media (max-width: 900px) and (pointer: coarse) { .rf-row { grid-template-columns: 1fr; gap: 12px; } .rf-chips button { padding: 6px 10px; font-size: .78rem; } }
.rf-dates[hidden] { display: none; }
/* Receipts: the total for the chosen period, just above the list */
.rf-sum { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding: 10px 14px; border-radius: 12px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.rf-sum > div { display: grid; gap: 1px; min-width: 0; }
.rf-sum b { font-size: .92rem; }
.rf-sum .rf-total { font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; color: #c98a00; white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rf-sum .rf-total { color: #FFBF3F; } }
:root[data-theme="dark"] .rf-sum .rf-total { color: #FFBF3F; }
.rf-sum:empty { display: none; }
/* the period total is the header of the receipts card */
#list > .rf-sum { margin: -4px -4px 10px; border-radius: 10px; }
/* the period total runs the full width of the receipts card, edge to edge */
#list.card { padding: 0 !important; }
#list > .rf-sum { margin: 0 0 6px !important; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: 0 !important; border-top-left-radius: inherit !important; border-top-right-radius: inherit !important; padding: 12px 16px; }
#list > table { margin: 0 10px 8px; width: calc(100% - 20px); }
#list > .empty, #list > div:not(.rf-sum) { padding: 12px 16px; }
@media (max-width: 900px) and (pointer: coarse) { body.has-sidebar #list > .rf-sum { border-radius: 10px !important; border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); } body.has-sidebar #list > table { margin: 0; width: 100%; } }
/* period · receipts · total on one line */
.rf-sum { align-items: center; }
.rf-sum > div { display: flex !important; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rf-sum > div > b { font-size: .95rem; }
.rf-sum > div > span::before { content: '·'; margin-right: 8px; opacity: .6; }
.rf-sum > div > span { font-size: .82rem; }

/* phone spending card: the bars / curve switch sits next to the eye */
.mb-hero-btns { display: inline-flex; gap: 8px; }

/* desktop dashboard: the spending trend takes the whole row beside Insights; the donut moves next to Recent receipts */
@media (min-width: 901px), (pointer: fine) {
  .dd-trend { grid-column: span 9 !important; } .dd-cat { grid-column: span 5 !important; } .dd-rec { grid-column: span 7 !important; }
  .dd-prod { grid-column: span 6 !important; } .dd-price { grid-column: span 6 !important; }
  .dd-trend .dd-chart { height: 280px; }
  .dd-trend .dd-ch { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; } .dd-trend .dd-ch > div:first-child { flex: 1 1 auto; }
  .dd-ctype { margin-left: 4px; }
  @media (max-width: 1320px) { .dd-trend { grid-column: span 12 !important; } .dd-cat { grid-column: span 5 !important; } .dd-rec { grid-column: span 7 !important; } }
}

/* ===== Savings hub ===== */
.sh { --sh-g: #10b981; --sh-a: #FFBF3F; --sh-r: #ef4444; }
.sh-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.sh-title { margin: 0; font-size: 2rem; letter-spacing: -.02em; } .sh-title span { color: var(--sh-a); }
.sh-head p { margin: 4px 0 0; }
.sh-head-r { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sh-window { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; font-size: .88rem; }
.sh-cta, a.sh-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 0 !important; border-radius: 10px; background: var(--sh-a) !important; color: #1a1300 !important; font-weight: 700; text-decoration: none; cursor: pointer; }
.sh-cta.small { padding: 8px 14px; font-size: .86rem; } .sh-cta:hover { filter: brightness(1.06); } .sh-cta:disabled { opacity: .45; }
.sh-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line); background: transparent; font-weight: 600; }
.sh-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.sh-kpi { display: flex; align-items: center; gap: 14px; }
.sh-kpi.good { border-color: color-mix(in srgb, var(--sh-g) 45%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--sh-g) 12%, var(--surface)), var(--surface) 70%); }
.sh-kico { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; }
.sh-kpi.good .sh-kico { background: color-mix(in srgb, var(--sh-g) 20%, transparent); color: var(--sh-g); }
.sh-kpi.amber .sh-kico { background: color-mix(in srgb, var(--sh-a) 20%, transparent); color: var(--sh-a); }
.sh-klbl { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sh-kval { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; } .sh-kpi.good .sh-kval { color: var(--sh-g); }
.sh-ksub { font-size: .82rem; color: var(--muted); }
.sh-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.sh-tabs button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 0; border-radius: 10px; background: transparent; white-space: nowrap; font-weight: 600; }
.sh-tabs button.on { background: var(--sh-a) !important; color: #1a1300 !important; }
.sh-tabs .cnt { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: .74rem; }
.sh-top { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.sh-feature { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; padding: 0 !important; overflow: hidden; border-color: color-mix(in srgb, var(--sh-g) 45%, var(--line)); background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--sh-g) 16%, transparent), transparent 60%), var(--surface); }
.sh-feature.empty-f { display: block; }
.sh-fart { display: grid; place-items: center; font-size: 4.2rem; background: linear-gradient(160deg, #3a2410, #120c06); }
.sh-fbody { padding: 18px 22px; }
.sh-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; background: color-mix(in srgb, var(--sh-a) 16%, transparent); color: var(--sh-a); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.sh-fbody h2 { margin: 10px 0 4px; font-size: 1.35rem; } .sh-fbody > p { margin: 0 0 12px; }
.sh-fgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.sh-fsave { display: grid; gap: 2px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; min-width: 150px; }
.sh-fsave span { font-size: .8rem; color: var(--muted); } .sh-fsave b { font-size: 1.6rem; color: var(--sh-g); } .sh-fsave small { color: var(--muted); }
.sh-factions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.sh-ch { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .sh-ch h2, .sh-ch h3 { margin: 0; } .sh-ch .grow { flex: 1; } .sh-ch p { margin: 2px 0 0; }
.sh-wcard .sh-ch svg { color: var(--sh-a); }
.sh-watch { width: 100%; font-size: .86rem; } .sh-watch td { vertical-align: middle; } .sh-watch th { font-size: .72rem; }
.sh-spark { display: block; } .sh-spark.good { color: var(--sh-g); } .sh-spark.bad { color: var(--sh-r); } .sh-spark.neutral { color: var(--muted); }
.sh-sec { margin: 20px 0 10px; font-size: 1.15rem; }
.sh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sh-step { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.sh-sh { display: flex; gap: 12px; } .sh-sh h3 { margin: 0 0 4px; } .sh-sh p { margin: 0; }
.sh-sico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; }
.sh-sico.red { background: color-mix(in srgb, var(--sh-r) 18%, transparent); color: #f87171; } .sh-sico.amber { background: color-mix(in srgb, var(--sh-a) 18%, transparent); color: var(--sh-a); }
.sh-sico.green { background: color-mix(in srgb, var(--sh-g) 18%, transparent); color: var(--sh-g); } .sh-sico.violet { background: rgba(124, 58, 237, .18); color: #a78bfa; }
.sh-sfoot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sh-minibars { display: flex; align-items: flex-end; gap: 5px; height: 54px; } .sh-minibars i { width: 12px; border-radius: 3px 3px 0 0; } .sh-minibars i.g { background: var(--sh-g); } .sh-minibars i.a { background: var(--sh-a); }
.sh-saveup { display: grid; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--sh-g) 14%, transparent); } .sh-saveup small { font-size: .7rem; color: var(--muted); } .sh-saveup b { color: var(--sh-g); font-size: 1.15rem; }
.sh-bud { display: flex; align-items: center; gap: 10px; } .sh-bud .sh-ring { color: var(--sh-g); } .sh-bud > span { display: grid; } .sh-bud small { font-size: .72rem; }
.sh-pats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.sh-late { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: stretch; }
.sh-amb { color: var(--sh-a); }
.sh-hours { display: flex; align-items: flex-end; gap: 3px; height: 70px; margin-top: 8px; border-bottom: 1px solid var(--line); }
.sh-hours i { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--muted) 45%, transparent); } .sh-hours i.late { background: var(--sh-a); }
.sh-hlab { display: flex; justify-content: space-between; font-size: .68rem; color: var(--muted); margin-top: 4px; }
.sh-lside { display: grid; align-content: center; gap: 4px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; min-width: 130px; }
.sh-lside b { font-size: 1.9rem; } .sh-lside span { font-size: .82rem; color: var(--muted); } .sh-lside small { font-size: .74rem; }
.sh-rtab { width: 100%; font-size: .85rem; }
.sh-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sh-due { display: grid; gap: 6px; } .sh-drow { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } .sh-drow > span { display: grid; } .sh-drow small { font-size: .72rem; }
.sh-brow { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 8px; align-items: center; padding: 6px 0; font-size: .86rem; }
.sh-bbar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 25%, transparent); overflow: hidden; } .sh-bbar i { display: block; height: 100%; background: var(--sh-g); } .sh-bbar i.near { background: var(--sh-a); } .sh-bbar i.over { background: var(--sh-r); }
@media (max-width: 1200px) { .sh-top { grid-template-columns: 1fr; } .sh-pats { grid-template-columns: 1fr; } .sh-plan { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) and (pointer: coarse) {
  .sh-title { font-size: 1.5rem; } .sh-head-r { width: 100%; } .sh-head-r .sh-cta { flex: 1; justify-content: center; }
  .sh-kpis { grid-template-columns: 1fr; gap: 8px; } .sh-kpi { padding: 12px 14px !important; } .sh-kico { width: 44px; height: 44px; } .sh-kval { font-size: 1.35rem; }
  .sh-tabs button { padding: 8px 12px; font-size: .84rem; }
  .sh-feature { grid-template-columns: 1fr; } .sh-fart { height: 90px; font-size: 3rem; } .sh-fbody { padding: 14px 16px; } .sh-fgrid { grid-template-columns: 1fr; }
  .sh-steps, .sh-plan { grid-template-columns: 1fr; gap: 10px; }
  .sh-late { grid-template-columns: 1fr; }
  .sh-watch .sh-tr, .sh-watch th:nth-child(3), .sh-watch td:nth-child(3) { display: none; }
  .sh-rtab th:nth-child(3), .sh-rtab td:nth-child(3) { display: none; }
}

/* ===== Reports overview ===== */
.rp { --rp-t: #4cc2b2; --rp-g: #10b981; --rp-r: #ef4444; --rp-a: #FFBF3F; }
.rp .card h2 { margin: 0; font-size: 1.05rem; }
.rp-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.rp-head h1 { margin: 0 0 2px; }
.rp-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-sel { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.rp-sel select { border: 0 !important; background: transparent !important; padding: 9px 4px !important; box-shadow: none !important; font-weight: 600; }
.rp-vs { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: .86rem; color: var(--muted); }
.rp-export { display: inline-flex; gap: 6px; }
.rp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; background: var(--rp-a); color: #1a1300 !important; font-weight: 700; text-decoration: none; font-size: .86rem; }
.rp-btn:hover { filter: brightness(1.06); }
.rp-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px; }
.rp-chips button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; font-size: .86rem; cursor: pointer; }
.rp-chips button.on { background: color-mix(in srgb, var(--rp-t) 18%, var(--surface)); border-color: var(--rp-t); color: var(--text); }
.rp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.rp-kpi { display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.rp-kico { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: color-mix(in srgb, var(--rp-t) 16%, transparent); color: var(--rp-t); }
.rp-save { border-color: color-mix(in srgb, var(--rp-g) 45%, var(--line)); background: linear-gradient(120deg, color-mix(in srgb, var(--rp-g) 12%, var(--surface)), var(--surface) 70%); }
.rp-save .rp-kico { background: color-mix(in srgb, var(--rp-g) 20%, transparent); color: var(--rp-g); } .rp-save .rp-kval { color: var(--rp-g); }
.rp-save:hover { border-color: var(--rp-g); }
.rp-klbl { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.rp-kval { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-chg { display: inline-flex; padding: 2px 8px; border-radius: 99px; font-size: .74rem; font-weight: 700; background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.rp-chg.bad { background: color-mix(in srgb, var(--rp-r) 16%, transparent); color: #f87171; }
.rp-chg.good { background: color-mix(in srgb, var(--rp-g) 16%, transparent); color: var(--rp-g); }
.rp-chg.x { background: color-mix(in srgb, var(--rp-t) 16%, transparent); color: var(--rp-t); }
.rp-opp { color: var(--rp-g); font-weight: 700; }
.rp-ch { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rp-ch p { margin: 2px 0 0; }
.rp-unu .rp-ch, .rp-leak .rp-ch { justify-content: flex-start; align-items: center; }
.rp-tot { display: grid; justify-items: end; gap: 2px; } .rp-tot b { font-size: 1.2rem; }
.rp-row1 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.rp-row2, .rp-row3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.rp-chart { height: 260px; } .rp-hchart { height: 200px; }
.rp-legend { display: flex; gap: 16px; justify-content: center; font-size: .8rem; color: var(--muted); margin-top: 8px; }
.rp-legend i { display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 6px; border-top: 3px solid var(--rp-t); } .rp-legend i.prev { border-top: 2px dashed var(--muted); }
.rp-ctab, .rp-mtab { width: 100%; font-size: .88rem; }
.rp-ctab tr.click { cursor: pointer; } .rp-ctab tr.click:hover td { background: color-mix(in srgb, var(--rp-t) 7%, transparent); }
.rp-barcell { width: 32%; }
.rp-bar { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; } .rp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--rp-t); }
.rp-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; }
.rp-sico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; }
.rp-sico.red { background: color-mix(in srgb, var(--rp-r) 18%, transparent); color: #f87171; } .rp-sico.amber { background: color-mix(in srgb, var(--rp-a) 18%, transparent); color: var(--rp-a); }
.rp-ulist { display: grid; }
.rp-urow { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.rp-urow:last-child { border-bottom: 0; }
.rp-urow > span { display: grid; gap: 2px; min-width: 0; } .rp-urow > span.right { justify-items: end; flex: none; }
.rp-big { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .rp-big b { font-size: 1.6rem; }
.rp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .rp-tags span { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line); font-size: .8rem; }
.rp-tip { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--rp-a) 12%, transparent); font-size: .86rem; } .rp-tip svg { color: var(--rp-a); flex: none; }
.rp-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--rp-g) 45%, var(--line)); border-radius: 14px; background: linear-gradient(110deg, color-mix(in srgb, var(--rp-g) 14%, var(--surface)), var(--surface) 75%); }
.rp-banner > svg { color: var(--rp-g); flex: none; } .rp-banner > span { flex: 1; }
.rp-cta { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 9px 16px; border-radius: 10px; background: var(--rp-g); color: #04140d !important; font-weight: 700; text-decoration: none; }
@media (max-width: 1200px) { .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rp-row1 { grid-template-columns: 1fr; } }
@media (max-width: 900px) and (pointer: coarse) {
  .rp-tools { width: 100%; } .rp-sel { flex: 1; } .rp-sel select { width: 100%; } .rp-vs { display: none; }
  .rp-kpis { grid-template-columns: 1fr 1fr; gap: 8px; } .rp-kpi { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px !important; }
  .rp-kico { width: 38px; height: 38px; border-radius: 10px; } .rp-kico svg { width: 20px; height: 20px; } .rp-kval { font-size: 1.15rem; }
  .rp-row2, .rp-row3 { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; } .rp-row1 { gap: 10px; margin-bottom: 10px; }
  .rp-chart { height: 210px; } .rp-tot { justify-items: start; }
  .rp-barcell { display: none; } .rp-mtab th:first-child, .rp-mtab td:first-child { display: none; }
  .rp-banner { flex-direction: column; align-items: flex-start; } .rp-cta { width: 100%; justify-content: center; }
}

/* Savings hub: tip cards stacked with room between them */
.ins-grid { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 900px) and (pointer: coarse) { .ins-grid { gap: 16px; } }

/* Admin -> AI usage: phone text kept for test accounts */
.ocr-dbg { margin-top: 14px; } .ocr-dbg h3 { margin: 0 0 4px; } .ocr-dbg .row { display: flex; gap: 8px; } .ocr-dbg input { flex: 1; }
.ocr-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.ocr-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
.ocr-chip button { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 6px; cursor: pointer; border-radius: 999px; }
.ocr-chip button:hover { color: var(--bad, #e5484d); }
.ocr-text { max-height: 55vh; overflow: auto; white-space: pre-wrap; font-size: .8rem; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.scan-id{margin-top:6px;letter-spacing:.02em}

/* Account window: every plain button (Log out everywhere, Set up, passcode...) is amber with black text, delete is solid red,
   and each heading has room above it. The hover (teal, white text) comes from hover.css. */
.acct .actions button:not(.primary):not(.danger), .acct #ac-2fa button:not(.primary):not(.danger) { background: #FEBF3F; border-color: #FEBF3F; color: #141414; font-weight: 650; }
.acct button.danger { background: #b91c1c; border-color: #b91c1c; color: #fff; font-weight: 650; }
.acct button.danger:hover { background: #991b1b; border-color: #991b1b; color: #fff; }
.acct h3 { margin-top: 26px; }


/* the settings / avatar menu hangs from the bottom edge of the top bar (extra.js sets its top): square top corners, no top border */
#gear-menu { border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 12px 28px rgba(0,0,0,.28); }

/* phone dashboard: the date arrows sit in the middle of their circles */
.mb-nav button { display: grid; place-items: center; padding: 0; line-height: 0; }
.mb-nav button svg { display: block; }

/* Receipts, Custom period: the boxes share the row without spilling out, smaller text, year / month above the dates,
   and the other period chips step aside (‹ Other periods brings them back) */
.rf-dates { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rf-dates > div, .rf-date, .rf-date input, .rf-dates select { min-width: 0; width: 100%; box-sizing: border-box; }
.rf-date input, .rf-dates select { font-size: .86rem; min-height: 40px; }
.rf-date input { padding-left: 30px; padding-right: 6px; }
.rf-date svg { left: 9px; width: 14px; height: 14px; }
.rf-date .rf-ph { left: 30px; font-size: .84rem; }
.rf-back { display: none; }
.rf-chips.only-custom button:not(.on):not(.rf-back) { display: none; }
.rf-chips.only-custom .rf-back { display: inline-block; background: none; border-color: transparent; color: var(--brand); font-weight: 600; }
@media (max-width: 420px) and (pointer: coarse) { .rf-date input, .rf-dates select { font-size: .8rem; } .rf-date input::-webkit-calendar-picker-indicator { margin-left: 0; padding: 0; } }

/* Receipts (phone view and app): the period total sticks under the top bar while the list scrolls; scrolling back up past it
   lets go, so the filters show again. #list does not scroll sideways (the table fits), or the sticky box would stick inside it. */
@media (max-width: 900px) and (pointer: coarse) {
  #list { overflow: visible; }
  html body.has-sidebar #list > .rf-sum, html body #list > .rf-sum { position: sticky; top: var(--hdr-h, 64px); z-index: 5; box-shadow: 0 6px 14px rgba(0,0,0,.25);
    width: 100vw; box-sizing: border-box; margin-left: calc(50% - 50vw) !important; margin-right: 0 !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; padding: 12px 16px; } /* edge to edge */
}

/* phone dashboard, Where it goes: up to 9 categories beside the donut, and See all opens every category with its amount */
.mb-cat-head { margin: 0 0 10px; }
.mb-allcat { display: grid; gap: 4px; }
.mb-allcat-row { display: grid; grid-template-columns: 10px 1fr auto 40px; grid-template-areas: "dot name amt pct" ". bar bar bar"; gap: 4px 10px; align-items: center; width: 100%; padding: 12px 2px; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mb-allcat-row:last-child { border-bottom: 0; }
.mb-allcat-row:hover, .mb-allcat-row:focus, .mb-allcat-row:active { background: none; outline: none; } /* no hover colour on this page */
.mb-allcat i { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; }
.mb-allcat span { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-allcat b { grid-area: amt; font-weight: 700; white-space: nowrap; }
.mb-allcat small { grid-area: pct; color: var(--muted); text-align: right; }
.mb-allcat em { grid-area: bar; height: 5px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.mb-allcat u { display: block; height: 100%; border-radius: 99px; }

/* Receipts total on phones: one slim line, period · count on the left, amount on the right, all on the same baseline */
@media (max-width: 900px) and (pointer: coarse) {
  html body #list > .rf-sum { padding: 6px 14px !important; gap: 10px; align-items: center; }
  #list > .rf-sum > div { flex-wrap: nowrap !important; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
  #list > .rf-sum > div > b { font-size: .88rem; }
  #list > .rf-sum > div > span { font-size: .76rem; overflow: hidden; text-overflow: ellipsis; }
  #list > .rf-sum > div > span::before { margin-right: 6px; }
  #list > .rf-sum .rf-total { font-size: 1.12rem; line-height: 1.2; flex: none; }
}

/* phone view and app, every pop-up: room between the × and what comes under it. The title keeps clear of the ×,
   and the first item starts lower; with no title the content starts below the ×. */
@media (max-width: 900px) and (pointer: coarse) {
  #modal-body > h2:first-child, #modal-body > div > h2:first-child, #modal-body > h1:first-child, #modal-body > div > h1:first-child { margin-top: 4px; margin-bottom: 18px; padding-right: 48px; min-height: 30px; }
  #modal-body > :first-child:not(h1):not(h2):not(div) { margin-top: 48px; }
}

/* Receipts list on phones: the table always fits the screen, so the Total column (its header, the ⇅ sort mark and the amounts)
   is never cut off, even on narrow phones or with larger system text. Fixed column widths; the date and shop wrap instead. */
@media (max-width: 900px) and (pointer: coarse) {
  #list > table.hide45 { table-layout: fixed; width: 100% !important; margin: 0 !important; }
  #list > table.hide45 th.ck, #list > table.hide45 td.ck { width: 30px; }
  #list > table.hide45 thead th:nth-child(2) { width: 33%; }
  #list > table.hide45 thead th:nth-child(6) { width: 31%; }
  #list > table.hide45 td { overflow-wrap: anywhere; }
  #list > table.hide45 td:nth-child(2), #list > table.hide45 td:nth-child(2) .added-at { white-space: normal; }
  #list > table.hide45 td:nth-child(6), #list > table.hide45 th:nth-child(6) { white-space: nowrap; padding-right: 8px; }
  #list > table.hide45 td:nth-child(6) b { font-size: .86rem; }
  #list > table.hide45 tfoot td:nth-child(6) { white-space: nowrap; }
  #list > table.hide45 th:nth-child(6) .th-sort { padding: 0; font-size: inherit; }
}
@media (max-width: 380px) and (pointer: coarse) {
  #list > table.hide45 td:nth-child(6) b { font-size: .8rem; }
  #list > table.hide45 td:nth-child(2) { font-size: .8rem; }
}

/* phone view and app: no hover colour on list rows (receipts, tables, lists). On Android a tapped row stayed amber and lagged;
   a tap opens the row straight away instead. */
@media (max-width: 900px) and (pointer: coarse), (hover: none) {
  tr.click:hover td, tr.click:active td, .dd-table tr.click:hover td, .rp-ctab tr.click:hover td { background: transparent !important; box-shadow: none !important; }
  tr.click, .mb-tx, .mb-allcat-row { -webkit-tap-highlight-color: transparent; }
  .mb-tx:hover, .mb-tx:active, .mb-tx:focus { background: transparent !important; box-shadow: none !important; }
}

/* Savings hub on phones: smaller title and buttons, the window and the plan button side by side, and each figure card on
   one slim row (icon, label over value with its note beside it) */
@media (max-width: 900px) and (pointer: coarse) {
  .sh-title { font-size: 1.3rem; } .sh-head { gap: 8px; margin-bottom: 10px; } .sh-head p { font-size: .82rem; margin-top: 2px; }
  .sh-head-r { flex-wrap: nowrap; gap: 8px; }
  .sh-window { padding: 7px 10px; font-size: .78rem; gap: 6px; white-space: nowrap; flex: none; }
  .sh-cta, a.sh-cta { padding: 8px 12px; font-size: .84rem; gap: 6px; white-space: nowrap; }
  .sh-ghost { padding: 7px 12px; font-size: .84rem; }
  .sh-kpis { gap: 6px; margin-bottom: 10px; }
  .sh-kpi { padding: 8px 12px !important; gap: 10px; }
  .sh-kico { width: 34px; height: 34px; border-radius: 10px; } .sh-kico svg { width: 18px; height: 18px; }
  .sh-kpi > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; }
  .sh-klbl { flex-basis: 100%; font-size: .64rem; letter-spacing: .05em; }
  .sh-kval { font-size: 1.08rem; margin: 0; }
  .sh-ksub { font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
  .sh-tabs { padding: 3px; border-radius: 12px; margin-bottom: 10px; } .sh-tabs button { padding: 6px 10px; font-size: .8rem; gap: 6px; } .sh-tabs button svg { width: 15px; height: 15px; }
  .sh-tabs .cnt { min-width: 18px; height: 17px; font-size: .68rem; }
  .sh-sec { font-size: 1rem; margin: 14px 0 8px; }
  .sh-fbody h2 { font-size: 1.08rem; } .sh-fsave b { font-size: 1.25rem; } .sh-fart { height: 70px; font-size: 2.4rem; }
}

/* Savings hub, Shopping plan tab on phones: the shopping list, due-again and budget cards smaller */
@media (max-width: 900px) and (pointer: coarse) {
  .sh-plan .card { padding: 12px 14px; }
  .sh-plan .sh-ch { gap: 8px; margin-bottom: 6px; } .sh-plan .sh-ch h2 { font-size: .98rem; } .sh-plan .sh-ch > svg { width: 18px; height: 18px; }
  .sh-plan p { font-size: .84rem; margin: 4px 0 8px; }
  .sh-plan .sh-ghost { font-size: .8rem; padding: 6px 10px; white-space: normal; text-align: left; } .sh-plan .sh-ghost svg { width: 15px; height: 15px; flex: none; }
  .sh-drow b { font-size: .88rem; } .sh-drow small { font-size: .74rem; } .sh-drow button { padding: 4px 10px; font-size: .78rem; }
  .sh-brow { font-size: .8rem; }
}

/* the × that closes pop-ups and panels, everywhere: amber with a dark ×, so it stands out on the dark cards */
button.x, .ts-pop button.ts-x, body.has-sidebar .sidebar button.sb-close { background: #FEBF3F; border: 1px solid #FEBF3F; color: #141414; font-weight: 800; }
button.x { border-radius: 10px; }
button.x:focus-visible, button.ts-x:focus-visible, button.sb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ===== Phone view and app: tighter layout. Things that fit side by side sit on one line; text and buttons a size smaller. ===== */
@media (max-width: 900px) and (pointer: coarse) {
  /* Savings hub, Biggest opportunity: no picture banner, the emoji sits in the badge line; saving and both buttons on one line each */
  .sh-feature .sh-fart { display: none; }
  .sh-fbody { padding: 12px 14px; }
  .sh-badge { padding: 3px 8px; font-size: .64rem; }
  .sh-fbody h2 { font-size: 1rem; line-height: 1.3; margin: 8px 0 2px; } .sh-fbody > p { font-size: .82rem; margin: 0 0 8px; }
  .sh-fgrid { gap: 8px; }
  .sh-fsave { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 0; padding: 8px 12px; min-width: 0; border-radius: 10px; }
  .sh-fsave span { font-size: .74rem; flex-basis: 100%; } .sh-fsave b { font-size: 1.15rem; } .sh-fsave small { font-size: .74rem; }
  .sh-factions { flex-wrap: nowrap; gap: 8px; margin-top: 10px; }
  .sh-factions > * { flex: 1 1 0; min-width: 0; justify-content: center; padding: 8px 10px !important; font-size: .8rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sh-factions svg { width: 15px; height: 15px; flex: none; }

  /* mini bar charts (shop vs bar, cheapest vs dearest): label on one line, shorter */
  .mbar { grid-template-columns: minmax(64px, 34%) 1fr auto; gap: 6px; font-size: .76rem; }
  .mbar .mb-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* tip and insight cards everywhere: smaller titles, figures and buttons */
  .ins h3 { font-size: .95rem; line-height: 1.3; } .ins p { font-size: .82rem; }
  .ins-actions button { padding: 4px 9px; font-size: .78rem; }
  .sh-step h3, .sh-sh h3 { font-size: .95rem; } .sh-sh p { font-size: .8rem; } .sh-sico { width: 36px; height: 36px; border-radius: 10px; }
  .sh-sico svg { width: 18px; height: 18px; }

  /* cards, headings, notices and buttons in general */
  .card h2 { font-size: 1rem; } .card h3 { font-size: .92rem; }
  .notice { padding: 8px 12px; font-size: .84rem; }
  .actions { gap: 6px; } .actions > button, .actions > .btn { padding: 7px 12px; font-size: .84rem; }
  /* figure tiles (.fact) keep their existing one-line phone layout */
}

/* Text 1% smaller everywhere: the root size for everything set in rem, and the page's base size for everything in em */
html { font-size: 99%; }
body { font-size: 14.85px; }
@media (max-width: 640px) and (pointer: coarse) { body { font-size: 13.37px; } }

/* Phone view and app: buttons that fit side by side stay on one line (each keeps its words on one line); a row that
   would be cramped still wraps to the next line rather than squeezing */
@media (max-width: 900px) and (pointer: coarse) {
  .actions, .ins-actions, .sh-factions, .discard-bar { display: flex; flex-wrap: wrap; align-items: center; }
  .actions > button, .actions > .btn, .actions > a.btn, .ins-actions > button, .discard-bar > button { flex: 0 1 auto; white-space: nowrap; padding: 7px 12px; font-size: .84rem; }
  .discard-bar { gap: 6px; } .discard-bar > span { flex-basis: 100%; }
}

/* Account page, like a phone's settings screen: who you are on top, then grouped rows (tap one to change it) */
.acct { max-width: 720px; }
.ac-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ac-av { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #FEBF3F; color: #141414; font-weight: 800; font-size: 1.15rem; }
.ac-who { flex: 1; min-width: 0; display: grid; gap: 2px; } .ac-who b { font-size: 1.05rem; } .ac-who span { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct h2.ac-gh { margin: 18px 4px 6px; font-size: .74rem !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.acct h2.ac-gh.danger-h { color: var(--bad); }
.ac-group { padding: 0 !important; overflow: hidden; }
.ac-row { border-bottom: 1px solid var(--line); } .ac-row:last-child { border-bottom: 0; }
.ac-row > summary, .ac-row.ac-static { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; min-height: 24px; }
.ac-row > summary { cursor: pointer; list-style: none; } .ac-row > summary::-webkit-details-marker { display: none; }
.ac-row > summary::after { content: '›'; color: var(--muted); font-size: 1.3rem; line-height: 1; margin-left: 2px; transition: transform .15s; }
.ac-row[open] > summary::after { transform: rotate(90deg); }
.ac-l { display: grid; gap: 1px; font-weight: 600; } .ac-l small { font-weight: 400; color: var(--muted); font-size: .76rem; }
.ac-v { margin-left: auto; color: var(--muted); font-size: .88rem; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.ac-body { padding: 0 16px 14px; } .ac-body > p:first-child { margin-top: 0; }
.ac-body .actions { margin-bottom: 0; }
@media (max-width: 900px) and (pointer: coarse) { .ac-row > summary, .ac-row.ac-static { padding: 12px 14px; } .ac-body { padding: 0 14px 12px; } .ac-av { width: 46px; height: 46px; font-size: 1rem; } }

/* every form grid: boxes on the same row line up even when one label wraps onto two lines (the label sits on top of
   its box, and the pair is pushed to the bottom of the row) */
.fields > div { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.fields > div > label { line-height: 1.3; }

/* messages like "Passcode set" never block a tap: taps go through to whatever is under them, and they fade in quickly */
.toast { pointer-events: none; animation: toast-in .18s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* side menu ×: a drawn icon, centred in its amber circle */
@media (max-width: 900px) and (pointer: coarse) { body.has-sidebar .sidebar button.sb-close { padding: 0; display: grid; place-items: center; line-height: 0; } } /* phones only: on a computer the side menu has no close button */
body.has-sidebar .sidebar button.sb-close svg { display: block; }

/* opening animation (app and website), about a second long: a glow blooms, the amber tile springs in with two ripples,
   the F draws itself, a shine sweeps across, "Monifyx" rises letter by letter, then the tagline and a loading line.
   It ends as soon as the first page is drawn (app.js), and fades by itself after 8 seconds if something goes wrong. */
#boot { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: 0; overflow: hidden; background: #04201E; animation: boot-gone .3s ease 8s forwards; }
#boot.out { opacity: 0; transform: scale(1.04); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.boot-glow { position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -300px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(76, 194, 178, .22), rgba(254, 191, 63, .08) 40%, transparent 70%); animation: boot-bloom 1.2s ease-out both; }
.boot-mark { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.boot-tile { position: relative; overflow: hidden; width: 84px; height: 84px; border-radius: 24px; background: linear-gradient(145deg, #FFD36E, #FEBF3F 55%, #F2A81C); box-shadow: 0 16px 44px rgba(254, 191, 63, .35), inset 0 1px 0 rgba(255,255,255,.5); animation: boot-spring .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.boot-tile svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.boot-f { fill: none; stroke: #141414; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: boot-draw .55s ease-out .35s forwards; }
.boot-shine { position: absolute; top: -20%; left: -60%; width: 40%; height: 140%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-18deg); animation: boot-shine .7s ease-in-out .85s both; }
.boot-ring { position: absolute; inset: 0; border-radius: 24px; border: 2px solid rgba(254, 191, 63, .55); animation: boot-ripple 1.4s ease-out .3s infinite; }
.boot-ring.r2 { animation-delay: 1s; }
.boot-word { display: flex; margin-top: 22px; color: #fff; font: 800 1.7rem/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.01em; }
.boot-word span { display: inline-block; opacity: 0; transform: translateY(14px); animation: boot-rise .45s cubic-bezier(.2, .9, .3, 1) calc(.55s + var(--i) * .04s) forwards; }
.boot-tag { margin-top: 8px; color: #9fc3bc; font: 500 .86rem/1.3 system-ui, sans-serif; opacity: 0; animation: boot-in .5s ease 1s forwards; }
.boot-line { width: 120px; height: 3px; margin-top: 22px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; opacity: 0; animation: boot-in .3s ease 1.1s forwards; }
.boot-line i { display: block; width: 40%; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #4cc2b2, #FEBF3F); animation: boot-load 1.1s ease-in-out 1.1s infinite; }
@keyframes boot-bloom { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes boot-spring { 0% { opacity: 0; transform: scale(.3) rotate(-14deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes boot-draw { to { stroke-dashoffset: 0; } }
@keyframes boot-shine { from { left: -60%; } to { left: 130%; } }
@keyframes boot-ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes boot-rise { to { opacity: 1; transform: none; } }
@keyframes boot-in { to { opacity: 1; } }
@keyframes boot-load { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes boot-gone { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  #boot *, #boot { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .boot-f { stroke-dashoffset: 0; } .boot-ring { display: none; }
}

/* ===== the account menu (avatar button): a popover card on desktop, a bottom sheet on phones ===== */
#gear-menu.gm { width: 300px; padding: 8px; border: 1px solid var(--line); border-radius: 16px !important; background: var(--surface); box-shadow: 0 18px 50px rgba(0,0,0,.45); top: calc(100% + 10px) !important; transform-origin: top right; animation: gm-pop .16s ease-out; display: block; }
#gear-menu.gm[hidden] { display: none; }
@keyframes gm-pop { from { opacity: 0; transform: scale(.95) translateY(-4px); } to { opacity: 1; transform: none; } }
.gm-grab { display: none; }
#gear-menu .menu-who { padding: 8px 8px 10px; margin: 0 0 6px; border-bottom: 1px solid var(--line); }
.gm-me { display: flex; align-items: center; gap: 12px; }
.gm-av { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FEBF3F; color: #141414; font-weight: 800; }
.gm-id { display: grid; gap: 1px; min-width: 0; } .gm-id b { font-size: 1rem; } .gm-id small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-sub { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); background: color-mix(in srgb, #10b981 12%, var(--surface)); border: 1px solid color-mix(in srgb, #10b981 35%, var(--line)); }
.gm-sub.no { background: color-mix(in srgb, #FEBF3F 12%, var(--surface)); border-color: color-mix(in srgb, #FEBF3F 40%, var(--line)); }
.gm-sub-t { display: grid; } .gm-sub-t b { font-size: .9rem; } .gm-sub.ok .gm-sub-t b { color: #34d399; } .gm-sub-t small { color: var(--muted); font-size: .76rem; }
.gm-go { color: var(--muted); font-size: .8rem; font-weight: 600; }
.gm-renew { padding: 5px 12px; border-radius: 99px; background: #FEBF3F; color: #141414; font-size: .78rem; font-weight: 700; }
.gm-bar { grid-column: 1 / -1; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 25%, transparent); overflow: hidden; } .gm-bar i { display: block; height: 100%; border-radius: 99px; background: #34d399; }
.gm-list { display: grid; gap: 1px; }
#gear-menu.gm .gm-list > a, #gear-menu.gm .gm-list > button, #gear-menu.gm .gm-out { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border-radius: 10px; font-weight: 500; }
#gear-menu.gm .gm-list > a[hidden], #gear-menu.gm .gm-list > button[hidden], #gear-menu.gm .gm-out[hidden] { display: none; }
#gear-menu.gm .gm-list > a::after, #gear-menu.gm .gm-list > button::after { content: '›'; margin-left: auto; color: var(--muted); font-size: 1.2rem; line-height: 1; }
#gear-menu.gm .gm-list small { margin-left: 6px; color: #FEBF3F; font-size: .74rem; font-weight: 600; }
.gm-i { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--ink); }
#gear-menu.gm .gm-out { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; padding-top: 12px; color: #f87171; }
#gear-menu.gm .gm-out .gm-i { background: color-mix(in srgb, #ef4444 16%, transparent); color: #f87171; }
#gear-menu.gm #sub-link { display: none; } /* the subscription card above does this job */
.gm-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5); animation: gm-fade .2s ease-out; }
.gm-scrim[hidden] { display: none; }
@keyframes gm-fade { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 900px) and (pointer: coarse) {
  #gear-menu.gm { position: fixed; left: 0; right: 0; bottom: 0; top: auto !important; width: auto; max-height: 86dvh; overflow-y: auto; z-index: 95; border-radius: 22px 22px 0 0 !important; border-bottom: 0;
    padding: 6px 12px calc(env(safe-area-inset-bottom, 0px) + 14px); box-shadow: 0 -10px 40px rgba(0,0,0,.45); animation: gm-up .26s cubic-bezier(.2, .9, .3, 1); transition: transform .2s ease; overscroll-behavior: contain; }
  @keyframes gm-up { from { transform: translateY(100%); } to { transform: none; } }
  .gm-grab { display: block; width: 40px; height: 5px; margin: 4px auto 10px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 45%, transparent); }
  #gear-menu.gm .gm-list > a, #gear-menu.gm .gm-list > button, #gear-menu.gm .gm-out { padding: 11px 8px; font-size: .95rem; }
  body.gm-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { #gear-menu.gm, .gm-scrim { animation: none; } }

/* ===== phone drawer, like Gmail / Google apps: narrower, your profile on top, a soft rounded highlight, no × (tap outside,
   swipe left or Back closes it) ===== */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .sidebar { width: min(78vw, 300px); padding: 10px 10px calc(env(safe-area-inset-bottom, 0px) + 14px); gap: 2px; border-radius: 0 20px 20px 0; border-right: 0; box-shadow: 0 0 40px rgba(0, 0, 0, .45); }
  body.has-sidebar .sidebar .sb-close { display: none !important; }
  body.has-sidebar .sidebar .sb-brand { order: 0; padding: 8px 10px 6px; font-size: 1.02rem; } body.has-sidebar .sidebar .sb-brand .logo { width: 28px; height: 28px; font-size: .9rem; border-radius: 8px; }
  body.has-sidebar .sidebar .sb-user { order: 1; margin: 6px 2px 8px; padding: 10px 12px; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--muted) 12%, transparent); gap: 12px; }
  body.has-sidebar .sidebar .sb-user .sb-avatar { width: 38px; height: 38px; background: #FEBF3F; color: #141414; font-weight: 800; }
  body.has-sidebar .sidebar .sb-user b { font-size: .92rem; } body.has-sidebar .sidebar .sb-user small { font-size: .74rem; }
  body.has-sidebar .sidebar .sb-nav { order: 2; } body.has-sidebar .sidebar .sb-plan { order: 3; } body.has-sidebar .sidebar .sb-theme { display: none; }
  body.has-sidebar .sidebar .sb-title { padding: 12px 14px 4px; font-size: .64rem; letter-spacing: .1em; }
  body.has-sidebar .sidebar .sb-nav a { gap: 14px; padding: 9px 14px; min-height: 26px; border-radius: 99px; font-size: .92rem; font-weight: 550; color: var(--ink); }
  body.has-sidebar .sidebar .sb-nav a svg { width: 19px; height: 19px; color: var(--muted); }
  body.has-sidebar .sidebar .sb-nav a.on { background: color-mix(in srgb, #FEBF3F 18%, transparent) !important; color: #FEBF3F !important; font-weight: 700; }
  body.has-sidebar .sidebar .sb-nav a.on svg { color: #FEBF3F; }
  body.has-sidebar .sidebar .sb-plan { margin: 10px 4px 0; padding: 10px 12px; border-radius: 14px; font-size: .78rem; }
  body.drawer-open .sidebar { transition: transform .28s cubic-bezier(.2, .9, .3, 1); }
}

/* phone drawer, round 2: no Monifyx logo (the profile card leads), tighter rows, and the plan on one slim line */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .sidebar .sb-brand { display: none !important; }
  body.has-sidebar .sidebar { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); gap: 0; border-radius: 0; width: min(66vw, 252px); } /* square edges, edge to edge like the rest */
  body.has-sidebar .sidebar .sb-user { margin: 0 2px 6px; padding: 9px 12px; }
  body.has-sidebar .sidebar .sb-title { padding: 10px 14px 2px; }
  body.has-sidebar .sidebar .sb-nav a { padding: 7px 14px; min-height: 24px; }
  body.has-sidebar .sidebar .sb-plan { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 10px 2px 0; padding: 8px 12px; white-space: nowrap; }
  body.has-sidebar .sidebar .sb-plan[hidden] { display: none; }
  body.has-sidebar .sidebar .sb-plan .sb-badge { padding: 1px 8px; font-size: .68rem; flex: none; }
  body.has-sidebar .sidebar .sb-plan > span:not(.sb-badge), body.has-sidebar .sidebar .sb-plan > b { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  body.has-sidebar .sidebar .sb-plan a { margin-left: auto; flex: none; font-size: .76rem; }
}

/* account sheet on phones: square edges, no border, edge to edge */
@media (max-width: 900px) and (pointer: coarse) {
  #gear-menu.gm { left: 0 !important; right: 0 !important; width: 100% !important; max-width: none; margin: 0; border: 0 !important; border-radius: 0 !important; box-sizing: border-box; }
}
/* the subscription card in the account menu: ".menu a" (every menu link) was flattening it into plain lines */
#gear-menu .gm-sub { display: grid; grid-template-columns: 1fr auto; width: auto; padding: 10px 12px; border-radius: 12px; }
#gear-menu .gm-sub.ok { background: color-mix(in srgb, #10b981 12%, var(--surface)); border: 1px solid color-mix(in srgb, #10b981 35%, var(--line)); }
#gear-menu .gm-sub.no { background: color-mix(in srgb, #FEBF3F 12%, var(--surface)); border: 1px solid color-mix(in srgb, #FEBF3F 40%, var(--line)); }

/* phone drawer, round 3: less rounded, the plan right under Settings, its link on its own line */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .sidebar .sb-user { border-radius: 10px; }
  body.has-sidebar .sidebar .sb-nav a { border-radius: 10px; }
  body.has-sidebar .sidebar .sb-plan { flex-wrap: wrap; row-gap: 4px; margin: 12px 2px 0 !important; border-radius: 10px; white-space: normal; }
  body.has-sidebar .sidebar .sb-plan a { flex-basis: 100%; margin-left: 0; }
}

/* ===== Subscription page: a paywall. A teal hero with the price, what you get, one clear way to pay ===== */
.pw { max-width: 640px; margin: 0 auto; }
.pw-hero { position: relative; margin: 0 0 -26px; padding: 22px 18px 46px; border-radius: 18px; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #11756c 0%, #0a4a44 55%, #062f2b 100%); }
.pw-tag { display: block; font-weight: 800; font-size: .86rem; letter-spacing: .01em; opacity: .95; } .pw-tag em { font-style: normal; color: #FEBF3F; }
.pw-tile { width: 64px; height: 64px; margin: 14px auto 10px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(145deg, #FFD36E, #FEBF3F 55%, #F2A81C); color: #141414; box-shadow: 0 10px 26px rgba(254, 191, 63, .3); }
.pw-tile svg { width: 28px; height: 28px; }
.pw-hero h1 { margin: 0 0 8px; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.pw-price { display: inline-block; padding: 6px 16px; border-radius: 99px; background: #10b981; color: #fff; font-weight: 800; font-size: 1.05rem; }
.pw-price small { font-weight: 600; opacity: .85; font-size: .78rem; } .pw-price.ok { background: rgba(16, 185, 129, .25); color: #6ee7b7; }
.pw-hero p { margin: 10px auto 0; max-width: 34ch; color: #cfe4df; font-size: .86rem; line-height: 1.4; }
.pw-perks { position: relative; padding: 4px 14px !important; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.pw-perk { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); } .pw-perk:last-child { border-bottom: 0; }
.pw-pi { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, #4cc2b2 14%, transparent); color: #4cc2b2; }
.pw-perk > span:last-child { display: grid; gap: 1px; min-width: 0; } .pw-perk b { font-size: .92rem; } .pw-perk small { color: var(--muted); font-size: .78rem; }
.pw-pay { margin-top: 12px; padding: 14px !important; border-radius: 16px; }
.pw-pay label { font-size: .74rem; color: var(--muted); }
.pw-pay input { margin-bottom: 10px; }
button.pw-cta { display: block; width: 100%; padding: 14px; border: 0; border-radius: 14px; background: #FEBF3F; color: #141414; font-weight: 800; font-size: 1rem; box-shadow: 0 8px 22px rgba(254, 191, 63, .25); }
button.pw-cta:disabled { opacity: .5; }
.pw-note { margin: 8px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; text-align: center; }
.pw-code { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pw-code summary { cursor: pointer; text-align: center; color: #4cc2b2; font-weight: 600; font-size: .86rem; list-style: none; } .pw-code summary::-webkit-details-marker { display: none; }
.pw-code summary::after { content: ' ›'; } .pw-code[open] summary::after { content: ' ⌄'; }
.pw-code .pw-note { text-align: left; }
.pw-coderow { display: flex; gap: 8px; margin-top: 8px; } .pw-coderow input { flex: 1; min-width: 0; margin: 0; } .pw-coderow button { flex: none; }
.pw-terms { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: .74rem; } .pw-terms a { color: #4cc2b2; }
.pw-sec { margin: 18px 4px 8px; font-size: .74rem !important; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) and (pointer: coarse) {
  .pw-hero { width: 100vw; box-sizing: border-box; margin: -4px 0 -26px calc(50% - 50vw); border-radius: 0; padding: 18px 16px 44px; } /* edge to edge */
  .pw-tile { width: 56px; height: 56px; margin: 10px auto 8px; border-radius: 16px; }
  .pw-hero h1 { font-size: 1.3rem; }
  .pw-perk { padding: 9px 0; } .pw-pi { width: 34px; height: 34px; }
}

/* Subscription paywall: paying by code hides the M-Pesa prompt part */
.pw-pay.code-mode > label[for="bl-phone"], .pw-pay.code-mode > #bl-phone, .pw-pay.code-mode > #bl-pay, .pw-pay.code-mode > #bl-msg { display: none; }
.pw-pay.code-mode .pw-code { margin-top: 0; border-top: 0; padding-top: 0; }

/* Subscription paywall on phones: on one screen, with room to breathe. Tile beside the title, price pill under it,
   perks in a 2 x 2 grid, a comfortable pay card */
@media (max-width: 900px) and (pointer: coarse) {
  .pw-hero { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; text-align: left; padding: 16px 18px 38px; margin-bottom: -24px; }
  .pw-hero .pw-tag { grid-column: 1 / -1; margin-bottom: 10px; font-size: .86rem; }
  .pw-hero .pw-tile { grid-row: span 2; width: 54px; height: 54px; margin: 0; border-radius: 15px; } .pw-tile svg { width: 26px; height: 26px; }
  .pw-hero h1 { margin: 0; font-size: 1.3rem; }
  .pw-price { justify-self: start; padding: 4px 13px; font-size: .98rem; margin-top: 4px; } .pw-price small { font-size: .76rem; }
  .pw-hero p { grid-column: 1 / -1; margin: 10px 0 0; max-width: none; font-size: .84rem; }
  .pw-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 6px 12px !important; }
  .pw-perk { gap: 10px; padding: 10px 2px; align-items: flex-start; }
  .pw-perk:nth-last-child(-n+2) { border-bottom: 0; }
  .pw-pi { width: 34px; height: 34px; border-radius: 10px; } .pw-pi svg { width: 18px; height: 18px; }
  .pw-perk b { font-size: .86rem; line-height: 1.25; } .pw-perk small { font-size: .74rem; line-height: 1.3; }
  .pw-pay { margin-top: 10px; padding: 14px !important; }
  .pw-pay label { font-size: .74rem; } .pw-pay input { min-height: 42px; height: 42px; padding: 6px 12px; margin-bottom: 10px; font-size: .98rem; }
  button.pw-cta { padding: 13px; font-size: .98rem; border-radius: 13px; }
  .pw-note { margin-top: 8px; font-size: .76rem; }
  .pw-code { margin-top: 10px; padding-top: 9px; } .pw-code summary { font-size: .88rem; }
  .pw-terms { margin-top: 8px; font-size: .72rem; }
}

/* the way back from paying by code: a clear link, no arrow after it */
.pw-code[open] summary::after { content: ''; }
.pw-code[open] summary { margin-bottom: 4px; }

/* Play Store app paywall: Monthly and Yearly as two choosable cards, then one Google Play button */
.pw-plans { display: grid; gap: 10px; }
.pw-plan { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; }
.pw-plan input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: #FEBF3F; }
.pw-plan:has(input:checked) { border-color: #FEBF3F; background: color-mix(in srgb, #FEBF3F 9%, var(--surface)); }
.pw-pl { display: grid; gap: 1px; min-width: 0; } .pw-pl b { font-size: .98rem; } .pw-pl small { color: var(--muted); font-size: .76rem; }
.pw-pp { margin-left: auto; text-align: right; display: grid; } .pw-pp b { font-size: 1.05rem; } .pw-pp small { color: var(--muted); font-size: .74rem; }
.pw-plans .pw-cta { margin-top: 4px; }

/* ===== Chosen / current items, across the app: option B "teal tint" (chosen 30 Oct 2026 from the mockups).
   A soft teal fill with teal text and icon; small toggles (filter chips, tabs) are solid deep teal with white text.
   Amber stays for actions (Add, Subscribe, Pay), not for "this is the one you are on". ===== */
:root { --sel-bg: rgba(76, 194, 178, .13); --sel-ink: #4cc2b2; --sel-solid: #0F776F; }
nav a.on, .menu a.on, #more-btn.on, .sb-nav a.on, body.has-sidebar .sidebar .sb-nav a.on, button.icon.on, body.has-sidebar .tools button.icon.on {
  background: var(--sel-bg) !important; color: var(--sel-ink) !important; border-color: transparent !important; font-weight: 650; box-shadow: none !important; }
.sb-nav a.on svg, body.has-sidebar .sidebar .sb-nav a.on svg, nav a.on svg, button.icon.on svg { color: var(--sel-ink) !important; }
#gear.on, #gear.on .gear-ico, body.has-sidebar #gear.on, body.has-sidebar #gear.on .gear-ico { color: var(--sel-ink) !important; }
.rf-chips button.on, .sh-tabs button.on, .seg button.on { background: var(--sel-solid) !important; border-color: var(--sel-solid) !important; color: #fff !important; }
.sh-tabs button.on .cnt { background: rgba(255,255,255,.2); }

/* plan cards (the app's Monthly / Yearly): a drawn radio, teal when chosen; smaller so the page fits one screen */
.pw-plans { gap: 8px; }
.pw-plan { padding: 10px 12px; border-radius: 12px; border-width: 1.5px; }
.pw-plan input { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; border: 2px solid #55645f; border-radius: 50%; background: transparent; display: grid; place-items: center; }
.pw-plan input:checked { border-color: var(--sel-ink); background: var(--sel-ink); }
.pw-plan input:checked::after { content: ''; width: 9px; height: 5px; border: 2.4px solid #062f2b; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.pw-plan:has(input:checked) { border-color: var(--sel-ink); background: var(--sel-bg); }
.pw-plan:has(input:checked) .pw-pp b { color: var(--sel-ink); }
.pw-pl b { font-size: .92rem; } .pw-pl small { font-size: .72rem; }
.pw-pp { white-space: nowrap; } .pw-pp b { font-size: .98rem; } .pw-pp small { font-size: .7rem; }
.pw-pp b + small::before { content: ' '; }
@media (max-width: 900px) and (pointer: coarse) { .pw-pp { display: block; } .pw-plans .pw-cta { padding: 12px; } }

/* ===== Savings hub, redesigned (30 Oct 2026) by the usual rules for a calm screen:
   one focal point (the amount you could save), one accent (amber, only on the main button), flat surfaces with a hairline
   border and no shadows or gradients, no decorative icons, lists instead of grids of cards, spacing on a 4px grid,
   tabular numbers, and colour only where it means money (green = saving, red = price up). ===== */
.s2 { --s2-line: #26302e; --s2-save: #34d399; --s2-up: #f87171; max-width: 760px; margin: 0 auto; font-variant-numeric: tabular-nums; }
.s2 .num { font-variant-numeric: tabular-nums; }
.s2-muted { color: var(--muted); }
.s2-head { margin: 4px 0 16px; } .s2-head h1 { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; } .s2-head p { margin: 4px 0 0; color: var(--muted); font-size: .88rem; }
.s2-lbl { display: block; color: var(--muted); font-size: .8rem; font-weight: 500; }
.s2-sum { padding: 20px; border: 1px solid var(--s2-line); border-radius: 16px; background: var(--surface); }
.s2-big { display: block; margin: 4px 0 0; font-size: 2.25rem; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.s2-sub { display: block; margin-top: 4px; color: var(--muted); font-size: .88rem; }
.s2-stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; padding-top: 16px; border-top: 1px solid var(--s2-line); }
.s2-stats button { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .88rem; cursor: pointer; }
.s2-stats button b { color: var(--ink); font-weight: 600; margin-right: 4px; } .s2-stats button + button::before { content: '·'; margin-right: 8px; color: var(--muted); }
button.s2-cta { width: 100%; padding: 12px 16px; border: 0; border-radius: 12px; background: #FEBF3F; color: #141414; font-weight: 700; font-size: .95rem; cursor: pointer; }
button.s2-cta:active { transform: scale(.97); }
.s2-tabs { display: flex; gap: 20px; margin: 24px 0 16px; border-bottom: 1px solid var(--s2-line); overflow-x: auto; scrollbar-width: none; }
.s2-tabs::-webkit-scrollbar { display: none; }
.s2 .s2-tabs button { flex: none; padding: 8px 0 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none !important; color: var(--muted) !important; font: inherit; font-size: .9rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.s2 .s2-tabs button span { margin-left: 4px; color: var(--muted); font-size: .8rem; }
.s2 .s2-tabs button.on { color: var(--ink) !important; border-bottom-color: var(--sel-ink, #4cc2b2); font-weight: 600; }
.s2-card { margin-bottom: 12px; padding: 16px; border: 1px solid var(--s2-line); border-radius: 16px; background: var(--surface); box-shadow: none; }
.s2-card h2 { margin: 4px 0 4px; font-size: 1.05rem; font-weight: 600; line-height: 1.35; max-width: 60ch; }
.s2-card > p { margin: 0 0 12px; font-size: .88rem; line-height: 1.45; max-width: 65ch; }
.s2-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .s2-h h2 { margin: 0; } .s2-h b { font-size: 1.05rem; }
.s2-save { margin: 12px 0 0 !important; font-size: .92rem; } .s2-save b { color: var(--s2-save); font-weight: 700; }
.s2-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--s2-line); }
.s2 .s2-actions button.txt { padding: 4px 0; background: none !important; border: 0; color: var(--sel-ink, #4cc2b2) !important; font-weight: 600; font-size: .88rem; }
.s2-sec { margin: 24px 0 8px; font-size: .8rem !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.s2-list { padding: 0 !important; overflow: hidden; }
.s2 .s2-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--s2-line); border-radius: 0; background: none !important; color: var(--ink) !important; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.s2 .s2-row:last-child { border-bottom: 0; } .s2 .s2-row:disabled { opacity: .55; cursor: default; }
.s2-row > span { display: grid; gap: 2px; min-width: 0; flex: 1; } .s2-row b { font-weight: 600; font-size: .92rem; } .s2-row small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s2-row em { font-style: normal; color: var(--s2-save); font-weight: 600; font-size: .86rem; white-space: nowrap; } .s2-row i { font-style: normal; color: var(--muted); font-size: 1.2rem; }
.s2 .mbars { margin: 12px 0 0; } .s2 .mb-f { background: #55625f !important; } .s2 .mbar:last-child .mb-f { background: #8b9894 !important; }
.s2 .sh-hours i { background: #3b4644 !important; } .s2 .sh-hours i.late { background: #FEBF3F !important; }
.s2 .sh-spark { color: var(--muted) !important; }
.s2-up { color: var(--s2-up); } .s2-down { color: var(--s2-save); }
.s2 .sh-watch, .s2 .sh-rtab { width: 100%; font-size: .86rem; } .s2 .sh-watch th, .s2 .sh-rtab th { font-weight: 500; color: var(--muted); font-size: .74rem; text-transform: none; letter-spacing: 0; }
.s2 .sh-pats { display: grid; gap: 0; grid-template-columns: 1fr; }
@media (min-width: 901px), (pointer: fine) { .s2 .sh-pats { grid-template-columns: 1fr 1fr; gap: 12px; } .s2 .sh-pats .s2-card { margin-bottom: 0; } }
/* the other tabs' cards (tips, plan): same calm look, no emoji or icon tiles, no amber buttons */
.s2 .ins-ico, .s2 .sh-ch > svg { display: none; }
.s2 .card { border: 1px solid var(--s2-line); box-shadow: none; background: var(--surface); }
.s2 .ins .pill { background: none; border: 0; padding: 0; color: var(--muted); font-weight: 500; } .s2 .ins .pill.good { color: var(--s2-save); }
.s2 .sh-plan .sh-cta, .s2 .sh-plan a.sh-cta { background: none !important; color: var(--sel-ink, #4cc2b2) !important; padding: 4px 0; box-shadow: none; }
@media (max-width: 900px) and (pointer: coarse) {
  .s2-head h1 { font-size: 1.3rem; } .s2-head { margin-bottom: 12px; }
  .s2-sum { padding: 16px; } .s2-big { font-size: 2rem; }
  .s2-stats { margin: 12px 0; padding-top: 12px; }
  .s2-tabs { gap: 16px; margin: 20px 0 12px; } .s2 .s2-tabs button { font-size: .86rem; }
  .s2-card { padding: 14px; } .s2-card h2 { font-size: 1rem; }
  .s2 .sh-watch .sh-tr { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  /* desktop: the hub's plain buttons (tabs, rows, links) only lighten on hover, instead of the global teal fill */
  body .sh.s2 .s2-tabs button:not(.tswitch):not(.danger):not(:disabled):not(.on):hover, body .sh.s2 button.s2-row:not(.tswitch):not(.danger):not(:disabled):not(.on):hover,
  body .sh.s2 .s2-stats button:not(.tswitch):not(.danger):not(:disabled):not(.on):hover, body .sh.s2 .s2-actions button.txt:not(.tswitch):not(.danger):not(:disabled):not(.on):hover {
    background: none !important; border-color: transparent !important; color: var(--ink) !important; }
  body .sh.s2 a.s2-row:hover, body .sh.s2 button.s2-row:not(:disabled):hover { background: rgba(255,255,255,.03) !important; }
  body .sh.s2 button.s2-cta:hover { background: #ffcb5c !important; color: #141414 !important; }
}

/* ===== Reports, calmer (subtle): no icon tiles that repeat the label, sentence-case labels, change as plain coloured text,
   a flat Potential savings card, and Excel / PDF as quiet outlined buttons (amber is kept for real actions). ===== */
.rp-kpi .rp-kico { display: none; }
.rp-kpi { gap: 0; }
.rp-klbl { font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.rp-kval { font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-chg, .rp-chg.bad, .rp-chg.good, .rp-chg.x { padding: 0; background: none; font-weight: 600; font-size: .8rem; }
.rp-save { background: var(--surface); border-color: var(--line); } .rp-save:hover { border-color: var(--line); }
a.rp-btn { background: transparent; border: 1px solid var(--line); color: var(--ink) !important; font-weight: 600; box-shadow: none; }
a.rp-btn svg { color: var(--muted); }
@media (max-width: 900px) and (pointer: coarse) {
  .rp-kpis { gap: 8px; }
  .rp-kpi { padding: 12px 14px !important; gap: 2px; }
  .rp-kval { font-size: 1.2rem; margin: 2px 0 0; gap: 6px; }
  .rp-kpi .muted.small { font-size: .74rem; line-height: 1.35; }
  .rp-export { gap: 6px; } a.rp-btn { padding: 8px 12px; font-size: .82rem; }
}

/* labels on inbox alerts (Offer, Price up, Cheaper online): always one line, smaller rather than wrapped, and less rounded */
.alert-t .pill, .inbox-item .alert-t .pill { flex: none; white-space: nowrap; border-radius: 6px; padding: 2px 7px; font-size: .7rem; line-height: 1.4; }
@media (max-width: 380px) and (pointer: coarse) { .alert-t .pill, .inbox-item .alert-t .pill { font-size: .64rem; padding: 2px 6px; } }

/* side menu plan box (Test drive / Subscribed) and its badge: less rounded */
body.has-sidebar .sidebar .sb-plan, .sb-plan { border-radius: 8px !important; }
.sb-plan .sb-badge { border-radius: 6px; }

/* admin Users: search, filter, sort, and pages */
.u-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.u-tools #u-q { flex: 1 1 260px; min-width: 0; }
.u-tools select { flex: none; width: auto; }
.u-count { margin-left: auto; }
.u-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 4px; }
.u-pager button { padding: 6px 12px; font-size: .84rem; }

/* reading a receipt photo: one slim line, the step and a bar sliding across (no spinner, no file name) */
.rd { display: flex; align-items: center; gap: 12px; min-height: 22px; }
.rd-t { flex: none; font-size: .9rem; color: var(--ink); }
.rd-bar { position: relative; flex: 1; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--muted) 20%, transparent); overflow: hidden; }
.rd-bar i { position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 99px; background: #4cc2b2; animation: rd-slide 1.1s ease-in-out infinite; }
@keyframes rd-slide { 0% { left: -35%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .rd-bar i { animation: none; left: 0; width: 100%; opacity: .5; } }

/* Add receipts: while a read receipt waits to be saved or discarded, only it shows */
#view.drafting > :not(#queue) { display: none !important; }
#view.drafting #queue > .card:first-child { margin-top: 0 !important; }

/* an error with a button (e.g. "You have used your free photo reads" + Subscribe): side by side, inside the box */
.notice.err-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notice.err-row > span { flex: 1; min-width: 0; }
.notice.err-row > .btn { flex: none; margin: 0; padding: 8px 14px; white-space: nowrap; }
@media (max-width: 420px) and (pointer: coarse) { .notice.err-row { flex-wrap: wrap; } .notice.err-row > .btn { width: 100%; text-align: center; } }

/* Receipts filters on phones: no border, edge to edge */
@media (max-width: 900px) and (pointer: coarse) {
  #view > .card.rf { width: 100vw; box-sizing: border-box; margin: 6px 0 10px calc(50% - 50vw) !important; border: 0 !important; border-radius: 0 !important; padding-left: 16px !important; padding-right: 16px !important; }
}

/* ===== Messages across the app: option 2 "card with a coloured edge" (chosen 30 Oct 2026, mockups in "error mockups/").
   A normal card, a thin coloured line on the left (amber = heads-up, red = problem, green = done, teal = information),
   ordinary text, and the message's button filled in the same colour. No emoji marker in front. ===== */
.notice, .notice.bad, .notice.ok, .notice.info { background: var(--surface) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; border-left: 3px solid #f59e0b !important; border-radius: 8px !important; padding: 10px 14px; }
.notice.bad { border-left-color: #ef4444 !important; } .notice.ok { border-left-color: #10b981 !important; } .notice.info { border-left-color: #4cc2b2 !important; }
.notice::before, .notice.ok::before, .notice.info::before { content: none !important; }
.notice b:first-child { color: var(--ink); }
.notice .small, .notice .muted { color: var(--muted) !important; }
.notice a:not(.btn) { color: #4cc2b2; font-weight: 600; }
.notice .btn.primary, .notice a.btn.primary, .notice button.primary { border: 0 !important; border-radius: 8px; background: #f59e0b !important; color: #1a1300 !important; font-weight: 600; }
.notice.bad .btn.primary, .notice.bad a.btn.primary, .notice.bad button.primary { background: #ef4444 !important; color: #fff !important; }
.notice.ok .btn.primary, .notice.ok a.btn.primary, .notice.ok button.primary { background: #10b981 !important; color: #052e1c !important; }

/* a receipt row that did not add up on the photo (repaired or unsure): amber edge so the person checks it before saving */
tr.row-check td { background: rgba(245, 158, 11, .08); } tr.row-check td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

/* a receipt photographed in parts: thumbnails in a row, the line to start the next photo at, and the two choices */
.parts { display: grid; gap: 10px; }
.parts-head { display: flex; align-items: center; justify-content: space-between; } .parts-head b { font-size: .95rem; }
.parts-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.part { position: relative; flex: none; width: 76px; margin: 0; }
.part img { display: block; width: 76px; height: 100px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.part figcaption { margin-top: 4px; font-size: .7rem; color: var(--muted); white-space: nowrap; }
.part-x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 0; background: #2b3533; color: var(--ink); font-size: .9rem; line-height: 1; }
.parts-hint { margin: 0; padding: 8px 10px; border-left: 3px solid #4cc2b2; background: var(--surface); border-radius: 6px; font-size: .84rem; color: var(--muted); }
.parts-hint q { display: block; margin-top: 2px; color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; quotes: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parts-note { margin: 0; font-size: .8rem; color: var(--muted); } .parts-note.warn { color: #fbbf24; }
.parts-tips { margin: 0; font-size: .78rem; color: var(--muted); }
.parts-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.parts-acts > * { flex: 1 1 auto; text-align: center; }

/* Receipt items on phones: just Item and Total (quantity, unit and price stay in the data, out of the way), lined up in a grid:
   the name and its category on the left using all the room, the total on the right, then ×. While a name is being typed it
   takes the whole row and the total and × move under it. */
@media (max-width: 900px) and (pointer: coarse) {
  .scroll:has(> table.items) { overflow: visible; }
  table.items, table.items thead, table.items tbody { display: block; width: 100%; }
  table.items tr { display: grid; grid-template-columns: minmax(0, 1fr) 96px 34px; gap: 6px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.items thead tr { padding: 0 0 6px; }
  table.items th, table.items td { display: block; padding: 0 !important; min-width: 0 !important; width: auto !important; border: 0; }
  table.items :is(th, td):nth-child(n+2):nth-child(-n+5) { display: none !important; } /* category column, qty, unit, price */
  table.items th:nth-child(6) { text-align: right; }
  table.items .c-name input { width: 100%; box-sizing: border-box; min-height: 38px; font-size: 15px; }
  table.items .cat-inline { width: 100%; margin-top: 4px; }
  table.items td:nth-child(6) input { width: 100% !important; box-sizing: border-box; min-height: 38px; text-align: right; font-variant-numeric: tabular-nums; }
  table.items td:last-child button { width: 34px; height: 38px; padding: 0; }
  table.items tr.editing .c-name { grid-column: 1 / -1; }
  table.items tr.editing td:nth-child(6) { grid-column: 2; }
  table.items tr.editing td:last-child { grid-column: 3; }
  table.items tr.editing .c-name input { min-height: 44px; font-size: 16px; }
}
@media (max-width: 900px) and (pointer: coarse) { table.items tr.row-check { background: rgba(245, 158, 11, .08); box-shadow: inset 3px 0 0 #f59e0b; padding-left: 6px; } table.items tr.row-check td { background: none; box-shadow: none !important; } }

/* Add receipts on phones (and the app): a slimmer drop zone, and the "Saved …" line without a card around it */
.saved-note .notice { margin: 0; }
@media (max-width: 700px) and (pointer: coarse) {
  .drop { padding: 9px 12px; border-width: 1.5px; }
  .drop strong { font-size: .84rem; }
  .drop span { display: block; font-size: .7rem; margin-top: 1px; }
}

/* Recent payments without a receipt (Add page): no card border, no Category column, fixed columns so the
   amount always fits the screen */
.mrec-wrap { border: 0; background: transparent; padding: 0; margin: 0 0 14px; overflow: hidden; }
.mrec { width: 100%; table-layout: fixed; border-collapse: collapse; }
.mrec th, .mrec td { padding: 8px 6px; vertical-align: top; }
.mrec td.who { overflow-wrap: anywhere; }
.mrec td.amt { white-space: nowrap; }
.mrec col.c-date { width: 24%; } .mrec col.c-via { width: 16%; } .mrec col.c-amt { width: 28%; }
@media (max-width: 700px) and (pointer: coarse) {
  .mrec th { font-size: .66rem; padding: 6px 4px; }
  .mrec td { font-size: .78rem; padding: 7px 4px; }
  .mrec td .small { font-size: .66rem; }
  .mrec col.c-date { width: 23%; } .mrec col.c-via { width: 15%; } .mrec col.c-amt { width: 30%; }
}
.mrec td.num:first-child { white-space: normal; }   /* the date may wrap rather than push into Paid to */

/* ---- phone Home (approved design, 31 Oct 2026): no logo in the header (the menu button only); the spending figure and
   chart on the page, not in a card; period words with an amber underline; one strip of three numbers;
   Recent as a plain list. Bottom bar: every tab labelled, a teal line over the open one, Scan a tab like the others.
   ---- */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar header.top .brand { display: none !important; }

  .hm { gap: 16px; }
  .hm-row { display: flex; align-items: flex-start; gap: 10px; }
  .hm-fig { flex: 1; min-width: 0; }
  .hm-lbl { font-size: .86rem; color: var(--muted); }
  .hm .hm-big { font-size: 2.35rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin: 2px 0 3px; color: var(--ink); text-align: left; }
  .hm-delta { font-size: .8rem; font-weight: 600; color: var(--muted); }
  .hm-delta.up { color: #e5484d; } .hm-delta.down { color: #16a34a; }
  .hm-btns { display: flex; gap: 6px; flex: none; }
  .hm-btns button { width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--ink); }
  .hm-chart { position: relative; height: 112px; margin: 12px 0 0; }
  .hm-per { display: flex; gap: 20px; margin-top: 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .hm-per button { flex: none; min-height: 0; padding: 0 0 8px; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: .9rem; font-weight: 600; color: var(--muted); }
  .hm-per button.on { color: var(--ink); font-weight: 800; background: none; box-shadow: inset 0 -2px var(--accent); }


  .hm-stats { display: flex; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .hm-stats div { flex: 1; min-width: 0; padding: 10px 0 10px 12px; }
  .hm-stats div:first-child { padding-left: 0; }
  .hm-stats div + div { border-left: 1px solid var(--line); }
  .hm-stats span { display: block; font-size: .74rem; color: var(--muted); }
  .hm-stats b { display: block; margin-top: 2px; font-size: .98rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .hm-list { display: grid; }
  .hm-tx { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--ink); text-decoration: none; }
  .hm-tx + .hm-tx { border-top: 1px solid var(--line); }
  .hm-av { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: color-mix(in srgb, var(--c) 70%, var(--ink)); background: color-mix(in srgb, var(--c) 16%, transparent); }
  .hm-tx-m { flex: 1; min-width: 0; }
  .hm-tx-m b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hm-tx-m small { color: var(--muted); font-size: .76rem; }
  .hm-tx-a { flex: none; font-size: .92rem; }

  /* the bottom bar */
  body.has-sidebar .tabbar { height: calc(66px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); overflow: visible; }
  body.has-sidebar .tabbar a, body.has-sidebar .tabbar button { position: relative; gap: 3px; font-size: .68rem; font-weight: 600; color: var(--muted); }
  body.has-sidebar .tabbar a svg, body.has-sidebar .tabbar button svg { width: 23px; height: 23px; padding: 0; background: none !important; }
  body.has-sidebar .tabbar a.on, body.has-sidebar .tabbar button.on { color: var(--ink); }
  body.has-sidebar .tabbar a.on span, body.has-sidebar .tabbar button.on span { font-weight: 800; }
  body.has-sidebar .tabbar a.on svg, body.has-sidebar .tabbar button.on svg { color: var(--brand); background: none !important; }
  .tabbar a.on span::after, .tabbar button.on span::after { display: none; }
  body.has-sidebar .tabbar a.on::before, body.has-sidebar .tabbar button.on::before { content: ''; position: absolute; top: -1px; left: 16%; right: 16%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand); }
  body.has-sidebar .tabbar a.tab-add, body.has-sidebar .tabbar a.tab-add.on { width: auto; height: 100%; margin: 0; border-radius: 0 !important; background: none !important; box-shadow: none; color: var(--muted); align-content: center; padding: 0 !important; }
  body.has-sidebar .tabbar a.tab-add.on { color: var(--ink); }
  /* the open tab: its icon filled teal (inner lines cut out in the bar colour), its name bold and white in dark mode */
  body.has-sidebar .tabbar .on svg .f { fill: currentColor; } body.has-sidebar .tabbar .on svg .d { stroke: var(--surface); stroke-width: 2; }
  body.has-sidebar .tabbar a.tab-add svg { width: 23px; height: 23px; color: inherit; } body.has-sidebar .tabbar a.tab-add.on svg { color: var(--brand); }
  body.has-sidebar { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) and (pointer: coarse) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.has-sidebar .tabbar .on { color: #fff; } }
@media (max-width: 900px) and (pointer: coarse) { :root[data-theme="dark"] body.has-sidebar .tabbar .on { color: #fff; } }
/* phones: search and alerts in the header are plain icons, without the round outline (alerts keeps its highlight while open) */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .tools #search-btn, body.has-sidebar .tools #bell:not(.on) { background: none !important; border: 0 !important; box-shadow: none !important; }
}
/* phones: the header is the menu button, a wide search box ("Search items or shops", opens the search window) and then
   alerts and the account circle; the separate search icon goes */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar header.top .menu-btn { order: 0; }
  body.has-sidebar header.top .hdr-search:not([hidden]) { display: flex !important; align-items: center; order: 1; flex: 1 1 auto; min-width: 0; max-width: none; height: 40px; padding: 0 14px; gap: 8px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
  body.has-sidebar header.top .hdr-search input { font-size: .86rem; line-height: 1.2; text-overflow: ellipsis; }
  body.has-sidebar header.top .hdr-search svg { flex: none; display: block; }
  body.has-sidebar header.top .hdr-search input::placeholder { color: var(--muted); opacity: 1; }
  body.has-sidebar header.top .tools { order: 2; }
  body.has-sidebar .tools #search-btn { display: none !important; }
}
/* back arrows instead of close buttons on phones (Safaricom / Bolt style). Computers keep the × and the centred pop-up. */
#modal-x .ico-back, .hdr-back { display: none; }
@media (max-width: 900px) and (pointer: coarse) {
  /* a pop-up fills the screen like a page, under a top bar with a back arrow */
  .modal:not([hidden]) { padding: 0 !important; background: var(--bg) !important; display: block !important; overscroll-behavior: contain; }
  .modal:not([hidden])::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: calc(54px + env(safe-area-inset-top)); background: var(--bg); border-bottom: 1px solid var(--line); z-index: 2; }
  .modal > .modal-card { width: 100% !important; max-width: none !important; min-height: 100%; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: var(--bg) !important; padding: calc(64px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom)) !important; }
  .modal > .modal-card > #modal-x { position: fixed !important; top: calc(7px + env(safe-area-inset-top)) !important; left: 6px !important; right: auto !important; width: 40px !important; height: 40px !important; padding: 0 !important; display: grid; place-items: center; border: 0 !important; border-radius: 50% !important; background: none !important; color: var(--ink) !important; z-index: 3; }
  #modal-x .x-t { display: none; } #modal-x .ico-back { display: block; }
  .modal-card #modal-body > h2:first-child, .modal-card #modal-body > div > h2:first-child { font-size: 1.35rem; margin-top: 0; padding-right: 0; }

  /* pages other than the four tabs: a back arrow where the menu button is */
  body.sub-page:not(.no-tabbar) header.top .menu-btn { display: none !important; }
  body.has-sidebar header.top .hdr-back:not([hidden]) { display: grid; place-items: center; order: 0; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); }
}
/* phones: the account menu opens full screen like a page (Apple Account style): a top bar with a back arrow and
   "Account", then the profile and the menu rows in rounded cards; Log out in its own card */
.gm-top { display: none; }
@media (max-width: 900px) and (pointer: coarse) {
  #gear-menu.gm { top: 0 !important; bottom: 0; height: 100dvh; max-height: none; background: var(--bg) !important; box-shadow: none; padding: env(safe-area-inset-top, 0px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px) !important; }
  #gear-menu .gm-grab { display: none; }
  #gear-menu .gm-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; height: 56px; margin: 0 -16px 14px; padding: 0 10px 0 6px; background: var(--bg); border-bottom: 1px solid var(--line); }
  #gear-menu .gm-top b { font-size: 1.1rem; }
  #gear-menu .gm-back { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ink); }
  #gear-menu .menu-who { margin: 0 0 16px; padding: 14px; border: 0; border-radius: 16px; background: var(--surface); }
  #gear-menu .gm-av { width: 52px; height: 52px; font-size: 1.1rem; }
  #gear-menu .gm-id b { font-size: 1.08rem; }
  #gear-menu .gm-list { gap: 0; padding: 0 4px; border-radius: 16px; background: var(--surface); }
  #gear-menu.gm .gm-list > a, #gear-menu.gm .gm-list > button { padding: 13px 10px; border-radius: 0; background: none; }
  #gear-menu.gm .gm-list > :not([hidden]) ~ :not([hidden]) { border-top: 1px solid var(--line); }
  #gear-menu.gm .gm-out { margin-top: 16px; padding: 13px 14px; border-top: 0; border-radius: 16px; background: var(--surface); }
}
/* fixes seen on the phone (31 Oct 2026): the search box's own text field drew a second box inside it; and the open tab's
   name came out teal because the selected-menu rule (nav a.on, with !important) also reaches the bottom bar */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar header.top .hdr-search input, body.has-sidebar header.top .hdr-search input:focus { border: 0 !important; background: none !important; box-shadow: none !important; outline: 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; }
  body.has-sidebar .tabbar a.on, body.has-sidebar .tabbar button.on { color: var(--ink) !important; background: none !important; }
  body.has-sidebar .tabbar a.on svg, body.has-sidebar .tabbar button.on svg { color: var(--brand) !important; }
}
@media (max-width: 900px) and (pointer: coarse) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.has-sidebar .tabbar .on { color: #fff !important; } }
@media (max-width: 900px) and (pointer: coarse) { :root[data-theme="dark"] body.has-sidebar .tabbar .on { color: #fff !important; } }
/* phones: the page runs up behind the status bar (viewport-fit=cover), so the header is pushed down by the bar's height
   and its background fills the strip behind the clock: one colour from the top edge, as in Instagram or BudgetPesa */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar header.top { padding-top: env(safe-area-inset-top, 0px); }
}
/* search window: the box and the period chips stay at the top while results scroll; the total big, the rest in a grid */
.s-head { position: sticky; top: -18px; z-index: 2; margin: 0 -18px; padding: 8px 18px 10px; background: var(--surface); border-bottom: 1px solid var(--line); }
.s-head .s-form { margin: 0; }
.s-head #s-r { display: none; } /* the chips below choose the period */
.s-box { flex: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 22px; background: var(--bg); color: var(--muted); }
.s-box:focus-within { border-color: var(--brand); }
.s-form .s-box input { flex: 1; min-width: 0; height: auto; padding: 0; border: 0; outline: 0; box-shadow: none; background: none; font-size: 1rem; color: var(--ink); }
.s-per { display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; }
.s-per button { flex: none; min-height: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--muted); font-size: .8rem; font-weight: 600; }
.s-per button.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.s-sum { margin: 14px 0 12px; }
.s-big b { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; }
.s-big span { color: var(--muted); font-size: .84rem; }
.s-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; border-top: 1px solid var(--line); }
.s-grid > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.s-grid > div:nth-child(even):not(.wide) { padding-left: 14px; border-left: 1px solid var(--line); }
.s-grid > .wide { grid-column: 1 / -1; }
.s-grid span { display: block; color: var(--muted); font-size: .76rem; }
.s-grid b { display: block; margin-top: 2px; font-size: 1rem; font-weight: 750; }
@media (max-width: 900px) and (pointer: coarse) {
  .s-head { top: calc(54px + env(safe-area-inset-top, 0px)); margin: 0 -16px; padding: 8px 16px 10px; background: var(--bg); }
  #s-out .cat-bar { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; margin: 4px 0 8px; }
  #s-out .cat-bar .seg { grid-column: 1 / -1; }
  #s-out .cat-bar .grow { display: none; }
  #s-out .cat-bar > a, #s-out .cat-bar > button:not([data-t]) { padding: 6px 12px; font-size: .8rem; min-height: 0; }
}
/* phone Home, 3M / 1Y / All: the range's date line is gone; its space stays, so the header and the figure have room */
@media (max-width: 900px) and (pointer: coarse) { .hm .hm-gap { height: 18px; } }
/* phones: the bottom bar stays on screen over full-screen pop-ups and the account page (not over "are you sure?" dialogs,
   short drop-down lists or the side menu); those pages leave room at the bottom so nothing hides behind it */
@media (max-width: 900px) and (pointer: coarse) {
  body.has-sidebar .tabbar { z-index: 97; }
  .modal:not([hidden]) > .modal-card { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important; }
  #gear-menu.gm { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important; }
  .sel-pop-bg { z-index: 100; } .sel-pop { z-index: 101; } /* above the Transactions filter sheet (99), so a tap outside the list closes it */
  .toast { z-index: 98; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
/* download buttons: a file icon for what you get (green spreadsheet for Excel / CSV, red page for PDF) instead of an arrow */
.dl-btn, .rp-btn { display: inline-flex; align-items: center; gap: 6px; }
.file-ico { flex: none; }
.file-ico.xls { color: #22a55b; }
.file-ico.pdf { color: #e5484d; }
/* phones, fixes for the search window (31 Oct 2026): a full-screen pop-up's card clipped sideways with overflow: hidden,
   which made the card the sticky container, so the search area stuck 87px below the card's own top padding and covered
   the line under it; overflow: clip cuts the same way without that. And the general amber focus outline drew a box
   around the search field inside its rounded box. */
@media (max-width: 900px) and (pointer: coarse) {
  .modal:not([hidden]) > .modal-card { overflow-x: clip !important; }
}
.s-box input, .s-box input:focus, .s-box input:focus-visible { outline: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
/* search window, tighter (31 Oct 2026): each figure on one line ("Times bought: 10×"); the title close to the box; on phones
   the stuck search area paints its background across the full screen width, so nothing shows beside it while scrolling */
.s-grid > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; padding: 8px 0; }
.s-grid span { display: inline; font-size: .8rem; }
.s-grid span::after { content: ':'; }
.s-grid b { display: inline; margin: 0; font-size: .95rem; white-space: nowrap; }
.s-sum { margin: 10px 0 8px; }
.s-grid { margin-top: 8px; }
#modal-body h2.s-title { margin-bottom: 6px !important; min-height: 0; }
@media (max-width: 900px) and (pointer: coarse) {
  .s-head { padding-top: 6px; box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax); }
}
/* search window: the "More" period drop-down looks like the chips beside it */
.s-per .s-more { flex: none; width: auto; height: auto; min-height: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--muted); font-size: .8rem; font-weight: 600; -webkit-appearance: none; appearance: none; }
.s-per .s-more.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.s-per .s-more option { background: var(--surface); color: var(--ink); }
/* Prices: the "may be the same product" rows keep their two buttons together; the merge panel's name choices as a list */
.sim-btns { display: inline-flex; gap: 6px; flex: none; }
.mg-pick { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.mg-pick legend { margin-bottom: 6px; font-weight: 700; }
.mg-pick label { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: .95rem; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.mg-pick label:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.mg-pick input[type="radio"] { width: auto; margin: 0; accent-color: var(--brand); }
.mg-pick #mg-own { margin-top: 2px; }
.modal .mg-pick label, .mg-pick label { font-size: .95rem !important; font-weight: 600 !important; color: var(--ink) !important; text-transform: none !important; letter-spacing: 0 !important; }
/* shopping list: search results under the add box (items bought before, then "Add …" for something new) */
.add-res { margin: 6px 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); overflow: hidden; }
.add-res[hidden] { display: none; }
.add-res .li { padding: 8px 12px; }
.add-res .li + .li { border-top: 1px solid var(--line); }
.add-res .li button { flex: none; }
/* shopping list: the edit (✎) button beside remove */
.li .li-ed { flex: none; padding: 4px 6px; font-size: 1rem; color: var(--muted); }
/* buttons side by side in a panel (Save / Cancel, Merge / Cancel), with room between them */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Evergreen (chosen 31 Oct 2026): in the dark theme the main action buttons are amber (Take a photo, Save, Add, Merge…);
   teal stays for links, the open tab and selected chips, so amber always means "the thing to do here". A rise in
   spending reads in a soft coral rather than alarm red. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button.primary, :root:not([data-theme="light"]) .btn.primary, :root:not([data-theme="light"]) a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  :root:not([data-theme="light"]) .hm-delta.up { color: #f08a6c; }
}
:root[data-theme="dark"] button.primary, :root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
:root[data-theme="dark"] .hm-delta.up { color: #f08a6c; }
/* line icons in the Add page's buttons (instead of emojis) */
.btn-ico { flex: none; vertical-align: -4px; margin-right: 6px; }
/* the whole page takes the theme background once this file has loaded (index.html paints the intro's dark green first,
   which otherwise showed below short pages such as Add receipts) */
html { background: var(--bg); }
/* shopping list rows: the name gets the width; a slim centred quantity box, the price right-aligned, small edit / remove */
#mine .li { gap: 10px; padding: 12px 0; }
#mine .li-n { font-weight: 600; font-size: .95rem; line-height: 1.3; }
#mine .li-main .small { font-size: .78rem; margin-top: 2px; }
#mine .li input.qty { flex: none; width: 44px !important; min-width: 0 !important; height: 34px !important; min-height: 0 !important; padding: 0 4px !important; text-align: center; font-size: .9rem; -moz-appearance: textfield; appearance: textfield; }
#mine .li input.qty::-webkit-outer-spin-button, #mine .li input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#mine .li-p { flex: none; min-width: 64px; font-size: .9rem; font-weight: 600; color: var(--ink); }
#mine .li .li-ed, #mine .li [data-r] { flex: none; width: 28px; height: 28px; min-height: 0; padding: 0; display: grid; place-items: center; color: var(--muted); }
/* shopping list: the whole name area opens the item's panel; Remove sits in that panel, in red */
#mine .li-main[data-e] { cursor: pointer; }
.danger-t { color: #f08a6c !important; }
/* ---- app dashboard (phone Home) matched to the Evergreen mockup (31 Oct 2026) ---- */
@media (max-width: 900px) and (pointer: coarse) {
  /* header: plain menu and bell icons, a filled search pill, an amber count, the account circle without the amber ring */
  body.has-sidebar header.top .menu-btn { background: none !important; border: 0 !important; box-shadow: none !important; }
  body.has-sidebar header.top .hdr-search:not([hidden]) { border: 0; background: var(--surface); }
  body.has-sidebar .tools .badge { background: var(--accent); color: #1b1405; }
  .uc-av { border: 0 !important; background: var(--brand-soft) !important; color: var(--brand) !important; width: 36px !important; height: 36px !important; font-size: .75rem !important; }
  /* the figure: a little closer under the header, as in the mockup */
  .hm .hm-gap { height: 2px; }
  .hm-lbl { font-size: .82rem; }
  .hm .hm-big { font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; }
  .hm-delta, .hm-delta.up, .hm-delta.down { color: var(--muted) !important; font-size: .8rem; font-weight: 500; }
  .hm-delta b { font-weight: 700; }
  .hm-delta.up b { color: #f08a6c; } .hm-delta.down b { color: #4ade80; }
  /* period: a soft teal pill on the chosen one, no underline */
  .hm-per { gap: 4px; border-bottom: 0; margin-top: 10px; }
  .hm-per button { padding: 6px 12px; border-radius: 16px; font-size: .84rem; font-weight: 500; }
  .hm-per button.on { box-shadow: none; background: var(--brand-soft); color: var(--brand); font-weight: 600; }
  /* the month: plain arrows and the month's name, no boxes */
  .hm ~ * .mb-nav, .mb-nav { grid-template-columns: 32px 1fr 32px; }
  .hm .mb-nav button { border: 0 !important; background: none !important; color: var(--muted); height: 32px; }
  .hm .mb-nav select { border: 0 !important; background: none !important; font-weight: 600; font-size: .92rem; height: 32px; -webkit-appearance: none; appearance: none; background-image: none !important; padding: 0; }
  /* Recent: a neutral square behind each kind's icon */
  .hm-av { background: #1d2624 !important; color: #b9c6c3 !important; border-radius: 12px; }
  .hm-tx-a { font-weight: 600; }
}
/* "See all" links: plain teal words, no arrow or underline (as on Home) */
a.see-all { color: var(--brand); text-decoration: none; font-weight: 600; font-size: .86rem; }
/* Add page on phones: Take a photo and Payment without a receipt side by side; From notes and the help text full width */
@media (max-width: 900px) and (pointer: coarse) {
  #view .actions:has(#pay-btn) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
  #view .actions:has(#pay-btn) > label.btn, #view .actions:has(#pay-btn) > #pay-btn { width: 100%; margin: 0; min-height: 52px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: .9rem; line-height: 1.25; }
  #view .actions:has(#pay-btn) > #notes-btn { grid-column: 1 / -1; width: 100%; margin: 0; justify-content: center; }
  #view .actions:has(#pay-btn) > span { grid-column: 1 / -1; }
}
/* Receipts period: on phones three chips and "More ▾" (Today, Last month, Last 3 months, Custom dates) on one line;
   computers keep every chip */
.rf-chips .rf-more { display: none; }
@media (max-width: 900px) and (pointer: coarse) {
  .rf-chips:not(.only-custom) .rf-x { display: none !important; }
  .rf-chips { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .rf-chips > button { flex: none; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
  .rf-chips { gap: 6px !important; }
  .rf-chips .rf-more { display: block; flex: none; width: auto; height: auto; min-height: 0; padding: 7px 14px; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--ink); font: inherit; font-size: .88rem; font-weight: 500; -webkit-appearance: none; appearance: none; }
  .rf-chips .rf-more.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
  .rf-chips .rf-more option { background: var(--surface); color: var(--ink); }
  .rf-chips.only-custom .rf-more { display: none; }
}
@media (max-width: 900px) and (pointer: coarse) { .rf-chips > button, .rf-chips .rf-more { font-size: .8rem !important; padding: 7px 9px !important; } .rf-chips { gap: 5px !important; } }
/* Purchase without a receipt on phones: the receipt form's "Item and Total only" rule (table.items columns 2-5) was also
   hiding this form's Category, Price and Total, and showing its column headings; it applies to that form only */
@media (max-width: 900px) and (pointer: coarse) {
  table.items.pay-items :is(th, td):nth-child(n+2):nth-child(-n+5) { display: block !important; }
  table.items.pay-items thead { display: none !important; }
  .pay-items td::before { font-size: .74rem !important; margin-bottom: 3px; }
  .pay-items tr { gap: 10px 10px !important; padding: 12px 0 !important; }
  .pay-items td.pi-total { align-self: end; text-align: right; padding-bottom: 10px; font-size: .95rem; }
  .pay-items td.pi-pay { grid-column: 1 / -1; }
  .pay-items td.pi-pay select { width: 100%; }
  .pay-items input, .pay-items select { min-height: 42px !important; }
  .pay-items td.pi-del { top: 34px !important; right: 4px !important; }
}
/* the item suggestions in Purchase without a receipt: under the box, in the app's colours */
.pay-items td.pi-name { position: relative; }
.pi-sug { position: absolute; left: 0; right: 0; top: 100%; z-index: 6; margin-top: 4px; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.pi-sug[hidden] { display: none; }
.pi-sug button { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px; min-height: 0; padding: 11px 14px; border: 0; border-radius: 0; background: none; color: var(--ink); font: inherit; font-size: .92rem; text-align: left; }
.pi-sug button + button { border-top: 1px solid var(--line); }
.pi-sug button small { flex: none; color: var(--muted); font-size: .8rem; }
@media (max-width: 900px) and (pointer: coarse) {
  .pay-items tr { grid-template-columns: 1fr 1fr !important; }
  .pay-items td.pi-name, .pay-items td.pi-cat, .pay-items td.pi-pay { grid-column: 1 / -1 !important; }
  .pay-items td.pi-price { grid-column: 1 !important; }
  .pay-items td.pi-total { grid-column: 2 !important; }
}
/* the digital receipt: the button in a receipt's panel, and the slip shown on a soft background */
.dr-paper { display: grid; place-items: center; padding: 16px 0; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, var(--bg)); }
.dr-paper img { display: block; width: 100%; max-width: 340px; height: auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.35)); }
/* a receipt's linked M-Pesa payment, under its title */
.mp-link { display: grid; gap: 2px; margin: 2px 0 10px; padding: 10px 12px; border-radius: 10px; background: var(--brand-soft); color: var(--ink); font-size: .9rem; }
.mp-link small { color: var(--muted); font-size: .78rem; }
/* a receipt with no photo: its digital slip sits where the photo was, as a thumbnail; tap to open it full size */
.dr-thumb { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; min-height: 0; }
.dr-thumb img { display: block; width: 180px; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.dr-cap { margin-top: 6px; }
/* M-Pesa list on phones: the add button names the suggested category, so it wraps in a narrow button instead of
   running past the screen edge */
@media (max-width: 900px) and (pointer: coarse) {
  .mp-list td.acts { width: 112px; }
  .mp-list td.acts button[data-one] { width: 104px; white-space: normal; line-height: 1.2; padding: 6px 8px; font-size: .78rem; min-height: 0; }
  .mp-list td.acts button[data-pick] { width: 104px; font-size: .76rem; padding: 4px 0; min-height: 0; }
}
/* M-Pesa page in the app: the "read my messages" card and the explanation before Android's permission prompt */
.mp-disc { margin: 8px 0 0; padding-left: 20px; }
.mp-disc li { margin: 6px 0; }
/* ---- Home: Money in / Money out row, the Out | In switch, Where it goes tabs, a tighter Recent list (1 Nov 2026) ---- */
.hm-io { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.hm-io-t { display: grid; gap: 4px; justify-items: start; min-height: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; font: inherit; }
.hm-io-t span { font-size: .8rem; color: var(--muted); font-weight: 500; }
.hm-io-t b { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
.hm-io-t.in b { color: #4ade80; } .hm-io-t.out b { color: #f08a6c; }
.hm-io-t.in span::first-letter { color: #4ade80; } .hm-io-t.out span::first-letter { color: #f08a6c; }
.hm-io-t.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.hm-flow { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9px; background: var(--surface); }
/* not the round icon buttons beside it: equal width, the word in the middle */
.hm-btns .hm-flow button { width: auto; min-width: 46px; height: 30px; min-height: 0; padding: 0 12px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-align: center; background: none; color: var(--muted); font-size: .78rem; font-weight: 600; }
.hm-flow button.on[data-flow="out"] { background: #f08a6c; color: #1b0d07; }
.hm-flow button.on[data-flow="in"] { background: #4ade80; color: #062010; }
.hm-btns { align-items: center; }
.hm-ctabs { display: flex; gap: 16px; }
.hm-ctabs button { min-height: 0; padding: 0 0 6px; border: 0; border-radius: 0; background: none; color: var(--muted); font-size: 1rem; font-weight: 600; }
.hm-ctabs button.on { color: var(--ink); font-weight: 800; box-shadow: inset 0 -2px var(--accent); }
@media (max-width: 900px) and (pointer: coarse) {
  .hm-av { width: 32px !important; height: 32px !important; border-radius: 10px !important; }
  .hm-av svg { width: 16px; height: 16px; }
  .hm-tx { gap: 10px; padding: 8px 0; }
  .hm-tx-m b { font-size: .86rem; } .hm-tx-m small { font-size: .72rem; } .hm-tx-a { font-size: .86rem; }
}
/* section tabs (Settings, M-Pesa, Reports): one short page per tab instead of a long scroll */
.sec-tabs { display: flex; gap: 6px; margin: 4px 0 12px; overflow-x: auto; scrollbar-width: none; }
.sec-tabs button { flex: none; min-height: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 99px; background: none; color: var(--muted); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.sec-tabs button.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.grid.tabbed { grid-template-columns: 1fr !important; }
.tabbed > [hidden] { display: none !important; }
/* M-Pesa page: automatic reading on / off, and the short result of a read */
.mp-state { margin: 0 0 10px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--muted) 10%, transparent); }
.mp-state.on { background: color-mix(in srgb, #4ade80 12%, transparent); }
.mp-state.on b { color: #4ade80; }
.mp-result ul { margin: 0; padding-left: 20px; } .mp-result li { margin: 4px 0; }

/* Transactions: money in in green; on phones the category and where it came from sit under the name (their columns are hidden) */
.tx-in, .rf-sum .rf-total.tx-in { color: #4ade80 !important; }
:root[data-theme="light"] .tx-in, :root[data-theme="light"] .rf-sum .rf-total.tx-in { color: #15803d !important; }
.tx-sub { display: none; }
@media (max-width: 900px) and (pointer: coarse) { .tx-table .tx-sub { display: block; margin-top: 1px; } }
.tx-tabs { margin: 6px 0 4px; }
.tx-row { flex-wrap: wrap; }
.tx-big { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.tx-fix { margin: 12px 0 14px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.tx-fix-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tx-fix-row .small { flex: 1 1 220px; }

/* Net worth */
.nw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.nw-tile { display: grid; gap: 4px; margin: 0; padding: 14px; }
.nw-tile .lbl { font-size: .8rem; color: var(--muted); }
.nw-tile b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.nw-tile small { font-size: .76rem; }
.nw-owe { color: #f08a6c; }
.nw-row { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; min-height: 0; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.nw-row:last-child { border-bottom: 0; }
.nw-row > span:first-child { display: grid; gap: 2px; min-width: 0; }
.nw-row small { font-size: .76rem; }
.nw-row .num { font-weight: 700; white-space: nowrap; }
@media (max-width: 900px) and (pointer: coarse) {
  .nw-tiles { grid-template-columns: 1fr 1fr; }
  .nw-tiles .nw-net { grid-column: 1 / -1; order: -1; }
  .nw-tiles .nw-net b { font-size: 1.6rem; }
}
/* Transactions filters: Category and From side by side; Sort and Show only folded under More filters */
.rf .tx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.rf .tx-row > [hidden] { display: none; }
.tx-more { margin-top: 8px; }
.tx-more > summary { cursor: pointer; color: var(--brand); font-size: .84rem; font-weight: 600; list-style: none; padding: 4px 0; }
.tx-more > summary::-webkit-details-marker { display: none; }
.tx-more > summary::after { content: ' ▾'; }
.tx-more[open] > summary::after { content: ' ▴'; }
.tx-more > .rf-row { margin-top: 6px; }
@media (max-width: 900px) and (pointer: coarse) { .rf .tx-row { grid-template-columns: 1fr 1fr; } }

/* a payment without a receipt: no slip column, the form takes the full width */
.draft.no-photo { grid-template-columns: minmax(0, 1fr); }

/* ---- Transactions top: search and a Filters button on one line, filters in use as chips, the filters in a sheet ---- */
.tx-head { background: var(--bg); padding-bottom: 6px; }
.tx-bar { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.tx-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--muted); margin: 0; }
.tx-search:focus-within { border-color: var(--brand); }
.tx-search input { flex: 1; min-width: 0; height: 100%; border: 0 !important; background: none !important; padding: 0; box-shadow: none !important; outline: 0; color: var(--ink); font-size: .95rem; }
.tx-fbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; min-height: 0; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: .9rem; }
.tx-fbtn[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
.tx-fbtn b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--brand); color: #0f1413; font-size: .7rem; font-weight: 800; }
.tx-fbtn b[hidden] { display: none; }
.tx-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tx-chips[hidden] { display: none; }
.tx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 5px 8px 5px 11px; border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: 99px; background: var(--brand-soft); color: var(--brand); font-size: .8rem; font-weight: 600; }
.tx-chip span { font-size: 1rem; line-height: 1; opacity: .8; }
.tx-sheet[hidden], .tx-scrim[hidden] { display: none !important; }
.tx-sheet { margin: 10px 0; }
.tx-sheet-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tx-sheet-top b { font-size: 1.05rem; }
.tx-show { width: 100%; margin-top: 12px; }
@media (min-width: 901px), (pointer: fine) { .tx-show { display: none; } } /* on computers the list updates beside the panel */
@media (max-width: 900px) and (pointer: coarse) {
  .tx-scrim { position: fixed; inset: 0; z-index: 98; background: rgba(0, 0, 0, .55); }
  .tx-sheet { position: fixed; z-index: 99; left: 0; right: 0; bottom: 0; margin: 0 !important; max-height: 82vh; overflow-y: auto; border-radius: 20px 20px 0 0 !important;
    padding: 14px 16px calc(16px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -12px 30px rgba(0, 0, 0, .4); }
  .tx-sheet::before { content: ''; display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 99px; background: var(--line); }
  body.tx-sheet-open { overflow: hidden; }
  body.tx-sheet-open .tabbar { display: none; }
  /* the top sticks under the header; scrolling down slides it away, scrolling up brings it back */
  .tx-head { margin: 0 -16px; padding: 0 16px 8px; }
}

/* ---- the sticky summary on top of the list: what is shown, its total, a line of detail, search and filter shortcuts ---- */
.tx-sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; padding: 10px 14px; background: var(--brand-soft); border-bottom: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: 10px 10px 0 0; }
.tx-sum-l { min-width: 0; display: grid; gap: 2px; }
.tx-sum-1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.tx-sum-1 b { font-size: .92rem; }
.tx-sum-1 > span, .tx-sum-1 > b + b { font-size: .8rem; color: var(--muted); }
.tx-sum-1 > span::before, .tx-sum-1 > b + b::before { content: '·'; margin-right: 6px; opacity: .6; }
.tx-sum-1 > b + b { font-weight: 600; }
.tx-sum-r { flex: none; display: grid; justify-items: end; gap: 4px; }
.tx-total { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: #FFBF3F; white-space: nowrap; line-height: 1.1; }
:root[data-theme="light"] .tx-total:not(.tx-in) { color: #c98a00; }
.tx-hl { color: var(--brand); }
@media (max-width: 900px) and (pointer: coarse) {
  .tx-head .tx-sum { padding: 8px 12px; }
  .tx-total { font-size: 1.1rem; }
  /* rows under day headings: the date column goes, the time sits in the line under the name */
  #list > table.tx-table.by-day :is(thead th, tbody td):nth-child(2) { display: none; }
  #list > table.tx-table.by-day thead th:nth-child(3) { width: auto; }
  #list > table.tx-table :is(thead th, tbody td):nth-child(3) { white-space: normal; }
  #list > table.tx-table tfoot td:nth-child(2) { display: none; }
}
.tx-day td { padding: 12px 6px 4px !important; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: none !important; }
@media (min-width: 901px), (pointer: fine) { .tx-day { display: none; } }
@media (max-width: 900px) and (pointer: coarse) {
  /* the sheet is not the old full-width filter card: no side margins, rounded top */
  #view > .card.rf.tx-sheet { width: auto; margin: 0 !important; border-radius: 20px 20px 0 0 !important; border-top: 1px solid var(--line) !important; }
}

/* Transactions: the top (title, tabs, search, chips, summary) stays in place while the list scrolls under it */
.tx-head { position: sticky; top: var(--hdr-h, 64px); z-index: 7; background: var(--bg); }
.tx-head h1 { margin: 0 0 6px; padding-top: 4px; }
.tx-head .tx-sum { margin: 10px 0 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); background: color-mix(in srgb, var(--brand) 14%, var(--bg)); }
#list { margin-top: 8px; }
/* one border on the search box: the box draws it (teal while typing), the field inside has none */
.tx-search input, .tx-search input:focus, .tx-search input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }
.tx-search input::-webkit-search-decoration, .tx-search input::-webkit-search-results-decoration { display: none; }
/* Transactions rows on phones: a small checkbox level with the name's first line; money in (no checkbox) starts its
   name at the left edge, where the checkbox would be */
@media (max-width: 900px) and (pointer: coarse) {
  #list > table.tx-table td { vertical-align: top; }
  #list > table.tx-table td:last-child { vertical-align: middle; }
  #list > table.tx-table td.ck { padding-top: 4px; }
  #list > table.tx-table td.ck input, #list > table.tx-table th.ck input { width: 16px; height: 16px; margin: 3px 0 0; }
  #list > table.tx-table :is(th.ck, td.ck) { display: none; } /* no checkboxes on phones: the filters pick what to see */
  #list > table.tx-table .tx-nm-1 { line-height: 1.35; }
}
@media (max-width: 900px) and (pointer: coarse) {
  /* columns sized by their content (the fixed widths do not work with the hidden columns and the day headings) */
  #list > table.tx-table { table-layout: auto !important; width: 100% !important; }
  #list > table.tx-table :is(thead th, tbody td):nth-child(3) { width: 100%; }
  #list > table.tx-table :is(thead th, tbody td):last-child { white-space: nowrap; }
  #list > table.tx-table tfoot { display: none; } /* the total is in the summary at the top */
}

/* Net worth: a loan whose due date has passed */
.nw-late { color: #f08a6c; font-weight: 600; }

/* Transactions filters, custom period: the date boxes are not the "nothing here" message that shares the class name
   "empty" (it added 36px all round); "Period", Custom and ‹ Other periods on one line; tighter spacing */
.rf-date.empty { padding: 0; text-align: left; color: inherit; }
.tx-period .rf-dates { gap: 8px 10px; margin-top: 8px; }
.tx-period .rf-dates label { margin: 0 0 3px; }
.tx-period:has(.only-custom) { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.tx-period:has(.only-custom) > .rf-h { margin: 0; }
.tx-period:has(.only-custom) > .rf-chips { flex: 1; min-width: 0; margin: 0; }
.tx-period:has(.only-custom) > .rf-dates { flex: 0 0 100%; }
/* the same text size and height for every box in the filters, and room above each section heading */
.tx-sheet select, .tx-sheet .rf-date input { font-size: .92rem !important; min-height: 42px; }
.tx-sheet .rf-date .rf-ph { font-size: .92rem; }
.tx-sheet .rf-row { margin-top: 10px; }
.tx-sheet .rf-row .rf-sec { margin-bottom: 0; }

/* Home on phones: the label line holds Out / In and the chart button; the big figure has the full width under them, on
   one line ("Ksh 118,006"; a long amount gets smaller text, see fitHero in mob.js) */
@media (max-width: 900px) and (pointer: coarse) {
  .hm .hm-row { position: relative; display: block; }
  .hm .hm-row > .hm-btns { position: absolute; top: 0; right: 0; }
  .hm .hm-lbl { min-height: 40px; display: flex; align-items: center; padding-right: 150px; }
  .hm .hm-big, #mb-total { display: block; width: auto; max-width: 100%; white-space: nowrap; }
}

/* Transactions: download the filtered list (icon in the summary, a small Excel / PDF menu under it) */
#tx-sumslot { position: relative; }
.tx-sum-r { display: flex; align-items: center; gap: 10px; }
.tx-xbtn { display: grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); border-radius: 10px; background: none; color: var(--brand); }
.tx-xbtn[aria-expanded="true"] { background: var(--brand-soft); }
.tx-xmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: grid; min-width: 150px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.tx-xmenu .tx-xitem { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .92rem; background: none; border: 0; }
.tx-xmenu .tx-xitem:hover, .tx-xmenu .tx-xitem:active { background: var(--brand-soft); }

/* a payment without a receipt: the amount at the top, a short form, Not spending and Delete as small links */
.pv { display: grid; gap: 4px; }
.pv-head { padding: 4px 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.pv-amt { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.pv-meta { color: var(--muted); font-size: .84rem; margin-top: 2px; }
.pv label:not(.inline) { margin: 8px 0 2px; font-size: .8rem; color: var(--muted); }
.pv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-keep { margin: 10px 0 4px; font-size: .86rem; }
.pv-save { width: 100%; margin-top: 8px; }
.pv-more { display: flex; justify-content: center; gap: 18px; margin-top: 6px; }
.pv-more .txt { font-size: .88rem; }

/* Net worth before the passcode: nothing personal, a lock and an Unlock button */
.nw-locked { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 48px 16px; }
.nw-locked .nw-lock-ico { font-size: 2.4rem; }
.nw-locked h1 { margin: 0; }
.nw-locked p { margin: 0 0 10px; max-width: 280px; }

/* website Net worth unlock: Confirm with Google (accounts without a password) */
.nwg-google { width: 100%; margin-top: 12px; font-weight: 600; }

/* Scan page: what a save did, at the top, with clear buttons and "Scan another receipt" */
.sv { margin: 0 0 12px; padding: 16px; border-left: 4px solid var(--brand); }
.sv-head { display: flex; align-items: center; gap: 12px; }
.sv-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: 1.1rem; }
.sv-head b { font-size: 1.05rem; }
.sv-sub { color: var(--muted); font-size: .86rem; margin-top: 2px; }
.sv-msg { margin: 12px 0 14px; font-size: .92rem; line-height: 1.45; }
.sv-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sv-btns .btn { display: flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 8px; text-align: center; font-weight: 600; font-size: .88rem; }
.sv-next { width: 100%; margin-top: 10px; min-height: 46px; }

/* Transactions: an own transfer (not counted), and "Read wrongly? This is: Money out / Money in / Own transfer" */
.tx-own { color: var(--muted); }
.rt { margin: 16px 0 4px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.rt-h { display: block; font-size: .8rem; color: var(--muted); margin: 0 0 8px; }
.rt-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rt-btns button { min-height: 38px; padding: 0 6px; font-size: .84rem; font-weight: 600; }
.rt-btns button.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); opacity: 1; }
.rt p { margin: 8px 0 0; }

/* the menu (☰) button on phones: a little bigger, easier to see and tap */
@media (max-width: 900px) and (pointer: coarse) {
  html body.has-sidebar header.top .menu-btn { width: 42px !important; height: 42px !important; }
  html body.has-sidebar header.top .menu-btn svg { width: 24px !important; height: 24px !important; }
}

/* Home on phones: the page's one column is the screen's width, whatever is in it. A long name (a person's full name with
   their number in Recent) is cut with "…" instead of widening the whole page and pushing Money out, the chart button,
   the › arrow and See all off the right edge. */
.mb { grid-template-columns: minmax(0, 1fr); }
.mb > * { min-width: 0; }
/* each Recent row is the list's width too, so the amount on the right always shows */
.hm-list { display: grid; grid-template-columns: minmax(0, 1fr); }
.hm-list > .hm-tx { min-width: 0; }

/* ---- one transaction's details: amount at the top, type and source chips, a short list with icons ---- */
.txd-head { text-align: center; padding: 8px 0 18px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.txd-amt { font-size: 2.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.txd-amt.out { color: #f08a6c; } .txd-amt.in { color: #4ade80; } .txd-amt.own { color: var(--muted); }
:root[data-theme="light"] .txd-amt.out { color: #c2410c; } :root[data-theme="light"] .txd-amt.in { color: #15803d; }
.txd-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.txd-chip { padding: 4px 12px; border-radius: 99px; font-size: .8rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line); color: var(--muted); }
.txd-chip.out { color: #f08a6c; border-color: color-mix(in srgb, #f08a6c 45%, transparent); background: color-mix(in srgb, #f08a6c 12%, transparent); }
.txd-chip.in { color: #4ade80; border-color: color-mix(in srgb, #4ade80 45%, transparent); background: color-mix(in srgb, #4ade80 12%, transparent); }
.txd-chip.own { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: var(--brand-soft); }
.txd-list { display: grid; }
.txd-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.txd-ico { flex: none; color: var(--muted); padding-top: 2px; }
.txd-txt { flex: 1; min-width: 0; }
.txd-txt > small { display: block; font-size: .78rem; color: var(--muted); }
.txd-v { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.02rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.txd-v small { flex-basis: 100%; font-weight: 400; color: var(--muted); font-size: .86rem; }
.txd-v select { flex: 1; min-height: 40px; font-weight: 600; }
.txd-copy { display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 0; padding: 0; margin-left: auto; border: 0; border-radius: 8px; background: none; color: var(--brand); }
.txd-edit { margin: 12px 0 0; }
.txd-edit > summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: .92rem; padding: 6px 0; list-style: none; }
.txd-edit > summary::-webkit-details-marker { display: none; }
.txd-edit > summary::after { content: ' ▾'; }
.txd-edit[open] > summary::after { content: ' ▴'; }
.txd-edit label { display: block; margin: 8px 0 2px; font-size: .8rem; color: var(--muted); }
.txd-note { margin: 12px 0 0; }

/* Transactions: More ▾ (Receipts, Internal transfers) looks like the other tabs */
.tx-tabs .tx-tabmore { flex: none; width: auto; min-height: 0; padding: 8px 30px 8px 14px; border: 1px solid var(--line); border-radius: 99px; background-color: transparent; color: var(--muted); font-size: .86rem; font-weight: 600; }
.tx-tabs .tx-tabmore.on { background-color: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

/* Transactions on phones: bigger text (names, details, amounts, day headings) */
@media (max-width: 900px) and (pointer: coarse) {
  #list > table.tx-table .tx-nm-1 { font-size: 1.02rem; font-weight: 600; }
  #list > table.tx-table .tx-sub { font-size: .84rem; margin-top: 3px; }
  #list > table.tx-table td:last-child b { font-size: 1.02rem !important; }
  #list > table.tx-table thead th { font-size: .78rem; }
  .tx-day td { font-size: .84rem !important; }
  #list > table.tx-table td { padding-top: 12px; padding-bottom: 12px; }
  .tx-tabs button, .tx-tabs .tx-tabmore { font-size: .92rem; }
}

/* one transaction's details fit on a phone screen without scrolling: tighter spacing, compact rows and buttons */
.txd-head { padding: 0 0 12px; margin-bottom: 2px; }
.txd-amt { font-size: 1.9rem; }
.txd-chips { margin-top: 8px; }
.txd-chip { padding: 3px 11px; font-size: .78rem; }
.txd-row { padding: 9px 0; gap: 12px; }
.txd-txt > small { font-size: .74rem; }
.txd-v { font-size: .98rem; gap: 6px; }
.txd-v small { font-size: .82rem; margin-top: -2px; }
.txd-v select { min-height: 36px; padding-top: 4px; padding-bottom: 4px; }
.txd-copy { width: 30px; height: 30px; }
.pv-keep { margin: 8px 0 0 !important; font-size: .84rem; }
.txd-edit { margin: 6px 0 0; }
.txd-edit > summary { padding: 4px 0; }
.rt { margin: 8px 0 0; padding: 8px 0 0; }
.rt-h { margin: 0 0 6px; font-size: .76rem; }
.rt-btns button { min-height: 34px; font-size: .8rem; }
.rt > p { display: none; } /* the longer explanation: the buttons say enough here */
.pv-more { margin-top: 4px; }
.txd-note { margin: 8px 0 0; font-size: .8rem; }
#modal-body > .pv:first-child, #modal-body > div:first-child > .txd:first-child { margin-top: 0; }

/* Transactions tabs: All · Money out · Money in · More always fit the row (no part hidden off the edge), on phones and the web */
.tx-tabs { overflow: visible; }
.tx-tabs > button, .tx-tabs > .tx-tabmore { flex: 1 1 auto; min-width: 0; padding-left: 10px; padding-right: 10px; text-align: center; }
.tx-tabs > button[data-dir="all"] { flex: 0 1 auto; padding-left: 14px; padding-right: 14px; }
.tx-tabs .tx-tabmore { flex: 0 1 auto; max-width: 30%; padding-right: 26px; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2395a29f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 11px center !important; background-size: 10px 6px !important; }
@media (max-width: 900px) and (pointer: coarse) {
  .tx-tabs { gap: 5px; }
  .tx-tabs > button, .tx-tabs > .tx-tabmore { font-size: .88rem !important; padding-left: 8px; padding-right: 8px; }
  .tx-tabs > button[data-dir="all"] { padding-left: 13px; padding-right: 13px; }
  .tx-tabs .tx-tabmore { padding-right: 24px; background-position: right 9px center !important; }
}

/* Delete in a transaction: a clear red button across the bottom, like most apps */
.pv-more { margin-top: 16px !important; }
.pv-more .tx-del { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--bad) 55%, transparent); border-radius: 12px; background: var(--bad-soft); color: var(--bad); font-size: .95rem; font-weight: 650; cursor: pointer; }
.pv-more .tx-del:hover, .pv-more .tx-del:active { background: color-mix(in srgb, var(--bad) 22%, transparent); }

/* Category list: the whole row opens that transaction (no links inside it) */
.ptab tr.click { cursor: pointer; }
.ptab tr.click:hover td, .ptab tr.click:active td { background: var(--brand-soft); }
.ptab tr.click:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Home: the chosen Money in / Money out tile in amber */
.hm-io-t.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px rgba(255, 191, 63, .10); background: linear-gradient(180deg, rgba(255, 191, 63, .08), rgba(255, 191, 63, 0) 70%), var(--surface); }

/* the bottom bar on phones: brighter names and icons, the open tab marked in amber with its icon teal */
@media (max-width: 900px) and (pointer: coarse) {
  :root { --nav-ink: #3c4a47; }
  body.has-sidebar .tabbar a, body.has-sidebar .tabbar button { color: var(--nav-ink) !important; }
  body.has-sidebar .tabbar a.on, body.has-sidebar .tabbar button.on { color: var(--ink) !important; }
  body.has-sidebar .tabbar a.on::before, body.has-sidebar .tabbar button.on::before { background: var(--accent) !important; height: 3px; left: 22%; right: 22%; box-shadow: 0 2px 10px rgba(255, 191, 63, .55); }
  body.has-sidebar .tabbar a.on svg, body.has-sidebar .tabbar button.on svg { color: var(--brand) !important; filter: drop-shadow(0 0 6px rgba(76, 194, 178, .35)) !important; }
}
@media (max-width: 900px) and (pointer: coarse) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-ink: #c6d0cd; } }
@media (max-width: 900px) and (pointer: coarse) { :root[data-theme="dark"] { --nav-ink: #c6d0cd; } }

/* the bottom bar: names in strong white (ink on the light theme), the open tab's name in amber */
@media (max-width: 900px) and (pointer: coarse) {
  :root { --nav-ink: #172026; --nav-on: #b7791f; }
  body.has-sidebar .tabbar a, body.has-sidebar .tabbar button { color: var(--nav-ink) !important; }
  body.has-sidebar .tabbar a.on, body.has-sidebar .tabbar button.on { color: var(--nav-on) !important; }
  body.has-sidebar .tabbar a.on svg, body.has-sidebar .tabbar button.on svg { color: var(--brand) !important; }
  body.has-sidebar .tabbar a.tab-add svg { color: inherit !important; } body.has-sidebar .tabbar a.tab-add.on svg { color: var(--brand) !important; }
}
@media (max-width: 900px) and (pointer: coarse) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-ink: #ffffff; --nav-on: #FFBF3F; } :root:not([data-theme="light"]) body.has-sidebar .tabbar .on { color: #FFBF3F !important; } }
@media (max-width: 900px) and (pointer: coarse) { :root[data-theme="dark"] { --nav-ink: #ffffff; --nav-on: #FFBF3F; } :root[data-theme="dark"] body.has-sidebar .tabbar .on { color: #FFBF3F !important; } }

/* Home: Money in / Money out tiles — black, amber border, white words, no shadow; the chosen one has a thicker amber border */
.hm-io-t, .hm-io-t.on { background: #000 !important; border: 2px solid var(--line) !important; padding: 11px 13px; box-shadow: none !important; }
.hm-io-t.on { border-color: var(--accent) !important; }
.hm-io-t span { color: #fff !important; }

/* dark theme: the pill tabs and plain buttons (tabs, More, Filters, Excel / CSV, type buttons) are strong black with strong white words */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sec-tabs button:not(.on),
:root:not([data-theme="light"]) .tx-tabs .tx-tabmore:not(.on),
:root:not([data-theme="light"]) a.btn:not(.primary),
:root:not([data-theme="light"]) button.btn:not(.primary),
:root:not([data-theme="light"]) .rt-btns button:not(.on),
:root:not([data-theme="light"]) .seg button:not(.on),
:root:not([data-theme="light"]) .tx-fbtn { background-color: #000 !important; color: #fff !important; }
}
:root[data-theme="dark"] .sec-tabs button:not(.on),
:root[data-theme="dark"] .tx-tabs .tx-tabmore:not(.on),
:root[data-theme="dark"] a.btn:not(.primary),
:root[data-theme="dark"] button.btn:not(.primary),
:root[data-theme="dark"] .rt-btns button:not(.on),
:root[data-theme="dark"] .seg button:not(.on),
:root[data-theme="dark"] .tx-fbtn { background-color: #000 !important; color: #fff !important; }

/* Delete: solid red, white words, no border */
.pv-more .tx-del, .pv-more .tx-del:hover, .pv-more .tx-del:active { background: #ff0000 !important; border: 0 !important; color: #fff !important; }

/* Home: Money out in strong red (the tile amount and the Out switch) */
.hm-io-t.out b { color: #ff0000 !important; } .hm-io-t.out span::first-letter { color: #ff0000; }
.hm-flow button.on[data-flow="out"] { background: #ff0000 !important; color: #fff !important; }

/* Transactions on phones: calmer, even text sizes; a long name (often in capitals) stops at two lines */
@media (max-width: 900px) and (pointer: coarse) {
  #list > table.tx-table .tx-nm-1 { font-size: .94rem !important; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  #list > table.tx-table .tx-sub { font-size: .8rem !important; }
  #list > table.tx-table td:last-child b { font-size: .94rem !important; }
  .tx-tabs > button, .tx-tabs > .tx-tabmore { font-size: .86rem !important; }
}

/* Scan page on phones: Take a photo, Payment without a receipt and From notes each on their own line, full width, slimmer */
@media (max-width: 900px) and (pointer: coarse) {
  .add-acts { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .add-acts > .btn, .add-acts > button { display: flex !important; align-items: center; justify-content: center; gap: 10px; width: 100% !important; min-height: 46px !important; padding: 8px 14px !important; margin: 0 !important; font-size: .95rem !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .add-acts > span { margin-top: 2px; }
}
/* dark theme: the Payment without a receipt / From notes buttons strong black with strong white words */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.big-btn { background-color: #000 !important; color: #fff !important; } }
:root[data-theme="dark"] button.big-btn { background-color: #000 !important; color: #fff !important; }

/* the short message after a move, delete or edit, with Undo */
.toast.has-undo { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
.toast-undo { flex: none; min-height: 0; padding: 4px 10px; border: 0; border-radius: 8px; background: none; color: var(--accent); font: inherit; font-weight: 700; letter-spacing: .02em; cursor: pointer; }

/* Recent changes */
.chg-list { display: grid; }
.chg { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.chg-m { display: grid; gap: 2px; min-width: 0; flex: 1; }
.chg-m b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chg-m span { font-size: .85rem; color: var(--ink); overflow-wrap: anywhere; }
.chg-m small { font-size: .78rem; color: var(--muted); }
.chg-undo { flex: none; min-height: 36px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 99px; background: #000; color: var(--accent); font-weight: 700; font-size: .86rem; }
.chg-done { flex: none; font-size: .8rem; color: var(--muted); }
.chg.undone .chg-m b, .chg.undone .chg-m span { color: var(--muted); }

/* Add receipts (Scan): one big Take a photo card, then "Other ways to add" as a list of rows (icon, name, a line under it,
   chevron), like most apps; works the same on phones, iPhone Safari and the computer */
#view .add-lead { margin: 2px 0 14px; font-size: .92rem; }
#view .add-hero { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 640px; min-height: 76px; margin: 0 0 20px; padding: 14px 16px; border: 0; border-radius: 18px; background: var(--accent); color: var(--accent-ink); cursor: pointer; box-shadow: none; }
#view .add-hero .ah-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 0, 0, .12); }
#view .add-hero .ah-ico svg { width: 26px; height: 26px; }
#view .add-hero .ah-t, #view .add-row .ar-t { display: grid; gap: 2px; flex: 1; min-width: 0; text-align: left; }
#view .add-hero .ah-t b { font-size: 1.08rem; font-weight: 700; }
#view .add-hero .ah-t small { font-size: .82rem; opacity: .75; }
#view .add-h { margin: 0 0 8px; font-size: .92rem; font-weight: 600; color: var(--muted); }
#view .add-rows { display: grid; max-width: 640px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #000; }
#view .add-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; margin: 0; padding: 10px 14px; border: 0; border-radius: 0; background: transparent; color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: none; }
#view .add-row + .add-row, #view .add-rows > input + .add-row { border-top: 1px solid var(--line); }
#view .add-row:hover, #view .add-row:active, #view .add-row.over { background: rgba(255, 255, 255, .05); }
#view .add-row.drop.over { outline: 2px dashed var(--accent); outline-offset: -4px; }
#view .add-row .ar-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
#view .add-row .ar-t b { font-size: .97rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .add-row .ar-t small { font-size: .8rem; color: #b8c3c0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .ar-chev { flex: none; opacity: .55; }
#view .add-hero .ar-chev { opacity: .6; }
#view .add-note { margin: 12px 0 0; max-width: 640px; }
/* light theme: the list on white, words dark */
:root[data-theme="light"] #view .add-rows { background: var(--surface); }
:root[data-theme="light"] #view .add-row, :root[data-theme="light"] #view .add-row .ar-t b { color: var(--ink); }
:root[data-theme="light"] #view .add-row .ar-t small { color: var(--muted); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #view .add-rows { background: var(--surface); }
  :root:not([data-theme="dark"]) #view .add-row, :root:not([data-theme="dark"]) #view .add-row .ar-t b { color: var(--ink); }
  :root:not([data-theme="dark"]) #view .add-row .ar-t small { color: var(--muted); }
}

/* dark theme: every plain button (Move, Cancel-style, Undo …) strong black with strong white words; coloured ones
   (teal primary, red delete, amber) and those styled on their own keep their look */
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) button, :where(:root:not([data-theme="light"])) .btn { background-color: #000; color: #fff; }
}
:where(:root[data-theme="dark"]) button, :where(:root[data-theme="dark"]) .btn { background-color: #000; color: #fff; }
.confirm-card #cf-yes:not(.danger) { background: #000 !important; color: #fff !important; }

/* Home: Money in / Money out tiles lower, both alike (the Out / In switch below shows which is on) */
.hm-io-t, .hm-io-t.on { padding: 8px 13px !important; gap: 1px !important; border-color: var(--line) !important; }
.hm-io-t span { font-size: .78rem; }
.hm-io-t b { font-size: 1.02rem; }

/* Home figures row: the two numbers take only the room they need, the top payee's name gets the rest */
.hm-stats div { flex: 0 0 auto; padding-right: 14px; }
.hm-stats div:last-child { flex: 1 1 auto; padding-right: 0; }

/* ===== 5 Nov 2026: chosen / selected buttons and tabs are amber with strong black words (was teal), on the app and the
   website. Teal stays for links, icons and the Transactions summary bar. ===== */
:root { --sel-bg: #FFBF3F; --sel-ink: #000; --sel-solid: #FFBF3F; }
nav a.on, .menu a.on, #more-btn.on, .sb-nav a.on, body.has-sidebar .sidebar .sb-nav a.on, button.icon.on, body.has-sidebar .tools button.icon.on,
.rf-chips button.on, .sh-tabs button.on, .seg button.on, .seg .seg-more.on, .sec-tabs button.on, .tx-tabs .tx-tabmore.on, .rt-btns button.on,
.sel-pop button.on, .hm-per button.on, .s-per button.on, .rp-chips button.on, .dd-tog button.on {
  background-color: #FFBF3F !important; border-color: #FFBF3F !important; color: #000 !important; font-weight: 700; box-shadow: none !important; }
.sb-nav a.on svg, body.has-sidebar .sidebar .sb-nav a.on svg, nav a.on svg, button.icon.on svg, .rt-btns button.on svg { color: #000 !important; }
.sh-tabs button.on .cnt { background: rgba(0, 0, 0, .15) !important; color: #000 !important; }
.tx-tabs .tx-tabmore.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; }
#gear.on, #gear.on .gear-ico, body.has-sidebar #gear.on, body.has-sidebar #gear.on .gear-ico { color: #FFBF3F !important; }
.s2 .s2-tabs button.on { border-bottom-color: #FFBF3F !important; }

/* text-only buttons (Dismiss, Restore, Show dismissed, Close, Clear …) get the amber fill with black words, so they look like buttons */
button.txt:not(.icon):not(.lnk):not(.danger):not(.danger-t):not([data-del]):not([data-rm]):not(.x):not(.th-sort), .btn.txt:not(.danger) {
  background-color: #FFBF3F !important; border-color: #FFBF3F !important; color: #000 !important; font-weight: 600; }

/* "Read wrongly? This is": one row, each with its icon (↗ Money out, ↙ Money in, ⇄ Internal transfer) */
.rt-btns { display: flex !important; gap: 6px; }
.rt-btns button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 8px !important; white-space: nowrap; font-size: .8rem !important; }
.rt-btns button svg { flex: none; }

/* amber text buttons (Dismiss, See all ways to save, Add to shopping list …): room around the words, centred, spaced apart */
button.txt:not(.icon):not(.lnk):not(.danger):not(.danger-t):not([data-del]):not([data-rm]):not(.x):not(.th-sort), .btn.txt:not(.danger) {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 38px; padding: 7px 16px !important; border-radius: 10px !important; line-height: 1.2; text-align: center; }
.s2-actions { gap: 10px !important; }
/* Transactions | By item: a little space between the two halves, and between the row and Excel / PDF */
.seg { gap: 4px; }
.cat-bar { gap: 10px; margin-bottom: 14px; }

/* dark theme: the black buttons have no border */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .sec-tabs button:not(.on),
:root:not([data-theme="light"]) .tx-tabs .tx-tabmore:not(.on),
:root:not([data-theme="light"]) a.btn:not(.primary),
:root:not([data-theme="light"]) button.btn:not(.primary),
:root:not([data-theme="light"]) .rt-btns button:not(.on),
:root:not([data-theme="light"]) .seg button:not(.on),
:root:not([data-theme="light"]) .tx-fbtn,
:root:not([data-theme="light"]) button.big-btn,
:root:not([data-theme="light"]) .confirm-card #cf-yes:not(.danger),
:root:not([data-theme="light"]) .seg { border-color: transparent !important; }
  :where(:root:not([data-theme="light"])) button, :where(:root:not([data-theme="light"])) .btn { border-color: transparent; }
}
:root[data-theme="dark"] .sec-tabs button:not(.on),
:root[data-theme="dark"] .tx-tabs .tx-tabmore:not(.on),
:root[data-theme="dark"] a.btn:not(.primary),
:root[data-theme="dark"] button.btn:not(.primary),
:root[data-theme="dark"] .rt-btns button:not(.on),
:root[data-theme="dark"] .seg button:not(.on),
:root[data-theme="dark"] .tx-fbtn,
:root[data-theme="dark"] button.big-btn,
:root[data-theme="dark"] .confirm-card #cf-yes:not(.danger),
:root[data-theme="dark"] .seg { border-color: transparent !important; }
:where(:root[data-theme="dark"]) button, :where(:root[data-theme="dark"]) .btn { border-color: transparent; }

/* Prices, "These may be the same product": Merge… is deep teal with white words, black when the pointer is over it */
.sim-btns button[data-merge] { background: #0F776F !important; border-color: #0F776F !important; color: #fff !important; font-weight: 600; }
.sim-btns button[data-merge]:hover, .sim-btns button[data-merge]:active { background: #000 !important; border-color: #000 !important; color: #fff !important; }

/* deep teal buttons, black on hover: Reports tabs (Categories, Habits, More), Ways to save / Add to shopping list,
   M-Pesa Paste messages tab and No-receipt payment, shopping list Copy / Share (the chosen tab stays amber) */
#rp-tabs .sec-tabs button:not(.on), #mp-tabs .sec-tabs button:not(.on),
.s2-actions button.txt, #mp-pay, #ls-copy, #ls-share {
  background: #0F776F !important; border-color: #0F776F !important; color: #fff !important; font-weight: 600; box-shadow: none !important;
}
#rp-tabs .sec-tabs button:not(.on):hover, #mp-tabs .sec-tabs button:not(.on):hover,
.s2-actions button.txt:hover, #mp-pay:hover, #ls-copy:hover, #ls-share:hover,
#rp-tabs .sec-tabs button:not(.on):active, #mp-tabs .sec-tabs button:not(.on):active,
.s2-actions button.txt:active, #mp-pay:active, #ls-copy:active, #ls-share:active {
  background: #000 !important; border-color: #000 !important; color: #fff !important;
}

/* Transactions tabs: on the website (computer) Receipts and Internal transfers are their own tabs and More goes;
   on phones and in the app More ▾ stays. Tabs not chosen are deep teal with white words, black on hover; the chosen one stays amber */
.tx-tabs > .tx-wide { display: none; }
@media not all and (max-width: 900px) and (pointer: coarse) {
  .tx-tabs > .tx-wide { display: inline-flex; align-items: center; justify-content: center; }
  .tx-tabs > .tx-tabmore { display: none !important; }
}
.tx-tabs > button:not(.on), .tx-tabs > .tx-tabmore:not(.on) {
  background-color: #0F776F !important; border-color: #0F776F !important; color: #fff !important; box-shadow: none !important;
}
.tx-tabs > button:not(.on):hover, .tx-tabs > .tx-tabmore:not(.on):hover,
.tx-tabs > button:not(.on):active, .tx-tabs > .tx-tabmore:not(.on):active {
  background-color: #000 !important; border-color: #000 !important; color: #fff !important;
}

/* Ways to save / Add to shopping list (Biggest opportunity card and tips): deep teal, white words, black on hover;
   once the item is on the shopping list the button is dimmed and cannot add it again */
#view .s2-actions button.txt, #view button[data-list] {
  background: #0F776F !important; border-color: #0F776F !important; color: #fff !important; font-weight: 600; box-shadow: none !important;
}
#view .s2-actions button.txt:not(:disabled):hover, #view button[data-list]:not(:disabled):hover,
#view .s2-actions button.txt:not(:disabled):active, #view button[data-list]:not(:disabled):active {
  background: #000 !important; border-color: #000 !important; color: #fff !important;
}
#view button[data-list].on-list { opacity: .6; cursor: default; }

/* Transactions tabs Money out, Money in, More (and Receipts / Internal transfers on the website): deep teal, white words,
   black on hover (the dark-theme black rule was stronger than the earlier teal one); the chosen tab stays amber */
#view .tx-tabs > button:not(.on), #view .tx-tabs > .tx-tabmore:not(.on) {
  background-color: #0F776F !important; border-color: #0F776F !important; color: #fff !important; box-shadow: none !important;
}
#view .tx-tabs > button:not(.on):hover, #view .tx-tabs > .tx-tabmore:not(.on):hover,
#view .tx-tabs > button:not(.on):active, #view .tx-tabs > .tx-tabmore:not(.on):active {
  background-color: #000 !important; border-color: #000 !important; color: #fff !important;
}

/* Add receipts: the icon squares on Upload photos, Payment without a receipt and From notes are deep teal with white icons */
#view .add-row .ar-ico { background: #0F776F !important; color: #fff !important; }

/* Add receipts on the website (computer): Take a photo, the other ways and the note use the full width (phones and the app unchanged) */
@media not all and (max-width: 900px) and (pointer: coarse) {
  #view .add-hero, #view .add-rows, #view .add-note { max-width: none; }
}

/* Net worth overview: Biggest assets and Loans without a box, rows across the full width; a divider line above Loans */
.nw-plain { margin: 18px 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
.nw-plain h2 { margin: 0 0 4px; font-size: 1.05rem; }
.nw-plain .nw-row { padding-left: 0; padding-right: 0; }
.nw-plain.nw-loans { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Dashboard Out / In switch: Out chosen is amber with black words, In chosen is deep teal with white words */
#view .hm-flow button.on[data-flow="out"] { background: #FFBF3F !important; border-color: #FFBF3F !important; color: #000 !important; }
#view .hm-flow button.on[data-flow="in"] { background: #0F776F !important; border-color: #0F776F !important; color: #fff !important; }

/* Reports: Download menu at the top (the whole report of the period), small Excel / PDF links on each list,
   tabs Overview · Categories · Habits · More ▾ (Top transaction costs, Top expenses, M-Pesa fees, Trends & forecasts) */
.rp-dl { position: relative; }
.rp-dl > summary { list-style: none; cursor: pointer; background: #0F776F !important; color: #fff !important; border: 0; font-weight: 600; user-select: none; }
.rp-dl > summary::-webkit-details-marker { display: none; }
.rp-dl > summary::after { content: ''; width: 8px; height: 8px; margin-left: 2px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.rp-dl > summary:hover { background: #000 !important; }
.rp-dlmenu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 2px; min-width: 200px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.rp-dlmenu small { padding: 4px 8px 6px; font-size: .76rem; }
.rp-dlmenu a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.rp-dlmenu a:hover { background: var(--hover); }
.rp-ch { gap: 10px; }
.rp-mini { display: inline-flex; gap: 6px; flex: none; margin-left: auto; align-self: flex-start; }
.rp-mini a { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 8px; background: #0F776F; color: #fff !important; font-size: .76rem; font-weight: 600; text-decoration: none; }
.rp-mini a:hover { background: #000; }
.rp-sub { margin: 16px 0 6px; font-size: .92rem; }
.rp-tabbar { align-items: center; }
.rp-moresel { flex: none; width: auto; min-height: 0; height: auto; margin: 0; padding: 8px 30px 8px 14px; border: 1px solid #0F776F; border-radius: 99px; background-color: #0F776F; color: #fff; font-size: .86rem; font-weight: 600; cursor: pointer;
  -webkit-appearance: none; appearance: none; background-repeat: no-repeat; background-position: right 11px center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rp-moresel:hover { background-color: #000; border-color: #000; }
.rp-moresel.on { background-color: #FFBF3F; border-color: #FFBF3F; color: #000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rp-moresel option { background: var(--surface); color: var(--ink); }
#view .rp-mtab tr.click { cursor: pointer; }
#view .rp-mtab tr.click:hover td { background: var(--hover); }
@media (max-width: 900px) and (pointer: coarse) {
  .rp-mini a { padding: 5px 7px; }
  .rp-mtab th:nth-child(4), .rp-mtab td:nth-child(4) { white-space: nowrap; }
}

/* Subscription: four plan cards (Daily, Weekly, Monthly, Yearly) in a 2 × 2 grid, Pay, then what Premium unlocks;
   a shorter hero so it all fits on one screen. Chosen plan: amber border with a tick; Yearly: Best value */
.pw-hero { padding-top: 16px !important; padding-bottom: 38px !important; }
.pw-hero .pw-tile { width: 48px; height: 48px; margin: 8px auto 6px; border-radius: 14px; }
.pw-hero .pw-tile svg { width: 22px; height: 22px; }
.pw-hero h1 { font-size: 1.3rem; margin-bottom: 6px; }
.pw-hero p { margin-top: 6px; }
.pw-hero + .pw-pay { position: relative; margin-top: 0; }
.pl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.pl-card { position: relative; display: grid; gap: 2px; align-content: start; min-height: 0; padding: 12px 12px 10px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--bg, transparent); cursor: pointer; }
.pl-card input { position: absolute; opacity: 0; pointer-events: none; }
.pl-name { font-size: .84rem; font-weight: 700; color: var(--muted); }
.pl-price { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pl-price b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.pl-price small { font-size: .78rem; color: var(--muted); font-weight: 600; }
.pl-note { font-size: .74rem; color: var(--muted); line-height: 1.3; }
.pl-note em { font-style: normal; display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 99px; background: #0F776F; color: #fff; font-weight: 700; font-size: .7rem; }
.pl-badge { position: absolute; top: -9px; right: 10px; padding: 2px 8px; border-radius: 99px; background: #FFBF3F; color: #000; font-size: .66rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.pl-tick { position: absolute; top: 11px; right: 10px; width: 18px; height: 18px; border: 2px solid #55645f; border-radius: 50%; }
.pl-card.best .pl-tick { top: 14px; }
.pl-card:has(input:checked) { border-color: #FFBF3F; background: color-mix(in srgb, #FFBF3F 9%, var(--surface)); }
.pl-card:has(input:checked) .pl-tick { border-color: #FFBF3F; background: #FFBF3F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pl-card:has(input:focus-visible) { outline: 2px solid #FFBF3F; outline-offset: 2px; }
.pl-perks { margin-top: 12px; padding: 12px 14px !important; border-radius: 16px; }
.pl-perks h2 { margin: 0 0 8px; font-size: .95rem; }
.pl-perks ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.pl-perks li { display: flex; align-items: flex-start; gap: 6px; font-size: .8rem; line-height: 1.3; }
.pl-perks li svg { flex: none; width: 16px; height: 16px; margin-top: 1px; padding: 2px; border-radius: 50%; background: #0F776F; color: #fff; stroke-width: 3; }
@media (min-width: 901px), (pointer: fine) {
  .pw { max-width: 980px; }
  .pl-perks ul { grid-template-columns: repeat(4, 1fr); }
  .pl-grid { grid-template-columns: repeat(4, 1fr); }
}

/* admin area: plain (black) buttons are deep teal with white words, black on hover; amber, red and chosen ones stay as they are */
body.admin-page #view button:not(.primary):not(.txt):not(.danger):not(.danger-t):not(.on):not(.icon):not(.x):not(.th-sort):not(:disabled),
body.admin-page #view a.btn:not(.primary):not(.txt) { background: #0F776F !important; border-color: #0F776F !important; color: #fff !important; }
body.admin-page #view button:not(.primary):not(.txt):not(.danger):not(.danger-t):not(.on):not(.icon):not(.x):not(.th-sort):not(:disabled):hover,
body.admin-page #view a.btn:not(.primary):not(.txt):hover { background: #000 !important; border-color: #000 !important; color: #fff !important; }

/* alerts (toasts): small, solid colour, an icon, the message and a close button; they go by themselves */
.toast { display: flex !important; align-items: center; gap: 10px; width: auto; max-width: min(380px, calc(100vw - 24px)); min-height: 0; padding: 9px 8px 9px 12px !important; border: 0 !important; border-radius: 10px !important;
  font-size: .88rem; font-weight: 600; line-height: 1.3; pointer-events: auto !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .3) !important; }
.toast[hidden] { display: none !important; }
.toast.ok { background: #0F776F !important; color: #fff !important; }
.toast.err { background: #E5484D !important; color: #fff !important; }
.toast .t-ico { flex: none; display: grid; place-items: center; }
.toast .t-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast .toast-undo { flex: none; min-height: 0; padding: 3px 8px; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .18) !important; color: #fff !important; font: inherit; font-weight: 700; cursor: pointer; }
.toast .toast-x { flex: none; display: grid; place-items: center; width: 26px; height: 26px; min-height: 0; padding: 0; border: 0 !important; border-radius: 6px; background: none !important; color: #fff !important; opacity: .85; cursor: pointer; }
.toast .toast-x:hover { opacity: 1; background: rgba(255, 255, 255, .15) !important; }

/* alerts: information is dark teal-grey; on computers they sit bottom right */
.toast.info { background: #18302d !important; color: #e9eeec !important; }
@media not all and (max-width: 900px) and (pointer: coarse) {
  .toast { left: auto !important; right: 24px !important; bottom: 24px !important; transform: none !important; }
}
/* a one-time password: shown once with Copy, closes only with Done or × */
.sd { text-align: center; }
.sd-ok { width: 44px; height: 44px; margin: 4px auto 10px; display: grid; place-items: center; border-radius: 50%; background: #0F776F; color: #fff; }
.sd h2 { margin: 0 0 12px; }
.sd-row { display: flex; align-items: center; gap: 8px; max-width: 420px; margin: 0 auto 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg, transparent); }
.sd-pw { flex: 1; min-width: 0; text-align: left; font-size: 1rem; font-weight: 700; letter-spacing: .02em; overflow-wrap: anywhere; user-select: all; background: none; }
.sd-copy { flex: none; min-height: 0; padding: 7px 14px; border: 0; border-radius: 8px; background: #0F776F !important; color: #fff !important; font-weight: 700; }
.sd-copy:hover { background: #000 !important; }
.sd-copy.done { background: #18302d !important; }
.sd p { max-width: 420px; margin: 0 auto 12px; }
.sd .actions { justify-content: center; }

/* admin Users: tabs, counts, a tidy table, one Manage window; every button the same height, no hover change */
#users-box .um-tabs { margin: 0 0 14px; }
.um-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.um-stat { display: grid; gap: 2px; justify-items: start; min-height: 0; padding: 10px 12px !important; border: 1px solid var(--line) !important; border-radius: 12px !important; background: var(--surface) !important; color: var(--ink) !important; text-align: left; cursor: pointer; }
.um-stat b { font-size: 1.25rem; font-weight: 800; } .um-stat span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.um-stat.on { border-color: #FFBF3F !important; background: color-mix(in srgb, #FFBF3F 10%, var(--surface)) !important; }
#users-box .u-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
#users-box .u-tools input { flex: 1 1 240px; min-width: 0; }
#users-box .u-tools select { flex: 0 0 auto; width: auto; }
.um-tbl td { vertical-align: middle; } .um-tbl td:last-child { width: 1%; white-space: nowrap; }
.um-badge { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.um-badge.paid { background: #0F776F; color: #fff; } .um-badge.trial { background: #FFBF3F; color: #000; } .um-badge.free { background: #18302d; color: #e9eeec; }
.um-badge.admin { background: #e9eeec; color: #0f1413; } .um-badge.off { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.um-count { margin: 8px 0 0; }
.um-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; align-items: end; }
.um-form label { display: block; margin-bottom: 4px; }
.um-pw { display: flex; gap: 8px; } .um-pw input { flex: 1; min-width: 0; }
.um-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.um-set { padding: 4px 0 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px; } .um-set:last-child { border-bottom: 0; }
.um-set h3 { margin: 0 0 8px; font-size: .95rem; }
.um-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.um-row label { margin: 0; min-width: 170px; } .um-row input[type=number] { width: 110px; } .um-row select { width: auto; }
.um-panel h3 { margin: 16px 0 6px; font-size: .92rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.um-sec { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.um-sec .um-actions { margin: 0; }
.um-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .88rem; border-bottom: 1px solid var(--line); } .um-kv:last-child { border-bottom: 0; }
.um-kv span { color: var(--muted); } .um-kv b { text-align: right; overflow-wrap: anywhere; }
.um-subline { margin: 0 0 8px; font-weight: 700; }
/* one size for every button here */
#users-box button.um-btn, .um-panel button.um-btn, #users-box .um-tabs button { min-height: 36px !important; height: 36px; padding: 0 14px !important; border-radius: 10px !important; font-size: .84rem !important; font-weight: 600; line-height: 1; display: inline-flex !important; align-items: center; justify-content: center; white-space: nowrap; box-shadow: none !important; }
.um-panel button.um-btn:not(.primary):not(.txt):not(.danger) { background: #0F776F !important; border: 0 !important; color: #fff !important; }
.um-panel button.um-btn.txt { background: #FFBF3F !important; color: #000 !important; border: 0 !important; }
.um-panel button.um-btn.danger, #users-box button.um-btn.danger { background: #E5484D !important; color: #fff !important; border: 0 !important; }
/* no hover change in this section for now */
body.admin-page #view #users-box button:hover, .um-panel button:hover { filter: none !important; transform: none !important; }
body.admin-page #view #users-box button.um-btn:not(.primary):not(.txt):not(.danger):not(:disabled):hover, .um-panel button.um-btn:not(.primary):not(.txt):not(.danger):hover { background: #0F776F !important; border-color: #0F776F !important; color: #fff !important; }
body.admin-page #view #users-box button.primary:hover { background: #FFBF3F !important; color: #000 !important; }
.um-panel button.um-btn.txt:hover { background: #FFBF3F !important; color: #000 !important; }
.um-panel button.um-btn.danger:hover { background: #E5484D !important; color: #fff !important; }
#users-box .um-stat:hover { background: var(--surface) !important; } #users-box .um-stat.on:hover { background: color-mix(in srgb, #FFBF3F 10%, var(--surface)) !important; }
@media (max-width: 900px) and (pointer: coarse) {
  .um-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .um-tbl th:nth-child(2), .um-tbl td:nth-child(2), .um-tbl th:nth-child(4), .um-tbl td:nth-child(4) { display: none; }
}

/* admin Users counts: small one-line buttons (number + label), deep teal; the chosen one amber with black words; no hover */
#users-box .um-stats { display: flex !important; flex-wrap: wrap; gap: 8px; }
body.admin-page #view #users-box button.um-stat { display: inline-flex !important; align-items: baseline; gap: 6px; width: auto; height: 34px; min-height: 0; padding: 0 12px !important; border: 0 !important; border-radius: 10px !important;
  background: #0F776F !important; color: #fff !important; white-space: nowrap; }
body.admin-page #view #users-box button.um-stat b { font-size: .95rem; color: inherit; }
body.admin-page #view #users-box button.um-stat span { font-size: .8rem; color: inherit; opacity: .9; }
body.admin-page #view #users-box button.um-stat.on { background: #FFBF3F !important; color: #000 !important; }
body.admin-page #view #users-box button.um-stat:hover { background: #0F776F !important; color: #fff !important; }
body.admin-page #view #users-box button.um-stat.on:hover { background: #FFBF3F !important; color: #000 !important; }
/* the chosen admin tab: amber with black words, no hover change */
body.admin-page #view #users-box .um-tabs button.on, body.admin-page #view #users-box .um-tabs button.on:hover { background: #FFBF3F !important; border-color: #FFBF3F !important; color: #000 !important; }
body.admin-page #view #users-box .um-tabs button:not(.on):hover { background: #0F776F !important; border-color: #0F776F !important; color: #fff !important; }

/* every page's section tabs (Settings, Net worth, Reports, M-Pesa …): tabs not chosen are deep teal with white words, black on hover;
   the chosen one stays amber with black words */
#view .sec-tabs > button:not(.on) { background: #0F776F !important; border-color: #0F776F !important; color: #fff !important; }
#view .sec-tabs > button:not(.on):hover { background: #000 !important; border-color: #000 !important; color: #fff !important; }

/* the account button (person with a gear), when its page or menu is open: amber circle with a black icon (it was amber on amber: a plain circle) */
#gear.on, body.has-sidebar #gear.on, body.has-sidebar .tools #gear.on { background: #FFBF3F !important; color: #000 !important; }
#gear.on .gear-ico, body.has-sidebar #gear.on .gear-ico { color: #000 !important; }

/* admin Security: period, tabs, figures, notes, tables */
.sx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .sx-head h2 { margin: 0; } .sx-head select { width: auto; }
.sx-tabs { margin: 0 0 14px; }
.sx-dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: #E5484D; vertical-align: middle; }
.sx-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.sx-tile { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.sx-tile b { font-size: 1.5rem; font-weight: 800; } .sx-tile span { font-size: .82rem; font-weight: 600; } .sx-tile small { font-size: .72rem; color: var(--muted); }
.sx-tile.ok b { color: #4cc2b2; } .sx-tile.warn b { color: #FFBF3F; } .sx-tile.bad b { color: #E5484D; }
.sx-notes { padding: 10px 14px; border-radius: 12px; background: #18302d; color: #e9eeec; margin-bottom: 10px; } .sx-notes p { margin: 6px 0; font-size: .88rem; }
.sx-tbl td { vertical-align: middle; }
.sx-badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: .72rem; font-weight: 700; white-space: nowrap; border: 1px solid var(--line); color: var(--muted); }
.sx-badge.ok { background: #0F776F; color: #fff; border-color: #0F776F; } .sx-badge.warn { background: #FFBF3F; color: #000; border-color: #FFBF3F; } .sx-badge.bad { background: #E5484D; color: #fff; border-color: #E5484D; }
body.admin-page #view .sx-tabs button.on, body.admin-page #view .sx-tabs button.on:hover { background: #FFBF3F !important; border-color: #FFBF3F !important; color: #000 !important; }
body.admin-page #view .sx-tabs button:not(.on):hover { background: #0F776F !important; border-color: #0F776F !important; color: #fff !important; }

/* website (computer): pages use the full width — Subscription, Savings and Account no longer stop at 640–980 px; phones and the app unchanged */
@media not all and (max-width: 900px) and (pointer: coarse) {
  #view .pw, #view .s2, #view .acct { max-width: none !important; margin-left: 0; margin-right: 0; }
}

/* Savings, When you spend: four times of day, the busiest in amber, the rest teal */
.wy-head { margin: 0 0 10px; font-size: .95rem; }
.wy-bars { display: grid; gap: 6px; }
.wy-row { display: grid !important; grid-template-columns: 110px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 0; padding: 6px 4px !important; border: 0 !important; border-radius: 8px !important; background: none !important; color: var(--ink) !important; text-align: left; cursor: pointer; }
.wy-row:disabled { cursor: default; opacity: .55; }
.wy-l { display: grid; font-size: .86rem; font-weight: 600; } .wy-l small { font-size: .72rem; color: var(--muted); font-weight: 500; }
.wy-t { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; } .wy-t i { display: block; height: 100%; border-radius: 99px; background: #0F776F; }
.wy-row.top .wy-t i { background: #FFBF3F; }
.wy-v { display: grid; justify-items: end; font-weight: 700; font-size: .86rem; } .wy-v small { font-size: .72rem; color: var(--muted); font-weight: 600; }
.wy-late { margin: 10px 0 4px; padding: 8px 10px; border-radius: 10px; background: #18302d; color: #e9eeec; font-size: .85rem; } .wy-late.ok { background: transparent; color: var(--muted); padding: 0; }

/* Monifyx: the mark (a rising M with a teal coin) inside the amber logo tiles */
.mfx-mark { display: block; width: 72%; height: 72%; margin: auto; color: #0F1413; }
.logo, .logo-big, .ae-logo b { display: inline-grid; place-items: center; }
.boot-dot { fill: #0F776F; }

/* alerts: as wide as their words (up to 380 px), words never split in the middle ("Save / d"), even padding */
.toast { width: max-content !important; max-width: min(380px, calc(100vw - 24px)) !important; gap: 12px !important; padding: 10px 8px 10px 14px !important; }
.toast .t-msg { flex: 1 1 auto; min-width: 0; overflow-wrap: break-word !important; word-break: normal !important; white-space: normal; line-height: 1.35; }
.toast .toast-undo { padding: 5px 12px !important; margin-left: 2px; }
.toast .toast-x { margin-left: -4px; }

/* the mark fills more of its tile; signed in, the x of Monifyx is teal */
.mfx-mark { width: 86% !important; height: 86% !important; }
.mfx-x { color: #0F776F; }

/* the logo tile is as tall as the word Monifyx beside it (app header and sidebar) */
.brand { gap: .35em; }
.brand .logo, #sidebar .sb-brand .logo, .sidebar a.brand .logo { width: 1.05em !important; height: 1.05em !important; min-width: 0 !important; border-radius: .26em !important; font-size: inherit !important; flex: none; }
body.side-collapsed .sb-brand .logo { width: 30px !important; height: 30px !important; border-radius: 9px !important; } /* the collapsed menu shows the logo alone */