@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--color-bg-base:#050508;--color-bg-secondary:#0d0d14;--color-surface:#ffffff0a;--color-surface-hover:#ffffff14;--color-surface-active:#ffffff1f;--color-border:#ffffff14;--color-border-hover:#ffffff2e;--color-purple:#8b5cf6;--color-pink:#ec4899;--color-orange:#f97316;--color-green:#22c55e;--color-yellow:#eab308;--color-red:#ef4444;--color-blue:#3b82f6;--color-purple-glow:#8b5cf64d;--color-pink-glow:#ec48994d;--color-green-glow:#22c55e33;--color-red-glow:#ef444433;--gradient-brand:linear-gradient(135deg, var(--color-purple), var(--color-pink));--color-text-primary:#f8fafc;--color-text-secondary:#f8fafca6;--color-text-muted:#f8fafc59;--font:"Outfit", system-ui, sans-serif;--r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-full:9999px;--ease:cubic-bezier(.2, .8, .2, 1);--t-fast:.12s;--t-mid:.25s var(--ease);--t-slow:.4s var(--ease)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font);background:var(--color-bg-base);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;min-height:100dvh}#root{flex-direction:column;min-height:100dvh;display:flex}.header{border-bottom:1px solid var(--color-border);-webkit-backdrop-filter:blur(20px);z-index:50;background:#050508cc;justify-content:space-between;align-items:center;padding:20px 32px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:10px;display:flex}.brand-icon{color:var(--color-pink);filter:drop-shadow(0 0 10px var(--color-pink-glow))}.brand-name{background:var(--gradient-brand);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:1.3rem;font-weight:700}.header-status{color:var(--color-text-muted);background:var(--color-surface);border-radius:var(--r-full);border:1px solid var(--color-border);align-items:center;gap:8px;padding:6px 14px;font-size:.8rem;display:flex}.status-dot{background:var(--color-green);width:7px;height:7px;box-shadow:0 0 8px var(--color-green);border-radius:50%;flex-shrink:0}.status-dot.loading{background:var(--color-yellow);box-shadow:0 0 8px var(--color-yellow);animation:1.2s infinite blink}.status-dot.error{background:var(--color-red);box-shadow:0 0 8px var(--color-red)}.main{flex-direction:column;flex:1;gap:32px;width:100%;max-width:1100px;margin:0 auto;padding:40px 32px;display:flex}.dropzone{border:2px dashed var(--color-border);border-radius:var(--r-xl);text-align:center;cursor:pointer;transition:all var(--t-mid);background:var(--color-surface);padding:60px 40px;position:relative;overflow:hidden}.dropzone:before{content:"";background:var(--gradient-brand);opacity:0;transition:opacity var(--t-mid);border-radius:inherit;position:absolute;inset:0}.dropzone:hover,.dropzone.active{border-color:var(--color-purple)}.dropzone.active:before{opacity:.06}.dropzone:hover .drop-icon{transform:translateY(-6px)scale(1.05)}.dropzone.active .drop-icon{transform:translateY(-10px)scale(1.1)}.drop-icon{color:var(--color-purple);filter:drop-shadow(0 0 16px var(--color-purple-glow));transition:transform var(--t-mid);margin-bottom:16px;position:relative}.drop-title{margin-bottom:8px;font-size:1.25rem;font-weight:600;position:relative}.drop-sub{color:var(--color-text-muted);font-size:.9rem;position:relative}.drop-formats{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px;display:flex;position:relative}.format-chip{background:var(--color-surface-hover);border:1px solid var(--color-border);border-radius:var(--r-full);color:var(--color-text-secondary);letter-spacing:.04em;padding:3px 10px;font-size:.75rem}input[type=file]{display:none}.queue-section{flex-direction:column;gap:12px;display:flex}.queue-header{justify-content:space-between;align-items:center;display:flex}.queue-title{font-size:1.1rem;font-weight:600}.queue-meta{align-items:center;gap:8px;display:flex}.q-pill{background:var(--color-surface-hover);border:1px solid var(--color-border);border-radius:var(--r-full);color:var(--color-text-secondary);padding:3px 12px;font-size:.78rem}.btn-upload-all{background:var(--gradient-brand);border-radius:var(--r-full);color:#fff;cursor:pointer;transition:opacity var(--t-fast), transform var(--t-fast);border:none;align-items:center;gap:6px;padding:8px 20px;font-size:.85rem;font-weight:600;display:flex}.btn-upload-all:hover{opacity:.9;transform:translateY(-1px)}.btn-upload-all:active{transform:translateY(0)}.btn-upload-all:disabled{opacity:.4;cursor:not-allowed;transform:none}.track-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-lg);transition:border-color var(--t-mid);overflow:hidden}.track-card:hover{border-color:var(--color-border-hover)}.track-card.expanded{border-color:var(--color-purple)}.track-card.status-done{border-color:#22c55e59}.track-card.status-error{border-color:#ef444459}.track-card.status-uploading{border-color:#3b82f659}.track-header{cursor:pointer;align-items:center;gap:14px;padding:14px 16px;display:flex}.track-art{border-radius:var(--r-sm);background:var(--color-surface-hover);flex-shrink:0;justify-content:center;align-items:center;width:52px;height:52px;display:flex;position:relative;overflow:hidden}.track-art img{object-fit:cover;width:100%;height:100%}.track-summary{flex:1;min-width:0}.track-name{white-space:nowrap;text-overflow:ellipsis;font-size:.95rem;font-weight:600;overflow:hidden}.track-meta-line{color:var(--color-text-secondary);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:.8rem;overflow:hidden}.track-right{flex-shrink:0;align-items:center;gap:10px;display:flex}.pipeline{align-items:center;gap:6px;display:flex}.step{border-radius:var(--r-full);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border:1px solid #0000;align-items:center;gap:5px;padding:3px 10px;font-size:.72rem;font-weight:600;display:flex}.step.idle{color:var(--color-text-muted);background:var(--color-surface-hover);border-color:var(--color-border)}.step.active{color:var(--color-purple);background:#8b5cf61f;border-color:#8b5cf659;animation:1.5s infinite step-pulse}.step.done{color:var(--color-green);background:#22c55e1a;border-color:#22c55e4d}.step.warn{color:var(--color-yellow);background:#eab3081a;border-color:#eab3084d}.step.error{color:var(--color-red);background:#ef44441a;border-color:#ef44444d}.progress-wrap{background:var(--color-surface-hover);border-radius:var(--r-full);width:100%;height:3px;margin-top:6px;overflow:hidden}.progress-fill{background:var(--gradient-brand);border-radius:var(--r-full);height:100%;transition:width .3s}.progress-fill.green{background:var(--color-green)}.expand-panel{border-top:1px solid var(--color-border);flex-direction:column;gap:20px;padding:20px 20px 24px;display:flex}.log-console{border:1px solid var(--color-border);border-radius:var(--r-md);color:var(--color-text-secondary);background:#0006;flex-direction:column;gap:2px;max-height:120px;padding:12px 16px;font-family:SF Mono,Fira Code,monospace;font-size:.75rem;display:flex;overflow-y:auto}.log-line{line-height:1.5}.log-line.success{color:var(--color-green)}.log-line.warn{color:var(--color-yellow)}.log-line.error{color:var(--color-red)}.log-line.info{color:var(--color-blue)}.meta-editor{flex-direction:column;gap:16px;display:flex}.meta-editor-header{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:600}.meta-art-row{align-items:flex-start;gap:20px;display:flex}.meta-art-preview{border-radius:var(--r-md);background:var(--color-surface-hover);border:1px solid var(--color-border);cursor:pointer;flex-shrink:0;justify-content:center;align-items:center;width:100px;height:100px;display:flex;position:relative;overflow:hidden}.meta-art-preview img{object-fit:cover;width:100%;height:100%}.meta-art-overlay{opacity:0;transition:opacity var(--t-fast);color:#fff;background:#00000080;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:.7rem;font-weight:600;display:flex;position:absolute;inset:0}.meta-art-preview:hover .meta-art-overlay{opacity:1}.meta-fields{flex:1;grid-template-columns:1fr 1fr;gap:10px;display:grid}.meta-field{flex-direction:column;gap:4px;display:flex}.meta-field.full{grid-column:1/-1}.meta-label{text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);font-size:.72rem;font-weight:600}.meta-input{border:1px solid var(--color-border);border-radius:var(--r-sm);color:var(--color-text-primary);font-family:var(--font);transition:border-color var(--t-fast), box-shadow var(--t-fast);background:#0000004d;outline:none;width:100%;padding:8px 12px;font-size:.9rem}.meta-input:focus{border-color:var(--color-purple);box-shadow:0 0 0 3px var(--color-purple-glow)}.meta-textarea{resize:vertical;min-height:80px;line-height:1.5}.s3-preview{border:1px solid var(--color-border);border-radius:var(--r-md);background:#0006;flex-direction:column;gap:4px;padding:12px 16px;display:flex}.s3-label{text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);font-size:.72rem;font-weight:600}.s3-path{color:var(--color-purple);word-break:break-all;font-family:SF Mono,Fira Code,monospace;font-size:.8rem}.mb-result{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--r-md);align-items:center;gap:12px;padding:12px 16px;display:flex}.mb-icon{flex-shrink:0}.mb-text{flex:1}.mb-title{font-size:.85rem;font-weight:600}.mb-sub{color:var(--color-text-secondary);margin-top:2px;font-size:.78rem}.btn-apply{border-radius:var(--r-full);color:var(--color-purple);cursor:pointer;white-space:nowrap;transition:background var(--t-fast);background:#8b5cf626;border:1px solid #8b5cf659;padding:5px 14px;font-size:.8rem;font-weight:600}.btn-apply:hover{background:#8b5cf640}.action-row{justify-content:flex-end;gap:10px;display:flex}.btn{border-radius:var(--r-full);cursor:pointer;transition:all var(--t-fast);border:1px solid #0000;align-items:center;gap:7px;padding:9px 22px;font-size:.87rem;font-weight:600;display:flex}.btn-ghost{border-color:var(--color-border);color:var(--color-text-secondary);background:0 0}.btn-ghost:hover{border-color:var(--color-border-hover);color:var(--color-text-primary)}.btn-primary{background:var(--gradient-brand);color:#fff;border:none}.btn-primary:hover{opacity:.88;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.35;cursor:not-allowed;transform:none}.upload-progress-row{flex-direction:column;gap:8px;display:flex}.upload-step{align-items:center;gap:10px;font-size:.82rem;display:flex}.upload-step-icon{flex-shrink:0;width:16px}.upload-step-label{color:var(--color-text-secondary);flex:1}.upload-step-pct{color:var(--color-text-muted);font-size:.78rem}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-surface-active);border-radius:var(--r-full)}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes step-pulse{0%,to{box-shadow:0 0 #8b5cf633}50%{box-shadow:0 0 0 4px #8b5cf600}}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:.9s linear infinite spin}@media (width<=640px){.main{padding:24px 16px}.header{padding:16px 20px}.meta-fields{grid-template-columns:1fr}.meta-art-row{flex-direction:column}.pipeline{flex-wrap:wrap}.dropzone{padding:40px 20px}}