:root{
  --bg:#161230;
  --panel:#221C44;
  --line:#3A3266;
  --ink:#F5ECDC;
  --dim:#A99AC8;
  --gold:#F0C65E;
  --teal:#5AB6C8;
  --red:#D9473C;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#0F0C20}
body{
  background:radial-gradient(120% 90% at 50% 0%, #2A2456 0%, #161230 62%, #0D0A1C 100%);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.app{height:100%;display:flex;flex-direction:column}
.stage{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:14px 14px 6px;
}
#c{
  height:100%;width:auto;max-width:100%;
  aspect-ratio:9/16;
  border-radius:8px;
  box-shadow:0 24px 70px rgba(8,4,24,.80), 0 0 0 1px rgba(240,198,94,.22), 0 0 44px rgba(90,182,200,.10);
  background:#1A1434;
  display:block;
}
.bar{
  height:64px;flex:0 0 64px;
  display:flex;align-items:center;gap:14px;
  padding:0 16px;
  background:linear-gradient(180deg,rgba(34,28,68,.72),rgba(22,18,48,.98));
  border-top:1px solid var(--line);
}
.bar-left,.bar-right{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.bar-mid{flex:1;min-width:110px;display:flex;align-items:center}
.btn{
  appearance:none;border:1px solid #4A4278;background:#2A2450;color:var(--ink);
  height:32px;padding:0 12px;border-radius:6px;cursor:pointer;
  font-size:13px;letter-spacing:.4px;font-family:inherit;
  transition:.15s background,.15s border-color,.15s color;
}
.btn:hover{background:#3A3266;border-color:#6A5E9A}
.btn.primary{background:#3A305E;border-color:var(--gold);color:#FFE9B0}
.btn.primary:hover{background:#4A3E72}
.eps{display:flex;gap:4px;margin-left:2px}
.ep{
  appearance:none;border:1px solid #3A3266;background:#201A40;color:#B9AEDA;
  width:28px;height:28px;border-radius:5px;cursor:pointer;font-size:12px;font-family:inherit;
  letter-spacing:1px;padding:0;
}
.ep.all{width:46px}
.ep:hover{border-color:#6A5E9A;color:#F5ECDC}
.ep.on{background:#3E3466;border-color:var(--gold);color:#FFE9B0}
.time{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;letter-spacing:.5px;min-width:104px;text-align:right}
.shotname{font-size:12px;color:#C6BAE0;letter-spacing:.5px;min-width:120px;text-align:right}
.ep-name{font-size:12px;color:var(--gold);letter-spacing:2px;min-width:48px}
.chk{font-size:12px;color:var(--dim);display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.chk input{accent-color:var(--gold)}
.sel{
  height:32px;background:#221C44;color:#E3D9F2;border:1px solid #3A3266;border-radius:6px;
  font-size:12px;font-family:inherit;padding:0 7px;outline:none;
}

.track{
  position:relative;height:6px;width:100%;border-radius:3px;
  background:#302A58;cursor:pointer;
}
.track-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--teal),var(--gold))}
.track-head{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:#FFF6DE;box-shadow:0 0 0 2px #1A1434,0 0 12px rgba(240,198,94,.7);
  pointer-events:none}
.track-ticks{position:absolute;inset:0;pointer-events:none}
.tick{position:absolute;top:-2px;width:1px;height:10px;background:#4A4278;opacity:.9}
.tick.major{background:#7A6AA8;height:15px;top:-4px}
.tick.ep{background:var(--gold);height:18px;top:-6px;width:2px}

.boot{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:#0F0C20;color:#A99AC8;font-size:13px;letter-spacing:3px;z-index:9;
  transition:opacity .5s;
}
.boot.hide{opacity:0;pointer-events:none}

/* 逐帧截图 / 成片预览模式：隐藏控件，画布按 9:16 完整显示 */
body.raw{overflow:hidden}
html:has(body.raw){background:#0F0C20}
body.raw .bar{display:none}
body.raw .stage{padding:0;display:flex;align-items:center;justify-content:center;background:#0F0C20}
body.raw #c{height:100vh;width:auto;max-width:none;display:block;border-radius:0;box-shadow:none;aspect-ratio:9/16}

@media (max-width:1180px){
  .shotname{display:none}
  #expMode{display:none}
}