:root{--bg-app: #f5f5f7;--bg-panel: #ffffff;--bg-header: #ffffff;--text-primary: #1d1d1f;--text-secondary: #86868b;--accent-color: #0071e3;--accent-hover: #0077ed;--danger-color: #ff3b30;--border-color: #d2d2d7;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);--shadow-md: 0 4px 6px rgba(0, 0, 0, .05);--header-height: 60px;--sidebar-width: 240px;--panel-width: 260px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:var(--text-primary);background-color:var(--bg-app);height:100vh;overflow:hidden}#app{display:flex;flex-direction:column;height:100%}#top-bar{height:var(--header-height);background:var(--bg-header);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 20px;box-shadow:var(--shadow-sm);z-index:10}.logo{font-weight:600;font-size:18px}.logo .author{font-weight:400;color:var(--text-secondary);font-size:14px;margin-left:8px}.toolbar-actions{display:flex;gap:12px;align-items:center}.divider{width:1px;height:24px;background:var(--border-color);margin:0 8px}#main-container{display:flex;flex:1;overflow:hidden}aside{background:var(--bg-panel);border-right:1px solid var(--border-color);display:flex;flex-direction:column}#sidebar-left{width:var(--sidebar-width);border-right:1px solid var(--border-color)}#sidebar-right{width:var(--panel-width);border-left:1px solid var(--border-color);border-right:none;padding:20px}.sidebar-header{padding:16px;font-weight:600;border-bottom:1px solid var(--border-color);font-size:14px;color:var(--text-secondary);background:#f5f5f780}.thumbnails-container{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:12px}#main-viewer{flex:1;background:var(--bg-app);display:flex;align-items:center;justify-content:center;overflow:auto;position:relative;padding:40px}#viewer-container{box-shadow:var(--shadow-md);background:#fff;min-height:500px;display:flex;align-items:center;justify-content:center}.btn{border:none;border-radius:6px;padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent-color);color:#fff}.btn.primary:hover:not(:disabled){background:var(--accent-hover)}.btn.secondary{background:transparent;border:1px solid var(--border-color);color:var(--text-primary)}.btn.secondary:hover:not(:disabled){background:#f2f2f2;border-color:#c7c7c7}.btn.icon{background:transparent;font-size:18px;padding:4px 8px;color:var(--text-primary)}.btn.icon:hover:not(:disabled){background:#f2f2f2;border-radius:4px}.btn.danger{background:transparent;border:1px solid var(--danger-color);color:var(--danger-color)}.btn.danger:hover:not(:disabled){background:var(--danger-color);color:#fff}.full-width{width:100%;margin-bottom:8px}.panel-section{margin-bottom:24px}.panel-section h3{font-size:12px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px;letter-spacing:.5px}.empty-state{text-align:center;color:var(--text-secondary);margin-top:40px;font-size:13px}.empty-state-large{color:var(--text-secondary);font-size:16px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d2d2d7;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#86868b}.thumbnail-item{background:#fff;border:2px solid transparent;border-radius:6px;padding:8px;cursor:pointer;position:relative;transition:all .2s}.thumbnail-item:hover{background:#fafafa}.thumbnail-item.selected{border-color:var(--accent-color);background:#eef7ff}.thumbnail-item .page-number{font-size:11px;color:var(--text-secondary);margin-bottom:4px;text-align:center}.thumb-canvas-wrapper{display:flex;justify-content:center;align-items:center;min-height:100px;pointer-events:none}.thumb-canvas-wrapper canvas{max-width:100%;height:auto;box-shadow:0 1px 3px #0000001a}.sortable-ghost{opacity:.4;background:#ccc}