@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-color:#111;--header-bg:#1e1e1e;--panel-bg:#1e1e1ee6;--panel-border:#333;--text-primary:#f8fafc;--text-secondary:#94a3b8;--accent-color:#3b82f6;--accent-hover:#60a5fa;--danger-color:#ef4444}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);touch-action:none;width:100vw;height:100vh;font-family:Inter,sans-serif;overflow:hidden}#root{width:100%;height:100%;display:flex;position:relative}.canvas-crosshair,.canvas-crosshair canvas{cursor:crosshair!important}body.hover-pointer,body.hover-pointer .canvas-crosshair,body.hover-pointer .canvas-crosshair canvas{cursor:pointer!important}.custom-slider{appearance:none;background:0 0}.custom-slider:focus{outline:none}.custom-slider::-webkit-slider-runnable-track{cursor:pointer;background:#ffffff4d;border-radius:2px;width:100%;height:4px}.custom-slider::-moz-range-track{cursor:pointer;background:#ffffff4d;border-radius:2px;width:100%;height:4px}.custom-slider::-webkit-slider-thumb{cursor:pointer;-webkit-appearance:none;background:#3b82f6;border-radius:50%;width:16px;height:16px;margin-top:-6px;box-shadow:0 0 4px #00000080}.custom-slider::-moz-range-thumb{cursor:pointer;background:#3b82f6;border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 0 4px #00000080}.app-container{flex-direction:column;width:100vw;height:100vh;display:flex}.top-header{background:var(--header-bg);border-bottom:1px solid var(--panel-border);z-index:100;justify-content:space-between;align-items:center;height:48px;padding:0 16px;display:flex}.header-left,.header-center,.header-right{align-items:center;gap:12px;display:flex}.header-center{background:#2a2a2a;border-radius:6px;padding:2px}.project-title{color:var(--text-secondary);font-size:.9rem;font-weight:500}.icon-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:6px;transition:all .2s;display:flex}.icon-btn:hover{color:var(--text-primary);background:#ffffff1a}.tool-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:8px;transition:all .2s;display:flex}.tool-btn:hover{color:var(--text-primary)}.tool-btn.active{background:var(--accent-color);color:#fff}.divider{background:var(--panel-border);width:1px;height:20px}.badge-trial{color:var(--text-secondary);background:#ffffff1a;border-radius:4px;margin-left:8px;padding:4px 8px;font-size:.75rem}.main-content{flex:1;display:flex;position:relative;overflow:hidden}.sidebar-container{z-index:20;height:100%;transition:transform .3s cubic-bezier(.4,0,.2,1);position:absolute;top:0;left:0;transform:translate(-100%)}.sidebar-container.open{transform:translate(0)}.sidebar{background:var(--panel-bg);border-right:1px solid var(--panel-border);flex-direction:column;width:360px;height:100%;padding:24px;display:flex;position:relative}.sidebar h1{letter-spacing:-.02em;margin-bottom:8px;font-size:1.5rem;font-weight:600}.sidebar p.subtitle{color:var(--text-secondary);margin-bottom:24px;font-size:.875rem}.annotation-list{flex-direction:column;flex:1;gap:12px;padding-right:8px;display:flex;overflow-y:auto}.annotation-list::-webkit-scrollbar{width:4px}.annotation-list::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:4px}.annotation-card{border:1px solid var(--panel-border);cursor:pointer;background:#ffffff08;border-radius:8px;padding:16px;transition:all .2s}.annotation-card:hover{background:#ffffff14;transform:translateY(-2px)}.annotation-card h3{margin-bottom:4px;font-size:1rem;font-weight:500}.annotation-card p.coords{color:var(--text-secondary);font-family:monospace;font-size:.75rem}.canvas-container{z-index:1;flex:1;height:100%;position:relative}.sidebar-container.pinned{transform:translate(0)}.loading-overlay{background:var(--bg-color);z-index:20;width:100%;height:100%;color:var(--text-secondary);justify-content:center;align-items:center;font-size:1.25rem;display:flex;position:absolute;top:0;left:0}.spinner{border:3px solid #ffffff1a;border-top:3px solid var(--accent-color);border-radius:50%;width:24px;height:24px;margin-right:12px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.header{align-items:center;margin-bottom:24px;display:flex}.logo-icon{width:24px;height:24px;color:var(--accent-color);margin-right:8px}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:99999999;background:#0009;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal{border:1px solid var(--panel-border);background:#1e293b;border-radius:12px;width:400px;max-width:90%;padding:24px;animation:.3s cubic-bezier(.16,1,.3,1) modalIn;box-shadow:0 25px 50px -12px #00000080}@keyframes modalIn{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.modal h2{margin-bottom:16px;font-size:1.25rem;font-weight:600}.modal input{border:1px solid var(--panel-border);color:#fff;background:#0003;border-radius:6px;width:100%;margin-bottom:20px;padding:12px;font-family:inherit;font-size:1rem}.modal input:focus{border-color:var(--accent-color);outline:none;box-shadow:0 0 0 2px #3b82f633}.modal-actions{justify-content:flex-end;gap:12px;display:flex}.btn{cursor:pointer;border:none;border-radius:6px;padding:8px 16px;font-family:inherit;font-size:.875rem;font-weight:500;transition:background .2s}.btn-cancel{color:var(--text-secondary);background:0 0}.btn-cancel:hover{color:var(--text-primary);background:#ffffff0d}.btn-primary{background:var(--accent-color);color:#fff}.btn-primary:hover{background:var(--accent-hover)}