*{box-sizing:border-box}:root{box-sizing:border-box;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.login-page,.auth-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 4rem);padding:2rem;width:100%;max-width:400px;margin:0 auto}.login-page h2,.auth-container h1{color:#ffffffde;margin-bottom:2rem;font-size:1.5rem;font-weight:600}.login-page form,.auth-container form{background-color:#222;border-radius:15px;padding:2rem;width:100%;box-shadow:0 4px 6px #0000001a}.form-group{margin-bottom:1rem}.form-group label{display:block;color:#ffffffde;margin-bottom:.5rem;font-size:.9rem}.form-group input,.login-page input{width:100%;padding:.75rem;border-radius:8px;border:1px solid #383838;background-color:#2a2a2a;color:#ffffffde;font-size:1rem;transition:all .2s ease}.form-group input:focus,.login-page input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px #646cff33}.login-page button,.auth-container button{width:100%;padding:.75rem;border-radius:8px;border:none;background-color:var(--highlight);color:#fff;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;margin-top:1rem}.login-page button:hover,.auth-container button:hover{background-color:var(--secondary);transform:translateY(-1px)}.login-page a,.auth-container a{color:var(--primary);text-decoration:none;font-size:.9rem;margin-top:1rem;display:block;text-align:center}.login-page a:hover,.auth-container a:hover{color:var(--text-light)}.forgot-password-link{color:#b44f21!important}.error{color:#ff4646;font-size:.9rem;margin-top:.5rem;text-align:center}.success-message{color:#4caf50;font-size:.9rem;margin-top:.5rem;text-align:center;margin-bottom:1rem}.card{background-color:var(--card-bg, #242424);border-radius:15px;box-shadow:0 2px 4px #0000001a;margin-bottom:20px}.profile-card{background:var(--card-bg);border-radius:10px;overflow:hidden;box-shadow:0 2px 4px #0003}.profile-background{height:60px;background:linear-gradient(to right,var(--primary),var(--secondary))}.profile-info{padding:20px;text-align:center}.profile-pic{width:150px;height:150px;border-radius:50%;margin-top:-40px;border:4px solid var(--card-bg)}.profile-info h3{color:var(--text-light);margin:10px 0 0}.profile-info p{color:#fff;font-size:.9em;margin:0}.profile-info .handle,.handle{color:var(--text-dark);font-style:italic;display:block;text-decoration:none;pointer-events:none}.post-button,.highlight-button,.delete-button,.root-logo{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-dark);width:36px;height:36px;padding:0;border-radius:50%;cursor:pointer;transition:all .2s ease;transform:scale(.9)}.post-button:hover,.highlight-button:hover,.delete-button:hover,.root-logo:hover{color:var(--primary);transform:scale(1)}.root-logo{color:var(--primary);background-color:var(--highlight)}.delete-button:hover span{color:#952b01!important}.highlight-button:hover span{color:var(--primary)!important}.post-button:hover{background:#ffffff1a}.post-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.post-button .material-symbols-rounded,.highlight-button .material-symbols-rounded{font-size:28px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.media-preview{position:relative;margin:10px 0;border-radius:5px;overflow:hidden;max-width:100%}.media-preview img,.media-preview video{border-radius:5px;width:100%;max-height:300px;object-fit:cover}.remove-media{position:absolute;top:8px;right:8px;background:#00000080;border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s}.remove-media:hover{background:#000000b3}.remove-media span{color:#fff;font-size:20px}.post-actions .gif-picker{position:absolute;top:calc(100% + 10px);left:0;background:#222;width:320px;border-radius:10px;box-shadow:0 4px 20px #00000026;padding:12px;z-index:1000;max-height:500px;display:flex;flex-direction:column;gap:12px;border:1px solid #151617}.post-actions .gif-picker:after{content:"";position:absolute;top:-8px;left:14px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #222222}.post-actions .gif-picker:before{content:"";position:absolute;top:-9px;left:14px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #151617;z-index:-1}.post-actions .gif-picker .gif-picker-header{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.post-actions .gif-picker .gif-picker-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0;flex-grow:1}.post-actions .gif-picker .gif-picker-close{background:none;border:none;padding:4px;cursor:pointer;color:var(--text-secondary);border-radius:4px;display:flex;align-items:center;justify-content:center;width:28px;height:28px}.post-actions .gif-picker .gif-picker-close:hover{background:#ffffff1a}.post-actions .gif-picker .gif-loading,.post-actions .gif-picker .gif-empty{padding:20px;text-align:center;color:#666;font-size:14px}.gif-search-bar{display:flex;gap:8px;padding:8px;background:#333;border-radius:8px;border:1px solid rgba(255,255,255,.1);height:40px;align-items:center}.gif-search-input{flex-grow:1;border:none;background:none;outline:none;font-size:.9rem;color:#fff;padding:0;height:24px;line-height:24px}.gif-search-input::placeholder{color:#ffffff80}.favorite-toggle{padding:4px;cursor:pointer;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;width:28px;height:28px;color:#ffffffb3;background:#333;border:none}.favorite-toggle:hover,.favorite-toggle.active{color:#ff4081}.post-actions button.favorite-toggle{color:unset}.post-actions button.favorite-toggle:hover{background-color:#ffffff1a}.post-actions button.favorite-toggle.active{background-color:#ff00001a}.favorite-button{padding:0}.favorite-button:hover{background:none}.gif-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;max-height:360px;overflow-y:auto;padding-right:8px}.gif-grid::-webkit-scrollbar{width:6px}.gif-grid::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:3px}.gif-grid::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px}.gif-grid .gif-item{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:4/3}.gif-grid .gif-item img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.gif-grid .gif-item:hover img{transform:scale(1.05)}.gif-grid .gif-favorite{position:absolute;top:8px;right:8px;background:none;border:none;padding:4px;cursor:pointer;color:#ffffffb3;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s}.gif-grid .gif-favorite:hover,.gif-grid .gif-favorite.active{color:#ff4081}.gif-grid .gif-wrapper{position:relative;width:100%;height:100%}.gif-grid .gif-wrapper img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s}.gif-grid .gif-wrapper:hover img{transform:scale(1.05)}.gif-grid .favorite-button{position:absolute;top:8px;right:8px;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s,transform .2s;transform:scale(.8);background:#00000080;color:#fff}.gif-grid .gif-wrapper:hover .favorite-button{opacity:1;transform:scale(1)}.gif-grid .favorite-button:hover{color:#ff4081;transform:scale(1)}.gif-grid .favorite-button.favorited{opacity:1;color:#ff4081}.gif-grid .heart-icon{font-size:16px;line-height:1}.post-actions .gif-picker .favorite-button{position:absolute;top:8px;right:8px;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s,transform .2s;transform:scale(.8);color:inherit}.post-actions .gif-picker .favorite-button.favorited{opacity:1}.gif-wrapper{position:relative;width:100%;height:100%}.gif-wrapper img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s}.gif-wrapper:hover img{transform:scale(1.05)}.favorite-button{position:absolute;top:8px;right:8px;background:#ffffffe6;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s,transform .2s;transform:scale(.8)}.gif-wrapper:hover .favorite-button{opacity:1;transform:scale(1)}.favorite-button.favorited{opacity:1}.post-actions .gif-picker .favorite-button{position:absolute;top:0;right:0;border:none;border-radius:50%;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s,transform .2s;transform:scale(.8);color:inherit;background:none}.post-actions .gif-picker .favorite-button:hover{color:#ff4081;transform:scale(1)}.post-actions .gif-picker .gif-wrapper:hover .favorite-button{opacity:1;transform:scale(1)}.post-actions .gif-picker .favorite-button.favorited{opacity:1;color:#ff4081}.heart-icon{font-size:16px;line-height:1}.post-create-card{background:var(--card-bg);border-radius:10px;padding:20px}.post-create-card form{display:flex;flex-direction:column;gap:12px}.post-create-card textarea{background:var(--dark-bg);border:1px solid var(--border);border-radius:5px;padding:15px;min-height:100px;color:var(--text-light);resize:none;font-size:1rem}.post-create-card textarea:focus{outline:none;border-color:var(--primary)}.post-create-card .char-count{color:var(--text-dark);font-size:.9em;text-align:right;padding:0 8px}.post-create-card .post-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:12px}.post-create-card .post-media-buttons{display:flex;gap:8px}.post-create-card .post-actions .emoji-picker-container,.post-create-card .post-actions .gif-picker-container{position:relative}.post-create-card .post-actions .emoji-picker-popup{position:absolute;top:calc(100% + 10px);left:0;border-radius:10px;box-shadow:0 4px 20px #0003;background:#222}.post-create-card .post-actions .emoji-picker-popup .EmojiPickerReact{border:1px solid #151617!important;--epr-bg-color: #222222 !important;--epr-category-label-bg-color: #222222 !important;--epr-hover-bg-color: rgba(255, 255, 255, .1) !important}.post-create-card .post-actions .emoji-picker-popup.emoji-picker-popup:before{content:"";position:absolute;top:-8px;left:14px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #151617;z-index:1}.post-create-card .post-actions .emoji-picker-popup.emoji-picker-popup:after{content:"";position:absolute;top:-7px;left:14px;border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #222222;z-index:2}.post-create-card .media-preview-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:10px 0}.emoji-picker-popup button{padding:0}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{width:90%;max-width:600px;max-height:90vh;overflow-y:auto;animation:modalFadeIn .3s ease-out}@keyframes modalFadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.post-card{background:var(--card-bg);border-radius:10px;padding:20px;margin-bottom:20px;box-shadow:0 2px 4px #0000001a;display:flex;flex-direction:column;gap:15px}.post-card .post-header{display:flex;align-items:center;gap:5px;text-align:left}.post-card .post-header img{width:40px;height:40px;border-radius:50%}.post-card .post-header .post-author{margin-right:auto;line-height:1}.post-card .post-header .post-author h4{margin:0;color:var(--text-light)}.post-card .post-header .post-author span{font-size:.8em;font-style:italic}.post-card .post-header span{color:var(--text-dark);font-size:.9em}.post-card .post-content{color:var(--text-light);text-align:left;color:#fff}.post-card .post-content p{margin:0;line-height:1.5}.post-card .media-container{margin-top:10px;border-radius:8px;overflow:hidden}.post-card .media-container img,.post-card .media-container video{max-width:100%;height:auto;display:block;border-radius:8px}.post-card .post-actions{display:flex;gap:10px;border-top:1px solid var(--border);padding-top:15px}.post-card .post-actions button{display:flex;align-items:center;gap:5px;font-size:.9em;background-color:transparent;border:none;color:var(--text-dark);padding:5px 10px;cursor:pointer;transition:all .2s}.post-card .post-actions button:hover{color:var(--primary);transform:scale(1.05)}.post-timestamp{display:flex;flex-direction:column;align-items:flex-end;gap:0px}.post-date,.post-time{color:var(--text-dark);font-size:.8em}.post-time{opacity:.8}.options-picker-container{position:relative}.options-picker-popup{position:absolute;right:0;top:100%;background:#222;border:1px solid var(--border);border-radius:8px;padding:8px;z-index:1000;box-shadow:0 2px 10px #0000001a}.edit-content{width:100%;margin:10px 0}.edit-content textarea{width:100%;min-height:100px;padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--background);color:var(--text);margin-bottom:10px;resize:vertical}.edit-actions{display:flex;gap:10px;justify-content:flex-end}.trending-card{background:var(--card-bg);border-radius:10px;padding:20px}.trending-card h3{color:var(--text-light);margin-top:0}.trending-card ul{list-style:none;padding:0;margin:0}.trending-card li{display:flex;align-items:center;gap:10px;font-size:.9em;color:var(--text-dark);padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:color .2s}.trending-card li:before{content:"🌱";font-size:1.2em}.trending-card li:hover{color:var(--primary)}.suggestions-card{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:15px}.suggestions-card h3{color:var(--text-light);font-size:1.2rem;margin:0 0 15px}.suggestions-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}.suggestions-card li{display:flex;align-items:center;justify-content:space-between;gap:10px}.user-info{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit;flex:1;transition:all .2s ease}.user-info:hover{transform:translate(4px)}.user-info img{width:40px;height:40px;border-radius:50%;object-fit:cover}.user-details{display:flex;flex-direction:column;align-items:flex-start;gap:0px}.user-name{color:var(--text-light);font-weight:600;font-size:.9rem}.user-handle{color:var(--text-dark);font-size:.8rem}.follow-button{background-color:transparent;border:1px solid var(--primary);color:var(--primary);padding:6px 16px;border-radius:20px;font-size:.9rem;cursor:pointer;transition:all .2s ease}.follow-button:hover{background-color:var(--primary);color:var(--text-light)}.aside-container{display:flex;flex-direction:column;gap:20px;position:sticky;top:20px}:root{--dark-bg: #121212;--card-bg: #1e1e1e;--primary: #019579;--secondary: #006d62;--accent: #01505a;--highlight: #034059;--text-light: #f0f3bd;--text-dark: #a0a3a3;--border: #2d2d2d}.feed-container{display:grid;grid-template-columns:1fr 2.5fr 1fr;gap:20px;max-width:inherit}.feed-left{position:sticky;top:20px;height:fit-content}.feed-main{display:flex;flex-direction:column;gap:20px}.feed-right{position:sticky;top:20px;height:fit-content}.loading,.error,.no-posts{background:var(--card-bg);border-radius:10px;padding:20px;text-align:center;color:var(--text-light);margin:20px auto;max-width:600px}.error{color:#ff6b6b;border:1px solid #ff6b6b}.no-posts{color:var(--text-dark);font-style:italic}@media (max-width: 1024px){.feed-container{grid-template-columns:1fr 2fr}.feed-right{display:none}}@media (max-width: 768px){.feed-container{grid-template-columns:1fr}.feed-left{display:none}}.profile-posts{background-color:#242424;border-radius:15px;padding:20px;margin-top:20px}.profile-posts .posts-heading{margin:0 0 20px;color:var(--text-light);font-size:1.5em;padding:0 20px}.profile-posts .posts-container{display:flex;flex-direction:column;gap:20px}.profile-posts .no-posts{text-align:center;padding:40px;color:var(--text-dark);font-size:1.1em;background:var(--card-bg);border-radius:10px}.profile-posts .post-categories{display:flex;gap:20px;margin-bottom:20px;padding:0 20px}.profile-posts .category-btn{background:none;border:none;color:var(--text-dark);font-size:1em;padding:8px 16px;cursor:pointer;border-radius:20px;transition:all .2s ease}.profile-posts .category-btn:hover{color:var(--text-light);background:var(--card-bg)}.profile-posts .category-btn.active{color:var(--text-light);background:var(--card-bg);font-weight:500}.profile-page{max-width:1200px;margin:0 auto}.profile-page .profile-header{background:var(--card-bg);border-radius:12px;overflow:hidden;margin-bottom:20px;box-shadow:0 2px 8px #0000001a}.profile-page .profile-cover{height:300px;position:relative;overflow:hidden}.profile-page .cover-image{width:100%;height:100%;object-fit:cover}.profile-page .profile-info{padding:20px;position:relative;display:flex;gap:24px}.profile-page .profile-picture{margin-top:-80px;width:160px;height:160px;border-radius:50%;border:4px solid var(--card-bg);overflow:hidden;flex-shrink:0}.profile-page .profile-picture img{width:100%;height:100%;object-fit:cover}.profile-page .profile-details{flex:1}.profile-page .profile-names{text-align:left}.profile-page .profile-names h1{text-align:left;margin-bottom:0}.profile-page .handle{color:var(--text-secondary);margin:4px 0;font-size:16px}.profile-page .bio{text-align:left;margin-top:10px;color:var(--text-color);line-height:1.5}.profile-page .profile-stats{display:flex;gap:32px;margin:16px 0}.profile-page .stat{display:flex;flex-direction:column;align-items:center}.profile-page .stat .count{font-size:20px;font-weight:600;color:var(--text-color)}.profile-page .stat .label{font-size:14px;color:var(--text-secondary)}.profile-page .profile-actions{display:flex;gap:12px;margin-top:16px}.profile-page .edit-profile-btn,.profile-page .follow-btn,.profile-page .message-btn,.profile-page .delete-account-btn{padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s ease}.profile-page .edit-profile-btn{background-color:var(--primary-color);color:#fff;border:none;text-decoration:none}.profile-page .edit-profile-btn:hover{background-color:var(--primary-color-dark)}.profile-page .follow-btn{background-color:var(--primary-color);color:#fff;border:none}.profile-page .follow-btn:hover{background-color:var(--primary-color-dark)}.profile-page .message-btn{background-color:var(--hover-color);color:var(--text-color);border:1px solid var(--border-color)}.profile-page .message-btn:hover{background-color:var(--border-color)}.profile-page .message-btn .material-symbols-rounded{font-size:20px}.profile-page .delete-account-btn{background-color:var(--error-color);color:#fff;border:none}.profile-page .delete-account-btn:hover{background-color:var(--error-color-dark)}.profile-page .profile-tabs{display:flex;gap:20px;margin-bottom:20px;border-bottom:1px solid var(--color-border);padding-bottom:10px}.profile-page .tab{background:none;border:none;padding:10px 20px;font-size:16px;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.profile-page .tab:hover{color:var(--color-text)}.profile-page .tab.active{color:var(--color-primary);border-bottom:2px solid var(--color-primary)}.profile-page .posts-grid{display:grid;gap:20px}.profile-page .post-card{background:var(--card-bg);border-radius:10px;padding:20px;box-shadow:0 2px 4px #0000001a}.profile-page .post-header{display:flex;align-items:center;gap:10px;margin-bottom:15px}.profile-page .post-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}.profile-page .post-info{display:flex;flex-direction:column}.profile-page .post-author{font-weight:500;color:var(--color-text)}.profile-page .post-date{font-size:14px;color:var(--color-text-secondary)}.profile-page .post-content{color:var(--color-text);font-size:16px;line-height:1.5;margin-bottom:15px}.profile-page .post-image{width:100%;border-radius:10px;margin-bottom:15px}.profile-page .post-actions{display:flex;gap:20px}.profile-page .action-btn{display:flex;align-items:center;gap:5px;background:none;border:none;color:var(--color-text-secondary);cursor:pointer;transition:all .2s ease}.profile-page .action-btn:hover{color:var(--color-primary)}.profile-page .no-posts{text-align:center;padding:40px;color:var(--color-text-secondary);font-size:16px}.profile-page .loading,.profile-page .error,.profile-page .not-found{text-align:center;padding:40px;color:var(--color-text);font-size:18px}.profile-page.loading,.profile-page.error,.profile-page.not-found{display:flex;justify-content:center;align-items:center;min-height:400px;font-size:18px;color:var(--text-secondary)}@media (max-width: 768px){.profile-page .profile-info{flex-direction:column;align-items:center;text-align:left}.profile-page .profile-picture{margin-top:-60px;width:120px;height:120px}.profile-page .profile-stats,.profile-page .profile-actions{justify-content:center}}.settings-page{max-width:800px;margin:0 auto;padding:20px}.settings-container{background:var(--card-bg);border-radius:15px;padding:30px;box-shadow:0 2px 4px #0000001a}.settings-container h1{margin:0 0 20px;color:var(--color-text);font-size:24px}.error-message{background:var(--color-error-light);color:var(--color-error);padding:12px;border-radius:8px;margin-bottom:20px}.form-section{margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid var(--color-border)}.form-section:last-child{border-bottom:none;padding-bottom:0}.form-section h2{color:var(--color-text);font-size:18px;margin:0 0 20px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:var(--color-text);font-weight:500}.form-group input,.form-group textarea{width:100%;padding:10px;border:1px solid var(--color-border);border-radius:8px;background:var(--input-bg);color:var(--color-text);font-size:16px;transition:all .2s ease}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light)}.form-group textarea{resize:vertical;min-height:100px}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:30px}.cancel-btn,.save-btn{padding:10px 20px;border-radius:20px;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease}.cancel-btn{background:transparent;border:1px solid var(--color-border);color:var(--color-text)}.cancel-btn:hover{background:var(--color-border)}.save-btn{background:var(--color-primary);border:none;color:#fff}.save-btn:hover{background:var(--color-primary-dark)}.loading{text-align:center;padding:40px;color:var(--color-text);font-size:18px}.navbar{position:relative;z-index:2;padding:5px 20px;background-color:var(--card-bg);display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:20px;border-radius:10px}.navbar a{color:#028090;text-decoration:inherit;font-weight:bolder}.navbar a:hover,.navbar .logout-button:hover{color:var(--text-light)}.nav-links{gap:10px;display:flex;align-items:center}.navbar .logout-button{color:#fff;background:#902302;border:none;border-radius:5px;padding:5px;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:bolder}.direct-message{position:fixed;bottom:80px;right:390px;width:320px;height:400px;background-color:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 2px 10px #0000004d;display:flex;flex-direction:column;z-index:1000;animation:slideIn .2s ease forwards}.direct-message-header{padding:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background-color:var(--card-bg);border-radius:10px 10px 0 0}.recipient-info{display:flex;align-items:center;gap:10px;color:var(--text-light)}.recipient-info img{width:32px;height:32px;border-radius:50%;object-fit:cover}.close-button{background:none;border:none;color:var(--text-light);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:4px}.close-button:hover{background-color:var(--accent)}.start-message{text-align:center;color:var(--text-secondary);margin:auto}.message{max-width:80%;padding:8px 12px;border-radius:16px;word-break:break-word;animation:fadeIn .2s ease}.message-input{padding:12px;border-top:1px solid var(--border);display:flex;gap:8px;background-color:var(--card-bg);border-radius:0 0 10px 10px}.message-input button{background-color:var(--primary);border:none;color:var(--text-light);padding:8px 16px;border-radius:20px;cursor:pointer;transition:background-color .2s ease}.message-input button:hover:not(:disabled){background-color:var(--secondary)}.message-input button:disabled{opacity:.5;cursor:not-allowed}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.message-widget{position:fixed;bottom:20px;right:20px;z-index:1000}.message-widget-toggle{width:50px;height:50px;border-radius:50%;background-color:var(--primary);border:none;color:var(--text-light);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px #0000004d;transition:transform .2s ease}.message-widget-toggle:hover{transform:scale(1.1);background-color:var(--secondary)}.message-widget-content{position:absolute;bottom:60px;right:0;width:320px;max-height:500px;background-color:var(--card-bg);border:1px solid var(--border);border-radius:10px;box-shadow:0 2px 10px #0000004d;overflow:hidden;display:flex;flex-direction:column}.message-widget-content h3{margin:0;padding:15px;background-color:var(--card-bg);color:var(--text-light);border-bottom:1px solid var(--border)}.conversations-list{flex:1;overflow-y:auto;padding:10px}.conversation-item{display:flex;align-items:flex-start;padding:10px;cursor:pointer;border-radius:8px;transition:background-color .2s ease;color:var(--text-light);margin-bottom:4px}.conversation-item:hover{background-color:var(--accent)}.conversation-item img{width:40px;height:40px;border-radius:50%;margin-right:12px;object-fit:cover}.conversation-info{flex:1;min-width:0}.conversation-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.conversation-info .name{font-weight:600;color:var(--text-light);margin-right:8px}.conversation-info .time{font-size:.8em;color:var(--text-secondary);white-space:nowrap}.conversation-info .last-message{text-align:left;display:block;font-size:.9em;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.no-conversations{text-align:center;padding:20px;color:var(--text-secondary)}.no-conversations .hint{font-size:.9em;margin-top:10px;color:var(--text-secondary)}.loading{text-align:center;padding:20px;color:var(--text-light)}.conversation-view{display:flex;flex-direction:column;height:100%}.conversation-header{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;color:var(--text-light)}.conversation-header button{background:none;border:none;cursor:pointer;padding:4px;border-radius:50%;color:var(--text-light)}.conversation-header button:hover{background-color:var(--accent)}.messages-container{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.message{max-width:80%;padding:8px 12px;border-radius:16px;word-break:break-word}.message.sent{background-color:var(--primary);color:var(--text-light);align-self:flex-end;border-bottom-right-radius:4px}.message.received{background-color:var(--accent);color:var(--text-light);align-self:flex-start;border-bottom-left-radius:4px}.message-input{padding:16px;border-top:1px solid var(--border);display:flex;gap:8px}.message-input input{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:20px;background:var(--card-bg);color:var(--text-light);outline:none}.message-input input:focus{border-color:var(--primary)}.message-input button{background:none;border:none;color:var(--primary);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}.message-input button:hover{color:var(--secondary)}.message-widget.open .message-widget-toggle{background-color:var(--secondary)}.message-widget-content{transform:scale(.95);opacity:0;transition:transform .2s ease,opacity .2s ease;pointer-events:none}.message-widget.open .message-widget-content{transform:scale(1);opacity:1;pointer-events:auto}#root{max-width:1440px;margin:0 auto;padding:2rem;text-align:center;width:100%}.app{width:100%;max-width:inherit;display:flex;flex-direction:column;align-items:stretch}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 1280px){.app{padding:0 20px}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.read-the-docs{color:#888}@keyframes animate{0%{transform:translateY(0) rotate(0);opacity:1;border-radius:5%}to{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.home-container{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center;color:#fff}.home-container h1{font-size:4rem;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.home-container h2{font-size:2rem;font-weight:300;text-shadow:1px 1px 2px rgba(0,0,0,.3);animation:slideUpFade 1s ease-out forwards;animation-delay:.5s;opacity:0}.background{position:fixed;width:100%;height:100%;top:0;left:0;margin:0;padding:0;background:linear-gradient(to bottom,#02c39a,#00a896,#028090,#05668d);overflow:hidden;z-index:0}.background li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:#fff3;animation:animate 27s linear infinite}.background li:nth-child(0){left:8%;width:20px;height:20px;bottom:-20px;animation-delay:1s}.background li:nth-child(1){left:9%;width:20px;height:20px;bottom:-20px;animation-delay:3s}.background li:nth-child(2){left:14%;width:85px;height:85px;bottom:-85px;animation-delay:2s}.background li:nth-child(3){left:0%;width:92px;height:92px;bottom:-92px;animation-delay:2s}.background li:nth-child(4){left:25%;width:45px;height:45px;bottom:-45px;animation-delay:15s}.background li:nth-child(5){left:77%;width:59px;height:59px;bottom:-59px;animation-delay:5s}.background li:nth-child(6){left:19%;width:129px;height:129px;bottom:-129px;animation-delay:17s}.background li:nth-child(7){left:30%;width:109px;height:109px;bottom:-109px;animation-delay:16s}.background li:nth-child(8){left:40%;width:108px;height:108px;bottom:-108px;animation-delay:19s}.background li:nth-child(9){left:48%;width:98px;height:98px;bottom:-98px;animation-delay:27s}