:root{
  --bg:#090b10;
  --panel:#0d1119ee;
  --line:#242b38;
  --text:#e8edf5;
  --muted:#8d98aa;
  --accent:#d6b36a;
  --accent2:#9cb8ff;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;color:var(--text);font-family:Inter,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
button,input,select{font:inherit}
button{
  color:var(--text);background:#151b25;border:1px solid #2b3444;border-radius:6px;
  padding:7px 10px;cursor:pointer
}
button:hover{background:#1c2431}
button.active,.preset.active,.bg-mode.active{border-color:var(--accent);box-shadow:0 0 0 1px #d6b36a55 inset}
#app{
  width:100vw;height:100vh;display:grid;grid-template-columns:310px 1fr 270px;gap:10px;
  padding:10px;background:#05070a
}
.panel{
  background:var(--panel);border:1px solid #222936;border-radius:10px;padding:13px;overflow:auto;
  box-shadow:0 12px 30px #0008
}
.brand{padding:2px 2px 10px;border-bottom:1px solid var(--line);margin-bottom:10px}
.brand-title{font-size:20px;font-weight:700;letter-spacing:.04em}
.brand-sub{font-size:12px;color:var(--muted);margin-top:3px}
section{padding:10px 0;border-bottom:1px solid var(--line)}
section:last-child{border-bottom:0}
h2{font-size:11px;letter-spacing:.16em;color:#b8c0cc;margin:0 0 10px}
label{display:block;margin:10px 0}
label>span{display:flex;justify-content:space-between;font-size:12px;color:#c7cfda;margin-bottom:5px}
input[type="range"]{width:100%}
input[type="file"]{font-size:11px;width:100%;color:#99a5b6}
.file-row{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:6px}
.file-row>span{display:block;margin:0}
.color-row{display:grid;grid-template-columns:1fr 54px;align-items:center;gap:10px}
.color-row>span{display:block;margin:0}
.color-row input{width:54px;height:28px;border:0;background:transparent}
.preset-grid,.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.transport{display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center;margin:9px 0}
.transport #playBtn{height:40px}
.time-wrap{min-width:0}
.time-wrap span{display:block;font-variant-numeric:tabular-nums;font-size:11px;color:#aeb8c7;margin-bottom:5px}
#seek{width:100%}
#stageWrap{position:relative;min-width:0;display:flex;flex-direction:column;gap:8px}
#stage{
  position:relative;flex:1;overflow:hidden;border:1px solid #202735;border-radius:10px;
  background:
    radial-gradient(circle at 50% 30%,#303949 0,#181e28 28%,#0c1016 72%),
    #0c1016;
}
#stage.bg-transparent{background:transparent}
#stage.bg-green{background:#00ff00}
#stage.bg-black{background:#000}
.safe-frame{
  position:absolute;inset:5%;border:1px dashed #ffffff16;pointer-events:none
}
#lyricLayer{
  position:absolute;left:50%;top:74%;transform:translate(-50%,-50%);
  width:76%;text-align:center;pointer-events:none
}
.lyric{
  position:absolute;left:50%;width:100%;transform:translateX(-50%);
  color:#fff;text-wrap:balance;line-height:1.35;letter-spacing:.04em;
  text-shadow:0 4px 18px #000,0 0 18px #fff2d2;
  opacity:0;will-change:transform,opacity,filter;
}
.lyric.current{font-weight:650}
.lyric.next{font-size:.55em;font-weight:450;top:54px;opacity:0}
.lyric.enter{
  animation:lyricEnter var(--fade-ms,900ms) cubic-bezier(.16,.84,.24,1) both
}
.lyric.exit{
  animation:lyricExit var(--fade-ms,900ms) cubic-bezier(.42,0,.58,1) both
}
@keyframes lyricEnter{
  from{opacity:0;transform:translate(-50%,var(--drift,18px)) scale(.985);filter:blur(4px)}
  to{opacity:1;transform:translate(-50%,0) scale(var(--scale-to,1.02));filter:blur(0)}
}
@keyframes lyricExit{
  from{opacity:1;transform:translate(-50%,0) scale(var(--scale-to,1.02));filter:blur(0)}
  to{opacity:0;transform:translate(-50%,calc(var(--drift,18px) * -0.6)) scale(1.025);filter:blur(2px)}
}
.stage-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  color:#8490a2;font-size:14px;letter-spacing:.04em
}
.bottom-bar{
  min-height:46px;border:1px solid #222936;border-radius:8px;background:#0d1119;
  display:flex;align-items:center;justify-content:space-between;padding:6px 8px
}
.bottom-bar .status{font-size:12px;color:#97a4b5}
.help,.shortcut{font-size:11px;line-height:1.6;color:#7f8a9b}
.debug-grid{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:12px;color:#98a4b4}
.debug-grid b{color:#e6ebf2;font-variant-numeric:tabular-nums}
.toggle{display:flex;align-items:center;gap:7px}
.toggle span{display:block;margin:0}
body.output-mode #app{
  display:block;padding:0;background:transparent
}
body.output-mode .panel,
body.output-mode .bottom-bar{display:none!important}
body.output-mode #stageWrap{width:100vw;height:100vh}
body.output-mode #stage{width:100vw;height:100vh;border:0;border-radius:0}
body.output-mode .safe-frame{display:none}
body.output-mode .stage-hint{display:none}
@media(max-width:1100px){
  #app{grid-template-columns:260px 1fr}
  .right-panel{display:none}
}