:is(body.dp-admin-view, body:has(.admin-shell)) input[type="range"]{
  --dial-accent: var(--admin-accent-color, #38bdf8);
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--dial-accent) 34%, transparent);
  border-radius: 999px;
  padding: 0 12px;
  background:
    radial-gradient(circle at calc(var(--range-pct, 50) * 1%) 50%, color-mix(in srgb, var(--dial-accent) 38%, white) 0 10px, transparent 11px),
    linear-gradient(90deg, color-mix(in srgb, var(--dial-accent) 72%, white) 0 calc(var(--range-pct, 50) * 1%), rgba(255,255,255,.12) 0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 28px rgba(0,0,0,.18);
  cursor: pointer;
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="range"].dp-rotary-range{
  width: 100%;
  min-width: 150px;
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="range"]::-webkit-slider-runnable-track{
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 34px;
  height: 34px;
  margin-top: -15px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background:
    conic-gradient(from calc(var(--range-pct, 50) * 3.6deg), rgba(255,255,255,.96), var(--dial-accent), rgba(255,255,255,.96)),
    radial-gradient(circle, #0f172a 0 28%, transparent 30%);
  box-shadow: 0 8px 18px rgba(0,0,0,.32), inset 0 0 0 7px color-mix(in srgb, var(--dial-accent) 32%, #111827);
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="range"]::-moz-range-track{
  height: 4px;
  border-radius: 999px;
  background: transparent;
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="range"]::-moz-range-thumb{
  width: 34px;
  height: 34px;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: var(--dial-accent);
  box-shadow: 0 8px 18px rgba(0,0,0,.32), inset 0 0 0 7px color-mix(in srgb, var(--dial-accent) 32%, #111827);
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="color"]{
  width: 54px;
  max-width: 100%;
  height: 54px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background:
    conic-gradient(#ef4444, #f97316, #facc15, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.28);
  cursor: pointer;
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="color"]::-webkit-color-swatch-wrapper{
  padding: 7px;
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="color"]::-webkit-color-swatch{
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 50%;
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="number"]{
  border-radius: 999px;
}

:is(body.dp-admin-view, body:has(.admin-shell)) .dp-cockpit-field{
  position: relative;
}

:is(body.dp-admin-view, body:has(.admin-shell)) .dp-cockpit-readout{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  max-width: 100%;
  margin-top: .35rem;
  border: 1px solid color-mix(in srgb, var(--admin-accent-color, #38bdf8) 24%, transparent);
  border-radius: 999px;
  background: rgba(11, 17, 24, .92);
  color: var(--cockpit-text, #eef6ff);
  padding: .28rem .55rem .28rem .34rem;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

:is(body.dp-admin-view, body:has(.admin-shell)) .dp-cockpit-readout,
:is(body.dp-admin-view, body:has(.admin-shell)) .dp-cockpit-readout *{
  text-shadow: none!important;
}

:is(body.dp-admin-view, body:has(.admin-shell)) .dp-cockpit-readout::before{
  content: "";
  width: 1.35rem;
  height: 1.35rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.92) 0 7%, transparent 8%),
    conic-gradient(from calc(var(--dial-turn, 0) * 1deg), rgba(255,255,255,.9), var(--admin-accent-color, #38bdf8), rgba(255,255,255,.88)),
    radial-gradient(circle, #111827 0 34%, transparent 35%);
  box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--admin-accent-color, #38bdf8) 32%, #111827), 0 5px 12px rgba(0,0,0,.25);
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="number"].dp-cockpit-number,
:is(body.dp-admin-view, body:has(.admin-shell)) select.dp-cockpit-select{
  min-height: 2.8rem;
  border-radius: 999px!important;
  padding-left: 2.9rem!important;
  background-image:
    radial-gradient(circle at 1.35rem 50%, rgba(255,255,255,.92) 0 4px, transparent 5px),
    conic-gradient(from calc(var(--dial-turn, 0) * 1deg), rgba(255,255,255,.9), var(--admin-accent-color, #38bdf8), rgba(255,255,255,.9))!important;
  background-size: 2.15rem 2.15rem, 2.15rem 2.15rem!important;
  background-position: .42rem 50%, .42rem 50%!important;
  background-repeat: no-repeat!important;
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="checkbox"].dp-cockpit-toggle{
  width: 2.8rem!important;
  height: 1.45rem!important;
  min-height: 1.45rem!important;
  border-radius: 999px!important;
  appearance: none;
  -webkit-appearance: none;
  padding: 0!important;
  background:
    radial-gradient(circle at var(--toggle-x, 24%) 50%, #fff 0 .45rem, transparent .48rem),
    linear-gradient(90deg, var(--admin-accent-color, #38bdf8), color-mix(in srgb, var(--admin-accent-color, #38bdf8) 45%, #111827))!important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 8px 18px rgba(0,0,0,.18);
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="checkbox"].dp-cockpit-toggle:checked{
  --toggle-x: 76%;
}

:is(body.dp-admin-view, body:has(.admin-shell)) input[type="checkbox"].dp-cockpit-toggle:not(:checked){
  filter: saturate(.72) brightness(.82);
}

:is(body.dp-admin-view, body:has(.admin-shell)) .dalle-color-wheel-label{
  margin-top: .25rem;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .78;
}

@media (max-width: 640px){
  :is(body.dp-admin-view, body:has(.admin-shell)) input[type="range"]{
    height: 40px;
  }

  :is(body.dp-admin-view, body:has(.admin-shell)) .dp-cockpit-readout{
    white-space: normal;
  }

  :is(body.dp-admin-view, body:has(.admin-shell)) input[type="number"].dp-cockpit-number,
  :is(body.dp-admin-view, body:has(.admin-shell)) select.dp-cockpit-select{
    padding-left: 2.55rem!important;
    background-size: 1.85rem 1.85rem, 1.85rem 1.85rem!important;
  }
}