/* ---- Cortar Vertical (ISOLADO) ---- */
.cvf2 { max-width: 980px; margin: 24px auto; padding: 0 16px; color:#111 }
.cvf2 .v-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:18px}
.cvf2 h1{font-size:22px;margin:0 0 8px;color:#00bfa6}
.cvf2 .v-sub{color:#6b7280;margin:0 0 16px}
.cvf2 .v-grid{display:grid;grid-template-columns:1fr 360px;gap:16px}
@media (max-width:900px){.cvf2 .v-grid{grid-template-columns:1fr}}
.cvf2 .v-stage{position:relative;background:#000;border-radius:16px;overflow:hidden;min-height:420px;touch-action:none}
.cvf2 .v-mask::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,transparent)}
.cvf2 .v-crop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:96%;aspect-ratio:9/16;outline:180vmax solid rgba(0,0,0,.55);border:2px solid #fff;border-radius:12px;pointer-events:none}
.cvf2 canvas.v-canvas{display:block;width:100%;max-width:100%;border-radius:12px;background:#111}
.cvf2 .v-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.cvf2 .v-controls>*{flex:1 1 auto}
.cvf2 .v-row{display:flex;gap:8px;align-items:center}
.cvf2 input[type="file"].v-file{padding:10px;border:1px dashed #e5e7eb;border-radius:12px;background:#fafafa}
.cvf2 button.v-btn, .cvf2 select.v-sel, .cvf2 input[type="range"].v-range{padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;cursor:pointer}
/* Primário (download) em verde */
.cvf2 button.v-primary{background:#00bfa6;border-color:#00bfa6;color:#fff;font-weight:700}
/* Secundários (girar/recentrar) em azul */
.cvf2 button.v-btn:not(.v-primary){background:#2563eb;color:#fff;border-color:#2563eb;font-weight:600}
.cvf2 button.v-btn:not(.v-primary):hover{background:#1e40af}
.cvf2 .v-prev{background:#fff;border:1px solid #eee;border-radius:16px;padding:12px;text-align:center}
.cvf2 .v-prev .v-box{width:100%;aspect-ratio:9/16;background:#000;border-radius:12px;overflow:hidden;display:grid;place-items:center}
.cvf2 .v-prev img{width:100%;height:100%;object-fit:contain;display:block}
.cvf2 small.v-tip{color:#6b7280}

/* === v1.0.1: layout compacto, prévia sticky e responsivo === */

/* Canvas adaptativo: confortável no desktop e no mobile */
.cvf2 .v-stage{
  height: clamp(420px, 70vh, 900px);
}

/* Proporção de colunas e prévia fixa no topo da segunda coluna */
.cvf2 .v-grid{
  grid-template-columns: 1.25fr 0.75fr;
}
.cvf2 .v-prev{ position: sticky; top: 12px; }

/* Controles mais compactos */
.cvf2 .v-controls{ gap: 6px; }
.cvf2 button.v-btn,
.cvf2 select.v-sel,
.cvf2 input[type="range"].v-range{
  padding: 8px 10px;
  font-size: 14px;
  border-radius: 10px;
}

/* Card e tipografia um pouco mais enxutos */
.cvf2 .v-card{ padding: 14px; }
.cvf2 h1{ font-size: 20px; margin-bottom: 6px; }
.cvf2 .v-sub{ margin-bottom: 10px; }

/* Mobile: 1 coluna, prévia abaixo e menor */
@media (max-width: 900px){
  .cvf2 .v-grid{ grid-template-columns: 1fr; }
  .cvf2 .v-stage{ height: clamp(420px, 62vh, 760px); }
  .cvf2 .v-prev{ position: static; }
  .cvf2 .v-prev .v-box{ max-width: 420px; margin: 0 auto; }
}