/* The original control remains the form field. Existing Vue picker mirrors and list boxes are excluded. */
:root[data-zw-pickers] select:not(:where(.ui-select-native,[aria-hidden="true"],[multiple],[size]:not([size="0"],[size="1"]))) {
  color-scheme: dark;
}
:root[data-zw-pickers] select:not(:where(.ui-select-native,[aria-hidden="true"],[multiple],[size]:not([size="0"],[size="1"]))):focus-visible {
  outline: 2px solid #a3a3ae !important;
  outline-offset: 2px;
}
@supports (appearance: base-select) {
  :root[data-zw-pickers] select:not(:where(.ui-select-native,[aria-hidden="true"],[multiple],[size]:not([size="0"],[size="1"]))) {
    appearance: base-select !important;
    background-image: none;
    align-items: center;
    gap: 8px;

    &::picker(select) {
      appearance: base-select;
      box-sizing: border-box;
      margin-block: 5px;
      padding: 4px;
      min-inline-size: max(96px,anchor-size(self-inline));
      max-inline-size: min(420px,calc(100vw - 16px));
      max-block-size: min(330px,55dvh);
      overflow: auto;
      overscroll-behavior: contain;
      border: 1px solid #47474d;
      border-radius: 10px;
      background: #262629;
      color: #eeeef1;
      box-shadow: 0 8px 28px #0007;
      font: inherit;
      scrollbar-color: #65656c transparent;
    }
    &::picker-icon {
      content: '';
      flex: 0 0 auto;
      width: 6px;
      height: 6px;
      margin-inline: auto 2px;
      border: solid currentColor;
      border-width: 0 1.5px 1.5px 0;
      color: #c5c5cc;
      transform: translateY(-2px) rotate(45deg);
    }
    &:open::picker-icon {
      transform: translateY(2px) rotate(225deg);
    }
    & option {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 32px;
      margin: 0;
      padding: 6px 9px;
      border: 0;
      border-radius: 6px;
      background: transparent;
      color: #dedee3;
      font: inherit;
      line-height: 1.35;
      cursor: pointer;
    }
    & option::checkmark {
      order: 1;
      margin-inline-start: auto;
      color: #e5e5eb;
    }
    & option:checked {background:#37373c;color:#fff}
    & option:is(:hover,:focus-visible):enabled {background:#434349;color:#fff;outline:0}
    & option:disabled {color:#888891;cursor:default}
    & option[hidden] {display:none}
  }
}
.zw-native-picker-list {
  position: fixed;
  z-index: 2147483600;
  inset: auto;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 4px;
  border: 1px solid #47474d;
  border-radius: 10px;
  background: #262629;
  color: #eeeef1;
  box-shadow: 0 8px 28px #0007;
  scrollbar-color: #65656c transparent;
}
.zw-native-picker-list [role="option"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 12px;
  min-height: 32px;
  padding: 6px 9px;
  border-radius: 6px;
  color: #dedee3;
  line-height: 1.35;
  cursor: pointer;
}
.zw-native-picker-list [aria-selected="true"] {background:#37373c;color:#fff}
.zw-native-picker-list [aria-selected="true"]::after {
  content:'';
  flex:0 0 auto;
  width:4px;
  height:8px;
  border:solid currentColor;
  border-width:0 1.5px 1.5px 0;
  transform:translateY(-1px) rotate(45deg);
}
.zw-native-picker-list [data-active] {background:#434349;color:#fff}
.zw-native-picker-list [aria-disabled="true"] {color:#888891;cursor:default}
.zw-native-picker-list [role="group"] > span {display:block;padding:6px 9px;color:#a8a8b2;font-size:.88em}
@media (pointer:coarse) {
  :root[data-zw-pickers] select:not(:where(.ui-select-native,[aria-hidden="true"],[multiple],[size]:not([size="0"],[size="1"]))) option,
  .zw-native-picker-list [role="option"] {min-height:44px}
}
@media (forced-colors:active) {
  .zw-native-picker-list [data-active] {outline:1px solid Highlight}
}

/* Studio fields keep their native form binding and their own floating list across engines. */
:root[data-zw-pickers] :is(.studio-shell,.native-panel,.rd-details,.zw-image-editor,.ch-dialog,.zr-dialog,.zve,.vo)
  select:not(:where(.ui-select-native,[aria-hidden="true"],[multiple],[size]:not([size="0"],[size="1"]))) {
  --zw-select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5' stroke='%23babcc9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  appearance:none!important;
  box-sizing:border-box;
  min-width:0;
  max-width:100%;
  min-height:38px;
  margin:0;
  padding:8px 34px 8px 12px;
  border:1px solid #434650;
  border-radius:10px;
  background-color:#26282f;
  background-image:var(--zw-select-chevron),linear-gradient(180deg,#ffffff05,transparent);
  background-position:right 10px center,center;
  background-repeat:no-repeat;
  color:#f2f2f7;
  font:inherit;
  font-weight:500;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 #ffffff05;
  cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease;
}
:root[data-zw-pickers] :is(.studio-shell,.native-panel,.rd-details,.zw-image-editor,.ch-dialog,.zr-dialog,.zve,.vo)
  select:not(.ui-select-native):not([multiple]):enabled:hover {
  border-color:#686b7b;
  background-color:#30323b;
}
:root[data-zw-pickers] :is(.studio-shell,.native-panel,.rd-details,.zw-image-editor,.ch-dialog,.zr-dialog,.zve,.vo)
  select:not(.ui-select-native):not([multiple]):is(:focus-visible,[aria-expanded="true"]) {
  border-color:#9296b6;
  outline:2px solid transparent!important;
  outline-offset:2px;
  box-shadow:0 0 0 3px #a4abef21;
}
:root[data-zw-pickers] :is(.studio-shell,.native-panel,.rd-details,.zw-image-editor,.ch-dialog,.zr-dialog,.zve,.vo)
  select[aria-expanded="true"] {
  --zw-select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4.5 9.5 3.5-3.5 3.5 3.5' stroke='%23dcdef3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color:#2b2d37;
}
:root[data-zw-pickers] :is(.studio-shell,.native-panel,.rd-details,.zw-image-editor,.ch-dialog,.zr-dialog,.zve,.vo)
  select:not(.ui-select-native):not([multiple]):disabled { opacity:.55;cursor:default; }
:root[data-zw-pickers] .zw-image-editor .ie-engine {
  display:flex;flex:0 1 auto;min-width:0;max-width:100%;gap:10px;align-items:center;
}
:root[data-zw-pickers] .zw-image-editor .ie-engine .ie-field-label {
  flex:none;white-space:nowrap;font-size:13px;font-weight:500;color:#b7bac7;
}
:root[data-zw-pickers] .zw-image-editor .ie-engine select {
  width:auto;min-width:min(182px,100%);max-width:min(340px,100%);
}
:root[data-zw-pickers] .ch-month select {
  min-height:34px;
  padding-block:6px;
  font-variant-numeric:tabular-nums;
}
.zw-native-picker-list[data-creator] {
  padding:5px;
  border:1px solid #4a4d5b;
  border-radius:13px;
  background:linear-gradient(150deg,#292b34,#202229 78%);
  color:#f3f3fa;
  box-shadow:0 14px 38px #05060b6b,0 3px 9px #06070c42,inset 0 1px 0 #ffffff09;
  scrollbar-width:thin;
  scrollbar-color:#555967 transparent;
  overscroll-behavior:contain;
  -webkit-tap-highlight-color:transparent;
}
.zw-native-picker-list[data-creator] [role="option"] {
  min-height:38px;gap:10px;padding:8px 11px;border-radius:8px;
  line-height:1.4;color:#d7d9e3;font-weight:450;
  transition:color .12s ease,background-color .12s ease;
}
.zw-native-picker-list[data-creator] [role="option"] > span {
  flex:1;min-width:0;overflow-wrap:anywhere;text-wrap:pretty;
}
.zw-native-picker-list[data-creator] [role="option"][aria-selected="true"] {
  background:#383b4b;color:#f1f1ff;font-weight:560;
}
.zw-native-picker-list[data-creator] [role="option"][aria-selected="true"]::after {
  content:"";display:block;flex:0 0 16px;width:16px;height:16px;border:0;transform:none;
  border-radius:50%;background:#555a78 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4.4 8.1 2.2 2.2 4.9-4.9' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat;
}
.zw-native-picker-list[data-creator] [role="option"][data-active]:not([aria-selected="true"]) {
  background:#34363f;color:white;
}
.zw-native-picker-list[data-creator] [role="option"][aria-disabled="true"] {color:#858895;font-weight:400;}
.zw-native-picker-list[data-creator][data-side] {
  --zw-picker-enter: -4px;
  transform-origin:50% 0;
  animation:zw-creator-picker-in .15s cubic-bezier(.18,.78,.22,1);
}
.zw-native-picker-list[data-creator][data-side="top"] { --zw-picker-enter:4px;transform-origin:50% 100%; }
@keyframes zw-creator-picker-in { from{opacity:0;transform:translateY(var(--zw-picker-enter)) scale(.985)}to{opacity:1;transform:none} }
@media(max-width:520px) {
  :root[data-zw-pickers] .zw-image-editor footer {flex-wrap:wrap;gap:12px;}
  :root[data-zw-pickers] .zw-image-editor .ie-engine {flex:1 1 100%;}
  :root[data-zw-pickers] .zw-image-editor .ie-engine select {flex:1;min-width:0;max-width:100%;}
  :root[data-zw-pickers] .zw-image-editor footer .ie-primary {margin-inline-start:auto;}
}
@media(pointer:coarse) {
  .zw-native-picker-list[data-creator] [role="option"] {min-height:44px;}
}
@media(prefers-reduced-motion:reduce) {
  .zw-native-picker-list[data-creator][data-side],
  .zw-native-picker-list[data-creator] [role="option"],
  :root[data-zw-pickers] :is(.studio-shell,.native-panel,.rd-details,.zw-image-editor,.ch-dialog,.zr-dialog,.zve,.vo) select {
    animation:none;transition:none;
  }
}
@media(forced-colors:active) {
  .zw-native-picker-list[data-creator] [role="option"][aria-selected="true"] {border:1px solid Highlight;}
  :root[data-zw-pickers] :is(.studio-shell,.native-panel,.rd-details,.zw-image-editor,.ch-dialog,.zr-dialog,.zve,.vo) select:focus-visible {outline:2px solid Highlight!important;}
}