:root {
  font-family: "DM Sans", "Noto Sans SC", system-ui, sans-serif;
  color: #18312f;
  background: #f7f5ef;
  font-synthesis: none;
  --ink: #18312f;
  --muted: #71807d;
  --paper: #fffefa;
  --line: #e5e3dc;
  --brand: #1f5a54;
  --brand-soft: #dceae6;
  --accent: #de7358;
  --accent-soft: #f7e3dc;
  --gold: #c58d33;
  --shadow: 0 16px 40px rgba(40, 55, 50, .08);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; overflow-x:hidden; background: #f7f5ef; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; padding-bottom: 92px; }
.page { width: min(100%, 720px); margin: 0 auto; padding: 0 20px 32px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 22px 0 16px; }
.brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700; letter-spacing:-.4px; }
.brand-mark { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; color:white; background:var(--brand); transform:rotate(-3deg); }
.icon-btn { width:44px; height:44px; border:0; border-radius:14px; background:var(--paper); color:var(--ink); box-shadow:0 4px 16px rgba(24,49,47,.08); display:grid; place-items:center; font-size:22px; }
.account-button { min-width:0; max-width:65%; display:flex; align-items:center; gap:10px; padding:5px 5px 5px 12px; border:1px solid var(--line); border-radius:16px; background:var(--paper); color:var(--ink); text-align:right; }
.account-copy { min-width:0; }
.account-copy strong,.account-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-copy strong { font-size:12px; }
.account-copy small { margin-top:2px; color:var(--muted); font-size:10px; }
.account-avatar { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; color:white; background:var(--accent); font-weight:700; }
.account-avatar.large { width:48px; height:48px; border-radius:15px; font-size:18px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:30px; letter-spacing:-1.2px; line-height:1.15; margin-bottom:8px; }
h2 { font-size:20px; letter-spacing:-.5px; }
.eyebrow { margin:0 0 8px; text-transform:uppercase; letter-spacing:1.5px; font-size:11px; font-weight:700; color:var(--accent); }
.muted { color:var(--muted); }
.section-head { display:flex; justify-content:space-between; align-items:end; margin:28px 0 14px; }
.section-head h2 { margin:0; }
.text-btn { border:0; color:var(--brand); background:transparent; padding:4px 0; font-weight:600; }
.trip-list { display:grid; gap:16px; }
.trip-card { position:relative; overflow:hidden; border:0; text-align:left; color:white; border-radius:24px; min-height:230px; padding:24px; background:linear-gradient(145deg,#1e5c55,#163934); box-shadow:var(--shadow); }
.trip-card::after { content:""; position:absolute; width:190px; height:190px; right:-70px; top:-50px; border:32px solid rgba(255,255,255,.06); border-radius:50%; }
.trip-card.secondary { background:linear-gradient(145deg,#b9604d,#773c34); }
.trip-meta { opacity:.78; font-size:14px; }
.trip-card h2 { font-size:25px; margin:48px 0 9px; }
.trip-dest { opacity:.9; }
.trip-money { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:24px; }
.trip-money span { display:block; opacity:.65; font-size:12px; margin-bottom:4px; }
.trip-money strong { font-size:18px; }
.status-chip { position:absolute; right:18px; top:18px; z-index:1; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); font-size:12px; font-weight:600; }
.empty { padding:44px 28px; border:1px dashed #c8cdc8; border-radius:22px; text-align:center; color:var(--muted); }
.empty .big { font-size:34px; display:block; margin-bottom:12px; }
.hero { margin:0 -20px; padding:20px 20px 26px; background:var(--brand); color:white; border-radius:0 0 30px 30px; }
.hero .topbar { padding-top:0; }
.hero .icon-btn { box-shadow:none; background:rgba(255,255,255,.12); color:white; }
.hero-actions { display:flex; gap:8px; }
.hero.compact { padding-top:10px; padding-bottom:10px; border-radius:0 0 20px 20px; }
.hero.compact .topbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; padding:0; }
.compact-trip-title { min-width:0; text-align:center; }
.compact-trip-title strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; }
.compact-trip-title span { display:block; margin-top:2px; color:rgba(255,255,255,.62); font-size:11px; }
.hero h1 { margin-top:24px; }
.hero-meta { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.72); font-size:14px; }
.destination-row { justify-content:space-between; gap:16px; }
.destination-row > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hero-map-link { flex:0 0 auto; color:white; font-size:12px; font-weight:600; text-decoration:none; }
.dot { width:3px; height:3px; border-radius:50%; background:currentColor; }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:24px; }
.metric { background:rgba(255,255,255,.10); padding:13px 10px; border-radius:15px; }
.metric span { display:block; font-size:11px; opacity:.68; margin-bottom:6px; white-space:nowrap; }
.metric strong { font-size:16px; }
.progress { height:7px; border-radius:999px; background:rgba(255,255,255,.14); margin-top:18px; overflow:hidden; }
.progress i { display:block; height:100%; border-radius:inherit; background:#f0aa75; }
.progress-label { display:flex; justify-content:space-between; font-size:11px; margin-top:7px; opacity:.68; }
.day-card { display:block; width:100%; text-align:left; border:0; border-radius:20px; padding:18px; margin-bottom:12px; background:var(--paper); color:var(--ink); box-shadow:0 8px 28px rgba(45,60,54,.05); }
.day-grid { display:grid; }
.day-title { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.day-title strong { font-size:16px; }
.day-date { font-size:12px; color:var(--muted); margin-top:4px; }
.day-total { color:var(--accent); font-weight:700; font-size:14px; white-space:nowrap; }
.day-preview { margin-top:14px; display:grid; gap:9px; }
.preview-item { display:flex; align-items:center; gap:10px; font-size:14px; }
.preview-icon { width:28px; height:28px; display:grid; place-items:center; background:#f1f0ea; border-radius:9px; }
.day-tabs { display:flex; gap:8px; overflow:auto; margin:18px -20px 4px; padding:0 20px 8px; scrollbar-width:none; }
.day-tab { flex:0 0 auto; border:1px solid var(--line); background:var(--paper); border-radius:14px; padding:10px 15px; color:var(--muted); }
.day-tab.active { background:var(--brand); color:white; border-color:var(--brand); }
.day-tab small { display:block; margin-top:3px; opacity:.65; }
.timeline { position:relative; margin:22px 0 0; }
.timeline::before { content:""; position:absolute; left:42px; top:12px; bottom:12px; width:1px; background:#d9ddd8; }
.timeline-item { position:relative; display:grid; grid-template-columns:70px minmax(0,1fr); min-width:0; margin-bottom:16px; }
.timeline-time { font-size:12px; font-weight:600; padding-top:17px; }
.timeline-dot { position:absolute; width:10px; height:10px; left:38px; top:20px; border-radius:50%; background:var(--accent); border:2px solid #f7f5ef; z-index:1; }
.timeline-card-wrap { min-width:0; display:grid; gap:7px; }
.timeline-card { width:100%; min-width:0; border:0; text-align:left; padding:16px; border-radius:18px; background:var(--paper); color:var(--ink); box-shadow:0 7px 24px rgba(45,60,54,.05); }
.timeline-card h3 { margin:0 0 5px; overflow-wrap:anywhere; font-size:16px; }
.timeline-card p { margin:0; font-size:13px; color:var(--muted); }
.item-foot { display:flex; justify-content:space-between; margin-top:13px; font-size:12px; color:var(--muted); }
.item-foot .paid { color:var(--brand); font-weight:600; }
.map-link { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; border-radius:12px; color:var(--brand); background:var(--brand-soft); text-decoration:none; font-size:12px; font-weight:600; }
.summary-strip { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.summary-cell { background:var(--brand-soft); border-radius:16px; padding:14px; }
.summary-cell span { display:block; color:var(--muted); font-size:11px; margin-bottom:4px; }
.summary-cell strong { color:var(--brand); }
.expense-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.expense-summary .metric { background:var(--paper); box-shadow:0 6px 22px rgba(45,60,54,.05); }
.expense-summary .metric strong { color:var(--ink); }
.expense-summary .budget-metric { background:var(--brand); color:white; }
.expense-summary .budget-metric strong { color:white; }
.expense-definition { margin:10px 2px 0; color:var(--muted); font-size:12px; }
.budget-note { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:13px 15px; border-radius:15px; background:var(--brand-soft); color:var(--brand); font-size:13px; }
.budget-note.over { background:var(--accent-soft); color:#a94734; }
.category-list { display:grid; gap:10px; }
.category-row { width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px; border:1px solid transparent; background:var(--paper); color:var(--ink); text-align:left; border-radius:16px; transition:.18s; }
.category-row.active { border-color:var(--brand); background:#f3f8f6; box-shadow:0 0 0 3px rgba(31,90,84,.08); }
.category-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--brand-soft); }
.category-name { font-size:14px; font-weight:600; }
.category-bar { height:5px; background:#ecece8; border-radius:9px; margin-top:7px; overflow:hidden; }
.category-bar i { height:100%; display:block; background:var(--accent); border-radius:inherit; }
.category-value { font-weight:700; font-size:14px; white-space:nowrap; }
.category-value i { margin-left:4px; color:var(--muted); font-size:18px; font-style:normal; }
.list { display:grid; gap:10px; }
.list-row { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:14px; border:0; text-align:left; color:var(--ink); background:var(--paper); border-radius:17px; }
.list-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:#f0f0eb; font-size:20px; }
.list-title { font-size:14px; font-weight:600; margin-bottom:3px; }
.list-sub { font-size:12px; color:var(--muted); }
.list-side { text-align:right; }
.list-side strong { display:block; font-size:14px; }
.badge { display:inline-block; margin-top:5px; border-radius:999px; padding:4px 7px; font-size:10px; font-weight:600; background:#eceeea; color:var(--muted); }
.badge.paid { background:var(--brand-soft); color:var(--brand); }
.badge.confirmed { background:#f6ecd8; color:#93671f; }
.todo-list { display:grid; gap:10px; }
.todo-row { display:grid; grid-template-columns:38px 1fr 18px; align-items:center; gap:10px; padding:12px 14px 12px 12px; border-radius:17px; background:var(--paper); box-shadow:0 7px 24px rgba(45,60,54,.05); }
.todo-check { width:30px; height:30px; border:1.5px solid #b7c5c0; border-radius:10px; background:transparent; color:white; display:grid; place-items:center; font-size:17px; font-weight:700; }
.todo-row.done .todo-check { background:var(--brand); border-color:var(--brand); }
.todo-main { min-width:0; border:0; padding:3px 0; text-align:left; background:transparent; color:var(--ink); }
.todo-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; }
.todo-sub { display:block; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--muted); }
.todo-row.done .todo-title { color:#91a09c; text-decoration:line-through; }
.todo-row.done .todo-sub { color:#aab5b2; }
.todo-arrow { color:#b4c0bd; font-size:23px; text-align:right; }
.fab { position:fixed; z-index:10; right:max(20px,calc((100vw - 680px)/2)); bottom:88px; width:58px; height:58px; border:0; border-radius:18px; color:white; background:var(--accent); box-shadow:0 12px 25px rgba(192,81,54,.3); font-size:27px; }
.bottom-nav { position:fixed; z-index:9; bottom:0; left:50%; transform:translateX(-50%); width:min(100%,720px); display:grid; grid-template-columns:repeat(4,1fr); padding:9px 12px max(9px,env(safe-area-inset-bottom)); background:rgba(255,254,250,.93); border-top:1px solid rgba(222,220,213,.8); backdrop-filter:blur(16px); }
.nav-btn { border:0; background:transparent; color:#8a9693; padding:5px 2px; font-size:10px; }
.nav-btn b { display:block; font-size:20px; line-height:1.1; margin-bottom:3px; filter:grayscale(1); }
.nav-btn.active { color:var(--brand); font-weight:700; }
.nav-btn.active b { filter:none; }
.overlay { position:fixed; z-index:30; inset:0; background:rgba(17,34,32,.45); display:flex; align-items:flex-end; justify-content:center; animation:fade .18s ease; }
.sheet { width:min(100%,720px); max-height:92vh; overflow:auto; padding:10px 20px calc(26px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; background:#fbfaf6; animation:rise .24s ease; }
.sheet-handle { width:38px; height:4px; margin:0 auto 20px; border-radius:9px; background:#d1d0cb; }
.sheet-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.sheet-head h2 { margin:0; }
.close-btn { width:38px; height:38px; border:0; border-radius:50%; background:#ecece8; font-size:20px; }
.form { display:grid; gap:15px; }
.field { display:grid; gap:7px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field label { font-size:12px; font-weight:600; color:#586663; }
.field input,.field select,.field textarea { width:100%; border:1px solid #deded8; border-radius:13px; padding:13px 14px; color:var(--ink); background:white; outline:none; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#72a29a; box-shadow:0 0 0 3px rgba(114,162,154,.16); }
.field textarea { min-height:76px; resize:vertical; }
.field-help { color:var(--muted); font-size:11px; line-height:1.45; }
.map-form-link { color:var(--brand); font-size:12px; font-weight:600; text-decoration:none; }
.status-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:5px; border-radius:15px; background:#ecece7; }
.status-picker label { position:relative; cursor:pointer; }
.status-picker input { position:absolute; opacity:0; pointer-events:none; }
.status-picker span { display:block; padding:11px 7px; border-radius:11px; text-align:center; color:var(--muted); font-size:13px; font-weight:600; transition:.18s; }
.status-picker input:checked + span { background:white; color:var(--brand); box-shadow:0 3px 10px rgba(24,49,47,.1); }
.submit-btn { border:0; border-radius:15px; padding:15px; background:var(--brand); color:white; font-weight:700; margin-top:4px; }
.danger-btn { border:1px solid #efcfc7; border-radius:15px; padding:13px; background:transparent; color:#bc4f38; font-weight:600; }
.full-width { width:100%; }
.account-sheet { display:flex; align-items:center; gap:14px; margin-bottom:24px; padding:18px; border-radius:18px; background:var(--paper); }
.account-sheet strong { display:block; overflow-wrap:anywhere; }
.account-sheet p { margin:5px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.share-copy { display:grid; gap:15px; }
.share-link { word-break:break-all; padding:13px; border:1px solid var(--line); border-radius:13px; background:white; color:var(--brand); font-size:12px; line-height:1.5; }
.quick-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px; }
.quick-btn { border:1px solid var(--line); border-radius:14px; padding:10px 4px; background:var(--paper); color:var(--ink); font-size:12px; }
.quick-btn span { display:block; font-size:20px; margin-bottom:4px; }
.login { min-height:100vh; width:min(100%,720px); margin:auto; padding:24px 22px; display:flex; flex-direction:column; justify-content:space-between; background:radial-gradient(circle at 100% 0,#dceae6 0,transparent 40%); }
.login-visual { margin-top:30px; }
.login .brand { margin-bottom:52px; }
.login h1 { font-size:42px; max-width:330px; }
.login h1 em { color:var(--accent); font-style:normal; }
.login-copy { max-width:330px; line-height:1.7; color:var(--muted); }
.passport { width:210px; height:140px; margin:36px 0 0 auto; padding:20px; border-radius:13px; background:var(--brand); color:white; transform:rotate(-6deg); box-shadow:0 18px 35px rgba(24,63,59,.2); }
.passport span { display:block; opacity:.5; font-size:11px; letter-spacing:2px; }
.passport b { display:block; margin-top:38px; font-size:28px; }
.login-form { display:grid; gap:12px; }
.login-form input { border:1px solid var(--line); background:var(--paper); border-radius:15px; padding:15px; }
.login-form button { border:0; border-radius:15px; padding:15px; background:var(--brand); color:white; font-weight:700; }
.auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.auth-actions button:last-child { background:var(--accent); }
.login-note { text-align:center; color:var(--muted); font-size:11px; }
.toast { position:fixed; z-index:99; left:50%; bottom:100px; transform:translate(-50%,20px); padding:11px 16px; background:#18312f; color:white; border-radius:12px; opacity:0; pointer-events:none; transition:.25s; white-space:nowrap; font-size:13px; box-shadow:var(--shadow); }
.toast.show { opacity:1; transform:translate(-50%,0); }
@keyframes fade { from{opacity:0} }
@keyframes rise { from{transform:translateY(30px);opacity:.5} }
@media (max-width:480px) {
  .field-row { grid-template-columns:1fr; }
  .hero-actions { gap:5px; }
  .hero-actions .icon-btn { width:40px; height:40px; }
}
@media (min-width:720px) {
  body { background:#e8e8e2; }
  .app-shell,.login { background:#f7f5ef; box-shadow:0 0 60px rgba(40,55,50,.08); }
  .app-shell { width:720px; margin:auto; }
  .hero { border-radius:0 0 30px 30px; }
}
@media (min-width:960px) {
  .app-shell { width:min(100%,1180px); }
  .page { width:100%; padding-left:32px; padding-right:32px; }
  .hero { margin-left:-32px; margin-right:-32px; padding-left:32px; padding-right:32px; border-radius:0 0 36px 36px; }
  .trip-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trip-card { min-height:250px; }
  .day-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .day-card { height:100%; margin:0; }
  .category-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .expense-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .todo-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .expense-summary { grid-template-columns:repeat(3,1fr); }
  .bottom-nav { width:min(100%,1180px); }
  .overlay { align-items:center; padding:24px; }
  .sheet { width:min(640px,100%); border-radius:28px; max-height:88vh; }
  .login { width:min(100%,1080px); min-height:min(760px,100vh); padding:52px; display:grid; grid-template-columns:1fr 390px; align-items:center; gap:70px; }
  .login-visual { margin:0; }
  .login .brand { margin-bottom:42px; }
  .passport { margin-top:28px; }
}