/* ====== TCO Slider UI (ULTRA-COMPACT) ====== */

.tw-tco{
  position: relative;
  z-index: 20;
  max-width: 1040px;
  margin: 14px auto;
  padding: 14px 14px 10px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(17,24,39,.06);
}

/* Header */
.tw-tco__title{
  margin: 0 0 3px;
  font-size: 20px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: #0f172a;
}
.tw-tco__sub{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.38;
  color: rgba(15,23,42,.60);
}

/* Inputs grid */
.tw-tco__grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 10px;
}
@media (max-width: 900px){
  .tw-tco__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .tw-tco__grid{ grid-template-columns: 1fr; }
}

/* Field card */
.tw-tco__field{
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 9px 8px;
  border-radius: 11px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.05);
}
.tw-tco__field span{
  font-size: 11.5px;
  color: rgba(15,23,42,.58);
  font-weight: 700;
}

/* Input */
.tw-tco__field input{
  width: 100%;
  padding: 9px 9px;
  border-radius: 9px;
  border: 1px solid rgba(15,23,42,.16);
  background: #fff;
  font-size: 15px;
  font-weight: 850;
  color: #111827;
  outline: none;
}
.tw-tco__field input:focus{
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

/* Slider row */
.tw-tco__sliderrow{ margin: 8px 0 10px; }
.tw-tco__sliderlabel{
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  margin: 4px 0 8px;
  letter-spacing: -0.01em;
}
.tw-tco__sliderlabel strong{ font-weight: 950; }

/* Range (with progress fill) */
.tw-tco input[type="range"]{
  width: 100%;
  height: 16px;
  background: linear-gradient(90deg, #0b66c3 0%, #0b66c3 50%, rgba(15,23,42,.18) 50%, rgba(15,23,42,.18) 100%);
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
}

/* transparent track so input bg shows */
.tw-tco input[type="range"]::-webkit-slider-runnable-track{
  height: 5px;
  border-radius: 999px;
  background: transparent;
}
.tw-tco input[type="range"]::-moz-range-track{
  height: 5px;
  border-radius: 999px;
  background: transparent;
}

/* smaller thumb */
.tw-tco input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #0b66c3;
  box-shadow: 0 5px 12px rgba(11,102,195,.22);
  margin-top: -5.5px;
  border: 2px solid #fff;
}
.tw-tco input[type="range"]::-moz-range-thumb{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #0b66c3;
  border: 2px solid #fff;
  box-shadow: 0 5px 12px rgba(11,102,195,.22);
}

/* Metrics */
.tw-tco__metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 10px;
}
@media (max-width: 820px){
  .tw-tco__metrics{ grid-template-columns: 1fr; }
}
.tw-tco__metric{
  padding: 10px 10px 9px;
  border-radius: 11px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.05);
}
.tw-tco__metric .k{
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(15,23,42,.58);
  margin: 0 0 5px;
}
.tw-tco__metric .v{
  font-size: 15px;
  font-weight: 950;
  color: #0f172a;
}

/* Canvas spacing */
.tw-tco canvas{
  margin-top: 5px;
  border-radius: 11px;
}