/* Fotor Photo Editor 1.0.180 — safe compact two-column native tools. */

@media (max-width: 768px) {
  /* Only Remove BG and Upscale. No React DOM restructuring. */
  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-upscale,
  #fotor-root .editor-shell.is-mobile .left-panel.left-panel--tool-remove-bg {
    height: 98px !important;
    min-height: 98px !important;
    border-top: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 15px 15px 0 0 !important;
    background: rgba(8,10,14,.97) !important;
    box-shadow: 0 -12px 34px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.03) !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .left-panel-header,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .left-panel-header {
    display: none !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .left-panel-body,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .left-panel-body,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .mobile-tool-page,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .mobile-tool-page,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .mobile-tool-content,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .mobile-tool-content {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-panel,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-panel {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 132px !important;
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  /* Upscale: resolution selector stays entirely in the left column. */
  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-block {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-block::before {
    content: "Разрешение";
    display: block !important;
    margin: 0 2px !important;
    color: rgba(206,213,223,.70) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .015em !important;
  }

  html[lang^="en"] #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-block::before { content: "Resolution"; }
  html[lang^="uk"] #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-block::before { content: "Роздільність"; }

  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-seg {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(255,255,255,.085) !important;
    border-radius: 11px !important;
    background: rgba(3,5,9,.62) !important;
    box-shadow: inset 0 1px 8px rgba(0,0,0,.26) !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-seg-btn {
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(190,197,207,.84) !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-seg-btn.is-active,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-seg-btn[aria-pressed="true"] {
    border-color: rgba(77,151,255,.50) !important;
    background: rgba(47,125,246,.20) !important;
    color: #f4f8ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  }

  /* Remove BG: the left column is just a clear description — no heading under the button. */
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-panel::before {
    content: "AI аккуратно отделит объект от фона. Подходит для людей, предметов и товаров.";
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    display: block !important;
    min-width: 0 !important;
    padding: 0 3px !important;
    color: rgba(218,224,233,.82) !important;
    font-size: 10px !important;
    font-weight: 590 !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  html[lang^="en"] #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-panel::before {
    content: "AI cleanly separates the subject from the background. Works for people, objects and products.";
  }
  html[lang^="uk"] #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-panel::before {
    content: "AI акуратно відокремить об'єкт від фону. Підходить для людей, предметів і товарів.";
  }

  /* The one primary action always lives in the right column. */
  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-primary,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-primary {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(84,153,255,.50) !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #3e8cff 0%, #2f7df6 100%) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 10.5px !important;
    font-weight: 850 !important;
    line-height: 1.18 !important;
    letter-spacing: -.01em !important;
    white-space: normal !important;
    text-align: center !important;
    box-shadow: 0 8px 20px rgba(20,82,183,.27), inset 0 1px 0 rgba(255,255,255,.12) !important;
    text-shadow: none !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-primary::before,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-primary::before {
    content: "" !important;
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%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' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E") center/contain no-repeat !important;
  }

  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-primary:disabled,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-primary:disabled {
    border-color: rgba(255,255,255,.075) !important;
    background: #171b21 !important;
    color: rgba(183,190,200,.58) !important;
    -webkit-text-fill-color: rgba(183,190,200,.58) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }

  /* Technical status must never become a second overlapping title. */
  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-hint,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-hint {
    display: none !important;
  }

  /* If API is actually unavailable, show the error unobtrusively over the left area. */
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-hint--danger {
    display: block !important;
    position: absolute !important;
    left: 11px !important;
    right: 148px !important;
    bottom: 5px !important;
    z-index: 2 !important;
    margin: 0 !important;
    color: #e7a0a8 !important;
    font-size: 7.5px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (max-width: 370px) {
  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-panel,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-panel {
    grid-template-columns: minmax(0, 1fr) 116px !important;
    gap: 6px !important;
    padding: 7px !important;
  }
  #fotor-root .editor-shell.is-mobile .left-panel--tool-upscale .m-native-primary,
  #fotor-root .editor-shell.is-mobile .left-panel--tool-remove-bg .m-native-primary {
    font-size: 10px !important;
    padding: 7px 8px !important;
  }
}