:root{
--bg:#f4f5f7; --panel:#ffffff; --ink:#1d2330; --muted:#7b8494;
--line:#e3e6ec; --accent:#2f6df6; --accent-d:#1f4fc4; --danger:#e2483d;
--rail:#11161f;
} .sd-app, .sd-app *{box-sizing:border-box}
.sd-app{
font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
color:var(--ink);background:var(--bg);
display:flex;flex-direction:column;overflow:hidden;
height:min(84vh,860px);min-height:560px;
border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 40px rgba(20,30,60,.10);
margin:18px 0;line-height:1.4;
}
.sd-app button{font-family:inherit;line-height:1.2}
.sd-app img{max-width:none}
.sd-app select, .sd-app input{font-family:inherit} .topbar{
display:flex;align-items:center;gap:18px;padding:8px 16px;background:var(--panel);
border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.04);z-index:5;
}
.brand{font-weight:700;font-size:16px}
.badge{font-size:10px;background:var(--accent);color:#fff;padding:2px 6px;border-radius:6px;vertical-align:middle}
.product-controls{display:flex;align-items:center;gap:16px;flex:1}
.product-controls label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
select{font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.colors{display:flex;gap:6px}
.swatch{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer}
.swatch.active{box-shadow:0 0 0 2px var(--accent)}
.sizes select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:13px;background:#fff;cursor:pointer}
.sd-price-note{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;margin-right:4px}
.side-toggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.side{border:0;background:#fff;padding:7px 12px;font-size:13px;cursor:pointer;color:var(--muted)}
.side.active{background:var(--accent);color:#fff}
.actions{display:flex;align-items:center;gap:6px}
.actions button{border:1px solid var(--line);background:#fff;padding:7px 11px;border-radius:8px;cursor:pointer;font-size:13px}
.actions button:hover{background:#f0f3fa}
.actions .primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.actions .primary:hover{background:var(--accent-d)}
.sep{width:1px;height:22px;background:var(--line);margin:0 4px} .layout{flex:1;display:grid;grid-template-columns:64px 250px 1fr 240px;min-height:0}
.toolrail{background:var(--rail);display:flex;flex-direction:column;padding:8px 0}
.tool{background:none;border:0;color:#9aa3b2;padding:12px 0;font-size:20px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px}
.tool span{font-size:10px}
.tool:hover{color:#fff}
.tool.active{color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.sidepanel{background:var(--panel);border-right:1px solid var(--line);overflow-y:auto}
.panel{display:none;padding:16px}
.panel.active{display:block}
.panel h3{margin:0 0 12px;font-size:14px}
.hint{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.5}
.block{display:block;width:100%;padding:10px;border:1px solid var(--line);background:#fff;border-radius:9px;cursor:pointer;font-size:14px}
.block:hover{background:#f0f3fa}
.block.danger{color:var(--danger);border-color:#f3c8c4}
.block.danger:hover{background:#fdeeec}
.dropzone{display:flex;align-items:center;justify-content:center;text-align:center;height:120px;border:2px dashed var(--line);border-radius:12px;cursor:pointer;color:var(--muted);font-size:13px}
.dropzone.drag{border-color:var(--accent);background:#eef3ff;color:var(--accent)}
.clipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.clipgrid button{aspect-ratio:1;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer;padding:8px}
.clipgrid button:hover{background:#f0f3fa;border-color:var(--accent)}
.clipgrid svg{width:100%;height:100%}
.templates{display:flex;flex-direction:column;gap:10px}
.tpl{border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;background:#fff;text-align:left;font-size:13px}
.tpl:hover{border-color:var(--accent);background:#f7f9ff}
.tpl b{display:block;margin-bottom:2px}
.tpl small{color:var(--muted)}
.layerlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.layerlist li{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px;cursor:grab}
.layerlist li.sel{border-color:var(--accent);background:#f0f5ff}
.layerlist .ic{font-size:15px}
.layerlist .nm{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layerlist .lk,.layerlist .rm{border:0;background:none;cursor:pointer;font-size:13px;color:var(--muted)}
.layerlist .rm:hover{color:var(--danger)} .stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:18px;min-height:0;overflow:auto}
.canvas-wrap{box-shadow:0 8px 30px rgba(20,30,60,.12);border-radius:8px;background:#fff}
.zoombar{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.zoombar button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 10px;cursor:pointer}
.zoombar button:hover{background:#f0f3fa}
.dpi{margin-left:10px;font-weight:600}
.dpi.ok{color:#1c9a55}.dpi.warn{color:#d98a00}.dpi.bad{color:var(--danger)} .inspector{background:var(--panel);border-left:1px solid var(--line);padding:16px;overflow-y:auto}
.inspector .empty{color:var(--muted);font-size:13px;text-align:center;margin-top:30px}
.props{margin-bottom:18px}
.props h4{margin:0 0 10px;font-size:13px}
.props label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);margin-bottom:12px}
.props input[type=range]{width:100%}
.props input[type=color]{width:100%;height:32px;border:1px solid var(--line);border-radius:7px;background:#fff}
.props textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:8px 9px;font-size:13px;font-family:inherit;resize:vertical;line-height:1.35}
.props .row{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.props .row button{flex:1;min-width:42px;border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px;cursor:pointer;font-size:13px}
.props .row button:hover{background:#f0f3fa}
.props .row button.on{background:var(--accent);color:#fff;border-color:var(--accent)} .sd-app{position:relative}
.sd-overlay{position:absolute;inset:0;background:rgba(255,255,255,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;font-size:14px;color:var(--ink);z-index:30;backdrop-filter:blur(1px)}
.sd-overlay[hidden]{display:none} .sd-motive-filters{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.sd-motive-filters input,.sd-motive-filters select{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 9px;font-size:13px;background:#fff}
.sd-style-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.sd-style-pills{display:flex;gap:5px;flex-wrap:wrap}
.sd-pill{border:1px solid var(--line);background:#fff;border-radius:20px;padding:4px 11px;font-size:12px;cursor:pointer}
.sd-pill:hover{background:#f0f3fa}
.sd-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.motive-list{display:flex;flex-direction:column;gap:7px;max-height:52vh;overflow-y:auto;padding-right:2px}
.motive-card{text-align:left;border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 11px;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:.12s}
.motive-card:hover{border-color:var(--accent);background:#f7faff;transform:translateY(-1px)}
.motive-card .mt{font-size:13px;color:var(--ink);line-height:1.3;font-weight:600}
.motive-card small{font-size:11px;color:var(--muted)}
.sd-spinner{width:38px;height:38px;border:4px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sd-spin .8s linear infinite}
@keyframes sd-spin{to{transform:rotate(360deg)}}
.sd-toast{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:#1c9a55;color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;z-index:40;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.sd-toast.err{background:var(--danger)}