@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root{
  color-scheme:dark;
  --ink:#0a0c09; --panel:#131711; --panel-2:#191e15; --panel-3:#1f251b;
  --line:#2b3227; --line-2:#3a4234; --text:#f1f4ea; --muted:#98a292; --muted-2:#6f7869;
  --danger:#ff7d92;
  --m-warm:#c7dd99; --m-wistful:#b5b4d5; --m-hope:#eac395; --m-calm:#9bcac1; --m-night:#bba4cc;

  /* ── 皮肤层：只有这一组随皮肤变化，其余样式全部引用它们 ── */
  --accent:#cdf56f;
  --on-accent:#0d1108;
  --wm-ink:var(--text);
  --wm-line:var(--accent);
  --grain:.035;
  --lime:var(--accent);          /* 兼容旧写法 */

  /* 字号层级：一眼看过去要有落差，不能是平的 */
  --fs-display:clamp(27px,7.6vw,36px);
  --fs-song:26px;
  --fs-title:17px;
  --fs-body:14.5px;
  --fs-meta:12.5px;
  --fs-micro:10.5px;

  --r-sm:10px; --r-md:14px; --r-lg:18px;
  --serif:'Noto Serif SC',"Songti SC",SimSun,serif;
  --sans:'Space Grotesk','Noto Sans SC',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --safe:env(safe-area-inset-bottom,0px);
}

/* 皮肤 · 潮蓝 */
[data-skin="tide"]{
  --accent:#6fd6e8; --on-accent:#04191d;
  --m-warm:#9fd0c4; --m-wistful:#9fb2e0; --m-hope:#c9d8a0; --m-calm:#7fc4d8; --m-night:#b0a8e0;
}
/* 皮肤 · 暮橙 */
[data-skin="ember"]{
  --accent:#f0b268; --on-accent:#1d1204;
  --m-warm:#e8b87e; --m-wistful:#c9a9c4; --m-hope:#efc98d; --m-calm:#a9c2a0; --m-night:#c9a0b8;
}
/* 皮肤 · 素笺（浅色） */
[data-skin="paper"]{
  color-scheme:light;
  --ink:#f3f4ee; --panel:#ffffff; --panel-2:#ebede4; --panel-3:#e0e3d8;
  --line:#d6dacd; --line-2:#bcc1b1; --text:#171a14; --muted:#5c6457; --muted-2:#8a9284;
  --danger:#c2435a;
  --accent:#5c8a1e; --on-accent:#f8fce9;
  --m-warm:#6a8a2c; --m-wistful:#55578f; --m-hope:#956618; --m-calm:#2b6b64; --m-night:#6a4a7e;
  --grain:.018;
}
*{box-sizing:border-box}
/* [hidden] 必须赢过任何 display 声明。
   否则 .sheet{display:grid} / .fail{display:flex} 这类规则会把它压掉，
   元素永远显示、关不掉。 */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(28px + var(--safe));
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E")
}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ── 徽章：所有元信息统一用这个，别再用裸文字 ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;flex:none;
  padding:2px 8px;border-radius:999px;
  font-size:var(--fs-micro);font-weight:600;letter-spacing:.4px;line-height:1.7;
  background:rgba(255,255,255,.06);color:var(--muted);white-space:nowrap;
}
.badge.mood{
  color:var(--mc);background:color-mix(in srgb,var(--mc) 14%,transparent);
}
.badge.solid{background:var(--lime);color:#0d1108}

/* 顶栏 */
.bar{
  position:sticky;top:0;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 20px;background:color-mix(in srgb,var(--ink) 90%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.wm{height:27px;width:104px;display:block;flex:none;--wm-ink:var(--text);--wm-line:var(--accent)}
.bar-actions{display:flex;align-items:center;gap:10px;flex:none}
.bar-btn{font-size:13.5px;color:var(--muted);padding:7px 0}
.bar-btn:active{color:var(--accent)}
.icon-btn{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;
  color:var(--muted);border:1px solid var(--line-2);line-height:1;flex:none;
}
.icon-btn:hover,.icon-btn:active{border-color:var(--accent);color:var(--accent)}

main{max-width:680px;margin:0 auto;padding:0 20px}

/* 屏 */
.screen{display:none;padding:26px 0 10px}
.screen.is-on{display:block}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.eyebrow{font-size:var(--fs-micro);letter-spacing:2.2px;color:var(--muted-2);display:flex;align-items:center;gap:8px;margin:0 0 12px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--lime);display:block;flex:none}
h1{font-family:var(--serif);font-weight:600;font-size:var(--fs-display);line-height:1.4;letter-spacing:-.6px;margin:0 0 12px}
h1 em{font-style:normal;color:var(--lime)}
.lead{color:var(--muted);font-size:var(--fs-body);margin:0 0 26px}

.lbl{display:flex;align-items:center;gap:6px;font-size:var(--fs-micro);letter-spacing:1.4px;
  color:var(--muted-2);margin:0;text-transform:uppercase}
.lbl:not(:first-child){margin-top:26px}

/* 图标：描边与颜色在这里统一给，会继承进 <use> 的 shadow tree */
.ic{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* 首屏 */
.hero-block{margin-bottom:4px}
.ekg-rule{width:100%;height:22px;display:block;margin:20px 0 2px;overflow:visible}
.ekg-rule path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;opacity:.7;stroke-dasharray:240 1400;animation:rule-scan 7s linear infinite}
@keyframes rule-scan{from{stroke-dashoffset:1640}to{stroke-dashoffset:0}}

#form{display:flex;flex-direction:column}
.field-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0 9px}
.field-head:first-child{margin-top:0}

textarea{
  width:100%;min-height:132px;resize:vertical;background:var(--panel);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:14px 15px;font-family:inherit;
  font-size:15.5px;line-height:1.75;
}
textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(205,245,111,.1)}
.counter{text-align:right;font-size:var(--fs-micro);color:var(--muted-2);margin-top:6px}

.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-size:var(--fs-meta);padding:7px 14px;border-radius:20px;border:1px solid var(--line-2);
  color:var(--muted);background:var(--panel-2);transition:border-color .18s,color .18s}
.chip:hover,.chip:active{border-color:var(--accent);color:var(--accent)}

.moods{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.mood{
  border:1px solid var(--line-2);border-radius:13px;background:var(--panel-2);
  padding:10px 3px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:border-color .2s,background .2s;
}
.mood .mi{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--mc) 16%,transparent);color:var(--mc);
  transition:background .2s;
}
.mood .mi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.mood b{font-size:11.5px;font-weight:600;white-space:nowrap;line-height:1.2}
.mood small{font-size:8.5px;letter-spacing:.6px;color:var(--muted-2);white-space:nowrap;line-height:1}
.mood.is-on{border-color:var(--mc);background:var(--panel-3);box-shadow:inset 0 -3px 0 var(--mc)}
.mood.is-on .mi{background:color-mix(in srgb,var(--mc) 30%,transparent)}

.durs{display:flex;gap:8px}
.dur{flex:1;border:1px solid var(--line-2);border-radius:12px;background:var(--panel-2);padding:12px 6px;text-align:center;font-size:14px}
.dur.is-on{border-color:var(--lime);background:var(--panel-3);color:var(--lime)}

.cta{
  width:100%;margin-top:28px;padding:17px;border-radius:var(--r-md);background:var(--lime);color:#0d1108;
  font-size:16.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;
}
.cta:active{background:#dcff8c}
.cta .ic{width:17px;height:17px;stroke-width:2.2}
.cta[disabled]{background:var(--line-2);color:var(--muted-2);cursor:default}
.ghost-btn{
  width:100%;margin-top:16px;padding:15px;border-radius:var(--r-md);border:1px solid var(--line-2);
  color:var(--muted);font-size:var(--fs-body);
}
.ghost-btn:active{border-color:var(--lime);color:var(--lime)}
.fine{font-size:11.5px;color:var(--muted-2);margin:12px 0 0}
.center{text-align:center}

/* 生成中 */
.stages{list-style:none;margin:22px 0;padding:0;display:flex;flex-direction:column;gap:16px}
.stages li{display:flex;gap:12px;align-items:flex-start}
.stages .si{
  width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:11px;border:1px solid var(--line-2);color:var(--muted-2);transition:.3s;
}
.stages li.done .si{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.stages li.now .si{border-color:var(--accent);color:var(--accent);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(205,245,111,.5)}50%{box-shadow:0 0 0 8px rgba(205,245,111,0)}}
.stages .tx b{display:block;font-size:15px;font-weight:500}
.stages li.todo .tx b{color:var(--muted-2)}
.stages .tx small{font-size:var(--fs-meta);color:var(--muted-2);line-height:1.5}

.ekg{width:100%;height:56px;display:block;margin:6px 0 0;overflow:visible}
.ekg path{fill:none;stroke:var(--lime);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(205,245,111,.45));stroke-dasharray:190 1400;animation:scan 3.6s linear infinite}
@keyframes scan{from{stroke-dashoffset:1590}to{stroke-dashoffset:0}}

.progress{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin:18px 0 0}
.progress i{display:block;height:100%;width:6%;background:var(--lime);border-radius:4px;transition:width .6s ease}

.lyric-box{
  margin-top:24px;padding:20px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);
  font-family:var(--serif);font-size:var(--fs-body);line-height:1.95;color:var(--muted);
  word-break:break-word;max-height:62vh;overflow-y:auto;
}
.lyric-box .sec{display:block;color:var(--lime);font-family:var(--sans);font-size:var(--fs-micro);
  letter-spacing:1.8px;margin:18px 0 6px}
.lyric-box .sec:first-child{margin-top:0}
.lyric-box .ln{display:block;opacity:.6;transition:color .35s, opacity .35s}
.lyric-box .ln.past{opacity:.36}
.lyric-box .ln.on{color:var(--text);opacity:1;text-shadow:0 0 20px rgba(205,245,111,.22)}
.lyric-box .gap{display:block;height:9px}

/* ── 封面：优先用上游返回的真实 AI 封面图，没有才退回手绘 ── */
.cover{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--panel-2)}
.cover-art{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.cover-fallback{
  padding:16px;display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(145deg,var(--mc,var(--warm)),rgba(10,12,9,.72));
}
.cover-top,.cover-bot{display:flex;justify-content:space-between;font-size:9.5px;font-weight:700;letter-spacing:1.3px;color:#101408;line-height:1.35}
.disc{
  width:56%;aspect-ratio:1;margin:4px auto;border-radius:50%;display:grid;place-items:center;
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),
             radial-gradient(circle at 44% 36%,#2b3225,#0b0e08 64%);
  box-shadow:inset 0 0 0 1px #343c2d,inset 0 0 40px rgba(0,0,0,.9);
}
.disc.spin{animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.label{width:36%;aspect-ratio:1;border-radius:50%;display:grid;place-content:center;gap:2px;text-align:center;
  background:radial-gradient(circle at 36% 30%,var(--mc,var(--warm)),var(--mc,var(--warm)) 52%,rgba(0,0,0,.42));color:#101408}
.label span{font-size:8px;font-weight:700}.label b{font-size:11px;line-height:1}

.song-title{font-family:var(--serif);font-size:var(--fs-song);font-weight:700;letter-spacing:-.6px;margin:22px 0 0;line-height:1.3}
.song-sub{font-size:var(--fs-meta);color:var(--muted-2);margin:7px 0 0}
.facts{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}

/* ── 波形进度条：可点、可拖、可键盘操作 ── */
.scrub-wrap{margin:22px 0 4px}
.scrub{position:relative;height:58px;cursor:pointer;touch-action:none;border-radius:8px}
.scrub:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
.scrub.dragging{cursor:grabbing}
.bars{position:absolute;inset:0;display:flex;align-items:center;gap:2px;pointer-events:none}
.bars i{flex:1;min-width:2px;background:var(--line-2);border-radius:1.5px}
.bars.top{clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
.bars.top i{background:var(--lime)}
.bars.loading i,.scrub.loading .bars i{animation:breathe 1.2s ease-in-out infinite}
.scrub-tip{
  position:absolute;top:-28px;transform:translateX(-50%);background:var(--panel-3);
  border:1px solid var(--line-2);border-radius:7px;padding:3px 8px;font-size:11px;
  color:var(--text);pointer-events:none;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.times{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;
  font-size:11.5px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.cue{font-size:11px;color:var(--muted-2);text-align:center;flex:1;transition:opacity .5s}
.cue.gone{opacity:0}

.transport{display:flex;align-items:center;justify-content:center;gap:20px;margin:16px 0 6px}
.play{
  width:64px;height:64px;border-radius:50%;background:var(--lime);color:#0d1108;flex:none;
  display:grid;place-items:center;font-size:20px;transition:transform .15s, background .2s;
}
.play:active{transform:scale(.93)}
.play:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.play.loading{background:var(--panel-3);color:var(--lime);animation:breathe 1.1s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
.skip{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);color:var(--muted);
  display:grid;place-items:center;font-size:11.5px;flex:none;
}
.skip:active{border-color:var(--lime);color:var(--lime)}
.skip:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

.vers{display:flex;gap:8px}
.ver{flex:1;border:1px solid var(--line-2);border-radius:11px;background:var(--panel-2);padding:11px 4px;text-align:center;font-size:13px;color:var(--muted)}
.ver.is-on{border-color:var(--lime);color:var(--lime);background:rgba(205,245,111,.07)}
.ver[disabled]{opacity:.35}

.acts{display:flex;gap:9px;margin-top:26px}
.act{
  flex:1;border:1px solid var(--line-2);border-radius:12px;background:var(--panel-2);
  padding:13px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:12px;color:var(--muted);transition:border-color .18s,color .18s;
}
.act .ic{width:17px;height:17px;color:var(--accent);stroke-width:2.1}
.act:hover{border-color:var(--accent)}
.act[disabled]{opacity:.4}

/* ── 我的专辑 ── */
.album-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.album-head h1{margin-bottom:4px}
.album-stats{display:flex;gap:18px;flex:none;padding-bottom:10px}
.album-stats span{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.album-stats b{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--lime);font-variant-numeric:tabular-nums}
.album-stats small{font-size:10px;color:var(--muted-2);letter-spacing:1.2px}
#album-lead{margin-bottom:20px}

.album-list{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.track{
  position:relative;display:flex;gap:14px;padding:12px;border-radius:var(--r-lg);
  border:1px solid transparent;background:var(--panel);
  transition:border-color .2s, background .2s;
}
.track:hover{border-color:var(--line-2);background:var(--panel-2)}
.track.is-current{border-color:var(--lime);background:var(--panel-2)}
.track-cover{
  position:relative;width:84px;height:84px;border-radius:var(--r-md);flex:none;overflow:hidden;
  background:linear-gradient(140deg,var(--mc,var(--warm)),rgba(10,12,9,.78));
  display:grid;place-items:center;
}
.track-cover img{width:100%;height:100%;object-fit:cover;display:block}
.track-cover .ph{font-size:22px;color:#101408;opacity:.75}
.track-play{
  position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:rgba(10,12,9,.52);opacity:0;transition:opacity .18s;
}
.track-play .ic{width:20px;height:20px;stroke-width:2.2}
.track:hover .track-play,.track:focus-within .track-play{opacity:1}
@media(hover:none){.track-play{opacity:1;background:rgba(10,12,9,.42)}}
.track-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding:3px 0}
.track-top{display:flex;align-items:center;gap:8px;min-width:0}
.track-name{
  font-size:var(--fs-title);font-weight:600;letter-spacing:-.3px;margin:0;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.track-more{
  width:32px;height:32px;border-radius:50%;flex:none;color:var(--muted-2);
  display:grid;place-items:center;
}
.track-more .ic{width:16px;height:16px}
.track-more:hover{background:rgba(255,255,255,.08);color:var(--text)}
.track-meta{font-size:var(--fs-micro);color:var(--muted-2);margin:0;letter-spacing:.3px;font-variant-numeric:tabular-nums}
.track-lyric{
  font-size:var(--fs-meta);color:var(--muted-2);margin:0;opacity:.78;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.track-menu{
  position:absolute;right:12px;top:48px;z-index:30;min-width:152px;padding:5px;
  background:var(--panel-3);border:1px solid var(--line-2);border-radius:var(--r-md);
  box-shadow:0 22px 44px -18px #000;
}
.track-menu button{display:block;width:100%;text-align:left;padding:10px 13px;border-radius:9px;font-size:13.5px}
.track-menu button:hover{background:rgba(255,255,255,.07)}
.track-menu button.danger{color:#ffb3c0}

/* ── 空状态 ── */
.empty{
  border:1px dashed var(--line-2);border-radius:var(--r-lg);padding:44px 24px;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
}
.empty-icon{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--muted-2);font-size:22px;
}
.empty b{font-size:16px}
.empty p{margin:0;font-size:var(--fs-body);color:var(--muted-2);max-width:20em}
.empty .cta{width:auto;margin-top:16px;padding:13px 28px;font-size:15px}

/* ── 关于页 ── */
.steps{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.step-card{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);
  padding:15px 17px;display:grid;grid-template-columns:auto 1fr;gap:3px 14px;align-items:center;
}
.step-card .si{
  grid-row:span 2;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);
}
.step-card .si .ic{width:18px;height:18px}
.step-card b{font-size:15px}
.step-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}

.note{border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:var(--panel);margin-bottom:14px}
.note h4{
  margin:0 0 10px;font-size:14.5px;font-weight:600;color:var(--text);
  display:flex;align-items:center;gap:8px;
}
.note h4 .ic{width:16px;height:16px;color:var(--accent)}
.note p{margin:0 0 12px;font-size:var(--fs-body);color:var(--muted);line-height:1.75}
.note p:last-child{margin:0}
.note b{color:var(--text);font-weight:600}

/* ── 出错 / 额度用尽：正式面板，不是报错 toast ── */
.fail{
  border:1px solid color-mix(in srgb,var(--danger) 32%,transparent);
  background:color-mix(in srgb,var(--danger) 7%,transparent);
  border-radius:var(--r-md);padding:26px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:20px;
}
.fail-ic{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;margin-bottom:3px;
  background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger);
}
.fail-ic .ic{width:22px;height:22px}
.fail b{font-size:16px}
.fail p{margin:0;font-size:var(--fs-body);color:var(--muted);max-width:24em;line-height:1.7}
.fail-acts{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:13px}
.fail-acts .cta,.fail-acts .ghost-btn{margin-top:0}

footer{
  max-width:680px;margin:40px auto 0;padding:22px 20px 0;border-top:1px solid var(--line);
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:var(--fs-meta);color:var(--muted-2);
}
footer .wm{height:24px;width:93px;--wm-ink:var(--muted);--wm-line:var(--muted-2)}
footer button{font-size:var(--fs-meta);color:var(--muted-2);margin-left:auto}

/* ── 字段头：标签 + 次要按钮 ── */
.field-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.field-head .lbl{margin:0}
.mini-btn{
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--fs-micro);letter-spacing:.4px;color:var(--accent);padding:5px 12px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);white-space:nowrap;flex:none;
  transition:background .18s;
}
.mini-btn:hover,.mini-btn:active{background:color-mix(in srgb,var(--accent) 13%,transparent)}

/* ── 皮肤面板 ── */
.sheet{
  position:fixed;inset:0;z-index:1000;display:grid;align-items:end;justify-items:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(6px);
}
.sheet-card{
  width:100%;max-width:680px;background:var(--panel);border-top:1px solid var(--line);
  border-radius:22px 22px 0 0;padding:20px 20px calc(24px + var(--safe));
  animation:sheet-in .3s cubic-bezier(.22,.7,.3,1);
}
@keyframes sheet-in{from{transform:translateY(100%)}to{transform:none}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sheet-head b{font-size:16px}
.sheet-head button{width:32px;height:32px;border-radius:50%;color:var(--muted-2);font-size:20px;line-height:1}
.skins{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.skin{
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px 6px;background:var(--panel-2);
  display:flex;flex-direction:column;align-items:center;gap:9px;
}
.skin.is-on{border-color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.skin .dot{width:28px;height:28px;border-radius:50%;border:1px solid color-mix(in srgb,var(--text) 18%,transparent)}
.skin b{font-size:11.5px;font-weight:500;color:var(--text)}
.skin small{font-size:9.5px;color:var(--muted-2);letter-spacing:.6px}

/* ── 切屏转场：用浏览器原生的 View Transitions，不需要框架 ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .18s ease both}
::view-transition-new(root){animation:vt-in .26s cubic-bezier(.22,.7,.3,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:calc(26px + var(--safe));transform:translate(-50%,24px);
  background:var(--panel-3);border:1px solid var(--line-2);color:var(--text);border-radius:12px;
  padding:12px 18px;font-size:13.5px;max-width:88vw;text-align:center;opacity:0;pointer-events:none;
  transition:.28s;z-index:9999;box-shadow:0 20px 40px -18px #000;
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.bad{border-color:rgba(255,125,146,.4);color:#ffd7dd}

@media(min-width:720px){
  .track-cover{width:96px;height:96px}
  .wm{height:30px;width:116px}
}