:root { --coral:#f77c68; --coral-dark:#e86453; --ink:#252936; --muted:#858b99; --line:#ebe8e7; --paper:#fff; --wash:#fff8f6; --green:#38a36f; --shadow:0 8px 28px rgba(75,38,31,.09); }
* { box-sizing:border-box; }
body { margin:0; background:#f5f4f3; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; border:0; }
#app { max-width:560px; min-height:100dvh; margin:auto; background:var(--paper); padding-bottom:92px; }
.topbar { padding:calc(env(safe-area-inset-top) + 20px) 20px 18px; background:var(--wash); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; color:var(--coral-dark); font-weight:800; font-size:21px; letter-spacing:-.03em; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:11px; color:white; background:var(--coral); font-size:17px; }
.month-nav { display:flex; align-items:center; justify-content:space-between; margin-top:19px; }
.month-title { font-size:22px; font-weight:750; }
.round-btn,.icon-btn { width:39px; height:39px; display:grid; place-items:center; border-radius:50%; background:white; color:var(--ink); font-size:22px; box-shadow:0 2px 8px #f0e8e6; }
.content { padding:18px 16px; }
.summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:19px; }
.metric { border:1px solid var(--line); border-radius:16px; padding:14px 15px; background:white; }
.metric span,.eyebrow,.field-label { color:var(--muted); font-size:12px; font-weight:650; }
.metric strong { display:block; margin-top:5px; font-size:21px; letter-spacing:-.04em; }
.metric.expense strong { color:var(--coral-dark); }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:25px 2px 11px; font-size:16px; font-weight:750; }
.section-title button { background:none; color:var(--coral-dark); font-size:13px; font-weight:700; }
.calendar { border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.weekdays { background:#faf9f8; color:#9b9ba1; font-size:11px; text-align:center; padding:10px 0; }
.day { min-height:67px; padding:7px 5px 4px; border-top:1px solid var(--line); border-right:1px solid var(--line); background:#fff; text-align:left; vertical-align:top; }
.day:nth-child(7n) { border-right:0; }.day.muted { background:#fbfbfa; color:#c7c7c7; }.day.today .day-num { background:var(--coral); color:#fff; }.day.selected { background:#fff2ee; }.day-num { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; font-size:13px; font-weight:650; }
.day-amount { display:block; color:var(--coral-dark); font-size:10px; font-weight:750; margin-top:5px; letter-spacing:-.06em; white-space:nowrap; overflow:hidden; }.day-dot { width:4px; height:4px; background:var(--coral); border-radius:50%; display:block; margin:4px auto; }
.card { border:1px solid var(--line); border-radius:17px; background:#fff; overflow:hidden; }.transaction { width:100%; background:#fff; display:grid; grid-template-columns:38px 1fr auto; align-items:center; padding:13px 14px; text-align:left; border-bottom:1px solid var(--line); }.transaction:last-child{border-bottom:0}.txn-icon { display:grid; place-items:center; width:31px;height:31px;border-radius:10px;background:#fff0eb;font-size:16px; }.txn-main { min-width:0; }.txn-main b { display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.txn-main small { color:var(--muted); font-size:11px; }.txn-amount { font-size:15px; font-weight:800; text-align:right; }.txn-split{color:var(--muted);font-size:10px;text-align:right;margin-top:3px}.empty { padding:26px 18px; text-align:center; color:var(--muted); font-size:14px; }.bottom-nav { position:fixed; z-index:10; bottom:0; left:50%; transform:translateX(-50%); width:min(560px,100%); height:78px; padding-bottom:env(safe-area-inset-bottom); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); }.nav-item { background:none; color:#9aa0aa; font-size:10px; font-weight:650; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }.nav-item .nav-icon { font-size:22px; line-height:22px; }.nav-item.active{color:var(--coral-dark)}.fab { position:fixed; z-index:11; left:50%; bottom:47px; transform:translateX(-50%); height:56px; width:56px; border-radius:50%; background:var(--coral); color:white; box-shadow:0 7px 18px rgba(229,100,82,.35); font-size:32px; font-weight:250; }.settlement-hero { border-radius:19px; padding:21px; background:linear-gradient(135deg,#f98470,#ee695a); color:#fff; box-shadow:var(--shadow); }.settlement-hero .hero-label { opacity:.85; font-size:13px; }.settlement-hero b { display:block; margin:8px 0 4px; font-size:27px; letter-spacing:-.05em; }.settlement-hero p { margin:0; font-size:14px; }.settlement-detail { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-top:17px; }.settlement-detail div { padding:13px; border-right:1px solid var(--line); }.settlement-detail div:last-child{border:0}.settlement-detail small{color:var(--muted);display:block}.settlement-detail strong{font-size:16px;display:block;margin-top:3px}.settle-button,.primary-button { width:100%; margin-top:14px; padding:14px; background:var(--coral); color:#fff; border-radius:14px; font-weight:800; }.subtle-button { background:#fff1ed; color:var(--coral-dark); border-radius:11px; padding:9px 12px; font-size:13px; font-weight:750; }.settings-group { margin-bottom:20px; }.settings-row { width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; padding:15px 16px; background:#fff; border-bottom:1px solid var(--line); }.settings-row:last-child{border:0}.settings-row span{font-size:14px}.settings-row small{color:var(--muted);display:block;margin-top:2px}.badge { padding:5px 8px; background:#fff0eb; color:var(--coral-dark); border-radius:8px; font-size:11px; font-weight:750; }.modal-backdrop { position:fixed; z-index:30; inset:0; display:flex; align-items:flex-end; background:rgba(28,24,22,.38); }.sheet { width:min(560px,100%); max-height:92dvh; overflow:auto; background:#fff; border-radius:25px 25px 0 0; padding:17px 20px calc(22px + env(safe-area-inset-bottom)); }.sheet-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }.sheet-header h2{margin:0;font-size:20px}.sheet-close{background:#f4f3f2;width:32px;height:32px;border-radius:50%;font-size:20px;color:var(--ink)}.form-grid{display:grid;gap:14px}.form-field{display:grid;gap:6px}.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid #dedadd;border-radius:12px;padding:12px;background:#fff;color:var(--ink);outline-color:var(--coral)}.amount-input{font-size:28px!important;font-weight:800;letter-spacing:-.04em}.split-control{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.choice{padding:11px 4px;border:1px solid #e2dedc;border-radius:10px;background:#fff;font-size:13px;font-weight:700}.choice.active{background:#fff0ec;color:var(--coral-dark);border-color:#f7ae9f}.range-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px}.range-row input{padding:0}.range-value{min-width:48px;text-align:right;color:var(--coral-dark);font-weight:800}.secondary-button{width:100%;margin-top:10px;background:#f5f4f3;color:var(--ink);padding:13px;border-radius:13px;font-weight:750}.notice{background:#fff6d9;border-radius:12px;padding:11px 12px;color:#80631e;font-size:12px;line-height:1.5}.toast{position:fixed;z-index:99;left:50%;bottom:96px;transform:translateX(-50%);padding:11px 15px;border-radius:999px;color:#fff;background:#2e3541;font-size:13px;box-shadow:var(--shadow);white-space:nowrap}.history-date{color:var(--muted);font-size:12px;font-weight:750;margin:18px 3px 7px}.segmented{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:11px;overflow:hidden;margin:0 0 16px}.segmented button{background:#fff;padding:9px;font-size:13px;color:var(--muted)}.segmented button.active{background:#fff0ec;color:var(--coral-dark);font-weight:750}.inline-form{display:flex;gap:8px}.inline-form input{min-width:0;flex:1;border:1px solid #dedadd;border-radius:10px;padding:10px}.list-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.chip{background:#f7f4f3;padding:7px 10px;border-radius:9px;font-size:12px}.danger{color:#c84942!important}@media (min-width:561px){body{padding:18px 0}.bottom-nav{border-radius:0 0 18px 18px}.fab{bottom:63px}#app{min-height:calc(100dvh - 36px);border-radius:18px;box-shadow:0 14px 50px rgba(48,31,26,.1);overflow:hidden}.topbar{border-radius:18px 18px 0 0}}