/* Fotor Photo Editor 1.0.182 — final mobile consistency / de-glass pass. */
@media (max-width: 768px) {
  /* 1) Version history: two quiet Lucide-style controls, no old gray capsule. */
  #fotor-root .editor-shell.is-mobile .ws-float-controls.is-mobile-floating,
  #fotor-root .editor-shell.is-mobile.has-mtool-controls .ws-float-controls.is-mobile-floating {
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    padding: 0 !important;
    gap: 5px !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 .editor-shell.is-mobile .ws-float-controls.is-mobile-floating .fc-btn[data-role="undo"],
  #fotor-root .editor-shell.is-mobile .ws-float-controls.is-mobile-floating .fc-btn[data-role="redo"] {
    display: grid !important;
    place-items: center !important;
    width: 31px !important;
    min-width: 31px !important;
    height: 31px !important;
    min-height: 31px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 10px !important;
    background: rgba(14,18,24,.92) !important;
    color: rgba(235,240,247,.91) !important;
    box-shadow: 0 4px 11px rgba(0,0,0,.24) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: 0 !important;
    text-shadow: none !important;
  }

  #fotor-root .editor-shell.is-mobile .ws-float-controls.is-mobile-floating .fc-btn[data-role="undo"]::before,
  #fotor-root .editor-shell.is-mobile .ws-float-controls.is-mobile-floating .fc-btn[data-role="redo"]::before {
    content: "" !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    background: currentColor !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
  }

  #fotor-root .editor-shell.is-mobile .ws-float-controls.is-mobile-floating .fc-btn[data-role="undo"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 18-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 18-6-6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  #fotor-root .editor-shell.is-mobile .ws-float-controls.is-mobile-floating .fc-btn[data-role="redo"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  #fotor-root .editor-shell.is-mobile .ws-float-controls.is-mobile-floating .fc-btn:disabled {
    opacity: 1 !important;
    color: rgba(137,145,156,.43) !important;
    border-color: rgba(255,255,255,.055) !important;
    background: rgba(15,18,23,.78) !important;
    box-shadow: none !important;
  }

  /* 2) Selected preset title: thinner, calmer, less glow. */
  body > .sg-mobile-preset-active-label {
    height: 24px !important;
    min-width: 90px !important;
    width: min(41vw, 158px) !important;
    max-width: 158px !important;
    padding: 0 8px !important;
    gap: 4px !important;
    border: 1px solid rgba(91,143,218,.18) !important;
    border-radius: 999px !important;
    background: rgba(10,14,19,.96) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.26) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body > .sg-mobile-preset-active-label .sg-mobile-preset-active-label__name {
    font-size: 9.5px !important;
    font-weight: 790 !important;
    letter-spacing: -.005em !important;
  }

  body > .sg-mobile-preset-active-label .sg-mobile-preset-active-label__pro {
    height: 11px !important;
    padding: 0 4px !important;
    border: 0 !important;
    background: #385b9c !important;
    font-size: 5.5px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
  }

  /* 3) Token / price action: neutral by default, clear active and disabled states. */
  #fotor-root .mtool-top-btn--priced {
    min-width: 96px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 9px !important;
    gap: 5px !important;
    border-radius: 10px !important;
    border-color: rgba(255,255,255,.10) !important;
    background: rgba(15,19,25,.95) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.24) !important;
  }

  #fotor-root .mtool-top-btn--priced.mtool-top-btn--apply:not(:disabled) {
    border-color: rgba(69,137,231,.27) !important;
    background: #142033 !important;
    color: #edf4ff !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.23) !important;
  }

  #fotor-root .mtool-top-btn--priced:disabled,
  body.sg-editor-processing #fotor-root .mtool-top-btn--priced {
    opacity: 1 !important;
    border-color: rgba(255,255,255,.06) !important;
    background: #11151b !important;
    color: rgba(149,157,168,.58) !important;
    box-shadow: none !important;
  }

  #fotor-root .mtool-top-btn__price {
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 780 !important;
    white-space: nowrap !important;
  }

  /* 4) Upload/drop zones share the same surface and icon language. */
  #fotor-root .upload-zone,
  #fotor-root .dropzone,
  #fotor-root .hair-reference-editor__upload,
  #fotor-root .sg-face-swap-placeholder {
    border: 1px dashed rgba(91,137,205,.25) !important;
    border-radius: 14px !important;
    background: #0a0e13 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  #fotor-root .upload-zone .upload-icon {
    width: 38px !important;
    height: 38px !important;
    margin: 0 auto 9px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(77,139,231,.17) !important;
    border-radius: 11px !important;
    background: #101a28 !important;
    color: #8eb9f5 !important;
    font-size: 0 !important;
    box-shadow: none !important;
  }

  #fotor-root .upload-zone .upload-icon::before {
    content: "" !important;
    display: block !important;
    width: 17px !important;
    height: 17px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V4m0 0-5 5m5-5 5 5M5 20h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V4m0 0-5 5m5-5 5 5M5 20h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }

  #fotor-root .upload-hint-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 760 !important;
    color: #e8edf4 !important;
  }
  #fotor-root .upload-hint,
  #fotor-root .upload-subtitle,
  #fotor-root .hair-reference-editor__hint,
  #fotor-root .ref-photo-hint {
    font-size: 10px !important;
    line-height: 1.35 !important;
    color: rgba(160,169,181,.76) !important;
  }

  /* 5) Back / close / help — one size, one border, one surface. */
  #fotor-root .lp-back,
  #fotor-root .lp-close,
  #fotor-root .tour-help-btn,
  #fotor-root .mobile-tool-back,
  #fotor-root .adjust-mobile-backbtn,
  body .sg-prompt-editor__close,
  body .hair-color-modal__close,
  body .sg-add-person-prompt__back,
  body .sg-add-person-prompt__close,
  body .sg-history-tip__close,
  body .sg-account-save-notice__close,
  body .fp-auth-popup__close {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 9px !important;
    background: #12171e !important;
    color: rgba(220,226,235,.90) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
  }

  /* 6) Typography scale — improve readability without enlarging preset cards. */
  #fotor-root .lp-title,
  #fotor-root .mobile-tool-title,
  #fotor-root .hair-reference-editor__title,
  body .sg-prompt-editor__title,
  body .hair-color-modal__title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 820 !important;
  }

  #fotor-root .control-label,
  #fotor-root .upscale-label,
  #fotor-root .ai-hair-color-label,
  #fotor-root .ref-photo-label,
  #fotor-root .color-dd-label,
  #fotor-root .format-hint,
  body .sg-prompt-editor__hint,
  body .sg-prompt-note,
  body .hair-color-modal__hint {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  #fotor-root .left-panel--tool-upscale .m-native-block::before {
    font-size: 10px !important;
  }

  /* 7) Preset / catalog strips: tighter rhythm and consistent selected state. */
  #fotor-root .mobile-preset-strip,
  #fotor-root .mobile-catalog-strip {
    gap: 8px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  #fotor-root .mobile-preset-card,
  #fotor-root .mobile-catalog-card {
    border-radius: 10px !important;
    border-color: rgba(255,255,255,.075) !important;
    box-shadow: none !important;
  }

  #fotor-root .mobile-preset-card.active,
  #fotor-root .mobile-catalog-card.active,
  #fotor-root .mobile-preset-card[aria-pressed="true"],
  #fotor-root .mobile-catalog-card[aria-pressed="true"] {
    border-color: rgba(74,145,238,.56) !important;
    box-shadow: 0 0 0 1px rgba(65,133,225,.08) !important;
  }

  #fotor-root .mobile-catalog-badge,
  #fotor-root .lp-cat-badge,
  #fotor-root .pro-badge,
  #fotor-root .ai-styles-badge,
  #fotor-root .rg-badge {
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* 8) De-glass: flatten remaining utility surfaces, keep a single hierarchy. */
  #fotor-root .mtool-popover,
  body .sg-prompt-sheet__card,
  body .hair-color-modal,
  body .compact-modal,
  body .sg-account-save-notice,
  body .sg-history-tip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.34) !important;
  }

  #fotor-root .mtool-popover-item,
  body .sg-prompt-chip,
  body .hair-color-modal__swatch {
    border-color: rgba(255,255,255,.075) !important;
    background: #11151b !important;
    box-shadow: none !important;
  }

  /* 9) Loading and disabled controls should look intentionally inactive, not broken. */
  #fotor-root button:disabled,
  body .sg-prompt-sheet button:disabled,
  body .hair-color-modal button:disabled,
  body .agent-popup button:disabled {
    cursor: default !important;
    text-shadow: none !important;
  }

  #fotor-root .mobile-apply-btn:disabled,
  #fotor-root .mobile-apply-btn[aria-disabled="true"],
  #fotor-root .ai-hair-run:disabled,
  #fotor-root .m-ai-apply:disabled,
  #fotor-root .m-native-primary:disabled,
  body .sg-prompt-sheet-apply:disabled,
  body .sg-add-person-prompt__run:disabled {
    opacity: 1 !important;
    border-color: rgba(255,255,255,.06) !important;
    background: #15191f !important;
    color: rgba(142,150,161,.64) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  body.sg-editor-processing #fotor-root .ws-top-actions,
  body.sg-editor-processing #fotor-root .mtool-top-controls {
    opacity: .76 !important;
  }

  body .sg-processing-toast {
    border-color: rgba(77,135,218,.18) !important;
    background: rgba(10,14,20,.97) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.32) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body .sg-processing-toast__title {
    font-size: 12.5px !important;
    font-weight: 800 !important;
  }
  body .sg-processing-toast__text {
    font-size: 10px !important;
    line-height: 1.32 !important;
  }

  /* Keep floating UI from visually colliding when a menu/modal is open. */
  body.sg-editor-modal-open #fotor-root .ws-float-controls,
  body.sg-mobile-menu-open #fotor-root .ws-float-controls {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 380px) {
  body > .sg-mobile-preset-active-label {
    width: min(40vw, 142px) !important;
    max-width: 142px !important;
    min-width: 84px !important;
    height: 23px !important;
  }
}