.toolbar{align-items:center;background:#fff;border:1px solid #e8e8e8;display:flex;justify-content:space-around}.toolbar :where(button,input[type=color],input[type=range]){-webkit-tap-highlight-color:transparent;touch-action:manipulation}.toolbar :where(button,input[type=color],input[type=range]):focus-visible{outline:2px solid #1d4ed8e6;outline-offset:2px}.toolbar-section{align-items:center;display:flex;gap:8px}.toolbar-divider{background:#e8e8e8;height:32px;margin:0 4px;width:1px}.tool-group{background:#f8f9fa;border-radius:8px;gap:4px}.tool-button,.tool-group{align-items:center;border:1px solid #e8e8e8;display:flex}.tool-button{background:#fff;border-radius:6px;color:#666;cursor:pointer;height:44px;justify-content:center;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;width:44px}.tool-button:hover:not(:disabled){background:#f0f0f0;border-color:#d9d9d9;box-shadow:0 2px 8px #0000001a;color:#333;transform:translateY(-1px)}.tool-button.active{background:#1890ff;border-color:#1890ff;box-shadow:0 2px 8px #1890ff4d;color:#fff}.tool-button:disabled{cursor:not-allowed;opacity:.4}.brush-controls{background:#f8f9fa;border:1px solid #e8e8e8;border-radius:8px;gap:10px;padding:0 10px}.brush-controls,.control-group{align-items:center;display:flex}.control-group{gap:8px}.control-icon{color:#666}.color-picker{background:#0000;border:1px solid #d9d9d9;border-radius:6px;cursor:pointer;height:44px;overflow:hidden;width:44px}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:none;border-radius:4px}.width-slider{-webkit-appearance:none;appearance:none;background:#e8e8e8;border-radius:2px;cursor:pointer;height:4px;outline:none;width:80px}.width-slider::-webkit-slider-thumb{-webkit-appearance:none;background:#1890ff;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:pointer;height:16px;width:16px}.width-slider::-moz-range-thumb{background:#1890ff;border:none;border-radius:50%;box-shadow:0 2px 4px #0003;cursor:pointer;height:16px;width:16px}.width-value{color:#666;font-size:12px;font-weight:500;min-width:32px;text-align:center}.action-group{background:#f8f9fa;border-radius:8px;gap:4px;padding:4px}.action-button,.action-group{align-items:center;border:1px solid #e8e8e8;display:flex}.action-button{background:#fff;border-radius:6px;color:#666;cursor:pointer;height:44px;justify-content:center;transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;width:44px}.action-button:hover:not(:disabled){background:#f0f0f0;border-color:#d9d9d9;box-shadow:0 2px 8px #0000001a;color:#333;transform:translateY(-1px)}.action-button:disabled{cursor:not-allowed;opacity:.4}.clear-button:hover:not(:disabled){background:#ff4d4f;border-color:#ff4d4f;color:#fff}.export-button:hover:not(:disabled){background:#52c41a;border-color:#52c41a;color:#fff}.zoom-controls{background:#f8f9fa;border:1px solid #e8e8e8;border-radius:8px;gap:4px}.zoom-button,.zoom-controls{align-items:center;display:flex}.zoom-button{background:#0000;border:none;border-radius:4px;color:#333;cursor:pointer;height:44px;justify-content:center;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease;width:44px}.zoom-button:hover{background:#f5f5f5}.zoom-ratio{color:#666;font-size:12px;min-width:40px;text-align:center}@media (max-width:768px){.toolbar{flex-wrap:wrap;gap:8px}.toolbar-section{gap:4px}.toolbar-divider{display:none}.brush-controls{gap:8px}.width-slider{width:60px}}@media (prefers-reduced-motion:reduce){.action-button,.tool-button,.zoom-button{transition:none}.action-button:hover:not(:disabled),.tool-button:hover:not(:disabled){transform:none}}.image-annotation{display:flex;flex-direction:column;height:100%;.image-container{border:1px solid #eee;display:inline-block;flex:1 1;position:relative;canvas{cursor:crosshair;display:block}}.text-input{word-wrap:break-word;background:#0000;border:1px dashed #c1c1c1;font-size:16px;outline:none;overflow:hidden;padding:4px;position:absolute;resize:none;white-space:pre-wrap;z-index:10}}*,:after,:before{box-sizing:border-box}body{background:radial-gradient(circle at 0 0,#e0f2fe 0,#0000 50%),radial-gradient(circle at 100% 100%,#fef3c7 0,#0000 50%),#f5f5f7;color:#0f172a;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;margin:0;min-height:100vh;padding:24px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #1d4ed8e6;outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:after,:before{scroll-behavior:auto!important}}code{font-family:SFMono-Regular,ui-monospace,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.app-root{gap:24px;margin:0 auto;max-width:1600px;min-height:calc(100vh - 48px)}.app-header,.app-root{display:flex;flex-direction:column}.app-header{gap:12px}.app-header-title{align-items:center;display:flex;gap:10px}.github-link{align-items:center;border-radius:8px;color:#374151;display:inline-flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.github-link:hover{background:#0000000d;color:#111827}.github-link svg{height:24px;width:24px}.app-badge{align-items:center;background:#3b82f61f;border:1px solid #3b82f64d;border-radius:999px;color:#1d4ed8;display:inline-flex;font-size:11px;justify-content:center;letter-spacing:.08em;padding:3px 8px;text-transform:uppercase}.app-title{font-size:22px;font-weight:650;letter-spacing:.02em;margin:0}.app-subtitle{color:#4b5563;font-size:14px;line-height:1.6;margin:0;max-width:640px}.app-main{align-items:stretch;display:flex;gap:20px}.annotation-panel,.info-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffe6;border:1px solid #94a3b840;border-radius:18px;box-shadow:0 18px 45px #0f172a0f,0 0 0 1px #fff6;display:flex;flex-direction:column;gap:14px;padding:18px 18px 16px}.annotation-panel{flex:2 1;min-height:650px}.info-panel{flex:1.2 1;min-width:0}.annotation-panel-header{align-items:flex-start;display:flex;gap:12px;justify-content:space-between}.panel-actions{align-items:center;display:flex;gap:12px}.upload-btn{align-items:center;background:#f0f9ff;border:1px solid #bae6fd;border-radius:999px;color:#0369a1;cursor:pointer;display:inline-flex;font-size:13px;font-weight:500;gap:6px;padding:8px 14px;transition:all .2s ease}.upload-btn:hover{background:#e0f2fe;border-color:#7dd3fc}.panel-title{color:#111827;font-size:16px;font-weight:600;margin:0}.panel-description{color:#6b7280;font-size:13px;line-height:1.5;margin:5px 0 0}.panel-meta{align-items:center;background:#eff6ff;border:1px solid #bfdbfe;border-radius:999px;display:inline-flex;flex-direction:column;gap:2px;padding:6px 10px}.meta-label{color:#1d4ed8;font-size:14px;letter-spacing:.08em;text-transform:uppercase}.meta-value{color:#1d4ed8;font-size:18px;font-weight:650}.annotation-canvas-wrapper{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;display:flex;flex:1 1;margin-top:8px;padding:10px}.annotation-canvas{height:100%;width:100%}.info-panel-body{display:flex;flex:1 1;flex-direction:column;gap:16px;min-height:0}.info-section{display:flex;flex-direction:column;gap:8px}.info-section-secondary{border-top:1px dashed #e5e7eb;padding-top:10px}.info-section-title{color:#111827;font-size:13px;font-weight:600;margin:0}.info-section-description{color:#6b7280;font-size:12px;margin:0}.annotation-json{background:#020617;border-radius:10px;box-shadow:inset 0 0 0 1px #94a3b859;color:#e5e7eb;font-size:11px;line-height:1.5;max-height:260px;overflow:auto;padding:10px;position:relative}.annotation-json pre{margin:0;white-space:pre}.tips-list{color:#4b5563;font-size:12px;line-height:1.55;margin:4px 0 0;padding-left:18px}.tips-list li+li{margin-top:4px}@media (max-width:960px){body{padding:16px}.app-root{min-height:auto}.app-main{flex-direction:column}.annotation-panel,.info-panel{min-height:auto}}