.toolbar{background:#fff;border:1px solid #e8e8e8;gap:0;padding:8px 16px}.toolbar,.toolbar-section{align-items:center;display:flex}.toolbar-section{gap:8px}.toolbar-divider{background:#e8e8e8;height:32px;margin:0 8px;width:1px}.tool-group{background:#f8f9fa;border-radius:8px;gap:4px;padding: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:36px;justify-content:center;transition:all .2s ease;width:36px}.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:12px;padding:8px 12px}.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:28px;overflow:hidden;width:28px}.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:36px;justify-content:center;transition:all .2s ease;width:36px}.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}@media (max-width:768px){.toolbar{flex-wrap:wrap;gap:8px;padding:8px 12px}.toolbar-section{gap:4px}.toolbar-divider{display:none}.brush-controls{gap:8px;padding:6px 8px}.width-slider{width:60px}}.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}}body{padding:20px}.container{display:flex;height:600px;.annotation-info{border:1px solid #eee;flex:1 1;margin-left:20px;overflow:auto;padding-left:10px}}