*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --blue:#1d4d9e; --blue-mid:#2a5db0; --blue-light:#4a7fd4;
  --blue-pale:#ddeeff; --blue-ghost:#eef5ff;
  --orange:#f5930a; --orange-mid:#ffab4a; --orange-pale:#fff4e6; --orange-ghost:#fffaf3;
  --bg:#f4f7fc; --bg2:#ffffff; --surface:#ffffff; --surface2:#f0f4fa; --surface3:#e8eef8;
  --border:#d0daea; --border2:#bccbe0;
  --text:#0f1f3d; --text-mid:#3a5070; --text-dim:#6b82a0; --text-mute:#9ab0c8;
  --green:#1a7a4a; --green-bg:#e8f7ef; --red:#c0001e; --red-bg:#fdeef1;
  --warn:#b86000; --warn-bg:#fff3e0;
  --radius:6px; --radius-lg:10px; --radius-xl:14px;
  --shadow-sm:0 1px 3px rgba(30,60,120,0.08);
  --shadow:0 2px 12px rgba(30,60,120,0.1);
  --shadow-lg:0 8px 32px rgba(30,60,120,0.14);
  --font-sans:'Inter',system-ui,sans-serif;
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-mono:'JetBrains Mono',monospace;
}
html,body { height:100%; background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:14px; line-height:1.6; overflow:hidden; }

.app { display:grid; grid-template-columns:320px 1fr 360px; grid-template-rows:58px 1fr; height:100vh; }

.topbar { grid-column:1/-1; display:flex; align-items:center; padding:0 24px; background:var(--blue); gap:20px; position:relative; z-index:10; box-shadow:0 2px 8px rgba(15,31,61,0.2); }
.topbar-logo img { height:28px; display:block; }
.topbar-divider { width:1px; height:24px; background:rgba(255,255,255,0.2); }
.topbar-badge { display:flex; align-items:center; gap:8px; padding:4px 12px 4px 10px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:20px; }
.topbar-badge-icon { width:18px; height:18px; background:var(--orange); border-radius:50%; display:grid; place-items:center; font-size:9px; color:#fff; font-weight:700; flex-shrink:0; }
.topbar-badge-text { font-size:12px; font-weight:500; color:rgba(255,255,255,0.9); letter-spacing:0.02em; }
.topbar-spacer { flex:1; }
.status-pill { display:flex; align-items:center; gap:7px; font-size:12px; color:rgba(255,255,255,0.65); font-family:var(--font-mono); }
.status-dot { width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 6px #4ade80; animation:pulse-green 2.4s ease-in-out infinite; }
@keyframes pulse-green { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
.topbar-btn { padding:6px 16px; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.9); font-size:12px; font-weight:500; font-family:var(--font-sans); cursor:pointer; border-radius:var(--radius); transition:all 0.18s; }
.topbar-btn:hover { background:rgba(255,255,255,0.2); }
.topbar-btn.primary { background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600; }
.topbar-btn.primary:hover { background:#e8850a; }
.topbar-btn.primary:disabled { opacity:0.5; cursor:not-allowed; }

.sidebar-left { background:var(--bg2); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.sl-header { padding:18px 18px 0; flex-shrink:0; }
.section-label { font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-mute); margin-bottom:14px; }
.upload-scroll { flex:1; overflow-y:auto; padding:0 18px 18px; }
.upload-scroll::-webkit-scrollbar { width:3px; }
.upload-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.upload-zone { border:2px dashed var(--border); border-radius:var(--radius-lg); padding:32px 20px; text-align:center; background:var(--surface2); transition:all 0.2s; cursor:pointer; margin-bottom:18px; }
.upload-zone:hover { border-color:var(--blue-light); background:var(--blue-ghost); }
.upload-zone.dragover { border-color:var(--blue); background:var(--blue-ghost); box-shadow:0 0 0 3px rgba(29,77,158,0.08); }
.upload-icon { font-size:42px; margin-bottom:12px; opacity:0.5; }
.upload-title { font-size:14px; font-weight:600; color:var(--text); margin-bottom:6px; }
.upload-subtitle { font-size:12px; color:var(--text-dim); margin-bottom:14px; }
.upload-hint { font-size:11px; color:var(--text-mute); font-family:var(--font-mono); }
.upload-zone input[type="file"] { display:none; }

.file-list { display:flex; flex-direction:column; gap:8px; }
.file-item { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:12px 14px; display:flex; align-items:center; gap:10px; transition:all 0.15s; position:relative; overflow:hidden; }
.file-item::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue); opacity:0; transition:opacity 0.15s; }
.file-item:hover::before { opacity:1; }
.file-item.processing { opacity:0.6; pointer-events:none; }
.file-item.success::before { background:var(--green); opacity:1; }
.file-item.error::before { background:var(--red); opacity:1; }
.file-icon { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; font-size:14px; background:var(--blue-ghost); color:var(--blue); flex-shrink:0; font-weight:600; font-family:var(--font-mono); }
.file-item.success .file-icon { background:var(--green-bg); color:var(--green); }
.file-item.error .file-icon { background:var(--red-bg); color:var(--red); }
.file-info { flex:1; min-width:0; }
.file-name { font-size:12.5px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.file-meta { font-size:10.5px; color:var(--text-dim); font-family:var(--font-mono); }
.file-actions { display:flex; gap:6px; flex-shrink:0; }
.file-btn { width:26px; height:26px; border-radius:6px; border:1px solid var(--border); background:transparent; color:var(--text-dim); font-size:12px; cursor:pointer; display:grid; place-items:center; transition:all 0.15s; }
.file-btn:hover { background:var(--red-bg); border-color:var(--red); color:var(--red); }

.process-btn { margin:0 18px 18px; padding:14px; background:var(--blue); border:none; color:#fff; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; border-radius:var(--radius-lg); transition:all 0.18s; display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:0 2px 8px rgba(29,77,158,0.3); }
.process-btn:hover { background:var(--blue-mid); box-shadow:0 4px 16px rgba(29,77,158,0.35); transform:translateY(-1px); }
.process-btn:disabled { opacity:0.55; cursor:not-allowed; transform:none; }

.main-content { display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
.content-header { padding:20px 28px 0; flex-shrink:0; }
.content-heading { font-family:var(--font-serif); font-size:20px; font-weight:600; color:var(--text); letter-spacing:-0.01em; margin-bottom:3px; }
.content-heading span { color:var(--blue); }
.content-subtext { font-size:12px; color:var(--text-dim); }
.content-rule { height:1px; background:var(--border); margin:16px 28px; flex-shrink:0; }
.content-scroll { flex:1; overflow-y:auto; padding:0 28px 20px; }
.content-scroll::-webkit-scrollbar { width:4px; }
.content-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

.empty-state { text-align:center; padding:80px 40px; }
.empty-icon { font-size:64px; opacity:0.3; margin-bottom:20px; }
.empty-title { font-size:16px; font-weight:600; color:var(--text-mid); margin-bottom:8px; }
.empty-text { font-size:13px; color:var(--text-dim); line-height:1.6; }

.account-grid { display:grid; gap:16px; }
.account-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:all 0.2s; }
.account-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--blue); }
.account-card:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.account-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.account-id { display:flex; flex-direction:column; gap:4px; }
.account-number { font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--blue); letter-spacing:0.02em; }
.account-date { font-size:11px; color:var(--text-mute); font-family:var(--font-mono); }
.account-badge { padding:4px 10px; border-radius:16px; font-size:10px; font-weight:600; letter-spacing:0.04em; }
.account-badge.processed { background:var(--green-bg); color:var(--green); }
.account-badge.pending { background:var(--warn-bg); color:var(--warn); }
.account-header { cursor:pointer; user-select:none; }
.account-holder { font-size:12px; color:var(--text-dim); margin-top:2px; }
.account-toggle { font-size:16px; color:var(--text-mute); transition:transform 0.2s; }
.account-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:16px; border-top:1px solid var(--border); }
.summary-item { display:flex; flex-direction:column; gap:4px; }
.summary-label { font-size:10px; color:var(--text-mute); text-transform:uppercase; letter-spacing:0.08em; font-weight:600; }
.summary-value { font-family:var(--font-serif); font-size:18px; font-weight:600; color:var(--text); }
.summary-value.negative { color:var(--red); }
.summary-value.positive { color:var(--green); }

.transaction-section { margin-top:20px; }
.transaction-section-title { font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-mute); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.transaction-section-count { background:var(--surface3); padding:2px 8px; border-radius:10px; font-size:10px; }
.transaction-table { width:100%; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
.transaction-table thead { background:var(--surface3); }
.transaction-table th { text-align:left; padding:10px 12px; font-size:10px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); border-bottom:1px solid var(--border); }
.transaction-table td { padding:10px 12px; font-size:12px; color:var(--text-mid); border-bottom:1px solid rgba(0,0,0,0.04); }
.transaction-table tr:last-child td { border-bottom:none; }
.transaction-table tr:hover { background:var(--blue-ghost); }
.tx-date { font-family:var(--font-mono); font-size:11px; color:var(--text-mute); white-space:nowrap; }
.tx-description { max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-category { display:inline-flex; padding:3px 8px; border-radius:12px; font-size:10px; font-weight:600; background:var(--blue-ghost); color:var(--blue); }
.tx-amount { font-family:var(--font-mono); font-weight:600; white-space:nowrap; }
.tx-amount.debit { color:var(--red); }
.tx-amount.credit { color:var(--green); }

.sidebar-right { background:var(--bg2); border-left:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; }
.sr-header { padding:18px 18px 0; flex-shrink:0; }
.sr-content { flex:1; overflow-y:auto; padding:18px; }
.sr-content::-webkit-scrollbar { width:3px; }
.sr-content::-webkit-scrollbar-thumb { background:var(--border); }

.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-bottom:12px; box-shadow:var(--shadow-sm); }
.stat-label { font-size:11px; color:var(--text-dim); margin-bottom:6px; font-weight:500; }
.stat-value { font-family:var(--font-serif); font-size:26px; font-weight:600; color:var(--text); letter-spacing:-0.02em; }
.stat-change { font-size:11px; margin-top:6px; font-weight:500; display:flex; align-items:center; gap:4px; }
.stat-change.up { color:var(--green); }
.stat-change.down { color:var(--red); }
.stat-change.neutral { color:var(--text-mute); }

.category-list { display:flex; flex-direction:column; gap:10px; }
.category-item-wrapper { margin-bottom:8px; }
.category-item { display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); transition:all 0.15s; cursor:pointer; }
.category-item:hover { background:var(--blue-ghost); border-color:var(--blue-pale); }
.category-details { background:var(--surface-dim); border:1px solid var(--border); border-top:none; border-radius:0 0 var(--radius) var(--radius); margin-top:-1px; max-height:300px; overflow-y:auto; }

.finance-summary-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; }
.finance-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.finance-label { font-size:13px; color:var(--text-dim); font-weight:500; }
.finance-label.balance { font-size:14px; color:var(--text); font-weight:600; }
.finance-value { font-size:16px; font-weight:600; font-family:var(--font-mono); }
.finance-value.positive { color:var(--green); }
.finance-value.negative { color:var(--red); }
.finance-value.balance { font-size:18px; }
.finance-divider { height:1px; background:var(--border); margin:8px 0; }
.category-name { font-size:12px; font-weight:500; color:var(--text-mid); }
.category-count { font-size:11px; color:var(--text-mute); font-family:var(--font-mono); background:var(--surface3); padding:2px 8px; border-radius:10px; }

.progress-bar { height:6px; background:var(--surface3); border-radius:3px; overflow:hidden; margin-top:8px; }
.progress-fill { height:100%; background:var(--blue); transition:width 0.3s; border-radius:3px; }

.typing-wrap { display:flex; align-items:center; gap:12px; padding:14px 0; }
.typing-dots { display:flex; gap:4px; align-items:center; }
.typing-dots span { width:6px;height:6px;border-radius:50%; background:var(--blue-light); animation:td 1.2s ease-in-out infinite; }
.typing-dots span:nth-child(2){animation-delay:.2s;} .typing-dots span:nth-child(3){animation-delay:.4s;}
@keyframes td { 0%,80%,100%{transform:translateY(0);opacity:.35;} 40%{transform:translateY(-5px);opacity:1;} }

.overlay { position:fixed;inset:0; background:rgba(15,31,61,0.5); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.22s; }
.overlay.open { opacity:1; pointer-events:all; }

.detail-panel { width:780px; max-height:85vh; background:var(--bg2); border:1px solid var(--border2); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; transform:translateY(14px) scale(0.98); transition:transform 0.22s cubic-bezier(0.22,1,0.36,1); }
.overlay.open .detail-panel { transform:translateY(0) scale(1); }
.detail-header { display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); background:var(--blue-ghost); }
.detail-title { font-family:var(--font-serif); font-size:16px; font-weight:600; color:var(--text); }
.detail-close { width:30px;height:30px; background:var(--surface3); border:1px solid var(--border); color:var(--text-dim); font-size:17px; cursor:pointer; display:grid; place-items:center; border-radius:7px; transition:all 0.15s; line-height:1; }
.detail-close:hover { background:var(--red-bg); border-color:var(--red); color:var(--red); }
.detail-body { padding:22px; overflow-y:auto; flex:1; }
.detail-footer { padding:16px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:10px; background:var(--surface2); }
.btn-ghost { padding:8px 18px; background:transparent; border:1.5px solid var(--border2); color:var(--text-mid); font-size:13px; font-weight:500; cursor:pointer; border-radius:var(--radius); transition:all 0.15s; }
.btn-ghost:hover { border-color:var(--blue-light); color:var(--blue); }
.btn-primary { padding:8px 22px; background:var(--blue); border:none; color:#fff; font-size:13px; font-weight:600; cursor:pointer; border-radius:var(--radius); transition:all 0.15s; box-shadow:0 2px 8px rgba(29,77,158,0.25); }
.btn-primary:hover { background:var(--blue-mid); }

.notification { position:fixed; top:80px; right:24px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 20px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:12px; min-width:320px; z-index:200; transform:translateX(400px); opacity:0; transition:all 0.3s cubic-bezier(0.22,1,0.36,1); }
.notification.show { transform:translateX(0); opacity:1; }
.notification.success { border-left:4px solid var(--green); }
.notification.error { border-left:4px solid var(--red); }
.notification.info { border-left:4px solid var(--blue); }
.notification-icon { font-size:20px; }
.notification-text { flex:1; font-size:13px; color:var(--text); }
.notification-close { width:24px; height:24px; border-radius:50%; background:var(--surface3); border:none; color:var(--text-dim); cursor:pointer; display:grid; place-items:center; font-size:14px; transition:all 0.15s; }
.notification-close:hover { background:var(--red-bg); color:var(--red); }

/* Account Transactions */
.account-transactions-wrapper { border-top:1px solid var(--border); margin-top:16px; }
.account-transactions { padding:16px 0; }
.transaction-row { display:flex; justify-content:space-between; align-items:flex-start; padding:12px 16px; border-bottom:1px solid rgba(0,0,0,0.04); transition:background 0.15s; }
.transaction-row:hover { background:var(--blue-ghost); }
.transaction-row:last-child { border-bottom:none; }
.transaction-row.transfer { background:var(--surface2); }
.transaction-row.transfer:hover { background:var(--surface3); }
.transaction-main { flex:1; min-width:0; }
.transaction-counterparty { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.transaction-purpose { font-size:11px; color:var(--text-dim); line-height:1.5; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--font-mono); }
.transaction-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.transaction-date { font-size:11px; font-family:var(--font-mono); color:var(--text-mute); }
.transaction-category { font-size:10px; padding:2px 6px; border-radius:10px; background:var(--blue-ghost); color:var(--blue); font-weight:500; }
.transaction-subcategory { font-size:10px; padding:2px 6px; border-radius:10px; background:var(--surface3); color:var(--text-dim); }
.transaction-transfer-badge { font-size:10px; padding:2px 6px; border-radius:10px; background:var(--warn-bg); color:var(--warn); font-weight:500; }
.transaction-amount { font-family:var(--font-mono); font-size:14px; font-weight:600; white-space:nowrap; padding-top:2px; }
.transaction-amount.positive { color:var(--green); }
.transaction-amount.negative { color:var(--red); }
.transaction-amount.transfer { color:var(--text-mute); }

/* Account Chart */
.account-chart-wrapper { 
  padding:16px; 
  border-top:1px solid var(--border); 
  height:140px; 
  position:relative;
}

.account-chart-wrapper canvas {
  max-height:120px;
}