@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700;6..12,800;6..12,900&display=swap');

:root { --bg:#060912; --surface:#111827; --surface-2:#151d2b; --ink:#f8f9ff; --muted:#9da8bc; --muted-2:#717c90; --line:#29354a; --purple:#7c3aed; --purple-hi:#9966ff; --purple-soft:#21143c; }
* { box-sizing:border-box } body { min-height:100vh; margin:0; color:var(--ink); font:500 16px/1.5 "Nunito Sans", "Avenir Next", Avenir, ui-sans-serif, system-ui, sans-serif; background:radial-gradient(800px 420px at 53% 4%, #17243c 0%, #0c1220 35%, transparent 72%), var(--bg); letter-spacing:.002em } body::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(90deg, transparent, #ffffff03, transparent); opacity:.4 }.shell { width:min(100% - 40px, 1040px); margin:0 auto; padding:29px 0 80px }header { max-width:700px; padding:0 0 12px }.brand { display:flex; align-items:center; gap:10px; margin-bottom:58px; color:#fff }.brand-mark { display:grid; place-items:center; width:39px; height:39px; border-radius:13px; font-size:1.35rem; font-weight:900; color:#fff; background:linear-gradient(135deg,#5630c9,#9a5bff); box-shadow:0 8px 22px #6235df88 }.brand strong { display:block; font-size:1rem; font-weight:900; letter-spacing:-.03em }.brand small { display:block; color:var(--muted); font-size:.7rem; margin-top:-1px }.eyebrow { color:#ae8aff; margin:0 0 9px; font-size:.7rem; letter-spacing:.14em; font-weight:900 }h1 { margin:0; font-size:clamp(2.45rem,7.5vw,4.6rem); line-height:1; letter-spacing:-.065em; font-weight:900 } .lede { max-width:620px; color:var(--muted); font-size:1.05rem; margin:13px 0 0 }
.notice { margin:32px 0 20px; padding:13px 16px; border:1px solid #4a386c; background:#171326a6; border-radius:11px; color:#c9b8f7; font-size:.9rem }.notice strong { color:#f2edff }.dot { display:inline-block; width:8px; height:8px; background:var(--purple-hi); box-shadow:0 0 9px var(--purple-hi); border-radius:50%; margin-right:9px }.steps { display:flex; gap:7px; flex-wrap:wrap; margin:20px 0 23px }.steps span { color:var(--muted); background:#0c111c; border:1px solid var(--line); padding:7px 12px; border-radius:999px; font-size:.8rem; font-weight:700 }.steps .active { color:#fff; border-color:#8654ed; background:linear-gradient(110deg,#6531cc,#8e52ee); box-shadow:0 4px 15px #5426be66 }
.grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }.card { background:linear-gradient(145deg,#151d2b 0%,#101724 100%); border:1px solid var(--line); padding:25px; border-radius:15px; margin-top:16px; box-shadow:0 18px 38px #0000002e }h2 { color:#f6f4ff; font-size:1.08rem; margin:0 0 17px; letter-spacing:-.025em; font-weight:900 }label { display:block; color:#c4cce0; font-weight:750; font-size:.84rem; margin:14px 0 }input,select,textarea { display:block; width:100%; margin-top:6px; border:1px solid #344159; background:#0c121d; border-radius:8px; padding:10px 11px; color:var(--ink); font:600 .92rem/1.4 inherit; transition:border-color .16s, box-shadow .16s, background .16s }input::placeholder,textarea::placeholder { color:#667188 }input:focus,select:focus,textarea:focus { outline:0; border-color:#9566f5; background:#101727; box-shadow:0 0 0 3px #7746db31 }.check { display:flex; gap:9px; align-items:center; color:var(--muted); font-weight:600 }.check input { width:auto; margin:0; accent-color:var(--purple) }.folder-import { border-color:#3b2b61; background:linear-gradient(130deg,#17142a,#121a28 62%) }.folder-button { display:inline-flex; align-items:center; color:#fff; background:linear-gradient(105deg,#6734d3,#9a5aff); box-shadow:0 8px 22px #6134cf61; border-radius:8px; padding:11px 15px; cursor:pointer; font-size:.9rem }.folder-button:hover,button.primary:hover { filter:brightness(1.12); transform:translateY(-1px) }.folder-button input { display:none }.track-list { margin-top:14px; display:grid; gap:7px }.track { width:100%; text-align:left; border-color:#303b52; background:#0c121d; display:flex; flex-direction:column; gap:2px }.track small { color:var(--muted-2); font-weight:600; overflow:hidden; text-overflow:ellipsis }.track.selected { color:#f6f1ff; border-color:#8956ee; background:#231843; box-shadow:inset 3px 0 #9d68ff }.asset-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px }.hint,.asset-status,.integration p { color:var(--muted); font-size:.88rem }.asset-status { padding:12px; border:1px solid #28344a; border-radius:8px; background:#0c121d }.research-head { display:flex; align-items:start; justify-content:space-between; gap:20px }.research-head h2 { margin-bottom:5px }.research-head .eyebrow { margin-bottom:4px }.research-head .hint { margin:0 }.research-results { border-top:1px solid var(--line); margin-top:18px }.candidate { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0; border-bottom:1px solid var(--line) }.candidate p { margin:3px 0; color:var(--muted); font-size:.87rem }.candidate a { color:#aa84ff; font-size:.84rem }.candidate button { padding:7px 10px; white-space:nowrap }.review { display:flex; align-items:center; justify-content:space-between; gap:24px; border-color:#493178 }.review h2 { margin-bottom:4px }.review p { margin:0; color:var(--muted) }.actions { display:flex; gap:10px; flex-shrink:0 }button { border:1px solid #3d4a62; background:#151d2b; color:#dfe5f5; border-radius:8px; padding:11px 15px; font:800 .88rem inherit; cursor:pointer; transition:.16s transform,.16s filter,.16s background }button.primary { color:white; border-color:#8955ed; background:linear-gradient(105deg,#6530cb,#9657f4); box-shadow:0 8px 22px #6031ca55 }button:hover { background:#1c2636 }button:disabled { opacity:.6; cursor:wait }.integration { background:transparent; box-shadow:none; border-style:dashed; border-color:#34405a }.integration h2 { color:#c8d1e5 } code { color:#d7c4ff; background:#251b40; padding:1px 5px; border-radius:4px }
@media (max-width:700px) { .shell { width:min(100% - 28px,1040px); padding:23px 0 55px }.brand { margin-bottom:40px }.grid,.asset-grid { grid-template-columns:1fr }.research-head,.candidate,.review { align-items:stretch; flex-direction:column }.actions { flex-direction:column }.actions button { width:100% }.card { padding:20px } }

/* Compact multi-track list */
.track-list { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px; max-height:260px; overflow:auto; padding-right:3px }
.track { padding:8px 10px; min-height:52px }.track span { font-size:.82rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }.track small { font-size:.7rem; white-space:nowrap }
.research-actions { display:flex; gap:8px; flex-wrap:wrap }.copy-button { width:100%; margin-top:4px; font-size:.76rem; padding:9px }
.track { position:relative }.track em { position:absolute; right:8px; bottom:7px; color:#75829a; font-size:.58rem; font-style:normal }.track.researched { border-color:#287553; background:#10271f }.track.researched em { color:#73e5ac }.track.researched small { color:#a5d8bc }
.research-track { padding:15px 0; border-bottom:1px solid var(--line) }.research-track h3 { margin:0 0 7px; color:#f4f1ff }.source-list { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 }.source-list a { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #344159; border-radius:7px; padding:6px 9px; color:#ae8aff; font-size:.76rem }.fallback-actions { display:flex; gap:8px; flex-wrap:wrap }.fallback-actions button { padding:7px 10px; font-size:.75rem }.no-match { color:#aeb8cc; font-size:.85rem }
.song-metadata{display:grid;gap:7px}.song-row{display:grid;grid-template-columns:32px 1.3fr 1fr .8fr;gap:7px;align-items:center}.song-row b{color:#ae8aff;text-align:center}.song-row input{margin:0;padding:8px;font-size:.8rem}@media(max-width:700px){.song-row{grid-template-columns:25px 1fr}.song-row input:last-child{grid-column:2}}

/* Wizard field layout */
.grid[data-wizard] { grid-template-columns:minmax(0,1fr) }.grid[data-wizard]>.card { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; align-items:start }.grid[data-wizard]>.card>h2 { grid-column:1/-1 }.grid[data-wizard]>.card>label { margin:8px 0 }.grid[data-wizard]>.card>.check { grid-column:1/-1; margin-top:12px }.grid[data-wizard="3"]>.card { display:block }.song-editor { width:100% }.song-editor>h2 { margin-bottom:4px }.song-editor>.hint { margin:0 0 16px }
@media(max-width:700px){.grid[data-wizard]>.card{grid-template-columns:1fr}.grid[data-wizard]>.card>label,.grid[data-wizard]>.card>.check{grid-column:1}}
[data-wizard] { display:none } [data-wizard].is-active { display:block } .grid[data-wizard].is-active { display:grid }.wizard-actions { display:flex; justify-content:space-between; gap:10px; margin-top:18px; padding:14px 0; border-top:1px solid var(--line) }.distributor-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }.choice { display:flex; align-items:center; gap:10px; padding:14px; margin:0; border:1px solid #344159; border-radius:9px; background:#0c121d; cursor:pointer }.choice input { width:auto; margin:0; accent-color:var(--purple) }.choice strong,.choice small { display:block }.choice small { color:var(--muted); font-weight:500; font-size:.75rem }@media(max-width:700px){.distributor-options{grid-template-columns:1fr}}