*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5;overflow:hidden;height:100%;margin:0;padding:0}.app{position:relative;height:100vh;width:100vw}.sidebar{width:280px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column}.sidebar-header{padding:20px;border-bottom:1px solid #e0e0e0;position:relative}.sidebar-header h2{margin-bottom:4px;color:#333}.sidebar-header p{color:#666;font-size:14px}.upload-area{margin:20px;padding:20px;border:2px dashed #ccc;border-radius:8px;text-align:center;cursor:pointer;transition:all .3s;position:relative}.upload-area:hover{border-color:#007bff;background:#f8f9fa}.upload-area.dragover{border-color:#007bff;background:#e3f2fd}.upload-area.paste-hint{border-color:#28a745;background:#d4edda}.upload-area input[type=file]{display:none}.image-list{flex:1;overflow-y:auto;padding:10px}.image-item{display:flex;align-items:center;padding:10px;margin-bottom:8px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;cursor:move;transition:all .2s;position:relative}.image-item:hover{box-shadow:0 2px 8px #0000001a}.image-item img{width:40px;height:40px;object-fit:cover;border-radius:4px;margin-right:12px}.image-item-info{flex:1;min-width:0}.image-item-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-item-size{color:#666;font-size:12px}.image-item-status{color:#28a745;font-size:11px;font-weight:500;margin-top:2px}.image-item.on-canvas{background:#f0f8ff;border-color:#007bff}.image-item.on-canvas:hover{background:#e3f2fd}.canvas-container{flex:1;position:relative;overflow:hidden;min-width:0}.canvas{position:relative;background:#fff;background-image:linear-gradient(0deg,transparent 24%,rgba(0,0,0,.05) 25%,rgba(0,0,0,.05) 26%,transparent 27%,transparent 74%,rgba(0,0,0,.05) 75%,rgba(0,0,0,.05) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(0,0,0,.05) 25%,rgba(0,0,0,.05) 26%,transparent 27%,transparent 74%,rgba(0,0,0,.05) 75%,rgba(0,0,0,.05) 76%,transparent 77%,transparent);background-size:50px 50px}.canvas-image{position:absolute;cursor:move;border:2px solid transparent;border-radius:4px;transition:border-color .2s;-webkit-user-select:none;user-select:none}.canvas-image:hover{border-color:#007bff}.canvas-image.selected{border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.canvas-image img{width:100%;height:100%;object-fit:contain;pointer-events:none;display:block}.resize-handle{position:absolute;width:10px;height:10px;background:#007bff;border:2px solid white;border-radius:50%;cursor:nwse-resize}.resize-handle.se{bottom:-5px;right:-5px}.toolbar{position:absolute;top:20px;right:20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a;padding:10px;display:flex;gap:10px;z-index:10}.btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#545b62}.loading{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #007bff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.hamburger-btn{position:fixed;top:20px;left:20px;z-index:1001;width:40px;height:40px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a;transition:all .2s}.hamburger-btn:hover{background:#f8f9fa;box-shadow:0 4px 12px #00000026}.close-sidebar-btn{position:absolute;top:20px;right:20px;width:30px;height:30px;background:transparent;border:none;border-radius:4px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s}.close-sidebar-btn:hover{background:#f0f0f0;color:#333}.dark-mode-section{padding:0 20px 20px;border-bottom:1px solid #e0e0e0}.dark-mode-toggle{width:100%;padding:12px 16px;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}.dark-mode-toggle:hover{background:#e9ecef;border-color:#007bff}.sidebar{position:fixed;top:0;left:0;width:280px;height:100vh;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;transition:transform .3s ease;z-index:1000;box-shadow:2px 0 10px #0000001a}.sidebar.closed{transform:translate(-100%)}.delete-btn{position:absolute;top:8px;left:8px;width:20px;height:20px;background:#dc3545;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s;z-index:10}.image-item:hover .delete-btn{opacity:1}.delete-btn:hover{background:#c82333;transform:scale(1.1)}.image-list-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.image-list-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e0e0e0;background:#f8f9fa}.image-list-header h3{margin:0;font-size:14px;font-weight:600;color:#333}.image-list-controls{display:flex;gap:8px;align-items:center}.sort-btn{padding:4px 8px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;color:#666;transition:all .2s;white-space:nowrap}.sort-btn:hover{background:#f0f0f0;border-color:#007bff;color:#007bff}.refresh-btn{width:28px;height:28px;background:#fff;border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .2s}.refresh-btn:hover{background:#f0f0f0;border-color:#007bff;transform:rotate(90deg)}.image-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column}body.dark-mode{background:#1a1a1a;color:#e0e0e0}body.dark-mode .sidebar{background:#2d2d2d;border-right-color:#404040}body.dark-mode .sidebar-header h2{color:#e0e0e0}body.dark-mode .sidebar-header p{color:#b0b0b0}body.dark-mode .upload-area{border-color:#404040;background:#2d2d2d;color:#e0e0e0}body.dark-mode .upload-area:hover{border-color:#007bff;background:#3a3a3a}body.dark-mode .upload-area.dragover{border-color:#007bff;background:#1e3a5f}body.dark-mode .upload-area.paste-hint{border-color:#28a745;background:#1e3a2f}body.dark-mode .image-item{background:#2d2d2d;border-color:#404040;color:#e0e0e0}body.dark-mode .image-item:hover{box-shadow:0 2px 8px #0000004d}body.dark-mode .image-item.on-canvas{background:#1e3a5f;border-color:#007bff}body.dark-mode .image-item.on-canvas:hover{background:#2a4a7f}body.dark-mode .image-item-size{color:#b0b0b0}body.dark-mode .canvas{background:#2d2d2d;background-image:linear-gradient(0deg,transparent 24%,rgba(255,255,255,.05) 25%,rgba(255,255,255,.05) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.05) 75%,rgba(255,255,255,.05) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(255,255,255,.05) 25%,rgba(255,255,255,.05) 26%,transparent 27%,transparent 74%,rgba(255,255,255,.05) 75%,rgba(255,255,255,.05) 76%,transparent 77%,transparent)}body.dark-mode .toolbar{background:#2d2d2d;border:1px solid #404040}body.dark-mode .hamburger-btn{background:#2d2d2d;border-color:#404040;color:#e0e0e0}body.dark-mode .hamburger-btn:hover{background:#3a3a3a}body.dark-mode .close-sidebar-btn{color:#b0b0b0}body.dark-mode .close-sidebar-btn:hover{background:#404040;color:#e0e0e0}body.dark-mode .dark-mode-section{border-bottom-color:#404040}body.dark-mode .dark-mode-toggle{background:#3a3a3a;border-color:#404040;color:#e0e0e0}body.dark-mode .dark-mode-toggle:hover{background:#4a4a4a;border-color:#007bff}body.dark-mode .image-list-header{background:#2d2d2d;border-bottom-color:#404040}body.dark-mode .image-list-header h3{color:#e0e0e0}body.dark-mode .refresh-btn{background:#3a3a3a;border-color:#404040;color:#e0e0e0}body.dark-mode .refresh-btn:hover{background:#4a4a4a;border-color:#007bff}body.dark-mode .sort-btn{background:#3a3a3a;border-color:#404040;color:#b0b0b0}body.dark-mode .sort-btn:hover{background:#4a4a4a;border-color:#007bff;color:#007bff}.status-indicator{position:fixed;bottom:20px;right:20px;z-index:1000;cursor:pointer;transition:all .2s ease}.status-indicator:hover{transform:scale(1.1)}.status-dot{width:12px;height:12px;border-radius:50%;background:#28a745;box-shadow:0 0 0 2px #28a74533;transition:all .3s ease;animation:pulse 2s infinite}.status-dot.online{background:#28a745;box-shadow:0 0 0 2px #28a74533}.status-dot.sleep{background:#6c757d;box-shadow:0 0 0 2px #6c757d33;animation:none}@keyframes pulse{0%{box-shadow:0 0 0 2px #28a74533}50%{box-shadow:0 0 0 4px #28a7451a}to{box-shadow:0 0 0 2px #28a74533}}body.dark-mode .status-dot.online{background:#28a745;box-shadow:0 0 0 2px #28a7454d}body.dark-mode .status-dot.sleep{background:#6c757d;box-shadow:0 0 0 2px #6c757d4d}