/* V15.3 sidebar icon system */
#application .brand{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#application .brand-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:0 0 34px;border-radius:12px;background:linear-gradient(145deg,rgba(58,111,255,.18),rgba(17,220,185,.18));border:1px solid rgba(96,163,255,.32);box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 10px 28px rgba(47,117,255,.16),0 0 18px rgba(17,220,185,.11);color:#7ce7ff}
#application .brand-icon svg{width:19px;height:19px;display:block}
#application .nav{display:flex;align-items:center;gap:11px;padding:11px 12px;position:relative;overflow:hidden;--nav-accent:#62e3d2}
#application .nav::after{content:"";position:absolute;inset:auto 12px 0 51px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--nav-accent) 36%, transparent),transparent);opacity:0;transition:opacity .22s ease}
#application .nav:hover::after,#application .nav.active::after{opacity:.7}
#application .nav-icon{width:30px;height:30px;flex:0 0 30px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(145deg,color-mix(in srgb,var(--nav-accent) 20%, #16243c),rgba(16,25,46,.95));border:1px solid color-mix(in srgb,var(--nav-accent) 32%, rgba(255,255,255,.06));box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 8px 20px color-mix(in srgb,var(--nav-accent) 9%, transparent);color:var(--nav-accent);transition:transform .2s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease}
#application .nav-icon svg{width:17px;height:17px;display:block}
#application .nav-text{flex:1;min-width:0;line-height:1.35}
#application .nav:hover .nav-icon{transform:translateY(-1px) scale(1.03);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 0 18px color-mix(in srgb,var(--nav-accent) 24%, transparent),0 10px 25px color-mix(in srgb,var(--nav-accent) 14%, transparent)}
#application .nav.active .nav-icon{background:linear-gradient(145deg,color-mix(in srgb,var(--nav-accent) 28%, #193764),rgba(13,28,56,.96));border-color:color-mix(in srgb,var(--nav-accent) 58%, rgba(255,255,255,.08));box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,0 0 22px color-mix(in srgb,var(--nav-accent) 24%, transparent),0 10px 30px color-mix(in srgb,var(--nav-accent) 14%, transparent)}
#application .nav.active .nav-text{font-weight:730;color:#f4f8ff}
#application .nav-dashboard{--nav-accent:#6fe9d7}
#application .nav-transaction{--nav-accent:#5cc7ff}
#application .nav-transactions{--nav-accent:#7fa8ff}
#application .nav-accounts{--nav-accent:#76d2ff}
#application .nav-goals{--nav-accent:#ffd95c}
#application .nav-investments{--nav-accent:#8c9bff}
#application .nav-analytics{--nav-accent:#cf88ff}
#application .nav-budget{--nav-accent:#3ae5d4}
#application .nav-planner{--nav-accent:#6ec0ff}
#application .nav-collaboration{--nav-accent:#ffcf65}
#application .nav-recurring{--nav-accent:#33ead7}
#application .nav-ai{--nav-accent:#b57dff}
#application .nav-settings{--nav-accent:#8ea6c4}
html[data-theme="light"] #application .nav-icon{background:linear-gradient(145deg,color-mix(in srgb,var(--nav-accent) 14%, #ffffff),rgba(245,249,255,.94));border-color:color-mix(in srgb,var(--nav-accent) 28%, rgba(92,118,155,.16));box-shadow:0 0 0 1px rgba(255,255,255,.45) inset,0 10px 20px rgba(20,36,80,.08)}
html[data-theme="light"] #application .nav.active .nav-icon{box-shadow:0 0 0 1px rgba(255,255,255,.55) inset,0 0 18px color-mix(in srgb,var(--nav-accent) 20%, transparent),0 10px 26px rgba(37,75,146,.12)}
html[dir="rtl"] #application .nav{flex-direction:row-reverse;text-align:right}
html[dir="rtl"] #application .nav::after{inset:auto 51px 0 12px}
html[dir="rtl"] #application .brand{flex-direction:row-reverse}
@media (max-width:800px){#application .nav{padding:10px 11px}#application .nav-icon{width:28px;height:28px;flex-basis:28px}#application .nav-icon svg{width:16px;height:16px}}