/* PMP Create Pro v263 — high-visibility color and opacity controls. */

.context-toolbar .context-color-control {
  min-height: 46px;
  gap: 9px;
  padding: 3px 7px 3px 8px;
  border-color: #769da9;
  background: linear-gradient(145deg, #fff 0%, #edf8f7 58%, #e1f0f3 100%);
  box-shadow: 0 3px 11px rgba(13, 65, 78, .14), inset 0 1px 0 #fff;
}

.context-toolbar .context-color-title {
  grid-template-columns: 40px auto;
  gap: 7px;
}

.context-toolbar .context-color-title b {
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 36%, #fff);
  border-radius: 9px;
  font-size: 25px;
  box-shadow: inset 0 -5px 0 var(--selected-color, currentColor), 0 1px 4px rgba(16, 64, 77, .12);
}

.context-toolbar .context-color-title small {
  font-size: 10px;
  line-height: 1.08;
}

.context-toolbar .context-color-code {
  margin-top: 3px;
  font-size: 9px;
}

.context-toolbar .context-color-control input[type="color"] {
  width: 88px;
  min-width: 88px;
  height: 42px;
  border-width: 2px;
  border-radius: 9px;
}

.context-toolbar .context-text-color-control input[type="color"] {
  width: 104px;
  min-width: 104px;
}

.context-toolbar .context-opacity-control {
  min-height: 46px;
  grid-template-columns: auto 210px 52px 49px;
  gap: 8px;
  padding: 3px 8px 3px 10px;
  border-color: #769da9;
  background: linear-gradient(145deg, #fff 0%, #edf8f7 58%, #e1f0f3 100%);
  font-size: 10px;
  box-shadow: 0 3px 11px rgba(13, 65, 78, .14), inset 0 1px 0 #fff;
}

.context-toolbar .context-opacity-range[type="range"] {
  width: 210px;
  height: 34px;
  background-size: 100% 9px;
}

.context-toolbar .context-opacity-range[type="range"]::-webkit-slider-thumb {
  width: 23px;
  height: 23px;
}

.context-toolbar .context-opacity-range[type="range"]::-moz-range-thumb {
  width: 17px;
  height: 17px;
}

.context-toolbar .context-opacity-number {
  width: 52px;
  min-width: 52px;
  height: 34px;
  font-size: 11px;
}

.context-toolbar .context-opacity-control output {
  min-width: 45px;
  padding-block: 6px;
  font-size: 11px;
}

@media (max-width: 760px) {
  .context-toolbar .context-color-title { grid-template-columns: 38px auto; }
  .context-toolbar .context-color-title b { width: 38px; height: 38px; font-size: 23px; }
  .context-toolbar .context-text-color-control input[type="color"] { width: 82px; min-width: 82px; }
  .context-toolbar .context-opacity-control { grid-template-columns: auto 142px 48px 43px; }
  .context-toolbar .context-opacity-range[type="range"] { width: 142px; }
}