/* Pocket Saving Calculators v1.0.0 — all rules scoped to .psc */
.psc{
	--psc-bg:#0f1f1a; --psc-fg:#ffffff; --psc-muted:#9fb5ab; --psc-label:#c5d5ce;
	--psc-tile:rgba(255,255,255,.06); --psc-line:rgba(255,255,255,.14);
	--psc-accent:#f2b84b; --psc-accent-ink:#0f1f1a; --psc-accent-sub:#5a4511;
	--psc-a:#4ade80; --psc-b:#f2b84b;
	position:relative; box-sizing:border-box; max-width:520px; margin:32px auto;
	padding:28px; border-radius:24px; background:var(--psc-bg); color:var(--psc-fg);
	font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.5;
	box-shadow:0 30px 60px -20px rgba(11,110,79,.45);
}
.psc.psc-light{
	--psc-bg:#ffffff; --psc-fg:#0f1f1a; --psc-muted:#6b7c75; --psc-label:#3d4f48;
	--psc-tile:#f5f4ee; --psc-line:#e7e4da; --psc-a:#0b6e4f; --psc-b:#f2b84b;
	border:1px solid #e7e4da; box-shadow:0 10px 30px -12px rgba(15,31,26,.18);
}
.psc *,.psc *::before,.psc *::after{box-sizing:border-box}
.psc .psc-badge{position:absolute; top:-13px; right:22px; background:var(--psc-accent); color:var(--psc-accent-ink);
	font-size:12px; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:.02em}
.psc .psc-title{margin:0 0 4px; padding:0; font-family:Fraunces,Georgia,serif; font-size:22px; line-height:1.2; color:var(--psc-fg)}
.psc .psc-sub{margin:0 0 20px; font-size:13px; color:var(--psc-muted)}

/* Fields */
.psc .psc-field{margin:0 0 18px}
.psc .psc-label-row{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px}
.psc .psc-label-row label{margin:0; font-size:13px; font-weight:500; color:var(--psc-label)}
.psc .psc-num-wrap{position:relative; display:inline-flex; align-items:center; background:var(--psc-tile);
	border:1px solid var(--psc-line); border-radius:10px; padding:0 10px; min-width:110px}
.psc .psc-num-wrap::before,.psc .psc-num-wrap::after{font-size:13px; font-weight:600; color:var(--psc-accent)}
.psc.psc-light .psc-num-wrap::before,.psc.psc-light .psc-num-wrap::after{color:var(--psc-a)}
.psc .psc-unit-inr::before{content:"₹"; margin-right:4px}
.psc .psc-unit-pct::after{content:"%"; margin-left:4px}
.psc .psc-unit-yrs::after{content:"yrs"; margin-left:4px}
.psc .psc-unit-mo::after{content:"mo"; margin-left:4px}
.psc .psc-unit-age::after{content:"yrs"; margin-left:4px}
.psc input.psc-num{width:100%; min-width:0; max-width:120px; border:0 !important; background:transparent !important;
	box-shadow:none !important; outline:0; padding:7px 0 !important; margin:0; text-align:right;
	font-family:inherit; font-size:14px; font-weight:600; line-height:1.2; color:var(--psc-fg) !important; -moz-appearance:textfield}
.psc input.psc-num::-webkit-outer-spin-button,.psc input.psc-num::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.psc .psc-num-wrap:focus-within{border-color:var(--psc-accent)}

/* Range */
.psc input.psc-range{-webkit-appearance:none; appearance:none; width:100%; height:6px; margin:4px 0; padding:0; border:0;
	border-radius:99px; background:linear-gradient(to right,var(--psc-accent) var(--psc-fill,50%),var(--psc-line) var(--psc-fill,50%));
	cursor:pointer; outline:0}
.psc.psc-light input.psc-range{background:linear-gradient(to right,var(--psc-a) var(--psc-fill,50%),var(--psc-line) var(--psc-fill,50%))}
.psc input.psc-range::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px; border-radius:50%;
	background:#fff; border:3px solid var(--psc-accent); box-shadow:0 2px 6px rgba(0,0,0,.25)}
.psc input.psc-range::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:#fff;
	border:3px solid var(--psc-accent); box-shadow:0 2px 6px rgba(0,0,0,.25)}
.psc.psc-light input.psc-range::-webkit-slider-thumb{border-color:var(--psc-a)}
.psc.psc-light input.psc-range::-moz-range-thumb{border-color:var(--psc-a)}
.psc input.psc-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(242,184,75,.35)}

/* Results */
.psc .psc-results{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px}
.psc .psc-tile{background:var(--psc-tile); border-radius:14px; padding:14px; min-width:0}
.psc .psc-tile span{display:block; font-size:12px; color:var(--psc-muted)}
.psc .psc-tile strong{display:block; font-family:Fraunces,Georgia,serif; font-size:20px; font-weight:700;
	color:var(--psc-fg); word-break:break-word}
.psc .psc-tile.psc-big{grid-column:1/-1; background:var(--psc-accent)}
.psc .psc-tile.psc-big span{color:var(--psc-accent-sub)}
.psc .psc-tile.psc-big strong{font-size:30px; color:var(--psc-accent-ink)}

.psc .psc-bar{display:flex; height:8px; border-radius:99px; overflow:hidden; margin:16px 0 0; background:var(--psc-line)}
.psc .psc-bar i{display:block; height:100%; transition:width .35s ease}
.psc .psc-bar i[data-bar="a"]{background:var(--psc-a)}
.psc .psc-bar i[data-bar="b"]{background:var(--psc-b)}
.psc .psc-legend{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:8px; font-size:12px; color:var(--psc-muted)}
.psc .psc-legend span::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px}
.psc .psc-legend .psc-la::before{background:var(--psc-a)}
.psc .psc-legend .psc-lb::before{background:var(--psc-b)}
.psc .psc-note{margin:10px 0 0; font-size:13px; color:var(--psc-label); min-height:1.5em}

.psc .psc-cta{display:inline-block; margin-top:16px; font-weight:600; font-size:14px; color:var(--psc-accent); text-decoration:none}
.psc.psc-light .psc-cta{color:var(--psc-a)}
.psc .psc-cta:hover{text-decoration:underline}
.psc .psc-disclaimer{margin:14px 0 0; font-size:11px; color:var(--psc-muted); opacity:.85}

@media (max-width:480px){
	.psc{padding:22px 18px; border-radius:20px}
	.psc .psc-label-row{flex-wrap:wrap}
	.psc .psc-tile strong{font-size:18px}
	.psc .psc-tile.psc-big strong{font-size:26px}
}
@media (prefers-reduced-motion:reduce){ .psc .psc-bar i{transition:none} }