/* Shared presentation for the remaining native invoice/account/payment controls. */
body :is(.xgpu-invoice-dialog,.xgpu-account-field,.xgpu-prepaid-field,[data-c-topup-form]) { color-scheme: dark; }
body :is(.xgpu-invoice-dialog,.xgpu-account-field,.xgpu-prepaid-field,[data-c-topup-form]) select {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23c8b0ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
body :is(.xgpu-invoice-dialog,.xgpu-account-field,.xgpu-prepaid-field,[data-c-topup-form]) :is(option,optgroup) { background: #17121f; color: #f4edf9; }
body :is(.xgpu-invoice-dialog,.xgpu-account-field) input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
body :is(.xgpu-invoice-dialog,.xgpu-account-field) input[type="number"]::-webkit-inner-spin-button,
body :is(.xgpu-invoice-dialog,.xgpu-account-field) input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.xgpu-account-body :is(input[type="checkbox"],input[type="radio"]), body :is(.xgpu-invoice-dialog,[data-c-topup-form]) :is(input[type="checkbox"],input[type="radio"]) { accent-color: #a978ff; }
/* Hide only after enhancement succeeds; the field remains in FormData/validation. */
body select.xgpu-field-select-native { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; clip-path: inset(50%); overflow: hidden; white-space: nowrap; pointer-events: none; }
body .xgpu-field-select { display: block; min-width: 0; width: 100%; }
body .xgpu-field-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #655273; border-radius: 7px; background: #100d18; color: #f4edf9; font: inherit; line-height: 1.5; text-align: left; cursor: pointer; box-sizing: border-box; }
body .xgpu-field-select-value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
body .xgpu-field-select-trigger::after { content: ''; flex: 0 0 7px; height: 7px; margin: -4px 3px 0; border-right: 2px solid #c8b0ff; border-bottom: 2px solid #c8b0ff; transform: rotate(45deg); }
body .xgpu-field-select-trigger:hover:not(:disabled), body .xgpu-field-select-trigger[aria-expanded="true"] { border-color: #ae86df; background: #21192d; }
body .xgpu-field-select-trigger:focus-visible { outline: 2px solid #c8b0ff; outline-offset: 3px; }
body .xgpu-field-select-trigger:disabled { opacity: .6; cursor: not-allowed; }
body .xgpu-field-select-trigger[aria-invalid="true"] { border-color: #ffb4ba; }
body .xgpu-field-select-menu { position: fixed; z-index: 100100; box-sizing: border-box; margin: 0; padding: 5px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #80629c; border-radius: 9px; background: #17121f; color: #f4edf9; font: 14px/1.45 system-ui, sans-serif; box-shadow: 0 12px 40px #0007; scrollbar-width: thin; scrollbar-color: #80629c #17121f; }
body .xgpu-field-select-menu[hidden], body .xgpu-field-select-option[hidden] { display: none !important; }
body .xgpu-field-select-option { position: relative; min-height: 42px; box-sizing: border-box; padding: 10px 30px 10px 10px; border-radius: 5px; overflow-wrap: anywhere; cursor: pointer; }
body .xgpu-field-select-option:hover, body .xgpu-field-select-option.is-active { background: #352447; }
body .xgpu-field-select-option[aria-selected="true"] { background: #291d3e; color: #eee5ff; box-shadow: inset 2px 0 #bd9bff; }
body .xgpu-field-select-option[aria-selected="true"]::after { content: '✓'; position: absolute; right: 10px; color: #c8b0ff; }
body .xgpu-field-select-option[aria-disabled="true"] { color: #aa9db5; opacity: .65; cursor: not-allowed; background: transparent; }
body .xgpu-field-select-group { padding: 9px 10px 4px; color: #c1b5ca; font-size: 12px; font-weight: 600; }
@media (forced-colors: active) {
  body .xgpu-field-select-trigger, body .xgpu-field-select-menu { border-color: ButtonText; }
  body .xgpu-field-select-option.is-active { outline: 1px solid Highlight; }
  body .xgpu-field-select-option[aria-selected="true"] { border-left: 3px solid Highlight; }
}

/* Compact configuration fields: the persistent label shares the control's
 * outline. Keep labels in normal flow so translated/zoomed captions can wrap;
 * the native values, associated labels and dropdown handlers stay unchanged. */
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field {
  position: relative; display: flex; flex-direction: column; gap: 0;
  min-width: 0; padding: 0; border: 1px solid #655273; border-radius: 7px;
  background: #100d18; color: #f4edf9; box-sizing: border-box;
}
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field > :is(span:first-child,label:first-child) {
  display: block; margin: 0; padding: 6px 12px 0; color: #b9a7c7;
  font-size: 11px; font-weight: 400; line-height: 1.35; overflow-wrap: anywhere;
}
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field :is(input,select,.xgpu-m-select-trigger,.xgpu-field-select-trigger):not(.xgpu-m-select-native):not(.xgpu-field-select-native) {
  width: 100%; min-width: 0; min-height: 36px; height: auto;
  padding-top: 3px; padding-bottom: 8px; padding-left: 12px;
  border: 0; border-radius: 6px; background-color: transparent;
  color: #f4edf9; font-size: 14px; font-weight: 400; line-height: 1.5;
  box-shadow: none; box-sizing: border-box;
}
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field :is(.xgpu-m-select-trigger,.xgpu-field-select-trigger) { position: static; }
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field > .xgpu-m-select { position: static; }
body .xgpu-compact-field .xgpu-storage-size-control { padding-right: 12px; }
/* The complete labeled field, including its caption, is a touch target. */
body .xgpu-compact-field .xgpu-m-select-trigger::before,
body .xgpu-compact-field .xgpu-field-select-trigger::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field:has(:is(input,select,button):not(:disabled)):is(:hover,:focus-within),
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field:has([aria-expanded="true"]) { border-color: #ae86df; background-color: #21192d; }
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field:has(:focus-visible) { border-color: #c8b0ff; outline: none; box-shadow: 0 0 0 1px #c8b0ff; }
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field :is(input,select,button):focus-visible { outline: none; }
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field:has([aria-invalid="true"]) { border-color: #ffb4ba; }
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field :is(input,select,button):disabled { color: #a99aba; cursor: not-allowed; }
body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field[hidden] { display: none; }
@media (forced-colors: active) { body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field { border-color: ButtonText; } body .xgpu-compact-field.xgpu-compact-field.xgpu-compact-field:has(:focus-visible) { outline: 2px solid Highlight; outline-offset: 2px; } }