/* Floating navigation, inspired by the supplied motion reference. */
html { --sidebar-width: 268px; --nav-glow-blue: #448dff; --nav-glow-pink: #e783c5; --nav-glow-white: #fff; }
.sidebar { inset: 12px auto 12px 12px; width: var(--sidebar-width); padding: 15px 12px 12px; border: 1px solid var(--line); border-radius: 23px; overflow: visible; contain: none; background: var(--surface); box-shadow: 0 12px 40px rgb(31 65 109 / 9%); z-index: 45; transition: width .32s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1); }
html[data-theme="light"] .sidebar { background: linear-gradient(155deg,rgba(255,255,255,.98),rgba(241,247,255,.96)); border-color: #dbe6f4; }
html[data-theme="dark"] .sidebar { background: linear-gradient(155deg,#1b2535,#111b2b); border-color: #303d54; box-shadow: 0 16px 50px rgb(0 0 0 / 25%); }
.main { margin-left: calc(var(--sidebar-width) + 24px); width: calc(100% - var(--sidebar-width) - 24px); transition: margin-left .32s cubic-bezier(.22,1,.36,1), width .32s cubic-bezier(.22,1,.36,1); }
.sidebar-heading { position: relative; min-height: 60px; flex-shrink: 0; }
.sidebar .brand-with-logo { width: 100%; gap: 10px!important; padding: 0 3px 14px!important; border: 0; overflow: hidden; }
.sidebar .brand-symbol { width: 39px; height: 39px; flex: 0 0 39px; border-radius: 12px; }
.sidebar .brand-copy { min-width: 0; white-space: nowrap; transition: opacity .16s ease, transform .24s ease; }
.sidebar .brand-copy strong { font-size: .92rem; }
.sidebar .brand-copy small { max-width: 164px; }
.sidebar-toggle,.sidebar-close,.sidebar-search-trigger,.sidebar-mobile-trigger { display: none; align-items: center; justify-content: center; padding: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.sidebar-ready .sidebar-toggle { display: flex; position: absolute; right: -27px; top: 8px; width: 28px; height: 28px; box-shadow: 0 3px 10px rgb(31 65 109 / 12%); }
.sidebar-toggle .ui-icon { width: 16px; height: 16px; transition: transform .3s ease; }
.sidebar-toggle:hover,.sidebar-close:hover { color: var(--link); background: var(--soft-blue); }
.sidebar-search { display: none; position: relative; flex-shrink: 0; margin: 2px 1px 15px; }
.sidebar-ready .sidebar-search { display: flex; }
.sidebar-search-trigger { display: flex; width: 38px; height: 39px; border: 0; background: transparent; position: absolute; left: 0; top: 0; z-index: 1; }
.sidebar-search-trigger .ui-icon { width: 17px; height: 17px; }
.sidebar-search input { min-height: 39px; padding: 9px 10px 9px 37px; font-size: .75rem; border-radius: 12px; background: var(--surface2); border-color: var(--line); box-shadow: none; }
.sidebar-section-label { flex-shrink: 0; margin: 0 12px 9px; color: var(--muted); font-size: .58rem; letter-spacing: .13em; font-weight: 700; transition: opacity .15s; }
.sidebar .side-nav { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 4px 5px 12px; margin: 0 -5px; }
.sidebar .side-nav a { position: relative; isolation: isolate; flex-shrink: 0; min-height: 40px; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); transition: color .2s ease, border-color .2s ease, box-shadow .25s ease; }
.sidebar .side-nav a[hidden],.sidebar-no-results[hidden] { display: none; }
.sidebar .side-nav .nav-label { width: auto; flex: 1 1 auto; min-width: 0; text-align: left; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .16s ease, transform .24s ease; }
.sidebar .side-nav a>* { position: relative; z-index: 1; }
.sidebar .side-nav a::before { content: ''; display: block; position: absolute; left: -1px; top: 25%; bottom: 25%; width: 3px; border-radius: 4px; background: linear-gradient(180deg,var(--nav-glow-blue),var(--nav-glow-white),var(--nav-glow-pink)); opacity: 0; transform: scaleY(.4); transition: opacity .2s, transform .25s; box-shadow: 0 0 10px var(--nav-glow-blue),0 0 17px rgb(231 131 197 / 45%); }
.sidebar .side-nav a::after { content: ''; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: linear-gradient(105deg,rgba(68,141,255,.24),rgba(255,255,255,.7) 46%,rgba(231,131,197,.3) 80%); background-size: 120% 100%; background-position: 100% 0; opacity: 0; transition: opacity .23s ease, background-position .5s ease; pointer-events: none; }
.sidebar .side-nav a.active { background: var(--soft-blue)!important; color: var(--link)!important; }
.sidebar .side-nav a.active::before { opacity: .8; transform: scaleY(.75); }
.sidebar .side-nav a:is(:hover,:focus-visible) { color: var(--text)!important; background: transparent; border-color: rgba(133,167,227,.45); box-shadow: -3px 0 14px rgb(68 141 255 / 12%),4px 0 16px rgb(231 131 197 / 15%); transform: none; }
.sidebar .side-nav a:is(:hover,:focus-visible)::after { opacity: 1; background-position: 0 0; }
.sidebar .side-nav a:is(:hover,:focus-visible)::before { opacity: 1; transform: scaleY(1); }
.sidebar .side-nav .nav-icon { flex: 0 0 19px; width: 19px; height: 19px; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.sidebar .side-nav a:is(:hover,:focus-visible) .nav-icon { transform: translateY(-1px) scale(1.08); }
html[data-theme="dark"] .sidebar .side-nav a::after { background-image: linear-gradient(105deg,rgba(68,141,255,.3),rgba(255,255,255,.09) 46%,rgba(231,131,197,.24) 80%); }
html[data-theme="dark"] .sidebar .side-nav a:is(:hover,:focus-visible) { border-color: rgba(177,157,237,.35); box-shadow: -3px 0 16px rgb(68 141 255 / 17%),4px 0 18px rgb(231 131 197 / 15%); }
.sidebar-footer { flex: 0 0 auto; margin-top: 8px; padding: 10px 4px 0; }
.sidebar .sync-chip { font-size: .6rem; margin-bottom: 8px; }
.sidebar .user-chip { margin-bottom: 9px; overflow: hidden; }
.sidebar .avatar { flex: 0 0 32px; width: 32px; height: 32px; font-size: .75rem; }
.sidebar-user-copy { min-width: 0; white-space: nowrap; transition: opacity .16s; }
.sidebar-user-copy strong { overflow: hidden; text-overflow: ellipsis; }
.sidebar .sidebar-signout { justify-content: flex-start; gap: 10px; padding: 8px 10px; min-height: 36px; font-size: .75rem; border-radius: 11px; }
.sidebar-signout .ui-icon { width: 17px; height: 17px; flex: 0 0 17px; }
.sidebar-no-results { font-size: .75rem; padding: 12px; color: var(--muted); }
.sidebar-tooltip { position: fixed; z-index: 70; max-width: 235px; padding: 8px 12px; border-radius: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 8px 25px rgb(20 35 60 / 16%); font-size: .76rem; pointer-events: none; }
.sidebar-backdrop { display: none; }
.sidebar :is(a,button,input):focus-visible,.sidebar-mobile-trigger:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
@media(min-width:901px) {
  .sidebar-ready[data-sidebar-collapsed="true"] { --sidebar-width: 78px; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar { padding-inline: 11px; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar .brand-with-logo { padding-inline: 7px!important; }
  .sidebar-ready[data-sidebar-collapsed="true"] :is(.sidebar .brand-copy,.sidebar .nav-label,.sidebar-user-copy,.sidebar-section-label) { opacity: 0; pointer-events: none; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar .brand-copy { transform: translateX(-8px); }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar .side-nav .nav-label { flex: 0 0 0; width: 0; transform: translateX(-8px); }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar .side-nav a { gap: 0; justify-content: center; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar-toggle .ui-icon { transform: rotate(180deg); }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar-search { height: 39px; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar-search input { opacity: 0; pointer-events: none; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar-search-trigger { width: 100%; border: 1px solid var(--line); background: var(--surface2); }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar .sync-chip { justify-content: center; padding-inline: 0; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar .sync-chip :is([data-connectivity-label],[data-pending-count]) { display: none; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar .user-chip { gap: 0; padding-left: 7px; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar-signout { justify-content: center; gap: 0; padding-inline: 0; }
  .sidebar-ready[data-sidebar-collapsed="true"] .sidebar-signout .nav-label { width: 0; overflow: hidden; }
}
@media(max-width:900px) {
  .main { margin-left: 0; width: 100%; }
  .sidebar-ready .sidebar { display: flex!important; inset: 10px auto 10px 10px; width: min(310px,calc(100vw - 40px)); max-height: calc(100dvh - 20px); transform: translateX(calc(-100% - 24px)); visibility: hidden; transition: transform .32s cubic-bezier(.22,1,.36,1),visibility .32s; z-index: 65; }
  .sidebar-ready.sidebar-open .sidebar { transform: translateX(0); visibility: visible; }
  .sidebar-ready .sidebar-toggle { display: none; }
  .sidebar-ready .sidebar-close { display: flex; position: absolute; right: 0; top: 4px; width: 34px; height: 34px; }
  .sidebar .brand-with-logo { max-width: calc(100% - 38px); }
  .sidebar .brand-copy strong { font-size: .83rem; }
  .sidebar .sidebar-search input { font-size: 16px; }
  .sidebar .sync-chip { display: flex; }
  .sidebar .side-nav a { min-height: 44px; }
  .sidebar-ready .sidebar-mobile-trigger { display: inline-flex; gap: 7px; min-height: 40px; padding: 8px 11px; font-size: .76rem; font-weight: 700; }
  .sidebar-mobile-trigger .ui-icon { width: 18px; height: 18px; }
  .sidebar-ready .account-menu { display: none; }
  html.sidebar-open,html.sidebar-open body { overflow: hidden; }
  .sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; padding: 0; z-index: 60; background: rgba(9,20,40,.46); backdrop-filter: blur(4px); animation: navigation-veil .25s ease-out; }
  .sidebar-tooltip { display: none; }
}
@keyframes navigation-veil { from { opacity: 0; } to { opacity: 1; } }
@media(prefers-reduced-motion:reduce) {
  .sidebar,.main,.sidebar *,.sidebar a::before,.sidebar a::after,.sidebar-backdrop { transition: none!important; animation: none!important; }
}
@media(prefers-reduced-transparency:reduce) { .sidebar-backdrop:not([hidden]) { backdrop-filter: none; } }
@media(forced-colors:active) { .sidebar .side-nav a:is(:hover,:focus-visible,.active) { outline: 2px solid Highlight; } .sidebar .side-nav a::after { display: none; } }
@media print { .sidebar,.sidebar-backdrop,.sidebar-mobile-trigger,.sidebar-tooltip { display: none!important; } .main { width: 100%; margin: 0; } }