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

/* Base tokens — 所有主題相關變數定義在 theme.css */
:root {
  --r: 12px;
}

/* ── Login ── */
#login-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px;
}
.login-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 48px 40px;
  text-align: center; max-width: 380px; width: 100%;
}
.login-logo { font-size: 3rem; margin-bottom: 12px; }
.login-card h1 { font-size: 1.6rem; color: var(--accent-light); margin-bottom: 8px; }
.login-card p { color: var(--muted); margin-bottom: 32px; line-height: 1.6; }
.btn-google {
  background: var(--accent); color: var(--accent-fg); border: none;
  padding: 13px 24px; border-radius: 8px; font-size: 0.95rem;
  cursor: pointer; width: 100%; transition: background .2s; font-weight: 600;
}
.btn-google:hover { background: var(--accent-light); }
#login-error { margin-top: 14px; font-size: 0.8rem; color: var(--red); min-height: 16px; }

/* ── Header ── */
#app-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 56px;
  background: var(--card); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
#app-header h1 { font-size: 1rem; color: var(--accent-light); white-space: nowrap; }
.tab-nav { display: flex; gap: 4px; background: var(--bg); border-radius: 8px; padding: 3px; }
.tab-btn {
  background: none; border: none; color: var(--muted);
  padding: 5px 16px; border-radius: 6px; cursor: pointer;
  font-size: 0.875rem; transition: all .2s;
}
.tab-btn.active { background: var(--accent); color: var(--accent-fg); }
.tab-short { display: none; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.rate-badge {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px; font-size: 0.78rem; color: var(--muted);
  display: flex; align-items: center; gap: 4px;
}
.rate-badge b { color: var(--text); }
.update-badge {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px; font-size: 0.75rem;
  color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap;
}
.update-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--muted);
}
.update-dot.ok  { background: var(--green); }
.update-dot.err { background: var(--red); }
.update-dot.spin {
  background: var(--accent);
  animation: pulse-dot 1s infinite;
}
.btn-signout {
  background: none; border: 1px solid var(--border);
  color: var(--muted); padding: 4px 12px; border-radius: 6px;
  cursor: pointer; font-size: 0.8rem; transition: all .2s;
}
.btn-signout:hover { border-color: var(--red); color: var(--red); }
.build-badge {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 3px 10px; font-size: 0.75rem; color: var(--muted);
  white-space: nowrap;
}
.btn-theme {
  background: none; border: 1px solid var(--border);
  color: var(--muted); padding: 4px 10px; border-radius: 6px;
  cursor: pointer; font-size: 1rem; line-height: 1; transition: all .2s;
}
.btn-theme:hover { border-color: var(--accent); color: var(--accent); }

/* ── Mobile-only elements (hidden on desktop) ── */
.mobile-menu-btn { display: none; }
.mobile-footer { display: none; }
.mobile-menu-overlay { display: none; }

/* ── Button loading state ── */
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-loading { position: relative; pointer-events: none; opacity: .85; }
.btn-loading::before {
  content: '';
  display: inline-block; width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: btn-spin .6s linear infinite;
  margin-right: 6px; vertical-align: middle;
}

/* ── Content ── */
#app-content { padding: 20px; max-width: 1440px; margin: 0 auto; }

/* ── Info Bar (匯率 + 更新時間) ── */
.info-bar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.info-bar .rate-badge,
.info-bar .update-badge {
  font-size: 0.8rem;
}

/* ── KPI Grid ── */
.kpi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-bottom: 20px;
}
.kpi-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 20px;
}
.kpi-primary {
  background: var(--card2);
  border-left: 3px solid var(--accent);
}
.kpi-label {
  color: var(--muted); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.kpi-label-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.kpi-primary .kpi-value { font-size: 2rem; }
.kpi-sub { font-size: 0.75rem; color: var(--muted); margin-top: 5px; }
.kpi-value.pos { color: var(--green); }
.kpi-value.neg { color: var(--red); }
.kpi-value.neutral { color: var(--text-secondary); }
.kpi-card.kpi-gain { border-left: 3px solid var(--green); }
.kpi-card.kpi-loss { border-left: 3px solid var(--red); }

/* ── Chart Grid ── */
.charts-row { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; margin-bottom: 16px; }
.chart-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 20px;
}
.chart-card h3 { font-size: 0.88rem; color: var(--muted); font-weight: 500; margin-bottom: 14px; }
.chart-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chart-title-row h3 { margin-bottom: 0; }
.daily-gain-badge { display: flex; align-items: center; gap: 6px; }
.daily-gain-label { font-size: 0.72rem; color: var(--muted); }
.daily-gain-val { font-size: 0.88rem; font-weight: 700; }
.daily-gain-val.pos { color: var(--green); }
.daily-gain-val.neg { color: var(--red); }
.chart-filter { display: flex; gap: 6px; margin-bottom: 12px; }
.filter-btn {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 0.78rem; transition: all .2s;
}
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.no-data-msg {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--muted); font-size: 0.85rem;
}
.chart-nodata {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center;
}
.btn-goto {
  background: var(--accent); color: var(--accent-fg); border: none;
  padding: 9px 22px; border-radius: 6px; cursor: pointer;
  font-size: 0.88rem; transition: background .2s;
}
.btn-goto:hover { background: var(--accent-light); }

/* ── Management Grid ── */
.mgmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.section-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 20px;
}
.section-card h3 {
  font-size: 0.95rem; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* ── Accordion ── */
h3.section-header {
  cursor: pointer; user-select: none;
  transition: margin-bottom 0.3s ease;
}
.section-card.collapsed h3.section-header { margin-bottom: 0; }
.section-chevron {
  font-size: 0.85rem; color: var(--muted); flex-shrink: 0;
  display: inline-block; transition: transform 0.3s ease;
}
.section-card.collapsed .section-chevron { transform: rotate(-90deg); }
.section-body {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}
.section-card.collapsed .section-body { max-height: 0; }
.section-header-right {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end;
}
.section-total {
  font-size: 0.95rem; font-weight: 700;
  color: var(--accent-light); white-space: nowrap;
}
.section-gain {
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
}
.section-gain.pos { color: var(--green); }
.section-gain.neg { color: var(--red); }
.section-gain.neutral { color: var(--text-secondary); }
.badge {
  background: var(--accent); color: var(--accent-fg);
  border-radius: 10px; padding: 1px 7px; font-size: 0.72rem;
}

/* ── Data Tables ── */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.data-table th {
  text-align: left; color: var(--muted); font-weight: 500;
  padding: 5px 8px; border-bottom: 1px solid var(--border);
}
.data-table td { padding: 7px 8px; border-bottom: 1px solid rgba(45,49,85,.5); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table .amt { text-align: right; font-weight: 600; }
.data-table .sub-price { color: var(--muted); font-size: 0.75rem; margin-top: 1px; }
.price-err { font-size: 0.68rem; color: var(--red); background: rgba(239,68,68,.1); border-radius: 3px; padding: 1px 4px; margin-left: 4px; }
.sym-tag {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

.btn-icon {
  background: none; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: 4px; font-size: 0.8rem; transition: background .2s;
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon.edit { color: var(--accent-light); }
.btn-icon.edit:hover { background: rgba(99,102,241,.1); }
.btn-icon.copy:hover { background: rgba(59,130,246,.12); }
.btn-icon.del { color: var(--red); }
.btn-icon.del:hover { background: rgba(239,68,68,.1); }

.btn-add {
  background: rgba(99,102,241,.08); border: 1px dashed var(--accent);
  color: var(--accent-light); padding: 6px 0; border-radius: 6px;
  cursor: pointer; font-size: 0.83rem; width: 100%; margin-top: 10px; transition: background .2s;
}
.btn-add:hover { background: rgba(99,102,241,.16); }

.section-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.total-lbl { color: var(--muted); font-size: 0.82rem; }
.total-val { font-weight: 700; color: var(--accent-light); font-size: 0.95rem; }

/* ── Other Assets ── */
.other-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 18px 20px; margin-bottom: 16px;
}
.other-card h3 { font-size: 0.95rem; margin-bottom: 14px; }

/* ── Other Item Cards ── */
.other-item-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer; transition: background .15s;
}
.other-item-card:hover { background: var(--border); }
.other-item-icon { font-size: 1.4rem; flex-shrink: 0; width: 36px; text-align: center; line-height: 1; }
.other-item-info { flex: 1; min-width: 0; }
.other-item-label { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.other-item-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.other-item-value {
  font-size: 1.1rem; font-weight: 700; color: var(--text);
  flex-shrink: 0; text-align: right;
}
.other-item-value.neg { color: var(--red); }

/* ── Snapshot Section ── */
.snapshot-bar {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 24px;
}
.snap-last {
  font-size: 0.78rem; color: var(--muted);
}
.btn-snapshot {
  background: var(--accent); color: var(--accent-fg); border: none;
  padding: 13px 40px; border-radius: 8px; font-size: 0.95rem;
  cursor: pointer; font-weight: 600; transition: background .2s;
}
.btn-snapshot:hover { background: var(--accent-light); }

/* ── Last Updated Bar ── */
.price-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; font-size: 0.78rem; color: var(--muted);
}
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.ok { background: var(--green); }
.dot.err { background: var(--red); }
.dot.spin {
  background: var(--accent);
  animation: pulse-dot 1s infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.2} }

/* ── Modal ── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.72); z-index: 900;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 28px; width: 92%; max-width: 400px;
  animation: slide-up .2s ease;
}
@keyframes slide-up { from{transform:translateY(12px);opacity:0} to{transform:none;opacity:1} }
.modal-title { font-size: 1rem; font-weight: 600; margin-bottom: 20px; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-form .field { display: flex; flex-direction: column; gap: 5px; }
.modal-form label { font-size: 0.8rem; color: var(--muted); }
.modal-form input {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); padding: 9px 12px; border-radius: 6px; font-size: 0.9rem;
}
.modal-form input:focus { outline: none; border-color: var(--accent); }
.modal-form input.invalid { border-color: var(--red); }
.modal-form input[readonly] { color: var(--muted); cursor: default; }
.modal-form select {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); padding: 9px 12px; border-radius: 6px; font-size: 0.9rem;
}
.modal-form select:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.btn-cancel {
  background: none; border: 1px solid var(--border); color: var(--muted);
  padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 0.88rem;
}
.btn-ok {
  background: var(--accent); border: none; color: var(--accent-fg);
  padding: 8px 20px; border-radius: 6px; cursor: pointer;
  font-size: 0.88rem; font-weight: 600; transition: background .2s;
}
.btn-ok:hover:not(:disabled) { background: var(--accent-light); }
.btn-ok:disabled { opacity: .55; cursor: default; }

/* ── Toast ── */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  background: var(--card2); border: 1px solid var(--border);
  color: var(--text); padding: 11px 20px; border-radius: 8px;
  font-size: 0.88rem; opacity: 0; transform: translateY(8px);
  transition: all .25s; pointer-events: none; max-width: 320px;
}
.toast.show { opacity: 1; transform: none; }
.toast.ok { border-color: var(--green); }
.toast.err { border-color: var(--red); }

/* ── Skeleton ── */
.skel {
  background: linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: skel-anim 1.5s infinite;
  border-radius: 4px;
  color: transparent !important;
  pointer-events: none;
}
@keyframes skel-anim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel * { visibility: hidden; }

/* Theme tokens 已搬到 theme.css（所有 [data-theme=*] 區塊移除） */

/* ── Sidebar (base — hidden on mobile) ── */
#sidebar { display: none; }
.sidebar-header {
  padding: 20px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.05rem; font-weight: 700; color: var(--accent-light);
}
.sidebar-logo-text { font-size: 0.92rem; }
.sidebar-nav {
  padding: 10px 8px; flex: 1; overflow-y: auto;
}
.sidebar-nav-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; margin-bottom: 2px;
  border-radius: 8px; background: none; border: none;
  color: var(--muted); cursor: pointer;
  font-size: 0.85rem; transition: background .15s, color .15s;
  text-align: left;
}
.sidebar-nav-item:hover { background: var(--card2); color: var(--text); }
.sidebar-nav-item.active {
  background: rgba(99,102,241,.14); color: var(--accent-light); font-weight: 600;
}
.snav-icon { font-size: 1.1rem; flex-shrink: 0; }
.sidebar-spacer { flex: 1; }
.sidebar-footer {
  padding: 12px 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sidebar-info-row { display: flex; flex-direction: column; gap: 6px; }
.sidebar-rate, .sidebar-update { font-size: 0.75rem; }
.sidebar-actions { display: flex; gap: 8px; }
.sidebar-build-badge { font-size: 0.68rem; color: var(--muted); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Overview two-column layout (base: stacked) ── */
.overview-grid { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.overview-main { display: flex; flex-direction: column; gap: 16px; }
.overview-side { display: flex; flex-direction: column; gap: 16px; }

/* ── Desktop layout (≥ 769px) ── */
@media (min-width: 769px) {
  /* Sidebar */
  #sidebar {
    display: flex; flex-direction: column;
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 160px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    z-index: 200; overflow: hidden;
  }
  .sidebar-nav-item {
    position: relative;
    padding-left: 16px;
  }

  .sidebar-info-block {
    background: var(--accent-soft);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 4px;
  }
  .sidebar-info-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
  .sidebar-rate {
    font-size: 0.75rem; color: var(--text-secondary);
    display: flex; align-items: center; gap: 3px;
  }
  .sidebar-rate b { color: var(--text-primary); font-weight: 600; }
  .sidebar-update {
    font-size: 0.72rem; color: var(--text-secondary);
    display: flex; align-items: center; gap: 4px;
    flex: 1; justify-content: flex-end;
  }
  .sidebar-build-badge {
    font-size: 0.66rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sidebar-actions { display: flex; gap: 6px; }

  #app-header { display: none; }
  #app { margin-left: 160px; }

  /* ── Overview two-column ── */
  .overview-grid {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 16px; align-items: start;
  }

  /* ── Management sections ── */
  .mgmt-grid { grid-template-columns: 1fr 1fr; }
  #section-us, #section-crypto, #section-other, .section-card[style*="grid-column"] {
    grid-column: 1 / -1;
  }
}

/* ── Responsive ── */
@media (max-width: 1023px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid .kpi-primary { grid-column: span 1; }
  .kpi-primary .kpi-value { font-size: 1.6rem; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .overview-grid { grid-template-columns: 1fr !important; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-primary .kpi-value { font-size: 1.5rem; }
}
@media (max-width: 860px) {
  .charts-row { grid-template-columns: 1fr; }
  .mgmt-grid { grid-template-columns: 1fr; }
}

/* ── Mobile build bar (hidden on desktop) ── */
.mobile-build-bar { display: none; }

/* ── Asset cards (hidden on desktop, shown on mobile) ── */
/* Used by: cash-cards, crypto-cards, tw-cards, us-cards */
.cash-cards   { display: none; }
.crypto-cards { display: none; }
.stock-cards  { display: none; }
.asset-card {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: var(--card2); border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer; transition: background .15s;
}
.asset-card:hover { background: var(--border); }
/* 圓圈：左側固定錨點 */
.asset-card-pct {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg);
  font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.3px; flex-shrink: 0;
}
.asset-card.err .asset-card-pct { background: rgba(239,68,68,.2); color: var(--red); }
/* 名稱：中間彈性區，完整顯示後才截斷 */
.asset-card-sym {
  flex: 1; min-width: 0;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem; font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 金額區塊：右側固定，不壓縮 */
.asset-card-mid { flex-shrink: 0; text-align: right; }
.asset-card-twd {
  font-size: 1.2rem; font-weight: 700;
  color: var(--text); letter-spacing: -0.5px; line-height: 1.3;
}
.asset-card.err .asset-card-twd { font-size: 0.85rem; color: var(--red); }
.asset-card-detail {
  font-size: 0.73rem; color: var(--muted);
  margin-top: 5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.4;
}

/* ── Mobile (≤ 640px) ── */
@media (max-width: 640px) {
  /* 防止整個頁面橫向滑動 */
  body { overflow-x: hidden; max-width: 100vw; }

  /* Layout */
  #app-content { padding: 10px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
  .kpi-grid .kpi-primary { grid-column: span 1; }
  .charts-row { gap: 10px; }
  .chart-card { padding: 14px; }
  .section-card { padding: 14px; }

  /* Mobile build version bar */
  .mobile-build-bar {
    display: block;
    font-size: 0.72rem; color: var(--muted);
    margin-bottom: 10px; padding: 4px 2px;
  }

  /* KPI sizing */
  .kpi-card { padding: 12px 14px; }
  .kpi-primary .kpi-value { font-size: 1.4rem; }
  .kpi-value { font-size: 1.1rem; }
  .kpi-label { font-size: 0.68rem; }
  .kpi-sub { font-size: 0.7rem; }

  /* ── Header: 純色背景 + 底邊線 ── */
  #app-header {
    height: 52px; padding: 0 12px; gap: 8px;
    background: var(--bg-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    justify-content: flex-start;
  }
  /* 隱藏不需要的 Header 元素（保留 .btn-theme 在 mobile 顯示） */
  #app-header h1,
  .build-badge,
  .update-badge,
  #header-rate,
  .btn-signout { display: none; }
  /* 移除舊的對稱佔位 */
  #app-header::before { display: none; content: none; }
  /* header-right：theme btn + hamburger */
  .header-right { margin-left: auto; gap: 6px; align-items: center; }

  /* ── Tabs：底線指示器 ── */
  .tab-nav {
    flex: 1; display: flex; justify-content: flex-start; align-items: stretch;
    background: transparent;
    border-radius: 0;
    padding: 0;
    max-width: none;
    height: 100%;
    gap: 4px;
  }
  .tab-btn {
    flex: 0 0 auto;
    padding: 0 10px;
    height: 100%;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #999999;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
    white-space: nowrap;
  }
  .tab-btn.active {
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
    font-weight: 600;
    border-bottom: 2px solid var(--text-primary);
  }

  /* ── 主題切換按鈕（圓形 36px，mobile 顯示） ── */
  .btn-theme {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    border-radius: 50%;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 16px; line-height: 1;
    flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease;
  }
  .btn-theme:active { background: var(--accent-soft); }
  /* 淺色模式微調：稍微深一點的灰底好看見 */
  :root[data-theme="light"] .btn-theme { background: #f0f0f0; border-color: #e5e5e5; }
  :root[data-theme="dark"]  .btn-theme { background: #2a2a2a; border-color: #2a2a2a; }

  /* ── Hamburger：theme-aware，避免淺色看不見 ── */
  .mobile-menu-btn {
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; gap: 4px;
    width: 36px; height: 36px;
    background: none; border: none; cursor: pointer;
    flex-shrink: 0; border-radius: 50%;
    transition: background .15s;
  }
  .mobile-menu-btn:active { background: var(--accent-soft); }
  .mobile-menu-icon {
    display: block; width: 18px; height: 2px;
    background: var(--text-primary); border-radius: 1px;
    opacity: 0.75;
  }

  /* Management grid — full width single column */
  .mgmt-grid { grid-template-columns: 1fr; }

  /* Cash, Stocks & Crypto: hide tables, show cards */
  #cash-table-wrap  { display: none; }
  #crypto-table-wrap { display: none; }
  #tw-table-wrap { display: none; }
  #us-table-wrap { display: none; }
  .cash-cards   { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
  .crypto-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
  .stock-cards  { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

  /* Tables — 單行 flex 佈局 */
  .table-wrap { overflow-x: visible; width: 100%; }
  .data-table { display: block; min-width: unset; white-space: normal; }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tr {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .data-table tr:last-child { border-bottom: none; }
  .data-table td {
    border: none;
    padding: 0;
    font-size: 0.83rem;
    /* 可縮減，文字截斷 */
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 第一欄（名稱/代號）：優先被壓縮，確保按鈕不換行 */
  .data-table td:first-child {
    flex: 0 1 60px;
    min-width: 0;
  }
  /* data-label 在 flex 單行模式不顯示 */
  .data-table td[data-label]::before { display: none; }
  /* 操作按鈕欄：絕對不縮減，永遠同行靠右 */
  .data-table td:last-child {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    justify-content: flex-end;
    border: none;
    padding: 0;
    margin: 0;
  }
  /* 無資料列（colspan 單一 td）置中 */
  .data-table td:only-child {
    flex: 1;
    text-align: center;
    justify-content: center;
    overflow: visible;
  }

  /* 新增按鈕觸控高度 */
  .btn-add { min-height: 44px; font-size: 0.88rem; }
  .btn-ok { min-height: 44px; font-size: 0.88rem; padding: 10px 20px; }
  .section-footer { margin-top: 14px; padding-top: 12px; }

  /* Modal */
  .modal-box { padding: 20px 16px; width: 96%; }
  /* Modal 輸入框也要符合觸控標準 */
  .modal-box input, .modal-box select { min-height: 44px; font-size: 1rem; }

  /* Snapshot bar */
  .btn-snapshot { padding: 13px 28px; font-size: 0.9rem; min-height: 48px; }

  /* Chart heights — pie-wrap 必須 auto 才能容納 canvas + 6 列圖例 */
  #pie-wrap { height: auto !important; }
  #trend-wrap { height: 220px !important; }
  #daily-trend-wrap { height: 180px !important; }
  #monthly-wrap { height: 160px !important; }

  /* Toast */
  .toast { left: 12px; right: 12px; bottom: 56px; max-width: none; text-align: center; }

  /* ── Mobile Footer ── */
  .mobile-footer {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px 16px;
    font-size: 0.72rem; color: var(--muted);
    border-top: 1px solid var(--border);
    margin-top: 8px;
  }
  .mobile-footer-sep { opacity: .4; }
  .mobile-footer-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--muted); flex-shrink: 0;
  }
  .mobile-footer-dot.ok  { background: var(--green); }
  .mobile-footer-dot.err { background: var(--red); }

  /* Mobile Menu Sheet 啟用 */
  .mobile-menu-overlay { display: block; }

  /* ── Mobile build bar 改至 footer，隱藏原頂部 bar ── */
  .mobile-build-bar { display: none !important; }
}

/* ── 手機寬度 ≤ 480px：Tab 縮寫 ── */
@media (max-width: 480px) {
  .tab-full { display: none; }
  .tab-short { display: inline; }
}

/* ── Very small (≤ 400px, e.g. iPhone SE) ── */
@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tab-btn { padding: 5px 6px; font-size: 0.75rem; }
}

/* ══ Crypto Detail Panel ══ */
.crypto-panel-overlay {
  visibility: hidden; pointer-events: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  transition: background .32s, visibility 0s .32s;
  z-index: 800;
}
.crypto-panel-overlay.open {
  visibility: visible; pointer-events: auto;
  background: rgba(0,0,0,.6);
  transition: background .32s;
}
.crypto-panel-sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px 40px;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.32,1,.45,1);
}
.crypto-panel-overlay.open .crypto-panel-sheet {
  transform: translateY(0);
}

/* Panel header */
.crypto-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.crypto-panel-sym {
  font-size: 1.2rem; font-weight: 700;
  color: var(--accent-light); letter-spacing: 1px;
}
.crypto-panel-close {
  background: none; border: none;
  color: var(--muted); font-size: 1.2rem;
  cursor: pointer; padding: 4px 8px;
  border-radius: 6px; line-height: 1;
}
.crypto-panel-close:hover { background: var(--card2); color: var(--text); }

/* 大字現值 */
.crypto-panel-value {
  font-size: 2.2rem; font-weight: 800;
  color: var(--text); letter-spacing: -1px;
  margin-bottom: 4px; line-height: 1.1;
}
.crypto-panel-value-sub {
  font-size: 0.82rem; color: var(--muted);
  margin-bottom: 24px;
}

/* 主操作按鈕 */
.crypto-panel-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 28px;
}
.btn-cp-primary {
  background: var(--accent); color: var(--accent-fg); border: none;
  padding: 13px 10px; border-radius: 10px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background .2s;
}
.btn-cp-primary:hover { background: var(--accent-light); }
.btn-cp-secondary {
  background: var(--card2); color: var(--text);
  border: 1px solid var(--border);
  padding: 13px 10px; border-radius: 10px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: background .2s;
}
.btn-cp-secondary:hover { background: var(--border); }

/* 變動記錄 */
.crypto-panel-section-title {
  font-size: 0.72rem; font-weight: 600;
  color: var(--muted); letter-spacing: .5px;
  text-transform: uppercase; margin-bottom: 10px;
}
.crypto-panel-history {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 28px;
  max-height: 240px; overflow-y: auto;
}
.cp-history-item {
  display: grid;
  grid-template-columns: 100px auto 1fr auto;
  align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--card2); border-radius: 8px;
  font-size: 0.8rem;
}
.cp-history-date { color: var(--muted); }
.cp-history-delta { font-weight: 700; }
.cp-history-delta.pos { color: var(--green); }
.cp-history-delta.neg { color: var(--red); }
.cp-history-qty { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-history-price { color: var(--muted); text-align: right; white-space: nowrap; }
.cp-history-empty {
  text-align: center; color: var(--muted);
  padding: 20px 0; font-size: 0.85rem;
  background: var(--card2); border-radius: 8px;
}

/* 刪除按鈕 */
.btn-cp-delete {
  width: 100%; background: none;
  border: 1px solid var(--red); color: var(--red);
  padding: 12px; border-radius: 10px;
  font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: all .2s;
}
.btn-cp-delete:hover { background: rgba(239,68,68,.08); }

/* ── 電腦版 panel：置中 Modal（≥641px）── */
@media (min-width: 641px) {
  .crypto-panel-sheet {
    position: fixed;
    inset: auto;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(600px, 92vw);
    max-height: 82vh;
    border-radius: 16px;
    transform: translate(-50%, -46%) scale(0.96);
    opacity: 0;
    transition: transform .28s cubic-bezier(.32,1,.45,1), opacity .28s;
  }
  .crypto-panel-overlay.open .crypto-panel-sheet {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  /* 歷史記錄 table 高度放大 */
  .crypto-panel-history { max-height: 340px; }
}

/* 可點擊 table row */
.clickable-row { cursor: pointer; transition: background .15s; }
.clickable-row:hover { background: var(--card2); }

/* 歷史記錄 Table 樣式 */
.cp-history-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.8rem;
}
.cp-history-table thead th {
  text-align: left; padding: 4px 6px;
  color: var(--muted); font-weight: 600;
  font-size: 0.72rem; letter-spacing: .3px;
  border-bottom: 1px solid var(--border);
}
.cp-history-table tbody tr + tr { border-top: 1px solid rgba(128,128,128,.08); }
.cp-history-table td { padding: 6px 6px; vertical-align: middle; }
.cp-history-table .ch-date { color: var(--muted); white-space: nowrap; }
.cp-history-table .ch-delta { font-weight: 700; white-space: nowrap; }
.cp-history-table .ch-delta.pos { color: var(--green); }
.cp-history-table .ch-delta.neg { color: var(--red); }
.cp-history-table .ch-qty { color: var(--text); }
.cp-history-table .ch-price { color: var(--muted); text-align: right; white-space: nowrap; }


/* ── 收益記錄類型 Tag ── */
.reward-type-tag {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600;
  padding: 2px 7px; border-radius: 20px;
  white-space: nowrap;
}
.reward-type-tag.auto {
  background: rgba(99,102,241,.18); color: #818cf8;
}
.reward-type-tag.manual {
  background: rgba(148,163,184,.12); color: var(--muted);
}

/* ── 收益記錄折疊 Accordion ── */
#rewards-accordion { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.rwd-empty { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 20px 0; }
.rwd-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.rwd-group.current {
  border-color: var(--accent);
}
.rwd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
  cursor: pointer;
  background: rgba(255,255,255,.03);
  transition: background .15s;
}
.rwd-header:hover { background: rgba(99,102,241,.08); }
.rwd-header-left { display: flex; align-items: center; gap: 8px; }
.rwd-month-label { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.rwd-header-sub { font-size: 0.75rem; color: var(--muted); }
.rwd-header-right { display: flex; align-items: center; gap: 10px; }
.rwd-total-twd { font-weight: 700; font-size: 0.95rem; color: var(--accent-light); }
.rwd-toggle { font-size: 0.72rem; color: var(--muted); transition: transform .2s; user-select: none; }
.rwd-body { padding: 0 14px 10px; }
.rwd-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(45,49,85,.35);
}
.rwd-item:last-child { border-bottom: none; }
.rwd-item-left { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.rwd-sym {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important; font-size: 0.82rem;
  letter-spacing: 0.02em;
  background: rgba(99,102,241,.14); color: #818cf8;
  padding: 2px 7px; border-radius: 20px;
  white-space: nowrap; min-width: 52px; text-align: center;
  display: flex; align-items: center; gap: 4px;
}
.rwd-type-badge {
  font-size: 0.65rem; font-weight: 600; border-radius: 8px;
  padding: 1px 5px; white-space: nowrap;
}
.rwd-type-ext { background: rgba(16,185,129,.18); color: #34d399; }
.rwd-type-manual { background: rgba(251,191,36,.18); color: #fbbf24; }
.rwd-note { font-size: 0.72rem; color: var(--muted); padding-left: 2px; }
.rwd-detail { flex: 1; font-size: 0.88rem; color: var(--text); min-width: 0; }
.rwd-price { color: var(--muted); font-size: 0.78rem; }
.rwd-twd { color: var(--muted); font-size: 0.8rem; margin-left: 4px; }
.rwd-actions { display: flex; gap: 4px; flex-shrink: 0; }
/* ══ 重大體驗支出規劃 ══ */
.exp-plan-empty {
  color: var(--muted); font-size: 0.88rem;
  text-align: center; padding: 20px 0;
}
.exp-plan-item {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(45,49,85,.35);
}
.exp-plan-item:last-child { border-bottom: none; }
.exp-plan-item.paid { opacity: .55; }

/* Checkbox */
.exp-plan-checkbox { cursor: pointer; display: flex; align-items: center; justify-content: center; }
.exp-plan-checkbox input[type="checkbox"] { display: none; }
.exp-plan-check-icon {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  transition: all .18s; flex-shrink: 0;
}
.exp-plan-checkbox input:checked ~ .exp-plan-check-icon {
  background: var(--green); border-color: var(--green);
}
.exp-plan-checkbox input:checked ~ .exp-plan-check-icon::after {
  content: '✓'; font-size: 0.72rem; color: #fff; font-weight: 700;
}

/* Main info */
.exp-plan-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.exp-plan-name { font-size: 0.88rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-plan-date { font-size: 0.75rem; color: var(--muted); }
.exp-plan-amt { font-size: 0.9rem; font-weight: 700; color: var(--accent-light); white-space: nowrap; }
.exp-plan-amt.muted { color: var(--muted); }
.exp-plan-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* DWZ 清單 Badge */
.dwz-exp-badge {
  font-size: 0.65rem; font-weight: 600;
  padding: 2px 6px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.dwz-exp-badge.plan { background: rgba(245,158,11,.18); color: #f59e0b; }
.dwz-exp-badge.manual { background: rgba(99,102,241,.15); color: var(--accent-light); }
.dwz-exp-plan-hint { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }


/* ══ Mobile Menu Sheet ══ */
.mobile-menu-overlay {
  visibility: hidden; pointer-events: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  transition: background .28s, visibility 0s .28s;
  z-index: 900;
}
.mobile-menu-overlay.open {
  visibility: visible; pointer-events: auto;
  background: rgba(0,0,0,.55);
  transition: background .28s;
}
.mobile-menu-sheet {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  border-radius: 20px 20px 0 0;
  padding: 12px 0 40px;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,1,.45,1);
}
.mobile-menu-overlay.open .mobile-menu-sheet {
  transform: translateY(0);
}
.mobile-menu-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 0 auto 20px;
}
.mobile-menu-info-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
}
.mobile-menu-info-label { font-size: 0.78rem; color: var(--muted); opacity: 0.7; }
.mobile-menu-info-val { font-size: 0.82rem; color: var(--muted); font-family: 'SF Mono', 'Menlo', monospace; letter-spacing: 0.02em; }
.mobile-menu-divider {
  height: 1px; background: var(--border);
  margin: 8px 0;
}
.mobile-menu-item {
  display: flex; align-items: center; gap: 16px;
  width: 100%; padding: 16px 20px;
  background: none; border: none;
  font-size: 1rem; color: var(--text);
  cursor: pointer; text-align: left;
  transition: background .15s; white-space: nowrap;
}
.mobile-menu-item:active { background: var(--card2); }
.mobile-menu-item-icon { font-size: 1.2rem; width: 28px; text-align: center; flex-shrink: 0; }
.mobile-menu-item-danger { color: var(--red); }

/* ── Section Available Amount ── */
.section-avail {
  font-size: 0.8rem; font-weight: 500;
  color: var(--text-secondary); white-space: nowrap;
}

/* ── Expense Budget ── */
.budget-total-label {
  font-size: 0.8rem; color: var(--muted); font-weight: 400;
}
.budget-empty {
  color: var(--muted); font-size: 0.9rem;
  text-align: center; padding: 20px 0;
}
/* 固定/浮動 比例條（常駐可見，摺疊仍顯示） */
.budget-ratio-bar {
  display: flex; flex-direction: column; gap: 4px;
  margin: 2px 0 6px;
}
.budget-ratio-bar:empty { display: none; }
.budget-ratio-track {
  height: 6px; border-radius: 999px;
  background: rgba(148,163,184,.22);
  overflow: hidden;
}
.budget-ratio-fixed {
  height: 100%; border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  transition: width .35s ease;
}
.budget-ratio-labels {
  display: flex; justify-content: space-between;
  font-size: 0.72rem; color: var(--muted); font-weight: 500;
}
.budget-ratio-lbl-fixed { color: var(--accent-light); font-weight: 600; }
.budget-ratio-lbl-var { color: var(--muted); }

/* 外層：自然高度、不捲動（捲動下放到各 .budget-cat-items） */
.budget-cats {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0 10px;
}

/* 新增按鈕：永遠固定於捲動區之外、底部可見 */
.btn-add.budget-add-btn { margin-top: 2px; }

/* 避免 section-body 的 overflow:hidden 把內部捲動容器切掉（僅展開時生效） */
#section-budget:not(.collapsed) .section-body { overflow: visible; }

/* 類別分組（預設摺疊） */
.budget-cat {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden; /* 供 border-radius 裁切 header；內層 .budget-cat-items 自有捲動，不受影響 */
  background: rgba(255,255,255,.02);
}
.budget-cat-header {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 8px;
  padding: 7px 12px;
  cursor: pointer; user-select: none;
  border-bottom: 1px solid transparent;
  transition: background .15s ease, border-color .2s ease;
}
.budget-cat:not(.collapsed) .budget-cat-header {
  border-bottom-color: var(--border);
  background: rgba(99,102,241,.04);
}
.budget-cat-name {
  font-size: 0.88rem; font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center; gap: 2px;
}
.budget-cat-count {
  font-size: 0.68rem; font-weight: 600;
  background: rgba(99,102,241,.16); color: var(--accent-light);
  padding: 1px 7px; border-radius: 999px;
  margin-left: 6px;
}
.budget-cat-total {
  font-size: 0.9rem; font-weight: 700; color: var(--accent-light);
}
.budget-cat-chevron {
  font-size: 0.75rem; color: var(--muted);
  transition: transform .25s ease;
}
.budget-cat.collapsed .budget-cat-chevron { transform: rotate(-90deg); }
/* ⚠ 這是「固定 / 浮動 Accordion 的內容容器」— 13 項目必須能捲動 */
.budget-cat-items {
  display: block !important;          /* 明確 block：不是 flex，避免部分引擎吃掉捲軸 */
  padding: 6px 8px;
  max-height: 400px !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.45) rgba(148,163,184,.1);
  transition: max-height .3s ease, padding .3s ease, opacity .2s ease;
  opacity: 1;
}
.budget-cat-items::-webkit-scrollbar {
  width: 6px;
  -webkit-appearance: none;
}
.budget-cat-items::-webkit-scrollbar-track {
  background: rgba(148,163,184,.1);
  border-radius: 999px;
  margin: 4px 0;
}
.budget-cat-items::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.45);
  border-radius: 999px;
}
.budget-cat-items::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.65); }

/* block layout 下恢復行距（原本靠 flex gap） */
.budget-cat-items > .budget-item,
.budget-cat-items > .budget-bundle { margin-bottom: 3px; }
.budget-cat-items > :last-child { margin-bottom: 0; }

/* 摺疊狀態：覆寫強制規則（!important 需要同等或更高 specificity + !important） */
.budget-cat.collapsed .budget-cat-items {
  max-height: 0 !important;
  padding: 0 8px;
  opacity: 0;
  overflow: hidden !important;
}

/* 項目列（較緊湊） */
.budget-item {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--card2);
  border-radius: 7px;
}
.budget-item-name { font-size: 0.85rem; font-weight: 600; }
.budget-item-source {
  font-size: 0.72rem; color: var(--muted); white-space: nowrap;
}
.budget-item-amt {
  font-size: 0.85rem; font-weight: 700; color: var(--text);
  white-space: nowrap; text-align: right;
}
.budget-item-actions { display: flex; gap: 4px; }

/* 數位服務與通訊 折疊子群組 */
.budget-bundle {
  border: 1px dashed var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 3px;
  background: rgba(99,102,241,.03);
}
.budget-bundle-header {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 8px;
  padding: 5px 10px;
  cursor: pointer; user-select: none;
}
.budget-bundle-name {
  font-size: 0.8rem; font-weight: 600; color: var(--text);
  display: inline-flex; align-items: center; gap: 2px;
}
.budget-bundle-count {
  font-size: 0.66rem; font-weight: 600;
  background: rgba(16,185,129,.14); color: #10b981;
  padding: 1px 6px; border-radius: 999px;
  margin-left: 4px;
}
.budget-bundle-total {
  font-size: 0.82rem; font-weight: 700; color: var(--text);
}
.budget-bundle-chevron {
  font-size: 0.7rem; color: var(--muted);
  transition: transform .25s ease;
}
.budget-bundle.collapsed .budget-bundle-chevron { transform: rotate(-90deg); }
.budget-bundle-items {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 6px 6px;
  max-height: 1000px;
  transition: max-height .3s ease, padding .3s ease, opacity .2s ease;
  opacity: 1;
}
.budget-bundle.collapsed .budget-bundle-items {
  max-height: 0; padding: 0 6px; opacity: 0; overflow: hidden;
}


/* ══ 主動收入管理 ══ */
.income-empty { color: var(--muted); font-size: 0.9rem; text-align: center; padding: 20px 0; }
/* 主動收入：扁平清單（取消月份分組）。>5 筆時內部捲動避免撐長頁面 */
#income-accordion {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-y: auto;
  max-height: 280px;
  background: rgba(255,255,255,.02);
}
.income-item {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(45,49,85,.25);
}
.income-item:last-child { border-bottom: none; }
.income-item.income-settled { opacity: 0.55; }
.income-item.income-current { background: rgba(99,102,241,.06); }
.income-recurring-badge {
  font-size: 0.68rem; font-weight: 600; white-space: nowrap;
  background: rgba(16,185,129,.14); color: #10b981;
  padding: 1px 6px; border-radius: 20px;
}
.income-status-btn {
  background: none; border: 1.5px solid var(--muted);
  border-radius: 4px; width: 22px; height: 22px;
  cursor: pointer; font-size: 0.95rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.income-status-btn.settled { border-color: #10b981; color: #10b981; }
.income-status-btn:hover { border-color: var(--accent-light); }
.income-item-info { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.income-item-name { font-size: 0.88rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.income-cat-badge {
  font-size: 0.7rem; font-weight: 600; white-space: nowrap;
  background: rgba(99,102,241,.14); color: #818cf8;
  padding: 1px 6px; border-radius: 20px;
}
.income-payer { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.income-item-date { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.income-item-amt { font-size: 0.88rem; font-weight: 700; color: var(--text); white-space: nowrap; text-align: right; }
.income-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.income-forecast {
  font-size: 0.82rem; color: var(--muted);
  padding: 10px 4px 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.income-header-label { font-size: 0.75rem; color: var(--muted); margin-right: 2px; }

/* ═══ Die With Zero — Apple-style 參數區（緊湊版） ═══ */
.dwz-layout {
  display: grid;
  grid-template-columns: minmax(270px, 310px) 1fr;
  gap: 14px;
  align-items: start;
  position: relative;
  isolation: isolate;
}
@media (max-width: 900px) { .dwz-layout { grid-template-columns: 1fr; } }

/* Ultra-wide：左欄稍放寬 + 4 個 block 2×2，縱向再砍半 */
@media (min-width: 1500px) {
  .dwz-layout { grid-template-columns: minmax(440px, 520px) 1fr; }
  .dwz-left-blocks { grid-template-columns: 1fr 1fr; }
}

/* ── 左欄：透明 grid 容器，子元素各自成卡 ── */
.dwz-left {
  background: transparent;
  border: none;
  padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  position: sticky; top: 12px;
  z-index: 2;
  max-height: calc(100vh - 24px); overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.35) transparent;
}
.dwz-left::-webkit-scrollbar { width: 5px; }
.dwz-left::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); border-radius: 999px; }
@media (max-width: 900px) {
  .dwz-left { position: static; max-height: none; overflow: visible; z-index: auto; }
}

/* Header 單獨一張卡 */
.dwz-left-head {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.02) inset;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 8px;
}
.dwz-section-title {
  font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.dwz-section-title.compact {
  font-size: 0.9rem; margin-bottom: 0; letter-spacing: -0.005em;
}

/* KPI 小標籤 — Header 右側，玻璃感 */
.dwz-left-kpis { display: flex; flex-wrap: wrap; gap: 4px; }
.dwz-kpi-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 500; color: var(--muted);
  background: rgba(99,102,241,.09);
  border: 1px solid rgba(99,102,241,.18);
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; line-height: 1.3;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}
.dwz-kpi-tag b {
  color: var(--accent-light);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Block container（2×2 就在這個 grid 上） */
.dwz-left-blocks {
  display: grid; grid-template-columns: 1fr; gap: 8px;
}

/* ── 分組卡 ── */
.dwz-param-block {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 12px 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.02) inset;
  display: flex; flex-direction: column; gap: 0;
}

/* ── 策略實驗室（DWZ 左欄底部摺疊區塊）── */
.dwz-strat-lab { padding: 6px 12px 10px; }
.dwz-strat-lab-head {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  background: transparent; border: none; padding: 4px 0;
  cursor: pointer; color: var(--text);
}
.dwz-strat-lab-head:hover { color: var(--accent-light); }
.dwz-strat-lab-head .dwz-block-title { margin: 0; }
.dwz-strat-lab-en {
  font-size: 0.65rem; color: var(--muted); font-weight: 400;
  margin-left: 4px; letter-spacing: 0;
}
.dwz-strat-lab-arrow {
  font-size: 11px; color: var(--muted);
  transition: transform .2s ease;
}
.dwz-strat-lab-head.open .dwz-strat-lab-arrow { transform: rotate(180deg); }
.dwz-strat-lab-body {
  display: flex; flex-direction: column;
  padding-top: 4px;
  animation: stratLabFade .2s ease;
}
.dwz-strat-lab-body[hidden] { display: none; }
@keyframes stratLabFade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dwz-strat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.dwz-strat-row:first-child { border-top: none; }
.dwz-strat-text { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dwz-strat-label { font-size: 0.82rem; font-weight: 500; color: var(--text); }
.dwz-strat-sub   { font-size: 0.7rem; color: var(--muted); line-height: 1.3; }
.dwz-strat-estimate {
  font-size: 0.74rem; color: var(--green);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: 500;
  margin-top: 3px;
  display: none;
}
.dwz-strat-row.on .dwz-strat-estimate { display: inline-block; }

/* ── Toggle switch ── */
.dwz-toggle {
  position: relative; display: inline-block;
  width: 36px; height: 20px;
  flex-shrink: 0; cursor: pointer;
}
.dwz-toggle input {
  position: absolute; opacity: 0;
  width: 100%; height: 100%; margin: 0;
  cursor: pointer; z-index: 1;
}
.dwz-toggle-track {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background .15s ease;
}
.dwz-toggle-track::before {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--text-primary);
  border-radius: 50%;
  transition: transform .15s ease, background .15s ease;
}
.dwz-toggle input:checked ~ .dwz-toggle-track {
  background: var(--accent);
}
.dwz-toggle input:checked ~ .dwz-toggle-track::before {
  transform: translateX(16px);
  background: var(--accent-fg);
}
.dwz-block-title {
  font-size: 0.78rem; font-weight: 700; color: var(--text);
  text-transform: none; letter-spacing: -0.01em;
  margin: 0 0 4px; padding-left: 1px;
}

/* ── Row：label 左（含引導點延伸）+ input 右 ── */
.dwz-row {
  display: grid;
  grid-template-columns: 1fr 80px;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  min-height: 26px;
}
/* label 本身是 flex container，text + 延伸點 */
.dwz-row > label {
  display: flex; align-items: baseline; gap: 0;
  font-size: 0.76rem; color: var(--text); font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.2;
  overflow: hidden;
  min-width: 0;
}
.dwz-row > label::after {
  content: '';
  flex: 1 1 auto;
  min-width: 12px;
  margin-left: 6px;
  align-self: center;
  height: 1px;
  background-image: radial-gradient(circle, currentColor 0.8px, transparent 0.8px);
  background-size: 6px 100%;
  background-repeat: repeat-x;
  opacity: 0.22;
  color: var(--muted);
}
.dwz-row .dwz-param-unit {
  font-size: 0.66rem; font-weight: 400; color: var(--muted);
  margin-left: 2px; flex-shrink: 0;
}

/* 現代輸入框：軟灰底、無邊框、focus 時出現細藍環 */
.dwz-param-input {
  background: rgba(120,120,128,0.12);
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 4px 8px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  outline: none;
  width: 80px; max-width: 80px;
  text-align: right;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  letter-spacing: -0.01em;
}
.dwz-param-input:hover { background: rgba(120,120,128,0.18); }
.dwz-param-input:focus {
  background: var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
}

/* Row 變體：年化報酬率（label｜input｜📊 button） */
.dwz-row-return { grid-template-columns: 1fr 80px auto; }
.dwz-row-return .dwz-roi-precise { padding: 2px 7px; margin-left: 3px; }

/* ── 右欄：曲線 + 分析 ── */
.dwz-right {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
  position: relative; z-index: 1;
}

/* 玻璃感警示膠囊 */
.dwz-alerts-row { display: flex; flex-wrap: wrap; gap: 6px; }
.dwz-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; line-height: 1;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  color: var(--text); white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.03) inset;
  letter-spacing: -0.005em;
}
.dwz-pill em { font-style: normal; color: var(--muted); font-size: 0.7rem; font-weight: 500; }
.dwz-pill b {
  font-weight: 700;
  font-family: 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.dwz-pill-peak   { background: rgba(99,102,241,.14); border-color: rgba(99,102,241,.26); }
.dwz-pill-peak b { color: var(--accent-light); }
.dwz-pill-danger { background: rgba(239,68,68,.13); border-color: rgba(239,68,68,.3); }
.dwz-pill-danger b { color: #ef4444; }
.dwz-pill-warn   { background: rgba(245,158,11,.13); border-color: rgba(245,158,11,.3); }
.dwz-pill-warn b { color: #f59e0b; }
.dwz-pill-waste  { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.2); }
.dwz-pill-waste b { color: #ef4444; }

/* 圖表卡 — 明確不透明背景，避免 sticky 元件穿透 */
.dwz-chart-card {
  margin-bottom: 0; padding: 12px 14px;
  background: var(--card) !important;
  position: relative; z-index: 1;
}
.dwz-chart-card .chart-title-row { margin-bottom: 8px; }
.dwz-chart-card .chart-title-row h3 { font-size: 0.92rem; margin-bottom: 0; }
.dwz-chart-canvas-wrap { position: relative; height: 260px; }
.dwz-click-hint { font-size: 0.7rem; color: var(--muted); font-style: italic; }

/* ── 最佳體驗窗口卡（情境列下方、圖表上方）── */
.dwz-best-window-card {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px;
  background: linear-gradient(90deg, rgba(34,197,94,0.10), rgba(34,197,94,0.02));
  border: 1px solid rgba(34,197,94,0.28);
  border-radius: 12px;
  margin-bottom: 8px;
}
.dwz-bw-header {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  color: #16a34a; text-transform: none;
}
.dwz-bw-body { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.dwz-bw-range {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text);
}
.dwz-bw-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dwz-bw-years { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.dwz-bw-hint  { font-size: 0.7rem;  color: var(--muted); line-height: 1.35; }
.dwz-bw-empty { flex: 1; font-size: 0.78rem; color: var(--muted); font-style: italic; }

.dwz-bw-progress { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 4px; }
.dwz-bw-progress-track {
  height: 6px;
  background: rgba(34,197,94,0.18);
  border-radius: 3px;
  overflow: hidden;
}
.dwz-bw-progress-fill {
  height: 100%; border-radius: 3px;
  background: #16a34a;
  transition: width .3s ease, background .2s ease;
}
.dwz-bw-progress-fill.warn { background: #d97706; }
.dwz-bw-progress-fill.bad  { background: var(--red); }
:root[data-theme="dark"] .dwz-bw-progress-fill.warn { background: #fbbf24; }
:root[data-theme="dark"] .dwz-bw-progress-fill.bad  { background: #f87171; }
.dwz-bw-progress-meta {
  font-size: 0.7rem; color: var(--muted);
  font-family: 'Inter', sans-serif; font-variant-numeric: tabular-nums;
}
.dwz-bw-progress-meta span { color: var(--text); font-weight: 600; }
:root[data-theme="dark"] .dwz-best-window-card {
  background: linear-gradient(90deg, rgba(34,197,94,0.14), rgba(34,197,94,0.03));
  border-color: rgba(34,197,94,0.32);
}
@media (max-width: 640px) {
  .dwz-best-window-card { padding: 10px 12px; gap: 10px; }
  .dwz-bw-range { font-size: 1.3rem; }
}

/* ── 體驗窗口倒數卡（情境列下方、圖表上方）── */
.dwz-window-card {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
}
.dwz-window-active {
  display: flex; align-items: center; gap: 16px;
  flex: 1; min-width: 0;
}
.dwz-window-card.late .dwz-window-active { display: none; }
.dwz-window-card:not(.late) .dwz-window-late { display: none; }

.dwz-window-main { display: flex; align-items: baseline; gap: 12px; flex-shrink: 0; }
.dwz-window-num b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.8rem; font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dwz-window-num em {
  font-size: 0.85rem; color: var(--muted);
  margin-left: 3px; font-style: normal; font-weight: 500;
}
.dwz-window-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dwz-window-label {
  font-size: 0.78rem; color: var(--text); font-weight: 600;
  letter-spacing: 0.01em;
}
.dwz-window-hint {
  font-size: 0.7rem; color: var(--muted); line-height: 1.35;
}

.dwz-window-progress { flex: 1; min-width: 120px; display: flex; flex-direction: column; gap: 4px; }
.dwz-window-progress-track {
  height: 6px;
  background: var(--accent-soft);
  border-radius: 3px;
  overflow: hidden;
}
.dwz-window-progress-fill {
  height: 100%; border-radius: 3px;
  background: var(--green);
  transition: width .3s ease, background .2s ease;
}
.dwz-window-progress-fill.warn { background: #d97706; }
.dwz-window-progress-fill.bad  { background: var(--red); }
:root[data-theme="dark"] .dwz-window-progress-fill.warn { background: #fbbf24; }
:root[data-theme="dark"] .dwz-window-progress-fill.bad  { background: #f87171; }
.dwz-window-progress-meta {
  font-size: 0.7rem; color: var(--muted);
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.dwz-window-late { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dwz-window-late-label {
  font-size: 0.95rem; font-weight: 600; color: var(--text);
}

/* ── 可編輯高體驗能力期年齡 ── */
.dwz-peak-edit {
  display: inline-flex; align-items: center; gap: 2px;
  cursor: pointer;
  padding: 0 3px;
  border-radius: 3px;
  transition: background .15s ease;
  vertical-align: baseline;
}
.dwz-peak-edit:hover { background: var(--accent-soft); }
.dwz-peak-age {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}
.dwz-peak-pencil {
  font-size: 0.62rem;
  color: var(--muted);
  opacity: 0.7;
  margin-left: 1px;
}
.dwz-peak-input {
  width: 50px;
  padding: 1px 4px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 600;
  outline: none;
  vertical-align: baseline;
}

@media (max-width: 640px) {
  .dwz-window-card, .dwz-window-active { flex-wrap: wrap; gap: 10px; }
  .dwz-window-progress { flex-basis: 100%; }
}

/* ── 智慧建議（DWZ 圖表右上浮層）── */
.dwz-smart-tips {
  position: absolute;
  top: 8px; right: 8px;
  display: flex; flex-direction: column; gap: 6px;
  max-width: 280px;
  z-index: 5;
  pointer-events: none;
}
.dwz-smart-tips:empty { display: none; }
.dwz-tip {
  font-size: 13px; line-height: 1.4;
  padding: 8px 12px; border-radius: 8px;
  pointer-events: auto;
  font-family: var(--font-body);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dwz-tip b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; }
.dwz-tip-warn  { color: #d97706; background: rgba(217,119,6,0.10); }
.dwz-tip-bad   { color: #dc2626; background: rgba(220,38,38,0.10); }
.dwz-tip-good  { color: #16a34a; background: rgba(22,163,74,0.10); }
.dwz-tip-neg   { color: #dc2626; background: rgba(220,38,38,0.10); }
:root[data-theme="dark"] .dwz-tip-warn { color: #fbbf24; background: rgba(251,191,36,0.14); }
:root[data-theme="dark"] .dwz-tip-bad,
:root[data-theme="dark"] .dwz-tip-neg  { color: #f87171; background: rgba(248,113,113,0.14); }
:root[data-theme="dark"] .dwz-tip-good { color: #4ade80; background: rgba(74,222,128,0.14); }

@media (max-width: 640px) {
  .dwz-smart-tips { max-width: calc(100% - 16px); }
  .dwz-tip { font-size: 12px; padding: 6px 10px; }
}
.dwz-legend-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin-top: 6px; font-size: 0.7rem; color: var(--muted);
}
.dwz-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.dwz-legend-ok { background: #6366f1; }
.dwz-legend-bad { background: #ef4444; }
.dwz-legend-exp {
  width: 14px; height: 4px; background: #f59e0b;
  border-radius: 2px; flex-shrink: 0;
}

.dwz-expenses-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); padding: 12px 14px;
  position: relative; z-index: 1;
}
.dwz-expenses-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; gap: 12px; flex-wrap: wrap;
}

/* ── Bucket List 統計列 ── */
.bucket-stats {
  display: flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
  font-size: 0.78rem; color: var(--muted);
  font-family: var(--font-num);
}
.bucket-stats:empty { display: none; }
.bucket-stat b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.bucket-stat-sep { color: var(--border-hover); }

/* ── Bucket List 篩選 tabs ── */
.bucket-filter-tabs {
  display: flex; gap: 4px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.bucket-tab {
  background: none; border: none;
  padding: 6px 12px;
  font-size: 0.82rem;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.bucket-tab:hover { color: var(--text); }
.bucket-tab.active {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--text);
}

/* ── Bucket List 年齡分組 ── */
.bucket-group { margin-bottom: 12px; }
.bucket-group-title {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 6px 0 4px;
  padding: 0 2px;
}

/* ── Bucket List 單一項目 ── */
.bucket-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.bucket-item:last-child { border-bottom: none; }
.bucket-item.bucket-done .bucket-name,
.bucket-item.bucket-done .bucket-amt { text-decoration: line-through; opacity: 0.6; }
.bucket-item.bucket-abandoned { opacity: 0.55; }

/* 年齡 badge */
.bucket-age {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  min-width: 42px; padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.74rem; font-weight: 600;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.bucket-age-planning  { background: rgba(217,119,6,0.15);  color: #d97706; }
.bucket-age-done      { background: rgba(22,163,74,0.15);  color: #16a34a; }
.bucket-age-abandoned { background: rgba(120,120,120,0.15); color: var(--muted); }
:root[data-theme="dark"] .bucket-age-planning  { background: rgba(251,191,36,0.18); color: #fbbf24; }
:root[data-theme="dark"] .bucket-age-done      { background: rgba(74,222,128,0.18); color: #4ade80; }
:root[data-theme="dark"] .bucket-age-abandoned { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

/* 分類 tag */
.bucket-cat {
  display: inline-block; flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem; font-weight: 500;
  background: var(--accent-soft); color: var(--text);
}
.bucket-cat-旅遊 { background: rgba(59,130,246,0.15);  color: #3b82f6; }
.bucket-cat-體驗 { background: rgba(168,85,247,0.15);  color: #a855f7; }
.bucket-cat-學習 { background: rgba(14,165,233,0.15);  color: #0ea5e9; }
.bucket-cat-家人 { background: rgba(236,72,153,0.15);  color: #ec4899; }
.bucket-cat-其他 { background: rgba(120,120,120,0.15); color: var(--muted); }

.bucket-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bucket-name {
  font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bucket-note {
  font-size: 0.72rem; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bucket-amt {
  flex-shrink: 0;
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--text);
}
.bucket-status-select {
  flex-shrink: 0;
  font-size: 0.72rem;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 640px) {
  .bucket-item { flex-wrap: wrap; gap: 6px; }
  .bucket-main { flex-basis: 100%; order: 5; }
  .bucket-status-select { font-size: 0.7rem; }
}
.btn-dwz-add {
  background: none; border: 1px solid var(--accent); color: var(--accent);
  padding: 6px 14px; border-radius: 8px; font-size: 0.82rem;
  font-weight: 600; cursor: pointer; transition: all .2s;
}
.btn-dwz-add:hover { background: var(--accent); color: var(--accent-fg); }
.dwz-exp-empty {
  color: var(--muted); font-size: 0.875rem; text-align: center; padding: 20px 0;
}
.dwz-exp-item {
  display: grid; grid-template-columns: 60px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--card2);
  border-radius: 8px; margin-bottom: 6px;
}
.dwz-exp-item:last-child { margin-bottom: 0; }
.dwz-exp-age {
  font-size: 0.82rem; font-weight: 700; color: var(--accent-light);
  white-space: nowrap;
}
.dwz-exp-name { font-size: 0.875rem; font-weight: 500; }
.dwz-exp-amt {
  font-size: 0.875rem; font-weight: 700; color: #f59e0b; white-space: nowrap;
}
.dwz-exp-del {
  background: none; border: none; color: var(--muted);
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  font-size: 0.75rem; transition: color .2s;
}
.dwz-exp-del:hover { color: var(--red); }

/* DWZ auto-calc badge */
.dwz-autocalc-badge {
  display: inline-block; font-size: 0.65rem; font-weight: 600;
  background: rgba(99,102,241,0.18); color: var(--accent-light);
  border-radius: 4px; padding: 1px 6px; margin-left: 6px;
  vertical-align: middle; letter-spacing: 0.03em;
}
.dwz-param-unit {
  font-size: 0.7rem; font-weight: 400; color: var(--muted); margin-left: 2px;
}

/* (舊的 .dwz-param-info / .dwz-peak-info 大區塊已移除 — 改用 .dwz-kpi-tag 與 .dwz-pill) */

/* Safety floor legend item */
.dwz-legend-floor {
  width: 18px; height: 0; border-top: 2px dashed rgba(34,197,94,0.8);
  flex-shrink: 0; align-self: center;
}
/* Life energy legend item */
.dwz-legend-energy {
  width: 18px; height: 0; border-top: 2px dashed rgba(251,191,36,0.7);
  flex-shrink: 0; align-self: center;
}

/* (舊的 .dwz-waste-info 大區塊已移除，見 .dwz-pill-waste) */

/* DWZ modal form */
.dwz-modal-form { display: flex; flex-direction: column; gap: 14px; }
.dwz-modal-group { display: flex; flex-direction: column; gap: 5px; }
.dwz-modal-label { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.dwz-modal-input {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 9px 12px; color: var(--text);
  font-size: 0.9rem; outline: none; width: 100%;
  transition: border-color .2s;
}
.dwz-modal-input:focus { border-color: var(--accent); }

@media (max-width: 640px) {
  .dwz-left { padding: 12px 14px; }
  .dwz-expenses-card { padding: 16px; }
  .dwz-exp-item { grid-template-columns: 50px 1fr auto auto; gap: 8px; }
  .dwz-click-hint { display: none; }
  .dwz-chart-canvas-wrap { height: 260px; }
}


/* ── DWZ 標的級別精算按鈕（inline in label） ── */
.dwz-roi-precise {
  font-size: 0.66rem; font-weight: 600;
  background: linear-gradient(90deg, rgba(99,102,241,.15), rgba(139,92,246,.15));
  color: var(--accent-light);
  border: 1px solid rgba(99,102,241,.35);
  padding: 1px 6px; border-radius: 999px;
  cursor: pointer; user-select: none;
  margin-left: 4px;
  line-height: 1.4;
  transition: background .18s ease, transform .1s ease;
}
.dwz-roi-precise:hover { background: linear-gradient(90deg, rgba(99,102,241,.25), rgba(139,92,246,.25)); }
.dwz-roi-precise:active { transform: scale(0.96); }

/* ── ROI Side Drawer（標的級別精算） ── */
.roi-drawer-backdrop {
  position: fixed; inset: 0; z-index: 990;
  background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.roi-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.roi-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 40vw; min-width: 450px; max-width: 560px;
  background: var(--card);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 36px rgba(0,0,0,0.35);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
  will-change: transform;
}
.roi-drawer.open { transform: translateX(0); }

/* 桌面端：抽屜開啟時主內容右移（Chart.js responsive 會自動縮放） */
@media (min-width: 1100px) {
  body.roi-drawer-open #app-content {
    padding-right: min(40vw, 560px);
    transition: padding-right .28s cubic-bezier(0.4,0,0.2,1);
  }
  .roi-drawer-backdrop { background: transparent; }
}

/* 手機端：抽屜全寬 */
@media (max-width: 640px) {
  .roi-drawer { width: 100vw; min-width: 0; max-width: none; }
}

/* 抽屜 header（sticky top） */
.roi-drawer-head {
  flex-shrink: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(99,102,241,.09), transparent);
}
.roi-drawer-title { font-size: 1.05rem; font-weight: 800; color: var(--text); }
.roi-drawer-subtitle { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.roi-drawer-close {
  background: transparent; border: 1px solid var(--border);
  width: 30px; height: 30px; border-radius: 8px;
  color: var(--muted); cursor: pointer; font-size: 0.9rem;
  transition: background .15s ease, color .15s ease;
}
.roi-drawer-close:hover { background: var(--card2); color: var(--text); }

/* 抽屜 body（flex-grow + 內部捲動） */
.roi-drawer-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 16px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.45) rgba(148,163,184,.08);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.roi-drawer-body::-webkit-scrollbar { width: 7px; }
.roi-drawer-body::-webkit-scrollbar-track { background: rgba(148,163,184,.08); border-radius: 999px; margin: 4px 0; }
.roi-drawer-body::-webkit-scrollbar-thumb { background: rgba(148,163,184,.45); border-radius: 999px; }
.roi-drawer-body::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.65); }

.roi-drawer-hint {
  font-size: 0.78rem; color: var(--muted); line-height: 1.55;
  margin: 0 2px 12px; padding: 8px 12px;
  background: rgba(99,102,241,.06); border-radius: 8px;
  border-left: 3px solid var(--accent-light);
}

/* 分組卡片 */
.roi-drawer-group {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}
.roi-drawer-group-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.roi-group-titleline {
  display: flex; align-items: center; gap: 8px;
}
.roi-group-icon { font-size: 1.05rem; }
.roi-group-name { font-size: 0.92rem; font-weight: 800; color: var(--text); }
.roi-group-count {
  font-size: 0.68rem; font-weight: 700;
  background: rgba(99,102,241,.2); color: var(--accent-light);
  padding: 1px 8px; border-radius: 999px;
}
.roi-group-stats {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 0.75rem;
}
.roi-group-stat { display: flex; gap: 5px; align-items: baseline; }
.roi-group-stat-lbl { color: var(--muted); }
.roi-group-stat-val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.roi-group-fills { display: flex; gap: 6px; flex-wrap: wrap; }
.roi-group-fill {
  font-size: 0.7rem; font-weight: 600;
  background: rgba(99,102,241,.13);
  color: var(--accent-light);
  border: 1px solid rgba(99,102,241,.3);
  padding: 3px 9px; border-radius: 999px;
  cursor: pointer; transition: background .15s ease, transform .08s ease;
}
.roi-group-fill:hover { background: rgba(99,102,241,.25); }
.roi-group-fill:active { transform: scale(0.94); }

/* 分組主色帶 */
.roi-group-crypto .roi-drawer-group-head { background: linear-gradient(90deg, rgba(245,158,11,.10), transparent); border-left: 3px solid #f59e0b; }
.roi-group-us     .roi-drawer-group-head { background: linear-gradient(90deg, rgba(59,130,246,.10), transparent); border-left: 3px solid #3b82f6; }
.roi-group-tw     .roi-drawer-group-head { background: linear-gradient(90deg, rgba(239,68,68,.10),  transparent); border-left: 3px solid #ef4444; }
.roi-group-ins    .roi-drawer-group-head { background: linear-gradient(90deg, rgba(168,85,247,.10), transparent); border-left: 3px solid #a855f7; }
.roi-group-cash   .roi-drawer-group-head { background: linear-gradient(90deg, rgba(16,185,129,.10), transparent); border-left: 3px solid #10b981; }

.roi-drawer-group-body {
  display: flex; flex-direction: column;
}
.roi-drawer-row {
  display: grid;
  grid-template-columns: 1fr auto 80px;
  gap: 10px;
  align-items: center;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(148,163,184,.12);
  font-size: 0.84rem;
}
.roi-drawer-row:last-child { border-bottom: none; }
.roi-drawer-row:hover { background: rgba(99,102,241,.04); }
.roi-sym { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.roi-mv { color: var(--muted); font-size: 0.78rem; text-align: right; font-variant-numeric: tabular-nums; }
.roi-input {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 5px 8px; color: var(--text);
  font-size: 0.88rem; font-weight: 700; outline: none;
  width: 100%; text-align: right;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s ease, background .15s ease;
}
.roi-input:focus { border-color: var(--accent); background: var(--card2); }

/* 抽屜 footer（sticky bottom） */
.roi-drawer-foot {
  flex-shrink: 0;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border);
  background: linear-gradient(0deg, rgba(99,102,241,.06), transparent);
  display: flex; flex-direction: column; gap: 6px;
}
.roi-foot-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.86rem;
}
.roi-foot-label { color: var(--muted); }
.roi-foot-val { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.roi-foot-hl .roi-foot-label { color: var(--accent-light); font-weight: 600; }
.roi-foot-hl .roi-foot-val { color: var(--accent-light); font-size: 1.2rem; }
.roi-foot-actions {
  display: flex; gap: 10px; margin-top: 6px;
}
.roi-foot-actions .btn-cancel,
.roi-foot-actions .btn-ok { flex: 1; }