.sidebar-aside{background-color:#fff;border-right:1px solid #e2e8f0;flex-direction:column;width:16rem;height:100vh;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:relative}.sidebar-aside.collapsed{width:5rem}.sidebar-collapse-btn{color:#64748b;cursor:pointer;z-index:50;background-color:#fff;border:1px solid #e2e8f0;border-radius:9999px;justify-content:center;align-items:center;padding:.25rem;transition:background-color .2s;display:flex;position:absolute;top:1.5rem;right:-.75rem;box-shadow:0 1px 2px #0000000d}.sidebar-collapse-btn:hover{background-color:#f8fafc}.sidebar-header{border-bottom:1px solid #f1f5f9;align-items:center;gap:.75rem;padding:1.5rem;display:flex}.sidebar-logo-emoji{font-size:1.5rem}.sidebar-logo-text{color:#f47521;letter-spacing:-.025em;margin:0;font-size:1rem;font-weight:800}.sidebar-nav{flex-direction:column;flex:1;gap:.375rem;padding:1.5rem 1rem;display:flex;overflow-y:auto}.sidebar-nav-btn{cursor:pointer;text-align:left;background-color:#0000;border:none;border-radius:.75rem;align-items:center;gap:.875rem;width:100%;padding:.75rem 1rem;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.sidebar-nav-btn.active{color:#4f46e5;background-color:#e0e7ff}.sidebar-nav-btn.inactive{color:#64748b}.sidebar-nav-btn.inactive:hover{color:#334155;background-color:#f8fafc}.sidebar-footer{border-top:1px solid #f1f5f9;flex-direction:column;gap:.875rem;padding:1rem;display:flex}.sidebar-profile-box{align-items:center;gap:.75rem;padding:0 .5rem;display:flex}.sidebar-avatar{color:#4f46e5;background-color:#e0e7ff;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:.875rem;font-weight:700;display:flex}.sidebar-profile-info{flex:1;min-width:0}.sidebar-profile-name{color:#334155;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.875rem;font-weight:700;overflow:hidden}.sidebar-profile-email{color:#94a3b8;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.75rem;overflow:hidden}.sidebar-logout-btn{color:#ef4444;cursor:pointer;text-align:left;background-color:#0000;border:none;border-radius:.75rem;align-items:center;gap:.875rem;width:100%;padding:.75rem 1rem;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.sidebar-logout-btn:hover{background-color:#fef2f2}
.notif-dropdown{z-index:50;background-color:#fff;border:1px solid #e2e8f0;border-radius:1rem;width:20rem;margin-top:.75rem;position:absolute;right:0;overflow:hidden;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.notif-dropdown-header{background-color:#f8fafc;border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}.notif-dropdown-title{color:#334155;align-items:center;gap:.375rem;font-size:.75rem;font-weight:800;display:flex}.notif-dropdown-header-actions{align-items:center;gap:.5rem;display:flex}.notif-dropdown-mark-all{color:#4f46e5;cursor:pointer;background:0 0;border:none;padding:0;font-size:.625rem;font-weight:800;transition:color .2s}.notif-dropdown-mark-all:hover{color:#3730a3}.notif-dropdown-unread-badge{color:#fff;background-color:#4f46e5;border-radius:9999px;padding:.125rem .375rem;font-size:.625rem;font-weight:700}.notif-dropdown-body{max-height:20rem;overflow-y:auto}.notif-dropdown-body>*+*{border-top:1px solid #f8fafc}.notif-dropdown-item{cursor:pointer;align-items:start;gap:.75rem;padding:.875rem;transition:background-color .2s;display:flex}.notif-dropdown-item:hover{background-color:#f8fafc}.notif-dropdown-item.unread{background-color:#e0e7ff4d}.notif-dropdown-icon-wrapper{border-radius:.5rem;flex-shrink:0;justify-content:center;align-items:center;width:2rem;height:2rem;margin-top:.125rem;display:flex}.notif-dropdown-icon-wrapper.unread{color:#4338ca;background-color:#e0e7ff}.notif-dropdown-icon-wrapper.read{color:#64748b;background-color:#f1f5f9}.notif-dropdown-item-content{flex:1;min-width:0}.notif-dropdown-item-title-row{justify-content:space-between;align-items:center;display:flex}.notif-dropdown-item-title{color:#1e293b;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:.75rem;font-weight:700;overflow:hidden}.notif-dropdown-item-desc{color:#64748b;margin:.125rem 0 0;font-size:.625rem;line-height:1.625}.notif-dropdown-unread-dot{background-color:#4f46e5;border-radius:9999px;flex-shrink:0;width:.625rem;height:.625rem}.notif-dropdown-friend-item{justify-content:space-between;align-items:start;gap:.75rem;padding:.875rem;transition:background-color .2s;display:flex}.notif-dropdown-friend-item:hover{background-color:#f8fafc}.notif-dropdown-friend-info{min-width:0}.notif-dropdown-friend-actions{flex-shrink:0;align-items:center;gap:.25rem;margin-top:.125rem;display:flex}.notif-dropdown-btn-accept{color:#059669;cursor:pointer;background-color:#ecfdf5;border:none;border-radius:.375rem;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;transition:background-color .2s;display:flex}.notif-dropdown-btn-accept:hover{background-color:#d1fae5}.notif-dropdown-btn-reject{color:#dc2626;cursor:pointer;background-color:#fef2f2;border:none;border-radius:.375rem;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;transition:background-color .2s;display:flex}.notif-dropdown-btn-reject:hover{background-color:#fee2e2}.notif-dropdown-empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:2rem 1rem;display:flex}.notif-dropdown-empty-text{color:#94a3b8;margin:0;font-size:.75rem;font-weight:600}
.top-header{z-index:40;background-color:#fff;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:1rem 2rem;display:flex;position:sticky;top:0;box-shadow:0 1px 2px #0000000d}.top-header-title{color:#1e293b;margin:0;font-size:1.25rem;font-weight:800;line-height:1.25}.top-header-subtitle{color:#94a3b8;margin:.125rem 0 0;font-size:.75rem;font-weight:600}.top-header-actions{align-items:center;gap:1.5rem;display:flex}.top-header-search-wrapper{display:none;position:relative}@media (min-width:768px){.top-header-search-wrapper{display:block}}.top-header-search-icon{color:#94a3b8;position:absolute;top:50%;left:.875rem;transform:translateY(-50%)}.top-header-search-input{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:.75rem;outline:none;width:16rem;padding:.5rem 1rem .5rem 2.5rem;font-size:.75rem;font-weight:600;transition:all .2s}.top-header-search-input:focus{background-color:#fff;border-color:#4f46e5}.top-header-premium-btn{color:#b45309;cursor:pointer;background-color:#fef3c7;border:1px solid #fde68a;border-radius:.75rem;align-items:center;gap:.375rem;padding:.5rem .875rem;font-size:.75rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 1px 2px #0000000d}.top-header-premium-btn:hover{background-color:#fde68a}.top-header-premium-badge{color:#4338ca;-webkit-user-select:none;user-select:none;background-color:#e0e7ff;border:1px solid #c7d2fe;border-radius:.75rem;align-items:center;gap:.375rem;padding:.375rem .75rem;font-size:.75rem;font-weight:700;display:flex}.top-header-notif-btn{color:#64748b;cursor:pointer;background-color:#0000;border:none;border-radius:.75rem;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex;position:relative}.top-header-notif-btn:hover{color:#334155;background-color:#f8fafc}.top-header-notif-dot{background-color:#4f46e5;border-radius:9999px;width:.5rem;height:.5rem;position:absolute;top:.25rem;right:.25rem}.top-header-profile-trigger{border-left:1px solid #f1f5f9;align-items:center;gap:.75rem;padding-left:.5rem;display:flex}.top-header-profile-btn{color:#64748b;cursor:pointer;background-color:#f1f5f9;border:none;border-radius:9999px;justify-content:center;align-items:center;width:2.25rem;height:2.25rem;transition:background-color .2s;display:flex}.top-header-profile-btn:hover{background-color:#e2e8f0}