.page-wrapper{
  padding:1rem .85rem;
}

.pickers-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
  margin-bottom:.75rem;
}

.picker-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:.75rem;
  width:100%;
  min-width:0;
  overflow:hidden;
}

.picker-card .ma-photo-zone{
  min-height:100px;
}

.picker-card .ma-photo-slot{
  min-height:72px;
}

.workspace-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:.7rem;
  align-items:start;
}

.collab-panel{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  min-width:0;
}

.stage-card{
  background:#111;
  border:1px solid rgba(0,0,0,.2);
  border-radius:12px;
  padding:.5rem;
}

.compare-stage{
  position:relative;
  width:100%;
  max-width:820px;
  margin:0 auto;
  background:#0b0b0b;
  border-radius:10px;
  overflow:hidden;
  cursor:grab;
  touch-action:none;
}

.compare-stage.is-dragging{
  cursor:grabbing;
}

#overlayCanvas{
  width:100%;
  height:auto;
  display:block;
}

#analysisText{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fffdf5;
  padding:1rem 1.1rem;
  line-height:1.55;
  color:#2f2f2f;
  font-size:1rem;
  font-weight:500;
  word-break:normal;
  overflow-wrap:anywhere;
}

#analysisText strong{
  color:#111;
}

#analysisText.is-soft-hidden{
  display:none !important;
}

.controls-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  color:#363636;
}

.controls-card .step-title,
.controls-card .label,
.controls-card strong{
  color:#363636 !important;
}

.controls-card .step-help,
.controls-card .checkbox{
  color:#5f5f5f !important;
}

.step-title{
  font-weight:800;
  font-size:1rem;
  margin:0 0 .3rem 0;
}

.step-help{
  color:#666;
  font-size:.92rem;
  margin-bottom:.75rem;
}

.control-group{
  margin-bottom:1rem;
  min-width:0;
}

.inline-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.inline-buttons .button{
  min-width:0;
}

.quick-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  margin-top:.35rem;
}

.quick-actions .button{
  width:100%;
  min-width:0;
}

.status-note{
  margin-top:.75rem;
}

.panel-section{
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fff;
  padding:.9rem;
}

.panel-section .step-title{
  margin-bottom:.2rem;
}

.panel-section .step-help{
  margin-bottom:.65rem;
}

.advanced-panel{
  margin-top:.75rem;
  padding-top:.75rem;
  border-top:1px dashed rgba(0,0,0,.12);
}

.align-row{
  display:grid;
  grid-template-columns:92px minmax(0,1fr) minmax(0,1fr);
  gap:.5rem;
  align-items:center;
  margin-bottom:.75rem;
}

.align-row > div{
  min-width:0;
}

.align-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  border:1px solid rgba(0,0,0,.08);
  color:#111;
  background:#f5f5f5;
}

.align-chip--source{
  background:rgb(0,220,255);
  color:#111;
}

.align-chip--artwork{
  background:rgb(255,0,220);
  color:#fff;
}

.controls-card input[type="range"]{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  display:block;
}

.align-row input[type="range"]{
  min-width:0;
}

.canvas-preview-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.6rem;
  margin-top:.2rem;
  grid-column:1 / -1;
}

.mini-canvas-card{
  background:#111;
  border:1px solid rgba(0,0,0,.2);
  border-radius:10px;
  padding:.45rem;
  position:relative;
  min-width:0;
}

.mini-canvas-card h4{
  margin:0 0 .35rem 0;
  color:#fff;
  font-size:.85rem;
  font-weight:700;
}

.mini-canvas-card canvas{
  width:100%;
  height:auto;
  display:block;
  background:#000;
  border-radius:6px;
  transform-origin:center top;
}

.mini-canvas-card.is-clickable{
  cursor:pointer;
}

.replace-hint{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:2;
  background:rgba(0,0,0,.68);
  color:#fff;
  font-size:.75rem;
  line-height:1;
  padding:.45rem .55rem;
  border-radius:999px;
  pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
}

.mini-canvas-card.is-clickable:hover .replace-hint,
.mini-canvas-card.is-clickable:focus-within .replace-hint{
  opacity:1;
}

.helper-card{
  margin-top:.75rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:10px;
  background:#f8f8f8;
  padding:.75rem;
  font-size:.92rem;
  line-height:1.45;
  color:#333;
}

.helper-card strong{
  display:block;
  margin-bottom:.25rem;
}

.helper-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.45rem;
  margin-top:.6rem;
}

.helper-cell{
  border:1px solid rgba(0,0,0,.08);
  border-radius:8px;
  padding:.45rem;
  background:#fff;
  font-size:.82rem;
  line-height:1.3;
}

.legend-row{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:.5rem;
  font-size:.85rem;
  color:#555;
}

.legend-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

.legend-dot{
  width:12px;
  height:12px;
  border-radius:999px;
  display:inline-block;
}

.legend-dot-dark{ background:#3273dc; }
.legend-dot-light{ background:#ffdd57; }
.legend-dot-sharp{ background:#ff3860; }
.legend-dot-soft{ background:#3273dc; }

#compareSliderWrap{
  position:absolute;
  inset:0;
  pointer-events:none;
}

#compareDivider{
  position:absolute;
  top:0;
  bottom:0;
  width:3px;
  left:50%;
  transform:translateX(-50%);
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.28);
  pointer-events:auto;
  cursor:ew-resize;
}

#compareDivider::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:26px;
  height:26px;
  border-radius:999px;
  background:#3273dc;
  box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 2px 10px rgba(0,0,0,.25);
}

.compare-stage,
.stage-card,
#overlayCanvas,
.canvas-preview-row,
.mini-canvas-card,
#refCanvas,
#artCanvas{
  min-width:0;
}

#overlayCanvas,
#refCanvas,
#artCanvas{
  backface-visibility:hidden;
  transform:translateZ(0);
}

.is-soft-hidden{
  display:none !important;
}

/* PORTRAIT MOBILE
   collaboration
   instructions
   options
   images
*/
@media (max-width: 768px) and (orientation: portrait){
  .page-wrapper{
    padding:.72rem .5rem;
  }

  .title.is-3.head1{
    font-size:1.12rem !important;
    line-height:1.1;
    margin-bottom:.35rem !important;
  }

  .subtitle.is-6{
    font-size:.82rem !important;
    line-height:1.32;
    margin-bottom:.65rem !important;
  }

  .pickers-grid{
    grid-template-columns:1fr;
    gap:.45rem;
    margin-bottom:.55rem;
  }

  .picker-card{
    padding:.42rem;
    border-radius:12px;
  }

  .picker-card .ma-photo-zone{
    min-height:auto !important;
    padding:0 !important;
  }

  .picker-card .ma-photo-slot{
    min-height:80px !important;
    padding:.5rem .6rem !important;
    border-radius:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .picker-card .ma-photo-slot p{
    margin:0 !important;
    font-size:.86rem !important;
    line-height:1.15 !important;
    text-align:center !important;
  }

  .picker-card .ma-photo-instructions{
    display:none !important;
  }

  .workspace-grid{
    display:flex;
    flex-direction:column;
    gap:.65rem;
  }

  .collab-panel{
    display:flex;
    flex-direction:column;
    gap:.65rem;
  }

  #analysisText{
    order:2;
  }

  .controls-card{
    order:3;
    position:relative;
    padding:.72rem;
    gap:.72rem;
  }

  .canvas-preview-row{
    order:4;
    grid-template-columns:1fr 1fr;
    gap:.45rem;
    margin-top:.1rem;
  }

  .stage-card{
    padding:.28rem;
    border-radius:10px;
  }

  .panel-section{
    padding:.72rem;
    border-radius:10px;
  }

  .mini-canvas-card{
    padding:.38rem;
  }

  .mini-canvas-card h4{
    font-size:.76rem;
    margin-bottom:.25rem;
  }

  .quick-actions{
    grid-template-columns:1fr 1fr;
    gap:.42rem;
  }

  .quick-actions .button,
  .inline-buttons .button{
    min-height:40px;
    font-size:.8rem;
    padding-left:.55rem;
    padding-right:.55rem;
  }

  .align-row{
    grid-template-columns:68px 1fr 1fr;
    gap:.3rem;
    margin-bottom:.52rem;
  }

  .align-chip{
    min-height:31px;
    font-size:.66rem;
    padding:0 .26rem;
  }

  .label{
    font-size:.7rem !important;
    margin-bottom:.18rem !important;
  }

  .step-title{
    font-size:.9rem;
  }

  .step-help{
    font-size:.79rem;
    margin-bottom:.52rem;
  }

  .helper-grid{
    grid-template-columns:1fr;
  }

  .replace-hint{
    opacity:1;
    font-size:.66rem;
    padding:.34rem .45rem;
  }
}

/* LANDSCAPE MOBILE
   left = collaboration side
   right = options
   bottom = source + artwork
*/
@media (max-width: 768px) and (orientation: landscape){
  .page-wrapper{
    padding:.55rem .6rem;
  }

  .title.is-3.head1{
    font-size:1.05rem !important;
    line-height:1.05;
    margin-bottom:.2rem !important;
  }

  .subtitle.is-6{
    font-size:.72rem !important;
    line-height:1.22;
    margin-bottom:.4rem !important;
  }

  .pickers-grid{
    grid-template-columns:1fr 1fr;
    gap:.4rem;
    margin-bottom:.45rem;
  }

  .picker-card{
    padding:.35rem;
    border-radius:10px;
  }

  .picker-card .ma-photo-zone{
    min-height:auto !important;
    padding:0 !important;
  }

  .picker-card .ma-photo-slot{
    min-height:52px !important;
    padding:.35rem .45rem !important;
  }

  .picker-card .ma-photo-slot p{
    margin:0;
    font-size:.76rem;
    line-height:1.05;
    text-align:center;
  }

  .picker-card .ma-photo-instructions{
    display:none !important;
  }

  .workspace-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:.5rem;
    align-items:start;
  }

  .collab-panel{
    grid-column:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:.5rem;
  }

  .controls-card{
    grid-column:2;
    position:sticky;
    top:.35rem;
    align-self:start;
    max-height:calc(100vh - 1rem);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding:.55rem;
    gap:.55rem;
  }

  #analysisText{
    order:1;
    margin-top:0;
    padding:.6rem .7rem;
    font-size:.78rem;
    line-height:1.28;
  }

  .canvas-preview-row{
    order:2;
    width:100%;
    grid-template-columns:1fr 1fr;
    gap:.45rem;
    margin-top:.1rem;
  }

  .stage-card{
    padding:.3rem;
    border-radius:8px;
  }

  .panel-section{
    padding:.6rem;
    border-radius:10px;
  }

  .mini-canvas-card{
    padding:.42rem;
  }

  .mini-canvas-card h4{
    font-size:.76rem;
    margin-bottom:.22rem;
  }

  .step-title{
    font-size:.82rem;
    margin-bottom:.15rem;
  }

  .step-help{
    font-size:.7rem;
    line-height:1.18;
    margin-bottom:.38rem;
  }

  .quick-actions{
    grid-template-columns:1fr 1fr;
    gap:.35rem;
  }

  .quick-actions .button,
  .inline-buttons .button{
    min-height:34px;
    font-size:.72rem;
    padding:.35rem .45rem;
  }

  .align-row{
    grid-template-columns:60px 1fr 1fr;
    gap:.25rem;
    margin-bottom:.38rem;
  }

  .align-chip{
    min-height:28px;
    font-size:.6rem;
    padding:0 .2rem;
  }

  .label{
    font-size:.64rem !important;
    margin-bottom:.12rem !important;
  }

  .helper-grid{
    grid-template-columns:1fr;
    gap:.3rem;
  }

  .helper-cell{
    font-size:.72rem;
    padding:.35rem;
  }

  .legend-row{
    gap:.4rem;
    font-size:.72rem;
  }

  .replace-hint{
    opacity:1;
    font-size:.64rem;
    padding:.3rem .4rem;
  }
}