/* 音乐工具中心 /music-tools.php —— 沿用调音器紫色主题（--music-purple 等变量见 tuner.css） */

.music-hub-hero { margin-bottom: 22px; }
.music-hub-hero h1 { margin: 0 0 6px; }
.music-hub-hero p { margin: 0; }
/* Hero 插画：与标题并排，窄屏自动堆叠 */
.music-hub-hero {
  display: flex;
  align-items: center;
  gap: 22px;
}
.music-hub-hero-art {
  flex: none;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}
.music-hub-hero-art picture { display: contents; }
.music-hub-hero-art img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
@media (max-width: 560px) {
  .music-hub-hero { gap: 14px; }
  .music-hub-hero-art { width: 88px; height: 88px; }
}

.music-hub-group { margin: 0 0 26px; }
.music-hub-group-head { margin: 0 0 12px; }
.music-hub-group-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: #2f2a3d;
  letter-spacing: .01em;
}
.music-hub-group-head p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--music-muted, #777382);
}

.music-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.music-hub-grid--hot { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.music-hub-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--music-line, #e4e3ea);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.music-hub-card:hover,
.music-hub-card:focus-visible {
  border-color: #cfc3f2;
  box-shadow: 0 8px 22px rgba(89, 67, 173, .12);
  transform: translateY(-1px);
}
.music-hub-grid--hot .music-hub-card { padding: 16px; }

.music-hub-card-ico {
  flex: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f7f5ff;
  color: var(--music-purple, #5943ad);
  overflow: hidden;
}
.music-hub-grid--hot .music-hub-card-ico { width: 64px; height: 64px; }
/* 真实插画：contain 保证完整可见，不裁切 */
.music-hub-card-ico picture { display: contents; }
.music-hub-card-ico img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.music-hub-card-ico svg,
.music-hub-ico { width: 22px; height: 22px; }
.music-hub-grid--hot .music-hub-card-ico svg,
.music-hub-grid--hot .music-hub-ico { width: 26px; height: 26px; }
/* 乐器 SVG 是原始彩色/填充图形，统一限制尺寸避免撑破卡片 */
.music-hub-card-ico svg { max-width: 100%; max-height: 100%; }

.music-hub-card-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.music-hub-card-title { display: flex; align-items: center; gap: 6px; }
.music-hub-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #2f2a3d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.music-hub-grid--hot .music-hub-card-name { font-size: 15px; }
.music-hub-card-desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--music-muted, #777382);
}
.music-hub-badge {
  flex: none;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  line-height: 1.6;
}
.music-hub-badge--hot { background: #fdecec; color: #d64545; }
.music-hub-badge--new { background: #e7f6ee; color: #1f9d63; }

/* 使用说明 */
.music-hub-steps {
  margin: 0 0 26px;
  padding: 20px 22px;
  border: 1px solid var(--music-line, #e4e3ea);
  border-radius: 14px;
  background: #fbfaff;
}
.music-hub-steps h2 { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: #2f2a3d; }
.music-hub-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.music-hub-step-list li { display: flex; gap: 12px; align-items: flex-start; }
.music-hub-step-no {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--music-purple, #5943ad);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.music-hub-step-list strong { display: block; font-size: 13.5px; color: #2f2a3d; }
.music-hub-step-list p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--music-muted, #777382); }

.music-hub-content { margin-top: 4px; }
.music-hub-related { margin-top: 8px; }

@media (max-width: 560px) {
  .music-hub-grid,
  .music-hub-grid--hot { grid-template-columns: 1fr; }
  .music-hub-steps { padding: 16px; }
  .music-hub-step-list { grid-template-columns: 1fr; gap: 13px; }
}
/* 中心页指南卡片：无图标，标题+描述左对齐 */
.music-hub-grid--guides { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.music-hub-card--guide { padding: 16px; }
.music-hub-card--guide .music-hub-card-name { font-size: 14.5px; white-space: normal; line-height: 1.5; }
.music-hub-card--guide .music-hub-card-desc { margin-top: 6px; }