.afspro-wrap{background:#07090F;color:#FFFFFF;padding:18px;border-radius:12px;max-width:1100px;margin:18px auto;font-family:Inter,system-ui,Arial,sans-serif}
.afspro-header h1{margin:0 0 6px 0;font-size:20px;color:#FFFFFF}
.afspro-tool{display:flex;gap:16px;flex-wrap:wrap}
.afspro-left{flex:1;min-width:300px}
.afspro-right{width:320px}
.afspro-tabs{display:flex;gap:8px;margin-bottom:10px}
.afspro-tab{padding:8px 12px;border-radius:8px;border:none;cursor:pointer;font-weight:600}
.afspro-panel.hidden{display:none}
.afspro-label{display:block;margin:8px 0 6px;color:#FFFFFF}
.afspro-input{width:100%;padding:10px;border:1px solid #22313a;border-radius:8px;background:#0b1220;color:#e6eef8}
.afspro-input-color{width:100%;height:42px;border-radius:8px;border:1px solid #22313a;background:#0b1220}
.afspro-row-inline{display:flex;align-items:center;gap:10px;margin-top:8px}
.afspro-row2{display:flex;gap:8px;margin-top:8px}
.afspro-check{display:flex;align-items:center;gap:8px;margin-top:8px;color:#9fb4c8}
.afspro-canvas-wrap{position:relative;border:1px solid #22313a;border-radius:10px;overflow:hidden;margin-top:10px}
#afspro-canvas{width:100%;height:auto;display:block;background:#07090F; touch-action:none}
.afspro-actions{margin-top:10px}
.afspro-actions.bottom{margin-top:14px}
.afspro-btn{background:#6600BF;color:#FFFFFF;padding:9px 12px;border-radius:8px;border:none;cursor:pointer}
.afspro-btn.primary{background:#0BA5EC;color:#07090F}
.afspro-preview{background:#071018;border:1px solid #12202a;border-radius:10px;padding:12px}
.afspro-preview-grid{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:80px}
.afspro-placeholder{color:#9fb4c8;font-size:13px}
.afspro-download{margin-top:12px}
.afspro-download-btn{display:inline-block;background:#0BA5EC;color:#07090F;padding:9px 14px;border-radius:8px;text-decoration:none;font-weight:700}
.afspro-small{font-size:13px;color:#9fb4c8}
.afspro-error{color:#ff6b6b}

#afspro-canvas{
  width:"720"; 
  height:"360"; }

/* Responsive */
@media (max-width: 768px) {
    .afspro-tool{flex-direction:column}
    .afspro-right{width:100%}
    #afspro-canvas{height:240px}
}

/* --- Mobile Fix Patch for Cropper --- */
.cropper-container {
  max-width: 100% !important;
  height: auto !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cropper-crop-box,
.cropper-view-box {
  max-width: 90% !important;
  max-height: 90% !important;
}
@media (max-width: 600px) {
  .cropper-container img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  .cropper-crop-box {
    width: 80% !important;
    height: auto !important;
  }
}