*{margin:0;padding:0;box-sizing:border-box}body{margin:0;padding:0;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;overflow:hidden}#root{width:100vw;height:100vh;overflow:hidden}.sidebar{width:260px;height:100%;background:#f9fafb;border-right:1px solid #e5e7eb;display:flex;flex-direction:column;overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .75rem;border-bottom:1px solid #e5e7eb;background:#fff}.sidebar-title{margin:0;font-size:.875rem;font-weight:600;color:#111827;text-transform:uppercase;letter-spacing:.05em}.create-button{display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:.25rem;background:transparent;color:#6b7280;font-size:1.25rem;cursor:pointer;transition:all .15s}.create-button:hover{background:#f3f4f6;color:#111827}.sidebar-content{flex:1;overflow-y:auto;padding:.5rem 0}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.sidebar-content::-webkit-scrollbar-thumb:hover{background:#9ca3af}.document-tree,.document-tree-item{display:flex;flex-direction:column}.document-item{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;margin:0 .5rem;border-radius:.375rem;cursor:pointer;transition:background .1s;font-size:.875rem;color:#374151;position:relative;-webkit-user-select:none;user-select:none}.document-item:hover{background:#f3f4f6}.document-item-active{background:#dbeafe!important;color:#1e40af;font-weight:500}.document-item-folder{font-weight:500}.expand-button{display:flex;align-items:center;justify-content:center;width:1rem;height:1rem;border:none;background:transparent;color:#6b7280;font-size:.625rem;cursor:pointer;transition:transform .15s;padding:0;flex-shrink:0}.expand-button:hover{color:#111827}.document-icon{font-size:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem}.document-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.document-actions{display:flex;gap:.25rem;margin-left:auto}.action-button{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;background:transparent;border-radius:.25rem;font-size:.875rem;cursor:pointer;transition:background .15s;padding:0}.action-button:hover{background:#0000000d}.document-children{display:flex;flex-direction:column}.create-form{display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.375rem}.type-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.type-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;font-size:.875rem;cursor:pointer;transition:all .15s}.type-button:hover{border-color:#3b82f6;background:#f3f4f6}.type-button-active{border-color:#3b82f6;background:#dbeafe;color:#1e40af}.modal-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:none;border-radius:.375rem;font-weight:500;cursor:pointer;transition:all .15s;outline:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-sm{padding:.375rem .75rem;font-size:.875rem}.btn-md{padding:.5rem 1rem;font-size:.875rem}.btn-lg{padding:.625rem 1.25rem;font-size:1rem}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-secondary{background:#6b7280;color:#fff}.btn-secondary:hover:not(:disabled){background:#4b5563}.btn-ghost{background:transparent;color:#374151;border:1px solid #e5e7eb}.btn-ghost:hover:not(:disabled){background:#f3f4f6}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover:not(:disabled){background:#dc2626}.input-wrapper{display:flex;flex-direction:column;gap:.375rem}.input-label{font-size:.875rem;font-weight:500;color:#374151}.input{width:100%;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:.375rem;font-size:.875rem;outline:none;transition:border-color .15s}.input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.input-error{border-color:#ef4444}.input-error:focus{border-color:#ef4444;box-shadow:0 0 0 3px #ef44441a}.input-error-text{font-size:.75rem;color:#ef4444}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:#fff;border-radius:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:slideUp .2s ease-out;max-height:90vh;display:flex;flex-direction:column}@keyframes slideUp{0%{transform:translateY(1rem);opacity:0}to{transform:translateY(0);opacity:1}}.modal-sm{width:100%;max-width:24rem}.modal-md{width:100%;max-width:32rem}.modal-lg{width:100%;max-width:48rem}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e5e7eb}.modal-title{margin:0;font-size:1.25rem;font-weight:600;color:#111827}.modal-close{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:none;background:transparent;color:#6b7280;font-size:1.5rem;cursor:pointer;border-radius:.25rem;transition:background .15s}.modal-close:hover{background:#f3f4f6;color:#111827}.modal-content{padding:1.5rem;overflow-y:auto}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-sm{width:2rem;height:2rem;font-size:.75rem}.avatar-md{width:2.5rem;height:2.5rem;font-size:.875rem}.avatar-lg{width:3rem;height:3rem;font-size:1rem}.avatar-initials{color:#fff;font-weight:600;-webkit-user-select:none;user-select:none}.avatar-image{width:100%;height:100%;object-fit:cover}.whiteboard-container{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}.whiteboard-status{position:absolute;top:1rem;right:1rem;background:#fff;padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 2px 8px #0000001a;z-index:100}.active-users{position:absolute;top:1rem;left:1rem;background:#fff;padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 2px 8px #0000001a;z-index:100;display:flex;align-items:center;gap:.5rem}.user-item{position:relative;display:flex;align-items:center}.user-avatar{width:2rem;height:2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.875rem;border:2px solid white;box-shadow:0 1px 3px #00000026;cursor:pointer;transition:transform .2s;position:relative}.user-avatar:hover{transform:scale(1.1);z-index:10}.owner-badge{position:absolute;top:-6px;right:-6px;font-size:.625rem;font-weight:700;background:#fbbf24;color:#78350f;border-radius:.25rem;padding:.125rem .25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #0000004d;text-transform:uppercase;letter-spacing:.5px}.kick-button{position:absolute;top:-6px;right:-6px;width:18px;height:18px;border-radius:50%;background:#ef4444;color:#fff;border:2px solid white;font-size:.875rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;box-shadow:0 2px 4px #0003;transition:all .2s;opacity:.8}.kick-button:hover{opacity:1;background:#dc2626;transform:scale(1.1)}.user-count{font-size:.75rem;color:#6b7280;font-weight:500;margin-left:.25rem;white-space:nowrap}.whiteboard-toolbar{position:absolute;top:1rem;left:50%;transform:translate(-50%);background:#fff;padding:.75rem 1rem;border-radius:.75rem;box-shadow:0 4px 12px #00000026;display:flex;gap:1rem;align-items:center;z-index:100}.toolbar-section{display:flex;gap:.25rem;align-items:center}.toolbar-divider{width:1px;height:1.875rem;background:#e5e7eb}.toolbar-label{font-size:.75rem;color:#6b7280;margin-right:.25rem}.tool-button{display:flex;align-items:center;justify-content:center;padding:.5rem .75rem;border:2px solid #e5e7eb;background:#fff;border-radius:.375rem;cursor:pointer;font-size:1.125rem;transition:all .2s}.tool-button:hover{background:#f3f4f6}.tool-button-active{border-color:#3b82f6;background:#dbeafe}.color-button{width:1.875rem;height:1.875rem;border:2px solid #e5e7eb;border-radius:50%;cursor:pointer;transition:all .2s}.color-button:hover{transform:scale(1.1)}.color-button-active{border:3px solid #000000;transform:scale(1.1)}.size-button{width:1.875rem;height:1.875rem;border:2px solid #e5e7eb;background:#fff;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.6875rem;transition:all .2s}.size-button:hover{background:#f3f4f6}.size-button-active{border-color:#3b82f6;background:#dbeafe}.width-slider{width:100px;height:4px;border-radius:2px;background:#e5e7eb;outline:none;-webkit-appearance:none;appearance:none;cursor:pointer}.width-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:#3b82f6;cursor:pointer;transition:all .2s}.width-slider::-webkit-slider-thumb:hover{background:#2563eb;transform:scale(1.1)}.width-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#3b82f6;cursor:pointer;border:none;transition:all .2s}.width-slider::-moz-range-thumb:hover{background:#2563eb;transform:scale(1.1)}.whiteboard-canvas{display:block;width:100%;height:100%;cursor:crosshair;background:#fff}.collab-cursor{position:absolute;pointer-events:none;z-index:1000;transform:translate(-2px,-2px);transition:left .15s ease-out,top .15s ease-out;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.cursor-label{position:absolute;left:20px;top:-2px;color:#fff;font-size:.6875rem;font-weight:600;padding:.1875rem .5rem;border-radius:.375rem;white-space:nowrap;-webkit-user-select:none;user-select:none;box-shadow:0 2px 6px #00000026;animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.collab-cursor svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.flex{display:flex}.items-center{align-items:center}.gap-2{gap:.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-gray-600{color:#4b5563}.status-indicator{width:8px;height:8px;border-radius:50%;transition:background-color .2s}.status-connected{background-color:#10b981}.status-disconnected{background-color:#ef4444}:fullscreen .whiteboard-status{display:none}:fullscreen .active-users{display:none}:fullscreen .whiteboard-toolbar{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:.5rem .75rem;box-shadow:0 2px 8px #0003}:fullscreen .whiteboard-container{background:#fff}.presenter-mode .whiteboard-status{opacity:.3;transition:opacity .2s}.presenter-mode .whiteboard-status:hover{opacity:1}.presenter-mode .active-users{opacity:.3;transition:opacity .2s}.presenter-mode .active-users:hover{opacity:1}.presenter-mode .whiteboard-toolbar{opacity:.2;transition:opacity .3s ease}.presenter-mode .whiteboard-toolbar:hover{opacity:1}