:root { color-scheme:light dark; --bg:light-dark(#fcfbf8,#1f2327); --fg:light-dark(#222522,#f3f0e9); --muted:light-dark(#5e655d,#bcc1ba); --line:light-dark(#dce0d7,#42494b); --soft:light-dark(#edf0e9,#2b3235); --accent:light-dark(#965135,#efaa85); --tint:light-dark(#faeee5,#3a2d27); --primary:light-dark(#292f2b,#e4e7df); --on-primary:light-dark(#fff,#232922); --danger:light-dark(#a32824,#ffb4aa); --success:light-dark(#315e3c,#b0d5b0); font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--fg); }
html[data-theme=light] {color-scheme:light} html[data-theme=dark] {color-scheme:dark}
* {box-sizing:border-box} body {margin:0} button,input,select,textarea {font:inherit;color:inherit} button {touch-action:manipulation;cursor:pointer;transition:background-color 150ms ease-out,opacity 150ms ease-out} button:disabled {opacity:.5;cursor:default} button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible {outline:3px solid var(--accent);outline-offset:3px} button:hover:not(:disabled) {filter:brightness(.96)} button:active:not(:disabled) {opacity:.85} [hidden]{display:none!important}
.app {max-width:560px;margin:0 auto;padding-bottom:max(20px,env(safe-area-inset-bottom))} .header {display:flex;align-items:center;gap:12px;padding:16px 22px;padding-top:max(16px,env(safe-area-inset-top));border-bottom:1px solid var(--line)} .header div {flex:1} .header strong,.header span.small {display:block} .avatar {font-size:24px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--soft)} main {padding:22px} h1,h2,h3,p {margin:0} h1 {font-size:1.65rem;line-height:1.2;font-weight:600;letter-spacing:-.025em;overflow-wrap:anywhere} h2 {font-size:1.1rem;font-weight:600} h3 {font-size:1rem;font-weight:600} .muted {color:var(--muted)} .small {font-size:.8125rem} .num {font-variant-numeric:tabular-nums;white-space:nowrap} .text-button {border:0;background:none;color:var(--accent);padding:10px 0;min-height:44px;font-size:.875rem} .primary,.secondary {border-radius:11px;padding:13px 16px;min-height:46px;font-weight:500} .primary {background:var(--primary);color:var(--on-primary);border:0;width:100%} .secondary {border:1px solid var(--line);background:var(--bg)} .bill-heading {display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px} .bill-heading>div:first-child {min-width:0} .bill-total {text-align:right;flex:none} .bill-total strong {font-size:1.25rem;letter-spacing:-.03em} .bill-total span {display:block;font-size:.75rem;color:var(--muted)} .section-title {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px} .intro {color:var(--muted);font-size:.875rem;margin-bottom:20px} .row {display:flex;align-items:center;gap:8px} .row>* {min-width:0} .row input {flex:1}
.people {display:flex;flex-wrap:wrap;gap:8px} .person {flex:1 1 95px;min-width:0;border:1px solid transparent;border-radius:12px;background:var(--soft);padding:11px;text-align:left} .person span {display:block;font-weight:500;overflow-wrap:anywhere} .person small {font-size:.75rem;color:var(--muted)} .person[aria-pressed=true] {background:var(--primary);color:var(--on-primary)} .person[aria-pressed=true] small {color:inherit;opacity:.85} .hint {font-size:.875rem;color:var(--muted);margin:16px 0 6px} .items {margin-bottom:10px} .item {display:flex;align-items:center;gap:12px;border:0;border-bottom:1px solid var(--line);background:none;padding:14px 0;width:100%;text-align:left} .check {display:grid;place-items:center;flex:none;width:23px;height:23px;border:1px solid var(--line);border-radius:7px} .item[aria-pressed=true] .check {background:var(--accent);color:var(--bg);border-color:var(--accent)} .item-main {flex:1;min-width:0} .item-name {display:block;font-weight:500;overflow-wrap:anywhere} .unit {font-size:.75rem;color:var(--muted);font-weight:400;margin-left:5px} .owners {display:block;font-size:.75rem;color:var(--muted);overflow-wrap:anywhere} .owners.shared {color:var(--accent)} .price {font-size:.875rem;text-align:right;flex:none} .price small {display:block;font-size:.75rem;color:var(--muted)} .footer {margin-top:20px} .progress {display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.875rem;margin-bottom:12px} .progress span {color:var(--muted)} .fees {padding:13px 0;font-size:.875rem;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)} .share {padding:15px 0;border-bottom:1px solid var(--line)} .share-top {display:flex;justify-content:space-between;gap:12px} .share-top strong:first-child {overflow-wrap:anywhere} .share small {display:block;font-size:.8125rem;color:var(--muted);margin-top:5px} .reconciled {display:flex;justify-content:space-between;gap:8px;padding:16px 0 24px;font-size:.875rem} .owed {background:var(--soft);border-radius:12px;padding:14px;margin:16px 0} .owed p {display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:.875rem} .owed p span {overflow-wrap:anywhere}
label {display:block;font-size:.875rem;margin-bottom:7px} input,select,textarea {width:100%;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:1rem} textarea {resize:vertical;min-height:180px} .field {margin-bottom:15px} .edit-row {display:grid;grid-template-columns:minmax(0,1fr) 115px 40px;gap:8px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)} .edit-row label {margin:0} .edit-row .unit {display:block;margin:3px 0 0} .delete {border:0;background:none;color:var(--danger);padding:10px 8px;min-height:44px;font-size:20px} .uncertain {font-size:.75rem;color:var(--accent);margin-top:5px} .edit-row .uncertain {grid-column:1/-1} .charges {padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:12px} .charges .field {margin:0} .banner {background:var(--tint);padding:13px 14px;border-radius:10px;font-size:.875rem;margin:14px 0} .banner.error {color:var(--danger)} .banner.success {background:var(--soft);color:var(--success)} .banner button {display:block} .people-edit {background:var(--soft);padding:14px;border-radius:10px;margin:14px 0} .people-edit>div {margin-top:10px} .people-edit .row button {flex:none} .people-edit input {background:var(--bg)} .receipt-button {display:block;text-align:left;width:100%;background:var(--soft);border:0;border-radius:10px;padding:13px 15px;margin-top:16px;font-size:.875rem} .receipt-button small {display:block;color:var(--muted)} .saved {font-size:.75rem;color:var(--muted);min-height:18px;margin-top:4px} .list-item {width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border:0;border-bottom:1px solid var(--line);background:none;text-align:left} .list-item span:first-child {overflow-wrap:anywhere} .list-item small {display:block;color:var(--muted);font-size:.75rem} .empty {padding:28px 0} .empty p {margin:12px 0 20px;color:var(--muted)} .empty a {color:var(--accent)} #notice {padding:0 22px;font-size:.875rem;color:var(--muted)} #notice:empty {display:none} .skeleton>div {height:65px;border-radius:10px;background:var(--soft);margin:15px 0} .skeleton>div:first-child {height:95px} .sr-only {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
@media(max-width:360px) {main {padding:16px} .header {padding:14px 16px} .bill-heading {gap:10px} .bill-total strong {font-size:1.125rem} .edit-row {grid-template-columns:minmax(0,1fr) 96px 32px;gap:5px} .edit-row input {padding:10px 7px} .charges {gap:8px} .item {gap:8px}}
@media(prefers-reduced-motion:reduce){button {transition:none}}
.person-add {margin-bottom:16px} .person-add .row button {flex:none} .person-error {color:var(--danger);margin-top:6px} .person-error:empty {display:none} input::placeholder {color:var(--muted);opacity:1}