*{box-sizing:border-box;margin:0;padding:0}html{overflow-y:scroll}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#0ea5e9,#38bdf8);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;min-height:100vh;overflow-x:hidden;padding:0;position:relative}body:after,body:before{background:#ffffff1a;border-radius:50%;content:"";pointer-events:none;position:fixed;z-index:0}body:before{animation:float 20s ease-in-out infinite;height:300px;left:-100px;top:-100px;width:300px}body:after{animation:float 20s ease-in-out 5s infinite;bottom:-150px;height:400px;right:-150px;width:400px}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}#root{position:relative;z-index:1}.auth-container{align-items:center;display:flex;justify-content:center;min-height:100vh;padding:20px;position:relative}.auth-card{animation:fadeIn .4s ease-out;background:#fff;border-radius:24px;box-shadow:0 20px 60px #0000004d;max-width:440px;padding:48px;position:relative;width:100%;z-index:1}.auth-logo{margin-bottom:32px;text-align:center}.logo-icon{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:20px;box-shadow:0 10px 30px #0ea5e94d;display:flex;height:80px;justify-content:center;margin:0 auto 16px;width:80px}.logo-icon svg{stroke:#fff;stroke-width:2;height:40px;width:40px}.auth-logo h1{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#0ea5e9,#38bdf8);-webkit-background-clip:text;background-clip:text;color:#333;font-size:28px;font-weight:700;margin:0}.auth-header{margin-bottom:32px;text-align:center}.auth-header h2{color:#333;font-size:24px;font-weight:700;margin:0 0 8px}.auth-header p{color:#666;font-size:15px;margin:0}.auth-form{gap:20px}.auth-form,.form-group{display:flex;flex-direction:column}.form-group{gap:8px}.form-group label{align-items:center;display:flex;gap:10px;margin-bottom:2px}.form-group label svg{stroke:#0ea5e9;flex-shrink:0;height:16px;width:16px}.form-group input{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:12px;font-size:15px;outline:none;padding:14px 18px;transition:all .3s ease}.form-group input:focus{background:#fff;border-color:#0ea5e9;box-shadow:0 0 0 4px #0ea5e91a}.form-group input::placeholder{color:#999}.error-message{align-items:center;animation:shake .4s ease;border:2px solid #fcc;border-radius:12px;display:flex;font-weight:500;gap:10px;padding:14px 18px}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}.error-message svg{flex-shrink:0;height:20px;width:20px}.submit-btn{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 4px 15px #0ea5e966;display:flex;font-size:16px;font-weight:700;gap:12px;justify-content:center;margin-top:8px;min-height:56px;padding:16px 24px;width:100%}.submit-btn svg{flex-shrink:0;height:22px;width:22px}.submit-btn:hover:not(:disabled){box-shadow:0 8px 25px #0ea5e980}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{opacity:.8;transform:none}.spinner-btn{animation:spin .8s linear infinite;border:3px solid #ffffff4d;border-radius:50%;border-top-color:#fff;flex-shrink:0;height:20px;width:20px}.auth-footer{border-top:2px solid #f0f0f0;margin-top:24px;padding-top:24px;text-align:center}.auth-footer p{color:#666;font-size:14px;margin:0}@media (max-width:480px){.auth-card{padding:32px 24px}.auth-logo h1{font-size:24px}.logo-icon{height:64px;width:64px}.logo-icon svg{height:32px;width:32px}.auth-header h2{font-size:20px}.form-group input{padding:12px 16px}.submit-btn{padding:14px}}.create-group-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:2000}.create-group-modal{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:500px;overflow-y:auto;width:100%}.modal-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;padding:24px 24px 16px}.modal-header h2{color:#333;font-size:22px;margin:0}.close-btn{background:none;border:none;color:#999;cursor:pointer;padding:4px;transition:color .2s ease}.close-btn svg{height:24px;width:24px}.close-btn:hover{color:#333}.create-group-form{padding:24px}.form-group{margin-bottom:24px}.form-group label{color:#333;font-size:14px}.form-group input[type=text]{border:2px solid #e0e0e0;border-radius:10px;font-size:15px;outline:none;padding:12px 16px;transition:border-color .3s ease;width:100%}.form-group input[type=text]:focus{border-color:#0ea5e9}.users-list{border:2px solid #e0e0e0;border-radius:10px;max-height:300px;overflow-y:auto;padding:8px}.user-item{border-radius:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:12px;transition:background .2s ease}.user-item:hover{background:#f8f9fa}.user-row{align-items:center;display:flex;gap:12px}.user-item input[type=checkbox]{cursor:pointer;flex-shrink:0;height:20px;width:20px}.user-name{font-weight:600}.user-email-hint{margin-left:32px}.error-message{background:#fee;border-radius:8px;color:#c33;font-size:14px;margin-bottom:16px;padding:12px}.form-actions button{border:none;border-radius:10px;cursor:pointer;flex:1 1;font-size:15px;font-weight:600;padding:14px;transition:all .2s ease}.submit-btn:hover:not(:disabled){box-shadow:0 5px 15px #0ea5e94d}@media (max-width:480px){.create-group-modal{max-width:100%}.modal-header{padding:20px 20px 12px}.modal-header h2{font-size:20px}.create-group-form{padding:20px}.users-list{max-height:250px}}.search-input{border-radius:10px;margin-bottom:12px;padding:12px 16px;transition:border-color .3s ease}.no-users-found{padding:40px 20px;text-align:center}.no-users-found p{color:#999;font-size:15px}.group-settings-overlay{align-items:center;background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:2000}.group-settings-modal{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;max-height:90vh;max-width:600px;overflow-y:auto;width:100%}.settings-content{padding:24px}.group-info-section{border-bottom:2px solid #f0f0f0;margin-bottom:24px;padding-bottom:24px;text-align:center}.group-info-section h3{color:#333;font-size:24px;margin-bottom:8px}.group-info-section p{color:#666;font-size:14px}.settings-section{margin-bottom:32px}.settings-section h4{color:#333;font-size:16px;font-weight:600;margin-bottom:16px}.members-list{display:flex;flex-direction:column;gap:8px}.member-item{align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:10px;display:flex;justify-content:space-between;padding:14px 16px;transition:all .2s ease}.member-item:hover{border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e91a}.member-info{align-items:center;display:flex;flex:1 1;gap:8px}.member-name{color:#333;font-size:15px;font-weight:500}.creator-badge{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-radius:10px;color:#fff;font-size:11px;font-weight:600;letter-spacing:.5px;padding:3px 8px;text-transform:uppercase}.remove-member-btn{background:#ff4757;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:6px 16px;transition:all .2s ease}.remove-member-btn:hover:not(:disabled){background:#ee5a6f}.remove-member-btn:disabled{cursor:not-allowed;opacity:.5}.add-members-list{display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}.add-member-item{align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:10px;display:flex;justify-content:space-between;padding:14px 16px;transition:all .2s ease}.add-member-item:hover{border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e91a}.add-member-info{display:flex;flex:1 1;flex-direction:column;gap:4px}.user-name{color:#333;font-size:15px;font-weight:500}.user-email-hint{color:#999;font-size:12px}.add-member-btn{background:#0ea5e9;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:6px 16px;transition:all .2s ease}.add-member-btn:hover:not(:disabled){background:#0284c7}.add-member-btn:disabled{cursor:not-allowed;opacity:.5}.no-users{color:#999;font-size:14px;padding:20px;text-align:center}.danger-zone{border-top:2px solid #fee;margin-top:24px;padding:32px 24px 24px;text-align:center}.danger-zone h4{color:#c33;margin-bottom:16px}.delete-group-btn{background:#ff4757;border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:15px;font-weight:600;margin:0 auto;max-width:300px;padding:14px 24px;transition:all .2s ease;width:100%}.delete-group-btn:hover{background:#ee5a6f;box-shadow:0 5px 15px #ff47574d;transform:translateY(-2px)}.delete-confirm{margin:0 auto;max-width:400px;text-align:center}.delete-confirm p{color:#c33;font-size:15px;font-weight:600;margin-bottom:20px}.confirm-actions{display:flex;gap:12px;justify-content:center}.cancel-delete-btn,.confirm-delete-btn{border:none;border-radius:10px;cursor:pointer;font-size:15px;font-weight:600;min-width:120px;padding:12px 24px;transition:all .2s ease}.confirm-delete-btn{background:#ff4757;color:#fff}.confirm-delete-btn:hover:not(:disabled){background:#ee5a6f;box-shadow:0 5px 15px #ff47574d;transform:translateY(-2px)}.confirm-delete-btn:disabled{cursor:not-allowed;opacity:.5}.cancel-delete-btn{background:#f0f0f0;color:#666}.cancel-delete-btn:hover{background:#e0e0e0}.not-creator-message{color:#999;padding:60px 20px;text-align:center}.not-creator-message svg{stroke-width:1.5;height:64px;margin-bottom:20px;opacity:.3;width:64px}.not-creator-message p{color:#666;font-size:15px}@media (max-width:480px){.group-settings-modal{max-width:100%}.settings-content{padding:20px}}.member-item.non-existent{background:#fff5f5;border-color:#fecaca;opacity:.7}.member-item.non-existent .member-name{color:#991b1b;text-decoration:line-through}.deleted-badge{background:#fee2e2;border:1px solid #fecaca;border-radius:10px;color:#991b1b;font-size:11px;font-weight:600;letter-spacing:.5px;padding:3px 8px;text-transform:uppercase}.meeting-overlay{align-items:center;background:#000000f2;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:3000}.meeting-modal{background:#1a1a1a;border-radius:20px;box-shadow:0 20px 60px #00000080;display:flex;flex-direction:column;height:90vh;max-width:1400px;overflow:hidden;width:100%}.meeting-header{align-items:center;background:#2a2a2a;border-bottom:2px solid #333;display:flex;justify-content:space-between;padding:20px 24px}.meeting-header h2{color:#fff;font-size:20px;margin:0}.close-meeting-btn{align-items:center;background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.close-meeting-btn svg{height:20px;width:20px}.close-meeting-btn:hover{background:#fff3}.meeting-lobby{align-items:center;display:flex;flex:1 1;flex-direction:column;gap:32px;justify-content:center;padding:40px}.lobby-preview{aspect-ratio:16/9;background:#000;border-radius:16px;max-width:640px;overflow:hidden;position:relative;width:100%}.preview-video{height:100%;object-fit:cover;transform:scaleX(-1);width:100%}.preview-controls{bottom:20px;display:flex;gap:16px;left:50%;position:absolute;transform:translateX(-50%)}.join-meeting-btn{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:12px;box-shadow:0 4px 20px #0ea5e966;color:#fff;cursor:pointer;font-size:18px;font-weight:700;padding:16px 48px;transition:all .3s ease}.join-meeting-btn:hover:not(:disabled){box-shadow:0 8px 30px #0ea5e980;transform:translateY(-2px)}.join-meeting-btn:disabled{cursor:not-allowed;opacity:.6}.meeting-grid{grid-gap:16px;align-content:start;display:grid;flex:1 1;gap:16px;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));overflow-y:auto;padding:20px}.meeting-grid:has(.video-container:only-child){grid-template-columns:1fr;place-items:center}.meeting-grid:has(.video-container:only-child) .video-container{max-width:800px;width:100%}.meeting-grid:has(.video-container:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}.meeting-grid:has(.video-container:nth-child(3)){grid-template-columns:repeat(2,1fr)}.meeting-grid:has(.video-container:nth-child(5)){grid-template-columns:repeat(3,1fr)}.meeting-grid:has(.video-container:nth-child(7)){grid-template-columns:repeat(3,1fr)}.video-container{aspect-ratio:16/9;background:#000;border-radius:12px;height:100%;min-height:200px;overflow:hidden;position:relative;width:100%}.video-container.local{border:2px solid #0ea5e9}.participant-video{height:100%;object-fit:cover;width:100%}.video-container.local .participant-video{transform:scaleX(-1)}.video-container.local.back-camera .participant-video{transform:scaleX(1)}.video-label{align-items:center;background:#000000b3;border-radius:8px;bottom:12px;color:#fff;display:flex;font-size:14px;font-weight:600;gap:8px;left:12px;padding:6px 12px;position:absolute}.muted-icon{font-size:16px}.meeting-controls{background:#2a2a2a;border-top:2px solid #333;gap:16px;padding:24px}.control-btn,.meeting-controls{align-items:center;display:flex;justify-content:center}.control-btn{background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;height:56px;transition:all .2s ease;width:56px}.control-btn svg{stroke-width:2;height:24px;width:24px}.control-btn:hover{background:#fff3;transform:scale(1.1)}.control-btn.disabled{background:#ef4444cc}.control-btn.disabled:hover{background:#ef4444}.leave-btn{background:#ef4444cc}.leave-btn:hover{background:#ef4444;transform:scale(1.1)}.participants-count{align-items:center;background:#ffffff1a;border-radius:24px;color:#fff;display:flex;font-size:16px;font-weight:600;gap:8px;margin-left:16px;padding:12px 20px}.participants-count svg{height:20px;width:20px}@media (max-width:768px){.meeting-modal{border-radius:0;height:100vh;max-width:100%}.meeting-overlay{padding:0}.meeting-header{padding:16px 20px}.meeting-header h2{font-size:16px}.meeting-grid{gap:12px;grid-template-columns:1fr!important;padding:12px}.meeting-grid .video-container{max-width:100%}.meeting-controls{gap:12px;padding:16px}.control-btn{height:48px;width:48px}.control-btn svg{height:20px;width:20px}.participants-count{font-size:14px;padding:8px 16px}.lobby-preview{max-width:100%}.join-meeting-btn{font-size:16px;padding:14px 32px;width:100%}}@media (max-width:480px){.meeting-controls{gap:8px}.control-btn{height:44px;width:44px}.participants-count{font-size:13px;margin-left:8px;padding:6px 12px}}.lobby-loading{align-items:center;display:flex;flex-direction:column;gap:20px;justify-content:center;padding:60px}.lobby-loading .spinner{animation:spin 1s linear infinite;border:4px solid #fff3;border-radius:50%;border-top-color:#0ea5e9;height:50px;width:50px}.lobby-loading p{color:#999;font-size:16px}.video-off-overlay{align-items:center;background:#1a1a1a;bottom:0;color:#666;display:flex;flex-direction:column;gap:16px;justify-content:center;left:0;position:absolute;right:0;top:0}.video-off-overlay svg{stroke-width:1.5;height:64px;width:64px}.video-off-overlay p{font-size:18px;font-weight:600;margin:0}.meeting-header-left{align-items:center;display:flex;gap:16px}.meeting-header-right{align-items:center;display:flex;gap:12px}.stage-badge{background:linear-gradient(135deg,#f59e0b,#f97316);border-radius:20px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.5px;padding:6px 16px;text-transform:uppercase}.admin-menu-btn{align-items:center;background:#ffffff1a;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.admin-menu-btn svg{height:20px;width:20px}.admin-menu-btn:hover{background:#fff3}.admin-menu{background:#2a2a2a;border-radius:16px;box-shadow:0 10px 40px #00000080;max-height:500px;overflow:hidden;position:absolute;right:20px;top:80px;width:350px;z-index:100}.admin-menu-header{align-items:center;background:#333;border-bottom:2px solid #444;display:flex;justify-content:space-between;padding:16px 20px}.admin-menu-header h3{color:#fff;font-size:16px;margin:0}.close-admin-menu{align-items:center;background:none;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:28px;height:28px;justify-content:center;line-height:1;padding:0;transition:background .2s ease;width:28px}.close-admin-menu:hover{background:#ffffff1a}.admin-menu-content{max-height:420px;overflow-y:auto;padding:16px}.admin-control-item{margin-bottom:20px}.admin-control-item label{align-items:center;color:#fff;cursor:pointer;display:flex;font-size:15px;font-weight:600;gap:12px}.admin-control-item input[type=checkbox]{accent-color:#0ea5e9;cursor:pointer;height:20px;width:20px}.admin-control-desc{color:#999;font-size:13px;margin:6px 0 0 32px}.participants-control{margin-top:24px}.participants-control h4{color:#999;font-size:14px;letter-spacing:.5px;margin:0 0 12px;text-transform:uppercase}.participant-control-item{align-items:center;background:#ffffff0d;border-radius:8px;display:flex;justify-content:space-between;margin-bottom:8px;padding:12px}.participant-control-name{color:#fff;font-size:14px;font-weight:500}.participant-control-actions{display:flex;gap:8px}.control-action-btn{align-items:center;border:none;border-radius:6px;cursor:pointer;display:flex;height:32px;justify-content:center;transition:all .2s ease;width:32px}.control-action-btn svg{height:16px;width:16px}.control-action-btn.mute{background:#ef444433;color:#ef4444}.control-action-btn.mute:hover{background:#ef44444d}.control-action-btn.unmute{background:#22c55e33;color:#22c55e}.control-action-btn.unmute:hover{background:#22c55e4d}.control-action-btn.add-stage{background:#0ea5e933;color:#0ea5e9}.control-action-btn.add-stage:hover{background:#0ea5e94d}.control-action-btn.remove-stage{background:#f59e0b33;color:#f59e0b}.control-action-btn.remove-stage:hover{background:#f59e0b4d}.video-controls-overlay{display:flex;gap:8px;position:absolute;right:12px;top:12px;z-index:10}.flip-camera-btn,.switch-camera-btn{align-items:center;background:#000000b3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.flip-camera-btn svg,.switch-camera-btn svg{height:20px;width:20px}.flip-camera-btn:hover,.switch-camera-btn:hover{background:#000000e6;transform:scale(1.1)}.flip-camera-btn:active{transform:scale(1.1) rotate(180deg);transition:transform .3s ease}.camera-menu{background:#2a2a2a;border-radius:12px;box-shadow:0 8px 24px #00000080;min-width:200px;overflow:hidden;position:absolute;right:48px;top:48px}.camera-menu-item{background:none;border:none;color:#fff;cursor:pointer;display:block;font-size:14px;padding:12px 16px;text-align:left;transition:background .2s ease;width:100%}.camera-menu-item:hover{background:#ffffff1a}.camera-menu-item.active{background:#0ea5e933;color:#0ea5e9;font-weight:600}.stage-icon{font-size:14px;margin-left:4px}@media (max-width:768px){.admin-menu{left:10px;right:10px;width:auto}.meeting-header-left{flex:1 1}.stage-badge{font-size:11px;padding:4px 12px}}.message{position:relative;touch-action:pan-y;transition:transform .2s ease}.message.swiping{transition:none}.message:hover .reply-btn{animation:replyBtnSlide .2s ease;opacity:1}@keyframes replyBtnSlide{0%{opacity:0;transform:translateY(-50%) translateX(10px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}.own-message:hover .reply-btn{animation:replyBtnSlideLeft .2s ease}@keyframes replyBtnSlideLeft{0%{opacity:0;transform:translateY(-50%) translateX(-10px)}to{opacity:1;transform:translateY(-50%) translateX(0)}}.swipe-indicator{align-items:center;animation:swipePulse .5s ease-in-out infinite;background:#0ea5e9;border-radius:50%;color:#fff;display:flex;height:32px;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:32px}.swipe-indicator.swipe-right{right:-40px}.swipe-indicator.swipe-left{left:-40px}.swipe-indicator svg{stroke-width:2.5;height:18px;width:18px}@keyframes swipePulse{0%,to{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.1)}}.reply-reference{background:#0000000d;border-left:3px solid #0ea5e9;border-radius:6px;display:flex;gap:0;margin:0 8px 8px;padding:6px 10px}.own-message .reply-reference{background:#00000026;border-left-color:#fffc}.reply-content{display:flex;flex:1 1;flex-direction:column;gap:2px;min-width:0}.reply-author{color:#0ea5e9;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}.own-message .reply-author{color:#fff}.reply-text{color:#666;font-size:12px;font-style:italic;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.own-message .reply-text{color:#ffffffe6}.mention{background:#e8f3ff;border:1px solid #b6d7ff;border-radius:4px;color:#1d6fd8;font-weight:700;padding:2px 6px}.own-message .mention{background:#ffffff59;border:1px solid #fff6;color:#fff;font-weight:700}.other-message .mention{background:#e8f3ff;border:1px solid #b6d7ff;color:#1d6fd8;font-weight:700}.mention-me{animation:mentionPulse 2s ease-in-out;background:#fbbf244d;border:1px solid #fbbf2480;color:#f59e0b;font-weight:700}.own-message .mention-me{background:#fbbf2466;border:1px solid #fbbf2499;color:#fbbf24}@keyframes mentionPulse{0%,to{background:#fbbf244d}50%{background:#fbbf2480}}.reply-btn{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:50%;box-shadow:0 2px 8px #0000001a;color:#666;cursor:pointer;display:flex;height:32px;justify-content:center;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;width:32px;z-index:10}.reply-btn:before{background:#000c;border-radius:6px;color:#fff;content:"Reply";font-size:12px;font-weight:500;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;transition:opacity .2s ease;white-space:nowrap}.own-message .reply-btn:before{right:calc(100% + 8px)}.other-message .reply-btn:before{left:calc(100% + 8px)}.reply-btn:hover:before{opacity:1}.own-message .reply-btn{left:-40px}.other-message .reply-btn{right:-40px}.reply-btn:hover{background:#0ea5e9;border-color:#0ea5e9;box-shadow:0 4px 12px #0ea5e966;color:#fff;transform:translateY(-50%) scale(1.15)}.reply-btn:active{transform:translateY(-50%) scale(1.05)}.reply-btn svg{stroke-width:2.5;height:16px;width:16px}@media (max-width:768px){.message{max-width:85%}.message-text{font-size:14px;padding:10px 14px}.reply-btn{height:28px;width:28px}.reply-btn:before{display:none}.own-message .reply-btn{left:-34px}.other-message .reply-btn{right:-34px}.reply-btn svg{height:14px;width:14px}.message.swiping .reply-btn{opacity:1}}.message.select-mode{cursor:pointer;padding-left:40px}.message.select-mode.selected{background:#0ea5e91a;border-radius:12px}.message-checkbox{left:8px;position:absolute;top:50%;transform:translateY(-50%);z-index:5}.message-checkbox input[type=checkbox]{accent-color:#0ea5e9;cursor:pointer;height:20px;width:20px}.message-content-wrapper{display:flex;flex:1 1;flex-direction:column}.pin-btn{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:50%;box-shadow:0 2px 8px #0000001a;color:#666;cursor:pointer;display:flex;height:32px;justify-content:center;opacity:0;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;width:32px;z-index:10}.message:hover .pin-btn{opacity:1}.own-message .pin-btn{left:-80px}.other-message .pin-btn{right:-80px}.pin-btn:hover{background:#f59e0b;border-color:#f59e0b;box-shadow:0 4px 12px #f59e0b66;color:#fff;transform:translateY(-50%) scale(1.15)}.pin-btn svg{stroke-width:2;height:16px;width:16px}.pinned-badge{align-items:center;background:#f59e0b1a;border-radius:6px;color:#f59e0b;display:flex;font-size:11px;gap:4px;letter-spacing:.5px;margin:0 8px 6px;padding:4px 8px;text-transform:uppercase}.pinned-badge svg{height:14px;width:14px}.pinned-message{background:#f59e0b0d;border-left:3px solid #f59e0b;border-radius:12px;padding-left:8px}@media (max-width:768px){.pin-btn{height:28px;width:28px}.own-message .pin-btn{left:-70px}.other-message .pin-btn{right:-70px}.pin-btn svg{height:14px;width:14px}}.message-image-container{border-radius:12px;cursor:pointer;margin:8px 8px 0;max-width:100%;overflow:hidden;position:relative}.message-image-container:after{align-items:center;background:#0009;border-radius:50%;color:#fff;content:"🔍";display:flex;font-size:14px;height:28px;justify-content:center;opacity:0;pointer-events:none;position:absolute;right:8px;top:8px;transition:opacity .2s ease;width:28px}.message-image-container:hover:after{opacity:1}.message-image{border-radius:8px;display:block;height:auto;max-height:200px;max-width:250px;object-fit:cover;transition:transform .2s ease;width:100%}.message-image-container:hover .message-image{transform:scale(1.02)}.own-message .message-image-container{background:#ffffff1a}.other-message .message-image-container{background:#00000005}.message-image-container+.message-text{margin-top:8px}.image-modal-overlay{align-items:center;animation:fadeIn .2s ease;background:#000000e6;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:9999}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.image-modal-content{align-items:center;display:flex;justify-content:center;max-height:90vh;max-width:90vw;position:relative}.image-modal-img{animation:zoomIn .3s ease;border-radius:8px;box-shadow:0 10px 40px #00000080;max-height:90vh;max-width:100%;object-fit:contain}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.image-modal-close{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fff3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:40px;justify-content:center;position:absolute;right:0;top:-50px;transition:all .2s ease;width:40px}.image-modal-close:hover{background:#ffffff4d;transform:scale(1.1)}.image-modal-close svg{stroke-width:2.5;height:24px;width:24px}@media (max-width:768px){.message-image{max-height:150px;max-width:200px}.image-modal-close{height:36px;right:10px;top:10px;width:36px}.image-modal-close svg{height:20px;width:20px}}.chats-container{background:#0000;display:flex;height:calc(100vh - 70px);margin:0;padding:0}.chats-sidebar{background:#fff;border-right:2px solid #f0f0f0;display:flex;flex-direction:column;width:300px}.sidebar-header{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-bottom:2px solid #f0f0f0;padding:20px}.sidebar-header h2{color:#333;font-size:24px;margin:0}.chat-list{flex:1 1;overflow-y:auto;padding:8px}.chat-item{align-items:center;background:#fff;border:none;border-radius:12px;cursor:pointer;display:flex;gap:12px;margin-bottom:4px;padding:12px;text-align:left;transition:all .2s ease;width:100%}.chat-item:hover{background:#f8f9fa}.chat-item.active{background:linear-gradient(135deg,#0ea5e91a,#38bdf81a);border-left:3px solid #0ea5e9}.chat-avatar{align-items:center;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:20px;font-weight:700;height:48px;justify-content:center;width:48px}.chat-avatar svg{stroke-width:2;height:24px;width:24px}.chat-info{display:flex;flex:1 1;flex-direction:column;gap:4px}.chat-name-row{align-items:center;display:flex;gap:6px}.chat-name{color:#333;font-size:16px;font-weight:600}.pin-icon{color:#0ea5e9;height:14px;width:14px}.unread-badge{background:#0ea5e9;border-radius:10px;color:#fff;display:inline-block;font-size:11px;font-weight:700;min-width:18px;padding:2px 6px;text-align:center}.chat-main{background:#f8f9fa;display:flex;flex:1 1;flex-direction:column}.chat-header{align-items:center;background:#fff;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;padding:20px}.chat-header-info{display:flex;flex:1 1;flex-direction:column;gap:4px}.chat-header h1{color:#333;font-size:24px;margin:0}.pinned-badge{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-radius:12px;color:#fff;font-size:12px;font-weight:600;padding:4px 10px}.messages-list{display:flex;flex:1 1;flex-direction:column;gap:12px;overflow-y:auto;padding:20px}.empty-state,.loading-messages{align-items:center;display:flex;height:100%;justify-content:center}.empty-state{color:#999;flex-direction:column}.empty-icon{height:64px;margin-bottom:16px;opacity:.5;width:64px}.empty-state p{font-size:18px;font-weight:600;margin-bottom:4px}.empty-state span{font-size:14px}.message{animation:slideIn .3s ease;display:flex;flex-direction:column;max-width:70%}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.own-message{align-self:flex-end}.other-message{align-self:flex-start}.message-header{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:6px;padding:0 8px}.message-author{color:#0ea5e9;flex-shrink:0;font-size:12px;font-weight:600}.message-time{color:#999;flex-shrink:0;font-size:11px;margin-left:auto}.message-text{word-wrap:break-word;background:#fff;border-radius:16px;color:#333;font-size:15px;padding:12px 16px}.own-message .message-text{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-bottom-right-radius:4px;color:#fff}.other-message .message-text{border-bottom-left-radius:4px}.message-input-form{background:#fff;border-top:2px solid #f0f0f0;display:flex;gap:8px;padding:10px 12px}.message-input{border:2px solid #e0e0e0;border-radius:24px;flex:1 1;font-size:15px;max-width:100%;min-width:0;outline:none;padding:10px 14px;transition:border-color .3s ease;width:100%}.message-input:focus{border-color:#0ea5e9}.send-btn{align-items:center;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:48px;justify-content:center;transition:all .3s ease;width:48px}.send-btn:hover:not(:disabled){box-shadow:0 5px 15px #0ea5e966;transform:scale(1.1)}.send-btn:disabled{cursor:not-allowed;opacity:.5}.send-btn svg{stroke-width:2;height:20px;width:20px}@media (max-width:768px){.mobile-chat-view .chats-sidebar{display:none}.mobile-chat-view .chat-main{width:100%}.mobile-list-view .chats-sidebar{border-right:none;width:100%}.mobile-sidebar{width:100%!important}.mobile-header{gap:12px}.back-btn,.mobile-header{align-items:center;display:flex}.back-btn{background:none;border:none;border-radius:50%;color:#667eea;cursor:pointer;justify-content:center;padding:8px;transition:all .2s ease}.back-btn:hover{background:#667eea1a}.back-btn svg{stroke-width:2.5;height:24px;width:24px}.chevron-right{color:#999;flex-shrink:0;height:20px;width:20px}.chat-item{position:relative}.chat-header h1{font-size:18px}.messages-list{padding:16px}.message{max-width:85%}.message-text{font-size:14px;padding:10px 14px}.message-input-form{align-items:center;background:#fff;border-top:1px solid #e0e0e0;box-sizing:border-box;display:flex;gap:8px;padding:8px 10px;width:100%}.replying-to-bar{margin:0 0 8px;padding:8px 12px}.replying-label{font-size:11px}.replying-text{font-size:12px}.cancel-reply-btn{height:24px;width:24px}.cancel-reply-btn svg{height:14px;width:14px}.input-row{align-items:center;display:flex;flex:1 1;gap:10px;width:100%}.input-wrapper{flex:1 1;min-width:0}.message-input{background:#fff;border:1px solid #e0e0e0;border-radius:24px;box-sizing:border-box;display:block;font-size:15px;min-height:46px;padding:12px 16px;width:100%}.message-input:focus{border-color:#0ea5e9;outline:none}.send-btn{flex-shrink:0;height:46px;min-width:46px;width:46px}.send-btn svg{height:20px;width:20px}.mentions-dropdown{margin-bottom:6px;max-height:150px}.mention-item{padding:10px 12px}.mention-avatar{font-size:13px;height:32px;width:32px}.mention-name{font-size:13px}.mention-role{font-size:11px}}.sidebar-header{align-items:center;display:flex;justify-content:space-between}.create-group-btn{align-items:center;background:#0ea5e9;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.create-group-btn svg{stroke-width:2.5;height:20px;width:20px}.create-group-btn:hover{background:#0284c7;transform:scale(1.1)}.no-groups{align-items:center;display:flex;flex-direction:column;justify-content:center;padding:40px 20px;text-align:center}.no-groups p{color:#999;font-size:15px;margin-bottom:16px}.create-first-group-btn{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s ease}.create-first-group-btn:hover{box-shadow:0 5px 15px #0ea5e94d;transform:translateY(-2px)}.group-members{color:#999;font-size:12px}.members-count{color:#999;font-size:13px;font-weight:500}.admin-badge{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-radius:12px;color:#fff;font-size:12px;font-weight:600;padding:4px 12px}.no-chat-selected{align-items:center;color:#999;display:flex;flex-direction:column;height:100%;justify-content:center}.no-chat-selected svg{stroke-width:1.5;height:80px;margin-bottom:20px;opacity:.3;width:80px}.no-chat-selected p{font-size:18px;font-weight:600}.settings-btn{align-items:center;background:none;border:none;border-radius:50%;color:#0ea5e9;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:all .2s ease;width:40px}.settings-btn svg{stroke-width:2;height:22px;width:22px}.settings-btn:hover{background:#0ea5e91a}.system-message{align-items:center;display:flex;justify-content:center;margin:16px 0;padding:8px 16px}.system-message span{background:#0000000d;border-radius:12px;color:#666;font-size:13px;font-weight:500;padding:6px 12px;text-align:center}.chat-header-actions{align-items:center;display:flex;gap:8px}.meeting-btn{align-items:center;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;flex-shrink:0;height:40px;justify-content:center;transition:all .2s ease;width:40px}.meeting-btn svg{stroke-width:2;height:20px;width:20px}.meeting-btn:hover{box-shadow:0 4px 12px #0ea5e966;transform:scale(1.1)}.replying-to-bar{align-items:center;background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-left:4px solid #0ea5e9;border-radius:10px 10px 0 0;box-shadow:0 -2px 8px #0ea5e914;display:flex;gap:12px;justify-content:space-between;padding:12px 16px}.replying-to-content{display:flex;flex:1 1;flex-direction:column;gap:4px;min-width:0}.replying-label{color:#0ea5e9;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}.replying-text{color:#475569;font-size:13px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cancel-reply-btn{align-items:center;background:#0ea5e91a;border:none;border-radius:50%;color:#0ea5e9;cursor:pointer;display:flex;flex-shrink:0;height:28px;justify-content:center;transition:all .2s ease;width:28px}.cancel-reply-btn:hover{background:#fee;color:#f44336;transform:rotate(90deg)}.cancel-reply-btn svg{stroke-width:2.5;height:16px;width:16px}.input-row{display:flex;gap:8px;width:100%}.input-wrapper{flex:1 1;position:relative}.mentions-dropdown{background:#fff;border:2px solid #e0e0e0;border-radius:12px;bottom:100%;box-shadow:0 -4px 20px #0000001a;left:0;margin-bottom:8px;max-height:200px;overflow-y:auto;position:absolute;right:0;z-index:1000}.mention-item{align-items:center;background:none;border:none;cursor:pointer;display:flex;gap:12px;padding:12px 16px;text-align:left;transition:background .2s ease;width:100%}.mention-item:hover{background:#f0f9ff}.mention-item:not(:last-child){border-bottom:1px solid #f0f0f0}.mention-avatar{align-items:center;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:14px;font-weight:700;height:36px;justify-content:center;width:36px}.mention-info{display:flex;flex:1 1;flex-direction:column;gap:2px}.mention-name{color:#333;font-size:14px;font-weight:600}.mention-role{color:#999;font-size:12px}.message-input-form{flex-direction:column;gap:0}.cancel-select-btn,.delete-btn,.select-btn{align-items:center;background:none;border:none;border-radius:8px;color:#666;cursor:pointer;display:flex;gap:4px;padding:8px;transition:all .2s ease}.select-btn:hover{background:#0ea5e91a;color:#0ea5e9}.delete-btn{color:#ef4444}.delete-btn:hover:not(:disabled){background:#ef44441a;color:#dc2626}.delete-btn:disabled{cursor:not-allowed;opacity:.4}.delete-btn span{font-size:12px;font-weight:600}.cancel-select-btn:hover{background:#0000000d;color:#333}.cancel-select-btn svg,.delete-btn svg,.select-btn svg{stroke-width:2;height:20px;width:20px}@media (max-width:768px){.cancel-select-btn svg,.delete-btn svg,.select-btn svg{height:22px;width:22px}}.image-btn{align-items:center;background:none;border:none;border-radius:8px;color:#666;cursor:pointer;display:flex;flex-shrink:0;justify-content:center;padding:8px;transition:all .2s ease}.image-btn:hover{background:#0ea5e91a;color:#0ea5e9}.image-btn svg{stroke-width:2;height:22px;width:22px}.image-preview-container{background:#00000005;border-radius:8px;margin-bottom:8px;padding:8px 10px;position:relative}.image-preview{border-radius:8px;display:block;max-height:150px;max-width:200px;object-fit:cover}.remove-image-btn{align-items:center;background:#000000b3;border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;height:24px;justify-content:center;position:absolute;right:14px;top:12px;transition:all .2s ease;width:24px}.remove-image-btn:hover{background:#ef4444;transform:scale(1.1)}.remove-image-btn svg{stroke-width:2.5;height:14px;width:14px}@media (max-width:768px){.image-btn svg{height:24px;width:24px}.image-preview{max-height:120px;max-width:150px}}.profile-container{background:#0000;margin:0;min-height:calc(100vh - 70px);padding:0}.profile-hero{align-items:flex-end;background:linear-gradient(135deg,#0ea5e9,#38bdf8);display:flex;height:200px;justify-content:center;overflow:hidden;padding-bottom:60px;position:relative}.hero-background{animation:pulse 8s ease-in-out infinite;background:radial-gradient(circle at 20% 50%,#ffffff1a 0,#0000 50%),radial-gradient(circle at 80% 80%,#ffffff1a 0,#0000 50%);bottom:0;left:0;position:absolute;right:0;top:0}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.profile-avatar-wrapper{position:relative;z-index:1}.profile-avatar{align-items:center;animation:fadeInScale .5s ease-out;background:#fff;border:5px solid #fff;border-radius:50%;box-shadow:0 10px 40px #0003;color:#0ea5e9;display:flex;font-size:48px;font-weight:700;height:120px;justify-content:center;width:120px}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.role-badge-hero{animation:slideUp .5s ease-out .2s both;border-radius:20px;bottom:-10px;box-shadow:0 4px 12px #00000026;font-size:12px;font-weight:700;left:50%;letter-spacing:1px;padding:6px 16px;position:absolute;text-transform:uppercase;transform:translateX(-50%)}.role-badge-hero.role-admin{background:linear-gradient(135deg,#0ea5e9,#38bdf8);color:#fff}.role-badge-hero.role-staff{background:#fff;color:#1976d2}.profile-content{margin:-40px auto 0;max-width:800px;padding:0 20px 40px;position:relative;z-index:2}.profile-name-card{animation:fadeInUp .5s ease-out .3s both;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;margin-bottom:24px;padding:30px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.profile-name-display{text-align:center}.profile-name-display h1{color:#333;font-size:32px;font-weight:700;margin:0 0 8px}.profile-email{color:#666;font-size:16px;margin:0 0 20px}.edit-profile-btn{align-items:center;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:10px;color:#fff;cursor:pointer;display:inline-flex;font-size:14px;font-weight:600;gap:8px;padding:10px 24px;transition:all .3s ease}.edit-profile-btn svg{height:16px;width:16px}.edit-profile-btn:hover{box-shadow:0 8px 20px #0ea5e966;transform:translateY(-2px)}.edit-name-section{margin:0 auto;max-width:400px}.name-input{border:2px solid #e0e0e0;border-radius:12px;font-size:16px;font-weight:600;margin-bottom:16px;outline:none;padding:14px 18px;text-align:center;transition:all .3s ease;width:100%}.name-input:focus{border-color:#0ea5e9;box-shadow:0 0 0 4px #0ea5e91a}.edit-actions{display:flex;gap:12px;justify-content:center}.cancel-btn,.save-btn{align-items:center;border:none;border-radius:10px;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:6px;padding:10px 24px;transition:all .2s ease}.save-btn{background:linear-gradient(135deg,#0ea5e9,#38bdf8);color:#fff}.save-btn svg{height:16px;width:16px}.save-btn:hover:not(:disabled){box-shadow:0 6px 16px #0ea5e966;transform:translateY(-2px)}.save-btn:disabled{cursor:not-allowed;opacity:.6}.spinner-small{animation:spin .6s linear infinite;border:2px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:14px;width:14px}.cancel-btn svg{height:16px;width:16px}.stats-grid{grid-gap:16px;animation:fadeInUp .5s ease-out .4s both;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:24px}.stat-card{align-items:center;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;display:flex;gap:16px;padding:24px;transition:all .3s ease}.stat-card:hover{box-shadow:0 8px 30px #0000001f;transform:translateY(-4px)}.stat-icon{align-items:center;border-radius:14px;display:flex;flex-shrink:0;height:56px;justify-content:center;width:56px}.stat-icon svg{stroke-width:2;height:28px;width:28px}.stat-icon-purple{background:linear-gradient(135deg,#0ea5e91a,#38bdf81a)}.stat-icon-purple svg{stroke:#0ea5e9}.stat-icon-blue{background:#2196f31a}.stat-icon-blue svg{stroke:#2196f3}.stat-icon-green{background:#4caf501a}.stat-icon-green svg{stroke:#4caf50}.stat-content{display:flex;flex:1 1;flex-direction:column;gap:4px}.stat-label{color:#999;font-size:13px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}.stat-value{color:#333;font-size:18px;font-weight:700}.info-section{animation:fadeInUp .5s ease-out .5s both;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;margin-bottom:24px;padding:30px}.section-title{align-items:center;color:#333;display:flex;font-size:20px;font-weight:700;gap:10px;margin:0 0 24px}.section-title svg{stroke:#0ea5e9;height:24px;width:24px}.info-grid{display:flex;flex-direction:column;gap:16px}.info-item{align-items:flex-start;background:#f8f9fa;border-radius:12px;display:flex;gap:16px;padding:20px;transition:all .2s ease}.info-item:hover{background:#f0f2f5}.info-item-icon{align-items:center;background:#fff;border-radius:10px;box-shadow:0 2px 8px #0000000f;display:flex;flex-shrink:0;height:44px;justify-content:center;width:44px}.info-item-icon svg{stroke:#0ea5e9;height:22px;width:22px}.info-item-content{display:flex;flex:1 1;flex-direction:column;gap:6px}.info-item-label{color:#999;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.info-item-value{color:#333;font-size:15px;font-weight:600;word-break:break-word}.user-id{color:#666;font-family:Courier New,monospace;font-size:13px}.logout-button{align-items:center;animation:fadeInUp .5s ease-out .6s both;background:linear-gradient(135deg,#ff4757,#ff6b81);border:none;border-radius:12px;box-shadow:0 4px 20px #ff47574d;color:#fff;cursor:pointer;display:flex;font-size:16px;font-weight:700;gap:10px;justify-content:center;padding:16px;transition:all .3s ease;width:100%}.logout-button svg{height:20px;width:20px}.logout-button:hover{box-shadow:0 8px 30px #ff475766;transform:translateY(-2px)}@media (max-width:768px){.profile-hero{height:180px;padding-bottom:50px}.profile-avatar{font-size:42px;height:100px;width:100px}.profile-content{padding:0 16px 32px}.profile-name-card{padding:24px 20px}.profile-name-display h1{font-size:26px}.stats-grid{grid-template-columns:1fr}.stat-card{padding:20px}.info-section{padding:24px 20px}.section-title{font-size:18px}.info-item{padding:16px}}@media (max-width:480px){.profile-hero{height:160px}.profile-avatar{font-size:38px;height:90px;width:90px}.profile-name-display h1{font-size:24px}.stat-icon{height:48px;width:48px}.stat-icon svg{height:24px;width:24px}.stat-value{font-size:16px}}.admin-container{background:#0000;margin:0 auto;max-width:1200px;min-height:calc(100vh - 70px);padding:20px}.admin-header{margin-bottom:24px}.admin-header h1{align-items:center;color:#333;display:flex;font-size:28px;gap:12px;margin:0}.admin-header svg{stroke:#0ea5e9;height:32px;width:32px}.admin-tabs{display:flex;gap:12px;margin-bottom:24px}.tab-btn{align-items:center;background:#fff;border:2px solid #e0e0e0;border-radius:12px;color:#666;cursor:pointer;display:flex;font-size:15px;font-weight:600;gap:8px;padding:12px 24px;transition:all .2s ease}.tab-btn svg{height:20px;width:20px}.tab-btn:hover{border-color:#0ea5e9;color:#0ea5e9}.tab-btn.active{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-color:#0000;color:#fff}.section-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.section-header h2{color:#333;font-size:22px;margin:0}.search-section{margin-bottom:20px;position:relative}.search-input{background:#fff;border:2px solid #e0e0e0;border-radius:12px;font-size:15px;outline:none;padding:14px 48px 14px 18px;transition:all .3s ease;width:100%}.search-input:focus{border-color:#0ea5e9;box-shadow:0 0 0 4px #0ea5e91a}.clear-search-btn{align-items:center;background:#f0f0f0;border:none;border-radius:8px;color:#666;cursor:pointer;display:flex;height:32px;justify-content:center;position:absolute;right:12px;top:50%;transform:translateY(-50%);transition:all .2s ease;width:32px}.clear-search-btn svg{height:16px;width:16px}.clear-search-btn:hover{background:#e0e0e0;color:#333}.add-user-btn{align-items:center;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:10px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:8px;padding:10px 20px;transition:all .3s ease}.add-user-btn svg{height:18px;width:18px}.add-user-btn:hover{box-shadow:0 6px 20px #0ea5e966;transform:translateY(-2px)}.user-form-card{background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;margin-bottom:24px;padding:24px}.user-form-card h3{color:#333;font-size:18px;margin:0 0 20px}.form-row{grid-gap:16px;display:grid;gap:16px;grid-template-columns:1fr 1fr}.form-group{margin-bottom:16px}.form-group label{color:#666;display:block;font-size:13px;font-weight:600;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}.form-group input,.form-group select{border:2px solid #e0e0e0;border-radius:10px;font-size:15px;outline:none;padding:12px 16px;transition:border-color .3s ease;width:100%}.form-group input:focus,.form-group select:focus{border-color:#0ea5e9}.form-group input:disabled{background:#f5f5f5;cursor:not-allowed}.form-actions{display:flex;gap:12px;margin-top:20px}.submit-btn{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:15px;font-weight:600;padding:12px 24px;transition:all .3s ease}.submit-btn:hover:not(:disabled){box-shadow:0 6px 20px #0ea5e966;transform:translateY(-2px)}.submit-btn:disabled{cursor:not-allowed;opacity:.6}.cancel-btn{background:#f0f0f0;border:none;border-radius:10px;color:#666;cursor:pointer;font-size:15px;font-weight:600;padding:12px 24px;transition:all .2s ease}.cancel-btn:hover{background:#e0e0e0}.users-grid{grid-gap:16px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.user-card{align-items:center;background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;display:flex;flex-direction:column;padding:20px;position:relative;text-align:center;transition:all .3s ease}.user-card:hover{box-shadow:0 8px 30px #0000001f;transform:translateY(-4px)}.user-avatar{align-items:center;background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-radius:50%;color:#fff;display:flex;font-size:32px;font-weight:700;height:80px;justify-content:center;margin-bottom:16px;width:80px}.user-info{flex:1 1;width:100%}.user-info h3{color:#333;font-size:18px;margin:0 0 8px}.user-email{color:#999;font-size:13px;margin:0 0 4px;word-break:break-word}.user-employee-id{color:#0ea5e9;font-family:Courier New,monospace;font-size:12px;font-weight:600;margin:0 0 12px}.role-badge{border-radius:12px;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;padding:4px 12px}.role-badge.role-admin{background:linear-gradient(135deg,#0ea5e9,#38bdf8);color:#fff}.role-badge.role-staff{background:#e3f2fd;color:#1976d2}.user-actions{border-top:2px solid #f0f0f0;display:flex;gap:8px;justify-content:center;margin-top:16px;padding-top:16px;width:100%}.delete-btn,.edit-btn{align-items:center;border:none;border-radius:8px;cursor:pointer;display:flex;height:36px;justify-content:center;transition:all .2s ease;width:36px}.edit-btn{background:#e3f2fd;color:#1976d2}.edit-btn:hover{background:#1976d2;color:#fff}.delete-btn{background:#fee;color:#f44336}.delete-btn:hover{background:#f44336;color:#fff}.delete-btn svg,.edit-btn svg{height:18px;width:18px}.logs-section h2{color:#333;font-size:22px;margin:0 0 20px}.logs-list{display:flex;flex-direction:column;gap:12px}.log-item{background:#fff;border-left:4px solid #ccc;border-radius:12px;box-shadow:0 2px 10px #0000000f;display:flex;gap:16px;padding:20px}.log-item.log-login{border-left-color:#4caf50}.log-item.log-logout{border-left-color:#ff9800}.log-item.log-created_user,.log-item.log-updated_user{border-left-color:#2196f3}.log-item.log-deleted_user{border-left-color:#f44336}.log-icon{align-items:center;background:#f5f5f5;border-radius:10px;display:flex;flex-shrink:0;height:44px;justify-content:center;width:44px}.log-icon svg{stroke:#666;height:22px;width:22px}.log-content{flex:1 1}.log-header{align-items:center;display:flex;gap:12px;margin-bottom:6px}.log-user{color:#333;font-size:15px;font-weight:700}.log-action{color:#0ea5e9;font-size:13px;font-weight:600;text-transform:capitalize}.log-details{color:#666;font-size:14px;margin:0 0 6px}.log-time{color:#999;font-size:12px}@media (max-width:768px){.admin-container{padding:16px}.admin-header h1{font-size:24px}.admin-tabs{flex-wrap:wrap}.tab-btn{flex:1 1;justify-content:center;min-width:140px}.section-header{align-items:flex-start;flex-direction:column;gap:12px}.add-user-btn{justify-content:center;width:100%}.form-row,.users-grid{grid-template-columns:1fr}.log-item{padding:16px}}.todo-container{background:#0000;margin:0 auto;max-width:900px;min-height:calc(100vh - 70px);padding:20px}.todo-header{margin-bottom:24px}.todo-header h1{align-items:center;color:#333;display:flex;font-size:28px;gap:12px;margin:0}.todo-header svg{stroke:#0ea5e9;height:32px;width:32px}.add-todo-card{background:#fff;border-radius:16px;box-shadow:0 4px 20px #00000014;margin-bottom:24px;padding:24px}.todo-card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px}.add-todo-card h2{color:#333;font-size:18px;margin:0}.toggle-mode-btn{background:#f0f9ff;border:2px solid #0ea5e9;border-radius:8px;color:#0ea5e9;cursor:pointer;font-size:14px;font-weight:600;padding:8px 16px;transition:all .2s ease}.toggle-mode-btn:hover{background:#0ea5e9;color:#fff}.add-todo-form{display:flex;flex-wrap:wrap;gap:12px}.todo-input{border:2px solid #e0e0e0;border-radius:10px;flex:1 1;font-size:15px;min-width:250px;outline:none;padding:12px 16px;transition:border-color .3s ease}.todo-input:focus{border-color:#0ea5e9}.user-select{background:#fff;border:2px solid #e0e0e0;border-radius:10px;cursor:pointer;font-size:15px;outline:none;padding:12px 16px;transition:border-color .3s ease}.user-select:focus{border-color:#0ea5e9}.add-todo-btn{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border:none;border-radius:10px;color:#fff;cursor:pointer;font-size:15px;font-weight:600;padding:12px 24px;transition:all .3s ease}.add-todo-btn:hover:not(:disabled){box-shadow:0 6px 20px #0ea5e966;transform:translateY(-2px)}.add-todo-btn:disabled{cursor:not-allowed;opacity:.6}.bulk-form{flex-direction:column}.bulk-todo-input{border:2px solid #e0e0e0;border-radius:10px;font-family:inherit;font-size:15px;min-height:120px;outline:none;padding:12px 16px;resize:vertical;transition:border-color .3s ease;width:100%}.bulk-todo-input:focus{border-color:#0ea5e9}.bulk-task-count{color:#0ea5e9;font-size:13px;font-weight:600;padding:4px 0}.bulk-add-btn{background:linear-gradient(135deg,#10b981,#34d399)}.bulk-add-btn:hover:not(:disabled){box-shadow:0 6px 20px #10b98166}.assign-mode-toggle{padding:8px 0;width:100%}.checkbox-label{align-items:center;color:#666;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px}.checkbox-label input[type=checkbox]{accent-color:#0ea5e9;cursor:pointer;height:18px;width:18px}.multi-select-container{background:#f9fafb;border:2px solid #e0e0e0;border-radius:10px;padding:12px;width:100%}.multi-select-header{align-items:center;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;margin-bottom:12px;padding-bottom:8px}.selected-count{color:#0ea5e9;font-size:14px;font-weight:600}.multi-select-actions{display:flex;gap:8px}.select-action-btn{background:#fff;border:1px solid #e0e0e0;border-radius:6px;color:#666;cursor:pointer;font-size:12px;font-weight:600;padding:4px 12px;transition:all .2s ease}.select-action-btn:hover{border-color:#0ea5e9;color:#0ea5e9}.user-checkboxes{grid-gap:8px;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-height:200px;overflow-y:auto}.user-checkbox-label{align-items:center;background:#fff;border:1px solid #e0e0e0;border-radius:8px;cursor:pointer;display:flex;gap:8px;padding:8px 12px;transition:all .2s ease}.user-checkbox-label:hover{background:#f0f9ff;border-color:#0ea5e9}.user-checkbox-label input[type=checkbox]{accent-color:#0ea5e9;cursor:pointer;height:16px;width:16px}.user-checkbox-text{color:#333;font-size:14px;font-weight:500}.user-role{color:#999;font-size:13px;font-weight:400}.todo-filters{display:flex;gap:12px;margin-bottom:20px}.filter-btn{background:#fff;border:2px solid #e0e0e0;border-radius:10px;color:#666;cursor:pointer;font-size:14px;font-weight:600;padding:10px 20px;transition:all .2s ease}.filter-btn:hover{border-color:#0ea5e9;color:#0ea5e9}.filter-btn.active{background:linear-gradient(135deg,#0ea5e9,#38bdf8);border-color:#0000;color:#fff}.todos-list{display:flex;flex-direction:column;gap:12px}.todo-item{align-items:flex-start;background:#fff;border-left:4px solid #0ea5e9;border-radius:12px;box-shadow:0 2px 10px #0000000f;display:flex;gap:16px;padding:20px;transition:all .3s ease}.todo-item:hover{box-shadow:0 4px 20px #0000001a;transform:translateX(4px)}.todo-item.completed{border-left-color:#4caf50;opacity:.7}.todo-checkbox-wrapper{padding-top:2px}.todo-checkbox{accent-color:#0ea5e9;cursor:pointer;height:22px;width:22px}.todo-content{flex:1 1}.todo-title{color:#333;font-size:16px;font-weight:600;margin:0 0 8px}.todo-item.completed .todo-title{color:#999;text-decoration:line-through}.todo-meta{color:#999;display:flex;flex-wrap:wrap;font-size:13px;gap:12px}.todo-assigned{color:#0ea5e9;font-weight:600}.todo-completed-date{color:#4caf50;font-weight:600}.delete-todo-btn{align-items:center;background:#fee;border:none;border-radius:8px;color:#f44336;cursor:pointer;display:flex;flex-shrink:0;height:36px;justify-content:center;transition:all .2s ease;width:36px}.delete-todo-btn svg{height:18px;width:18px}.delete-todo-btn:hover{background:#f44336;color:#fff}.empty-todos{align-items:center;background:#fff;border-radius:16px;display:flex;flex-direction:column;justify-content:center;padding:60px 20px;text-align:center}.empty-todos svg{stroke:#ccc;height:64px;margin-bottom:16px;width:64px}.empty-todos p{color:#666;font-size:18px;font-weight:600;margin:0 0 8px}.empty-todos span{color:#999;font-size:14px}@media (max-width:768px){.todo-container{padding:16px}.todo-header h1{font-size:24px}.add-todo-form{flex-direction:column}.add-todo-btn,.todo-input,.user-select{width:100%}.todo-filters{flex-wrap:wrap}.filter-btn{flex:1 1;min-width:100px}.todo-item{padding:16px}.user-checkboxes{grid-template-columns:1fr}.multi-select-header{align-items:flex-start;flex-direction:column;gap:8px}.toggle-mode-btn{font-size:12px;padding:6px 12px}}.dashboard-wrapper{background:#f0f2f5;display:flex;flex-direction:column;height:100vh;width:100%}.dashboard-content{background:#f0f2f5;flex:1 1;overflow-y:auto;padding-bottom:70px}.bottom-nav{background:#fff;bottom:0;box-shadow:0 -2px 10px #0000001a;display:flex;justify-content:space-around;left:0;padding:8px 0;position:fixed;right:0;z-index:1000}.nav-item{align-items:center;background:none;border:none;color:#999;cursor:pointer;display:flex;flex:1 1;flex-direction:column;gap:4px;padding:8px 24px;transition:all .3s ease}.nav-item.active{color:#0ea5e9}.nav-icon{stroke-width:2;height:24px;width:24px}.nav-label{font-size:12px;font-weight:500}.nav-item:hover{color:#0ea5e9}@media (max-width:480px){.nav-item{padding:8px 16px}.nav-label{font-size:11px}.nav-icon{height:22px;width:22px}}.install-pwa-banner{animation:slideUp .3s ease-out;bottom:20px;left:50%;max-width:500px;position:fixed;transform:translateX(-50%);width:calc(100% - 40px);z-index:10000}@keyframes slideUp{0%{opacity:0;transform:translateX(-50%) translateY(100px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.install-pwa-content{align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 40px #00000026;display:flex;gap:16px;padding:16px 20px}.install-pwa-icon{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.install-pwa-icon svg{stroke:#fff;height:24px;width:24px}.install-pwa-text{flex:1 1;min-width:0}.install-pwa-text h4{color:#1f2937;font-size:15px;font-weight:600;margin:0 0 4px}.install-pwa-text p{color:#6b7280;font-size:13px;line-height:1.4;margin:0}.install-pwa-actions{align-items:center;display:flex;flex-shrink:0;gap:8px}.install-btn{background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:14px;font-weight:600;padding:8px 20px;transition:all .2s;white-space:nowrap}.install-btn:hover{box-shadow:0 4px 12px #667eea66;transform:translateY(-1px)}.install-btn:active{transform:translateY(0)}.dismiss-btn{align-items:center;background:#f3f4f6;border:none;border-radius:6px;color:#6b7280;cursor:pointer;display:flex;font-size:20px;height:32px;justify-content:center;line-height:1;padding:0;transition:all .2s;width:32px}.dismiss-btn:hover{background:#e5e7eb;color:#374151}@media (max-width:480px){.install-pwa-banner{bottom:10px;width:calc(100% - 20px)}.install-pwa-content{gap:12px;padding:12px 16px}.install-pwa-icon{height:36px;width:36px}.install-pwa-icon svg{height:20px;width:20px}.install-pwa-text h4{font-size:14px}.install-pwa-text p{font-size:12px}.install-btn{font-size:13px;padding:6px 16px}.dismiss-btn{font-size:18px;height:28px;width:28px}}.App{align-items:center;background:linear-gradient(135deg,#0ea5e9,#38bdf8);display:flex;justify-content:center;min-height:100vh;padding:0}.App.logged-in{background:#f0f2f5;padding:0}.loading-container{align-items:center;display:flex;justify-content:center;min-height:100vh}.spinner{animation:spin 1s linear infinite;border:4px solid #ffffff4d;border-radius:50%;border-top-color:#fff;height:50px;width:50px}@keyframes spin{to{transform:rotate(1turn)}}
/*# sourceMappingURL=main.734b4b93.css.map*/