@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');
/* TeamPulse's existing shell: fixed icon column, expanding labels. */
.app{display:flex;min-height:100dvh;--side-ease:cubic-bezier(.2,.74,.18,1)}
.app .side{box-sizing:border-box;width:76px;flex:0 0 auto;position:sticky;top:0;height:100dvh;min-height:0;display:flex;overflow:hidden;background:#141518;color:#c9c6c0;font-family:Outfit,sans-serif;transition:width 760ms var(--side-ease);z-index:30}
.app .side-top{flex:none;padding:18px 17px;border-color:#ffffff0d}
.app .side-top .brand{display:flex;gap:15px;flex-wrap:nowrap;width:196px}
.app .side-top .brand img{width:42px;height:42px;flex:none;object-fit:contain}
.app .side-top .brand strong{font-size:17px;color:white;white-space:nowrap}
.app .side .nav{min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px;gap:5px;scrollbar-width:thin;scrollbar-color:#494643 transparent}
.app .side .nav button{position:relative;box-sizing:border-box;display:flex;align-items:center;flex:none;gap:16px;min-height:46px;height:46px;padding:11px 14px;width:100%;border-radius:12px;color:#c9c6c0;font:500 14px Outfit,sans-serif;white-space:nowrap;overflow:hidden}
.app .side .nav button:hover{background:#ffffff09;color:white}
.app .side .nav button.active{background:#08090b;color:white;box-shadow:inset 3px 0 #f0b429}
.app .side .nav button:focus-visible{outline:2px solid #f0b429;outline-offset:-2px}
.side-icon{display:block;width:24px;height:24px;flex:0 0 24px}
.side-icon svg{width:24px;height:24px;display:block}
.nav-label,.brand-label,.app .side-user>strong,.app .side-user>small{opacity:0;transform:translateX(-8px);transition:opacity 260ms var(--side-ease),transform 400ms var(--side-ease);white-space:nowrap}
.app .side-user{flex:none;padding:14px 18px;border-color:#ffffff0d;overflow:hidden}
.side-avatar{width:40px;height:40px;display:grid;place-items:center;box-sizing:border-box;border-radius:50%;background:#393126;border:1px solid #f0b42966;color:#f0b429;font-weight:600;margin:0 0 7px}
.app .side-user>strong,.app .side-user>small{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis}
.app .side-user>strong{color:white;font-size:14px}.app .side-user>small{font-size:11px}
.app .side .nav-badge{position:absolute;left:35px;top:7px;box-sizing:border-box;width:7px;height:7px;min-width:0;padding:0;margin:0;font-size:0;line-height:20px;border-radius:20px;background:#f0b429;color:#141518;transition:left 760ms var(--side-ease),width 760ms var(--side-ease),height 760ms var(--side-ease),top 760ms var(--side-ease)}
.app .main{flex:1 1 0;min-width:0;width:auto}
.sidebar-backdrop{display:none}
@media(min-width:961px) and (hover:hover) and (pointer:fine){
 .app .side:hover{width:230px}
 .side:hover .nav-label,.side:hover .brand-label,.app .side:hover .side-user>strong,.app .side:hover .side-user>small{opacity:1;transform:translateX(0);transition-delay:120ms}
 .app .side:hover .nav-badge{left:174px;top:13px;width:23px;height:20px;font-size:11px}
}
@media(min-width:961px){
 .app .side:focus-within{width:230px}
 .side:focus-within .nav-label,.side:focus-within .brand-label,.app .side:focus-within .side-user>strong,.app .side:focus-within .side-user>small{opacity:1;transform:translateX(0);transition-delay:120ms}
 .app .side:focus-within .nav-badge{left:174px;top:13px;width:23px;height:20px;font-size:11px}
}
@media(max-width:960px){
 .app{display:flex}
 .app .side{display:flex;position:fixed;left:0;top:0;bottom:0;height:100dvh;width:76px;z-index:50}
 .app .main{margin-left:76px;min-width:0}
 .app .side.show{width:230px;box-shadow:12px 0 40px #0007}
 .side.show .nav-label,.side.show .brand-label,.app .side.show .side-user>strong,.app .side.show .side-user>small{opacity:1;transform:translateX(0);transition-delay:120ms}
 .app .side.show .nav-badge{left:174px;top:13px;width:23px;height:20px;font-size:11px}
 .sidebar-backdrop.show{display:block;position:fixed;inset:0 0 0 76px;background:#0006;border:0;z-index:40;cursor:pointer}
 .app .content{padding:12px}.app .top{padding:12px}
}
@media(prefers-reduced-motion:reduce){.app .side,.nav-label,.brand-label,.app .side-user>strong,.app .side-user>small,.app .side .nav-badge{transition:none!important}}

.nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis}.app .side .nav button:has(.nav-badge) .nav-label{padding-right:22px}

/* Pinning is a desktop preference; phones continue to use the drawer. */
.sidebar-pin{box-sizing:border-box;display:flex;flex:none;align-items:center;gap:16px;margin:10px 12px 0;padding:10px 14px;height:44px;border:0;border-radius:12px;background:transparent;color:#c9c6c0;cursor:pointer;font:500 14px Outfit,sans-serif;white-space:nowrap;overflow:hidden;text-align:left}
.sidebar-pin:hover,.sidebar-pin[aria-pressed="true"]{background:#ffffff0b;color:#f0b429}
.sidebar-pin:focus-visible{outline:2px solid #f0b429;outline-offset:-2px}
.pin-label{opacity:0;transform:translateX(-8px);transition:opacity 260ms var(--side-ease),transform 400ms var(--side-ease)}
@media(min-width:961px){
 .app .side.pinned{width:230px}
 .side.pinned .nav-label,.side.pinned .brand-label,.side.pinned .pin-label,.side:focus-within .pin-label,.app .side.pinned .side-user>strong,.app .side.pinned .side-user>small{opacity:1;transform:translateX(0);transition-delay:120ms}
 .app .side.pinned .nav-badge{left:174px;top:13px;width:23px;height:20px;font-size:11px}
}
@media(min-width:961px) and (hover:hover) and (pointer:fine){.side:hover .pin-label{opacity:1;transform:translateX(0);transition-delay:120ms}}
@media(max-width:960px){.sidebar-pin{display:none}}
@media(prefers-reduced-motion:reduce){.pin-label{transition:none!important}}