/* ============================================
   回忆地图 — Sidebar Navigation
   240px 毛玻璃侧边栏 · 温暖底部文案
   ============================================ */

.sidebar{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:var(--space-lg) 0 0;
}

/* === Logo / Brand === */
.sidebar__brand{
  padding:0 var(--space-lg) var(--space-lg);
  border-bottom:1px solid var(--color-glass-border);
  margin-bottom:var(--space-base);
}
.sidebar__logo{
  display:flex;
  justify-content:center;
  padding:var(--space-md) var(--space-base);
  overflow:hidden;
}
.sidebar__logo-icon{
  width:220px;
  height:220px;
  margin:-40px;
  border-radius:var(--radius-xl);
  object-fit:cover;
  object-position:center 40%;
  display:block;
}
.sidebar__logo-text{
  font-size:var(--font-title-sm);
  font-weight:var(--weight-bold);
  color:var(--color-ink);
  letter-spacing:-0.01em;
  line-height:1.3;
}
.sidebar__logo-sub{
  font-size:var(--font-caption-sm);
  color:var(--color-muted);
}

/* === Nav List === */
.sidebar__nav{
  flex:1;
  padding:var(--space-sm) var(--space-md);
  display:flex;
  flex-direction:column;
  gap:3px;
  overflow-y:auto;
}

.sidebar__nav-item{
  display:flex;
  align-items:center;
  gap:var(--space-md);
  padding:11px 14px;
  border-radius:var(--radius-md);
  font-size:var(--font-nav-link);
  font-weight:var(--weight-medium);
  color:var(--color-body);
  cursor:pointer;
  transition:all var(--transition-fast);
  text-decoration:none;
  white-space:nowrap;
}
.sidebar__nav-item:hover{
  background:rgba(255,111,174,0.06);
  color:var(--color-ink);
  transform:translateX(3px);
}
.sidebar__nav-item--active{
  background:linear-gradient(135deg, rgba(255,111,174,0.12), rgba(255,199,220,0.15))!important;
  color:var(--color-primary)!important;
  font-weight:var(--weight-semibold);
}
.sidebar__nav-item--active svg{stroke:var(--color-primary)}
.sidebar__nav-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  flex-shrink:0;
}
.sidebar__nav-label{flex:1}

/* === Bottom Section === */
.sidebar__footer{
  padding:var(--space-base) var(--space-lg) var(--space-lg);
  border-top:1px solid var(--color-glass-border);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-sm);
  margin-top:auto;
}

/* Avatar */
.sidebar__avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--color-accent), var(--color-primary));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  border:3px solid rgba(255,255,255,0.8);
  box-shadow:0 2px 12px rgba(255,111,174,0.2);
}

/* Travel stats in footer */
.sidebar__stats{
  display:flex;
  gap:var(--space-lg);
  text-align:center;
}
.sidebar__stat-value{
  font-size:var(--font-body-sm);
  font-weight:var(--weight-bold);
  color:var(--color-ink);
}
.sidebar__stat-label{
  font-size:11px;
  color:var(--color-muted);
}

/* Warm quote */
.sidebar__quote{
  font-size:12px;
  color:var(--color-muted-soft);
  text-align:center;
  font-style:italic;
  line-height:1.5;
  padding:0 var(--space-sm);
}

/* Dog illustration */
.sidebar__doggos{
  display:flex;
  justify-content:center;
  margin-bottom:4px;
  background:var(--color-canvas);
  border-radius:16px;
  overflow:hidden;
  padding:8px 12px;
}
.doggo{
  width:140px;
  height:110px;
  object-fit:cover;
  object-position:center 30%;
  display:block;
  transition:all 0.3s ease;
}
.doggo:hover{
  transform:scale(1.05);
}

/* === Mobile Overlay === */
.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(61,53,53,0.3);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:99;
}

@media (max-width:744px){
  .sidebar-overlay--visible{
    display:block;
    animation:fadeIn var(--transition-fast);
  }
}