:root {
    --bg:#F7F5F0;--surface:#FFFFFF;--surface2:#F0EDE6;
    --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
    --text:#1A1814;--muted:#6B6760;
    --accent:#2C5F2E;--accent-light:#EAF3DE;
    --danger:#993C1D;--danger-light:#FAECE7;
    --blue:#185FA5;--blue-light:#E6F1FB;
    --amber:#854F0B;--amber-light:#FAEEDA;
    --purple:#534AB7;--purple-light:#EEEDFE;
    --teal:#008080;--teal-light:#E0FCA6; /* Wait, using a better light color block */
    --teal:#008080;--teal-light:#E0F2F2;
    --radius:10px;--radius-lg:14px;
    --shadow:0 1px 4px rgba(0,0,0,0.07),0 4px 16px rgba(0,0,0,0.05);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px}

  /* ══ HEADER ══ */
  .header{background:var(--text);color:#fff;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;height:56px;position:sticky;top:0;z-index:100}
  .header-brand{font-family:'DM Serif Display',serif;font-size:20px;letter-spacing:-0.3px;cursor:default}
  .header-brand span{color:#9FE1CB}
  .header-brand small{font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;color:rgba(255,255,255,0.4);letter-spacing:.08em;text-transform:uppercase;margin-left:8px;vertical-align:middle}
  .header-actions{display:flex;gap:8px;align-items:center}
  .hbtn{padding:6px 14px;font-size:12px;font-weight:500;font-family:'DM Sans',sans-serif;border-radius:6px;cursor:pointer;transition:all .15s;border:1px solid rgba(255,255,255,0.2)}
  .hbtn-outline{background:transparent;color:#fff}.hbtn-outline:hover{background:rgba(255,255,255,0.1)}
  .hbtn-fill{background:#9FE1CB;color:var(--text);border-color:transparent}.hbtn-fill:hover{background:#5DCAA5}
  .hbtn-danger{background:rgba(240,149,149,0.15);color:#F09595;border-color:rgba(240,149,149,0.25)}.hbtn-danger:hover{background:rgba(240,149,149,0.28)}
  .db-status{display:flex;align-items:center;gap:5px;font-size:11px;padding:4px 10px;border-radius:20px;border:1px solid rgba(255,255,255,0.15)}
  .db-dot{width:7px;height:7px;border-radius:50%;background:#ccc;transition:background .3s}
  .db-dot.ok{background:#9FE1CB}.db-dot.err{background:#F09595}
  .user-pill{display:flex;align-items:center;gap:7px;padding:4px 12px 4px 5px;border-radius:20px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15)}
  .user-avatar{width:24px;height:24px;border-radius:50%;background:#9FE1CB;color:var(--text);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .user-name{font-size:12px;font-weight:500;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* ══ LAYOUT ══ */
  .layout{display:flex;min-height:calc(100vh - 56px)}
  .sidebar{width:200px;background:var(--surface);border-right:1px solid var(--border);padding:1.5rem 0;flex-shrink:0;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}
  .nav-label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 1.25rem;margin-bottom:6px}
  .nav-item{display:flex;align-items:center;gap:10px;padding:9px 1.25rem;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;border-left:2px solid transparent;transition:all .12s;user-select:none}
  .nav-item:hover{color:var(--text);background:var(--surface2)}
  .nav-item.active{color:var(--text);background:var(--surface2);border-left-color:var(--accent)}
  .nav-icon{font-size:15px;width:18px;text-align:center}
  .nav-divider{height:1px;background:var(--border);margin:1rem 1.25rem}
  .nav-badge{margin-left:auto;font-size:9px;font-weight:700;background:var(--accent);color:#fff;padding:2px 6px;border-radius:10px;text-transform:uppercase;letter-spacing:.04em}
  .main{flex:1;padding:2rem;overflow-y:auto;max-width:100%}
  .section{display:none}.section.active{display:block}
  .page-title{font-family:'DM Serif Display',serif;font-size:26px;margin-bottom:1.5rem;color:var(--text)}

  /* ══ LOGIN PROMPT BANNER ══ */
  .login-banner{background:linear-gradient(135deg,#1A2E1B 0%,#2C5F2E 100%);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
  .login-banner-text{color:#fff;font-size:13px;font-weight:500}
  .login-banner-text strong{display:block;font-size:15px;font-family:'DM Serif Display',serif;margin-bottom:2px}
  .login-banner-text span{color:rgba(255,255,255,0.65);font-size:12px}
  .login-banner-btns{display:flex;gap:8px;flex-shrink:0}
  .lbtn{padding:7px 16px;font-size:12px;font-weight:600;font-family:'DM Sans',sans-serif;border-radius:8px;cursor:pointer;border:none;transition:all .15s;white-space:nowrap}
  .lbtn-outline{background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.25)}.lbtn-outline:hover{background:rgba(255,255,255,0.2)}
  .lbtn-fill{background:#9FE1CB;color:#1A2E1B}.lbtn-fill:hover{background:#7DD4B8}

  /* ══ METRICS ══ */
  .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem}
  .metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
  .metric-label{font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
  .metric-value{font-size:22px;font-weight:600}
  .metric-sub{font-size:11px;color:var(--muted);margin-top:3px}
  .c-green{color:var(--accent)}.c-red{color:var(--danger)}.c-blue{color:var(--blue)}.c-amber{color:var(--amber)}.c-purple{color:var(--purple)}

  /* ══ CARDS ══ */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow);margin-bottom:1rem}
  .card-title{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:1rem}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}

  /* ══ FORMS ══ */
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
  .form-grid-4{grid-template-columns:1fr 1fr 1fr 1fr}
  .field label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
  .field input,.field select,.field textarea{width:100%;padding:9px 12px;font-size:13px;font-family:'DM Sans',sans-serif;border:1px solid var(--border2);border-radius:var(--radius);background:var(--bg);color:var(--text);transition:border-color .12s;outline:none}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:#fff}
  .field textarea{resize:vertical;min-height:70px}
  .btn-row{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
  .btn{padding:9px 20px;font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;border-radius:var(--radius);cursor:pointer;transition:all .15s;border:1px solid transparent}
  .btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:#1e4220}
  .btn-ghost{background:transparent;color:var(--muted);border-color:var(--border2)}.btn-ghost:hover{color:var(--text);background:var(--surface2)}
  .btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#7a2f14}

  /* ══ TYPE SELECTOR ══ */
  .type-selector{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:1rem}
  .type-opt{padding:10px;border-radius:var(--radius);border:1.5px solid var(--border2);cursor:pointer;text-align:center;transition:all .12s}
  .type-opt .type-icon{font-size:20px;margin-bottom:4px}
  .type-opt .type-label{font-size:11px;font-weight:600;color:var(--muted)}
  .type-opt.sel-income{border-color:var(--accent);background:var(--accent-light)}.type-opt.sel-income .type-label{color:var(--accent)}
  .type-opt.sel-personal{border-color:var(--blue);background:var(--blue-light)}.type-opt.sel-personal .type-label{color:var(--blue)}
  .type-opt.sel-family{border-color:var(--amber);background:var(--amber-light)}.type-opt.sel-family .type-label{color:var(--amber)}
  .type-opt.sel-others{border-color:var(--purple);background:var(--purple-light)}.type-opt.sel-others .type-label{color:var(--purple)}
  .type-opt.sel-savings{border-color:var(--teal);background:var(--teal-light)}.type-opt.sel-savings .type-label{color:var(--teal)}

  /* ══ TABLE ══ */
  .badge{display:inline-block;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:600}
  .badge-income{background:var(--accent-light);color:var(--accent)}
  .badge-personal{background:var(--blue-light);color:var(--blue)}
  .badge-family{background:var(--amber-light);color:var(--amber)}
  .badge-others{background:var(--purple-light);color:var(--purple)}
  .badge-savings{background:var(--teal-light);color:var(--teal)}
  .table-wrap{overflow-x:auto}
  table{width:100%;border-collapse:collapse;font-size:13px}
  thead tr{border-bottom:2px solid var(--border2)}
  th{padding:8px 10px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
  td{padding:10px;border-bottom:1px solid var(--border);vertical-align:middle}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:var(--bg)}
  .amount-cell{font-weight:600;text-align:right;white-space:nowrap}
  .action-btns{display:flex;gap:5px;justify-content:flex-end}
  .icon-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:6px;background:transparent;cursor:pointer;font-size:14px;color:var(--muted);transition:all .12s}
  .icon-btn.edit:hover{background:var(--blue-light);color:var(--blue);border-color:transparent}
  .icon-btn.del:hover{background:var(--danger-light);color:var(--danger);border-color:transparent}

  /* ══ FILTERS ══ */
  .pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem}
  .pill{padding:5px 14px;font-size:12px;font-weight:500;border-radius:20px;border:1px solid var(--border2);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .12s}
  .pill.active{background:var(--text);color:#fff;border-color:transparent}
  .period-tabs{display:flex;gap:6px;margin-bottom:1.5rem}
  .period-tab{padding:7px 18px;font-size:13px;font-weight:500;font-family:'DM Sans',sans-serif;border-radius:8px;border:1px solid var(--border2);background:var(--surface);color:var(--muted);cursor:pointer;transition:all .12s}
  .period-tab.active{background:var(--text);color:#fff;border-color:transparent}

  /* ══ CHARTS ══ */
  .prog-row{margin-bottom:10px}
  .prog-header{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
  .prog-bar{height:6px;border-radius:3px;background:var(--surface2);overflow:hidden}
  .prog-fill{height:100%;border-radius:3px;transition:width .4s ease}
  .chart-container{position:relative;width:100%}
  .chart-legend{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:10px}
  .chart-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
  .legend-swatch{width:10px;height:10px;border-radius:2px}
  .empty{text-align:center;padding:3rem 1rem;color:var(--muted)}
  .empty-icon{font-size:36px;margin-bottom:8px}
  .search-row{display:flex;gap:8px;margin-bottom:1rem}
  .recent-item{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border)}
  .recent-item:last-child{border-bottom:none}
  .recent-desc{font-size:13px;font-weight:500}
  .recent-meta{font-size:11px;color:var(--muted);margin-top:2px}

  /* ══ LOGIN MODAL ══ */
  .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:400;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(3px)}
  .modal-overlay.show{display:flex}
  .modal{background:var(--surface);border-radius:18px;padding:2rem;width:100%;max-width:400px;box-shadow:0 16px 60px rgba(0,0,0,0.2);animation:modalIn .2s ease}
  .modal-edit{max-width:520px;border-radius:var(--radius-lg);padding:1.75rem}
  @keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}
  .modal-close{float:right;background:none;border:none;font-size:20px;cursor:pointer;color:var(--muted);margin-top:-4px;line-height:1;padding:2px 4px}
  .modal-close:hover{color:var(--text)}
  .modal-logo{font-family:'DM Serif Display',serif;font-size:22px;color:var(--text);text-align:center;margin-bottom:4px}
  .modal-logo span{color:var(--accent)}
  .modal-sub{text-align:center;font-size:12px;color:var(--muted);margin-bottom:1.5rem}
  .modal-title{font-family:'DM Serif Display',serif;font-size:20px;margin-bottom:1.25rem}
  .auth-tabs{display:flex;background:var(--surface2);border-radius:10px;padding:3px;margin-bottom:1.5rem;gap:3px}
  .auth-tab{flex:1;padding:8px;font-size:13px;font-weight:600;font-family:'DM Sans',sans-serif;border:none;border-radius:8px;cursor:pointer;background:transparent;color:var(--muted);transition:all .15s}
  .auth-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.10)}
  .auth-form{display:none}.auth-form.active{display:block}
  .auth-field{margin-bottom:13px}
  .auth-field label{display:block;font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
  .auth-field input{width:100%;padding:10px 13px;font-size:13px;font-family:'DM Sans',sans-serif;border:1px solid var(--border2);border-radius:var(--radius);background:var(--bg);color:var(--text);outline:none;transition:border-color .12s}
  .auth-field input:focus{border-color:var(--accent);background:#fff}
  .auth-btn{width:100%;padding:11px;font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;background:var(--accent);color:#fff;border:none;border-radius:var(--radius);cursor:pointer;transition:background .15s;margin-top:4px}
  .auth-btn:hover{background:#1e4220}.auth-btn:disabled{opacity:.6;cursor:not-allowed}
  .auth-err{background:var(--danger-light);color:var(--danger);font-size:12px;padding:9px 12px;border-radius:8px;margin-bottom:12px;display:none}
  .auth-err.show{display:block}
  .pass-wrap{position:relative}
  .pass-wrap input{padding-right:38px}
  .pass-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:15px;color:var(--muted);padding:2px 4px;line-height:1}

  /* ══ MISC ══ */
  .toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--text);color:#fff;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 4px 20px rgba(0,0,0,0.2);opacity:0;transform:translateY(8px);transition:all .2s;z-index:999;pointer-events:none;max-width:320px}
  .toast.show{opacity:1;transform:translateY(0)}
  .toast.error{background:var(--danger)}.toast.success{background:var(--accent)}
  .loading-overlay{display:none;position:fixed;inset:0;background:rgba(255,255,255,0.8);z-index:500;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--muted)}
  .loading-overlay.show{display:flex}
  .spinner{width:20px;height:20px;border:2px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite;margin-right:10px}
  @keyframes spin{to{transform:rotate(360deg)}}

  @media(max-width:992px){
    .sidebar{width:180px}
    .metrics{grid-template-columns:repeat(2,1fr)}
    .form-grid-4{grid-template-columns:repeat(2,1fr)}
    .grid-2{grid-template-columns:1fr}
  }
  @media(max-width:768px){
    .sidebar{display:flex; flex-direction:row; position:fixed; bottom:0; left:0; width:100%; height:64px; background:var(--surface); border-top:1px solid var(--border); border-right:none; top:auto; z-index:200; overflow-x:auto; padding:0; align-items:center}
    .nav-label{display:none}
    .nav-divider{display:none}
    .nav-item{flex:1 1 0; min-width:75px; flex-direction:column; justify-content:center; align-items:center; gap:4px; padding:8px 4px; font-size:11px; border-left:none; border-bottom:2px solid transparent; text-align:center}
    .nav-item.active{border-left:none; border-bottom-color:var(--accent); background:var(--surface2)}
    .nav-badge{margin-left:0; font-size:8px; padding:1px 5px}
    .main{padding:1.25rem; padding-bottom:85px; width:100%}
    .type-selector{grid-template-columns:repeat(3,1fr)}
    .header{padding:0 1rem}
    .header-actions .db-status{display:none}
    .login-banner{flex-direction:column;align-items:flex-start}
    table{font-size:12px}
    th{padding:8px; font-size:9px}
    td{padding:8px}
    .chart-container{height:250px}
    .pills{flex-wrap:nowrap; overflow-x:auto; padding-bottom:5px; white-space:nowrap}
    .period-tabs{flex-wrap:nowrap; overflow-x:auto; white-space:nowrap}
  }
  @media(max-width:480px){
    .metrics{grid-template-columns:1fr}
    .form-grid,.form-grid-4{grid-template-columns:1fr}
    .header-brand small{display:none}
  }