/* Motion Studio local branding and interaction polish. */
:root { color-scheme: dark; }

.product-switcher [role="button"] {
  position: relative !important;
  width: 156px !important;
  height: 40px !important;
  padding: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
  border-color: rgba(255, 255, 255, .09) !important;
  background: rgba(18, 20, 19, .94) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24) !important;
}
.product-switcher [role="button"] > * { display: none !important; }
.product-switcher [role="button"]::before {
  content: "M";
  position: absolute;
  left: 8px;
  top: 8px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #e7fbfb, #78d8d2);
  color: #10252b;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.08em;
}
.product-switcher [role="button"]::after {
  content: "Motion Studio";
  position: absolute;
  left: 42px;
  top: 0;
  display: flex;
  height: 40px;
  align-items: center;
  color: #f4f7f2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.product-switcher [role="menu"],
.product-switcher [role="menu"] * { display: none !important; }

button { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease; }
button:focus-visible, input:focus-visible { outline: 2px solid #b9ff5f !important; outline-offset: 2px; }
button[aria-pressed="true"] img { box-shadow: 0 0 0 2px #d4ff86, 0 0 18px rgba(154, 255, 68, .22); }
.parameter-slider { border-radius: 14px; overflow: hidden; background: #1a1d1b; }
.parameter-slider-control { accent-color: #abff48; }
.parameter-slider-content { background: linear-gradient(90deg, rgba(174,255,78,.12), transparent 64%); }
/* Right workspace: compact, technical and specific to Motion Studio. */
.control-panel {
  background: #0b1014 !important;
  border-color: #22303a !important;
  color: #e9f0f3;
}
.control-panel > div:first-child {
  min-height: 68px;
  padding: 18px 20px !important;
  border-color: #22303a !important;
  background: linear-gradient(90deg, #0f181e, #0b1014) !important;
}
.control-panel > div:first-child h2 {
  color: #dce9ee !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.control-panel > .flex-1 {
  padding: 16px !important;
  background-image: linear-gradient(rgba(113, 176, 197, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(113, 176, 197, .035) 1px, transparent 1px);
  background-size: 20px 20px;
}
.control-panel section {
  gap: 12px !important;
  padding: 14px !important;
  border: 1px solid #22303a !important;
  border-radius: 10px !important;
  background: rgba(15, 24, 30, .92) !important;
  box-shadow: none !important;
}
.control-panel section > h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9eb4bf !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.control-panel section > h2::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6de0da;
  box-shadow: 0 0 10px rgba(109, 224, 218, .8);
  content: "";
}
.control-panel button[aria-pressed] {
  border-radius: 8px !important;
  border-color: #2b3c48 !important;
  background: #121d24 !important;
  box-shadow: none !important;
}
.control-panel button[aria-pressed="true"] {
  border-color: #75d8d2 !important;
  background: #d8f3f1 !important;
  color: #0b1820 !important;
}
.control-panel button[aria-pressed="true"] img {
  box-shadow: none !important;
}
.control-panel button[aria-pressed]:hover {
  border-color: #63909b !important;
  background: #192832 !important;
}
.control-panel button[aria-pressed="true"]:hover { background: #c6efeb !important; }
.control-panel .parameter-slider {
  border: 1px solid #253641 !important;
  border-radius: 7px !important;
  background: #101a20 !important;
}
.control-panel .parameter-slider-control,
.control-panel .parameter-slider-control [data-slot="slider-track"] {
  height: 36px !important;
  border-radius: 6px !important;
  background: #101a20 !important;
}
.control-panel .parameter-slider-control [data-slot="slider-range"] {
  background: linear-gradient(90deg, #216c7a, #75d8d2) !important;
}
.control-panel .parameter-slider-content {
  padding: 0 12px !important;
  background: transparent !important;
}
.control-panel .parameter-slider-label {
  color: #c5d4da !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}
.control-panel .parameter-slider-value {
  color: #8de8df !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}
.control-panel .parameter-slider-control [data-slot="slider-thumb"] {
  width: 7px !important;
  height: 22px !important;
  background: #ddfffb !important;
  box-shadow: 0 0 12px rgba(117, 216, 210, .55) !important;
}
.control-panel input[type="color"] {
  border: 1px solid #405764 !important;
  border-radius: 6px !important;
  background: #101a20 !important;
}
.control-panel [data-slot="select-trigger"],
.control-panel button:not([aria-pressed]) {
  border-color: #2b3c48 !important;
  border-radius: 7px !important;
  background: #121d24 !important;
}
.control-panel [data-slot="select-trigger"]:hover,
.control-panel button:not([aria-pressed]):hover { background: #192832 !important; }
.control-panel .flex-1 > form,
.control-panel .flex-1 > div > section + section { margin-top: 0 !important; }
* { scrollbar-color: #385966 transparent; scrollbar-width: thin; }