/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  --blue:#3B82F6; --teal:#14B8A6; --violet:#8B5CF6;
  --success:#22C55E; --warning:#F59E0B; --danger:#EF4444;
  --radius-lg:22px; --radius-md:14px; --radius-sm:10px;
  --font-display:'Sora',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{
  --bg:#0B1220; --bg-soft:#0F172A; --surface:#1E293B;
  --glass:rgba(30,41,59,.55); --glass-strong:rgba(30,41,59,.78);
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --text:#F1F5F9; --text-muted:#94A3B8; --text-faint:#64748B;
  --track:rgba(255,255,255,.07);
  --shadow:0 24px 70px -24px rgba(0,0,0,.65);
  --orb1:rgba(59,130,246,.22); --orb2:rgba(139,92,246,.18);
}
[data-theme="light"]{
  --bg:#EEF2F7; --bg-soft:#F8FAFC; --surface:#FFFFFF;
  --glass:rgba(255,255,255,.68); --glass-strong:rgba(255,255,255,.85);
  --border:rgba(15,23,42,.07); --border-strong:rgba(15,23,42,.12);
  --text:#0F172A; --text-muted:#5B6B85; --text-faint:#94A3B8;
  --track:rgba(15,23,42,.06);
  --shadow:0 24px 70px -28px rgba(15,23,42,.25);
  --orb1:rgba(59,130,246,.16); --orb2:rgba(20,184,166,.14);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
  min-height:100vh;
  overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-.01em;}
.mono{font-family:var(--font-mono);}
:focus-visible{outline:2px solid var(--blue); outline-offset:3px; border-radius:6px;}
button{font-family:inherit; cursor:pointer; border:none;}
input,select{font-family:inherit;}
.hidden{display:none !important;}

/* Ambient background orbs */
.bg-orb{position:fixed; border-radius:50%; filter:blur(90px); z-index:-1; pointer-events:none; opacity:.9;}
.bg-orb--1{width:520px;height:520px; background:var(--orb1); top:-180px; left:-160px;}
.bg-orb--2{width:480px;height:480px; background:var(--orb2); bottom:-200px; right:-140px;}

/* ============================================================
   3. ANIMATIONS
   ============================================================ */
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
@keyframes slideUp{from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:translateY(0)}}
@keyframes spinSlow{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@keyframes pulseGlow{0%,100%{opacity:.45} 50%{opacity:.85}}

.fade-in{animation:fadeIn .9s var(--ease) both;}
.slide-up{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.slide-up.visible{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ============================================================
   4. LAYOUT
   ============================================================ */
.container{max-width:1280px; margin:0 auto; padding:0 24px 80px;}

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; backdrop-filter:blur(18px) saturate(160%);
  background:var(--glass); border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.05rem;}
.brand i{color:var(--teal);}
.topbar-right{display:flex; align-items:center; gap:14px;}
.clock{font-family:var(--font-mono); font-size:.85rem; color:var(--text-muted); display:none;}
@media(min-width:560px){.clock{display:inline;}}

.icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); font-size:1rem; transition:transform .25s var(--ease), background .25s;
}
.icon-btn:hover{transform:translateY(-2px) rotate(8deg); background:var(--glass-strong);}

/* ============================================================
   5. GLASS CARD
   ============================================================ */
.glass{
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--shadow);
  padding:28px;
}
.card-title{font-size:1.05rem; font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:10px;}
.card-title i{color:var(--teal); font-size:.95rem;}

/* ============================================================
   6. HERO / INPUT CARD
   ============================================================ */
.input-card{margin:32px 0; text-align:center; max-width:760px; margin-left:auto; margin-right:auto;}
.input-card h1{font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; margin-bottom:10px;
  background:linear-gradient(135deg,var(--text) 30%, var(--teal) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.subtitle{color:var(--text-muted); font-size:.98rem; margin-bottom:28px;}

.input-row{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; justify-content:center;}
.field{display:flex; flex-direction:column; gap:8px; text-align:left;}
.field label{font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}
.field--currency select{min-width:170px;}

.input-with-prefix{
  display:flex; align-items:center; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.input-with-prefix:focus-within{border-color:var(--blue); box-shadow:0 0 0 4px rgba(59,130,246,.15);}
.currency-prefix{padding:0 14px; font-family:var(--font-mono); font-weight:600; color:var(--teal); font-size:1.1rem;}
#incomeInput{
  border:none; background:transparent; color:var(--text); font-family:var(--font-mono);
  font-size:1.25rem; font-weight:600; padding:14px 16px 14px 0; width:160px; outline:none;
}
#incomeInput::placeholder{color:var(--text-faint);}

select{
  padding:14px 16px; background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-md); font-size:.95rem; font-weight:500; outline:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
  transition:border-color .2s, box-shadow .2s;
}
select:focus{border-color:var(--blue); box-shadow:0 0 0 4px rgba(59,130,246,.15);}

/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:14px 22px; border-radius:var(--radius-md); font-size:.92rem; font-weight:600;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, opacity .2s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn--primary{background:linear-gradient(135deg,var(--blue),var(--violet)); color:#fff; box-shadow:0 12px 30px -10px rgba(59,130,246,.55);}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 16px 36px -10px rgba(59,130,246,.65);}
.btn--secondary{background:var(--surface); color:var(--text); border:1px solid var(--border);}
.btn--secondary:hover{transform:translateY(-2px); border-color:var(--border-strong);}
.btn--ghost{background:transparent; color:var(--teal); border:1px solid var(--teal);}
.btn--ghost:hover{background:rgba(20,184,166,.1);}
.btn--danger{background:rgba(239,68,68,.12); color:var(--danger); border:1px solid rgba(239,68,68,.3);}
.btn--danger:hover{background:rgba(239,68,68,.2);}
.btn--sm{padding:9px 14px; font-size:.82rem;}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none !important;}

/* ============================================================
   8. RESTORE BANNER
   ============================================================ */
.restore-banner{
  margin-top:18px; display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:.86rem; color:var(--text-muted); flex-wrap:wrap;
}

/* ============================================================
   9. RESULTS LAYOUT
   ============================================================ */
.results{display:flex; flex-direction:column; gap:24px;}

.hero-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media(min-width:880px){.hero-grid{grid-template-columns:340px 1fr;}}

/* ---- Gauge ---- */
.gauge-card{display:flex; flex-direction:column; align-items:center;}
.gauge-wrap{position:relative; width:100%; max-width:280px;}
.gauge-svg{width:100%; display:block; overflow:visible;}
.gauge-track{fill:none; stroke:var(--track); stroke-width:14; stroke-linecap:round;}
.gauge-progress{
  fill:none; stroke:url(#gaugeGradient); stroke-width:14; stroke-linecap:round;
  transition:stroke-dashoffset 1.6s var(--ease);
}
.gauge-readout{
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px;
}
.gauge-score{font-family:var(--font-mono); font-size:2.6rem; font-weight:700; line-height:1;}
.gauge-max{font-family:var(--font-mono); color:var(--text-muted); font-size:1rem;}
.status-badge{
  margin-top:4px; padding:5px 14px; border-radius:999px; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
}
.status-badge--success{background:rgba(34,197,94,.15); color:var(--success);}
.status-badge--teal{background:rgba(20,184,166,.15); color:var(--teal);}
.status-badge--warning{background:rgba(245,158,11,.15); color:var(--warning);}
.status-badge--danger{background:rgba(239,68,68,.15); color:var(--danger);}

/* ---- Stats ---- */
.stats-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
.stat-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px; transition:transform .25s var(--ease), border-color .25s;
}
.stat-tile:hover{transform:translateY(-3px); border-color:var(--border-strong);}
.stat-tile i{color:var(--blue); font-size:1rem; margin-bottom:8px; display:block;}
.stat-tile .stat-value{font-family:var(--font-mono); font-weight:700; font-size:1.28rem;}
.stat-tile.warn .stat-value{color:var(--danger);}
.stat-tile .stat-label{font-size:.76rem; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.05em;}

/* ============================================================
   10. RECOMMENDATIONS
   ============================================================ */
.rec-list{display:flex; flex-direction:column; gap:10px;}
.rec-item{
  display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius-md);
  border-left:4px solid var(--text-faint); background:var(--surface); font-size:.9rem;
  animation:fadeIn .6s var(--ease) both;
}
.rec-item i{margin-top:2px; font-size:1rem;}
.rec--success{border-left-color:var(--success);} .rec--success i{color:var(--success);}
.rec--warning{border-left-color:var(--warning);} .rec--warning i{color:var(--warning);}
.rec--danger{border-left-color:var(--danger);} .rec--danger i{color:var(--danger);}
.rec--info{border-left-color:var(--violet);} .rec--info i{color:var(--violet);}

/* ============================================================
   11. BREAKDOWN / CATEGORY GRID
   ============================================================ */
.breakdown-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-bottom:18px;}
.breakdown-header .card-title{margin-bottom:0;}
.breakdown-tools{display:flex; gap:10px; flex-wrap:wrap;}
.search-field{
  display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:0 14px;
}
.search-field i{color:var(--text-faint); font-size:.85rem;}
#categorySearch{border:none; background:transparent; color:var(--text); padding:11px 0; outline:none; font-size:.88rem; width:170px;}

.add-category-form{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px;
}
.add-category-form input, .add-category-form select{padding:10px 14px; font-size:.85rem; border-radius:var(--radius-sm);}
#newCatName{flex:1 1 180px;}
.new-cat-amount-wrap{
  display:flex; align-items:center; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden; transition:border-color .2s, box-shadow .2s; flex:0 0 auto;
}
.new-cat-amount-wrap:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.15);}
.new-cat-symbol{padding:0 10px; font-family:var(--font-mono); font-weight:600; color:var(--teal); font-size:.95rem; white-space:nowrap;}
#newCatAmount{border:none; background:transparent; color:var(--text); font-family:var(--font-mono); font-size:.95rem; font-weight:600; padding:10px 10px 10px 0; width:100px; outline:none;}
#newCatAmount::placeholder{color:var(--text-faint);}
#newCatFreq{min-width:120px;}
.cat-freq-badge{font-size:.68rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; margin-top:2px;}
.new-cat-icon-wrap{display:flex; align-items:center; gap:8px;}
.new-cat-icon-preview{
  width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--violet)); color:#fff; font-size:.95rem; flex-shrink:0;
}

.category-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:16px;}
.cat-card{
  position:relative; display:flex; gap:14px; padding:18px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border);
  transition:transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.cat-card:hover{transform:translateY(-4px); border-color:var(--border-strong); box-shadow:0 16px 40px -22px rgba(0,0,0,.5);}
.cat-icon{
  width:46px; height:46px; min-width:46px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#fff; background:var(--accent,var(--blue));
  box-shadow:0 8px 20px -8px var(--accent,var(--blue));
}
.cat-info{flex:1; min-width:0;}
.cat-name{font-weight:600; font-size:.92rem; margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cat-meta{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:8px;}
.cat-amount{font-family:var(--font-mono); font-weight:700; font-size:1.05rem;}
.cat-pct{font-family:var(--font-mono); font-size:.8rem; color:var(--text-muted);}
.progress-track{height:7px; background:var(--track); border-radius:99px; overflow:hidden; margin-bottom:10px;}
.progress-fill{height:100%; width:0%; border-radius:99px; transition:width 1.3s var(--ease); background:var(--accent,var(--blue));}
.cat-status{display:inline-block; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em;}
.status--success{color:var(--success); background:rgba(34,197,94,.13);}
.status--warning{color:var(--warning); background:rgba(245,158,11,.13);}
.status--danger{color:var(--danger); background:rgba(239,68,68,.13);}
.status--info{color:var(--violet); background:rgba(139,92,246,.13);}
.cat-remove{
  position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
  background:var(--track); color:var(--text-muted); display:flex; align-items:center; justify-content:center;
  font-size:.7rem; transition:background .2s, color .2s;
}
.cat-remove:hover{background:rgba(239,68,68,.18); color:var(--danger);}
.cat-edit{
  position:absolute; top:10px; right:42px; width:26px; height:26px; border-radius:50%;
  background:var(--track); color:var(--text-muted); display:flex; align-items:center; justify-content:center;
  font-size:.7rem; transition:background .2s, color .2s;
}
.cat-edit:hover{background:rgba(59,130,246,.18); color:var(--blue);}

/* Days-per-month field inside add form */
.new-cat-days-wrap{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:6px 12px;}
.days-label{font-size:.78rem; font-weight:600; color:var(--text-muted); white-space:nowrap;}
#newCatDays{border:none; background:transparent; color:var(--text); font-family:var(--font-mono); font-weight:700; font-size:.95rem; width:48px; outline:none; text-align:center;}

/* ============================================================
   EDIT MODAL
   ============================================================ */
.modal-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .22s var(--ease);
}
.modal-overlay.hidden{display:none;}
.modal-box{
  width:100%; max-width:440px; border-radius:var(--radius-lg);
  padding:0; overflow:hidden; display:flex; flex-direction:column;
  animation:slideUp .3s var(--ease);
}
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 16px; border-bottom:1px solid var(--border);
}
.modal-title{font-size:1rem; font-weight:700; display:flex; align-items:center; gap:10px;}
.modal-title i{color:var(--blue);}
.modal-body{padding:20px 24px; display:flex; flex-direction:column; gap:16px;}
.modal-footer{padding:16px 24px 20px; display:flex; gap:10px; border-top:1px solid var(--border);}
.modal-field{display:flex; flex-direction:column; gap:7px;}
.modal-field label{font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); display:flex; align-items:center; gap:6px;}
.modal-field input, .modal-field select{
  padding:11px 14px; background:var(--surface); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm); font-size:.92rem; outline:none; font-family:inherit;
  transition:border-color .2s, box-shadow .2s;
}
.modal-field input:focus, .modal-field select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.15);}
.modal-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px;
}
.edit-amount-wrap{
  display:flex; align-items:center; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); overflow:hidden; transition:border-color .2s, box-shadow .2s;
}
.edit-amount-wrap:focus-within{border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.15);}
.edit-amount-symbol{padding:0 12px; font-family:var(--font-mono); font-weight:700; color:var(--teal); font-size:1rem;}
#editCatAmount{border:none; background:transparent; color:var(--text); font-family:var(--font-mono); font-size:1rem; font-weight:600; padding:11px 12px 11px 0; flex:1; outline:none;}
.modal-hint{font-size:.8rem; color:var(--text-faint); line-height:1.5; margin-top:2px;}
.modal-hint strong{color:var(--text-muted);}
.modal-hint i{color:var(--blue);}

/* ── Surplus / Deficit Banner ──────────────────────────────────────── */
.surplus-banner{
  border-radius:var(--radius-md); padding:14px 20px;
  border:1px solid var(--border);
  backdrop-filter:blur(14px); transition:background .4s, border-color .4s;
}
.surplus-banner--ok{
  background:rgba(20,184,166,.10); border-color:rgba(20,184,166,.28);
}
.surplus-banner--good{
  background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.28);
}
.surplus-banner--warn{
  background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.28);
}
.surplus-banner--danger{
  background:rgba(239,68,68,.10); border-color:rgba(239,68,68,.28);
}
.surplus-banner__inner{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.surplus-banner__inner > i{
  font-size:1.4rem; flex-shrink:0;
}
.surplus-banner--ok    > .surplus-banner__inner > i { color:var(--teal); }
.surplus-banner--good  > .surplus-banner__inner > i { color:var(--success); }
.surplus-banner--warn  > .surplus-banner__inner > i { color:var(--warning); }
.surplus-banner--danger> .surplus-banner__inner > i { color:var(--danger); }
.surplus-banner__text{
  display:flex; flex-direction:column; gap:1px;
}
#surplusLabel{
  font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
}
.surplus-banner--ok    #surplusLabel { color:var(--teal); }
.surplus-banner--good  #surplusLabel { color:var(--success); }
.surplus-banner--warn  #surplusLabel { color:var(--warning); }
.surplus-banner--danger#surplusLabel { color:var(--danger); }
.surplus-banner__amount{
  font-size:1.15rem; font-weight:700; color:var(--text);
}
.surplus-banner__axes{
  margin-left:auto; display:flex; gap:18px; flex-wrap:wrap;
}
.axis-pill{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:.72rem; color:var(--text-muted);
}
.axis-pill__bar{
  width:56px; height:6px; border-radius:99px; background:var(--track); overflow:hidden;
}
.axis-pill__fill{
  height:100%; border-radius:99px; transition:width 1.2s var(--ease);
}
.axis-pill__score{ font-family:var(--font-mono); font-weight:700; font-size:.75rem; color:var(--text); }

/* Gauge axis breakdown rows */
.gauge-axes{ width:100%; max-width:280px; margin:14px auto 0; display:flex; flex-direction:column; gap:8px; }
.gauge-axis-row{ display:grid; grid-template-columns:80px 1fr 48px; align-items:center; gap:8px; }
.gauge-axis-label{ font-size:.72rem; color:var(--text-muted); font-weight:600; }
.gauge-axis-track{ height:6px; background:var(--track); border-radius:99px; overflow:hidden; }
.gauge-axis-fill{ height:100%; border-radius:99px; width:0%; }
.gauge-axis-score{ font-family:var(--font-mono); font-size:.75rem; font-weight:700; text-align:right; }
.gauge-axis-max{ color:var(--text-faint); font-size:.68rem; }

/* ── Fix / Variable toggle ─────────────────────────────────────────────── */
.new-cat-cost-type{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:7px 12px;
}
.cost-type-label{ font-size:.78rem; font-weight:600; color:var(--text-muted); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.cost-type-toggle{ position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.cost-type-toggle input{ opacity:0; width:0; height:0; }
.cost-type-slider{
  position:absolute; inset:0; border-radius:99px;
  background:var(--blue); cursor:pointer;
  transition:background .25s;
}
.cost-type-slider::before{
  content:''; position:absolute; width:14px; height:14px; border-radius:50%;
  left:3px; top:3px; background:#fff;
  transition:transform .25s var(--ease);
}
.cost-type-toggle input:checked + .cost-type-slider{ background:var(--teal); }
.cost-type-toggle input:checked + .cost-type-slider::before{ transform:translateX(16px); }
.edit-cost-type-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cost-type-hint{ font-size:.75rem; color:var(--text-faint); margin-left:4px; }

/* Remove-all button row */
.remove-all-wrap{display:flex; justify-content:center; margin-top:20px;}
.remove-all-btn{opacity:.7; transition:opacity .2s, transform .22s var(--ease), box-shadow .22s;}
.remove-all-btn:hover{opacity:1;}

/* Confirm dialog */
.confirm-box{
  max-width:400px; text-align:center; padding:36px 32px 28px;
  animation:slideUp .28s var(--ease);
}
.confirm-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 18px;
  background:rgba(239,68,68,.12); display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; color:var(--danger);
}
.confirm-title{font-size:1.1rem; font-weight:700; margin-bottom:10px;}
.confirm-msg{font-size:.9rem; color:var(--text-muted); line-height:1.6; margin-bottom:24px;}
.confirm-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.confirm-actions .btn{flex:1 1 130px;}

/* ============================================================
   12. CHARTS
   ============================================================ */
.charts-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media(min-width:880px){.charts-grid{grid-template-columns:1fr 1fr;}}
.chart-card h3{font-size:.95rem; font-weight:700; margin-bottom:16px;}
.chart-card{position:relative; height:340px; display:flex; flex-direction:column;}
.chart-card canvas{flex:1; width:100% !important; height:100% !important;}

/* ============================================================
   13. SUMMARY & ACTIONS
   ============================================================ */
.summary-card p{font-size:.96rem; color:var(--text-muted); line-height:1.8;}
.summary-card strong{color:var(--text); font-family:var(--font-mono); font-weight:700;}

.actions-bar{display:flex; gap:12px; flex-wrap:wrap; justify-content:center;}
.actions-bar .btn{flex:1 1 auto; min-width:150px;}

/* ============================================================
   14. FOOTER
   ============================================================ */
.footer{text-align:center; padding:30px 24px 50px; color:var(--text-faint); font-size:.8rem;}

/* ============================================================
   15. TOAST
   ============================================================ */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:13px 22px; border-radius:var(--radius-md); box-shadow:var(--shadow);
  font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:10px;
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease); z-index:200;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast i{color:var(--success);}

/* ============================================================
   16. PRINT STYLES
   ============================================================ */
@media print{
  .topbar, .icon-btn, .input-card, .actions-bar, .breakdown-tools, .cat-remove, .toast, .bg-orb{display:none !important;}
  body{background:#fff !important; color:#0F172A !important;}
  .glass{background:#fff !important; box-shadow:none !important; border:1px solid #E2E8F0 !important; backdrop-filter:none !important;}
  .cat-card, .stat-tile, .rec-item{background:#F8FAFC !important; border:1px solid #E2E8F0 !important;}
  .container{padding:0 12px;}
  .charts-grid{grid-template-columns:1fr 1fr;}
}