/* ═══════════════════════════════════════════════
   Layout v3 — Light Tech
   ═══════════════════════════════════════════════ */

.wrap{ max-width:1200px; margin:0 auto; padding:0 24px }
.wrap-sm{ max-width:800px }
.wrap-lg{ max-width:1400px }

/* ── 导航栏 ── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:16px 0; transition:all .3s ease;
}
.nav.scrolled{
  background:rgba(255,255,255,.85); backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  padding:12px 0; box-shadow:var(--shadow-sm);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1200px; margin:0 auto; padding:0 24px;
}
.nav-logo{
  font-weight:700; font-size:16px; display:flex; align-items:center; gap:10px;
  color:var(--text); letter-spacing:-.02em;
}
.nav-logo .logo-icon{
  width:32px; height:32px; border-radius:8px;
  box-shadow:var(--shadow-brand);
  object-fit:cover;
}
.nav-links{ display:flex; gap:4px }
.nav-links a{
  padding:8px 16px; border-radius:var(--radius-full); color:var(--text-secondary);
  font-size:14px; font-weight:500; transition:all var(--ease);
}
.nav-links a:hover{ color:var(--text); background:var(--surface) }
.nav-links a.active{ color:var(--brand); background:var(--brand-light) }

.nav-right{ display:flex; align-items:center; gap:12px }

/* ── 用户胶囊（已登录） ── */
.nav-user{ position:relative }
.nav-user-btn{
  display:flex; align-items:center; gap:8px;
  padding:3px 10px 3px 3px; border-radius:var(--radius-full);
  border:1px solid var(--border); background:var(--card);
  cursor:pointer; transition:all var(--ease);
  box-shadow:var(--shadow-sm);
}
.nav-user-btn:hover{
  border-color:var(--border-light); background:var(--surface);
  box-shadow:var(--shadow);
}
.nav-user.open .nav-user-btn{
  border-color:var(--brand); background:var(--brand-light);
  box-shadow:0 0 0 3px var(--brand-glow);
}
.nav-user-avatar{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--gradient-brand); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; box-shadow:var(--shadow-brand);
}
.nav-user-email{
  font-size:13px; color:var(--text-secondary); font-weight:500;
  max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* CSS 箭头，替代 unicode ▼ */
.nav-user-chevron{
  width:16px; height:16px; flex-shrink:0; display:flex;
  align-items:center; justify-content:center; color:var(--text-muted);
  transition:transform var(--ease);
}
.nav-user-chevron svg{ width:12px; height:12px }
.nav-user.open .nav-user-chevron{ transform:rotate(180deg) }

.nav-user-menu{
  position:absolute; top:calc(100% + 10px); right:0; min-width:200px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:6px; z-index:200;
  display:none; animation:fadeInUp .15s ease;
}
.nav-user.open .nav-user-menu{ display:block }
.nav-user-menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:var(--radius-sm);
  font-size:14px; color:var(--text-secondary); transition:all var(--ease);
}
.nav-user-menu a:hover{ background:var(--surface); color:var(--text) }
.nav-user-menu a.danger{ color:var(--error) }
.nav-user-menu a.danger:hover{ background:var(--error-bg) }
.nav-user-menu a svg{ width:16px; height:16px; flex-shrink:0; opacity:.7 }
.nav-user-menu .menu-divider{ height:1px; background:var(--border); margin:4px 2px }

/* ── 汉堡 ── */
.nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  width:36px; height:36px; border-radius:var(--radius-sm);
  align-items:center; justify-content:center;
}
.nav-toggle span{
  display:block; width:18px; height:2px; background:var(--text);
  border-radius:1px; position:relative; transition:all .3s ease;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:''; position:absolute; left:0; width:100%; height:2px;
  background:var(--text); border-radius:1px; transition:all .3s ease;
}
.nav-toggle span::before{ top:-6px }
.nav-toggle span::after{ top:6px }
.nav-toggle.active span{ background:transparent }
.nav-toggle.active span::before{ top:0; transform:rotate(45deg) }
.nav-toggle.active span::after{ top:0; transform:rotate(-45deg) }

.nav-mobile{
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(255,255,255,.97); backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
  z-index:99; opacity:0; transition:opacity .25s ease;
}
.nav-mobile.open{ display:flex; opacity:1 }
.nav-mobile a{
  font-size:20px; font-weight:600; color:var(--text-secondary);
  padding:14px 32px; border-radius:var(--radius); transition:all .2s;
}
.nav-mobile a:hover{ color:var(--brand); background:var(--brand-light) }
.nav-mobile a.active{ color:var(--brand) }

/* ── 页脚 ── */
.footer{
  border-top:1px solid var(--border); padding:60px 0; text-align:center;
  color:var(--text-muted); font-size:13px; background:var(--bg-alt);
}

/* ── Section ── */
.section{ padding:120px 0 }
.section-alt{ background:var(--bg-alt) }

/* ── Bento Grid ── */
.bento-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.bento-item{
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:36px 28px;
  transition:all .3s ease; position:relative; overflow:hidden;
}
.bento-item:hover{ border-color:var(--border-light); box-shadow:var(--shadow); transform:translateY(-2px) }
.bento-item.span-2{ grid-column:span 2 }

/* ── 通用网格 ── */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }

/* ── Flex ── */
.flex{ display:flex } .flex-col{ flex-direction:column }
.items-center{ align-items:center } .justify-between{ justify-content:space-between }
.justify-center{ justify-content:center }
.gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}
.flex-1{ flex:1 }

/* ── 间距/文字 ── */
.mt-2{margin-top:8px} .mt-4{margin-top:16px} .mt-6{margin-top:24px} .mt-8{margin-top:32px}
.mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.text-center{text-align:center} .text-muted{color:var(--text-muted)}
.text-secondary{color:var(--text-secondary)} .font-mono{font-family:var(--font-mono)}

/* ── 响应式 ── */
@media(max-width:1024px){
  .bento-grid{ grid-template-columns:repeat(2,1fr) }
  .bento-item.span-2{ grid-column:span 1 }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
}
@media(max-width:768px){
  .wrap{ padding:0 20px } .nav-inner{ padding:0 20px }
  .section{ padding:80px 0 }
  .grid-3,.bento-grid{ grid-template-columns:1fr }
  .bento-item.span-2{ grid-column:span 1 }
}
@media(max-width:640px){
  .nav-links{ display:none } .nav-toggle{ display:flex }
  .nav-right .btn{ display:none }
  .nav-right #navUserEmail{ display:none }
  .nav-right #navDashboardBtn{ display:none }
  .nav-user-email{ display:none }
  .nav-user-btn{ padding:2px; border:1px solid var(--border) }
  .nav-user-chevron{ display:none }
  .grid-2,.grid-4{ grid-template-columns:1fr }
  .wrap{ padding:0 16px }
}