/* ═══════════════════════════════════════════════════
   PaisaPedia Financial Health Tool v2.0
   Sky Blue Premium Fintech Theme
═══════════════════════════════════════════════════ */
:root {
  --pp-sky:      #0ea5e9;
  --pp-sky-dark: #0284c7;
  --pp-navy:     #0c4a6e;
  --pp-bg:       #f0f9ff;
  --pp-white:    #ffffff;
  --pp-border:   #e0f2fe;
  --pp-green:    #16a34a;
  --pp-red:      #ef4444;
  --pp-amber:    #f59e0b;
  --pp-text:     #0f172a;
  --pp-muted:    #64748b;
  --pp-shadow:   0 4px 24px rgba(14,165,233,.12);
  --pp-radius:   14px;
  --pp-font:     'Segoe UI', system-ui, sans-serif;
}

/* ── Wizard Wrap ──────────────────────────────────── */
.pp-wrap { max-width:660px; margin:0 auto; font-family:var(--pp-font); color:var(--pp-text); }

/* ── Progress ─────────────────────────────────────── */
.pp-progress-wrap { margin-bottom:28px; }
.pp-progress-bar-track { height:6px; background:var(--pp-border); border-radius:99px; overflow:hidden; margin-bottom:16px; }
.pp-progress-bar { height:100%; background:linear-gradient(90deg,var(--pp-sky),var(--pp-navy)); border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.pp-step-indicators { display:flex; justify-content:space-between; }
.pp-step-ind { display:flex; flex-direction:column; align-items:center; gap:4px; }
.pp-step-num { width:32px; height:32px; border-radius:50%; background:var(--pp-border); color:var(--pp-muted); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; transition:all .3s; }
.pp-step-lbl { font-size:11px; color:var(--pp-muted); }
.pp-step-ind.active .pp-step-num { background:var(--pp-sky); color:#fff; box-shadow:0 0 0 4px rgba(14,165,233,.2); }
.pp-step-ind.done .pp-step-num { background:var(--pp-green); color:#fff; }

/* ── Error Banner ─────────────────────────────────── */
.pp-error-banner { background:#fef2f2; border:1.5px solid #fca5a5; color:#b91c1c; border-radius:8px; padding:12px 16px; margin-bottom:16px; font-size:13px; font-weight:500; }

/* ── Card ─────────────────────────────────────────── */
.pp-card { background:var(--pp-white); border-radius:var(--pp-radius); box-shadow:var(--pp-shadow); padding:32px; animation:pp-in .35s ease; border:1px solid var(--pp-border); }
@keyframes pp-in { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.pp-card-header { text-align:center; margin-bottom:20px; }
.pp-card-icon { font-size:38px; margin-bottom:6px; }
.pp-card-header h2 { margin:0 0 4px; font-size:20px; color:var(--pp-navy); }
.pp-card-header p  { margin:0; color:var(--pp-muted); font-size:13px; }

/* ── DYK ──────────────────────────────────────────── */
.pp-dyk { background:var(--pp-bg); border:1px solid var(--pp-border); border-left:4px solid var(--pp-sky); border-radius:8px; padding:12px 14px; font-size:12.5px; color:var(--pp-navy); margin-bottom:20px; line-height:1.6; }

/* ── Fields ───────────────────────────────────────── */
.pp-fields { display:flex; flex-direction:column; gap:16px; }
.pp-row { display:flex; gap:14px; }
.pp-row .pp-field { flex:1; }
.pp-field label { display:block; font-size:13px; font-weight:600; color:var(--pp-navy); margin-bottom:5px; }
.pp-req { color:var(--pp-red); }
.pp-field input, .pp-field select {
  width:100%; padding:11px 13px; border:1.5px solid #cbd5e1; border-radius:8px;
  font-size:14px; font-family:var(--pp-font); color:var(--pp-text); background:#fff;
  transition:border-color .2s,box-shadow .2s; box-sizing:border-box;
}
.pp-field input:focus, .pp-field select:focus { outline:none; border-color:var(--pp-sky); box-shadow:0 0 0 3px rgba(14,165,233,.15); }
.pp-field input.pp-err { border-color:var(--pp-red); }
.pp-err-msg { display:block; font-size:11px; color:var(--pp-red); margin-top:3px; min-height:14px; }
.pp-hint { display:block; font-size:11px; color:var(--pp-muted); margin-top:3px; }

/* Input prefix/icon */
.pp-input-prefix, .pp-input-icon { position:relative; display:flex; align-items:center; }
.pp-input-prefix span, .pp-input-icon span { position:absolute; left:12px; font-size:13px; color:var(--pp-muted); font-weight:600; pointer-events:none; }
.pp-input-prefix input { padding-left:46px; width:100%; }
.pp-input-icon input { padding-left:30px; width:100%; }

/* ── Cashflow Preview ─────────────────────────────── */
.pp-preview-box { display:flex; gap:12px; margin-top:16px; padding:14px; background:var(--pp-bg); border-radius:10px; border:1px solid var(--pp-border); }
.pp-preview-item { flex:1; text-align:center; }
.pp-preview-item span { display:block; font-size:10px; text-transform:uppercase; color:var(--pp-muted); letter-spacing:.5px; margin-bottom:4px; }
.pp-preview-item strong { font-size:16px; color:var(--pp-navy); }

/* ── Goals ────────────────────────────────────────── */
.pp-section-label { font-weight:700; font-size:13px; color:var(--pp-navy); margin:20px 0 10px; }
.pp-goal-card { background:var(--pp-bg); border:1.5px solid var(--pp-border); border-radius:10px; padding:16px; margin-bottom:12px; }
.pp-goal-hd { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.pp-goal-hd span { font-weight:700; font-size:13px; color:var(--pp-sky); }
.pp-goal-remove { background:none; border:none; cursor:pointer; color:var(--pp-red); font-size:16px; line-height:1; }
.pp-btn-dashed { width:100%; padding:10px; border:1.5px dashed var(--pp-sky); background:transparent; color:var(--pp-sky); font-size:13px; font-weight:600; border-radius:8px; cursor:pointer; font-family:var(--pp-font); transition:background .2s; margin-top:4px; }
.pp-btn-dashed:hover { background:rgba(14,165,233,.06); }

/* ── Disclaimer ───────────────────────────────────── */
.pp-disclaimer { background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:12px 14px; font-size:11.5px; color:var(--pp-muted); margin-top:20px; }

/* ── Loading Card ─────────────────────────────────── */
.pp-loading-card { text-align:center; padding:48px 32px; }
.pp-loader-ring { display:inline-block; width:64px; height:64px; position:relative; margin-bottom:20px; }
.pp-loader-ring div { box-sizing:border-box; display:block; position:absolute; width:52px; height:52px; margin:6px; border:5px solid var(--pp-sky); border-radius:50%; animation:pp-spin 1.2s cubic-bezier(.5,0,.5,1) infinite; border-color:var(--pp-sky) transparent transparent transparent; }
.pp-loader-ring div:nth-child(1){animation-delay:-.45s}
.pp-loader-ring div:nth-child(2){animation-delay:-.3s}
.pp-loader-ring div:nth-child(3){animation-delay:-.15s}
@keyframes pp-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.pp-loading-title { font-size:18px; color:var(--pp-navy); margin:0 0 20px; }
.pp-loading-steps { text-align:left; display:inline-block; }
.pp-ls { font-size:13px; color:var(--pp-muted); padding:5px 0; transition:color .4s; }
.pp-ls.pp-ls-done { color:var(--pp-green); font-weight:600; }
.pp-ls.pp-ls-active { color:var(--pp-sky); font-weight:600; }

/* ── Navigation ───────────────────────────────────── */
.pp-nav { display:flex; justify-content:flex-end; gap:12px; margin-top:24px; }
.pp-btn { padding:12px 28px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all .2s; font-family:var(--pp-font); }
.pp-btn-primary { background:linear-gradient(135deg,var(--pp-sky),var(--pp-navy)); color:#fff; }
.pp-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 20px rgba(14,165,233,.35); }
.pp-btn-ghost { background:transparent; color:var(--pp-sky); border:1.5px solid var(--pp-border); }
.pp-btn-ghost:hover { border-color:var(--pp-sky); }

/* ═══════════════════════════════════════════════════
   REPORT STYLES
═══════════════════════════════════════════════════ */
.pp-report { max-width:960px; margin:0 auto; font-family:var(--pp-font); color:var(--pp-text); }

.pp-rpt-header { display:flex; align-items:center; justify-content:space-between; padding:24px 28px; background:linear-gradient(135deg,var(--pp-navy),var(--pp-sky-dark)); border-radius:var(--pp-radius); color:#fff; margin-bottom:24px; }
.pp-rpt-title { margin:0 0 4px; font-size:24px; color:#fff; }
.pp-rpt-sub { margin:0; opacity:.8; font-size:13px; }

/* Score */
.pp-score-section { display:flex; gap:28px; align-items:center; background:var(--pp-white); border-radius:var(--pp-radius); padding:24px; box-shadow:var(--pp-shadow); border:1px solid var(--pp-border); margin-bottom:24px; }
.pp-score-ring-wrap { flex-shrink:0; }
.pp-score-svg { width:140px; height:140px; }
.pp-score-num { font-size:28px; font-weight:800; }
.pp-score-label { font-size:11px; }
.pp-score-info { flex:1; }
.pp-score-emoji { font-size:28px; margin-bottom:4px; }
.pp-score-band { font-size:20px; font-weight:800; margin-bottom:12px; }
.pp-pillars { display:flex; flex-direction:column; gap:8px; }
.pp-pillar-top { display:flex; justify-content:space-between; font-size:12px; color:var(--pp-muted); margin-bottom:3px; font-weight:500; }
.pp-pillar-bar { height:6px; background:var(--pp-border); border-radius:99px; overflow:hidden; }
.pp-pillar-fill { height:100%; background:linear-gradient(90deg,var(--pp-sky),var(--pp-navy)); border-radius:99px; }

/* Priority Action */
.pp-action-box { display:flex; gap:14px; align-items:flex-start; padding:18px 20px; background:#fff; border:1px solid var(--pp-border); border-left:5px solid; border-radius:var(--pp-radius); margin-bottom:24px; box-shadow:var(--pp-shadow); }
.pp-action-icon { font-size:28px; flex-shrink:0; }
.pp-action-title { font-size:10px; text-transform:uppercase; color:var(--pp-muted); letter-spacing:.6px; margin-bottom:2px; }
.pp-action-head { font-size:16px; font-weight:700; margin-bottom:4px; }
.pp-action-msg { font-size:13px; color:var(--pp-muted); line-height:1.6; }

/* Section */
.pp-section { margin-bottom:28px; }
.pp-sec-title { font-size:17px; font-weight:700; color:var(--pp-navy); margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--pp-sky); }

/* Report cards */
.pp-cards-row { display:flex; gap:14px; flex-wrap:wrap; }
.pp-rcard { flex:1; min-width:200px; background:var(--pp-white); border:1.5px solid var(--pp-border); border-radius:var(--pp-radius); padding:18px; box-shadow:var(--pp-shadow); }
.pp-rcard-green { border-left:4px solid var(--pp-green); }
.pp-rcard-red   { border-left:4px solid var(--pp-red); }
.pp-rcard-orange{ border-left:4px solid var(--pp-amber); }
.pp-rcard-label { font-size:11px; text-transform:uppercase; color:var(--pp-muted); letter-spacing:.5px; margin-bottom:5px; }
.pp-rcard-val   { font-size:26px; font-weight:800; color:var(--pp-navy); margin-bottom:5px; }
.pp-rcard-meta  { font-size:12px; color:var(--pp-muted); }
.pp-rcard-icon  { font-size:22px; margin-bottom:8px; }
.pp-rcard-prot  { min-width:260px; }

/* Protection rows */
.pp-prot-row { display:flex; gap:16px; margin:10px 0; }
.pp-prot-sub { font-size:10px; text-transform:uppercase; color:var(--pp-muted); }
.pp-prot-val { font-size:14px; font-weight:700; color:var(--pp-navy); margin-top:2px; }
.pp-mini-bar-wrap { height:4px; background:var(--pp-border); border-radius:99px; margin:8px 0 3px; overflow:hidden; }
.pp-mini-bar-fill { height:100%; background:var(--pp-green); border-radius:99px; }
.pp-mini-bar-pct { font-size:11px; color:var(--pp-muted); }

/* Colour helpers */
.pp-green { color:var(--pp-green); font-weight:700; }
.pp-red   { color:var(--pp-red);   font-weight:700; }

/* Table */
.pp-table-wrap { overflow-x:auto; }
.pp-table { width:100%; border-collapse:collapse; font-size:13px; }
.pp-table th { background:var(--pp-navy); color:#fff; padding:10px 12px; text-align:left; font-size:11px; font-weight:600; }
.pp-table td { padding:10px 12px; border-bottom:1px solid var(--pp-border); }
.pp-table tr:nth-child(even) td { background:var(--pp-bg); }
.pp-sip-cell { font-weight:700; color:var(--pp-navy); background:#fef3c7 !important; }

/* Retirement */
.pp-ret-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pp-ret-card { background:var(--pp-white); border:1.5px solid var(--pp-border); border-radius:var(--pp-radius); padding:18px; text-align:center; box-shadow:var(--pp-shadow); }
.pp-ret-lbl { font-size:11px; color:var(--pp-muted); text-transform:uppercase; letter-spacing:.5px; }
.pp-ret-val { font-size:20px; font-weight:800; color:var(--pp-navy); margin:6px 0 3px; }
.pp-ret-meta{ font-size:11px; color:var(--pp-muted); }
.pp-ret-big { border-top:4px solid var(--pp-sky); }
.pp-ret-red { border-top:4px solid var(--pp-red); }
.pp-ret-green { border-top:4px solid var(--pp-green); }
.pp-ret-highlight { border-top:4px solid var(--pp-navy); background:var(--pp-bg); }

.pp-rpt-footer { font-size:11px; color:var(--pp-muted); border-top:1px solid var(--pp-border); padding-top:14px; margin-top:28px; }
.pp-error-box { color:var(--pp-red); padding:24px; text-align:center; font-size:14px; }

/* Responsive */
@media(max-width:640px){
  .pp-card{padding:20px 16px}
  .pp-row{flex-direction:column}
  .pp-ret-grid{grid-template-columns:1fr 1fr}
  .pp-cards-row{flex-direction:column}
  .pp-score-section{flex-direction:column;text-align:center}
  .pp-rpt-header{flex-direction:column;gap:14px;text-align:center}
}