/* ============ 基础 ============ */
:root {
  --bg: #0b0d14;
  --bg-soft: #12151f;
  --panel: rgba(22, 26, 40, .72);
  --panel-2: #1c2132;
  --border: #2a3045;
  --text: #eef0f8;
  --text-dim: #9aa2bd;
  --accent: #8b5cf6;
  --accent-2: #ec4899;
  --accent-3: #22d3ee;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* 关键修复：带 hidden 属性的元素真正隐藏 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(139, 92, 246, .22), transparent 60%),
    radial-gradient(900px 520px at -8% 8%, rgba(34, 211, 238, .13), transparent 60%),
    radial-gradient(1000px 620px at 50% 118%, rgba(236, 72, 153, .16), transparent 60%),
    var(--bg);
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

::selection { background: rgba(139, 92, 246, .45); }

/* ============ 顶栏 ============ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 13, 20, .72);
  backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; font-size: 24px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 22px rgba(139, 92, 246, .45);
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(139, 92, 246, .45); }
  50% { box-shadow: 0 6px 32px rgba(236, 72, 153, .6); }
}
.brand-text h1 { font-size: 17px; letter-spacing: 1px; }
.brand-text p { font-size: 11px; color: var(--text-dim); }

/* 汉堡菜单按钮 */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 11px; cursor: pointer; padding: 0 10px;
  transition: .15s;
}
.hamburger span {
  display: block; height: 2px; width: 100%;
  background: var(--text); border-radius: 2px;
  transition: .25s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.api-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-dim);
  background: var(--panel); border: 1px solid var(--border);
  padding: 7px 13px; border-radius: 999px;
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; }
.dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.bad { background: var(--red); box-shadow: 0 0 8px var(--red); }

.icon-btn {
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); width: 38px; height: 38px; border-radius: 11px;
  font-size: 16px; transition: .15s;
}
.icon-btn:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ============ 演示横幅 ============ */
.demo-banner {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 8px 20px; font-size: 13px; z-index: 19; position: relative;
  background: linear-gradient(90deg, rgba(251, 191, 36, .12), rgba(236, 72, 153, .12));
  border-bottom: 1px solid rgba(251, 191, 36, .25);
  color: #fcd34d;
}
.demo-banner button {
  background: rgba(251, 191, 36, .15); color: #fcd34d;
  border: 1px solid rgba(251, 191, 36, .4); border-radius: 999px;
  padding: 4px 14px; font-size: 12px;
}
.demo-banner button:hover { background: rgba(251, 191, 36, .3); color: #fff; }

/* ============ 公告横幅 ============ */
.announce-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; font-size: 13px;
  background: linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(139, 92, 246, .14));
  border-bottom: 1px solid rgba(34, 211, 238, .3);
  color: #a5f3fc;
  position: relative; z-index: 19;
}
.announce-icon { flex: none; }
.announce-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.announce-close {
  flex: none; background: none; border: none; color: var(--text-dim);
  font-size: 13px; padding: 2px 6px; border-radius: 6px;
}
.announce-close:hover { color: #fff; background: rgba(255,255,255,.1); }
.announce-bar.important {
  background: linear-gradient(90deg, rgba(239, 68, 68, .2), rgba(236, 72, 153, .2));
  border-bottom: 1px solid rgba(239, 68, 68, .4);
  color: #fecaca;
}

/* ============ 更新日志 ============ */
.update-item {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-soft); padding: 12px 16px; margin-bottom: 10px;
}
.update-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.update-head b { font-size: 14px; }
.update-head span { font-size: 11px; color: var(--text-dim); }
.update-item p { font-size: 13px; color: var(--text-dim); line-height: 1.8; }

/* ============ Hero ============ */
.hero {
  position: relative;
  text-align: center;
  padding: 92px 20px 64px;
  overflow: hidden;
}
.hero-notes span {
  position: absolute; bottom: -50px;
  font-size: 26px; opacity: 0;
  animation: floatNote 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floatNote {
  0%   { transform: translateY(0) rotate(-8deg) scale(.8); opacity: 0; }
  15%  { opacity: .55; }
  85%  { opacity: .5; }
  100% { transform: translateY(-620px) rotate(10deg) scale(1.15); opacity: 0; }
}

.hero-badge {
  display: inline-block;
  font-size: 13px; color: #c4b5fd;
  background: rgba(139, 92, 246, .14);
  border: 1px solid rgba(139, 92, 246, .4);
  padding: 7px 18px; border-radius: 999px;
  margin-bottom: 26px;
  animation: fadeUp .7s ease both;
}
.hero-title {
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.22; letter-spacing: 1px; font-weight: 800;
  animation: fadeUp .7s .1s ease both;
}
.hero-title .grad {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradMove 4s linear infinite;
}
@keyframes gradMove { to { background-position: 300% 0; } }
.hero-sub {
  color: var(--text-dim); font-size: clamp(14px, 2vw, 17px);
  margin: 20px 0 34px;
  animation: fadeUp .7s .2s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-cta {
  position: relative; overflow: hidden;
  border: none; color: #fff;
  font-size: 18px; font-weight: 700; letter-spacing: 1px;
  padding: 18px 46px; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 40px rgba(139, 92, 246, .5);
  transition: transform .2s, box-shadow .2s;
  animation: fadeUp .7s .3s ease both, ctaPulse 2.2s 1.2s ease-in-out infinite;
}
.hero-cta:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 50px rgba(236, 72, 153, .55); }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 10px 40px rgba(139, 92, 246, .5); }
  50% { box-shadow: 0 10px 56px rgba(236, 72, 153, .7); }
}
.cta-shine {
  position: absolute; top: 0; left: -80%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: shine 2.6s 1.4s ease-in-out infinite;
}
@keyframes shine { 0% { left: -80%; } 55% { left: 130%; } 100% { left: 130%; } }

.hero-eq { display: flex; justify-content: center; align-items: flex-end; gap: 5px; height: 42px; margin-top: 36px; animation: fadeUp .7s .4s ease both; }
.hero-eq i {
  width: 5px; border-radius: 4px;
  background: linear-gradient(180deg, var(--accent-3), var(--accent));
  opacity: .65;
  animation: eqBounce 1s ease-in-out infinite alternate;
}
@keyframes eqBounce { from { height: 6px; } to { height: 38px; } }

.hero-stats {
  display: flex; justify-content: center; gap: 44px; margin-top: 34px;
  animation: fadeUp .7s .5s ease both;
}
.stat b {
  display: block; font-size: 26px; font-weight: 800;
  background: linear-gradient(135deg, var(--accent-3), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { font-size: 12px; color: var(--text-dim); }

/* ============ 创作区 ============ */
.composer-wrap {
  width: min(880px, 92vw);
  margin: 10px auto 60px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 22px;
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  scroll-margin-top: 90px;
}
.mode-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.mode-tab {
  flex: 1; padding: 11px; border-radius: 12px; font-size: 14px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  transition: .18s;
}
.mode-tab.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, rgba(139, 92, 246, .35), rgba(236, 72, 153, .35));
  box-shadow: 0 6px 20px rgba(139, 92, 246, .25);
}
.mode-pane { display: none; }
.mode-pane.active { display: block; }

/* 极简模式 */
.idea-box input {
  width: 100%;
  background: var(--bg-soft);
  border: 2px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  padding: 20px 22px;
  font-size: 19px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  text-align: center;
}
.idea-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(139, 92, 246, .15), 0 8px 30px rgba(139, 92, 246, .2);
}
.inspirations {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; margin-top: 16px;
}
.insp-chip {
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 999px;
  padding: 8px 15px; font-size: 13px;
  transition: .16s; animation: fadeUp .5s ease both;
}
.insp-chip:hover {
  color: #fff; border-color: var(--accent);
  background: rgba(139, 92, 246, .22);
  transform: translateY(-2px);
}

.btn-generate {
  width: 100%;
  padding: 16px; border: none; border-radius: 16px;
  font-size: 16px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(139, 92, 246, .4);
  transition: .2s;
}
.btn-generate.big {
  margin-top: 22px;
  padding: 19px;
  font-size: 18px;
  border-radius: 18px;
  animation: ctaPulse 2.4s ease-in-out infinite;
}
.btn-generate:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(236, 72, 153, .45); }
.btn-generate:disabled { opacity: .55; cursor: not-allowed; animation: none; }
.btn-icon { font-size: 19px; }
.generate-hint { font-size: 12px; color: var(--text-dim); text-align: center; margin-top: 12px; }

/* 高级模式 */
.panel-inner { padding: 6px; }
.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 7px; }
.field-label em { color: var(--accent-2); font-style: normal; }
.field-hint { font-size: 12px; color: var(--text-dim); text-align: right; margin-top: 5px; }

input[type="text"], input[type="email"], input[type="password"], textarea {
  width: 100%; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); padding: 12px 14px; font-size: 14px;
  outline: none; transition: border-color .15s;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus { border-color: var(--accent); }
.code-row { display: flex; gap: 8px; align-items: stretch; }
.code-row input { flex: 1; min-width: 0; }
.code-row .btn-secondary { white-space: nowrap; flex: none; }
textarea { resize: vertical; line-height: 1.7; min-height: 150px; }

.structure-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.structure-btns button {
  background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; transition: .15s;
}
.structure-btns button:hover { color: var(--text); border-color: var(--accent); }

.tag-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.style-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.style-preset {
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(236,72,153,.15));
  border: 1px solid rgba(139,92,246,.3); color: var(--accent-3);
  cursor: pointer; transition: .15s;
}
.style-preset:hover { background: linear-gradient(135deg, rgba(139,92,246,.3), rgba(236,72,153,.3)); transform: translateY(-1px); }
.tag-chip {
  background: var(--panel-2); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; transition: .15s;
}
.tag-chip:hover, .tag-chip.on {
  color: #fff; border-color: var(--accent);
  background: rgba(139, 92, 246, .25);
}

.row { display: flex; gap: 16px; align-items: flex-end; }
.row .grow { flex: 1; }
.switch-field { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.switch { position: relative; display: inline-block; width: 46px; height: 25px; }
.switch input { display: none; }
.slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); transition: .2s;
}
.slider::before {
  content: ""; position: absolute; width: 19px; height: 19px;
  border-radius: 50%; background: var(--text-dim);
  top: 2px; left: 2px; transition: .2s;
}
.switch input:checked + .slider { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; }
.switch input:checked + .slider::before { transform: translateX(21px); background: #fff; }

/* ============ 区块标题 ============ */
.section-title {
  font-size: clamp(22px, 3.4vw, 30px);
  text-align: center; margin-bottom: 30px; letter-spacing: 1px;
}

/* ============ 三步说明 ============ */
.how, .showcase, .works-wrap { width: min(1060px, 92vw); margin: 0 auto 70px; }
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.how-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 30px 20px; text-align: center;
  backdrop-filter: blur(10px);
  transition: transform .2s, border-color .2s;
}
.how-card:hover { transform: translateY(-5px); border-color: var(--accent); }
.how-icon {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center; font-size: 30px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(139, 92, 246, .2), rgba(236, 72, 153, .2));
  border: 1px solid rgba(139, 92, 246, .35);
}
.how-card h3 { font-size: 15px; color: #c4b5fd; margin-bottom: 10px; }
.how-card p { font-size: 14px; color: var(--text-dim); line-height: 1.9; }

/* ============ 示例作品 ============ */
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.showcase-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.showcase-stats { font-size: 13px; color: var(--text-dim); }
.showcase-stats .ss-item b { color: var(--accent-3); font-weight: 700; }
.showcase-stats .ss-dot { margin: 0 6px; opacity: .5; }
.show-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px; display: flex; gap: 14px; align-items: center;
  backdrop-filter: blur(10px);
  transition: transform .2s, border-color .2s;
}
.show-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.show-cover {
  width: 62px; height: 62px; border-radius: 14px; object-fit: cover; flex: none;
  background: var(--panel-2); border: 1px solid var(--border);
}
.show-info { flex: 1; min-width: 0; }
.show-title { font-weight: 700; font-size: 15px; }
.show-tags { font-size: 12px; color: var(--text-dim); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.show-play {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: none; color: #fff; font-size: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 18px rgba(139, 92, 246, .4);
  transition: .15s;
}
.show-play:hover { transform: scale(1.08); }
.show-play.playing { animation: spinPulse 1s ease-in-out infinite; }
@keyframes spinPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* ============ 我的创作 ============ */
.clear-tasks {
  display: block; margin: 0 0 14px auto;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 999px;
  padding: 6px 14px; font-size: 12px; transition: .15s;
}
.clear-tasks:hover { color: var(--red); border-color: rgba(248, 113, 113, .5); }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; justify-content: center; }
.tab {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); padding: 9px 22px; border-radius: 999px; font-size: 14px;
  transition: .15s;
}
.tab.active {
  background: linear-gradient(135deg, rgba(139, 92, 246, .3), rgba(236, 72, 153, .3));
  border-color: var(--accent); color: #fff;
}
.badge {
  display: inline-block; min-width: 18px; padding: 0 6px; text-align: center;
  background: var(--panel-2); border-radius: 999px; font-size: 11px; margin-left: 4px;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }

.empty { text-align: center; padding: 60px 0; color: var(--text-dim); }
.empty-icon { font-size: 44px; margin-bottom: 14px; opacity: .7; }
.empty .sub { font-size: 13px; margin-top: 8px; opacity: .7; }

.task-card {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.task-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.task-title { font-weight: 600; font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-badge {
  font-size: 12px; padding: 3px 12px; border-radius: 999px; flex: none;
  border: 1px solid var(--border); color: var(--text-dim);
}
.status-badge.s-submitted { color: var(--amber); border-color: rgba(251, 191, 36, .4); }
.status-badge.s-queued { color: var(--amber); border-color: rgba(251, 191, 36, .4); }
.status-badge.s-streaming { color: #60a5fa; border-color: rgba(96, 165, 250, .4); }
.status-badge.s-complete { color: var(--green); border-color: rgba(52, 211, 153, .4); }
.status-badge.s-error { color: var(--red); border-color: rgba(248, 113, 113, .4); }
.task-cancel {
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  background: transparent; border: 1px solid var(--red); color: var(--red);
  cursor: pointer; transition: .15s; flex: none;
}
.task-cancel:hover { background: var(--red); color: #fff; }

.clip {
  display: flex; gap: 12px; align-items: center;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px; margin-bottom: 8px;
}
.clip-complete { animation: successGlow 1.5s ease-out; }
.clip-error { border-color: rgba(248, 113, 113, .4); }
@keyframes successGlow {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); border-color: rgba(52, 211, 153, .6); }
  50% { box-shadow: 0 0 20px 4px rgba(52, 211, 153, .3); border-color: rgba(52, 211, 153, .8); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); border-color: var(--border); }
}
.clip:last-child { margin-bottom: 0; }
.clip-cover {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none;
  background: var(--panel); border: 1px solid var(--border);
}
.clip-cover.placeholder { display: grid; place-items: center; font-size: 22px; }
.clip-info { flex: 1; min-width: 0; }
.clip-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-status { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
.clip-actions { display: flex; gap: 6px; flex: none; }
.clip-actions button {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 7px 10px; font-size: 13px; transition: .15s;
}
.clip-actions button:hover:not(:disabled) { border-color: var(--accent); }
.clip-actions button:disabled { opacity: .4; cursor: not-allowed; }

.progress {
  height: 6px; border-radius: 999px; background: var(--panel); overflow: hidden; margin-top: 10px;
  position: relative;
}
.progress > div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
  transition: width .5s ease;
  position: relative;
}
.progress > div::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.progress-label {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-dim); margin-top: 6px;
}
.progress-percent { color: var(--accent-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.progress-stage { display: flex; align-items: center; gap: 4px; }
.progress-stage .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.song-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; margin-bottom: 12px;
  transition: .15s;
}
.song-card:hover { border-color: var(--accent); }
.song-cover { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; background: var(--panel); }
.song-info { flex: 1; min-width: 0; }
.song-title { font-weight: 600; font-size: 15px; }
.song-tags { font-size: 12px; color: var(--text-dim); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-time { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.song-actions { display: flex; gap: 6px; flex: none; }
.song-actions button {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 9px; padding: 8px 12px; font-size: 13px; transition: .15s;
}
.song-actions button:hover { border-color: var(--accent); }
.history-toolbar { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.history-search {
  flex: 1; padding: 10px 14px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  font-size: 14px; outline: none; transition: .15s;
}
.history-search:focus { border-color: var(--accent); }
.filter-btn {
  padding: 10px 16px; border-radius: 11px; font-size: 13px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text-dim);
  cursor: pointer; transition: .15s; white-space: nowrap;
}
.filter-btn:hover { border-color: var(--accent); color: var(--text); }
.filter-btn.on { background: linear-gradient(135deg, rgba(139,92,246,.2), rgba(236,72,153,.2)); border-color: var(--accent); color: var(--accent-3); }

/* ============ 页脚 ============ */
.footer {
  border-top: 1px solid var(--border);
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--text-dim); font-size: 13px;
  background: rgba(11, 13, 20, .6);
  margin-top: auto;
}
.footer-links a { color: var(--text-dim); text-decoration: none; }
.footer-links a:hover { color: var(--accent); }

/* ============ 播放条 ============ */
.playerbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 28px;
  background: rgba(18, 21, 31, .95);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(14px);
}
.player-cover { width: 48px; height: 48px; border-radius: 9px; object-fit: cover; }
.player-meta { min-width: 140px; max-width: 280px; }
.player-title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-tags { font-size: 12px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-visualizer { width: 120px; height: 40px; flex: none; opacity: .8; }
#audio { flex: 1; max-width: 640px; min-width: 200px; height: 40px; }
.btn-download {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 11px; padding: 9px 14px; font-size: 13px; white-space: nowrap;
}
.btn-download:hover { border-color: var(--accent); }

/* ============ 钱包 / 充值 ============ */
.wallet { display: flex; align-items: center; gap: 8px; }
.wallet-points {
  font-size: 13px; color: var(--text-dim);
  background: var(--panel); border: 1px solid var(--border);
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
}
.wallet-points b { color: #fcd34d; font-size: 15px; }
.btn-recharge {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  border: none; color: #fff; border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 14px rgba(239, 68, 68, .3); transition: .15s;
}
.btn-recharge:hover { transform: translateY(-1px); }
.btn-recharge:disabled { opacity: .5; cursor: not-allowed; }

.wallet-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 14px; }
.wallet-sub b { color: var(--text); }

.pay-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.pay-tab {
  flex: 1; padding: 10px; border-radius: 12px; font-size: 14px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  transition: .15s;
}
.pay-tab.active { color: #fff; border-color: transparent; }
.pay-tab[data-channel="wechat"].active { background: linear-gradient(135deg, #07c160, #06ad56); }
.pay-tab[data-channel="alipay"].active { background: linear-gradient(135deg, #1677ff, #0a5dd0); }

.tier-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.tier-item {
  padding: 10px; border-radius: 12px; text-align: center; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  transition: .15s; font-size: 14px;
}
.tier-item .tier-amt { font-weight: 700; color: #fcd34d; font-size: 16px; }
.tier-pts { font-size: 13px; color: var(--text-dim); font-weight: 600; }
.tier-bonus {
  font-style: normal; font-size: 11px; color: var(--green);
  border: 1px solid rgba(52, 211, 153, .5);
  padding: 1px 6px; border-radius: 999px; margin-left: 5px;
}
.tier-sub { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.tier-item.on { border-color: var(--accent); color: #fff; background: rgba(139, 92, 246, .2); }
.price-note { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.my-orders { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); text-align: left; }
.my-orders h4 { font-size: 13px; color: var(--dim); margin-bottom: 8px; }
.my-order-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 13px; padding: 7px 4px; border-bottom: 1px dashed var(--border); color: var(--text-dim);
}
.my-order-item .my-order-time { font-size: 11px; }
.my-order-status.s-pending { color: var(--amber); }
.my-order-status.s-paid { color: var(--green); }
.my-order-status.s-rejected { color: var(--red); }

.qr-box { text-align: center; margin-bottom: 14px; }
.qr-box img {
  width: 220px; height: 220px; object-fit: contain;
  border-radius: 14px; border: 1px solid var(--border);
  background: #fff; padding: 8px;
}
.qr-hint { font-size: 12px; color: var(--text-dim); margin-top: 8px; line-height: 1.7; }

.pay-status { font-size: 13px; margin: 10px 0; min-height: 18px; text-align: center; }
.pay-status.ok { color: var(--green); }
.pay-status.err { color: var(--red); }
.pay-status.wait { color: var(--amber); }

/* ============ 弹窗 ============ */
.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .62);
  display: grid; place-items: center;
  backdrop-filter: blur(5px);
}
.modal-box {
  width: min(480px, 92vw);
  background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 18px; padding: 24px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  animation: popIn .22s ease both;
  max-height: 88vh; overflow-y: auto;
}
@keyframes popIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-box h3 { margin-bottom: 16px; font-size: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none; color: #fff; border-radius: 11px; padding: 10px 18px; font-size: 14px;
}
.btn-secondary {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 11px; padding: 10px 18px; font-size: 14px;
}
.check-field {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-dim); cursor: pointer;
}
.check-field input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.modal-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
.admin-link { font-size: 13px; color: var(--text-dim); text-decoration: none; }
.admin-link:hover { color: var(--accent); }

/* ============ Toast ============ */
.toast {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text); padding: 12px 22px; border-radius: 12px;
  font-size: 14px; z-index: 50; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: fadein .25s;
}
.toast.error { border-color: rgba(248, 113, 113, .5); }
.toast.success { border-color: rgba(52, 211, 153, .5); }
@keyframes fadein { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============ 一级菜单导航 ============ */
.mainnav {
  display: flex; align-items: center; gap: 4px;
  flex: 1; justify-content: center;
  /* ⚠️ 这里不能用 overflow-x:auto：一个轴为 auto 会让另一个轴也变 auto，
     导致绝对定位的下拉菜单被容器裁掉（顶部菜单"点不动"的根因）。
     ≤960px 时导航会变成抽屉（见下方媒体查询），无需横向滚动。 */
  overflow: visible;
  min-width: 0;
}
.mainnav::-webkit-scrollbar { display: none; }
.nav-item { position: relative; flex: none; }
/* 中等宽度（窄笔记本）：收紧导航，避免顶栏拥挤 */
@media (min-width: 961px) and (max-width: 1240px) {
  .nav-btn { padding: 9px 10px; font-size: 13px; }
  .brand-text p { display: none; }
  .mainnav { gap: 0; }
}
.nav-btn {
  background: transparent; border: none; color: var(--text-dim);
  padding: 10px 16px; border-radius: 11px; font-size: 14px;
  white-space: nowrap; transition: .15s;
  display: flex; align-items: center; gap: 4px;
}
.nav-btn:hover, .nav-btn.on { color: #fff; background: rgba(139, 92, 246, .16); }
.caret { font-size: 10px; opacity: .7; transition: transform .18s; }
.nav-item.open .caret { transform: rotate(180deg); }
.nav-item.open .nav-btn { color: #fff; background: rgba(139, 92, 246, .16); }

.nav-drop {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 250px;
  background: #171b2b; border: 1px solid var(--border);
  border-radius: 14px; padding: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: .18s; z-index: 25;
}
.nav-item.open .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* 桌面端：鼠标悬停一级菜单也自动展开（兜底，不依赖点击） */
@media (hover: hover) {
  .nav-item:hover .nav-drop {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-item:hover .caret { transform: rotate(180deg); }
}
/* 靠右的菜单改为右对齐，避免下拉超出屏幕右侧 */
.nav-item.align-right .nav-drop { left: auto; right: 0; transform: translateY(6px); }
.nav-item.align-right.open .nav-drop { transform: translateY(0); }
@media (hover: hover) {
  .nav-item.align-right:hover .nav-drop { transform: translateY(0); }
}
.nav-sub {
  display: flex; flex-direction: column; align-items: stretch; gap: 3px;
  width: 100%; text-align: left;
  background: transparent; border: none; color: var(--text-dim);
  padding: 9px 14px; border-radius: 10px; font-size: 13px;
  text-decoration: none; transition: .13s; cursor: pointer;
}
.nav-sub:hover { color: #fff; background: rgba(139, 92, 246, .18); }
.nav-sub-main { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text); }
.nav-sub-desc { font-size: 11px; color: var(--text-dim); }
.nav-badge { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.nav-badge.new { color: #67e8f9; border: 1px solid rgba(34, 211, 238, .5); }
.nav-badge.hot { color: #fca5a5; border: 1px solid rgba(248, 113, 113, .5); }
.nav-badge.auto { color: var(--green); border: 1px solid rgba(52, 211, 153, .5); }
.nav-count {
  font-style: normal; font-size: 10px; min-width: 16px; text-align: center;
  background: var(--panel-2); border-radius: 999px; padding: 1px 5px; color: #fcd34d;
}
.nav-sub.soon { color: var(--text-dim); opacity: .55; cursor: not-allowed; }
.nav-sub.soon:hover { color: var(--text-dim); background: transparent; }
.nav-sub.soon .nav-sub-main { color: var(--text-dim); }

.brand { cursor: pointer; }

/* ============ 视图切换 ============ */
.view { display: none; }
.view.active { display: block; }
#view-composer, #view-works, #view-help { padding-top: 26px; }

/* ============ 帮助中心 ============ */
.help-wrap { width: min(760px, 92vw); margin: 0 auto 70px; }
.help-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 24px 28px; margin-bottom: 18px;
  backdrop-filter: blur(10px);
}
.help-card h3 { font-size: 16px; margin-bottom: 14px; }
.steps-list { padding-left: 22px; color: var(--text-dim); font-size: 14px; line-height: 2.1; }
.steps-list b { color: var(--text); }
.faq-item {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 10px;
  background: var(--bg-soft); transition: border-color .15s;
}
.faq-item[open] { border-color: var(--accent); }
.faq-item summary {
  cursor: pointer; font-size: 14px; font-weight: 600;
  list-style: none; user-select: none;
}
.faq-item summary::before { content: "▶ "; font-size: 10px; color: var(--accent); transition: transform .15s; display: inline-block; }
.faq-item[open] summary::before { transform: rotate(90deg); }
.faq-item p { font-size: 13px; color: var(--text-dim); line-height: 1.8; margin-top: 10px; }

/* 用户协议 / 隐私政策 */
.terms-content { color: var(--text-dim); font-size: 13px; line-height: 1.9; }
.terms-content p { margin-bottom: 10px; }
.terms-content b { color: var(--text); display: block; margin-top: 12px; margin-bottom: 4px; }
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 14px 0; }
.tech-item {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; text-align: center; transition: .15s;
}
.tech-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.tech-icon { font-size: 28px; margin-bottom: 6px; }
.tech-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.tech-desc { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.about-footer { display: flex; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }

.foot-link {
  background: none; border: none; color: var(--text-dim);
  font-size: 13px; text-decoration: none; padding: 0;
}
.foot-link:hover { color: var(--accent); }

/* ============ 哼唱创作 ============ */
.hum-box { text-align: center; padding: 10px 0; }
.hum-tip { color: var(--text-dim); font-size: 14px; margin-bottom: 14px; }
#humWave {
  width: 100%; height: 90px;
  border-radius: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  display: block;
}
.hum-timer {
  font-size: 26px; font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 10px 0 12px;
}
.hum-timer.rec { color: var(--red); }
.hum-pitch {
  font-size: 20px; font-weight: 800; color: var(--accent-3);
  margin-bottom: 8px; letter-spacing: 1px;
}
.hum-metronome {
  display: block; margin: 8px auto 0;
  background: var(--panel-2); border: 1px solid var(--border);
  color: var(--text-dim); border-radius: 999px;
  padding: 6px 16px; font-size: 12px; transition: .15s;
}
.hum-metronome:hover { border-color: var(--accent); color: var(--text); }
.hum-metronome.off { opacity: .55; }
.hum-upload {
  display: block; margin: 8px auto 0;
  background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .4);
  color: #67e8f9; border-radius: 999px;
  padding: 6px 16px; font-size: 12px; transition: .15s;
}
.hum-upload:hover { background: rgba(34, 211, 238, .22); color: #fff; }
.hum-mic {
  width: 92px; height: 92px; border-radius: 50%; border: none;
  font-size: 38px; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(139, 92, 246, .45);
  transition: .15s; margin-bottom: 6px;
}
.hum-mic:hover { transform: scale(1.05); }
.hum-mic.rec {
  background: linear-gradient(135deg, #f87171, #dc2626);
  animation: recPulse 1s ease-in-out infinite;
}
@keyframes recPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .5); }
  50% { box-shadow: 0 0 0 18px rgba(248, 113, 113, 0); }
}
.hum-actions { display: flex; justify-content: center; gap: 10px; margin: 12px 0; }
.hum-style-field { max-width: 440px; margin: 8px auto 0; text-align: left; }

/* ============ 意见反馈 ============ */
.fb-types { display: flex; gap: 8px; margin-bottom: 14px; }
.fb-type {
  flex: 1; padding: 9px; border-radius: 11px; font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  transition: .15s;
}
.fb-type.on {
  color: #fff; border-color: var(--accent);
  background: rgba(139, 92, 246, .22);
}

/* ============ 顶部 CTA / 悬浮按钮 / 页脚按钮 ============ */
.top-cta {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border: none; color: #fff;
  padding: 9px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  box-shadow: 0 6px 20px rgba(139, 92, 246, .45);
  transition: .18s; white-space: nowrap;
}
.top-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(236, 72, 153, .55); }

.fab-cluster {
  position: fixed; right: 20px; bottom: 96px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 35;
}
.fab-btn {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 999px; border: none;
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 1px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: .18s;
}
.fab-btn span { font-size: 19px; }
.fab-btn:hover { transform: translateY(-3px) scale(1.04); }
.fab-btn.feedback {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  animation: fabPulse 2.2s ease-in-out infinite;
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(239, 68, 68, .45); }
  50% { box-shadow: 0 8px 44px rgba(239, 68, 68, .85); }
}
.fab-btn.create { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.fab-btn.pay { background: linear-gradient(135deg, #10b981, #059669); }

.foot-link {
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 13px; text-decoration: none;
  padding: 8px 16px; border-radius: 999px;
  transition: .15s; display: inline-flex; align-items: center; gap: 4px;
}
.foot-link:hover { color: #fff; border-color: var(--accent); background: rgba(139, 92, 246, .18); transform: translateY(-1px); }

/* ============ 账号体系 ============ */
.user-box { display: flex; align-items: center; }
.btn-auth, .btn-user {
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text); border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 600;
  white-space: nowrap; transition: .15s;
}
.btn-auth { color: #c4b5fd; border-color: rgba(139, 92, 246, .5); background: rgba(139, 92, 246, .12); }
.btn-auth:hover { background: rgba(139, 92, 246, .25); }
.btn-user:hover { border-color: var(--accent); }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.auth-tab {
  flex: 1; padding: 10px; border-radius: 11px; font-size: 14px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim);
  transition: .15s;
}
.auth-tab.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, rgba(139, 92, 246, .35), rgba(236, 72, 153, .35));
}
.user-info-list { font-size: 14px; line-height: 2.2; color: var(--text-dim); }
.user-info-list b { color: var(--text); }
.invite-row { display: flex; gap: 8px; margin: 14px 0 4px; }
.invite-row input {
  flex: 1; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); padding: 9px 12px; font-size: 13px;
  outline: none; text-transform: uppercase;
}
.invite-row input:focus { border-color: var(--accent); }
.btn-logout { background: linear-gradient(135deg, #f87171, #dc2626); }

/* ============ 响应式 ============ */
@media (max-width: 960px) {
  .how-grid, .showcase-grid { grid-template-columns: 1fr; }
  .topbar { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .hero { padding: 60px 16px 46px; }
  .hero-stats { gap: 26px; }
  .playerbar { padding: 10px 14px; flex-wrap: wrap; }
  #audio { order: 3; width: 100%; max-width: none; flex-basis: 100%; }
  .api-status { display: none; }
  .top-cta { display: none; }
  .fab-cluster { right: 12px; bottom: 170px; }
  .fab-btn { padding: 10px 15px; font-size: 13px; }

  /* 移动端汉堡菜单 */
  .hamburger { display: flex; order: 3; margin-left: auto; }
  .mainnav {
    display: none;
    order: 5; flex-basis: 100%;
    flex-direction: column; gap: 4px;
    padding: 12px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
  }
  .mainnav.open { display: flex; }
  .mainnav .nav-item { width: 100%; }
  .mainnav .nav-btn {
    width: 100%; text-align: left; justify-content: space-between;
    padding: 12px 14px; border-radius: 10px;
  }
  .mainnav .nav-drop {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    box-shadow: none; border: none; background: transparent;
    padding: 4px 0 8px 14px; display: none;
  }
  .mainnav .nav-item.open .nav-drop { display: block; }
  .topbar-right { order: 4; margin-left: auto; }
  .wallet { display: none; }
}

/* ============ 创作向导（灵感 → 方案 → 歌词 → 打磨 → 做曲） ============ */
.wz-steps { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.wz-step {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-dim);
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 7px 13px; border-radius: 999px; transition: .18s;
}
.wz-step b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--border); color: var(--text); font-size: 11px;
}
.wz-step.on { color: #fff; border-color: var(--accent); background: rgba(139,92,246,.18); }
.wz-step.on b { background: var(--accent); color: #fff; }
.wz-step.done { color: var(--accent-2); border-color: rgba(236,72,153,.4); }
.wz-step.done b { background: var(--accent-2); color: #fff; }

.wz-panel { display: none; }
.wz-panel.active { display: block; animation: wzIn .22s ease; }
@keyframes wzIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wz-tip { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; line-height: 1.7; }
.wz-tip b { color: var(--accent-2); }
.wz-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.wz-tip-inline { font-size: 14px; color: var(--text); }

.wz-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.wz-plan {
  text-align: left; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px; cursor: pointer; transition: .16s; color: var(--text);
}
.wz-plan:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.wz-plan-title { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.wz-plan-row { font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.6; }
.wz-plan-hook { font-size: 12px; color: var(--accent-2); margin-top: 8px; font-style: italic; }

.wz-lyric-head { display: flex; gap: 12px; flex-wrap: wrap; }
.wz-sections { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.wz-section { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.wz-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.wz-section-type {
  font-size: 12px; font-weight: 700; color: var(--accent-2);
  background: rgba(236,72,153,.12); padding: 3px 10px; border-radius: 999px;
}
.wz-section textarea { min-height: 96px; font-size: 14px; line-height: 1.9; }
.wz-polish { display: flex; gap: 8px; margin-top: 8px; }
.wz-polish input { flex: 1; font-size: 13px; }
.wz-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn-secondary.small { padding: 6px 12px; font-size: 13px; }

/* ============ 播放器歌词对照面板 ============ */
.playerbar { position: fixed; }
.lyric-panel {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: min(680px, 94vw); max-height: 46vh;
  background: #141826; border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.6);
  display: flex; flex-direction: column; overflow: hidden; z-index: 40;
}
.lyric-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.lyric-hint { font-size: 11px; color: var(--text-dim); font-weight: 400; }
.lyric-body { overflow-y: auto; padding: 14px 18px 20px; scroll-behavior: smooth; }
.lyric-line {
  font-size: 15px; line-height: 2.1; color: var(--text-dim);
  padding: 2px 8px; border-radius: 8px; cursor: pointer;
  transition: color .18s, background .18s, transform .18s;
}
.lyric-line:hover { background: rgba(139,92,246,.12); color: var(--text); }
.lyric-line.on {
  color: #fff; font-weight: 700; font-size: 17px;
  background: linear-gradient(90deg, rgba(139,92,246,.28), rgba(236,72,153,.18));
  transform: translateX(3px);
}
.lyric-sec {
  font-size: 12px; font-weight: 700; color: var(--accent-2);
  margin: 12px 0 4px; letter-spacing: .5px;
}
.lyric-sec:first-child { margin-top: 0; }

/* ============ 纯音乐模式 ============ */
.inst-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.inst-row .field { flex: 1; min-width: 200px; margin-bottom: 0; }
.inst-row select {
  width: 100%; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text); padding: 12px 14px; font-size: 14px; outline: none;
}
.inst-row select:focus { border-color: var(--accent); }