.app{width:100vw;height:100vh;display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.login-container h1{margin-bottom:2rem;font-size:2.5rem}.connection-status{margin-bottom:1rem;font-weight:700}.login-form{background:rgba(255,255,255,.1);padding:2rem;border-radius:10px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.login-form input{display:block;width:300px;padding:12px;margin-bottom:1rem;border:none;border-radius:5px;font-size:16px}.room-actions{display:flex;flex-direction:column;gap:1rem}.join-room{display:flex;gap:10px}.join-room input{margin-bottom:0;flex:1}button{padding:12px 20px;border:none;border-radius:5px;background:#4CAF50;color:#fff;font-size:16px;cursor:pointer;transition:background .3s}button:hover{background:#45a049}button:disabled{background:#ccc;cursor:not-allowed}.header{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#f8f9fa;border-bottom:1px solid #dee2e6;min-height:50px}.header h1{margin:0;color:#333;font-size:1.2rem}.room-info{display:flex;align-items:center;gap:.5rem;font-size:.9rem}.room-info span{color:#666}.toolbar{padding:1rem 2rem;background:#fff;border-bottom:1px solid #dee2e6}.upload-button{display:inline-block;padding:10px 20px;background:#007bff;color:#fff;border-radius:5px;cursor:pointer;transition:background .3s}.upload-button:hover{background:#0056b3}.workspace{flex:1;overflow:auto;position:relative}.pdf-container{position:relative;display:inline-block;cursor:crosshair}.pdf-container.eraser-stroke{cursor:cell}.pdf-container .pdf-controls{cursor:default;position:relative;z-index:10;pointer-events:auto}.pdf-container .pdf-controls *{cursor:pointer;pointer-events:auto}.pdf-container canvas[data-drawing-canvas]{cursor:inherit;pointer-events:none}.pdf-container canvas:not([data-drawing-canvas]){cursor:default}.drawing-controls,.drawing-controls *{cursor:default;pointer-events:auto}.pdf-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.5rem;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-bottom:2px solid #dee2e6;box-shadow:0 2px 4px #0000001a}.pdf-controls button{padding:8px 15px;font-size:14px;font-weight:700;border:1px solid #6c757d;background:white;color:#495057;border-radius:6px;cursor:pointer;transition:all .2s ease}.pdf-controls button:hover:not(:disabled){background:#007bff;color:#fff;border-color:#007bff;transform:translateY(-1px)}.pdf-controls button:disabled{opacity:.5;cursor:not-allowed}.page-info{display:flex;flex-direction:column;align-items:center;gap:.5rem}.page-display{font-size:16px;font-weight:700;color:#495057;padding:4px 8px;background:white;border-radius:4px;border:1px solid #dee2e6;min-width:80px;text-align:center}.page-jump{display:flex;gap:4px;align-items:center}.page-input{width:60px;padding:4px 8px;border:1px solid #ced4da;border-radius:4px;text-align:center;font-size:14px}.page-input:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.jump-btn{padding:4px 8px!important;font-size:12px!important;background:#28a745!important;color:#fff!important;border:none!important}.jump-btn:hover{background:#218838!important}.zoom-controls{display:flex;align-items:center;gap:.5rem}.zoom-display{font-size:14px;font-weight:700;color:#495057;min-width:50px;text-align:center}.panel-toggle{position:fixed;top:120px;right:20px;width:50px;height:50px;border-radius:50%;border:none;background:#007bff;color:#fff;font-size:20px;cursor:pointer;box-shadow:0 4px 20px #00000026;z-index:101;transition:all .3s ease}.panel-toggle:hover{background:#0056b3;transform:scale(1.1)}.drawing-controls{position:fixed;top:120px;right:80px;background:white;padding:1rem;border-radius:15px;box-shadow:0 4px 20px #00000026;z-index:100;width:250px;border:1px solid #e0e0e0;transition:all .3s ease}.drawing-controls.hidden{transform:translate(300px);opacity:0;pointer-events:none}.drawing-controls>div{margin-bottom:1.5rem}.drawing-controls>div:last-child{margin-bottom:0}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool-btn{padding:12px;font-size:14px;font-weight:500;background:#f8f9fa;border:2px solid #dee2e6;border-radius:10px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:#333}.tool-btn:hover{background:#e9ecef;transform:translateY(-1px)}.tool-btn.active{background:#007bff;color:#fff;border-color:#007bff;box-shadow:0 2px 8px #007bff4d}.eraser-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px}.eraser-btn{flex:1;padding:8px;font-size:12px;font-weight:500;background:#f8f9fa;border:2px solid #dee2e6;border-radius:8px;cursor:pointer;transition:all .2s ease;color:#333}.eraser-btn:hover{background:#e9ecef;transform:translateY(-1px)}.eraser-btn.active{background:#dc3545;color:#fff;border-color:#dc3545}.color-palette{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;align-items:center}.color-btn{width:35px;height:35px;border:2px solid #ccc;border-radius:50%;cursor:pointer;transition:all .2s ease;padding:0}.color-btn:hover{transform:scale(1.1);box-shadow:0 2px 8px #0003}.color-btn.active{border-color:#007bff;border-width:3px;transform:scale(1.15)}.color-btn:disabled{opacity:.5;cursor:not-allowed}.custom-color{width:35px;height:35px;border:2px solid #ccc;border-radius:50%;cursor:pointer;padding:0;background:none}.brush-width{display:flex;align-items:center;gap:10px}.width-slider{flex:1;height:6px;border-radius:5px;background:#ddd;outline:none;cursor:pointer}.width-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#007bff;cursor:pointer;border:2px solid white;box-shadow:0 2px 4px #0003}.width-display{min-width:40px;text-align:center;font-size:14px;font-weight:700;color:#495057}.actions{display:flex;gap:10px}.action-btn{flex:1;padding:10px 15px;font-size:14px;border-radius:8px;border:1px solid #dc3545;background:white;color:#dc3545;cursor:pointer;transition:all .2s ease}.action-btn:hover{background:#dc3545;color:#fff;transform:translateY(-1px)}.action-btn.clear{border-color:#dc3545;color:#dc3545}.no-pdf{display:flex;align-items:center;justify-content:center;height:100%;color:#666;font-size:1.2rem}.voice-chat{position:fixed;bottom:20px;right:20px;z-index:100}.voice-controls{display:flex;align-items:center;gap:10px;background:white;padding:10px 15px;border-radius:25px;box-shadow:0 4px 20px #00000026;border:1px solid #e0e0e0}.voice-btn{padding:8px 15px;border:none;border-radius:20px;cursor:pointer;font-size:14px;font-weight:700;transition:all .3s ease}.voice-btn.start{background:#28a745;color:#fff}.voice-btn.start:hover{background:#218838;transform:translateY(-1px)}.voice-btn.unmuted{background:#007bff;color:#fff}.voice-btn.muted,.voice-btn.stop{background:#dc3545;color:#fff}.voice-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0003}.voice-status{display:flex;align-items:center;margin-left:10px}.status-indicator{font-size:12px;padding:4px 8px;border-radius:12px;background:#f8f9fa;color:#495057;font-weight:700}.status-indicator.recording{background:#d4edda;color:#155724;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.page-notification{position:fixed;top:20px;left:50%;transform:translate(-50%);background:rgba(0,123,255,.9);color:#fff;padding:10px 20px;border-radius:25px;font-size:14px;font-weight:700;z-index:1000;animation:slideDown .3s ease-out;box-shadow:0 4px 15px #0003}@keyframes slideDown{0%{opacity:0;transform:translate(-50%) translateY(-20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.user-pages-status{position:fixed;top:20px;right:20px;background:white;padding:15px;border-radius:15px;box-shadow:0 4px 20px #00000026;z-index:90;min-width:200px;border:1px solid #e0e0e0}.user-pages-header{font-size:14px;font-weight:700;color:#495057;margin-bottom:10px;text-align:center;border-bottom:1px solid #dee2e6;padding-bottom:8px}.user-pages-list{display:flex;flex-direction:column;gap:8px}.user-page-item{display:flex;justify-content:space-between;align-items:center;gap:10px}.user-name{font-size:12px;color:#666;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-page-btn{padding:4px 8px!important;font-size:11px!important;background:#007bff!important;color:#fff!important;border:none!important;border-radius:4px!important;cursor:pointer;transition:all .2s ease;min-width:60px}.user-page-btn:hover{background:#0056b3!important;transform:translateY(-1px)}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#fff;border-bottom:1px solid #dee2e6;min-height:45px}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:.5rem}.mode-toggle-btn{padding:10px 20px;border:2px solid #007bff;border-radius:8px;background:white;color:#007bff;font-weight:700;cursor:pointer;transition:all .3s ease;font-size:14px}.mode-toggle-btn:hover{background:#007bff;color:#fff;transform:translateY(-1px)}.mode-toggle-btn.whiteboard{border-color:#28a745;color:#28a745}.mode-toggle-btn.whiteboard:hover{background:#28a745;color:#fff}.whiteboard-container{width:100%;height:100%;overflow:auto;background:#f8f9fa}.whiteboard-controls{display:flex;align-items:center;gap:1rem;padding:1rem 2rem;background:white;border-bottom:1px solid #dee2e6;flex-wrap:wrap}.whiteboard-btn{padding:8px 15px;border:1px solid #6c757d;background:white;color:#495057;border-radius:6px;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:700}.whiteboard-btn:hover{background:#007bff;color:#fff;border-color:#007bff;transform:translateY(-1px)}.canvas-size-controls{display:flex;align-items:center;gap:.5rem}.canvas-size-controls label{font-size:14px;font-weight:700;color:#495057}.canvas-size-controls select{padding:5px 10px;border:1px solid #ced4da;border-radius:4px;font-size:14px;background:white}.whiteboard-workspace{padding:2rem;display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 300px)}.whiteboard-canvas-container{box-shadow:0 4px 20px #00000026;border-radius:8px;overflow:hidden}.voice-chat{position:fixed;bottom:20px;right:20px;z-index:1000}.voice-controls{display:flex;align-items:center;gap:10px;background:rgba(0,0,0,.8);padding:10px 15px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.voice-btn{background:none;border:none;font-size:18px;cursor:pointer;padding:8px 12px;border-radius:20px;transition:all .2s ease;color:#fff;display:flex;align-items:center;gap:5px}.voice-btn:hover{background:rgba(255,255,255,.1);transform:scale(1.05)}.voice-btn.start{background:#4CAF50}.voice-btn.start:hover{background:#45a049}.voice-btn.stop{background:#f44336}.voice-btn.stop:hover{background:#da190b}.voice-btn.muted{background:#ff9800}.voice-btn.unmuted{background:#4CAF50}.voice-status{display:flex;align-items:center;gap:10px;color:#fff;font-size:12px}.status-indicator{display:flex;align-items:center;gap:5px}.status-indicator.recording:before{content:"🔴";animation:pulse 1s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.audio-level{display:flex;align-items:center;gap:5px}.level-bar{width:60px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}.level-fill{height:100%;background:linear-gradient(90deg,#4CAF50,#FFC107,#FF5722);transition:width .1s ease;border-radius:2px}.level-text{font-size:10px;color:#ffffffb3;min-width:25px}.history-controls{display:flex;gap:.5rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #dee2e6}.history-btn{padding:8px 12px;border:1px solid #007bff;border-radius:6px;background:white;color:#007bff;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;flex:1}.history-btn:hover:not(:disabled){background:#007bff;color:#fff}.history-btn:disabled{background:#f8f9fa;color:#6c757d;border-color:#dee2e6;cursor:not-allowed;opacity:.6}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5}#root{width:100vw;height:100vh}