:root {
  --bg: #f8f7f4; --surface: #fffefd; --surface-soft: #f0efeb; --ink: #20201e; --muted: #74736e;
  --line: rgba(32,32,30,.09); --orange: #ee7548; --orange-soft: #fff0e9; --green: #4f9279; --blue: #6e95c9;
  --shadow: 0 12px 34px rgba(45, 40, 33, .08); --shadow-raised: 0 20px 45px rgba(45, 40, 33, .16);
  --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 34px; --ease-out: cubic-bezier(.23,1,.32,1); --ease-drawer: cubic-bezier(.32,.72,0,1);
  font: 100%/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; overscroll-behavior: none; background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); }
button, input { font: inherit; } button, a, [role="button"] { touch-action: manipulation; user-select: none; -webkit-user-select: none; } button { cursor: pointer; border: 0; color: inherit; } input { border: 0; outline: 0; min-width: 0; font-size: 16px; color: var(--ink); background: transparent; }
.app-shell { width: min(100%, 1280px); min-height: 100dvh; margin: auto; padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.app-header { height: 76px; padding: calc(15px + env(safe-area-inset-top, 0px)) 20px 12px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 5; background: rgba(248,247,244,.88); backdrop-filter: blur(18px) saturate(150%); }
.wordmark { font-weight: 760; font-size: 20px; letter-spacing: -.065em; }.wordmark span { color: var(--orange); }.header-actions { display: flex; gap: 9px; align-items: center; }
.icon-button { width: 39px; height: 39px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: 0 1px 0 var(--line); transition: transform 130ms var(--ease-out), background 150ms ease; }.icon-button svg { width: 18px; }.icon-button:active, .quick-add:active, .nav-item:active, .primary-button:active { transform: scale(.96); }
.avatar { border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }.avatar-self { width: 36px; height: 36px; background: #dfb8a6; color: #5d3427; }
.content { padding: 8px 20px 28px; max-width: 720px; margin: auto; }.page { animation: enter .28s var(--ease-out); }.eyebrow { color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .01em; margin: 0 0 4px; }.page-title { font-size: 32px; letter-spacing: -.052em; line-height: 1.05; margin: 0; }.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 30px 0 14px; }.section-head h2 { font-size: 19px; letter-spacing: -.03em; margin: 0; }.text-button { color: var(--orange); background: transparent; font-size: 13px; font-weight: 650; padding: 8px 0; }.text-button:active { opacity: .65; }
.trip-hero { min-height: 244px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 20px; overflow: hidden; color: white; border-radius: var(--r-xl); background: linear-gradient(0deg, rgba(10,17,20,.72), rgba(10,17,20,.04) 72%), url('https://images.unsplash.com/photo-1528164344705-47542687000d?auto=format&fit=crop&w=1200&q=85') center/cover; box-shadow: var(--shadow); }.hero-top, .hero-bottom { position: relative; z-index: 1; }.hero-trip-label { display: inline-flex; background: rgba(255,255,255,.2); backdrop-filter: blur(12px); padding: 7px 10px; border-radius: 99px; font-size: 12px; font-weight: 650; }.trip-hero h1 { font-size: 34px; letter-spacing: -.055em; line-height: 1; margin: 0 0 7px; }.trip-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.88); }.dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }.countdown { position: absolute; right: 19px; bottom: 20px; width: 72px; height: 72px; display: grid; place-items: center; text-align: center; border-radius: 50%; background: rgba(18,23,23,.34); border: 1px solid rgba(255,255,255,.38); backdrop-filter: blur(9px); font-size: 11px; line-height: 1.1; }.countdown strong { display: block; font-size: 20px; letter-spacing: -.04em; }
.up-next { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 13px; background: var(--surface); border-radius: var(--r-md); box-shadow: 0 1px 0 var(--line); }.up-next + .up-next { margin-top: 8px; }.up-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: var(--orange-soft); color: var(--orange); }.up-icon.blue { color: var(--blue); background: #edf3fa; }.up-icon svg { width: 20px; }.row-title { font-size: 14px; font-weight: 670; margin: 0 0 2px; }.row-subtitle { font-size: 12px; color: var(--muted); margin: 0; }.row-time { color: var(--muted); font-size: 12px; }
.card-scroller { display: flex; gap: 12px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; scroll-snap-type: x mandatory; }.card-scroller::-webkit-scrollbar { display: none; }.trip-card { scroll-snap-align: start; flex: 0 0 175px; background: var(--surface); overflow: hidden; border-radius: var(--r-md); box-shadow: 0 1px 0 var(--line); text-align: left; transition: transform 180ms var(--ease-out), box-shadow 180ms ease; }.trip-card:active { transform: scale(.975); }.trip-image { height: 112px; background-position: center; background-size: cover; }.trip-card-body { padding: 11px 12px 13px; }.trip-card h3 { margin: 0 0 3px; font-size: 14px; letter-spacing: -.02em; }.trip-card p { margin: 0; color: var(--muted); font-size: 11px; }
.bottom-nav { position: fixed; z-index: 10; width: min(100%, 720px); bottom: 0; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(5,1fr); padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,254,253,.86); border-top: 1px solid rgba(255,255,255,.75); backdrop-filter: blur(18px) saturate(160%); }.nav-item { height: 54px; display: grid; place-items: center; gap: 3px; color: #898883; background: transparent; font-size: 10px; transition: transform 140ms var(--ease-out), color 140ms ease; }.nav-item svg { width: 20px; stroke-width: 1.8; }.nav-item.active { color: var(--ink); font-weight: 680; }.nav-item.active svg { stroke-width: 2.35; }
.quick-add { position: fixed; z-index: 11; right: max(20px, calc((100vw - 720px)/2 + 20px)); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--ink); box-shadow: 0 8px 20px rgba(0,0,0,.2); transition: transform 130ms var(--ease-out); }.quick-add svg { width: 21px; }
.trip-list { display: grid; gap: 14px; margin-top: 22px; }.trip-wide { min-height: 175px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; text-align: left; color: white; border-radius: var(--r-lg); position: relative; background-size: cover; background-position: center; box-shadow: var(--shadow); transition: transform 170ms var(--ease-out); }.trip-wide:before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(7,16,18,.66),transparent 70%); }.trip-wide > * { position: relative; }.trip-wide h2 { font-size: 24px; letter-spacing: -.045em; margin: 0 0 3px; }.trip-wide p { margin: 0; font-size: 12px; color: rgba(255,255,255,.9); }.trip-wide:active { transform: scale(.984); }.trip-wide.past { min-height: 128px; color: var(--ink); background: var(--surface); box-shadow: 0 1px 0 var(--line); }.trip-wide.past:before { background: linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,.1)), var(--past-image); background-size: cover; background-position: center; opacity: .35; }.trip-wide.past p { color: var(--muted); }
.trip-header { position: relative; overflow: hidden; min-height: 245px; margin: -8px -20px 0; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; color: white; background: linear-gradient(0deg,rgba(10,15,15,.75),rgba(10,15,15,.04)), url('https://images.unsplash.com/photo-1528360983277-13d401cdc186?auto=format&fit=crop&w=1200&q=85') center/cover; }.back-button { position: absolute; top: 16px; left: 18px; width: 38px; height: 38px; display: grid; place-items: center; color: white; border-radius: 50%; background: rgba(0,0,0,.23); backdrop-filter: blur(8px); }.back-button svg { width: 20px; }.trip-header h1 { font-size: 32px; margin: 0 0 7px; letter-spacing: -.058em; line-height: 1; }.member-row { display: flex; align-items: center; gap: 10px; }.avatar-group { display: flex; padding-left: 4px; }.mini-avatar { width: 28px; height: 28px; margin-left: -4px; border: 2px solid white; display: grid; place-items: center; border-radius: 50%; font-size: 10px; font-weight: 700; background: #d4c5a5; color: #3b3021; }.peach { background:#dfb8a6; color:#5b3428; }.blue-avatar { background:#bdcadc; color:#35445a; }.green-avatar { background:#c6d6b6; color:#3d5131; }.member-row span { font-size: 12px; }
.trip-tabs { display: flex; gap: 20px; overflow: auto; padding: 15px 0 4px; border-bottom: 1px solid var(--line); }.trip-tab { flex: 0 0 auto; padding: 6px 1px 10px; color: var(--muted); background: transparent; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 650; }.trip-tab.active { color: var(--ink); border-color: var(--orange); }
.overview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 21px; }.overview-card { min-height: 122px; padding: 15px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 1px 0 var(--line); }.overview-card .card-icon { color: var(--orange); }.overview-card .card-icon svg { width: 19px; }.overview-card strong { display: block; font-size: 22px; letter-spacing: -.04em; margin-top: 13px; }.overview-card span { font-size: 12px; color: var(--muted); }.upcoming-booking { padding: 17px; margin-top: 12px; border-radius: var(--r-md); background: #ece9e1; }.booking-top { display: flex; justify-content: space-between; align-items: center; }.booking-top span { font-size: 12px; color: #69655e; }.booking-top svg { width: 17px; }.flight-route { display: flex; align-items: center; justify-content: space-between; margin: 15px 0; }.airport { text-align: center; }.airport strong { display: block; font-size: 24px; letter-spacing: -.05em; }.airport span { font-size: 11px; color: var(--muted); }.flight-line { flex: 1; height: 1px; margin: 0 10px; position: relative; background: #c8c3b9; }.flight-line svg { position: absolute; left: 50%; top: 50%; width: 17px; padding: 2px; color: #706a61; background: #ece9e1; transform: translate(-50%,-50%); }
.day-selector { display: flex; gap: 8px; overflow: auto; padding: 18px 0 8px; scrollbar-width: none; }.day-selector::-webkit-scrollbar { display: none; }.day-pill { flex: 0 0 55px; padding: 8px 5px; border-radius: 15px; color: var(--muted); background: transparent; text-align: center; }.day-pill span { display: block; font-size: 11px; }.day-pill strong { font-size: 16px; }.day-pill.active { color: white; background: var(--ink); }.timeline { padding: 13px 0 0; }.timeline-date { margin: 0 0 16px; font-size: 14px; letter-spacing: -.01em; }.timeline-item { display: grid; grid-template-columns: 45px 24px 1fr; min-height: 89px; }.timeline-time { font-size: 12px; color: var(--muted); padding-top: 5px; }.timeline-rail { position: relative; }.timeline-rail:after { content: ''; position: absolute; top: 22px; bottom: -4px; left: 8px; width: 1px; background: #dedbd5; }.timeline-item:last-child .timeline-rail:after { display: none; }.timeline-dot { position: relative; z-index: 1; width: 17px; height: 17px; border: 4px solid var(--bg); border-radius: 50%; background: var(--orange); }.timeline-dot.blue { background: var(--blue); }.timeline-dot.green { background: var(--green); }.timeline-card { padding: 0 0 14px; }.timeline-card h3 { font-size: 15px; letter-spacing: -.02em; margin: 0 0 3px; }.timeline-card p { margin: 0; font-size: 12px; color: var(--muted); }.timeline-card .time-tag { display: inline-block; margin-top: 7px; color: var(--orange); background: var(--orange-soft); border-radius: 6px; padding: 3px 6px; font-size: 10px; font-weight: 650; }
.expense-summary { padding: 20px; color: white; border-radius: var(--r-lg); background: #30312e; }.expense-summary .eyebrow { color: #c3c5bd; }.expense-summary h2 { margin: 3px 0 16px; font-size: 33px; letter-spacing: -.055em; }.summary-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.summary-stats div { padding: 11px; border-radius: 12px; background: rgba(255,255,255,.09); }.summary-stats strong { display: block; font-size: 17px; letter-spacing: -.035em; }.summary-stats span { font-size: 11px; color: #c3c5bd; }.expense-list { display: grid; gap: 8px; }.expense-row { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }.expense-row:last-child { border: 0; }.expense-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--orange-soft); color: var(--orange); }.expense-icon.transport { color: var(--blue); background:#edf3fa; }.expense-icon svg { width: 18px; }.expense-row h3 { margin: 0 0 2px; font-size: 14px; letter-spacing: -.015em; }.expense-row p { margin: 0; font-size: 11px; color: var(--muted); }.expense-amount { text-align: right; font-size: 14px; font-weight: 680; }.expense-amount small { display:block; color:var(--muted); font-size:10px; font-weight:500; }
.balance-card { display:grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 17px; border-radius:var(--r-md); background:#eef6f1; }.balance-card h3 { font-size:14px; margin:0 0 3px; }.balance-card p { font-size:12px; color:var(--muted); margin:0; }.balance-card strong { color:var(--green); font-size:16px; letter-spacing:-.03em; }
.checklist { background:var(--surface); border-radius:var(--r-md); box-shadow:0 1px 0 var(--line); }.check-item { width:100%; display:flex; align-items:center; gap:11px; padding:14px; text-align:left; background:transparent; border-bottom:1px solid var(--line); }.check-item:last-child { border:0; }.check-item .checkbox { width:20px; height:20px; display:grid; place-items:center; flex:0 0 auto; border:1.5px solid #c7c4be; border-radius:50%; color:white; }.check-item.completed .checkbox { border-color:var(--green); background:var(--green); }.check-item .checkbox svg { width:13px; }.check-item span { font-size:14px; }.check-item small { margin-left:auto; color:var(--muted); font-size:11px; }.check-item.completed span { color:var(--muted); text-decoration:line-through; }
.memory-grid { display:grid; grid-template-columns:1.18fr .82fr; grid-auto-rows:126px; gap:9px; margin-top:22px; }.memory { border-radius:var(--r-md); background-size:cover; background-position:center; position:relative; overflow:hidden; }.memory:first-child { grid-row:span 2; }.memory:after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 50%); }.memory span { position:absolute; z-index:1; left:12px; bottom:11px; color:white; font-size:12px; font-weight:650; }.profile-card { padding:21px; text-align:center; background:var(--surface); border-radius:var(--r-lg); box-shadow:0 1px 0 var(--line); }.profile-card .avatar { width:64px; height:64px; margin:auto; font-size:20px; }.profile-card h2 { margin:11px 0 3px; font-size:20px; letter-spacing:-.035em; }.profile-card p { margin:0; color:var(--muted); font-size:13px; }.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); margin-top:19px; }.profile-stats strong { display:block; font-size:18px; letter-spacing:-.03em; }.profile-stats span { font-size:11px; color:var(--muted); }
.scrim { position:fixed; z-index:20; inset:0; visibility:hidden; opacity:0; background:rgba(23,22,20,.35); transition:opacity 200ms ease, visibility 0s 200ms; }.scrim.visible { opacity:1; visibility:visible; transition:opacity 200ms ease; }.sheet { position:fixed; z-index:21; left:50%; bottom:0; width:min(100%,600px); max-height:90dvh; overflow:auto; overscroll-behavior:contain; padding:0 20px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius:28px 28px 0 0; background:var(--surface); box-shadow:var(--shadow-raised); transform:translate(-50%,105%); transition:transform 330ms var(--ease-drawer); }.sheet.open { transform:translate(-50%,0); }.sheet-handle { height:29px; display:grid; place-items:center; touch-action:pan-x; }.sheet-handle span { width:36px; height:5px; border-radius:999px; background:#c8c6c0; }.sheet-heading { display:flex; align-items:flex-start; justify-content:space-between; }.sheet-heading h2 { margin:0; font-size:25px; letter-spacing:-.045em; }.close-sheet { background:var(--surface-soft); }.expense-form { display:grid; gap:16px; margin-top:19px; }.amount-field { display:flex; align-items:center; gap:5px; padding:9px 0 15px; border-bottom:1px solid var(--line); }.amount-field span { color:var(--muted); font-size:25px; font-weight:550; }.amount-field input { width:100%; font-size:38px; letter-spacing:-.055em; font-weight:650; }.amount-field input::placeholder { color:#c2c0ba; }.field-group { display:grid; gap:8px; }.field-label { font-size:12px; color:var(--muted); font-weight:650; }.field-group input { width:100%; padding:13px 14px; border-radius:13px; background:var(--surface-soft); }.category-picker { display:flex; gap:7px; overflow:auto; padding-bottom:2px; }.category-option { flex:0 0 auto; padding:9px 11px; display:flex; align-items:center; gap:6px; border-radius:11px; color:var(--muted); background:var(--surface-soft); font-size:12px; font-weight:650; }.category-option svg { width:15px; }.category-option.selected { color:var(--orange); background:var(--orange-soft); }.payer-row, .split-row { width:100%; padding:9px 0; display:flex; align-items:center; gap:9px; text-align:left; background:transparent; font-size:13px; }.payer-row .mini-avatar { margin:0; border:0; }.payer-row svg { width:16px; margin-left:auto; color:var(--muted); }.split-row { justify-content:space-between; border-top:1px solid var(--line); }.split-row span { display:flex; gap:7px; align-items:center; }.split-row svg { width:17px; color:var(--muted); }.split-row strong { font-size:12px; }.split-row em { font-style:normal; }.primary-button { min-height:49px; display:flex; justify-content:center; align-items:center; gap:8px; color:white; border-radius:15px; background:var(--ink); font-size:14px; font-weight:700; transition:transform 130ms var(--ease-out), background 180ms ease; }.primary-button svg { width:17px; }.toast { position:fixed; z-index:30; left:50%; bottom:calc(94px + env(safe-area-inset-bottom, 0px)); max-width:calc(100% - 40px); padding:11px 15px; color:white; border-radius:999px; background:var(--ink); font-size:13px; font-weight:600; opacity:0; pointer-events:none; transform:translate(-50%,12px) scale(.97); transition:opacity 180ms ease, transform 180ms var(--ease-out); }.toast.show { opacity:1; transform:translate(-50%,0) scale(1); }
@keyframes enter { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (hover:hover) and (pointer:fine) { .icon-button:hover { background:var(--surface-soft); } .trip-card:hover,.trip-wide:hover { transform:translateY(-2px); box-shadow:var(--shadow); } .nav-item:hover { color:var(--ink); } .category-option:hover { color:var(--ink); } }
@media (min-width: 760px) { body { background:#e9e8e4; } .app-shell { background:var(--bg); box-shadow:0 0 80px rgba(0,0,0,.08); } .content { max-width: 900px; } .bottom-nav { top:0; bottom:auto; left:max(26px, calc(50% - 600px)); transform:none; width:180px; height:100dvh; padding:100px 13px 20px; display:flex; flex-direction:column; align-items:stretch; background:transparent; border:0; backdrop-filter:none; }.nav-item { display:flex; height:44px; padding:0 12px; grid-template-columns:none; grid-auto-flow:column; justify-content:flex-start; gap:12px; border-radius:12px; font-size:13px; }.nav-item.active { background:var(--surface); }.app-header { max-width:900px; margin:auto; padding-left:20px; padding-right:20px; }.app-shell { width:min(100%, 1020px); padding-left:180px; padding-bottom:40px; } .quick-add { right:max(30px, calc(50% - 470px)); bottom:30px; } .trip-list { grid-template-columns:1.2fr .8fr; }.trip-wide:first-child { grid-row:span 2; min-height:320px; }.overview-grid { grid-template-columns:repeat(4,1fr); }.trip-header { margin-left:-20px; margin-right:-20px; border-radius:var(--r-lg); }.sheet { border-radius:28px 28px 0 0; } }
@media (prefers-reduced-motion: reduce) { *,*:before,*:after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .sheet { transform:translate(-50%,105%); }.sheet.open { transform:translate(-50%,0); } }
@media (prefers-reduced-transparency: reduce) { .app-header,.bottom-nav { backdrop-filter:none; background:var(--bg); } }