:root {
  --accent: #1d4ed8;
  --accent-soft: #eff6ff;
  --ink: #152033;
  --muted: #64748b;
  --line: #e9edf3;
  --surface: #ffffff;
  --canvas: #f7f8fa;
  --shadow: 0 8px 28px rgba(30, 41, 59, .055);
  --radius: 18px;
  --font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-scale: 1;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-height: 100vh; color: var(--ink); background: var(--canvas); font-family: var(--font-family); font-size: calc(14px * var(--font-scale)); line-height: 1.45; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 18px; height: 18px; stroke-width: 1.9; }

.app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; z-index: 20; display: flex; flex-direction: column; width: 252px; height: 100vh; padding: 26px 14px 18px; overflow: hidden; border-right: 1px solid var(--line); background: rgba(255, 255, 255, .87); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; margin: 0 10px 32px; color: var(--ink); font-size: 17px; font-weight: 700; text-decoration: none; letter-spacing: -.6px; }
.brand-light { color: var(--accent); }
.brand-mark { display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border-radius: 11px; background: color-mix(in srgb, var(--accent), white 90%); box-shadow: 0 8px 14px color-mix(in srgb, var(--accent), transparent 74%); }
.brand-mark svg { width: 19px; }.brand-logo { width: 100%; height: 100%; object-fit: contain; transform: scale(1.17); }
.nav-list { display: grid; flex: 1 1 auto; min-height: 0; align-content: start; gap: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.nav-list::-webkit-scrollbar { width: 7px; }.nav-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: #cbd5e1; background-clip: padding-box; }.nav-list::-webkit-scrollbar-track { background: transparent; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 42px; padding: 0 11px; border: 0; border-radius: 10px; color: #64748b; background: transparent; font-weight: 500; text-align: left; text-decoration: none; transition: .18s ease; }
.nav-item:hover { color: var(--ink); background: #f4f6f9; }
.nav-item.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.nav-item svg { width: 18px; }
.sidebar-bottom { flex: none; margin-top: auto; }
.sidebar-bottom .nav-item { margin-bottom: 12px; }
.sync-status { display: flex; align-items: center; gap: 8px; padding: 12px 10px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 3px #e2e8f0; }
.status-dot.connected { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.status-dot.attention { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }

.main-content { grid-column: 2; min-width: 0; }
.topbar { position: sticky; z-index: 12; top: 0; display: flex; align-items: center; min-height: 86px; padding: 18px 40px; border-bottom: 1px solid rgba(233, 237, 243, .8); background: rgba(247, 248, 250, .82); backdrop-filter: blur(16px); }
.page-heading { min-width: 0; }
.eyebrow { margin: 0 0 3px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; color: var(--ink); font-size: 22px; letter-spacing: -.8px; line-height: 1.15; }
h2 { margin: 0; color: var(--ink); font-size: 24px; letter-spacing: -.95px; line-height: 1.2; }
h3 { margin: 0; color: var(--ink); font-size: 14px; letter-spacing: -.2px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.global-search { display: flex; align-items: center; gap: 9px; width: 260px; height: 38px; padding: 0 9px 0 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); transition: border-color .18s, box-shadow .18s; }
.global-search:focus-within { border-color: color-mix(in srgb, var(--accent), white 60%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 90%); }
.global-search svg { width: 16px; }
.global-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
kbd { padding: 2px 5px; border: 1px solid #e3e7ed; border-radius: 4px; color: #94a3b8; background: #f8fafc; font-size: 10px; white-space: nowrap; }
.icon-button, .avatar { display: inline-grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: var(--surface); transition: .18s ease; }
.icon-button:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent), white 70%); }
.avatar { border: 0; border-radius: 50%; color: #fff; background: linear-gradient(145deg, var(--accent), #7c3aed); font-size: 11px; font-weight: 700; }
.notification-button { position: relative; }
.notification-badge { position: absolute; top: -5px; right: -5px; display: grid; min-width: 16px; height: 16px; place-items: center; padding: 0 3px; border: 2px solid var(--canvas); border-radius: 10px; color: white; background: #ef4444; font-size: 9px; font-weight: 700; }
.mobile-menu { display: none; }
.page-content { max-width: 1590px; padding: 34px 40px 48px; margin: 0 auto; }

.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.section-head h2 { margin-bottom: 6px; }
.section-description { max-width: 690px; margin: 0; color: var(--muted); font-size: 13px; }
.section-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 9px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1px solid transparent; border-radius: 10px; font-size: 12px; font-weight: 600; transition: transform .16s, background .16s, border-color .16s; white-space: nowrap; }
.button:hover { transform: translateY(-1px); }
.button svg { width: 16px; }
.button-primary { color: white; background: var(--accent); box-shadow: 0 6px 13px color-mix(in srgb, var(--accent), transparent 77%); }
.button-primary:hover { background: color-mix(in srgb, var(--accent), black 8%); }
.button-secondary { border-color: var(--line); color: #475569; background: var(--surface); }
.button-secondary:hover { border-color: #cbd5e1; background: #f8fafc; }
.button-ghost { color: var(--muted); background: transparent; }
.button-danger { color: white; background: #dc2626; }
.button.is-loading svg { animation: spin 1s linear infinite; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.metric-card { min-height: 137px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.metric-card.metric-emphasis { color: white; border-color: var(--accent); background: linear-gradient(142deg, var(--accent), color-mix(in srgb, var(--accent), #7c3aed 35%)); box-shadow: 0 12px 24px color-mix(in srgb, var(--accent), transparent 72%); }
.metric-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 15px; color: var(--muted); font-size: 11px; font-weight: 600; }
.metric-label-text { display: inline-flex; align-items: center; gap: 5px; }
.info-tooltip { position: relative; display: inline-flex; align-items: center; }
.info-button { display: grid; width: 15px; height: 15px; padding: 0; place-items: center; border: 1px solid currentColor; border-radius: 50%; color: #94a3b8; background: transparent; }
.info-button svg { width: 9px; height: 9px; stroke-width: 2.4; }
.info-tooltip > span { position: absolute; z-index: 11; bottom: calc(100% + 8px); left: -8px; width: 220px; padding: 8px 9px; border-radius: 8px; color: white; background: #1e293b; box-shadow: 0 8px 18px rgba(15,23,42,.2); font-size: 10px; font-weight: 500; line-height: 1.45; opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .15s, transform .15s; }
.info-tooltip:hover > span, .info-tooltip:focus-within > span { opacity: 1; transform: translateY(0); }
.metric-emphasis .metric-label { color: rgba(255,255,255,.72); }
.metric-icon { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; color: var(--accent); background: var(--accent-soft); }
.metric-emphasis .metric-icon { color: white; background: rgba(255,255,255,.15); }
.metric-icon svg { width: 15px; }
.metric-card > strong { display: block; font-size: 23px; letter-spacing: -1px; line-height: 1.1; }
.metric-note { display: flex; align-items: center; min-height: 18px; gap: 4px; margin-top: 8px; color: #94a3b8; font-size: 11px; }
.metric-emphasis .metric-note { color: rgba(255,255,255,.76); }
.metric-change { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; }
.metric-change svg { width: 13px; }
.positive { color: #159669 !important; }
.negative { color: #dc4b55 !important; }
.metric-emphasis .positive { color: #d1fae5 !important; }
.metric-emphasis .negative { color: #fecaca !important; }

.dashboard-grid { display: grid; gap: 18px; }
.main-grid { grid-template-columns: minmax(0, 1.52fr) minmax(350px, .8fr); }
.bottom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.cashflow-history { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .82fr); }
.history-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel, .table-card, .account-card, .goal-card, .settings-card, .wealth-hero, .summary-strip { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.panel { min-width: 0; padding: 20px; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.period-chip, .account-type, .category-pill, .goal-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 700; }
.chart-box { position: relative; height: 253px; }
.chart-box-tall { height: min(520px, calc(170px + 28px * 12)); }
.chart-box-cashflow { height: 310px; }
.loan-recovery-cell { display: grid; gap: .34rem; min-width: 185px; }
.loan-recovery-cell strong { color: var(--text); }
.loan-recovery-cell small { color: var(--muted); line-height: 1.35; }
.loan-interest-progress { height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, #e8edf3); }
.loan-interest-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #159669, #34d399); transition: width .25s ease; }
.loan-charts .chart-panel { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--accent) 20%, var(--line)); background: radial-gradient(circle at 95% 0%, color-mix(in srgb, #4f46e5 12%, transparent), transparent 30%), radial-gradient(circle at 5% 100%, color-mix(in srgb, #10b981 10%, transparent), transparent 27%), var(--surface); }
.loan-charts .chart-panel::before { position: absolute; top: -108px; right: -94px; width: 260px; height: 260px; border: 1px solid color-mix(in srgb, var(--accent) 13%, transparent); border-radius: 50%; content: ''; pointer-events: none; }
.loan-charts .panel-head, .loan-charts .chart-box { position: relative; z-index: 1; }
.loan-charts .period-chip { color: #4338ca; background: rgba(79, 70, 229, .1); box-shadow: inset 0 0 0 1px rgba(79, 70, 229, .08); }
[data-theme="dark"] .loan-charts .chart-panel { background: radial-gradient(circle at 95% 0%, rgba(99, 102, 241, .18), transparent 30%), radial-gradient(circle at 5% 100%, rgba(16, 185, 129, .13), transparent 27%), var(--surface); }
.doughnut-layout { display: grid; grid-template-columns: 150px 1fr; align-items: center; min-height: 253px; gap: 11px; }
.doughnut-box { position: relative; width: 150px; height: 150px; margin: auto; }
.doughnut-total { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.doughnut-total b { font-size: 14px; letter-spacing: -.5px; }
.doughnut-total small { color: var(--muted); font-size: 10px; }
.allocation-legend { display: grid; gap: 12px; }
.allocation-legend > div, .allocation-mini > div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.allocation-legend strong, .allocation-mini strong { color: var(--ink); font-size: 11px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-0 { background: #2563eb; }.dot-1 { background: #7c3aed; }.dot-2 { background: #0f766e; }.dot-3 { background: #f59e0b; }.dot-4 { background: #ec4899; }.dot-5 { background: #64748b; }
.upcoming-list, .goal-list { display: grid; gap: 3px; }
.upcoming-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #f0f3f6; }
.upcoming-item:last-child { border-bottom: 0; }
.calendar-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; color: #7c3aed; background: #f5f3ff; }
.calendar-icon svg { width: 15px; }
.upcoming-item strong { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.upcoming-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
.upcoming-item b { font-size: 11px; }
.text-button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; color: var(--accent); background: transparent; font-size: 11px; font-weight: 600; }
.text-button svg { width: 14px; }
.goal-item { display: grid; grid-template-columns: 1fr auto; gap: 7px 11px; padding: 9px 0; }
.goal-item > div:first-child { display: flex; justify-content: space-between; gap: 14px; }
.goal-item strong { font-size: 11px; }.goal-item span { color: var(--muted); font-size: 10px; }.goal-item span small { color: #94a3b8; }
.goal-item > b { color: var(--accent); font-size: 10px; }
.progress-track { grid-column: 1 / -1; width: 100%; height: 5px; overflow: hidden; border-radius: 8px; background: #eef2f7; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #60a5fa); }

.summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); margin-bottom: 18px; overflow: hidden; }
.summary-strip > div { padding: 17px 20px; border-right: 1px solid var(--line); }.summary-strip > div:last-child { border-right: 0; }
.summary-strip span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }.summary-strip strong { font-size: 17px; letter-spacing: -.5px; }.summary-inline-percent { margin-left: 5px; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.credit-panel { display: flex; flex-direction: column; }.credit-panel .panel-head { margin-bottom: 14px; }.credit-panel .button { white-space: nowrap; }
.credit-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 11px; }.credit-metrics > div { min-width: 0; padding: 10px; border-radius: 9px; background: #f8fafc; }.credit-metrics span, .credit-metrics strong { display: block; }.credit-metrics span { margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 600; }.credit-metrics strong { overflow: hidden; font-size: 13px; letter-spacing: -.4px; text-overflow: ellipsis; white-space: nowrap; }
.credit-list { display: grid; gap: 2px; }.credit-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #f0f3f6; }.credit-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #7c3aed; background: #f5f3ff; }.credit-icon svg { width: 15px; }.credit-item strong, .credit-item small, .credit-item b { display: block; }.credit-item strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.credit-item small { margin-top: 2px; color: #94a3b8; font-size: 9px; }.credit-item b { color: var(--ink); font-size: 11px; text-align: right; }.credit-item b small { font-weight: 400; }.credit-empty { padding: 18px 0 6px; }
.cashflow-period-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }.cashflow-period-bar .eyebrow { margin: 0 0 3px; }.cashflow-period-bar strong, .cashflow-period-bar small { display: block; }.cashflow-period-bar strong { color: var(--ink); font-size: 14px; text-transform: capitalize; }.cashflow-period-bar small { margin-top: 2px; color: var(--muted); font-size: 11px; }.period-selector { display: grid; flex: 0 0 min(230px, 100%); gap: 5px; }.period-selector span { color: var(--muted); font-size: 10px; font-weight: 700; }.period-selector select { width: 100%; min-height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--line); border-radius: 8px; outline-color: var(--accent); color: var(--ink); background: #fbfcfd; font: inherit; font-size: 12px; text-transform: capitalize; }
.cashflow-ledger { margin-top: 18px; }.cashflow-ledger-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 0 0 12px; }.cashflow-ledger-head .eyebrow { margin: 0 0 3px; }.cashflow-ledger-head h3 { margin: 0; font-size: 16px; }.cashflow-ledger-head p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 11px; }.flow-counts { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }.flow-tag { display: inline-flex; align-items: center; width: fit-content; padding: 4px 7px; border-radius: 6px; font-size: 10px; font-weight: 700; white-space: nowrap; }.flow-income { color: #16835d; background: #ecfdf5; }.flow-expense { color: #c2414b; background: #fff1f2; }.flow-saving { color: #1d4ed8; background: #eff6ff; }.flow-transfer { color: #7c3aed; background: #f5f3ff; }.flow-amount.flow-income { color: #159669; }.flow-amount.flow-expense { color: #dc4b55; }.flow-amount.flow-saving { color: #2563eb; }.flow-amount.flow-transfer { color: #7c3aed; }
.history-ledger { margin-top: 18px; }.history-ledger-head { margin: 0 0 12px; }.history-ledger-head .eyebrow { margin: 0 0 3px; }.history-ledger-head h3 { margin: 0; font-size: 16px; }.history-ledger-head p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.table-card { overflow: hidden; }
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.table-search { display: flex; align-items: center; gap: 7px; width: min(260px, 100%); height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fbfcfd; }.table-search svg { width: 15px; }.table-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 11px; }
.table-count { color: var(--muted); font-size: 11px; }.table-scroll { overflow: auto; }.table-scroll::-webkit-scrollbar { height: 8px; }.table-scroll::-webkit-scrollbar-thumb { border-radius: 8px; background: #d8dee8; }
.table-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.table-pagination > div { display: flex; align-items: center; gap: 4px; }.table-pagination button { min-width: 29px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: #475569; background: var(--surface); font-size: 10px; font-weight: 700; transition: .16s; }.table-pagination button:hover:not(:disabled), .table-pagination button.is-active { border-color: color-mix(in srgb, var(--accent), white 35%); color: var(--accent); background: var(--accent-soft); }.table-pagination button:disabled { opacity: .4; cursor: not-allowed; }.table-pagination-ellipsis { padding: 0 2px; color: #94a3b8; }
table { width: 100%; min-width: 780px; border-collapse: collapse; text-align: left; }th { padding: 12px 15px; color: #94a3b8; background: #fcfdfe; font-size: 10px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }th[data-sort] { cursor: pointer; user-select: none; }th svg { width: 12px; vertical-align: -2px; margin-left: 3px; }td { padding: 13px 15px; border-top: 1px solid #f0f3f6; color: #475569; font-size: 11px; vertical-align: middle; }tbody tr { transition: background .13s; }tbody tr:hover { background: #fafcff; }td strong { display: block; color: var(--ink); font-size: 11px; font-weight: 600; }td small { display: block; margin-top: 2px; color: #94a3b8; font-size: 10px; }.asset-name { display: flex; align-items: center; gap: 9px; min-width: 170px; }.asset-symbol, .crypto-symbol { display: grid; flex: none; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--accent); background: var(--accent-soft); font-size: 11px; font-weight: 700; }.crypto-symbol { color: #c77e00; background: #fff7df; }.row-actions { display: flex; justify-content: end; gap: 2px; }.row-action { display: inline-grid; width: 27px; height: 27px; place-items: center; border: 0; border-radius: 6px; color: #94a3b8; background: transparent; }.row-action:hover { color: var(--accent); background: var(--accent-soft); }.row-action svg { width: 14px; }.status { display: inline-flex; padding: 4px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; }.status-active { color: #16835d; background: #ecfdf5; }.status-muted { color: #64748b; background: #f1f5f9; }.status-warning { color: #b45309; background: #fffbeb; }

.account-grid, .goals-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.account-card { min-height: 165px; padding: 18px; }.account-card-top, .goal-card-top { display: flex; justify-content: space-between; align-items: start; gap: 8px; }.account-card h3 { margin: 22px 0 7px; }.account-card > strong { font-size: 23px; letter-spacing: -.8px; }.account-card p { margin: 12px 0 0; color: var(--muted); font-size: 10px; }.goal-card { padding: 18px; }.goal-card h3 { margin: 18px 0 11px; font-size: 15px; }.goal-card .goal-item { padding: 0; }.goal-card .deadline { display: flex; align-items: center; gap: 5px; margin: 18px 0 0; color: var(--muted); font-size: 10px; }.deadline svg { width: 13px; }.goal-badge svg { width: 12px; }

.wealth-hero { display: flex; align-items: center; justify-content: space-between; gap: 36px; padding: 30px; margin-bottom: 18px; background: linear-gradient(125deg, var(--surface), #f8fbff); }.wealth-hero p { margin-bottom: 4px; color: var(--muted); font-size: 12px; }.wealth-hero strong { display: block; font-size: 37px; letter-spacing: -1.9px; line-height: 1.1; }.wealth-hero em { color: var(--muted); font-size: 11px; font-style: normal; }.allocation-mini { display: grid; min-width: min(100%, 320px); gap: 9px; padding: 16px 0 16px 28px; border-left: 1px solid var(--line); }

.insights-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 18px; }.insight { display: flex; align-items: center; gap: 15px; }.insight > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }.insight > span svg { width: 20px; }.insight p { margin-bottom: 3px; color: var(--muted); font-size: 11px; }.insight strong { display: block; font-size: 18px; letter-spacing: -.7px; }.insight small { color: #94a3b8; font-size: 10px; }

.help-quickstart { display: grid; grid-template-columns: minmax(260px, .85fr) 1.15fr; gap: 18px; margin-bottom: 18px; }.help-quickstart-intro, .help-callout, .help-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }.help-quickstart-intro { display: flex; align-items: start; gap: 14px; padding: 22px; }.help-icon { display: grid; flex: none; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }.help-icon svg { width: 19px; }.help-quickstart-intro .eyebrow { margin: 0 0 4px; }.help-quickstart-intro h3 { margin: 0 0 6px; font-size: 16px; }.help-quickstart-intro p:last-child, .help-card-head p, .help-callout p { margin: 0; color: var(--muted); font-size: 11px; }.help-start-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; padding: 0; overflow: hidden; list-style: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--line); box-shadow: var(--shadow); }.help-start-list li { display: flex; align-items: start; gap: 10px; padding: 16px; background: var(--surface); }.help-start-list b { display: grid; flex: none; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 10px; }.help-start-list strong, .help-start-list span { display: block; }.help-start-list strong { margin-bottom: 3px; font-size: 11px; }.help-start-list span { color: var(--muted); font-size: 10px; line-height: 1.45; }.help-callout { display: flex; align-items: start; gap: 14px; padding: 18px 20px; margin-bottom: 28px; border-color: color-mix(in srgb, var(--accent), var(--line) 75%); background: linear-gradient(110deg, var(--accent-soft), var(--surface)); }.help-callout > span { display: grid; flex: none; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--accent); background: var(--surface); }.help-callout > span svg { width: 18px; }.help-callout h3 { margin: 1px 0 5px; font-size: 14px; }.help-callout strong { color: var(--ink); }.help-guide-head { margin-bottom: 14px; }.help-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.help-card { display: flex; flex-direction: column; min-width: 0; padding: 18px; }.help-card-head { display: flex; align-items: start; gap: 10px; }.help-card .help-icon { width: 32px; height: 32px; border-radius: 9px; }.help-card .help-icon svg { width: 16px; }.help-card h3 { margin: 1px 0 4px; font-size: 13px; }.help-card-head p { line-height: 1.45; }.help-card ol { display: grid; gap: 6px; margin: 15px 0; padding-left: 18px; color: #475569; font-size: 10px; line-height: 1.45; }.help-card li::marker { color: var(--accent); font-weight: 700; }.help-tip { display: flex; align-items: start; gap: 6px; margin: auto 0 13px; padding: 9px; border-radius: 8px; color: var(--muted); background: var(--canvas); font-size: 10px; line-height: 1.4; }.help-tip svg { flex: none; width: 14px; margin-top: 1px; color: #d97706; }.help-tip strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 10px; }.help-open { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: fit-content; padding: 0; border: 0; color: var(--accent); background: transparent; font-size: 10px; font-weight: 700; }.help-open svg { width: 13px; }.help-open:hover { text-decoration: underline; }.help-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }.help-actions-list { display: grid; gap: 3px; }.help-actions-list > div { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }.help-actions-list > div:first-child { border-top: 0; padding-top: 0; }.help-actions-list > div > span { display: grid; flex: none; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--accent); background: var(--accent-soft); }.help-actions-list svg { width: 14px; }.help-actions-list p { margin: 0; }.help-actions-list strong, .help-actions-list small { display: block; }.help-actions-list strong { font-size: 11px; }.help-actions-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }.help-glossary { display: grid; gap: 0; margin: 0; }.help-glossary > div { padding: 9px 0; border-top: 1px solid var(--line); }.help-glossary > div:first-child { padding-top: 0; border-top: 0; }.help-glossary dt { margin-bottom: 3px; color: var(--ink); font-size: 11px; font-weight: 700; }.help-glossary dd { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

.help-card.is-disabled { border-style: dashed; box-shadow: none; }.help-card.is-disabled .help-icon { color: var(--muted); background: var(--canvas); }.help-module-status { display: inline-flex; align-items: center; gap: 5px; width: fit-content; color: var(--muted); font-size: 10px; font-weight: 700; }.help-module-status svg { width: 13px; }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.settings-card { display: grid; grid-template-columns: minmax(180px, .9fr) 1.1fr; gap: 26px; padding: 22px; }.settings-card h3 { margin: 11px 0 4px; font-size: 15px; }.settings-card p { color: var(--muted); font-size: 11px; }.settings-wide { grid-column: 1 / -1; grid-template-columns: minmax(230px, .8fr) 1fr; }.settings-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--accent); background: var(--accent-soft); }.settings-icon svg { width: 18px; }.settings-controls { display: grid; align-content: start; gap: 12px; }.settings-actions { display: flex; flex-wrap: wrap; align-content: start; gap: 9px; }.backup-list { grid-column: 1 / -1; display: grid; gap: 6px; }.backup-list > div { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line); }.backup-list > div > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #7c3aed; background: #f5f3ff; }.backup-list svg { width: 14px; }.backup-list p { flex: 1; margin: 0; }.backup-list p strong, .backup-list p small { display: block; }.backup-list p small { color: var(--muted); font-size: 10px; }.muted-copy { color: var(--muted); font-size: 12px; }

/* Préférences d’affichage personnelles. */
[data-density="compact"] .page-content { padding-top: 22px; padding-bottom: 30px; }[data-density="compact"] .metrics-grid, [data-density="compact"] .dashboard-grid, [data-density="compact"] .settings-grid { gap: 10px; }[data-density="compact"] .metric-card, [data-density="compact"] .panel, [data-density="compact"] .settings-card { padding: 14px; }[data-density="compact"] td { padding-top: 9px; padding-bottom: 9px; }[data-density="compact"] th { padding-top: 9px; padding-bottom: 9px; }
[data-summary-privacy="masked"] .metric-card > strong, [data-summary-privacy="masked"] .summary-strip strong, [data-summary-privacy="masked"] .wealth-hero > div > strong, [data-summary-privacy="masked"] .doughnut-total b, [data-summary-privacy="masked"] .score-gauge strong { filter: blur(7px); user-select: none; }[data-summary-privacy="masked"] .metric-card > strong:hover, [data-summary-privacy="masked"] .summary-strip strong:hover, [data-summary-privacy="masked"] .wealth-hero > div > strong:hover, [data-summary-privacy="masked"] .doughnut-total b:hover, [data-summary-privacy="masked"] .score-gauge strong:hover { filter: none; }
[data-reduce-motion="true"] *, [data-reduce-motion="true"] *::before, [data-reduce-motion="true"] *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }[data-tooltips="hidden"] .info-tooltip { display: none; }
.category-settings { grid-column: 1 / -1; padding: 14px 0 5px; border-top: 1px solid var(--line); }.category-settings > strong { display: block; margin-bottom: 9px; font-size: 11px; }.category-settings > div { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.profile-sync-summary { display: flex; flex: 1 0 100%; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); }.profile-sync-summary > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--muted); background: var(--surface); }.profile-sync-summary svg { width: 16px; }.profile-sync-summary p { margin: 0; }.profile-sync-summary strong, .profile-sync-summary small { display: block; }.profile-sync-summary strong { color: var(--ink); font-size: 11px; }.profile-sync-summary small { margin-top: 2px; color: var(--muted); font-size: 10px; }.profile-sync-summary.is-connected { border-color: #bbf7d0; background: #f0fdf4; }.profile-sync-summary.is-connected > span { color: #15803d; background: #dcfce7; }.profile-sync-summary.needs-attention { border-color: #fde68a; background: #fffbeb; }.profile-sync-summary.needs-attention > span { color: #b45309; background: #fef3c7; }

.field { display: grid; gap: 6px; color: #475569; font-size: 11px; font-weight: 600; }.field span { color: #475569; }.field input, .field select, .field textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid #dfe5ec; border-radius: 8px; outline: 0; color: var(--ink); background: #fff; font-size: 12px; font-weight: 400; transition: .16s; }.field textarea { min-height: 78px; resize: vertical; }.field input:focus, .field select:focus, .field textarea:focus { border-color: color-mix(in srgb, var(--accent), white 60%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 90%); }.switch-field { display: flex; align-items: center; gap: 8px; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; }.switch-field input { position: absolute; opacity: 0; }.switch { position: relative; width: 34px; height: 19px; border-radius: 10px; background: #cbd5e1; transition: .2s; }.switch::after { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: white; content: ""; transition: .2s; }.switch-field input:checked + .switch { background: var(--accent); }.switch-field input:checked + .switch::after { transform: translateX(15px); }

.empty-state { display: grid; justify-items: center; padding: 56px 20px; color: var(--muted); text-align: center; }.empty-icon { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 12px; border-radius: 13px; color: var(--accent); background: var(--accent-soft); }.empty-icon svg { width: 22px; }.empty-state h3 { margin-bottom: 4px; }.empty-state p { max-width: 270px; margin-bottom: 15px; font-size: 12px; }.chart-empty { display: grid; height: 100%; place-items: center; color: var(--muted); font-size: 12px; }

.search-results, .notification-panel { position: fixed; z-index: 30; top: 72px; right: 104px; width: 355px; max-height: 70vh; overflow: auto; padding: 8px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: 0 18px 50px rgba(15, 23, 42, .16); }.search-results button { display: grid; grid-template-columns: 68px 1fr; gap: 1px 9px; width: 100%; padding: 10px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; text-align: left; }.search-results button:hover { background: #f8fafc; }.search-results strong { font-size: 12px; }.search-results small { grid-column: 2; color: var(--muted); font-size: 10px; }.search-type { grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: 9px; font-weight: 700; text-transform: uppercase; }.search-results p { padding: 10px; margin: 0; color: var(--muted); font-size: 12px; }.notification-panel { right: 55px; width: 330px; }.notification-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 7px 10px; border-bottom: 1px solid var(--line); }.notification-head strong { font-size: 12px; }.notification-item { display: flex; gap: 8px; padding: 10px 7px; border-bottom: 1px solid #f0f3f6; }.notification-item:last-child { border-bottom: 0; }.notification-item p { margin: 0; color: var(--muted); font-size: 11px; }.notification-item.unread p { color: var(--ink); }.notification-item small { display: block; margin-top: 3px; color: #94a3b8; font-size: 9px; }.notification-dot { flex: none; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #94a3b8; }.notification-dot.success { background: #22c55e; }.notification-dot.warning { background: #f59e0b; }.notification-dot.error { background: #ef4444; }

.modal-open { overflow: hidden; }.modal-backdrop { position: fixed; z-index: 49; inset: 0; background: rgba(15, 23, 42, .38); backdrop-filter: blur(3px); }.modal { position: fixed; z-index: 50; top: 50%; left: 50%; width: min(680px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 24px 80px rgba(15, 23, 42, .26); transform: translate(-50%, -50%); animation: modal-in .2s ease-out; }.modal-small { width: min(480px, calc(100vw - 32px)); }.modal-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 24px 26px 18px; border-bottom: 1px solid var(--line); }.modal-header h2 { margin-bottom: 5px; font-size: 20px; }.modal-header p:not(.eyebrow) { max-width: 500px; margin: 0; color: var(--muted); font-size: 12px; }.modal-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; padding: 22px 26px; }.field-wide, .switch-field, .modal-footer { grid-column: 1 / -1; }.modal-footer { display: flex; justify-content: end; gap: 8px; padding-top: 5px; }
.batch-entry-panel { display: grid; gap: 12px; margin: 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--accent), var(--line) 78%); border-radius: 12px; background: color-mix(in srgb, var(--accent), transparent 96%); }.batch-entry-panel legend { padding: 0 6px; color: var(--accent-strong, var(--accent)); font-size: 12px; font-weight: 800; }.batch-entry-panel > p { margin: -2px 0 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }.batch-entry-list { display: grid; gap: 10px; }.batch-entry-row { display: grid; grid-template-columns: minmax(135px, .8fr) minmax(0, 1.45fr) minmax(120px, .7fr) 36px; align-items: end; gap: 10px; }.batch-remove-button { width: 36px; height: 38px; color: #b4534b; border: 1px solid #f0d3cf; background: #fff7f6; }.batch-remove-button:disabled { cursor: not-allowed; opacity: .42; }.batch-add-button { justify-self: start; }.batch-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--accent), var(--line) 82%); color: var(--muted); font-size: 12px; }.batch-total strong { color: var(--ink); font-size: 15px; }
.toast-region { position: fixed; z-index: 100; right: 22px; bottom: 22px; display: grid; gap: 9px; width: min(360px, calc(100vw - 32px)); }.toast { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border: 1px solid #e4e9f0; border-radius: 11px; color: #334155; background: white; box-shadow: 0 12px 36px rgba(15, 23, 42, .14); font-size: 12px; animation: toast-in .25s ease; }.toast svg { width: 17px; color: var(--accent); }.toast.success svg { color: #159669; }.toast.error svg { color: #dc4b55; }.toast.warning svg { color: #d97706; }

/* Statistiques : pilotage, recommandations et planification. */
.statistics-content { display: grid; gap: 18px; }.statistics-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); }.statistics-tab { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }.statistics-tab:hover { color: var(--ink); background: #f6f8fb; }.statistics-tab.active { color: var(--accent); background: var(--accent-soft); }.statistics-tab svg { width: 15px; }
.statistics-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }.statistics-kpis .metric-note { min-height: 24px; }.metric-change.neutral { color: #94a3b8; font-size: 10px; font-weight: 500; }.statistics-primary-grid { grid-template-columns: minmax(300px, .72fr) minmax(0, 1.55fr); }.statistics-evolution { min-height: 398px; }.chart-box-statistics-large { height: 310px; }.chart-toggles { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 0 13px; }.chart-toggle { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 10px; font-weight: 600; cursor: pointer; }.chart-toggle input { position: absolute; opacity: 0; }.chart-toggle i { width: 7px; height: 7px; border-radius: 50%; background: #cbd5e1; box-shadow: inset 0 0 0 2px white; }.chart-toggle input:checked + i { background: var(--toggle-color); box-shadow: none; }.chart-toggle:has(input:checked) { color: var(--ink); border-color: color-mix(in srgb, var(--toggle-color), white 60%); background: color-mix(in srgb, var(--toggle-color), transparent 91%); }
.financial-health { min-height: 398px; }.health-label { padding: 5px 8px; border-radius: 7px; color: #16835d; background: #ecfdf5; font-size: 10px; font-weight: 700; }.health-content { display: grid; grid-template-columns: 125px 1fr; align-items: center; gap: 20px; margin-top: 13px; }.score-gauge { display: grid; width: 122px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: conic-gradient(#159669 calc(var(--score) * 1%), #e8eef4 0); }.score-gauge > div { display: grid; width: 94px; height: 94px; place-content: center; border-radius: 50%; background: var(--surface); text-align: center; }.score-gauge strong { display: block; font-size: 27px; letter-spacing: -1px; }.score-gauge span { color: var(--muted); font-size: 11px; }.health-breakdown { display: grid; gap: 10px; }.health-breakdown > div { display: grid; grid-template-columns: minmax(0, 1fr) 29px; gap: 4px 8px; align-items: center; }.health-breakdown span { overflow: hidden; color: #475569; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.health-breakdown b { font-size: 10px; text-align: right; }.health-breakdown i, .target-allocation i, .budget-row i { grid-column: 1 / -1; display: block; position: relative; height: 5px; overflow: hidden; border-radius: 99px; background: #edf1f5; }.health-breakdown em, .target-allocation em, .budget-row em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #159669, #34d399); }
.statistics-analysis-grid, .statistics-secondary-grid, .statistics-insight-grid, .statistics-calendar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.statistics-doughnut { margin-bottom: 15px; }.statistics-mini-grid, .forecast-grid, .comparison-grid, .ratio-grid, .records-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }.statistics-mini { min-width: 0; padding: 10px; border-radius: 8px; background: #f8fafc; }.statistics-mini > span, .statistics-mini strong, .statistics-mini small { display: block; }.statistics-mini > span, .statistics-mini small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.statistics-mini > span { margin-bottom: 4px; font-weight: 600; }.statistics-mini strong { overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.statistics-mini small { margin-top: 3px; }.statistics-secondary-grid > .panel { min-width: 0; }.allocation-statistics .doughnut-layout { margin-bottom: 12px; }.target-allocation { display: grid; gap: 7px; }.target-allocation > div { display: grid; grid-template-columns: 88px 1fr; gap: 4px 8px; align-items: center; }.target-allocation span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.target-allocation b { color: var(--ink); font-size: 10px; text-align: right; }.target-allocation small { color: var(--muted); font-weight: 400; }.target-allocation u { position: absolute; z-index: 1; top: -2px; width: 2px; height: 9px; border: 0; border-radius: 2px; background: #1e293b; transform: translateX(-1px); }.diversification-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; }.diversification-panel h3 { margin: 4px 0; font-size: 21px; }.diversification-panel p { color: var(--muted); font-size: 10px; }.diversification-list { display: flex; flex-wrap: wrap; justify-content: end; gap: 7px; }.diversification-list span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 10px; }.diversification-list i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }.diversification-list b { color: var(--ink); }
.statistics-insights-intro, .section-inline-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }.statistics-insights-intro { padding: 3px 1px 0; }.statistics-insights-intro h3, .section-inline-head h3 { margin: 3px 0; font-size: 19px; }.statistics-insights-intro p, .section-inline-head p { margin: 0; color: var(--muted); font-size: 11px; }.statistics-insights-intro > span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 7px; color: var(--accent); background: var(--accent-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }.statistics-insights-intro svg { width: 14px; }.insight-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.insight-card { display: flex; align-items: start; gap: 11px; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: var(--shadow); }.insight-card > span { display: grid; flex: none; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: #2563eb; background: #eff6ff; }.insight-card svg { width: 15px; }.insight-card h3 { margin: 1px 0 4px; font-size: 12px; }.insight-card p { margin: 0; color: #475569; font-size: 11px; line-height: 1.45; }.insight-card small { display: block; margin-top: 6px; color: #94a3b8; font-size: 9px; font-weight: 600; }.insight-success > span { color: #16835d; background: #ecfdf5; }.insight-warning > span { color: #b45309; background: #fffbeb; }.insight-danger > span { color: #c2414b; background: #fff1f2; }.insight-opportunity > span { color: #7c3aed; background: #f5f3ff; }.forecast-grid, .comparison-grid, .ratio-grid, .records-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.section-inline-head { margin: 0 0 12px; }.goals-statistics-head { margin-top: 18px; }
.budget-list { display: grid; gap: 7px; }.budget-row { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.25fr) auto; align-items: center; gap: 15px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }.budget-row strong, .budget-row small { display: block; }.budget-row strong { font-size: 11px; }.budget-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }.budget-row > div:nth-child(2) > span { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700; text-align: right; }.budget-row em.over { background: linear-gradient(90deg, #f59e0b, #dc4b55); }.statistics-goals { margin-top: 0; }
.heatmap-panel { min-width: 0; }.heatmap-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin: 18px 0 11px; }.heatmap-day { position: relative; display: block; aspect-ratio: 1; min-width: 8px; border-radius: 3px; background: #edf1f5; }.heatmap-day.level-1 { background: #bfdbfe; }.heatmap-day.level-2 { background: #93c5fd; }.heatmap-day.level-3 { background: #60a5fa; }.heatmap-day.level-4 { background: #2563eb; }.heatmap-day i, .heatmap-legend em { position: absolute; top: 1px; right: 1px; width: 4px; height: 4px; border-radius: 50%; background: #159669; }.heatmap-legend { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 9px; }.heatmap-legend i { width: 10px; height: 10px; border-radius: 2px; }.heatmap-legend i.level-0 { background: #edf1f5; }.heatmap-legend i.level-1 { background: #bfdbfe; }.heatmap-legend i.level-2 { background: #93c5fd; }.heatmap-legend i.level-3 { background: #60a5fa; }.heatmap-legend i.level-4 { background: #2563eb; }.heatmap-legend b { position: relative; margin-left: 6px; padding-left: 9px; font-weight: 500; }.heatmap-legend em { top: 4px; left: 0; }.financial-events { display: grid; gap: 2px; }.financial-event { display: grid; grid-template-columns: 45px 31px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #edf1f5; }.financial-event time { color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }.event-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: var(--accent); background: var(--accent-soft); }.event-icon svg { width: 14px; }.financial-event strong, .financial-event small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.financial-event strong { font-size: 10px; }.financial-event small { margin-top: 2px; color: var(--muted); font-size: 9px; }.financial-event b { font-size: 10px; text-align: right; }

[data-theme="dark"] { --ink: #e6edf7; --muted: #9aa8bd; --line: #273449; --surface: #162033; --canvas: #0f1726; --accent-soft: color-mix(in srgb, var(--accent), transparent 80%); --shadow: 0 8px 28px rgba(0,0,0,.15); color-scheme: dark; }
[data-theme="dark"] body { background: var(--canvas); }
[data-theme="dark"] .sidebar { background: rgba(18, 29, 47, .87); }
[data-theme="dark"] .topbar { background: rgba(15, 23, 38, .8); }
[data-theme="dark"] .nav-item:hover, [data-theme="dark"] tbody tr:hover { background: #1b2940; }
[data-theme="dark"] th { background: #141e30; }
[data-theme="dark"] .table-search, [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea { background: #111b2c; }
[data-theme="dark"] .button-secondary, [data-theme="dark"] .icon-button { color: #cbd5e1; background: #18243a; }
[data-theme="dark"] .wealth-hero { background: linear-gradient(125deg, var(--surface), #18243a); }
[data-theme="dark"] .progress-track { background: #2c3a50; }
[data-theme="dark"] kbd { border-color: #334155; background: #172235; }
[data-theme="dark"] .status-dot { box-shadow: 0 0 0 3px #273449; }

@keyframes spin { to { transform: rotate(360deg); } }@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -47%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) { .help-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 840px) { .help-quickstart, .help-bottom-grid { grid-template-columns: 1fr; }.help-start-list { grid-template-columns: 1fr; }.help-guides { grid-template-columns: 1fr; } }

@media (max-width: 1180px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); }.main-grid, .cashflow-history, .history-charts { grid-template-columns: 1fr; }.bottom-grid { grid-template-columns: 1fr; }.account-grid, .goals-grid { grid-template-columns: repeat(2, 1fr); }.settings-card { grid-template-columns: 1fr; }.settings-wide { grid-template-columns: 1fr; }.allocation-panel { min-height: 280px; } }
@media (max-width: 840px) { .app-shell { display: block; }.sidebar { left: -267px; transition: left .22s ease; box-shadow: 12px 0 28px rgba(15,23,42,.14); }.sidebar-open .sidebar { left: 0; }.main-content { min-width: 0; }.topbar { min-height: 74px; padding: 14px 20px; }.page-content { padding: 25px 20px 42px; }.mobile-menu { display: inline-grid; margin-right: 11px; }.global-search { width: 190px; }.section-head { align-items: start; flex-direction: column; }.section-actions { justify-content: start; }.search-results { right: 20px; }.notification-panel { right: 20px; }.wealth-hero { align-items: start; flex-direction: column; }.allocation-mini { width: 100%; padding: 17px 0 0; border-top: 1px solid var(--line); border-left: 0; }.settings-grid { grid-template-columns: 1fr; }.settings-wide { grid-column: auto; } }
@media (max-width: 560px) { .topbar { padding: 12px 14px; }.page-content { padding: 20px 14px 36px; }.topbar-actions { gap: 6px; }.global-search { width: 38px; padding: 0; justify-content: center; }.global-search input, .global-search kbd { display: none; }.avatar { display: none; }.metrics-grid { grid-template-columns: 1fr 1fr; gap: 9px; }.metric-card { min-height: 122px; padding: 14px; }.metric-card > strong { font-size: 18px; }.metric-note { display: block; }.summary-strip { grid-template-columns: 1fr; }.summary-strip > div { padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--line); }.summary-strip > div:last-child { border-bottom: 0; }.account-grid, .goals-grid, .insights-grid { grid-template-columns: 1fr; }.panel { padding: 16px; }.doughnut-layout { grid-template-columns: 125px 1fr; }.doughnut-box { width: 125px; height: 125px; }.modal-form { grid-template-columns: 1fr; padding: 18px; }.modal-header { padding: 20px 18px 15px; }.modal-footer { flex-direction: column-reverse; }.modal-footer .button { width: 100%; }.batch-entry-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }.batch-entry-row .field:first-child, .batch-entry-row .field:nth-child(2) { grid-column: 1 / 3; }.batch-entry-row .field:nth-child(3) { grid-column: 1; }.batch-remove-button { grid-column: 2; }.batch-add-button { width: 100%; justify-content: center; }.cashflow-period-bar { align-items: stretch; flex-direction: column; }.period-selector { flex-basis: auto; }.section-actions .button-secondary:not([data-action^="add-"]) { display: none; }.table-toolbar { padding: 11px; }.table-count { display: none; }.notification-panel, .search-results { right: 12px; width: calc(100vw - 24px); }.toast-region { right: 12px; bottom: 12px; }.credit-metrics { gap: 5px; }.credit-metrics > div { padding: 8px; }.credit-item { grid-template-columns: 30px minmax(0, 1fr) auto; }.credit-item .row-actions { display: none; }.cashflow-ledger-head { align-items: start; flex-direction: column; }.flow-counts { justify-content: start; }.app-language-picker { width: 38px; padding: 0; justify-content: center; }.app-language-picker select { width: 18px; color: transparent; }.app-language-picker select:focus { color: transparent; } }

.app-language-picker { display: inline-flex; align-items: center; gap: 6px; height: 38px; min-width: 66px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); cursor: pointer; transition: border-color .18s, box-shadow .18s; }
.app-language-picker:focus-within { border-color: color-mix(in srgb, var(--accent), white 60%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), transparent 90%); }
.app-language-picker select { min-width: 27px; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
.language-flag { display: inline-block; flex: 0 0 auto; width: 19px; height: 13px; overflow: hidden; border: 1px solid rgba(21, 32, 51, .16); border-radius: 2px; box-shadow: 0 1px 2px rgba(15, 23, 42, .14); }
.flag-fr { background: linear-gradient(90deg, #1b45a0 0 33.33%, #fff 33.33% 66.66%, #e23c43 66.66%); }
.flag-en { background: linear-gradient(33deg, transparent 44%, #fff 44% 49%, #c72d3d 49% 52%, #fff 52% 57%, transparent 57%), linear-gradient(-33deg, transparent 44%, #fff 44% 49%, #c72d3d 49% 52%, #fff 52% 57%, transparent 57%), linear-gradient(#21468b 0 39%, #fff 39% 45%, #c72d3d 45% 55%, #fff 55% 61%, #21468b 61%); }
.flag-de { background: linear-gradient(#171717 0 33.33%, #d83a36 33.33% 66.66%, #f2c645 66.66%); }
.flag-es { background: linear-gradient(#b3262e 0 25%, #f6ca42 25% 75%, #b3262e 75%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 1181px) { .dashboard-metrics, .insurance-metrics, .employee-savings-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }.property-metrics { grid-template-columns: repeat(7, minmax(0, 1fr)); }.crowdlending-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }.crypto-metrics, .cashflow-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }.cashflow-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }.history-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }.dashboard-metrics .metric-card, .crowdlending-metrics .metric-card, .insurance-metrics .metric-card, .employee-savings-metrics .metric-card, .property-metrics .metric-card, .crypto-metrics .metric-card { min-height: 126px; padding: 15px; }.dashboard-metrics .metric-card > strong, .crowdlending-metrics .metric-card > strong, .insurance-metrics .metric-card > strong, .employee-savings-metrics .metric-card > strong, .property-metrics .metric-card > strong, .crypto-metrics .metric-card > strong { font-size: clamp(16px, 1.35vw, 23px); } }
@media (min-width: 841px) and (max-width: 1180px) { .crowdlending-metrics { grid-template-columns: repeat(6, minmax(140px, 1fr)); overflow-x: auto; padding-bottom: 4px; }.cashflow-metrics, .history-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 840px) { .crowdlending-metrics, .cashflow-metrics, .history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .crowdlending-metrics, .cashflow-metrics, .history-metrics { grid-template-columns: 1fr; } }

@media (max-width: 1180px) { .statistics-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }.statistics-primary-grid, .statistics-analysis-grid, .statistics-secondary-grid, .statistics-insight-grid, .statistics-calendar-grid { grid-template-columns: 1fr; }.statistics-evolution, .financial-health { min-height: 0; } }
@media (max-width: 840px) { .statistics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.financial-health { min-height: 300px; }.insight-cards { grid-template-columns: 1fr; }.statistics-insights-intro, .section-inline-head, .diversification-panel { align-items: start; flex-direction: column; }.diversification-list { justify-content: start; }.budget-row { grid-template-columns: 1fr minmax(160px, 1fr) auto; } }
@media (max-width: 560px) { .statistics-tabs { gap: 3px; }.statistics-tab { flex: 1; justify-content: center; padding: 8px 5px; font-size: 9px; }.statistics-tab svg { width: 13px; }.statistics-kpis, .statistics-mini-grid, .forecast-grid, .comparison-grid, .ratio-grid, .records-list { grid-template-columns: 1fr; }.health-content { grid-template-columns: 92px 1fr; gap: 12px; }.score-gauge { width: 90px; }.score-gauge > div { width: 70px; height: 70px; }.score-gauge strong { font-size: 21px; }.health-breakdown { gap: 7px; }.chart-box-statistics-large { height: 245px; }.chart-toggles { gap: 5px; }.chart-toggle { font-size: 9px; }.statistics-doughnut { grid-template-columns: 118px 1fr; }.statistics-doughnut .doughnut-box { width: 118px; height: 118px; }.budget-row { grid-template-columns: 1fr auto; gap: 9px; }.budget-row > div:nth-child(2) { grid-column: 1 / -1; }.budget-row .row-actions { grid-row: 1; grid-column: 2; }.heatmap-grid { gap: 3px; }.financial-event { grid-template-columns: 38px 27px minmax(0, 1fr) auto; gap: 6px; }.financial-event .row-actions { display: none; }.financial-event b { font-size: 9px; }.statistics-insights-intro > span { white-space: normal; } }

/* Simulations et comparateurs */
.crowdlending-comparator { margin: 18px 0; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface) 58%); }
.button-compact { min-height: 34px; padding-inline: 10px; font-size: 11px; }
.comparator-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; }.credit-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.comparator-card, .credit-comparison-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, #fff); }
.comparator-card-head, .credit-comparison-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.comparator-card-head .field, .credit-comparison-head .field { min-width: 0; margin: 0; }.comparator-card-head .field span, .credit-comparison-head .field span { font-size: 9px; }.comparator-card-head .field input, .credit-comparison-head .field input { min-width: 0; padding: 8px 9px; font-size: 12px; }
.comparator-score { flex: none; min-width: 88px; padding: 8px; border-radius: 10px; text-align: center; background: #f8fafc; }.comparator-score strong, .comparator-score small { display: block; }.comparator-score strong { color: #1e293b; font-size: 16px; }.comparator-score small { margin-top: 2px; color: #64748b; font-size: 8px; line-height: 1.25; }.comparator-score.is-strong { background: #ecfdf5; }.comparator-score.is-strong strong { color: #047857; }.comparator-score.is-balanced { background: #eff6ff; }.comparator-score.is-balanced strong { color: #1d4ed8; }.comparator-score.is-cautious { background: #fff7ed; }.comparator-score.is-cautious strong { color: #c2410c; }
.comparator-fields, .credit-comparison-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.comparator-fields .field, .credit-comparison-fields .field { margin: 0; }.comparator-fields .field span, .credit-comparison-fields .field span { font-size: 9px; }.comparator-fields input, .comparator-fields select, .credit-comparison-fields input { min-width: 0; padding: 8px 9px; font-size: 11px; }
.comparator-results, .credit-comparison-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }.comparator-results > div, .credit-comparison-results > div { min-width: 0; padding: 9px; border-radius: 9px; background: color-mix(in srgb, var(--accent) 6%, #f8fafc); }.comparator-results span, .comparator-results strong, .credit-comparison-results span, .credit-comparison-results strong { display: block; }.comparator-results span, .credit-comparison-results span { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.comparator-results strong, .credit-comparison-results strong { margin-top: 3px; overflow: hidden; color: var(--ink); font-size: 12px; letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; }
.comparator-best { display: flex; align-items: center; gap: 5px; margin: 12px 0 0; color: #047857; font-size: 10px; font-weight: 700; }.comparator-best svg { width: 14px; }.simulation-notice { display: flex; align-items: start; gap: 8px; margin: 15px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }.simulation-notice svg { flex: none; width: 14px; color: var(--accent); }
.simulation-grid { display: grid; gap: 18px; }.credit-comparison { overflow: hidden; }.credit-comparison-card { position: relative; }.credit-comparison-card.is-best { border-color: color-mix(in srgb, #159669 55%, var(--line)); box-shadow: 0 8px 24px rgba(21, 150, 105, .08); }.credit-comparison-head > span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 999px; color: #047857; background: #ecfdf5; font-size: 9px; font-weight: 700; white-space: nowrap; }.credit-comparison-head > span svg { width: 12px; }
.forecast-panel { overflow: hidden; background: radial-gradient(circle at 100% 0%, color-mix(in srgb, #7c3aed 10%, transparent), transparent 28%), var(--surface); }.panel-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }.forecast-input-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }.forecast-input-grid .field { margin: 0; }.forecast-input-grid .field span { font-size: 10px; }.forecast-input-grid input { min-width: 0; padding: 9px 10px; font-size: 12px; }.forecast-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }.forecast-summary > div { min-width: 0; padding: 12px; border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--line)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }.forecast-summary span, .forecast-summary strong { display: block; }.forecast-summary span { color: var(--muted); font-size: 9px; line-height: 1.25; }.forecast-summary strong { margin-top: 5px; overflow: hidden; color: var(--ink); font-size: 15px; letter-spacing: -.45px; text-overflow: ellipsis; white-space: nowrap; }.forecast-warning { display: flex; align-items: start; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border: 1px solid #fed7aa; border-radius: 10px; color: #9a3412; background: #fff7ed; font-size: 10px; line-height: 1.45; }.forecast-warning svg { flex: none; width: 15px; }.chart-box-forecast { height: 290px; margin-top: 16px; }.forecast-year-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 9px; margin-top: 16px; }.forecast-year-card { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--surface) 93%, #f8fafc); }.forecast-year-card b, .forecast-year-card strong, .forecast-year-card span, .forecast-year-card small { display: block; }.forecast-year-card b { color: var(--accent); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }.forecast-year-card strong { margin: 4px 0; overflow: hidden; color: var(--ink); font-size: 15px; letter-spacing: -.35px; text-overflow: ellipsis; white-space: nowrap; }.forecast-year-card span, .forecast-year-card small { color: var(--muted); font-size: 9px; line-height: 1.4; }

/* Épargne salariale et viager */
.employee-savings-metrics .metric-card:nth-child(3) .metric-icon { color: #b45309; background: #fffbeb; }.employee-savings-metrics .metric-card:nth-child(6) .metric-icon { color: #6d28d9; background: #f5f3ff; }.viager-summary { margin: 18px 0; overflow: hidden; background: radial-gradient(circle at 100% 0%, rgba(180, 83, 9, .11), transparent 32%), var(--surface); }.viager-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.viager-summary-grid > div { min-width: 0; padding: 12px; border: 1px solid color-mix(in srgb, #b45309 18%, var(--line)); border-radius: 10px; background: color-mix(in srgb, #fef3c7 42%, var(--surface)); }.viager-summary-grid span, .viager-summary-grid strong { display: block; }.viager-summary-grid span { color: var(--muted); font-size: 9px; }.viager-summary-grid strong { margin-top: 5px; overflow: hidden; color: var(--ink); font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 850px) { .forecast-input-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.forecast-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .viager-summary-grid { grid-template-columns: 1fr; } }
@media (max-width: 660px) { .comparator-grid, .credit-comparison-grid { grid-template-columns: 1fr; }.crowdlending-comparator .panel-head, .simulation-grid .panel-head { align-items: start; flex-direction: column; }.panel-actions { justify-content: start; }.comparator-results, .credit-comparison-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }.table-pagination { align-items: flex-start; flex-direction: column; }.table-pagination > div { flex-wrap: wrap; } }
@media (max-width: 440px) { .comparator-fields, .credit-comparison-fields, .forecast-input-grid, .forecast-summary { grid-template-columns: 1fr; }.comparator-card-head, .credit-comparison-head { align-items: stretch; flex-direction: column; }.comparator-score { width: 100%; }.chart-box-forecast { height: 235px; }.panel-actions { width: 100%; }.panel-actions .button { width: 100%; } }

.legal-card { grid-template-columns: 1fr; gap: 12px; }.legal-card h3 { margin-top: 0; }.legal-card p { max-width: 1000px; margin: 0; line-height: 1.55; font-size: 12px; }.legal-card .legal-subnote { font-size: 10px; }

.public-demo .is-demo-disabled,.public-demo [data-setting]:disabled,.public-demo [data-feature-setting]:disabled{opacity:.48;cursor:not-allowed;filter:saturate(.55)}.public-demo .is-demo-disabled{pointer-events:none}