:root{--ink:#20213b;--muted:#696b80;--paper:#fbfaf7;--card:#fff;--violet:#6752d9;--violet-dark:#4937ae;--peach:#ffb78c;--line:#e8e5ef;--danger:#b63d4a;--shadow:0 12px 35px rgba(37,31,74,.08)}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 ui-rounded,"Avenir Next",system-ui,-apple-system,sans-serif}header{height:70px;padding:0 max(24px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--line)}.logo{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-weight:800;font-size:20px}.logo span,.brand-mark{display:grid;place-items:center;background:linear-gradient(145deg,var(--violet),#907be9);color:#fff;border-radius:12px;width:38px;height:38px}.back,.link-button{color:var(--muted);text-decoration:none;border:0;background:none;font:inherit;cursor:pointer}.container{max-width:1120px;margin:auto;padding:50px 24px 80px}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end;margin-bottom:50px}h1{font-size:clamp(35px,5vw,58px);line-height:1.05;letter-spacing:-.04em;margin:8px 0 18px}h2{margin:0 0 8px;line-height:1.2}.eyebrow{color:var(--violet);font-size:13px;letter-spacing:.12em;font-weight:800}.muted{color:var(--muted)}label{display:grid;gap:6px;font-size:14px;font-weight:700}input{width:100%;border:1px solid #d9d5e4;border-radius:11px;padding:12px 13px;font:inherit;background:#fff;color:var(--ink)}input:focus{outline:3px solid #dcd5ff;border-color:var(--violet)}.new-project,.panel,.login-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}.button{display:inline-block;min-height:44px;border:0;border-radius:11px;padding:11px 17px;font:inherit;font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;text-align:center}.primary{background:var(--violet);color:#fff}.primary:hover{background:var(--violet-dark)}.secondary{background:#eeeafe;color:var(--violet-dark)}.subtle{background:#f0eef5;color:var(--ink)}.wide{width:100%}.new-project .button{margin-top:13px;width:100%}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.project-card{display:grid;grid-template-columns:78px 1fr auto;gap:18px;align-items:center;background:#fff;padding:16px;border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none;box-shadow:0 5px 20px rgba(37,31,74,.04);transition:.18s}.project-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.project-card h2{font-size:19px}.project-card p{margin:3px 0;color:var(--muted)}.cover{width:78px;height:78px;border-radius:13px;background:#ece8ff;display:grid;place-items:center;font-size:32px;overflow:hidden}.cover img,.artwork-panel img{width:100%;height:100%;object-fit:cover}.arrow{font-size:25px;color:var(--violet)}.empty{text-align:center;padding:70px 20px;border:2px dashed #ddd8e8;border-radius:22px;color:var(--muted)}.empty>div{font-size:45px;color:var(--violet)}.empty.small{padding:40px}.login-body{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 10% 10%,#ffe3d4,transparent 35%),radial-gradient(circle at 90% 90%,#ddd5ff,transparent 40%),var(--paper);padding:20px}.login-card{width:min(430px,100%);padding:40px}.login-card h1{font-size:34px}.brand-mark{width:50px;height:50px;font-size:23px}.stack{display:grid;gap:15px}.alert{padding:12px;border-radius:10px;margin:15px 0}.error,.job-error{color:#8e2935;background:#feecef}.project-heading{display:grid;grid-template-columns:210px 1fr;gap:36px;align-items:center;margin-bottom:45px}.artwork-panel>img,.art-placeholder{width:210px;height:210px;border-radius:22px;box-shadow:var(--shadow)}.art-placeholder{display:grid;place-items:center;background:linear-gradient(145deg,#ffc5a3,#a994ef);color:#fff;font-size:70px}.file-button{display:block;text-align:center;margin-top:10px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer}.file-button input{display:none}.title-form{display:flex;gap:10px;align-items:center}.title-form input{font-size:clamp(28px,4vw,48px);font-weight:800;letter-spacing:-.03em;border-color:transparent;background:transparent;padding-left:0}.add-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:42px}.panel p{margin-top:5px}.section-title{font-size:24px}.section-header{display:flex;align-items:center;justify-content:space-between;margin:35px 0 14px}.jobs{display:grid;gap:8px;margin:12px 0 35px}.job{display:grid;grid-template-columns:90px 1fr;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;gap:10px}.status{text-transform:uppercase;font-size:11px;font-weight:900;letter-spacing:.06em;color:var(--muted)}.status.running,.status.queued{color:#8b6800}.status.complete{color:#26734d}.status.failed{color:var(--danger)}.job-url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.job-error{grid-column:1/-1;margin:0;padding:8px;border-radius:8px}.tracks{list-style:none;margin:0;padding:0;display:grid;gap:10px}.track{display:grid;grid-template-columns:38px 1fr auto;gap:14px;background:#fff;border:1px solid var(--line);border-radius:15px;padding:14px;align-items:center}.track-number{display:grid;place-items:center;width:32px;height:32px;background:#eeeafe;color:var(--violet);border-radius:50%;font-weight:800}.track-main audio{width:100%;height:38px}.track-edit{display:grid;grid-template-columns:minmax(160px,1fr) 105px 105px auto;gap:10px;margin-top:9px;align-items:end}.track-edit input{padding:8px}.track-actions{display:flex;gap:5px}.track-actions button{border:1px solid var(--line);background:#fff;border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:18px}.track-actions .danger{color:var(--danger)}.danger-zone{border-top:1px solid var(--line);margin-top:60px;padding-top:25px}.danger-zone p{color:var(--muted)}.danger-button{color:var(--danger);border:1px solid #edc9ce;background:#fff}
.capacity-card{margin:-10px 0 28px;padding:24px;background:linear-gradient(135deg,#f5f2ff,#fff 58%);border:1px solid #ddd6ff;border-radius:20px;box-shadow:var(--shadow)}.capacity-card.over-limit{background:linear-gradient(135deg,#fff0eb,#fff 58%);border-color:#f1c5b8}.capacity-heading,.capacity-metric>div{display:flex;align-items:center;justify-content:space-between;gap:16px}.capacity-heading{margin-bottom:20px}.capacity-heading .eyebrow{margin:0 0 3px}.capacity-heading h2{margin:0}.capacity-status{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:7px 11px;font-size:13px;font-weight:800;white-space:nowrap}.capacity-status::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}.capacity-status.ready{color:#26734d;background:#e7f5ed}.capacity-status.checking{color:#866600;background:#fff5cf}.capacity-status.warning{color:#9b3340;background:#feecef}.capacity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.capacity-metric span{color:var(--muted);font-size:14px}.capacity-metric strong{font-size:14px}.capacity-metric progress{display:block;width:100%;height:9px;margin-top:9px;border:0;border-radius:999px;overflow:hidden;background:#e5e1ed}.capacity-metric progress::-webkit-progress-bar{background:#e5e1ed;border-radius:999px}.capacity-metric progress::-webkit-progress-value{background:linear-gradient(90deg,var(--violet),#947fe7);border-radius:999px}.capacity-metric progress::-moz-progress-bar{background:var(--violet);border-radius:999px}.over-limit .capacity-metric progress::-webkit-progress-value{background:linear-gradient(90deg,#df785e,var(--danger))}.over-limit .capacity-metric progress::-moz-progress-bar{background:var(--danger)}.capacity-warning{margin:18px 0 0;padding:10px 12px;border-radius:10px;color:#8e2935;background:#feecef;font-weight:700}.capacity-note{margin:14px 0 0;color:var(--muted);font-size:13px}.capacity-warning+.capacity-note,.capacity-note+.capacity-note{margin-top:6px}
@media(max-width:760px){.container{padding-top:30px}.hero,.add-grid{grid-template-columns:1fr}.hero{gap:20px}.project-grid{grid-template-columns:1fr}.project-heading{grid-template-columns:100px 1fr;gap:18px}.artwork-panel>img,.art-placeholder{width:100px;height:100px;border-radius:14px}.file-button{font-size:11px}.title-form{display:block}.title-form input{font-size:29px}.title-form button{margin-top:7px}.capacity-card{margin-top:0;padding:19px}.capacity-grid{grid-template-columns:1fr;gap:16px}.capacity-heading{align-items:flex-start}.section-header{align-items:flex-start;flex-direction:column;gap:3px}.track{grid-template-columns:32px 1fr}.track-actions{grid-column:2}.track-edit{grid-template-columns:1fr 1fr}.track-edit label:first-child{grid-column:1/-1}.track-edit button{align-self:end}.job{grid-template-columns:75px 1fr}header{padding:0 18px}}
.yoto-card{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin:0 0 28px;padding:24px;background:#20213b;color:#fff;border-radius:20px;box-shadow:var(--shadow)}.yoto-card .eyebrow{color:#bfb4ff;margin:0 0 3px}.yoto-card h2{color:#fff}.yoto-card p{margin:7px 0;color:#d9d9e4}.yoto-card .capacity-note{color:#bfc0ce}.yoto-actions{display:flex;gap:9px;align-items:center}.yoto-actions .subtle{background:#393a57;color:#fff}.job-body{min-width:0;display:grid;gap:2px}.job-body span{color:var(--muted);font-size:14px}.title-form .button{white-space:nowrap}.track{grid-template-columns:38px 62px 1fr auto}.track-icon-control{display:grid;justify-items:center;gap:2px;color:var(--muted);font-size:11px;font-weight:700}.icon-caption{display:flex;gap:4px;align-items:center}.icon-caption form{display:inline}.icon-caption button{border:0;padding:0;background:none;color:var(--danger);font:inherit;cursor:pointer}.track-icon{position:relative;width:48px;height:48px;display:grid;place-items:center;overflow:hidden;border:1px solid #dcd7eb;border-radius:10px;background:#f0edff;color:var(--violet);font-size:24px}.track-icon img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated}.track-icon form,.track-icon label{position:absolute;inset:0;display:block;cursor:pointer}.track-icon input{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px){.yoto-card{grid-template-columns:1fr;padding:19px}.yoto-actions{align-items:stretch;flex-direction:column}.yoto-actions form,.yoto-actions .button{width:100%}.track{grid-template-columns:32px 62px 1fr}.track-main{grid-column:2/-1}.track-actions{grid-column:2/-1}}
.header-actions{display:flex;align-items:center;gap:18px}.settings{max-width:900px}.settings-heading{margin-bottom:30px}.settings-heading h1{margin-bottom:10px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:28px}.settings-grid .panel h2{margin-bottom:18px}.success{color:#26734d;background:#e7f5ed}.invite-result{margin:0 0 28px;padding:18px;background:#f0edff;border:1px solid #d9d1ff;border-radius:14px}.invite-result input{margin:10px 0 4px}.invite-result p{margin:0;color:var(--muted);font-size:14px}.invite-panel{margin-top:28px}.invite-panel form{margin-top:14px}
@media(max-width:760px){.settings-grid{grid-template-columns:1fr}.header-actions{gap:10px}.header-actions .back{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}