.nlcc{
  --nlcc-bg:#050506;
  --nlcc-card:#1b1b1e;
  --nlcc-card2:#202024;
  --nlcc-border:rgba(255,255,255,.12);
  --nlcc-text:rgba(255,255,255,.88);
  --nlcc-muted:rgba(255,255,255,.66);
  --nlcc-title:#ff3b30;
  --nlcc-warning:#ff3b30;
  --nlcc-green:#21f3a5;
  --nlcc-hint:#21f3a5;
  --nlcc-shadow:0 18px 60px rgba(0,0,0,.5);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  color:var(--nlcc-text);
  background:radial-gradient(1200px 700px at 50% -120px, rgba(255,59,48,.20), transparent 60%), var(--nlcc-bg);
  padding:28px 18px 28px;
  border-radius:18px;
}

.nlcc__title{
  text-align:center;
  letter-spacing:.24em;
  color:var(--nlcc-title);
  font-weight:700;
  margin:0 0 18px;
}

.nlcc__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

@media (min-width: 920px){
  .nlcc__grid{
    grid-template-columns:1fr 1fr;
  }
}

.nlcc__card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--nlcc-border);
  border-radius:16px;
  padding:22px 22px 20px;
  box-shadow:var(--nlcc-shadow);
  position:relative;
  overflow:hidden;
}

.nlcc__card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(700px 260px at 25% 0%, rgba(255,59,48,.18), transparent 60%);
  pointer-events:none;
}

.nlcc__intro{
  text-align:center;
  color:var(--nlcc-muted);
  font-size:14px;
  line-height:1.75;
  margin:4px 0 16px;
}

.nlcc__warning{
  text-align:center;
  color:var(--nlcc-warning);
  font-weight:700;
  font-size:14px;
  line-height:1.7;
  margin:10px 0 18px;
}

.nlcc__controls{
  display:flex;
  flex-direction:column;
  gap:16px;
  position:relative;
  z-index:1;
}

.nlcc__control{
  padding:14px 14px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.04));
}

.nlcc__labelRow{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:0 0 10px;
}

.nlcc__label{
  font-size:14px;
  color:var(--nlcc-text);
  font-weight:650;
}

.nlcc__value{
  font-size:13px;
  color:var(--nlcc-muted);
}

.nlcc__controlRow{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:12px;
  align-items:center;
}

.nlcc__number{
  width:76px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  color:var(--nlcc-text);
  padding:10px 10px;
  font-size:14px;
  outline:none;
}

.nlcc__number:focus{
  border-color:rgba(255,59,48,.55);
  box-shadow:0 0 0 3px rgba(255,59,48,.16);
}

.nlcc__range{
  width:100%;
  appearance:none;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(255,59,48,.9), rgba(255,59,48,.25));
  outline:none;
}

.nlcc__range::-webkit-slider-thumb{
  appearance:none;
  width:22px;
  height:22px;
  border-radius:999px;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.9), rgba(255,255,255,.35)), #ff3b30;
  border:1px solid rgba(0,0,0,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.4);
}

.nlcc__range::-moz-range-thumb{
  width:22px;
  height:22px;
  border-radius:999px;
  background:#ff3b30;
  border:1px solid rgba(0,0,0,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.4);
}

.nlcc__hint{
  margin:16px 0 0;
  text-align:center;
  color:var(--nlcc-hint);
  font-weight:700;
  font-size:13px;
  position:relative;
  z-index:1;
}

.nlcc__breakdown{
  position:relative;
  z-index:1;
  padding:6px 2px;
}

.nlcc__line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:10px 4px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nlcc__line:last-child{
  border-bottom:none;
}

.nlcc__lineLabel{
  color:var(--nlcc-text);
  font-size:14px;
}

.nlcc__lineValue{
  color:var(--nlcc-text);
  font-variant-numeric:tabular-nums;
  font-size:14px;
  white-space:nowrap;
}

.nlcc__divider{
  height:1px;
  background:rgba(255,255,255,.12);
  margin:12px 0 6px;
}

.nlcc__line--total .nlcc__lineLabel,
.nlcc__line--total .nlcc__lineValue{
  font-weight:750;
}

@media (max-width: 600px){
  .nlcc{
    padding:18px 6px;
    border-radius:10px;
  }
  .nlcc__card{
    padding:16px 10px 14px;
    border-radius:12px;
  }
  .nlcc__control{
    padding:12px 10px 10px;
    border-radius:10px;
  }
  .nlcc__controlRow{
    grid-template-columns:64px 1fr;
    gap:8px;
  }
  .nlcc__number{
    width:64px;
    padding:8px 6px;
  }
}