.auth-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5f5f5;padding:2rem}.auth-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:3rem}.auth-logo-icon{width:80px;height:80px;background:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:0}.auth-logo-icon svg{width:36px;height:36px;color:#fff}.auth-logo h1{font-size:2rem;font-weight:600;color:#1a1a1a;margin-top:0;margin-bottom:.5rem}.auth-logo p{font-size:1rem;color:#666;font-weight:400}.auth-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:3rem 2.5rem;width:100%;max-width:520px;box-shadow:0 1px 3px #0000000d}.auth-card h2{font-size:1.5rem;font-weight:600;color:#1a1a1a;margin-bottom:2rem}.auth-card form{display:flex;flex-direction:column;gap:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-size:.875rem;font-weight:500;color:#1a1a1a}.auth-card input{width:100%;padding:.75rem 1rem;border:1px solid #d0d0d0;border-radius:6px;font-size:1rem;background:#f9f9f9;color:#1a1a1a;transition:all .2s}.auth-card input::placeholder{color:#999}.auth-card input:focus{outline:none;border-color:#1a1a1a;background:#fff}.auth-card button[type=submit]{width:100%;padding:.875rem;background:#1a1a1a;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s;margin-top:.5rem}.auth-card button[type=submit]:hover{background:#2a2a2a}.auth-footer{text-align:center;margin-top:1.5rem;font-size:.875rem;color:#666}.auth-footer a{color:#1a1a1a;text-decoration:none;font-weight:600}.auth-footer a:hover{text-decoration:underline}.auth-terms{text-align:center;margin-top:2rem;font-size:.8125rem;color:#999}.auth-back{text-align:center;margin-top:2rem}.auth-back a{color:#666;text-decoration:none;font-size:.875rem;display:inline-flex;align-items:center;gap:.5rem}.auth-back a:hover{color:#1a1a1a}.error{color:#d32f2f;background:#ffebee;padding:.75rem;border-radius:6px;font-size:.875rem;border:1px solid #ffcdd2}@media (max-width: 1024px){.auth-container{padding:1.5rem}.auth-logo{margin-bottom:2rem}.auth-logo h1{font-size:1.75rem}.auth-card{padding:2.5rem 2rem;max-width:480px}}@media (max-width: 767px){.auth-container{padding:2rem 1rem 1rem;justify-content:flex-start}.auth-logo{margin-bottom:1.5rem}.auth-logo-icon{width:64px;height:64px}.logo-image{width:56px;height:56px}.auth-logo h1{font-size:1.5rem}.auth-logo p{font-size:.875rem}.auth-card{padding:2rem 1.5rem;max-width:100%;border-radius:12px}.auth-card h2{font-size:1.25rem;margin-bottom:1.5rem}.auth-card form{gap:1.25rem}.auth-card input{padding:.875rem 1rem;font-size:1rem}.auth-card button[type=submit]{padding:1rem;font-size:1rem}.auth-footer{font-size:.8125rem}.auth-terms{font-size:.75rem;padding:0 1rem}}@media (max-width: 480px){.auth-container{padding:1.5rem .75rem .75rem}.auth-logo{margin-bottom:1.25rem}.auth-logo-icon{width:56px;height:56px}.logo-image{width:48px;height:48px}.auth-logo h1{font-size:1.375rem}.auth-card{padding:1.75rem 1.25rem;border-radius:10px}.auth-card h2{font-size:1.125rem}.form-group label{font-size:.8125rem}.auth-card input{padding:.75rem .875rem;font-size:.9375rem}.error{font-size:.8125rem;padding:.625rem}}.oauth-section{margin-bottom:1.5rem}.google-signin-container{width:100%}.google-signin-button{width:100%;display:flex;justify-content:center}.divider{position:relative;text-align:center;margin:1.5rem 0}.divider:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#e0e0e0}.divider span{background:#fff;padding:0 1rem;color:#666;font-size:.875rem;font-weight:500}button:disabled{opacity:.6;cursor:not-allowed}.error{background:#fee2e2;border:1px solid #fecaca;color:#dc2626;padding:.75rem;border-radius:6px;font-size:.875rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.error:before{content:"⚠️";font-size:1rem}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #e0e0e0}.auth-provider-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;font-size:.75rem;font-weight:500;color:#6b7280}@media (max-width: 480px){.oauth-section{margin-bottom:1rem}.divider{margin:1rem 0}.divider span{font-size:.8125rem}}.dashboard{min-height:100vh;background:#f5f5f5}.dashboard-header{background:#fff;border-bottom:1px solid #e0e0e0;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.dashboard-logo{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:600;color:#1a1a1a}.dashboard-logo-icon{width:48px;height:48px;background:transparent;border-radius:6px;display:flex;align-items:center;justify-content:center}.dashboard-logo-icon svg{width:18px;height:18px;color:#fff}.dashboard-actions{display:flex;gap:.75rem}.btn-create{background:#1a1a1a;color:#fff;border:none;padding:.625rem 1.25rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:background .2s}.btn-create:hover{background:#2a2a2a}.btn-profile{background:#fff;color:#1a1a1a;border:1px solid #d0d0d0;padding:.625rem 1.25rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.btn-profile:hover{border-color:#1a1a1a}.dashboard-content{max-width:1200px;margin:0 auto;padding:3rem 2rem}.dashboard-welcome{margin-bottom:3rem}.dashboard-welcome h1{font-size:2rem;font-weight:600;color:#1a1a1a;margin-bottom:.5rem}.dashboard-welcome p{font-size:1rem;color:#666}.dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.5rem;margin-bottom:3rem}.dashboard-card{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:2rem}.card-icon{width:48px;height:48px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;font-size:1.5rem}.dashboard-card h2{font-size:1.25rem;font-weight:600;color:#1a1a1a;margin-bottom:.75rem}.dashboard-card p{font-size:.875rem;color:#666;margin-bottom:1.5rem;line-height:1.5}.dashboard-card input{width:100%;padding:.75rem 1rem;border:1px solid #d0d0d0;border-radius:6px;font-size:.875rem;background:#f9f9f9;margin-bottom:1rem}.dashboard-card input::placeholder{color:#999}.dashboard-card input:focus{outline:none;border-color:#1a1a1a;background:#fff}.btn-card-primary{width:100%;background:#1a1a1a;color:#fff;border:none;padding:.75rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-card-primary:hover{background:#2a2a2a}.btn-card-secondary{width:100%;background:gray;color:#fff;border:none;padding:.75rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-card-secondary:hover{background:#6a6a6a}.recent-sessions{background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:2rem}.recent-sessions h2{font-size:1.25rem;font-weight:600;color:#1a1a1a;margin-bottom:1.5rem}.session-item{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;border:1px solid #e0e0e0;border-radius:6px;margin-bottom:1rem;transition:all .2s}.session-item:hover{border-color:silver;box-shadow:0 2px 4px #0000000d}.session-info h3{font-size:1rem;font-weight:600;color:#1a1a1a;margin-bottom:.5rem}.session-meta{display:flex;gap:1.5rem;font-size:.8125rem;color:#666}.session-meta span{display:flex;align-items:center;gap:.375rem}.btn-open{background:#fff;color:#1a1a1a;border:1px solid #d0d0d0;padding:.5rem 1.5rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-open:hover{border-color:#1a1a1a;background:#f9f9f9}.error{color:#d32f2f;background:#ffebee;padding:.75rem;border-radius:6px;font-size:.875rem;border:1px solid #ffcdd2;margin-top:1rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;padding:2rem;border-radius:8px;width:90%;max-width:400px;box-shadow:0 4px 20px #00000026}.modal-content h2{margin:0 0 1.5rem;font-size:1.25rem;color:#1a1a1a}.modal-content input{width:100%;padding:.75rem;border:1px solid #d0d0d0;border-radius:6px;font-size:.9375rem;margin-bottom:1.5rem}.modal-content input:focus{outline:none;border-color:#1a1a1a}.modal-actions{display:flex;gap:.75rem;justify-content:flex-end}.btn-cancel{padding:.625rem 1.25rem;background:#fff;border:1px solid #d0d0d0;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-cancel:hover{border-color:#1a1a1a;background:#f9f9f9}.btn-confirm{padding:.625rem 1.25rem;background:#1a1a1a;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-confirm:hover{background:#2a2a2a}.checkbox-label{display:flex;align-items:center;gap:.75rem;padding:.875rem;background:#f9f9f9;border-radius:6px;margin-bottom:1.5rem;cursor:pointer;transition:background .2s}.checkbox-label:hover{background:#f0f0f0}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#1a1a1a}.checkbox-label span{font-size:.875rem;color:#1a1a1a;font-weight:500}.logo-image{width:48px;height:48px;object-fit:contain;border-radius:8px;background:transparent}@media (max-width: 1024px){.dashboard-header{padding:1rem 1.5rem}.dashboard-content{padding:2.5rem 1.5rem}.dashboard-welcome h1{font-size:1.75rem}.rooms-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}.recent-sessions-grid{grid-template-columns:1fr}}@media (max-width: 767px){.dashboard-header{padding:1rem;flex-wrap:wrap;gap:.75rem}.dashboard-logo{font-size:1.125rem;gap:.5rem}.dashboard-logo-icon{width:40px;height:40px}.logo-image{width:36px;height:36px}.dashboard-actions{width:100%;justify-content:stretch}.btn-create,.btn-profile{flex:1;justify-content:center;padding:.75rem 1rem;font-size:.8125rem}.dashboard-content{padding:2rem 1rem}.dashboard-welcome{margin-bottom:2rem}.dashboard-welcome h1{font-size:1.5rem}.dashboard-welcome p{font-size:.875rem}.dashboard-section{margin-bottom:2rem}.section-header h2{font-size:1.125rem}.rooms-grid{grid-template-columns:1fr;gap:1rem}.room-card{padding:1.25rem}.room-card h3{font-size:1rem}.room-card p{font-size:.8125rem}.room-actions{flex-direction:column;gap:.5rem}.btn-join,.btn-delete{width:100%;justify-content:center}.recent-sessions-grid{grid-template-columns:1fr;gap:1rem}.session-card{padding:1.25rem}.session-card h4{font-size:.9375rem}.session-meta{font-size:.75rem;flex-wrap:wrap}.modal-content{margin:1rem;padding:1.5rem;max-width:calc(100% - 2rem)}.modal-content h2{font-size:1.25rem}.modal-content input{font-size:.9375rem}.modal-actions{flex-direction:column-reverse;gap:.75rem}.modal-actions button{width:100%}}@media (max-width: 480px){.dashboard-header{padding:.875rem}.dashboard-logo{font-size:1rem}.dashboard-logo-icon{width:36px;height:36px}.logo-image{width:32px;height:32px}.btn-create,.btn-profile{padding:.625rem .875rem;font-size:.75rem}.btn-create svg,.btn-profile svg{width:14px;height:14px}.dashboard-content{padding:1.5rem .875rem}.dashboard-welcome h1{font-size:1.375rem}.room-card,.session-card{padding:1rem}.modal-content{padding:1.25rem}}@media (max-width: 767px) and (orientation: landscape){.dashboard-content{padding:1.5rem 1rem}.dashboard-welcome{margin-bottom:1.5rem}.rooms-grid{grid-template-columns:repeat(2,1fr)}}.canvas{width:100%;height:100%;background:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 2px 8px #0000000d;cursor:crosshair;touch-action:none;display:block}.canvas.cursor-pencil{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M3 25 L25 3 M22 3 L25 6" stroke="black" stroke-width="2" stroke-linecap="round"/><circle cx="3" cy="25" r="1.5" fill="black"/></svg>') 3 25,crosshair}.canvas.cursor-eraser{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><path d="M20 20H7L3 16c-1-1-1-2.5 0-3.5l9.5-9.5c1-1 2.5-1 3.5 0l5.5 5.5c1 1 1 2.5 0 3.5L13 20"/><path d="M7 20l6-6"/></svg>') 12 12,crosshair}[data-theme=dark] .canvas{background:#1a1a1a;border-color:#404040;box-shadow:0 2px 8px #0000004d}.canvas{transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.infinite-canvas-container{position:relative;width:100%;height:100%;overflow:hidden}.infinite-canvas{width:100%;height:100%;display:block}.canvas-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:.75rem;background:#fffffff2;padding:.75rem 1rem;border-radius:12px;box-shadow:0 4px 12px #00000026;z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.canvas-control-btn{width:36px;height:36px;border:none;background:#f5f5f5;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#1a1a1a}.canvas-control-btn:hover{background:#e0e0e0;transform:scale(1.05)}.canvas-control-btn:active{transform:scale(.95)}.zoom-level{font-size:.875rem;font-weight:600;color:#1a1a1a;min-width:50px;text-align:center}.canvas-hint{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#000000bf;color:#fff;padding:.5rem 1rem;border-radius:8px;font-size:.8125rem;font-weight:500;z-index:10;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeInOut 4s ease-in-out}@keyframes fadeInOut{0%,to{opacity:0}10%,90%{opacity:1}}[data-theme=dark] .canvas-controls{background:#2d2d2df2}[data-theme=dark] .canvas-control-btn{background:#2a2a2a;color:#fff}[data-theme=dark] .canvas-control-btn:hover{background:#3a3a3a}[data-theme=dark] .zoom-level{color:#fff}@media (max-width: 767px){.canvas-controls{bottom:100px;padding:.5rem .75rem;gap:.5rem}.canvas-control-btn{width:32px;height:32px}.canvas-control-btn svg{width:16px;height:16px}.zoom-level{font-size:.75rem;min-width:45px}.canvas-hint{top:60px;font-size:.75rem;padding:.375rem .75rem;max-width:90%;text-align:center}}@media (max-width: 767px) and (orientation: landscape){.canvas-controls{bottom:10px;right:80px;left:auto;transform:none}.canvas-hint{top:10px;left:10px;transform:none}}@media (hover: none) and (pointer: coarse){.canvas-control-btn{width:44px;height:44px}.canvas-controls{padding:.75rem 1rem}}.whiteboard-room{display:flex;flex-direction:column;height:100vh;background:#f5f5f5}.room-header{background:#fff;border-bottom:1px solid #e0e0e0;padding:.875rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.room-info-header{display:flex;align-items:center;gap:1.5rem}.room-name{font-size:1rem;font-weight:700;color:#1a1a1a}.room-id{font-size:.8125rem;font-weight:500;color:#666;padding:.25rem .625rem;background:#f5f5f5;border-radius:4px}.btn-copy{background:#fff;border:1px solid #d0d0d0;padding:.375rem .875rem;border-radius:4px;font-size:.8125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s}.btn-copy:hover{border-color:#1a1a1a}.room-users-count{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#666}.btn-leave{background:#fff;border:1px solid #d0d0d0;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-leave:hover{border-color:#d32f2f;color:#d32f2f}.room-main{display:flex;flex:1;overflow:hidden}.toolbar{width:60px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem}.tool-btn{width:40px;height:40px;border:1px solid transparent;background:transparent;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;color:#666}.tool-btn:hover{background:#f8f9fa;border-color:#e9ecef;color:#1a1a1a;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.tool-btn.active{background:#1a1a1a;border-color:#1a1a1a;color:#fff;box-shadow:0 2px 8px #1a1a1a33}.tool-divider{width:32px;height:1px;background:linear-gradient(90deg,transparent,#e0e0e0,transparent);margin:.75rem 0}.color-palette{display:flex;flex-direction:column;gap:.5rem;padding:.5rem 0}.color-btn{width:32px;height:32px;border:2px solid #e9ecef;border-radius:8px;cursor:pointer;transition:all .2s ease;position:relative;box-shadow:0 2px 4px #0000001a}.color-btn:hover{transform:scale(1.1);border-color:#dee2e6;box-shadow:0 4px 8px #00000026}.color-btn.active{border-color:#1a1a1a;box-shadow:0 0 0 2px #1a1a1a33;transform:scale(1.05)}.color-btn.active:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}.brush-size-control{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.75rem 0;width:100%}.brush-size-label{font-size:.75rem;font-weight:600;color:#374151;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border:1px solid #e9ecef;padding:.375rem .625rem;border-radius:6px;min-width:40px;text-align:center;box-shadow:0 2px 4px #0000000d}.brush-size-slider-container{position:relative;width:20px;height:80px;display:flex;align-items:center;justify-content:center}.brush-size-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:80px;height:8px;background:linear-gradient(90deg,#e9ecef,#dee2e6);border:1px solid #dee2e6;border-radius:4px;outline:none;cursor:pointer;box-shadow:inset 0 2px 4px #0000001a;transform:rotate(-90deg);transform-origin:center}.brush-size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#1a1a1a,#2a2a2a);border:2px solid white;border-radius:50%;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #1a1a1a4d}.brush-size-slider::-webkit-slider-thumb:hover{background:linear-gradient(135deg,#2196f3,#1976d2);transform:scale(1.15);box-shadow:0 4px 12px #2196f366}.brush-size-slider::-moz-range-thumb{width:16px;height:16px;background:#1a1a1a;border-radius:50%;cursor:pointer;border:none;transition:all .2s}.brush-size-slider::-moz-range-thumb:hover{background:#2a2a2a;transform:scale(1.1)}.canvas-container{flex:1;background:#fafafa;display:flex;align-items:center;justify-content:center;padding:1rem;overflow:hidden;min-height:0}.canvas{background:#fff;border:1px solid #e0e0e0;border-radius:4px;box-shadow:0 2px 8px #0000000d;cursor:crosshair}.sidebar{width:320px;background:#fff;border-left:1px solid #e0e0e0;display:flex;flex-direction:column}.sidebar-tabs{display:flex;border-bottom:1px solid #e0e0e0}.tab-btn{flex:1;padding:.875rem;background:transparent;border:none;border-bottom:2px solid transparent;font-size:.875rem;font-weight:600;color:#666;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.tab-btn:hover{color:#1a1a1a;background:#f9f9f9}.tab-btn.active{color:#1a1a1a;border-bottom-color:#1a1a1a}.tab-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-container{flex:1;display:flex;flex-direction:column;padding:1rem;overflow:hidden;min-height:0}.chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;margin-bottom:1rem;display:flex;flex-direction:column;gap:0;padding-right:.5rem;min-height:0}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:3px}.chat-messages::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.chat-message{display:flex;flex-direction:column;gap:.375rem;margin-bottom:.5rem}.chat-message-own{align-items:flex-end}.chat-message-other{align-items:flex-start}.message-header{display:flex;align-items:center;gap:.5rem;padding:0 .25rem}.message-author{font-size:.75rem;font-weight:600;color:#666}.message-time{font-size:.7rem;color:#999}.message-text{font-size:.875rem;color:#1a1a1a;padding:.625rem .875rem;border-radius:12px;line-height:1.4;max-width:75%;word-wrap:break-word;box-shadow:0 1px 2px #0000000d}.chat-message-other .message-text{background:#f5f5f5;border-bottom-left-radius:4px}.chat-message-own .message-text{background:#e3f2fd;color:#1a1a1a;border-bottom-right-radius:4px}.chat-input-container{display:flex;gap:.5rem}.chat-input{flex:1;padding:.625rem .875rem;border:1px solid #d0d0d0;border-radius:6px;font-size:.875rem;background:#f9f9f9}.chat-input:focus{outline:none;border-color:#1a1a1a;background:#fff}.btn-send{background:#1a1a1a;color:#fff;border:none;padding:.625rem 1.25rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-send:hover{background:#2a2a2a}.users-container{padding:1rem}.users-list{display:flex;flex-direction:column;gap:.75rem}.user-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;border-radius:6px;transition:background .2s;position:relative}.user-item:hover{background:#f5f5f5}.user-avatar{width:32px;height:32px;border-radius:50%;background:#e0e0e0;display:flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:600;color:#666;flex-shrink:0}.user-info{flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:0}.user-name{font-size:.875rem;font-weight:500;color:#1a1a1a;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.user-badge-you{font-size:.7rem;font-weight:600;color:#3b82f6;background:#dbeafe;padding:.125rem .375rem;border-radius:3px}.user-badge-host{font-size:.7rem;font-weight:600;color:#8b5cf6;background:#ede9fe;padding:.125rem .375rem;border-radius:3px}.user-status{font-size:.75rem;color:#10b981;font-weight:500}.user-menu-container{position:relative}.user-menu-btn{width:28px;height:28px;border:none;background:transparent;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s}.user-menu-btn:hover{background:#e0e0e0;color:#1a1a1a}.user-menu-dropdown{position:absolute;right:0;top:100%;margin-top:.25rem;background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 4px 12px #0000001a;min-width:200px;z-index:1000;overflow:hidden}.menu-item{width:100%;padding:.625rem .875rem;border:none;background:#fff;text-align:left;font-size:.8125rem;font-weight:500;color:#1a1a1a;cursor:pointer;display:flex;align-items:center;gap:.625rem;transition:background .2s}.menu-item-danger{color:#ef4444}.menu-item-danger:hover{background:#fee2e2}.sidebar-actions{padding:1rem;border-top:1px solid #e0e0e0;display:flex;flex-direction:column;gap:.75rem}.sidebar-btn{width:100%;padding:.75rem;background:#fff;border:1px solid #d0d0d0;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s}.sidebar-btn:hover{border-color:#1a1a1a;background:#f9f9f9}.permission-mode-badge{display:flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:4px;font-size:.75rem;font-weight:600;border:1px solid;transition:all .2s}.permission-mode-public{background:#d1fae5;color:#065f46;border-color:#10b981}.permission-mode-host-only{background:#fee2e2;color:#991b1b;border-color:#ef4444}.permission-mode-custom{background:#dbeafe;color:#1e40af;border-color:#3b82f6}.read-only-badge{background:#ff9800;color:#fff;padding:.25rem .625rem;border-radius:4px;font-size:.75rem;font-weight:600}.permissions-modal{max-width:500px}.modal-description{color:#666;font-size:.875rem;margin-bottom:1.5rem}.permission-options{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.permission-option{display:flex;align-items:center;gap:1rem;padding:1rem;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all .2s}.permission-option:hover{border-color:#1a1a1a;background:#f9f9f9}.permission-option.active{border-color:#1a1a1a;background:#f5f5f5}.permission-icon{width:40px;height:40px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#1a1a1a}.permission-option.active .permission-icon{background:#1a1a1a;color:#fff}.permission-info h3{margin:0 0 .25rem;font-size:.9375rem;font-weight:600;color:#1a1a1a}.permission-info p{margin:0;font-size:.8125rem;color:#666}.custom-permissions{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0}.custom-permissions h3{margin:0 0 .5rem;font-size:.875rem;font-weight:600;color:#1a1a1a}.custom-permissions-hint{margin:0 0 .75rem;font-size:.8125rem;color:#666}.users-checklist{display:flex;flex-direction:column;gap:.5rem;max-height:200px;overflow-y:auto;padding:.5rem;background:#f9f9f9;border-radius:6px}.user-checkbox{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:6px;cursor:pointer;transition:background .2s;background:#fff;border:1px solid #e0e0e0}.user-checkbox:hover{background:#f5f5f5;border-color:#1a1a1a}.user-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#1a1a1a}.user-checkbox span{font-size:.875rem;color:#1a1a1a;flex:1}.permission-badge{font-size:.75rem;font-weight:600;color:#10b981;background:#d1fae5;padding:.25rem .5rem;border-radius:4px}.no-users-message{text-align:center;color:#999;font-size:.8125rem;padding:1rem;margin:0}.read-only-sidebar{width:60px;background:#fff;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;gap:.75rem}.read-only-icon{width:48px;height:48px;background:#fff3e0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ff9800}.read-only-text{font-size:.75rem;font-weight:600;color:#ff9800;text-align:center;margin:0;writing-mode:vertical-rl;text-orientation:mixed}.read-only-subtext{font-size:.625rem;color:#999;text-align:center;margin:0;writing-mode:vertical-rl;text-orientation:mixed}.btn-destroy{background:#fff;border:1px solid #ef4444;color:#ef4444;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s}.btn-destroy:hover{background:#ef4444;color:#fff}.destroy-modal{max-width:450px;text-align:center}.destroy-icon{width:64px;height:64px;background:#fee2e2;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ef4444;margin:0 auto 1.5rem}.btn-destroy-confirm{padding:.625rem 1.25rem;background:#ef4444;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s}.btn-destroy-confirm:hover{background:#dc2626}.btn-waiting-room{background:#ff9800;border:1px solid #ff9800;color:#fff;padding:.375rem .875rem;border-radius:4px;font-size:.8125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s;animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 #ff9800b3}50%{box-shadow:0 0 0 6px #ff980000}}.btn-waiting-room:hover{background:#f57c00;border-color:#f57c00}.waiting-room-panel{position:fixed;top:80px;right:20px;width:380px;max-height:500px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 8px 24px #00000026;z-index:1000;display:flex;flex-direction:column}.waiting-room-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid #e0e0e0}.waiting-room-header h3{margin:0;font-size:1rem;font-weight:600;color:#1a1a1a}.btn-close-panel{width:32px;height:32px;border:none;background:transparent;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s}.btn-close-panel:hover{background:#f5f5f5;color:#1a1a1a}.waiting-room-list{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem}.waiting-user-item{display:flex;align-items:center;justify-content:space-between;padding:1rem;background:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;gap:1rem}.waiting-user-info{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.waiting-user-avatar{width:40px;height:40px;border-radius:50%;background:#e0e0e0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;color:#666;flex-shrink:0}.waiting-user-name{font-size:.9375rem;font-weight:600;color:#1a1a1a;margin-bottom:.25rem}.waiting-user-time{font-size:.75rem;color:#999}.waiting-user-actions{display:flex;gap:.5rem;flex-shrink:0}.btn-approve{padding:.5rem .875rem;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:.8125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:background .2s}.btn-approve:hover{background:#059669}.btn-reject{padding:.5rem .875rem;background:#fff;color:#ef4444;border:1px solid #ef4444;border-radius:6px;font-size:.8125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s}.btn-reject:hover{background:#ef4444;color:#fff}.tab-badge{background:#ff9800;color:#fff;font-size:.7rem;font-weight:700;padding:.125rem .375rem;border-radius:10px;margin-left:.25rem}.waiting-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.waiting-header{padding:1.25rem 1rem;border-bottom:1px solid #e0e0e0}.waiting-header h3{margin:0 0 .5rem;font-size:1rem;font-weight:600;color:#1a1a1a}.waiting-description{margin:0;font-size:.8125rem;color:#666}.waiting-list{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.875rem}.waiting-list::-webkit-scrollbar{width:6px}.waiting-list::-webkit-scrollbar-track{background:transparent}.waiting-list::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:3px}.waiting-list::-webkit-scrollbar-thumb:hover{background:#b0b0b0}.waiting-item{background:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;padding:1rem;display:flex;flex-direction:column;gap:.875rem;transition:all .2s}.waiting-item:hover{background:#f5f5f5;border-color:#d0d0d0}.waiting-item-header{display:flex;align-items:center;gap:.875rem}.waiting-user-avatar-large{width:48px;height:48px;border-radius:50%;background:#e0e0e0;display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:600;color:#666;flex-shrink:0}.waiting-item-info{flex:1;min-width:0}.waiting-item-name{font-size:.9375rem;font-weight:600;color:#1a1a1a;margin-bottom:.25rem}.waiting-item-time{font-size:.75rem;color:#999}.waiting-item-actions{display:flex;gap:.625rem}.btn-approve-full{flex:1;padding:.625rem 1rem;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background .2s}.btn-approve-full:hover{background:#059669}.btn-reject-full{flex:1;padding:.625rem 1rem;background:#fff;color:#ef4444;border:1px solid #ef4444;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s}.btn-reject-full:hover{background:#ef4444;color:#fff}.waiting-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1.5rem;text-align:center;color:#999}.waiting-empty svg{margin-bottom:1rem;opacity:.5}.waiting-empty p{margin:0 0 .5rem;font-size:1rem;font-weight:600;color:#666}.waiting-empty span{font-size:.8125rem;color:#999}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background:#fff;border-radius:12px;padding:2rem;max-width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;animation:modalSlideIn .2s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.modal-content h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:700;color:#1a1a1a}.modal-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}.btn-cancel{padding:.625rem 1.25rem;background:#fff;color:#666;border:1px solid #d0d0d0;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-cancel:hover{border-color:#1a1a1a;color:#1a1a1a}.permission-tabs{display:flex;border-bottom:1px solid #e0e0e0;margin-bottom:1.5rem}.permission-tab{flex:1;padding:.75rem 1rem;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.875rem;font-weight:500;color:#666;border-bottom:2px solid transparent;transition:all .2s}.permission-tab:hover{color:#1a1a1a;background:#f8f9fa}.permission-tab.active{color:#1a1a1a;border-bottom-color:#1a1a1a;background:#f8f9fa}.permission-tab-content{min-height:300px}.chat-disabled{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:6px;color:#666;font-size:.875rem;font-weight:500}.chat-disabled svg{opacity:.7}.permission-badges{display:flex;gap:.75rem;align-items:center}.permission-mode-badge{display:flex;align-items:center;gap:.375rem;padding:.25rem .625rem;background:#f8f9fa;border:1px solid #e0e0e0;border-radius:4px;font-size:.75rem;font-weight:500;color:#666}.permission-mode-badge.permission-mode-public{background:#e8f5e8;border-color:#4caf50;color:#2e7d32}.permission-mode-badge.permission-mode-host-only{background:#fff3e0;border-color:#ff9800;color:#e65100}.permission-mode-badge.permission-mode-custom{background:#e3f2fd;border-color:#2196f3;color:#1565c0}.user-permissions{display:flex;flex-direction:column;gap:.25rem;margin-top:.25rem}.user-status{display:flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;padding:.125rem .375rem;border-radius:3px}.user-status-draw{background:#e8f5e8;color:#2e7d32}.user-status-chat{background:#e3f2fd;color:#1565c0}.user-menu-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 4px 12px #0000001a;z-index:1000;min-width:180px;padding:.25rem 0}.menu-item{width:100%;padding:.5rem .75rem;border:none;background:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#333;transition:background-color .2s}.menu-item:hover{background:#f5f5f5}.menu-item-danger{color:#d32f2f}.menu-item-danger:hover{background:#ffebee}.tab-restriction-indicator{display:flex;align-items:center;margin-left:.25rem;color:#ff9800;opacity:.8}.tab-btn:hover .tab-restriction-indicator{opacity:1}.sidebar-menu-container,.sidebar-menu-btn{position:relative}.sidebar-menu-dropdown{position:absolute;bottom:100%;left:0;right:0;background:#fff;border:1px solid #e0e0e0;border-radius:6px;box-shadow:0 4px 12px #0000001a;z-index:1000;margin-bottom:.5rem;overflow:hidden}.sidebar-menu-item{width:100%;padding:.75rem 1rem;border:none;background:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.75rem;font-size:.875rem;font-weight:500;color:#333;transition:background-color .2s;border-bottom:1px solid #f0f0f0}.sidebar-menu-item:last-child{border-bottom:none}.sidebar-menu-item:hover{background:#f5f5f5}.sidebar-menu-item svg{flex-shrink:0}.sidebar-actions{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-top:1px solid #e0e0e0}.sidebar-btn{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border:1px solid #e0e0e0;background:#fff;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;text-align:left}.sidebar-btn:hover{border-color:#1a1a1a;background:#f8f9fa}.sidebar-btn svg{flex-shrink:0}.toolbar-menu-dropdown{position:absolute;bottom:100%;left:100%;margin-left:.75rem;margin-bottom:.5rem;background:linear-gradient(135deg,#fff,#fafbfc);border:1px solid #e9ecef;border-radius:12px;box-shadow:0 12px 32px #0000001f,0 4px 16px #00000014;z-index:1000;overflow:hidden;min-width:180px;animation:slideInLeft .2s ease-out;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@keyframes slideInLeft{0%{opacity:0;transform:translate(-10px) scale(.95)}to{opacity:1;transform:translate(0) scale(1)}}@media (max-width: 1024px){.toolbar-menu-dropdown{left:50%;transform:translate(-50%);margin-left:0;margin-bottom:.5rem}}.toolbar-menu-item{width:100%;padding:1rem 1.25rem;border:none;background:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.875rem;font-size:.875rem;font-weight:500;color:#374151;transition:all .2s ease;border-bottom:1px solid rgba(233,236,239,.5);white-space:nowrap;position:relative}.toolbar-menu-item:last-child{border-bottom:none}.toolbar-menu-item:hover{background:linear-gradient(90deg,#f8f9fa,#e9ecef);color:#1a1a1a;padding-left:1.5rem;transform:translate(2px)}.toolbar-menu-item:active{background:linear-gradient(90deg,#e9ecef,#dee2e6);transform:scale(.98)}.toolbar-menu-item svg{flex-shrink:0;transition:all .2s ease}.toolbar-menu-item:hover svg{transform:scale(1.1);color:#2196f3}.toolbar-menu-item.destructive{color:#dc3545}.toolbar-menu-item.destructive:hover{background:linear-gradient(90deg,#fff5f5,#fee);color:#dc3545;border-left:3px solid #dc3545;padding-left:1.25rem}.toolbar-menu-item.destructive:hover svg{color:#dc3545;transform:scale(1.1) rotate(5deg)}.toolbar{width:60px;background:linear-gradient(180deg,#fff,#fafbfc);border-right:1px solid #e9ecef;display:flex;flex-direction:column;align-items:center;padding:1.25rem 0;gap:.5rem;position:relative;min-height:100%;box-shadow:2px 0 8px #0000000a;justify-content:flex-start}.toolbar-menu-container{position:absolute;bottom:1.25rem;left:50%;transform:translate(-50%)}.toolbar-menu-btn{position:relative;border:1px solid #e9ecef;background:linear-gradient(135deg,#f8f9fa,#fff)}.toolbar-menu-btn.active,.toolbar-menu-btn:hover{background:linear-gradient(135deg,#e3f2fd,#f8f9fa);border-color:#2196f3;color:#1565c0;box-shadow:0 4px 12px #2196f333}.toolbar-menu-btn:after{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;background:linear-gradient(135deg,#2196f3,#1976d2);border:2px solid white;border-radius:50%;opacity:.9;box-shadow:0 2px 4px #2196f34d}@media (min-width: 1024px){.toolbar{width:70px;padding:1.25rem 0}.tool-btn{width:48px;height:48px}.toolbar-menu-dropdown{min-width:200px;border-radius:10px;box-shadow:0 12px 32px #00000026}.toolbar-menu-item{padding:1rem 1.5rem;font-size:.9rem}}.toolbar-menu-btn:focus,.toolbar-menu-item:focus{outline:2px solid #2196f3;outline-offset:2px}.toolbar-menu-item:hover{transform:translate(2px)}.toolbar-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.toolbar-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.toolbar-menu-item:active{transform:scale(.98)}.toolbar-menu-btn[title]:hover:before{content:attr(title);position:absolute;right:100%;top:50%;transform:translateY(-50%);background:#333;color:#fff;padding:.5rem .75rem;border-radius:4px;font-size:.75rem;white-space:nowrap;margin-right:.5rem;z-index:1001}@media (min-width: 1200px){.toolbar{width:80px}.tool-btn{width:52px;height:52px}.toolbar-menu-dropdown{min-width:220px}}@media (max-width: 768px){.toolbar-menu-dropdown{left:50%;transform:translate(-50%);margin-left:0;min-width:160px}.toolbar-menu-item{padding:.75rem 1rem;font-size:.8rem}}@media (min-height: 600px){.toolbar-menu-container{bottom:1.5rem}}@media (max-height: 500px){.toolbar-menu-container{bottom:1rem}}.toolbar-menu-container{z-index:100}.toolbar-menu-dropdown{z-index:1001}@media (max-width: 480px){.toolbar-menu-dropdown{left:50%;transform:translate(-50%);margin-left:0;min-width:150px}}.btn-theme-toggle{background:#fff;border:1px solid #d0d0d0;padding:.5rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#666}.btn-theme-toggle:hover{border-color:#1a1a1a;color:#1a1a1a;background:#f9f9f9}.btn-snapshot{background:#fff;border:1px solid #d0d0d0;padding:.5rem .875rem;border-radius:6px;font-size:.8125rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s;color:#1a1a1a}.btn-snapshot:hover{border-color:#1a1a1a;background:#f8f8f8}[data-theme=dark] .whiteboard-room{background:#1a1a1a}[data-theme=dark] .room-header{background:#2d2d2d;border-bottom-color:#404040}[data-theme=dark] .room-name{color:#fff}[data-theme=dark] .room-id{color:#b0b0b0;background:#404040}[data-theme=dark] .room-users-count{color:#b0b0b0}[data-theme=dark] .btn-copy{background:#2d2d2d;border-color:#505050;color:#b0b0b0}[data-theme=dark] .btn-copy:hover{border-color:#fff;color:#fff}[data-theme=dark] .btn-theme-toggle{background:#2d2d2d;border-color:#505050;color:#b0b0b0}[data-theme=dark] .btn-theme-toggle:hover{border-color:#fff;color:#fff;background:#404040}[data-theme=dark] .btn-snapshot{background:#2d2d2d;border-color:#505050;color:#b0b0b0}[data-theme=dark] .btn-snapshot:hover{border-color:#fff;color:#fff;background:#404040}[data-theme=dark] .btn-leave{background:#2d2d2d;border-color:#505050;color:#b0b0b0}[data-theme=dark] .btn-leave:hover{border-color:#ef4444;color:#ef4444}[data-theme=dark] .btn-waiting-room{background:#ff9800;border-color:#ff9800}[data-theme=dark] .read-only-badge{background:#ff9800}[data-theme=dark] .toolbar{background:linear-gradient(180deg,#2d2d2d,#252525);border-right-color:#404040}[data-theme=dark] .tool-btn{color:#b0b0b0;border-color:transparent}[data-theme=dark] .tool-btn:hover{background:#404040;border-color:#505050;color:#fff}[data-theme=dark] .tool-btn.active{background:#fff;border-color:#fff;color:#1a1a1a}[data-theme=dark] .tool-divider{background:linear-gradient(90deg,transparent,#404040,transparent)}[data-theme=dark] .color-btn{border-color:#505050}[data-theme=dark] .color-btn:hover{border-color:#707070}[data-theme=dark] .color-btn.active{border-color:#fff}[data-theme=dark] .brush-size-label{color:#b0b0b0;background:linear-gradient(135deg,#404040,#353535);border-color:#505050}[data-theme=dark] .brush-size-slider{background:linear-gradient(90deg,#505050,#404040);border-color:#404040}[data-theme=dark] .brush-size-slider::-webkit-slider-thumb{background:linear-gradient(135deg,#fff,#e0e0e0);border-color:#2d2d2d}[data-theme=dark] .brush-size-slider::-webkit-slider-thumb:hover{background:linear-gradient(135deg,#2196f3,#1976d2)}[data-theme=dark] .canvas-container{background:#252525}[data-theme=dark] .canvas{background:#1a1a1a;border-color:#404040}[data-theme=dark] .sidebar{background:#2d2d2d;border-left-color:#404040}[data-theme=dark] .sidebar-tabs{border-bottom-color:#404040}[data-theme=dark] .tab-btn{color:#b0b0b0}[data-theme=dark] .tab-btn:hover{color:#fff;background:#404040}[data-theme=dark] .tab-btn.active{color:#fff;border-bottom-color:#fff;background:#404040}[data-theme=dark] .tab-badge{background:#ff9800}[data-theme=dark] .tab-restriction-indicator{color:#ff9800}[data-theme=dark] .chat-container{background:#2d2d2d}[data-theme=dark] .chat-messages::-webkit-scrollbar-thumb{background:#505050}[data-theme=dark] .chat-messages::-webkit-scrollbar-thumb:hover{background:#606060}[data-theme=dark] .message-author{color:#b0b0b0}[data-theme=dark] .message-time{color:gray}[data-theme=dark] .message-text{color:#fff}[data-theme=dark] .chat-message-other .message-text{background:#404040}[data-theme=dark] .chat-message-own .message-text{background:#1976d2;color:#fff}[data-theme=dark] .chat-input{background:#404040;border-color:#505050;color:#fff}[data-theme=dark] .chat-input:focus{border-color:#fff;background:#353535}[data-theme=dark] .chat-input::placeholder{color:gray}[data-theme=dark] .btn-send{background:#fff;color:#1a1a1a}[data-theme=dark] .btn-send:hover{background:#e0e0e0}[data-theme=dark] .chat-disabled{background:#404040;border-color:#505050;color:#b0b0b0}[data-theme=dark] .users-container{background:#2d2d2d}[data-theme=dark] .user-item:hover{background:#404040}[data-theme=dark] .user-avatar{background:#505050;color:#b0b0b0}[data-theme=dark] .user-name{color:#fff}[data-theme=dark] .user-badge-you{background:#1976d2;color:#fff}[data-theme=dark] .user-badge-host{background:#8b5cf6;color:#fff}[data-theme=dark] .user-status{color:#4ade80}[data-theme=dark] .user-menu-btn{color:#b0b0b0}[data-theme=dark] .user-menu-btn:hover{background:#505050;color:#fff}[data-theme=dark] .user-menu-dropdown{background:#353535;border-color:#505050}[data-theme=dark] .menu-item{background:#353535;color:#fff}[data-theme=dark] .menu-item:hover{background:#404040}[data-theme=dark] .menu-item-danger{color:#ef4444}[data-theme=dark] .menu-item-danger:hover{background:#4c1d1d}[data-theme=dark] .sidebar-actions{border-top-color:#404040}[data-theme=dark] .sidebar-btn{background:#353535;border-color:#505050;color:#b0b0b0}[data-theme=dark] .sidebar-btn:hover{border-color:#fff;background:#404040;color:#fff}[data-theme=dark] .permission-mode-badge{background:#404040;border-color:#505050;color:#b0b0b0}[data-theme=dark] .permission-mode-badge.permission-mode-public{background:#1b4d3e;border-color:#10b981;color:#4ade80}[data-theme=dark] .permission-mode-badge.permission-mode-host-only{background:#4c2c00;border-color:#ff9800;color:#ffb74d}[data-theme=dark] .permission-mode-badge.permission-mode-custom{background:#1e3a8a;border-color:#3b82f6;color:#60a5fa}[data-theme=dark] .modal-overlay{background:#000c}[data-theme=dark] .modal-content{background:#2d2d2d;color:#fff}[data-theme=dark] .modal-content h2{color:#fff}[data-theme=dark] .modal-description{color:#b0b0b0}[data-theme=dark] .permission-option{border-color:#505050;background:#353535}[data-theme=dark] .permission-option:hover,[data-theme=dark] .permission-option.active{border-color:#fff;background:#404040}[data-theme=dark] .permission-icon{background:#404040;color:#fff}[data-theme=dark] .permission-option.active .permission-icon{background:#fff;color:#1a1a1a}[data-theme=dark] .permission-info h3{color:#fff}[data-theme=dark] .permission-info p{color:#b0b0b0}[data-theme=dark] .custom-permissions{border-top-color:#404040}[data-theme=dark] .custom-permissions h3{color:#fff}[data-theme=dark] .custom-permissions-hint{color:#b0b0b0}[data-theme=dark] .users-checklist{background:#404040}[data-theme=dark] .user-checkbox{background:#353535;border-color:#505050}[data-theme=dark] .user-checkbox:hover{background:#404040;border-color:#fff}[data-theme=dark] .user-checkbox span{color:#fff}[data-theme=dark] .btn-cancel{background:#353535;color:#b0b0b0;border-color:#505050}[data-theme=dark] .btn-cancel:hover{border-color:#fff;color:#fff}[data-theme=dark] .toolbar-menu-dropdown{background:linear-gradient(135deg,#353535,#2d2d2d);border-color:#505050}[data-theme=dark] .toolbar-menu-item{color:#b0b0b0;border-bottom-color:#50505080}[data-theme=dark] .toolbar-menu-item:hover{background:linear-gradient(90deg,#404040,#353535);color:#fff}[data-theme=dark] .toolbar-menu-item.destructive{color:#ef4444}[data-theme=dark] .toolbar-menu-item.destructive:hover{background:linear-gradient(90deg,#4c1d1d,#3d1a1a);color:#ef4444;border-left-color:#ef4444}[data-theme=dark] .toolbar-menu-btn{background:linear-gradient(135deg,#404040,#353535);border-color:#505050;color:#b0b0b0}[data-theme=dark] .toolbar-menu-btn.active,[data-theme=dark] .toolbar-menu-btn:hover{background:linear-gradient(135deg,#1976d2,#1565c0);border-color:#2196f3;color:#fff}[data-theme=dark] .toolbar-menu-btn:after{background:linear-gradient(135deg,#2196f3,#1976d2);border-color:#2d2d2d}[data-theme=dark] .waiting-room-panel{background:#2d2d2d;border-color:#505050}[data-theme=dark] .waiting-room-header{border-bottom-color:#404040}[data-theme=dark] .waiting-room-header h3{color:#fff}[data-theme=dark] .btn-close-panel{color:#b0b0b0}[data-theme=dark] .btn-close-panel:hover{background:#404040;color:#fff}[data-theme=dark] .waiting-user-item{background:#353535;border-color:#505050}[data-theme=dark] .waiting-user-avatar{background:#505050;color:#b0b0b0}[data-theme=dark] .waiting-user-name{color:#fff}[data-theme=dark] .waiting-user-time{color:gray}[data-theme=dark] .btn-approve{background:#10b981}[data-theme=dark] .btn-approve:hover{background:#059669}[data-theme=dark] .btn-reject{background:#353535;color:#ef4444;border-color:#ef4444}[data-theme=dark] .btn-reject:hover{background:#ef4444;color:#fff}[data-theme=dark] .waiting-container{background:#2d2d2d}[data-theme=dark] .waiting-header{border-bottom-color:#404040}[data-theme=dark] .waiting-header h3{color:#fff}[data-theme=dark] .waiting-description{color:#b0b0b0}[data-theme=dark] .waiting-list::-webkit-scrollbar-thumb{background:#505050}[data-theme=dark] .waiting-list::-webkit-scrollbar-thumb:hover{background:#606060}[data-theme=dark] .waiting-item{background:#353535;border-color:#505050}[data-theme=dark] .waiting-item:hover{background:#404040;border-color:#606060}[data-theme=dark] .waiting-user-avatar-large{background:#505050;color:#b0b0b0}[data-theme=dark] .waiting-item-name{color:#fff}[data-theme=dark] .waiting-item-time{color:gray}[data-theme=dark] .btn-approve-full{background:#10b981}[data-theme=dark] .btn-approve-full:hover{background:#059669}[data-theme=dark] .btn-reject-full{background:#353535;color:#ef4444;border-color:#ef4444}[data-theme=dark] .btn-reject-full:hover{background:#ef4444;color:#fff}[data-theme=dark] .waiting-empty{color:gray}[data-theme=dark] .waiting-empty p{color:#b0b0b0}[data-theme=dark] .waiting-empty span{color:gray}[data-theme=dark] .read-only-sidebar{background:#2d2d2d;border-right-color:#404040}[data-theme=dark] .read-only-icon{background:#4c2c00;color:#ff9800}[data-theme=dark] .read-only-text{color:#ff9800}[data-theme=dark] .read-only-subtext{color:gray}[data-theme=dark] .permission-tabs{border-bottom-color:#404040}[data-theme=dark] .permission-tab{color:#b0b0b0}[data-theme=dark] .permission-tab:hover{color:#fff;background:#404040}[data-theme=dark] .permission-tab.active{color:#fff;border-bottom-color:#fff;background:#404040}[data-theme=dark] .user-status-draw{background:#1b4d3e;color:#4ade80}[data-theme=dark] .user-status-chat{background:#1e3a8a;color:#60a5fa}[data-theme=dark] .destroy-modal{background:#2d2d2d}[data-theme=dark] .destroy-icon{background:#4c1d1d;color:#ef4444}[data-theme=dark] .btn-destroy{background:#353535;border-color:#ef4444;color:#ef4444}[data-theme=dark] .btn-destroy:hover{background:#ef4444;color:#fff}[data-theme=dark] .btn-destroy-confirm{background:#ef4444}[data-theme=dark] .btn-destroy-confirm:hover{background:#dc2626}[data-theme=dark] .no-users-message{color:gray}[data-theme=dark] .permission-badge{background:#1b4d3e;color:#4ade80}[data-theme=dark] .user-permissions{color:#b0b0b0}.whiteboard-room,.room-header,.toolbar,.sidebar,.canvas-container,.modal-content,.toolbar-menu-dropdown,.waiting-room-panel{transition:background-color .3s ease,border-color .3s ease,color .3s ease}.tool-btn,.tab-btn,.btn-copy,.btn-theme-toggle,.btn-leave,.sidebar-btn,.toolbar-menu-item,.user-item,.chat-input,.btn-send{transition:all .3s ease}.header-menu-container{position:relative}.btn-header-menu{background:#fff;border:1px solid #d0d0d0;padding:.5rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#666}.btn-header-menu:hover{border-color:#1a1a1a;color:#1a1a1a;background:#f9f9f9}.btn-header-menu.active{border-color:#1a1a1a;color:#1a1a1a;background:#f5f5f5}.header-menu-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 8px 24px #0000001f;z-index:1000;overflow:hidden;min-width:200px;animation:slideInDown .2s ease-out}@keyframes slideInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.header-menu-item{width:100%;padding:.875rem 1rem;border:none;background:transparent;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.75rem;font-size:.875rem;font-weight:500;color:#333;transition:background-color .2s;border-bottom:1px solid #f0f0f0}.header-menu-item:last-child{border-bottom:none}.header-menu-item:hover{background:#f5f5f5}.header-menu-item.destructive{color:#dc3545}.header-menu-item.destructive:hover{background:#fff5f5}.header-menu-item svg{flex-shrink:0}[data-theme=dark] .btn-header-menu{background:#2d2d2d;border-color:#505050;color:#b0b0b0}[data-theme=dark] .btn-header-menu:hover,[data-theme=dark] .btn-header-menu.active{border-color:#fff;color:#fff;background:#404040}[data-theme=dark] .header-menu-dropdown{background:#2d2d2d;border-color:#505050}[data-theme=dark] .header-menu-item{background:#2d2d2d;color:#fff;border-bottom-color:#404040}[data-theme=dark] .header-menu-item:hover{background:#404040}[data-theme=dark] .header-menu-item.destructive{color:#ef4444}[data-theme=dark] .header-menu-item.destructive:hover{background:#4c1d1d}.header-actions{display:flex;align-items:center;gap:.75rem}@media (max-width: 768px){.header-menu-dropdown{right:0;left:auto;min-width:180px}.header-menu-item{padding:.75rem .875rem;font-size:.8125rem}}.chat-input-section{display:flex;flex-direction:column;gap:.5rem}.chat-input-container{display:flex;gap:.5rem;align-items:center}.btn-file-share{background:#f5f5f5;border:1px solid #d0d0d0;padding:.625rem;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#666;min-width:44px}.btn-file-share:hover{background:#e9ecef;border-color:#1a1a1a;color:#1a1a1a}.btn-file-share:disabled{opacity:.6;cursor:not-allowed}.btn-file-share svg{animation:spin 1s linear infinite}.btn-file-share:not(:disabled) svg{animation:none}.message-file{background:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;padding:.75rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem;max-width:280px}.file-info{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.file-info svg{color:#6c757d;flex-shrink:0}.file-details{display:flex;flex-direction:column;gap:.25rem;min-width:0}.file-name{font-size:.875rem;font-weight:500;color:#1a1a1a;word-break:break-word;line-height:1.2}.file-size{font-size:.75rem;color:#6c757d}.btn-download{background:#1a1a1a;border:none;color:#fff;padding:.5rem;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.btn-download:hover{background:#2a2a2a;transform:translateY(-1px)}[data-theme=dark] .btn-file-share{background:#404040;border-color:#505050;color:#b0b0b0}[data-theme=dark] .btn-file-share:hover{background:#505050;border-color:#fff;color:#fff}[data-theme=dark] .message-file{background:#404040;border-color:#505050}[data-theme=dark] .file-info svg{color:#b0b0b0}[data-theme=dark] .file-name{color:#fff}[data-theme=dark] .file-size{color:#b0b0b0}[data-theme=dark] .btn-download{background:#fff;color:#1a1a1a}[data-theme=dark] .btn-download:hover{background:#e0e0e0}.chat-message-own .message-file{background:#e3f2fd;border-color:#bbdefb}.chat-message-other .message-file{background:#f5f5f5;border-color:#e0e0e0}[data-theme=dark] .chat-message-own .message-file{background:#1976d2;border-color:#1565c0}[data-theme=dark] .chat-message-own .file-name{color:#fff}[data-theme=dark] .chat-message-own .file-size{color:#e3f2fd}[data-theme=dark] .chat-message-own .file-info svg{color:#fff}@media (max-width: 480px){.message-file{max-width:240px;padding:.625rem}.file-name{font-size:.8125rem}.file-size{font-size:.6875rem}.btn-download{padding:.375rem}}.screen-share-view{width:100%;height:100%;background:#000;position:relative;display:flex;align-items:center;justify-content:center}.screen-share-video{width:100%;height:100%;object-fit:contain;background:#000}.screen-share-indicator{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:10;padding:.75rem 1.5rem;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;gap:.75rem;box-shadow:0 4px 12px #0000004d}.screen-share-indicator.sharing{background:#ef4444f2;color:#fff}.screen-share-indicator.viewing{background:#3b82f6f2;color:#fff}.indicator-content{display:flex;align-items:center;gap:.75rem;font-size:.875rem;font-weight:600}.viewer-avatar{width:32px;height:32px;border-radius:50%;background:#fff;color:#3b82f6;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem}.live-badge{display:flex;align-items:center;gap:.375rem;padding:.25rem .625rem;background:#fff3;border-radius:4px;font-size:.75rem;font-weight:700;letter-spacing:.5px}.screen-share-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff}.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}.screen-share-loading p{margin:0;font-size:.875rem;color:#fffc}.sidebar-btn.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}.sidebar-btn.active:hover{background:#2a2a2a;border-color:#2a2a2a}.screen-share-modal{max-width:600px;width:90%}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.modal-header h2{margin:0;font-size:1.25rem;font-weight:700;color:#1a1a1a}.btn-close-modal{background:none;border:none;cursor:pointer;padding:.25rem;color:#666;transition:color .2s;display:flex;align-items:center;justify-content:center}.btn-close-modal:hover{color:#1a1a1a}.shared-screens-list{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.shared-screen-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f5f5f5;border-radius:8px;border:1px solid #e0e0e0}.screen-info{display:flex;align-items:center;gap:.875rem}.screen-user-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.125rem}.screen-details h3{margin:0;font-size:.9375rem;font-weight:600;color:#1a1a1a}.screen-details p{margin:.25rem 0 0;font-size:.8125rem;color:#666}.screen-status{display:flex;align-items:center}.live-indicator{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:#ef4444;color:#fff;border-radius:4px;font-size:.75rem;font-weight:700;letter-spacing:.5px}.live-dot{width:8px;height:8px;background:#fff;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.screen-share-note{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;background:#e3f2fd;border-radius:8px;border:1px solid #90caf9}.screen-share-note svg{flex-shrink:0;color:#1976d2;margin-top:.125rem}.screen-share-note p{margin:0;font-size:.8125rem;color:#1565c0;line-height:1.5}.whiteboard-room[data-theme=dark] .screen-share-indicator.sharing{background:#ef4444f2}.whiteboard-room[data-theme=dark] .screen-share-indicator.viewing{background:#3b82f6f2}.whiteboard-room[data-theme=dark] .shared-screen-item{background:#2a2a2a;border-color:#3a3a3a}.whiteboard-room[data-theme=dark] .screen-details h3{color:#e0e0e0}.whiteboard-room[data-theme=dark] .screen-details p{color:#999}.whiteboard-room[data-theme=dark] .screen-share-note{background:#1e3a5f;border-color:#2563eb}.whiteboard-room[data-theme=dark] .screen-share-note svg{color:#60a5fa}.whiteboard-room[data-theme=dark] .screen-share-note p{color:#93c5fd}.resume-screen-share-modal{max-width:500px;text-align:center}.resume-icon{width:80px;height:80px;margin:0 auto 1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.resume-screen-share-modal h2{margin:0 0 1rem;font-size:1.5rem;font-weight:700;color:#1a1a1a}.resume-note{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 1.25rem;background:#fff3cd;border:1px solid #ffc107;border-radius:6px;margin:1.5rem 0;color:#856404;font-size:.875rem;font-weight:500}.resume-note svg{flex-shrink:0;color:#ffc107}.btn-resume-share{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.5rem;justify-content:center}.btn-resume-share:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.whiteboard-room[data-theme=dark] .resume-screen-share-modal h2{color:#e0e0e0}.whiteboard-room[data-theme=dark] .resume-note{background:#3a3a2a;border-color:#ffc107;color:#ffd54f}@media (min-width: 768px){.sidebar-toggle,.sidebar-handle{display:none!important}}@media (max-width: 1024px){.room-header{padding:.75rem 1rem;flex-wrap:wrap}.room-info-header{gap:1rem;flex-wrap:wrap}.room-name{font-size:.9375rem}.room-id{font-size:.75rem}.btn-copy{padding:.375rem .75rem;font-size:.75rem}.permission-badges{width:100%;order:3}.toolbar{width:56px;padding:.75rem .5rem}.tool-btn{width:40px;height:40px}.sidebar{width:280px}.canvas-container{width:calc(100% - 336px)}}@media (max-width: 767px){.whiteboard-room{position:relative}.room-header{padding:.75rem;flex-direction:column;align-items:stretch;gap:.75rem}.room-info-header{flex-direction:column;align-items:flex-start;gap:.5rem}.room-name{font-size:.875rem}.room-id{font-size:.6875rem;padding:.25rem .5rem}.btn-copy{padding:.375rem .625rem;font-size:.6875rem}.btn-copy svg{width:12px;height:12px}.permission-badges{display:flex;flex-wrap:wrap;gap:.375rem}.permission-mode-badge{font-size:.6875rem;padding:.25rem .5rem}.permission-mode-badge svg{width:10px;height:10px}.btn-waiting-room{font-size:.75rem;padding:.375rem .625rem}.read-only-badge{font-size:.6875rem;padding:.25rem .5rem}.room-users-count{font-size:.75rem}.header-actions{display:flex;gap:.5rem;width:100%}.btn-snapshot,.btn-theme-toggle,.btn-leave{flex:1;font-size:.75rem;padding:.5rem}.btn-snapshot svg,.btn-theme-toggle svg,.btn-leave svg{width:14px;height:14px}.btn-header-menu{padding:.5rem}.room-main{flex-direction:column;height:calc(100vh - 140px)}.toolbar{position:fixed;bottom:0;left:0;right:0;width:100%;height:auto;flex-direction:row;padding:.75rem;gap:.5rem;overflow-x:auto;overflow-y:hidden;z-index:100;border-top:1px solid #e0e0e0;border-left:none;justify-content:flex-start;-webkit-overflow-scrolling:touch}.toolbar::-webkit-scrollbar{height:4px}.tool-btn{width:44px;height:44px;flex-shrink:0}.tool-divider{width:1px;height:32px;margin:0 .25rem}.color-palette{flex-direction:row;gap:.375rem}.color-btn{width:32px;height:32px;flex-shrink:0}.brush-size-control{flex-direction:row;align-items:center;gap:.5rem}.brush-size-label{font-size:.75rem;min-width:32px}.brush-size-slider-container{width:80px;height:auto}.brush-size-slider{width:80px;height:4px;transform:none}.canvas-container{width:100%;height:50%;flex:1}.sidebar{position:fixed;bottom:68px;left:0;right:0;width:100%;height:40%;max-height:400px;border-left:none;border-top:1px solid #e0e0e0;border-radius:16px 16px 0 0;z-index:99;transform:translateY(0);transition:transform .3s ease}.sidebar-tabs{padding:.75rem;gap:.5rem;border-bottom:1px solid #e0e0e0}.tab-btn{padding:.5rem .875rem;font-size:.8125rem}.tab-btn svg{width:14px;height:14px}.tab-content{height:calc(100% - 120px)}.chat-container{height:100%}.chat-messages{height:calc(100% - 60px);padding:.75rem}.chat-message{max-width:85%;padding:.625rem .875rem}.message-header{font-size:.6875rem}.message-text{font-size:.8125rem}.chat-input-container{padding:.75rem}.chat-input{font-size:.875rem;padding:.625rem .875rem}.btn-file-share,.btn-send{padding:.625rem .875rem;font-size:.8125rem}.chat-disabled{padding:1.5rem;font-size:.8125rem}.users-container,.user-item{padding:.75rem}.user-avatar{width:36px;height:36px;font-size:.875rem}.user-name{font-size:.875rem}.user-badge-you,.user-badge-host{font-size:.625rem;padding:.125rem .375rem}.user-status{font-size:.6875rem}.user-menu-btn{padding:.375rem}.sidebar-actions{padding:.75rem;gap:.5rem}.sidebar-btn{padding:.625rem;font-size:.75rem}.sidebar-btn svg{width:14px;height:14px}.modal-overlay{padding:1rem}.modal-content{max-width:calc(100% - 2rem);padding:1.5rem;max-height:90vh;overflow-y:auto}.modal-content h2{font-size:1.125rem}.modal-description{font-size:.8125rem}.permission-options{gap:.75rem}.permission-option{padding:.875rem}.permission-option h3{font-size:.875rem}.permission-option p{font-size:.75rem}.users-checklist{max-height:200px}.user-checkbox{padding:.75rem;font-size:.875rem}.screen-share-indicator{top:.75rem;padding:.5rem 1rem;font-size:.75rem}.indicator-content{gap:.5rem}.indicator-content svg{width:16px;height:16px}.viewer-avatar{width:28px;height:28px;font-size:.75rem}.live-badge{font-size:.625rem;padding:.25rem .5rem}.live-dot{width:6px;height:6px}.waiting-room-panel{width:100%;max-width:100%;right:0;left:0;bottom:68px;border-radius:16px 16px 0 0}.waiting-user-item{padding:.875rem}.waiting-user-avatar{width:36px;height:36px;font-size:.875rem}.waiting-user-name{font-size:.875rem}.waiting-user-time{font-size:.6875rem}.btn-approve,.btn-reject{padding:.5rem .75rem;font-size:.75rem}}@media (max-width: 480px){.room-header{padding:.625rem}.room-name{font-size:.8125rem}.btn-snapshot,.btn-theme-toggle,.btn-leave{font-size:.6875rem;padding:.5rem .375rem}.toolbar{padding:.625rem;gap:.375rem}.tool-btn{width:40px;height:40px}.color-btn{width:28px;height:28px}.brush-size-slider-container{width:60px}.sidebar{max-height:350px}.chat-message{padding:.5rem .75rem}.message-text{font-size:.75rem}.user-avatar{width:32px;height:32px;font-size:.8125rem}.modal-content{padding:1.25rem}}@media (max-width: 767px) and (orientation: landscape){.room-main{flex-direction:row}.canvas-container{width:60%;height:100%}.sidebar{position:relative;width:40%;height:100%;max-height:none;bottom:auto;border-radius:0;border-left:1px solid #e0e0e0;border-top:none}.toolbar{position:fixed;bottom:0;left:0;width:60%;height:56px}}.whiteboard-room[data-theme=dark] .toolbar,.whiteboard-room[data-theme=dark] .sidebar{background:#1a1a1a;border-top-color:#2a2a2a}@media (max-width: 767px){.whiteboard-room[data-theme=dark] .sidebar-tabs{border-bottom-color:#2a2a2a}}.whiteboard-room.fullscreen-mode{background:#fafafa}.whiteboard-room.fullscreen-mode .room-main{width:100vw;height:100vh}.whiteboard-room.fullscreen-mode .canvas-container{padding:0;border-radius:0;align-items:stretch;justify-content:stretch}.whiteboard-room.fullscreen-mode .infinite-canvas-container{width:100%;height:100%}.whiteboard-room.fullscreen-mode .canvas{border-radius:0;border:none;box-shadow:none}.btn-exit-fullscreen{position:absolute;top:20px;right:20px;z-index:100;background:#fffffff2;border:1px solid #d0d0d0;padding:.75rem 1.25rem;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s;color:#1a1a1a;box-shadow:0 4px 12px #00000026;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.btn-exit-fullscreen:hover{background:#fff;border-color:#1a1a1a;transform:translateY(-2px);box-shadow:0 6px 16px #0003}.btn-exit-fullscreen svg{flex-shrink:0}.btn-toggle-sidebar{background:#fff;border:1px solid #d0d0d0;padding:.5rem .75rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s;color:#1a1a1a}.btn-toggle-sidebar:hover{border-color:#1a1a1a;background:#f9f9f9}.btn-toggle-sidebar.hidden{background:#f0f0f0;border-color:#b0b0b0}.btn-toggle-sidebar svg{flex-shrink:0}[data-theme=dark] .btn-toggle-sidebar{background:#2a2a2a;border-color:#404040;color:#fff}[data-theme=dark] .btn-toggle-sidebar:hover{border-color:#606060;background:#3a3a3a}[data-theme=dark] .btn-toggle-sidebar.hidden{background:#1a1a1a;border-color:#505050}.btn-fullscreen{background:#fff;border:1px solid #d0d0d0;padding:.5rem .75rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.375rem;transition:all .2s;color:#1a1a1a}.btn-fullscreen:hover{border-color:#1a1a1a;background:#f9f9f9}.btn-fullscreen svg{flex-shrink:0}[data-theme=dark] .whiteboard-room.fullscreen-mode{background:#1a1a1a}[data-theme=dark] .btn-exit-fullscreen{background:#2d2d2df2;border-color:#404040;color:#fff}[data-theme=dark] .btn-exit-fullscreen:hover{background:#2d2d2d;border-color:#606060}[data-theme=dark] .btn-fullscreen{background:#2a2a2a;border-color:#404040;color:#fff}[data-theme=dark] .btn-fullscreen:hover{border-color:#606060;background:#3a3a3a}@media (max-width: 767px){.btn-exit-fullscreen{top:10px;right:10px;padding:.625rem 1rem;font-size:.8125rem}}@media (max-width: 767px){.whiteboard-room{position:relative;overflow:hidden}.room-header{padding:.75rem 1rem;background:linear-gradient(180deg,#fff,#fafafa);border-bottom:1px solid #e5e7eb;box-shadow:0 1px 3px #0000000d;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:.75rem}.room-info-header{flex:1;min-width:0;display:flex;align-items:center;gap:.5rem}.room-name{font-size:.9375rem;font-weight:600;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-id,.btn-copy,.permission-badges{display:none}.btn-waiting-room{padding:.375rem .625rem;font-size:.75rem;border-radius:6px}.read-only-badge{padding:.25rem .5rem;font-size:.75rem;border-radius:4px}.room-users-count{display:none}.header-actions{display:flex;gap:.5rem;align-items:center}.btn-toggle-sidebar,.btn-fullscreen,.btn-snapshot,.btn-theme-toggle,.btn-header-menu{padding:.5rem;min-width:36px;height:36px;border-radius:8px;font-size:0}.btn-toggle-sidebar svg,.btn-fullscreen svg,.btn-snapshot svg,.btn-theme-toggle svg,.btn-header-menu svg{width:18px;height:18px;margin:0}.btn-snapshot{display:none}.btn-leave{padding:.5rem .75rem;font-size:.8125rem;border-radius:8px}.room-main{height:calc(100vh - 56px);display:flex;flex-direction:column;position:relative}.canvas-container{flex:1;width:100%;padding:0;background:#fafafa;position:relative}.toolbar{position:fixed;bottom:20px;right:16px;background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:20px;padding:.5rem;box-shadow:0 8px 32px #0000001f,0 2px 8px #00000014;border:1px solid rgba(0,0,0,.06);z-index:100;display:flex;flex-direction:column;gap:.5rem;width:60px;max-height:calc(100vh - 120px);transition:all .3s cubic-bezier(.4,0,.2,1)}.toolbar:not(.expanded){width:60px}.toolbar:not(.expanded) .tool-btn:not(.active),.toolbar:not(.expanded) .tool-divider,.toolbar:not(.expanded) .color-palette,.toolbar:not(.expanded) .brush-size-control{display:none}.toolbar.expanded{overflow-y:auto;overflow-x:hidden}.toolbar.expanded::-webkit-scrollbar{width:4px}.toolbar.expanded::-webkit-scrollbar-track{background:transparent}.toolbar.expanded::-webkit-scrollbar-thumb{background:#0003;border-radius:2px}.toolbar:not(.expanded):after{content:"⋮";display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:600;color:#6b7280;height:36px;cursor:pointer;border-radius:10px;transition:all .2s}.toolbar:not(.expanded):active:after{background:#0000000d}.toolbar.expanded:before{content:"×";display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:300;color:#6b7280;height:40px;cursor:pointer;border-radius:10px;margin:-.5rem -.5rem .25rem;padding:.5rem;border-bottom:1px solid rgba(0,0,0,.06);transition:all .2s}.toolbar.expanded:before:active{background:#0000000d}.tool-btn{width:52px;height:52px;border-radius:14px;border:2px solid transparent;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.tool-btn svg{width:22px;height:22px;color:#4b5563;transition:all .2s}.tool-btn:active{transform:scale(.92)}.tool-btn.active{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:#3b82f6;box-shadow:0 4px 12px #3b82f64d}.tool-btn.active svg{color:#fff}.tool-divider{width:40px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,.1),transparent);margin:.25rem auto}.color-palette{display:flex;flex-direction:column;gap:.5rem;padding:.25rem 0}.color-btn{width:44px;height:44px;border-radius:12px;border:3px solid white;box-shadow:0 2px 8px #00000026,inset 0 0 0 1px #0000001a;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;flex-shrink:0}.color-btn:active{transform:scale(.9)}.color-btn.active{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633,0 4px 12px #0003;transform:scale(1.05)}.color-btn.active:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5)}.brush-size-control{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem 0}.brush-size-label{font-size:.8125rem;font-weight:600;color:#374151;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);padding:.375rem .625rem;border-radius:8px;min-width:44px;text-align:center;box-shadow:0 1px 3px #0000001a}.brush-size-slider-container{width:24px;height:100px;display:flex;align-items:center;justify-content:center}.brush-size-slider{-webkit-appearance:none;width:100px;height:6px;background:linear-gradient(90deg,#e5e7eb,#d1d5db);border-radius:3px;outline:none;transform:rotate(-90deg);transform-origin:center;cursor:pointer}.brush-size-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:linear-gradient(135deg,#3b82f6,#2563eb);border:3px solid white;border-radius:50%;cursor:pointer;box-shadow:0 2px 8px #3b82f666;transition:all .2s}.brush-size-slider::-webkit-slider-thumb:active{transform:scale(1.2)}.sidebar-toggle{position:fixed;bottom:20px;left:16px;width:60px;height:60px;background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:101;box-shadow:0 8px 24px #3b82f666,0 2px 8px #0000001a;transition:all .3s cubic-bezier(.4,0,.2,1)}.sidebar-toggle:active{transform:scale(.92)}.sidebar-toggle svg{width:26px;height:26px;color:#fff}.sidebar-toggle.active{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:0 8px 24px #ef444466,0 2px 8px #0000001a}.sidebar-toggle-badge{position:absolute;top:-2px;right:-2px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:.6875rem;font-weight:700;padding:.25rem .5rem;border-radius:12px;min-width:24px;text-align:center;box-shadow:0 2px 8px #ef444466;border:2px solid white}.sidebar{position:fixed;bottom:0;left:0;right:0;width:100%;height:75vh;max-height:700px;background:#fff;border-radius:24px 24px 0 0;z-index:102;transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 32px #0000001f;display:flex;flex-direction:column;overflow:hidden}.sidebar.open{transform:translateY(0)}.sidebar-handle{width:100%;height:40px;display:flex;align-items:center;justify-content:center;cursor:grab;background:#fff;border-radius:24px 24px 0 0;flex-shrink:0}.sidebar-handle:active{cursor:grabbing}.sidebar-handle-bar{width:48px;height:5px;background:#d1d5db;border-radius:3px}.sidebar-tabs{display:flex;padding:0 1rem;gap:.5rem;border-bottom:1px solid #e5e7eb;background:#fafafa;flex-shrink:0}.tab-btn{flex:1;padding:.875rem 1rem;background:transparent;border:none;border-bottom:3px solid transparent;font-size:.875rem;font-weight:600;color:#6b7280;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem;border-radius:8px 8px 0 0}.tab-btn svg{width:18px;height:18px}.tab-btn.active{color:#3b82f6;background:#fff;border-bottom-color:#3b82f6}.tab-badge{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:.6875rem;font-weight:700;padding:.125rem .5rem;border-radius:10px;min-width:20px;text-align:center}.tab-content{flex:1;overflow-y:auto;overflow-x:hidden}.chat-container{height:100%;display:flex;flex-direction:column;background:#fff}.chat-messages{flex:1;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem}.chat-messages::-webkit-scrollbar{width:4px}.chat-messages::-webkit-scrollbar-track{background:transparent}.chat-messages::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:2px}.chat-message{display:flex;flex-direction:column;gap:.375rem}.message-header{font-size:.75rem;font-weight:600;color:#6b7280;padding:0 .25rem}.message-text{font-size:.9375rem;padding:.75rem 1rem;border-radius:16px;line-height:1.5;max-width:85%;word-wrap:break-word}.chat-message-other .message-text{background:#f3f4f6;color:#111827;border-bottom-left-radius:4px}.chat-message-own .message-text{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}.chat-input-container{padding:1rem;background:#fff;border-top:1px solid #e5e7eb;display:flex;gap:.75rem;align-items:center}.chat-input{flex:1;padding:.875rem 1rem;border:2px solid #e5e7eb;border-radius:12px;font-size:.9375rem;background:#fafafa;transition:all .2s}.chat-input:focus{outline:none;border-color:#3b82f6;background:#fff;box-shadow:0 0 0 3px #3b82f61a}.btn-send{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;padding:.875rem 1.25rem;border-radius:12px;font-size:.9375rem;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #3b82f64d;transition:all .2s}.btn-send:active{transform:scale(.95)}.users-container{padding:1rem}.users-list{display:flex;flex-direction:column;gap:.75rem}.user-item{display:flex;align-items:center;gap:.875rem;padding:1rem;background:#fafafa;border-radius:12px;transition:all .2s}.user-item:active{background:#f3f4f6}.user-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600;color:#fff;flex-shrink:0}.user-info{flex:1;min-width:0}.user-name{font-size:.9375rem;font-weight:600;color:#111827;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.user-badge-you{font-size:.6875rem;font-weight:700;color:#3b82f6;background:#dbeafe;padding:.125rem .5rem;border-radius:6px}.user-badge-host{font-size:.6875rem;font-weight:700;color:#8b5cf6;background:#ede9fe;padding:.125rem .5rem;border-radius:6px}.user-status{font-size:.8125rem;color:#10b981;font-weight:500;margin-top:.125rem}.sidebar-actions{padding:1rem;background:#fff;border-top:1px solid #e5e7eb;display:flex;flex-direction:column;gap:.75rem}.sidebar-btn{width:100%;padding:.875rem 1rem;background:#fafafa;border:2px solid #e5e7eb;border-radius:12px;font-size:.9375rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.625rem;transition:all .2s;color:#374151}.sidebar-btn:active{transform:scale(.98);background:#f3f4f6}.sidebar-btn svg{width:20px;height:20px}.btn-exit-fullscreen{top:16px;right:16px;padding:.75rem 1.25rem;font-size:.875rem;border-radius:12px;background:#fffffffa;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 4px 16px #00000026}.whiteboard-room.fullscreen-mode .toolbar,.whiteboard-room.fullscreen-mode .sidebar-toggle{display:none}[data-theme=dark] .room-header{background:linear-gradient(180deg,#1f2937,#111827);border-bottom-color:#374151}[data-theme=dark] .toolbar{background:#1f2937fa;border-color:#ffffff1a}[data-theme=dark] .tool-btn svg{color:#9ca3af}[data-theme=dark] .sidebar{background:#1f2937}[data-theme=dark] .sidebar-tabs{background:#111827;border-bottom-color:#374151}[data-theme=dark] .tab-btn.active,[data-theme=dark] .chat-container{background:#1f2937}[data-theme=dark] .chat-message-other .message-text{background:#374151;color:#f3f4f6}[data-theme=dark] .chat-input{background:#111827;border-color:#374151;color:#f3f4f6}[data-theme=dark] .user-item{background:#111827}[data-theme=dark] .sidebar-btn{background:#111827;border-color:#374151;color:#f3f4f6}}@media (max-width: 767px) and (orientation: landscape){.room-header{min-height:48px;padding:.5rem 1rem}.toolbar{bottom:12px;right:12px;width:56px}.tool-btn{width:48px;height:48px}.sidebar-toggle{width:56px;height:56px;bottom:12px;left:12px}.sidebar{height:100vh;width:85%;max-width:400px;border-radius:0 24px 24px 0;transform:translate(-100%);left:0;right:auto}.sidebar.open{transform:translate(0)}.sidebar-handle{display:none}}@media (max-width: 480px){.toolbar{width:56px;bottom:16px;right:12px}.tool-btn{width:48px;height:48px}.sidebar-toggle{width:56px;height:56px;bottom:16px;left:12px}}.waiting-room{display:flex;align-items:center;justify-content:center;min-height:100vh;background:#f5f5f5}.waiting-content{text-align:center;max-width:500px;padding:3rem;background:#fff;border-radius:12px;box-shadow:0 4px 20px #0000001a}.waiting-icon{width:80px;height:80px;margin:0 auto 2rem;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border-radius:50%;color:#1a1a1a}.spinner{animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.waiting-content h1{margin:0 0 1rem;font-size:1.75rem;font-weight:700;color:#1a1a1a}.waiting-content p{margin:0 0 2rem;font-size:1rem;color:#666;line-height:1.6}.btn-cancel-request{padding:.75rem 2rem;background:#fff;border:1px solid #d0d0d0;border-radius:6px;font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-cancel-request:hover{border-color:#1a1a1a;background:#f9f9f9}.waiting-header{position:absolute;top:2rem;left:2rem}.waiting-logo{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:700;color:#1a1a1a}.logo-image{width:52px;height:52px;object-fit:contain;border-radius:8px;background:transparent}@media (max-width: 1024px){.waiting-room-container{padding:1.5rem}.waiting-room-card{padding:2.5rem 2rem;max-width:520px}}@media (max-width: 767px){.waiting-room-container{padding:1rem}.waiting-room-logo{margin-bottom:1.5rem}.waiting-room-logo-icon{width:56px;height:56px}.logo-image{width:48px;height:48px}.waiting-room-logo h1{font-size:1.375rem}.waiting-room-card{padding:2rem 1.5rem;max-width:100%}.waiting-icon{width:72px;height:72px}.waiting-icon svg{width:36px;height:36px}.waiting-room-card h2{font-size:1.25rem}.waiting-room-card p{font-size:.875rem}.waiting-spinner{width:40px;height:40px;border-width:3px}.waiting-status{font-size:.875rem}.waiting-info{padding:.875rem;font-size:.8125rem}.waiting-info svg{width:14px;height:14px}.btn-cancel-waiting{padding:.75rem;font-size:.875rem}}@media (max-width: 480px){.waiting-room-container{padding:.75rem}.waiting-room-logo-icon{width:48px;height:48px}.logo-image{width:40px;height:40px}.waiting-room-logo h1{font-size:1.25rem}.waiting-room-card{padding:1.75rem 1.25rem}.waiting-icon{width:64px;height:64px}.waiting-icon svg{width:32px;height:32px}.waiting-room-card h2{font-size:1.125rem}.waiting-spinner{width:36px;height:36px}.waiting-info{padding:.75rem;font-size:.75rem}}.profile-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#f5f5f5}.profile-card{background:#fff;padding:2rem;border-radius:10px;box-shadow:0 2px 10px #0000001a;width:100%;max-width:500px}.profile-card h1{margin-bottom:1.5rem;text-align:center}.profile-info p{padding:.75rem;border-bottom:1px solid #eee}.profile-card button{width:100%;padding:.75rem;margin-bottom:.5rem;border:none;border-radius:5px;cursor:pointer;font-size:1rem}.profile-card button:first-of-type{background:#e74c3c;color:#fff}.profile-card button:last-of-type{background:#667eea;color:#fff}.profile-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f5f5f5;padding:2rem}.profile-logo{display:flex;flex-direction:column;align-items:center;margin-bottom:3rem}.profile-logo-icon{width:80px;height:80px;background:transparent;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:0}.logo-image{width:64px;height:64px;object-fit:contain;border-radius:12px;background:transparent}.profile-logo h1{font-size:2rem;font-weight:600;color:#1a1a1a;margin-top:0;margin-bottom:.5rem}.profile-logo p{font-size:1rem;color:#666;font-weight:400}.profile-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:2.5rem;width:100%;max-width:400px;text-align:center;box-shadow:0 4px 6px #0000000d}.profile-avatar{width:80px;height:80px;background:#1a1a1a;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;font-size:2rem;font-weight:700;color:#fff}.profile-card h2{font-size:1.5rem;font-weight:600;color:#1a1a1a;margin-bottom:.5rem}.profile-email{font-size:1rem;color:#666;margin-bottom:2rem}.profile-info{margin-bottom:2rem}.info-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #f5f5f5}.info-item:last-child{border-bottom:none}.info-label{font-size:.875rem;color:#666;font-weight:500}.info-value{font-size:.875rem;color:#1a1a1a;font-weight:500}.profile-actions{display:flex;flex-direction:column;gap:.75rem}.btn-secondary{background:#f5f5f5;border:1px solid #e0e0e0;color:#666;padding:.75rem 1.5rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:#e9ecef;border-color:#d0d0d0;color:#1a1a1a}.btn-logout{background:#1a1a1a;border:1px solid #1a1a1a;color:#fff;padding:.75rem 1.5rem;border-radius:6px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-logout:hover{background:#2a2a2a;border-color:#2a2a2a}.profile-back{margin-top:2rem}.profile-back button{background:none;border:none;color:#666;font-size:.875rem;cursor:pointer;transition:color .2s}.profile-back button:hover{color:#1a1a1a}@media (max-width: 480px){.profile-container{padding:1.5rem 1rem}.profile-card{padding:2rem 1.5rem}.profile-logo h1{font-size:1.75rem}.profile-avatar{width:64px;height:64px;font-size:1.5rem}}@media (max-width: 1024px){.profile-container{padding:1.5rem}.profile-card{padding:2.5rem 2rem;max-width:520px}}@media (max-width: 767px){.profile-container{padding:2rem 1rem 1rem}.profile-logo{margin-bottom:1.5rem}.profile-logo-icon{width:56px;height:56px}.logo-image{width:48px;height:48px}.profile-logo h1{font-size:1.375rem}.profile-card{padding:2rem 1.5rem;max-width:100%}.profile-avatar{width:80px;height:80px;font-size:2rem}.profile-card h2{font-size:1.25rem}.profile-email{font-size:.875rem}.profile-info{gap:1rem}.info-item{padding:.875rem}.info-label{font-size:.75rem}.info-value{font-size:.875rem}.profile-actions{flex-direction:column;gap:.75rem}.btn-edit,.btn-logout{width:100%;justify-content:center}.profile-back{margin-top:1.5rem}.profile-back a{font-size:.8125rem}}@media (max-width: 480px){.profile-container{padding:1.5rem .75rem .75rem}.profile-logo-icon{width:48px;height:48px}.logo-image{width:40px;height:40px}.profile-logo h1{font-size:1.25rem}.profile-card{padding:1.75rem 1.25rem}.profile-avatar{width:72px;height:72px;font-size:1.75rem}.profile-card h2{font-size:1.125rem}.info-item{padding:.75rem}.btn-edit,.btn-logout{padding:.75rem;font-size:.875rem}}.auth-provider-info{margin:1rem 0;display:flex;justify-content:center}.auth-provider-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:6px;font-size:.8125rem;font-weight:500;color:#6b7280}.auth-provider-badge.google{background:#fef3c7;border-color:#fbbf24;color:#92400e}.auth-provider-badge.local{background:#e0f2fe;border-color:#0284c7;color:#0c4a6e}.profile-avatar{position:relative}.profile-avatar .user-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid #e0e0e0}[data-theme=dark] .auth-provider-badge{background:#374151;border-color:#4b5563;color:#d1d5db}[data-theme=dark] .auth-provider-badge.google{background:#451a03;border-color:#92400e;color:#fbbf24}[data-theme=dark] .auth-provider-badge.local{background:#0c4a6e;border-color:#0284c7;color:#7dd3fc}*{margin:0;padding:0;box-sizing:border-box}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:#f5f5f5;color:#1a1a1a}#root{width:100%;min-height:100vh}.loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:1.2rem;color:#666}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.logo-image{background:transparent!important;box-shadow:none!important;border:none!important;padding:0!important}.logo-image{filter:none;mix-blend-mode:normal}