:root{
    --bg:#0b0f1a;
    --panel:#111726;
    --panel-2:#0e1320;
    --surface:#161d30;
    --surface-2:#1c2438;
    --border:#232c44;
    --border-soft:#1a2136;
    --text:#e8ecf5;
    --muted:#8a93ab;
    --muted-2:#5d6680;
    --accent:#6c8cff;
    --accent-2:#8b5cf6;
    --green:#22c55e;
    --green-soft:rgba(34,197,94,.12);
    --red:#f43f5e;
    --red-soft:rgba(244,63,94,.12);
    --amber:#f59e0b;
    --amber-soft:rgba(245,158,11,.12);
    --cyan:#06b6d4;
    --radius:14px;
    --radius-sm:9px;
    --shadow:0 10px 40px rgba(0,0,0,.35);
    --sidebar-w:248px;
  }
  /* Light theme — sobreescribe las vars de :root */
  [data-theme="light"]{
    --bg:#eef2f8; --panel:#ffffff; --panel-2:#f6f8fc; --surface:#ffffff; --surface-2:#eef2f8;
    --border:#e3e8f1; --border-soft:#edf1f7; --text:#0f172a; --muted:#5a6577; --muted-2:#94a1b5;
    --green:#16a34a; --green-soft:rgba(22,163,74,.12); --red:#e11d48; --red-soft:rgba(225,29,72,.10);
    --amber:#d97706; --amber-soft:rgba(217,119,6,.12); --shadow:0 8px 28px rgba(15,23,42,.10);
  }
  [data-theme="light"] body{background:var(--bg)}
  [data-theme="light"] .sidebar{background:linear-gradient(180deg,#ffffff,#f6f8fc);border-right-color:var(--border)}
  [data-theme="light"] .main{background:radial-gradient(1200px 600px at 80% -10%,rgba(108,140,255,.06),transparent 60%)}
  [data-theme="light"] .topbar{background:rgba(255,255,255,.82);border-bottom-color:var(--border)}
  [data-theme="light"] .nav-item.active{background:linear-gradient(90deg,rgba(108,140,255,.12),rgba(139,92,246,.05));border-color:rgba(108,140,255,.25)}
  [data-theme="light"] thead th{background:rgba(15,23,42,.04)}
  [data-theme="light"] .modal{background:#fff}
  [data-theme="light"] .modal-foot{background:rgba(15,23,42,.03)}
  [data-theme="light"] ::-webkit-scrollbar-thumb{background:#c7d0e3;border-color:var(--bg)}
  [data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:#a9b4cc}
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh}
  .mono{font-family:'JetBrains Mono',monospace}
  button{font-family:inherit}
  ::-webkit-scrollbar{width:10px;height:10px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#2a3454;border-radius:10px;border:2px solid var(--bg)}
  ::-webkit-scrollbar-thumb:hover{background:#3a466b}

  /* Layout */
  .app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100vh}
  .sidebar{background:linear-gradient(180deg,#0c111d 0%,#0a0e18 100%);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
  .main{display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(1200px 600px at 80% -10%,rgba(108,140,255,.06),transparent 60%)}

  /* Sidebar */
  .brand{padding:18px 18px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border-soft)}
  .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#6c8cff,#8b5cf6);display:grid;place-items:center;box-shadow:0 6px 20px rgba(108,140,255,.4)}
  .logo svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.2}
  .brand-name{font-weight:800;font-size:15px;letter-spacing:.3px}
  .brand-sub{font-size:10.5px;color:var(--muted);font-weight:500;letter-spacing:.4px;text-transform:uppercase}
  .nav{flex:1;overflow-y:auto;padding:10px 10px 8px}
  .nav-section{font-size:10px;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:1.2px;padding:14px 12px 6px}
  .nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--muted);font-weight:500;font-size:13.5px;cursor:pointer;transition:.15s;border:1px solid transparent;user-select:none}
  .nav-item svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;flex-shrink:0}
  .nav-item:hover{background:var(--surface);color:var(--text)}
  .nav-item.active{background:linear-gradient(90deg,rgba(108,140,255,.18),rgba(139,92,246,.08));color:#fff;border-color:rgba(108,140,255,.3)}
  .nav-item.active svg{color:var(--accent)}
  .nav-badge{margin-left:auto;font-size:10px;font-weight:600;background:var(--surface-2);color:var(--muted);padding:2px 7px;border-radius:20px}
  .sidebar-foot{padding:12px 14px;border-top:1px solid var(--border-soft);display:flex;align-items:center;gap:10px;font-size:12px}
  .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#f43f5e);display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff}
  .status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.18)}

  /* Topbar */
  .topbar{height:62px;border-bottom:1px solid var(--border);background:rgba(12,17,29,.7);backdrop-filter:blur(10px);display:flex;align-items:center;padding:0 22px;gap:14px;flex-shrink:0}
  .topbar h1{font-size:16px;font-weight:700;margin:0}
  .topbar .sub{font-size:12px;color:var(--muted)}
  .search{flex:1;max-width:380px;margin-left:14px;position:relative}
  .search input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:9px 12px 9px 36px;color:var(--text);font-size:13px;outline:none;font-family:inherit}
  .search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,140,255,.15)}
  .search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2}
  .top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
  .icon-btn{width:36px;height:36px;border-radius:9px;background:var(--surface);border:1px solid var(--border);display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.15s}
  .icon-btn:hover{color:var(--text);border-color:var(--accent)}
  .icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
  .conn-status{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:9px;background:var(--green-soft);color:var(--green);font-size:11.5px;font-weight:600;border:1px solid rgba(34,197,94,.2)}

  /* Content */
  .content{flex:1;overflow-y:auto;padding:22px}
  .page{display:none;animation:fade .25s ease}
  .page.active{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* Cards & grid */
  .grid{display:grid;gap:16px}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .card{background:linear-gradient(180deg,var(--surface),var(--panel));border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
  .card-head{padding:16px 18px;border-bottom:1px solid var(--border-soft);display:flex;align-items:center;gap:10px}
  .card-head h3{margin:0;font-size:14px;font-weight:600}
  .card-head .sub{font-size:11.5px;color:var(--muted);margin-left:auto}
  .card-body{padding:18px}

  .kpi{background:linear-gradient(180deg,var(--surface),var(--panel));border:1px solid var(--border);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden}
  .kpi::before{content:'';position:absolute;inset:0;background:radial-gradient(400px 100px at 100% 0%,rgba(108,140,255,.12),transparent 60%);pointer-events:none}
  .kpi-label{font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.4px;text-transform:uppercase;display:flex;align-items:center;gap:8px}
  .kpi-icon{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
  .kpi-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
  .kpi-value{font-size:26px;font-weight:800;margin-top:10px;letter-spacing:-.5px}
  .kpi-trend{font-size:11.5px;margin-top:6px;display:flex;align-items:center;gap:5px;font-weight:600}
  .trend-up{color:var(--green)}
  .trend-down{color:var(--red)}

  /* Buttons */
  .btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:.15s;font-family:inherit}
  .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
  .btn-primary{background:linear-gradient(135deg,#6c8cff,#5b7bf5);color:#fff;box-shadow:0 4px 14px rgba(108,140,255,.35)}
  .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .btn-ghost{background:var(--surface);border-color:var(--border);color:var(--text)}
  .btn-ghost:hover{border-color:var(--accent);color:#fff}
  .btn-danger{background:var(--red-soft);color:var(--red);border-color:rgba(244,63,94,.25)}
  .btn-danger:hover{background:rgba(244,63,94,.22)}
  .btn-sm{padding:6px 11px;font-size:12px}

  /* Tables */
  .table-wrap{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:13px}
  thead th{text-align:left;padding:11px 14px;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.15);position:sticky;top:0}
  tbody td{padding:12px 14px;border-bottom:1px solid var(--border-soft)}
  tbody tr{transition:.12s}
  tbody tr:hover{background:rgba(108,140,255,.05)}
  .chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
  .chip-green{background:var(--green-soft);color:var(--green)}
  .chip-red{background:var(--red-soft);color:var(--red)}
  .chip-amber{background:var(--amber-soft);color:var(--amber)}
  .chip-blue{background:rgba(108,140,255,.14);color:var(--accent)}
  .chip-gray{background:var(--surface-2);color:var(--muted)}

  .row-actions{display:flex;gap:5px;justify-content:flex-end}
  .row-actions button{background:transparent;border:1px solid transparent;color:var(--muted);padding:5px 7px;border-radius:6px;cursor:pointer;transition:.12s}
  .row-actions button:hover{background:var(--surface-2);color:var(--text)}
  .row-actions button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

  /* Forms / Modal */
  .modal-bg{position:fixed;inset:0;background:rgba(5,8,15,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100;animation:fade .2s}
  .modal-bg.show{display:flex}
  .modal{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid var(--border);border-radius:16px;width:560px;max-width:92vw;max-height:88vh;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
  .modal.lg{width:760px}
  .modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
  .modal-head h2{margin:0;font-size:16px;font-weight:700}
  .modal-body{padding:22px;overflow-y:auto}
  .modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;background:rgba(0,0,0,.15)}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .form-grid .full{grid-column:1/-1}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
  .field input,.field select,.field textarea{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:10px 12px;color:var(--text);font-size:13.5px;outline:none;font-family:inherit;transition:.15s}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,140,255,.13)}
  .field textarea{resize:vertical;min-height:70px}
  .field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93ab' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

  /* Toast */
  .toast-wrap{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:10px;z-index:200}
  .toast{background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:10px;padding:13px 16px;min-width:260px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center;animation:slideIn .25s}
  .toast.success{border-left-color:var(--green)}
  .toast.error{border-left-color:var(--red)}
  .toast.warn{border-left-color:var(--amber)}
  @keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}
  .toast svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}

  /* Dashboard specific */
  .dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:16px}
  .chart-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
  .chart-box{position:relative;height:260px}
  .recent-list{display:flex;flex-direction:column}
  .recent-item{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--border-soft)}
  .recent-item:last-child{border-bottom:none}
  .recent-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
  .recent-meta{flex:1;min-width:0}
  .recent-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .recent-sub{font-size:11.5px;color:var(--muted)}
  .recent-amt{font-weight:700;font-size:13.5px}

  /* Empty state */
  .empty{padding:50px 20px;text-align:center;color:var(--muted)}
  .empty svg{width:48px;height:48px;stroke:var(--muted-2);fill:none;stroke-width:1.4;margin:0 auto 14px;display:block}
  .empty h4{margin:0 0 6px;color:var(--text);font-weight:600}
  .empty p{margin:0 0 16px;font-size:13px}

  /* Toolbar */
  .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
  .toolbar .spacer{flex:1}
  .filter-select{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 32px 8px 12px;color:var(--text);font-size:13px;cursor:pointer;outline:none;font-family:inherit;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93ab' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 10px center}

  /* Journal entry rows */
  .je-rows{display:flex;flex-direction:column;gap:8px;margin-top:6px}
  .je-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 36px;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px}
  .je-row input,.je-row select{background:var(--panel-2);border:1px solid var(--border-soft);border-radius:7px;padding:8px 10px;color:var(--text);font-size:13px;outline:none;font-family:inherit}
  .je-row input:focus{border-color:var(--accent)}
  .je-totals{display:flex;justify-content:space-between;padding:12px 4px;margin-top:6px;border-top:1px dashed var(--border);font-weight:600;font-size:13px}
  .je-balanced{color:var(--green);font-size:12px;font-weight:600}
  .je-unbalanced{color:var(--red);font-size:12px;font-weight:600}
  .je-add{margin-top:8px;background:transparent;border:1px dashed var(--border);color:var(--muted);padding:8px;border-radius:8px;cursor:pointer;font-size:12.5px;width:100%}
  .je-add:hover{border-color:var(--accent);color:var(--accent)}

  /* Reports */
  .report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-bottom:18px}
  .report-card{background:linear-gradient(180deg,var(--surface),var(--panel));border:1px solid var(--border);border-radius:12px;padding:18px;cursor:pointer;transition:.15s;position:relative;overflow:hidden}
  .report-card:hover{border-color:var(--accent);transform:translateY(-2px)}
  .report-card::after{content:'';position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(circle,rgba(108,140,255,.15),transparent 70%)}
  .report-card h4{margin:0 0 6px;font-size:14px;font-weight:700}
  .report-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
  .report-card .ico{width:38px;height:38px;border-radius:10px;background:rgba(108,140,255,.12);color:var(--accent);display:grid;place-items:center;margin-bottom:12px}
  .report-card .ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

  .financial-table{width:100%;font-size:13px}
  .financial-table td{padding:9px 14px;border-bottom:1px solid var(--border-soft)}
  .financial-table tr.section td{font-weight:700;background:rgba(108,140,255,.06);color:#cfd6ec;text-transform:uppercase;font-size:11px;letter-spacing:.5px}
  .financial-table tr.total td{font-weight:800;border-top:2px solid var(--border);font-size:14px}
  .text-right{text-align:right}
  .text-muted{color:var(--muted)}

  /* Settings */
  .settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border-soft)}
  .setting-row:last-child{border-bottom:none}
  .setting-row .label{font-size:13.5px;font-weight:600}
  .setting-row .desc{font-size:11.5px;color:var(--muted);margin-top:2px}
  .toggle{position:relative;width:42px;height:24px;background:var(--surface-2);border-radius:24px;cursor:pointer;border:1px solid var(--border);transition:.2s}
  .toggle.on{background:var(--accent);border-color:var(--accent)}
  .toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
  .toggle.on::after{transform:translateX(18px)}

  /* Responsive */
  @media(max-width:920px){
    .app{grid-template-columns:1fr}
    .sidebar{position:fixed;left:-260px;top:0;width:var(--sidebar-w);height:100vh;z-index:50;transition:.25s}
    .sidebar.open{left:0}
    .dash-grid,.chart-row,.settings-grid,.form-grid{grid-template-columns:1fr}
    .mobile-menu{display:grid !important}
  }
  .mobile-menu{display:none}

  .badge-count{background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;margin-left:auto}