/* StreamCore PRO 2.5.9 — M3U modal visual R2 TEST
   Visual-only, loaded after the compiled bundle.
   Canonical rule: exactly ONE knob per selection control.
   The knob is drawn only by the input background-image; pseudo-elements are
   force-disabled to prevent double-knob conflicts with legacy/previous layers.
*/

:root {
  --sc-m3u-modal-safe-top: 76px;
  --sc-m3u-modal-bottom-gap: 12px;
  --sc-m3u-switch-off: #17344e;
  --sc-m3u-switch-border: rgba(78, 139, 193, .62);
  --sc-m3u-switch-on-a: #138bd0;
  --sc-m3u-switch-on-b: #23b9ed;
  --sc-m3u-switch-knob: #eef9ff;
}

/* Teleported modal: no blackout / no blur, with safe spacing below topbar. */
html body > .m3u-modal-backdrop.completion-backdrop {
  position: fixed !important;
  inset: auto 0 var(--sc-m3u-modal-bottom-gap) 0 !important;
  top: var(--sc-m3u-modal-safe-top) !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 18px 16px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

html body > .m3u-modal-backdrop.completion-backdrop::before,
html body > .m3u-modal-backdrop.completion-backdrop::after {
  content: none !important;
  display: none !important;
}

html body > .m3u-modal-backdrop.completion-backdrop .m3u-source-modal {
  width: min(980px, calc(100vw - 36px)) !important;
  height: min(820px, calc(100dvh - var(--sc-m3u-modal-safe-top) - var(--sc-m3u-modal-bottom-gap) - 24px)) !important;
  max-height: calc(100dvh - var(--sc-m3u-modal-safe-top) - var(--sc-m3u-modal-bottom-gap) - 24px) !important;
  margin: 0 auto !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.035) !important;
}

/*
 * Canonical single-layer switch.
 * Specificity intentionally exceeds the historical R5/R6 selectors bundled
 * inside index-R2M3U.css, so their radial knob cannot remain underneath this
 * visual layer. No ::before/::after knob is used here.
 */
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-category-check-cell input[type="checkbox"],
html body > .m3u-modal-backdrop .m3u-source-modal .switch-line input[type="checkbox"],
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-run-options input[type="checkbox"],
html body > .m3u-modal-backdrop .m3u-source-modal input.native-checkbox[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  display: inline-block !important;
  box-sizing: border-box !important;
  width: 52px !important;
  min-width: 52px !important;
  max-width: 52px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  flex: 0 0 52px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  border: 1px solid var(--sc-m3u-switch-border) !important;
  border-radius: 999px !important;
  background-color: var(--sc-m3u-switch-off) !important;
  background-image: radial-gradient(circle at 14px 50%, var(--sc-m3u-switch-knob) 0 9.5px, transparent 10px) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.26) !important;
  accent-color: transparent !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* Explicitly kill every pseudo knob from any prior visual layer. */
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-category-check-cell input[type="checkbox"]::before,
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-category-check-cell input[type="checkbox"]::after,
html body > .m3u-modal-backdrop .m3u-source-modal .switch-line input[type="checkbox"]::before,
html body > .m3u-modal-backdrop .m3u-source-modal .switch-line input[type="checkbox"]::after,
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-run-options input[type="checkbox"]::before,
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-run-options input[type="checkbox"]::after,
html body > .m3u-modal-backdrop .m3u-source-modal input.native-checkbox[type="checkbox"]::before,
html body > .m3u-modal-backdrop .m3u-source-modal input.native-checkbox[type="checkbox"]::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

html body > .m3u-modal-backdrop .m3u-source-modal .m3u-category-check-cell input[type="checkbox"]:checked,
html body > .m3u-modal-backdrop .m3u-source-modal .switch-line input[type="checkbox"]:checked,
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-run-options input[type="checkbox"]:checked,
html body > .m3u-modal-backdrop .m3u-source-modal input.native-checkbox[type="checkbox"]:checked {
  border-color: #21b8ee !important;
  background-color: var(--sc-m3u-switch-on-a) !important;
  background-image:
    radial-gradient(circle at 38px 50%, #ffffff 0 9.5px, transparent 10px),
    linear-gradient(90deg, var(--sc-m3u-switch-on-a), var(--sc-m3u-switch-on-b)) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
  box-shadow: inset 0 1px rgba(255,255,255,.10), 0 0 10px rgba(35,185,237,.16) !important;
}

html body > .m3u-modal-backdrop .m3u-source-modal .m3u-category-check-cell input[type="checkbox"]:focus-visible,
html body > .m3u-modal-backdrop .m3u-source-modal .switch-line input[type="checkbox"]:focus-visible,
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-run-options input[type="checkbox"]:focus-visible,
html body > .m3u-modal-backdrop .m3u-source-modal input.native-checkbox[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(35,185,237,.24) !important;
  outline-offset: 2px !important;
}

html body > .m3u-modal-backdrop .m3u-source-modal input[type="checkbox"]:disabled {
  opacity: .48 !important;
  cursor: not-allowed !important;
}

/* Layout compensation, preserving the approved modal geometry. */
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-category-check-cell {
  width: 66px !important;
  min-width: 66px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-category-unified-row {
  grid-template-columns: 66px minmax(200px,1fr) minmax(240px,.9fr) !important;
}
html body > .m3u-modal-backdrop .m3u-source-modal .m3u-run-options label {
  min-height: 36px !important;
  align-items: center !important;
}
html body > .m3u-modal-backdrop .m3u-source-modal .switch-line {
  grid-template-columns: auto 52px minmax(0,1fr) !important;
  align-items: center !important;
  justify-content: start !important;
  gap: 12px !important;
}
html body > .m3u-modal-backdrop .m3u-source-modal .switch-line > input[type="checkbox"] {
  grid-column: 2 !important;
  margin: 0 !important;
}
html body > .m3u-modal-backdrop .m3u-source-modal .switch-line > small {
  grid-column: 3 !important;
}

@media (max-width: 700px) {
  :root {
    --sc-m3u-modal-safe-top: 62px;
    --sc-m3u-modal-bottom-gap: 6px;
  }
  html body > .m3u-modal-backdrop.completion-backdrop { padding: 6px !important; }
  html body > .m3u-modal-backdrop.completion-backdrop .m3u-source-modal {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 10px !important;
  }
  html body > .m3u-modal-backdrop .m3u-source-modal .m3u-category-unified-row {
    grid-template-columns: 66px minmax(0,1fr) !important;
  }
}