.ssf7-form-wrap { display:block; max-width:100%; }
.ssf7 { --ssf7-width:450px; display:block; width:var(--ssf7-width); max-width:100%; box-sizing:border-box; margin:.35rem 0 .65rem; }
.ssf7-surface { display:block; position:relative; border:1px solid #aab6c7; border-radius:7px; background:#fff; overflow:hidden; box-sizing:border-box; }
.ssf7-surface::after { content:""; position:absolute; bottom:24%; left:5%; right:5%; border-bottom:1px dashed #e2e8f0; z-index:2; pointer-events:none; }
.ssf7-canvas { display:block; width:100%; height:auto; touch-action:none; cursor:crosshair; background:transparent; position:relative; z-index:1; }
.ssf7-file { position:absolute !important; width:1px !important; height:1px !important; opacity:0 !important; overflow:hidden !important; clip-path:inset(50%) !important; pointer-events:none !important; }
.ssf7-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:7px; }
.ssf7-clear { border:1px solid #99a8bb; border-radius:4px; padding:5px 12px; background:#fff; color:#1f2937; font:inherit; font-size:.875rem; cursor:pointer; }
.ssf7-clear:hover, .ssf7-clear:focus-visible { background:#f1f5f9; }
.ssf7-hint { font-size:.78rem; color:#576579; }
.ssf7-status { display:block; font-size:.8rem; color:#304c6a; margin-top:3px; }
.ssf7-status:empty { display:none; }
.ssf7-status.ssf7-error { color:#b42318; }
.ssf7.ssf7-not-ready .ssf7-surface { border-color:#d13c32; }