:root {
  --bg-app:#0c0c0e;--bg-topbar:#141417;--bg-sidebar:#16161a;--bg-card:#1e1e24;
  --bg-card-hover:#262630;--border:#282834;--border-focus:#fef08a;--border-subtle:#20202a;
  --accent:#fef08a;--accent-hover:#fef9c3;--accent-light:rgba(254,240,138,.12);
  --text-main:#f8fafc;--text-sec:#94a3b8;--text-muted:#64748b;
  --red:#ff5252;--green:#40c057;--blue:#4c6ef5;
  --font-sans:'Inter',system-ui,sans-serif;--font-mono:'JetBrains Mono',monospace;
  --topbar-h:54px;--sidebar-w:310px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:var(--bg-app);color:var(--text-main);font-family:var(--font-sans);overflow:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.app{display:flex;flex-direction:column;width:100%;height:100vh}

/* NAVBAR */
.navbar{height:var(--topbar-h);background:var(--bg-topbar);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;flex-shrink:0;z-index:20}
.navbar-left,.navbar-center,.navbar-right{display:flex;align-items:center;gap:10px}
.logo{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:800;letter-spacing:.04em}
.logo b{color:var(--accent)}.logo svg{color:var(--accent)}
.badge{background:var(--bg-card);color:var(--accent);border:1px solid var(--border);padding:2px 7px;border-radius:4px;font-size:10px;font-weight:700;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase}

/* LANGUAGE SWITCHER */
.lang-switcher{display:flex;align-items:center;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;padding:1px;gap:2px}
.lang-btn{background:transparent;border:none;color:var(--text-sec);font-size:10px;font-weight:700;font-family:var(--font-mono);padding:2px 6px;border-radius:3px;cursor:pointer;transition:all .15s;letter-spacing:.05em}
.lang-btn:hover{color:var(--text-main)}
.lang-btn.active{background:var(--accent);color:#0f0f12}

.tool-item{display:flex;align-items:center;gap:6px}
.tool-label{font-size:10px;font-weight:700;color:var(--text-sec);letter-spacing:.08em;font-family:var(--font-mono)}
.tool-divider{width:1px;height:18px;background:var(--border)}
.modal-body select{background:var(--bg-app);color:var(--text-main);border:1px solid var(--border);border-radius:6px;padding:6px 12px;font-size:12px;font-weight:600;outline:none}

/* RATIO BUTTON GRID (hidden on desktop, flex on mobile) */
.ratio-btn-grid{display:none}

/* DRAWER HANDLE (visible only on mobile via media query) */
.drawer-handle{display:none}

/* MOBILE EXPORT BUTTON (hidden on desktop) */
.mobile-export-btn{display:none !important}

/* MOBILE & RESPONSIVE TOUCH STYLES */

  .mobile-dock-tg, .mobile-dock-export {
    display: none;
  }

  .mobile-bottom-bar{display:none}
.mobile-drawer-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:900;transition:opacity .2s}
.mobile-drawer-overlay.active{display:block}

/* FULLSCREEN PREVIEW MODE (double-tap canvas) */
.app.fullscreen-preview .navbar,
.app.fullscreen-preview .mobile-bottom-bar,
.app.fullscreen-preview .zoom-controls{display:none !important}
.app.fullscreen-preview .canvas-viewport{height:100vh !important;height:100dvh !important}

@media (max-width: 768px), (orientation: landscape) and (max-height: 550px) {
  /* ========== HEADER: Compact 44px ========== */
  .navbar{height:44px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;z-index:auto;gap:6px}
  .navbar-left{gap:6px;flex-shrink:0}
  .logo span{font-size:12px}
  .badge{display:none}
  /* .btn-tg is styled via dedicated mobile block below */
  .navbar-right #btn-clear-canvas{display:none}
  .navbar-right #btn-export{display:none}
  .mobile-export-btn{display:inline-flex !important;width:36px;height:36px;padding:0;border-radius:8px;flex-shrink:0}
  .navbar-right{gap:6px}

  /* ========== CANVAS VIEWPORT: Full bleed ========== */
  .canvas-viewport{padding:8px;height:calc(100vh - 44px - 56px);height:calc(100dvh - 44px - 56px)}

  /* ========== DRAWER HANDLE: iOS-style pill ========== */
  .drawer-handle{display:block;width:36px;height:4px;background:rgba(255,255,255,.35);border-radius:4px;margin:10px auto 6px;flex-shrink:0;cursor:grab}
  .drawer-handle:active{background:var(--accent)}

  /* ========== SHARED DRAWER STYLES ========== */
  .studio-sidebar,.inspector-section,.navbar-center{
    position:fixed !important;bottom:56px;bottom:calc(56px + env(safe-area-inset-bottom));
    left:0;right:0;width:100%;max-height:50vh;height:auto;
    background:var(--bg-sidebar);z-index:950;
    border-radius:16px 16px 0 0;
    transform:translateY(120%);
    transition:transform .35s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow:0 -8px 32px rgba(0,0,0,.6),0 -1px 0 var(--accent);
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;touch-action:pan-y
  }
  .studio-sidebar.mobile-open,.inspector-section.mobile-open,.navbar-center.mobile-open{
    transform:translateY(0)
  }

  /* Inspector as standalone drawer on mobile (moved to body level by JS) */
  .inspector-section[hidden].mobile-open{display:block !important}
  .inspector-section.mobile-open{padding-top:4px;max-height:42vh}

  /* ========== LAYOUT DRAWER: MATCH SETTINGS FORMAT (LABEL LEFT, LONG SLIDER RIGHT) ========== */
  .navbar-center{padding:4px 14px 12px;display:flex;flex-direction:column;gap:8px;max-height:48vh}
  .navbar-center .tool-divider{display:none}
  .desktop-only-select{display:none !important}
  
  .tool-item-ratio{display:flex;flex-direction:column;gap:4px;width:100%}
  .tool-item-ratio .tool-label{font-size:10px;color:var(--text-sec);margin-bottom:2px}
  .ratio-btn-grid{display:flex;gap:4px;overflow-x:auto;width:100%;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .ratio-btn{flex:1;min-width:44px;padding:6px 4px;font-size:11px;font-weight:700;font-family:var(--font-mono);background:var(--bg-card);color:var(--text-sec);border:1px solid var(--border);border-radius:6px;cursor:pointer;white-space:nowrap;text-align:center;transition:all .15s}
  .ratio-btn.active{background:var(--accent);color:#0f0f12;border-color:var(--accent)}

  .prop-row-layout{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:8px !important;width:100% !important;flex-wrap:nowrap !important}
  .prop-row-layout .tool-label{font-size:11px !important;width:65px !important;flex-shrink:0 !important;margin:0 !important;display:inline-block !important}
  .prop-row-layout .tool-toggle-label{display:flex !items:center;gap:4px;width:65px;flex-shrink:0}
  .prop-row-layout .slider-val-box{display:flex !important;align-items:center !important;gap:6px !important;flex:1 !important;min-width:0 !important}
  .prop-row-layout .app-slider{flex:1 !important;width:100% !important;min-width:0 !important}
  .stroke-row{display:flex;align-items:center;gap:4px}

  /* ZOOM CONTROLS: Hidden on mobile — use pinch-to-zoom */
  .zoom-controls{display:none !important}

  /* ========== MOBILE BOTTOM NAVIGATION ========== */
  
  .mobile-bottom-bar{
    display:flex;position:fixed;bottom:0;left:0;width:100%;
    height:calc(56px + env(safe-area-inset-bottom));
    padding:4px 6px;padding-bottom:calc(4px + env(safe-area-inset-bottom));
    gap:2px;
    background:var(--bg-topbar);
    border-top:1px solid var(--border);
    z-index:1000;
    box-shadow:0 -6px 24px rgba(0,0,0,.6)
  }
  .mobile-tab-btn{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;background:none;border:none;
    color:var(--text-muted);font-size:9px;font-weight:700;
    font-family:var(--font-mono);letter-spacing:.03em;
    border-radius:10px;cursor:pointer;
    transition:all .2s;position:relative;
    -webkit-tap-highlight-color:transparent
  }
  .mobile-dock-tg, .mobile-dock-export {
    display: none !important;
  }
  .mobile-tab-btn svg{width:20px;height:20px;transition:color .2s}
  .mobile-tab-btn.active{color:var(--accent);background:var(--accent-light)}
  .mobile-tab-btn.active svg{color:var(--accent)}
  .mobile-tab-btn:active{transform:scale(0.92)}
  .mobile-tab-btn .count-pill{position:absolute;top:2px;right:calc(50% - 20px);font-size:8px;padding:0 4px;min-width:14px;height:14px;line-height:14px;text-align:center;border-radius:7px;background:var(--accent);color:#0f0f12;font-weight:800}

  /* ========== TOUCH TARGET ENHANCEMENT ========== */
  .app-slider{height:20px}
  .app-slider::-webkit-slider-thumb{width:28px;height:28px}
  .app-slider::-moz-range-thumb{width:28px;height:28px}
  .val-num-input{width:56px;height:38px;font-size:14px;border-radius:6px}
  .btn{min-height:44px;padding:10px 18px;font-size:13px;border-radius:8px}
  .btn-upload{padding:12px;font-size:13px}
  .icon-btn{width:28px;height:28px;border-radius:6px}

  /* RESIZE HANDLES - enlarged for touch */
  .resize-handle{width:28px;height:28px;border-radius:4px;border-width:2.5px}
  .handle-nw{top:-14px;left:-14px}
  .handle-ne{top:-14px;right:-14px}
  .handle-sw{bottom:-14px;left:-14px}
  .handle-se{bottom:-14px;right:-14px}
  .cell:hover .resize-handle,.cell.selected .resize-handle{opacity:1}

  /* REGION BOX HANDLES - enlarged */
  .region-box-handle{width:16px;height:16px}
  .rb-nw{top:-8px;left:-8px}
  .rb-ne{top:-8px;right:-8px}
  .rb-sw{bottom:-8px;left:-8px}
  .rb-se{bottom:-8px;right:-8px}

  /* LIBRARY GRID - bigger cards */
  .library-grid{grid-template-columns:repeat(3,1fr);gap:6px}
  .lib-card{min-height:80px}
  .lib-del-btn{width:24px;height:24px;font-size:14px;line-height:24px;border-radius:6px;opacity:1}

  /* INSPECTOR mobile tweaks — compact */
  .inspector-controls{padding:8px 14px 12px;gap:6px}
  .prop-group{gap:4px}
  .prop-row{gap:6px}
  .prop-label{font-size:11px;width:60px}
  .tab-btn{padding:6px 10px;font-size:11px}
  .toggle-label{font-size:12px}
  .toggle-label input{width:16px;height:16px}
  .segment-btn{padding:4px 8px;font-size:10px}
  .effect-card{padding:8px;gap:6px}
  .effect-body{gap:4px}
  .section-header{height:34px;padding:0 14px}
  .prop-actions{display:flex !important;flex-direction:row !important;gap:8px !important;margin-top:6px !important;width:100% !important}
  .prop-actions .btn{flex:1 !important;width:50% !important;min-height:40px !important;font-size:12px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important}

  /* ASSETS DRAWER MOBILE FULL WIDTH */
  .studio-sidebar{width:100% !important;left:0 !important;right:0 !important;max-width:100% !important}
  .library-section{width:100% !important}
  .upload-dropzone{width:100% !important;padding:10px 14px}
  .btn-upload{display:flex !important;align-items:center !important;justify-content:center !important;width:100% !important;min-height:44px !important;cursor:pointer !important;text-align:center !important}
  .empty-canvas{cursor:pointer;pointer-events:auto}

  /* EXPORT MODAL mobile */
  .export-modal-window{width:calc(100% - 24px);margin:12px;border-radius:16px}
  .modal-overlay{align-items:center;justify-content:center}

  /* Hide desktop zoom controls bar from canvas on mobile (it's a drawer now) */
  .studio-body{position:relative}
}

.navbar-center select,.desktop-only-select{background:var(--bg-card);color:var(--text-main);border:1px solid var(--border);border-radius:4px;padding:3px 18px 3px 7px;font-size:11px;font-weight:700;font-family:var(--font-mono);outline:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 5px center}
/* THICK FLEXIBLE SLIDERS */
.app-slider{flex:1;width:100%;min-width:60px;height:12px;appearance:none;-webkit-appearance:none;background:var(--bg-card);border-radius:6px;border:1px solid var(--border);outline:none;cursor:pointer;padding:0;margin:0;transition:border-color .15s}
.navbar .app-slider{width:75px;flex:none}
.app-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#ffffff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.4);cursor:pointer;transition:transform .15s,background .15s}
.app-slider::-webkit-slider-thumb:hover,.app-slider::-webkit-slider-thumb:active{transform:scale(1.25);background:var(--accent-light)}

.app-slider.slider-red::-webkit-slider-thumb{border-color:var(--red)}
.app-slider.slider-green::-webkit-slider-thumb{border-color:var(--green)}
.app-slider.slider-blue::-webkit-slider-thumb{border-color:var(--blue)}

/* EDITABLE NUMBER INPUTS */
.val-num-input{width:46px;height:24px;background:var(--bg-card);color:var(--text-main);border:1px solid var(--border);border-radius:4px;font-family:var(--font-mono);font-size:11px;font-weight:700;text-align:center;outline:none;padding:0 2px;transition:border-color .15s,background .15s}
.val-num-input:focus,.val-num-input:hover{border-color:var(--accent);background:#1e1e28}
.val-num-input::-webkit-inner-spin-button,.val-num-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.val-num-input[type=number]{-moz-appearance:textfield}
.tool-val{font-size:10px;font-weight:600;font-family:var(--font-mono);color:var(--text-muted);min-width:28px}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:4px 11px;border-radius:4px;font-size:11px;font-weight:700;font-family:var(--font-mono);letter-spacing:.04em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:all .15s}
.btn-primary{background:var(--accent);color:#0f0f12;font-weight:700}.btn-primary:hover{background:var(--accent-hover);color:#000000}
.btn-secondary{background:var(--bg-card);color:var(--text-sec);border-color:var(--border)}.btn-secondary:hover{background:var(--bg-card-hover);color:var(--text-main)}
.btn-tg{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;overflow:hidden;background:transparent !important;border:none !important;box-shadow:none !important;cursor:pointer;transition:transform .15s ease,opacity .15s ease;flex-shrink:0}.btn-tg:hover{transform:scale(1.06);opacity:.92}.btn-tg svg{width:26px;height:26px;display:block}
.btn-upload{width:100%;background:var(--accent-light);color:var(--accent);border:1px dashed var(--accent);padding:7px;font-weight:700}.btn-upload:hover{background:var(--accent);color:#0f0f12}
.btn-danger{background:rgba(239,68,68,.12);color:var(--red);border-color:rgba(239,68,68,.2)}.btn-danger:hover{background:var(--red);color:#fff}
.btn-full{width:100%}
.icon-btn{width:22px;height:22px;border-radius:4px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-sec);font-size:13px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.icon-btn:hover{background:var(--bg-card-hover);color:var(--text-main)}.icon-btn.danger:hover{background:var(--red);color:#fff}

/* STUDIO BODY */
.studio-body{display:flex;flex:1;overflow:hidden}

/* CANVAS VIEWPORT — simple centering, no nested flex sizing tricks */
.canvas-viewport{flex:1;background:var(--bg-app);background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:22px 22px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;padding:20px;touch-action:none}

/* ZOOM & PAN CONTROLS (BOTTOM CENTER) */
.zoom-controls{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:4px 8px;z-index:100;box-shadow:0 6px 20px rgba(0,0,0,.5);pointer-events:auto;touch-action:auto}
.zoom-controls .icon-btn{pointer-events:auto}
.zoom-val{font-size:11px;font-weight:700;font-family:var(--font-mono);color:var(--accent);min-width:40px;text-align:center;user-select:none}
.icon-btn.active{background:var(--accent);color:#0f0f12;font-weight:800;border-color:var(--accent)}

/* CANVAS FRAME — EXPLICIT PIXEL W/H set by JS, position:relative for abs children */
.canvas-frame{position:relative;border-radius:10px;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 0 1px var(--border);background:#121215;flex-shrink:0;flex-grow:0;touch-action:none}
.canvas-frame.drag-over{box-shadow:0 0 0 3px var(--accent),0 0 24px rgba(254,240,138,.4)}

/* COLLAGE CANVAS — fills frame, children absolute */
.collage-canvas{position:absolute;top:0;left:0;width:100%;height:100%;touch-action:none}

/* EMPTY STATE — centered placeholder */
.empty-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);text-align:center;gap:10px;pointer-events:none}
.empty-canvas h3{font-size:14px;font-weight:600;color:var(--text-sec)}
.empty-canvas svg{color:var(--text-sec)}
/* COLOR PICKER */
.color-picker{width:24px;height:24px;border:2px solid var(--border);border-radius:4px;padding:0;cursor:pointer;background:none;appearance:none;-webkit-appearance:none}
.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:2px}

/* CELL — exact positioning container with isolated stacking context */
.cell{position:absolute;overflow:visible;user-select:none;box-sizing:border-box;isolation:isolate;z-index:1;touch-action:none}
.cell.selected{z-index:50}
.cell.active-drag{z-index:1000 !important}
.cell.dragging{opacity:.3}

/* CELL INNER — visible border + frame */
.cell-inner{position:relative;width:100%;height:100%;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;transition:box-shadow .15s}
.cell:hover .cell-inner{box-shadow:0 0 14px rgba(254,240,138,.35)}
.cell.selected .cell-inner{box-shadow:0 0 24px rgba(254,240,138,.5);outline:2px solid var(--accent);outline-offset:1px}
.cell.drag-target .cell-inner{outline:3px dashed var(--accent);outline-offset:2px}

/* TAG — header bar ABOVE image (drag here to move freely) */
.cell-tag{display:block;width:100%;font-weight:800;font-family:var(--font-sans);text-align:center;letter-spacing:0.5px;z-index:3;box-sizing:border-box;flex-shrink:0;cursor:grab;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.cell-tag:active{cursor:grabbing}

/* IMAGE — below tag (drag here to swap images) */
.cell-img{display:block;width:100%;flex:1;min-height:0;object-fit:contain;cursor:move;transition:opacity .15s}
.cell-img.swapping-img{opacity:.5;filter:brightness(1.1)}

/* RESIZE HANDLES (4 Corners ONLY) */
.resize-handle{position:absolute;width:12px;height:12px;background:#ffffff;border:2px solid var(--accent);border-radius:2px;z-index:20;opacity:0;transition:opacity .15s;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.cell:hover .resize-handle,.cell.selected .resize-handle{opacity:1}

.handle-nw{top:-6px;left:-6px;cursor:nwse-resize}
.handle-ne{top:-6px;right:-6px;cursor:nesw-resize}
.handle-sw{bottom:-6px;left:-6px;cursor:nesw-resize}
.handle-se{bottom:-6px;right:-6px;cursor:nwse-resize}

/* CELL CONTROLS */
.cell-controls{position:absolute;bottom:6px;right:6px;display:flex;gap:3px;z-index:15;opacity:0;transition:opacity .15s}
.cell:hover .cell-controls{opacity:1}
.cell-btn{width:22px;height:22px;border-radius:4px;background:rgba(0,0,0,.8);color:#fff;border:1px solid rgba(255,255,255,.15);font-size:10px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.cell-btn:hover{background:var(--accent)}.cell-btn.remove:hover{background:var(--red)}


/* TAG MODE SWITCHER (Tag vs Original Filename) */
.tag-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tag-mode-switch {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px;
  gap: 2px;
}
.tag-mode-btn {
  background: transparent;
  border: none;
  color: var(--text-sec);
  font-size: 9px;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .15s;
}
.tag-mode-btn:hover {
  color: var(--text-main);
}
.tag-mode-btn.active {
  background: var(--accent);
  color: #0f0f12;
}


/* TEXT CARD INPUT */
.text-card-input-row {
  display: flex;
  gap: 4px;
  padding: 4px 10px 6px;
}
.text-card-field {
  flex: 1;
  min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-main);
  font-size: 12px;
  font-family: var(--font-main);
  padding: 5px 8px;
  outline: none;
  transition: border-color .15s;
}
.text-card-field:focus {
  border-color: var(--accent);
}
.text-card-field::placeholder {
  color: var(--text-sec);
  opacity: .6;
}
.btn-text-add {
  background: var(--accent);
  color: #0f0f12;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s;
}
.btn-text-add:hover {
  opacity: .85;
}
.lib-card.text-card {
  position: relative;
}
.lib-card.text-card .lib-text-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--accent);
  color: #0f0f12;
  font-size: 7px;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
  z-index: 2;
}



/* SKELETON PLACEHOLDER DURING RESIZE */
.cell-text-skeleton {
  width: 100%;
  height: 100%;
  background: #1a1a1e;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 14px 16px;
  box-sizing: border-box;
  overflow: hidden;
}
.skeleton-line {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  width: 100%;
}

/* LIVE TEXT CELL ON CANVAS */
.cell-text-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: #1a1a1e;
  padding: 6%;
  box-sizing: border-box;
  overflow: hidden;
  word-break: break-word;
  white-space: pre-wrap;
  font-family: "Inter","Noto Sans SC","Noto Sans KR","Noto Sans JP","Microsoft YaHei","PingFang SC",sans-serif;
  font-weight: 700;
  line-height: 1.25;
  user-select: none;
  cursor: default;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}
.cell-text-content[contenteditable="true"] {
  cursor: text !important;
  user-select: auto !important;
  outline: 2px solid var(--accent) !important;
}


/* MODE DIVIDER */
.mode-divider {
  color: var(--text-muted);
  font-size: 12px;
  opacity: .4;
  user-select: none;
  margin: 0 2px;
}

/* DESKTOP MODE TOGGLE (Коллаж / 1 Фото) in navbar */
.desktop-mode-toggle {
  display: flex;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px;
  gap: 2px;
}
.dmt-btn {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-sec);
  background: transparent;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: var(--font-mono);
}
.dmt-btn:hover {
  color: var(--text-main);
}
.dmt-btn.active {
  background: var(--accent);
  color: #0f0f12 !important;
}
@media (max-width: 768px) {
  .desktop-mode-toggle { display: none; }
}

/* DESKTOP SINGLE PHOTO MODE */
.app.desktop-single-mode .navbar-center {
  opacity: 0.3;
  pointer-events: none;
}
.app.desktop-single-mode .canvas-frame {
  border-radius: 4px !important;
}
.app.desktop-single-mode #btn-export {
  display: none;
}
.app.desktop-single-mode .btn-single-save {
  display: inline-flex !important;
}
.btn-single-save {
  display: none !important;
}

/* SIDEBAR */
.studio-sidebar{width:var(--sidebar-w);background:var(--bg-sidebar);border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.sidebar-section{display:flex;flex-direction:column}.library-section{flex:1;overflow:hidden}
.section-header{height:40px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-subtle);flex-shrink:0}
.section-header.border-top{border-top:1px solid var(--border)}
.section-title{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-sec);font-family:var(--font-mono);display:flex;align-items:center;gap:6px}
.count-pill{background:var(--bg-card);color:var(--text-muted);font-size:10px;font-weight:700;padding:1px 5px;border-radius:8px;border:1px solid var(--border)}
.section-actions{display:flex;gap:3px}
.upload-dropzone{padding:10px 12px;border-bottom:1px solid var(--border-subtle);background:rgba(0,0,0,.15)}
.library-scroll{flex:1;overflow-y:auto;padding:10px}
.library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.lib-card{position:relative;aspect-ratio:1;border-radius:5px;overflow:hidden;background:var(--bg-card);border:1px solid var(--border);cursor:pointer;transition:transform .15s,border-color .15s}
.lib-card:hover{border-color:var(--accent);transform:scale(1.03)}
.lib-card img{width:100%;height:100%;object-fit:cover}
.lib-del-btn{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:3px;background:rgba(0,0,0,.8);color:#fff;border:none;font-size:10px;line-height:16px;text-align:center;cursor:pointer;opacity:0;transition:opacity .15s}
.lib-card:hover .lib-del-btn{opacity:1}.lib-del-btn:hover{background:var(--red)}
.library-empty{text-align:center;color:var(--text-muted);font-size:11px;padding:24px 8px}

/* INSPECTOR */
.inspector-section{max-height:55%;overflow-y:auto;border-top:1px solid var(--border);background:var(--bg-sidebar)}
.inspector-controls{padding:12px;display:flex;flex-direction:column;gap:10px}
.prop-group{display:flex;flex-direction:column;gap:6px}
.prop-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prop-label{font-size:11px;font-weight:600;color:var(--text-sec);width:70px;flex-shrink:0}
.prop-label.color-r{color:var(--red)}.prop-label.color-g{color:var(--green)}.prop-label.color-b{color:var(--blue)}
.slider-val-box{display:flex;align-items:center;gap:6px;flex:1}
.val-badge{font-size:10px;font-weight:600;font-family:var(--font-mono);color:var(--text-main);min-width:32px;text-align:right;background:var(--bg-card);padding:2px 5px;border-radius:3px;border:1px solid var(--border)}
.slider-red::-webkit-slider-thumb{background:var(--red)}.slider-green::-webkit-slider-thumb{background:var(--green)}.slider-blue::-webkit-slider-thumb{background:var(--blue)}
.prop-actions{display:flex;flex-direction:column;gap:5px;margin-top:4px}


.inspector-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.selected-tag-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: #0f0f12;
  background: var(--accent);
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
}

/* INSPECTOR TABS & EFFECTS */
.inspector-tabs{display:flex;gap:4px}
.tab-btn{background:transparent;border:none;color:var(--text-sec);font-size:11px;font-weight:700;font-family:var(--font-mono);padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .15s}
.tab-btn:hover{color:var(--text-main);background:var(--bg-card)}
.tab-btn.active{color:#0f0f12;background:var(--accent)}
.tab-content{display:none;flex-direction:column;gap:10px}
.tab-content.active{display:flex}
.effect-card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:10px;display:flex;flex-direction:column;gap:8px}
.effect-header{display:flex;align-items:center;justify-content:space-between}
.toggle-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;cursor:pointer;user-select:none}
.toggle-label input{accent-color:var(--accent);width:15px;height:15px;cursor:pointer}
.tool-toggle-label{display:flex;align-items:center;gap:4px;cursor:pointer;user-select:none}
.tool-toggle-label input{accent-color:var(--accent);width:13px;height:13px;cursor:pointer}
.mode-segmented{display:flex;background:var(--bg-app);border:1px solid var(--border);border-radius:6px;padding:2px;gap:2px;margin-left:auto;z-index:2}
.segment-btn{background:none;border:none;color:var(--text-sec);font-size:10px;font-weight:700;font-family:var(--font-sans);padding:3px 8px;border-radius:4px;cursor:pointer;transition:all .15s;white-space:nowrap;user-select:none;-webkit-user-select:none;pointer-events:auto}
.segment-btn:hover{color:var(--text-main)}
.segment-btn.active{background:var(--accent);color:#0f0f12;font-weight:800;box-shadow:0 1px 4px rgba(0,0,0,.3)}

.color-val-box{display:flex;align-items:center;gap:8px;flex:1}
.color-picker-input{width:28px;height:24px;border:1px solid var(--border);border-radius:4px;background:none;cursor:pointer;padding:0}
.hex-val{font-size:10px;font-weight:700;font-family:var(--font-mono);color:var(--text-sec)}

/* OVERLAY LAYERS & REGION SELECTION BOX */
.cell-img-wrapper{position:relative;width:100%;flex:1;min-height:0;overflow:hidden}
.cell-lines-overlay{position:absolute;pointer-events:none;z-index:4;overflow:hidden}
.cell-noise-overlay{position:absolute;pointer-events:none;z-index:5;overflow:hidden}

/* REGION SELECTION BOX */

/* REGION SELECTION BOX & MULTI-REGION */
.region-box {
  position: absolute;
  border: 2px dashed var(--accent);
  box-shadow: none;
  background: rgba(254, 240, 138, 0.06);
  z-index: 10;
  box-sizing: border-box;
  cursor: move;
  pointer-events: auto;
  user-select: none;
}
.region-box.inactive-region {
  border: 1.5px dashed rgba(254,240,138,0.5);
  box-shadow: none;
  z-index: 9;
  cursor: pointer;
}
.region-box.inactive-region:hover {
  border-color: var(--accent);
  background: rgba(254,240,138,0.08);
}
.region-box-idx {
  position: absolute;
  top: 3px;
  left: 3px;
  background: var(--accent);
  color: #0f0f12;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 3px;
  pointer-events: none;
  line-height: 1.2;
}
.region-box.inactive-region .region-box-idx {
  background: rgba(20, 20, 24, 0.85);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.region-box-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  z-index: 12;
}
.rb-nw{top:-4px;left:-4px;cursor:nwse-resize}
.rb-ne{top:-4px;right:-4px;cursor:nesw-resize}
.rb-sw{bottom:-4px;left:-4px;cursor:nesw-resize}
.rb-se{bottom:-4px;right:-4px;cursor:nwse-resize}

/* REGIONS MANAGER TOOLBAR IN INSPECTOR */
.regions-toolbar {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 7px;
  background: var(--bg-card);
  border-radius: 4px;
  border: 1px solid var(--border);
  margin: 6px 0 8px;
  box-sizing: border-box;
}
.regions-toolbar-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 24px;
  box-sizing: border-box;
}
.regions-label-btn {
  font-size: 9px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-sec);
  letter-spacing: .06em;
  flex-shrink: 0;
  user-select: none;
  cursor: pointer;
  height: 24px;
  padding: 0 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-app);
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.regions-label-btn:hover {
  color: var(--text-main);
  border-color: var(--text-sec);
  background: rgba(255, 255, 255, 0.08);
}
.regions-label-btn.active {
  background: var(--accent);
  color: #0f0f12;
  border-color: var(--accent);
  font-weight: 800;
}
.regions-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  height: 24px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  box-sizing: border-box;
}
.regions-chips::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.region-chip {
  background: var(--bg-app);
  border: 1px solid var(--border);
  color: var(--text-sec);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  min-width: 22px;
  height: 24px;
  padding: 0 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-sizing: border-box;
}
.region-chip:hover {
  color: var(--text-main);
  border-color: var(--text-sec);
  background: rgba(255,255,255,0.06);
}
.region-chip.active {
  background: var(--accent);
  color: #0f0f12;
  border-color: var(--accent);
  font-weight: 800;
}
.regions-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  height: 24px;
}
.btn-region-add, .btn-region-del, .btn-region-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--border);
  flex-shrink: 0;
  padding: 0;
  box-sizing: border-box;
}
.btn-region-add {
  background: var(--accent-light);
  color: var(--accent);
  border-color: rgba(254,240,138,0.3);
}
.btn-region-add:hover {
  background: var(--accent);
  color: #0f0f12;
}
.btn-region-del {
  background: rgba(239,68,68,0.12);
  color: var(--red);
  border-color: rgba(239,68,68,0.25);
}
.btn-region-del:hover {
  background: var(--red);
  color: #fff;
}
.btn-region-face {
  background: var(--accent-light);
  color: var(--accent);
  border-color: rgba(254, 240, 138, 0.35);
}
.btn-region-face svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  transition: stroke .15s;
}
.btn-region-face:hover {
  background: var(--accent);
}
.btn-region-face:hover svg {
  stroke: #0f0f12;
}
.btn-region-face.loading svg {
  animation: spin 0.8s linear infinite;
}
.btn-region-face:active {
  transform: scale(0.92);
}

/* BOTTOM SCROLL TRACK SLIDER */
.regions-track-container {
  width: 100%;
  padding: 2px 1px 0;
  box-sizing: border-box;
}
.regions-track-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.09);
  outline: none;
  margin: 0;
  padding: 0;
  cursor: pointer;
  display: block;
}
.regions-track-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  cursor: grab;
  transition: background .15s, transform .1s;
}
.regions-track-slider::-webkit-slider-thumb:hover {
  background: #ffffff;
  transform: scaleY(1.3);
}
.regions-track-slider::-webkit-slider-thumb:active {
  cursor: grabbing;
  background: #ffffff;
}
.regions-track-slider::-moz-range-thumb {
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  border: none;
  cursor: grab;
}

.app.desktop-single-mode .tool-item-ratio {
  opacity: 0.35;
  pointer-events: none;
}
.app.desktop-single-mode .canvas-frame {
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}


/* EXPORT DROPDOWN POPOVER (Top-Right Corner) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(2px);display:flex;justify-content:flex-end;align-items:flex-start;z-index:100}
.modal-overlay[hidden]{display:none}
.export-modal-window{width:360px;background:var(--bg-sidebar);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-top:58px;margin-right:16px;box-shadow:0 16px 40px rgba(0,0,0,.8),0 0 0 1px rgba(254,240,138,.15);animation:popoverFadeIn .15s ease-out}
@keyframes popoverFadeIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-header h2{font-size:15px;font-weight:700;margin:0}
.export-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.export-form[hidden]{display:none}
.export-progress-step[hidden]{display:none}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:10px;font-weight:700;color:var(--text-sec);font-family:var(--font-mono);letter-spacing:.08em}
.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.format-toggle{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.preset-btn,.format-btn{position:relative;cursor:pointer}
.preset-btn input,.format-btn input{position:absolute;opacity:0;pointer-events:none}
.preset-btn span,.format-btn span{display:flex;align-items:center;justify-content:center;padding:8px 4px;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:700;font-family:var(--font-mono);color:var(--text-sec);transition:all .15s}
.preset-btn input:checked + span,.format-btn input:checked + span{background:var(--accent);color:#0f0f12;border-color:var(--accent);font-weight:800}
.preset-btn:hover span,.format-btn:hover span{border-color:var(--accent)}
.btn-large{padding:10px;font-size:13px;font-weight:700;margin-top:4px}

.progress-bar-wrap{width:100%;height:5px;background:var(--bg-card);border-radius:3px;overflow:hidden;margin-bottom:12px;border:1px solid var(--border)}
.progress-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#fde047,var(--accent));border-radius:3px;transition:width .2s}
.modal-status{font-size:11px;color:var(--text-sec);margin-bottom:14px;font-family:var(--font-mono);text-align:center}

/* FULLSCREEN PHOTO EDITOR OVERLAY */
.editor-mode-overlay {
  position: fixed;
  inset: 0;
  background: #09090b;
  z-index: 2000;
  display: flex;
  flex-direction: column;
}
.editor-mode-overlay[hidden] {
  display: none;
}
.editor-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: rgba(18, 18, 23, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  z-index: 10;
}
.editor-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--text-main);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.editor-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.editor-header-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-sec);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.editor-header-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}
.editor-header-btn:active {
  transform: translateY(0);
}
.btn-editor-back {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-sec);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-editor-back:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-main);
  transform: translateY(-1px);
}
.btn-editor-save {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: none;
  color: #0f0f12;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(254, 240, 138, 0.25);
}
.btn-editor-save:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(254, 240, 138, 0.4);
}
.btn-editor-save:active {
  transform: translateY(0);
}
.editor-viewport {
  width: 100%;
  height: 100%;
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0c10;
  touch-action: none;
}
.editor-canvas-wrapper {
  position: relative;
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editor-image-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Hide normal layout elements when fullscreen editor is active */
body.in-editor-mode .mobile-bottom-bar,
body.in-editor-mode .navbar,
body.in-editor-mode .studio-body > main,
body.in-editor-mode .library-section,
body.in-editor-mode .canvas-mode-switcher {
  display: none !important;
}

body.in-editor-mode .studio-sidebar {
  display: contents !important;
}

body.in-editor-mode .inspector-section {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 2500 !important;
  transform: translateY(0) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 42vh !important;
  height: auto !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.95);
  background: var(--bg-sidebar) !important;
  border-top: 1px solid var(--border) !important;
}

body.in-editor-mode .inspector-section #btn-deselect {
  display: none !important;
}


/* FLOATING CANVAS MODE SWITCHER (Top Center) — mobile only */
.canvas-mode-switcher {
  display: none; /* Hidden on desktop */
}

@media (max-width: 768px), (orientation: landscape) and (max-height: 550px) {
  .canvas-mode-switcher {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    background: rgba(18, 18, 23, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3px;
    border-radius: 99px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  }
}
.canvas-mode-btn {
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-sec);
  background: none;
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.canvas-mode-btn.active {
  background: var(--accent);
  color: #0f0f12 !important;
}

/* CELL IMAGE CONTAINER (Strict proportion crop & sync) */
.cell-img-container {
  position: absolute;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
}
.cell-img-container .cell-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
}
.cell-img-container .cell-lines-overlay {
  position: absolute !important;
  z-index: 4 !important;
}
.cell-img-container .cell-noise-overlay {
  position: absolute !important;
  z-index: 5 !important;
}

/* SINGLE PHOTO EDITOR UPLOAD BUTTON */
.editor-upload-btn {
  position: absolute;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--text-sec);
  cursor: pointer;
  padding: 24px 32px;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  background: rgba(18, 18, 23, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.editor-upload-btn:hover {
  border-color: var(--accent);
  color: var(--text-main);
  background: rgba(18, 18, 23, 0.85);
}
.editor-upload-btn[hidden] {
  display: none !important;
}

/* PIXELATED LINES (CRISP RENDER ON MOBILE ZOOM) */
.cell-lines-overlay {
  image-rendering: auto !important;
  pointer-events: none;
}

/* MOBILE TELEGRAM BUTTON STYLES */
@media (max-width: 768px), (orientation: landscape) and (max-height: 550px) {
  .btn-tg {
    display: inline-flex !important;
    width: 36px !important;
    height: 36px !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .btn-tg svg {
    width: 36px !important;
    height: 36px !important;
    display: block !important;
  }
}


/* ============================================================
   NATIVE MOBILE LANDSCAPE MODE (Clean Top + Right Dock)
   ============================================================ */
@media (orientation: landscape) and (max-height: 550px) {
  /* Hide top navbar completely in landscape */
  .navbar {
    display: none !important;
  }
  
  /* Floating switcher at top-left */
  .canvas-mode-switcher {
    display: flex !important;
    position: fixed !important;
    top: 10px !important;
    left: 12px !important;
    transform: none !important;
    z-index: 120 !important;
  }

  /* Fullscreen studio body */
  .studio-body {
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
  }

  /* Unobstructed, maximum size canvas viewport */
  .canvas-viewport {
    flex: 1 !important;
    width: calc(100vw - 64px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 8px 12px !important;
    margin-right: 64px !important;
    box-sizing: border-box !important;
  }

  /* Vertical Right-Side Navigation Dock */
  .mobile-bottom-bar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 64px !important;
    height: 100vh !important;
    height: 100dvh !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    padding: 6px 0 !important;
    border-top: none !important;
    border-left: 1px solid var(--border) !important;
    background: var(--bg-topbar) !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.6) !important;
    z-index: 1100 !important;
  }

  .mobile-tab-btn {
    width: 54px !important;
    height: 50px !important;
    flex: none !important;
    border-radius: 10px !important;
  }
  .mobile-tab-btn span {
    font-size: 8px !important;
  }
  .mobile-tab-btn svg {
    width: 19px !important;
    height: 19px !important;
  }
  .mobile-dock-tg {
    display: none !important;
  }
  .mobile-dock-export {
    display: flex !important;
    background: var(--accent) !important;
    color: #0f0f12 !important;
    box-shadow: 0 3px 12px rgba(254, 240, 138, 0.3) !important;
  }
  .mobile-dock-export svg {
    color: #0f0f12 !important;
    stroke: #0f0f12 !important;
  }
  .mobile-dock-export span {
    color: #0f0f12 !important;
    font-weight: 800 !important;
  }

  /* Side-sliding sheets from the right */
  .studio-sidebar, .inspector-section, .navbar-center {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 64px !important;
    left: auto !important;
    width: 320px !important;
    max-width: calc(100vw - 70px) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--border) !important;
    transform: translateX(calc(100% + 70px)) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    z-index: 1050 !important;
    box-shadow: -12px 0 36px rgba(0,0,0,0.85) !important;
  }
  .studio-sidebar.mobile-open, .inspector-section.mobile-open, .navbar-center.mobile-open {
    transform: translateX(0) !important;
  }

  .drawer-handle {
    display: none !important;
  }

  /* Fullscreen Photo Editor in Landscape */
  .editor-header {
    height: 44px !important;
    padding: 0 12px !important;
  }
  .editor-viewport {
    height: calc(100vh - 44px) !important;
    height: calc(100dvh - 44px) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-right: 320px !important;
  }
  body.in-editor-mode .inspector-section {
    position: fixed !important;
    top: 44px !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: 320px !important;
    height: calc(100vh - 44px) !important;
    height: calc(100dvh - 44px) !important;
    max-height: calc(100vh - 44px) !important;
    max-height: calc(100dvh - 44px) !important;
    transform: none !important;
    border-radius: 0 !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: none !important;
    z-index: 2100 !important;
    display: block !important;
  }
}