:root{--bg: #eef1f5;--panel: #ffffff;--line: #d7dde5;--ink: #1b2430;--muted: #64748b;--accent: #2f6fd0;--accent-soft: #e8f0fc;--danger: #c8383c;--shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);--radius: 8px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font:14px/1.5 Segoe UI,system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);overscroll-behavior:none}button,input,select,textarea{font:inherit;color:inherit}.app{display:flex;flex-direction:column;height:100%}.topbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:8px;font-weight:650;margin-right:6px}.brand .logo{font-size:20px}.brand small{font-weight:400;color:var(--muted)}.spacer{flex:1 1 auto}.sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);background:#fff;border-radius:var(--radius);cursor:pointer;white-space:nowrap}.btn:hover:not(:disabled){background:#f4f7fb;border-color:#bcc7d6}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover:not(:disabled){background:#2960b8}.btn.on{background:var(--accent-soft);border-color:var(--accent);color:#1c4c96}.btn.icon{padding:7px 9px}.btn.danger{color:var(--danger);border-color:#edc8c9}.btn.danger:hover:not(:disabled){background:#fdf2f2}.tools{display:flex;gap:4px}.work{flex:1 1 auto;display:flex;min-height:0}.scroller{flex:1 1 auto;overflow:auto;padding:20px}.pages{display:flex;flex-direction:column;align-items:center;gap:20px}.pagewrap{position:relative}.pagelabel{position:absolute;top:-18px;left:0;font-size:12px;color:var(--muted)}.page{position:relative;background:#fff;box-shadow:var(--shadow);user-select:none;touch-action:none}.page.busy:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#f6f8fb,#f6f8fb 12px,#eef2f7 12px 24px)}.page canvas{display:block;width:100%;height:100%}.page .overlay{position:absolute;inset:0;pointer-events:none}.page.tool-text,.page.tool-whiteout,.page.tool-image{cursor:crosshair}.handle{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;background:#fff;border:1.5px solid var(--accent);border-radius:2px}.selbox{position:absolute;outline:1.5px solid var(--accent);outline-offset:0;pointer-events:none}.selbox.multi{outline-style:dashed}.hoverbox{position:absolute;outline:1px dashed #9db6dc;pointer-events:none}.marquee{position:absolute;background:#2f6fd01f;outline:1px solid var(--accent);pointer-events:none}.editor{position:absolute;margin:0;padding:0;border:0;outline:2px solid var(--accent);background:transparent;resize:none;overflow:hidden;white-space:pre-wrap;word-break:normal}.side{flex:0 0 264px;background:var(--panel);border-left:1px solid var(--line);overflow:auto;padding:14px}.side h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.field{margin-bottom:12px}.field>label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.field select,.field input[type=number],.field input[type=text]{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff}.row{display:flex;gap:6px;align-items:center}.row>*{flex:1 1 auto}.swatches{display:flex;gap:5px;flex-wrap:wrap}.swatch{width:22px;height:22px;border-radius:5px;border:1px solid rgba(0,0,0,.18);cursor:pointer;padding:0}.swatch.on{outline:2px solid var(--accent);outline-offset:1px}.hint{font-size:12px;color:var(--muted)}.hint code{background:#eef2f7;padding:1px 4px;border-radius:4px}.start{flex:1 1 auto;display:grid;place-items:center;padding:24px}.drop{width:min(680px,100%);background:var(--panel);border:2px dashed var(--line);border-radius:14px;padding:40px 32px;text-align:center;box-shadow:var(--shadow)}.drop.over{border-color:var(--accent);background:var(--accent-soft)}.drop h1{margin:0 0 6px;font-size:26px}.drop p.lead{margin:0 0 22px;color:var(--muted)}.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:28px;text-align:left}.feature{background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:12px 14px}.feature b{display:block;margin-bottom:2px}.feature span{font-size:12.5px;color:var(--muted)}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%);background:#1b2430;color:#fff;padding:10px 16px;border-radius:8px;box-shadow:var(--shadow);max-width:min(560px,92vw);z-index:50}.toast.warn{background:#8a5a00}.toast.err{background:var(--danger)}.overlaymsg{position:fixed;inset:0;background:#eef1f5d1;display:grid;place-items:center;z-index:60}.overlaymsg .card{background:#fff;padding:22px 28px;border-radius:12px;box-shadow:var(--shadow);text-align:center}@media(max-width:820px){.side{position:fixed;right:0;top:0;bottom:0;z-index:40;box-shadow:var(--shadow)}.brand small{display:none}}