@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg: #e3f6fb;
  --surface: #f4fcff;
  --surface2: #c7eefb;
  --border: #ace6fb;
  --accent: #4a9fc4;
  --accent2: #2a8a6e;
  --piggy: #5a7ab8;
  --piggy-bg: #d8eef8;
  --piggy-border: #9bc8fb;
  --text: #1a2e3e;
  --text2: #2e4a62;
  --text3: #6a90aa;
  --tag-bg: #c7eefb;
  --tag-border: #9bc8fb;
  --shadow: 0 2px 8px rgba(172,230,251,0.45);
  --shadow-lg: 0 8px 32px rgba(155,200,251,0.35);
  --radius: 12px;
  --radius-sm: 8px;
}

*{box-sizing:border-box;margin:0;padding:0;}

body {
  font-family:'Noto Sans TC',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  background-image:
    radial-gradient(circle at 18% 18%,rgba(200,68,10,.06) 0%,transparent 50%),
    radial-gradient(circle at 82% 82%,rgba(26,107,74,.05) 0%,transparent 50%);
}

/* ── Header ── */
.header {
  background:var(--surface);
  border-bottom:2px solid var(--border);
  padding:0 24px;
  height:60px;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:var(--shadow);
}
.header-logo{font-family:'DM Mono',monospace;font-size:18px;font-weight:500;color:#4a9fc4;}
.header-sub{font-size:11px;color:var(--text3);margin-top:2px;}
.header-actions{display:flex;gap:8px;margin-left:auto;}
.hamburger-btn{display:none;margin-left:auto;background:none;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 11px;font-size:19px;line-height:1;cursor:pointer;color:var(--text);transition:background .15s;}
.hamburger-btn:hover{background:var(--surface2);}
.hamburger-menu{display:none;position:fixed;top:62px;right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:0 0 0 var(--radius);box-shadow:var(--shadow-lg);z-index:150;min-width:150px;padding:6px 0;}
.hamburger-menu.open{display:block;}

/* ── Scroll-to-top ── */
#add-exp-fab{position:fixed;bottom:calc(66px + env(safe-area-inset-bottom) + 14px);right:16px;width:52px;height:52px;border-radius:16px;background:var(--accent);color:#fff;border:none;font-size:28px;line-height:1;cursor:pointer;box-shadow:var(--shadow-lg);display:none;align-items:center;justify-content:center;z-index:90;-webkit-tap-highlight-color:transparent;}
#add-exp-fab.visible{display:flex;}
#add-exp-fab:hover{background:#3a8ab0;}
#scroll-top-btn{position:fixed;bottom:calc(66px + env(safe-area-inset-bottom) + 14px + 52px + 10px);right:16px;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:20px;line-height:1;cursor:pointer;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none;z-index:90;}
#scroll-top-btn.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
#scroll-top-btn:hover{background:var(--piggy);}
.hmenu-item{display:flex;align-items:center;width:100%;padding:13px 20px;background:none;border:none;border-bottom:1px solid var(--border);text-align:left;font-size:14px;font-family:inherit;color:var(--text);cursor:pointer;gap:8px;}
.hmenu-item:last-child{border-bottom:none;}
.hmenu-item:hover,.hmenu-item:active{background:var(--surface2);}

/* ── Tabs ── */
.tabs {
  display:flex;
  justify-content:center;
  background:var(--surface2);
  border-bottom:2px solid var(--border);
  padding:0 20px;
  overflow-x:auto;
  scrollbar-width:none;
  position:sticky;
  top:60px;
  z-index:99;
}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn {
  padding:13px 18px;
  font-size:13px;
  font-weight:500;
  color:var(--text3);
  cursor:pointer;
  border:none;
  background:none;
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
  transition:all .18s;
  white-space:nowrap;
  font-family:inherit;
  display:flex;
  align-items:center;
  gap:5px;
}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:#4a9fc4;border-bottom-color:#4a9fc4;background:var(--surface);}

/* ── Layout ── */
.content{max-width:980px;margin:0 auto;padding:24px 18px calc(24px + 68px + env(safe-area-inset-bottom));}
.pane{display:none;}
.pane.active{display:block;}

/* ── Module Panes ── */
.module-pane{display:none;}
.module-pane.active{display:block;}

/* ── Bottom Navigation ── */
.bottom-nav {
  position:fixed;bottom:0;left:0;right:0;
  height:calc(58px + env(safe-area-inset-bottom));
  background:var(--surface);
  border-top:2px solid var(--border);
  display:flex;align-items:stretch;
  z-index:100;
  box-shadow:0 -4px 20px rgba(155,200,251,0.28);
  padding-bottom:env(safe-area-inset-bottom);
}
.bnav-btn {
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  background:none;border:none;cursor:pointer;
  color:var(--text3);font-family:inherit;
  transition:color .18s,background .18s;
  padding:8px 4px;position:relative;
}
.bnav-btn:hover{background:var(--surface2);color:var(--text);}
.bnav-btn.active{color:var(--accent);}
.bnav-btn.active::after{
  content:'';position:absolute;top:0;left:18%;right:18%;
  height:3px;background:var(--accent);border-radius:0 0 3px 3px;
}
.bnav-icon{font-size:21px;line-height:1;}
.bnav-label{font-size:10px;font-weight:700;letter-spacing:.3px;}

/* ── Coming Soon Cards ── */
.module-coming-soon {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:64px 24px;gap:16px;
}
.mcs-icon{font-size:56px;line-height:1;}
.mcs-title{font-size:22px;font-weight:700;color:var(--text);}
.mcs-desc{font-size:14px;color:var(--text3);line-height:1.7;}
.mcs-badge{
  display:inline-flex;align-items:center;padding:5px 16px;
  background:var(--surface2);border:1.5px solid var(--border);
  border-radius:50px;font-size:12px;font-weight:700;color:var(--text3);
  letter-spacing:.5px;
}

/* ── Card ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:18px;}
.card-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#4a9fc4;margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.card-title::after{content:'';flex:1;height:1px;background:var(--border);}

/* ── Form ── */
.row{display:grid;gap:12px;margin-bottom:14px;}
.row.c2{grid-template-columns:1fr 1fr;}
.row.c3{grid-template-columns:1fr 1fr 1fr;}
.row.c4{grid-template-columns:repeat(4,1fr);}
.field{display:flex;flex-direction:column;}
label.lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);margin-bottom:5px;display:block;}
input:not([type=checkbox]):not([type=radio]),select,textarea {
  width:100%;padding:9px 13px;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);font-size:16px;font-family:inherit;color:var(--text);
  transition:border-color .18s;-webkit-appearance:none;
}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:none;border-color:#9bc8fb;background:var(--surface);}
input[type=radio]{
  width:16px;height:16px;cursor:pointer;flex-shrink:0;
  appearance:none;-webkit-appearance:none;
  background:var(--surface);border:2px solid var(--accent);border-radius:50%;
  position:relative;transition:border-color .15s;
}
input[type=radio]:checked::after{
  content:'';position:absolute;
  top:2px;left:2px;width:8px;height:8px;
  border-radius:50%;background:var(--accent);
}
input[type=checkbox]{
  width:16px;height:16px;cursor:pointer;flex-shrink:0;
  appearance:none;-webkit-appearance:none;
  background:var(--surface);border:2px solid var(--accent);border-radius:3px;
  position:relative;transition:background .15s,border-color .15s;
}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent);}
input[type=checkbox]:checked::after{
  content:'';position:absolute;left:3px;top:0px;
  width:5px;height:8px;
  border:2px solid #fff;border-top:none;border-left:none;
  transform:rotate(45deg);
}
.inline-add{display:flex;gap:10px;align-items:flex-end;}
.inline-add .field{flex:1;}

/* ── Buttons ── */
.btn{padding:9px 18px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(200,68,10,.28);}
.btn-primary:hover{background:#3a8ab0;transform:translateY(-1px);}
.btn-success{background:#4a9fc4;color:#fff;box-shadow:0 2px 8px rgba(155,200,251,.5);}
.btn-success:hover{background:#3a8ab0;transform:translateY(-1px);}
.btn-secondary{background:#c7eefb;color:#2e4a62;border:1.5px solid #9bc8fb;}
.btn-secondary:hover{background:#ace6fb;}
.btn-sm{padding:5px 10px;font-size:12px;}
.btn-danger{background:transparent;color:#c0392b;border:1.5px solid #e8b0aa;padding:5px 10px;font-size:12px;}
.btn-danger:hover{background:#fde8e8;}

/* ── Section header ── */
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;min-height:37px;}
.sec-title{font-size:17px;font-weight:700;}

/* ── Table ── */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;font-size:13px;}
thead tr{background:#c7eefb;border-bottom:2px solid #9bc8fb;}
thead th{padding:10px 12px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#4a9fc4;white-space:nowrap;}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
tbody tr:last-child{border-bottom:none;}
tbody tr:hover{background:var(--bg);}
tbody td{padding:11px 12px;vertical-align:middle;}
.empty-tr td{text-align:center;color:var(--text3);padding:28px;font-style:italic;}
.num{font-family:'DM Mono',monospace;}

/* ── Chips / Pills ── */
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;background:var(--surface);border:1.5px solid var(--border);border-radius:50px;font-size:13px;font-weight:500;}
.chip .x{cursor:pointer;color:var(--text3);font-size:15px;border:none;background:none;line-height:1;padding:0;transition:color .15s;}
.chip .x:hover{color:var(--accent);}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
.badge-cash{background:#c7eefb;color:#2a7a9a;border:1px solid #9bc8fb;}
.badge-card{background:#d8eef8;color:#3a6a9a;border:1px solid #9bc8fb;}
.badge-ic{background:#ddf4fb;color:#2a6a8a;border:1px solid #ace6fb;}
.badge-shared{background:#c7eefb;color:#3a7aaa;border:1px solid #9bc8fb;}
.badge-piggy{background:#d8eef8;color:#4a6aaa;border:1px solid #9bc8fb;}
.badge-custom{background:#c7eefb;color:#2e4a62;border:1px solid #ace6fb;}
.badge-personal{background:#c7eefb;color:#2a6a8a;border:1px solid #9bc8fb;}
.sub-text{font-size:11px;color:var(--text3);margin-top:2px;}

/* ── Custom Select ── */
.cs-wrap{position:relative;}
.cs-trigger{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;font-size:14px;color:var(--text);transition:border-color .15s;user-select:none;}
.cs-trigger:hover{border-color:#9bc8fb;}
.cs-wrap.open .cs-trigger{border-color:#4a9fc4;border-bottom-left-radius:0;border-bottom-right-radius:0;}
.cs-arrow{font-size:16px;color:var(--text2);transition:transform .2s;flex-shrink:0;line-height:1;}
.cs-wrap.open .cs-arrow{transform:rotate(180deg);}
.cs-dropdown{display:none;position:absolute;z-index:300;left:0;right:0;background:var(--surface);border:1.5px solid #4a9fc4;border-top:none;border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);box-shadow:0 6px 20px rgba(74,159,196,.18);max-height:260px;overflow-y:auto;}
.cs-wrap.open .cs-dropdown{display:block;}
.cs-group{padding:5px 12px 3px;font-size:10px;font-weight:700;color:var(--text3);letter-spacing:.8px;text-transform:uppercase;background:var(--surface2);border-top:1px solid var(--border);}
.cs-option{padding:9px 16px;font-size:13px;cursor:pointer;}
.cs-option:hover{background:#e8f4fb;}
.cs-option.cs-active{background:var(--accent);color:#fff;font-weight:600;}

/* ── Currency Picker ── */
.cp-wrap{position:relative;}
.cp-wrap.cp-open .cs-trigger{border-color:#4a9fc4;border-bottom-left-radius:0;border-bottom-right-radius:0;}
.cp-wrap.cp-open .cs-arrow{transform:rotate(180deg);}
.cp-dropdown{display:none;position:absolute;z-index:300;left:0;right:0;background:var(--surface);border:1.5px solid #4a9fc4;border-top:none;border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm);box-shadow:0 6px 20px rgba(74,159,196,.18);}
.cp-wrap.cp-open .cp-dropdown{display:block;}
.cp-search{display:block;width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--border);font-size:13px;background:var(--surface2);outline:none;box-sizing:border-box;font-family:inherit;}
.cp-list{max-height:210px;overflow-y:auto;}
.cp-option{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;font-size:13px;cursor:pointer;gap:8px;}
.cp-option:hover{background:#e8f4fb;}
.cp-option.cp-active{background:var(--accent);color:#fff;}
.cp-option.cp-active .cp-tag{color:rgba(255,255,255,.8);}
.cp-name{font-weight:500;}
.cp-tag{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;white-space:nowrap;}
.cp-empty{padding:10px 14px;font-size:13px;color:var(--text3);}

/* ── FX progress ── */
.fx-bar{flex:1;height:6px;background:var(--surface2);border-radius:3px;overflow:hidden;min-width:50px;}
.fx-fill{height:100%;background:#9bc8fb;border-radius:3px;transition:width .3s;}
.fx-badge{display:inline-flex;align-items:center;padding:2px 7px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;font-family:'DM Mono',monospace;font-size:12px;color:var(--text2);}

/* ── Toggle checkboxes ── */
.toggle-grid,.tog-group{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.seg-ctrl{display:flex;border:1.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;width:100%;}
.seg-opt{display:none;}
.seg-lbl{flex:1;text-align:center;padding:9px 6px;font-size:13px;font-weight:500;cursor:pointer;color:var(--text3);background:var(--surface2);border-right:1px solid var(--border);transition:background .15s,color .15s;user-select:none;line-height:1.3;}
.seg-lbl:last-child{border-right:none;}
.seg-opt:checked + .seg-lbl{background:var(--accent);color:#fff;font-weight:700;}
.tog-cb{display:none;}
.tog-lbl{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;background:var(--surface2);border:1.5px solid var(--border);border-radius:50px;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;user-select:none;color:var(--text3);}
.tog-cb.shared:checked + .tog-lbl{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}
.tog-cb.shared:checked + .tog-lbl::before{font-family:"Font Awesome 6 Free";font-weight:900;content:'\f00c\00a0';}
.tog-cb.piggy:checked  + .tog-lbl{background:#d8eef8;border-color:#9bc8fb;color:#4a6aaa;}

/* ── Summary grid ── */
.sum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;}
.sum-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;text-align:center;}
.sum-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:7px;}
.sum-val{font-family:'DM Mono',monospace;font-size:21px;font-weight:500;}
.sum-sub{font-size:11px;color:var(--text3);margin-top:3px;}

/* ── Settlement ── */
.settle-section{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#4a9fc4;margin:18px 0 10px;padding-bottom:7px;border-bottom:1px solid #ace6fb;}
.settle-item{display:flex;flex-direction:column;align-items:stretch;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;gap:6px;}
.settle-line1{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:4px 12px;}
.settle-line1 .settle-arrow{flex:1;min-width:0;}
.settle-line1 .settle-amt{flex-shrink:0;}
.settle-line2{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:2px;}
.settle-line2>button{margin-left:auto;}
.toggle-row{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:4px 0;border-radius:6px;transition:background .15s;-webkit-tap-highlight-color:transparent;user-select:none;}
.toggle-row:hover{background:var(--surface2);}
@media (hover: none) { .toggle-row:hover { background: transparent; } }
.breakdown[onclick]{-webkit-tap-highlight-color:transparent;}
.toggle-ind{font-size:11px;font-weight:700;color:var(--text3);white-space:nowrap;flex-shrink:0;padding:0 2px;}
.settle-bank{font-size:12px;color:var(--text3);font-family:'DM Mono',monospace;padding-left:2px;}
.settle-pay-methods{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:2px;}
.pm-tag{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;background:var(--surface2);border:1px solid var(--border);color:var(--text2);}
.pay-method-checks{display:flex;gap:16px;flex-wrap:wrap;padding:4px 0;}
.pm-check{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;user-select:none;}
.pm-check input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);}
.settle-item.piggy-item{border-left:3px solid #9bc8fb;}
.settle-item.settled{opacity:0.55;background:var(--surface2);}
.settle-rec-list{display:flex;flex-direction:column;gap:3px;border-left:2px solid var(--border);padding-left:10px;margin:4px 0;}
.settle-rec-row{display:flex;align-items:center;gap:8px;font-size:12px;}
.settle-rec-date{color:var(--text3);flex-shrink:0;min-width:82px;}
.settle-rec-amt{flex:1;font-weight:600;color:#2a8a6e;}
.settle-rec-row .btn{padding:2px 7px;font-size:11px;flex-shrink:0;}
.settle-rec-summary{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--text2);border-top:1px dashed var(--border);padding-top:8px;margin-top:4px;}
.settle-done{color:#2a8a6e;font-weight:700;}
.settle-fully-done{display:flex;align-items:center;gap:6px;color:#2a8a6e;font-size:12px;font-weight:600;background:#e8f8f0;border-radius:var(--radius-sm);padding:6px 10px;margin:2px 0;}
#exp-table.domestic .col-rate,
#exp-table.domestic .col-home-cur{display:none;}
.settle-from{font-weight:700;color:#4a9fc4;font-size:14px;}
.settle-to{font-weight:700;color:#2a8a6e;font-size:14px;}
.settle-arrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:13px;color:var(--text3);}
.settle-amt{text-align:right;}
.settle-jpy{font-family:'DM Mono',monospace;font-size:17px;font-weight:500;}
.settle-twd{font-size:12px;color:var(--text3);margin-top:2px;}

/* ── Person breakdown ── */
.breakdown{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px;margin-bottom:13px;}
.breakdown-name{font-weight:700;font-size:14px;margin-bottom:10px;}
.brow{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--text2);}
.brow.total{border-top:1px solid #ace6fb;margin-top:7px;padding-top:7px;font-weight:700;color:#1a3a5e;font-size:14px;}

/* ── Hint ── */
.hint{font-size:12px;color:var(--text3);display:flex;align-items:flex-start;gap:5px;margin-top:7px;}
.preview-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;text-align:center;margin:10px 0;}
.preview-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px;}
.preview-val{font-family:'DM Mono',monospace;font-size:20px;font-weight:500;}

/* ── Modal ── */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:200;align-items:center;justify-content:center;padding:18px;}
.overlay.open{display:flex;}
.modal{background:var(--surface);border-radius:var(--radius);padding:26px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);}
.modal-hdr{font-size:15px;font-weight:700;margin-bottom:18px;display:flex;justify-content:space-between;align-items:center;}
.modal-x{cursor:pointer;color:var(--text3);font-size:0;border:none;background:none;line-height:1;}
.modal-x::before{font-family:"Font Awesome 6 Free";font-weight:900;content:'\f00d';font-size:18px;}
.modal-x:hover{color:var(--text);}
.modal-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;}
.settings-section-title{font-size:12px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;}
.settings-divider{border-top:1.5px solid var(--border);margin:18px 0;}
.divider{height:1px;background:var(--border);margin:16px 0;}

/* ── Luggage Module ── */
.luggage-prog{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.luggage-prog-bar{flex:1;height:8px;background:var(--surface2);border-radius:4px;overflow:hidden;}
.luggage-prog-fill{height:100%;background:var(--accent);border-radius:4px;transition:width .35s;}
.luggage-prog-txt{font-family:'DM Mono',monospace;font-size:12px;color:var(--text3);white-space:nowrap;}

.packing-cat-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.cat-filter-btn{padding:4px 13px;border-radius:50px;font-size:12px;font-weight:600;border:1.5px solid var(--border);background:var(--surface2);color:var(--text3);cursor:pointer;font-family:inherit;transition:all .15s;}
.cat-filter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.cat-filter-btn:hover:not(.active){background:var(--border);}

.check-item{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--border);}
.check-item:last-child{border-bottom:none;}
.check-item.done .check-item-text{text-decoration:line-through;color:var(--text3);}
.check-circle{width:22px;height:22px;flex-shrink:0;border-radius:50%;border:2px solid var(--border);background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;transition:all .15s;font-family:inherit;}
.check-circle.checked{background:var(--accent);border-color:var(--accent);}
.check-item-text{flex:1;font-size:14px;min-width:0;word-break:break-all;}
.cat-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:20px;background:var(--tag-bg);border:1px solid var(--tag-border);font-size:11px;font-weight:600;color:var(--text2);white-space:nowrap;flex-shrink:0;}
.check-item-action{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--text3);font-size:13px;line-height:1;padding:3px 5px;border-radius:4px;transition:all .15s;font-family:inherit;}
.check-item-action:hover{background:var(--surface2);color:var(--text);}
.check-item-action.del:hover{color:#c0392b;}

/* ── Info Module ── */
.info-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;}
.info-item:last-child{margin-bottom:0;}
.info-item-hdr{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.info-cat-tag{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:20px;background:var(--tag-bg);border:1px solid var(--tag-border);font-size:11px;font-weight:600;color:var(--text2);white-space:nowrap;flex-shrink:0;}
.info-item-title{font-weight:600;font-size:14px;color:var(--text);}
.info-item-content{font-size:13px;color:var(--text2);white-space:pre-wrap;line-height:1.6;margin-bottom:8px;word-break:break-all;}
.info-item-actions{display:flex;gap:6px;justify-content:flex-end;}

.memo-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:10px;}
.memo-item:last-child{margin-bottom:0;}
.memo-item-title{font-weight:600;font-size:14px;color:var(--text);margin-bottom:5px;}
.memo-item-content{font-size:13px;color:var(--text2);white-space:pre-wrap;line-height:1.6;margin-bottom:8px;word-break:break-all;}

/* mob-sum 桌面隱藏，手機才顯示 */
.mob-sum { display: none; }

/* ── Expense item cell ── */
.exp-item-cell { max-width: 200px; }
.exp-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Expense note ── */
.exp-note-text {
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
  white-space: pre-wrap;
  word-break: break-word;
}
.mob-note {
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Auth / Trips overlays ── */
.auth-spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.trip-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:box-shadow .15s,border-color .15s;-webkit-tap-highlight-color:transparent;}
.trip-card:hover,.trip-card:active{border-color:var(--accent);box-shadow:var(--shadow);}
.trip-card-main{flex:1;min-width:0;}
.trip-card-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:4px;}
.trip-card-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--text3);}
.trip-card-badge{display:inline-block;padding:1px 7px;border-radius:20px;background:var(--surface2);border:1px solid var(--border);font-size:11px;color:var(--accent);font-weight:600;}
.trip-card-arrow{color:var(--border);font-size:14px;flex-shrink:0;cursor:pointer;}
.trip-card-del{flex-shrink:0;border:1.5px solid var(--border);background:var(--surface2);color:var(--text3);font-size:12px;padding:5px 9px;cursor:pointer;border-radius:8px;transition:all .15s;font-family:inherit;line-height:1;}
.trip-card-del:hover{border-color:#e8b0aa;background:#fde8e8;color:#c0392b;}
.trip-card-leave{flex-shrink:0;border:1.5px solid var(--border);background:var(--surface2);color:var(--text3);font-size:12px;padding:5px 9px;cursor:pointer;border-radius:8px;transition:all .15s;font-family:inherit;line-height:1;}
.trip-card-leave:hover{border-color:#f5c87a;background:#fef9ec;color:#e67e22;}
.trips-empty{text-align:center;padding:40px 20px;color:var(--text3);font-size:13px;line-height:1.7;}

/* ── Toast notification ── */
#app-toast {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 22px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  z-index: 310;
  max-width: min(380px, calc(100vw - 32px));
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
  white-space: pre-line;
}
#app-toast.toast-show    { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#app-toast.toast-err     { border-color: #e8b0aa; color: #c0392b; background: #fdf7f6; }
#app-toast.toast-ok      { border-color: #9bc8fb; color: #2a8a6e; }
#app-toast.toast-loading { border-color: var(--accent); color: var(--accent); animation: toast-pulse 1.2s ease-in-out infinite; }
@keyframes toast-pulse { 0%,100% { opacity:.9; } 50% { opacity:.5; } }

/* ── Shared split rows ── */
#shared-members {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
}
.shared-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
}
.shared-row-check {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
}
.shared-row-check .tog-lbl {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-amt-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.share-input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0 7px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  transition: border-color .15s;
}
.share-input:focus { border-color: var(--accent); outline: none; background: #fff; }
.share-input::placeholder { font-size: 12px; }
.share-sym { font-size: 11px; color: var(--text3); flex-shrink: 0; }
.share-hint-ok      { color: #2a8a6e; font-size: 12px; }
.share-hint-err     { color: #c0392b; font-size: 12px; font-weight: 600; }
.share-hint-neutral { color: var(--text3); font-size: 12px; }
@media (max-width: 360px) { #shared-members { grid-template-columns: 1fr; } }

/* ── Category ── */
.cat-grid { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.cat-btn {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.cat-btn:hover { background: var(--surface2); border-color: var(--accent); }
.cat-btn.active { color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.cat-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 6px;
  color: #fff;
  margin-left: 5px;
  vertical-align: middle;
  letter-spacing: .02em;
}
/* Category chart */
.cat-chart-wrap {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 0;
}
.cat-pie-chart {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  position: relative;
}
.cat-pie-chart::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52%; height: 52%;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.08) inset;
}
.cat-legend { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 10px; }
.cat-legend-row {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 1px;
}
.cat-legend-dot {
  grid-column: 1; grid-row: 1 / 3;
  width: 11px; height: 11px;
  border-radius: 3px;
  align-self: center;
}
.cat-legend-name { grid-column: 2 / 4; grid-row: 1; font-size: 13px; line-height: 1.4; }
.cat-legend-pct  { grid-column: 2;     grid-row: 2; font-size: 11px; color: var(--text3); }
.cat-legend-amt  { grid-column: 3;     grid-row: 2; font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500; text-align: right; }

/* ── Settlement stats ── */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.stats-sub-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
}
.stat-bar-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  font-size: 13px;
}
.stat-bar-label {
  min-width: 36px;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;
  color: var(--text);
  flex-shrink: 0;
}
.stat-bar-track {
  flex: 1;
  height: 16px;
  background: var(--surface2);
  border-radius: 8px;
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  border-radius: 8px;
  animation: bar-grow .55s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes bar-grow { from { width: 0; } to { width: var(--bw); } }
.stat-bar-value {
  min-width: 62px;
  text-align: right;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--text2);
  flex-shrink: 0;
}

/* ── Daily expense header ── */
.exp-date-hdr { cursor: pointer; }
.exp-date-hdr td {
  background: var(--surface2);
  padding: 6px 12px !important;
  font-size: 12px;
  color: var(--text2);
  border-bottom: 1.5px solid var(--border);
  user-select: none;
}
.exp-date-hdr:hover td { background: var(--surface3, #e8eef4); }
.exp-date-lbl { font-weight: 700; color: var(--accent); letter-spacing: .01em; }
.exp-day-count { color: var(--text3); font-size: 11px; margin-left: 8px; }
.exp-date-total {
  float: right;
  font-family: 'DM Mono', monospace;
  font-weight: 500;
  font-size: 12px;
  color: var(--text2);
}
.exp-day-tog { font-family: inherit; font-weight: 400; font-size: 11px; color: var(--text3); margin-left: 8px; }

/* ── Calculator ── */
.calc-open-btn {
  flex-shrink: 0;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 12px;
  font-size: 18px;
  cursor: pointer;
  color: var(--accent);
  transition: background .15s;
  line-height: 1;
  font-family: inherit;
}
.calc-open-btn:hover { background: #ace6fb; }
.calc-display-wrap {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px 8px;
  text-align: right;
  margin-bottom: 12px;
  min-height: 66px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  overflow: hidden;
}
.calc-display-expr {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  min-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calc-display-cur {
  font-family: 'DM Mono', monospace;
  font-size: 28px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}
.calc-btn {
  border: none;
  border-radius: var(--radius-sm);
  height: 52px;
  font-size: 18px;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  cursor: pointer;
  transition: transform .1s, background .12s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.calc-btn:active { transform: scale(.89); }
.calc-num {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid rgba(172,230,251,.6);
  font-family: 'DM Mono', monospace;
}
.calc-num:hover { background: #b5e8f8; }
.calc-op {
  background: rgba(74,159,196,.13);
  color: var(--accent);
  border: 1.5px solid rgba(74,159,196,.3);
  font-size: 20px;
  font-family: 'Noto Sans TC', sans-serif;
}
.calc-op:hover { background: rgba(74,159,196,.23); }
.calc-fn {
  background: var(--surface);
  color: var(--text2);
  border: 1.5px solid var(--border);
  font-size: 13px;
  font-family: 'Noto Sans TC', sans-serif;
  letter-spacing: .03em;
}
.calc-fn:hover { background: var(--surface2); }
.calc-span2 { grid-column: span 2; }
.calc-confirm {
  background: linear-gradient(145deg, #4a9fc4, #3387a8);
  color: #fff;
  border: none;
  font-size: 22px;
  font-family: 'Noto Sans TC', sans-serif;
  box-shadow: 0 3px 10px rgba(74,159,196,.45);
  transition: transform .1s, box-shadow .12s, background .18s, color .18s, border .18s;
}
.calc-confirm:hover { box-shadow: 0 4px 14px rgba(74,159,196,.6); }
.calc-eq {
  background: rgba(74,159,196,.18);
  color: var(--accent);
  border: 2px solid rgba(74,159,196,.45);
  font-size: 22px;
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  box-shadow: none;
}
.calc-eq:hover { background: rgba(74,159,196,.3); }

/* ── Responsive ── */
@media (max-width:640px) {
  /* Layout */
  .content { padding: 12px 10px calc(24px + 68px + env(safe-area-inset-bottom)); }
  .card { padding: 14px 12px; }
  .header { padding: 0 14px; }
  .header-actions { display: none; }
  .hamburger-btn { display: flex; align-items: center; }
  .sec-hdr { flex-wrap: wrap; gap: 8px; }

  /* Tabs */
  .tabs { padding: 0 4px; }
  .tab-btn { padding: 11px 9px; font-size: 12px; gap: 3px; }

  /* Form rows → single column */
  .row.c2, .row.c3, .row.c4 { grid-template-columns: 1fr; }

  /* Summary cards → 2 columns */
  .sum-grid { grid-template-columns: 1fr 1fr; }
  .sum-val { font-size: 17px; }

  /* Settlement */

  /* Modal → centered */
  .overlay { padding: 12px; align-items: center; }
  .modal {
    max-width: 100%;
    max-height: 88vh;
    border-radius: var(--radius);
    padding: 20px 14px 24px;
  }

  /* Tables → collapsible cards */
  .tbl-wrap { border: none; overflow: visible; border-radius: 0; background: transparent; }
  .tbl-wrap table { display: block; }
  .tbl-wrap thead { display: none; }
  .tbl-wrap tbody { display: flex; flex-direction: column; gap: 10px; }
  .tbl-wrap tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }
  .tbl-wrap tbody td {
    background: var(--surface);
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    font-size: 13px;
    min-width: 0;
    vertical-align: unset;
  }
  .tbl-wrap tbody td::before {
    content: attr(data-label);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text3);
    margin-bottom: 3px;
  }

  /* mob-sum：摘要列，全寬顯示 */
  .mob-sum {
    display: block;
    grid-column: 1 / -1;
    padding: 0;
    background: var(--surface);
  }
  .mob-sum::before { display: none; }
  .mob-sum {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .mob-sum-inner {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
  }
  .mob-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }
  .mob-date { font-size: 12px; color: var(--text3); }
  .mob-buyer { font-size: 13px; font-weight: 600; color: var(--text); flex-shrink: 0; }
  .mob-item { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; overflow: hidden; text-align: right; }
  .mob-item-name { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .mob-toggle-ind {
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* mob-detail：預設隱藏 */
  .mob-detail { display: none !important; }

  /* 展開後：顯示 mob-detail，mob-sum 背景加深做視覺區隔 */
  .mob-expanded .mob-sum { background: var(--bg); }
  .mob-expanded .mob-detail { display: flex !important; }

  /* 操作格（最後一個 mob-detail）橫跨全寬 */
  .tbl-wrap tbody td.mob-detail:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg);
  }
  .tbl-wrap tbody td.mob-detail:last-child::before { display: none; }

  /* 空白列 */
  .tbl-wrap .empty-tr { display: block !important; gap: 0; background: var(--surface); }
  .tbl-wrap .empty-tr td { display: block !important; background: var(--surface); border: none; text-align: center; padding: 24px; }
  .tbl-wrap .empty-tr td::before { display: none; }

  /* Stats grid → single column */
  .stats-grid { grid-template-columns: 1fr; gap: 20px; }

  /* 每日小計列 */
  .tbl-wrap tbody tr.exp-date-hdr {
    display: flex !important;
    gap: 0 !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
    border: 1.5px solid var(--border) !important;
    box-shadow: none !important;
  }
  .tbl-wrap tbody tr.exp-date-hdr td {
    display: flex !important;
    flex-direction: row !important;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    background: var(--surface2) !important;
    padding: 8px 13px !important;
    width: 100%;
    border: none !important;
  }
  .tbl-wrap tbody tr.exp-date-hdr td::before { display: none !important; }
  .exp-date-total { float: none; }
  .exp-day-count { margin-left: 6px; }
}