.svgf-root{margin-bottom:1.5rem;-webkit-tap-highlight-color:transparent;}
.svgf-layout{display:flex;flex-direction:column;gap:1rem;}
.svgf-card{background:var(--surface,#fff);border:1px solid var(--border,rgba(0,0,0,.08));border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft,0 2px 12px rgba(0,0,0,.06));}
.svgf-input-card{display:flex;flex-direction:column;}
.svgf-label{display:block;font-size:0.8125rem;font-weight:600;color:var(--text-muted,#6b7280);padding:12px 14px 0;margin-bottom:6px;}
.svgf-editor-wrap{min-height:220px;padding:0 12px 12px;}
.svgf-editor{width:100%;min-height:200px;border-radius:10px;border:1px solid var(--border,rgba(0,0,0,.1));}
.svgf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;border-top:1px solid var(--border,rgba(0,0,0,.08));background:var(--surface-muted,rgba(0,0,0,.02));}
.svgf-btn{font-size:0.875rem;font-weight:500;padding:8px 14px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;-webkit-tap-highlight-color:transparent;}
.svgf-btn:active{transform:scale(0.98);}
.svgf-btn-primary{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.svgf-btn-primary:hover{background:var(--primary-dark,#1d4ed8);border-color:var(--primary-dark,#1d4ed8);box-shadow:0 4px 14px rgba(37,99,235,.25);}
.svgf-btn-secondary{background:var(--surface,#fff);color:var(--text-main,#111);border:1px solid var(--border,rgba(0,0,0,.12));}
.svgf-btn-secondary:hover{background:var(--surface-muted,rgba(0,0,0,.04));border-color:var(--border,rgba(0,0,0,.2));}
.svgf-btn-ghost{background:transparent;color:var(--text-muted,#6b7280);border:1px solid transparent;}
.svgf-btn-ghost:hover{background:var(--surface-muted,rgba(0,0,0,.04));color:var(--text-main,#111);}
.svgf-output-card{display:flex;flex-direction:column;}
.svgf-output-wrap{min-height:120px;padding:12px 14px 14px;}
.svgf-output{margin:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:0.8125rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:var(--text-main,#111);overflow-x:auto;}
.svgf-output.svgf-output--success{color:var(--success,#059669);}
.svgf-output.svgf-output--error{color:var(--danger,#dc2626);}
@media (min-width:480px){.svgf-editor-wrap{min-height:260px;padding:0 14px 14px;}
.svgf-editor{min-height:240px;}
.svgf-actions{padding:12px 16px;gap:10px;}
.svgf-btn{padding:9px 16px;}
.svgf-output-wrap{min-height:140px;padding:14px 16px;}
.svgf-output{font-size:0.875rem;}
}
@media (min-width:768px){.svgf-layout{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:stretch;}
.svgf-editor-wrap{min-height:320px;}
.svgf-editor{min-height:300px;}
.svgf-output-wrap{min-height:320px;}
.svgf-output{font-size:0.8125rem;}
}
@media (min-width:992px){.svgf-editor-wrap{min-height:380px;}
.svgf-editor{min-height:360px;}
.svgf-output-wrap{min-height:380px;}
}