/* Fotor Photo Editor 1.0.169 — SmartGenius editorial popup system. */

:root {
  --sgp-bg: #0a0b0e;
  --sgp-panel: #0f1115;
  --sgp-panel-2: #15171c;
  --sgp-line: rgba(255,255,255,.10);
  --sgp-line-strong: rgba(255,255,255,.16);
  --sgp-text: #f5f7fb;
  --sgp-muted: #9097a3;
  --sgp-blue: #3385ff;
  --sgp-blue-soft: rgba(51,133,255,.13);
}

@media (max-width: 768px) {
  body.sg-editor-modal-open > .sg-mobile-preset-active-label,
  body.sg-popup-system-open > .sg-mobile-preset-active-label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* 1.0.169: popup components are React portals mounted directly under body. */
  body > .sg-prompt-sheet,
  body > .agent-popup-overlay,
  body > .compact-modal-overlay,
  body > .hair-color-modal-backdrop,
  body > .sg-add-person-prompt-backdrop {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  }

  body > .sg-prompt-sheet .sg-prompt-sheet__card {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    background: #0b0d11 !important;
    background-image: none !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  /* ===== Unified overlay layer ===== */
  .sg-prompt-sheet,
  .agent-popup-overlay,
  .compact-modal-overlay,
  .hair-color-modal-backdrop,
  .sg-add-person-prompt-backdrop,
  body > .hair-color-modal-backdrop,
  body > .sg-add-person-prompt-backdrop,
  .sg-exit-modal,
  .esg-modal {
    z-index: 2147483300 !important;
  }

  .sg-prompt-sheet__backdrop,
  .agent-popup-overlay,
  .compact-modal-overlay,
  .hair-color-modal-backdrop,
  .sg-add-person-prompt-backdrop,
  body > .hair-color-modal-backdrop,
  body > .sg-add-person-prompt-backdrop,
  .sg-exit-modal__backdrop {
    background: rgba(3,4,7,.78) !important;
    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;
  }

  /* ===== Popup shell ===== */
  .sg-prompt-sheet__card,
  .agent-popup,
  .compact-modal,
  .hair-color-modal,
  .sg-add-person-prompt,
  body > .hair-color-modal-backdrop .hair-color-modal,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt,
  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap {
    border: 1px solid var(--sgp-line) !important;
    border-radius: 18px !important;
    background: var(--sgp-bg) !important;
    background-image: none !important;
    color: var(--sgp-text) !important;
    box-shadow: 0 26px 72px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  .sg-prompt-sheet__card,
  .hair-color-modal,
  body > .hair-color-modal-backdrop .hair-color-modal {
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
    width: calc(100vw - 20px) !important;
    max-width: 430px !important;
    max-height: min(86dvh, 720px) !important;
    transform: translateX(-50%) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
    overscroll-behavior: contain !important;
  }

  /* ===== Outfit / prompt sheet ===== */
  .sg-prompt-editor,
  .sg-prompt-editor--sheet {
    display: grid !important;
    gap: 0 !important;
  }

  .sg-prompt-editor__head {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 34px !important;
    align-items: start !important;
    gap: 12px !important;
    padding: 15px 15px 13px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--sgp-line) !important;
    background: #0d0f13 !important;
  }

  .sg-prompt-editor__title {
    margin: 0 !important;
    color: var(--sgp-text) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    letter-spacing: -.02em !important;
  }

  .sg-prompt-editor__hint {
    margin-top: 4px !important;
    color: var(--sgp-muted) !important;
    font-size: 10.5px !important;
    line-height: 1.38 !important;
  }

  .sg-prompt-editor__close,
  .hair-color-modal__close,
  body > .hair-color-modal-backdrop .hair-color-modal__close,
  .sg-add-person-prompt__close,
  .compact-modal .close-btn {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 10px !important;
    background: #181a1f !important;
    color: #d8dce3 !important;
    font-size: 19px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .sg-prompt-editor > .sg-prompt-select-wrap,
  .sg-prompt-editor > .sg-prompt-textarea,
  .sg-prompt-editor > .sg-prompt-note,
  .sg-prompt-editor > .sg-prompt-sheet-apply {
    margin-left: 15px !important;
    margin-right: 15px !important;
  }

  .sg-prompt-select-wrap {
    display: grid !important;
    gap: 8px !important;
    margin-top: 13px !important;
    margin-bottom: 0 !important;
  }

  .sg-prompt-select-wrap > span {
    color: #c2c7cf !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
  }

  /* Native select stays functional, but is visually replaced by the custom grid. */
  .sg-prompt-select-wrap.sg168-enhanced .sg-prompt-select,
  .sg-prompt-select-wrap.sg169-enhanced .sg-prompt-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .sg168-preset-grid,
  .sg169-preset-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
  }

  .sg168-preset-option,
  .sg169-preset-option {
    min-width: 0 !important;
    min-height: 39px !important;
    padding: 8px 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 11px !important;
    background: var(--sgp-panel-2) !important;
    color: #dfe3e9 !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 10.5px !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    text-align: left !important;
  }

  .sg168-preset-option::before,
  .sg169-preset-option::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #535964;
  }

  .sg168-preset-option.is-active,
  .sg169-preset-option.is-active {
    border-color: rgba(51,133,255,.68) !important;
    background: var(--sgp-blue-soft) !important;
    color: #fff !important;
  }

  .sg168-preset-option.is-active,
  .sg169-preset-option.is-active::before {
    background: var(--sgp-blue) !important;
    box-shadow: 0 0 0 3px rgba(51,133,255,.14) !important;
  }

  .sg-prompt-textarea,
  .sg-add-person-prompt textarea,
  .text-image-popup textarea {
    width: auto !important;
    min-height: 112px !important;
    margin-top: 11px !important;
    margin-bottom: 0 !important;
    padding: 12px 13px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 12px !important;
    background: #06080c !important;
    color: #f0f2f6 !important;
    -webkit-text-fill-color: #f0f2f6 !important;
    caret-color: var(--sgp-blue) !important;
    box-shadow: inset 0 1px 8px rgba(0,0,0,.32) !important;
    font: inherit !important;
    font-size: 11px !important;
    line-height: 1.48 !important;
    outline: none !important;
  }

  .sg-prompt-textarea::placeholder,
  .sg-add-person-prompt textarea::placeholder,
  .text-image-popup textarea::placeholder {
    color: #656b75 !important;
    -webkit-text-fill-color: #656b75 !important;
    opacity: 1 !important;
  }

  .sg-prompt-textarea:focus,
  .sg-add-person-prompt textarea:focus,
  .text-image-popup textarea:focus {
    border-color: rgba(51,133,255,.74) !important;
    box-shadow: 0 0 0 3px rgba(51,133,255,.12), inset 0 1px 8px rgba(0,0,0,.25) !important;
  }

  .sg-prompt-note {
    margin-top: 10px !important;
    padding: 9px 10px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-radius: 10px !important;
    background: #101217 !important;
    color: #858c97 !important;
    font-size: 9.5px !important;
    line-height: 1.42 !important;
  }

  .sg-prompt-sheet-apply {
    width: auto !important;
    min-height: 44px !important;
    margin-top: 12px !important;
    margin-bottom: 15px !important;
    border: 1px solid rgba(68,145,255,.35) !important;
    border-radius: 11px !important;
    background: #2f7df6 !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
  }

  /* ===== Hair color ===== */
  .hair-color-modal,
  body > .hair-color-modal-backdrop .hair-color-modal {
    padding: 0 !important;
  }

  .hair-color-modal__header,
  body > .hair-color-modal-backdrop .hair-color-modal__header {
    min-height: 62px !important;
    margin: 0 !important;
    padding: 14px 14px 12px !important;
    border-bottom: 1px solid var(--sgp-line) !important;
    background: #0d0f13 !important;
  }

  .hair-color-modal__title,
  body > .hair-color-modal-backdrop .hair-color-modal__title {
    color: var(--sgp-text) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    letter-spacing: -.02em !important;
  }

  .hair-color-modal__hint,
  body > .hair-color-modal-backdrop .hair-color-modal__hint {
    margin-top: 4px !important;
    color: var(--sgp-muted) !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .hair-color-modal__grid,
  body > .hair-color-modal-backdrop .hair-color-modal__grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
    padding: 13px 13px 8px !important;
  }

  .hair-color-modal__swatch,
  body > .hair-color-modal-backdrop .hair-color-modal__swatch {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 10px !important;
    gap: 8px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 11px !important;
    background: var(--sgp-panel-2) !important;
    color: #dfe3e8 !important;
    box-shadow: none !important;
    font-size: 10px !important;
    font-weight: 780 !important;
  }

  .hair-color-modal__swatch.active,
  body > .hair-color-modal-backdrop .hair-color-modal__swatch.active {
    border-color: rgba(51,133,255,.72) !important;
    background: var(--sgp-blue-soft) !important;
    color: #fff !important;
  }

  .hair-color-modal__rgb,
  body > .hair-color-modal-backdrop .hair-color-modal__rgb {
    margin: 2px 13px 9px !important;
    padding: 9px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 11px !important;
    background: #0f1115 !important;
    box-shadow: none !important;
  }

  .hair-color-modal__rgb input,
  body > .hair-color-modal-backdrop .hair-color-modal__rgb input {
    height: 34px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 9px !important;
    background: #17191e !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  .hair-color-modal__apply,
  body > .hair-color-modal-backdrop .hair-color-modal__apply {
    width: calc(100% - 26px) !important;
    min-height: 44px !important;
    margin: 0 13px 13px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #2f7df6 !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
    box-shadow: none !important;
  }

  /* ===== Add person ===== */
  .sg-add-person-prompt-backdrop,
  body > .sg-add-person-prompt-backdrop {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 10px !important;
  }

  .sg-add-person-prompt,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt {
    width: 100% !important;
    max-width: 430px !important;
    max-height: min(88dvh, 760px) !important;
    overflow: hidden !important;
  }

  .sg-add-person-prompt__header,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__header {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--sgp-line) !important;
    background: #0d0f13 !important;
  }

  .sg-add-person-prompt__back,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__back {
    min-height: 34px !important;
    padding: 0 9px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 9px !important;
    background: #17191e !important;
    color: #e1e5eb !important;
    box-shadow: none !important;
    font-size: 10px !important;
  }

  .sg-add-person-prompt__scroll,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__scroll {
    padding: 11px !important;
    background: var(--sgp-bg) !important;
  }

  .sg-add-person-prompt__group-title,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__group-title {
    margin: 3px 0 8px !important;
    color: #9299a5 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
  }

  .sg-add-person-prompt__preset-grid,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset-grid {
    gap: 7px !important;
  }

  .sg-add-person-prompt__preset,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset {
    min-height: 44px !important;
    padding: 7px 8px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 11px !important;
    background: var(--sgp-panel-2) !important;
    color: #e2e5ea !important;
    box-shadow: none !important;
  }

  .sg-add-person-prompt__preset.active,
  .sg-add-person-prompt__preset[aria-pressed="true"],
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset.active,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset[aria-pressed="true"] {
    border-color: rgba(51,133,255,.72) !important;
    background: var(--sgp-blue-soft) !important;
  }

  .sg-add-person-prompt__preset-icon,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__preset-icon {
    width: 27px !important;
    height: 27px !important;
    border-radius: 8px !important;
    background: rgba(51,133,255,.11) !important;
    box-shadow: none !important;
  }

  .sg-add-person-prompt__footer,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__footer {
    padding: 10px 11px calc(10px + env(safe-area-inset-bottom,0px)) !important;
    border-top: 1px solid var(--sgp-line) !important;
    background: #0d0f13 !important;
  }

  .sg-add-person-prompt__run,
  body > .sg-add-person-prompt-backdrop .sg-add-person-prompt__run {
    min-height: 44px !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: #2f7df6 !important;
    box-shadow: none !important;
    font-size: 11.5px !important;
    font-weight: 850 !important;
  }

  /* ===== Create / Agent popup ===== */
  .agent-popup-overlay {
    inset: 0 !important;
    bottom: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 10px !important;
  }

  .agent-popup {
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    max-height: min(90dvh, 780px) !important;
    overflow: auto !important;
  }

  .agent-popup .tool-header,
  .text-image-popup .tool-header,
  .agent-popup .text-image-header,
  .text-image-popup .text-image-header {
    border-bottom-color: var(--sgp-line) !important;
    background: #0d0f13 !important;
  }

  .agent-popup select,
  .text-image-popup select,
  .agent-popup input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  .text-image-popup input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
    border: 1px solid var(--sgp-line) !important;
    border-radius: 10px !important;
    background: #15171c !important;
    color: #f3f5f8 !important;
    box-shadow: none !important;
  }

  /* ===== Legacy preset picker ===== */
  .compact-modal-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 10px !important;
  }

  .compact-modal {
    width: 100% !important;
    max-width: 430px !important;
    height: auto !important;
    max-height: min(90dvh, 780px) !important;
    overflow: hidden !important;
  }

  .compact-modal .modal-top-bar {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--sgp-line) !important;
    background: #0d0f13 !important;
  }

  .compact-modal .modal-header h2 {
    color: var(--sgp-text) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    letter-spacing: -.02em !important;
  }

  .compact-modal .preset-count {
    padding: 3px 7px !important;
    border: 1px solid rgba(51,133,255,.28) !important;
    border-radius: 999px !important;
    background: var(--sgp-blue-soft) !important;
    color: #a9ceff !important;
    font-size: 8px !important;
  }

  .compact-modal .search-container {
    padding: 10px 11px !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    background: var(--sgp-bg) !important;
  }

  .compact-modal .search-container input {
    min-height: 40px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 10px !important;
    background: #15171c !important;
    color: #f4f6f9 !important;
    box-shadow: none !important;
  }

  .compact-modal .presets-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
    padding: 11px !important;
    background: var(--sgp-bg) !important;
  }

  .compact-modal .preset-card {
    min-height: 84px !important;
    padding: 10px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 11px !important;
    background: var(--sgp-panel-2) !important;
    color: #e3e6eb !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .compact-modal .preset-card.selected {
    border-color: rgba(51,133,255,.72) !important;
    background: var(--sgp-blue-soft) !important;
  }

  /* ===== Face swap ===== */
  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap {
    z-index: 2147483301 !important;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom,0px)) !important;
    max-height: min(90dvh, 780px) !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .left-panel-header {
    min-height: 58px !important;
    flex-basis: 58px !important;
    padding: 10px !important;
    border-bottom: 1px solid var(--sgp-line) !important;
    background: #0d0f13 !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .lp-title {
    color: var(--sgp-text) !important;
    font-size: 16px !important;
    font-weight: 850 !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .lp-subtitle {
    color: var(--sgp-muted) !important;
    font-size: 9.5px !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .lp-back,
  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-ai-face-swap .lp-close {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    border: 1px solid var(--sgp-line) !important;
    border-radius: 10px !important;
    background: #181a1f !important;
    box-shadow: none !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-tool-content--swap .ai-hair-top,
  #fotor-root .editor-shell.is-mobile .mobile-tool-content--swap .ai-hair-footer {
    background: var(--sgp-bg) !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-tool-content--swap .ai-refs,
  #fotor-root .editor-shell.is-mobile .mobile-tool-content--swap label {
    border: 1px solid var(--sgp-line) !important;
    border-radius: 11px !important;
    background: var(--sgp-panel-2) !important;
    box-shadow: none !important;
  }

  #fotor-root .editor-shell.is-mobile .mobile-tool-content--swap button:not(.lp-close):not(.lp-back) {
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  /* ===== Generic editor form controls inside known modal surfaces ===== */
  .sg-prompt-sheet button,
  .hair-color-modal button,
  .sg-add-person-prompt button,
  .compact-modal button,
  .agent-popup button {
    font-family: inherit !important;
  }

  .sg-prompt-sheet button:focus-visible,
  .hair-color-modal button:focus-visible,
  .sg-add-person-prompt button:focus-visible,
  .compact-modal button:focus-visible,
  .agent-popup button:focus-visible {
    outline: 2px solid rgba(75,151,255,.72) !important;
    outline-offset: 2px !important;
  }
}