/* 红薯音乐 V3 — 机械科技风 + 荧光色系模块化设计 */
:root {
  --bg-primary: #0a0e17;
  --bg-secondary: #111827;
  --bg-card: #161c2b;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --text-muted: #475569;
  --border: #1e293b;

  /* 各模块荧光色 — Suno 全功能 */
  --color-generate: #00f5ff;    /* 青 — 写歌 */
  --color-cover: #ff6b9d;       /* 粉 — 翻唱 */
  --color-separate: #a855f7;    /* 紫 — 分轨 */
  --color-mix: #facc15;         /* 金黄 — 贴唱混音 */
  --color-vocals: #f472b6;      /* 粉红 — 加人声 */
  --color-instrumental: #34d399;/* 翠 — 加伴奏 */
  --color-video: #f97316;       /* 橙 — 音乐视频 */
  --color-sound: #818cf8;       /* 靛 — 音效 */
  --color-mashup: #e879f9;      /* 紫粉 — 混搭 */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

/* ===== 导航 ===== */
.navbar {
  background: rgba(17,24,39,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar .logo {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-generate), var(--color-cover));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 1.5rem;
  white-space: nowrap;
}
.nav-links { display: flex; gap: 0.125rem; overflow-x: auto; }
.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s;
  border-left: 2px solid transparent;
}
.nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.nav-link[data-module="generate"]:hover { border-left-color: var(--color-generate); }
.nav-link[data-module="cover"]:hover { border-left-color: var(--color-cover); }
.nav-link[data-module="separate"]:hover { border-left-color: var(--color-separate); }
.nav-link[data-module="mix"]:hover { border-left-color: var(--color-mix); }
.nav-link[data-module="video"]:hover { border-left-color: var(--color-video); }

/* ===== 轮播区（红薯大集）===== */
.carousel-section {
  padding: 1.25rem 1.25rem 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.carousel-section h2 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.carousel-section h2 span { color: var(--color-generate); }
.carousel-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.carousel-slide {
  display: none;
  padding: 1.25rem;
  min-height: 100px;
}
.carousel-slide.active { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.carousel-cover {
  width: 64px; height: 64px; border-radius: 8px;
  background: linear-gradient(135deg, var(--color-generate), var(--color-separate));
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
}
.carousel-info { flex: 1; min-width: 0; }
.carousel-info .title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; }
.carousel-info .artist { font-size: 0.75rem; color: var(--text-muted); }
.carousel-info audio { width: 100%; margin-top: 0.35rem; height: 32px; }
.carousel-nav {
  display: flex; gap: 0.4rem; justify-content: center; padding: 0.5rem 0;
}
.carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); cursor: pointer; transition: all 0.3s;
}
.carousel-dot.active { background: var(--color-generate); box-shadow: 0 0 8px var(--color-generate); }

/* ===== 容器 & 网格 ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0.75rem 1.25rem 1.5rem; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

/* ===== 功能卡片（缩窄版）===== */
.module-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.85rem 0.7rem;
  transition: all 0.25s;
  cursor: pointer;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}
.module-card:hover {
  transform: translateY(-2px);
}
.module-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
}
.module-card[data-module="generate"]::before { background: var(--color-generate); }
.module-card[data-module="cover"]::before { background: var(--color-cover); }
.module-card[data-module="separate"]::before { background: var(--color-separate); }
.module-card[data-module="mix"]::before { background: var(--color-mix); }
.module-card[data-module="vocals"]::before { background: var(--color-vocals); }
.module-card[data-module="instrumental"]::before { background: var(--color-instrumental); }
.module-card[data-module="video"]::before { background: var(--color-video); }
.module-card[data-module="sound"]::before { background: var(--color-sound); }
.module-card[data-module="mashup"]::before { background: var(--color-mashup); }
.module-card[data-module="musician"]::before { background: var(--color-musician); }

/* 荧光 hover 辉光 */
.module-card[data-module="generate"]:hover { box-shadow: 0 4px 20px rgba(0,245,255,0.12); }
.module-card[data-module="cover"]:hover { box-shadow: 0 4px 20px rgba(255,107,157,0.12); }
.module-card[data-module="separate"]:hover { box-shadow: 0 4px 20px rgba(168,85,247,0.12); }
.module-card[data-module="mix"]:hover { box-shadow: 0 4px 20px rgba(250,204,21,0.12); }
.module-card[data-module="vocals"]:hover { box-shadow: 0 4px 20px rgba(244,114,182,0.12); }
.module-card[data-module="instrumental"]:hover { box-shadow: 0 4px 20px rgba(52,211,153,0.12); }
.module-card[data-module="video"]:hover { box-shadow: 0 4px 20px rgba(249,115,22,0.12); }
.module-card[data-module="sound"]:hover { box-shadow: 0 4px 20px rgba(129,140,248,0.12); }
.module-card[data-module="mashup"]:hover { box-shadow: 0 4px 20px rgba(232,121,249,0.12); }

.module-icon { font-size: 1.5rem; margin-bottom: 0.35rem; }
.module-title {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.module-card[data-module="generate"] .module-title { color: var(--color-generate); }
.module-card[data-module="cover"] .module-title { color: var(--color-cover); }
.module-card[data-module="separate"] .module-title { color: var(--color-separate); }
.module-card[data-module="mix"] .module-title { color: var(--color-mix); }
.module-card[data-module="vocals"] .module-title { color: var(--color-vocals); }
.module-card[data-module="instrumental"] .module-title { color: var(--color-instrumental); }
.module-card[data-module="video"] .module-title { color: var(--color-video); }
.module-card[data-module="sound"] .module-title { color: var(--color-sound); }
.module-card[data-module="mashup"] .module-title { color: var(--color-mashup); }
.module-card[data-module="musician"] .module-title { color: var(--color-musician); }

.module-desc {
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.4;
  margin-bottom: 0.4rem;
}
.module-price {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 12px;
  font-size: 0.65rem;
  font-weight: 600;
}
.module-card[data-module="generate"] .module-price { color: var(--color-generate); border: 1px solid rgba(0,245,255,0.25); }
.module-card[data-module="cover"] .module-price { color: var(--color-cover); border: 1px solid rgba(255,107,157,0.25); }
.module-card[data-module="separate"] .module-price { color: var(--color-separate); border: 1px solid rgba(168,85,247,0.25); }
.module-card[data-module="mix"] .module-price { color: var(--color-mix); border: 1px solid rgba(250,204,21,0.25); }
.module-card[data-module="vocals"] .module-price { color: var(--color-vocals); border: 1px solid rgba(244,114,182,0.25); }
.module-card[data-module="instrumental"] .module-price { color: var(--color-instrumental); border: 1px solid rgba(52,211,153,0.25); }
.module-card[data-module="video"] .module-price { color: var(--color-video); border: 1px solid rgba(249,115,22,0.25); }
.module-card[data-module="sound"] .module-price { color: var(--color-sound); border: 1px solid rgba(129,140,248,0.25); }
.module-card[data-module="mashup"] .module-price { color: var(--color-mashup); border: 1px solid rgba(232,121,249,0.25); }
.module-card[data-module="musician"] .module-price { color: var(--color-musician); border: 1px solid rgba(34,197,94,0.25); }



/* ===== 工具类 ===== */
.footer {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-muted);
  font-size: 0.7rem;
  border-top: 1px solid var(--border);
}
.status-bar {
  text-align: center;
  padding: 0.5rem;
  font-size: 0.65rem;
  color: var(--text-muted);
}
.status-bar .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 4px; }
.status-bar .dot.on { background: var(--color-musician); box-shadow: 0 0 6px var(--color-musician); }

@media (max-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .navbar { padding: 0 0.75rem; }
  .container { padding: 0.5rem 0.75rem; }
  .carousel-section { padding: 0.75rem 0.75rem 0.25rem; }
}