/* FinDompet 6.0 Professional — unified runtime/theme validation */
/* FinDompet 5.3 FINAL AUDITED — Unified Professional Theme
   Loaded AFTER Tailwind so every screen follows one light/dark design system. */
:root {
  color-scheme: light;
  --fd-bg: #f3f6fa;
  --fd-surface: #ffffff;
  --fd-surface-2: #f7f9fc;
  --fd-surface-3: #edf2f7;
  --fd-text: #111d2e;
  --fd-muted: #566579;
  --fd-faint: #7c899b;
  --fd-border: #d6e0ea;
  --fd-border-strong: #c1cedb;
  --fd-brand: #155eef;
  --fd-brand-strong: #0b4bd4;
  --fd-brand-soft: #eaf1ff;
  --fd-accent: #0891b2;
  --fd-success: #16836f;
  --fd-success-soft: #e9f7f2;
  --fd-success-chart: #1b8f78;
  --fd-success-shadow: rgba(27,143,120,.18);
  --fd-warning: #b86b00;
  --fd-warning-soft: #fff4df;
  --fd-danger: #c54c5a;
  --fd-danger-soft: #fff0f2;
  --fd-danger-chart: #d15a66;
  --fd-danger-shadow: rgba(198,79,93,.18);
  --fd-sidebar: #ffffff;
  --fd-sidebar-text: #42526a;
  --fd-sidebar-muted: #8a97a8;
  --fd-sidebar-active: #edf3ff;
  --fd-sidebar-border: #e1e8f0;
  --fd-topbar: rgba(244,247,251,.88);
  --fd-overlay: rgba(15,31,51,.46);
  --fd-shadow: 0 1px 2px rgba(15,31,51,.045), 0 10px 26px rgba(15,31,51,.075);
  --fd-shadow-lg: 0 28px 80px rgba(15,31,51,.18);
  --fd-radius: 16px;
  --fd-radius-lg: 22px;
  --bg: var(--fd-bg);
  --panel: var(--fd-surface);
  --panel-solid: var(--fd-surface);
  --panel-2: var(--fd-surface-2);
  --text: var(--fd-text);
  --muted: var(--fd-muted);
  --faint: var(--fd-faint);
  --line: var(--fd-border);
  --line-strong: var(--fd-border-strong);
  --brand: var(--fd-brand);
  --brand-2: var(--fd-brand-strong);
  --brand-soft: var(--fd-brand-soft);
  --green: var(--fd-success);
  --green-soft: var(--fd-success-soft);
  --orange: var(--fd-warning);
  --orange-soft: var(--fd-warning-soft);
  --red: var(--fd-danger);
  --red-soft: var(--fd-danger-soft);
  --blue: var(--fd-accent);
  --blue-soft: #e8f7fb;
  --shadow: var(--fd-shadow);
  --shadow-lg: var(--fd-shadow-lg);
}

html.dark {
  color-scheme: dark;
  --fd-bg: #09111d;
  --fd-surface: #101a29;
  --fd-surface-2: #152233;
  --fd-surface-3: #1b2a3e;
  --fd-text: #edf3fb;
  --fd-muted: #a5b2c3;
  --fd-faint: #74839a;
  --fd-border: #223147;
  --fd-border-strong: #31435d;
  --fd-brand: #6ea2ff;
  --fd-brand-strong: #4f8cf5;
  --fd-brand-soft: #172d54;
  --fd-accent: #55c6df;
  --fd-success: #65d0aa;
  --fd-success-soft: #15372c;
  --fd-success-chart: #61cfaa;
  --fd-success-shadow: rgba(115,198,168,.18);
  --fd-warning: #f1b34b;
  --fd-warning-soft: #392a10;
  --fd-danger: #f08b97;
  --fd-danger-soft: #3d2329;
  --fd-danger-chart: #ef8a95;
  --fd-danger-shadow: rgba(228,147,151,.18);
  --fd-sidebar: #0c1624;
  --fd-sidebar-text: #b8c4d4;
  --fd-sidebar-muted: #718198;
  --fd-sidebar-active: #172b4d;
  --fd-sidebar-border: #1f2d41;
  --fd-topbar: rgba(9,17,29,.88);
  --fd-overlay: rgba(0,0,0,.62);
  --fd-shadow: 0 10px 30px rgba(0,0,0,.22);
  --fd-shadow-lg: 0 32px 90px rgba(0,0,0,.48);
}

html, body, #root { min-height: 100%; background: var(--fd-bg) !important; color: var(--fd-text); }
body { overflow-x: hidden; background-image: radial-gradient(circle at 88% -12%, color-mix(in srgb,var(--fd-brand) 9%,transparent), transparent 30rem) !important; }
* { scrollbar-color: var(--fd-border-strong) transparent; }
.app-shell, .main-area, .page-content, .page-stack, .legacy-feature-wrap { min-width: 0; }

/* Global surfaces */
.panel,
.account-card,.budget-card,.recurring-card,.settings-card,.smart-card,.smart-kpi,.smart-alert,
.auth-card,.modal,.filter-card,.table-card,.chart-card,.wide-card {
  background: var(--fd-surface) !important;
  color: var(--fd-text) !important;
  border-color: var(--fd-border) !important;
  box-shadow: var(--fd-shadow) !important;
}
.panel:hover { border-color: color-mix(in srgb,var(--fd-brand) 16%,var(--fd-border)) !important; box-shadow: 0 14px 34px color-mix(in srgb,var(--fd-text) 8%,transparent) !important; }

/* Sidebar is now part of the selected theme instead of always-dark. */
.sidebar {
  width: 264px !important;
  padding: 18px 14px 16px !important;
  background: var(--fd-sidebar) !important;
  color: var(--fd-sidebar-text) !important;
  border-right: 1px solid var(--fd-sidebar-border) !important;
  box-shadow: 8px 0 28px rgba(15,31,51,.04) !important;
}
.main-area { margin-left: 264px !important; width: auto; min-width: 0; }
.brand-wrap { padding: 5px 8px 22px !important; }
.brand-icon { background: linear-gradient(145deg,var(--fd-brand),var(--fd-accent)) !important; color:#fff !important; box-shadow:0 10px 24px color-mix(in srgb,var(--fd-brand) 24%,transparent) !important; }
.brand-wrap strong { color: var(--fd-text) !important; }
.brand-wrap span,.nav-caption,.profile-copy span,.sidebar-health p { color: var(--fd-sidebar-muted) !important; }
.nav-item { color: var(--fd-sidebar-text) !important; border: 1px solid transparent !important; }
.nav-item:hover { background: color-mix(in srgb,var(--fd-sidebar-active) 62%,transparent) !important; color: var(--fd-text) !important; transform:none !important; }
.nav-item.active { background: var(--fd-sidebar-active) !important; color: var(--fd-brand) !important; border-color: color-mix(in srgb,var(--fd-brand) 14%,var(--fd-sidebar-border)) !important; box-shadow:none !important; }
.nav-item.active::before { background: var(--fd-brand) !important; }
.nav-item .nav-dot { background: var(--fd-brand) !important; box-shadow:0 0 0 4px color-mix(in srgb,var(--fd-brand) 12%,transparent) !important; }
.sidebar-health { background: var(--fd-surface-2) !important; border-color: var(--fd-sidebar-border) !important; }
.profile-box { border-top-color: var(--fd-sidebar-border) !important; }
.avatar { background: var(--fd-brand-soft) !important; color: var(--fd-brand) !important; border:1px solid color-mix(in srgb,var(--fd-brand) 13%,var(--fd-border)) !important; }

/* Header/content */
.topbar { height:72px !important; padding:0 26px !important; background:var(--fd-topbar) !important; border-bottom-color:var(--fd-border) !important; backdrop-filter:blur(18px) saturate(130%); }
.topbar h1 { color:var(--fd-text) !important; font-size:18px !important; }
.eyebrow { color:var(--fd-brand) !important; }
.page-content { width:100%; max-width:1480px !important; padding:24px 26px 52px !important; }
.page-stack { gap:18px !important; }
.page-title { min-width:0; }
.page-title h2,.section-head h3,.settings-section h3 { color:var(--fd-text) !important; }
.page-title p,.settings-section p,.muted-copy,.smart-help { color:var(--fd-muted) !important; }

/* Hero becomes theme-aware instead of a permanently dark block. */
.hero-strip {
  min-height:180px !important;
  color:var(--fd-text) !important;
  background: linear-gradient(135deg,color-mix(in srgb,var(--fd-brand) 10%,var(--fd-surface)),var(--fd-surface) 60%,color-mix(in srgb,var(--fd-accent) 8%,var(--fd-surface))) !important;
  border:1px solid color-mix(in srgb,var(--fd-brand) 16%,var(--fd-border)) !important;
  box-shadow:var(--fd-shadow) !important;
}
.hero-strip::before,.hero-strip::after { opacity:.34; border-color:color-mix(in srgb,var(--fd-brand) 18%,transparent) !important; }
.hero-kicker { color:var(--fd-brand) !important; }
.hero-strip h2 { color:var(--fd-text) !important; }
.hero-strip p { color:var(--fd-muted) !important; }
.btn.light,.btn.ghost-on-dark { color:var(--fd-text) !important; background:var(--fd-surface) !important; border-color:var(--fd-border-strong) !important; box-shadow:none !important; }

/* Controls */
input,select,textarea { background:var(--fd-surface) !important; color:var(--fd-text) !important; border-color:var(--fd-border-strong) !important; box-shadow:none !important; }
input::placeholder,textarea::placeholder { color:var(--fd-faint) !important; }
input:focus,select:focus,textarea:focus { border-color:var(--fd-brand) !important; box-shadow:0 0 0 3px color-mix(in srgb,var(--fd-brand) 13%,transparent) !important; }
.btn.primary { background:linear-gradient(135deg,var(--fd-brand),var(--fd-brand-strong)) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 8px 18px color-mix(in srgb,var(--fd-brand) 20%,transparent) !important; }
.btn.secondary,.icon-btn,.sync-pill { background:var(--fd-surface) !important; color:var(--fd-text) !important; border-color:var(--fd-border) !important; box-shadow:none !important; }
.btn.secondary:hover,.icon-btn:hover { color:var(--fd-brand) !important; border-color:color-mix(in srgb,var(--fd-brand) 30%,var(--fd-border)) !important; }
.text-btn { color:var(--fd-brand) !important; }

/* Cards & grids: prevent overlap and force children to shrink. */
.kpi-grid,.dashboard-grid,.account-grid,.budget-grid,.goal-grid,.recurring-grid,.health-metrics,.info-grid,.smart-alert-grid,.smart-kpi-grid,.smart-two-col,.settings-layout,.form-grid { min-width:0; }
.kpi-grid >*,.dashboard-grid >*,.account-grid >*,.budget-grid >*,.goal-grid >*,.recurring-grid >*,.smart-alert-grid >*,.smart-kpi-grid >*,.smart-two-col >*,.form-grid >* { min-width:0; max-width:100%; }
.kpi-card { min-width:0 !important; background:var(--fd-surface) !important; }
.kpi-copy { min-width:0; }
.kpi-copy strong { overflow-wrap:anywhere; }
.smart-hub-hero { background:linear-gradient(135deg,color-mix(in srgb,var(--fd-brand) 7%,var(--fd-surface)),var(--fd-surface)) !important; border-color:var(--fd-border) !important; }
.smart-tabbar { background:var(--fd-surface-2) !important; border-color:var(--fd-border) !important; }
.smart-tabbar button.active { background:var(--fd-surface) !important; color:var(--fd-brand) !important; }
.smart-note,.smart-ai-score,.split-editor,.tx-detail-grid>div,.settings-nav,.telegram-command-box,.diagnostic-grid>span { background:var(--fd-surface-2) !important; border-color:var(--fd-border) !important; color:var(--fd-text) !important; }

/* Tables: own horizontal scroll container; never push the page width. */
.data-table-wrap,.smart-table-wrap { width:100%; max-width:100%; overflow:auto !important; overscroll-behavior:contain; border-color:var(--fd-border) !important; }
.data-table,.smart-table { min-width:720px; }
.data-table th,.smart-table th { background:var(--fd-surface-2) !important; color:var(--fd-muted) !important; border-color:var(--fd-border) !important; }
.data-table td,.smart-table td { background:var(--fd-surface) !important; color:var(--fd-text) !important; border-color:var(--fd-border) !important; }

/* Status / semantic colors */
.status-dot.ok { background:var(--fd-success) !important; }
.status-dot.warn { background:var(--fd-warning) !important; }
.kpi-icon.green,.metric-badge.good { background:var(--fd-success-soft) !important; color:var(--fd-success) !important; }
.kpi-icon.orange,.metric-badge.watch { background:var(--fd-warning-soft) !important; color:var(--fd-warning) !important; }
.kpi-icon.blue,.kpi-icon.violet { background:var(--fd-brand-soft) !important; color:var(--fd-brand) !important; }

/* Settings/diagnostics */
.settings-layout { grid-template-columns:220px minmax(0,1fr) !important; align-items:start; }
.settings-nav { padding:6px !important; position:sticky; top:94px; }
.settings-nav button { color:var(--fd-muted) !important; }
.settings-nav button.active { background:var(--fd-brand-soft) !important; color:var(--fd-brand) !important; }
.integration-actions.wrap { align-items:center; }
.diagnostics-panel { background:var(--fd-surface) !important; border-color:var(--fd-border) !important; }
.diagnostic-output { background:#07101d !important; color:#d9e7f7 !important; border:1px solid #1d2d43; }
html.dark .diagnostic-output { background:#050b12 !important; }

/* Modals/drawers */
.modal-backdrop,.drawer-backdrop,.sidebar-backdrop { background:var(--fd-overlay) !important; }
.modal { width:min(680px,100%) !important; max-height:min(88vh,900px); overflow:auto; }
.modal-head { background:var(--fd-surface) !important; border-bottom-color:var(--fd-border) !important; }
.ai-drawer { background:var(--fd-surface) !important; color:var(--fd-text) !important; border-left-color:var(--fd-border) !important; }
.chat-message.assistant { background:var(--fd-surface-2) !important; color:var(--fd-text) !important; }
.chat-message.user { background:var(--fd-brand) !important; color:#fff !important; }
.ai-fab { background:linear-gradient(135deg,var(--fd-brand),var(--fd-accent)) !important; color:#fff !important; box-shadow:0 12px 28px color-mix(in srgb,var(--fd-brand) 28%,transparent) !important; }

/* Auth */
.auth-page { background:var(--fd-bg) !important; }
.auth-story { background:linear-gradient(145deg,#0c1f3a,#123f73 62%,#0b7187) !important; }
.auth-card-wrap { background:var(--fd-bg) !important; }
.auth-card { border:1px solid var(--fd-border) !important; }

/* Tailwind color bridge used by legacy AI/report components.
   Layout utilities remain Tailwind, but colors now follow FinDompet tokens. */
.bg-white { background-color:var(--fd-surface) !important; }
.bg-slate-50,.bg-slate-50\/10,.bg-slate-50\/20,.bg-slate-50\/40,.bg-slate-50\/50 { background-color:var(--fd-surface-2) !important; }
.bg-slate-100,.bg-slate-100\/55,.bg-slate-200 { background-color:var(--fd-surface-3) !important; }
.bg-slate-800,.bg-slate-900,.bg-slate-950 { background-color:var(--fd-surface) !important; }
.text-slate-900,.text-slate-800,.text-slate-700 { color:var(--fd-text) !important; }
.text-slate-600,.text-slate-500,.text-slate-400,.text-slate-300 { color:var(--fd-muted) !important; }
.border-slate-100,.border-slate-200,.border-slate-250,.border-slate-700,.border-slate-800,.border-slate-850,.border-slate-900 { border-color:var(--fd-border) !important; }
.bg-blue-600,.bg-blue-500 { background-color:var(--fd-brand) !important; }
.bg-blue-50,.bg-blue-50\/20,.bg-blue-100 { background-color:var(--fd-brand-soft) !important; }
.text-blue-950,.text-blue-700,.text-blue-600,.text-blue-500,.text-blue-400,.text-blue-300 { color:var(--fd-brand) !important; }
.border-blue-100,.border-blue-200,.border-blue-500,.border-blue-600,.border-blue-900 { border-color:color-mix(in srgb,var(--fd-brand) 25%,var(--fd-border)) !important; }
.bg-emerald-100,.bg-emerald-50\/50,.bg-emerald-50\/80 { background-color:var(--fd-success-soft) !important; }
.bg-emerald-500,.bg-emerald-600 { background-color:var(--fd-success) !important; }
.text-emerald-900,.text-emerald-800,.text-emerald-700,.text-emerald-600,.text-emerald-500,.text-emerald-400,.text-emerald-300 { color:var(--fd-success) !important; }
.bg-rose-100,.bg-rose-50\/50 { background-color:var(--fd-danger-soft) !important; }
.bg-rose-500 { background-color:var(--fd-danger) !important; }
.text-rose-700,.text-rose-600,.text-rose-500,.text-rose-400,.text-rose-300 { color:var(--fd-danger) !important; }
.text-white { color:#fff !important; }

html.dark .dark\:bg-slate-700,
html.dark .dark\:bg-slate-800,
html.dark .dark\:bg-slate-800\/20,
html.dark .dark\:bg-slate-800\/30,
html.dark .dark\:bg-slate-800\/40,
html.dark .dark\:bg-slate-800\/50,
html.dark .dark\:bg-slate-800\/80,
html.dark .dark\:bg-slate-900\/20,
html.dark .dark\:bg-slate-900\/50,
html.dark .dark\:bg-slate-900\/60,
html.dark .dark\:bg-slate-950,
html.dark .dark\:bg-slate-950\/20,
html.dark .dark\:bg-slate-950\/40 { background-color:var(--fd-surface) !important; }
html.dark .dark\:text-white,html.dark .dark\:text-slate-100,html.dark .dark\:text-slate-200 { color:var(--fd-text) !important; }
html.dark .dark\:text-slate-300,html.dark .dark\:text-slate-400 { color:var(--fd-muted) !important; }
html.dark .dark\:border-slate-700,html.dark .dark\:border-slate-800,html.dark .dark\:border-slate-900 { border-color:var(--fd-border) !important; }
html.dark .dark\:bg-blue-950,html.dark .dark\:bg-blue-950\/20,html.dark .dark\:bg-blue-950\/40,html.dark .dark\:bg-blue-950\/60 { background-color:var(--fd-brand-soft) !important; }
html.dark .dark\:bg-emerald-950,html.dark .dark\:bg-emerald-950\/25,html.dark .dark\:bg-emerald-950\/40 { background-color:var(--fd-success-soft) !important; }
html.dark .dark\:bg-rose-950\/20,html.dark .dark\:bg-rose-950\/25,html.dark .dark\:bg-rose-950\/40 { background-color:var(--fd-danger-soft) !important; }

/* Responsive reflow. */
@media (max-width: 1180px) {
  .kpi-grid,.smart-kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .dashboard-grid,.smart-two-col { grid-template-columns:1fr !important; }
  .settings-layout { grid-template-columns:190px minmax(0,1fr) !important; }
}
@media (max-width: 920px) {
  .sidebar { width:280px !important; transform:translateX(-105%); transition:transform .22s ease; box-shadow:var(--fd-shadow-lg) !important; }
  .sidebar.open { transform:translateX(0); }
  .main-area { margin-left:0 !important; width:100%; }
  .mobile-menu { display:inline-grid !important; }
  .settings-layout { grid-template-columns:1fr !important; }
  .settings-nav { position:static; display:flex !important; width:100%; overflow-x:auto; }
  .settings-nav button { flex:0 0 auto; white-space:nowrap; }
  .legacy-feature-wrap .grid.lg\:grid-cols-4,.legacy-feature-wrap .grid.lg\:grid-cols-3 { grid-template-columns:1fr !important; height:auto !important; }
  .legacy-feature-wrap .lg\:col-span-3,.legacy-feature-wrap .lg\:col-span-2 { grid-column:auto !important; }
}
@media (max-width: 680px) {
  .topbar { height:64px !important; padding:0 12px !important; }
  .topbar h1 { font-size:16px !important; }
  .topbar .eyebrow,.sync-pill { display:none !important; }
  .page-content { padding:14px 11px 88px !important; }
  .page-stack { gap:13px !important; }
  .page-title { align-items:flex-start !important; gap:10px !important; }
  .page-title h2 { font-size:22px !important; }
  .page-actions { width:100%; display:grid !important; grid-template-columns:1fr 1fr; }
  .page-actions .btn { width:100%; min-width:0; white-space:normal; }
  .hero-strip { min-height:0 !important; padding:20px 17px !important; border-radius:18px !important; gap:16px !important; }
  .hero-actions { width:100%; display:grid !important; grid-template-columns:1fr 1fr; }
  .hero-actions .btn { min-width:0; white-space:normal; }
  .kpi-grid,.kpi-grid.three,.smart-alert-grid,.smart-kpi-grid,.account-grid,.budget-grid,.goal-grid,.recurring-grid { grid-template-columns:1fr !important; }
  .filter-card,.form-grid,.smart-import-controls,.rule-editor,.smart-capture-row { grid-template-columns:1fr !important; }
  .filter-card .search-box,.form-grid .full { grid-column:auto !important; }
  .split-row { grid-template-columns:minmax(0,1fr) minmax(110px,.65fr) auto !important; }
  .integration-actions.wrap { display:grid !important; grid-template-columns:1fr !important; }
  .integration-actions.wrap .btn { width:100%; white-space:normal; }
  .diagnostic-grid { grid-template-columns:1fr !important; }
  .modal-backdrop { padding:0 !important; align-items:flex-end !important; }
  .modal { width:100% !important; max-height:92vh; border-radius:20px 20px 0 0 !important; }
  .data-table,.smart-table { min-width:660px; }
  .legacy-feature-wrap { overflow:visible !important; }
  .legacy-feature-wrap .h-\[calc\(100vh-180px\)\] { height:auto !important; min-height:620px; }
  .legacy-feature-wrap .max-h-\[calc\(100vh-370px\)\] { max-height:460px !important; }
}
@media (max-width: 420px) {
  .top-actions .btn.compact { width:38px !important; padding:0 !important; font-size:0 !important; }
  .hero-actions,.page-actions { grid-template-columns:1fr !important; }
  .split-row { grid-template-columns:1fr !important; }
  .split-row .icon-btn { width:100% !important; }
}

/* === FinDompet 5.2.1 — Text Containment & Mobile Overflow Fix ===
   Keep every label/value inside its visual container, including long account names,
   AI text, Indonesian currency values, diagnostics, buttons and legacy Tailwind cards. */
*, *::before, *::after { box-sizing: border-box; }

/* Every major surface and its flex/grid descendants are allowed to shrink. */
:is(
  .app-shell,.main-area,.page-content,.page-stack,.panel,.hero-strip,.topbar,.sidebar,
  .kpi-card,.account-card,.budget-card,.goal-card,.recurring-card,.table-card,.chart-card,
  .settings-card,.smart-card,.smart-kpi,.smart-alert,.smart-hub,.smart-hub-hero,.smart-note,
  .smart-ai-score,.smart-plan-list,.split-editor,.modal,.modal-body,.ai-drawer,.legacy-feature-wrap,
  .section-head,.page-title,.page-actions,.hero-actions,.integration-actions,.security-banner,
  .compact-row,.rule-list,.smart-check-list,.smart-timeline,.tx-split-detail
) > * { min-width: 0; max-width: 100%; }

/* Safe wrapping for human-readable content. Do not let long words, IDs or amounts escape cards. */
:is(
  h1,h2,h3,h4,h5,h6,p,label,small,strong,b,em,
  .page-title,.section-head,.hero-strip,.kpi-copy,.smart-alert,.smart-kpi,.smart-note,
  .smart-ai-score,.smart-plan-list,.rule-list,.smart-check-list,.security-banner,
  .integration-status,.telegram-command-box,.diagnostic-grid,.tx-split-detail,.empty-state,
  .chat-message span,.auth-card,.auth-copy,.legacy-feature-wrap
) span,
:is(
  h1,h2,h3,h4,h5,h6,p,label,small,strong,b,em,
  .hero-strip,.kpi-copy,.smart-alert,.smart-kpi,.smart-note,.smart-plan-list,
  .rule-list code,.telegram-command-box,.diagnostic-grid>span,.tx-split-detail b,
  .chat-message span,.empty-state p,.auth-copy p
) {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Inputs and controls must never become wider than their grid/flex cell. */
input, select, textarea, button { min-width: 0; max-width: 100%; }

/* Buttons were nowrap in the legacy stylesheet. Professional UI should wrap instead of overflow. */
.btn,
.text-btn,
.nav-item,
.settings-nav button,
.smart-tabbar button,
.category-chips span,
.transaction-type button {
  white-space: normal !important;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.btn { height: auto; padding-top: 10px; padding-bottom: 10px; }
.nav-item { min-height: 43px; height: auto !important; padding-top: 9px !important; padding-bottom: 9px !important; }
.settings-nav button { min-height: 40px; height: auto !important; padding-top: 8px !important; padding-bottom: 8px !important; }

/* Values inside compact/flex rows can shrink; preserve ellipsis where a one-line row is intended. */
.compact-row .grow,
.table-primary,
.smart-timeline .grow,
.smart-note > :not(svg),
.smart-ai-score > :not(svg),
.integration-status > :not(svg),
.security-banner > :not(svg),
.split-head > :not(button),
.section-head > :not(.btn):not(button),
.page-title > :not(.page-actions),
.hero-strip > :not(.hero-actions) { min-width: 0; }

/* Long diagnostics / webhook URLs / merchant strings are especially prone to overflow. */
.diagnostic-output,
.telegram-command-box,
.rule-list code,
pre, code {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Chat messages and AI prose must respect drawer width. */
.chat-message { min-width: 0; max-width: 100%; }
.chat-message span { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.ai-title { min-width: 0; }
.ai-title > div { min-width: 0; }

/* Smart tables intentionally scroll horizontally, but cell content may still wrap for readability. */
.smart-table td { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
.smart-table th { white-space: normal; overflow-wrap: anywhere; }
.smart-table select { max-width: 100%; }

/* Prevent long currency/labels from forcing card width. */
.kpi-copy strong,
.smart-kpi strong,
.metric-card strong,
.account-balance,
.balance-value,
.amount,
.money {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tailwind legacy flex/grid children: allow shrinking without changing their layout semantics. */
.legacy-feature-wrap :is(.flex,.grid) > * { min-width: 0; max-width: 100%; }
.legacy-feature-wrap :is(.break-words,.whitespace-normal) { overflow-wrap: anywhere !important; }

@media (max-width: 920px) {
  /* Settings tabs remain horizontally scrollable; tab text stays on one line inside the scroller. */
  .settings-nav button { white-space: nowrap !important; max-width: none; }
}

@media (max-width: 680px) {
  .topbar-left,.top-actions { min-width:0; max-width:100%; }
  .topbar-left h1 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .smart-note { align-items:flex-start; flex-wrap:wrap; }
  .smart-note .text-btn { margin-left:0 !important; width:100%; justify-content:flex-start; }
  .smart-ai-score,.split-head,.split-footer,.security-banner { align-items:flex-start; flex-wrap:wrap; }
  .category-chips span { max-width:100%; }
  .smart-table { min-width: 610px !important; }
}

@media (max-width: 420px) {
  .btn { width:100%; justify-content:center; }
  .modal-actions { display:grid !important; grid-template-columns:1fr; }
  .modal-actions .btn { width:100%; }
}

/* =========================================================
   FinDompet 5.3 FINAL — typography, AI workspace & hardening
   One final override layer for all legacy/base components.
   ========================================================= */
:root {
  --fd-font-size: 14px;
  --fd-leading: 1.55;
}
html { font-size: 16px; }
body { font-size: var(--fd-font-size) !important; line-height: var(--fd-leading); }
button,input,select,textarea { font: inherit; }

/* Restore readable product typography; older layers used 7–10px extensively. */
.nav-item { font-size: 13px !important; }
.nav-caption,.eyebrow,.section-head>div>span,.smart-kicker,.hero-kicker { font-size: 10px !important; letter-spacing: .08em; }
.page-title p,.hero-strip p,.settings-section p,.smart-help,.smart-note,.security-banner,.integration-status,.telegram-command-box { font-size: 12px !important; line-height: 1.6 !important; }
.section-head h3,.settings-section h3 { font-size: 15px !important; line-height:1.35 !important; }
.compact-row strong,.table-primary strong,.account-card h3,.budget-title strong { font-size: 12px !important; }
.compact-row span,.table-primary span,.account-card small,.budget-foot,.empty-state p { font-size: 11px !important; line-height:1.45 !important; }
.kpi-copy span,.smart-kpi span { font-size: 11px !important; }
.kpi-copy strong,.smart-kpi strong { font-size: clamp(18px,2vw,25px) !important; line-height:1.2 !important; }
.btn,.text-btn,.mini-action { font-size: 12px !important; }
label { font-size: 12px; }
input,select,textarea { font-size: 13px !important; }

/* Keep legacy planning tools readable and bounded without changing their calculations. */
.legacy-feature-wrap [class*="text-[9px]"],
.legacy-feature-wrap [class*="text-[10px]"] { font-size:11px !important; line-height:1.45 !important; }
.legacy-feature-wrap [class*="text-[11px]"] { font-size:11.5px !important; line-height:1.45 !important; }
.legacy-feature-wrap .text-xs { font-size:12px !important; line-height:1.5 !important; }
.legacy-feature-wrap .text-sm { font-size:13px !important; line-height:1.45 !important; }
.legacy-feature-wrap button,.legacy-feature-wrap input,.legacy-feature-wrap select { min-width:0; max-width:100%; }
.legacy-feature-wrap .grid>* ,.legacy-feature-wrap .flex>* { min-width:0; }

/* AI is a real page now, not a transient drawer. */
.ai-workspace { padding:0 !important; overflow:hidden; min-height: min(720px, calc(100vh - 180px)); display:flex; flex-direction:column; }
.ai-workspace-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:20px 22px 16px; border-bottom:1px solid var(--fd-border); background:linear-gradient(135deg,color-mix(in srgb,var(--fd-brand) 6%,var(--fd-surface)),var(--fd-surface)); }
.ai-workspace-head>div { min-width:0; }
.ai-workspace-head h3 { margin:5px 0 5px; font-size:20px; letter-spacing:-.02em; }
.ai-workspace-head p { margin:0; max-width:780px; color:var(--fd-muted); font-size:12px; line-height:1.6; }
.ai-quick-prompts { display:flex; gap:8px; padding:12px 18px; overflow-x:auto; border-bottom:1px solid var(--fd-border); background:var(--fd-surface-2); }
.ai-quick-prompts button { flex:0 0 auto; max-width:280px; border:1px solid var(--fd-border); border-radius:999px; padding:8px 11px; background:var(--fd-surface); color:var(--fd-text); font-size:11px; font-weight:750; cursor:pointer; white-space:normal; line-height:1.35; }
.ai-quick-prompts button:hover { border-color:color-mix(in srgb,var(--fd-brand) 38%,var(--fd-border)); color:var(--fd-brand); }
.ai-quick-prompts button:disabled { opacity:.45; cursor:not-allowed; }
.ai-thread { flex:1; min-height:330px; max-height:58vh; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:13px; background:linear-gradient(180deg,var(--fd-surface),color-mix(in srgb,var(--fd-surface-2) 60%,var(--fd-surface))); }
.ai-thread-message { width:100%; min-width:0; display:flex; gap:9px; align-items:flex-start; }
.ai-thread-message.user { justify-content:flex-end; }
.ai-thread-avatar { width:30px; height:30px; flex:0 0 30px; border-radius:10px; display:grid; place-items:center; background:var(--fd-brand-soft); color:var(--fd-brand); border:1px solid color-mix(in srgb,var(--fd-brand) 16%,var(--fd-border)); font-size:9px; font-weight:900; }
.ai-thread-message.user .ai-thread-avatar { order:2; background:var(--fd-surface-3); color:var(--fd-muted); border-color:var(--fd-border); }
.ai-thread-bubble { max-width:min(780px,82%); min-width:0; padding:11px 13px; border-radius:15px; background:var(--fd-surface-2); border:1px solid var(--fd-border); color:var(--fd-text); font-size:12.5px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; box-shadow:0 4px 14px color-mix(in srgb,var(--fd-text) 3%,transparent); }
.ai-thread-message.user .ai-thread-bubble { background:linear-gradient(135deg,var(--fd-brand),var(--fd-brand-strong)); color:#fff; border-color:transparent; }
.ai-thinking { display:flex; align-items:center; gap:5px; color:var(--fd-muted); }
.ai-thinking i { width:5px; height:5px; border-radius:50%; background:var(--fd-brand); animation:pulse 1s infinite; }
.ai-thinking i:nth-child(2){animation-delay:.14s}.ai-thinking i:nth-child(3){animation-delay:.28s}
.ai-composer { border-top:1px solid var(--fd-border); padding:14px 18px 16px; background:var(--fd-surface); }
.ai-composer textarea { width:100%; resize:vertical; min-height:78px; max-height:180px; border-radius:13px !important; padding:11px 12px !important; }
.ai-composer-foot { margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ai-composer-foot small { color:var(--fd-faint); font-size:10.5px; }
.ai-composer-foot .btn { flex:0 0 auto; min-width:96px; }

/* Floating AI button navigates to the permanent page. */
.ai-fab { height:46px !important; right:22px !important; bottom:20px !important; padding:0 17px !important; font-size:12px !important; background:linear-gradient(135deg,var(--fd-brand),var(--fd-brand-strong)) !important; box-shadow:0 14px 34px color-mix(in srgb,var(--fd-brand) 25%,transparent) !important; }

/* Strong containment across cards, action rows and dynamic values. */
:is(.panel,.account-card,.budget-card,.recurring-card,.smart-card,.settings-card,.modal,.hero-strip,.kpi-card,.smart-alert,.smart-kpi) { overflow-wrap:anywhere; }
:is(.page-title,.section-head,.budget-title,.account-head,.smart-ai-score,.split-head,.split-footer,.integration-status,.security-banner) { min-width:0; }
:is(.page-title,.section-head,.budget-title,.account-head,.smart-ai-score,.split-head,.split-footer,.integration-status,.security-banner)>* { min-width:0; max-width:100%; }
.row-actions,.page-actions,.hero-actions,.integration-actions { flex-wrap:wrap; }

/* Theme transition is synchronized across the app; avoid mismatched hard flashes. */
body,.sidebar,.topbar,.panel,.modal,.settings-card,.smart-card,.smart-kpi,.smart-alert,input,select,textarea,.btn,.icon-btn,.nav-item,.ai-thread,.ai-composer { transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease; }

@media (max-width: 680px) {
  body { font-size:13px !important; }
  .page-title h2 { font-size:20px !important; }
  .ai-workspace { min-height:calc(100vh - 150px); border-radius:16px !important; }
  .ai-workspace-head { padding:16px 14px 13px; flex-direction:column; gap:10px; }
  .ai-workspace-head .btn { width:100%; }
  .ai-quick-prompts { padding:10px 12px; }
  .ai-thread { max-height:none; min-height:360px; padding:14px 11px; }
  .ai-thread-bubble { max-width:86%; font-size:12px; }
  .ai-composer { padding:11px; position:sticky; bottom:0; z-index:2; }
  .ai-composer-foot { align-items:stretch; flex-direction:column; }
  .ai-composer-foot .btn { width:100%; }
  .ai-fab { width:46px !important; height:46px !important; right:14px !important; bottom:14px !important; padding:0 !important; justify-content:center; }
  .ai-fab span { display:none !important; }
  .smart-tabbar { display:flex !important; overflow-x:auto; scrollbar-width:none; }
  .smart-tabbar button { flex:0 0 auto !important; white-space:nowrap !important; }
  .legacy-feature-wrap { overflow-x:hidden !important; }
}


/* Final receipt/message containment */
.receipt-unavailable {
  display:block;
  margin-top:8px;
  padding:9px 11px;
  border:1px dashed var(--fd-border-strong);
  border-radius:10px;
  background:var(--fd-surface-2);
  color:var(--fd-muted);
  font-size:11px;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.receipt-preview,.receipt-detail { max-width:100%; height:auto; object-fit:contain; }

/* Form/action text should wrap instead of escaping its control. Horizontal tab bars are the explicit exception. */
.btn:not(.icon-btn), .text-btn, .mini-action {
  white-space:normal !important;
  overflow-wrap:anywhere;
  text-align:center;
}
.smart-tabbar button,.settings-nav button { white-space:nowrap !important; }
.table-text,.soft-badge,.profile-copy,.compact-row .grow,.table-primary>div:last-child { min-width:0; max-width:100%; }
.soft-badge { white-space:normal !important; overflow-wrap:anywhere; }

/* 5.3 final hard boundary: nothing may widen the application viewport. */
html,body,#root,.app-shell,.page-content,.page-stack { width:100%; max-width:100%; min-width:0; }
/* Desktop content occupies the viewport minus the fixed sidebar. Setting main-area to
   100% while also adding a sidebar margin was a real overflow source in 5.2.x. */
.main-area { width:calc(100% - 264px); max-width:calc(100% - 264px); min-width:0; }
img,video,canvas { max-width:100%; }
svg { max-width:100%; }
input,select,textarea,button { max-width:100%; min-width:0; }
.panel,.modal,.settings-card,.smart-card,.kpi-card,.account-card,.budget-card,.recurring-card,.legacy-feature-wrap { max-width:100%; min-width:0; }
.diagnostic-output { overflow:auto; white-space:pre-wrap !important; overflow-wrap:anywhere; word-break:break-word; }
@media (max-width:900px){
  .main-area { width:100%; max-width:100%; margin-left:0 !important; }
}
@media (max-width:680px){
  .page-content { overflow-x:hidden; }
  .legacy-feature-wrap :is(.grid,.flex) { max-width:100%; }
  .legacy-feature-wrap :is(.grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-cols-5) { min-width:0; }
}

/* =========================================================
   FinDompet 5.5 — Floating AI chat is a true global drawer.
   The bottom-right button must never navigate away from the
   user's current page; it opens this overlay and shares the
   same conversation state with the AI workspace.
   ========================================================= */
.ai-chat-backdrop {
  z-index: 120 !important;
  place-items: stretch end !important;
  padding: 0 !important;
  background: color-mix(in srgb, #020617 58%, transparent) !important;
}
.ai-chat-drawer {
  width: min(470px, 100%) !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;
  background: var(--fd-surface) !important;
  border-left: 1px solid var(--fd-border) !important;
  box-shadow: -18px 0 54px color-mix(in srgb, #020617 22%, transparent) !important;
  overflow: hidden;
}
.ai-drawer-head {
  flex: 0 0 auto;
  min-height: 72px;
  height: auto !important;
  gap: 12px;
  padding: 13px 14px 13px 16px !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fd-brand) 8%, var(--fd-surface)), var(--fd-surface));
}
.ai-drawer-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--fd-brand), var(--fd-brand-strong));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--fd-brand) 24%, transparent);
}
.ai-drawer-head .ai-title strong { font-size: 13px !important; line-height: 1.25; }
.ai-drawer-head .ai-title span { font-size: 10.5px !important; line-height: 1.4; color: var(--fd-muted); }
.ai-drawer-actions { display:flex; align-items:center; justify-content:flex-end; gap:6px; flex:0 0 auto; }
.ai-clear-btn { font-size: 10.5px !important; padding: 7px 8px !important; }
.ai-chat-drawer .ai-prompts {
  flex: 0 0 auto;
  padding: 10px 12px !important;
  gap: 7px;
  background: var(--fd-surface-2);
  scrollbar-width: thin;
}
.ai-chat-drawer .ai-prompts button {
  font-size: 10.5px !important;
  line-height: 1.35;
  padding: 7px 10px !important;
  border-color: var(--fd-border) !important;
  color: var(--fd-text) !important;
  background: var(--fd-surface) !important;
}
.ai-chat-drawer .chat-scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 16px !important;
  gap: 10px !important;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--fd-surface), color-mix(in srgb, var(--fd-surface-2) 52%, var(--fd-surface)));
}
.ai-chat-drawer .chat-message span {
  max-width: 88% !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  line-height: 1.62 !important;
  border-radius: 14px !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}
.ai-chat-drawer .chat-message.assistant span {
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
  border: 1px solid var(--fd-border) !important;
  border-top-left-radius: 5px !important;
}
.ai-chat-drawer .chat-message.user span {
  background: linear-gradient(135deg, var(--fd-brand), var(--fd-brand-strong)) !important;
  color: #fff !important;
  border: 0 !important;
  border-top-right-radius: 5px !important;
}
.ai-drawer-input {
  flex: 0 0 auto;
  padding: 12px !important;
  grid-template-columns: minmax(0,1fr) 44px !important;
  gap: 8px !important;
  border-top: 1px solid var(--fd-border) !important;
  background: var(--fd-surface) !important;
}
.ai-drawer-input textarea {
  width: 100%;
  min-height: 46px !important;
  max-height: 132px !important;
  resize: none;
  padding: 11px 12px !important;
  border-radius: 13px !important;
  background: var(--fd-surface-2) !important;
  color: var(--fd-text) !important;
}
.ai-drawer-input button {
  width: 44px !important;
  height: 44px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, var(--fd-brand), var(--fd-brand-strong)) !important;
}
.ai-drawer-config {
  flex: 0 0 auto;
  padding: 12px;
  border-top: 1px solid var(--fd-border);
  background: var(--fd-surface);
}
.ai-drawer-config > div { display:flex; align-items:center; gap:8px; margin-bottom:9px; color:var(--fd-muted); font-size:11px; }
.ai-drawer-config .btn { width:100%; }
.ai-drawer-footnote {
  flex: 0 0 auto;
  padding: 0 12px 10px;
  background: var(--fd-surface);
  color: var(--fd-faint);
  font-size: 9.5px;
  line-height: 1.45;
  text-align: center;
}
.ai-fab.active {
  background: linear-gradient(135deg, var(--fd-brand-strong), var(--fd-brand)) !important;
}

@media (max-width: 680px) {
  .ai-chat-backdrop { place-items: end stretch !important; }
  .ai-chat-drawer {
    width: 100% !important;
    height: min(88dvh, 760px) !important;
    max-height: 88dvh !important;
    border-left: 0 !important;
    border-top: 1px solid var(--fd-border) !important;
    border-radius: 22px 22px 0 0 !important;
    box-shadow: 0 -20px 54px color-mix(in srgb, #020617 26%, transparent) !important;
    animation: fdAiSheetIn .2s ease-out;
  }
  .ai-drawer-head { min-height: 66px; padding: 11px 11px 10px 14px !important; }
  .ai-clear-btn { display:none !important; }
  .ai-chat-drawer .ai-prompts { padding:8px 10px !important; }
  .ai-chat-drawer .chat-scroll { padding:12px 10px !important; }
  .ai-chat-drawer .chat-message span { max-width:91% !important; font-size:11.5px !important; }
  .ai-drawer-input { padding:10px !important; }
  .ai-drawer-footnote { display:none; }
}
@keyframes fdAiSheetIn { from { transform:translateY(22px); opacity:.7; } to { transform:none; opacity:1; } }

/* =========================================================
   FinDompet 5.6 UI POLISH - typography, wrapping & AI drawer
   Purpose: eliminate cramped 7-10px legacy text, clipped chips,
   and inconsistent line-height across cards/tables/dialogs.
   ========================================================= */

/* A readable, consistent base scale. Keep dense financial UI compact,
   but never below practical desktop/mobile legibility. */
html { font-size: 16px; }
body, button, input, select, textarea { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { font-size: 13px; line-height: 1.5; }

/* General text containment and readable line heights. */
.app-shell :is(p,span,strong,small,label,button,a,td,th,li,code) {
  min-width: 0;
}
.app-shell :is(p,span,strong,small,label,li) {
  overflow-wrap: break-word;
}
.page-content :is(p,li,.muted-copy,.smart-note,.telegram-command-box,.diagnostic-output) {
  line-height: 1.55;
}

/* Global control typography - overrides legacy microscopic sizes. */
.btn,.icon-btn,.text-btn,.mini-action,.segmented button,.settings-nav button,
.transaction-type button,.category-chips button,.integration-actions button,
.smart-tabbar button,.smart-table select,.input-with-action button {
  font-size: 11.5px !important;
  line-height: 1.25 !important;
}
.btn { min-height: 38px; }
.btn.compact { min-height: 34px; }
input,select,textarea { font-size: 12px !important; line-height: 1.45 !important; }
label { font-size: 11px !important; line-height: 1.45 !important; }

/* Navigation / header */
.brand-wrap strong { font-size: 15px !important; line-height: 1.25; }
.brand-wrap span,.brand-lockup span { font-size: 10.5px !important; line-height: 1.4; }
.nav-caption { font-size: 10.5px !important; letter-spacing: .08em; }
.nav-item { font-size: 12px !important; line-height: 1.25; }
.sidebar-health p,.profile-copy span { font-size: 10.5px !important; }
.profile-copy strong { font-size: 11.5px !important; }
.eyebrow { font-size: 10px !important; }
.sync-pill { font-size: 11px !important; }

/* Dashboard / cards */
.section-head span,.hero-kicker,.kpi-copy span,.bar-copy,.compact-row .grow span,
.account-balance span,.account-meta,.budget-title>div span,.budget-title>div small,
.recurring-card p,.rec-meta,.goal-values span,.goal-foot,.budget-foot,
.health-metric span,.health-metric p,.tool-card>p,.tool-results span,.big-result span,
.settings-section>p,.integration-status,.security-banner span,.clean-list li,
.check-label small,.empty-state p,.auth-card-title p,.auth-error,.auth-note,
.muted-copy,.type-copy small,.integration-meta,.telegram-command-box strong,
.telegram-command-box span,.tx-detail-grid span,.diag-item,.smart-alert span,
.smart-kpi span,.smart-timeline small,.smart-empty,.smart-ai-placeholder p,
.smart-ai-score span,.smart-plan-list>div>span,.smart-plan-list p,.smart-plan-list small,
.smart-note,.smart-import-summary span,.rule-list code,.rule-list strong,
.smart-check-list>div,.split-head small,.split-footer,.smart-integrations span {
  font-size: 11px !important;
  line-height: 1.5 !important;
}
.kpi-copy small,.table-primary span,.table-text,.soft-badge,.date-chip,.account-type,
.priority,.category-chips span,.credit-limit span,.account-cycle,.type-nature {
  font-size: 10.5px !important;
  line-height: 1.4 !important;
}
.kpi-copy strong,.account-balance strong,.budget-title>div strong,.goal-values strong,
.big-result strong,.tool-results strong { line-height: 1.25 !important; }

/* Tables: readable without losing density. */
.data-table th,.smart-table th { font-size: 10.5px !important; line-height: 1.35 !important; }
.data-table td,.smart-table td { font-size: 11.5px !important; line-height: 1.45 !important; }
.data-table td,.smart-table td,.table-primary,.table-text { overflow-wrap:anywhere; word-break:normal; }
.row-actions .mini-action { font-size:10.5px !important; }

/* AI drawer: the screenshot issue - quick prompts are a tidy grid, never a clipped strip. */
.ai-chat-drawer { width:min(520px,100%) !important; }
.ai-chat-drawer .ai-prompts {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  padding:12px 14px !important;
  overflow:visible !important;
  background:var(--fd-surface-2) !important;
  border-bottom:1px solid var(--fd-border) !important;
}
.ai-chat-drawer .ai-prompts button {
  width:100%;
  min-height:38px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;
  font-size:11px !important;
  line-height:1.3 !important;
  padding:8px 11px !important;
  border-radius:11px !important;
}
.ai-chat-drawer .ai-prompts button:hover:not(:disabled) {
  border-color:color-mix(in srgb,var(--fd-brand) 34%,var(--fd-border)) !important;
  background:color-mix(in srgb,var(--fd-brand) 6%,var(--fd-surface)) !important;
  color:var(--fd-brand) !important;
}
.ai-drawer-head .ai-title { min-width:0; flex:1 1 auto; }
.ai-drawer-head .ai-title > div:last-child { min-width:0; }
.ai-drawer-head .ai-title strong { font-size:13.5px !important; }
.ai-drawer-head .ai-title span {
  font-size:10.5px !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
}
.ai-drawer-actions { margin-left:auto; }
.ai-clear-btn { white-space:nowrap !important; }
.ai-chat-drawer .chat-message span {
  font-size:12.5px !important;
  line-height:1.62 !important;
}
.ai-drawer-footnote { font-size:10px !important; }

/* All chips/badges should wrap inside their own box rather than escape it. */
.soft-badge,.category-chips span,.integration-status,.priority,.account-type,
.smart-integrations span,.diagnostic-grid>span {
  max-width:100%;
  white-space:normal !important;
  overflow-wrap:anywhere;
}

/* Better text balance for narrow cards and action rows. */
.budget-title,.rec-title,.section-head,.page-title,.modal-head,.integration-actions,
.smart-plan-list>div,.compact-row,.table-primary,.profile-box,.brand-wrap {
  min-width:0;
}
.budget-title>div,.rec-title>div,.section-head>div,.page-title>div,.modal-head>div,
.compact-row .grow,.table-primary>div:last-child,.profile-copy {
  min-width:0;
}

/* Mobile: maintain readable type and stack prompts cleanly on very narrow screens. */
@media (max-width:680px) {
  body { font-size:13px; }
  .topbar h1 { font-size:16px !important; }
  .ai-chat-drawer .ai-prompts { grid-template-columns:repeat(2,minmax(0,1fr)) !important; padding:9px 10px !important; gap:7px !important; }
  .ai-chat-drawer .ai-prompts button { font-size:10.5px !important; min-height:40px; padding:7px 9px !important; }
  .ai-chat-drawer .chat-message span { font-size:12px !important; }
  .data-table td,.smart-table td { font-size:11px !important; }
}
@media (max-width:390px) {
  .ai-chat-drawer .ai-prompts { grid-template-columns:1fr !important; }
  .ai-chat-drawer .ai-prompts button { min-height:36px; }
}

/* 5.6 remaining legacy micro-text overrides. */
.bar-copy strong,.date-chip span,.info-grid small,.budget-percent,.donut-center span,
.legend-list>div,.upload-box span,.modal-head span,.check-label strong,.hero-badge,
.auth-features strong,.auth-features small,.checking,.checkbox-row span,
.type-copy strong,.smart-kicker,.smart-timeline strong,.smart-plan-list strong,
.split-head strong,.tx-split-detail b {
  font-size:11px !important;
  line-height:1.4 !important;
}
.recharts-cartesian-axis-tick text,.recharts-cartesian-axis-tick-value { font-size:10.5px !important; }
.recharts-default-tooltip { font-size:11px !important; }
.ai-chat-drawer .ai-prompts button { font-size:11.5px !important; }
.ai-drawer-head .ai-title span { font-size:11px !important; }

/* =========================================================
   FinDompet 5.7 FULL AUDIT - final containment & legibility
   ========================================================= */
/* Legacy Tailwind arbitrary micro-text is raised to the audited minimum.
   Wrapping rules below keep the larger type inside cards/buttons. */
.app-shell [class~="text-[8px]"],
.app-shell [class~="text-[9px]"],
.app-shell [class~="text-[10px]"] { font-size: 11px !important; line-height: 1.45 !important; }
.app-shell [class~="text-[11px]"] { font-size: 11.5px !important; line-height: 1.5 !important; }

/* Never let normal content widen the application viewport. */
.app-shell,.main-area,.page-content,.page-stack,.panel,.modal-card,.settings-card,
.smart-card,.tool-card,.ai-chat-drawer { min-width:0; max-width:100%; }
.page-content { overflow-x:clip; }
.panel :is(h1,h2,h3,h4,p,span,strong,small,label,button,a,li),
.modal-card :is(h1,h2,h3,h4,p,span,strong,small,label,button,a,li),
.smart-card :is(h1,h2,h3,h4,p,span,strong,small,label,button,a,li) {
  overflow-wrap:anywhere;
  word-break:normal;
}
/* Data tables own their horizontal overflow; the page itself never does. */
.data-table-wrap,.smart-table-wrap,.table-scroll { width:100%; max-width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }

/* Action groups may wrap instead of colliding when translations/names are long. */
.page-actions,.row-actions,.modal-actions,.integration-actions,.hero-actions { flex-wrap:wrap; }
.row-actions > *,.modal-actions > * { max-width:100%; }

@media (max-width:680px) {
  .page-actions > .btn,.modal-actions > .btn { flex:1 1 140px; }
  .panel,.smart-card,.tool-card { overflow:hidden; }
}


/* 5.7 FULL AUDIT — final text containment. Tombol/card boleh turun baris;
   hanya navigation tab yang sengaja tetap horizontal-scroll. */
.btn:not(.segmented button),
.text-btn,
.integration-actions button,
.smart-import-actions button,
.rule-editor button,
.page-actions button,
.hero-actions button {
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.25;
}
.table-primary > div,
.compact-row .grow,
.bar-copy,
.legend-list > div,
.smart-alert > div,
.integration-status,
.checkbox-row,
.settings-section,
.panel {
  min-width: 0 !important;
}
.table-primary strong,
.table-primary span,
.compact-row .grow strong,
.compact-row .grow span,
.table-text,
.soft-badge,
.smart-alert strong,
.smart-alert span {
  max-width: 100% !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.smart-table td { white-space: normal !important; overflow-wrap:anywhere; }
@media (max-width: 680px) {
  .page-actions,.hero-actions,.smart-import-actions { flex-wrap:wrap !important; }
  .page-actions .btn,.hero-actions .btn,.smart-import-actions .btn { min-width:0; }
}

/* FinDompet 6.0 Professional Suite */
.pro-suite{gap:18px}.pro-tabs{display:flex;gap:8px;overflow:auto;padding:4px 2px 8px;scrollbar-width:none}.pro-tabs::-webkit-scrollbar{display:none}.pro-tabs button{white-space:nowrap;border:1px solid var(--fd-border);background:var(--fd-surface);color:var(--fd-muted);border-radius:999px;padding:9px 13px;font:inherit;font-weight:700;cursor:pointer;transition:.18s ease}.pro-tabs button:hover,.pro-tabs button.active{background:var(--fd-brand-soft);color:var(--fd-brand);border-color:color-mix(in srgb,var(--fd-brand) 38%,var(--fd-border))}.pro-card{padding:20px!important;border-radius:var(--fd-radius-lg)!important}.pro-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px}.pro-card-head>div>span{display:block;color:var(--fd-faint);font-size:11px;font-weight:800;letter-spacing:.12em}.pro-card-head h3{margin:4px 0 0;font-size:18px;line-height:1.25}.pro-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.pro-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pro-metric{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--fd-border);border-radius:16px;background:var(--fd-surface)}.pro-metric-icon{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:12px;background:var(--fd-brand-soft);color:var(--fd-brand)}.pro-metric small,.pro-metric span:not(.pro-metric-icon){display:block;color:var(--fd-muted);font-size:12px}.pro-metric strong{display:block;margin:2px 0;font-size:19px;line-height:1.2}.pro-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);gap:18px;padding:24px;border-radius:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--fd-brand) 17%,var(--fd-surface)),var(--fd-surface));border:1px solid color-mix(in srgb,var(--fd-brand) 25%,var(--fd-border));box-shadow:var(--fd-shadow)}.pro-hero h2{margin:7px 0 6px;font-size:clamp(28px,4vw,44px);letter-spacing:-.04em}.pro-hero p,.pro-help{color:var(--fd-muted);line-height:1.6}.pro-hero-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;justify-content:center}.pro-breakdown{display:grid;gap:7px;margin-top:16px}.pro-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--fd-border)}.pro-breakdown span{color:var(--fd-muted)}.pro-score-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}.pro-score-grid>div{text-align:center;padding:12px 8px;background:var(--fd-surface-2);border-radius:12px}.pro-score-grid strong,.pro-score-grid span{display:block}.pro-score-grid span{font-size:11px;color:var(--fd-muted);margin-top:4px}.pro-progress{height:9px;border-radius:999px;background:var(--fd-surface-3);overflow:hidden}.pro-progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--fd-brand),var(--fd-accent));transition:width .4s ease}.pro-insights{display:grid;gap:10px}.pro-insights>div{display:flex;gap:12px;align-items:flex-start;padding:13px;border-radius:14px;background:var(--fd-surface-2)}.pro-insights svg{flex:0 0 auto;color:var(--fd-brand)}.pro-insights strong,.pro-insights span{display:block}.pro-insights span{font-size:13px;color:var(--fd-muted);margin-top:3px}.pro-inline-field{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.pro-inline-field input{min-width:160px}.pro-undo{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--fd-warning-soft);color:var(--fd-warning);border-radius:14px}.pro-calendar-list,.pro-sub-list,.pro-budget-list,.pro-security-list,.pro-receipt-list{display:grid;gap:9px}.pro-calendar-list>div,.pro-sub-list>div,.pro-budget-list>div,.pro-security-list>div,.pro-receipt-list>div{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--fd-border);border-radius:14px;background:var(--fd-surface-2);min-width:0}.pro-calendar-list .grow,.pro-sub-list .grow,.pro-budget-list .grow,.pro-security-list .grow,.pro-receipt-list .grow{min-width:0}.pro-calendar-list strong,.pro-calendar-list span,.pro-sub-list strong,.pro-sub-list span,.pro-budget-list strong,.pro-budget-list span,.pro-security-list strong,.pro-security-list span,.pro-receipt-list strong,.pro-receipt-list span{display:block}.pro-calendar-list span,.pro-sub-list span,.pro-budget-list span,.pro-security-list span,.pro-receipt-list span{font-size:12px;color:var(--fd-muted);margin-top:2px;overflow-wrap:anywhere}.pro-date-chip{display:grid;place-items:center;min-width:60px;padding:7px;border-radius:12px;background:var(--fd-brand-soft);color:var(--fd-brand);font-size:12px;font-weight:800}.pro-command{display:flex;align-items:center;gap:10px;padding:4px 13px;border:1px solid var(--fd-border-strong);border-radius:14px;background:var(--fd-surface-2)}.pro-command:focus-within{border-color:var(--fd-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--fd-brand) 12%,transparent)}.pro-command input{width:100%;border:0!important;box-shadow:none!important;background:transparent!important;padding:12px 0!important}.pro-search-results{display:grid;gap:7px;margin-top:12px;max-height:430px;overflow:auto}.pro-search-results button{text-align:left;display:grid;grid-template-columns:90px minmax(0,1fr);gap:2px 10px;padding:12px;border:1px solid var(--fd-border);border-radius:12px;background:var(--fd-surface);color:var(--fd-text);cursor:pointer}.pro-search-results button:hover{border-color:var(--fd-brand);background:var(--fd-brand-soft)}.pro-search-results button>span{grid-row:1/3;color:var(--fd-brand);font-size:11px;font-weight:800;text-transform:uppercase}.pro-search-results small{color:var(--fd-muted)}.pro-quick-actions{display:flex;gap:9px;flex-wrap:wrap}.pro-dropzone{display:grid;place-items:center;text-align:center;gap:6px;padding:30px 18px;border:1.5px dashed var(--fd-border-strong);border-radius:18px;background:var(--fd-surface-2);cursor:pointer;transition:.18s ease}.pro-dropzone:hover{border-color:var(--fd-brand);background:var(--fd-brand-soft)}.pro-dropzone input{display:none}.pro-dropzone span{color:var(--fd-muted);font-size:12px}.pro-receipt-list img{width:62px;height:62px;object-fit:cover;border-radius:10px;border:1px solid var(--fd-border)}.pro-sub-summary{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:14px 0 18px}.pro-sub-summary strong{font-size:28px}.pro-sub-summary span{color:var(--fd-muted)}.pro-sub-summary b{margin-left:auto}.pro-decision{margin-top:14px;padding:14px;border-radius:14px;border:1px solid}.pro-decision.ok{background:var(--fd-success-soft);border-color:color-mix(in srgb,var(--fd-success) 28%,var(--fd-border));color:var(--fd-success)}.pro-decision.warn{background:var(--fd-danger-soft);border-color:color-mix(in srgb,var(--fd-danger) 28%,var(--fd-border));color:var(--fd-danger)}.pro-decision p{margin:5px 0 0;line-height:1.55}.pro-switch{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--fd-muted);white-space:nowrap}.pro-switch input{accent-color:var(--fd-brand)}.pro-trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.pro-trust-grid>div{padding:16px;border-radius:14px;background:var(--fd-surface-2);text-align:center}.pro-trust-grid strong,.pro-trust-grid span{display:block}.pro-trust-grid strong{font-size:24px}.pro-trust-grid span{font-size:12px;color:var(--fd-muted)}.pro-empty{padding:28px 16px;text-align:center;color:var(--fd-muted);background:var(--fd-surface-2);border-radius:14px}.soft-badge{display:inline-flex!important;align-items:center;padding:5px 8px;border-radius:999px;background:var(--fd-success-soft);color:var(--fd-success)!important;font-size:11px!important;font-weight:800}.danger-text{color:var(--fd-danger)!important}.btn.danger-outline{border:1px solid color-mix(in srgb,var(--fd-danger) 45%,var(--fd-border));color:var(--fd-danger);background:transparent}.btn.danger-outline:hover{background:var(--fd-danger-soft)}
.hero-safe-card{display:flex;flex-direction:column;min-width:230px;text-align:left;padding:13px 15px;border:1px solid rgba(255,255,255,.27);border-radius:16px;background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(8px);cursor:pointer;transition:.2s ease}.hero-safe-card:hover{transform:translateY(-1px);background:rgba(255,255,255,.18)}.hero-safe-card span{font-size:10px;letter-spacing:.11em;font-weight:800;opacity:.78}.hero-safe-card strong{font-size:23px;margin:3px 0}.hero-safe-card small{opacity:.84}.pro-home-actions{align-items:stretch!important}.hero-action-buttons{display:flex;gap:8px;justify-content:flex-end}
.tx-detail-backdrop{justify-content:flex-end!important;align-items:stretch!important;padding:0!important}.tx-detail-drawer{width:min(470px,100vw);height:100%;max-height:none!important;border-radius:24px 0 0 24px!important;padding:0!important;overflow:auto;animation:fdDrawerIn .22s ease both}.tx-detail-drawer .drawer-head{position:sticky;top:0;z-index:2;background:color-mix(in srgb,var(--fd-surface) 92%,transparent);backdrop-filter:blur(12px);padding:18px 20px;border-bottom:1px solid var(--fd-border)}.tx-detail-drawer .drawer-body{padding:20px}.tx-detail-amount{font-size:34px;letter-spacing:-.04em;margin:5px 0 18px}.tx-detail-actions{display:flex;gap:9px;margin-top:20px}.tx-detail-receipt img{width:100%;max-height:340px;object-fit:contain;border-radius:14px;border:1px solid var(--fd-border);background:var(--fd-surface-2)}@keyframes fdDrawerIn{from{transform:translateX(28px);opacity:.3}to{transform:none;opacity:1}}

/* Progressive page transitions & professional motion */
@view-transition{navigation:auto}::view-transition-old(root){animation:fdFadeOut .12s ease both}::view-transition-new(root){animation:fdFadeIn .18s ease both}@keyframes fdFadeOut{to{opacity:.7;transform:translateY(2px)}}@keyframes fdFadeIn{from{opacity:.75;transform:translateY(4px)}}.panel,.btn,.icon-btn,.nav-item{transition-property:background-color,border-color,color,box-shadow,transform;transition-duration:.18s}.btn:active,.icon-btn:active{transform:scale(.98)}.pro-card,.kpi-card{content-visibility:auto;contain-intrinsic-size:1px 260px}.skeleton{position:relative;overflow:hidden;background:var(--fd-surface-3);border-radius:10px;color:transparent!important}.skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fd-surface) 72%,transparent),transparent);animation:fdSkeleton 1.2s infinite}@keyframes fdSkeleton{to{transform:translateX(100%)}}
@media(max-width:980px){.pro-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-score-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pro-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-hero{grid-template-columns:1fr}.pro-hero-actions{align-items:flex-start}}
@media(max-width:680px){.pro-grid-2,.pro-metric-grid{grid-template-columns:1fr}.pro-card{padding:16px!important}.pro-score-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-trust-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.pro-calendar-list>div,.pro-sub-list>div,.pro-budget-list>div,.pro-security-list>div,.pro-receipt-list>div{align-items:flex-start;flex-wrap:wrap}.pro-receipt-list img{width:54px;height:54px}.pro-sub-summary b{width:100%;margin:0}.hero-safe-card{min-width:0;width:100%}.hero-action-buttons{justify-content:stretch}.hero-action-buttons .btn{flex:1}.tx-detail-drawer{border-radius:0!important}.pro-tabs{margin-inline:-4px}.pro-command input{font-size:16px!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* 6.0 global undo + transaction audit trail */
.global-undo-bar{position:fixed;right:22px;bottom:82px;z-index:90;display:flex;align-items:center;gap:10px;max-width:min(460px,calc(100vw - 32px));padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:var(--panel);box-shadow:0 16px 40px rgba(15,23,42,.18)}
.global-undo-bar>span{display:flex;align-items:center;gap:7px;min-width:0;font-size:13px;font-weight:700}.global-undo-bar .text-btn{white-space:nowrap}.tx-audit-trail p{margin:5px 0 0;font-size:13px;color:var(--muted)}
@media(max-width:720px){.global-undo-bar{left:16px;right:16px;bottom:76px;max-width:none}}
.pro-fund-deposit{display:flex;gap:.45rem;align-items:center;margin-top:.45rem}.pro-fund-deposit input{max-width:150px;min-height:34px;padding:.35rem .55rem;border-radius:.65rem}
@media(max-width:640px){.pro-fund-deposit{align-items:stretch}.pro-fund-deposit input{max-width:none;min-width:0;flex:1}}

/* === FinDompet 6.0.7 — Semantic Cashflow & Dashboard Visual Consistency ===
   One visual language across dashboard, reports, transaction table and detail drawer:
   income = green, expense = red, transfer = blue. */
.kpi-icon.red {
  background: var(--fd-danger-soft) !important;
  color: var(--fd-danger) !important;
}

/* Keep section labels/titles inside their card and give lower dashboard cards real padding. */
.dashboard-summary-card {
  padding: 20px !important;
  overflow: hidden;
}
.dashboard-category-card {
  overflow: hidden;
}
.dashboard-summary-card .section-head,
.dashboard-category-card .section-head,
.chart-card .section-head {
  min-width: 0;
  margin-bottom: 16px !important;
}
.dashboard-summary-card .section-head > div,
.dashboard-category-card .section-head > div,
.chart-card .section-head > div {
  min-width: 0;
  max-width: 100%;
}
.section-head > div > span {
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.section-head h3 {
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.dashboard-category-card .section-head > div > span {
  color: var(--fd-danger) !important;
}

/* Explicit cashflow legend; chart series use the same semantic tokens in JS. */
.cashflow-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: -3px 0 10px;
  color: var(--fd-muted);
  font-size: 10.5px;
  font-weight: 750;
}
.cashflow-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cashflow-legend i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
}
.cashflow-legend .income { color: var(--fd-success); }
.cashflow-legend .expense { color: var(--fd-danger); }
.cashflow-legend .income i { background: var(--fd-success); }
.cashflow-legend .expense i { background: var(--fd-danger); }

/* Expense category donut: tonal red palette, never generic teal/green/black. */
.expense-pie-cell.c0 { fill: var(--fd-danger) !important; }
.expense-pie-cell.c1 { fill: color-mix(in srgb,var(--fd-danger) 84%,var(--fd-surface)) !important; }
.expense-pie-cell.c2 { fill: color-mix(in srgb,var(--fd-danger) 70%,var(--fd-surface)) !important; }
.expense-pie-cell.c3 { fill: color-mix(in srgb,var(--fd-danger) 56%,var(--fd-surface)) !important; }
.expense-pie-cell.c4 { fill: color-mix(in srgb,var(--fd-danger) 42%,var(--fd-surface)) !important; }
.expense-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.expense-legend-dot.c0 { background: var(--fd-danger) !important; }
.expense-legend-dot.c1 { background: color-mix(in srgb,var(--fd-danger) 84%,var(--fd-surface)) !important; }
.expense-legend-dot.c2 { background: color-mix(in srgb,var(--fd-danger) 70%,var(--fd-surface)) !important; }
.expense-legend-dot.c3 { background: color-mix(in srgb,var(--fd-danger) 56%,var(--fd-surface)) !important; }
.expense-legend-dot.c4 { background: color-mix(in srgb,var(--fd-danger) 42%,var(--fd-surface)) !important; }
.dashboard-donut { height: 164px !important; }
.dashboard-donut .donut-center strong {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.dashboard-donut .donut-center span { color: var(--fd-danger) !important; font-weight: 800; }
.dashboard-legend {
  max-height: 132px;
  overflow: auto;
  padding-right: 3px;
}
.dashboard-legend > div,
.legend-list > div {
  min-width: 0;
}
.dashboard-legend > div > span:nth-child(2),
.legend-list > div > span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Transaction semantics: category, icon, amount and detail drawer all agree. */
.tx-icon.income {
  background: var(--fd-success-soft) !important;
  color: var(--fd-success) !important;
}
.tx-icon.expense {
  background: var(--fd-danger-soft) !important;
  color: var(--fd-danger) !important;
}
.tx-icon.transfer {
  background: var(--fd-brand-soft) !important;
  color: var(--fd-brand) !important;
}
.money.income { color: var(--fd-success) !important; }
.money.expense { color: var(--fd-danger) !important; }
.money.transfer { color: var(--fd-brand) !important; }

/* Base badge is neutral. Semantic transaction badges opt into their own type color. */
.soft-badge {
  background: var(--fd-surface-3) !important;
  color: var(--fd-muted) !important;
  border: 1px solid var(--fd-border) !important;
}
.soft-badge.semantic-badge.income {
  background: var(--fd-success-soft) !important;
  color: var(--fd-success) !important;
  border-color: color-mix(in srgb,var(--fd-success) 24%,var(--fd-border)) !important;
}
.soft-badge.semantic-badge.expense {
  background: var(--fd-danger-soft) !important;
  color: var(--fd-danger) !important;
  border-color: color-mix(in srgb,var(--fd-danger) 24%,var(--fd-border)) !important;
}
.soft-badge.semantic-badge.transfer {
  background: var(--fd-brand-soft) !important;
  color: var(--fd-brand) !important;
  border-color: color-mix(in srgb,var(--fd-brand) 24%,var(--fd-border)) !important;
}
.tx-detail-amount.income { color: var(--fd-success) !important; }
.tx-detail-amount.expense { color: var(--fd-danger) !important; }
.tx-detail-amount.transfer { color: var(--fd-brand) !important; }

/* Transaction type selector must mirror the same semantic color system. */
.transaction-type button.active.income { color: var(--fd-success) !important; }
.transaction-type button.active.expense { color: var(--fd-danger) !important; }
.transaction-type button.active.transfer { color: var(--fd-brand) !important; }

@media (max-width: 680px) {
  .dashboard-summary-card { padding: 16px !important; }
  .dashboard-donut { height: 150px !important; }
  .dashboard-legend { max-height: none; }
}

/* Semantic colors inside Smart Finance forecast/import preview. */
.smart-flow-amount.income,.semantic-text.income { color: var(--fd-success) !important; }
.smart-flow-amount.expense,.semantic-text.expense { color: var(--fd-danger) !important; }
.smart-flow-amount.transfer,.semantic-text.transfer { color: var(--fd-brand) !important; }


/* === FinDompet 6.0.8 — Premium Soft Semantic UI ===
   Semantic meaning stays clear, but income/expense colors are intentionally muted.
   Depth comes from soft tint, thin borders and restrained colored shadows rather
   than saturated green/red fills. */
:root {
  --fd-cash-shadow: 0 12px 34px rgba(15,31,51,.055), 0 2px 8px rgba(15,31,51,.025);
}
html.dark { --fd-cash-shadow: 0 14px 38px rgba(0,0,0,.22), 0 2px 10px rgba(0,0,0,.13); }

/* Cards: quiet elevation, not heavy outlines. */
.chart-card,
.dashboard-summary-card,
.dashboard-category-card,
.table-card {
  box-shadow: var(--fd-cash-shadow) !important;
  border-color: color-mix(in srgb,var(--fd-border) 88%,transparent) !important;
}
.chart-card:hover,
.dashboard-summary-card:hover,
.dashboard-category-card:hover {
  box-shadow: 0 16px 42px rgba(15,31,51,.075), 0 3px 10px rgba(15,31,51,.03) !important;
}
html.dark .chart-card:hover,
html.dark .dashboard-summary-card:hover,
html.dark .dashboard-category-card:hover {
  box-shadow: 0 17px 44px rgba(0,0,0,.28) !important;
}

/* Section semantics should be a hint, not a warning banner. */
.dashboard-category-card .section-head > div > span {
  color: color-mix(in srgb,var(--fd-danger) 72%,var(--fd-muted)) !important;
}
.cashflow-legend { color: var(--fd-muted); }
.cashflow-legend .income { color: color-mix(in srgb,var(--fd-success) 82%,var(--fd-muted)); }
.cashflow-legend .expense { color: color-mix(in srgb,var(--fd-danger) 82%,var(--fd-muted)); }
.cashflow-legend .income i {
  background: var(--fd-success-chart);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--fd-success) 9%,transparent), 0 4px 10px var(--fd-success-shadow);
}
.cashflow-legend .expense i {
  background: var(--fd-danger-chart);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--fd-danger) 8%,transparent), 0 4px 10px var(--fd-danger-shadow);
}

/* Recharts series: muted strokes with a very soft glow for separation. */
.fd-series-income { filter: drop-shadow(0 3px 5px var(--fd-success-shadow)); }
.fd-series-expense { filter: drop-shadow(0 3px 5px var(--fd-danger-shadow)); }
.fd-bar-income { filter: drop-shadow(0 4px 5px color-mix(in srgb,var(--fd-success) 12%,transparent)); opacity:.88; }
.fd-bar-expense { filter: drop-shadow(0 4px 5px color-mix(in srgb,var(--fd-danger) 11%,transparent)); opacity:.88; }

/* Donut keeps the expense family but uses dusty, differentiated tones. */
.expense-pie-cell { stroke: color-mix(in srgb,var(--fd-surface) 92%,transparent) !important; stroke-width: 2px; filter: drop-shadow(0 3px 5px color-mix(in srgb,var(--fd-danger) 8%,transparent)); }
.expense-pie-cell.c0 { fill: #b96c70 !important; }
.expense-pie-cell.c1 { fill: #c98282 !important; }
.expense-pie-cell.c2 { fill: #d59a93 !important; }
.expense-pie-cell.c3 { fill: #b98189 !important; }
.expense-pie-cell.c4 { fill: #d9aaa4 !important; }
html.dark .expense-pie-cell.c0 { fill:#c88286 !important; }
html.dark .expense-pie-cell.c1 { fill:#d19595 !important; }
html.dark .expense-pie-cell.c2 { fill:#d8aaa3 !important; }
html.dark .expense-pie-cell.c3 { fill:#c39098 !important; }
html.dark .expense-pie-cell.c4 { fill:#dcb5af !important; }
.expense-legend-dot.c0 { background:#b96c70 !important; }
.expense-legend-dot.c1 { background:#c98282 !important; }
.expense-legend-dot.c2 { background:#d59a93 !important; }
.expense-legend-dot.c3 { background:#b98189 !important; }
.expense-legend-dot.c4 { background:#d9aaa4 !important; }
.expense-legend-dot {
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--fd-danger) 6%,transparent), 0 3px 8px color-mix(in srgb,var(--fd-danger) 10%,transparent);
}
.dashboard-donut .donut-center span {
  color: color-mix(in srgb,var(--fd-danger) 78%,var(--fd-muted)) !important;
  font-weight: 700;
}

/* KPI and transaction semantics: soft tinted surface + subtle depth. */
.kpi-icon.green {
  background: linear-gradient(145deg,color-mix(in srgb,var(--fd-success-soft) 92%,#fff),var(--fd-success-soft)) !important;
  color: var(--fd-success) !important;
  box-shadow: 0 7px 18px var(--fd-success-shadow), inset 0 1px 0 rgba(255,255,255,.7);
}
.kpi-icon.red {
  background: linear-gradient(145deg,color-mix(in srgb,var(--fd-danger-soft) 92%,#fff),var(--fd-danger-soft)) !important;
  color: var(--fd-danger) !important;
  box-shadow: 0 7px 18px var(--fd-danger-shadow), inset 0 1px 0 rgba(255,255,255,.7);
}
html.dark .kpi-icon.green,html.dark .kpi-icon.red { box-shadow:0 7px 18px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.045); }

.tx-icon.income {
  background: linear-gradient(145deg,color-mix(in srgb,var(--fd-success-soft) 92%,var(--fd-surface)),var(--fd-success-soft)) !important;
  color: var(--fd-success) !important;
  box-shadow: 0 6px 16px var(--fd-success-shadow), inset 0 1px 0 rgba(255,255,255,.68);
}
.tx-icon.expense {
  background: linear-gradient(145deg,color-mix(in srgb,var(--fd-danger-soft) 92%,var(--fd-surface)),var(--fd-danger-soft)) !important;
  color: var(--fd-danger) !important;
  box-shadow: 0 6px 16px var(--fd-danger-shadow), inset 0 1px 0 rgba(255,255,255,.68);
}
.tx-icon.transfer {
  box-shadow: 0 6px 16px color-mix(in srgb,var(--fd-brand) 12%,transparent), inset 0 1px 0 rgba(255,255,255,.62);
}
html.dark .tx-icon.income,html.dark .tx-icon.expense,html.dark .tx-icon.transfer { box-shadow:0 6px 15px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04); }

.money.income,.semantic-text.income,.smart-flow-amount.income { color: color-mix(in srgb,var(--fd-success) 88%,var(--fd-text)) !important; }
.money.expense,.semantic-text.expense,.smart-flow-amount.expense { color: color-mix(in srgb,var(--fd-danger) 88%,var(--fd-text)) !important; }

.soft-badge.semantic-badge.income {
  background: color-mix(in srgb,var(--fd-success-soft) 82%,var(--fd-surface)) !important;
  color: color-mix(in srgb,var(--fd-success) 86%,var(--fd-text)) !important;
  border-color: color-mix(in srgb,var(--fd-success) 16%,var(--fd-border)) !important;
  box-shadow: 0 4px 12px color-mix(in srgb,var(--fd-success) 7%,transparent), inset 0 1px 0 rgba(255,255,255,.55);
}
.soft-badge.semantic-badge.expense {
  background: color-mix(in srgb,var(--fd-danger-soft) 82%,var(--fd-surface)) !important;
  color: color-mix(in srgb,var(--fd-danger) 86%,var(--fd-text)) !important;
  border-color: color-mix(in srgb,var(--fd-danger) 15%,var(--fd-border)) !important;
  box-shadow: 0 4px 12px color-mix(in srgb,var(--fd-danger) 7%,transparent), inset 0 1px 0 rgba(255,255,255,.55);
}
html.dark .soft-badge.semantic-badge.income,html.dark .soft-badge.semantic-badge.expense { box-shadow:0 4px 12px rgba(0,0,0,.11), inset 0 1px 0 rgba(255,255,255,.035); }

/* Keep transaction rows calm: the semantic color is an accent, not the whole row. */
.compact-row { transition: background-color .18s ease, transform .18s ease; }
.compact-row:hover { background: color-mix(in srgb,var(--fd-surface-2) 76%,transparent); }

@media (max-width:680px) {
  .fd-series-income,.fd-series-expense,.fd-bar-income,.fd-bar-expense,.expense-pie-cell { filter:none; }
}


/* === FinDompet 6.0.9 — Crisp Premium Contrast ===
   Clearer hierarchy without neon colors: crisp text, stronger semantic accents,
   restrained layered shadows, cleaner chart separation and defined surfaces. */
:root {
  --fd-crisp-shadow: 0 1px 2px rgba(15,31,51,.045), 0 9px 24px rgba(15,31,51,.075);
  --fd-crisp-shadow-hover: 0 2px 5px rgba(15,31,51,.055), 0 14px 34px rgba(15,31,51,.095);
}
html.dark {
  --fd-crisp-shadow: 0 1px 2px rgba(0,0,0,.24), 0 12px 30px rgba(0,0,0,.30);
  --fd-crisp-shadow-hover: 0 2px 5px rgba(0,0,0,.28), 0 18px 42px rgba(0,0,0,.38);
}

body { text-rendering: optimizeLegibility; }
.panel,.chart-card,.dashboard-summary-card,.dashboard-category-card,.table-card,.kpi-card,
.account-card,.budget-card,.recurring-card,.settings-card,.smart-card,.smart-kpi,.smart-alert {
  border-color: var(--fd-border) !important;
  box-shadow: var(--fd-crisp-shadow) !important;
}
.chart-card,.dashboard-summary-card,.dashboard-category-card,.kpi-card {
  background: linear-gradient(180deg,var(--fd-surface) 0%,color-mix(in srgb,var(--fd-surface) 97%,var(--fd-surface-2)) 100%) !important;
}
.panel:hover,.chart-card:hover,.dashboard-summary-card:hover,.dashboard-category-card:hover,.kpi-card:hover {
  border-color: var(--fd-border-strong) !important;
  box-shadow: var(--fd-crisp-shadow-hover) !important;
}

.section-head > div > span,.eyebrow,.nav-caption {
  letter-spacing: .095em !important;
  font-weight: 850 !important;
}
.section-head h3 { font-weight: 850 !important; color:var(--fd-text) !important; }
.data-table th { color: color-mix(in srgb,var(--fd-muted) 86%,var(--fd-text)) !important; font-weight:850 !important; }
.data-table td,.compact-row strong { color:var(--fd-text); }

/* Semantic identity: clear, controlled, and readable. */
.cashflow-legend .income,.money.income,.semantic-text.income,.smart-flow-amount.income {
  color: var(--fd-success) !important;
}
.cashflow-legend .expense,.money.expense,.semantic-text.expense,.smart-flow-amount.expense {
  color: var(--fd-danger) !important;
}
.cashflow-legend .income i {
  background:var(--fd-success-chart) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--fd-success) 12%,transparent),0 3px 8px var(--fd-success-shadow) !important;
}
.cashflow-legend .expense i {
  background:var(--fd-danger-chart) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--fd-danger) 12%,transparent),0 3px 8px var(--fd-danger-shadow) !important;
}
.dashboard-category-card .section-head > div > span { color:var(--fd-danger) !important; }

.kpi-icon.green,.tx-icon.income {
  background:linear-gradient(145deg,#f5fffb,var(--fd-success-soft)) !important;
  color:var(--fd-success) !important;
  border:1px solid color-mix(in srgb,var(--fd-success) 16%,var(--fd-border)) !important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--fd-success) 12%,transparent) !important;
}
.kpi-icon.red,.tx-icon.expense {
  background:linear-gradient(145deg,#fff8f9,var(--fd-danger-soft)) !important;
  color:var(--fd-danger) !important;
  border:1px solid color-mix(in srgb,var(--fd-danger) 16%,var(--fd-border)) !important;
  box-shadow:0 5px 14px color-mix(in srgb,var(--fd-danger) 12%,transparent) !important;
}
html.dark .kpi-icon.green,html.dark .tx-icon.income { background:var(--fd-success-soft) !important; }
html.dark .kpi-icon.red,html.dark .tx-icon.expense { background:var(--fd-danger-soft) !important; }

.soft-badge.semantic-badge.income {
  background:color-mix(in srgb,var(--fd-success-soft) 90%,var(--fd-surface)) !important;
  color:var(--fd-success) !important;
  border-color:color-mix(in srgb,var(--fd-success) 24%,var(--fd-border)) !important;
  box-shadow:0 2px 7px color-mix(in srgb,var(--fd-success) 8%,transparent) !important;
}
.soft-badge.semantic-badge.expense {
  background:color-mix(in srgb,var(--fd-danger-soft) 90%,var(--fd-surface)) !important;
  color:var(--fd-danger) !important;
  border-color:color-mix(in srgb,var(--fd-danger) 24%,var(--fd-border)) !important;
  box-shadow:0 2px 7px color-mix(in srgb,var(--fd-danger) 8%,transparent) !important;
}

/* Recharts: stronger visual separation and crisper axes/grid. */
.recharts-cartesian-grid-horizontal line { stroke:color-mix(in srgb,var(--fd-border-strong) 66%,transparent) !important; }
.recharts-cartesian-axis-tick-value { fill:var(--fd-muted) !important; font-weight:650; }
.fd-series-income { filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--fd-success) 14%,transparent)); }
.fd-series-expense { filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--fd-danger) 14%,transparent)); }
.fd-bar-income,.fd-bar-expense { opacity:1 !important; }

/* Expense donut: distinct rose family, no muddy low-contrast slices. */
.expense-pie-cell { stroke:var(--fd-surface) !important; stroke-width:3px !important; filter:drop-shadow(0 2px 4px rgba(15,31,51,.08)); }
.expense-pie-cell.c0 { fill:#b93f52 !important; }
.expense-pie-cell.c1 { fill:#cc5f70 !important; }
.expense-pie-cell.c2 { fill:#dc7f8c !important; }
.expense-pie-cell.c3 { fill:#a95565 !important; }
.expense-pie-cell.c4 { fill:#e59aa4 !important; }
.expense-legend-dot.c0 { background:#b93f52 !important; }
.expense-legend-dot.c1 { background:#cc5f70 !important; }
.expense-legend-dot.c2 { background:#dc7f8c !important; }
.expense-legend-dot.c3 { background:#a95565 !important; }
.expense-legend-dot.c4 { background:#e59aa4 !important; }
html.dark .expense-pie-cell.c0 { fill:#e06f7c !important; }
html.dark .expense-pie-cell.c1 { fill:#ed8994 !important; }
html.dark .expense-pie-cell.c2 { fill:#f0a0a8 !important; }
html.dark .expense-pie-cell.c3 { fill:#cd6676 !important; }
html.dark .expense-pie-cell.c4 { fill:#f4b4ba !important; }

.dashboard-donut .donut-center strong { color:var(--fd-text) !important; font-weight:850 !important; }
.dashboard-donut .donut-center span { color:var(--fd-danger) !important; font-weight:750 !important; }
.legend-list > div { border-bottom-color:color-mix(in srgb,var(--fd-border) 82%,transparent) !important; }

/* Keep effects crisp on smaller screens too; only remove expensive SVG filters. */
@media (max-width:680px) {
  .fd-series-income,.fd-series-expense,.fd-bar-income,.fd-bar-expense,.expense-pie-cell { filter:none !important; }
}

/* === FinDompet 6.1.0 — Flexible Liability Center === */
.liability-modal {
  width: min(1080px, 96vw) !important;
  max-height: min(92vh, 980px) !important;
}
.liability-modal .modal-body { padding: 0 !important; overflow: hidden; }
.liability-center {
  max-height: calc(min(92vh, 980px) - 76px);
  overflow: auto;
  padding: 22px;
  display: grid;
  gap: 18px;
  background:
    radial-gradient(circle at 96% 2%, color-mix(in srgb,var(--fd-brand) 6%,transparent), transparent 30%),
    var(--fd-bg);
}
.liability-hero-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.liability-metric {
  min-width:0;
  padding:16px 17px;
  border:1px solid var(--fd-border);
  border-radius:16px;
  background:linear-gradient(180deg,var(--fd-surface),color-mix(in srgb,var(--fd-surface) 97%,var(--fd-surface-2)));
  box-shadow:var(--fd-crisp-shadow);
}
.liability-metric span { display:block; color:var(--fd-muted); font-size:.72rem; font-weight:850; letter-spacing:.055em; text-transform:uppercase; }
.liability-metric strong { display:block; margin-top:7px; color:var(--fd-text); font-size:1.12rem; line-height:1.2; overflow-wrap:anywhere; }
.liability-metric small { display:block; margin-top:6px; color:var(--fd-muted); line-height:1.35; }
.liability-section {
  min-width:0;
  padding:18px;
  border:1px solid var(--fd-border);
  border-radius:18px;
  background:var(--fd-surface);
  box-shadow:var(--fd-crisp-shadow);
}
.liability-section > .section-head { margin-bottom:14px; gap:12px; align-items:flex-start; }
.liability-section > .section-head > small { max-width:360px; text-align:right; color:var(--fd-muted); line-height:1.4; }
.liability-section .form-grid { margin-top:4px; }
.liability-list { display:grid; gap:9px; margin:12px 0; }
.liability-list.compact { gap:7px; }
.liability-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-width:0;
  padding:12px 13px;
  border:1px solid color-mix(in srgb,var(--fd-border) 88%,transparent);
  border-radius:13px;
  background:color-mix(in srgb,var(--fd-surface-2) 64%,var(--fd-surface));
}
.liability-row > div:first-child { min-width:0; display:grid; gap:3px; }
.liability-row strong { color:var(--fd-text); overflow-wrap:anywhere; }
.liability-row small { color:var(--fd-muted); line-height:1.35; overflow-wrap:anywhere; }
.liability-row-values { flex:0 0 auto; display:flex !important; align-items:center; justify-content:flex-end; gap:8px !important; flex-wrap:wrap; }
.liability-row-values span { color:var(--fd-muted); font-size:.8rem; white-space:nowrap; }
.liability-row-values b { color:var(--fd-text); }
.liability-row.installment.paid { opacity:.7; }
.liability-row.installment.cancelled { opacity:.55; }
.liability-empty {
  padding:15px;
  border:1px dashed var(--fd-border-strong);
  border-radius:13px;
  color:var(--fd-muted);
  background:color-mix(in srgb,var(--fd-surface-2) 46%,transparent);
  line-height:1.45;
}
.liability-inline-editor {
  display:grid;
  grid-template-columns:minmax(150px,1.5fr) minmax(110px,.85fr) minmax(125px,.85fr) minmax(92px,.65fr) auto;
  gap:8px;
  align-items:end;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb,var(--fd-border) 80%,transparent);
}
.liability-inline-editor.statement-editor { grid-template-columns:repeat(4,minmax(125px,1fr)) auto; }
.liability-inline-editor.installment-editor { grid-template-columns:minmax(165px,1.55fr) repeat(3,minmax(110px,.8fr)) minmax(135px,.95fr) auto; }
.liability-inline-editor input,.liability-inline-editor select { width:100%; min-width:0; }
.liability-card-strip {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:9px;
  margin:10px 0 12px;
}
.liability-card-strip > div {
  min-width:0;
  padding:12px;
  border:1px solid var(--fd-border);
  border-radius:13px;
  background:color-mix(in srgb,var(--fd-surface-2) 62%,var(--fd-surface));
}
.liability-card-strip strong { display:block; color:var(--fd-text); overflow-wrap:anywhere; }
.liability-card-strip span,.liability-card-strip small { display:block; color:var(--fd-muted); margin-top:4px; line-height:1.35; }
.liability-card-strip.installments > div { border-left:3px solid color-mix(in srgb,var(--fd-brand) 55%,var(--fd-border)); }
.liability-explainer,.liability-flex-note,.liability-form-hint,.liability-tx-meta {
  border:1px solid color-mix(in srgb,var(--fd-brand) 18%,var(--fd-border));
  background:color-mix(in srgb,var(--fd-brand) 4%,var(--fd-surface));
}
.liability-explainer,.liability-flex-note { padding:13px 14px; border-radius:14px; color:var(--fd-muted); line-height:1.5; }
.liability-explainer strong,.liability-flex-note strong { color:var(--fd-text); }
.liability-form-hint { padding:12px 13px; border-radius:12px; }
.liability-tx-meta { padding:13px; border-radius:14px; }
.liability-tx-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.liability-tx-head > div { min-width:0; display:grid; gap:3px; }
.liability-tx-head small { color:var(--fd-muted); overflow-wrap:anywhere; }
.soft-badge.liability { color:var(--fd-brand); border-color:color-mix(in srgb,var(--fd-brand) 25%,var(--fd-border)); background:color-mix(in srgb,var(--fd-brand) 8%,var(--fd-surface)); }
.liability-limit-summary { padding-top:9px; }
.liability-manage { border-color:color-mix(in srgb,var(--fd-brand) 24%,var(--fd-border)); color:var(--fd-brand); }
.liability-section.reconciliation { border-color:color-mix(in srgb,var(--fd-warning) 22%,var(--fd-border)); }
.liability-footer {
  position:sticky;
  bottom:-22px;
  z-index:3;
  margin:0 -22px -22px !important;
  padding:14px 22px !important;
  border-top:1px solid var(--fd-border);
  background:color-mix(in srgb,var(--fd-surface) 94%,transparent);
  backdrop-filter:blur(12px);
}
@media (max-width:900px) {
  .liability-hero-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .liability-inline-editor,.liability-inline-editor.statement-editor,.liability-inline-editor.installment-editor { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .liability-inline-editor .btn { width:100%; }
}
@media (max-width:620px) {
  .liability-modal { width:100% !important; max-height:96vh !important; }
  .liability-center { max-height:calc(96vh - 68px); padding:14px; gap:13px; }
  .liability-hero-grid { grid-template-columns:1fr 1fr; gap:8px; }
  .liability-metric { padding:12px; border-radius:13px; }
  .liability-metric strong { font-size:1rem; }
  .liability-section { padding:14px; border-radius:15px; }
  .liability-section > .section-head { display:grid; }
  .liability-section > .section-head > small { text-align:left; max-width:none; }
  .liability-row { align-items:flex-start; flex-direction:column; }
  .liability-row-values { width:100%; justify-content:flex-start; }
  .liability-inline-editor,.liability-inline-editor.statement-editor,.liability-inline-editor.installment-editor { grid-template-columns:1fr; }
  .liability-tx-head { align-items:flex-start; flex-direction:column; }
  .liability-footer { bottom:-14px; margin:0 -14px -14px !important; padding:12px 14px !important; }
}
.liability-row.expired { opacity:.62; border-style:dashed; }
.liability-row.expired strong { color:var(--fd-muted); }
/* 6.1 editable provider controls */
.liability-inline-editor { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); }
.liability-inline-editor.statement-editor { grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); }
.liability-inline-editor.installment-editor { grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); }
.liability-inline-editor .btn { min-height:42px; }
.liability-card-strip > span {
  display:block;
  min-width:0;
  padding:9px 10px;
  border:1px solid color-mix(in srgb,var(--fd-border) 88%,transparent);
  border-radius:11px;
  color:var(--fd-muted);
  background:color-mix(in srgb,var(--fd-surface-2) 58%,var(--fd-surface));
  overflow-wrap:anywhere;
}
.liability-card-strip > span b { color:var(--fd-text); }

/* === FinDompet 6.1.1 — Modern Charts & Bidirectional Category Distribution === */
.modern-chart-card {
  overflow: hidden;
}
.modern-cashflow {
  display: grid;
  gap: 10px;
}
.cashflow-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb,var(--fd-border) 82%,transparent);
  border-radius: 13px;
  background: linear-gradient(135deg,color-mix(in srgb,var(--fd-surface-2) 70%,var(--fd-surface)),var(--fd-surface));
}
.cashflow-summary-row > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}
.cashflow-summary-row span {
  color: var(--fd-muted);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .085em;
}
.cashflow-summary-row strong {
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}
.cashflow-summary-row strong.income { color: var(--fd-success); }
.cashflow-summary-row strong.expense { color: var(--fd-danger); }
.cashflow-summary-row small {
  color: var(--fd-muted);
  font-size: 8px;
  font-weight: 650;
  white-space: nowrap;
}
.chart-wrap.modern-bars {
  height: 246px;
  min-height: 246px;
  color: var(--fd-text);
}
.chart-wrap.modern-bars.tall {
  height: 300px;
  min-height: 300px;
}
.modern-bars .recharts-cartesian-axis-tick-value {
  fill: color-mix(in srgb,var(--fd-muted) 90%,var(--fd-text)) !important;
  font-size: 9px;
  font-weight: 720;
}
.modern-bars .fd-bar-income,
.modern-bars .fd-bar-expense {
  filter: drop-shadow(0 4px 7px rgba(15,31,51,.08));
}

.category-head {
  align-items: flex-start !important;
  gap: 10px;
}
.category-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--fd-border);
  border-radius: 11px;
  background: color-mix(in srgb,var(--fd-surface-2) 82%,var(--fd-surface));
  box-shadow: inset 0 1px 1px rgba(15,31,51,.035);
  flex: 0 0 auto;
}
.category-mode-switch button {
  appearance: none;
  border: 0;
  border-radius: 8px;
  padding: 6px 8px;
  background: transparent;
  color: var(--fd-muted);
  font: inherit;
  font-size: 8px;
  font-weight: 820;
  cursor: pointer;
  transition: background .16s ease,color .16s ease,box-shadow .16s ease;
}
.category-mode-switch button:hover {
  color: var(--fd-text);
}
.category-mode-switch button.active {
  background: var(--fd-surface);
  box-shadow: 0 2px 7px rgba(15,31,51,.09);
}
.category-mode-switch button.active.income {
  color: var(--fd-success);
  box-shadow: 0 2px 8px color-mix(in srgb,var(--fd-success) 14%,transparent);
}
.category-mode-switch button.active.expense {
  color: var(--fd-danger);
  box-shadow: 0 2px 8px color-mix(in srgb,var(--fd-danger) 14%,transparent);
}
.category-distribution-card.income .section-head > div > span {
  color: var(--fd-success) !important;
}
.category-distribution-card.expense .section-head > div > span {
  color: var(--fd-danger) !important;
}
.category-distribution-card .donut-center strong {
  color: var(--fd-text) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category-distribution-card .donut-center span {
  font-size: 7.5px !important;
  font-weight: 760 !important;
  letter-spacing: .015em;
}
.category-distribution-card .donut-center.income span { color: var(--fd-success) !important; }
.category-distribution-card .donut-center.expense span { color: var(--fd-danger) !important; }
.category-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -1px 0 9px;
  padding: 7px 9px;
  border: 1px solid var(--fd-border);
  border-radius: 10px;
  background: color-mix(in srgb,var(--fd-surface-2) 76%,var(--fd-surface));
  font-size: 8px;
}
.category-topline span { color: var(--fd-muted); font-weight: 700; }
.category-topline strong { color: var(--fd-text); font-weight: 850; text-align: right; }
.category-topline.income { border-color: color-mix(in srgb,var(--fd-success) 18%,var(--fd-border)); }
.category-topline.expense { border-color: color-mix(in srgb,var(--fd-danger) 18%,var(--fd-border)); }

/* Income donut family. Expense family is retained below for semantic symmetry. */
.income-pie-cell,
.expense-pie-cell {
  stroke: var(--fd-surface) !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 2px 4px rgba(15,31,51,.08));
}
.income-pie-cell.c0 { fill:#16836f !important; }
.income-pie-cell.c1 { fill:#2f9a82 !important; }
.income-pie-cell.c2 { fill:#50ad98 !important; }
.income-pie-cell.c3 { fill:#77c0ae !important; }
.income-pie-cell.c4 { fill:#9bd1c3 !important; }
.income-pie-cell.c5 { fill:#b7ddd4 !important; }
.income-legend-dot.c0 { background:#16836f !important; }
.income-legend-dot.c1 { background:#2f9a82 !important; }
.income-legend-dot.c2 { background:#50ad98 !important; }
.income-legend-dot.c3 { background:#77c0ae !important; }
.income-legend-dot.c4 { background:#9bd1c3 !important; }
.income-legend-dot.c5 { background:#b7ddd4 !important; }
.expense-pie-cell.c5 { fill:#efb4bc !important; }
.expense-legend-dot.c5 { background:#efb4bc !important; }
.income-legend-dot,
.expense-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--fd-surface),0 0 0 3px var(--fd-border);
}
html.dark .income-pie-cell.c0 { fill:#39a78e !important; }
html.dark .income-pie-cell.c1 { fill:#55b8a1 !important; }
html.dark .income-pie-cell.c2 { fill:#72c7b2 !important; }
html.dark .income-pie-cell.c3 { fill:#91d4c2 !important; }
html.dark .income-pie-cell.c4 { fill:#addfd2 !important; }
html.dark .income-pie-cell.c5 { fill:#c4e8df !important; }
html.dark .expense-pie-cell.c5 { fill:#f6c4ca !important; }

@media (max-width: 760px) {
  .category-head { align-items: stretch !important; flex-direction: column; }
  .category-mode-switch { width: 100%; }
  .category-mode-switch button { flex: 1; }
  .cashflow-summary-row { align-items: flex-start; }
  .cashflow-summary-row small { white-space: normal; text-align: right; }
  .chart-wrap.modern-bars { height: 230px; min-height: 230px; }
  .chart-wrap.modern-bars.tall { height: 270px; min-height: 270px; }
  .modern-bars .fd-bar-income,.modern-bars .fd-bar-expense,.income-pie-cell,.expense-pie-cell { filter:none !important; }
}

/* === FinDompet 6.1.2 — Soft Crisp Wave Charts ===
   Softer saturation, sharper separation, smooth monotone cashflow curves. */
:root {
  --fd-success-chart: #2f9b86;
  --fd-danger-chart: #d96f7d;
  --fd-success-shadow: rgba(47,155,134,.17);
  --fd-danger-shadow: rgba(217,111,125,.16);
}
html.dark {
  --fd-success-chart: #67cdb4;
  --fd-danger-chart: #ef98a3;
  --fd-success-shadow: rgba(103,205,180,.19);
  --fd-danger-shadow: rgba(239,152,163,.18);
}
.chart-wrap.modern-wave {
  height: 246px;
  min-height: 246px;
  color: var(--fd-text);
  isolation: isolate;
}
.chart-wrap.modern-wave.tall {
  height: 300px;
  min-height: 300px;
}
.modern-wave .recharts-cartesian-axis-tick-value {
  fill: color-mix(in srgb,var(--fd-muted) 88%,var(--fd-text)) !important;
  font-size: 9px;
  font-weight: 730;
}
.modern-wave .recharts-cartesian-grid-horizontal line {
  stroke: color-mix(in srgb,var(--fd-border-strong) 58%,transparent) !important;
}
.modern-wave .recharts-area-area { pointer-events: none; }
.modern-wave .fd-series-income,
.modern-wave .fd-series-expense {
  opacity: 1 !important;
  transition: opacity .18s ease, filter .18s ease;
}
.modern-wave .fd-series-income {
  filter: drop-shadow(0 3px 5px color-mix(in srgb,var(--fd-success-chart) 18%,transparent));
}
.modern-wave .fd-series-expense {
  filter: drop-shadow(0 3px 5px color-mix(in srgb,var(--fd-danger-chart) 17%,transparent));
}
.cashflow-legend .income { color: color-mix(in srgb,var(--fd-success-chart) 88%,var(--fd-text)) !important; }
.cashflow-legend .expense { color: color-mix(in srgb,var(--fd-danger-chart) 88%,var(--fd-text)) !important; }
.cashflow-legend .income i { background: var(--fd-success-chart) !important; }
.cashflow-legend .expense i { background: var(--fd-danger-chart) !important; }

/* Donut: pastel premium family, but each slice remains visually distinct. */
.income-pie-cell.c0 { fill:#2f8f7d !important; }
.income-pie-cell.c1 { fill:#49a28f !important; }
.income-pie-cell.c2 { fill:#67b3a2 !important; }
.income-pie-cell.c3 { fill:#84c3b4 !important; }
.income-pie-cell.c4 { fill:#a1d1c5 !important; }
.income-pie-cell.c5 { fill:#bcdfd7 !important; }
.income-legend-dot.c0 { background:#2f8f7d !important; }
.income-legend-dot.c1 { background:#49a28f !important; }
.income-legend-dot.c2 { background:#67b3a2 !important; }
.income-legend-dot.c3 { background:#84c3b4 !important; }
.income-legend-dot.c4 { background:#a1d1c5 !important; }
.income-legend-dot.c5 { background:#bcdfd7 !important; }
.expense-pie-cell.c0 { fill:#c8586a !important; }
.expense-pie-cell.c1 { fill:#d56f7e !important; }
.expense-pie-cell.c2 { fill:#de8793 !important; }
.expense-pie-cell.c3 { fill:#e59da7 !important; }
.expense-pie-cell.c4 { fill:#ebb3bb !important; }
.expense-pie-cell.c5 { fill:#f0c7cc !important; }
.expense-legend-dot.c0 { background:#c8586a !important; }
.expense-legend-dot.c1 { background:#d56f7e !important; }
.expense-legend-dot.c2 { background:#de8793 !important; }
.expense-legend-dot.c3 { background:#e59da7 !important; }
.expense-legend-dot.c4 { background:#ebb3bb !important; }
.expense-legend-dot.c5 { background:#f0c7cc !important; }
html.dark .income-pie-cell.c0 { fill:#54b29c !important; }
html.dark .income-pie-cell.c1 { fill:#70c1ad !important; }
html.dark .income-pie-cell.c2 { fill:#8bcfbd !important; }
html.dark .income-pie-cell.c3 { fill:#a4dacb !important; }
html.dark .income-pie-cell.c4 { fill:#bce5d9 !important; }
html.dark .income-pie-cell.c5 { fill:#d0eee6 !important; }
html.dark .expense-pie-cell.c0 { fill:#e37c8a !important; }
html.dark .expense-pie-cell.c1 { fill:#eb929d !important; }
html.dark .expense-pie-cell.c2 { fill:#f0a7b0 !important; }
html.dark .expense-pie-cell.c3 { fill:#f3b9c0 !important; }
html.dark .expense-pie-cell.c4 { fill:#f6cbd0 !important; }
html.dark .expense-pie-cell.c5 { fill:#f8dce0 !important; }
.income-pie-cell,.expense-pie-cell {
  stroke: var(--fd-surface) !important;
  stroke-width: 3px !important;
  filter: drop-shadow(0 2px 4px color-mix(in srgb,var(--fd-text) 8%,transparent));
}
@media (max-width: 700px) {
  .chart-wrap.modern-wave { height:230px; min-height:230px; }
  .chart-wrap.modern-wave.tall { height:270px; min-height:270px; }
}
@media (prefers-reduced-motion: reduce) {
  .modern-wave .fd-series-income,.modern-wave .fd-series-expense { filter:none !important; transition:none !important; }
}


/* === FinDompet 6.1.4 — Restored Dashboard + Unified Multicolor Reports ===
   Beranda kembali ke layout 6.1.2. Laporan memakai line/area reference.
   Donut kategori memakai satu palet multicolor yang konsisten di semua halaman. */
:root {
  --fd-category-0:#7c5ce6;
  --fd-category-1:#ef5f6c;
  --fd-category-2:#e957a2;
  --fd-category-3:#f2a21c;
  --fd-category-4:#27aa97;
  --fd-category-5:#4d88e8;
}
html.dark {
  --fd-category-0:#a48af0;
  --fd-category-1:#f38690;
  --fd-category-2:#ef83bb;
  --fd-category-3:#f6bc59;
  --fd-category-4:#58c8b4;
  --fd-category-5:#78a8f2;
}
/* Same category palette for income and expense so dashboard/report never disagree. */
.income-pie-cell.c0,.expense-pie-cell.c0 { fill:var(--fd-category-0) !important; }
.income-pie-cell.c1,.expense-pie-cell.c1 { fill:var(--fd-category-1) !important; }
.income-pie-cell.c2,.expense-pie-cell.c2 { fill:var(--fd-category-2) !important; }
.income-pie-cell.c3,.expense-pie-cell.c3 { fill:var(--fd-category-3) !important; }
.income-pie-cell.c4,.expense-pie-cell.c4 { fill:var(--fd-category-4) !important; }
.income-pie-cell.c5,.expense-pie-cell.c5 { fill:var(--fd-category-5) !important; }
.income-legend-dot.c0,.expense-legend-dot.c0 { background:var(--fd-category-0) !important; }
.income-legend-dot.c1,.expense-legend-dot.c1 { background:var(--fd-category-1) !important; }
.income-legend-dot.c2,.expense-legend-dot.c2 { background:var(--fd-category-2) !important; }
.income-legend-dot.c3,.expense-legend-dot.c3 { background:var(--fd-category-3) !important; }
.income-legend-dot.c4,.expense-legend-dot.c4 { background:var(--fd-category-4) !important; }
.income-legend-dot.c5,.expense-legend-dot.c5 { background:var(--fd-category-5) !important; }
.income-pie-cell,.expense-pie-cell {
  stroke:var(--fd-surface) !important;
  stroke-width:3px !important;
  filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--fd-text) 8%,transparent));
}

/* Report chart follows the supplied screenshot; dashboard keeps the original 6.1.2 chart. */
.report-reference-line-chart { gap:0; }
.report-reference-wave {
  height:300px !important;
  min-height:300px !important;
}
.report-reference-wave .recharts-cartesian-grid line {
  stroke:color-mix(in srgb,var(--fd-border-strong) 42%,transparent) !important;
  stroke-width:.75px;
}
.report-reference-wave .recharts-cartesian-axis-line {
  stroke:color-mix(in srgb,var(--fd-muted) 32%,transparent) !important;
}
.report-reference-wave .recharts-cartesian-axis-tick-value {
  font-size:9px !important;
  font-weight:600 !important;
  fill:color-mix(in srgb,var(--fd-muted) 90%,var(--fd-text)) !important;
}
.report-reference-wave .fd-series-income,
.report-reference-wave .fd-series-expense { filter:none !important; }
.report-bottom-legend {
  justify-content:center;
  margin:5px 0 0 !important;
  gap:18px;
  font-size:10px;
}
.report-bottom-legend i {
  width:8px;
  height:8px;
  border:2px solid currentColor;
  background:var(--fd-surface) !important;
}
@media (max-width:700px) {
  .report-reference-wave { height:270px !important; min-height:270px !important; }
}


/* =========================================================
   FinDompet 6.1.7 — Best of 6.1.4 + conservative responsive pass
   Base 6.1.4 features stay eagerly loaded. No feature module is removed/lazy-loaded.
   ========================================================= */
:root {
  --fd-cat-makanan:#e7a23b; --fd-cat-transportasi:#4f8bd7; --fd-cat-hiburan:#d76aa8;
  --fd-cat-tagihan:#df6670; --fd-cat-belanja:#8568d8; --fd-cat-kesehatan:#38a58c;
  --fd-cat-investasi:#6675d8; --fd-cat-gaji:#2f9b86; --fd-cat-bonus:#4ba8c7;
  --fd-cat-bisnis:#5576c9; --fd-cat-pendidikan:#8c75c9; --fd-cat-donasi:#d98374;
  --fd-cat-transfer:#8390a0; --fd-cat-lainnya:#7f8b99;
  --fd-cat-fallback-0:#7c69cf; --fd-cat-fallback-1:#cd6d88; --fd-cat-fallback-2:#3e9d91; --fd-cat-fallback-3:#d79b45;
  --fd-cat-fallback-4:#4e88c9; --fd-cat-fallback-5:#b26fa5; --fd-cat-fallback-6:#6d9b62; --fd-cat-fallback-7:#8c7c6c;
  --fd-account-cash:#2fa58a; --fd-account-bca:#4788df; --fd-account-mandiri:#e0a33c; --fd-account-bri:#447fc5;
  --fd-account-bni:#e88345; --fd-account-gopay:#755fda; --fd-account-ovo:#a26bdd; --fd-account-dana:#4b92dc;
  --fd-account-wallet:#8a67d7; --fd-account-fallback-0:#3fa18e; --fd-account-fallback-1:#5388d4; --fd-account-fallback-2:#856bd0;
  --fd-account-fallback-3:#d46f91; --fd-account-fallback-4:#d89a42; --fd-account-fallback-5:#55a7bb; --fd-account-fallback-6:#7083c8; --fd-account-fallback-7:#9a7b66;
}
html.dark {
  --fd-cat-makanan:#f0bd68; --fd-cat-transportasi:#78a8f2; --fd-cat-hiburan:#ea91c4; --fd-cat-tagihan:#f08a93;
  --fd-cat-belanja:#a48af0; --fd-cat-kesehatan:#66c6af; --fd-cat-investasi:#8d9cf0; --fd-cat-gaji:#64c9b0;
  --fd-cat-bonus:#77bdd5; --fd-cat-bisnis:#7e9bdd; --fd-cat-pendidikan:#aa98dc; --fd-cat-donasi:#e6a091;
  --fd-cat-transfer:#a4afbd; --fd-cat-lainnya:#a0aab7;
  --fd-cat-fallback-0:#a28de7; --fd-cat-fallback-1:#e696ad; --fd-cat-fallback-2:#6bc5b9; --fd-cat-fallback-3:#e8b76f;
  --fd-cat-fallback-4:#7aa9e3; --fd-cat-fallback-5:#d394c7; --fd-cat-fallback-6:#94bd8b; --fd-cat-fallback-7:#b09d8e;
  --fd-account-cash:#63c6ae; --fd-account-bca:#74a9ee; --fd-account-mandiri:#edbc69; --fd-account-bri:#72a1df;
  --fd-account-bni:#efa170; --fd-account-gopay:#9a86ea; --fd-account-ovo:#bd92ea; --fd-account-dana:#7aafe9;
  --fd-account-wallet:#aa8de8; --fd-account-fallback-0:#70c3b2; --fd-account-fallback-1:#7fa8e2; --fd-account-fallback-2:#a48be1;
  --fd-account-fallback-3:#e294ad; --fd-account-fallback-4:#e6b36e; --fd-account-fallback-5:#80c3d1; --fd-account-fallback-6:#99a7dd; --fd-account-fallback-7:#b7a08e;
}
.income-pie-cell,.expense-pie-cell,.account-pie-cell { stroke:var(--fd-surface)!important; stroke-width:3px!important; filter:drop-shadow(0 2px 4px color-mix(in srgb,var(--fd-text) 8%,transparent)); }
.income-legend-dot,.expense-legend-dot,.account-legend-dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 0 2px var(--fd-surface),0 0 0 3px var(--fd-border); }
.account-distribution-card .donut-center strong { color:var(--fd-text)!important; font-size:12px!important; font-weight:900!important; max-width:120px; overflow:hidden; text-overflow:ellipsis; }
.account-distribution-card .donut-center span { color:var(--fd-muted)!important; font-size:7.5px!important; font-weight:760!important; }
.report-analysis-grid { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(285px,.95fr); gap:14px; align-items:stretch; }
.report-trend-card { min-width:0; }
.report-distribution-stack { display:grid; grid-template-rows:1fr 1fr; gap:14px; min-width:0; }
.report-distribution-stack>.panel { min-height:0; }
.report-side-card,.report-distribution-stack .category-distribution-card { padding:16px!important; }
.report-side-donut,.report-distribution-stack .dashboard-donut { height:126px!important; min-height:126px!important; margin:0 auto 2px; }
.report-distribution-stack .category-topline { display:none; }
.report-side-legend,.report-distribution-stack .dashboard-legend { max-height:82px; overflow:auto; padding-right:3px; }
.report-side-legend>div,.report-distribution-stack .dashboard-legend>div { min-height:22px; }
.account-distribution-card .section-head { margin-bottom:2px; }
.report-reference-wave { height:clamp(310px,34vw,430px)!important; min-height:310px!important; }

html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { min-width:320px; }
button,.btn,.icon-btn,.nav-item,.text-btn { touch-action:manipulation; }
.page-content,.panel,.chart-card,.table-card { min-width:0; }
.data-table-wrap,.smart-table-wrap,.settings-nav,.pro-tabs,.segmented,.ai-prompts { -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain; }
.account-card,.budget-card,.goal-card,.recurring-card,.compact-row,.liability-row { content-visibility:auto; contain-intrinsic-size:auto 72px; }
.chart-wrap.modern-wave { width:100%; max-width:100%; }

@media (max-width:1100px) {
  .sidebar { width:min(300px,86vw)!important; transform:translateX(-106%)!important; transition:transform .2s ease!important; box-shadow:var(--fd-shadow-lg)!important; }
  .sidebar.open { transform:translateX(0)!important; }
  .sidebar-close { display:inline-grid!important; }
  .sidebar-backdrop { display:block!important; position:fixed; inset:0; z-index:29; background:var(--fd-overlay)!important; backdrop-filter:blur(3px); }
  .main-area { margin-left:0!important; width:100%!important; }
  .mobile-menu { display:inline-grid!important; }
  .topbar { padding-inline:20px!important; }
  .page-content { padding-inline:20px!important; }
  .settings-layout { grid-template-columns:1fr!important; }
  .settings-nav { position:static!important; display:flex!important; overflow-x:auto; width:100%; padding-bottom:3px; }
  .settings-nav button { flex:0 0 auto; white-space:nowrap; }
}
@media (max-width:1180px) {
  .report-analysis-grid { grid-template-columns:1fr!important; }
  .report-distribution-stack { grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:auto!important; }
  .account-grid,.budget-grid,.goal-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media (max-width:820px) {
  .topbar { min-height:64px!important; height:64px!important; padding-inline:14px!important; }
  .topbar-left,.topbar-left>div:last-child { min-width:0; }
  .topbar h1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .topbar .eyebrow,.sync-pill { display:none!important; }
  .top-actions { gap:6px; flex:0 0 auto; }
  .page-content { padding:14px 12px calc(86px + env(safe-area-inset-bottom))!important; }
  .page-stack { gap:13px!important; }
  .page-title { align-items:flex-start!important; flex-direction:column!important; gap:10px!important; }
  .page-actions { width:100%; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .page-actions .btn { width:100%; min-width:0; white-space:normal; line-height:1.25; }
  .hero-strip { align-items:stretch!important; flex-direction:column!important; padding:20px 17px!important; gap:16px!important; }
  .hero-strip h2 { font-size:clamp(22px,7vw,28px)!important; }
  .hero-actions.pro-home-actions { width:100%; display:grid!important; grid-template-columns:1fr!important; }
  .hero-safe-card { width:100%!important; min-width:0!important; }
  .hero-action-buttons { width:100%; display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .hero-action-buttons .btn { width:100%; min-width:0; }
  .kpi-grid,.kpi-grid.three,.smart-kpi-grid,.smart-alert-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .dashboard-grid,.dashboard-grid.lower,.smart-two-col { grid-template-columns:1fr!important; }
  .report-distribution-stack { grid-template-columns:1fr!important; }
  .report-reference-wave,.chart-wrap.modern-wave,.chart-wrap.modern-wave.tall { height:260px!important; min-height:260px!important; }
  .report-side-donut,.report-distribution-stack .dashboard-donut { height:156px!important; min-height:156px!important; }
  .report-side-legend,.report-distribution-stack .dashboard-legend { max-height:none!important; overflow:visible!important; }
  .filter-card,.form-grid,.smart-import-controls,.rule-editor,.smart-capture-row { grid-template-columns:1fr!important; }
  .filter-card .search-box,.form-grid .full { grid-column:auto!important; }
  .account-grid,.budget-grid,.goal-grid,.recurring-grid,.health-metrics,.info-grid { grid-template-columns:1fr!important; }
  .settings-card { max-width:none!important; width:100%; padding:16px!important; }
  input,select,textarea { font-size:16px!important; min-height:44px; }
  .btn { min-height:44px; }
  .icon-btn { width:42px; height:42px; }
  .nav-item { min-height:46px; height:auto; }
  .modal-backdrop { padding:0!important; align-items:flex-end!important; }
  .modal { width:100%!important; max-height:94dvh!important; border-radius:20px 20px 0 0!important; padding-bottom:env(safe-area-inset-bottom); }
  .ai-drawer { width:100%!important; max-width:100%!important; height:100dvh!important; border-left:0!important; }
  .ai-fab { right:14px!important; bottom:calc(14px + env(safe-area-inset-bottom))!important; }
  .liability-inline-editor,.liability-inline-editor.statement-editor,.liability-inline-editor.installment-editor,.liability-hero-grid,.pro-grid-2,.pro-metric-grid { grid-template-columns:1fr!important; }
  .liability-row,.liability-card-strip,.recurring-card { flex-wrap:wrap; }
  .recurring-card>.row-actions { width:100%; justify-content:flex-end; }
  .pro-score-grid,.pro-trust-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media (max-width:520px) {
  .topbar { padding-inline:10px!important; }
  .top-actions .btn.compact { width:42px!important; padding:0!important; font-size:0!important; }
  .page-actions,.hero-action-buttons { grid-template-columns:1fr!important; }
  .kpi-grid,.kpi-grid.three,.smart-kpi-grid,.smart-alert-grid { grid-template-columns:1fr!important; }
  .kpi-card { padding:15px!important; }
  .category-mode-switch { width:100%; }
  .category-mode-switch button { flex:1; min-height:38px; }
  .chart-wrap.modern-wave,.chart-wrap.modern-wave.tall,.report-reference-wave { height:242px!important; min-height:242px!important; }
  .report-bottom-legend { flex-wrap:wrap; }
  .report-side-card,.report-distribution-stack .category-distribution-card { padding:14px!important; }
}
@media (prefers-reduced-motion:reduce) {
  .sidebar,.panel,.btn,.icon-btn,.nav-item,.modern-wave .fd-series-income,.modern-wave .fd-series-expense { transition:none!important; filter:none!important; }
}


/* === FinDompet 6.2.3 — Clean Top Navigation + Settings Tabs + Transaction Shell ===
   IMPORTANT: This patch intentionally does NOT target chart/Recharts selectors. */

/* App shell: remove the old left-sidebar offset. */
.main-area{margin-left:0!important;width:100%!important;max-width:100%!important;min-width:0!important;}

/* Two-tier top header: identity/actions above, all roles below. */
.topbar.topnav-bar{
  height:116px!important;min-height:116px!important;position:sticky!important;top:0!important;z-index:30!important;
  display:grid!important;grid-template-columns:max-content minmax(0,1fr) max-content!important;
  grid-template-rows:64px 52px!important;gap:0 16px!important;padding:0 clamp(14px,2vw,28px)!important;
  background:color-mix(in srgb,var(--fd-topbar) 96%,transparent)!important;border-bottom:1px solid var(--fd-border)!important;
  backdrop-filter:blur(18px) saturate(135%)!important;box-shadow:0 5px 20px rgba(15,31,51,.035)!important;
}
.topnav-brand{grid-column:1;grid-row:1;display:flex;align-items:center;gap:10px;min-width:0;}
.topnav-logo{width:38px!important;height:38px!important;flex:0 0 38px;border-radius:12px!important;}
.topnav-brand-copy{display:grid;gap:1px;min-width:0;}
.topnav-brand-copy strong{font-size:14px;font-weight:900;color:var(--fd-text);letter-spacing:-.25px;}
.topnav-brand-copy span{font-size:8px;font-weight:800;color:var(--fd-muted);text-transform:uppercase;letter-spacing:.08em;}
.topnav-actions{grid-column:3;grid-row:1;display:flex!important;align-items:center!important;justify-content:flex-end;gap:7px!important;min-width:0;}
.topnav-profile{display:flex;align-items:center;gap:8px;height:42px;padding:4px 5px 4px 6px;border:1px solid var(--fd-border);border-radius:12px;background:var(--fd-surface);min-width:0;}
.topnav-profile .avatar{width:30px;height:30px;flex:0 0 30px;}
.topnav-profile-copy{display:grid;gap:1px;min-width:0;}
.topnav-profile-copy strong{font-size:9px;color:var(--fd-text);white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis;}
.topnav-profile-copy span{font-size:7.5px;color:var(--fd-muted);}
.topnav-logout{width:31px!important;height:31px!important;}
.topnav-list{
  grid-column:1/-1;grid-row:2;display:flex!important;align-items:center!important;gap:5px!important;
  min-width:0;width:100%;height:52px;padding:6px 0 7px;border-top:1px solid color-mix(in srgb,var(--fd-border) 72%,transparent);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-inline:contain;
}
.topnav-list::-webkit-scrollbar{display:none;}
.topnav-item{
  position:relative;flex:1 1 0;min-width:118px;max-width:190px;height:38px;padding:0 12px;border:1px solid transparent;border-radius:10px;
  display:flex;align-items:center;justify-content:center;gap:7px;background:transparent;color:var(--fd-muted);font:inherit;font-size:10px;font-weight:820;
  white-space:nowrap;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.topnav-item:hover{background:var(--fd-surface-2);color:var(--fd-text);border-color:color-mix(in srgb,var(--fd-border) 80%,transparent);}
.topnav-item.active{color:var(--fd-brand);background:var(--fd-brand-soft);border-color:color-mix(in srgb,var(--fd-brand) 20%,var(--fd-border));}
.topnav-item svg{flex:0 0 auto;}
.topnav-dot{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:16px;height:2px;border-radius:99px;background:var(--fd-brand);}

/* Page content remains centered and full-width under the top navigation. */
.page-content{max-width:1480px!important;margin:0 auto!important;padding-left:clamp(14px,2.2vw,30px)!important;padding-right:clamp(14px,2.2vw,30px)!important;}

/* Light-mode hero: restrained gradient with readable status card; decoration stays inside hero only. */
.hero-strip{position:relative;isolation:isolate;overflow:hidden!important;background:
 radial-gradient(circle at 90% 5%,rgba(37,99,235,.075),transparent 30%),
 radial-gradient(circle at 76% 110%,rgba(14,165,164,.055),transparent 32%),
 linear-gradient(135deg,#ffffff 0%,#fbfdff 55%,#f7fbfb 100%)!important;
 border-color:color-mix(in srgb,var(--fd-brand) 14%,var(--fd-border))!important;}
html.dark .hero-strip{background:
 radial-gradient(circle at 90% 5%,rgba(96,165,250,.10),transparent 31%),
 radial-gradient(circle at 76% 110%,rgba(94,234,212,.065),transparent 33%),
 linear-gradient(135deg,#101b2d 0%,#101a2a 56%,#0e1b28 100%)!important;}
.hero-safe-card{background:linear-gradient(135deg,#f5f9ff,#f3fbfa)!important;border:1px solid #cbd9e8!important;color:var(--fd-text)!important;box-shadow:0 6px 16px rgba(15,31,51,.045)!important;overflow:hidden!important;}
.hero-safe-card span{color:#2563eb!important;}.hero-safe-card strong{color:#172033!important;}.hero-safe-card small{color:#64748b!important;opacity:1!important;}
html.dark .hero-safe-card{background:linear-gradient(135deg,#14223a,#172d4c)!important;border-color:#365172!important;}
html.dark .hero-safe-card span{color:#60a5fa!important;}html.dark .hero-safe-card strong{color:#f1f5f9!important;}html.dark .hero-safe-card small{color:#9aaac0!important;}

/* Settings: internal roles are horizontal tabs, never a left sidebar. */
.settings-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;align-items:start!important;}
.settings-nav{position:static!important;top:auto!important;display:flex!important;align-items:center!important;gap:6px!important;width:100%!important;max-width:100%!important;padding:6px!important;overflow-x:auto!important;overflow-y:hidden!important;border:1px solid var(--fd-border)!important;border-radius:14px!important;background:var(--fd-surface)!important;box-shadow:0 1px 2px rgba(15,31,51,.025)!important;scrollbar-width:none;}
.settings-nav::-webkit-scrollbar{display:none;}
.settings-nav button{flex:0 0 auto!important;height:38px!important;min-height:38px!important;padding:0 13px!important;border:1px solid transparent!important;border-radius:10px!important;white-space:nowrap!important;background:transparent!important;color:var(--fd-muted)!important;font-size:10.5px!important;font-weight:820!important;}
.settings-nav button:hover{background:var(--fd-surface-2)!important;color:var(--fd-text)!important;}
.settings-nav button.active{background:var(--fd-brand-soft)!important;color:var(--fd-brand)!important;border-color:color-mix(in srgb,var(--fd-brand) 18%,var(--fd-border))!important;}
.settings-card{width:100%!important;max-width:none!important;min-width:0!important;}

/* Transactions: one structural table model.
   Six explicit columns are defined in App.js via <colgroup>; the final action column is no longer anonymous. */
.responsive-transaction-card{
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--fd-border)!important;
  border-radius:18px!important;
  background:var(--fd-surface)!important;
  box-shadow:var(--fd-shadow)!important;
}
.transaction-table-wrap{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:inherit!important;
  background:var(--fd-surface)!important;
  overflow-x:auto!important;
  overflow-y:auto!important;
  max-height:min(62vh,640px)!important;
  overscroll-behavior:contain;
}
.transaction-table{
  width:100%!important;
  min-width:1000px!important;
  max-width:none!important;
  margin:0!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  background:var(--fd-surface)!important;
}
.transaction-table col.tx-col-transaction{width:31%;}
.transaction-table col.tx-col-account{width:17%;}
.transaction-table col.tx-col-category{width:14%;}
.transaction-table col.tx-col-date{width:13%;}
.transaction-table col.tx-col-amount{width:14%;}
.transaction-table col.tx-col-actions{width:11%;}
.transaction-table thead th{
  height:48px!important;
  padding:0 15px!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  background:var(--fd-surface-2)!important;
  border-bottom:1px solid var(--fd-border)!important;
  color:var(--fd-muted)!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
}
.transaction-table thead th+th{border-left:1px solid color-mix(in srgb,var(--fd-border) 74%,transparent)!important;}
.transaction-table thead th:first-child{border-top-left-radius:13px;}
.transaction-table thead th:last-child{border-top-right-radius:13px;}
.transaction-table thead th:last-child,
.transaction-table tbody td:last-child{border-right:0!important;}
.transaction-table .transaction-actions-head{text-align:center!important;}
.transaction-table tbody td{
  padding:14px 15px!important;
  vertical-align:middle!important;
  border-bottom:1px solid color-mix(in srgb,var(--fd-border) 84%,transparent)!important;
  background:var(--fd-surface)!important;
}
.transaction-table tbody td+td{border-left:1px solid color-mix(in srgb,var(--fd-border) 44%,transparent)!important;}
.transaction-table tbody tr:last-child td{border-bottom:0!important;}
.transaction-table tbody tr:hover td{background:color-mix(in srgb,var(--fd-brand) 2.5%,var(--fd-surface))!important;}
.transaction-table .table-primary{min-width:0!important;max-width:100%!important;}
.transaction-table .table-primary>div:last-child{min-width:0!important;overflow:hidden!important;}
.transaction-table .table-primary strong,
.transaction-table .table-primary span,
.transaction-table .table-text,
.transaction-table .soft-badge{max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.transaction-table td.money{white-space:nowrap!important;font-weight:850!important;text-align:right!important;}
.transaction-table .transaction-actions-cell{padding:9px 6px!important;text-align:center!important;}
.transaction-action-group{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:nowrap!important;
  gap:2px!important;
  padding:3px!important;
  border:1px solid var(--fd-border)!important;
  border-radius:10px!important;
  background:var(--fd-surface-2)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent);
}
.transaction-action-group button{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  padding:0!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  display:grid!important;
  place-items:center!important;
}
.transaction-action-group button:hover{background:var(--fd-surface)!important;}
.transaction-action-group button.danger:hover{background:color-mix(in srgb,var(--fd-danger) 10%,var(--fd-surface))!important;}
.filter-card{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;grid-template-columns:minmax(250px,1fr) minmax(150px,180px) minmax(170px,210px)!important;align-items:center!important;gap:10px!important;padding:12px!important;}
.filter-card>*{min-width:0!important;max-width:100%!important;}.filter-card select,.filter-card input{width:100%!important;}

@media(max-width:1180px){.topnav-profile-copy{display:none;}.topnav-item{flex:0 0 auto;min-width:max-content;padding-inline:12px;}}
@media(max-width:820px){
 .topbar.topnav-bar{height:108px!important;min-height:108px!important;grid-template-columns:max-content minmax(0,1fr)!important;grid-template-rows:58px 50px!important;gap:0 8px!important;padding:0 12px!important;}
 .topnav-brand{grid-column:1;grid-row:1;}.topnav-actions{grid-column:2;grid-row:1;}.topnav-list{grid-column:1/-1;grid-row:2;height:50px;padding:6px 0;}
 .topnav-brand-copy{display:none;}.topnav-profile{display:none;}.sync-pill span,.topnav-new-tx span{display:none!important;}.sync-pill,.topnav-new-tx{width:40px!important;min-width:40px!important;padding:0!important;justify-content:center!important;}
 .filter-card{grid-template-columns:1fr!important;}.filter-card .search-box{grid-column:auto!important;}
 .settings-nav{padding:5px!important;}
 /* Transaction table becomes semantic cards on small screens. */
 .responsive-transaction-card{padding:0!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;}
 .transaction-table-wrap{overflow:visible!important;border:0!important;background:transparent!important;}
 .transaction-table{display:block!important;min-width:0!important;width:100%!important;table-layout:auto!important;background:transparent!important;}
 .transaction-table colgroup,.transaction-table thead{display:none!important;}
 .transaction-table tbody{display:grid!important;gap:10px!important;width:100%!important;}
 .transaction-table tbody tr{display:block!important;width:100%!important;padding:12px 13px!important;border:1px solid var(--fd-border)!important;border-radius:14px!important;background:var(--fd-surface)!important;box-shadow:var(--fd-shadow)!important;overflow:hidden!important;}
 .transaction-table tbody td{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;width:100%!important;padding:7px 0!important;border:0!important;text-align:right!important;background:transparent!important;}
 .transaction-table tbody td:first-child{display:block!important;padding:0 0 10px!important;text-align:left!important;border-bottom:1px solid var(--fd-border)!important;margin-bottom:4px!important;}
 .transaction-table td[data-label]::before{content:attr(data-label);flex:0 0 auto;color:var(--fd-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-align:left;}
 .transaction-table td[data-label]>*{min-width:0;max-width:68%;text-align:right;}
 .transaction-table .transaction-actions-cell{border-top:1px dashed var(--fd-border)!important;margin-top:4px!important;padding-top:10px!important;}
 .transaction-table .transaction-actions-cell .transaction-action-group{margin-left:auto!important;}
 .transaction-table .table-primary strong,.transaction-table .table-primary span,.transaction-table .table-text{white-space:normal!important;overflow-wrap:anywhere!important;}
 .transaction-table .soft-badge{white-space:normal!important;text-align:right!important;}
}
@media(max-width:520px){.topnav-new-tx{display:none!important;}.topnav-item{height:34px;font-size:9.5px;}}


/* === FinDompet 6.2.9 — Donut center + semantic transaction colors ===
   Keep the donut geometry responsive to the actual container height.
   Category identity chooses a stable shade, transaction type chooses hue family. */
:root {
  --fd-income-0:#147a68; --fd-income-1:#1f8a75; --fd-income-2:#2d9a82; --fd-income-3:#40aa90;
  --fd-income-4:#58b99f; --fd-income-5:#73c6af; --fd-income-6:#91d2bf; --fd-income-7:#acdccc;
  --fd-expense-0:#b43e51; --fd-expense-1:#c54d60; --fd-expense-2:#d05f70; --fd-expense-3:#d97180;
  --fd-expense-4:#e18391; --fd-expense-5:#e795a1; --fd-expense-6:#eca9b3; --fd-expense-7:#f0bdc5;
}
html.dark {
  --fd-income-0:#45aa92; --fd-income-1:#58b79e; --fd-income-2:#6cc3aa; --fd-income-3:#82ceb7;
  --fd-income-4:#99d8c4; --fd-income-5:#afe1d1; --fd-income-6:#c3e8dc; --fd-income-7:#d4eee5;
  --fd-expense-0:#dc7180; --fd-expense-1:#e3808d; --fd-expense-2:#e88f9a; --fd-expense-3:#ec9fa8;
  --fd-expense-4:#f0afb7; --fd-expense-5:#f3bec5; --fd-expense-6:#f6cdd2; --fd-expense-7:#f8dade;
}

/* The SVG and the numeric center now share the exact same 50%/50% anchor. */
.donut {
  position:relative;
  width:100%;
  min-width:0;
}
.donut > .recharts-responsive-container {
  margin-inline:auto;
}
.donut-center {
  inset:auto !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:max-content;
  max-width:44%;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.1;
  z-index:2;
}
.donut-center strong,
.donut-center span {
  display:block;
  width:100%;
  text-align:center;
}

/* Slice colors are supplied inline by chart-theme.js; no ranking c0..c5 classes are emitted. */

/* === FinDompet 6.3.1 — Modern distribution charts ===
   Replaces small donut charts with full-width composition strips + ranked bars.
   Transaction type controls the hue family; category/account identity controls the shade. */
.modern-distribution-card { overflow:hidden; }
.modern-distribution-card .section-head { margin-bottom:14px; }
.modern-distribution-chart { display:grid; gap:13px; min-width:0; }
.modern-distribution-summary {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(118px,.8fr);
  gap:10px;
  align-items:stretch;
}
.modern-total-block,.modern-dominant-block {
  min-width:0;
  padding:12px 13px;
  border:1px solid color-mix(in srgb,var(--fd-border) 88%,transparent);
  border-radius:14px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--fd-surface-2) 84%,var(--fd-surface)),var(--fd-surface));
}
.modern-total-block>span,.modern-dominant-block>span {
  display:block;
  color:var(--fd-faint);
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em;
}
.modern-total-block>strong,.modern-dominant-block>strong {
  display:block;
  margin-top:4px;
  min-width:0;
  color:var(--fd-text);
  font-weight:900;
  line-height:1.18;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.modern-total-block>strong { font-size:clamp(15px,1.45vw,20px); letter-spacing:-.025em; }
.modern-total-block>strong.income { color:var(--fd-success); }
.modern-total-block>strong.expense { color:var(--fd-danger); }
.modern-dominant-block>strong { font-size:12px; }
.modern-total-block>small,.modern-dominant-block>small {
  display:block;
  margin-top:4px;
  color:var(--fd-muted);
  font-size:8px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.modern-distribution-strip {
  display:flex;
  width:100%;
  height:11px;
  gap:2px;
  overflow:hidden;
  padding:2px;
  border-radius:999px;
  background:color-mix(in srgb,var(--fd-surface-3) 88%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fd-border) 82%,transparent);
}
.modern-distribution-segment {
  min-width:5px;
  height:100%;
  flex-basis:0;
  border-radius:999px;
  transition:flex-grow .35s ease,filter .18s ease,opacity .18s ease,transform .18s ease;
  box-shadow:0 1px 3px rgba(15,31,51,.14), inset 0 1px 0 rgba(255,255,255,.22);
}
.modern-distribution-strip { gap:3px; padding-block:2px; }
.modern-distribution-strip .modern-distribution-segment:first-child { border-top-left-radius:999px; border-bottom-left-radius:999px; }
.modern-distribution-strip:hover .modern-distribution-segment { opacity:.78; }
.modern-distribution-strip .modern-distribution-segment:hover { opacity:1; filter:saturate(1.15) brightness(1.05); transform:scaleY(1.12); }
.modern-rank-list { display:grid; gap:10px; min-width:0; }
.modern-rank-row { display:grid; gap:6px; min-width:0; }
.modern-rank-copy {
  display:grid;
  grid-template-columns:25px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-width:0;
}
.modern-rank-index {
  display:grid;
  place-items:center;
  width:25px;
  height:22px;
  border-radius:8px;
  background:var(--fd-surface-2);
  color:var(--fd-faint);
  font-size:7.5px;
  font-weight:900;
  letter-spacing:.04em;
}
.modern-rank-name { min-width:0; }
.modern-rank-name strong,.modern-rank-name span { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modern-rank-name strong { color:var(--fd-text); font-size:9px; font-weight:850; display:flex; align-items:center; gap:5px; }
.modern-rank-dot { display:inline-block; width:7px; height:7px; border-radius:999px; flex:none; box-shadow:0 0 0 2px color-mix(in srgb,currentColor 8%,transparent); }
.modern-rank-name span { margin-top:1px; color:var(--fd-muted); font-size:7.5px; font-weight:680; }
.modern-rank-value { color:var(--fd-text); font-size:9px; font-weight:900; white-space:nowrap; }
.modern-rank-track {
  height:8px;
  margin-left:33px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--fd-surface-3) 86%,transparent);
}
.modern-rank-fill {
  display:block;
  height:100%;
  min-width:5px;
  border-radius:999px;
  transform-origin:left center;
  box-shadow:0 2px 6px rgba(15,31,51,.10);
  transition:width .38s cubic-bezier(.2,.8,.2,1),filter .18s ease;
}
.modern-rank-row:hover .modern-rank-fill { filter:saturate(1.08) brightness(1.02); }
.modern-rank-list.income .modern-rank-index { color:var(--fd-success); background:var(--fd-success-soft); }
.modern-rank-list.expense .modern-rank-index { color:var(--fd-danger); background:var(--fd-danger-soft); }
.modern-rank-list.account .modern-rank-index { color:var(--fd-brand); background:var(--fd-brand-soft); }
.modern-distribution-chart.income .modern-total-block { border-color:color-mix(in srgb,var(--fd-success) 16%,var(--fd-border)); }
.modern-distribution-chart.expense .modern-total-block { border-color:color-mix(in srgb,var(--fd-danger) 16%,var(--fd-border)); }

/* Report sidebar no longer needs fixed donut/legend heights. Let ranked bars use the card area. */
.report-distribution-stack .modern-distribution-card { min-height:0; }
.report-distribution-stack .modern-distribution-chart { height:100%; align-content:start; }
.report-distribution-stack .modern-rank-list { gap:8px; }
.report-distribution-stack .modern-rank-row { gap:5px; }
.report-distribution-stack .modern-total-block,.report-distribution-stack .modern-dominant-block { padding:10px 11px; }

@media (max-width:520px) {
  .modern-distribution-summary { grid-template-columns:1fr; }
  .modern-dominant-block { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; }
  .modern-dominant-block>span,.modern-dominant-block>strong,.modern-dominant-block>small { margin:0; }
  .modern-dominant-block>strong { text-align:center; }
  .modern-dominant-block>small { text-align:right; }
  .modern-rank-copy { grid-template-columns:23px minmax(0,1fr) auto; gap:7px; }
  .modern-rank-index { width:23px; height:21px; }
  .modern-rank-track { margin-left:30px; }
}

/* 6.3.1 — Global Search: highlight the exact entity that was opened. */
.search-focus-target {
  position: relative;
  z-index: 1;
  outline: 2px solid rgba(37, 99, 235, .55);
  outline-offset: 3px;
  animation: fd-search-focus-pulse 1.8s ease-out;
}
@keyframes fd-search-focus-pulse {
  0%, 35% { box-shadow: 0 0 0 7px rgba(37, 99, 235, .14); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

/* === 6.4.1 — Premium modern chart polish (Linear/Vercel-grade) === */
/* Glassy chart surface with soft inner glow */
.chart-wrap.modern-wave,
.chart-wrap.modern-bars {
  position: relative;
  padding: 10px 8px 4px;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% -20%, color-mix(in srgb,var(--fd-brand) 5%,transparent), transparent 55%),
    color-mix(in srgb,var(--fd-surface-2) 42%,var(--fd-surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent),
    inset 0 0 0 1px color-mix(in srgb,var(--fd-border) 62%,transparent);
}
html.dark .chart-wrap.modern-wave,
html.dark .chart-wrap.modern-bars {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 0 0 1px rgba(148,163,184,.10);
}

/* Smoother grid: dashed → ultra-faint dotted */
.modern-wave .recharts-cartesian-grid line,
.modern-bars .recharts-cartesian-grid line {
  stroke-dasharray: 1 7 !important;
  stroke-linecap: round !important;
  opacity:.85 !important;
}
.modern-wave .recharts-cartesian-axis-line,
.report-reference-wave .recharts-cartesian-axis-line { stroke: transparent !important; }

/* Animated draw-in for area series */
@keyframes fd-area-reveal { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
.chart-wrap .recharts-surface { animation: fd-area-reveal .55s cubic-bezier(.22,.8,.26,1) both; }
@media (prefers-reduced-motion: reduce) {
  .chart-wrap .recharts-surface { animation:none !important; }
}

/* Glowing strokes + soft halo under the lines */
.modern-wave .fd-series-income .recharts-area-curve {
  filter: drop-shadow(0 0 7px color-mix(in srgb,var(--fd-success-chart) 34%,transparent));
}
.modern-wave .fd-series-expense .recharts-area-curve {
  filter: drop-shadow(0 0 7px color-mix(in srgb,var(--fd-danger-chart) 32%,transparent));
}

/* Bigger, softer hover dots */
.modern-wave .recharts-active-dot circle,
.modern-wave .recharts-dot {
  filter: drop-shadow(0 2px 5px rgba(15,31,51,.18));
}

/* Premium tooltip: glass card */
.recharts-default-tooltip,
.modern-wave .recharts-tooltip-wrapper,
.modern-bars .recharts-tooltip-wrapper {
  z-index: 30 !important;
}
.modern-wave .recharts-tooltip-wrapper .recharts-default-tooltip,
.modern-bars .recharts-tooltip-wrapper .recharts-default-tooltip {
  border-radius: 15px !important;
  border: 1px solid color-mix(in srgb,var(--fd-border-strong) 46%,transparent) !important;
  background: color-mix(in srgb,var(--fd-surface) 86%,transparent) !important;
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 18px 44px rgba(15,23,42,.17), inset 0 1px 0 rgba(255,255,255,.07) !important;
  font-weight: 700 !important;
}
.recharts-tooltip-label { font-size:10.5px !important; letter-spacing:.03em; }

/* Legend chips */
.cashflow-legend {
  display:inline-flex;
  gap:8px;
  padding:5px 9px;
  border-radius:999px;
  background:color-mix(in srgb,var(--fd-surface-3) 60%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fd-border) 58%,transparent);
}
.cashflow-legend span { display:inline-flex; align-items:center; gap:6px; font-size:9px; font-weight:800; }
.cashflow-legend i { width:9px; height:9px; border-radius:999px; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent); }

/* Donut slices: hover pop + gradient sheen */
.income-pie-cell,.expense-pie-cell { transition: transform .18s ease, filter .18s ease; transform-origin:center; transform-box: fill-box; }
.income-pie-cell:hover,.expense-pie-cell:hover { transform: scale(1.035); filter: brightness(1.06) drop-shadow(0 4px 10px rgba(15,31,51,.16)); }

/* ===== 6.4.2 luxury polish: charts & panels ===== */
.panel,.kpi-card,.account-card,.settings-card,.chart-card{transition:box-shadow .28s ease,transform .28s ease,border-color .28s ease;}
.panel:hover,.kpi-card:hover,.account-card:hover{transform:translateY(-2px);box-shadow:var(--fd-shadow-lg);border-color:color-mix(in srgb,var(--fd-brand) 22%,var(--fd-border));}
:has(> .recharts-wrapper) .recharts-wrapper, .panel:has(.recharts-wrapper){background:linear-gradient(165deg,var(--fd-surface) 55%,color-mix(in srgb,var(--fd-brand) 5%,var(--fd-surface)) 100%);}
.recharts-wrapper{outline:none!important;}
.recharts-default-tooltip{background:rgba(9,16,28,.93)!important;border:1px solid var(--fd-border-strong)!important;border-radius:14px!important;box-shadow:0 14px 38px rgba(0,0,0,.45)!important;backdrop-filter:blur(10px);padding:10px 14px!important;}
.recharts-default-tooltip .recharts-tooltip-label{font-weight:800!important;font-size:11px!important;}
.recharts-cartesian-axis-tick text{fill:var(--fd-muted)!important;font-size:10px!important;font-weight:700!important;}
.recharts-cartesian-grid line{stroke:var(--fd-border)!important;stroke-dasharray:3 7!important;opacity:.55;}
.recharts-legend-item-text{color:var(--fd-muted)!important;font-size:10.5px!important;font-weight:700!important;}
.recharts-active-dot circle{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--fd-brand) 70%,transparent));}