/* Nonlinear top-up slider with threshold marks */
.nl-slider { margin: 12px 0 8px; user-select: none; }
.nl-slider-track {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
}
.nl-slider-rail {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 8px; margin-top: -4px;
  border-radius: 999px;
  background: var(--line, #e4dfd6);
}
/* first 75% — dense zone 15m…40h */
.nl-slider-zone {
  position: absolute;
  left: 0; width: 75%; top: 50%;
  height: 8px; margin-top: -4px;
  border-radius: 999px 0 0 999px;
  background: linear-gradient(90deg, rgba(240,31,1,.12), rgba(240,31,1,.22));
  pointer-events: none;
}
.nl-slider-fill {
  position: absolute;
  left: 0; top: 50%;
  height: 8px; margin-top: -4px;
  width: 0;
  border-radius: 999px;
  background: var(--red, #F01F01);
  pointer-events: none;
}
.nl-slider-thumb {
  position: absolute;
  top: 50%; left: 0;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--red, #F01F01);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  pointer-events: none;
  z-index: 3;
}
.nl-slider-track.dragging .nl-slider-thumb {
  transform: scale(1.12);
}
.nl-slider input[type=range] {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  z-index: 4;
}
.nl-slider-marks {
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 0;
  z-index: 2;
  pointer-events: none;
}
.nl-mark {
  position: absolute;
  transform: translateX(-50%);
  top: 0;
  background: none; border: none;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nl-mark i {
  display: block;
  width: 2px; height: 16px;
  margin-top: -8px;
  background: var(--ink, #12141a);
  opacity: .35;
  border-radius: 1px;
}
.nl-mark span {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--display, inherit);
  color: var(--muted, #6b707a);
  white-space: nowrap;
}
.nl-mark.passed i { background: var(--red, #F01F01); opacity: .85; }
.nl-mark.on span { color: var(--red, #F01F01); }
.nl-mark:hover span { color: var(--ink, #12141a); }

.nl-ends {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted, #6b707a);
  margin-top: 4px;
  padding: 0 2px;
}
.nl-ends span:nth-child(2) {
  position: absolute;
  left: 75%;
  transform: translateX(-50%);
  font-weight: 600;
  color: var(--ink-soft, #3a3f4a);
}
.nl-slider { position: relative; }

/* CRM / LK dark theme overrides */
.lk-shell .nl-slider-rail,
.app .nl-slider-rail { background: var(--line, #262b40); }
.lk-shell .nl-slider-zone,
.app .nl-slider-zone {
  background: linear-gradient(90deg, rgba(99,102,241,.15), rgba(99,102,241,.28));
}
.lk-shell .nl-slider-fill,
.app .nl-slider-fill { background: var(--accent, #6366f1); }
.lk-shell .nl-slider-thumb,
.app .nl-slider-thumb { border-color: var(--accent, #6366f1); background: var(--card, #151827); }
.lk-shell .nl-mark i,
.app .nl-mark i { background: var(--muted, #8a91ad); }
.lk-shell .nl-mark.passed i,
.app .nl-mark.passed i { background: var(--accent2, #8b5cf6); }
.lk-shell .nl-mark.on span,
.app .nl-mark.on span { color: var(--accent2, #8b5cf6); }
.lk-shell .nl-ends,
.app .nl-ends { color: var(--muted, #8a91ad); }
.lk-shell .nl-ends span:nth-child(2),
.app .nl-ends span:nth-child(2) { color: var(--ink, #eef0fa); }