* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background: #0f0f1a; color: #e0e0e0; min-height: 100vh; }

/* ---- Top Bar ---- */
.topbar { background: rgba(20,20,35,0.95); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(255,255,255,0.06); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.topbar .brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: #fff; }
.topbar .brand span { background: linear-gradient(135deg, #f6d365, #fda085); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.topbar .brand-logo { width: 250px; height: 250px; object-fit: contain; position: absolute; top: 50%; left: 24px; transform: translateY(-50%); pointer-events: none; z-index: 101; }
.topbar-actions { display: flex; gap: 8px; }
.topbar-btn { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); color: #ccc; padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.topbar-btn:hover { background: rgba(255,255,255,0.13); color: #fff; transform: translateY(-1px); }
.topbar-btn .badge { background: #4CAF50; color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 20px; min-width: 18px; text-align: center; }

/* ---- Slide Panel ---- */
.panel-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.panel-overlay.open { opacity: 1; pointer-events: all; }
.panel { position: fixed; top: 0; right: -520px; width: 500px; max-width: 92vw; height: 100vh; background: #1a1a2e; border-left: 1px solid rgba(255,255,255,0.08); z-index: 300; transition: right 0.35s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; padding: 28px; }
.panel.open { right: 0; }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.panel-header h2 { font-size: 20px; color: #fff; }
.panel-close { background: none; border: none; color: #888; font-size: 28px; cursor: pointer; padding: 0 4px; line-height: 1; }
.panel-close:hover { color: #fff; }

/* ---- Form elements ---- */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.form-input { width: 100%; padding: 10px 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #e0e0e0; font-size: 15px; transition: border 0.2s; }
.form-input:focus { outline: none; border-color: #667eea; }
.form-input option,
.form-input optgroup {
    background: #1a1a2e;
    color: #e0e0e0;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; padding: 11px 22px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s; width: 100%; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(102,126,234,0.4); }
.btn-danger { background: rgba(244,67,54,0.15); color: #f44336; border: 1px solid rgba(244,67,54,0.3); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.btn-danger:hover { background: rgba(244,67,54,0.3); }
.btn-add { background: rgba(76,175,80,0.15); color: #4CAF50; border: 1px solid rgba(76,175,80,0.3); padding: 10px 20px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; width: 100%; }
.btn-add:hover { background: rgba(76,175,80,0.3); }

/* ---- Slider ---- */
.slider-input { width: 100%; -webkit-appearance: none; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.12); outline: none; margin-top: 8px; }
.slider-input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); cursor: pointer; box-shadow: 0 2px 8px rgba(102,126,234,0.4); }
.slider-input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); cursor: pointer; border: none; }
.contrib-hint { font-size: 11px; color: #555; margin-top: 6px; }
.contrib-box { margin-top: 10px; padding: 16px; background: rgba(102,126,234,0.08); border: 1px solid rgba(102,126,234,0.18); border-radius: 12px; }
.contrib-box-title { font-size: 12px; color: #8899cc; margin-bottom: 12px; font-weight: 600; }

/* ---- Panel Tables ---- */
.panel-table { width: 100%; margin: 16px 0; border-collapse: collapse; }
.panel-table th { font-size: 11px; text-transform: uppercase; color: #666; letter-spacing: 0.5px; padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); }
.panel-table td { padding: 10px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.04); color: #ccc; }
.panel-table tr:hover td { background: rgba(255,255,255,0.03); }

/* ---- Main Content ---- */
.main { max-width: 1300px; margin: 0 auto; padding: 24px; }

/* ---- Insights Strip ---- */
.insights-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 28px; }
.insight-tile { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 18px; text-align: center; transition: all 0.2s; }
.insight-tile:hover { background: rgba(255,255,255,0.07); transform: translateY(-2px); }
.insight-value { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.insight-value.green { color: #4CAF50; }
.insight-value.amber { color: #ff9800; }
.insight-label { font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: 0.4px; }
.insight-sub { font-size: 11px; color: #555; margin-top: 3px; }

/* ---- Forecast Card ---- */
.forecast-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 18px; padding: 28px; margin-bottom: 24px; }
.forecast-card h2 { font-size: 18px; color: #fff; margin-bottom: 4px; }
.forecast-subtitle { font-size: 13px; color: #666; margin-bottom: 18px; }
.scenario-bar { display: flex; gap: 6px; margin-bottom: 20px; background: rgba(255,255,255,0.04); padding: 4px; border-radius: 12px; }
.scenario-pill { flex: 1; padding: 9px; border: none; background: transparent; color: #888; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.scenario-pill.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }
.chart-wrap { position: relative; height: 380px; margin: 0 -8px; }

/* ---- Bottom Grid ---- */
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
.bottom-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; padding: 22px; }
.bottom-card h3 { font-size: 15px; color: #fff; margin-bottom: 14px; }
.swp-tbl { width: 100%; border-collapse: collapse; max-height: 260px; display: block; overflow-y: auto; }
.swp-tbl th { font-size: 11px; text-transform: uppercase; color: #666; padding: 8px; text-align: left; position: sticky; top: 0; background: rgba(26,26,46,0.98); }
.swp-tbl td { padding: 9px 8px; font-size: 13px; color: #aaa; border-bottom: 1px solid rgba(255,255,255,0.04); }
.recs { background: rgba(76,175,80,0.08); border: 1px solid rgba(76,175,80,0.15); border-radius: 12px; padding: 16px; font-size: 14px; color: #bbb; line-height: 1.6; }
.recs strong { color: #fff; }
.recs ul { padding-left: 18px; margin-top: 8px; }
.recs li { margin-bottom: 4px; }

/* ---- Collapsible Card ---- */
.collapsible-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; margin-bottom: 24px; overflow: hidden; }
.collapsible-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; cursor: pointer; user-select: none; transition: background 0.2s; }
.collapsible-header:hover { background: rgba(255,255,255,0.04); }
.collapsible-header h3 { font-size: 15px; color: #fff; margin: 0; }
.collapse-icon { font-size: 14px; color: #666; transition: transform 0.3s ease; }
.collapsible-card.collapsed .collapse-icon { transform: rotate(-90deg); }
.collapsible-body { padding: 0 22px 22px; transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease; max-height: 2000px; opacity: 1; overflow: hidden; }
.collapsible-card.collapsed .collapsible-body { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }

/* ---- NPS/EPF Breakdown (inside collapsible) ---- */
.breakdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.breakdown-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 16px; }
.breakdown-item h4 { font-size: 13px; color: #667eea; margin-bottom: 10px; font-weight: 700; }
.breakdown-item .bd-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.breakdown-item .bd-row:last-child { border-bottom: none; }
.breakdown-item .bd-label { color: #888; }
.breakdown-item .bd-val { color: #ccc; font-weight: 600; }
.breakdown-item .bd-val.green { color: #4CAF50; }
.breakdown-item .bd-val.amber { color: #ff9800; }
.invest-tips { background: rgba(102,126,234,0.08); border: 1px solid rgba(102,126,234,0.18); border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 12px; color: #8899cc; line-height: 1.6; }
.invest-tips strong { color: #bbc8ee; }
.invest-tips ul { padding-left: 16px; margin-top: 6px; }
.invest-tips li { margin-bottom: 3px; }

/* ---- Footer Bar ---- */
.footer-bar { display: flex; justify-content: center; gap: 10px; padding: 20px; }
.footer-btn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: #999; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.footer-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.footer-btn.danger { color: #f44336; border-color: rgba(244,67,54,0.2); }
.footer-btn.danger:hover { background: rgba(244,67,54,0.15); }

/* ---- SIP Summary ---- */
.sip-summary-bar { background: rgba(102,126,234,0.1); border: 1px solid rgba(102,126,234,0.2); border-radius: 10px; padding: 12px; font-size: 13px; color: #8899cc; margin-top: 12px; line-height: 1.7; }
.sip-summary-bar strong { color: #bbc8ee; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .bottom-grid { grid-template-columns: 1fr; }
    .breakdown-grid { grid-template-columns: 1fr; }
    .insights-strip { grid-template-columns: repeat(2, 1fr); }
    .panel { width: 100vw; max-width: 100vw; }
}

/* ---- EPF Growth Chart ---- */
.epf-chart-wrap { position: relative; height: 200px; margin: 14px -4px 8px; }

/* ---- Money Flow Waterfall ---- */
.flow-stage { margin-bottom: 20px; }
.flow-stage-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #667eea; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(102,126,234,0.2); }
.flow-bar-row { display: flex; align-items: center; margin-bottom: 6px; gap: 10px; }
.flow-bar-label { width: 180px; min-width: 180px; font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-bar-track { flex: 1; height: 22px; background: rgba(255,255,255,0.03); border-radius: 6px; overflow: hidden; position: relative; }
.flow-bar-fill { height: 100%; border-radius: 6px; transition: width 0.6s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; min-width: 2px; }
.flow-bar-val { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.9); white-space: nowrap; }
.flow-bar-outside { font-size: 11px; font-weight: 600; color: #888; margin-left: 8px; white-space: nowrap; }
.flow-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; margin-top: 8px; background: rgba(102,126,234,0.1); border: 1px solid rgba(102,126,234,0.2); border-radius: 10px; }
.flow-total-label { font-size: 13px; font-weight: 700; color: #bbc8ee; }
.flow-total-val { font-size: 16px; font-weight: 700; color: #fff; }
.flow-arrow { text-align: center; font-size: 20px; color: #444; margin: 6px 0; }
.flow-dist-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.flow-dist-row:last-child { border-bottom: none; }
.flow-dist-label { color: #888; }
.flow-dist-val { font-weight: 600; color: #ccc; }
.flow-dist-val.green { color: #4CAF50; }
.flow-dist-val.amber { color: #ff9800; }
@media (max-width: 768px) { .flow-bar-label { width: 120px; min-width: 120px; font-size: 11px; } }

/* ---- Sankey Chart ---- */
.sankey-wrap { position: relative; height: 480px; margin: 0 -4px; }
.scenario-hint { font-size: 11px; color: #555; margin-bottom: 16px; margin-top: -12px; }

/* ---- Expense Panel ---- */
.expense-summary-strip { background: rgba(102,126,234,0.08); border: 1px solid rgba(102,126,234,0.18); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.exp-summary-row { display: flex; gap: 12px; }
.exp-kpi { flex: 1; text-align: center; }
.exp-kpi-val { font-size: 18px; font-weight: 700; color: #fff; display: block; }
.exp-kpi-val.green { color: #4CAF50; }
.exp-kpi-val.amber { color: #ff9800; }
.exp-kpi-label { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 0.4px; }
.exp-kpi.small .exp-kpi-val { font-size: 14px; }
.exp-donut-wrap { position: relative; height: 160px; margin: 12px auto 0; max-width: 200px; }
.exp-add-section { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 16px; }
.exp-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.15s; }
.exp-item:hover { background: rgba(255,255,255,0.03); }
.exp-item:last-child { border-bottom: none; }
.exp-item-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.exp-item-icon { font-size: 20px; }
.exp-item-info { min-width: 0; }
.exp-item-name { font-size: 13px; font-weight: 600; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-item-meta { display: flex; gap: 8px; font-size: 11px; color: #666; margin-top: 2px; flex-wrap: wrap; }
.exp-pill { font-size: 10px; padding: 1px 8px; border-radius: 10px; font-weight: 600; }
.exp-pill.essential { background: rgba(76,175,80,0.15); color: #4CAF50; }
.exp-pill.discretionary { background: rgba(255,152,0,0.15); color: #ff9800; }
.exp-item-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.exp-item-amount { font-size: 13px; font-weight: 700; color: #ccc; white-space: nowrap; }

/* ---- Expense Analyser Card (main content) ---- */
.exp-a-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.exp-a-kpi { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 14px; text-align: center; }
.exp-a-kpi-val { font-size: 18px; font-weight: 700; color: #fff; }
.exp-a-kpi-val.green { color: #4CAF50; }
.exp-a-kpi-val.amber { color: #ff9800; }
.exp-a-kpi-label { font-size: 10px; color: #777; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 4px; }
.exp-a-section { margin-bottom: 20px; }
.exp-a-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: #667eea; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(102,126,234,0.2); }
.exp-proj-table { width: 100%; border-collapse: collapse; }
.exp-proj-table th { font-size: 11px; text-transform: uppercase; color: #666; padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.06); letter-spacing: 0.4px; }
.exp-proj-table td { padding: 10px; font-size: 13px; color: #bbb; border-bottom: 1px solid rgba(255,255,255,0.04); }
.exp-proj-table td.amber { color: #ff9800; }
.exp-proj-table tr:hover td { background: rgba(255,255,255,0.03); }
.exp-a-bars { display: flex; flex-direction: column; gap: 6px; }
.exp-a-bar-row { display: flex; align-items: center; gap: 10px; }
.exp-a-bar-label { width: 180px; min-width: 180px; font-size: 12px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-a-bar-track { flex: 1; height: 18px; background: rgba(255,255,255,0.03); border-radius: 6px; overflow: hidden; }
.exp-a-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #4CAF50, #66bb6a); transition: width 0.4s ease; }
.exp-a-bar-fill.disc { background: linear-gradient(90deg, #ff9800, #ffb74d); }
.exp-a-bar-val { font-size: 11px; font-weight: 600; color: #aaa; white-space: nowrap; min-width: 140px; }
.exp-a-warning { background: rgba(255,152,0,0.1); border: 1px solid rgba(255,152,0,0.2); border-radius: 10px; padding: 12px 14px; font-size: 12px; color: #ffb74d; line-height: 1.6; }
@media (max-width: 768px) {
    .exp-a-kpis { grid-template-columns: repeat(2, 1fr); }
    .exp-a-bar-label { width: 120px; min-width: 120px; }
}