:root{
  --bg:#0a0d16;
  --bg2:#0d1120;
  --panel:#111726;
  --panel2:#151d31;
  --line:#232c44;
  --line2:#2c3753;
  --accent:#e9edf6;
  --accent-hi:#ffffff;
  --accent-dim:rgba(233,237,246,.07);
  --blue:#6d85c9;
  --blue-dim:rgba(109,133,201,.25);
  --text:#e9edf6;
  --text2:#c3cadd;
  --muted:#8a93a8;
  --muted2:#5b6580;
  --radius:8px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:-apple-system,"PingFang SC","Helvetica Neue","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  display:flex;flex-direction:column;
  overflow:hidden;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg2);}
::-webkit-scrollbar-thumb{background:#232c44;border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:#2c3753;}

.micro{
  font-size:11px;letter-spacing:.12em;color:var(--muted2);font-weight:600;
  text-transform:uppercase;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes noteIn{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
@keyframes ringRotate{to{transform:rotate(360deg);}}
@keyframes eq{0%,100%{height:6px;opacity:.45;}50%{height:26px;opacity:1;}}
@keyframes dotPulse{50%{opacity:.3;}}
@keyframes popIn{from{opacity:0;transform:scale(.96) translateY(10px);}to{opacity:1;transform:none;}}

/* ---------------- 全屏开场动效 ---------------- */
.intro{
  position:fixed;inset:0;z-index:999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  transition:opacity .5s ease,visibility .5s;cursor:pointer;
}
.intro.done{opacity:0;visibility:hidden;pointer-events:none;}
.intro-logo{
  width:64px;height:64px;border-radius:14px;background:#e9edf6;color:#0a0d16;
  display:flex;align-items:center;justify-content:center;font-size:34px;
  animation:introLogo .8s cubic-bezier(.2,.9,.3,1.3) both;
}
.intro-logo svg{width:100%;height:100%;display:block;}
@keyframes introLogo{from{opacity:0;transform:scale(.5) rotate(-8deg);}to{opacity:1;transform:none;}}
.intro-wave{width:240px;height:60px;}
.intro-wave path{
  fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400;
  animation:drawLine 1.1s ease .2s forwards;
}
@keyframes drawLine{to{stroke-dashoffset:0;}}
.intro-brand{
  font-size:17px;font-weight:700;letter-spacing:.28em;color:var(--text);
  opacity:0;animation:fadeUp .5s ease .65s forwards;
}
.intro-bar{width:160px;height:2px;background:var(--line2);overflow:hidden;}
.intro-bar::after{
  content:"";display:block;height:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  animation:introBar .9s ease .45s forwards;
}
@keyframes introBar{to{transform:scaleX(1);}}

/* ---------------- 顶栏 ---------------- */
.topbar{
  height:54px;flex:0 0 auto;display:flex;align-items:center;gap:24px;
  background:var(--bg2);border-bottom:1px solid var(--line);padding:0 18px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:210px;}
.brand .logo{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease;
}
.brand .logo svg{width:100%;height:100%;display:block;}
.brand:hover .logo{transform:scale(1.08) rotate(-4deg);}
.brand-name{font-size:15px;font-weight:700;letter-spacing:.02em;}
.steps{display:flex;gap:4px;flex:1;justify-content:center;}
.step{
  display:flex;align-items:baseline;gap:7px;padding:7px 14px;border-radius:6px;
  color:var(--muted);font-size:13px;transition:.2s;position:relative;
}
.step::after{
  content:"";position:absolute;left:14px;right:14px;bottom:1px;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.step i{font-style:normal;font-size:10px;letter-spacing:.08em;color:var(--muted2);}
.step:hover{color:var(--text2);background:var(--panel);}
.step.on{color:#fff;background:var(--accent-dim);}
.step.on::after{transform:scaleX(1);}
.step.on i{color:var(--text2);}
.step.done i{color:var(--muted);}
.step:disabled{opacity:.35;cursor:not-allowed;}
.step:disabled:hover{background:none;color:var(--muted);}
.top-right{min-width:150px;text-align:right;}
.engine{
  font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px;
}
.engine .dot{
  width:6px;height:6px;border-radius:50%;background:var(--text2);
  animation:dotPulse 2.2s ease-in-out infinite;
}
.engine.off .dot{background:var(--muted2);animation:none;}

/* ---------------- 布局 ---------------- */
.app{flex:1;display:flex;min-height:0;}
.sidebar{
  width:236px;flex:0 0 auto;background:var(--bg2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;
}
.side-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 10px;
}
.proj-list{list-style:none;overflow-y:auto;flex:1;padding:0 10px 14px;}
.proj-list .empty{
  color:var(--muted2);font-size:12px;line-height:1.9;text-align:center;
  padding:30px 10px;
}
.proj-item{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;
  cursor:pointer;border:1px solid transparent;margin-bottom:2px;position:relative;
  transition:background .18s,transform .18s,border-color .18s;
  animation:fadeUp .28s ease both;
}
.proj-item:hover{background:var(--panel);transform:translateX(3px);}
.proj-item.on{background:var(--accent-dim);border-color:var(--line2);}
.proj-item.on::before{
  content:"";position:absolute;left:-10px;top:20%;bottom:20%;width:2px;
  background:var(--accent);border-radius:1px;
}
.proj-item img{
  width:36px;height:36px;border-radius:4px;border:1px solid var(--line2);
  flex:0 0 auto;background:#0b101f;
}
.proj-item .meta{min-width:0;}
.proj-item b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.proj-item span{font-size:11px;color:var(--muted);}

.workspace{
  flex:1;min-width:0;overflow-y:auto;padding:26px 34px 40px;position:relative;
}
.screen{display:none;max-width:980px;margin:0 auto;animation:fade .25s ease;}
.screen.active{display:block;}
.screen.active>*{animation:fadeUp .3s ease both;}
.screen.active>*:nth-child(1){animation-delay:0s;}
.screen.active>*:nth-child(2){animation-delay:.05s;}
.screen.active>*:nth-child(3){animation-delay:.1s;}
.screen.active>*:nth-child(4){animation-delay:.15s;}
.screen.active>*:nth-child(5){animation-delay:.2s;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.screen-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px;}
.screen-head h1{font-size:24px;font-weight:700;margin-top:6px;letter-spacing:.01em;}
.lead{color:var(--muted);font-size:13px;margin:-8px 0 16px;line-height:1.7;}
.screen-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;flex-wrap:wrap;
}
.hint-note{color:var(--muted2);font-size:12px;}
.mini-stats{
  font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:6px;
  padding:6px 12px;font-variant-numeric:tabular-nums;
}

/* ---------------- 面板 / 按钮 ---------------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 22px;border-radius:6px;font-size:13.5px;font-weight:600;
  background:var(--accent);color:#0a0d16;border:1px solid transparent;
  transition:background .15s,transform .15s,box-shadow .2s,border-color .15s;
}
.btn:hover{background:var(--accent-hi);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.35);}
.btn:active{transform:scale(.98);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.btn.ghost{
  background:transparent;border-color:var(--line2);color:var(--text2);font-weight:500;
  box-shadow:none;
}
.btn.ghost:hover{background:var(--panel2);border-color:var(--muted);color:#fff;transform:translateY(-1px);}
.btn.sm{padding:5px 10px;font-size:12px;border-radius:5px;}
.btn.big{padding:12px 34px;font-size:14.5px;}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;}
.linklike{color:var(--text2);font-size:12.5px;text-decoration:none;}
.linklike:hover{text-decoration:underline;}

/* ---------------- 01 录制 ---------------- */
.timer{
  font-size:22px;font-variant-numeric:tabular-nums;color:var(--text);letter-spacing:.04em;
}
.timer span{font-size:13px;color:var(--muted2);}
.wave-panel{position:relative;height:186px;overflow:hidden;background:var(--bg2);transition:border-color .25s;}
.wave-panel:hover{border-color:var(--line2);}
#wave{display:block;width:100%;height:100%;}
.wave-empty{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted2);font-size:13px;pointer-events:none;
}
.record-row{display:flex;align-items:center;gap:26px;margin-top:22px;}
.rec-btn{
  width:92px;height:92px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--line2);background:var(--panel);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .2s,box-shadow .25s,transform .15s;position:relative;
}
.rec-btn:hover{border-color:var(--accent);transform:scale(1.04);}
.rec-btn:active{transform:scale(.96);}
.rec-btn::after{
  content:"";position:absolute;inset:-11px;border-radius:50%;
  border:1px dashed rgba(233,237,246,.4);opacity:0;transition:opacity .3s;
}
.rec-btn.rec::after{opacity:1;animation:ringRotate 10s linear infinite;}
.rec-core{
  width:38px;height:38px;border-radius:50%;background:var(--accent);
  transition:border-radius .25s,background .25s,transform .25s;
}
.rec-btn:hover .rec-core{transform:scale(1.08);}
.rec-btn.rec{border-color:#fff;box-shadow:0 0 0 6px rgba(233,237,246,.08);}
.rec-btn.rec .rec-core{border-radius:6px;background:#0a0d16;animation:pulse 1.2s infinite;}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(233,237,246,.16);}}
.record-meta b{font-size:15px;}
.record-meta p{color:var(--muted);font-size:12.5px;margin:6px 0 10px;line-height:1.7;max-width:520px;}

/* ---------------- 02 旋律（钢琴卷帘） ---------------- */
.roll-panel{padding:14px;}
.roll{position:relative;height:340px;user-select:none;touch-action:none;}
.roll-ruler{
  height:22px;display:flex;justify-content:space-between;align-items:center;
  color:var(--muted2);font-size:10px;padding:0 4px;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.roll-body{position:absolute;top:22px;left:0;right:0;bottom:0;}
.roll-rows{position:absolute;inset:0;display:flex;flex-direction:column;}
.rrow{
  flex:1;border-bottom:1px solid #1a2136;position:relative;
  background:linear-gradient(to right,transparent 0,transparent calc(100%/32 - 1px),#1a2136 calc(100%/32 - 1px),#1a2136 calc(100%/32));
}
.rrow.black{background:linear-gradient(to right,transparent 0,transparent calc(100%/32 - 1px),#1a2136 calc(100%/32 - 1px),#1a2136 calc(100%/32)),rgba(5,8,16,.6);}
.rrow:last-child{border-bottom:none;}
.plabel{
  position:absolute;left:3px;top:50%;transform:translateY(-50%);
  font-size:9px;color:var(--muted2);pointer-events:none;z-index:1;
}
.roll-notes{position:absolute;inset:0;cursor:crosshair;}
.note{
  position:absolute;background:var(--blue-dim);border:1px solid var(--blue);
  border-radius:3px;cursor:grab;min-width:3px;animation:noteIn .18s ease both;
  transition:border-color .15s,background .15s;
}
.note:hover{border-color:#a9bce8;background:rgba(109,133,201,.4);}
.note:active{cursor:grabbing;}
.roll-legend{
  display:flex;justify-content:space-between;color:var(--muted2);
  font-size:11px;margin-top:8px;padding:0 4px;
}

/* ---------------- 03 风格 ---------------- */
.ai-suggest{
  font-size:12px;color:var(--text2);background:var(--accent-dim);
  border:1px solid var(--line2);border-radius:6px;padding:7px 14px;
  font-variant-numeric:tabular-nums;
}
.field{margin-bottom:22px;}
.field>.micro{display:block;margin-bottom:10px;}
.chips{display:flex;gap:8px;flex-wrap:wrap;}
.chips button{
  padding:8px 18px;border-radius:999px;border:1px solid var(--line2);
  color:var(--muted);font-size:13px;position:relative;
  transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.chips button:hover{color:#fff;border-color:var(--muted);transform:translateY(-1px);}
.chips button.on{background:var(--accent);border-color:var(--accent);color:#0a0d16;font-weight:600;}
.chips button .ai{
  position:absolute;top:-8px;right:-6px;font-size:9px;font-weight:700;
  background:var(--muted);color:#0d1120;border-radius:999px;padding:1px 6px;letter-spacing:.05em;
}
.style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.style-grid button{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:16px 12px;text-align:left;
  transition:border-color .18s,background .18s,transform .18s,box-shadow .18s;
}
.style-grid button:hover{border-color:var(--line2);background:var(--panel2);transform:translateY(-2px);}
.style-grid button.on{border-color:var(--muted);background:var(--accent-dim);
  box-shadow:inset 0 -2px 0 var(--accent);}
.style-grid b{display:block;font-size:20px;color:var(--text2);margin-bottom:8px;font-weight:400;}
.style-grid span{display:block;font-size:14px;font-weight:600;margin-bottom:4px;}

/* ---------------- 04 生成中 ---------------- */
.center-screen{display:none;}
.center-screen.active{
  display:flex;align-items:center;justify-content:center;min-height:60vh;
}
.gen-box{text-align:center;max-width:340px;}
.gen-box h1{font-size:20px;margin:26px 0 10px;}
.gen-box p{color:var(--muted);font-size:13px;height:20px;}
.spinner{
  width:46px;height:46px;border-radius:50%;margin:0 auto;
  border:3px solid var(--line2);border-top-color:#fff;
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.eq{display:flex;gap:7px;justify-content:center;margin-top:24px;height:26px;align-items:center;}
.eq i{
  width:4px;height:10px;border-radius:2px;background:var(--accent);
  animation:eq 1.1s ease-in-out infinite;
}
.eq i:nth-child(2){animation-delay:.15s;}
.eq i:nth-child(3){animation-delay:.3s;}
.eq i:nth-child(4){animation-delay:.45s;}
.eq i:nth-child(5){animation-delay:.6s;}
.eq i:nth-child(6){animation-delay:.75s;}
.progress{
  margin-top:26px;height:4px;background:#161d31;border-radius:2px;overflow:hidden;
}
.progress i{
  display:block;height:100%;width:0;background:var(--accent);
  transition:width .8s ease;border-radius:2px;
}

/* ---------------- 05 成品 ---------------- */
.result-grid{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:start;}
.cover-box img{
  width:100%;display:block;border-radius:var(--radius);border:1px solid var(--line);
  background:#0b101f;
}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.tags span{
  font-size:11px;color:var(--muted);border:1px solid var(--line2);
  border-radius:999px;padding:3px 11px;
}
.result-main h2{font-size:22px;margin-bottom:14px;}
.player{
  display:flex;align-items:center;gap:14px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:20px;
}
.play-btn{
  width:44px;height:44px;flex:0 0 auto;border-radius:6px;background:var(--accent);
  color:#0a0d16;font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .15s,box-shadow .2s;
}
.play-btn:hover{background:#fff;transform:scale(1.05);box-shadow:0 4px 14px rgba(0,0,0,.4);}
.play-btn:active{transform:scale(.96);}
.player-body{flex:1;min-width:0;}
.progress-track{
  height:4px;background:#161d31;border-radius:2px;cursor:pointer;position:relative;
  transition:height .18s;
}
.progress-track:hover{height:7px;}
.progress-track i{
  position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);border-radius:2px;
}
.player-time{
  display:flex;justify-content:space-between;margin-top:7px;
  font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
}
.lyric-box{
  min-height:92px;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:14px 16px;font-size:13.5px;line-height:2;white-space:pre-line;outline:none;
  color:var(--text2);transition:border-color .2s,box-shadow .2s;
}
.lyric-box:focus{border-color:var(--muted);box-shadow:0 0 0 3px rgba(233,237,246,.07);}

/* ---------------- 侧栏 / 状态栏 ---------------- */
.statusbar{
  height:30px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  background:var(--bg2);border-top:1px solid var(--line);padding:0 16px;
  font-size:11.5px;color:var(--muted);
}
.statusbar .right{color:var(--muted2);font-variant-numeric:tabular-nums;}

/* ---------------- 分享弹窗 ---------------- */
.modal-mask{
  position:fixed;inset:0;background:rgba(4,6,12,.72);display:none;
  align-items:center;justify-content:center;z-index:100;padding:24px;
  backdrop-filter:blur(4px);
}
.modal-mask.show{display:flex;}
.modal{
  width:600px;max-width:94vw;max-height:92vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line2);border-radius:12px;padding:18px;
  animation:popIn .24s cubic-bezier(.2,.9,.3,1.2);
}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.close{color:var(--muted);font-size:15px;padding:4px 8px;border-radius:4px;}
.close:hover{color:#fff;background:var(--panel2);}
.modal canvas{width:100%;display:block;border-radius:8px;border:1px solid var(--line);}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;margin-top:14px;}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed;left:50%;bottom:46px;transform:translateX(-50%) translateY(12px);
  background:#0f1424;border:1px solid var(--line2);color:var(--text);
  font-size:12.5px;padding:9px 20px;border-radius:999px;opacity:0;
  pointer-events:none;transition:.22s;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.5);
  max-width:80vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------------- 响应式 ---------------- */
@media (max-width:1020px){
  .sidebar{display:none;}
  .top-right{display:none;}
  .workspace{padding:20px 18px 32px;}
  .result-grid{grid-template-columns:1fr;}
  .cover-box{max-width:300px;}
  .style-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .topbar{gap:10px;padding:0 12px;}
  .brand{min-width:0;gap:8px;}
  .brand-name{font-size:13px;letter-spacing:.01em;white-space:nowrap;}
  .steps{gap:0;}
  .steps{flex:1;min-width:0;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;}
  .steps::-webkit-scrollbar{display:none;}
  .step{padding:6px 9px;gap:5px;flex:0 0 auto;white-space:nowrap;}
  .step i{display:none;}
  .workspace{padding:16px 14px 28px;}
  .screen-head{flex-direction:column;align-items:stretch;gap:10px;}
  .screen-head h1{font-size:20px;}
  .timer{font-size:18px;}
  .mini-stats{align-self:flex-start;}
  .ai-suggest{width:100%;}
  .wave-panel{height:150px;}
  .record-row{flex-direction:column;align-items:center;gap:14px;text-align:center;}
  .record-meta p{max-width:none;}
  .roll{height:280px;}
  .screen-foot{flex-direction:column;align-items:stretch;gap:10px;}
  .screen-foot .btn-group{justify-content:stretch;flex-wrap:wrap;}
  .screen-foot .btn-group .btn{flex:1 1 45%;}
  .result-grid{gap:16px;}
  .cover-box{max-width:none;}
  .player{padding:10px 12px;gap:10px;}
  .result-main .btn-group{flex-wrap:wrap;justify-content:stretch;}
  .result-main .btn-group .btn{flex:1 1 45%;}
  .modal{padding:12px;max-height:96vh;}
  .statusbar{font-size:10.5px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}