/* ======================================================================
   Verse Studio V.1 — MOBILE RESPONSIVE + touch-friendly editor
   ====================================================================== */

/* ---------- tablets & small laptops ---------- */
@media (max-width: 1000px){
  .app-header{ gap:10px; padding:10px 14px; }
  .stepper{ order:3; width:100%; margin:0; overflow-x:auto; -webkit-overflow-scrolling:touch; justify-content:flex-start; }
  .step-sep{ flex-shrink:0; }
  .header-actions{ margin-left:auto; }
  .icon-btn span{ display:none; }
  #homeBtn span, #driveBtn span, #settingsBtn span{ display:none; }
  .icon-btn{ padding:9px 11px; }
}

/* ---------- phones & portrait tablets: stacked editor ---------- */
@media (max-width: 820px){
  html,body{ overflow-x:hidden; }

  /* bin: bigger touch targets, 2-column grid */
  .bin-tab{ padding:12px 6px; font-size:12.5px; }
  .bin-tab .ic svg{ width:16px; height:16px; }
  .ed-bin-grid{ grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px; }
  .bin-item:hover{ transform:none; }
  .bin-del{ display:block; width:24px; height:24px; }

  /* drive bin items full-width rows */
  .bin-drive-grid{ display:flex; flex-direction:column; }
  .drive-item.bin{ padding:10px 10px; }
  .drive-item.bin .drive-thumb{ width:44px; height:44px; }
  .drive-qadd{ display:flex; width:30px; height:30px; font-size:16px; }

  /* header */
  
  
  .brand-by{ display:none; }
  .icon-btn{ padding:10px 12px; }

  /* step 1 & 2: stack panel + canvas */
  .gen-wrap{ grid-template-columns:1fr !important; }
  .canvas-wrap canvas{ max-width:100%; height:auto; }
}

/* ---------- small phones ---------- */
@media (max-width: 520px){
  .app-header{ padding:8px 10px; gap:8px; }
  
  
  .stepper{ padding:3px; }
  .step-btn{ padding:6px 10px; font-size:11px; }
  .step-btn .num{ width:16px; height:16px; font-size:9px; }
  .step-sep{ width:8px; }
  .icon-btn{ padding:9px 10px; border-radius:9px; }
  #themeToggleBtn{ padding:9px; }


  .bin-tabs{ padding:6px 4px 0; }
  .bin-tab{ font-size:11px; padding:10px 4px; }
  .ed-bin-head{ padding:8px 9px; }

  /* drive overlay + bulk overlay fullscreen on phones */
  .drive-shell, .bulk-shell{ width:100vw; height:100vh; max-height:100vh; border-radius:0; }
  .bulk-body{ flex-direction:column; overflow:auto; }
  .bulk-left{ width:100%; min-width:0; border-right:none; border-bottom:1px solid var(--line); }
  .bulk-right{ min-width:0; }
  .bulk-preview-wrap{ height:150px; }
  .drive-actions input[type=text]{ width:120px; }

  /* step1/2 toolbar wraps */
  .fmt-toolbar{ overflow-x:auto; }
  .sp-row{ flex-wrap:wrap; }

  /* toast stays visible */
  
}