:root { --green:#234b37; --green-2:#35684b; --soft:#e6efe7; --ink:#1f2d25; --muted:#59665d; --paper:#f5f6f1; --line:#dce3d8; --gold:#e4c16f; --red:#963e31; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select,textarea { font:inherit; }
button { border:1px solid var(--green); border-radius:10px; background:var(--green); color:white; padding:11px 16px; cursor:pointer; font-weight:650; min-height:44px; }
button:hover { background:var(--green-2); }
button.light { background:white; color:var(--green); border-color:var(--line); }
button.light:hover { background:var(--soft); }
button:disabled { opacity:.55; cursor:not-allowed; }
button.small { padding:6px 10px; font-size:13px; }
:focus-visible { outline:3px solid #b48824; outline-offset:3px; }
input,select,textarea { display:block; width:100%; min-width:0; padding:11px 12px; border:1px solid #b9c7b8; border-radius:9px; background:white; color:var(--ink); min-height:44px; }
textarea { resize:vertical; }
label { display:grid; gap:6px; font-size:13px; font-weight:650; min-width:0; }
fieldset { min-width:0; border:0; padding:0; margin:0; }
fieldset:disabled { opacity:.7; }
legend { font-weight:700; }
h1 { margin:0 0 15px; font-size:clamp(25px,4vw,32px); letter-spacing:-.7px; line-height:1.25; }
h2 { margin:0 0 12px; font-size:17px; }
p { margin:8px 0 16px; }
.masthead { background:var(--green); color:white; padding:23px max(20px,calc((100vw - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand strong { font-size:21px; }
.brand-mark { display:grid; place-items:center; border-radius:13px; width:54px; height:44px; flex-shrink:0; background:var(--gold); color:var(--green); font-weight:850; font-size:14px; }
.brand-sub { font-size:12px; color:#d7e4d9; }
.tabs { display:flex; gap:8px; overflow-x:auto; padding:12px max(16px,calc((100vw - 1160px)/2)); background:white; border-bottom:1px solid var(--line); }
.tabs button { flex-shrink:0; border-color:transparent; background:transparent; color:var(--muted); }
.tabs [aria-current="page"] { background:var(--soft); color:var(--green); border-color:var(--soft); }
main { max-width:1200px; margin:auto; padding:20px; outline:none; }
footer { font-size:12px; color:var(--muted); }
.notice { padding:12px 15px; border-radius:10px; background:var(--soft); color:var(--green); overflow-wrap:anywhere; }
.notice.error,.error-text { background:#faeae6; color:var(--red); }
.notice.success { background:#e3f3e5; color:#205833; }
.muted,.hint { color:var(--muted); }
.hint { font-size:12px; }
.eyebrow { color:var(--green-2); text-transform:uppercase; letter-spacing:1.3px; font-size:11px; font-weight:750; margin:0 0 5px; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:15px; flex-wrap:wrap; }
.card { min-width:0; background:white; border:1px solid var(--line); border-radius:16px; padding:22px; margin-bottom:18px; box-shadow:0 8px 28px #1f2d2508; }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.metrics h2 { font-size:13px; color:var(--muted); }
.metrics p { font-size:12px; margin-bottom:0; }
.metric { display:block; font-size:clamp(20px,2.2vw,28px); letter-spacing:-.5px; overflow-wrap:anywhere; }
.two-col { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:18px; }
.filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; align-items:end; }
.filters p { margin-bottom:0; }
.filters.compact { grid-template-columns:minmax(120px,1fr) auto auto; margin:16px 0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.wide { grid-column:1/-1; }
.participants-box { border:1px solid var(--line); border-radius:10px; padding:12px; }
.participants { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.participant { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid var(--line); border-radius:9px; overflow-wrap:anywhere; }
.participant input { width:20px; height:20px; min-height:20px; flex-shrink:0; accent-color:var(--green); }
.inline-actions { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0; }
.preview { font-size:13px; margin-top:14px; }
.preview ul { margin:5px 0; padding-left:22px; }
.request { word-break:break-all; font-family:ui-monospace,monospace; }
.balance-row,.suggestion { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; border-bottom:1px solid var(--line); padding:14px 0; }
.balance-row:last-child,.suggestion:last-child { border-bottom:0; }
.balance-row p,.suggestion p { margin:0; }
.positive { color:#246035; }
.negative { color:var(--red); }
.balance-amount { font-weight:750; font-variant-numeric:tabular-nums; }
.bar-row { margin:14px 0; }
.bar-label { display:flex; justify-content:space-between; gap:15px; overflow-wrap:anywhere; font-size:13px; }
.bar-track { height:8px; background:var(--soft); border-radius:10px; margin-top:5px; overflow:hidden; }
.bar-fill { height:100%; background:var(--green-2); border-radius:10px; }
.empty { padding:25px 8px; text-align:center; color:var(--muted); }
.transaction { padding:16px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.transaction:last-child { border-bottom:0; }
.tx-head { display:flex; justify-content:space-between; align-items:start; gap:15px; flex-wrap:wrap; }
.tx-head p { margin:0; }
.tx-title { font-weight:750; }
.transaction .hint { margin:6px 0; }
.transaction details { font-size:13px; white-space:pre-wrap; }
summary { cursor:pointer; color:var(--green); }
.pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:18px; font-size:13px; }
footer { padding:20px 0; border-top:1px solid var(--line); margin-top:25px; }
.skip { position:absolute; left:12px; top:-80px; padding:12px; background:white; color:var(--green); z-index:10; }
.skip:focus { top:10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media(max-width:850px) { .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .two-col { grid-template-columns:1fr; gap:0; } .filters { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { main { padding:16px 12px; } .card { padding:17px; } .masthead { padding:20px 14px; } .brand-sub { display:none; } .brand strong { font-size:17px; } .brand-mark { width:46px; height:36px; font-size:12px; } .masthead button { padding:9px 10px; font-size:13px; } .tabs { padding:10px 12px; gap:4px; } .tabs button { padding:10px 12px; font-size:13px; } .form-grid,.filters { grid-template-columns:1fr; } .filters.compact { grid-template-columns:1fr 1fr; } .filters.compact label { grid-column:1/-1; } .metrics { gap:10px; } .metric { font-size:20px; } }