/* NSC Calculator Styles - Premium Edition */
.page-title{font-size:32px;margin-bottom:10px;font-weight:700;background:linear-gradient(135deg,#9200C5 0%,#A020D0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-subtitle{color:#555;margin-bottom:25px;font-size:16px;font-weight:400}
.calc-card{background:#fff;border:1px solid #E8E4EC;border-radius:12px;padding:25px;margin-bottom:30px;box-shadow:0 2px 8px rgba(0,0,0,0.08);transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
.calc-card:hover{border-color:#40E0D0;box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.input-group{margin-bottom:25px}
.input-group label{font-weight:600;display:block;margin-bottom:8px;font-size:14px;color:#333}
.input-row{display:flex;align-items:center;gap:12px}
.input-row input[type="number"]{width:120px;padding:10px 12px;border-radius:8px;border:1px solid #E8E4EC;font-size:14px;font-weight:500;transition:all 0.2s ease;background:#fff}
.input-row input[type="number"]:focus{outline:none;border-color:#40E0D0;box-shadow:0 0 0 3px rgba(64,224,208,0.15)}
.input-row input[type="number"]:hover{border-color:#40E0D0}
.input-row input[type="number"]:read-only{background:#f5f5f5;cursor:not-allowed}
.input-row input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;background:#E8E4EC;outline:none;cursor:pointer}
.input-row input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,#40E0D0 0%,#40E0D0 calc((var(--val) - var(--min))/(var(--max) - var(--min))*100%),#E8E4EC calc((var(--val) - var(--min))/(var(--max) - var(--min))*100%),#E8E4EC 100%)}
.input-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:linear-gradient(135deg,#40E0D0 0%,#48D4C4 100%);border-radius:50%;cursor:pointer;margin-top:-7px;box-shadow:0 2px 6px rgba(64,224,208,0.3);transition:all 0.2s ease}
.input-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 3px 10px rgba(64,224,208,0.5)}
.input-row input[type="range"]::-moz-range-track{height:6px;border-radius:4px;background:#E8E4EC}
.input-row input[type="range"]::-moz-range-progress{height:6px;border-radius:4px;background:#40E0D0}
.input-row input[type="range"]::-moz-range-thumb{width:20px;height:20px;background:linear-gradient(135deg,#40E0D0 0%,#48D4C4 100%);border-radius:50%;border:none;cursor:pointer;box-shadow:0 2px 6px rgba(64,224,208,0.3);transition:all 0.2s ease}
.input-row input[type="range"]::-moz-range-thumb:hover{transform:scale(1.15);box-shadow:0 3px 10px rgba(64,224,208,0.5)}
.result-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.result-box{background:#f9f9f9;padding:16px 12px;border-radius:10px;text-align:center;border:1px solid #E8E4EC;transition:all 0.2s ease}
.result-box:hover{border-color:#40E0D0;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.result-box span{font-size:13px;color:#666;font-weight:500}
.result-box strong{display:block;margin-top:6px;font-size:20px;font-weight:700;background:linear-gradient(135deg,#9200C5 0%,#A020D0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.result-box.highlight{background:linear-gradient(135deg,rgba(64,224,208,0.1) 0%,rgba(72,212,196,0.15) 100%);border-color:#40E0D0}
.result-box.highlight strong{background:linear-gradient(135deg,#40E0D0 0%,#48D4C4 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.donut-wrap{margin-top:20px;text-align:center}
.donut-wrap canvas{max-width:260px;max-height:160px;margin:auto}
.legend{margin-top:12px;font-size:13px;display:flex;gap:16px;justify-content:center;align-items:center}
.legend span{display:flex;align-items:center;gap:6px;font-weight:500}
.legend i{width:12px;height:12px;display:inline-block;border-radius:2px}
.invested{background:#9200C5}
.interest{background:#40E0D0}
.stack-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
.stack-header h2{margin:0;font-size:20px;font-weight:600;color:#333}
#growthChart{max-height:300px}
section{margin-top:40px;line-height:1.7}
section h2{font-size:24px;margin-bottom:16px;font-weight:600;background:linear-gradient(135deg,#9200C5 0%,#A020D0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
section p{color:#444;margin-bottom:14px}
section ul{margin-left:20px;color:#444}
section ul li{margin-bottom:10px}
.faq-section{margin-top:40px;background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.08);border:1px solid #E8E4EC}
.faq-section h2{font-size:24px;margin-bottom:20px;font-weight:600;background:linear-gradient(135deg,#9200C5 0%,#A020D0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
@media (max-width:768px){
.page-title{font-size:28px}
.calc-grid{grid-template-columns:1fr}
.result-cards{grid-template-columns:1fr}
.donut-wrap canvas{max-width:220px;max-height:140px}
#growthChart{max-height:240px}
.calc-card{padding:20px}
.faq-section{padding:20px}
section{margin-top:30px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}}
/* ── Text input for formatted amount ── */
.input-row input[type="text"] {
  width: 130px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #E8E4EC;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  background: #fff;
  text-align: right;
  outline: none;
  color: #333;
}
.input-row input[type="text"]:focus,
.input-row input[type="text"]:hover {
  border-color: #40E0D0;
  box-shadow: 0 0 0 3px rgba(64, 224, 208, 0.15);
}

/* ══════════════════════════════════════════════════════
   RELATED CALCULATORS — global.css handles icon bg/hover
   ══════════════════════════════════════════════════════ */
.related-section { margin-top: 50px; margin-bottom: 20px; }
.related-section .section-header { text-align: center; margin-bottom: 28px; }
.related-section .section-title {
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(135deg, #9200C5 0%, #A020D0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  display: block;
}
.related-section .section-desc { font-size: 15px; color: #666; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.related-card {
  background: #fff;
  border: 2px solid #E8E4EC;
  border-radius: 12px;
  padding: 28px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1),
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  justify-content: center;
}
.related-card:hover {
  transform: translateY(-6px);
  border-color: #40E0D0;
  box-shadow: 0 12px 32px rgba(64,224,208,0.2);
}
.related-section .related-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}
.related-section .related-icon svg {
  width: 28px;
  height: 28px;
}
.related-text h3 {
  font-size: 15px;
  font-weight: 700;
  color: #222;
  margin: 0 0 4px;
  line-height: 1.3;
}
.related-text p {
  font-size: 12px;
  color: #777;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 900px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }