/* ========= FinCalc Pro Styles ========= */

/* Hide scrollbars on tab nav */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Tab buttons */
.tab-btn {
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgb(71 85 105);
  background: rgb(241 245 249);
  transition: all .2s ease;
  flex-shrink: 0;
}
.dark .tab-btn { color: rgb(203 213 225); background: rgb(30 41 59); }
.tab-btn:hover { background: rgb(224 242 254); color: rgb(2 132 199); }
.dark .tab-btn:hover { background: rgb(7 89 133); color: white; }
.tab-btn.active {
  background: linear-gradient(135deg, #0ea5e9, #0369a1);
  color: white;
  box-shadow: 0 4px 14px -4px rgba(14, 165, 233, 0.5);
}

/* Card */
.card {
  background: white;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dark .card { background: rgb(15 23 42); border-color: rgb(30 41 59); }

/* Input */
.field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
  color: rgb(71 85 105);
}
.dark .field-label { color: rgb(148 163 184); }

.field-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid rgb(226 232 240);
  border-radius: 0.6rem;
  background: white;
  font-size: 0.95rem;
  outline: none;
  transition: all .15s;
  color: inherit;
}
.dark .field-input { background: rgb(2 6 23); border-color: rgb(51 65 85); }
.field-input:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.15); }

/* Range slider */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: rgb(226 232 240);
  border-radius: 999px;
  outline: none;
}
.dark input[type=range] { background: rgb(51 65 85); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: #0ea5e9;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(14,165,233,.15);
  transition: transform .15s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; background: #0ea5e9;
  border: none; border-radius: 50%; cursor: pointer;
}

/* Result tile */
.result-tile {
  background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(3,105,161,.05));
  border: 1px solid rgba(14,165,233,.2);
  border-radius: 0.8rem;
  padding: 0.9rem;
}
.dark .result-tile {
  background: linear-gradient(135deg, rgba(14,165,233,.15), rgba(3,105,161,.1));
  border-color: rgba(14,165,233,.3);
}

/* Segmented control */
.seg {
  display: inline-flex;
  background: rgb(241 245 249);
  border-radius: 0.6rem;
  padding: 3px;
  gap: 2px;
}
.dark .seg { background: rgb(30 41 59); }
.seg button {
  padding: 0.4rem 0.75rem;
  border-radius: 0.45rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgb(100 116 139);
  transition: all .15s;
}
.dark .seg button { color: rgb(148 163 184); }
.seg button.active {
  background: white;
  color: #0284c7;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.dark .seg button.active { background: rgb(2 6 23); color: #38bdf8; }

/* Animated number transition */
.num-anim { transition: color .25s; }

/* Print friendly */
@media print {
  header, footer, #installBtn, #savedBtn, #themeBtn { display: none !important; }
}