.fo-smc-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:1024px){.fo-smc-grid{grid-template-columns:1fr 1fr}}

.fo-smc-card{background:#fff;border:1px solid #E9EEF3;border-radius:2px;padding:14px 14px 12px}
.fo-smc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.fo-smc-title{font-weight:700;font-size:18px;color:#111827}
.fo-smc-icon{border:1px solid #E5E7EB;background:#fff;cursor:pointer;border-radius:2px;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.fo-smc-icon.fo-smc-zoom::before{content:'\1F50D'; font-size:18px; opacity:.85}
.fo-smc-sub{font-size:12px;color:#6B7280;margin:2px 0 8px}

.fo-smc-range-row{display:flex;gap:8px;margin-bottom:20px}
.fo-smc-pill{border:1px solid #D6DAE1;background:#fff;border-radius:2px;padding:6px 12px;font-weight:700;color:#2E3A59;cursor:pointer}
.fo-smc-pill.active{background:#4F6BF6;border-color:#4F6BF6;color:#fff}

.fo-smc-canvas-wrap{position:relative}
.fo-smc-canvas-wrap canvas{width:100% !important;height:100% !important;background:#fff}

.fo-smc-modal{position:fixed; inset:0; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; z-index:9999}
.fo-smc-modal.open{display:flex}
.fo-smc-modal-inner{background:#fff;border-radius:2px; padding:10px; width:92vw; height:88vh; box-shadow:0 8px 24px rgba(0,0,0,.25); position:relative; display:flex}
.fo-smc-modal-canvas{width:100%; height:100%}
.fo-smc-modal-close{position:absolute; right:10px; top:10px; width:28px; height:28px; border:1px solid #E5E7EB; background:#fff; border-radius:2px; cursor:pointer}
.fo-smc-modal-close span{position:absolute; left:50%; top:50%; width:14px; height:2px; background:#111; transform:translate(-50%,-50%) rotate(45deg)}
.fo-smc-modal-close span::after{content:''; position:absolute; width:14px; height:2px; background:#111; transform: rotate(90deg); left:0; top:0}