/* ═══════════════════════════════════════════════
   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;
  background:var(--gradient-brand);
  display:flex; align-items:center; justify-content:center; font-size:15px;
  box-shadow:var(--shadow-brand);
}
.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-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);
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
  z-index:99;
}
.nav-mobile.open{ display:flex }
.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) }

/* ── 页脚 ── */
.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:not(#navDashboardBtn){ display:none }
  .grid-2,.grid-4{ grid-template-columns:1fr }
  .wrap{ padding:0 16px }
}