*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1a2e;--bg2: #16213e;--bg3: #0f3460;--surface: #1e1e2e;--border: #2a2a4a;--text: #cdd6f4;--muted: #6c7086;--accent: #6366f1;--accent2: #89b4fa;--orange: #f59e0b;--green: #a6e3a1;--red: #f38ba8}body{background:var(--bg);color:var(--text);font-family:Segoe UI,Arial,sans-serif;font-size:13px}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app.drop-active{outline:3px dashed var(--accent);outline-offset:-4px}.workspace{display:flex;flex:1;overflow:hidden}.toolbar{display:flex;align-items:center;gap:2px;background:var(--surface);border-bottom:1px solid var(--border);padding:5px 10px;flex-shrink:0;flex-wrap:wrap}.tb-btn{background:transparent;color:var(--text);border:none;border-radius:5px;padding:5px 10px;cursor:pointer;font-size:12px;white-space:nowrap;transition:background .15s}.tb-btn:hover:not(:disabled){background:#313244}.tb-btn:active:not(:disabled){background:#45475a}.tb-btn:disabled{color:var(--muted);cursor:not-allowed}.tb-btn.active{background:#2a2a50;border:1px solid var(--accent);color:var(--accent2)}.tb-btn.icon{padding:5px 8px;font-size:14px}.tb-sep{width:1px;height:22px;background:var(--border);margin:0 4px}.tb-text{color:var(--muted);font-size:12px;padding:0 3px}.zoom-lbl{min-width:38px;text-align:center;color:var(--text)}.page-input{width:46px;text-align:center;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:3px 4px;font-size:12px}.page-input:focus{outline:none;border-color:var(--accent)}.page-input:disabled{color:var(--muted)}.tb-filename{margin-left:auto;color:var(--muted);font-size:11px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thumb-panel{width:136px;background:#111120;border-right:1px solid var(--border);overflow-y:auto;flex-shrink:0}.thumb-list{display:flex;flex-direction:column;gap:6px;padding:8px}.thumb-item{cursor:pointer;border-radius:5px;border:1px solid transparent;padding:3px;text-align:center;transition:border-color .15s,background .15s}.thumb-item:hover{background:#1a1a3a;border-color:var(--border)}.thumb-item.active{border-color:var(--accent);background:#1e1e3e}.thumb-img{width:100%;display:block;border-radius:2px}.thumb-num{font-size:10px;color:var(--muted);margin-top:2px;display:block}.thumb-empty{color:var(--muted);font-size:12px;padding:20px 8px;text-align:center}.viewer{flex:1;overflow-y:auto;overflow-x:auto;background:#252535;padding:24px;display:flex;flex-direction:column;align-items:center;gap:24px}.drop-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;gap:12px;color:var(--muted)}.drop-icon{font-size:64px}.drop-title{font-size:22px;font-weight:600;color:var(--text)}.drop-sub{font-size:14px}.link-btn{background:none;border:none;color:var(--accent);cursor:pointer;font-size:14px;text-decoration:underline;padding:0}.page-wrapper{background:#fff;box-shadow:0 4px 24px #00000080;border-radius:2px;display:inline-block}.page-canvas{position:relative;display:inline-block;outline:none;-webkit-user-select:none;user-select:none;touch-action:none}.page-img{display:block}.page-loading{position:absolute;top:8px;right:8px;background:#00000080;border-radius:50%;padding:4px 6px;font-size:14px}.span-box{position:absolute;pointer-events:none;border:1px solid transparent;border-radius:1px;transition:border-color .1s}.span-box.hov{border-color:#6366f199;background:#6366f114}.span-box.sel{border-color:#6366f1e6;background:#6366f11f}.img-box{position:absolute;pointer-events:none;border:1.5px dashed rgba(99,102,241,.5);border-radius:1px}.img-box.sel{border:2px solid var(--orange);background:#f59e0b14}.img-box.dragging{border:2px solid var(--orange);background:#f59e0b26}.drag-preview{position:absolute;pointer-events:none;border-radius:1px}.text-drag{border:2px solid var(--accent);background:#6366f133}.resize-handle{position:absolute;background:var(--orange);border:1px solid #1e1e2e;border-radius:1px;pointer-events:none}.edit-input{position:absolute;z-index:10;background:#fffde7;color:#111;border:2px solid var(--orange);border-radius:2px;padding:0 3px;outline:none;font-family:inherit}.statusbar{display:flex;align-items:center;justify-content:space-between;background:#111120;border-top:1px solid var(--border);padding:3px 12px;font-size:11px;color:var(--muted);flex-shrink:0;min-height:24px}.status-right{display:flex;align-items:center;gap:12px}.status-badge{background:#1a2a1a;color:var(--green);border-radius:8px;padding:1px 8px;font-size:11px}.status-info{color:var(--muted)}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:#111120}::-webkit-scrollbar-thumb{background:#2a2a4a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#3a3a5a}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}