/* cm-frame-slider.css */
.cm-frame-slider{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.cm-frame-slider .cm-wrap{ max-width: 900px; margin: 0 auto; padding: 16px; }

.cm-frame-slider .cm-title{ margin:0 0 6px; font-size:20px; font-weight:900; }
.cm-frame-slider .cm-hint{ margin:0 0 14px; color:#555; font-size:13px; }

.cm-frame-slider .cm-sliderBox{ position: relative; padding: 18px 0 8px; }
.cm-frame-slider input[type="range"]{ width:100%; accent-color:#c40000; }

.cm-frame-slider .cm-bubble{
  position:absolute; top:0; transform: translateX(-50%);
  border: 1px solid #000; background:#fff;
  padding: 6px 10px; font-weight: 900; font-size: 13px; line-height: 1;
  user-select:none; pointer-events:none; white-space:nowrap;
}

.cm-frame-slider .cm-cards{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px; }
.cm-frame-slider .cm-card{
  border:1px solid #ddd; background:#fff; padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  cursor:pointer; user-select:none;
}
.cm-frame-slider .cm-left{ display:flex; flex-direction:column; gap:2px; }
.cm-frame-slider .cm-size{ font-weight:900; }
.cm-frame-slider .cm-range{ font-size:13px; color:#666; }

.cm-frame-slider .cm-pill{
  border:1px solid #ddd; padding:6px 10px; font-size:12px; font-weight:900;
  background:#fff; color:#333; min-width:42px; text-align:center; white-space:nowrap;
}

.cm-frame-slider .cm-card.cm-active{
  border-color:#c40000;
  box-shadow:0 0 0 2px rgba(196,0,0,0.12);
}
.cm-frame-slider .cm-card.cm-active .cm-pill{
  border-color:#c40000;
  background:#c40000;
  color:#fff;
}

@media (min-width:700px){
  .cm-frame-slider .cm-cards{ grid-template-columns: 1fr 1fr; }
}