/* Krea 2 Outpaint: four-sided live canvas controls. */
.mode-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
.outpaint-source{min-height:146px;padding:10px;border:1px dashed var(--line2);border-radius:14px}
.outpaint-source .source-preview{height:220px}
#outpaintForm .outpaint-source .source-actions{grid-template-columns:auto minmax(0,1fr)}
.outpaint-margins{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 18px;
  margin-top:12px;
}
.outpaint-margins label{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:12px 14px;
  gap:8px;
  border:1px solid var(--line2);
  border-radius:12px;
}
.outpaint-margins label output{
  float:right;
  align-self:flex-end;
  font-size:13px;
  font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  margin-top:-27px;
}
.outpaint-margins input[type="range"]{
  width:100%;
  min-width:0;
  margin:4px 0 0;
  padding:0;
  cursor:pointer;
  accent-color:var(--accent);
}
.outpaint-center-preview{
  position:relative;
  box-sizing:border-box;
  background:repeating-conic-gradient(#3a3c47 0 25%,#242633 0 50%) 50%/22px 22px;
  margin:16px auto 10px;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  isolation:isolate;
  transition:width .08s linear,height .08s linear;
}
.outpaint-center-preview img{
  position:absolute;
  display:block;
  object-fit:fill;
  max-width:none;
  box-sizing:border-box;
  border:1px solid #7bdcb1;
  z-index:2;
}
.outpaint-added-area{
  position:absolute;
  background:repeating-linear-gradient(135deg,rgba(57,156,192,.21) 0px,
       rgba(57,156,192,.21) 9px,rgba(86,146,199,.10) 9px,rgba(86,146,199,.10) 18px);
  z-index:1;
}
.outpaint-center-preview .outpaint-empty{
  position:absolute;inset:0;display:grid;place-items:center;
  color:var(--muted);font-size:12px;text-align:center;
}
.outpaint-result-note{font-size:12px;color:var(--muted);padding:8px;border-left:3px solid var(--accent);margin:8px 0}
.outpaint-result-note.outpaint-error{color:#ef8585;border-left-color:#ef8585}
@media(max-width:600px){
  .mode-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .outpaint-margins{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .outpaint-margins label{padding:10px}
}