.white-board[data-v-0ccef5e2]{background-color:#fff;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw}.white-board.grid-bg[data-v-0ccef5e2]{background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 0),linear-gradient(-45deg,#f0f0f0 25%,transparent 0),linear-gradient(45deg,transparent 75%,#f0f0f0 0),linear-gradient(-45deg,transparent 75%,#f0f0f0 0);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.white-board.dark-bg[data-v-0ccef5e2]{background-color:#1a1a1a}.white-board.dark-bg.grid-bg[data-v-0ccef5e2]{background-image:linear-gradient(45deg,#2a2a2a 25%,transparent 0),linear-gradient(-45deg,#2a2a2a 25%,transparent 0),linear-gradient(45deg,transparent 75%,#2a2a2a 0),linear-gradient(-45deg,transparent 75%,#2a2a2a 0)}.canvas[data-v-0ccef5e2]{cursor:crosshair;display:block;height:100%;image-rendering:pixelated;image-rendering:optimizespeed;touch-action:none;width:100%}.eraser-cursor[data-v-0ccef5e2]{border:2px solid #f44;border-radius:50%;box-shadow:0 0 0 1px #ffffff80;pointer-events:none;position:fixed;transform:translate(-50%,-50%);z-index:999}.dark-bg .eraser-cursor[data-v-0ccef5e2]{border-color:#f66;box-shadow:0 0 0 1px #00000080}.toolbar[data-v-0ccef5e2]{bottom:20px;left:50%;position:fixed;transform:translate(-50%);z-index:1000}.toolbar-content[data-v-0ccef5e2]{align-items:center;background-color:#fff;border-radius:8px;box-shadow:0 2px 12px #00000026;display:inline-flex;gap:5px;padding:8px 12px}.dark .toolbar-content[data-v-0ccef5e2]{background-color:#2d2d2d;box-shadow:0 2px 12px #00000080}.toolbar-divider[data-v-0ccef5e2]{background-color:#e4e7ed;height:24px;margin:0 5px;width:1px}.dark .toolbar-divider[data-v-0ccef5e2]{background-color:#4c4d4f}.btn[data-v-0ccef5e2]{align-items:center;border-radius:4px;color:#606266;cursor:pointer;display:inline-flex;height:36px;justify-content:center;opacity:.6;position:relative;transition:all .3s;width:36px}.dark .btn[data-v-0ccef5e2]{color:#c0c4cc}.btn[data-v-0ccef5e2]:hover:not(.disabled){background-color:#f5f7fa;opacity:1}.dark .btn[data-v-0ccef5e2]:hover:not(.disabled){background-color:#3a3a3a}.btn.active[data-v-0ccef5e2]{color:#fff;opacity:1}.btn.active[data-v-0ccef5e2],.dark .btn.active[data-v-0ccef5e2]{background-color:#00dc82}.btn.disabled[data-v-0ccef5e2]{cursor:not-allowed;opacity:.3}.pen-size[data-v-0ccef5e2]{color:#909399;font-size:10px;font-weight:700;position:absolute;right:2px;top:2px}.btn.active .pen-size[data-v-0ccef5e2]{color:#fff}.color-btn[data-v-0ccef5e2]{position:relative}.color-indicator[data-v-0ccef5e2]{border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #0000001a,inset 0 0 0 1px #0000001a;height:24px;transition:all .3s;width:24px}.dark .color-indicator[data-v-0ccef5e2]{border-color:#2d2d2d}.color-btn:hover .color-indicator[data-v-0ccef5e2]{box-shadow:0 2px 8px #0003,inset 0 0 0 1px #0003;transform:scale(1.1)}.size-text[data-v-0ccef5e2]{color:#606266;font-size:14px;font-weight:700}.dark .size-text[data-v-0ccef5e2]{color:#c0c4cc}.settings-box[data-v-0ccef5e2]{max-height:500px;overflow-y:auto;padding:15px}.setting-section[data-v-0ccef5e2]{margin-bottom:20px}.setting-section[data-v-0ccef5e2]:last-child{margin-bottom:0}.section-label[data-v-0ccef5e2]{color:#606266;font-size:14px;font-weight:500;margin-bottom:12px}.dark .section-label[data-v-0ccef5e2]{color:#c0c4cc}.color-list[data-v-0ccef5e2]{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}.color-item[data-v-0ccef5e2]{aspect-ratio:1;cursor:pointer;width:calc(20% - 8px)}.color-preview[data-v-0ccef5e2]{border:2px solid #dcdfe6;border-radius:50%;height:100%;transition:all .3s;width:100%}.dark .color-preview[data-v-0ccef5e2]{border-color:#4c4d4f}.color-preview[data-v-0ccef5e2]:hover{transform:scale(1.05)}.color-preview.active[data-v-0ccef5e2],.dark .color-preview.active[data-v-0ccef5e2]{box-shadow:0 0 0 3px #00dc82}.size-box[data-v-0ccef5e2]{padding:15px}.size-label[data-v-0ccef5e2]{color:#606266;font-size:14px;font-weight:500;margin-bottom:12px}.dark .size-label[data-v-0ccef5e2]{color:#c0c4cc}.bg-radio-group[data-v-0ccef5e2]{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}[data-v-0ccef5e2] .bg-radio-group .el-radio{margin-right:0}.help-content[data-v-0ccef5e2]{padding:0}.help-section[data-v-0ccef5e2]{margin-bottom:20px}.help-title[data-v-0ccef5e2]{border-bottom:2px solid #00dc82;color:#303133;font-size:16px;font-weight:700;margin-bottom:12px;padding-bottom:8px}.dark .help-title[data-v-0ccef5e2]{color:#e5e5e5}.help-item[data-v-0ccef5e2]{align-items:center;border-bottom:1px solid #f0f0f0;display:flex;gap:12px;padding:12px 0}.dark .help-item[data-v-0ccef5e2]{border-bottom-color:#3a3a3a}.help-item[data-v-0ccef5e2]:last-child{border-bottom:none}.help-item span[data-v-0ccef5e2]{color:#606266;font-size:14px}.dark .help-item span[data-v-0ccef5e2]{color:#c0c4cc}@media(max-width:767px){.toolbar[data-v-0ccef5e2]{bottom:10px}.toolbar-content[data-v-0ccef5e2]{flex-wrap:wrap;gap:3px;justify-content:center;max-width:95vw;padding:6px 8px}.btn[data-v-0ccef5e2]{height:32px;width:32px}.toolbar-divider[data-v-0ccef5e2]{display:none}.color-box[data-v-0ccef5e2]{padding:8px}.color-item[data-v-0ccef5e2]{height:28px;width:28px}}