/*
 * Shared Apple-inspired filter and selection system.
 * This final layer normalizes filters, popovers, pagination controls and
 * selection feedback without changing page layout or business data states.
 */

:root {
  --af-control-bg: rgba(248, 248, 250, .72);
  --af-control-bg-hover: rgba(255, 255, 255, .86);
  --af-popover-bg: rgba(248, 248, 250, .88);
  --af-popover-edge: rgba(60, 60, 67, .13);
  --af-line: rgba(60, 60, 67, .16);
  --af-line-strong: rgba(60, 60, 67, .22);
  --af-selected: transparent;
  --af-hover: rgba(118, 118, 128, .085);
  --af-shadow-control: inset 0 1px 0 rgba(255, 255, 255, .9), 0 .5px 1px rgba(15, 23, 42, .08), 0 2px 8px rgba(15, 23, 42, .035);
  /* Airy Apple-like depth: one broad ambient shadow, no dark contact halo. */
  --af-shadow-popover: 0 22px 60px rgba(60, 60, 67, .055), inset 0 1px 0 rgba(255, 255, 255, .94);
}

/* Resting filters use a soft layered material instead of flat white. */
.custom-select-trigger,
.store-choice-trigger,
.date-picker-trigger,
.month-choice-control,
.pagination select,
.pagination-jump input,
.filters input:not([type="checkbox"]):not([type="radio"]),
.orders-toolbar input:not([type="checkbox"]):not([type="radio"]),
.orders-toolbar select,
.store-data-filters input:not([type="checkbox"]):not([type="radio"]),
.store-data-filters select,
.ad-report-filter-toolbar input:not([type="checkbox"]):not([type="radio"]),
.ad-report-filter-toolbar select,
.ad-data-toolbar input:not([type="checkbox"]):not([type="radio"]),
.ad-data-toolbar select,
.facebook-account-toolbar input:not([type="checkbox"]):not([type="radio"]),
.facebook-account-toolbar select,
.shopify-preview-toolbar input:not([type="checkbox"]):not([type="radio"]),
.shopify-preview-toolbar select,
.workbench-directory-tools input:not([type="checkbox"]):not([type="radio"]),
.workbench-directory-tools select,
.ad-data-head-filters input:not([type="checkbox"]):not([type="radio"]),
.ad-data-head-filters select,
.ad-report-date-toolbar input:not([type="checkbox"]):not([type="radio"]),
.ad-report-date-toolbar select,
.automation-mode-toolbar input:not([type="checkbox"]):not([type="radio"]),
.automation-mode-toolbar select,
.page-toolbar input:not([type="checkbox"]):not([type="radio"]),
.page-toolbar select,
.team-assignment-toolbar input:not([type="checkbox"]):not([type="radio"]),
.team-assignment-toolbar select {
  border-color: var(--af-line-strong) !important;
  border-radius: 10px !important;
  background: var(--af-control-bg) !important;
  color: var(--ta-ink) !important;
  box-shadow: var(--af-shadow-control) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

.custom-select-trigger:hover,
.store-choice-trigger:hover,
.date-picker-trigger:hover,
.month-choice-control:hover,
.pagination-jump input:hover,
.pagination select:hover,
.filters input:not([type="checkbox"]):not([type="radio"]):hover,
.orders-toolbar input:not([type="checkbox"]):not([type="radio"]):hover,
.store-data-filters input:not([type="checkbox"]):not([type="radio"]):hover,
.ad-report-filter-toolbar input:not([type="checkbox"]):not([type="radio"]):hover,
.ad-data-toolbar input:not([type="checkbox"]):not([type="radio"]):hover,
.facebook-account-toolbar input:not([type="checkbox"]):not([type="radio"]):hover,
.workbench-directory-tools input:not([type="checkbox"]):not([type="radio"]):hover,
.ad-data-head-filters input:not([type="checkbox"]):not([type="radio"]):hover,
.ad-report-date-toolbar input:not([type="checkbox"]):not([type="radio"]):hover,
.automation-mode-toolbar input:not([type="checkbox"]):not([type="radio"]):hover,
.page-toolbar input:not([type="checkbox"]):not([type="radio"]):hover,
.team-assignment-toolbar input:not([type="checkbox"]):not([type="radio"]):hover {
  border-color: rgba(60, 60, 67, .38) !important;
  background: var(--af-control-bg-hover) !important;
}

/* Keep the ad-data search pair on one fixed track so their edges share exact pixels. */
.ad-data-head-filters .ad-data-search-control {
  box-sizing: border-box;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 6px;
}

.ad-data-head-filters #ad-data-keyword,
.ad-data-head-filters #ad-data-keyword-submit {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  align-self: stretch !important;
  margin: 0 !important;
  border-radius: 10px !important;
}

.ad-data-head-filters #ad-data-keyword {
  min-width: 0;
  flex: 1 1 auto;
}

.ad-data-head-filters #ad-data-keyword-submit {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  flex: 0 0 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px !important;
  padding-block: 0 !important;
  line-height: 1;
}

.custom-select-wrap.open .custom-select-trigger,
.store-choice-trigger[aria-expanded="true"],
.date-picker-field:has(.date-picker-popover:not(.hidden)) .date-picker-trigger,
.custom-select-trigger:focus-visible,
.store-choice-trigger:focus-visible,
.date-picker-trigger:focus-visible,
.pagination select:focus-visible,
.pagination-jump input:focus-visible,
.filters input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.orders-toolbar input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.store-data-filters input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.ad-report-filter-toolbar input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.ad-data-toolbar input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.facebook-account-toolbar input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.workbench-directory-tools input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.ad-data-head-filters input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.ad-report-date-toolbar input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.automation-mode-toolbar input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.page-toolbar input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.team-assignment-toolbar input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  border-color: var(--ta-primary) !important;
  background: rgba(247, 249, 252, .96) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 113, 227, .18), var(--af-shadow-control) !important;
}

/* Floating controls share the same translucent depth and edge treatment. */
.custom-select-menu,
.store-choice-popover,
.date-picker-popover,
.member-popover,
.order-assignee-popover,
.order-product-popover {
  border: 1px solid var(--af-popover-edge) !important;
  border-radius: 14px !important;
  background: var(--af-popover-bg) !important;
  box-shadow: var(--af-shadow-popover) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}

.custom-select-menu {
  gap: 3px !important;
  padding: 7px !important;
}

.custom-select-wrap.open {
  z-index: 220 !important;
}

.custom-select-wrap.open .custom-select-menu {
  transform-origin: top left !important;
}

.custom-select-option {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  color: var(--ta-ink-soft) !important;
  font-weight: 560 !important;
}

.custom-select-option:hover {
  background: var(--af-hover) !important;
  color: var(--ta-ink) !important;
}

.custom-select-option.selected,
.custom-select-option.selected:hover {
  background: transparent !important;
  color: var(--ta-ink) !important;
}

.custom-select-option.selected::after {
  content: "";
  width: 8px;
  height: 4px;
  margin-left: auto;
  border-left: 1.7px solid var(--ta-primary);
  border-bottom: 1.7px solid var(--ta-primary);
  transform: translateY(-1px) rotate(-45deg);
}

.store-choice-popover {
  padding: 8px !important;
}

.store-choice-popover-head,
.member-popover-head,
.order-assignee-popover-head,
.order-product-popover-head {
  min-height: 36px;
  padding: 5px 7px 9px !important;
  border-bottom-color: var(--af-line) !important;
  background: transparent !important;
}

.store-choice-popover-head strong,
.member-popover-head strong,
.order-assignee-popover-head strong,
.order-product-popover-head strong {
  color: var(--ta-ink) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.store-choice-popover-head span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(118, 118, 128, .12);
  color: #515154 !important;
  font-size: 10.5px !important;
  font-weight: 650 !important;
}

.store-choice-list,
.checkbox-list,
.fixed-checkbox-list {
  border-color: var(--af-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.store-choice-list {
  gap: 3px !important;
  padding: 8px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.checkbox-line,
.order-assignee-list label {
  min-height: 32px !important;
  border-radius: 9px !important;
  color: var(--ta-ink-soft) !important;
  transition: background-color 100ms ease, color 100ms ease !important;
}

.checkbox-line:hover,
.order-assignee-list label:hover {
  background: var(--af-hover) !important;
  color: var(--ta-ink) !important;
}

.checkbox-line:has(input:checked),
.checkbox-line:has(input:indeterminate),
.order-assignee-list label:has(input:checked) {
  background: transparent !important;
  color: var(--ta-ink) !important;
}

.checkbox-line:has(input:checked):hover,
.checkbox-line:has(input:indeterminate):hover,
.order-assignee-list label:has(input:checked):hover {
  background: var(--af-hover) !important;
}

/*
 * Apple-style segmented controls use one neutral track and a raised white
 * selection. Blue is reserved for focus, checkmarks and primary actions.
 */
.ad-data-mode-switch,
.store-data-mode-switch,
.orders-report-switch,
.automation-mode-switch,
.facebook-report-level-tabs,
.facebook-account-tabs,
.apple-segmented-control {
  box-sizing: border-box;
  width: fit-content !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 2px !important;
  border: 1px solid rgba(60, 60, 67, .14) !important;
  border-radius: 10px !important;
  background: rgba(246, 246, 248, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 1px 5px rgba(15, 23, 42, .06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

.ad-data-mode-switch button,
.store-data-mode-switch button,
.orders-report-switch button,
.automation-mode-switch button,
.facebook-report-level-tabs button,
.facebook-account-tabs button,
.apple-segmented-control > button {
  box-sizing: border-box;
  min-width: 96px !important;
  height: 28px !important;
  min-height: 28px !important;
  flex: 1 1 0 !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #3a3a3c !important;
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: background-color 120ms ease, box-shadow 120ms ease, color 120ms ease, transform 100ms cubic-bezier(.23, 1, .32, 1) !important;
}

.ad-data-mode-switch button:hover,
.store-data-mode-switch button:hover,
.orders-report-switch button:hover,
.automation-mode-switch button:hover,
.facebook-report-level-tabs button:hover,
.facebook-account-tabs button:hover,
.apple-segmented-control > button:hover {
  background: rgba(255, 255, 255, .58) !important;
  color: #1d1d1f !important;
}

.ad-data-mode-switch button.active,
.store-data-mode-switch button.active,
.orders-report-switch button.active,
.automation-mode-switch button.active,
.facebook-report-level-tabs button.active,
.facebook-account-tabs button.active,
.apple-segmented-control > button.active,
.apple-segmented-control > button[aria-selected="true"] {
  border-color: rgba(60, 60, 67, .08) !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #1d1d1f !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12), 0 .5px 0 rgba(255, 255, 255, .98) inset !important;
}

.ad-data-mode-switch button:active:not(:disabled),
.store-data-mode-switch button:active:not(:disabled),
.orders-report-switch button:active:not(:disabled),
.automation-mode-switch button:active:not(:disabled),
.facebook-report-level-tabs button:active:not(:disabled),
.facebook-account-tabs button:active:not(:disabled),
.apple-segmented-control > button:active:not(:disabled) {
  transform: scale(.985);
}

.ad-data-mode-switch button:focus-visible,
.store-data-mode-switch button:focus-visible,
.orders-report-switch button:focus-visible,
.automation-mode-switch button:focus-visible,
.facebook-report-level-tabs button:focus-visible,
.facebook-account-tabs button:focus-visible,
.apple-segmented-control > button:focus-visible {
  outline: 3px solid rgba(0, 113, 227, .22) !important;
  outline-offset: 1px !important;
}

.automation-mode-switch button:disabled {
  background: transparent !important;
  color: rgba(60, 60, 67, .42) !important;
  opacity: 1;
}

/* Keep the advertising-data mode bar spatially identical to automation. */
@media (min-width: 761px) {
  #app-shell #view #ad-data-content .ad-data-shared-mode-head {
    box-sizing: border-box;
    height: 48px !important;
    min-height: 48px !important;
    padding: 5px 8px !important;
    gap: 8px !important;
  }

  #app-shell #view #ad-data-content .ad-data-shared-mode-head .ad-data-mode-switch,
  #app-shell #view #ad-automation-content .automation-mode-switch {
    width: 200px !important;
    min-width: 200px !important;
  }

  #app-shell #view #ad-data-content .ad-data-shared-mode-head .ad-data-mode-switch > button {
    width: 96px !important;
    min-width: 96px !important;
    flex: 1 1 0 !important;
    padding-inline: 6px !important;
  }
}

.store-choice-list .checkbox-line:first-child {
  margin: 0 0 3px;
  padding: 6px 7px 9px !important;
  border-bottom-color: var(--af-line) !important;
  font-weight: 650 !important;
}

.store-choice-actions,
.order-assignee-actions {
  margin: 0 -1px -1px;
  padding: 9px 2px 1px !important;
  border-top-color: var(--af-line) !important;
  background: transparent !important;
}

/* One quiet base layer supports every shared glass control. */
.filters,
.orders-toolbar,
.workbench-directory-tools,
.ad-report-filter-toolbar,
.ad-report-date-toolbar,
.ad-data-head-filters,
.facebook-account-toolbar,
.automation-mode-toolbar,
.team-assignment-toolbar {
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.filter-label,
.filters > label,
.workbench-directory-tools > label {
  color: #3a3a3c !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.date-picker-trigger,
.store-choice-trigger,
.custom-select-trigger {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 10px 0 12px !important;
  border: 1px solid var(--af-line-strong) !important;
  border-radius: 9px !important;
  background: var(--af-control-bg) !important;
  box-shadow: var(--af-shadow-control) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  transition: transform 110ms cubic-bezier(.23, 1, .32, 1), border-color 120ms ease, box-shadow 120ms ease, background 120ms ease !important;
}

.date-picker-trigger:hover,
.store-choice-trigger:hover,
.custom-select-trigger:hover {
  border-color: rgba(60, 60, 67, .44) !important;
  background: var(--af-control-bg-hover) !important;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(15, 23, 42, .1) !important;
}

.date-picker-trigger:active,
.store-choice-trigger:active,
.custom-select-trigger:active {
  transform: scale(.985);
  background: rgba(235, 235, 238, .8) !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .1) !important;
}

.date-picker-trigger strong,
.store-choice-trigger strong,
.custom-select-trigger .custom-select-value {
  overflow: hidden;
  color: #1d1d1f !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: -.006em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-picker-trigger i,
.store-choice-trigger i,
.custom-select-chevron {
  display: inline-grid !important;
  flex: 0 0 16px;
  width: 16px !important;
  height: 16px !important;
  margin-left: 8px !important;
  place-items: center;
  border-radius: 0 !important;
  background: transparent !important;
  color: #515154 !important;
  font-size: 12px !important;
  font-style: normal !important;
  line-height: 16px !important;
}

.date-picker-trigger::before,
.store-data-store-filter .store-choice-trigger::before,
.orders-store-field .store-choice-trigger::before,
.store-data-member-filter .store-choice-trigger::before,
.orders-member-field .store-choice-trigger::before,
.ad-data-member-filter .store-choice-trigger::before,
.ad-report-member-filter .store-choice-trigger::before,
.facebook-account-member-filter .store-choice-trigger::before,
.automation-member-filter .store-choice-trigger::before {
  content: none !important;
  display: none !important;
}

.date-picker-trigger::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3.5' width='12' height='10.5' rx='2' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M2 6.5h12M5 2v3M11 2v3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='3.5' width='12' height='10.5' rx='2' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M2 6.5h12M5 2v3M11 2v3' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.store-data-store-filter .store-choice-trigger::before,
.orders-store-field .store-choice-trigger::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.2 6.2h11.6v7.2H2.2zM1.5 6.2l1.4-3.6h10.2l1.4 3.6M5.2 13.4V9.2h5.6v4.2' fill='none' stroke='black' stroke-width='1.35' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.2 6.2h11.6v7.2H2.2zM1.5 6.2l1.4-3.6h10.2l1.4 3.6M5.2 13.4V9.2h5.6v4.2' fill='none' stroke='black' stroke-width='1.35' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.store-data-member-filter .store-choice-trigger::before,
.orders-member-field .store-choice-trigger::before,
.ad-data-member-filter .store-choice-trigger::before,
.ad-report-member-filter .store-choice-trigger::before,
.facebook-account-member-filter .store-choice-trigger::before,
.automation-member-filter .store-choice-trigger::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.2' r='2.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M3.2 13.4c.45-2.45 2.2-3.8 4.8-3.8s4.35 1.35 4.8 3.8' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='5.2' r='2.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3Cpath d='M3.2 13.4c.45-2.45 2.2-3.8 4.8-3.8s4.35 1.35 4.8 3.8' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Checked and mixed marks always win over pointer hover. */
input[type="checkbox"]:checked:hover:not(:disabled),
input[type="checkbox"]:indeterminate:hover:not(:disabled),
input[type="radio"]:checked:hover:not(:disabled) {
  border-color: var(--ta-primary) !important;
  background: var(--ta-primary) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 113, 227, .2) !important;
}

input[type="checkbox"]:checked:hover:not(:disabled)::before,
input[type="checkbox"]:indeterminate:hover:not(:disabled)::before,
input[type="radio"]:checked:hover:not(:disabled)::before {
  opacity: 1 !important;
}

input[type="checkbox"]:checked:hover:not(:disabled)::before {
  transform: translateY(-1px) rotate(45deg) scale(1) !important;
}

input[type="checkbox"]:indeterminate:hover:not(:disabled)::before {
  width: 8px !important;
  height: 2px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  transform: none !important;
}

/* Date picker surfaces remain distinct without large pure-white panels. */
.date-picker-popover .quick-ranges {
  border-right-color: var(--af-line) !important;
  background: rgba(118, 118, 128, .055) !important;
}

.date-picker-popover .picker-main {
  background: transparent !important;
}

.date-picker-popover .picker-selected span,
.date-picker-popover .calendar-nav {
  border-color: var(--af-line) !important;
  background: rgba(255, 255, 255, .48) !important;
}

/* Secondary actions use the same material as filters, not another button skin. */
.button.secondary,
.table-actions .button:not(.primary):not(.danger),
.store-choice-actions .button:not(.primary):not(.danger),
.order-assignee-actions .button:not(.primary):not(.danger) {
  border: 1px solid var(--af-line-strong) !important;
  border-radius: 9px !important;
  background: var(--af-control-bg) !important;
  color: #1d1d1f !important;
  box-shadow: var(--af-shadow-control) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

.button.secondary:hover,
.table-actions .button:not(.primary):not(.danger):hover,
.store-choice-actions .button:not(.primary):not(.danger):hover,
.order-assignee-actions .button:not(.primary):not(.danger):hover {
  background: var(--af-control-bg-hover) !important;
}

/*
 * Segmented controls are one component, never a row of ordinary buttons.
 * This final integrity layer intentionally comes after the shared action
 * styles so historical primary/secondary rules cannot split the track.
 */
.apple-segmented-control > button {
  min-width: 96px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #3a3a3c !important;
  box-shadow: none !important;
}

.apple-segmented-control > button.active,
.apple-segmented-control > button[aria-selected="true"] {
  border-color: rgba(60, 60, 67, .08) !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #1d1d1f !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12), 0 .5px 0 rgba(255, 255, 255, .98) inset !important;
}

/*
 * Global control authority layer. Page-level legacy selectors may remain in
 * the bundle, but every shared component resolves through these classes.
 */
#app-shell #view .apple-segmented-control {
  box-sizing: border-box !important;
  width: fit-content !important;
  min-width: 0 !important;
  height: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 2px !important;
  border: 1px solid rgba(60, 60, 67, .14) !important;
  border-radius: 10px !important;
  background: rgba(246, 246, 248, .62) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 1px 5px rgba(15, 23, 42, .06) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

#app-shell #view .apple-segmented-control > button {
  box-sizing: border-box !important;
  min-width: 96px !important;
  height: 28px !important;
  min-height: 28px !important;
  flex: 1 1 0 !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #3a3a3c !important;
  box-shadow: none !important;
}

#app-shell #view .apple-segmented-control > button.active,
#app-shell #view .apple-segmented-control > button[aria-selected="true"] {
  border-color: rgba(60, 60, 67, .08) !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #1d1d1f !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12), 0 .5px 0 rgba(255, 255, 255, .98) inset !important;
}

#app-shell #view :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger, .month-choice-control),
#app-shell #view .pagination select,
#app-shell #view .pagination-jump input {
  border: 1px solid var(--af-line-strong) !important;
  border-radius: 9px !important;
  background: var(--af-control-bg) !important;
  box-shadow: var(--af-shadow-control) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

#app-shell #view :is(.custom-select-trigger, .store-choice-trigger, .date-picker-trigger) {
  height: 34px !important;
  min-height: 34px !important;
}

/* Scrollable campaign/plan tabs keep their colour identity, but share the
 * same quiet glass rail, edge radius and pressed depth as the other controls. */
#app-shell #view .ad-data-report-tabs-shell:has(.apple-scroll-tabs) {
  border-top: 1px solid var(--af-line) !important;
  background: rgba(246, 246, 248, .72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

#app-shell #view .apple-scroll-tabs > .ad-data-report-tab {
  height: 26px !important;
  min-height: 26px !important;
  border: 1px solid color-mix(in srgb, var(--ad-tab-border, #8e8e93) 54%, transparent) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
}

#app-shell #view .apple-scroll-tabs > .ad-data-report-tab.active {
  box-shadow: inset 0 -2px 0 var(--ad-tab-accent, var(--ta-primary)), 0 1px 4px rgba(15, 23, 42, .10) !important;
}

/* Read-only values sit directly on their glass container. A second tinted
 * rectangle adds no hierarchy and makes the field look editable. */
#modal-root .store-app-config-value code {
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1d1d1f !important;
  box-shadow: none !important;
}

/* Page size and jump controls are a compact member of the same system. */
.pagination {
  background: rgba(246, 247, 250, .82) !important;
}

.pagination .custom-select-wrap {
  width: 88px !important;
}

.pagination .custom-select-trigger,
.pagination select,
.pagination-jump input {
  min-height: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: var(--af-control-bg) !important;
}

.pagination .custom-select-menu {
  width: 118px !important;
  min-width: 118px !important;
  border-radius: 13px !important;
  transform-origin: bottom center;
}

@media (prefers-reduced-motion: reduce) {
  .custom-select-chevron,
  .custom-select-menu,
  .checkbox-line,
  input[type="checkbox"],
  input[type="radio"] {
    transition: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .custom-select-trigger,
  .store-choice-trigger,
  .date-picker-trigger,
  .ad-data-mode-switch,
  .store-data-mode-switch,
  .orders-report-switch,
  .automation-mode-switch,
  .custom-select-menu,
  .store-choice-popover,
  .date-picker-popover,
  .member-popover,
  .order-assignee-popover,
  .order-product-popover {
    background: #f2f2f5 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .custom-select-trigger,
  .store-choice-trigger,
  .date-picker-trigger,
  .pagination-jump input,
  .custom-select-menu,
  .store-choice-popover,
  .date-picker-popover {
    border-color: rgba(29, 29, 31, .58) !important;
  }
}