/* Support Frames styles */
.root{--blue:#0091C2;--green:#48B269}
:root{ --sf-btn-bg: var(--blue); --sf-btn-text: #fff }
.sf-root{font-family:system-ui,Inter,Arial,Helvetica,sans-serif;max-width:520px;border-radius:8px;padding:16px;background:#fff;color:#111;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.sf-grid input[type=file],.sf-grid select,.sf-grid input[type=text]{width:100%;padding:8px;border:1px solid #e6e6e6;border-radius:6px}
.sf-canvas-wrap{display:flex;justify-content:center;margin:12px 0}
#sf-canvas{width:100%;max-width:480px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.08);background:#f8f8f8}
.sf-root h3{margin-top:0}
.button-primary{background:var(--sf-btn-bg);border:0;color:var(--sf-btn-text);transition:background-color .12s ease,transform .06s ease;box-shadow:0 2px 6px rgba(0,0,0,0.08);}
.button-primary:hover{background:var(--sf-btn-bg-hover, var(--sf-btn-bg));transform:translateY(-1px)}
.button-primary:active{transform:translateY(1px)}
.description{color:#666;font-size:13px}

/* admin tweaks */
.sf-tab img{max-width:140px}

/* Cropper-related styles */
#sf-cropper-wrap{margin:12px 0;border-radius:8px;overflow:hidden;background:#111;padding:8px}
#sf-cropper-wrap img{display:block;max-width:100%;border-radius:6px}
.cropper-container{border-radius:8px}
.sf-buttons{display:flex;gap:8px;margin-top:8px}
.sf-buttons .button{border-radius:10px;padding:8px 12px}

/* circular overlay for preview: use canvas clipped by mask */
.sf-cropper-overlay{position:relative}

/* Mobile-first control bar */
#sf-control-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
#sf-control-bar .button{background:#f5f7f8;border:1px solid rgba(0,0,0,0.08);color:#222;padding:8px 10px;border-radius:8px;min-width:36px;min-height:36px;box-shadow:0 2px 6px rgba(0,0,0,.06)}
#sf-control-bar .button:active{transform:translateY(1px);}
#sf-control-bar span#sf-zoom-indicator{font-weight:600;color:#222}

@media (max-width:600px){
	/* mobile: fixed bottom control bar, horizontal, scrollable */
	#sf-control-bar{position:fixed;bottom:12px;left:12px;right:12px;background:rgba(255,255,255,0.98);padding:8px 12px;border-radius:12px;border:1px solid rgba(0,0,0,0.06);display:flex;overflow-x:auto;align-items:center;z-index:1000001}
	#sf-control-bar .button{min-width:44px;min-height:44px;padding:8px}
	#sf-canvas{max-width:320px}
	/* hide legacy vertical controls (if any) to avoid duplication */
	#sf-cropper-wrap + #sf-control-bar ~ .sf-buttons{display:none}
}