/* STEP 2 ALIVE — Lively budget experience */

:root {
  --cat-salary:#0fb9a8;--cat-freelance:#6366f1;--cat-rental:#f59e0b;
  --cat-rental_inv:#d97706;--cat-investments:#3b82f6;--cat-allowances:#ec4899;
  --cat-parents:#8b5cf6;--cat-scholarship:#14b8a6;--cat-other-inc:#64748b;
}

@keyframes s2-slideIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes s2-popIn{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.04)}100%{transform:scale(1);opacity:1}}
@keyframes s2-totalPulse{0%{transform:scale(1)}40%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes s2-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes s2-chipBounce{0%{transform:translateY(0)}40%{transform:translateY(-4px)}100%{transform:translateY(0)}}
@keyframes s2-countUp{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* -- Chips -- */
.income-chips-row{gap:.5rem .45rem;margin-bottom:.75rem;padding:.25rem 0}
.income-chip{position:relative;padding:.5rem 1.1rem;border-radius:var(--radius-full);border:1.5px solid rgba(15,185,168,.3);background:rgba(15,185,168,.04);color:var(--brand-teal);font-size:.88rem;font-weight:700;cursor:pointer;transition:all .22s cubic-bezier(.34,1.56,.64,1);user-select:none;overflow:hidden}
.income-chip::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg,rgba(15,185,168,.15),rgba(15,185,168,0));opacity:0;transition:opacity .2s}
.income-chip:hover{border-color:var(--brand-accent);background:rgba(15,185,168,.1);transform:translateY(-3px) scale(1.03);box-shadow:0 6px 20px rgba(15,185,168,.2)}
.income-chip:hover::before{opacity:1}
.income-chip:active{transform:translateY(-1px) scale(.97);transition-duration:.08s}
.income-chip--add-other{border-style:dashed;border-color:rgba(15,185,168,.3);background:transparent;font-weight:600}
.income-chip--add-other:hover{border-style:solid}

/* -- Income Blocks: compact, color-coded -- */
#income-selected-area{gap:.5rem;margin-top:.5rem}
.income-selected-block{position:relative;padding:.75rem 1rem .65rem;border-radius:16px;border:1.5px solid rgba(15,185,168,.18);border-inline-start:4px solid var(--_cat-color,var(--brand-accent));background:linear-gradient(135deg,rgba(15,185,168,.03),rgba(255,255,255,.8));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:s2-slideIn .3s cubic-bezier(.34,1.56,.64,1);transition:border-color .2s,box-shadow .2s,transform .15s;overflow:visible}
.income-selected-block:hover{border-color:rgba(15,185,168,.35);box-shadow:0 4px 16px rgba(15,185,168,.1)}
.income-selected-block[data-cat="salary"]{--_cat-color:var(--cat-salary)}
.income-selected-block[data-cat="freelance"]{--_cat-color:var(--cat-freelance)}
.income-selected-block[data-cat="rental"]{--_cat-color:var(--cat-rental)}
.income-selected-block[data-cat="rental_inv"]{--_cat-color:var(--cat-rental_inv)}
.income-selected-block[data-cat="investments"]{--_cat-color:var(--cat-investments)}
.income-selected-block[data-cat="allowances"]{--_cat-color:var(--cat-allowances)}
.income-selected-block[data-cat="parents"]{--_cat-color:var(--cat-parents)}
.income-selected-block[data-cat="scholarship"]{--_cat-color:var(--cat-scholarship)}

/* -- ISB Header -- */
.isb-header{gap:.5rem;margin-bottom:.4rem;min-height:32px}
.isb-label{font-size:.9rem;font-weight:700;color:var(--_cat-color,var(--brand-teal));letter-spacing:-.01em}
.isb-amount{font-family:var(--font-heading);font-size:1.1rem;font-weight:800;color:var(--text-primary);min-width:5rem;text-align:start;transition:transform .15s cubic-bezier(.34,1.56,.64,1),color .2s}
.isb-amount.s2-bump{animation:s2-totalPulse .35s cubic-bezier(.34,1.56,.64,1);color:var(--brand-accent)}
.isb-remove{padding:.2rem .55rem;border-radius:8px;border:1px solid rgba(100,116,139,.2);background:rgba(100,116,139,.06);color:rgba(100,116,139,.7);font-size:.72rem;font-weight:700;cursor:pointer;transition:all .15s ease}
.isb-remove:hover{background:rgba(239,68,68,.08);color:#ef4444;border-color:rgba(239,68,68,.3);transform:scale(1.05)}
.isb-delete{opacity:.4;transition:opacity .15s,transform .15s}
.isb-delete:hover{opacity:1;transform:scale(1.15)}

/* -- Slider compact -- */
.income-selected-block .slider-track-wrap{gap:.6rem}
.income-selected-block .slider-number-input{width:5rem;padding:.4rem;border-radius:10px;font-size:.95rem;font-weight:700;background:rgba(15,185,168,.04);border-color:rgba(15,185,168,.15);transition:all .2s ease}
.income-selected-block .slider-number-input:focus{background:#fff;border-color:var(--_cat-color,var(--brand-accent));box-shadow:0 0 0 3px rgba(15,185,168,.12);transform:scale(1.02)}
.income-timing-row{margin-top:.2rem!important}
.income-timing-toggle{font-size:.72rem!important;opacity:.6;transition:opacity .15s!important}
.income-timing-toggle:hover{opacity:1}
.income-rental-hint{font-size:.75rem;padding:.25rem .5rem;margin-bottom:.25rem;border-radius:6px;background:rgba(245,158,11,.06);color:#92400e;border:1px solid rgba(245,158,11,.15)}

/* -- Wizard Total -- */
.wizard-total{position:relative;margin-top:1rem;padding:.7rem 1rem;border-radius:14px;background:linear-gradient(135deg,rgba(15,185,168,.08),rgba(15,185,168,.04));border:1.5px solid rgba(15,185,168,.25);overflow:hidden;animation:s2-popIn .3s cubic-bezier(.34,1.56,.64,1)}
.wizard-total::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(15,185,168,.06),transparent);background-size:200% 100%;animation:s2-shimmer 3s ease-in-out infinite;pointer-events:none}
.wizard-total .dynamic-section-total{font-family:var(--font-heading);font-size:1.15rem;font-weight:900;color:var(--brand-teal);transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.wizard-total .dynamic-section-total.s2-counting{animation:s2-countUp .25s ease}
.income-combined-total{margin-top:1.2rem;padding:.85rem 1.2rem;border-width:2px;background:linear-gradient(135deg,rgba(15,185,168,.14),rgba(15,185,168,.06))}
.income-combined-total .dynamic-section-total{font-size:1.3rem}

/* -- Surplus Bar -- */
.planner-surplus-bar{position:relative;margin-top:1.25rem;padding:1rem 1.25rem;border-radius:16px;background:linear-gradient(135deg,rgba(244,247,249,.95),rgba(255,255,255,.9));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1.5px solid rgba(15,185,168,.15);box-shadow:0 2px 12px rgba(7,30,54,.04);transition:border-color .3s,box-shadow .3s}
.planner-surplus-bar:has(.surplus-positive){border-color:rgba(15,185,168,.25)}
.planner-surplus-bar:has(.surplus-negative){border-color:rgba(239,68,68,.2);background:linear-gradient(135deg,rgba(254,242,242,.9),rgba(255,255,255,.9))}
.surplus-bar-value{font-family:var(--font-heading);font-size:1.4rem!important;font-weight:900!important;transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .3s}
.surplus-bar-value.s2-bump{animation:s2-totalPulse .4s cubic-bezier(.34,1.56,.64,1)}
.surplus-track{height:6px;border-radius:var(--radius-full);background:rgba(7,30,54,.06);overflow:hidden}
.surplus-fill{height:100%;border-radius:var(--radius-full);transition:width .6s cubic-bezier(.22,1,.36,1)}
.surplus-fill--positive{background:linear-gradient(90deg,#0fb9a8,#14d4c2,#0fb9a8);background-size:200% 100%;animation:s2-shimmer 2.5s ease-in-out infinite}
.surplus-fill--negative{background:linear-gradient(90deg,#ef4444,#f87171)}

/* -- Sub-Progress Nav -- */
.step2-sub-progress{margin:0 auto 1.5rem;gap:.35rem;padding:.35rem .75rem;background:rgba(15,185,168,.04);border-radius:var(--radius-full);border:1px solid rgba(15,185,168,.1);width:fit-content}
.step2-sub-dot{font-size:.82rem;font-weight:600;padding:.3rem .75rem;border-radius:var(--radius-full);cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1)}
.step2-sub-dot:hover:not(.step2-sub-dot--active){background:rgba(15,185,168,.06);color:var(--text-primary)}
.step2-sub-dot--active{color:#fff;font-weight:700;background:linear-gradient(135deg,var(--brand-teal),var(--brand-accent));box-shadow:0 2px 8px rgba(15,185,168,.3)}
.step2-sub-dot--done{color:var(--brand-teal);position:relative}
.step2-sub-dot--done::after{content:" \2713";font-size:.7rem}
.step2-sub-sep{color:rgba(15,185,168,.3);font-size:.7rem}

/* -- Wizard Q -- */
.income-wizard .wizard-q,.expense-wizard .wizard-q{font-size:1.05rem;font-weight:700;color:var(--text-primary);margin-bottom:.75rem;line-height:1.5}
.wizard-q-hint{display:inline;font-size:.82rem;font-weight:500;color:var(--text-muted);margin-inline-start:.25rem}

/* -- Expense Grid -- */
.expense-cat-btn{position:relative;transition:all .22s cubic-bezier(.34,1.56,.64,1)!important;overflow:hidden}
.expense-cat-btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(15,185,168,.12),transparent 70%);opacity:0;transition:opacity .2s}
.expense-cat-btn:hover{transform:translateY(-3px) scale(1.03)!important;box-shadow:0 8px 24px rgba(0,0,0,.08)!important}
.expense-cat-btn:hover::after{opacity:1}
.expense-cat-btn:active{transform:translateY(0) scale(.97)!important;transition-duration:.08s!important}
.expense-cat-btn.active{border-color:var(--brand-accent)!important;background:linear-gradient(135deg,rgba(15,185,168,.1),rgba(15,185,168,.04))!important;box-shadow:0 0 0 2px rgba(15,185,168,.12),0 4px 12px rgba(15,185,168,.1)!important}
.expense-cat-btn.active .cat-ico{animation:s2-chipBounce .4s cubic-bezier(.34,1.56,.64,1)}

/* -- Investment Chips -- */
.investment-chip{transition:all .22s cubic-bezier(.34,1.56,.64,1)!important}
.investment-chip:hover{transform:translateY(-2px) scale(1.02)!important;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.investment-chip:active{transform:translateY(0) scale(.97)!important;transition-duration:.08s!important}
.investment-chip.active{animation:s2-popIn .3s cubic-bezier(.34,1.56,.64,1)}
.investment-chip.active .chip-icon{animation:s2-chipBounce .4s cubic-bezier(.34,1.56,.64,1)}

/* -- Investment Total -- */
.investment-total{border-radius:14px;background:linear-gradient(135deg,rgba(15,185,168,.08),rgba(15,185,168,.03));border:1.5px solid rgba(15,185,168,.2);position:relative;overflow:hidden}
.investment-total::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(15,185,168,.04),transparent);background-size:200% 100%;animation:s2-shimmer 3s ease-in-out infinite;pointer-events:none}
.investment-total-value{font-family:var(--font-heading)!important;font-size:1.1rem!important;font-weight:900!important}

/* -- Misc polish -- */
.planner-micro-insight{border-radius:12px;animation:s2-slideIn .3s ease!important}
.income-breakdown{padding:.4rem .75rem;border-radius:10px;background:rgba(15,185,168,.04);margin-top:.35rem}
.income-selected-block:focus-within{border-color:rgba(15,185,168,.35);box-shadow:0 0 0 3px rgba(15,185,168,.06)}
.income-selected-block:focus-within .slider-input::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(15,185,168,.14),0 4px 14px rgba(15,185,168,.4)}
.partner-toggle-btn{transition:all .25s cubic-bezier(.34,1.56,.64,1)!important}
.partner-toggle-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 4px 16px rgba(15,185,168,.15)}
.partner-section{animation:s2-slideIn .35s cubic-bezier(.22,1,.36,1)!important}
.osh-remainder{border-radius:14px;position:relative;overflow:hidden}
.osh-remainder-value{font-family:var(--font-heading);font-weight:900}

/* Stagger */
.income-selected-block:nth-child(1){animation-delay:0s}
.income-selected-block:nth-child(2){animation-delay:.05s}
.income-selected-block:nth-child(3){animation-delay:.1s}
.income-selected-block:nth-child(4){animation-delay:.15s}
.income-selected-block:nth-child(5){animation-delay:.2s}
.income-selected-block:nth-child(6){animation-delay:.25s}

/* -- Titles -- */
#step2-phase-income .calc-title,#step2-phase-expenses .calc-title{font-size:clamp(1.15rem,2.5vw,1.4rem);letter-spacing:-.01em}
#step2-phase-income .calc-title .section-icon,#step2-phase-expenses .calc-title .section-icon{font-size:1.3rem}
#step2-phase-income .calc-desc,#step2-phase-expenses .calc-desc{font-size:.88rem;color:var(--text-muted);margin-bottom:1.25rem}

/* -- Buttons -- */
#step2-phase-income .calc-btn,#step2-phase-expenses .calc-btn{transition:all .22s cubic-bezier(.34,1.56,.64,1)}
#step2-phase-income .calc-btn:hover,#step2-phase-expenses .calc-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1)}
#step2-phase-income .calc-btn:active,#step2-phase-expenses .calc-btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}

/* -- Confirm -- */
.estimate-confirm{border-radius:14px;animation:s2-slideIn .35s ease}
.estimate-yes,.estimate-no{transition:all .2s cubic-bezier(.34,1.56,.64,1)}
.estimate-yes:hover,.estimate-no:hover{transform:translateY(-2px) scale(1.03)}
.inv-allocation-split{border-radius:14px;animation:s2-slideIn .3s ease}

/* -- Mobile -- */
@media(max-width:480px){
  .income-selected-block{padding:.6rem .75rem .5rem;border-radius:12px}
  .isb-amount{font-size:1rem;min-width:4rem}
  .isb-label{font-size:.82rem}
  .income-selected-block .slider-number-input{width:4.2rem;padding:.35rem .3rem;font-size:.88rem}
  .surplus-bar-value{font-size:1.2rem!important}
  .step2-sub-progress{padding:.3rem .5rem}
  .step2-sub-dot{font-size:.76rem;padding:.25rem .6rem}
}