.split-progress{margin-top:20px;padding:20px;border:1px solid #28514a;border-radius:12px;background:linear-gradient(110deg,#12231f,#111817);color:#eff7f4}
.split-progress[hidden]{display:none}.split-progress-heading{display:flex;align-items:center;gap:16px}.split-progress-heading strong{font-size:16px}.split-progress-heading p{font-size:13px;color:#a7bbb5;margin:5px 0 0;line-height:1.5}.split-progress-heading>span{margin-left:auto;font:12px monospace;color:#a7bbb5;white-space:nowrap}.split-bars{display:flex;align-items:center;gap:3px;height:32px;flex-shrink:0}.split-bars i{display:block;width:4px;height:24px;background:#25cbbb;border-radius:3px;animation:split-pulse 1s ease-in-out infinite alternate}.split-bars i:nth-child(2n){animation-delay:-.4s;height:16px}.split-bars i:nth-child(3){animation-delay:-.7s;height:32px}.split-track{height:4px;background:#293a35;border-radius:3px;overflow:hidden;margin-top:18px}.split-track i{display:block;height:100%;background:#25cbbb;border-radius:3px;transition:width .25s}.split-stages{display:flex;justify-content:space-between;list-style:none;padding:0;margin:12px 0 0;font-size:12px;color:#8ca39b}.split-stages .current{color:#fff}.split-stages .complete{color:#25cbbb}.split-stages .complete:before{content:'✓ ';color:#25cbbb}@keyframes split-pulse{to{transform:scaleY(.4);opacity:.5}}@media(prefers-reduced-motion:reduce){.split-bars i,.split-track i{animation:none!important;transition:none}}

.drop-preview{gap:12px}.drop-preview>strong{font-size:15px;font-weight:500}.drop-preview.drag-over{border-color:#25cbbb;background:#163b33;box-shadow:0 0 0 2px #25cbbb55}.drop-preview>button{min-height:44px}.drop-preview>p{overflow-wrap:anywhere}
@media(max-width:760px){.drop-preview{padding:20px 12px}.split-progress-heading{gap:10px}}

/* Quiet studio-style processing indicator; upload alone uses a measured bar. */
.split-progress{background:linear-gradient(120deg,#151c1b,#111413);border-color:#2d3b37}
.split-bars i{animation:none;opacity:.85}
.split-waveform{display:flex;align-items:center;justify-content:space-between;gap:3px;height:48px;margin:17px 0 13px;overflow:hidden}
.split-waveform[hidden],.split-track[hidden]{display:none}
.split-waveform i{height:var(--bar-height);flex:1;max-width:5px;min-width:2px;border-radius:2px;background:#3b8d80;transform-origin:center;animation:split-breathe 3.6s ease-in-out var(--delay) infinite}
.split-waveform i:nth-child(7n),.split-waveform i:nth-child(11n){background:#c5a453}
.split-stages{border-top:1px solid #29322f;padding-top:13px;margin-top:0;gap:12px}
.split-stages li{display:flex;align-items:center;gap:7px}
.split-stages li:before{content:'';width:6px;height:6px;border:1px solid #61716b;border-radius:50%;flex-shrink:0}
.split-stages .complete:before{content:'';background:#25cbbb;border-color:#25cbbb}
.split-stages .current{color:#dbc17c}.split-stages .current:before{background:#d2ad50;border-color:#d2ad50;box-shadow:0 0 0 3px #d2ad5015}
@keyframes split-breathe{0%,100%{transform:scaleY(.72);opacity:.5}50%{transform:scaleY(1);opacity:.95}}
@media(prefers-reduced-motion:reduce){.split-waveform i{animation:none}}

#uploadView .drop-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px 20px}
.upload-prompt{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.upload-prompt strong{font-size:15px;font-weight:500;line-height:1.5}
.upload-prompt button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;line-height:1.4;margin:0}
#uploadView .drop-preview>p{margin:0;line-height:1.5}
@media(max-width:480px){.upload-prompt{flex-direction:column;gap:12px}#uploadView .drop-preview{padding:24px 16px}}

.split-progress-value{text-align:right;color:#a7bbb5;font:11px monospace;margin:8px 0}.split-progress .split-track{margin:0 0 16px;height:4px}.split-progress[data-phase=separate] .split-track i{background:#c5a453}.split-progress .split-waveform{margin-bottom:6px}

/* Demo link lives at the foot of the drop zone: one primary action, demo as the quiet alternative. */
#uploadView .drop-preview .demo-intro{justify-content:center;gap:2px 6px;max-width:440px;margin:18px auto 0;padding-top:14px;border-top:1px solid #ffffff14;color:#91a89e;font-size:13px;text-align:center}
#uploadView .drop-preview .demo-intro .demo-start{min-height:36px;padding:6px 4px;border:0;border-radius:4px;background:transparent;color:#70d5bf;font:500 13px 'Archivo',sans-serif;text-decoration:underline;text-underline-offset:4px}
#uploadView .drop-preview .demo-intro .demo-start:hover,#uploadView .drop-preview .demo-intro .demo-start:focus-visible{color:#c1f3e5;background:transparent}
#uploadView .drop-preview .demo-loading{justify-content:center;margin-top:14px}

/* While a split runs, the progress panel replaces the upload form instead of
   stacking below it, and the surrounding panel becomes its frame. */
#uploadView.splitting .drop-preview,
#uploadView.splitting .split-models,
#uploadView.splitting #splitAllowance,
#uploadView.splitting #previewSplit,
#uploadView.splitting .upload-status{display:none!important}
#uploadView.splitting .upload-panel{padding:0;border:0;background:transparent;box-shadow:none}
#uploadView.splitting #splitProgress{margin:0;padding:26px 28px;border-radius:16px;animation:split-panel-in .28s ease-out}
#uploadView.splitting .split-progress-heading strong{font-size:18px}
#uploadView.splitting .split-waveform{height:64px}
@keyframes split-panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#uploadView.splitting #splitProgress{animation:none}}
@media(max-width:760px){#uploadView.splitting #splitProgress{padding:20px 16px}}

/* Name what is being split, since the file and mode tiles are now hidden. */
.split-progress-source{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:14px 0 0;padding-top:13px;border-top:1px solid #ffffff12}
.split-progress-source[hidden]{display:none}
.split-progress-source>span{font-size:13px;color:#dfe9e4;overflow-wrap:anywhere}
.split-progress-source>small{font:10px 'Space Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:#8ca39b}

/* The one action on the page reads like one: full-height, lit, and labelled. */
#uploadView #previewSplit{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;min-width:250px;margin:20px 0 0;padding:14px 44px 14px 30px;border-radius:12px;font:600 16px 'Archivo',sans-serif;letter-spacing:.2px}
#uploadView #previewSplit::before{content:'';width:19px;height:19px;flex:none;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h4l2.5-7 3 14 3-9 2 6 1.5-4H22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h4l2.5-7 3 14 3-9 2 6 1.5-4H22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
#uploadView #previewSplit:not(:disabled){box-shadow:0 6px 20px rgba(45,212,191,.18)}
@media(max-width:560px){#uploadView #previewSplit{width:100%;min-width:0}}

/* A chosen file is the state of the drop zone, not a footnote under it. */
#uploadView .drop-preview.has-file{border-style:solid;border-color:#2dd4bf55;background:#2dd4bf0d}
#uploadView .drop-preview.has-file .drop-file{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:#e6f2ee}
#uploadView .drop-preview.has-file .drop-file::before{content:'';width:15px;height:15px;flex:none;background:#2dd4bf;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l11-2v13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='18' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17' cy='16' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5l11-2v13' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='18' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17' cy='16' r='3' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}

/* The mark moves again while a split runs. Five faders, each on its own phase,
   so it reads as audio rather than one block throbbing in time. */
.split-bars i{transform-origin:center;animation:split-logo-levels 1.8s ease-in-out infinite}
.split-bars i:nth-child(1){animation-delay:-.15s}
.split-bars i:nth-child(2){animation-delay:-.75s}
.split-bars i:nth-child(3){animation-delay:-1.35s}
.split-bars i:nth-child(4){animation-delay:-.45s}
.split-bars i:nth-child(5){animation-delay:-1.05s}
@keyframes split-logo-levels{0%,100%{transform:scaleY(.42);opacity:.62}50%{transform:scaleY(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.split-bars i{animation:none!important;transform:none;opacity:.85}}

/* Disabled is a dimmer fill, not a faded one. A solid mint button at opacity
   .4 puts its near-black ink at 1.6:1 against its own face, which is why the
   label vanished; this pair is 6.6:1 and still clearly not pressable. The
   :hover copy is belt and braces, so no generic button:hover can repaint it. */
#uploadView #previewSplit:disabled,
#uploadView #previewSplit:disabled:hover,
#uploadView #previewSplit:disabled:focus-visible{opacity:1;background:#20514a;border-color:#20514a;color:#9dece0;box-shadow:none;cursor:default}

/* Centring a flex row centres the icon and label together, which pushes the
   label (icon 19px + gap 10px) / 2 = 14.5px right of the button's middle.
   Absorbing all 29px in the right padding centres the label but throws the
   pair the same distance the other way, which reads just as wrong. The right
   padding takes half, so the label lands ~7px right and the pair ~7px left and
   neither leans. */

/* "Back to current song" sits beside Split song as its quieter partner: same height and corners, a 12px gap, and its own full-width row on phones. */
#uploadView .upload-panel>[data-page=practice]{display:inline-flex;align-items:center;justify-content:center;vertical-align:top;min-height:54px;margin:20px 0 0 12px;padding:14px 24px;border-radius:12px;font:500 16px 'Archivo',sans-serif}
@media(max-width:560px){#uploadView .upload-panel>[data-page=practice]{display:flex;width:100%;margin:12px 0 0}}