/* ── Glass navigation shell ────────────────────────────────────────────────
   The navigation keeps the existing NAV registry and icons. This layer only
   changes the shell, density and state transition so every page remains
   available in both compact and expanded modes. */
:root{
  --sidebar-rail:84px;
  --sidebar-wide:264px;
  --sidebar-motion:320ms;
  --sidebar-ease:cubic-bezier(.2,0,0,1);
}

body{position:relative}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 420px at 5% 8%, color-mix(in srgb,var(--violet) 10%,transparent), transparent 70%),
    radial-gradient(500px 420px at 96% 92%, color-mix(in srgb,var(--cyan) 8%,transparent), transparent 72%);
  opacity:.7;
  z-index:0;
}

.app{
  --sidebar-width:var(--sidebar-rail);
  grid-template-columns:var(--sidebar-width) minmax(0,1fr);
  transition:grid-template-columns var(--sidebar-motion) var(--sidebar-ease);
}
.app.sidebar-expanded{--sidebar-width:var(--sidebar-wide)}

.side{
  position:relative;
  isolation:isolate;
  z-index:2;
  margin:12px 0 12px 12px;
  height:calc(100vh - 24px);
  min-width:0;
  overflow:visible;
  padding:12px 9px 10px;
  border:1px solid color-mix(in srgb,var(--border-hi) 72%,transparent);
  border-radius:30px;
  background:
    linear-gradient(155deg,color-mix(in srgb,var(--sidebar) 80%,transparent),color-mix(in srgb,var(--surface) 58%,transparent) 58%,color-mix(in srgb,var(--sidebar) 72%,transparent)),
    color-mix(in srgb,var(--sidebar) 74%,transparent);
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb,#fff 18%,transparent),
    inset -1px -1px 0 color-mix(in srgb,#000 12%,transparent),
    0 18px 46px color-mix(in srgb,#020617 20%,transparent),
    0 0 0 1px color-mix(in srgb,var(--accent) 5%,transparent);
  backdrop-filter:blur(24px) saturate(140%);
  -webkit-backdrop-filter:blur(24px) saturate(140%);
}
.side::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:29px;
  pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,#fff 20%,transparent),transparent 28%,transparent 70%,color-mix(in srgb,var(--accent) 10%,transparent));
  opacity:.7;
  z-index:0;
}
.side::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.46'/%3E%3C/svg%3E");
  z-index:0;
}
.side>*{position:relative;z-index:1}

.side-head{position:relative;display:flex;align-items:center;min-height:48px;margin:0 1px 8px}
.logo{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:0;flex:1;padding:5px 8px;color:var(--text);text-decoration:none;border-radius:17px;transition:background-color 120ms var(--sidebar-ease),color 120ms var(--sidebar-ease)}
.logo:hover{background:color-mix(in srgb,var(--hover) 80%,transparent);color:var(--text)}
.logo-copy{display:flex;flex-direction:column;min-width:0;max-width:190px;overflow:hidden;white-space:nowrap;opacity:1;transform:translateX(0);transition:max-width 260ms var(--sidebar-ease),opacity 180ms var(--sidebar-ease),transform 220ms var(--sidebar-ease)}
.logo-name{font-size:14px;letter-spacing:.14em}
.logo-sub{font-size:8px;letter-spacing:.2em}
.sidebar-toggle{position:absolute;right:-24px;top:7px;width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid color-mix(in srgb,var(--border-hi) 80%,transparent);border-radius:50%;color:var(--text-2);background:color-mix(in srgb,var(--surface) 78%,transparent);box-shadow:0 8px 18px color-mix(in srgb,#020617 20%,transparent),inset 1px 1px 0 color-mix(in srgb,#fff 18%,transparent);backdrop-filter:blur(16px);cursor:pointer;transition:background-color 120ms var(--sidebar-ease),color 120ms var(--sidebar-ease),transform 120ms var(--sidebar-ease),border-color 120ms var(--sidebar-ease)}
.sidebar-toggle:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 48%,var(--border-hi));background:color-mix(in srgb,var(--accent-dim) 66%,transparent)}
.sidebar-toggle:active{transform:scale(.94)}
.sidebar-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

.side-nav-scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;padding:4px 1px 8px;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--border-hi) 64%,transparent) transparent}
.side-nav-scroll::-webkit-scrollbar{width:5px}
.side-nav-scroll::-webkit-scrollbar-thumb{border:0;background:color-mix(in srgb,var(--border-hi) 64%,transparent)}
.nav-group{margin-top:14px}
.nav-group:first-child{margin-top:2px}
.nav-title{max-height:22px;overflow:hidden;padding:0 10px 6px;opacity:1;transform:translateY(0);transition:max-height 220ms var(--sidebar-ease),opacity 150ms var(--sidebar-ease),padding 220ms var(--sidebar-ease),transform 220ms var(--sidebar-ease)}
.nav-item{min-height:42px;gap:10px;padding:6px 9px;border-radius:15px;border-color:transparent;transition:background-color 160ms var(--sidebar-ease),color 160ms var(--sidebar-ease),border-color 160ms var(--sidebar-ease),transform 120ms var(--sidebar-ease);overflow:hidden}
.nav-item:hover{transform:translateX(1px);background:color-mix(in srgb,var(--hover) 88%,transparent)}
.nav-item:active{transform:translateX(1px) scale(.985)}
.nav-item:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.nav-icon{width:28px;height:28px;display:grid;place-items:center;flex:none;border-radius:10px;transition:width 220ms var(--sidebar-ease),height 220ms var(--sidebar-ease),border-radius 220ms var(--sidebar-ease),background-color 180ms var(--sidebar-ease),box-shadow 180ms var(--sidebar-ease),color 160ms var(--sidebar-ease)}
.nav-icon svg{width:17px;height:17px}
.nav-label{min-width:0;max-width:205px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transform:translateX(0);transition:max-width 260ms var(--sidebar-ease),opacity 150ms var(--sidebar-ease),transform 220ms var(--sidebar-ease)}
.nav-badge{transition:opacity 140ms var(--sidebar-ease),transform 220ms var(--sidebar-ease),width 220ms var(--sidebar-ease),padding 220ms var(--sidebar-ease)}
.nav-item.active{background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--violet) 8%,transparent));border-color:color-mix(in srgb,var(--accent) 28%,transparent);box-shadow:inset 1px 1px 0 color-mix(in srgb,#fff 13%,transparent),0 7px 18px color-mix(in srgb,var(--accent) 9%,transparent)}
.nav-item.active::before{left:-1px;top:9px;bottom:9px;width:3px;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 50%,transparent)}
.nav-item.active .nav-icon{color:var(--on-accent)}
.side-bottom{padding:10px 1px 0;margin-top:auto;border-top:1px solid color-mix(in srgb,var(--border) 72%,transparent)}
.side-user{width:100%;min-height:44px;display:flex;align-items:center;gap:9px;padding:6px 8px;border:1px solid transparent;border-radius:15px;color:var(--text);background:transparent;text-align:left;cursor:pointer;transition:background-color 160ms var(--sidebar-ease),border-color 160ms var(--sidebar-ease),transform 120ms var(--sidebar-ease)}
.side-user:hover{background:color-mix(in srgb,var(--hover) 90%,transparent);border-color:color-mix(in srgb,var(--border-hi) 40%,transparent)}
.side-user:active{transform:scale(.985)}
.side-user:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.side-user-copy{min-width:0;max-width:170px;flex:1;overflow:hidden;white-space:nowrap;opacity:1;transform:translateX(0);transition:max-width 260ms var(--sidebar-ease),opacity 150ms var(--sidebar-ease),transform 220ms var(--sidebar-ease)}
.side-user-copy b{color:var(--text)}
.side-user-copy span{color:var(--text-3)}
.side-user-copy b,.side-user-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-user>svg{color:var(--text-3);transition:opacity 140ms var(--sidebar-ease),transform 220ms var(--sidebar-ease)}

.app:not(.sidebar-expanded) .logo{justify-content:center;padding-inline:2px}
.app:not(.sidebar-expanded) .logo-copy,.app:not(.sidebar-expanded) .nav-label,.app:not(.sidebar-expanded) .side-user-copy{max-width:0;opacity:0;transform:translateX(-6px);pointer-events:none}
.app:not(.sidebar-expanded) .nav-title{max-height:0;padding-top:0;padding-bottom:0;opacity:0;transform:translateY(-4px)}
.app:not(.sidebar-expanded) .nav-group{margin-top:5px}
.app:not(.sidebar-expanded) .nav-item{justify-content:center;gap:0;padding:5px 2px;min-height:48px;border-radius:16px}
.app:not(.sidebar-expanded) .nav-item.active .nav-icon{width:40px;height:40px;border-radius:14px;background:linear-gradient(145deg,color-mix(in srgb,var(--violet) 84%,var(--accent)),color-mix(in srgb,var(--cyan) 76%,var(--violet)));box-shadow:0 9px 22px color-mix(in srgb,var(--accent) 26%,transparent),inset 1px 1px 0 color-mix(in srgb,#fff 28%,transparent)}
.app:not(.sidebar-expanded) .nav-item.active::before{display:none}
.app:not(.sidebar-expanded) .nav-badge{width:5px;height:5px;padding:0;margin:0;position:absolute;right:9px;top:8px;border-radius:50%;font-size:0;opacity:.9}
.app:not(.sidebar-expanded) .side-user{justify-content:center;padding-inline:2px}
.app:not(.sidebar-expanded) .side-user>svg{display:none}

@media(max-width:760px){
  .app{grid-template-columns:minmax(0,1fr);transition:none}
  .side{display:none;position:fixed;inset:56px auto 30px 0;width:min(320px,88vw);height:auto;margin:0;padding:14px 12px 10px;border-radius:0 28px 28px 0;box-shadow:var(--shadow-lift);overflow:visible}
  .app.nav-open .side{display:flex}
  .sidebar-toggle{right:-17px}
  .app:not(.sidebar-expanded) .logo{justify-content:flex-start;padding-inline:8px}
  .app:not(.sidebar-expanded) .logo-copy,.app:not(.sidebar-expanded) .nav-label,.app:not(.sidebar-expanded) .side-user-copy{max-width:240px;opacity:1;transform:none;pointer-events:auto}
  .app:not(.sidebar-expanded) .nav-title{max-height:22px;padding:0 10px 6px;opacity:1;transform:none}
  .app:not(.sidebar-expanded) .nav-group{margin-top:14px}
  .app:not(.sidebar-expanded) .nav-item{justify-content:flex-start;gap:10px;padding:6px 9px;min-height:42px;border-radius:15px}
  .app:not(.sidebar-expanded) .nav-item.active .nav-icon{width:28px;height:28px;border-radius:10px;background:transparent;box-shadow:none}
  .app:not(.sidebar-expanded) .nav-item.active::before{display:block}
  .app:not(.sidebar-expanded) .nav-badge{width:auto;height:auto;padding:1px 7px;margin-left:auto;position:static;border-radius:20px;font-size:10.5px}
  .app:not(.sidebar-expanded) .side-user{justify-content:flex-start;padding-inline:8px}
  .app:not(.sidebar-expanded) .side-user>svg{display:block}
}

@media(prefers-reduced-motion:reduce){
  .app,.side *,body::before{transition:none!important;animation:none!important}
}