@layer theme,base;@layer components{.navbar{z-index:20;min-height:64px;padding-left:1rem;padding-right:1rem;padding-top:var(--safe-area-top);background:linear-gradient(135deg, oklch(from var(--color-gray-900) l c h / .85) 0%, oklch(from var(--color-gray-800) l c h / .8) 50%, oklch(from var(--color-gray-900) l c h / .85) 100%);-webkit-backdrop-filter:blur(var(--blur-xl));backdrop-filter:blur(var(--blur-xl));background-clip:padding-box;border-bottom:1px solid #0000;justify-content:space-between;align-items:center;gap:.5rem;display:flex;position:fixed;top:0;left:0;right:0;box-shadow:0 4px 20px #0003,inset 0 1px #ffffff1a;box-shadow:0 4px 20px lab(0% 0 0/.2),inset 0 1px lab(100% 0 0/.1)}.navbar:after{content:"";background:linear-gradient(90deg, transparent 0%, oklch(from var(--color-brand-primary) l c h / .3) 20%, oklch(from var(--color-brand-secondary) l c h / .4) 50%, oklch(from var(--color-brand-primary) l c h / .3) 80%, transparent 100%);height:1px;position:absolute;bottom:0;left:0;right:0}.navbar-logo{height:40px;transition:filter var(--duration-slow) ease}.navbar-logo:hover{filter:drop-shadow(0 0 8px oklch(from var(--color-brand-primary) l c h / .3))}.navbar-nav{flex-grow:1;justify-content:center;align-items:center;gap:.25rem;display:none}.navbar-nav-link{white-space:nowrap;color:var(--color-gray-300);transition:color var(--duration-slow) ease, transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;border-radius:.75rem;flex:none;align-items:center;gap:.5rem;padding:.625rem .75rem;font-weight:500;display:flex;position:relative}.navbar-nav-link:before{content:"";background:var(--gradient-brand-tint-lr);opacity:0;transition:opacity var(--duration-slow) ease;border-radius:.75rem;position:absolute;inset:0}.navbar-nav-link:hover{color:var(--color-white);box-shadow:var(--shadow-sm);transform:scale(1.05)}.navbar-nav-link:hover:before{opacity:1}.navbar-nav-link:nth-last-of-type(2),.navbar-nav-link:last-child{display:none}.navbar-mobile{left:0;right:0;top:var(--navbar-height);z-index:10;transition:transform var(--duration-slow) ease;background:linear-gradient(to right, oklch(from var(--color-gray-800) l c h / .7), oklch(from var(--color-gray-700) l c h / .65), oklch(from var(--color-gray-800) l c h / .7));border-bottom:1px solid oklch(from var(--color-gray-600) l c h / .3);-webkit-backdrop-filter:blur(var(--blur-md));backdrop-filter:blur(var(--blur-md));justify-content:center;align-items:center;padding:.5rem;font-size:.75rem;display:flex;position:fixed;box-shadow:0 10px 15px -3px #0003,inset 0 1px #ffffff14;box-shadow:0 10px 15px -3px lab(0% 0 0/.2),inset 0 1px lab(100% 0 0/.08)}.navbar-mobile-container{scrollbar-width:none;-ms-overflow-style:none;justify-content:center;align-items:center;gap:.25rem;display:flex;overflow-x:auto}.navbar-mobile-container::-webkit-scrollbar{display:none}.navbar-mobile-link{white-space:nowrap;color:var(--color-gray-300);transition:background var(--duration-slow) ease, color var(--duration-slow) ease, transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;border-radius:.5rem;flex-wrap:nowrap;align-items:center;gap:.25rem;padding:.375rem .5rem;font-weight:500;display:flex}.navbar-mobile-link:hover{background:var(--gradient-brand-tint-lr);color:var(--color-white);transform:scale(1.05);box-shadow:0 4px 6px -1px #0000001a;box-shadow:0 4px 6px -1px lab(0% 0 0/.1)}.navbar-mobile-link:last-child{display:none}@media (min-width:401px){.navbar-mobile-link:last-child{display:flex}}@media (min-width:640px){.navbar-mobile{font-size:.875rem}}@media (min-width:768px){.navbar-nav{display:flex}.navbar-mobile{display:none}}@media (min-width:880px){.navbar-nav-link:nth-last-of-type(2){display:flex}}@media (min-width:1024px){.navbar-nav{gap:.5rem}.navbar-nav-link{padding:.625rem 1.25rem}.navbar-nav-link:last-child{display:flex}}@media (max-width:509px){.navbar{padding-left:.5rem}.navbar .button{border-radius:.5rem;padding:.375rem .625rem;font-size:.8125rem}.navbar .button:before{border-radius:.5rem}}.navbar-token-button{background:linear-gradient(to right, var(--color-highlight-dark), var(--color-warning));color:var(--color-white);transition:background var(--duration-slow) ease, transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;font-weight:500}.navbar-token-button:hover{background:linear-gradient(to right, var(--color-highlight), var(--color-warning-400));box-shadow:var(--shadow-sm);transform:scale(1.05)}.navbar-token-button:active{transform:scale(.95)}.navbar-token-button:before{content:"";background:linear-gradient(to right, var(--color-warning-600), var(--color-warning-700));opacity:0;transition:opacity var(--duration-slow) ease;border-radius:.75rem;position:absolute;inset:0}.navbar-token-button:hover:before{opacity:1}.navbar-token-icon{color:#ffffffd9;color:lab(100% 0 0/.85);transition:color var(--duration-slow) ease}.group:hover .navbar-token-icon{color:var(--color-white)}.navbar-user-toggle{transition:background var(--duration-slow) ease, transform var(--duration-slow) ease}.navbar-user-toggle:hover{background:linear-gradient(to right, oklch(from var(--color-gray-700) l c h / .5), oklch(from var(--color-gray-600) l c h / .5));transform:scale(1.05)}.navbar-user-avatar{background:linear-gradient(to bottom right, var(--color-gray-700), var(--color-gray-800));border:1px solid oklch(from var(--color-gray-600) l c h / .5);transition:background var(--duration-slow) ease, border-color var(--duration-slow) ease, box-shadow var(--duration-slow) ease}.group:hover .navbar-user-avatar{background:linear-gradient(to bottom right, var(--color-gray-600), var(--color-gray-700));border-color:oklch(from var(--color-gray-500) l c h / .7);box-shadow:0 10px 15px -3px oklch(from var(--color-brand-secondary) l c h / .2)}.navbar-user-icon{color:var(--color-gray-300);transition:color var(--duration-slow) ease}.group:hover .navbar-user-icon{color:var(--color-white)}.navbar-notification-badge{background:var(--color-brand-secondary);color:var(--color-white);font-weight:700}.navbar-menu-chevron{color:var(--color-gray-400);transition:color var(--duration-slow) ease}.group:hover .navbar-menu-chevron{color:var(--color-gray-200)}.navbar-dropdown{background:linear-gradient(135deg, oklch(from var(--color-gray-900) l c h / .92) 0%, oklch(from var(--color-gray-800) l c h / .88) 50%, oklch(from var(--color-gray-900) l c h / .92) 100%) padding-box, linear-gradient(135deg, oklch(from var(--color-gray-700) l c h / .5) 0%, oklch(from var(--color-brand-primary) l c h / .4) 30%, oklch(from var(--color-brand-secondary) l c h / .5) 50%, oklch(from var(--color-brand-primary) l c h / .4) 70%, oklch(from var(--color-gray-700) l c h / .5) 100%) border-box;-webkit-backdrop-filter:blur(var(--blur-xl));backdrop-filter:blur(var(--blur-xl));border:1px solid #0000;box-shadow:0 25px 50px -12px #00000080,inset 0 1px #ffffff1a;box-shadow:0 25px 50px -12px lab(0% 0 0/.5),inset 0 1px lab(100% 0 0/.1)}.navbar-dropdown-item{color:var(--color-gray-300);background:oklch(from var(--color-gray-700) l c h / .2);transition:background var(--duration-fast) ease, color var(--duration-fast) ease;border-radius:.5rem;font-weight:500}.navbar-dropdown-item:hover{background:var(--gradient-brand-tint-lr);color:var(--color-white)}.navbar-dropdown-divider{background:linear-gradient(90deg, transparent, oklch(from var(--color-brand-primary) l c h / .25) 30%, oklch(from var(--color-brand-secondary) l c h / .3) 50%, oklch(from var(--color-brand-primary) l c h / .25) 70%, transparent);border:none;height:1px}}@layer utilities;
@layer theme,base;@layer components{.vault-swap{place-items:center stretch;display:grid}.vault-swap>*{grid-area:1/1}.vault-swap .vault-sub{animation:8s ease-in-out infinite vault-sub}.vault-swap .vault-unlock{opacity:0;animation:8s ease-in-out infinite vault-unlock;box-shadow:0 0 18px #f034a380,inset 0 1px #fff3;box-shadow:0 0 18px lab(56.1473% 75.6678 -14.7712/.5),inset 0 1px lab(100% 0 0/.2)}.vault-swap .vault-unlock .lock{margin-right:.15rem}@keyframes vault-sub{0%,48%{opacity:1}57%,90%{opacity:0}99%,to{opacity:1}}@keyframes vault-unlock{0%,48%{opacity:0}57%,90%{opacity:1}99%,to{opacity:0}}@media (prefers-reduced-motion:reduce){.vault-swap .vault-sub{opacity:0;animation:none}.vault-swap .vault-unlock{opacity:1;animation:none}}}@layer utilities;
