body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}body,html{margin:0;overflow-x:hidden;padding:0}html{width:100%}*{box-sizing:border-box}#root{width:100%}#root,.app-container{display:flex;flex-direction:column;min-height:100vh}.app-container{font-family:Inter,system-ui,-apple-system,sans-serif}.content-area{display:flex;flex:1 1;gap:20px;padding:20px}.player-section{flex:3 1;min-width:0}.stream-list-container{background-color:#f5f5f5;border-radius:8px;flex:1 1;max-height:calc(100vh - 110px);min-width:300px;overflow-y:auto;padding:15px}.stream-info{margin-top:15px}.stream-info h2{margin-bottom:5px}.stream-badges{align-items:center;display:flex;gap:10px;margin-top:10px}.live-badge{background-color:#ff4d4f;display:inline-block;font-size:.8rem;font-weight:600;padding:4px 10px}.end-stream-button{background-color:#95a5a6;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:8px 16px;transition:background-color .2s}.end-stream-button:hover{background-color:#7f8c8d}.navbar{background-color:#1e1e2d;padding:10px 20px;position:relative}.logo h1{font-size:1.5rem;font-weight:700;margin:0}.search-bar{margin:0 20px;max-width:500px}.search-bar input{border-radius:4px 0 0 4px;padding:8px 12px}.nav-controls{align-items:center;display:flex}.login-form{background-color:#fff;border-radius:8px;color:#333;padding:20px;position:relative;width:350px}.close-button{font-size:1.2rem;right:10px;top:10px}.form-group{margin-bottom:15px}.form-group label{margin-bottom:5px}.form-group input{padding:8px}.login-form button[type=submit]{background-color:#1890ff;border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:10px;padding:10px;width:100%}.login-form p{font-size:.9rem;margin-top:15px;text-align:center}.login-form a{color:#1890ff;text-decoration:none}@media (max-width:480px){.content-area{gap:10px;padding:10px}.navbar{flex-wrap:wrap;padding:10px}.logo h1{font-size:1.2rem}.search-bar{margin:10px 0 0;max-width:100%;order:3;width:100%}.nav-controls{flex-wrap:wrap;gap:5px}.login-button,.logout-button,.stream-button,.user-button{font-size:.875rem;margin-left:5px;padding:5px 10px}.login-form{max-width:350px;padding:15px;width:90%}.form-group input{font-size:16px}.stream-list-container{max-height:calc(100vh - 80px);padding:10px}.stream-item{flex-direction:column}.stream-thumbnail{height:150px;width:100%}.video-player-container{border-radius:4px}}@media (min-width:481px) and (max-width:768px){.navbar{flex-wrap:wrap;padding:12px 15px}.search-bar{margin:10px 0 0;max-width:100%;order:3}.content-area{padding:15px}.form-group input{font-size:16px}}@media (max-width:992px){.content-area{flex-direction:column}.stream-list-container{min-width:100%}}*{-webkit-tap-highlight-color:rgba(0,0,0,.1)}a,button{touch-action:manipulation}.stream-list-container,.video-list{-webkit-overflow-scrolling:touch;will-change:scroll-position}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}.signup-container{align-items:center;background-color:#f5f5f5;display:flex;justify-content:center;min-height:100vh;padding:20px}.signup-form{background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-width:500px;padding:2rem}.video-player-container{aspect-ratio:16/9;background-color:#000;border-radius:8px;overflow:hidden;position:relative}.video-player{height:100%;object-fit:contain;width:100%}.video-controls{align-items:center;background:linear-gradient(#0000,#000000b3);bottom:0;display:flex;gap:10px;left:0;padding:15px;position:absolute;right:0;transition:opacity .3s}.fullscreen-btn,.play-pause-btn{align-items:center;background:none;border:none;color:#fff;cursor:pointer;display:flex;font-size:1.2rem;height:32px;justify-content:center;width:32px}.progress-controls{align-items:center;display:flex;flex:1 1;gap:10px}.seek-slider{cursor:pointer;flex:1 1}.time-display{color:#fff;font-size:.8rem;width:45px}.volume-controls{align-items:center;display:flex;gap:5px;width:100px}.volume-icon{color:#fff}.volume-slider{cursor:pointer;width:70px}.live-indicator{color:#fff;gap:5px;margin-left:auto}.live-dot{background-color:#ff4d4f;display:inline-block}.video-error{align-items:center;background-color:#f8f9fa;bottom:0;color:#666;display:flex;flex-direction:column;justify-content:center;left:0;overflow-y:auto;padding:2rem;position:absolute;right:0;text-align:center;top:0}.error-icon{font-size:3rem;margin-bottom:1rem}.error-message{font-size:1.2rem;font-weight:500;margin:.5rem 0}.error-help{color:#666;font-size:1rem;margin:.5rem 0 1.5rem}.error-details{background-color:#f1f1f1;border-radius:8px;margin-top:1rem;max-width:600px;padding:1.5rem;text-align:left;width:100%}.error-details ol{margin:1rem 0;padding-left:1.5rem}.error-details li{color:#555;margin:.5rem 0}.debug-info{background-color:#f8f8f8;border-radius:4px;color:#999;font-family:monospace;font-size:.8rem;margin-top:1rem;padding:1rem;white-space:pre-wrap;word-break:break-all}@media (max-width:768px){.video-player-container{border-radius:4px}.video-controls{gap:6px;padding:8px}.fullscreen-btn,.play-pause-btn{font-size:1.4rem;height:36px;width:36px}.time-display{font-size:.7rem;width:40px}.volume-controls{display:none}.progress-controls{gap:6px}.seek-slider{height:20px}.error-details{font-size:.9rem;padding:1rem}.error-message{font-size:1rem}.error-help{font-size:.9rem}.debug-info{font-size:.7rem;padding:.75rem}}@media (max-width:480px){.video-controls{gap:4px;padding:6px}.fullscreen-btn,.play-pause-btn{font-size:1.2rem;height:32px;width:32px}.time-display{font-size:.65rem;width:35px}.error-icon{font-size:2rem}.error-message{font-size:.9rem}.error-details,.error-help{font-size:.85rem}.error-details{padding:.75rem}.error-details li{font-size:.8rem}}.stream-list{display:flex;flex-direction:column;gap:15px}.stream-item{box-shadow:0 2px 5px #0000001a;overflow:hidden;transition:transform .2s}.stream-item.active{border:2px solid #1890ff}.stream-thumbnail{height:70px}.stream-thumbnail img{height:100%;object-fit:cover;width:100%}.thumbnail-live-badge{background-color:#ff4d4f;border-radius:3px;color:#fff;font-size:.7rem;left:5px;padding:2px 5px;position:absolute;top:5px}.stream-details{padding:10px}.stream-details h4{margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.stream-details p{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#666;display:-webkit-box;font-size:.8rem;margin:0 0 5px;overflow:hidden}.sport-tag{background-color:#e6f7ff;border-radius:3px;color:#1890ff;font-size:.75rem;padding:2px 6px}.navbar{align-items:center;background-color:#2c3e50;box-sizing:border-box;color:#fff;display:flex;justify-content:space-between;min-height:70px;padding:1.25rem 2.5rem;position:-webkit-sticky;position:sticky;top:0;width:100%;z-index:1000}.navbar-brand h1{color:#fff;font-size:1.6rem;margin:0;white-space:nowrap}.navbar-controls{align-items:center;display:flex;gap:1rem}.desktop-controls{display:flex}.mobile-controls{display:none}.nav-button{background-color:#3498db;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:500;padding:.65rem 1.25rem;transition:background-color .2s;white-space:nowrap}.nav-button:hover{background-color:#2980b9}.upload-button{border-radius:6px;font-size:.95rem;padding:.65rem 1.25rem;white-space:nowrap}.upload-button:hover{background-color:#219a52}.user-info{align-items:center;display:flex;gap:1.25rem}.user-info span{color:#ecf0f1;font-size:.95rem}.logout-button{background-color:#e74c3c;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:500;padding:.65rem 1.25rem;transition:background-color .2s;white-space:nowrap}.logout-button:hover{background-color:#c0392b}.login-button{background-color:#3498db;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:500;padding:.65rem 1.5rem;transition:background-color .2s;white-space:nowrap}.login-button:hover{background-color:#2980b9}.browse-button{background-color:#9b59b6;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:500;padding:.65rem 1.25rem;transition:background-color .2s;white-space:nowrap}.browse-button:hover{background-color:#8e44ad}.friends-button{background-color:#3498db;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:500;padding:.65rem 1.25rem;transition:background-color .2s;white-space:nowrap}.friends-button:hover{background-color:#2980b9}.groups-button{background-color:#1abc9c;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:500;padding:.65rem 1.25rem;transition:background-color .2s;white-space:nowrap}.groups-button:hover{background-color:#16a085}.stream-button{background-color:#e74c3c;border:none;border-radius:6px;cursor:pointer;font-size:.95rem;font-weight:600;padding:.65rem 1.25rem;transition:background-color .2s;white-space:nowrap}.stream-button:hover{background-color:#c0392b}.nav-dropdown{position:relative}.nav-menu-button{background-color:#34495e;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.95rem;font-weight:500;padding:.65rem 1.25rem;transition:background-color .2s;white-space:nowrap}.nav-menu-button:hover{background-color:#2c3e50}.dropdown-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;margin-top:8px;min-width:200px;overflow:hidden;position:absolute;right:0;top:100%;z-index:1000}.dropdown-content button{background:none;border:none;border-bottom:1px solid #f0f0f0;color:#333;cursor:pointer;display:block;font-size:.95rem;padding:12px 16px;text-align:left;transition:background-color .2s;width:100%}.dropdown-content button:last-child{border-bottom:none}.dropdown-content button:hover{background-color:#f8f9fa}.search-bar{display:flex;flex:1 1;margin:0 30px;max-width:600px;min-width:200px}.search-bar input{border:none;border-radius:6px;font-size:.95rem;outline:none;padding:10px 16px;width:100%}@media (max-width:1024px){.desktop-search{display:none}.hamburger-menu{display:flex}}.search-button{background-color:#1890ff;border:none;border-radius:0 4px 4px 0;color:#fff;cursor:pointer;padding:8px 15px}.login-button,.logout-button,.stream-button,.user-button{background-color:initial;border:1px solid #1890ff;border-radius:4px;color:#1890ff;cursor:pointer;margin-left:10px;padding:6px 12px}.stream-button{background-color:#1890ff;color:#fff}.close-button{font-size:24px;right:15px;top:15px;z-index:1}.error-message{text-align:center}button[type=submit]{background-color:#1890ff}.login-link,.signup-link{color:#666;font-size:.9rem;margin-top:1rem;text-align:center}.link-button{color:#1890ff}.hamburger-menu{background:#0000;border:none;cursor:pointer;display:none;flex-direction:column;height:25px;justify-content:space-around;padding:0;width:30px;z-index:10}.hamburger-line{background-color:#fff;border-radius:2px;height:3px;transition:all .3s ease;width:30px}.hamburger-line.open:first-child{transform:rotate(45deg) translate(6px,6px)}.hamburger-line.open:nth-child(2){opacity:0}.hamburger-line.open:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}.mobile-search,.user-email-mobile{display:none}@media (max-width:1024px) and (min-width:769px){.navbar-controls{gap:.75rem}.navbar-controls button{font-size:.9rem;padding:.6rem 1rem}.search-bar{margin:0 15px}}@media (max-width:768px){.navbar{flex-wrap:nowrap;min-height:70px;padding:1rem 1.5rem}.navbar-brand{flex:1 1}.navbar-brand h1{font-size:1.4rem}.desktop-controls{display:none!important}.mobile-controls{background-color:#34495e;box-shadow:0 4px 8px #0003;display:flex;flex-direction:column;gap:1rem;left:0;max-height:0;opacity:0;overflow:hidden;padding:0;position:absolute;right:0;top:100%;transition:all .3s ease}.mobile-controls.mobile-open{max-height:600px;opacity:1;padding:1.5rem}.mobile-search{display:flex;margin-bottom:.75rem;width:100%}.mobile-search input{border:none;border-radius:6px;font-size:1rem;outline:none;padding:.85rem 1rem;width:100%}.hamburger-menu{display:flex;order:2}.user-email-mobile{background-color:#ffffff1a;border-radius:6px;display:block;margin-bottom:.75rem;padding:1rem 1.25rem;text-align:center;width:100%}.user-email-mobile span{color:#ecf0f1;font-size:.95rem;font-weight:500}.mobile-controls button{border-radius:6px;font-size:1.05rem;font-weight:500;margin:0;padding:.85rem 1.25rem;width:100%}.login-button,.logout-button,.nav-button,.upload-button{margin-left:0}.modal-content{margin:10px}}@media (max-width:480px){.navbar{min-height:60px;padding:.85rem 1rem}.navbar-brand h1{font-size:1.15rem}.hamburger-menu{height:22px;width:28px}.hamburger-line{height:2.5px;width:28px}.mobile-search input{font-size:.95rem;padding:.75rem .9rem}.mobile-controls button{font-size:.95rem;padding:.75rem 1rem}.mobile-controls,.mobile-controls.mobile-open{padding:1.25rem}}.signup-container{margin:0 auto;max-width:400px;width:100%}.signup-form{width:100%}.signup-form h2{color:#333;margin-bottom:1.5rem;text-align:center}.signup-modal{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.verify-email-container{margin:0 auto;max-width:400px;width:100%}.verify-email-form{width:100%}.verify-email-form h2{color:#333;margin-bottom:1rem;text-align:center}.verification-info{color:#666;line-height:1.5;margin-bottom:1.5rem;text-align:center}.verification-info strong{color:#333}button[type=submit]:hover:not(:disabled){background-color:#0056b3}button[type=submit]:disabled{background-color:#ccc;cursor:not-allowed}.login-link{color:#666;margin-top:1rem;text-align:center}.forgot-password-container{background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:2rem auto;max-width:400px;padding:2rem}.forgot-password-container h2{color:#333;margin-bottom:1.5rem;text-align:center}.form-group{margin-bottom:1.5rem}.form-group input{transition:border-color .2s}.form-group input:focus{border-color:#007bff;box-shadow:0 0 0 2px #007bff40;outline:none}.form-actions{flex-direction:column;gap:.75rem;margin-top:2rem}.form-actions button{border:none;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500;padding:.75rem;transition:all .2s;width:100%}.form-actions button[type=submit]{background-color:#007bff;color:#fff}.form-actions button[type=submit]:hover:not(:disabled){background-color:#0056b3;box-shadow:0 2px 4px #007bff4d;transform:translateY(-1px)}.form-actions .back-button,.form-actions .cancel-button{background-color:#6c757d;color:#fff}.form-actions .back-button:hover:not(:disabled),.form-actions .cancel-button:hover:not(:disabled){background-color:#545b62;box-shadow:0 2px 4px #0003;transform:translateY(-1px)}.form-actions button:disabled{background-color:#ccc;cursor:not-allowed;opacity:.6}.close-button{color:#999;line-height:1;padding:.25rem .5rem;transition:color .2s}.forgot-password-form{position:relative}.error-message{font-size:.875rem;margin-top:.5rem}.login-container{margin:0 auto;max-width:400px;width:100%}.login-form{width:100%}.login-form h2{color:#333;margin-bottom:1.5rem;text-align:center}.form-group{margin-bottom:1rem}.form-group label{margin-bottom:.5rem}.form-group input{border:1px solid #ddd;border-radius:4px;font-size:1rem;padding:.75rem;width:100%}.error-message{background-color:#f8d7da;color:#dc3545;margin-bottom:1rem;padding:.5rem}button[type=submit]{background-color:#007bff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:1rem;margin-top:1rem;padding:.75rem;width:100%}button[type=submit]:hover{background-color:#0056b3}.form-links{margin-top:1rem;text-align:center}.signup-link{color:#666;margin-top:1rem}.link-button{background:none;border:none;color:#007bff;cursor:pointer;font:inherit;padding:0;text-decoration:underline}.link-button:hover{color:#0056b3}.login-modal{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.modal-content{border-radius:8px;margin:0 1rem;max-width:400px;padding:2rem;position:relative}.close-button{align-items:center;background:none;border:none;color:#666;cursor:pointer;display:flex;font-size:1.5rem;height:30px;justify-content:center;padding:0;position:absolute;right:1rem;top:1rem;width:30px}.close-button:hover{color:#333}.upload-container{margin:0 auto;max-width:800px;padding:20px}.upload-header{margin-bottom:30px}.upload-header h2{color:#333;font-size:2rem;margin:0 0 10px}.upload-subtitle{color:#666;font-size:1.1rem;margin:0}.upload-form-section{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;margin-bottom:25px;padding:30px}.form-section-title{color:#333;font-size:1.3rem;font-weight:600;margin:0 0 20px}.form-group{margin-bottom:25px}.form-group input[type=file],.form-group input[type=text],.form-group textarea{border:2px solid #e0e0e0;border-radius:8px;box-sizing:border-box;font-family:inherit;font-size:1rem;padding:12px 16px;transition:border-color .2s;width:100%}.form-group input[type=file]{cursor:pointer;padding:10px 16px}.form-group input:focus,.form-group textarea:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a;outline:none}.form-group textarea{min-height:100px}.file-info{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:8px;margin-top:12px;padding:15px}.file-info p{color:#555;font-size:.9rem;margin:5px 0}.file-info strong{color:#333}.info-box{background-color:#e8f4f8;border:1px solid #b3dce8;border-radius:8px;margin-bottom:25px;padding:20px}.info-box h3{color:#2c3e50;font-size:1.1rem;margin:0 0 15px}.info-box ul{list-style:none;margin:0 0 15px;padding-left:0}.info-box li{color:#555;font-size:.9rem;line-height:1.5;margin:10px 0;padding-left:28px;position:relative}.info-box li:before{color:#3498db;content:"✓";font-size:1.1rem;font-weight:700;left:0;position:absolute}.info-box .format-note{border-top:1px solid #b3dce8;margin-top:15px;padding-top:15px}.info-box .format-note p{color:#555;font-size:.9rem;margin:0 0 10px}.info-box strong{color:#3498db;font-weight:600}.warning-box{background-color:#fff7e6;border:1px solid #ffd591;border-left:4px solid #fa8c16;border-radius:8px;margin-bottom:25px;padding:20px}.warning-box h4{align-items:center;color:#d46b08;display:flex;font-size:1rem;gap:8px;margin:0 0 12px}.warning-box p{color:#666;font-size:.9rem;line-height:1.5;margin:0 0 10px}.warning-box p:last-child{margin-bottom:0}.warning-box ul{list-style:none;margin:10px 0;padding-left:0}.warning-box li{color:#666;font-size:.9rem;line-height:1.5;margin:8px 0;padding-left:28px;position:relative}.warning-box li:before{color:#fa8c16;content:"•";font-size:1.3rem;font-weight:700;left:8px;position:absolute}.warning-box a{color:#1890ff;font-weight:500;text-decoration:none}.warning-box a:hover{text-decoration:underline}.error-message{border-left:4px solid #ff4d4f;border-radius:8px;margin-bottom:20px;padding:15px 20px}.progress-section{margin-bottom:25px}.progress-bar{background-color:#f0f0f0;border-radius:12px;box-shadow:inset 0 1px 3px #0000001a;height:24px;overflow:hidden;position:relative}.progress{background:linear-gradient(90deg,#3498db,#2980b9);height:100%;position:relative;transition:width .3s ease}.progress-text{color:#333;font-size:.85rem;font-weight:600;left:50%;position:absolute;text-shadow:0 1px 2px #fffc;top:50%;transform:translate(-50%,-50%)}.upload-button{background-color:#27ae60;border-radius:8px;flex:1 1;font-size:1rem;font-weight:600;padding:14px 24px}.upload-button:hover:not(:disabled){background-color:#229954}.upload-button:disabled{background-color:#95a5a6;opacity:.7}.conversion-tools{background-color:#fff;border:1px solid #e9ecef;border-radius:8px;list-style:none;margin-top:12px!important;padding:15px!important}.conversion-tools li{color:#555;font-size:.9rem;margin:10px 0!important;padding-left:28px;position:relative}.conversion-tools li:before{color:#3498db;content:"→";font-size:1rem;font-weight:700;left:8px;position:absolute}.conversion-tools a{color:#3498db;font-weight:500;text-decoration:none}.conversion-tools a:hover{color:#2980b9;text-decoration:underline}@media (max-width:768px){.upload-container{padding:15px}.upload-header h2{font-size:1.5rem}.upload-subtitle{font-size:1rem}.upload-form-section{padding:20px}.form-section-title{font-size:1.2rem}.form-group input[type=file],.form-group input[type=text],.form-group textarea{font-size:16px}.info-box,.warning-box{padding:15px}.info-box h3,.warning-box h4{font-size:1rem}.form-actions{flex-direction:column}.cancel-button,.upload-button{width:100%}}@media (max-width:480px){.upload-container{padding:10px}.upload-header h2{font-size:1.3rem}.upload-form-section{border-radius:8px;padding:15px}.form-section-title{font-size:1.1rem}.form-group label{font-size:.9rem}.info-box h3,.warning-box h4{font-size:.95rem}.conversion-tools li,.info-box li,.warning-box p{font-size:.85rem}.cancel-button,.upload-button{font-size:.95rem;padding:12px 20px}}.metadata-editor{background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a;margin:0 auto;max-width:600px;padding:20px}.metadata-editor h3{color:#333;margin-bottom:20px;margin-top:0}.form-group{margin-bottom:20px}.form-group label{color:#555;display:block;font-weight:500}.form-group input[type=email],.form-group input[type=text],.form-group textarea{border:1px solid #ddd;border-radius:4px;font-size:14px;padding:8px 12px;width:100%}.share-input-group{display:flex;gap:10px;margin-bottom:10px}.share-input-group input{flex:1 1}.share-input-group button{background-color:#1890ff;border:none;border-radius:4px;color:#fff;cursor:pointer;padding:8px 16px}.share-input-group button:disabled{background-color:#ccc;cursor:not-allowed}.shared-emails{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.shared-email-tag{align-items:center;background-color:#f0f0f0;border-radius:16px;display:flex;font-size:14px;padding:4px 8px}.shared-email-tag .remove-email{background:none;border:none;color:#999;cursor:pointer;font-size:16px;margin-left:6px;padding:0 4px}.shared-email-tag .remove-email:hover{color:#666}.checkbox-label{align-items:center;cursor:pointer;display:flex;gap:8px}.checkbox-label input[type=checkbox]{height:16px;width:16px}.button-group{display:flex;gap:10px;margin-top:20px}.button-group button{border:none;border-radius:4px;cursor:pointer;font-weight:500;padding:8px 16px}.save-button{background-color:#1890ff;color:#fff}.save-button:disabled{background-color:#ccc}.cancel-button{background-color:#f5f5f5}.cancel-button:disabled{background-color:#f0f0f0;color:#999}.error-message{border-radius:4px;margin-bottom:16px;padding:8px 12px}.dashboard-container{margin:2rem auto;max-width:1200px;padding:0 1rem}.dashboard-loading{color:#666;padding:2rem;text-align:center}.dashboard-error{background-color:#f8d7da;border-radius:4px;color:#dc3545;margin:2rem auto;max-width:600px;padding:1rem;text-align:center}.dashboard-content{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:300px 1fr;margin-top:2rem}.video-list{display:flex;flex-direction:column;gap:1rem;max-height:calc(100vh - 200px);overflow-y:auto}.video-item{align-items:flex-start;background-color:#f8f9fa;border-radius:8px;display:flex;gap:1rem;justify-content:space-between;padding:1rem;transition:all .2s ease}.video-item:hover{background-color:#e9ecef;transform:translateY(-2px)}.video-item.selected{background-color:#e3f2fd;border:1px solid #90caf9}.video-item-content{cursor:pointer;flex:1 1;min-width:0}.video-item h3{color:#333;font-size:1rem;margin:0 0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-item p{color:#666;font-size:.875rem;margin:0}.video-description{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;margin-top:.5rem!important;overflow:hidden}.video-item-footer{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.friends-badge,.group-badge,.private-badge,.public-badge,.shared-badge{align-items:center;border-radius:12px;display:inline-flex;font-size:.75rem;font-weight:500;padding:2px 6px}.public-badge{background-color:#e6f7ff;color:#1890ff}.private-badge{background-color:#f5f5f5;color:#666}.friends-badge{background-color:#f6ffed;color:#52c41a}.group-badge{background-color:#fff7e6;color:#fa8c16}.shared-badge{background-color:#f6ffed;color:#52c41a}.edit-button-small{background-color:#1890ff;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:.75rem;opacity:0;padding:4px 8px;transition:opacity .2s ease;white-space:nowrap}.video-item:hover .edit-button-small{opacity:1}.edit-button-small:hover{background-color:#096dd9}.video-player-container{width:100%}.video-details{background-color:#f8f9fa;border-radius:8px;margin-top:1rem;padding:1rem}.video-details-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.video-details-header h3{color:#333;flex:1 1;margin:0 1rem 0 0}.edit-button{align-items:center;background-color:#1890ff;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;gap:4px;padding:6px 12px}.edit-button:hover{background-color:#096dd9}.description-section{background-color:#fff;border:1px solid #eee;border-radius:4px;margin:1rem 0;padding:1rem}.description-section h4{color:#333;font-size:.875rem;margin:0 0 .5rem}.description-section p{margin:0;white-space:pre-wrap}.video-details h3{color:#333;margin:0 0 .5rem}.video-details p{color:#666;margin:.25rem 0}.privacy-section{background-color:#fff;border:1px solid #eee;border-radius:4px;margin:1rem 0;padding:1rem}.privacy-section h4{color:#333;font-size:.875rem;margin:0 0 .5rem}.privacy-notice{align-items:center;border-radius:4px;display:flex;font-weight:500;gap:8px;margin:0;padding:8px 12px}.privacy-notice.public{background-color:#e6f7ff;color:#1890ff!important}.privacy-notice.private{background-color:#f5f5f5;color:#666!important}.privacy-notice.friends{background-color:#f6ffed;color:#52c41a!important}.privacy-notice.group{background-color:#fff7e6;color:#fa8c16!important}.public-notice{color:#1890ff!important;font-weight:500}.shared-with{border-top:1px solid #eee;margin-top:1rem;padding-top:1rem}.shared-with p{color:#333!important;font-weight:500}.shared-with ul{list-style:none;margin:.5rem 0 0;padding:0}.shared-with li{color:#666;font-size:.875rem;padding:4px 0}@media (max-width:768px){.dashboard-container{margin:1rem auto;padding:0 .5rem}.dashboard-header{align-items:flex-start;flex-direction:column;gap:1rem}.dashboard-header h2{font-size:1.25rem}.dashboard-actions{flex-direction:column;width:100%}.admin-toggle-button,.upload-button{text-align:center;width:100%}.dashboard-content{gap:1rem;grid-template-columns:1fr}.video-list{max-height:400px;order:1}.video-player-container{order:2}.video-item{padding:.75rem}.video-item h3{font-size:.9rem}.video-item p{font-size:.8rem}.delete-button-small,.edit-button-small{font-size:.7rem;opacity:1;padding:4px 6px}.video-details{padding:.75rem}.video-details-header{align-items:flex-start;flex-direction:column;gap:.75rem}.video-actions{flex-direction:column;width:100%}.delete-button,.edit-button{width:100%}.delete-confirmation{padding:10px}.delete-actions{flex-direction:column;gap:10px}.delete-actions button{width:100%}}@media (min-width:769px) and (max-width:1024px){.dashboard-content{gap:1.5rem;grid-template-columns:250px 1fr}.video-list{max-height:calc(100vh - 180px)}}.dashboard-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:20px}.admin-toggle-button{background-color:#2c3e50;border:none;border-radius:4px;color:#fff;cursor:pointer;font-weight:500;padding:8px 16px;transition:background-color .2s}.admin-toggle-button:hover{background-color:#1a2530}.delete-confirmation{background-color:#f8d7da;border:1px solid #f5c6cb;border-radius:4px;color:#721c24;margin-bottom:20px;padding:15px;text-align:center}.delete-actions{display:flex;gap:15px;justify-content:center;margin-top:10px}.delete-actions button:first-child{background-color:#dc3545}.delete-actions button:first-child,.delete-actions button:last-child{border:none;border-radius:4px;color:#fff;cursor:pointer;padding:8px 16px}.delete-actions button:last-child{background-color:#6c757d}.delete-button,.delete-button-small{background-color:#dc3545;border:none;border-radius:4px;color:#fff;cursor:pointer}.delete-button{margin-left:10px;padding:8px 16px}.delete-button-small{font-size:.8rem;margin-top:5px;padding:6px 10px}.delete-actions button:first-child:hover,.delete-button-small:hover,.delete-button:hover{background-color:#bd2130}.delete-actions button:last-child:hover{background-color:#5a6268}.video-uploader{color:#666;font-style:italic;margin:5px 0}.video-item-actions{display:flex;flex-direction:column;gap:5px}.dashboard-actions,.video-actions{display:flex;gap:10px}.upload-button{background-color:#28a745;border:none;border-radius:4px;color:#fff;cursor:pointer;display:inline-block;font-weight:500;padding:8px 16px;transition:background-color .2s}.upload-button:hover{background-color:#218838}.upload-button:disabled{background-color:#6c757d;cursor:not-allowed}.device-stream-container{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;margin:0 auto;max-width:900px;padding:20px}.device-stream-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:15px}.device-stream-header h2{color:#333;font-size:1.5rem;margin:0}.device-stream-content,.stream-setup{display:flex;flex-direction:column;gap:20px}.stream-type-options{display:flex;gap:15px}.radio-option{align-items:center;border:2px solid #ddd;border-radius:8px;cursor:pointer;display:flex;flex:1 1;gap:10px;padding:15px;transition:all .2s}.radio-option:hover{background-color:#f8f9fa;border-color:#3498db}.radio-option input[type=radio]{cursor:pointer;height:20px;width:20px}.radio-option input[type=radio]:checked+span{color:#3498db;font-weight:600}.radio-option span{color:#555;font-size:1rem}.preview-button{background-color:#3498db;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:14px 24px;transition:background-color .2s}.preview-button:hover{background-color:#2980b9}.stream-preview{display:flex;flex-direction:column;gap:20px}.preview-container{aspect-ratio:16/9;background-color:#000;border-radius:8px;min-height:400px;overflow:hidden;position:relative;width:100%}.preview-video{display:block;height:100%;object-fit:contain;width:100%}.streaming-indicator{align-items:center;background-color:#e74c3ce6;border-radius:6px;color:#fff;display:flex;font-size:.9rem;font-weight:700;gap:8px;left:15px;letter-spacing:.5px;padding:8px 16px;position:absolute;top:15px}.streaming-indicator .live-dot{animation:pulse 2s ease-in-out infinite;background-color:#fff;border-radius:50%;height:10px;width:10px}.stream-controls{display:flex;gap:12px}.start-broadcast-button{background-color:#e74c3c;border:none;border-radius:6px;color:#fff;cursor:pointer;flex:1 1;font-size:1.05rem;font-weight:700;letter-spacing:.5px;padding:14px 24px;transition:background-color .2s}.start-broadcast-button:hover{background-color:#c0392b}.stop-stream-button{background-color:#95a5a6;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:1.05rem;font-weight:700;padding:14px 24px;transition:background-color .2s;width:100%}.stop-stream-button:hover{background-color:#7f8c8d}.cancel-button{padding:14px 24px}.cancel-button:hover{background-color:#7f8c8d}@media (max-width:768px){.device-stream-container{margin:10px;padding:15px}.device-stream-header h2{font-size:1.25rem}.stream-type-options{flex-direction:column}.radio-option{padding:12px}.form-group input,.form-group textarea{font-size:16px}.stream-controls{flex-direction:column}.cancel-button,.start-broadcast-button{width:100%}.stream-info-box{padding:12px}.stream-info-box li{font-size:.85rem}}@media (max-width:480px){.device-stream-container{margin:5px;padding:12px}.device-stream-header{margin-bottom:15px;padding-bottom:12px}.device-stream-header h2{font-size:1.1rem}.streaming-indicator{font-size:.8rem;left:10px;padding:6px 12px;top:10px}.cancel-button,.preview-button,.start-broadcast-button,.stop-stream-button{font-size:.95rem;padding:12px 18px}}.start-stream-container{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;margin:0 auto;max-width:600px;padding:20px}.start-stream-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:15px}.start-stream-header h2{color:#333;font-size:1.5rem;margin:0}.stream-mode-selector{background-color:#f8f9fa;border-radius:8px;display:flex;gap:10px;margin-bottom:20px;padding:5px}.mode-button{background-color:initial;border:none;border-radius:6px;color:#555;cursor:pointer;flex:1 1;font-size:1rem;font-weight:500;padding:12px 20px;transition:all .2s}.mode-button:hover{background-color:#3498db1a;color:#3498db}.mode-button.active{background-color:#3498db;color:#fff;font-weight:600}.start-stream-form{display:flex;flex-direction:column;gap:20px}.form-group input,.form-group select,.form-group textarea{border:1px solid #ddd;border-radius:6px;font-family:inherit;font-size:.95rem;padding:10px 14px;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a;outline:none}.privacy-select{background-color:#fff;cursor:pointer;width:100%}.form-group input:disabled,.form-group textarea:disabled{background-color:#f5f5f5;cursor:not-allowed}.form-group textarea{min-height:80px;resize:vertical}.help-text{color:#666;display:block;font-size:.85rem;margin-top:6px}.stream-info-box{background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;margin:10px 0;padding:15px}.stream-info-box h4{color:#2c3e50;font-size:1rem;margin:0 0 10px}.stream-info-box ol{margin:10px 0;padding-left:20px}.stream-info-box li{color:#555;font-size:.9rem;margin:6px 0}.stream-info-box .note{background-color:#fff3cd;border-left:3px solid #ffc107;border-radius:4px;color:#856404;font-size:.9rem;margin:12px 0 0;padding:10px}.stream-info-box .note strong{color:#856404}.error-message{margin-bottom:15px;padding:12px 15px}.form-actions{display:flex;gap:12px;margin-top:10px}.start-stream-button{background-color:#e74c3c;border:none;border-radius:6px;color:#fff;cursor:pointer;flex:1 1;font-size:1rem;font-weight:600;padding:12px 24px;transition:background-color .2s}.start-stream-button:hover:not(:disabled){background-color:#c0392b}.start-stream-button:disabled{background-color:#95a5a6;cursor:not-allowed}.cancel-button{background-color:#95a5a6;border-radius:6px;color:#fff;font-weight:500}.cancel-button:hover:not(:disabled){background-color:#7f8c8d}.cancel-button:disabled{cursor:not-allowed;opacity:.6}@media (max-width:768px){.start-stream-container{margin:10px;padding:15px}.start-stream-header h2{font-size:1.25rem}.form-group input,.form-group textarea{font-size:16px}.stream-info-box{padding:12px}.stream-info-box li{font-size:.85rem}.form-actions{flex-direction:column}.cancel-button,.start-stream-button{width:100%}}@media (max-width:480px){.start-stream-container{margin:5px;padding:12px}.start-stream-header{margin-bottom:15px;padding-bottom:12px}.start-stream-header h2{font-size:1.1rem}.form-group label{font-size:.9rem}.stream-info-box h4{font-size:.95rem}.help-text,.stream-info-box li{font-size:.8rem}}.live-stream-list{background-color:#f8f9fa;border-radius:8px;height:100%;overflow-y:auto;padding:20px}.live-stream-list.empty{align-items:center;display:flex;justify-content:center}.empty-state{color:#999;padding:40px 20px}.empty-icon{margin-bottom:15px}.empty-state h3{color:#666;font-size:1.25rem}.empty-state p{color:#999;font-size:.95rem}.list-title{border-bottom:2px solid #e9ecef;color:#333;font-size:1.25rem;justify-content:space-between;margin:0 0 20px;padding-bottom:12px}.list-title,.live-indicator{align-items:center;display:flex}.live-indicator{color:#e74c3c;font-size:.9rem;font-weight:400;gap:8px}.live-dot{background-color:#e74c3c;height:10px;width:10px}.stream-items{display:flex;flex-direction:column;gap:15px}.stream-item{background-color:#fff;border:2px solid #0000;border-radius:8px;cursor:pointer;display:flex;gap:12px;padding:12px;transition:all .2s ease}.stream-item:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.stream-item.active{background-color:#f0f8ff;border-color:#3498db}.stream-thumbnail{border-radius:6px;flex-shrink:0;height:68px;width:120px}.thumbnail-placeholder{background:linear-gradient(135deg,#667eea,#764ba2);height:100%;width:100%}.play-icon{color:#fff;font-size:2rem;opacity:.9}.live-badge{background-color:#e74c3c;border-radius:4px;font-size:.7rem;left:6px;padding:2px 8px;top:6px}.stream-details{display:flex;flex:1 1;flex-direction:column;gap:4px;min-width:0}.stream-title{align-items:center;color:#333;display:flex;font-size:1rem;gap:6px;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.privacy-icon{flex-shrink:0;font-size:.85rem;opacity:.8}.stream-streamer{color:#666;font-size:.85rem;font-weight:500;margin:0}.stream-description{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#888;display:-webkit-box;font-size:.85rem;margin:0;overflow:hidden}.stream-meta{align-items:center;display:flex;gap:10px;margin-top:auto}.stream-time{color:#999;font-size:.8rem}@media (max-width:768px){.live-stream-list{padding:15px}.list-title{align-items:flex-start;flex-direction:column;font-size:1.1rem;gap:8px}.stream-item{flex-direction:column;padding:10px}.stream-thumbnail{height:180px;width:100%}.stream-title{font-size:.95rem}.stream-description,.stream-streamer{font-size:.8rem}}@media (max-width:480px){.live-stream-list{padding:12px}.list-title{font-size:1rem}.stream-thumbnail{height:150px}.stream-item{padding:8px}.empty-icon{font-size:3rem}.empty-state h3{font-size:1.1rem}.empty-state p{font-size:.85rem}}.browse-streams-container{margin:0 auto;max-width:1400px;padding:20px}.browse-header{margin-bottom:30px}.browse-header h1{color:#333;font-size:2rem;margin:0 0 10px}.browse-subtitle{color:#666;font-size:1.1rem;margin:0}.streams-stats{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:40px}.stat-card{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;box-shadow:0 4px 12px #0000001a;color:#fff;padding:25px;text-align:center}.stat-number{font-size:3rem;font-weight:700;margin-bottom:5px}.stat-label{font-size:.95rem;opacity:.9}.no-streams{background-color:#f8f9fa;border-radius:12px;margin-top:40px;padding:60px 20px;text-align:center}.no-streams-icon{font-size:4rem;margin-bottom:20px}.no-streams h2{color:#333;margin:0 0 10px}.no-streams p{color:#666;font-size:1.1rem;margin:0}.streams-section{margin-top:30px}.section-title{align-items:center;color:#333;display:flex;font-size:1.5rem;gap:10px;margin:30px 0 20px}.streams-grid{grid-gap:24px;display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));margin-bottom:40px}.stream-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;cursor:pointer;overflow:hidden;transition:transform .2s,box-shadow .2s}.stream-card:hover{box-shadow:0 6px 20px #00000026;transform:translateY(-4px)}.stream-card.friend-stream{border:2px solid #3498db}.stream-thumbnail{background:linear-gradient(135deg,#667eea,#764ba2);overflow:hidden;padding-top:56.25%;position:relative;width:100%}.thumbnail-placeholder{align-items:center;background-color:#2c3e50;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.camera-icon{font-size:3rem;opacity:.5}.live-badge{align-items:center;background-color:#e74c3cf2;border-radius:6px;color:#fff;display:flex;font-size:.85rem;font-weight:700;gap:6px;left:12px;letter-spacing:.5px;padding:6px 12px;position:absolute;top:12px}.live-dot{animation:pulse 2s ease-in-out infinite;background-color:#fff;border-radius:50%;height:8px;width:8px}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.privacy-badge{background-color:#3498dbf2;border-radius:6px;color:#fff;font-size:.8rem;font-weight:600;padding:6px 12px;position:absolute;right:12px;top:12px}.privacy-badge.friends-badge{background-color:#2ecc71f2}.stream-card-info{padding:16px}.stream-card-title{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#333;display:-webkit-box;font-size:1.1rem;font-weight:600;line-height:1.3;margin:0 0 8px;overflow:hidden}.stream-card-streamer{color:#666;font-size:.9rem;margin:0 0 10px}.stream-card-description{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#555;display:-webkit-box;font-size:.9rem;line-height:1.4;margin:0 0 12px;overflow:hidden}.stream-card-footer{align-items:center;border-top:1px solid #eee;color:#888;display:flex;font-size:.85rem;justify-content:space-between;padding-top:12px}.stream-time{color:#888}.stream-type{color:#3498db;font-weight:500}@media (max-width:768px){.browse-streams-container{padding:15px}.browse-header h1{font-size:1.5rem}.browse-subtitle{font-size:1rem}.streams-stats{gap:15px;grid-template-columns:1fr}.stat-card{padding:20px}.stat-number{font-size:2.5rem}.streams-grid{gap:20px;grid-template-columns:1fr}.section-title{font-size:1.3rem}}@media (max-width:480px){.browse-streams-container{padding:10px}.browse-header h1{font-size:1.3rem}.stat-number{font-size:2rem}.stat-label{font-size:.85rem}}.friends-container{margin:0 auto;max-width:1200px;padding:20px}.friends-header{margin-bottom:30px}.friends-header h1{color:#333;font-size:2rem;margin:0 0 10px}.friends-subtitle{color:#666;font-size:1.1rem;margin:0}.add-friend-section{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;margin-bottom:30px;padding:25px}.add-friend-section h3{color:#333;font-size:1.2rem;margin:0 0 15px}.add-friend-form{display:flex;gap:12px}.friend-email-input{border:2px solid #e0e0e0;border-radius:8px;flex:1 1;font-size:1rem;padding:12px 16px;transition:border-color .2s}.friend-email-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a;outline:none}.send-request-button{background-color:#3498db;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 24px;transition:background-color .2s;white-space:nowrap}.send-request-button:hover{background-color:#2980b9}.success-message{margin-top:12px}.friends-tabs{border-bottom:2px solid #f0f0f0;display:flex;gap:10px;margin-bottom:25px}.tab-button{background:none;border:none;border-bottom:3px solid #0000;color:#666;cursor:pointer;font-size:1rem;font-weight:500;padding:12px 24px;position:relative;transition:all .2s}.tab-button:hover{color:#3498db}.tab-button.active{border-bottom-color:#3498db;color:#3498db;font-weight:600}.notification-badge{background-color:#e74c3c;border-radius:12px;color:#fff;display:inline-block;font-size:.75rem;font-weight:700;margin-left:8px;padding:2px 8px}.empty-state p{margin:0}.friends-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}.friend-card{align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;display:flex;gap:15px;padding:20px;position:relative;transition:transform .2s,box-shadow .2s}.friend-card:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.friend-avatar{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:1.5rem;font-weight:700;height:60px;justify-content:center;width:60px}.friend-info{flex:1 1;min-width:0}.friend-name{color:#333;font-size:1.1rem;font-weight:600;margin:0 0 5px}.friend-email{color:#666;font-size:.9rem;margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.friend-date{color:#999;font-size:.8rem;margin:0}.remove-friend-button{align-items:center;background-color:#f0f0f0;border:none;border-radius:50%;color:#666;cursor:pointer;display:flex;font-size:1.2rem;height:32px;justify-content:center;position:absolute;right:10px;top:10px;transition:all .2s;width:32px}.remove-friend-button:hover{background-color:#e74c3c;color:#fff}.requests-list{display:flex;flex-direction:column;gap:15px}.request-card{align-items:center;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;display:flex;gap:15px;padding:20px;transition:transform .2s,box-shadow .2s}.request-card:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.request-avatar{align-items:center;background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:1.5rem;font-weight:700;height:60px;justify-content:center;width:60px}.request-info{flex:1 1;min-width:0}.request-name{color:#333;font-size:1.1rem;font-weight:600;margin:0 0 5px}.request-email{color:#666;font-size:.9rem;margin:0 0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.request-time{color:#999;font-size:.8rem;margin:0}.request-actions{display:flex;flex-shrink:0;gap:10px}.accept-button,.decline-button{border:none;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;padding:10px 20px;transition:all .2s;white-space:nowrap}.accept-button{background-color:#52c41a;color:#fff}.accept-button:hover{background-color:#389e0d}.decline-button{background-color:#f0f0f0;color:#666}.decline-button:hover{background-color:#e74c3c;color:#fff}@media (max-width:768px){.friends-container{padding:15px}.friends-header h1{font-size:1.5rem}.friends-subtitle{font-size:1rem}.add-friend-section{padding:20px}.add-friend-form{flex-direction:column}.send-request-button{width:100%}.friends-grid{grid-template-columns:1fr}.friend-card,.request-card{padding:15px}.friend-avatar,.request-avatar{font-size:1.2rem;height:50px;width:50px}.request-actions{flex-direction:column;width:100%}.accept-button,.decline-button{width:100%}}@media (max-width:480px){.friends-container{padding:10px}.friends-header h1{font-size:1.3rem}.add-friend-section{padding:15px}.add-friend-section h3{font-size:1.1rem}.friend-email-input{font-size:16px}.tab-button{font-size:.9rem;padding:10px 16px}.friend-name,.request-name{font-size:1rem}.friend-email,.request-email{font-size:.85rem}}.groups-container{margin:0 auto;max-width:1200px;padding:20px}.groups-header{align-items:flex-start;display:flex;gap:20px;justify-content:space-between;margin-bottom:30px}.groups-header h1{color:#333;font-size:2rem;margin:0 0 10px}.groups-subtitle{color:#666;font-size:1.1rem;margin:0}.create-group-button{background-color:#3498db;border:none;border-radius:8px;color:#fff;cursor:pointer;flex-shrink:0;font-size:1rem;font-weight:600;padding:12px 24px;transition:background-color .2s;white-space:nowrap}.create-group-button:hover{background-color:#2980b9}.success-message{background-color:#f6ffed;border:1px solid #b7eb8f;border-radius:6px;color:#52c41a;margin-bottom:20px}.error-message,.success-message{font-size:.9rem;padding:12px 16px}.error-message{background-color:#fff2f0;border:1px solid #ffccc7;border-radius:6px;color:#ff4d4f;margin-top:12px}.empty-state{background-color:#f8f9fa;border-radius:12px;margin-top:20px;padding:60px 20px;text-align:center}.empty-icon{font-size:4rem;margin-bottom:20px;opacity:.5}.empty-state h3{color:#333;font-size:1.3rem;margin:0 0 10px}.empty-state p{color:#666;font-size:1rem;margin:0 0 20px}.create-group-button-secondary{background-color:#3498db;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:1rem;font-weight:600;padding:12px 30px;transition:background-color .2s}.create-group-button-secondary:hover{background-color:#2980b9}.groups-grid{grid-gap:20px;display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(350px,1fr))}.group-card{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a;padding:20px;transition:transform .2s,box-shadow .2s}.group-card:hover{box-shadow:0 4px 12px #00000026;transform:translateY(-2px)}.group-card-header{align-items:flex-start;display:flex;gap:15px;margin-bottom:15px;position:relative}.group-icon{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;color:#fff;display:flex;flex-shrink:0;font-size:1.8rem;font-weight:700;height:60px;justify-content:center;width:60px}.group-header-info{flex:1 1;min-width:0}.group-name{color:#333;font-size:1.2rem;font-weight:600;margin:0 0 5px}.group-meta{color:#666;font-size:.85rem;margin:0 0 5px}.owner-badge{background-color:#3498db;border-radius:12px;color:#fff;display:inline-block;font-size:.75rem;font-weight:600;padding:3px 10px}.delete-group-button{background:none;border:none;border-radius:6px;cursor:pointer;font-size:1.3rem;padding:8px;transition:background-color .2s}.delete-group-button:hover{background-color:#fee}.expand-button{background-color:#f8f9fa;border:none;border-radius:6px;color:#555;cursor:pointer;font-size:.9rem;font-weight:500;padding:10px;transition:background-color .2s;width:100%}.expand-button:hover{background-color:#e9ecef}.group-members-section{border-top:1px solid #e9ecef;margin-top:15px;padding-top:15px}.members-list{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.member-item{background-color:#f8f9fa;border-radius:8px;gap:12px;padding:10px}.member-avatar,.member-item{align-items:center;display:flex}.member-avatar{background:linear-gradient(135deg,#f093fb,#f5576c);border-radius:50%;color:#fff;flex-shrink:0;font-size:1rem;font-weight:700;height:40px;justify-content:center;width:40px}.member-info{display:flex;flex:1 1;flex-direction:column;min-width:0}.member-name{color:#333;font-size:.95rem;font-weight:600}.member-email{color:#666;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remove-member-button{align-items:center;background-color:#e9ecef;border:none;border-radius:50%;color:#666;cursor:pointer;display:flex;flex-shrink:0;font-size:1rem;height:28px;justify-content:center;transition:all .2s;width:28px}.remove-member-button:hover{background-color:#e74c3c;color:#fff}.you-badge{background-color:#52c41a;border-radius:12px;color:#fff;flex-shrink:0;font-size:.7rem;font-weight:600;padding:4px 10px}.add-member-section{margin-top:15px}.add-member-button{background-color:#e8f4f8;border:2px dashed #3498db;border-radius:6px;color:#3498db;cursor:pointer;font-size:.9rem;font-weight:600;padding:10px;transition:all .2s;width:100%}.add-member-button:hover{background-color:#d4ecf5}.add-member-form{align-items:center;display:flex;gap:8px}.member-select{background-color:#fff;border:2px solid #e0e0e0;border-radius:6px;cursor:pointer;flex:1 1;font-size:.9rem;padding:10px;transition:border-color .2s}.member-select:focus{border-color:#3498db;outline:none}.add-member-confirm-button{background-color:#52c41a;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:.9rem;font-weight:600;padding:10px 16px;transition:background-color .2s}.add-member-confirm-button:hover{background-color:#389e0d}.add-member-cancel-button{background-color:#f0f0f0;border:none;border-radius:6px;color:#666;cursor:pointer;font-size:.9rem;font-weight:600;padding:10px 16px;transition:background-color .2s}.add-member-cancel-button:hover{background-color:#d9d9d9}.modal-overlay{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.modal-content{background:#fff;border-radius:12px;box-shadow:0 10px 40px #0003;max-height:90vh;max-width:500px;overflow-y:auto;padding:30px;width:100%}.modal-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:25px}.modal-header h2{color:#333;font-size:1.5rem;margin:0}.modal-close-button{align-items:center;background-color:#f0f0f0;border:none;border-radius:50%;color:#666;cursor:pointer;display:flex;font-size:1.2rem;height:32px;justify-content:center;transition:all .2s;width:32px}.modal-close-button:hover{background-color:#e74c3c;color:#fff}.create-group-form{gap:20px}.create-group-form,.form-group{display:flex;flex-direction:column}.form-group label{color:#333;font-size:.95rem;font-weight:600;margin-bottom:8px}.group-name-input{border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;padding:12px 16px;transition:border-color .2s}.group-name-input:focus{border-color:#3498db;box-shadow:0 0 0 3px #3498db1a;outline:none}.no-friends-text{color:#666;font-size:.9rem;margin:0;padding:20px;text-align:center}.friends-checklist,.no-friends-text{background-color:#f8f9fa;border-radius:8px}.friends-checklist{display:flex;flex-direction:column;gap:10px;max-height:200px;overflow-y:auto;padding:10px}.friend-checkbox-label{align-items:center;border-radius:6px;cursor:pointer;display:flex;gap:10px;padding:8px;transition:background-color .2s}.friend-checkbox-label:hover{background-color:#e9ecef}.friend-checkbox-label input[type=checkbox]{cursor:pointer;height:18px;width:18px}.friend-checkbox-label span{color:#333;font-size:.9rem}.modal-actions{display:flex;gap:12px;margin-top:10px}.create-button{background-color:#3498db;border:none;border-radius:8px;color:#fff;cursor:pointer;flex:1 1;font-size:1rem;font-weight:600;padding:12px 24px;transition:background-color .2s}.create-button:hover{background-color:#2980b9}.cancel-button{background-color:#f0f0f0;border:none;border-radius:8px;color:#666;cursor:pointer;flex:1 1;font-size:1rem;font-weight:600;padding:12px 24px;transition:background-color .2s}.cancel-button:hover{background-color:#d9d9d9}@media (max-width:768px){.groups-container{padding:15px}.groups-header{align-items:flex-start;flex-direction:column}.groups-header h1{font-size:1.5rem}.groups-subtitle{font-size:1rem}.create-group-button{width:100%}.groups-grid{grid-template-columns:1fr}.group-card{padding:15px}.group-icon{font-size:1.5rem;height:50px;width:50px}.modal-content{padding:20px}.modal-header h2{font-size:1.3rem}.add-member-form{flex-direction:column}.add-member-cancel-button,.add-member-confirm-button{width:100%}}@media (max-width:480px){.groups-container{padding:10px}.groups-header h1{font-size:1.3rem}.group-card-header{gap:10px}.group-icon{font-size:1.3rem;height:45px;width:45px}.group-name{font-size:1.1rem}.modal-content{padding:15px}.group-name-input{font-size:16px}}
/*# sourceMappingURL=main.a8c45ea8.css.map*/