/* Fotor Photo Editor 1.0.284 — stage 4.1: shared desktop panel shell. */

@media (min-width: 769px) {
  /* One predictable column for every tool. Tool-specific content may scroll,
     but it must not change the panel width or create horizontal overflow. */
  #fotor-root .editor-shell:not(.is-mobile) .left-panel {
    flex: 0 0 clamp(360px, 21vw, 380px) !important;
    width: clamp(360px, 21vw, 380px) !important;
    min-width: 360px !important;
    max-width: 380px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, .075) !important;
    border-radius: 15px !important;
    background: #0b0f14 !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel-header {
    flex: 0 0 auto !important;
    min-height: 66px !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .065) !important;
    background: #0e1218 !important;
    box-shadow: none !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .lp-title {
    color: #f3f6fa !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -.02em !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .lp-subtitle {
    margin-top: 4px !important;
    color: rgba(166, 176, 189, .72) !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body {
    min-width: 0 !important;
    padding: 16px !important;
    overflow-x: hidden !important;
    background: #0b0f14 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, .16) transparent !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body::-webkit-scrollbar {
    width: 6px !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .16) !important;
  }

  /* Root tool pages should use the panel itself as their surface. This removes
     the recurring panel-inside-panel effect without flattening actual controls. */
  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body > .mobile-tool-page,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body > .ai-hair-page,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body > .ai-agent-page,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body > .ai-agent__page,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body > .ai-adjust-page,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body > .design-panel,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body > .tool-remove-bg,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body > .tool-upscale,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel-body > .text-image-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 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;
  }

  /* Shared reading sizes; individual preset captions remain unchanged until
     the dedicated card pass in the next substage. */
  #fotor-root .editor-shell:not(.is-mobile) .left-panel label,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel .control-label,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel .ai-agent__label,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel .format-hint {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel p,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel .hint,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel .ai-agent__hint,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel .ref-photo-hint,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel .tool-description {
    color: rgba(166, 176, 189, .76) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  #fotor-root .editor-shell:not(.is-mobile) .left-panel select {
    min-height: 42px !important;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel textarea {
    min-height: 96px;
  }

  #fotor-root .editor-shell:not(.is-mobile) .left-panel input:focus-visible,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel select:focus-visible,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel textarea:focus-visible,
  #fotor-root .editor-shell:not(.is-mobile) .left-panel button:focus-visible {
    outline: 2px solid rgba(105, 174, 255, .86) !important;
    outline-offset: 2px !important;
  }
}

/* Tablet-width desktop mode cannot afford the full preferred column. */
@media (min-width: 769px) and (max-width: 1100px) {
  #fotor-root .editor-shell:not(.is-mobile) .left-panel {
    flex-basis: 350px !important;
    width: 350px !important;
    min-width: 350px !important;
  }
}