.sg-shell{max-width:1100px;margin:0 auto}.sg-app{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.sg-card-box{background:#fff;border:1px solid #dce3ed;border-radius:18px;padding:20px;box-shadow:0 8px 32px #2039610c}
.sg-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:10px;background:#f1f4f8;margin-bottom:14px}.sg-tabs button{border:0;background:transparent;padding:9px 16px;border-radius:7px;font-weight:700;color:#536178;cursor:pointer}.sg-tabs button[aria-selected=true]{background:#fff;color:#3f4292;box-shadow:0 2px 6px #1f36551a}
.sg-field{display:grid;gap:6px;font-weight:600;font-size:.9rem;margin-bottom:12px}.sg-field input[type=text]{font-size:1.05rem;padding:12px;border:1px solid #cad3df;border-radius:10px}
.sg-fonts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:8px 0 14px}.sg-card{border:1px solid #dbe2ec;background:#fff;border-radius:12px;padding:6px 6px 8px;cursor:pointer;display:grid;gap:4px;color:#5a6a82;font-size:.75rem}.sg-card canvas{width:100%;height:64px;display:block}.sg-card[aria-pressed=true]{border:2px solid #5a4fd1;background:#f4f3ff}
.sg-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:10px 0}.sg-row label{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600}.sg-row input[type=range]{width:120px;accent-color:#5a4fd1}
.sg-swatch{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cbd5e1;cursor:pointer}.sg-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #5a4fd1}
.sg-preview-wrap{background:repeating-conic-gradient(#f1f4f9 0% 25%,#fff 0% 50%) 50%/22px 22px;border:1px solid #dce3ed;border-radius:14px;padding:10px}.sg-preview{width:100%;height:190px;display:block}
.sg-pad{width:100%;height:240px;display:block;background:#fff;border:1px dashed #b8c4d6;border-radius:14px;touch-action:none;cursor:crosshair}
.sg-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.sg-actions .btn{padding:11px 18px;border-radius:9px;font-size:.92rem}
.sg-status{font-size:.88rem;color:#48647f;min-height:22px;margin-top:10px}.sg-status[data-error=true]{color:#ab233c}.sg-app [hidden]{display:none!important}
.sg-mini{border:1px solid #d2dce8;background:#fff;border-radius:8px;padding:8px 12px;font-weight:600;cursor:pointer;color:#354e6d}
@media(max-width:860px){.sg-app{grid-template-columns:1fr}.sg-fonts{grid-template-columns:repeat(2,minmax(0,1fr))}}