body {
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    font-size: 15px;
    touch-action: none; /* 禁止浏览器默认手势 */
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.animate-fade-in { animation: fadeIn 0.25s ease-out; }
.animate-slide-in { animation: slideIn 0.25s ease-out; }
.user-cursor {
    position: absolute; left: 0; top: 0; pointer-events: none; z-index: 60; will-change: transform;
}
.cursor-label {
    background: var(--user-color); color: white; padding: 2px 10px; border-radius: 14px;
    font-size: 13px; white-space: nowrap; margin-top: 2px; box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.tool-btn { transition: all 0.15s; }
.tool-btn.active { background: #3b82f6; color: white; box-shadow: 0 4px 8px -2px rgba(59,130,246,0.3); }
.tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.color-swatch {
    width: 32px; height: 32px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: 0.1s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: #1e293b; box-shadow: 0 0 0 3px white, 0 0 0 5px #3b82f6; }
.chat-message { animation: fadeIn 0.2s; }
.modal-backdrop { backdrop-filter: blur(8px); }
.dot-bg {
    background-image: radial-gradient(#e2e8f0 1.5px, transparent 1.5px); background-size: 28px 28px;
}
.admin-badge { background: linear-gradient(135deg, #f59e0b, #d97706); }
#canvasContainer { overflow: auto; cursor: crosshair; background-color: #ffffff; }
#mainCanvas, #tempCanvas, #overlayCanvas { display: block; transform-origin: 0 0; }
#tempCanvas, #overlayCanvas { pointer-events: none; }
.fill-toggle-btn.active { background: #3b82f6; color: white; }
.toolbar-collapsed { width: 48px !important; padding-left: 4px !important; padding-right: 4px !important; }
.toolbar-collapsed .toolbar-content { display: none; }
.connection-status { display: flex; align-items: center; gap: 4px; }
.connection-dot { width: 8px; height: 8px; border-radius: 50%; }
.connection-dot.connected { background: #10b981; }
.connection-dot.disconnected { background: #ef4444; }
.connection-dot.connecting { background: #f59e0b; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }
.latency-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.latency-dot.excellent { background: #10b981; }
.latency-dot.good { background: #f59e0b; }
.latency-dot.poor { background: #ef4444; }
.latency-dot.idle { background: #94a3b8; }
.undo-redo-btn { transition: all 0.15s; border-radius: 8px; }
.undo-redo-btn:hover { background: #f3f4f6; }
.undo-redo-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.system-messages-area {
    max-height: 140px;
    min-height: 0;
    scrollbar-width: thin;
}
.system-messages-area::-webkit-scrollbar { width: 4px; }
.system-messages-area::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.system-msg-item { animation: fadeIn 0.2s; }
.auth-tab-active { background: white; color: #1f2937; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.btn-primary { background: linear-gradient(to right, #3b82f6, #8b5cf6); }
.btn-primary:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.pwd-toggle-btn { z-index: 10; background: transparent; border: none; cursor: pointer; }
.pwd-toggle-btn:hover { color: #374151 !important; }
input[type="text"].pwd-visible { letter-spacing: normal; }
.otp-input { transition: border-color 0.15s, box-shadow 0.15s; caret-color: #3b82f6; }
.otp-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.2); }
.otp-input.filled { border-color: #10b981; background: #f0fdf4; }

/* 移动端适配 */
@media (max-width: 768px) {
    body { font-size: 14px; }
    .toolbar-desktop-only { display: none; }
    #toolbar {
        width: 44px;
        left: 4px;
        top: 60px;
        padding: 8px 2px;
        border-radius: 12px;
    }
    .tool-btn, .fill-toggle-btn, .undo-redo-btn {
        width: 36px !important;
        height: 36px !important;
    }
    .color-swatch {
        width: 28px;
        height: 28px;
    }
    #chatPanel {
        width: calc(100vw - 24px);
        right: 12px;
        top: 60px;
        bottom: 12px;
        border-radius: 16px;
    }
    #chatToggleBtnFloat {
        width: 44px;
        height: 44px;
        top: 60px;
        right: 8px;
    }
    .top-bar-text { font-size: 13px; }
    #roomDisplay { font-size: 12px; }
    #copyRoomBtn { font-size: 11px; padding: 4px 8px; }
    #latencyDisplay { font-size: 11px; }
    #exportCanvasBtn { padding: 6px 12px; font-size: 13px; }
    .modal-content { width: 90%; padding: 20px; }
}

@media (max-width: 480px) {
    #toolbar {
        width: 40px;
        left: 2px;
    }
    .tool-btn, .fill-toggle-btn, .undo-redo-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .color-swatch {
        width: 24px;
        height: 24px;
    }
}