:root{
  --bg:#0b0f14;
  --surface:#111827;
  --surface-2:#0f1520;
  --border:#1f2937;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --pink:#ff2ea3;
  --blue:#2ea3ff;
  --accent: linear-gradient(90deg, var(--pink), var(--blue));
  --radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body.theme-dark{
  margin:0;
  background: radial-gradient(1200px 1200px at -20% -20%, rgba(255,46,163,0.08), transparent 60%),
              radial-gradient(1200px 1200px at 120% 120%, rgba(46,163,255,0.08), transparent 60%),
              var(--bg);
  color:var(--text);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial;
}

.container{max-width:980px;margin:0 auto;padding:24px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) no-repeat,
              var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 16px 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}

.hero.card{padding:32px}
.title{margin:0 0 6px;font-size:28px;font-weight:800}
.subtitle{margin:0;color:var(--muted)}
.actions{margin-top:14px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text);text-decoration:none;cursor:pointer;transition:all .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{border:0;background:var(--accent);color:#0b0f14;font-weight:700}
.btn-ghost{background:transparent}

.label{display:block;margin:0 0 6px;color:var(--muted)}
.input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);outline:none}
.input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(46,163,255,0.25)}

.grid{display:grid;grid-template-columns: 1fr 320px;gap:16px}
@media (max-width: 780px){.grid{grid-template-columns:1fr}}

.summary-box{border:1px solid var(--border);border-radius:12px;padding:12px;background:rgba(255,255,255,0.02)}
.summary-row{display:flex;align-items:center;justify-content:space-between}
.muted{color:var(--muted)}
.positive{color:#22c55e}
.negative{color:#f43f5e}

.section-title{margin:0 0 10px;font-weight:800;font-size:18px}

.table-wrap{overflow:auto}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border)}
.table thead th{font-weight:700;color:#cbd5e1;text-align:left;background:rgba(255,255,255,0.02)}
.table tbody tr:hover{background:rgba(255,255,255,0.02)}
.right{text-align:right}

.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);color:var(--text);background:transparent;cursor:pointer}
.chip-danger{border-color:#fecaca;color:#fecaca}
.chip-ghost{opacity:.8}

/* Row highlight when clicking charts */
.table tbody tr.row-pulse{
  animation: rowPulse 1.2s ease;
  background: rgba(46,163,255,0.08);
}
@keyframes rowPulse{
  0%{ box-shadow: inset 0 0 0 0 rgba(46,163,255,0.0); }
  50%{ box-shadow: inset 0 0 0 2px rgba(46,163,255,0.6); }
  100%{ box-shadow: inset 0 0 0 0 rgba(46,163,255,0.0); }
}

/* Layout with right sidebar */
.layout{ display:grid; grid-template-columns: 1fr 340px; gap:16px; align-items:start; }
@media (max-width: 980px){ .layout{ grid-template-columns:1fr } }
.main-col{ min-width:0 }
.sidebar-col{ min-width:0 }

/* Breakdown split (summary left, chart right) */
.split{ display:grid; grid-template-columns: 1fr 1.4fr; gap:12px }
@media (max-width: 420px){ .split{ grid-template-columns: 1fr } }
.breakdown-summary{ display:flex; flex-direction:column; gap:10px }
.stat{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,0.02); color:var(--text) }
.stat .stat-right{ display:flex; gap:8px; align-items:baseline }
.stat-interactive{ cursor:pointer; transition:all .15s ease }
.stat-interactive:hover{ background:rgba(255,255,255,0.04) }
.stat-interactive.active{ box-shadow: 0 0 0 2px rgba(46,163,255,0.35) inset }
.breakdown-card .chart-area{ min-width:0 }

/* Breakdown top rows (stacked) */
.breakdown-top{ display:grid; grid-template-columns: 1fr; gap:10px; margin-bottom:10px }
@media (max-width: 420px){ .breakdown-top{ grid-template-columns: 1fr; } }

/* Percentage fills for Used/Left */
.stat{ position:relative; overflow:hidden }
.stat > *{ position:relative }
.stat-used::before, .stat-left::before{
  content:""; position:absolute; top:0; left:0; bottom:0; width:0; pointer-events:none; border-radius:inherit; opacity:.28; transition: width .2s ease;
}
.stat-used{ --used-pct: 0%; }
.stat-used::before{ width: var(--used-pct); background: linear-gradient(90deg, var(--pink), var(--blue)); }
.stat-left{ --left-pct: 0%; }
.stat-left::before{ width: var(--left-pct); background: #39ff14; opacity:.22 }

/* Budget selector row */
.budget-row{ display:grid; grid-template-columns: 1fr auto auto; gap:8px; align-items:center }
@media (max-width: 520px){ .budget-row{ grid-template-columns: 1fr; } }

/* Make expense rows feel interactive */
#expensesTable tbody tr{ cursor: pointer }

/* Allocation plan grid */
.alloc-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; margin-top:12px }
@media (min-width: 820px){ .alloc-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* Weekly calendar grid */
.calendar-grid{ display:grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap:8px }
.cal-header{ text-align:center; font-weight:700; color:#cbd5e1; padding:6px 0 }
.cal-spacer{ opacity:0 }
.cal-cell{ display:flex; flex-direction:column; gap:6px; min-height:84px; padding:8px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,0.02); color:var(--text); cursor:pointer; text-align:left; transition: background .15s ease, box-shadow .15s ease }
.cal-cell:hover{ background:rgba(255,255,255,0.04) }
.cal-cell .cal-date{ font-weight:700 }
.cal-cell .cal-amt{ margin-top:auto; text-align:right; font-weight:800 }
.cal-cell.cal-override{ box-shadow: 0 0 0 2px rgba(46,163,255,0.35) inset }

/* Day edit modal */
.modal-overlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,0.45); z-index:1000 }
.modal-overlay.open{ display:flex }
.modal{ width:min(560px, 92vw); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:0 10px 32px rgba(0,0,0,0.5) }
.modal-title{ margin:0 0 8px; font-size:18px; font-weight:800 }
.modal-body{ margin-bottom:12px }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end }