:root {
  color-scheme: light;
  --ink: #17221f;
  --muted: #66736f;
  --line: #dfe6e2;
  --paper: #f4f7f5;
  --surface: #ffffff;
  --accent: #087f5b;
  --accent-soft: #dff5eb;
  --income: #0b7a63;
  --income-soft: #e0f7ef;
  --expense: #bd4c3c;
  --expense-soft: #fff0ed;
  --balance: #315dba;
  --balance-soft: #edf2ff;
  --warn: #a15c00;
  --danger: #a43b2a;
  --danger-soft: #fff0ed;
  --shadow: 0 16px 45px rgba(25, 46, 39, .08);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, select, input, textarea { font: inherit; }
a { color: var(--accent); }
.shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0 64px; }
.topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow { color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 4px 0 4px; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.045em; line-height: 1.05; }
.subtitle, .freshness { color: var(--muted); margin: 0; }
.actions, .dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.view-switch { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.view-switch .button { min-height: 36px; padding: 6px 11px; border: 0; }
.view-switch .button.is-active { background: var(--ink); color: white; }
.main-nav { display: flex; gap: 7px; overflow-x: auto; margin: 0 0 22px; padding: 5px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.main-nav a { flex: 1; min-width: max-content; padding: 9px 15px; border-radius: 11px; color: var(--muted); font-weight: 800; text-align: center; text-decoration: none; }
.main-nav a:hover { color: var(--accent); background: var(--accent-soft); }
.main-nav a.is-active { color: white; background: var(--ink); }
.button, select, input, textarea {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  padding: 9px 14px;
}
.button { cursor: pointer; font-weight: 700; }
.button:hover { border-color: var(--accent); }
.button.primary { background: var(--accent); border-color: var(--accent); color: white; }
.button.danger { background: var(--danger-soft); border-color: #f3c5bd; color: var(--danger); }
.button.small { min-height: 36px; padding: 6px 10px; font-size: .82rem; }
.button:disabled { cursor: not-allowed; opacity: .5; }
.grid { display: grid; gap: 16px; }
.metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.metric { padding: 20px; min-height: 132px; }
.primary-metrics { gap: 14px; }
.secondary-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.metric.income { background: linear-gradient(145deg, #fff 10%, var(--income-soft)); border-color: #bee9d9; }
.metric.expense { background: linear-gradient(145deg, #fff 10%, var(--expense-soft)); border-color: #f2cec7; }
.metric.balance { background: linear-gradient(145deg, #fff 10%, var(--balance-soft)); border-color: #d7e0fb; }
.metric.balance.negative { background: linear-gradient(145deg, #fff 10%, var(--expense-soft)); border-color: #f2cec7; }
.metric.savings { background: linear-gradient(145deg, #fff 10%, #fbf5df); border-color: #f0df9c; }
.metric-label { color: var(--muted); font-size: .86rem; font-weight: 700; }
.metric-value { margin-top: 9px; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 850; letter-spacing: -.035em; }
.metric-note { margin-top: 4px; color: var(--muted); font-size: .8rem; }
.content-grid { grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); margin-top: 16px; }
.comparison-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { padding: 22px; }
.panel h2 { margin: 0; font-size: 1.05rem; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.panel-note { color: var(--muted); font-size: .78rem; }
.empty { color: var(--muted); padding: 42px 0; text-align: center; }
.category-list { display: grid; gap: 15px; }
.category-row { display: grid; grid-template-columns: minmax(80px, 125px) 1fr auto; gap: 12px; align-items: center; }
.category-name { font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.category-track { height: 10px; border-radius: 999px; background: #edf1ef; overflow: hidden; }
.category-fill { height: 100%; border-radius: inherit; background: var(--accent); }
.category-value { font-variant-numeric: tabular-nums; font-size: .9rem; }
.trend { margin-top: 16px; }
.cashflow-chart { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; min-height: 224px; }
.cashflow-item { display: grid; grid-template-rows: 1fr auto auto; gap: 8px; min-height: 224px; text-align: center; color: var(--muted); font-size: .76rem; }
.cashflow-bars { display: flex; gap: 5px; align-items: end; justify-content: center; border-bottom: 1px solid var(--line); padding: 0 3px; }
.cashflow-bar { width: min(28px, 38%); min-height: 4px; border-radius: 8px 8px 2px 2px; }
.cashflow-bar.income { background: var(--income); }
.cashflow-bar.expense { background: var(--expense); }
.cashflow-net { font-weight: 800; font-size: .72rem; color: var(--balance); }
.cashflow-net.negative { color: var(--expense); }
.cashflow-legend { display: flex; justify-content: flex-end; gap: 14px; color: var(--muted); font-size: .78rem; }
.cashflow-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; background: var(--income); }
.cashflow-legend .expense-key::before { background: var(--expense); }
.annual-view { display: none; }
.annual-toolbar { display: flex; align-items: center; gap: 10px; }
.annual-toolbar label { color: var(--muted); font-size: .82rem; font-weight: 750; }
.annual-cashflow-chart { display: grid; grid-template-columns: repeat(12, minmax(52px, 1fr)); gap: 9px; align-items: end; min-height: 224px; overflow-x: auto; padding-bottom: 4px; }
.annual-month-list { display: grid; gap: 9px; }
.annual-month-row { display: grid; grid-template-columns: 70px repeat(5, minmax(110px, 1fr)); gap: 10px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.annual-month-title { font-size: 1rem; font-weight: 850; }
.annual-month-value span { display: block; color: var(--muted); font-size: .72rem; }
.annual-month-value strong { display: block; margin-top: 2px; font-size: .88rem; font-variant-numeric: tabular-nums; }
.annual-month-value .positive { color: var(--income); }
.annual-month-value .negative { color: var(--expense); }
.annual-month-value .zero { color: var(--muted); }
.trend-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; height: 150px; }
.trend-item { display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; text-align: center; color: var(--muted); font-size: .72rem; }
.trend-bar-wrap { display: flex; align-items: end; justify-content: center; }
.trend-bar { width: min(32px, 72%); min-height: 3px; background: #70c6a8; border-radius: 7px 7px 2px 2px; }
.transactions { margin-top: 16px; overflow: hidden; }
.transaction-table { width: 100%; border-collapse: collapse; }
.transaction-table th, .transaction-table td { padding: 14px 18px; text-align: left; border-top: 1px solid var(--line); }
.transaction-table th { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; }
.transaction-table td:last-child, .transaction-table th:last-child { text-align: right; }
.item { font-weight: 750; }
.invoice-line-items { margin-top: 5px; color: var(--muted); font-size: .78rem; }
.invoice-line-items summary { width: fit-content; cursor: pointer; color: var(--accent); font-weight: 750; }
.invoice-line-items-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.invoice-line-item { display: inline-flex; padding: 3px 7px; border-radius: 8px; background: #f0f5f2; color: var(--ink); }
.muted { color: var(--muted); font-size: .82rem; }
.status { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: #075c43; font-size: .75rem; font-weight: 750; }
.status.review { background: #fff0d8; color: var(--warn); }
.status.voided { background: var(--danger-soft); color: var(--danger); }
.direction { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: .75rem; font-weight: 750; }
.direction.income { color: #075c43; background: var(--income-soft); }
.direction.expense { color: #9b3324; background: var(--expense-soft); }
.amount-income { color: var(--income); font-weight: 800; }
.amount-expense { color: var(--expense); font-weight: 800; }
.login-shell { width: min(440px, calc(100% - 32px)); margin: 10vh auto 0; }
.login-card { padding: 30px; }
.login-card h1 { font-size: 2rem; }
.form-field { display: grid; gap: 7px; margin: 14px 0; }
.form-field label { font-weight: 750; }
.form-field input, .form-field select, .form-field textarea { width: 100%; }
.form-field textarea { min-height: 88px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
.error { background: var(--danger-soft); color: #9c2f1d; padding: 10px 12px; border-radius: 10px; }
.success { background: var(--accent-soft); color: #075c43; padding: 10px 12px; border-radius: 10px; }
.loading { opacity: .55; pointer-events: none; }
.methodology { margin: 18px 2px 0; color: var(--muted); font-size: .78rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.manage-dialog { width: min(680px, calc(100% - 28px)); max-height: min(88vh, 900px); border: 0; border-radius: 20px; padding: 0; box-shadow: 0 24px 80px rgba(10, 32, 25, .28); }
.manage-dialog::backdrop { background: rgba(13, 28, 23, .55); }
.dialog-shell { padding: 24px; overflow: auto; max-height: min(88vh, 900px); }
.dialog-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.dialog-head h2 { margin: 2px 0; }
.dialog-close { min-width: 44px; padding: 6px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.span-2 { grid-column: span 2; }
.check-row { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; }
.check-row input { min-height: 0; margin-top: 4px; }
.warning-box { background: #fff8e8; color: #744500; padding: 12px; border-radius: 12px; margin: 12px 0; }
.audit-list { display: grid; gap: 8px; margin: 10px 0 18px; padding: 0; list-style: none; }
.audit-list li { border-left: 3px solid var(--line); padding-left: 10px; color: var(--muted); font-size: .84rem; }
.taxonomy-list { display: grid; gap: 14px; margin: 18px 0; }
.taxonomy-category { border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.taxonomy-category-head, .taxonomy-subcategory { display: flex; align-items: center; gap: 8px; }
.taxonomy-category-head input, .taxonomy-subcategory input { flex: 1; min-width: 0; }
.taxonomy-subcategories { display: grid; gap: 8px; margin: 10px 0 2px 18px; }
.taxonomy-empty { color: var(--muted); font-size: .87rem; margin: 10px 0 0 18px; }
.management-list { display: grid; gap: 10px; margin: 16px 0; }
.management-row { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.management-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.management-row .form-grid { margin-top: 8px; }
.compact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.income-details { grid-column: span 2; border: 1px solid var(--line); border-radius: 14px; padding: 0 14px 12px; margin: 8px 0; }
.income-details summary { cursor: pointer; font-weight: 800; padding: 13px 0; }
.breakdown-summary { margin: 10px 0; padding: 12px; border-radius: 12px; background: #f7faf8; }
.pending-badge { display: inline-flex; min-width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 999px; background: #fff0d8; color: var(--warn); font-size: .76rem; font-weight: 800; }
.pie-layout { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: center; }
.pie { width: 150px; aspect-ratio: 1; border-radius: 50%; background: #edf1ef; position: relative; margin: 0 auto; }
.pie::after { content: ''; position: absolute; inset: 29%; background: var(--surface); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.pie.empty::after { content: '尚無資料'; display: grid; place-items: center; text-align: center; padding: 8px; color: var(--muted); font-size: .7rem; }
.analysis-heading { margin: 28px 0 0; }
.calendar-view { margin-top: 8px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.calendar-weekday { color: var(--muted); font-size: .76rem; font-weight: 800; padding: 0 5px 4px; text-align: center; }
.calendar-day { min-height: 122px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: left; vertical-align: top; }
.calendar-day.empty-day { background: transparent; border-color: transparent; }
.calendar-day.has-activity { cursor: pointer; box-shadow: 0 8px 20px rgba(25, 46, 39, .05); }
.calendar-day.has-activity:hover, .calendar-day.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.calendar-day-number { display: block; margin-bottom: 9px; font-weight: 800; }
.calendar-day-count { display: block; margin-bottom: 8px; color: var(--muted); font-size: .74rem; }
.calendar-flow { display: grid; gap: 5px; font-size: .75rem; font-variant-numeric: tabular-nums; }
.calendar-income { color: var(--income); }
.calendar-expense { color: var(--expense); }
.calendar-summary { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.calendar-summary-item { border-radius: 14px; padding: 14px; background: #f7faf8; }
.calendar-summary-item strong { display: block; margin-top: 4px; font-size: 1.05rem; }
.calendar-summary-item.income { background: var(--income-soft); }
.calendar-summary-item.expense { background: var(--expense-soft); }
.calendar-summary-item.balance { background: var(--balance-soft); }
.calendar-controls { display: flex; align-items: center; gap: 8px; }
.calendar-controls input { width: 150px; }
.income-list-panel { margin-top: 16px; }
.income-list-toolbar { display: flex; align-items: center; gap: 10px; }
.income-list-toolbar label { color: var(--muted); font-size: .82rem; font-weight: 750; }
.income-list-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.income-list-summary > div { padding: 13px; border-radius: 13px; background: #f7faf8; }
.income-list-summary strong { display: block; margin-top: 3px; font-size: 1.02rem; }
.income-overview-grid { margin-bottom: 16px; }
.income-legend-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.income-legend-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.income-record-list { display: grid; gap: 10px; }
.income-record { border: 1px solid var(--line); border-radius: 14px; padding: 0 14px; }
.income-record summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; cursor: pointer; padding: 14px 0; }
.income-record-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.income-record-amount { color: var(--income); font-weight: 850; font-variant-numeric: tabular-nums; }
.income-record-body { padding: 0 0 14px; }
.income-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.income-detail-item { padding: 10px; border-radius: 10px; background: #f7faf8; }
.income-detail-item span { display: block; color: var(--muted); font-size: .75rem; }
.income-detail-item strong { display: block; margin-top: 2px; font-size: .88rem; }
.income-record-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; color: var(--muted); font-size: .8rem; }
.filter-panel { margin-bottom: 16px; }
.filter-grid { display: grid; grid-template-columns: minmax(160px, .35fr) minmax(230px, 1fr); gap: 14px; align-items: end; }
.source-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; }
.filter-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: #075c43; }
.filter-chip input { min-height: 0; margin: 0; }
.loan-summary-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 16px; }
.loan-summary-card strong { display: block; margin-top: 4px; font-size: 1.25rem; }
.loan-summary-card .button { white-space: nowrap; }
.loan-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.loan-section { margin-top: 16px; }
.loan-list { display: grid; gap: 12px; }
.loan-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.loan-card-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.loan-card h3 { margin: 0; font-size: 1rem; }
.loan-amount { font-size: 1.15rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.loan-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
.loan-fact { padding: 10px; border-radius: 11px; background: #f7faf8; }
.loan-fact span { display: block; color: var(--muted); font-size: .72rem; }
.loan-fact strong { display: block; margin-top: 2px; font-size: .86rem; }
.progress-track { height: 8px; border-radius: 999px; background: #edf1ef; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: inherit; }
.pending-payment { border-color: #ecd39a; background: #fffaf0; }
.payment-history { margin-top: 12px; }
.payment-history summary { cursor: pointer; color: var(--muted); font-size: .82rem; font-weight: 750; }
.payment-history-list { display: grid; gap: 6px; margin-top: 8px; font-size: .8rem; color: var(--muted); }
.review-banner { margin-top: 16px; }
.review-banner .panel-head { margin-bottom: 10px; }
.review-banner .empty { padding: 0; text-align: left; }
body[data-view="calendar"] .overview-content { display: none; }
body[data-view="overview"] .calendar-view { display: none; }
body[data-view="annual"] .overview-content, body[data-view="annual"] .calendar-view { display: none; }
body[data-view="annual"] .annual-view { display: block; }
body[data-view="annual"] #month-select { display: none; }
@media (max-width: 900px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-grid { grid-template-columns: 1fr; }
  .comparison-grid { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .metric:first-child { grid-column: span 2; }
}
@media (max-width: 620px) {
  .shell { width: min(100% - 24px, 1180px); padding-top: 20px; }
  .topbar { display: grid; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .actions form { display: contents; }
  .actions .button, .actions select { width: 100%; }
  .actions .view-switch .button { width: auto; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric { padding: 16px; min-height: 116px; }
  .metric-value { font-size: 1.55rem; }
  .panel { padding: 17px; }
  .category-row { grid-template-columns: 92px 1fr; }
  .category-value { grid-column: 2; }
  .trend-list { grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
  .cashflow-chart { gap: 6px; }
  .cashflow-net { font-size: .64rem; }
  .transaction-table thead { display: none; }
  .transaction-table, .transaction-table tbody, .transaction-table tr, .transaction-table td { display: block; width: 100%; }
  .transaction-table tr { padding: 14px 16px; border-top: 1px solid var(--line); }
  .transaction-table td { border: 0; padding: 2px 0; }
  .transaction-table td:last-child { text-align: left; margin-top: 8px; }
  .form-grid { grid-template-columns: 1fr; }
  .compact-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dialog-actions .button { width: 100%; }
  .pie-layout { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .pie { width: 112px; }
  .calendar-grid { gap: 4px; }
  .calendar-weekday { font-size: .68rem; }
  .calendar-day { min-height: 94px; padding: 7px 5px; }
  .calendar-day-count { font-size: .67rem; margin-bottom: 5px; }
  .calendar-flow { font-size: .64rem; gap: 3px; }
  .calendar-summary { grid-template-columns: 1fr; gap: 8px; }
  .calendar-view .panel-head { display: grid; align-items: stretch; }
  .calendar-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .calendar-controls input { width: 100%; min-width: 0; }
  .annual-view .panel-head { display: grid; align-items: stretch; }
  .annual-toolbar { justify-content: space-between; }
  .annual-toolbar select { flex: 1; }
  .annual-month-row { grid-template-columns: 1fr 1fr; }
  .annual-month-title { grid-column: 1 / -1; }
  .income-list-panel .panel-head { display: grid; align-items: stretch; }
  .income-list-toolbar { justify-content: space-between; }
  .income-list-toolbar select { flex: 1; }
  .income-list-summary { grid-template-columns: 1fr; }
  .income-record summary { grid-template-columns: 1fr; gap: 4px; }
  .income-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main-nav { margin-bottom: 16px; }
  .filter-grid, .loan-summary-card { grid-template-columns: 1fr; }
.loan-summary-card .button { width: 100%; }
  .loan-metrics { grid-template-columns: 1fr 1fr; }
  .loan-facts { grid-template-columns: 1fr 1fr; }
}
.investment-summary-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.investment-summary-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; }
.investment-summary-item strong { display: block; margin-top: 3px; font-size: clamp(1.35rem, 3vw, 2rem); font-variant-numeric: tabular-nums; }
.investment-summary-item .button { flex: none; }
.investment-filter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.investment-filter .form-field { margin: 0; }
.investment-analysis { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; }
.investment-records { display: grid; gap: 10px; }
.investment-record { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(120px, .8fr) minmax(140px, .9fr) auto; gap: 14px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 14px; }
.investment-record.voided { opacity: .68; background: #faf8f7; }
.investment-record-title { font-weight: 850; }
.investment-record-cost { color: var(--muted); font-size: .82rem; }
.invoice-upload-grid { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); gap: 16px; align-items: start; }
.invoice-drop { display: grid; gap: 14px; padding: 26px; border: 2px dashed #b9cac3; border-radius: 16px; background: #f9fbfa; text-align: center; }
.invoice-drop.is-ready { border-color: var(--accent); background: var(--accent-soft); }
.invoice-drop input { width: 100%; background: var(--surface); }
.invoice-file-meta { color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.invoice-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.invoice-summary-item { padding: 14px; border-radius: 13px; background: #f7faf8; }
.invoice-summary-item strong { display: block; margin-top: 4px; font-size: 1.12rem; }
.invoice-preview-list { display: grid; gap: 10px; margin-top: 16px; }
.invoice-preview-row { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(120px, .75fr) minmax(110px, .7fr) auto; gap: 12px; align-items: center; padding: 15px; border: 1px solid var(--line); border-radius: 14px; }
.invoice-preview-row h3 { margin: 0 0 3px; font-size: .96rem; }
.invoice-preview-items { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-action { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: var(--accent-soft); color: #075c43; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.invoice-action.needs_review { background: #fff0d8; color: var(--warn); }
.invoice-action.duplicate { background: #edf1ef; color: var(--muted); }
.invoice-workflow-note { margin: 16px 0 0; padding: 13px; border-left: 4px solid var(--accent); background: #f7faf8; color: var(--muted); font-size: .84rem; }
.investment-signed { font-size: 1.05rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.investment-signed.positive { color: var(--income); }
.investment-signed.negative { color: var(--expense); }
.investment-signed.zero { color: var(--muted); }
.investment-completeness-list { display: grid; gap: 8px; }
.investment-completeness-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.investment-completeness-row strong { min-width: 92px; }
.investment-trend { display: grid; grid-template-columns: repeat(12, minmax(30px, 1fr)); gap: 8px; min-height: 210px; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
.investment-trend-item { min-width: 42px; display: grid; grid-template-rows: 1fr 1px 1fr auto; align-items: end; text-align: center; color: var(--muted); font-size: .7rem; }
.investment-trend-zero { height: 1px; background: var(--line); }
.investment-trend-bar { width: 66%; min-height: 3px; margin: 0 auto; border-radius: 6px 6px 0 0; background: var(--income); }
.investment-trend-bar.negative { align-self: start; border-radius: 0 0 6px 6px; background: var(--expense); }
.investment-note { margin-top: 6px; color: var(--muted); font-size: .78rem; }
.project-layout { display: grid; grid-template-columns: minmax(250px, .65fr) minmax(0, 1.35fr); gap: 16px; align-items: start; }
.project-list { display: grid; gap: 10px; }
.project-card { width: 100%; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.project-card:hover, .project-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.project-card-head, .project-detail-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.project-card-name { font-weight: 850; }
.project-card-meta { margin-top: 5px; color: var(--muted); font-size: .78rem; }
.project-status { display: inline-flex; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft); color: #075c43; font-size: .72rem; font-weight: 800; }
.project-status.archived { background: #edf1ef; color: var(--muted); }
.project-purpose { margin: 8px 0 0; color: var(--muted); }
.project-summary { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 14px; margin: 18px 0 16px; }
.project-expense-hero { min-height: 252px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; border: 1px solid #f2cec7; border-radius: 18px; background: linear-gradient(145deg, #fff 4%, var(--expense-soft)); }
.project-expense-hero .metric-label { font-size: 1rem; color: var(--expense); }
.project-expense-hero .metric-value { font-size: clamp(2.15rem, 5vw, 3.6rem); color: var(--expense); line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.project-expense-hero .metric-note { font-size: .95rem; }
.project-secondary-metrics { display: grid; grid-template-rows: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; }
.project-secondary-metric { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #f9fbfa; }
.project-secondary-metric.income { border-color: #bee9d9; background: linear-gradient(145deg, #fff 10%, var(--income-soft)); }
.project-secondary-metric .metric-value { font-size: clamp(1.4rem, 3vw, 2rem); overflow-wrap: anywhere; }
.project-budget-remaining { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.project-budget-remaining span { color: var(--muted); font-size: .78rem; font-weight: 750; }
.project-budget-remaining strong { font-size: 1rem; font-variant-numeric: tabular-nums; }
.project-net-note { margin: 0; padding: 10px 2px 0; color: var(--muted); font-size: .8rem; }
.project-records { display: grid; gap: 9px; }
.project-record { display: grid; grid-template-columns: 90px minmax(140px, 1.2fr) minmax(110px, .7fr) minmax(110px, .7fr) minmax(130px, auto); gap: 12px; align-items: baseline; padding: 13px; border: 1px solid var(--line); border-radius: 13px; }
.project-record-main { min-width: 0; }
.project-record-item { font-weight: 800; }
.project-record-date, .project-record-category, .project-record-payment { line-height: 1.35; }
.project-record-amount { justify-self: end; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.project-empty-detail { min-height: 360px; display: grid; place-items: center; }
@media (max-width: 760px) {
  .investment-summary-strip, .investment-analysis { grid-template-columns: 1fr; }
  .investment-summary-item { align-items: flex-start; }
  .investment-filter { grid-template-columns: 1fr; }
  .investment-record { grid-template-columns: 1fr auto; }
  .investment-record > :nth-child(2), .investment-record > :nth-child(3) { grid-column: 1 / -1; }
  .invoice-upload-grid { grid-template-columns: 1fr; }
  .invoice-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-preview-row { grid-template-columns: 1fr auto; }
  .invoice-preview-row > :nth-child(2), .invoice-preview-row > :nth-child(3) { grid-column: 1 / -1; }
  .project-layout { grid-template-columns: 1fr; }
  .project-summary { grid-template-columns: 1fr; }
  .project-expense-hero { min-height: 210px; }
  .project-secondary-metrics { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .project-record { grid-template-columns: 1fr auto; }
  .project-record-date { grid-column: 1; grid-row: 1; }
  .project-record-amount { grid-column: 2; grid-row: 1; }
  .project-record-main { grid-column: 1 / -1; grid-row: 2; }
  .project-record-category { grid-column: 1; grid-row: 3; }
  .project-record-payment { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; }
}
@media (max-width: 520px) {
  .project-secondary-metrics { grid-template-columns: 1fr; }
  .project-expense-hero { min-height: 190px; padding: 22px; }
}