@layer components{.navbar{height:var(--navbar-height);background:var(--color-surface-navbar);padding:0 1rem 0 0}.navbar__inner{height:100%;display:flex;align-items:center;justify-content:space-between}.navbar__logo-container{display:flex;align-items:center;justify-content:flex-start;width:var(--sidebar-width);height:100%;padding-left:1rem;box-sizing:border-box;background-color:var(--color-surface-sidebar)}.navbar__logo-link{display:flex;align-items:center;.navbar__logo-image-wrapper{width:206px;& img{width:100%;height:auto}}}.navbar__logo--dark{display:none}.navbar__links{display:flex;align-items:center;gap:.5rem;margin-left:1.5rem;flex:1}.navbar__menu-item{position:relative}.navbar__menu-btn{display:flex;align-items:center;padding:.5rem .75rem;font-size:1rem;font-weight:600;line-height:1;color:var(--color-text);border-radius:var(--radius-sm);transition:background-color .2s,color .2s;&:hover{background:var(--color-hover)}}.navbar__menu-btn-icon{width:14px;margin-left:4px;opacity:.5;& svg{display:block;width:100%}}.navbar__dropdown{position:absolute;top:100%;left:0;margin-top:.25rem;width:max-content;min-width:200px;background:var(--color-surface);border-radius:var(--radius-md);box-shadow:0 20px 25px -5px rgb(0 0 0/10%),0 8px 10px -6px rgb(0 0 0/10%);border:1px solid var(--color-border);padding:.25rem 0;z-index:50}.navbar__dropdown-link{display:block;padding:.5rem 1rem;font-size:.75rem;font-weight:500;color:var(--color-text);transition:background-color .2s;&:hover{background:var(--color-hover)}}.navbar__user-menu{position:relative}.navbar__user-btn{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;background:none;border:none;font-size:.875rem;font-weight:500;color:var(--color-text)}.navbar__user-icon{width:14px;height:14px;flex-shrink:0;color:var(--color-text);opacity:.7}.navbar__user-name{max-width:8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.navbar__dropdown--right{left:auto;right:0}.navbar__dropdown-link--danger{width:100%;text-align:left;color:var(--color-danger);&:hover{background:rgb(220 38 38/8%)}}.navbar__auth{display:flex;align-items:center;gap:1rem}.navbar__login-link{font-weight:600;color:var(--color-text);text-decoration:none;margin:0 .75rem;&:hover{opacity:.8}}.signup-button{font-size:1rem;font-weight:600;padding:.25rem 3rem;border-radius:15px;border:1.371px solid rgb(255 255 255/10%);background:var(--color-accent-blue);color:var(--color-white);transition:all .2s ease;html.dark &{background:var(--color-primary-green);color:rgb(0 0 0/80%)}&:hover{opacity:.9}}.mobile-navbar{position:sticky;top:0;z-index:50;height:var(--mobile-navbar-height);background:rgb(30 30 44);padding:0 1rem}.mobile-navbar__inner{height:100%;display:flex;align-items:center;justify-content:space-between}.mobile-navbar__hamburger{padding:.5rem;color:#fff;& svg{width:1.5rem;height:1.5rem}}.mobile-navbar__logo img{height:19px;width:auto}.mobile-navbar__login{font-size:.875rem;font-weight:500;color:#fff;background:none;border:none;cursor:pointer}.mobile-navbar__user-menu{position:relative}.mobile-navbar__user-dropdown{position:absolute;top:100%;right:0;margin-top:.5rem;min-width:140px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:.375rem;box-shadow:0 4px 12px rgb(0 0 0/15%);z-index:50;padding:.25rem 0}.mobile-navbar__user-dropdown-link{display:block;width:100%;padding:.5rem 1rem;font-size:.875rem;color:var(--color-text);text-decoration:none;text-align:left;background:none;border:none;cursor:pointer}.mobile-navbar__user-dropdown-link:hover{background:var(--color-surface-hover, rgb(255 255 255/6%))}.mobile-navbar__user-dropdown-link--danger{color:#ef4444}.mobile-overlay{position:fixed;inset:0;top:var(--mobile-navbar-height);background:var(--color-bg);z-index:40;overflow-y:auto}.mobile-overlay__content{padding:1rem;display:flex;flex-direction:column;gap:.5rem}.mobile-overlay__group-btn{width:100%;display:flex;align-items:center;justify-content:space-between;padding:.75rem .5rem;font-size:1rem;font-weight:600;color:var(--color-text);border-bottom:1px solid var(--color-border);& svg{width:1rem;height:1rem;transition:transform .2s}}.mobile-overlay__submenu{padding-left:1rem;display:flex;flex-direction:column;gap:.25rem}.mobile-overlay__link{display:block;padding:.5rem 0;font-size:.875rem;color:var(--color-text-secondary);transition:color .2s;&:hover{color:var(--color-primary-green)}}.lock-icon{width:.875rem;height:.875rem;flex-shrink:0;color:var(--color-primary-green);html:not(.dark) &{color:var(--color-primary-blue)}}.navbar__dropdown-link--locked{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.mobile-overlay__link--locked{display:flex;align-items:center;gap:.5rem}.home-body .navbar,.home-body .navbar__logo-container,.home-body .mobile-navbar{background:#150e24}.home-body .navbar__menu-btn,.home-body .navbar__login-link,.home-body .mobile-navbar__hamburger,.home-body .mobile-navbar__login{color:#fff}.home-body .navbar__dropdown{background:#150e24;border-color:rgb(255 255 255/20%)}.home-body .navbar__dropdown-link{color:#fff;&:hover{background:rgb(255 255 255/10%)}}.home-body .navbar__menu-btn:hover{background:rgb(255 255 255/10%)}.desktop-navbar-wrap{position:fixed;top:0;left:0;right:0;z-index:50}.theme-toggle-wrapper{position:fixed;bottom:1.5rem;right:20px;z-index:50}.theme-toggle{position:relative;width:70px;height:35px;border:none;border-radius:28px;background:transparent;cursor:pointer;padding:0;outline:none;transition:all .2s ease-in-out;&:hover{transform:scale(1.05)}&:active{transform:scale(0.98)}&:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}}.theme-toggle__track{position:absolute;inset:0;border-radius:28px;background:linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);border:1px solid #e2e8f0;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:inset 0 1px 3px rgb(0 0 0/10%),0 1px 2px rgb(0 0 0/5%);html.dark &{background:linear-gradient(135deg, #1e293b 0%, #334155 100%);border:1px solid #475569;box-shadow:inset 0 1px 3px rgb(0 0 0/30%),0 1px 2px rgb(0 0 0/20%)}}.theme-toggle__thumb{position:absolute;top:2px;left:2px;width:30px;height:30px;border-radius:18px;background:linear-gradient(135deg, #fff 0%, #f8fafc 100%);border:1px solid rgb(255 255 255/80%);transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgb(0 0 0/10%),0 1px 2px rgb(0 0 0/6%);html.dark &{transform:translateX(36px);background:linear-gradient(135deg, #0f172a 0%, #1e293b 100%);border:1px solid #334155;box-shadow:0 2px 8px rgb(0 0 0/30%),0 1px 3px rgb(0 0 0/20%)}}.theme-toggle__icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);opacity:0;transition:all .2s ease-in-out;display:flex;align-items:center;justify-content:center;& svg{width:15px;height:15px;transition:all .5s ease-in-out;transform:rotate(180deg) scale(0.9)}}.theme-toggle__moon{color:#8b5cf6;html.dark &{color:#a78bfa;opacity:1;& svg{transform:rotate(0deg) scale(1)}}}.theme-toggle__sun{color:#f59e0b;html:not(.dark) &{opacity:1;& svg{transform:rotate(0deg) scale(1)}}}.theme-toggle:hover .theme-toggle__thumb{box-shadow:0 4px 8px rgb(0 0 0/15%),0 2px 4px rgb(0 0 0/10%)}html.dark .theme-toggle:hover .theme-toggle__thumb{box-shadow:0 4px 12px rgb(0 0 0/40%),0 2px 6px rgb(0 0 0/30%)}.theme-toggle:active .theme-toggle__thumb{transform:scale(0.95)}html.dark .theme-toggle:active .theme-toggle__thumb{transform:translateX(28px) scale(0.95)}}