/* v4.0 — Minimal image editor */
    /* ================================================================ */
    .editor-modal-fixed{max-width:1040px!important;width:min(94vw,1040px)!important;border-radius:16px!important}
    .editor-header-fixed{padding:10px 14px!important;min-height:54px!important}
    .editor-header-fixed .header-left{gap:9px!important;font-size:14px!important}
    .editor-history-actions{gap:5px!important}
    .editor-history-btn{width:32px!important;height:30px!important;border-radius:8px!important;background:rgba(99,102,241,.24)!important;color:#cbd2ff!important;border-color:rgba(129,140,248,.38)!important}
    .editor-history-btn:hover:not(:disabled){background:rgba(99,102,241,.38)!important}
    .editor-body-fixed{grid-template-columns:minmax(0,1fr) 250px!important;gap:12px!important;padding:12px!important}
    .editor-tools-panel{padding:8px!important;border-radius:10px!important}
    .editor-tools-panel .tools-title{margin-bottom:7px!important;font-size:10px!important}
    .editor-transform-grid{gap:5px!important}
    .editor-rotate-row{gap:5px!important;margin-top:5px!important}
    .tool-btn-editor{min-height:39px!important;padding:5px 3px!important;border-radius:7px!important;font-size:9px!important;gap:2px!important;background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.045)!important}
    .tool-btn-editor i{font-size:15px!important}
    .tool-btn-editor span{font-size:8px!important;line-height:1.25!important}
    .zoom-controls-editor{padding-top:6px!important;margin-top:5px!important;gap:3px!important}
    .zoom-controls-editor .tool-btn-editor{min-height:30px!important;height:30px!important;padding:3px 8px!important}
    .editor-tools-separator{margin:7px 0 4px!important}
    .action-btn-fixed{padding:8px 12px!important;min-height:36px!important;border-radius:8px!important;font-size:11px!important}


    /* ================================================================ */
    /* v4.0 — Surface material system */
    /* ================================================================ */
    .v4-slot-head{cursor:pointer;display:flex;align-items:center;gap:8px}.v4-slot-arrow{margin-right:auto;color:#999;transition:.2s}.v4-slot-arrow.open{transform:rotate(180deg)}
    .v4-slot-body{display:none;padding-top:8px}.v4-slot-body.open{display:block}
    .v4-surface-main{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center}.v4-color-pill{display:flex;align-items:center;gap:5px;font-size:10px;color:#777}.v4-color-pill input[type=color]{width:30px;height:30px;border-radius:7px;overflow:hidden;padding:0;border:1px solid rgba(0,0,0,.08);background:none}
    .v4-surface-open{border:1px solid rgba(102,126,234,.2);background:rgba(102,126,234,.09);color:#5260cc;border-radius:8px;padding:8px 10px;font:700 10px inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
    .v4-tunes{display:grid;gap:6px;margin-top:8px}.v4-tune{display:grid;grid-template-columns:74px 1fr 34px;gap:6px;align-items:center;font-size:9px;color:#777}.v4-tune input[type=range]{width:100%}.v4-tune output{text-align:center;color:#999}
    .v4-tune.v4-tune-wide{grid-template-columns:116px 1fr 40px}
    .v4-tune-label-check{display:flex;align-items:center;gap:5px;white-space:nowrap;cursor:pointer;color:inherit}
    .v4-tune-label-check input[type=checkbox]{width:13px;height:13px;accent-color:#667eea;cursor:pointer}
    .v4-tune input[type=range]:disabled{opacity:.28;cursor:not-allowed!important}
    .v4-tune output.disabled{opacity:.4}

    .v4-material-overlay{position:fixed;inset:0;z-index:10080;background:rgba(8,10,18,.68);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:16px}.v4-material-overlay.open{display:flex}
    .v4-material-card{position:relative;width:min(1040px,95vw);height:min(760px,92vh);background:#171827;color:#eee;border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 90px rgba(0,0,0,.5)}
    .v4-material-header{height:58px;display:flex;align-items:center;gap:8px;padding:0 14px;background:#202135;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}.v4-material-header h3{margin-left:auto;font-size:14px}.v4-mh-btn{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.055);color:#d8d8e6;border-radius:8px;padding:7px 10px;font:600 10px inherit;cursor:pointer}.v4-mh-btn.primary{background:rgba(102,126,234,.2);color:#c9ceff;border-color:rgba(102,126,234,.32)}.v4-mh-close{width:31px;height:31px;padding:0;border-radius:50%}
    .v4-preset-drawer{position:absolute;top:58px;left:0;right:0;z-index:5;background:#24253a;border-bottom:1px solid rgba(255,255,255,.08);padding:12px 14px 15px;box-shadow:0 18px 45px rgba(0,0,0,.3);transform:translateY(-115%);opacity:0;pointer-events:none;transition:.22s}.v4-preset-drawer.open{transform:none;opacity:1;pointer-events:auto}
    .v4-lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;max-height:240px;overflow:auto}.v4-lib-item{border:1px solid rgba(255,255,255,.07);background:#191a2a;border-radius:10px;padding:6px;color:#ddd;font:500 9px inherit;cursor:pointer;text-align:right}.v4-lib-item:hover{border-color:rgba(110,125,255,.55);transform:translateY(-1px)}.v4-lib-item img{width:100%;aspect-ratio:1.35;object-fit:cover;border-radius:6px;display:block;margin-bottom:5px;background:#10111b}.v4-empty{grid-column:1/-1;padding:20px;border:1px dashed rgba(255,255,255,.09);border-radius:10px;color:#77778e;text-align:center;font-size:10px}
    .v4-tabs{height:46px;display:flex;align-items:end;gap:2px;padding:0 14px;background:#191a2a;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.v4-tab{height:38px;border:0;border-bottom:2px solid transparent;background:transparent;color:#8888a0;padding:0 16px;font:600 10px inherit;cursor:pointer}.v4-tab.active{color:#c9ceff;border-bottom-color:#7786ff}
    .v4-material-body{flex:1;overflow:auto;padding:14px}.v4-pane{display:none}.v4-pane.active{display:block}.v4-help{font-size:9px;color:#9292a7;margin-bottom:8px}.v4-map-card{border:1px solid rgba(255,255,255,.07);background:#1e1f31;border-radius:12px;padding:10px}.v4-map-row{display:flex;align-items:center;gap:7px}.v4-select-map{border:1px solid rgba(102,126,234,.28);background:rgba(102,126,234,.14);color:#c9ceff;border-radius:8px;padding:7px 10px;font:700 10px inherit;cursor:pointer}.v4-trash{display:none;width:30px;height:30px;border:0;border-radius:7px;background:rgba(230,80,90,.1);color:#e17b86;cursor:pointer}.v4-trash.show{display:inline-flex;align-items:center;justify-content:center}.v4-map-current{margin-right:auto;display:flex;align-items:center;gap:6px;color:#9292a7;font-size:9px}.v4-map-current img{width:42px;height:30px;border-radius:5px;object-fit:cover}.v4-edit-map{display:none;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);color:#b9b9c9;border-radius:7px;padding:6px 8px;font:600 9px inherit;cursor:pointer}.v4-edit-map.show{display:inline-flex;align-items:center;gap:5px}
    .v4-map-drawer{display:none;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06)}.v4-map-drawer.open{display:block}.v4-system-pick{position:sticky;top:0;z-index:2;width:100%;margin-bottom:8px;border:1px dashed rgba(119,134,255,.4);background:#262842;color:#ccd1ff;border-radius:8px;padding:9px;font:700 10px inherit;cursor:pointer}
    .v4-material-footer{height:56px;display:flex;align-items:center;justify-content:flex-end;gap:7px;padding:0 14px;background:#191a2a;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}.v4-material-footer button{border:0;border-radius:8px;padding:8px 17px;font:700 10px inherit;cursor:pointer}.v4-mcancel{background:rgba(255,255,255,.06);color:#aaaabd}.v4-mconfirm{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}


    /* v4.0 approved refinements — 2026-09 */
    .editor-body-fixed.editor-body-single{grid-template-columns:1fr!important;display:grid!important;padding:10px 12px 12px!important;gap:8px!important}
    .editor-toolbar-inline{display:flex;align-items:center;gap:5px;padding:7px 12px;background:#202135;border-bottom:1px solid #303149;direction:rtl;flex-wrap:nowrap;overflow-x:auto}
    .editor-toolbar-inline .tool-btn-editor{width:auto!important;min-width:72px!important;height:36px!important;min-height:36px!important;flex-direction:row!important;padding:5px 8px!important;gap:5px!important;white-space:nowrap}
    .editor-toolbar-inline .tool-btn-editor i{font-size:13px!important}.editor-toolbar-inline .tool-btn-editor span{font-size:9px!important}
    .editor-zoom-inline{display:flex;align-items:center;gap:3px;margin-right:auto;border-right:1px solid #34354c;padding-right:7px}
    .editor-zoom-inline .tool-btn-editor{min-width:32px!important;width:32px!important;padding:0!important}.editor-zoom-inline .zoom-label{min-width:42px;text-align:center;color:#9a9ab2;font-size:10px}
    .editor-actions-only{overflow:visible!important;max-height:none!important;display:block!important}.editor-actions-only .editor-actions-fixed{margin-top:0!important}
    .editor-viewport-fixed{min-height:470px!important}
    @media(max-width:900px){.editor-toolbar-inline{flex-wrap:wrap}.editor-zoom-inline{margin-right:0}.editor-viewport-fixed{min-height:340px!important}}

    .v4-surface-main.v4-surface-stacked{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
    .v4-surface-stacked .v4-surface-open{width:100%}
    .v4-color-control-row{display:flex;align-items:center;gap:8px;width:100%;padding-top:2px}

    /* بازتاب عادی و بدون anisotropic stretching */
    .v4-select-map{padding:5px 8px!important;font-size:9px!important;border-radius:7px!important}
    .v4-system-pick{padding:12px 16px!important;font-size:11px!important;min-height:42px!important;border-radius:9px!important}
    .v4-inline-editor{display:grid;gap:7px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.06)}


    .v4-inline-crop-actions{display:none;align-items:center;justify-content:center;gap:8px;padding:8px 0 0}
    .v4-inline-crop-actions.show{display:flex}
    .v4-inline-crop-actions button{border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:7px 12px;font:700 9px inherit;cursor:pointer}
    .v4-inline-crop-actions .apply{background:rgba(46,204,113,.18);color:#7ee2a7;border-color:rgba(46,204,113,.25)}
    .v4-inline-crop-actions .cancel{background:rgba(255,255,255,.055);color:#aaaabd}


    /* v4.0 — floating material window */
    .v4-material-overlay{
      background:transparent!important;
      backdrop-filter:none!important;
      -webkit-backdrop-filter:none!important;
      pointer-events:none!important;
      display:none!important;
      padding:0!important;
    }
    .v4-material-overlay.open{display:block!important}
    .v4-material-card{
      position:absolute!important;
      top:92px!important;
      right:24px!important;
      left:auto;
      width:min(860px,calc(100vw - 48px))!important;
      height:min(720px,calc(100vh - 120px))!important;
      pointer-events:auto!important;
      box-shadow:0 22px 65px rgba(0,0,0,.34)!important;
      resize:both;
      min-width:560px;
      min-height:480px;
      max-width:calc(100vw - 24px)!important;
      max-height:calc(100vh - 84px)!important;
    }
    .v4-material-header{cursor:move;user-select:none}
    .v4-material-header button{cursor:pointer}
    @media(max-width:760px){
      .v4-material-card{
        top:70px!important;right:8px!important;
        width:calc(100vw - 16px)!important;
        height:calc(100vh - 82px)!important;
        min-width:0!important;min-height:0!important;
        resize:none;
      }
    }

    /* influence sliders inside optional map tabs */
    .v4-map-influence{
      display:grid;
      grid-template-columns:72px 1fr 38px;
      gap:7px;
      align-items:center;
      margin:0 0 9px;
      padding:8px 9px;
      border:1px solid rgba(255,255,255,.06);
      border-radius:9px;
      background:rgba(255,255,255,.025);
      color:#aaaac0;
      font-size:9px;
    }
    .v4-map-influence input[type=range]{width:100%}
    .v4-map-influence output{text-align:center;color:#c7cbe3;font-weight:700}
    .order-copy-btn{
      border:1px solid rgba(102,126,234,.18);
      background:rgba(102,126,234,.09);
      color:#667eea;
      width:30px;height:28px;border-radius:7px;
      cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
      margin-right:7px;
    }
    .order-copy-btn:hover{background:rgba(102,126,234,.16)}


    .light-color-inline input[type="color"]{
      width:34px!important;height:28px!important;min-width:34px!important;
      padding:2px!important;border:1px solid rgba(0,0,0,.12)!important;
      border-radius:7px!important;background:transparent!important;cursor:pointer!important;
    }
    body.night-mode .light-color-inline input[type="color"]{border-color:rgba(255,255,255,.12)!important}



    .env-guide-note{
      position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
      z-index:15;padding:7px 11px;border-radius:8px;
      background:rgba(20,22,34,.76);color:#d7d9e8;font-size:10px;
      border:1px solid rgba(255,255,255,.08);pointer-events:none;
      display:none;backdrop-filter:blur(8px)
    }
    .env-guide-note.show{display:block}


/* ========================================================================
   v4.0 — Direct Part Selection + Pro Texture Editor
   ======================================================================== */
.obj-part-empty{
  padding:30px 14px;text-align:center;border:1px dashed rgba(102,126,234,.24);
  border-radius:12px;background:rgba(102,126,234,.035);color:#8b8b9b;
  font-size:11px;line-height:1.9
}
.obj-part-empty i{display:block;font-size:28px;color:#667eea;margin-bottom:9px}
.obj-selected-panel{display:flex;flex-direction:column;gap:10px}
.obj-selected-head{
  display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;
  background:rgba(102,126,234,.07);border:1px solid rgba(102,126,234,.14)
}
.obj-selected-head .part-dot{width:8px;height:8px;border-radius:50%;background:#667eea;box-shadow:0 0 0 4px rgba(102,126,234,.09)}
.obj-selected-head .part-title{font-size:11px;font-weight:700;color:#333;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.night-mode .obj-selected-head .part-title{color:#e7e7ee}
.obj-part-hover-label{
  position:fixed;z-index:12000;pointer-events:none;display:none;
  padding:5px 8px;border-radius:7px;background:rgba(20,22,32,.84);
  border:1px solid rgba(90,169,255,.35);color:#dcecff;font-size:9px;
  transform:translate(12px,12px);white-space:nowrap
}
.obj-part-hover-label.show{display:block}

/* Pro editor */
.pro-editor-overlay{
  position:fixed;inset:0;z-index:10120;background:transparent;
  backdrop-filter:none;display:none;pointer-events:none
}
.pro-editor-overlay.open{display:block}
.pro-editor-window{
  position:absolute;top:60px;left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100vw - 30px));height:min(720px,calc(100vh - 84px));
  min-width:620px;min-height:500px;background:#171827;color:#eee;
  border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 28px 80px rgba(0,0,0,.45);
  pointer-events:auto;resize:both
}
.pro-editor-window.maximized{
  top:18px!important;left:18px!important;right:18px!important;bottom:18px!important;
  width:auto!important;height:auto!important;transform:none!important;resize:none!important
}
.pro-editor-head{
  height:56px;display:flex;align-items:center;gap:8px;padding:0 13px;
  background:#202135;border-bottom:1px solid rgba(255,255,255,.07);
  cursor:move;user-select:none;flex-shrink:0
}
.pro-editor-head .title{font-size:12px;font-weight:700;margin-left:auto}
.pro-editor-head .title small{font-size:9px;color:#9393aa;font-weight:400;margin-right:6px}
.pro-head-btn{
  width:31px;height:31px;border:1px solid rgba(255,255,255,.08);
  border-radius:8px;background:rgba(255,255,255,.05);color:#b7b7c7;cursor:pointer
}
.pro-head-btn:hover{background:rgba(255,255,255,.09);color:#fff}
.pro-head-btn:disabled{opacity:.3;cursor:default}
.pro-head-btn.history{color:#aeb8ff;border-color:rgba(102,126,234,.25)}

.pro-editor-toolbar{
  min-height:48px;display:flex;align-items:center;gap:5px;padding:7px 12px;
  background:#191a2a;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap
}
.pro-tool{
  height:34px;border:1px solid rgba(255,255,255,.07);border-radius:8px;
  background:#24253a;color:#aaaac0;font:600 9px inherit;padding:0 9px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px
}
.pro-tool:hover,.pro-tool.active{color:#fff;border-color:rgba(102,126,234,.38);background:#2b2d47}
.pro-tool.primary-soft{color:#c6ccff;background:rgba(102,126,234,.12)}
.pro-tool i{font-size:11px}
.pro-zoom-group{display:flex;align-items:center;gap:3px;padding-right:4px}
.pro-zoom-value{font-size:9px;color:#9090a6;min-width:40px;text-align:center}
.pro-toolbar-spacer{flex:1}
.pro-uv-toggle,.pro-tiling-toggle{display:inline-flex;align-items:center;gap:5px;color:#9a9aad;font-size:9px;cursor:pointer}
.pro-uv-toggle input,.pro-tiling-toggle input{accent-color:#667eea}

.pro-editor-main{
  flex:1;min-height:0;padding:10px;display:flex;flex-direction:column;
  align-items:center;gap:8px;overflow:hidden
}
.pro-canvas-wrap{
  flex:none;width:460px;height:460px;aspect-ratio:1 / 1;min-width:240px;min-height:240px;
  position:relative;border:1px solid rgba(255,255,255,.07);
  border-radius:11px;overflow:hidden;background:
  linear-gradient(45deg,#202331 25%,transparent 25%) -8px 0/16px 16px,
  linear-gradient(-45deg,#202331 25%,transparent 25%) -8px 0/16px 16px,
  linear-gradient(45deg,transparent 75%,#202331 75%) -8px 0/16px 16px,
  linear-gradient(-45deg,transparent 75%,#202331 75%) -8px 0/16px 16px,#141620
}
#proEditorCanvas{width:100%;height:100%;display:block;touch-action:none}
.pro-crop-actions{
  width:100%;display:none;align-items:center;justify-content:center;gap:7px;
  padding:7px;border-radius:9px;background:rgba(22,23,36,.92);
  border:1px solid rgba(255,255,255,.07)
}
.pro-crop-actions.show{display:flex}
.pro-crop-actions button{border:0;border-radius:7px;padding:7px 12px;font:700 9px inherit;cursor:pointer}
.pro-crop-actions .cancel{background:rgba(255,255,255,.06);color:#aaaabd}
.pro-crop-actions .apply{background:rgba(60,190,120,.18);color:#8de0ae}

.pro-editor-bottom{
  width:100%;display:flex;align-items:center;gap:8px;min-height:42px;
  padding-top:2px
}
.pro-tiling-box{
  display:none;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)
}
.pro-tiling-box.show{display:flex}
.pro-tiling-box span{font-size:9px;color:#9292a5}
.pro-tiling-box input[type=number]{
  width:48px;background:#11131d;border:1px solid rgba(255,255,255,.08);
  color:#ddd;border-radius:6px;padding:5px;font:10px inherit;text-align:center
}
.pro-editor-foot{
  height:58px;display:flex;align-items:center;gap:8px;padding:0 13px;
  background:#191a2a;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0
}
.pro-foot-btn{border:0;border-radius:8px;padding:8px 18px;font:700 10px inherit;cursor:pointer}
.pro-foot-btn.cancel{background:rgba(220,80,90,.08);color:#d6848b;margin-left:auto}
.pro-foot-btn.apply{background:rgba(102,126,234,.12);color:#c5cbff}
.pro-foot-btn.ok{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}

.v4-session-gallery{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.v4-session-gallery-title{font-size:8px;color:#7f7f94;margin-bottom:6px}
.v4-session-gallery-row{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px}
.v4-session-thumb{
  width:52px;height:52px;min-width:52px;border-radius:7px;overflow:hidden;
  padding:0;border:1px solid rgba(255,255,255,.07);background:#151622;cursor:pointer
}
.v4-session-thumb:hover{border-color:rgba(102,126,234,.48)}
.v4-session-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.v4-map-current.clickable{cursor:pointer}
.v4-map-current.clickable:hover{color:#c8cdff}

/* UV overlay legend */
.pro-uv-note{
  position:absolute;left:10px;bottom:10px;padding:5px 8px;border-radius:7px;
  background:rgba(5,7,12,.70);border:1px solid rgba(0,245,255,.25);
  color:#aeeef1;font-size:8px;pointer-events:none;display:none
}
.pro-uv-note.show{display:block}


/* ========================================================================
   v4.1 — Unified Surface + Image Editor
   ======================================================================== */
.pro-surface-head{
  min-height:54px;display:flex;align-items:center;gap:7px;padding:8px 12px;
  background:#11131f;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;
  position:relative;z-index:4
}
.pro-surface-title{
  display:flex;align-items:center;gap:7px;margin-left:auto;color:#e5e6ee;
  font-size:11px;font-weight:700;white-space:nowrap
}
.pro-surface-title i{color:#9ea8ff}
.pro-surface-btn{
  height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);color:#c4c4d2;font:600 9px inherit;
  padding:0 10px;cursor:pointer;white-space:nowrap
}
.pro-surface-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.pro-surface-btn.primary{
  background:rgba(102,126,234,.16);border-color:rgba(102,126,234,.32);color:#ccd1ff
}
.pro-map-select{
  height:34px;min-width:135px;border-radius:8px;border:1px solid rgba(102,126,234,.28);
  background:#202238;color:#e2e3ef;font:600 10px inherit;padding:0 9px;cursor:pointer
}
.pro-editor-preset-drawer{
  display:none;position:absolute;top:54px;left:10px;right:10px;z-index:12;
  max-height:250px;overflow:auto;padding:10px;border-radius:0 0 12px 12px;
  background:#171827;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 45px rgba(0,0,0,.35)
}
.pro-editor-preset-drawer.open{display:block}
.pro-editor-preset-drawer .v4-lib-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
.pro-empty-drop{
  position:absolute;inset:20px;z-index:7;display:none;align-items:center;justify-content:center;
  border:2px dashed rgba(102,126,234,.28);border-radius:14px;
  background:rgba(102,126,234,.035);transition:.15s ease
}
.pro-empty-drop.show{display:flex}
.pro-empty-drop.dragover{
  background:rgba(102,126,234,.10);border-color:#8394ff;transform:scale(.995)
}
.pro-empty-drop-inner{
  width:min(420px,86%);text-align:center;padding:28px 22px;color:#9899ad;pointer-events:none
}
.pro-empty-drop-icon{
  width:62px;height:62px;border-radius:18px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  background:rgba(102,126,234,.12);color:#aeb8ff
}
.pro-empty-drop h4{margin:0 0 7px;font-size:13px;color:#e4e5ed}
.pro-empty-drop p{margin:0 0 16px;font-size:9px;line-height:1.8;color:#85869a}
.pro-empty-system-btn{
  pointer-events:auto!important;border:0;border-radius:10px;padding:11px 22px;
  background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;
  font:700 10px inherit;cursor:pointer;box-shadow:0 8px 22px rgba(102,126,234,.2)
}
.pro-empty-system-btn i{margin-left:6px}
.pro-map-status{
  position:absolute;top:9px;right:9px;z-index:5;display:none;align-items:center;gap:6px;
  padding:5px 8px;border-radius:7px;background:rgba(11,13,20,.72);
  border:1px solid rgba(255,255,255,.06);font-size:8px;color:#aaaabd;pointer-events:none
}
.pro-map-status.show{display:flex}
.pro-map-status i{color:#77d6a1}
.pro-editor-toolbar.disabled-tools .pro-tool:not(.primary-soft){opacity:.35;pointer-events:none}


.pro-surface-head{cursor:move;user-select:none}
.pro-surface-head button,.pro-surface-head select{cursor:pointer}
.pro-editor-head{cursor:default}
.pro-map-select-wrap{
  position:relative;display:flex;align-items:center;min-width:145px;margin-left:auto
}
.pro-map-select-wrap .pro-map-select{
  width:100%;appearance:none;-webkit-appearance:none;padding-left:30px;padding-right:10px
}
.pro-map-select-wrap>i{
  position:absolute;left:10px;pointer-events:none;color:#9ea8ff;font-size:9px
}


.pro-empty-drop.show{background:rgba(16,18,29,.72)}
.pro-empty-drop.show::after{
  content:"محدوده اثر روی آبجکت";position:absolute;left:50%;bottom:9%;
  transform:translateX(-50%);font-size:8px;color:rgba(160,190,255,.72)
}


/* ========================================================================
   index3 requested edits — safe override layer
   ======================================================================== */
#canvas-wrapper{
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
}
#viewport-stage{
  position:relative;flex:1;min-width:0;min-height:0;width:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#viewport-stage>canvas{
  display:block;position:relative;z-index:1;visibility:visible;opacity:1;
}
.vp-toolbar{
  position:relative!important;top:auto!important;left:auto!important;transform:none!important;
  width:100%!important;height:48px!important;min-height:48px!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;
  direction:ltr!important;gap:5px!important;padding:0 12px!important;
  border-radius:0!important;border:0!important;border-bottom:1px solid rgba(0,0,0,.07)!important;
  background:rgba(255,255,255,.94)!important;box-shadow:0 3px 14px rgba(0,0,0,.045)!important;
  flex-shrink:0;z-index:25!important;
}
body.night-mode .vp-toolbar{
  background:rgba(20,20,35,.94)!important;border-bottom-color:rgba(255,255,255,.06)!important;
}

#canvas-wrapper>canvas{display:none!important}

/* library emphasis */
.shb-model-group{
  border:1px solid rgba(215,166,72,.85)!important;
  background:rgba(215,166,72,.045)!important;
  border-radius:11px!important;padding:5px 11px!important;min-height:40px!important;
}
.shb-model-group .library-btn{
  padding:6px 18px!important;min-height:32px!important;
  border:1px solid rgba(215,166,72,.95)!important;
  background:rgba(215,166,72,.10)!important;color:#a97119!important;
  border-radius:9px!important;font-size:12.5px!important;
}
.shb-model-group .library-btn i{font-size:14px!important}
.shb-model-group .library-btn:hover{
  background:rgba(215,166,72,.18)!important;
  border-color:#d7a648!important;box-shadow:0 3px 14px rgba(215,166,72,.16)!important;
}
body.night-mode .shb-model-group{
  border-color:rgba(215,166,72,.72)!important;background:rgba(215,166,72,.05)!important;
}
body.night-mode .shb-model-group .library-btn{
  color:#e5ba68!important;border-color:rgba(215,166,72,.85)!important;background:rgba(215,166,72,.10)!important;
}
#cubeSurfaceSlot,#objSurfaceSlot{margin-top:8px}
#sharedSurfacePanel{margin-top:0}


/* v4.4 — viewport zoom + periodic tiling/offset */
.pro-editor-bottom{flex-wrap:wrap}
#proOffsetBox.show{display:flex}
#proOffsetBox span{font-size:9px;color:#9292a5}
#proOffsetBox input[type=number]{
  width:56px;background:#11131d;border:1px solid rgba(255,255,255,.08);
  color:#ddd;border-radius:6px;padding:5px;font:10px inherit;text-align:center
}


/* v4.5 — editor UI / environment defaults */
.pro-editor-viewport,
.pro-editor-viewport-fixed,
.pro-editor-stage,
.pro-editor-canvas-wrap{
  border-radius:0!important;
}
.pro-editor-viewport canvas,
.pro-editor-viewport-fixed canvas{
  border-radius:0!important;
}
.vp-toolbar{
  border:1px solid rgba(90,105,145,.28)!important;
  border-bottom-color:rgba(90,105,145,.38)!important;
  background:rgba(247,248,252,.98)!important;
}
body.night-mode .vp-toolbar{
  border-color:rgba(255,255,255,.09)!important;
  background:rgba(24,25,42,.98)!important;
}


/* v4.6 — compact tile/offset controls */
.pro-editor-bottom{
  flex-wrap:nowrap!important;
  gap:10px!important;
  min-height:42px;
}
.pro-pattern-controls{
  display:flex;
  align-items:center;
  gap:7px;
  direction:rtl;
  flex:0 0 auto;
  white-space:nowrap;
}
.pro-tiling-box.always-visible{
  display:flex!important;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border-radius:6px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.055);
}
.pro-tiling-box.always-visible input[type=number]{
  width:38px!important;
  height:24px;
  padding:2px 4px!important;
  border-radius:5px!important;
  font-size:9px!important;
}
.pro-offset-controls{
  display:none;
  align-items:center;
  gap:8px;
  min-width:0!important;
  padding:3px 6px;
  border-radius:6px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.055);
  direction:ltr;
}
.pro-offset-controls.show{display:flex!important}
.pro-offset-axis{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}
.pro-offset-axis>span{
  width:10px;
  text-align:center;
  font-size:9px;
  color:#9292a5;
}
.pro-offset-axis input[type=range]{
  width:82px!important;
  min-width:82px;
  height:3px;
  margin:0;
  accent-color:#6978ff;
}
.pro-offset-axis input[type=number]{
  width:46px!important;
  height:24px;
  padding:2px 3px!important;
  border-radius:5px!important;
  font-size:9px!important;
}
.pro-editor-shortcuts{
  font-size:8px;
  color:#707086;
  margin-right:auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:1050px){
  .pro-offset-axis input[type=range]{width:64px!important;min-width:64px}
  .pro-offset-axis input[type=number]{width:42px!important}
}


    .pro-tool.danger-soft{color:#d66f78;background:rgba(214,111,120,.08);border-color:rgba(214,111,120,.16);min-width:34px;padding-inline:9px}
    .pro-tool.danger-soft:hover{background:rgba(214,111,120,.15);color:#ef8b94}
    .shb-export-main .export-quality-info{font-size:10px;font-weight:700;opacity:.55;margin-inline-start:4px;pointer-events:none}
    .aspect-select{
      appearance:none;-webkit-appearance:none;padding-inline-end:32px!important;cursor:pointer;
      background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
      background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
      background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    }

/* ================================================================
   v4.8 — unified sliders + graphic-software viewport menus
   ================================================================ */

/* Every slider uses the same geometry and a dark filled segment from min to thumb. */
input[type="range"]{
  --range-pct:0%;
  -webkit-appearance:none!important;
  appearance:none!important;
  direction:ltr!important;
  height:14px!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  cursor:pointer!important;
  background:
    linear-gradient(90deg,
      #4d5360 0%,
      #4d5360 var(--range-pct),
      #d9dce2 var(--range-pct),
      #d9dce2 100%) center/100% 3px no-repeat!important;
}
body.night-mode input[type="range"]{
  background:
    linear-gradient(90deg,
      #aeb5c3 0%,
      #aeb5c3 var(--range-pct),
      rgba(255,255,255,.16) var(--range-pct),
      rgba(255,255,255,.16) 100%) center/100% 3px no-repeat!important;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:3px!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:14px!important;height:14px!important;border-radius:50%!important;
  background:#555b67!important;border:0!important;margin-top:-5.5px!important;
  box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
}
body.night-mode input[type="range"]::-webkit-slider-thumb{background:#d0d5df!important}
input[type="range"]::-moz-range-track{height:3px!important;background:transparent!important;border:0!important}
input[type="range"]::-moz-range-progress{height:3px!important;background:transparent!important}
input[type="range"]::-moz-range-thumb{
  width:14px!important;height:14px!important;border-radius:50%!important;
  background:#555b67!important;border:0!important;box-shadow:0 1px 3px rgba(0,0,0,.18)!important;
}

/* Surface/material sliders now exactly follow the general slider visual language. */
.v4-tune input[type="range"],
.pro-offset-axis input[type="range"],
.shb-fov-slider{
  width:100%!important;
  min-width:0!important;
  height:14px!important;
}

/* Ratio: cue sits next to the word, never on top of the selected value. */
.shb-ratio-label{display:flex!important;align-items:center!important;gap:5px!important}
.shb-ratio-cue{font-size:8px;opacity:.58;transform:translateY(1px)}
.shb-ratio-select{
  appearance:none!important;
  -webkit-appearance:none!important;
  background-image:none!important;
  padding-inline:10px!important;
}

/* Viewport hint: upper-right, lighter and less intrusive. */
.vp-hint{
  top:60px!important;
  right:14px!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  opacity:.46!important;
  background:rgba(255,255,255,.48)!important;
  backdrop-filter:blur(7px)!important;
  border-color:rgba(0,0,0,.025)!important;
  box-shadow:none!important;
  padding:4px 9px!important;
  font-size:10px!important;
}
body.night-mode .vp-hint{
  background:rgba(20,20,35,.42)!important;
  color:#a2a5ad!important;
}

/* Three top-level graphic-software-style dropdowns. */
.vp-toolbar{
  direction:rtl!important;
  gap:7px!important;
  padding:6px 10px!important;
  overflow:visible!important;
}
.vp-toolbar>.vp-btn{display:none!important}
.vp-menu{position:relative;height:34px}
.vp-menu-trigger{
  height:34px;
  border:1px solid rgba(0,0,0,.075);
  background:#fff;
  color:#40444e;
  border-radius:8px;
  padding:0 11px;
  display:flex;
  align-items:center;
  gap:7px;
  font-family:inherit;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.vp-menu-trigger:hover,.vp-menu.open>.vp-menu-trigger{
  background:#f1f2f6;
  border-color:rgba(80,90,120,.2);
  box-shadow:0 3px 12px rgba(28,34,54,.08);
}
.vp-menu-trigger:active{transform:translateY(1px)}
.vp-menu-chevron{font-size:8px;opacity:.55;transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.vp-menu.open .vp-menu-chevron{transform:rotate(180deg)}

.vp-menu-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:215px;
  padding:6px;
  background:rgba(255,255,255,.985);
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  box-shadow:0 18px 45px rgba(24,30,48,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px) scale(.985);
  transform-origin:top right;
  transition:opacity .18s ease,transform .22s cubic-bezier(.16,1,.3,1),visibility .18s;
  z-index:200;
}
.vp-menu.open>.vp-menu-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
.vp-menu-item{
  width:100%;
  min-height:36px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#3d424b;
  padding:7px 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:inherit;
  font-size:11px;
  text-align:right;
  cursor:pointer;
  transition:background .14s ease;
}
button.vp-menu-item:hover,.vp-menu-item.vp-submenu-host:hover{background:#f0f1f5}
.vp-menu-item>span:first-child{display:flex;align-items:center;gap:8px}
.vp-menu-item i{width:14px;text-align:center;color:#777d89}
.vp-item-arrow{font-size:8px!important;margin-right:auto}
.vp-check-item{position:relative}
.vp-check-item input{position:absolute;opacity:0;pointer-events:none}
.vp-check-ui{
  width:17px;height:17px;border-radius:5px;
  border:1px solid rgba(0,0,0,.16);
  display:flex!important;align-items:center!important;justify-content:center!important;
  background:#fff;
  color:transparent;
  flex:0 0 17px;
  transition:.16s ease;
}
.vp-check-item input:checked+.vp-check-ui{
  background:#4d5360;border-color:#4d5360;color:#fff;
}
.vp-check-ui i{font-size:9px!important;color:inherit!important;width:auto!important}

.vp-submenu-host{position:relative}
.vp-submenu{
  position:absolute;
  top:-6px;
  right:calc(100% + 7px);
  min-width:150px;
  padding:6px;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.99);
  border-radius:9px;
  box-shadow:0 15px 35px rgba(24,30,48,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(5px) scale(.985);
  transition:opacity .16s ease,transform .2s cubic-bezier(.16,1,.3,1),visibility .16s;
}
.vp-submenu-host:hover>.vp-submenu{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;
}
.vp-submenu button{
  width:100%;border:0;background:transparent;border-radius:6px;padding:8px 9px;
  display:flex;align-items:center;gap:8px;font:600 10px inherit;color:#444952;cursor:pointer;text-align:right
}
.vp-submenu button:hover{background:#f0f1f5}



.vp-studio-menu{
  flex:0 0 auto;
  order:999;
  margin-right:auto;
}
.vp-studio-menu .vp-studio-btn{
  height:34px;
  min-height:34px;
  border:1px solid rgba(94,120,48,.26);
  border-radius:8px;
  background:#A5C767;
  color:#243019;
  padding:0 11px;
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  transition:background .16s ease,transform .16s ease,border-color .16s ease;
  box-shadow:none;
}
.vp-studio-menu .vp-studio-btn > i:first-child{
  font-size:13px;
  line-height:1;
}
.vp-studio-menu .vp-studio-btn .vp-menu-chevron{
  color:rgba(36,48,25,.58);
  font-size:8px;
}
.vp-studio-menu .vp-studio-btn:hover{
  background:#b0d371;
  border-color:rgba(94,120,48,.36);
  transform:translateY(-1px);
}
body.night-mode .vp-studio-menu .vp-studio-btn{
  background:#A5C767;
  color:#1f2b15;
  border-color:rgba(165,199,103,.32);
  filter:none!important;
}
body.night-mode .vp-studio-menu .vp-studio-btn:hover{
  background:#b0d371;
}
.vp-studio-menu .vp-studio-panel{
  min-width:190px;
  left:0!important;
  right:auto!important;
  transform-origin:top left!important;
}
.vp-ratio-submenu{min-width:164px}
.vp-aspect-select{
  width:100%;
  height:34px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:7px;
  background:#f5f6f8;
  color:#3f444e;
  padding:0 9px;
  font:700 10px inherit;
  outline:none;
  cursor:pointer;
}
.vp-aspect-select:hover{background:#eef0f4}
.vp-aspect-select:focus{border-color:rgba(75,84,110,.32);box-shadow:0 0 0 2px rgba(75,84,110,.07)}
body.night-mode .vp-aspect-select{
  background:#292d3e;
  color:#f1f2f6;
  border-color:rgba(255,255,255,.09);
}
body.night-mode .vp-aspect-select:hover{background:#303548}
body.night-mode .vp-aspect-select option{background:#f2f2f4;color:#20232b}

.vp-menu-note{
  padding:12px 10px;
  font-size:10px;color:#9296a0;
  display:flex;align-items:center;gap:7px;justify-content:center;
  white-space:nowrap
}

body.night-mode .vp-menu-trigger{
  background:#25283a;color:#d9dbe3;border-color:rgba(255,255,255,.08)
}
body.night-mode .vp-menu-trigger:hover,
body.night-mode .vp-menu.open>.vp-menu-trigger{background:#303449}
body.night-mode .vp-menu-panel,
body.night-mode .vp-submenu{
  background:rgba(30,32,48,.99);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 18px 45px rgba(0,0,0,.36)
}
body.night-mode .vp-menu-item,
body.night-mode .vp-submenu button{color:#d0d3dc}
body.night-mode button.vp-menu-item:hover,
body.night-mode .vp-menu-item.vp-submenu-host:hover,
body.night-mode .vp-submenu button:hover{background:rgba(255,255,255,.06)}
body.night-mode .vp-check-ui{background:#242739;border-color:rgba(255,255,255,.15)}

/* Background picker modal */
.vp-bg-modal-card{max-width:360px!important;padding:16px!important}
.vp-bg-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.vp-bg-modal-head strong{display:flex;align-items:center;gap:8px}
.vp-bg-close{width:30px;height:30px;border:0;border-radius:8px;background:rgba(0,0,0,.05);cursor:pointer}
.vp-bg-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:14px}
.vp-bg-swatches .bg-color-option{
  aspect-ratio:1;border-radius:10px;border:2px solid transparent!important;
  background:var(--swatch)!important;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)
}
.vp-bg-swatches .bg-color-option.active{border-color:#667eea!important;box-shadow:0 0 0 2px rgba(102,126,234,.16)}
.vp-custom-color{
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid rgba(0,0,0,.07);border-radius:10px;padding:8px 10px;font-size:11px
}
.vp-custom-color input[type=color]{width:42px;height:30px;border:0;background:transparent;cursor:pointer}

/* True full-view mode: viewport fills the window and only its toolbar remains as UI. */
body.viewport-fullscreen #global-header,
body.viewport-fullscreen #subHeaderBar,
body.viewport-fullscreen #leftPanel,
body.viewport-fullscreen #rightPanel,
body.viewport-fullscreen #app-footer{
  display:none!important;
}
body.viewport-fullscreen #container{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  z-index:9990!important;
  display:block!important;
  margin:0!important;
  padding:0!important;
}
body.viewport-fullscreen #canvas-wrapper{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  border-radius:0!important;
}
body.viewport-fullscreen .vp-toolbar{
  position:relative!important;
  z-index:9995!important;
}
body.viewport-fullscreen .vp-hint{display:none!important}

/* ================================================================
   v4.9 — Texture editor: large square preview + vertical inspector
   ================================================================ */
.pro-editor-window{
  width:min(1240px,calc(100vw - 28px))!important;
  height:min(780px,calc(100vh - 74px))!important;
  min-width:760px!important;
  min-height:560px!important;
}
.pro-editor-main{
  flex:1!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 292px!important;
  gap:0!important;
  padding:0!important;
  align-items:stretch!important;
  overflow:hidden!important;
  background:#151622!important;
}
.pro-canvas-column{
  min-width:0!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:12px!important;
  overflow:hidden!important;
  border-left:1px solid rgba(255,255,255,.06)!important;
}
.pro-canvas-wrap{
  flex:none!important;
  width:520px;
  height:520px;
  max-width:100%!important;
  max-height:100%!important;
  aspect-ratio:1/1!important;
  border-radius:0!important;
  box-shadow:0 18px 46px rgba(0,0,0,.22)!important;
}
.pro-inspector{
  width:292px!important;
  min-width:292px!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  background:#1a1b2b!important;
  overflow:hidden!important;
}
.pro-inspector-scroll{
  flex:1!important;
  min-height:0!important;
  overflow:auto!important;
  padding:12px!important;
  scrollbar-width:thin;
}
.pro-inspector-section{
  padding:0 0 13px!important;
  margin:0 0 13px!important;
  border-bottom:1px solid rgba(255,255,255,.065)!important;
}
.pro-inspector-section:last-child{border-bottom:0!important;margin-bottom:0!important}
.pro-inspector-title{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  margin-bottom:9px!important;
  color:#a9aabe!important;
  font-size:9px!important;
  font-weight:800!important;
}
.pro-inspector-title i{color:#6f79b8!important;width:14px;text-align:center!important}
.pro-inspector-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
}
.pro-tools-grid .pro-tool{
  width:100%!important;
  justify-content:flex-start!important;
  height:34px!important;
  padding:0 8px!important;
}
.pro-tools-grid .pro-tool-wide{grid-column:1/-1!important}
.pro-quick-fit{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:6px!important;
  margin-bottom:9px!important;
}
.pro-quick-fit .pro-tool{justify-content:center!important;width:100%!important}
.pro-check-row{
  min-height:34px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:6px 2px!important;
  color:#a6a7b9!important;
  font-size:9px!important;
  cursor:pointer!important;
}
.pro-check-row input[type=checkbox]{accent-color:#667eea!important}
.pro-tiling-box.always-visible{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  width:100%!important;
  padding:0!important;
  margin-top:5px!important;
  background:transparent!important;
  border:0!important;
}
.pro-tiling-box label{
  display:grid!important;
  grid-template-columns:18px 1fr!important;
  align-items:center!important;
  gap:5px!important;
}
.pro-tiling-box input[type=number]{
  width:100%!important;
  height:30px!important;
}
.pro-offset-controls{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  width:100%!important;
  margin-top:6px!important;
}
.pro-offset-axis{
  display:grid!important;
  grid-template-columns:14px minmax(0,1fr) 54px!important;
  gap:6px!important;
  align-items:center!important;
  width:100%!important;
}
.pro-offset-axis input[type=number]{
  width:54px!important;
  height:28px!important;
}
.pro-editor-shortcuts{
  flex:0 0 auto!important;
  width:100%!important;
  padding:8px 11px!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
  font-size:8px!important;
  line-height:1.7!important;
  color:#707187!important;
  white-space:normal!important;
  background:#171827!important;
}
.pro-canvas-zoom{
  position:absolute!important;
  left:10px!important;
  bottom:10px!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  height:32px!important;
  padding:3px 5px!important;
  border-radius:8px!important;
  background:rgba(15,16,25,.82)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(8px)!important;
  z-index:8!important;
}
.pro-mini-icon{
  width:25px!important;height:25px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:0!important;border-radius:6px!important;
  background:transparent!important;color:#b6b7c8!important;cursor:pointer!important;
}
.pro-mini-icon:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
.pro-canvas-zoom .pro-zoom-value{min-width:38px!important;color:#b9baca!important}

/* Footer actions stay in the same physical location. Crop mode swaps the group. */
.pro-editor-foot{
  min-height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  padding:8px 13px!important;
}
.pro-foot-group{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
}
.pro-foot-group.normal.hidden{display:none!important}
.pro-foot-group.crop{display:none!important}
.pro-foot-group.crop.show{display:flex!important}
.pro-foot-btn.crop-cancel{
  background:rgba(232,163,61,.08)!important;
  color:#d6ad6a!important;
  border-color:rgba(232,163,61,.18)!important;
}
.pro-foot-btn.crop-apply{
  background:rgba(232,163,61,.2)!important;
  color:#ffd18a!important;
  border-color:rgba(232,163,61,.35)!important;
}
.pro-foot-btn.crop-apply:disabled{
  opacity:.35!important;
  cursor:not-allowed!important;
}

/* Crop mode is visually distinct and starts with a clean canvas—no preset rectangle. */
.pro-editor-window.crop-mode .pro-canvas-wrap{
  box-shadow:0 0 0 1px rgba(232,163,61,.3),0 18px 46px rgba(0,0,0,.22)!important;
}

/* Main viewport mouse hint: upper-left and MORE visible than before. */
.vp-hint{
  top:60px!important;
  left:14px!important;
  right:auto!important;
  bottom:auto!important;
  opacity:.72!important;
  background:rgba(255,255,255,.66)!important;
  color:#4f535d!important;
  border-color:rgba(0,0,0,.045)!important;
}
body.night-mode .vp-hint{
  background:rgba(20,20,35,.66)!important;
  color:#c0c2cb!important;
  opacity:.78!important;
}

/* Keep the side inspector usable on shorter desktops. */
@media(max-width:980px){
  .pro-editor-main{grid-template-columns:minmax(0,1fr) 250px!important}
  .pro-inspector{width:250px!important;min-width:250px!important}
}

/* v5.0 compact image editor */
.pro-surface-head{position:relative!important;z-index:700!important;overflow:visible!important}
.pro-editor-head{position:relative!important;z-index:60!important}
.pro-editor-main{position:relative!important;z-index:10!important;grid-template-columns:minmax(0,1fr) 300px!important}
.pro-editor-preset-drawer{z-index:5000!important;top:calc(100% - 1px)!important;left:10px!important;right:10px!important;max-height:min(430px,62vh)!important;box-shadow:0 24px 70px rgba(0,0,0,.58)!important}
.pro-head-btn.delete-danger{color:#ff777f!important;border-color:rgba(255,86,96,.32)!important;background:rgba(255,74,84,.10)!important}
.pro-head-btn.delete-danger:hover{color:#fff!important;background:#d94c56!important;border-color:#e65b65!important}

.pro-editor-foot{display:none!important}
.pro-inspector{width:300px!important;min-width:300px!important}
.pro-inspector-scroll{display:flex!important;flex-direction:column!important;padding:11px!important;overflow:auto!important}
.pro-inspector-section{padding:0!important;margin:0!important;border:0!important}
.pro-transform-section{display:flex!important;flex-direction:column!important;gap:7px!important}
.pro-three-tools{display:grid!important;grid-template-columns:1fr .82fr 1fr!important;gap:6px!important}
.pro-two-tools{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
.pro-three-tools .pro-tool,.pro-two-tools .pro-tool{width:100%!important;min-width:0!important;height:34px!important;padding:0 5px!important;justify-content:center!important;white-space:nowrap!important}
.pro-three-tools .pro-tool span{font-size:8.5px!important}
.pro-rotation-row .reset-rotation span{font-size:7.4px!important}
.free-resize-row{margin-top:1px!important;min-height:31px!important;padding:4px 3px!important}
.pro-inspector-divider{height:1px!important;flex:0 0 1px!important;margin:11px 0!important;background:rgba(255,255,255,.075)!important}
.pro-pattern-section{display:flex!important;flex-direction:column!important;gap:10px!important}
.pro-compact-block{display:flex!important;flex-direction:column!important;gap:6px!important}
.pro-compact-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:24px!important;color:#b7b8ca!important;font-size:10px!important;font-weight:800!important;cursor:pointer!important}
.pro-compact-heading input{accent-color:#667eea!important}
.pro-tiling-box.always-visible{margin:0!important}
.pro-offset-controls{margin:0!important;gap:6px!important}
.pro-offset-axis{grid-template-columns:14px minmax(0,1fr) 50px!important}
.pro-offset-axis input[type=number]{width:50px!important;height:27px!important}

.action-divider{margin-top:12px!important;margin-bottom:10px!important}
.pro-inspector-actions{margin-top:auto!important}
.pro-foot-group{width:100%!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important}
.pro-foot-group.crop{grid-template-columns:1fr 1fr!important;display:none!important}
.pro-foot-group.crop.show{display:grid!important}
.pro-foot-group.normal.hidden{display:none!important}
.pro-foot-btn{width:100%!important;min-width:0!important;height:34px!important;padding:0 7px!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;white-space:nowrap!important}

.pro-canvas-column{position:relative!important;display:grid!important;grid-template-rows:38px minmax(0,1fr)!important;place-items:center!important;padding:8px 12px 12px!important}
.pro-canvas-topbar{width:100%!important;min-height:38px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;align-self:stretch!important}
.pro-canvas-zoom{position:static!important;display:flex!important;align-items:center!important;gap:4px!important;height:31px!important;padding:3px 5px!important;border-radius:8px!important;background:#1b1c2b!important;border:1px solid rgba(255,255,255,.07)!important;box-shadow:none!important;backdrop-filter:none!important}
.pro-zoom-reset{height:25px!important;min-width:66px!important;padding:0 7px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#aeb0c1!important;font:700 8.5px inherit!important;cursor:pointer!important}
.pro-zoom-reset:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
.pro-zoom-reset i{font-size:8px!important;opacity:.72!important}
.pro-empty-drop{cursor:pointer!important;pointer-events:auto!important}
.pro-empty-drop-inner{pointer-events:none!important}
.pro-empty-drop p{margin-bottom:0!important}
#proUVToggle{display:none!important}
.pro-editor-shortcuts{display:none!important}

.pro-delete-confirm{position:absolute!important;inset:0!important;z-index:10000!important;display:none!important;align-items:center!important;justify-content:center!important;background:rgba(8,9,14,.56)!important;backdrop-filter:blur(3px)!important;pointer-events:auto!important}
.pro-delete-confirm.open{display:flex!important}
.pro-delete-card{width:min(330px,calc(100% - 34px))!important;padding:22px!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:14px!important;background:#202132!important;box-shadow:0 26px 80px rgba(0,0,0,.5)!important;text-align:center!important}
.pro-delete-icon{width:44px!important;height:44px!important;margin:0 auto 10px!important;display:flex!important;align-items:center!important;justify-content:center!important;border-radius:12px!important;color:#ff7b82!important;background:rgba(255,75,86,.12)!important;font-size:17px!important}
.pro-delete-card h3{margin:0 0 6px!important;font-size:13px!important;color:#f2f2f6!important}
.pro-delete-card p{margin:0 0 18px!important;font-size:9px!important;color:#9698aa!important}
.pro-delete-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
.pro-delete-actions button{height:36px!important;border-radius:8px!important;font:700 9px inherit!important;cursor:pointer!important}
.pro-delete-cancel{border:1px solid rgba(255,255,255,.08)!important;background:#292a3d!important;color:#c7c8d2!important}
.pro-delete-confirm-btn{border:1px solid #dc5962!important;background:#d94c56!important;color:#fff!important}
@media(max-width:980px){.pro-editor-main{grid-template-columns:minmax(0,1fr) 270px!important}.pro-inspector{width:270px!important;min-width:270px!important}}

/* ================================================================
   v5.1 — approved final editor layout adjustments
   ================================================================ */

/* One header only: the old second row is merged here. */
.pro-unified-head{
  min-height:56px!important;
  height:56px!important;
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  padding:7px 12px!important;
  flex-wrap:nowrap!important;
  overflow:visible!important;
  z-index:900!important;
}
.pro-unified-head .pro-surface-title{
  margin-left:0!important;
  flex:0 1 auto!important;
  max-width:230px!important;
}
.pro-unified-head .pro-surface-title small{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.pro-inline-editor-title{
  color:#e8e9f1!important;
  font-size:11px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
.pro-inline-editor-title small{
  font-size:8.5px!important;
  color:#8f91a4!important;
  font-weight:500!important;
}
.pro-head-spacer{flex:1 1 auto!important;min-width:8px!important}
.pro-map-select-wrap{flex:0 0 auto!important}
.pro-map-select{min-width:125px!important;height:34px!important}
.pro-editor-head{display:none!important}

/* Prepared-material drawer must float over the whole editor. */
.pro-editor-preset-drawer{
  z-index:12000!important;
  top:100%!important;
  left:10px!important;
  right:10px!important;
  max-height:min(470px,68vh)!important;
}

/* Exact 60 / 40 workspace split. */
.pro-editor-main{
  grid-template-columns:minmax(0,60%) minmax(0,40%)!important;
  gap:0!important;
}
.pro-canvas-column{
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:10px!important;
}
.pro-inspector{
  width:100%!important;
  min-width:0!important;
  border-right:1px solid rgba(255,255,255,.055)!important;
}

/* Preview is the upload surface when empty. */
.pro-canvas-wrap{
  cursor:default!important;
  outline:none!important;
}
.pro-canvas-wrap:focus-visible{
  box-shadow:0 0 0 2px rgba(102,126,234,.55),0 18px 46px rgba(0,0,0,.22)!important;
}
.pro-empty-drop{
  inset:0!important;
  z-index:20!important;
  border-radius:0!important;
  border:2px dashed rgba(115,128,220,.34)!important;
  background:rgba(55,60,95,.13)!important;
  pointer-events:none!important;
}
.pro-empty-drop.show{display:flex!important}
.pro-empty-drop.dragover{
  display:flex!important;
  background:rgba(102,126,234,.15)!important;
  border-color:#8fa0ff!important;
  transform:none!important;
}
.pro-empty-drop-inner{
  width:min(460px,84%)!important;
  padding:28px 22px!important;
  pointer-events:none!important;
}
.pro-empty-drop-icon{margin-bottom:13px!important}
.pro-empty-drop h4{
  font-size:15px!important;
  font-weight:800!important;
  color:#ececf4!important;
}
.pro-empty-drop p{
  margin:0 0 7px!important;
  font-size:10.5px!important;
  color:#b4b5c6!important;
  line-height:1.8!important;
}
.pro-drop-or{
  display:block!important;
  color:#7f82a2!important;
  font-size:9.5px!important;
}

/* Tool column: clearer, slightly larger, still compact. */
.pro-inspector-scroll{
  padding:13px 14px!important;
}
.pro-transform-section{gap:8px!important}
.pro-three-tools,.pro-two-tools{gap:7px!important}
.pro-three-tools{
  grid-template-columns:1fr .78fr 1fr!important;
}
.pro-three-tools .pro-tool,
.pro-two-tools .pro-tool{
  height:38px!important;
  border-radius:8px!important;
  padding:0 8px!important;
  font-size:10.5px!important;
  font-weight:700!important;
}
.pro-three-tools .pro-tool span,
.pro-two-tools .pro-tool span{
  font-size:10.5px!important;
  font-weight:700!important;
}
.pro-three-tools .pro-tool i,
.pro-two-tools .pro-tool i{font-size:11px!important}
.pro-rotation-row .reset-rotation span{font-size:10px!important}

/* All three checks are real centered toggle-buttons. */
.pro-toggle-button{
  position:relative!important;
  min-height:38px!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:0!important;
  padding:0 10px!important;
  border:1px solid rgba(255,255,255,.085)!important;
  border-radius:8px!important;
  background:#24253a!important;
  color:#b9bacb!important;
  font-size:10.5px!important;
  font-weight:750!important;
  cursor:pointer!important;
  user-select:none!important;
  text-align:center!important;
  transition:.15s ease!important;
}
.pro-toggle-button.compact{min-height:36px!important}
.pro-toggle-button:hover{
  background:#2b2d47!important;
  color:#fff!important;
}
.pro-toggle-button input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
.pro-toggle-check{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:5px!important;
  color:transparent!important;
  background:#171827!important;
}
.pro-toggle-check i{font-size:9px!important}
.pro-toggle-button:has(input:checked){
  color:#eef0ff!important;
  border-color:rgba(102,126,234,.48)!important;
  background:rgba(102,126,234,.19)!important;
}
.pro-toggle-button:has(input:checked) .pro-toggle-check{
  background:#667eea!important;
  border-color:#7888f2!important;
  color:#fff!important;
}

/* Tiling / Offset controls remain compact and readable. */
.pro-pattern-section{gap:11px!important}
.pro-tiling-box.always-visible{
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
.pro-tiling-box label{font-size:10px!important}
.pro-tiling-box input[type=number]{
  height:31px!important;
  font-size:10px!important;
}
.pro-offset-axis{
  grid-template-columns:15px minmax(0,1fr) 54px!important;
  gap:8px!important;
}
.pro-offset-axis>span{font-size:10px!important}
.pro-offset-axis input[type=number]{
  width:54px!important;
  height:29px!important;
  font-size:10px!important;
}

/* Zoom now lives at the bottom of the inspector: - / 100% / + */
.pro-inspector-zoom{
  width:100%!important;
  display:grid!important;
  grid-template-columns:38px minmax(72px,1fr) 38px!important;
  align-items:center!important;
  gap:7px!important;
}
.pro-inspector-zoom .pro-mini-icon{
  position:static!important;
  width:38px!important;
  height:34px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:#24253a!important;
  color:#c4c5d3!important;
  border-radius:8px!important;
}
.pro-inspector-zoom .pro-mini-icon:hover{background:#2d2f48!important;color:#fff!important}
.pro-inspector-zoom .pro-zoom-reset{
  min-width:0!important;
  width:100%!important;
  height:34px!important;
  border:1px solid rgba(255,255,255,.08)!important;
  background:#24253a!important;
  border-radius:8px!important;
  color:#c9cad7!important;
  font-size:10.5px!important;
  font-weight:800!important;
}
.pro-inspector-zoom .pro-zoom-reset:hover{background:#2d2f48!important;color:#fff!important}

/* Bottom actions remain in the tool column; there is still no footer. */
.pro-foot-btn{
  height:38px!important;
  font-size:10.5px!important;
  font-weight:800!important;
}

/* Maximize control: square when normal, dash when maximized. */
.pro-head-btn.max-square{
  font-size:18px!important;
  line-height:1!important;
}
#proMaxGlyph{
  display:block!important;
  transform:translateY(-1px)!important;
  font-family:Arial,sans-serif!important;
  font-weight:400!important;
}

/* Remove obsolete top-zoom layout completely. */
.pro-canvas-topbar{display:none!important}

/* Keep the material drawer visually above header/main layers. */
.pro-surface-head{overflow:visible!important}
.pro-editor-window{overflow:hidden!important}

/* Responsive: preserve the requested 60/40 relationship as long as desktop width permits. */
@media(max-width:900px){
  .pro-editor-main{grid-template-columns:minmax(0,58%) minmax(0,42%)!important}
  .pro-three-tools .pro-tool span,.pro-two-tools .pro-tool span{font-size:9.5px!important}
}