:root{--bd:#f5f7fa;--bp:#ffffff;--bc:#ffffff;--bi:#f8fafc;--bh:#eef0f4;--bo:#e2e8f0;--bf:#6366f1;--t1:#1a1a2e;--t2:#64748b;--t3:#94a3b8;--ag:rgba(99,102,241,.12);--ok:#16a34a;--er:#dc2626;--r:10px;--tr:.18s cubic-bezier(.4,0,.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'DM Sans',-apple-system,sans-serif;background:var(--bd);color:var(--t1);-webkit-font-smoothing:antialiased;overflow:hidden;height:100vh}
.topbar{position:fixed;top:0;left:0;right:0;z-index:100;height:56px;background:var(--bp);border-bottom:1px solid var(--bo);display:flex;align-items:center;justify-content:space-between;padding:0 20px}
.topbar-l{display:flex;align-items:center;gap:14px}
.back{color:var(--t2);text-decoration:none;font-size:.85em;font-weight:500;display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;transition:var(--tr)}
.back:hover{background:var(--bh);color:var(--t1)}
.logo-t{font-size:1em;font-weight:700;background:linear-gradient(135deg,var(--bf),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.topbar-r{display:flex;align-items:center;gap:8px}
.biz-sel{font-size:.82em;color:var(--t1);padding:6px 28px 6px 12px;background:var(--bc);border-radius:8px;border:1px solid var(--bo);font-family:inherit;font-weight:600;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238585a0' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;transition:var(--tr);max-width:220px}
.biz-sel:hover{border-color:var(--bf);background:var(--bh)}
.biz-sel:focus{outline:0;border-color:var(--bf);box-shadow:0 0 0 3px var(--ag)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border:none;border-radius:8px;font-family:inherit;font-size:.82em;font-weight:600;cursor:pointer;transition:var(--tr);white-space:nowrap}
.btn-s{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 2px 10px rgba(34,197,94,.25)}
.btn-s:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(34,197,94,.35)}
.btn-g{background:0 0;color:var(--t2);border:1px solid var(--bo)}
.btn-g:hover{background:var(--bh);color:var(--t1)}
.btn-sm{padding:6px 12px;font-size:.78em}
.btn-i{padding:7px;width:32px;height:32px;justify-content:center}
.app{display:grid;grid-template-columns:370px 1fr;height:calc(100vh - 56px);margin-top:56px}
.ctrl{background:var(--bp);border-right:1px solid var(--bo);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--bo) transparent}
.ctrl::-webkit-scrollbar{width:4px}
.ctrl::-webkit-scrollbar-thumb{background:var(--bo);border-radius:10px}
.tbar{display:flex;gap:1px;padding:10px 14px 0;border-bottom:1px solid var(--bo);position:sticky;top:0;background:var(--bp);z-index:10;flex-wrap:wrap}
.tb{padding:8px 11px;font-size:.7em;font-weight:700;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:var(--tr);letter-spacing:.04em;text-transform:uppercase}
.tb:hover{color:var(--t2)}
.tb.a{color:var(--bf);border-bottom-color:var(--bf)}
.tc{display:none;padding:14px}
.tc.a{display:block}
.cg{margin-bottom:16px;padding:12px;background:var(--bc);border-radius:14px;border:1px solid var(--bo)}
.cgt{font-size:.7em;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.cr{display:flex;gap:10px;margin-bottom:9px;align-items:center}
.cr:last-child{margin-bottom:0}
.cl{font-size:.8em;color:var(--t2);font-weight:500;min-width:82px;flex-shrink:0}
.cf{width:100%;margin-bottom:9px}
.cf:last-child{margin-bottom:0}
.inp,.sel{width:100%;padding:7px 11px;background:var(--bi);border:1px solid var(--bo);border-radius:7px;color:var(--t1);font-family:inherit;font-size:.82em;transition:var(--tr)}
.inp:focus,.sel:focus{outline:0;border-color:var(--bf);box-shadow:0 0 0 3px var(--ag)}
.sel{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238585a0' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;padding-right:26px}
textarea.inp{resize:vertical;min-height:50px}
.clrr{display:flex;align-items:center;gap:8px}
.clrs{width:32px;height:32px;border:2px solid var(--bo);border-radius:7px;cursor:pointer;padding:0;overflow:hidden;flex-shrink:0}
.clrs::-webkit-color-swatch-wrapper{padding:0}
.clrs::-webkit-color-swatch{border:none;border-radius:5px}
.clrh{width:82px;padding:7px 8px;background:var(--bi);border:1px solid var(--bo);border-radius:7px;color:var(--t1);font-family:'DM Sans',monospace;font-size:.78em;text-align:center}
.sr{display:flex;align-items:center;gap:8px;width:100%}
.sld{flex:1;-webkit-appearance:none;height:3px;background:var(--bo);border-radius:2px;outline:0}
.sld::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--bf);cursor:pointer;border:2px solid var(--bc);box-shadow:0 0 5px var(--ag)}
.sv{font-size:.72em;color:var(--t2);font-weight:600;min-width:28px;text-align:right;font-variant-numeric:tabular-nums}
.tr{display:flex;align-items:center;justify-content:space-between}
.tgl{width:38px;height:22px;border-radius:11px;background:var(--bo);position:relative;cursor:pointer;transition:var(--tr);flex-shrink:0}
.tgl.on{background:var(--bf)}
.tgl::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:var(--tr);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tgl.on::after{left:18px}
.upl{border:2px dashed var(--bo);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:var(--tr);position:relative;overflow:hidden}
.upl:hover{border-color:var(--bf);background:rgba(99,102,241,.04)}
.upl.has{border-style:solid;padding:6px}
.upl img{max-width:100%;max-height:100px;border-radius:5px;display:block;margin:0 auto}
.upl-t{color:var(--t3);font-size:.78em}
.upl-i{font-size:1.5em;margin-bottom:4px}
.upl input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.upl-x{position:absolute;top:3px;right:3px;background:var(--er);color:#fff;border:none;border-radius:50%;width:20px;height:20px;font-size:.65em;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.prg{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.pr{padding:10px;border-radius:var(--r);border:2px solid var(--bo);cursor:pointer;transition:var(--tr);text-align:center}
.pr:hover{border-color:var(--t3)}
.pr.on{border-color:var(--bf);box-shadow:0 0 0 3px var(--ag)}
.prp{height:48px;border-radius:5px;margin-bottom:6px;overflow:hidden}
.prn{font-size:.7em;font-weight:600;color:var(--t2)}
.pva{background:var(--bd);display:flex;align-items:flex-start;justify-content:center;padding:30px;overflow:auto;position:relative;background-image:radial-gradient(circle at 1px 1px,rgba(99,102,241,.06) 1px,transparent 0);background-size:24px 24px}
.pvw{flex-shrink:0;position:relative;box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);border-radius:3px;overflow:hidden;background:#fff}
.pvw canvas{display:block}
.pvz{position:fixed;bottom:20px;right:20px;display:flex;gap:4px;background:var(--bp);border-radius:8px;padding:3px;border:1px solid var(--bo);z-index:5}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);padding:11px 22px;border-radius:10px;font-size:.85em;font-weight:600;z-index:999;transition:.3s ease;opacity:0;pointer-events:none;background:var(--bc);color:var(--t1);border:1px solid var(--bo);box-shadow:0 8px 30px rgba(0,0,0,.4)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast.ok{border-color:var(--ok);color:var(--ok)}
.toast.err{border-color:var(--er);color:var(--er)}
.ld{position:fixed;inset:0;background:rgba(10,10,15,.85);display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(6px)}
.ld.h{display:none}
.ldr{width:36px;height:36px;border:3px solid var(--bo);border-top-color:var(--bf);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(max-width:860px){.app{grid-template-columns:1fr;height:auto;min-height:calc(100vh - 56px)}.ctrl{border-right:none;border-bottom:1px solid var(--bo);max-height:50vh}.pva{min-height:50vh;padding:16px}}