:root, [data-theme="light"] {
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
      --color-bg: #f7f6f2; --color-surface: #f9f8f5; --color-surface-2: #fbfbf9; --color-surface-offset: #f3f0ec; --color-border: #d4d1ca; --color-divider: #dcd9d5;
      --color-text: #28251d; --color-text-muted: #6c6b66; --color-text-faint: #9e9c96; --color-text-inverse: #f9f8f4;
      --color-primary: #01696f; --color-primary-hover: #0c4e54; --color-success: #437a22; --color-error: #a13544; --color-orange: #da7101; --color-blue: #006494; --color-purple: #7a39bb;
      --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px;
      --shadow-sm: 0 1px 2px rgb(40 37 29 / 0.06); --shadow-md: 0 8px 24px rgb(40 37 29 / 0.08); --shadow-lg: 0 18px 42px rgb(40 37 29 / 0.12);
      --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
      --font-body: 'Satoshi', 'Inter', sans-serif;
    }
    [data-theme="dark"] {
      --color-bg: #171614; --color-surface: #1c1b19; --color-surface-2: #201f1d; --color-surface-offset: #1d1c1a; --color-border: #393836; --color-divider: #262523;
      --color-text: #cdccca; --color-text-muted: #9a9896; --color-text-faint: #6d6b68; --color-text-inverse: #171614;
      --color-primary: #4f98a3; --color-primary-hover: #227f8b; --color-success: #6daa45; --color-error: #dd6974; --color-orange: #fdab43; --color-blue: #5591c7; --color-purple: #a86fdf;
      --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.2); --shadow-md: 0 8px 24px rgb(0 0 0 / 0.28); --shadow-lg: 0 18px 42px rgb(0 0 0 / 0.4);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; overflow: hidden; }
    body {
      min-height: 100dvh; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55;
      color: var(--color-text); background: linear-gradient(180deg, var(--color-bg), var(--color-surface-offset));
      -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    }
    img, canvas, svg { display: block; max-width: 100%; }
    button, input, select { font: inherit; color: inherit; }
    button { cursor: pointer; border: 0; background: none; }
    input, select {
      border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2);
      padding: 0.78rem 0.9rem; min-height: 44px;
    }
    input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
    .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .app {
      display: grid; grid-template-columns: 270px minmax(0,1fr); grid-template-rows: auto 1fr; height: 100dvh;
    }
    .sidebar {
      grid-row: 1 / -1; background: color-mix(in srgb, var(--color-surface) 88%, transparent); border-right: 1px solid var(--color-divider);
      padding: var(--space-6); overflow-y: auto; overscroll-behavior: contain; backdrop-filter: blur(10px);
    }
    .brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-8); }
    .brand svg { width: 42px; height: 42px; color: var(--color-primary); }
    .brand h1 { font-size: var(--text-lg); line-height: 1.1; }
    .brand p { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
    .nav-group { margin-bottom: var(--space-8); }
    .nav-title { font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--space-3); }
    .nav-list { display: grid; gap: var(--space-2); }
    .nav-item {
      display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 46px; padding: 0.82rem 0.95rem; border-radius: var(--radius-lg);
      color: var(--color-text-muted); transition: background var(--transition), color var(--transition), transform var(--transition);
    }
    .nav-item.active, .nav-item:hover { background: var(--color-surface-offset); color: var(--color-text); transform: translateX(2px); }
    .nav-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: 0.7; }
    .sidebar-card {
      background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-sm);
    }
    .header {
      grid-column: 2; position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
      padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(14px);
    }
    .header h2 { font-size: var(--text-xl); line-height: 1.05; }
    .header p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }
    .header-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0.78rem 1rem; border-radius: var(--radius-md);
      border: 1px solid transparent; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
    }
    .btn:hover { transform: translateY(-1px); }
    .btn-primary { background: var(--color-primary); color: var(--color-text-inverse); }
    .btn-primary:hover { background: var(--color-primary-hover); }
    .btn-secondary { background: var(--color-surface-2); border-color: var(--color-border); }
    .role-select, .type-filter, .category-filter, .sort-select, .month-filter, .search-input { background: var(--color-surface-2); }
    .main {
      grid-column: 2; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-6);
    }
    .section { margin-bottom: var(--space-6); }
    .section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
    .section-head h3 { font-size: var(--text-lg); }
    .section-head p { color: var(--color-text-muted); font-size: var(--text-sm); }
    .stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
    .card {
      background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-5);
      box-shadow: var(--shadow-sm); content-visibility: auto;
    }
    .stat-card { position: relative; overflow: hidden; }
    .stat-card::after { content: ''; position: absolute; inset: auto -10% -30% auto; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, transparent); }
    .eyebrow { font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); margin-bottom: var(--space-2); }
    .metric { font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 900; font-variant-numeric: tabular-nums lining-nums; }
    .delta { margin-top: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
    .delta strong { color: var(--delta-color, var(--color-text)); }
    .charts-grid, .bottom-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-4); }
    .chart-wrap { position: relative; min-height: 320px; }
    .chart-wrap.small { min-height: 280px; }
    .insights-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
    .insight-card { display: grid; gap: var(--space-3); }
    .insight-badge { width: fit-content; padding: 0.35rem 0.7rem; border-radius: var(--radius-full); font-size: var(--text-xs); background: var(--color-surface-offset); color: var(--color-text-muted); }
    .filters-bar {
      display: grid; grid-template-columns: 1.2fr repeat(4, minmax(0, 0.8fr)); gap: var(--space-3); margin-bottom: var(--space-4);
    }
    .table-shell { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-2); }
    table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; min-width: 760px; }
    thead th {
      position: sticky; top: 0; background: var(--color-surface-offset); text-align: left; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em;
      color: var(--color-text-faint); padding: 0.95rem 1rem; border-bottom: 1px solid var(--color-border);
    }
    tbody td { padding: 1rem; border-bottom: 1px solid var(--color-divider); font-size: var(--text-sm); }
    tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface-2)); }
    .pill { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.38rem 0.7rem; border-radius: var(--radius-full); font-size: var(--text-xs); }
    .pill.income { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
    .pill.expense { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); }
    .category-tag { display: inline-flex; align-items: center; padding: 0.35rem 0.65rem; border-radius: var(--radius-full); background: var(--color-surface-offset); }
    .actions-cell { display: flex; gap: var(--space-2); }
    .icon-btn { min-width: 40px; min-height: 40px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); }
    .empty-state {
      display: none; text-align: center; padding: var(--space-12) var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface-2);
    }
    .empty-state.show { display: block; }
    .drawer {
      position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: var(--space-4); background: rgb(0 0 0 / 0.35); z-index: 30;
    }
    .drawer.show { display: flex; }
    .modal {
      width: min(100%, 560px); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: calc(var(--radius-xl) + 2px); box-shadow: var(--shadow-lg); padding: var(--space-6);
    }
    .modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-3); margin-top: var(--space-4); }
    .modal-grid .full { grid-column: 1 / -1; }
    .field { display: grid; gap: var(--space-2); }
    .field label { font-size: var(--text-sm); color: var(--color-text-muted); }
    .helper { font-size: var(--text-xs); color: var(--color-text-faint); }
    .mobile-bar { display: none; }
    .muted { color: var(--color-text-muted); }
    .danger { color: var(--color-error); }
    .success { color: var(--color-success); }
    @media (max-width: 1100px) {
      .app { grid-template-columns: 88px minmax(0,1fr); }
      .sidebar { padding-inline: var(--space-3); }
      .brand h1, .brand p, .nav-item span, .sidebar-card { display: none; }
      .brand { justify-content: center; }
      .nav-item { justify-content: center; padding-inline: 0; }
    }
    @media (max-width: 900px) {
      html, body { overflow: auto; }
      .app { display: block; height: auto; }
      .sidebar { display: none; }
      .header { position: static; }
      .main { overflow: visible; padding-bottom: 6rem; }
      .stats-grid, .charts-grid, .bottom-grid, .insights-grid, .filters-bar, .modal-grid { grid-template-columns: 1fr; }
      .mobile-bar {
        position: fixed; inset: auto var(--space-4) var(--space-4) var(--space-4); display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-2);
        background: color-mix(in srgb, var(--color-surface) 88%, transparent); border: 1px solid var(--color-border); border-radius: calc(var(--radius-xl) + 4px); padding: var(--space-2); backdrop-filter: blur(14px); z-index: 25;
      }
      .mobile-bar button { min-height: 46px; border-radius: var(--radius-lg); background: transparent; color: var(--color-text-muted); }
      .mobile-bar button.active { background: var(--color-surface-offset); color: var(--color-text); }
      .header-actions { width: 100%; justify-content: flex-start; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
    }