:root { color-scheme:dark; --bg:#0b0d12; --card:#151923; --line:#2a3040; --text:#f5f7fb; --muted:#aab2c4; --accent:#83e6c2; --danger:#ff9a9a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 20% 0,#172236 0,var(--bg) 45%); color:var(--text); font:16px/1.6 system-ui,-apple-system,sans-serif; }
.shell { width:min(900px,calc(100% - 32px)); margin:0 auto; padding:64px 0; }
.narrow { width:min(460px,calc(100% - 32px)); }
.page-header { position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
h1 { margin:.1em 0; font-size:clamp(2rem,7vw,4rem); line-height:1.05; letter-spacing:-.04em; }
.narrow h1 { font-size:2.4rem; }
.eyebrow { color:var(--accent); font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.lede,.muted,.notice { color:var(--muted); }
.card,.status { margin-top:28px; padding:24px; background:color-mix(in srgb,var(--card) 92%,transparent); border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 50px #0005; }
.phase-stepper { display:grid; grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr); align-items:center; margin-top:24px; }
.phase-step { display:flex; min-width:0; min-height:72px; padding:12px 16px; align-items:center; gap:12px; background:#10141d; color:var(--muted); border:1px solid var(--line); text-align:left; }
.phase-step:disabled { cursor:not-allowed; opacity:.48; }
.phase-step.is-available:not(.is-active) { cursor:pointer; opacity:1; }
.phase-step.is-active { background:color-mix(in srgb,var(--accent) 13%,#10141d); color:var(--text); border:1px solid var(--accent); }
.phase-step span:last-child,.phase-step strong,.phase-step small { display:block; min-width:0; }
.phase-step strong { line-height:1.3; }
.phase-step small { margin-top:2px; color:var(--muted); font-size:.75rem; font-weight:500; }
.phase-number { display:grid; width:34px; height:34px; flex:0 0 34px; place-items:center; background:#222a37; border:1px solid var(--line); border-radius:50%; color:var(--text); }
.phase-step.is-active .phase-number { background:var(--accent); color:#07110e; border-color:var(--accent); }
.phase-connector { height:2px; background:var(--line); }
label { display:block; margin-bottom:8px; font-weight:700; }
.input-row { display:grid; grid-template-columns:1fr auto; gap:12px; }
input,button,select { min-height:48px; border-radius:10px; border:1px solid var(--line); font:inherit; }
input { width:100%; padding:0 14px; background:#0e1118; color:var(--text); }
select { width:100%; padding:0 12px; background:#0e1118; color:var(--text); }
button { padding:0 20px; border:0; background:var(--accent); color:#07110e; font-weight:800; cursor:pointer; }
.primary-action { min-width:168px; text-align:center; }
button:focus-visible,input:focus-visible { outline:3px solid #fff; outline-offset:2px; }
button:disabled { cursor:wait; opacity:.5; }
.login-submit { display:block; min-width:160px; margin:24px auto 0; }
.secondary { background:#222a37; color:var(--text); border:1px solid var(--line); }
.compact { min-height:40px; margin-top:16px; white-space:nowrap; }
.notice { margin:14px 0 0; font-size:.88rem; }
.error { color:var(--danger); }
.success { border-color:var(--accent); }
.progress-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.progress-head strong { color:var(--accent); font-variant-numeric:tabular-nums; }
.progress-track { height:10px; margin-top:12px; overflow:hidden; background:#0e1118; border:1px solid var(--line); border-radius:999px; }
.progress-track span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),#b4f4dd); border-radius:inherit; transition:width .25s ease; }
.processing-status { display:flex; align-items:center; gap:14px; }
.processing-status > span:last-child { display:grid; }
.processing-status small { margin-top:2px; color:var(--muted); }
.processing-spinner { width:28px; height:28px; flex:0 0 28px; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:processing-spin .8s linear infinite; }
@keyframes processing-spin { to { transform:rotate(360deg); } }
.hidden { display:none; }
.song-head { display:grid; grid-template-columns:160px 1fr; gap:20px; align-items:center; }
.song-head img { display:block; width:160px; aspect-ratio:16/9; object-fit:cover; border-radius:12px; }
h2 { margin:0; line-height:1.25; }
.song-head p { margin:.35rem 0; }
.key-summary { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:24px 0 8px; }
.key-summary div { padding:16px; border:1px solid var(--line); border-radius:12px; }
.key-summary span,.key-summary strong { display:block; }
.key-summary span { color:var(--muted); font-size:.85rem; }
.key-summary strong { font-size:1.35rem; }
.bitrate-picker { margin:22px 0 0; padding:0; border:0; }
.bitrate-picker legend { margin-bottom:9px; font-weight:700; }
.bitrate-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.bitrate-option { display:flex; min-width:0; margin:0; padding:12px 14px; align-items:center; gap:10px; background:#10141d; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.bitrate-option:has(input:checked) { background:color-mix(in srgb,var(--accent) 12%,#10141d); border-color:var(--accent); }
.bitrate-option input { width:18px; min-height:18px; margin:0; accent-color:var(--accent); }
.bitrate-option span,.bitrate-option strong,.bitrate-option small { display:block; }
.bitrate-option strong { line-height:1.25; }
.bitrate-option small { margin-top:2px; color:var(--muted); font-size:.78rem; white-space:nowrap; }
.shift-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(64px,1fr); gap:8px; margin-top:24px; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
.shift-option { display:grid; grid-template-rows:40px 56px; gap:7px; min-width:0; }
.shift-label { display:flex; align-items:flex-end; justify-content:center; color:var(--muted); font-size:.78rem; line-height:1.2; text-align:center; }
.shift-button { display:flex; width:100%; min-width:0; min-height:56px; padding:7px 5px; justify-content:center; align-items:center; background:#222a37; color:var(--text); border:1px solid var(--line); text-align:center; }
.shift-button strong { font-size:clamp(.75rem,1.4vw,1rem); line-height:1.2; }
.shift-button-label { display:none; }
.shift-button:hover { border-color:var(--accent); }
.shift-button.is-original { background:color-mix(in srgb,var(--accent) 18%,#222a37); border-color:var(--accent); }
.downloads { display:grid; gap:10px; margin-top:20px; }
.download { display:block; width:100%; padding:13px 16px; background:var(--accent); color:#07110e; font-weight:800; text-align:center; }
.melody-panel,.stems-panel { margin-top:24px; }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.panel-heading > div { min-width:0; }
.panel-heading .primary-action { flex:0 0 168px; }
.melody-panel h3,.stems-panel h3 { margin:0; font-size:1.4rem; }
.melody-panel > .muted { margin-top:4px; }
.stems-panel > .muted { margin-top:4px; }
.melody-controls { display:grid; grid-template-columns:minmax(180px,1fr) auto; gap:10px; align-items:end; margin-top:16px; }
.melody-controls label { grid-column:1/-1; margin:0; }
.melody-progress { display:flex; align-items:center; gap:14px; min-height:64px; }
.melody-progress > span:last-child { display:grid; }
.melody-progress small { color:var(--muted); }
.melody-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; }
.melody-summary div { min-width:0; padding:12px; background:#10141d; border:1px solid var(--line); border-radius:10px; }
.melody-summary span,.melody-summary strong { display:block; }
.melody-summary span { color:var(--muted); font-size:.78rem; }
.numbered-notation { margin:16px 0; padding:18px; overflow:hidden; background:#0e1118; border:1px solid var(--line); border-radius:12px; color:var(--text); font:700 var(--notation-font-size,1.1rem)/2 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre; }
.notation-draft { margin-top:18px; padding:16px; background:#10141d; border:1px solid var(--line); border-radius:12px; }
.notation-draft-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.notation-draft h4 { margin:0; font-size:1.05rem; }
.notation-draft .muted { margin:.25rem 0 0; font-size:.88rem; }
.notation-downloads { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.notation-downloads button { min-height:38px; padding:0 12px; background:#222a37; color:var(--text); border:1px solid var(--line); font-size:.86rem; }
.notation-renderer { max-width:100%; margin-top:14px; overflow-x:auto; border-radius:10px; scrollbar-width:thin; }
.notation-renderer:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.jianpu-v2 { display:grid; gap:12px; width:max-content; min-width:100%; padding:16px; background:#0e1118; border:1px solid var(--line); border-radius:10px; color:var(--text); font:700 1rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.jianpu-v2-header { color:var(--muted); font:600 .82rem/1.5 system-ui,-apple-system,sans-serif; }
.jianpu-v2-line { display:flex; align-items:stretch; gap:14px; width:max-content; max-width:none; }
.jianpu-v2-bar { display:grid; grid-template-columns:repeat(4,max-content); gap:8px; min-width:max-content; padding:10px; border-inline:2px solid var(--muted); }
.jianpu-v2-beat { display:grid; grid-template-columns:repeat(4,minmax(1.8rem,auto)); gap:3px; }
.jianpu-v2-cell { display:inline-flex; align-items:center; justify-content:center; min-width:1.8rem; min-height:2rem; padding:0 2px; border-radius:4px; white-space:nowrap; }
.jianpu-v2-note { color:var(--text); }
.jianpu-v2-rest { color:#aab6c8; }
.jianpu-v2-sustain { color:var(--muted); }
.jianpu-v2-tie-start,.jianpu-v2-tie-continue,.jianpu-v2-tie-stop { color:var(--accent); }
.jianpu-v2-octave-high { box-shadow:inset 0 2px 0 #9fd5ff; }
.jianpu-v2-octave-low { box-shadow:inset 0 -2px 0 #d4b2ff; }
.jianpu-v2-warning { margin:0; color:#ffd38a; font:600 .82rem/1.5 system-ui,-apple-system,sans-serif; }
.jianpu-draft-pre { max-width:100%; max-height:360px; margin:14px 0 0; padding:16px; overflow-x:auto; overflow-y:auto; background:#0e1118; border:1px solid var(--line); border-radius:10px; color:var(--text); font:700 1rem/1.9 ui-monospace,SFMono-Regular,Menlo,monospace; white-space:pre-wrap; }
.melody-warning { margin:8px 0; color:var(--muted); font-size:.88rem; }
.stem-downloads { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }
.stem-melody-action { width:100%; margin-top:10px; }
.success-copy { color:var(--accent); font-weight:700; }
@media (max-width:640px) { .shell { padding:36px 0; } .page-header { display:block; } .page-header .compact { position:absolute; top:0; right:0; width:auto; margin-top:0; } .input-row { grid-template-columns:1fr; } button { width:100%; } .compact { width:auto; } .panel-heading { display:grid; } .panel-heading .primary-action { flex:auto; } }
@media (max-width:640px) {
  .phase-stepper { grid-template-columns:1fr; gap:8px; }
  .phase-connector { width:2px; height:18px; margin:-8px 0 -8px 32px; }
  .song-head { grid-template-columns:1fr; }
  .song-head img { width:100%; }
  .bitrate-options { grid-template-columns:1fr; }
  .shift-grid { grid-auto-columns:minmax(58px,1fr); gap:8px; overflow-x:auto; padding-bottom:4px; }
  .shift-option { display:grid; }
  .shift-label { display:flex; }
  .shift-button { min-height:52px; padding:7px 5px; justify-content:center; text-align:center; }
  .shift-button-label { display:none; }
  .shift-button strong { font-size:.9rem; }
  .melody-controls,.stem-downloads { grid-template-columns:1fr; }
  .notation-draft-head { display:grid; }
  .notation-downloads { display:grid; grid-template-columns:1fr; justify-content:stretch; }
  .jianpu-v2-line { gap:10px; }
  .jianpu-v2-bar { gap:6px; padding:8px; }
  .jianpu-v2-beat { grid-template-columns:repeat(4,minmax(1.7rem,auto)); }
  .jianpu-v2-cell { min-width:1.7rem; }
  .melody-summary { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) { .processing-spinner { animation-duration:1.8s; } }