:root{
      --bg:#020617;
      --card:#0b1228;
      --muted:#9aa4b2;
      --text:#e6eef8;
      --accent:#0b74ff;
      --border:rgba(148,163,184,0.18);
      --radius:16px;
      --gap:14px;
      --good:#22c55e;
      --warn:#f59e0b;
      --bad:#ef4444;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      background: radial-gradient(circle at top, #0b1120 0, #020617 55%, #000 100%);
      color:var(--text);
      overflow-x:hidden;
    }

    .wrap{
  width:calc(100vw - 32px);
  max-width:1600px;
  margin:22px auto;
  padding:0 12px 28px;
}
    .topbar{
      display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
      padding:16px 18px;background:rgba(255,255,255,0.03);
      border:1px solid var(--border);border-radius:var(--radius);
      box-shadow:0 16px 50px rgba(0,0,0,0.45);
    }
    .title{display:flex;flex-direction:column;gap:6px;}
    .title h1{font-size:18px;font-weight:800;letter-spacing:.2px;}
    .statusline{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;}
    .dot{width:9px;height:9px;border-radius:999px;background:var(--muted);box-shadow:0 0 0 4px rgba(255,255,255,0.04);}
    .dot.good{background:var(--good)}
    .dot.warn{background:var(--warn)}
    .dot.bad{background:var(--bad)}
    .pill{
      font-size:11px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,0.06);
      border:1px solid var(--border);color:var(--muted);max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }

    .actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
    button,.btn{
      appearance:none;border:none;cursor:pointer;padding:10px 14px;border-radius:999px;font-weight:700;color:var(--text);
      background:rgba(255,255,255,0.06);border:1px solid var(--border);
      transition:transform .05s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
      user-select:none;
    }
    button:active{transform:translateY(1px)}
    button:hover,.btn:hover{background:rgba(255,255,255,0.09)}
    button[disabled]{opacity:.5;cursor:not-allowed;transform:none}
    .btn-accent{background:rgba(11,116,255,0.22);border-color:rgba(11,116,255,0.45);}
    .btn-accent:hover{background:rgba(11,116,255,0.28)}
    .btn-danger{background:rgba(239,68,68,0.18);border-color:rgba(239,68,68,0.42);}
    .btn-danger:hover{background:rgba(239,68,68,0.24)}
    .fileInput{display:none;}

    .grid{margin-top:14px;display:grid;grid-template-columns:520px minmax(0,1fr);gap:var(--gap);}
    @media(max-width:900px){.grid{grid-template-columns:1fr}}

    .card{
      background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:var(--radius);
      box-shadow:0 18px 60px rgba(0,0,0,0.48);overflow:hidden;
    }
    .cardHead{
      padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);
      gap:10px;flex-wrap:wrap;
    }
    .cardHead h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#cfe2ff;}
    .cardBody{padding:14px 16px;}

    .bigMoney{font-size:34px;font-weight:900;letter-spacing:.3px;margin-top:6px;}
    .smallMuted{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.35}
    .muted{color:var(--muted)}

    .modePills{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
    .modePills button{padding:7px 12px;font-size:12px;}
    .modePills button.active{
      background:rgba(11,116,255,0.28);
      border-color:rgba(11,116,255,0.55);
    }

    .donutWrap{display:grid;grid-template-columns:1fr;gap:14px;align-items:center;margin-top:10px;}
    @media(max-width:540px){.donutWrap{grid-template-columns:1fr}}
    .donutBox{width:280px;height:280px;margin:0 auto;position:relative;}
    .donutBox canvas{width:100% !important;height:100% !important;display:block;}

    .topCats{border:1px solid var(--border);border-radius:12px;overflow:hidden;}
    .topCats table{width:100%;border-collapse:collapse;font-size:12px;}
    .topCats th,.topCats td{padding:10px 10px;border-bottom:1px solid rgba(148,163,184,0.12);text-align:left;}
    .topCats th{color:var(--muted);font-weight:700}
    .topCats td:last-child{text-align:right;font-variant-numeric:tabular-nums}
    .topCats tr:last-child td{border-bottom:none}

    input,select{
      width:100%;padding:10px 12px;border-radius:999px;background:rgba(255,255,255,0.04);
      border:1px solid var(--border);color:var(--text);outline:none;
    }
    select option{background:#0b1120}

    .filtersRow{
      display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px;
    }
    .filtersRow .grow{flex:1 1 220px;}
    .filtersRow .small{flex:0 0 160px;}
    .filtersRow .xs{flex:0 0 130px;}
    .filtersRow .btnSlot{flex:0 0 auto;display:flex;gap:10px;align-items:center;}
    @media(max-width:980px){
      .filtersRow .small,.filtersRow .xs{flex:1 1 160px;}
    }

    .tableWrap{border:1px solid var(--border);border-radius:12px;overflow:auto;max-height:520px;}
    table.tx{width:100%;border-collapse:collapse;min-width:920px;font-size:12px;}
    table.tx th,table.tx td{padding:10px 10px;border-bottom:1px solid rgba(148,163,184,0.12);vertical-align:top;}
    table.tx th{
      color:var(--muted);font-weight:800;position:sticky;top:0;background:rgba(10,16,30,0.85);
      backdrop-filter:blur(10px);z-index:2;
    }
    table.tx td.amount{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
    .countPill{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,0.04);color:var(--muted);}

    .modalBack{position:fixed;inset:0;background:rgba(0,0,0,0.65);display:none;align-items:center;justify-content:center;padding:18px;z-index:50;}
    .modal{
      width:min(980px,100%);max-height:85vh;overflow:hidden;border-radius:18px;border:1px solid var(--border);
      background:rgba(8,12,22,0.92);backdrop-filter:blur(14px);box-shadow:0 30px 80px rgba(0,0,0,0.6);
    }
    .modalHead{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);}
    .modalHead h3{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#cfe2ff;}
    .modalBody{padding:14px 16px;display:grid;grid-template-columns:1fr 1.4fr;gap:14px;max-height:calc(85vh - 120px);overflow:auto;}
    @media(max-width:900px){.modalBody{grid-template-columns:1fr}}
    .panel{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(255,255,255,0.03);}
    .panel h4{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;}
    .list{display:flex;flex-direction:column;gap:10px;}
    .row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;border:1px solid rgba(148,163,184,0.14);background:rgba(255,255,255,0.03);}
    .row input[type="checkbox"]{width:18px;height:18px;}
    .row .name{flex:1;font-weight:800;font-size:12px;}
    .row .small{width:180px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid rgba(148,163,184,0.18);color:var(--text);font-size:12px;}
    .modalFoot{display:flex;justify-content:space-between;gap:10px;padding:14px 16px;border-top:1px solid var(--border);align-items:center;flex-wrap:wrap;}
    .miniRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
    .miniRow input,.miniRow select{width:auto;min-width:160px;}

    .txnGrid{display:grid;grid-template-columns:1fr 1.4fr;gap:14px;}
    @media(max-width:900px){.txnGrid{grid-template-columns:1fr}}
    .field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
    .field label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;}
    .btnRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}
    .helpText{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.4;}
  
    .hidden{display:none!important}
    .installWrap{min-height:100vh;display:grid;place-items:center;padding:18px}
    .installCard{width:min(940px,100%);background:rgba(11,18,40,.94);border:1px solid var(--border);border-radius:26px;box-shadow:0 18px 60px rgba(0,0,0,.48);padding:24px}
    .installTitle{font-size:34px;line-height:1.05;font-weight:950;letter-spacing:-.7px}
    .installText{color:var(--muted);line-height:1.55;margin-top:10px}
    .installGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
    .installPanel{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:20px;padding:16px}
    .installPanel h2{font-size:16px;margin-bottom:10px}
    .installError{border:1px solid rgba(239,68,68,.45);background:rgba(239,68,68,.12);color:#fee2e2;border-radius:16px;padding:12px;margin-top:14px;white-space:pre-wrap;line-height:1.45}
    @media(max-width:800px){.installGrid{grid-template-columns:1fr}.installTitle{font-size:28px}}
    /* =========================================================
   FINAL DASHBOARD WIDTH FIX
   Paste this at the VERY BOTTOM of the <style> section,
   directly above the closing style tag
   ========================================================= */

/* Make the entire app frame use almost the full browser width */
.wrap {
  width: 98vw !important;
  max-width: none !important;
  margin: 10px auto 28px !important;
  padding: 0 10px 28px !important;
}

/* Keep the top toolbar full width */
.topbar {
  width: 100% !important;
  max-width: none !important;
}

/* Keep the dashboard as two columns:
   Left = Breakdown
   Right = Transactions gets the rest */
.grid {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 460px minmax(0, 1fr) !important;
  gap: var(--gap) !important;
}

/* Prevent cards from forcing the layout wider than needed */
.card {
  min-width: 0 !important;
}

/* Keep the Breakdown side readable */
.donutWrap {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 10px !important;
}

.donutBox {
  width: 260px !important;
  height: 260px !important;
  margin: 0 auto !important;
}

/* Let the Transactions card use its space properly */
.tableWrap {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Make the transaction table wide enough, but not crazy wide */
table.tx {
  width: 100% !important;
  min-width: 850px !important;
  table-layout: fixed !important;
}

/* Better column widths so the full expense row fits */
table.tx th:nth-child(1),
table.tx td:nth-child(1) {
  width: 92px !important;
}

table.tx th:nth-child(2),
table.tx td:nth-child(2) {
  width: 190px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

table.tx th:nth-child(3),
table.tx td:nth-child(3) {
  width: 210px !important;
}

table.tx th:nth-child(4),
table.tx td:nth-child(4) {
  width: 140px !important;
}

table.tx th:nth-child(5),
table.tx td:nth-child(5) {
  width: 170px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

table.tx th:nth-child(6),
table.tx td:nth-child(6) {
  width: 110px !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* Make dropdowns fit inside their table cells */
table.tx select {
  width: 100% !important;
  min-width: 0 !important;
}

/* Make the filter row breathe on wide screens */
.filtersRow {
  width: 100% !important;
}

.filtersRow .grow {
  flex: 1 1 340px !important;
}

.filtersRow .small {
  flex: 1 1 170px !important;
}

.filtersRow .xs {
  flex: 0 1 140px !important;
}

/* On smaller screens, stack the cards instead of crushing them */
@media (max-width: 1000px) {
  .grid {
    grid-template-columns: 1fr !important;
  }

  .wrap {
    width: 96vw !important;
    padding: 0 8px 28px !important;
  }

  table.tx {
    min-width: 850px !important;
  }
}
  
[hidden]{display:none!important}.pwaToolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 20px;flex-wrap:wrap;border-bottom:1px solid var(--border)}.pwaTools{display:flex;gap:8px;flex-wrap:wrap}#appNotice{padding:0 20px;color:#cfe2ff;white-space:pre-wrap}#appNotice:not(:empty){padding:12px 20px}.connection{margin:20px;padding:20px;border:1px solid var(--border);border-radius:16px}.connection a{display:inline-block;margin:12px;color:#7dd3fc}dialog{margin:auto;max-width:min(620px,94vw);max-height:88dvh;overflow:auto;padding:24px;border:1px solid var(--border);border-radius:16px;color:var(--text);background:#0b1228}dialog p{line-height:1.6;margin:14px 0}dialog::backdrop{background:#000b}.wrap{max-width:none!important}.donutBox{height:300px;position:relative}#googleBridge{width:1px;height:1px;position:absolute;left:-10000px;border:0}.statusline{flex-wrap:wrap}.installWrap{min-height:0!important;padding:24px 12px!important}.actions{justify-content:flex-start}@media(max-width:600px){.pwaToolbar{padding:12px}.pwaToolbar button{padding:9px 11px}.topbar{flex-wrap:wrap}.wrap{margin:12px auto}.installGrid{grid-template-columns:1fr!important}.modalBack{padding:8px}.donutBox{height:260px}}
html{overflow-x:clip}body{width:100%;max-width:100%}.grid,.card,.cardBody,.topbar,.title{min-width:0}.tableWrap{width:100%;min-width:0;contain:inline-size}.modalBody,.txnGrid,.panel{min-width:0}@media(max-width:600px){.row{flex-wrap:wrap}.row .small{width:100%}.installCard{min-width:0;max-width:100%}.installPanel{min-width:0}.installPanel input{min-width:0}}
html{height:auto;min-height:100%;background:#020617}body{height:auto;min-height:100dvh;overflow-x:clip}