/* ================================================================ */
    /* 🖼️ IMAGE EDITOR با UI/UX کامل */
    /* ================================================================ */
    .editor-modal-fixed {
      max-width: 1200px !important;
      width: 95% !important;
      max-height: 92vh !important;
      padding: 0 !important;
      overflow: hidden !important;
      border-radius: 20px !important;
      background: #1a1a2e !important;
      border: 1px solid #2d2d44 !important;
    }
    .editor-header-fixed {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 24px;
      background: #22223b;
      border-bottom: 1px solid #33334d;
      color: #e8e8f0;
    }
    .editor-header-fixed .header-left { display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 600; }
    .editor-header-fixed .header-left i { color: #8a9aff; font-size: 20px; }
    .editor-file-name { font-size: 13px; color: #8888aa; font-weight: 400; }
    .editor-header-fixed .header-right { display: flex; align-items: center; gap: 10px; }
    .editor-close-btn-fixed { 
      width: 38px; height: 38px; border-radius: 50%; border: none; 
      background: rgba(255,255,255,0.06); color: #9999bb; font-size: 20px; 
      cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; 
    }
    .editor-close-btn-fixed:hover { background: rgba(220,60,60,0.2); color: #ff6b6b; transform: rotate(90deg); }

    .editor-body-fixed {
      padding: 20px;
      display: grid;
      grid-template-columns: 65% 35%;
      gap: 20px;
      max-height: calc(92vh - 70px);
      height: calc(92vh - 70px);
    }

    .editor-viewport-fixed {
      position: relative;
      width: 100%;
      height: 100%;
      min-height: 450px;
      background: #0d1117;
      border-radius: 12px;
      border: 1px solid #2d2d44;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #imageEditorDisplay {
      display: block;
      max-width: 100%;
      max-height: 100%;
      border-radius: 8px;
      user-select: none;
    }
    #editorPlaceholder {
      color: #475569;
      text-align: center;
      font-size: 14px;
    }
    #editorPlaceholder i {
      font-size: 48px;
      display: block;
      margin-bottom: 12px;
      color: #334155;
    }

    .editor-side-fixed {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
      overflow-y: auto;
    }
    .editor-side-fixed::-webkit-scrollbar { width: 4px; }
    .editor-side-fixed::-webkit-scrollbar-thumb { background: #33334d; border-radius: 8px; }

    /* پنل ابزارهای ویرایشگر */
    .editor-tools-panel {
      background: #22223b;
      border-radius: 12px;
      border: 1px solid #2d2d44;
      padding: 12px;
    }
    .editor-tools-panel .tools-title {
      font-size: 11px;
      font-weight: 600;
      color: #8888aa;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .editor-tools-panel .tools-title i { font-size: 14px; color: #667eea; }

    .tools-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 6px;
    }
    .tool-btn-editor {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      padding: 8px 4px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: #8888aa;
      font-size: 10px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      font-family: inherit;
      min-height: 48px;
    }
    .tool-btn-editor:hover { background: rgba(255,255,255,0.06); color: #c8c8e0; }
    .tool-btn-editor.active { 
      background: rgba(100,120,255,0.2); 
      color: #8a9aff;
      border: 1px solid rgba(100,120,255,0.25);
    }
    .tool-btn-editor i { font-size: 20px; }
    .tool-btn-editor span { font-size: 9px; }

    .tools-grid .tool-divider {
      width: 1px;
      height: 30px;
      background: #33334d;
      align-self: center;
    }

    .zoom-controls-editor {
      display: flex;
      align-items: center;
      gap: 4px;
      justify-content: center;
      padding-top: 8px;
      margin-top: 6px;
      border-top: 1px solid #33334d;
    }
    .zoom-controls-editor .tool-btn-editor { min-height: 32px; padding: 4px 10px; font-size: 13px; flex-direction: row; gap: 4px; }
    .zoom-controls-editor .zoom-label { 
      min-width: 48px; text-align: center; color: #8888aa; font-size: 12px; font-weight: 600; 
    }


    /* دکمه‌های اقدام */
    .editor-actions-fixed {
      display: flex;
      gap: 10px;
      margin-top: auto;
      flex-wrap: wrap;
    }
    .editor-actions-fixed .action-row-group {
      display: flex;
      gap: 8px;
      flex: 1;
      min-width: 120px;
    }
    .editor-actions-fixed .action-row-group:last-child {
      justify-content: flex-end;
    }
    .action-btn-fixed {
      flex: 1;
      padding: 10px 18px;
      border: none;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.25s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: inherit;
      min-width: 80px;
    }
    .action-btn-fixed:hover { transform: translateY(-2px); }
    .action-btn-fixed:active { transform: scale(0.97); }
    .action-btn-fixed.confirm {
      background: linear-gradient(135deg, #27ae60, #2ecc71);
      color: #fff;
      box-shadow: 0 4px 16px rgba(46,204,113,0.25);
    }
    .action-btn-fixed.confirm:hover { box-shadow: 0 6px 24px rgba(46,204,113,0.35); }
    .action-btn-fixed.cancel {
      background: rgba(255,255,255,0.06);
      color: #9999bb;
      border: 1px solid #33334d;
    }
    .action-btn-fixed.cancel:hover { background: rgba(255,255,255,0.1); color: #ddd; }
    .action-btn-fixed.apply-crop {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: #fff;
      box-shadow: 0 4px 16px rgba(102,126,234,0.25);
    }
    .action-btn-fixed.apply-crop:hover { box-shadow: 0 6px 24px rgba(102,126,234,0.35); }
    .action-btn-fixed.cancel-crop {
      background: rgba(220,60,60,0.12);
      color: #ff6b6b;
      border: 1px solid rgba(220,60,60,0.15);
    }
    .action-btn-fixed.cancel-crop:hover { background: rgba(220,60,60,0.22); }

    #editorCropActions {
      display: none;
    }
    #editorCropActions.show {
      display: flex;
    }

    /* استایل‌های Cropper.js */

    /* ================================================================ */
    /* WATERMARK */
    /* ================================================================ */
    .screen-watermark { display: none; position: fixed; inset: 0; z-index: 9998; align-items: center; justify-content: center; pointer-events: none; }
    .screen-watermark.show { display: flex; }
    .screen-watermark .watermark-box {
      background: rgba(0,0,0,0.05);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 2px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      padding: 60px 80px;
      text-align: center;
      box-shadow: 0 20px 60px rgba(0,0,0,0.08);
      pointer-events: none;
      user-select: none;
      min-width: 60vw;
      min-height: 60vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .screen-watermark .watermark-box .watermark-line1 {
      font-size: 72px;
      font-weight: 800;
      color: rgba(0,0,0,0.08);
      letter-spacing: 2px;
      font-family: 'Vazirmatn', sans-serif;
      line-height: 1.3;
      text-shadow: 0 0 30px rgba(0,0,0,0.02);
    }
    .screen-watermark .watermark-box .watermark-line2 {
      font-size: 42px;
      font-weight: 600;
      color: rgba(0,0,0,0.06);
      letter-spacing: 1px;
      font-family: 'Vazirmatn', sans-serif;
      text-shadow: 0 0 20px rgba(0,0,0,0.02);
      direction: ltr;
      margin-top: 16px;
    }
    body.night-mode .screen-watermark .watermark-box { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.04); }
    body.night-mode .screen-watermark .watermark-box .watermark-line1 { color: rgba(255,255,255,0.06); }
    body.night-mode .screen-watermark .watermark-box .watermark-line2 { color: rgba(255,255,255,0.04); }

    /* ================================================================ */