/* ====== CREATE page (minimal) ====== */
.create{max-width:780px;margin:0 auto;padding-top:48px}
.create h2{font-family:var(--display);font-size:38px;font-weight:600;margin-bottom:22px;letter-spacing:-.01em;line-height:1.15;color:var(--ink);width:fit-content}
.prompt-box{width:100%;min-height:150px;border:1px solid var(--line-strong);background:var(--s1);border-radius:var(--r);font:inherit;font-size:17px;line-height:1.6;color:var(--ink);padding:18px 20px;outline:none;resize:vertical;transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.prompt-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,112,243,.2)}
.prompt-box::placeholder{color:var(--ink-mute)}
/* 随机 3 个预设，强制单行：长组合时 chip 收缩 + 省略号兜底，不换行。 */
.preset-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-top:16px}
.preset-row .pr-lbl{flex:none;white-space:nowrap;font-family:var(--mono);font-size:11.5px;color:var(--ink-mute);margin-right:2px}
/* 预设：从全胶囊大泡泡收成克制的「建议」chip——圆角矩形（与分段控件同语言）、更小更轻、hover 微抬染色。 */
.preset-row .preset{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 11px;font-size:12.5px;font-weight:500;border-radius:var(--r-sm);color:var(--ink-soft);background:var(--s2);border:1px solid var(--line);transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast),transform var(--dur-fast)}
.preset-row .preset:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent);background:rgba(0,112,243,.06)}
@media (prefers-reduced-motion:reduce){.preset-row .preset:hover{transform:none}}
/* 「类型」开关贴近标签，不再 space-between 拉到最右边飘着 */
.cmode-simple .opt-row{justify-content:flex-start;gap:14px}
.create-go{display:flex;align-items:center;gap:18px;margin-top:30px}
.create-go .gobtn{width:auto;padding:14px 32px}

/* create: simple / advanced */
.create-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px}
.adv-sec{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.adv-sec:first-child{border-top:none;padding-top:0;margin-top:30px}
.adv-h{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;font-size:15px;font-weight:500;flex-wrap:wrap}
.img-drop{display:flex;align-items:center;gap:16px;width:100%;text-align:left;border:1px dashed var(--line-strong);background:transparent;border-radius:var(--r);padding:20px 22px;transition:border-color var(--dur-fast),background var(--dur-fast)}
.img-drop:hover{border-color:var(--accent);background:rgba(0,112,243,.04)}
.img-drop .ic{color:var(--ink-soft);flex:none}
.img-txt{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink-soft)}
.img-txt small{font-size:12px;color:var(--ink-mute);font-weight:400}
.adv-sec .slider{margin-top:20px}
/* 标题旁的「可选」小标：克制、说明该段非必填。 */
.adv-opt{margin-left:8px;font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--ink-mute);background:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);padding:1px 7px;vertical-align:middle;letter-spacing:.02em}
/* 参考音色：上传一段干声引导音色。复用 .img-drop，选中文件后描边染 accent + 可移除。 */
.ref-wrap{position:relative;margin-top:14px}
.ref-drop{cursor:pointer}
.ref-drop.has-file{border-style:solid;border-color:var(--accent);background:rgba(0,112,243,.05)}
.ref-drop.has-file .ic{color:var(--accent)}
.ref-clear{position:absolute;top:50%;right:14px;transform:translateY(-50%);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--s3);border:1px solid var(--line-strong);color:var(--ink-soft);font-size:16px;line-height:1;transition:color var(--dur-fast),border-color var(--dur-fast)}
.ref-clear:hover{color:var(--ink);border-color:var(--accent)}
.ly-pane[hidden]{display:none}
.ly-pane .box{height:140px}
.ly-pane[data-lp="inst"] .ly-note{min-height:140px}
.ly-tip{font-size:12.5px;color:var(--ink-mute);margin-top:10px}
.ly-note{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-mute);padding:14px 2px}
.ly-note .ic{color:var(--accent-soft)}
.ly-rhyme{display:block}
.ly-rhyme .opt-k{display:block;margin-bottom:10px;font-size:14px;font-weight:500}
.ly-pane .box.rhyme-in{height:auto}

/* ====== CREATE split (生成歌曲 | 音乐详情) ====== */
.create-split{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:32px;align-items:stretch;height:calc(100vh - 210px)}
.cs-left{overflow-y:auto;overflow-x:hidden;min-height:0;padding-right:8px;scrollbar-gutter:stable}
.cs-left .create{max-width:none;margin:0;padding-top:6px}
.cs-modebar{display:flex;justify-content:center;margin-bottom:22px}
.cs-modebar .mode-seg{width:auto}
.cs-left #lyModeSeg{flex:0 0 100%;width:auto;margin-top:12px}
.cs-left #lyModeSeg button{padding:9px 8px}
.cs-left .create h2{font-size:26px;margin:0 auto 18px}
.cs-left .create-top{display:block;text-align:center;margin-bottom:18px}
.cs-left .prompt-box{min-height:132px;font-size:15px}
.cs-left .create-go{display:block;margin-top:26px}
.cs-left .create-go .gobtn{width:100%;padding:15px}
.cs-right{min-height:0;display:flex;flex-direction:column}
.music-detail{padding:0;display:flex;flex-direction:column;min-height:0;flex:1}
.md-top{display:flex;gap:16px;align-items:center}
.md-cover{position:relative;width:118px;height:118px;flex:none;border-radius:var(--r-sm);overflow:hidden}
.md-cover .grad{position:absolute;inset:0}
.md-cover .gloss{position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 52%)}
.md-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;display:grid;place-items:center;background:var(--ctrl-bg);color:var(--ctrl-fg);border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.md-tt{min-width:0}
.md-title{font-size:22px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-sub{font-family:var(--mono);font-size:12.5px;color:var(--ink-mute);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:13px}
.md-chip{font-family:var(--mono);font-size:11px;color:var(--ink-soft);background:var(--s2);border:1px solid var(--line);padding:4px 10px;border-radius:980px}
.md-wave{display:flex;align-items:center;gap:1.5px;height:48px;margin-top:22px;cursor:pointer}
.md-wave i{flex:1;background:var(--s3);min-height:3px;border-radius:980px;transition:background-color .15s linear,transform .15s ease,box-shadow .15s ease}
.md-wave i.on{background:var(--accent)}
.md-wave i.head{background:var(--accent);transform:scaleY(1.12);box-shadow:0 0 8px var(--accent)}
@media (prefers-reduced-motion:reduce){.md-wave i{transition:none}.md-wave i.head{transform:none}}
.md-times{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--ink-mute)}
.md-sec{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.md-sec-h{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:13px}
.md-lyrics{max-height:208px;overflow:auto}
.md-lyrics p{font-size:14px;line-height:1.95;color:var(--ink-soft);margin:0}
.md-meta{display:flex;flex-direction:column;gap:11px}
.md-mrow{display:flex;align-items:center;justify-content:space-between;font-size:13px}
.md-mrow span{color:var(--ink-mute)}
.md-mrow b{color:var(--ink);font-weight:500}
.md-cols{display:grid;grid-template-columns:1fr 270px;gap:30px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line);flex:1;min-height:0}
.md-cols .md-sec{margin-top:0;padding-top:0;border-top:none;min-height:0;display:flex;flex-direction:column}
.md-cols .md-lyrics{flex:1;min-height:0;max-height:none;overflow:auto}
.md-acts{display:flex;gap:9px;margin-top:20px}
@media(max-width:980px){.create-split{grid-template-columns:1fr;height:auto}.cs-left{overflow:visible}.md-cols{grid-template-columns:1fr;display:block}.md-cols .md-lyrics{flex:none;max-height:360px}.md-side{margin-top:22px}}

/* 右侧详情：空态 / 错误态 / 生成中骨架 */
.md-empty,.md-error{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px}
.md-retry{margin-top:8px;width:auto}
.md-empty-ic{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);background:var(--s2);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.md-empty-t{font-size:17px;font-weight:600;color:var(--ink-soft);letter-spacing:-.01em}
.md-empty-s{font-size:13px;line-height:1.7;color:var(--ink-mute)}
.md-loading{flex:1;min-height:0;display:flex;flex-direction:column;gap:16px;padding:2px}
.md-skel{background:var(--s2);border-radius:var(--r-sm);position:relative;overflow:hidden}
.md-skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-100%);animation:mdShimmer 1.6s var(--ease) infinite}
.md-skel-title::after{animation-delay:.18s}
.md-skel-sub::after{animation-delay:.34s}
/* 封面骨架：蓝→紫极光在 grey 上缓慢漂移（低饱和，仍是骨架质感）*/
.md-skel-cover{height:120px;border-radius:var(--r);background:linear-gradient(110deg,rgba(0,104,214,.16),var(--s2) 36%,rgba(124,108,242,.15) 60%,rgba(142,124,240,.12) 82%,var(--s2));background-size:230% 100%;animation:mdPan 4s ease-in-out infinite}
.md-skel-title{height:18px;width:55%}
.md-skel-sub{height:13px;width:38%}
/* 生成中均衡器：行进波，scaleY（合成器友好）；蓝→柔紫单系渐变，半透明更克制 */
.md-eq{display:flex;align-items:flex-end;gap:2px;height:48px;margin-top:8px}
.md-eq i{flex:1;height:100%;border-radius:980px;transform-origin:bottom;transform:scaleY(.28);background:linear-gradient(to top,var(--accent),#8E7CF0);opacity:.66;animation:mdEq 1.1s ease-in-out infinite;will-change:transform}
.md-loading-tx{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:auto;padding:8px;font-size:13px;color:var(--ink-mute);font-family:var(--mono)}
.md-spin{width:16px;height:16px;border-radius:50%;background:conic-gradient(from 90deg,transparent,var(--accent));-webkit-mask:radial-gradient(closest-side,transparent 62%,#000 64%);mask:radial-gradient(closest-side,transparent 62%,#000 64%);animation:mdSpin .8s linear infinite}

/* 歌词预览态：歌词/参数已就绪，音频还在后台生成——禁用播放/下载，波形/封面打占位。 */
.music-detail.is-generating .md-play{opacity:0;pointer-events:none}
.music-detail.is-generating .md-wave{cursor:default}
.music-detail.is-generating .md-wave i{opacity:.42}
.music-detail.is-generating .md-acts .wc-btn:not(.primary){opacity:.5;pointer-events:none}
.md-genbadge{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:inherit;background:rgba(8,10,22,.52);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);color:#fff;font-size:11px;font-weight:600;font-family:var(--mono);letter-spacing:.02em;animation:mdGenPulse 1.9s var(--ease) infinite}
.md-genbadge .md-spin{width:14px;height:14px}

@keyframes mdShimmer{to{transform:translateX(100%)}}
@keyframes mdSpin{to{transform:rotate(360deg)}}
@keyframes mdPan{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes mdEq{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes mdGenPulse{0%,100%{opacity:.9}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.md-skel::after{animation:none}.md-skel-cover{animation:none}.md-eq i{animation:none;transform:scaleY(.5)}.md-spin{animation-duration:2.4s}.md-genbadge{animation:none}}

/* LIGHT theme overrides (create-specific) */
html[data-theme="light"] textarea.box,html[data-theme="light"] input.box,html[data-theme="light"] .stylebox,html[data-theme="light"] .dice{background:#F4F4F6}