.sitemap-page { padding: 48px 0 60px; min-height: calc(100vh - 64px); }
.sitemap-page .container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.sitemap-header { text-align: center; margin-bottom: 48px; }
.sitemap-header h1 { font-size: 32px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px; }
.sitemap-header p { font-size: 15px; color: var(--text-muted); }
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sitemap-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  transition: all 0.2s;
}
.sitemap-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.sm-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.sm-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.sm-card-icon.green { background: #f0fdf4; color: var(--primary); }
.sm-card-icon.amber { background: #fffbeb; color: var(--gold); }
.sm-card-icon.blue { background: #eff6ff; color: var(--blue); }
.sm-card-icon.red { background: #fef2f2; color: var(--red); }
.sm-card-icon.purple { background: #faf5ff; color: #a855f7; }
.sm-card-icon.teal { background: #f0fdfa; color: #14b8a6; }
.sm-card-header h3 { font-size: 17px; font-weight: 700; }
.sm-card-header .sm-badge {
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  background: #f0fdf4; color: var(--primary); font-weight: 600;
}
.sm-links { list-style: none; }
.sm-links li { margin-bottom: 4px; }
.sm-links li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s;
}
.sm-links li a:hover { background: var(--bg-gray); color: var(--primary); }
.sm-links li a .sm-link-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-gray);
  color: var(--text-muted);
  font-weight: 500;
}
.sm-links li a:hover .sm-link-tag { background: #f0fdf4; color: var(--primary); }

@media (max-width: 900px) {
  .sitemap-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 550px) {
  .sitemap-grid { grid-template-columns: 1fr; }
}