:root { --bg:#f4f7f6; --surface:#fff; --text:#18201e; --muted:#64716d; --accent:#0d7c66; --accent-soft:#d8f1e9; --danger:#b3261e; --line:#dbe4e0; --shadow:0 8px 28px #16362b12; font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); background:var(--bg) }
* { box-sizing:border-box } body { margin:0; min-height:100vh; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); background:var(--bg) } button,input,select { font:inherit } button { cursor:pointer } button:disabled { cursor:wait; opacity:.58 } #app { max-width:680px; margin:auto; min-height:100vh; padding:20px 16px 88px }.loading { color:var(--muted); text-align:center; padding:52px 0 }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px }.brand { font-weight:800; letter-spacing:-.04em; font-size:25px }.brand i { color:var(--accent); font-style:normal }.eyebrow { color:var(--muted); margin:0 0 3px; font-size:13px }.back { border:0; background:transparent; color:var(--accent); font-weight:700; padding:8px 0 }.icon-button { width:42px; height:42px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--text); font-size:19px }.card { background:var(--surface); border:1px solid #edf1ef; border-radius:20px; padding:18px; box-shadow:var(--shadow); margin:12px 0 }.group-card { width:100%; text-align:left; border:0; transition:transform .15s; display:flex; align-items:center; gap:14px }.group-card:active { transform:scale(.98) }.group-icon { width:46px; height:46px; border-radius:15px; display:grid; place-items:center; background:var(--accent-soft); font-size:22px }.grow { flex:1; min-width:0 }.title { margin:0; font-size:17px; font-weight:750 }.subtle { color:var(--muted); margin:3px 0 0; font-size:14px }.balance { font-weight:800; white-space:nowrap }.positive { color:var(--accent) }.negative { color:var(--danger) }.neutral { color:var(--muted) }
.primary,.secondary,.danger { border:0; border-radius:14px; min-height:48px; padding:0 17px; font-weight:750 }.primary { background:var(--accent); color:white; box-shadow:0 7px 15px #0d7c6644 }.secondary { background:var(--accent-soft); color:#075745 }.danger { background:#fde9e7; color:var(--danger) }.wide { width:100% }.fab { position:fixed; bottom:calc(18px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:min(calc(100% - 32px),648px); z-index:3 }.summary { background:linear-gradient(135deg,#0d7c66,#075745); color:white; border-radius:24px; padding:24px; margin-bottom:18px; box-shadow:0 12px 30px #0d7c6642 }.summary .subtle { color:#d8f1e9 }.amount { font-size:34px; font-weight:850; letter-spacing:-.055em; margin:7px 0 }.section-title { margin:24px 2px 10px; font-size:15px; font-weight:800 }.row { display:flex; justify-content:space-between; gap:12px; align-items:center }.member { padding:13px 0; border-bottom:1px solid var(--line) }.member:last-child { border-bottom:0 }.avatar { flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:#ece9ff; color:#4a3a8e; display:grid; place-items:center; font-weight:800; font-size:13px }.activity { padding:13px 0; border-bottom:1px solid var(--line) }.activity:last-child { border-bottom:0 }.tag { color:var(--muted); background:var(--bg); border-radius:8px; padding:3px 7px; font-size:12px; text-transform:capitalize }
.topbar-action { min-height:40px; border-radius:12px; padding:0 14px }
.settlement { width:100%; border:0; background:transparent; text-align:left; color:var(--text) }.settlement::after { content:'Record payment'; display:block; color:var(--accent); font-size:13px; font-weight:750; margin-top:3px }.sheet { position:fixed; inset:0; z-index:10; background:#17201d66; display:flex; align-items:flex-end }.sheet-card { background:var(--bg); width:100%; max-width:680px; margin:auto; max-height:94vh; overflow:auto; border-radius:26px 26px 0 0; padding:18px 16px calc(28px + env(safe-area-inset-bottom)); box-shadow:0 -8px 30px #0002 }.sheet-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px }.close { border:0; background:transparent; color:var(--muted); padding:8px; font-size:22px } label { display:block; margin:16px 0 6px; font-weight:700; font-size:14px } input,select { width:100%; min-height:48px; border:1px solid var(--line); border-radius:13px; background:var(--surface); padding:0 13px; color:var(--text) } input:focus,select:focus { outline:2px solid #0d7c6644; border-color:var(--accent) }.split-member { display:flex; align-items:center; gap:9px; margin:8px 0; padding:10px; background:var(--surface); border-radius:12px }.split-member input { width:20px; min-height:20px }.split-preview { color:var(--muted); font-size:14px; padding:8px 0 }.empty { text-align:center; padding:42px 18px; color:var(--muted) }.empty strong { display:block; color:var(--text); font-size:18px; margin-bottom:5px }.notice { margin:10px 0; padding:12px; border-radius:12px; background:#fff4d6; color:#735600; font-size:14px }.error { margin:10px 0; padding:12px; border-radius:12px; background:#fde9e7; color:var(--danger); font-size:14px }.invite { overflow-wrap:anywhere; background:var(--accent-soft); padding:12px; border-radius:12px; font-size:13px; margin:10px 0 }.actions { display:flex; gap:8px; margin-top:14px }.actions > * { flex:1 }
.pending { display:block; color:var(--muted); font-size:11px; font-weight:600 }.inline-form { display:flex; gap:8px }.inline-form input { min-width:0 }.divider { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; margin:24px 0 16px }.divider::before,.divider::after { content:''; height:1px; background:var(--line); flex:1 }.claim-list { display:grid; gap:9px; margin:16px 0 }
@media (prefers-color-scheme:dark) { :root { --bg:#17201d; --surface:#202b27; --text:#edf6f1; --muted:#a5b4ae; --accent:#36ba94; --accent-soft:#173d32; --line:#34443e; --shadow:0 8px 28px #0003 }.summary { background:linear-gradient(135deg,#157b63,#0e5544) }.avatar { background:#3a315e; color:#ddd5ff } }