*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;color:#1c2b48}.studio{height:100vh;overflow:hidden;background:#e3e9f2}.sidebar{position:fixed;z-index:5;left:0;top:0;bottom:0;width:310px;background:linear-gradient(#fff,#f5f8fc);border-right:1px solid #d7e1f0;display:flex;flex-direction:column;overflow-y:auto}.sidebrand{height:55px;border-bottom:1px solid #e4eaf3;display:flex;align-items:center;padding:8px 15px;gap:10px;flex-shrink:0}.logo{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#735cff,#00a9b8);color:white;font-size:20px;box-shadow:0 2px 5px #b7c7e9}.sidebrand b{display:block;font-size:16px}.sidebrand small{display:block;font-size:9px;color:#1763ff;font-weight:bold;margin-top:3px}.home{margin-left:auto;border:1px solid #dbe3ef;background:#f7f9fc;border-radius:50%;width:30px;height:30px;color:#60728e}.side-section{padding:17px 15px;border-bottom:1px solid #e7edf5}.step-title{font-size:10px;font-weight:800;color:#8190a9;letter-spacing:.5px;display:flex;align-items:center;justify-content:space-between}.free{color:#15956a;background:#e8fff5;border:1px solid #bdf2dc;border-radius:20px;padding:5px 9px;font-size:9px}.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:14px}.type{height:54px;border:1px solid transparent;background:#f7f9fd;border-radius:8px;color:#2461ed;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}.type b{font-size:18px}.type span{font-size:9px;font-weight:bold}.type.active{border:2px solid #2465ff;background:#edf3ff;box-shadow:0 3px 10px #2465ff18}.type i{position:absolute;right:-3px;top:-5px;background:#fff0c6;color:#aa6a00;font-size:7px;font-style:normal;border:1px solid #f5cf67;border-radius:6px;padding:2px}.mode-row{display:flex;align-items:center;gap:5px;margin-top:15px;flex-wrap:wrap}.mode-row label{font-size:9px;background:#f6f8fb;padding:6px;border-radius:5px}.mini{font-size:9px;border:1px solid #d9e2ef;border-radius:6px;padding:6px;background:#fff;color:#546680}.mini.active{background:#eef4ff;color:#2465ff;border-color:#b9ceff}.scan{padding-top:17px}.clear{border:0;background:none;color:#f34b53;font-weight:bold;font-size:9px;cursor:pointer}.tip{background:#eff5ff;border:1px solid #d7e5ff;border-radius:5px;padding:8px;font-size:9px;color:#2461ed;margin:14px 0 10px}.upload-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dropzone{height:83px;border:2px dashed #d1d9e5;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#a1adbd;font-size:9px;font-weight:bold;cursor:pointer}.dropzone b{font-size:21px}.dropzone input{display:none}.queue-section{flex:1;min-height:180px}.page-pill{background:#98a8bf;color:#fff;border-radius:15px;padding:4px 8px;font-size:9px}.queue{margin-top:12px;background:#f9fbfe;border:1px solid #e0e7f0;border-radius:7px;padding:7px;min-height:75px}.empty-queue{font-size:10px;color:#9aa6b8;text-align:center;padding:20px 3px}.queue-item{width:100%;background:#fff;border:1px solid #e0e5ed;border-radius:4px;padding:12px 8px;text-align:left;display:flex;justify-content:space-between;font-size:10px;font-weight:bold;color:#33445f;margin-bottom:5px;cursor:pointer}.queue-item.selected{border-color:#2870ff;color:#175be0}.queue-item b{color:#f04a55}.queue-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.outline{height:34px;border:1px solid #dce4ef;background:#fff;border-radius:8px;font-size:9px;font-weight:bold;color:#354661;cursor:pointer}.outline.blue{background:#eff5ff;border-color:#c6d9ff;color:#1761ed}.outline.red{background:#fff4f4;border-color:#ffd5d5;color:#df3e48}.export-section{padding:15px 12px 17px;background:#fff;border-top:1px solid #e1e9f4;flex-shrink:0}.export-section p{font-size:9px;color:#95a2b7;margin:5px 0 12px}.export-card{border:1px solid #d6e5ff;border-radius:10px;background:#f4f8ff;padding:8px;position:relative}.export-card>b{font-size:9px;color:#2364e9}.pro-pill{float:right;background:#fff1c8;border-radius:10px;padding:4px 7px;color:#b47700;font-size:8px}.export-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:9px}.export-buttons button{height:39px;border:1px solid #c9ddff;background:#f6f9ff;color:#1759df;border-radius:8px;font-size:9px;font-weight:bold;cursor:pointer}.export-section>small{display:block;text-align:center;font-size:9px;color:#8290a8;line-height:1.5;margin-top:10px}.main-area{position:absolute;left:310px;right:0;top:0;bottom:0;overflow:hidden}.canvas-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:50px 70px}.paper-wrap{width:min(520px,70%);height:auto;aspect-ratio:1240/1754;box-shadow:0 12px 28px #2c3d552e;background:#fff;flex-shrink:0}.paper-wrap canvas{display:block;width:100%;height:100%;touch-action:none}.zoom-control{position:absolute;z-index:2;top:73px;left:22px;background:white;border-radius:25px;box-shadow:0 4px 12px #25364c1b;padding:8px 12px;display:flex;align-items:center;gap:16px;font-size:10px}.zoom-control button{border:0;background:none;font-size:17px;color:#26344b;cursor:pointer}.right-tools{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}.right-tools button{width:41px;height:41px;border-radius:50%;border:2px solid white;background:#3985f5;color:white;font-size:19px;box-shadow:0 3px 8px #33445c35;cursor:pointer}.right-tools button:first-child{background:#10bd91}.right-tools button:nth-child(2){background:#ed4f9c}.right-tools .danger{background:#f23d5a}.bottom-hint{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);font-size:10px;color:#7d8ba1;background:#ffffffc9;border-radius:20px;padding:8px 14px;white-space:nowrap}.modal{position:fixed;inset:0;background:#18243c88;z-index:10;display:grid;place-items:center}.modal.hidden{display:none}.modal-box{background:#fff;width:min(420px,90vw);padding:18px;border-radius:14px}.modal-head{display:flex;justify-content:space-between;margin-bottom:12px}.modal-head button{border:0;background:none;font-size:18px}.page-thumb{display:block;width:100%;padding:12px;text-align:left;background:#f5f8ff;border:1px solid #dce7f8;border-radius:7px;margin:7px 0;color:#2d4e84}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:#1c2b48;color:#fff;padding:11px 18px;border-radius:20px;font-size:12px;transition:.2s;z-index:20;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.mobile-head{display:none}@media(max-width:850px){.sidebar{width:280px}.main-area{left:280px}.canvas-stage{padding:45px 45px}.paper-wrap{width:70%}.right-tools{right:7px}.right-tools button{width:34px;height:34px;font-size:16px}}@media(max-width:650px){.studio{overflow:auto}.sidebar{position:relative;width:100%;height:auto;max-height:none;bottom:auto}.queue-section{flex:none}.export-section{position:relative}.main-area{position:relative;left:0;height:75vh;min-height:500px}.mobile-head{height:45px;display:flex;justify-content:space-between;padding:10px 15px;background:#fff}.canvas-stage{padding:35px 45px}.paper-wrap{width:68%}.zoom-control{top:55px;left:12px}.right-tools{right:8px}.bottom-hint{font-size:8px}}

/* A4 workspace fit and drag/drop feedback */
.paper-wrap{aspect-ratio:210/297;max-width:none;flex-shrink:0}
.paper-wrap canvas{width:100%;height:100%;object-fit:contain}
.dropzone.drag-over{border-color:#1763ff;background:#edf4ff;color:#1763ff;box-shadow:inset 0 0 0 2px #d6e5ff}
canvas.canvas-drop{outline:4px dashed #2870ff;outline-offset:4px}
.canvas-stage{overscroll-behavior:contain}
@media(max-width:650px){.canvas-stage{min-height:0}}

/* Keep the entire A4 sheet visible in the available workspace. */
.canvas-stage{padding:64px 88px 58px;align-items:center;justify-content:center;min-width:0;min-height:0}
.paper-wrap{width:auto;height:auto;aspect-ratio:210/297;max-width:none;max-height:none;flex:0 0 auto}
.paper-wrap canvas{width:100%;height:100%;display:block}
@media(max-width:850px){.canvas-stage{padding:58px 58px 55px}}
@media(max-width:650px){.canvas-stage{height:75vh;min-height:500px;padding:55px 48px 50px}}