/* THREE.D MAGAZINE MAKE — editor styles */
.rotate-preview{
  width:100%;
  text-align:center;
  padding:20px 0;
}
.rotate-preview img{
  max-width:100%;
  max-height:240px;
  border-radius:var(--radius-md);
  box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.rotate-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  padding:20px;
}
.rotate-btn{
  width:60px;
  height:60px;
  border:0;
  background:var(--secondary-bg);
  border-radius:50%;
  font-size:24px;
  cursor:pointer;
  color:var(--label);
}
.rotate-btn:active{
  background:var(--tint);
  color:#fff;
}
.crop-container{
  position:relative;
  max-width:100%;
  padding:16px;
  box-sizing:border-box;
}
.crop-image{
  max-width:100%;
  display:block;
  border-radius:var(--radius-md);
}
.crop-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border:2px dashed var(--tint);
  pointer-events:none;
  box-sizing:border-box;
}
.aspect-toggle{
  display:flex;
  gap:8px;
  padding:12px 16px;
  border-top:1px solid var(--separator);
}
.aspect-btn{
  flex:1;
  height:36px;
  border:1px solid var(--separator);
  background:var(--system-bg);
  border-radius:var(--radius-sm);
  font:500 14pt/1 "SF Pro Text",sans-serif;
  cursor:pointer;
}
.aspect-btn.active{
  background:var(--tint);
  color:#fff;
}
.recolour-preview{
  max-width:100%;
  padding:16px;
}
.recolour-preview img{
  max-width:100%;
  border-radius:var(--radius-md);
  filter:none;
  transition:filter .15s;
}
.slider-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin:12px 0;
  padding:0 16px;
}
.slider-row label{
  font:400 15pt/1 "SF Pro Text",sans-serif;
  color:var(--label);
  min-width:70px;
  text-align:right;
}
.slider-row input[type="range"]{
  flex:1;
  height:6px;
  -webkit-appearance:none;
  background:var(--system-fill);
  border-radius:3px;
  outline:none;
}
.slider-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--tint);
  cursor:pointer;
}
.filter-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:8px 16px;
}
.filter-chip{
  flex:none;
  padding:10px 18px;
  border-radius:var(--radius-sm);
  font:500 13pt/1 "SF Pro Text",sans-serif;
  background:var(--secondary-bg);
  cursor:pointer;
  border:0;
}
.filter-chip.active{
  background:var(--tint);
  color:#fff;
}
.markup-canvas-container{
  position:relative;
  max-width:100%;
  margin:0 auto;
  padding:16px;
  box-sizing:border-box;
}
.markup-bg{
  max-width:100%;
  border-radius:var(--radius-md);
  box-shadow:0 4px 16px rgba(0,0,0,.1);
  display:block;
}
.markup-toolbar{
  display:flex;
  gap:10px;
  padding:12px 16px;
  background:var(--system-bg);
  border-top:1px solid var(--separator);
  overflow-x:auto;
  position:sticky;
  bottom:0;
  z-index:5;
}
.tool-btn{
  width:44px;
  height:44px;
  border:0;
  background:var(--secondary-bg);
  border-radius:var(--radius-md);
  font-size:20px;
  cursor:pointer;
  color:var(--label);
  flex:none;
}
.tool-btn.active{
  background:var(--tint);
  color:#fff;
}
.color-swatches{
  display:flex;
  gap:8px;
  padding:12px 16px;
  overflow-x:auto;
}
.color-swatch{
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid var(--separator);
  cursor:pointer;
  flex:none;
}
.color-swatch.active{
  border-color:var(--tint);
}
.width-control{
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:10px;
}
.width-control label{
  font:500 14pt/1 "SF Pro Text",sans-serif;
  color:var(--label);
}
.width-slider{width:120px}