/* Fotor Photo Editor 1.0.276 — stage 2.4b: unified mobile mode, quality and resolution groups. */

@media (max-width: 768px) {
  /* A setting group is a row of controls, not another framed control around them. */
  #fotor-root .m-native-seg,
  #fotor-root .ti-mobile-mode-tabs,
  #fotor-root .sg-agent-mode-tabs,
  #fotor-root .ai-agent__modes,
  #fotor-root .ai-agent-modes,
  #fotor-root .ai-agent-quality {
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #fotor-root .m-native-seg-btn,
  #fotor-root .ti-mobile-mode-tabs > button,
  #fotor-root .sg-agent-mode-tab,
  #fotor-root .ai-agent__mode,
  #fotor-root .ai-agent-mode,
  #fotor-root .ai-agent-quality-btn {
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 10px !important;
    background: #11161e !important;
    color: rgba(218, 226, 236, .80) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
  }

  #fotor-root .m-native-seg-btn.is-active,
  #fotor-root .m-native-seg-btn[aria-pressed="true"],
  #fotor-root .ti-mobile-mode-tabs > button.active,
  #fotor-root .ti-mobile-mode-tabs > button[aria-pressed="true"],
  #fotor-root .sg-agent-mode-tab.is-active,
  #fotor-root .sg-agent-mode-tab[aria-pressed="true"],
  #fotor-root .ai-agent__mode.active,
  #fotor-root .ai-agent__mode.is-active,
  #fotor-root .ai-agent__mode[aria-pressed="true"],
  #fotor-root .ai-agent-mode.active,
  #fotor-root .ai-agent-mode.is-active,
  #fotor-root .ai-agent-mode[aria-pressed="true"],
  #fotor-root .ai-agent-quality-btn.is-active,
  #fotor-root .ai-agent-quality-btn[aria-pressed="true"] {
    border-color: rgba(76, 151, 247, .70) !important;
    background: #17365f !important;
    color: #f6f9ff !important;
    box-shadow: inset 0 0 0 1px rgba(101, 171, 255, .10) !important;
  }

  #fotor-root .sg-agent-mode-tab[data-agent-mode="adult"].is-active,
  #fotor-root .sg-agent-mode-tab[data-agent-mode="adult"][aria-pressed="true"],
  #fotor-root .ti-mobile-mode-tabs > button.hot.active,
  #fotor-root .ti-mobile-mode-tabs > button.hot[aria-pressed="true"] {
    border-color: rgba(226, 82, 132, .68) !important;
    background: #542139 !important;
    color: #fff5f8 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 137, 177, .08) !important;
  }

  #fotor-root .m-native-seg-btn:focus-visible,
  #fotor-root .ti-mobile-mode-tabs > button:focus-visible,
  #fotor-root .sg-agent-mode-tab:focus-visible,
  #fotor-root .ai-agent__mode:focus-visible,
  #fotor-root .ai-agent-mode:focus-visible,
  #fotor-root .ai-agent-quality-btn:focus-visible {
    outline: 2px solid rgba(105, 174, 255, .90) !important;
    outline-offset: 2px !important;
  }

  /* Keep the compact upscale panel inside its established 98 px height. */
  #fotor-root .left-panel--tool-upscale .m-native-seg-btn {
    height: 36px !important;
    min-height: 36px !important;
  }
}

@media (max-width: 370px) {
  #fotor-root .ti-mobile-mode-tabs > button,
  #fotor-root .sg-agent-mode-tab,
  #fotor-root .ai-agent__mode,
  #fotor-root .ai-agent-mode,
  #fotor-root .ai-agent-quality-btn {
    padding-inline: 7px !important;
    font-size: 10.5px !important;
  }
}