*{box-sizing:border-box}
:root{--green:#32A852;--yellow:#FFC107;--border:#D9DEE5;--bg:#F4F6F9;--text:#20242A;--muted:#68707A}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Microsoft JhengHei","Segoe UI",sans-serif;overflow:hidden;height:100vh}
header{height:82px;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:8px 24px;position:relative;z-index:30;border-bottom:1px solid #E9EDF1}
.brand{display:flex;align-items:center}.brand img{width:58px;height:58px;object-fit:contain;margin-right:12px}.title{font-size:26px}.title b{color:var(--green)}.sub{color:var(--muted);margin-top:2px;font-size:13px}.creator{text-align:right;color:var(--muted);font-size:12px;line-height:1.8}.creator b{color:#D99E00}
.mode-tabs{height:48px;background:#fff;display:flex;align-items:end;padding:0 18px;border-bottom:1px solid var(--border);gap:6px}
.mode-tab{height:40px;border:0;border-radius:10px 10px 0 0;padding:0 24px;background:#EEF1F4;color:#5B6570;font-weight:800;cursor:pointer;font-family:inherit}
.mode-tab.active{background:#FFF8D6;color:#7A5B00;border:1px solid #F3D86B;border-bottom-color:#FFF8D6}
.mode-panel{display:none;height:calc(100vh - 130px)}.mode-panel.active{display:block}
.organize-main{margin:12px 18px;display:flex;flex-direction:column;height:calc(100% - 50px);min-height:0}
.toolbar-card{min-height:64px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:10px 12px;gap:10px;flex:0 0 auto}
.tools{display:flex;gap:8px;flex-wrap:wrap}
button{height:42px;border:0;border-radius:12px;padding:0 16px;font-weight:700;font-family:inherit;font-size:14px;cursor:pointer;color:var(--text)}
.green{background:#EAF8EE;color:#237A3B}.blue{background:#EAF3FF;color:#2869C7}.orange{background:#FFF4DD;color:#B87400}.red{background:#FDEDEC;color:#C73A32}.merge{background:var(--yellow);height:44px;font-size:15px}.merge:hover{background:#FFD84D}
.info{height:42px;margin-top:10px;background:#FFFBEA;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:13px;font-weight:700;color:var(--muted);flex:0 0 auto}.info span:first-child{color:var(--text)}
.canvas-card{margin-top:10px;background:#fff;border:1px solid var(--border);padding:10px;min-height:0;flex:1 1 auto;display:flex;overflow:hidden}
.grid{background:#F8F9FB;min-height:0;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,190px);gap:16px;align-content:start;overflow:auto;flex:1 1 auto;width:100%;overscroll-behavior:contain}
.card{width:190px;height:285px;background:#fff;border:1px solid var(--border);padding:10px;position:relative;user-select:none}.card.selected{background:#FFF8D6;border:2px solid var(--yellow)}.card.deleted{background:#E5E7EB;border-color:#9CA3AF}
.thumbbox{width:168px;height:200px;display:flex;align-items:center;justify-content:center;position:relative}.thumbbox canvas{max-width:150px;max-height:200px;box-shadow:0 1px 3px #0002}.deleted-mask{position:absolute;inset:0;background:#ccc9;display:flex;align-items:center;justify-content:center;color:#900;font-size:21px;font-weight:bold}
.line{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;font-weight:bold}.rotation{font-size:10px;color:var(--muted)}.filename{font-size:12px;margin-top:7px;line-height:1.4;overflow:hidden;height:34px;white-space:pre-line}.card.dragging{opacity:.35}.card.drop-before:before{content:"";position:absolute;left:-10px;top:0;width:5px;height:100%;background:var(--yellow);border-radius:3px}
#empty{flex:1 1 auto;background:#F8F9FB;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}#empty img{width:72px}#empty h2{color:var(--text);margin-bottom:4px}#empty p{max-width:620px}.hidden{display:none!important}
#status{height:38px;background:#fff;color:var(--muted);padding:9px 20px;font-size:12px;position:absolute;left:0;right:0;bottom:0;border-top:1px solid #E1E5EA}

/* Editor */
.editor-shell{height:100%;display:flex;flex-direction:column;min-height:0}
.editor-topbar{height:auto;min-height:64px;background:#fff;border-bottom:1px solid var(--border);padding:10px 14px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;flex:0 0 auto}
.editor-tools,.editor-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}.editor-tool{background:#F1F3F5;color:#4B5560}.editor-tool.active{background:#FFF3B5;color:#6A5200;outline:2px solid var(--yellow)}
.editor-body{display:grid;grid-template-columns:190px minmax(320px,1fr) 280px;gap:0;min-height:0;flex:1 1 auto}
.page-sidebar,.property-panel{background:#fff;min-height:0;overflow:auto}.page-sidebar{border-right:1px solid var(--border)}.property-panel{border-left:1px solid var(--border);padding:12px}
.sidebar-title,.prop-title{height:42px;display:flex;align-items:center;font-weight:800;padding:0 12px;border-bottom:1px solid #ECEFF2}.prop-title{margin:-12px -12px 10px}
.editor-pages{padding:10px;display:flex;flex-direction:column;gap:10px}.side-empty{color:#8A939D;text-align:center;padding:30px 8px;font-size:13px}
.page-thumb{border:2px solid transparent;border-radius:8px;background:#F5F6F7;padding:6px;cursor:pointer}.page-thumb.active{border-color:var(--yellow);background:#FFF8D6}.page-thumb canvas{width:100%;height:auto;display:block;background:#fff}.page-thumb .thumb-label{text-align:center;font-size:12px;margin-top:5px;font-weight:700;color:#5A626B}
.editor-stage-wrap{background:#C9CDD3;min-width:0;min-height:0;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px}
.editor-welcome{margin:auto;background:#fff;border-radius:16px;padding:44px;text-align:center;max-width:620px;box-shadow:0 2px 12px #0001;color:var(--muted)}.editor-welcome img{width:76px}.editor-welcome h2{color:var(--text)}
.editor-stage{position:relative}.canvas-stack{position:relative;box-shadow:0 3px 18px #0003;background:#fff}.canvas-stack>canvas{display:block}.canvas-stack .canvas-container{position:absolute!important;left:0!important;top:0!important}
.property-panel label{display:block;font-size:12px;font-weight:700;color:#4D5660;margin:10px 0}.property-panel input[type=color]{width:100%;height:36px;border:1px solid var(--border);padding:3px;border-radius:8px;background:#fff}.property-panel input[type=number],.property-panel select{width:100%;height:36px;border:1px solid var(--border);border-radius:8px;padding:0 8px;background:#fff;font-family:inherit}.property-panel input[type=range]{width:100%}
.range-row{display:flex;gap:8px;align-items:center}.range-row span{min-width:42px;text-align:right;font-weight:700}.angle-row{display:grid;grid-template-columns:1fr repeat(4,44px);gap:5px}.mini-angle{height:36px;padding:0 5px;border-radius:8px;background:#F0F2F4;font-size:11px}
.check-row{display:flex!important;align-items:center;gap:8px}.check-row input{width:18px;height:18px}.prop-sep{height:1px;background:#E7EAED;margin:16px 0}.prop-subtitle{font-size:13px;font-weight:900;color:#38414A}.full{width:100%;margin-top:8px}.prop-note{font-size:11px;line-height:1.6;color:#737D87;background:#F7F8F9;border-radius:8px;padding:9px;margin-top:14px}
.editor-statusbar{height:36px;background:#fff;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:var(--muted);font-size:12px;flex:0 0 auto}
.busy{position:fixed;inset:0;background:#ffffffdd;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}.spin{width:34px;height:34px;border:4px solid #ddd;border-top-color:var(--yellow);border-radius:50%;animation:s .8s linear infinite}@keyframes s{to{transform:rotate(360deg)}}

@media(max-width:1050px){.editor-body{grid-template-columns:150px minmax(300px,1fr) 240px}.editor-tools button,.editor-actions button{padding:0 10px;font-size:12px}}
@media(max-width:820px){header{height:70px;padding:6px 12px}.brand img{width:48px;height:48px}.title{font-size:21px}.creator{display:none}.mode-panel{height:calc(100vh - 118px)}.editor-body{grid-template-columns:110px minmax(260px,1fr)}.property-panel{position:absolute;right:0;top:0;bottom:36px;width:250px;z-index:40;box-shadow:-3px 0 10px #0002}.organize-main{margin:8px}.grid{grid-template-columns:repeat(auto-fill,170px)}}

/* V2.7.2 annotation refinements */
.canvas-stack canvas{image-rendering:auto}
.upper-canvas,.lower-canvas{backface-visibility:hidden;transform:translateZ(0)}
.editor-stage-wrap{scrollbar-gutter:stable}

.editor-stage-wrap{overflow:auto}.canvas-stack,#editorStage{transform-origin:top left}