/* ===== Nav Rail ===== */
.nav-rail{width:80px;background:var(--md-surface-1);display:flex;flex-direction:column;align-items:center;padding:12px 0 16px;gap:4px;border-right:1px solid var(--md-surface-3);flex-shrink:0}
.nav-rail-logo{width:48px;height:48px;background:transparent;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative}
.nav-rail-logo .adclaw-icon{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.12));transition:transform .3s var(--ease-spring)}
.nav-rail-logo:hover .adclaw-icon{transform:scale(1.1) rotate(-3deg)}
.nav-rail-item{width:56px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 6px;border-radius:var(--radius-md);cursor:pointer;transition:background .25s var(--ease-spring);position:relative}
.nav-rail-item .material-symbols-outlined{font-size:24px;color:var(--md-on-surface-variant);transition:color .2s}
.nav-rail-item span:not(.material-symbols-outlined){font-size:10px;color:var(--md-on-surface-variant);font-weight:500;white-space:nowrap}
.nav-rail-item:hover{background:var(--md-surface-3)}
.nav-rail-item.active{background:var(--md-primary-container);position:relative}
.nav-rail-item.active::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:3px;border-radius:0 3px 3px 0;background:var(--md-primary);animation:navIndicatorSlide .3s var(--ease-spring)}
.nav-rail-item.active .material-symbols-outlined{color:var(--md-on-primary-container);font-variation-settings:'FILL' 1}
.nav-rail-item.active span:not(.material-symbols-outlined){color:var(--md-on-primary-container);font-weight:600}
.nav-rail-divider{width:32px;height:1px;background:var(--md-outline-variant);margin:8px 0}

/* Nav-rail lobster silhouette icon styles */
.nav-rail-item .nav-lobster-icon{color:var(--md-on-surface-variant);transition:color .2s}
.nav-rail-item.active .nav-lobster-icon{color:var(--md-on-primary-container)}
.nav-rail-item:hover .nav-lobster-icon{color:var(--md-on-surface)}

/* Lobster hover animation */
.lobster-hover:hover .claw-left{animation:clawSnapL .4s ease}
.lobster-hover:hover .claw-right{animation:clawSnapR .4s ease}
@keyframes clawSnapL{0%,100%{transform:rotate(0deg)}50%{transform:rotate(10deg)}}
@keyframes clawSnapR{0%,100%{transform:rotate(0deg)}50%{transform:rotate(-10deg)}}