*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --bg: #f5f4f0; --surface: #ffffff; --surface2: #f0efe9;
    --border: rgba(0,0,0,0.08); --border2: rgba(0,0,0,0.14);
    --text: #1a1917; --text2: #6b6a65; --text3: #9e9d98;
    --blue: #2563eb; --blue-light: #eff4ff; --blue-border: #bfcffe;
    --green: #16a34a; --green-light: #f0fdf4; --green-border: #86efac;
    --red: #dc2626; --red-light: #fef2f2; --red-border: #fca5a5;
    --amber: #d97706; --amber-light: #fffbeb; --amber-border: #fcd34d;
    --purple: #7c3aed; --purple-light: #f5f3ff; --purple-border: #c4b5fd;
    --radius: 10px; --radius-sm: 6px;
    --shadow: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #111110; --surface: #1c1c1a; --surface2: #242421;
      --border: rgba(255,255,255,0.07); --border2: rgba(255,255,255,0.13);
      --text: #e8e7e2; --text2: #9a9890; --text3: #5e5d58;
      --blue: #60a5fa; --blue-light: #1e2a45; --blue-border: #2d4272;
      --green: #4ade80; --green-light: #0f2a1a; --green-border: #166534;
      --red: #f87171; --red-light: #2a1010; --red-border: #7f1d1d;
      --amber: #fbbf24; --amber-light: #2a1f06; --amber-border: #78350f;
      --purple: #a78bfa; --purple-light: #1e1a3a; --purple-border: #4c1d95;
      --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    }
  }
  body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; min-height: 100vh; }

  /* Login */
  #login-screen { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
  .login-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: min(400px, 100%); box-shadow: var(--shadow-md); }
  .login-brand { display: flex; flex-direction:column; align-items: center; gap: 8px; margin-bottom: 28px; }
  .login-brand-icon { color: var(--blue); font-size: 24px; }
  .login-brand-name { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; }
  .agile-logo { display:inline-block; vertical-align:middle; }
  .agile-logo img { height:1em; vertical-align:-0.1em; filter:brightness(0.7); }
  .agile-byline { font-size:10px; color:var(--text3); letter-spacing:0.5px; display:flex; align-items:center; gap:4px; }
  .login-title { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
  .login-sub { font-size: 13px; color: var(--text2); margin-bottom: 24px; }
  .login-field { margin-bottom: 16px; }
  .login-label { font-size: 11px; color: var(--text2); display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; }
  .login-input { width: 100%; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border2); font-family: 'DM Sans', sans-serif; font-size: 14px; background: var(--surface2); color: var(--text); outline: none; transition: border-color 0.15s; }
  .login-input:focus { border-color: var(--blue); background: var(--surface); }
  .login-btn { width: 100%; padding: 11px; border-radius: var(--radius-sm); background: var(--blue); border: none; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity 0.15s; margin-top: 4px; }
  .login-btn:hover { opacity: 0.9; }
  .login-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .login-error { font-size: 12px; color: var(--red); margin-top: 12px; padding: 8px 12px; background: var(--red-light); border-radius: var(--radius-sm); border: 1px solid var(--red-border); display: none; }
  .login-error.show { display: block; }
  .login-remember { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 12px; color: var(--text2); cursor: pointer; }

  /* Loading */
  #loading { position: fixed; inset: 0; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 9998; }
  .loading-brand { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
  .loading-sub { font-size: 13px; color: var(--text2); }
  .loading-spinner { width: 28px; height: 28px; border: 2px solid var(--border2); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Nav */
  #nav { background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 24px; height: 52px; position: sticky; top: 0; z-index: 100; }
  .nav-brand { font-size: 15px; font-weight: 600; margin-right: 28px; letter-spacing: -0.02em; display: flex; align-items: center; gap: 6px; }
  .nav-brand-dot { color: var(--blue); font-size: 18px; }
  .nav-tabs { display: flex; height: 100%; }
  .nav-tab { height: 100%; padding: 0 16px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text2); font-weight: 400; transition: color 0.15s; }
  .nav-tab.active { color: var(--text); font-weight: 500; border-bottom-color: var(--blue); }
  .nav-tab:hover:not(.active) { color: var(--text); }
  .nav-spacer { flex: 1; }
  .nav-actions { display: flex; gap: 8px; align-items: center; }
  .btn { padding: 6px 14px; border-radius: var(--radius-sm); font-family: 'DM Sans', sans-serif; font-size: 12px; cursor: pointer; font-weight: 500; transition: all 0.15s; }
  .btn-ghost { background: var(--surface2); border: 1px solid var(--border2); color: var(--text2); }
  .btn-ghost:hover { color: var(--text); }
  .btn-primary { background: var(--blue); border: none; color: #fff; }
  .btn-primary:hover { opacity: 0.9; }
  .btn-danger { background: none; border: none; color: var(--text3); padding: 2px 6px; font-size: 13px; cursor: pointer; }
  .btn-danger:hover { color: var(--red); }
  .btn-logout { background: none; border: 1px solid var(--border2); color: var(--text3); padding: 5px 12px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer; font-family: 'DM Sans', sans-serif; }
  .btn-logout:hover { color: var(--red); border-color: var(--red-border); }

  /* Sync */
  #sync-status { font-size: 11px; color: var(--text3); display: flex; align-items: center; gap: 5px; margin-right: 4px; }
  .sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); display: inline-block; }
  .sync-dot.saving { background: var(--amber); animation: pulse 1s infinite; }
  .sync-dot.error { background: var(--red); }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }

  /* Page */
  #page { max-width: 1060px; margin: 0 auto; padding: 28px 20px; }
  .page-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
  .page-title { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
  .page-meta { font-size: 12px; color: var(--text3); }
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
  .card-title { font-size: 13px; font-weight: 500; margin-bottom: 16px; }
  .card-collapse { cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; }
  .card-collapse::after { content:'▾'; font-size:11px; color:var(--text3); transition:transform 0.2s; }
  .card-collapse.collapsed::after { transform:rotate(-90deg); }
  .card-collapse-body { transition:max-height 0.2s ease; overflow:hidden; }
  .card-collapse-body.collapsed { max-height:0!important; margin:0!important; padding:0!important; }
  .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
  .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
  .kpi-label { font-size: 11px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
  .kpi-value { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
  .kpi-badge { display: inline-block; font-size: 13px; padding: 3px 8px; border-radius: 20px; margin-left: 8px; font-weight: 600; vertical-align: middle; }
  .badge-up { background: var(--green-light); color: var(--green); }
  .badge-dn { background: var(--red-light); color: var(--red); }
  .alert-banner { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; cursor: pointer; font-size: 13px; background: var(--amber-light); border: 1px solid var(--amber-border); color: var(--amber); }
  .alert-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
  .dash-grid { display: grid; grid-template-columns: 1fr 280px; gap: 16px; margin-bottom: 16px; }
  canvas { display: block; }
  .chart-legend { display: flex; gap: 14px; font-size: 11px; color: var(--text2); margin-bottom: 14px; }
  .legend-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 4px; }
  .donut-legend { width: 100%; margin-top: 10px; }
  .donut-legend-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 11px; }
  .donut-legend-label { display: flex; align-items: center; gap: 5px; color: var(--text2); }
  .donut-legend-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .donut-legend-val { font-weight: 500; color: var(--text); font-family: 'DM Mono', monospace; font-size: 11px; }
  .txn-list {}
  .txn-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; position: relative; }
  .txn-row:last-child { border-bottom: none; }
  .txn-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .txn-date { color: var(--text3); font-size: 11px; min-width: 68px; flex-shrink: 0; font-family: 'DM Mono', monospace; }
  .txn-desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
  .txn-fx { font-size: 10px; color: var(--purple); background: var(--purple-light); border: 1px solid var(--purple-border); padding: 1px 6px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; font-family: 'DM Mono', monospace; }
  .txn-amount { font-weight: 500; font-size: 13px; min-width: 90px; text-align: right; font-family: 'DM Mono', monospace; flex-shrink: 0; }
  .txn-amount.positive { color: var(--green); }
  .cat-btn { font-size: 10px; padding: 2px 9px; border-radius: 20px; cursor: pointer; border: 1px solid; white-space: nowrap; font-family: 'DM Sans', sans-serif; font-weight: 500; background: var(--surface2); color: var(--text2); border-color: var(--border2); position: relative; }
  .cat-btn.uncategorised { background: var(--amber-light); color: var(--amber); border-color: var(--amber-border); }
  .cat-source-badge { font-size: 9px; flex-shrink: 0; cursor: default; }
  .bar-tip { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-sm); padding: 6px 10px; box-shadow: var(--shadow-md); white-space: nowrap; pointer-events: none; z-index: 10; }
  .curr-btn { font-size: 10px; padding: 2px 8px; border-radius: 20px; cursor: pointer; border: 1px solid var(--border2); white-space: nowrap; font-family: 'DM Mono', monospace; font-weight: 500; background: var(--surface2); color: var(--text3); position: relative; flex-shrink: 0; }
  .curr-btn.foreign { background: var(--purple-light); color: var(--purple); border-color: var(--purple-border); }
  .curr-btn.fx-missing { background: var(--red-light); color: var(--red); border-color: var(--red-border); animation: pulse 2s infinite; }
  .curr-btn:hover { border-color: var(--purple); color: var(--purple); }
  .curr-dropdown { position: fixed; z-index: 1000; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 100px; max-height: 260px; overflow-y: auto; padding: 4px 0; }
  .curr-dropdown-item { padding: 5px 12px; cursor: pointer; font-size: 12px; color: var(--text); font-family: 'DM Mono', monospace; transition: background 0.1s; }
  .curr-dropdown-item:hover { background: var(--surface2); }
  .curr-dropdown-item.selected { color: var(--purple); font-weight: 500; }
  .cat-dropdown { position: absolute; right: 0; top: calc(100% + 4px); z-index: 200; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 210px; max-height: 280px; overflow-y: auto; padding: 6px 0; }
  .cat-dropdown-suggestion { padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
  .cat-dropdown-suggestion-label { font-size: 10px; color: var(--text3); margin-bottom: 6px; }
  .cat-suggestion-btn { font-size: 11px; padding: 3px 10px; border-radius: 20px; cursor: pointer; background: var(--green-light); color: var(--green); border: 1px solid var(--green-border); font-family: 'DM Sans', sans-serif; font-weight: 500; }
  .cat-dropdown-item { padding: 6px 14px; cursor: pointer; font-size: 12px; color: var(--text); transition: background 0.1s; }
  .cat-dropdown-item:hover { background: var(--surface2); }
  .cat-dropdown-item.selected { color: var(--blue); font-weight: 500; }
  .cat-dropdown-group { padding: 6px 14px 2px; font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
  .filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
  .filter-input, .filter-select { padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border2); font-family: 'DM Sans', sans-serif; font-size: 12px; background: var(--surface); color: var(--text); outline: none; }
  .filter-input { flex: 1; min-width: 160px; }
  .filter-input:focus, .filter-select:focus { border-color: var(--blue); }
  .summary-bar { display: flex; gap: 20px; padding: 9px 14px; background: var(--surface2); border-radius: var(--radius-sm); margin-bottom: 12px; font-size: 12px; color: var(--text2); align-items: center; }
  .report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .cat-bar-row { margin-bottom: 10px; }
  .cat-bar-meta { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
  .cat-bar-label { color: var(--text2); }
  .cat-bar-val { font-weight: 500; font-family: 'DM Mono', monospace; }
  .cat-bar-track { height: 4px; border-radius: 2px; background: var(--surface2); }
  .cat-bar-fill { height: 4px; border-radius: 2px; }
  .account-grid { display: flex; gap: 12px; flex-wrap: wrap; }
  .account-card { flex: 1; min-width: 160px; background: var(--surface2); border-radius: var(--radius-sm); padding: 14px 16px; }
  .account-name { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
  .account-value { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; font-family: 'DM Mono', monospace; }
  .account-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }

  /* FX rate section */
  .fx-section { background: var(--purple-light); border: 1px solid var(--purple-border); border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 4px; }
  .fx-section-title { font-size: 11px; color: var(--purple); font-weight: 500; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
  .fx-row { display: flex; gap: 8px; align-items: flex-end; }
  .fx-field { flex: 1; }
  .fx-label { font-size: 11px; color: var(--text2); display: block; margin-bottom: 4px; }
  .fx-input, .fx-select { width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--purple-border); font-family: 'DM Sans', sans-serif; font-size: 12px; background: var(--surface); color: var(--text); outline: none; }
  .fx-input:focus, .fx-select:focus { border-color: var(--purple); }
  .fx-fetch-btn { padding: 8px 12px; border-radius: var(--radius-sm); border: none; background: var(--purple); color: #fff; font-size: 11px; font-family: 'DM Sans', sans-serif; cursor: pointer; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
  .fx-fetch-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .fx-rate-display { font-size: 11px; color: var(--purple); margin-top: 6px; font-family: 'DM Mono', monospace; }

  /* Modal */
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .modal { background: var(--surface); border-radius: 14px; padding: 28px; width: min(480px, 100%); box-shadow: var(--shadow-md); max-height: 90vh; overflow-y: auto; }
  .modal-lg { width: min(740px, 100%); display: flex; flex-direction: column; }
  .modal-title { font-size: 16px; font-weight: 600; margin-bottom: 4px; letter-spacing: -0.02em; }
  .modal-sub { font-size: 12px; color: var(--text2); margin-bottom: 20px; }
  .modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
  .form-field { margin-bottom: 14px; }
  .form-label { font-size: 11px; color: var(--text2); display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; }
  .form-input, .form-select { width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border2); font-family: 'DM Sans', sans-serif; font-size: 13px; background: var(--surface2); color: var(--text); outline: none; }
  .form-input:focus, .form-select:focus { border-color: var(--blue); background: var(--surface); }
  .type-toggle { display: flex; gap: 8px; }
  .type-btn { flex: 1; padding: 8px 0; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-family: 'DM Sans', sans-serif; font-weight: 500; border: 1px solid var(--border2); background: var(--surface2); color: var(--text2); transition: all 0.15s; }
  .type-btn.active-income { background: var(--green-light); color: var(--green); border-color: var(--green-border); }
  .type-btn.active-expense { background: var(--red-light); color: var(--red); border-color: var(--red-border); }
  .type-btn.active-transfer { background: var(--blue-light); color: var(--blue); border-color: var(--blue-border); }
  .ai-suggest-pill { display: inline-block; margin-top: 6px; font-size: 11px; padding: 3px 10px; border-radius: 20px; cursor: pointer; background: var(--green-light); color: var(--green); border: 1px solid var(--green-border); font-family: 'DM Sans', sans-serif; font-weight: 500; }
  .import-scroll { flex: 1; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
  .import-row { display: flex; gap: 8px; padding: 7px 12px; align-items: center; border-bottom: 1px solid var(--border); font-size: 12px; }
  .import-row:last-child { border-bottom: none; }
  .import-date { color: var(--text2); min-width: 72px; font-family: 'DM Mono', monospace; font-size: 11px; }
  .import-desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .import-amt { min-width: 80px; text-align: right; font-weight: 500; font-family: 'DM Mono', monospace; }
  .import-select { font-size: 11px; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); max-width: 150px; font-family: 'DM Sans', sans-serif; }
  .import-select.ai-match { background: var(--green-light); border-color: var(--green-border); color: var(--green); }
  .import-select.cat-income { background: var(--green-light); border-color: var(--green-border); color: var(--green); }
  .import-select.cat-expense { background: var(--amber-light); border-color: var(--amber-border); color: var(--amber); }
  .import-select.cat-transfer { background: var(--blue-light); border-color: var(--blue-border); color: var(--blue); }
  .import-select.cat-ignore { background: var(--surface2); border-color: var(--border2); color: var(--text3); }
  .import-curr-select { font-size: 11px; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--purple-border); background: var(--purple-light); color: var(--purple); max-width: 80px; font-family: 'DM Mono', monospace; }

  #toast { position: fixed; bottom: 24px; right: 24px; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; z-index: 2000; box-shadow: var(--shadow-md); transform: translateY(60px); opacity: 0; transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1); pointer-events: none; }
  #toast.show { transform: translateY(0); opacity: 1; }
  #toast.ok { background: #16a34a; color: #fff; }
  #toast.err { background: #dc2626; color: #fff; }
  #import-paste-zone:hover { border-color: var(--blue); background: var(--surface2); }
  #import-paste-zone:focus { border-color: var(--blue); background: var(--surface2); outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
  .view-all-btn { font-size: 11px; color: var(--blue); background: none; border: none; cursor: pointer; padding: 0; }
  .sparkline-months { display: flex; justify-content: space-between; margin-bottom: 10px; }
  .sparkline-month { text-align: center; flex: 1; }
  .sparkline-month-label { font-size: 10px; color: var(--text3); margin-bottom: 3px; }
  .sparkline-month-val { font-size: 11px; font-weight: 600; font-family: 'DM Mono', monospace; }

  /* FX summary table */
  .fx-summary { width: 100%; border-collapse: collapse; font-size: 12px; }
  .fx-summary th { text-align: left; padding: 6px 10px; font-size: 11px; color: var(--text2); font-weight: 500; border-bottom: 1px solid var(--border); }
  .fx-summary td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); font-family: 'DM Mono', monospace; }
  .fx-summary tr:last-child td { border-bottom: none; }

  /* Date range picker */
  .range-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .range-btn { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-family: 'DM Sans', sans-serif; font-weight: 500; cursor: pointer; border: 1px solid var(--border2); background: var(--surface); color: var(--text2); transition: all 0.15s; white-space: nowrap; }
  .range-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
  .range-btn:hover:not(.active) { color: var(--text); border-color: var(--text3); }
  .range-custom { display: flex; gap: 6px; align-items: center; }
  .range-date-input { padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border2); font-family: 'DM Mono', monospace; font-size: 11px; background: var(--surface); color: var(--text); outline: none; width: 120px; }
  .range-date-input:focus { border-color: var(--blue); }
  .range-label { font-size: 11px; color: var(--text3); }

  /* Breakdown widget */
  .breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .breakdown-section-title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
  .breakdown-section-title .b-dot { width: 6px; height: 6px; border-radius: 50%; }
  .breakdown-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; transition: background 0.15s; border-radius: 6px; padding: 4px 6px; margin-left: -6px; margin-right: -6px; }
  .breakdown-row:hover { background: var(--surface2); }
  .breakdown-rank { font-size: 10px; color: var(--text3); min-width: 14px; text-align: right; font-family: 'DM Mono', monospace; }
  .breakdown-info { flex: 1; min-width: 0; }
  .breakdown-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3px; }
  .breakdown-cat { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .breakdown-val { font-size: 12px; font-weight: 500; font-family: 'DM Mono', monospace; flex-shrink: 0; margin-left: 8px; }
  .breakdown-track { height: 4px; border-radius: 2px; background: var(--surface2); }
  .breakdown-fill { height: 4px; border-radius: 2px; transition: width 0.3s; }
  .breakdown-pct { font-size: 10px; color: var(--text3); font-family: 'DM Mono', monospace; }
  .breakdown-empty { font-size: 12px; color: var(--text3); text-align: center; padding: 20px 0; }
  @media (max-width: 600px) { .breakdown-grid { grid-template-columns: 1fr; } }
  @media (max-width: 700px) { .dash-grid,.report-grid { grid-template-columns: 1fr; } .kpi-row { grid-template-columns: 1fr; } }
  @media (max-width: 640px) {
    /* Nav */
    #nav { font-size:11px; gap:2px; padding:6px 8px; overflow-x:auto; height:auto; min-height:44px; }
    #nav a { padding:4px 6px; white-space:nowrap; }
    .page-header { flex-wrap:wrap; }
    .page-title { font-size:18px; }
    /* Cards */
    .card { padding:12px !important; }
    /* Balance sheet net worth */
    .card [style*="font-size:36px"] { font-size:24px !important; }
    /* Account rows — stack vertically on mobile */
    .bs-account-row { flex-wrap:wrap !important; gap:6px !important; padding:10px !important; }
    .bs-account-row > div:first-child { width:100%; min-width:100%; }
    .bs-account-row input[type="text"] { font-size:12px !important; }
    .bs-account-row select { font-size:10px !important; }
    .bs-account-row .bs-bal-display { font-size:13px !important; }
    /* Subtotal rows */
    .bs-subtotal-row { font-size:12px !important; flex-wrap:wrap; }
    /* Transaction rows */
    .txn-row { font-size:12px; gap:6px; }
    .txn-date { font-size:11px; min-width:50px; }
    .txn-desc { font-size:12px; }
    .txn-amount { font-size:12px; min-width:70px; }
    .txn-fx { font-size:9px; padding:1px 4px; }
    .cat-btn { font-size:10px; padding:2px 6px; }
    /* Filters */
    .filters { gap:4px; }
    .filter-select { font-size:11px; padding:4px 8px; }
    .summary-bar { font-size:11px; flex-wrap:wrap; gap:6px; }
    /* Import modal */
    .modal { max-width:95vw; margin:8px; }
    .modal-lg { max-width:95vw; }
    .import-row { font-size:11px; gap:4px; padding:6px 8px; }
    /* Portfolio selector */
    [style*="margin-bottom:16px"] .filter-select { font-size:11px; padding:4px 8px; }
    /* Search bar */
    .search-input { font-size:13px; }
    /* Group by buttons */
    .btn { font-size:12px; padding:6px 12px; }
  }

  /* AI Chat Panel */
  #ai-panel { position: fixed; top: 52px; right: 0; bottom: 0; width: 400px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -4px 0 20px rgba(0,0,0,0.15); z-index: 500; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
  #ai-panel.open { transform: translateX(0); }
  .ai-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .ai-header-title { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
  .ai-header-close { background: none; border: none; color: var(--text3); font-size: 18px; cursor: pointer; padding: 2px 6px; }
  .ai-header-close:hover { color: var(--text); }
  .ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .ai-msg { max-width: 95%; font-size: 13px; line-height: 1.55; }
  .ai-msg-user { align-self: flex-end; background: var(--blue); color: #fff; padding: 8px 12px; border-radius: 12px 12px 2px 12px; }
  .ai-msg-ai { align-self: flex-start; background: var(--surface2); color: var(--text); padding: 10px 14px; border-radius: 12px 12px 12px 2px; border: 1px solid var(--border); }
  .ai-msg-ai strong { font-weight: 600; }
  .ai-msg-err { align-self: center; background: var(--red-light); color: var(--red); border: 1px solid var(--red-border); padding: 8px 12px; border-radius: 8px; font-size: 12px; }
  .ai-msg-ctx { align-self: center; font-size: 10px; color: var(--text3); padding: 2px 8px; background: var(--surface2); border-radius: 10px; }
  .ai-typing { display: flex; gap: 4px; padding: 10px 14px; align-self: flex-start; }
  .ai-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); animation: ai-bounce 1.2s infinite; }
  .ai-typing span:nth-child(2) { animation-delay: 0.2s; }
  .ai-typing span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes ai-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }
  .ai-input-bar { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--surface); }
  .ai-input { flex: 1; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border2); font-family: 'DM Sans', sans-serif; font-size: 13px; background: var(--surface2); color: var(--text); outline: none; resize: none; }
  .ai-input:focus { border-color: var(--blue); background: var(--surface); }
  .ai-send { padding: 8px 14px; border-radius: 8px; background: var(--green); border: none; color: #fff; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; flex-shrink: 0; }
  .ai-send:hover { opacity: 0.9; }
  .ai-send:disabled { opacity: 0.5; cursor: not-allowed; }
  @media (max-width: 640px) { #ai-panel { width: 100vw; } }