:root{--bg: #eef1f5;--bar: #15294d;--accent: #2b6cff;--ink: #0f1b2d}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--bg);font-family:-apple-system,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink)}.app{min-height:100%}.topbar{position:sticky;top:0;z-index:50}.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;background:var(--bar);color:#fff}.brand{display:flex;flex-direction:column;line-height:1.2}.brand strong{font-size:15px}.muted{color:#9fb3d6;font-size:12px}.actions{display:flex;align-items:center;gap:10px}.actions .muted{color:#cdd9ef}button{font:inherit;border-radius:8px;border:1px solid transparent;padding:8px 14px;cursor:pointer}button.primary{background:var(--accent);color:#fff;font-weight:600}button.primary:disabled{opacity:.6;cursor:progress}button.ghost{background:transparent;color:#fff;border-color:#41568a}.tabs{display:flex;align-items:center;gap:6px;padding:10px 18px 0}.tab{background:#dfe6f1;color:#2a3c5e;border:1px solid #c4d0e4;border-bottom:none;border-radius:8px 8px 0 0}.tab.on{background:#fff;color:var(--ink);font-weight:600}.dbg{margin-left:auto;font-size:12px;color:#4a5b79;display:flex;align-items:center;gap:5px}.canvas-wrap{padding:14px 18px 60px;display:flex;justify-content:center}.page{position:relative;width:100%;max-width:900px;background:#fff;box-shadow:0 10px 30px #14294d2e}.page .bg{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;pointer-events:none}.fld{position:absolute;border:0;margin:0;padding:0 2px;background:#ffe0824d;color:#111;font-family:Arial,Helvetica,sans-serif;line-height:1;box-sizing:border-box}.fld:hover{background:#ffd65a80}.fld:focus{outline:2px solid var(--accent);background:#fff;z-index:5}.fld.code{text-align:center}.fld.textarea{resize:none;padding:2px 3px;line-height:1.25;overflow:hidden}.fld.dbg{outline:1px solid rgba(220,0,0,.55)}.fld.text.dbg{outline-color:#0050dc8c}.sign-btn{position:absolute;z-index:8;font-size:11px;font-weight:600;padding:3px 9px;border-radius:6px;border:none;background:var(--accent);color:#fff;cursor:pointer;white-space:nowrap;box-shadow:0 2px 6px #00000040}.sign-btn.done{background:#1a9e54}.sign-btn:hover{filter:brightness(1.08)}.fmtbar{display:flex;align-items:center;gap:8px;padding:8px 18px;background:#e7edf6;border-bottom:1px solid #d3deee;flex-wrap:wrap}.fmtlabel{font-size:12px;color:#4a5b79;font-weight:600}.fmtbar select{font:inherit;font-size:13px;padding:5px 8px;border-radius:7px;border:1px solid #c4d0e4;background:#fff;cursor:pointer}.fbtn{font-size:13px;padding:5px 11px;border-radius:7px;border:1px solid #c4d0e4;background:#fff;color:#2a3c5e;cursor:pointer}.fbtn.on{background:var(--accent);color:#fff;border-color:var(--accent)}.fbtn:disabled,.fmtbar select:disabled,.sizeinput:disabled{opacity:.45;cursor:not-allowed}.fmtbar.off .fmtlabel{color:#8696b0;font-weight:500}.sizectl{display:inline-flex;align-items:center;gap:3px}.sizeinput{width:46px;text-align:center;font:inherit;font-size:13px;padding:4px;border-radius:6px;border:1px solid #c4d0e4;background:#fff}.fld.mark{background:#ffeb3b99}.fld.mark:hover{background:#ffe41ec7}.fld.active{outline:2px solid var(--accent);z-index:6}