@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg:#121212;--bg-sidebar:#000;--bg-elevated:#181818;--bg-panel:#1a1a1a;--bg-hover:#282828;--bg-input:#242424;--border:#2e2e2e;--border-strong:#3e3e3e;--ink:#fff;--ink-soft:#b3b3b3;--ink-mute:#6a6a6a;--spotify:#1db954;--spotify-hover:#1ed760;--spotify-deep:#169c46;--on-spotify:#000;--danger:#f87171;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--sidebar-width:248px;--font:"Inter", system-ui, -apple-system, sans-serif;font-family:var(--font);color:var(--ink);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);min-width:320px}button,input,select,a{font:inherit}img{max-width:100%;display:block}button{appearance:none;color:inherit;cursor:pointer;background:0 0;border:0}a{color:inherit;text-decoration:none}::selection{background:color-mix(in srgb, var(--spotify) 45%, transparent);color:var(--ink)}.app{grid-template-columns:var(--sidebar-width) 1fr;background:var(--bg);min-height:100vh;display:grid}.app.boot{color:var(--ink-soft);place-items:center;display:grid}.sidebar{background:var(--bg-sidebar);border-right:1px solid #121212;flex-direction:column;gap:1.75rem;height:100vh;padding:1.5rem 1rem 1.15rem;display:flex;position:sticky;top:0}.brand{align-items:center;gap:.75rem;padding:.2rem .35rem;display:inline-flex}.brand-mark{background:var(--spotify);width:2rem;height:2rem;color:var(--on-spotify);box-shadow:0 0 0 1px color-mix(in srgb, var(--spotify) 35%, transparent);border-radius:.5rem;place-items:center;display:grid}.brand-mark svg{width:1.15rem;height:1.15rem}.brand-text{letter-spacing:-.035em;font-size:1.2rem;font-weight:800}.nav{gap:.2rem;display:grid}.nav-link{border-radius:var(--radius-sm);color:var(--ink-soft);align-items:center;gap:.85rem;padding:.72rem .9rem;font-size:.95rem;font-weight:600;transition:background .14s,color .14s;display:flex;position:relative}.nav-link svg{flex-shrink:0;width:1.2rem;height:1.2rem}.nav-link:hover,.nav-link.active{color:var(--ink);background:var(--bg-hover)}.nav-link.active:before{content:"";background:var(--spotify);border-radius:999px;width:3px;position:absolute;top:.45rem;bottom:.45rem;left:0}.nav-link.active svg{color:var(--spotify)}.sidebar-spacer{flex:1}.sidebar-user{border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid #222;gap:.7rem;padding:.85rem;display:grid}.user-row{align-items:center;gap:.7rem;min-width:0;display:flex}.user-row img,.user-fallback{object-fit:cover;background:#333;border-radius:50%;flex-shrink:0;width:2.35rem;height:2.35rem}.user-fallback{color:var(--ink-soft);place-items:center;font-size:.85rem;font-weight:700;display:grid}.user-meta{gap:.18rem;min-width:0;display:grid}.user-meta strong{white-space:nowrap;text-overflow:ellipsis;font-size:.92rem;overflow:hidden}.user-meta .connected,.user-meta .disconnected{align-items:center;gap:.35rem;font-size:.76rem;font-weight:600;display:inline-flex}.user-meta .connected{color:var(--spotify)}.user-meta .disconnected{color:var(--ink-mute)}.status-dot{background:var(--spotify);width:.45rem;height:.45rem;box-shadow:0 0 0 3px color-mix(in srgb, var(--spotify) 22%, transparent);border-radius:50%}.content{background:radial-gradient(1200px 420px at 10% -10%, #1db95414, transparent 55%), var(--bg);min-width:0;padding:2rem clamp(1.25rem,3.2vw,2.75rem) 3.25rem}.page-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:2rem;display:flex}.page-header h1{letter-spacing:-.04em;margin:0;font-size:clamp(1.9rem,4vw,2.55rem);font-weight:800;line-height:1.1}.page-header p{color:var(--ink-soft);margin:.5rem 0 0;font-size:1.02rem}.spotify-btn,.ghost-btn,.secondary-btn{border-radius:999px;justify-content:center;align-items:center;gap:.5rem;font-weight:700;transition:transform .14s,background .14s,border-color .14s,opacity .14s;display:inline-flex}.spotify-btn{background:var(--spotify);color:var(--on-spotify);padding:.78rem 1.2rem}.spotify-btn.slim{padding:.62rem .95rem;font-size:.88rem}.spotify-btn.large{border-radius:999px;width:100%;padding:1.05rem 1.3rem;font-size:1.02rem}.spotify-btn:hover:not(:disabled){background:var(--spotify-hover);transform:translateY(-1px)}.spotify-btn:disabled{opacity:.45;cursor:not-allowed}.spotify-btn svg,.ghost-btn svg{flex-shrink:0;width:1.05rem;height:1.05rem}.ghost-btn,.secondary-btn{border:1px solid var(--border-strong);color:var(--ink);background:0 0;padding:.72rem 1rem}.ghost-btn.slim{padding:.5rem .8rem;font-size:.82rem}.ghost-btn:hover,.secondary-btn:hover{background:var(--bg-hover);border-color:#555}.section-block+.section-block{margin-top:2.4rem}.section-block h2{letter-spacing:-.02em;margin:0 0 1.05rem;font-size:1.2rem;font-weight:700}.festival-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.1rem;display:grid}.festival-card{border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid #222;transition:transform .16s,border-color .16s,box-shadow .16s;display:grid;overflow:hidden}.festival-card:hover{border-color:color-mix(in srgb, var(--spotify) 40%, #333);transform:translateY(-3px);box-shadow:0 12px 28px #00000059}.festival-card-media{background:linear-gradient(180deg, #0000000d, #0000008c), var(--card-image,linear-gradient(145deg, #243b55, #141e30));background-position:50%;background-size:cover;min-height:132px;position:relative}.festival-card-logo{letter-spacing:-.03em;text-shadow:0 2px 10px #000000a6;white-space:nowrap;text-overflow:ellipsis;font-size:1.05rem;font-weight:800;position:absolute;inset:auto .85rem .75rem;overflow:hidden}.festival-card-body{gap:.28rem;padding:.9rem .95rem 1rem;display:grid}.festival-card-body h3{letter-spacing:-.02em;margin:0;font-size:1.02rem;font-weight:700}.festival-location{color:var(--ink-soft);margin:0;font-size:.88rem}.festival-dates{color:#9a9a9a;align-items:center;gap:.35rem;margin:.1rem 0 0;font-size:.8rem;display:inline-flex}.festival-dates svg{opacity:.85;width:.9rem;height:.9rem}.artist-count{color:var(--spotify);margin-top:.35rem;font-size:.84rem;font-weight:700}.status,.error{color:var(--ink-soft);margin:0 0 1rem}.error{color:#fecaca;border-radius:var(--radius-sm);background:#7f1d1d59;border:1px solid #f8717159;padding:.8rem .95rem}.back-link{color:var(--ink-soft);align-items:center;gap:.25rem;margin-bottom:1.15rem;font-size:.92rem;font-weight:600;display:inline-flex}.back-link svg{width:1.1rem;height:1.1rem}.back-link:hover{color:var(--ink)}.festival-detail-hero{grid-template-columns:1.35fr 1fr;align-items:stretch;gap:1.4rem;margin-bottom:1.5rem;display:grid}.festival-detail-copy h1{letter-spacing:-.04em;margin:0;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;line-height:1.08}.festival-detail-copy .meta{color:var(--ink-soft);margin:.65rem 0 .85rem;font-size:.95rem}.festival-detail-copy .meta .dot{color:var(--ink-mute);margin:0 .45rem}.festival-detail-copy .desc{color:#cfcfcf;max-width:40rem;margin:0;font-size:.95rem;line-height:1.55}.festival-cover{border-radius:var(--radius-md);background:linear-gradient(180deg, #0000000d, #00000047), var(--card-image,linear-gradient(145deg, #243b55, #141e30));background-position:50%;background-size:cover;border:1px solid #222;min-height:200px}.lineup-toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1.1rem;display:flex}.toolbar-actions{flex-wrap:wrap;align-items:center;gap:.55rem;display:flex}.tracks-select{color:var(--ink-soft);align-items:center;gap:.6rem;font-size:.9rem;font-weight:600;display:inline-flex}.tracks-select select{appearance:none;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right .7rem center / 12px no-repeat, var(--bg-input);color:var(--ink);padding:.58rem 2rem .58rem .85rem;font-weight:700}.artist-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.55rem 1rem;margin-bottom:1.35rem;display:grid}.artist-tile{text-align:left;background:0 0;border:0;align-items:center;gap:.7rem;padding:.55rem .2rem;transition:color .12s;display:flex}.artist-tile:hover .artist-name{color:var(--ink)}.artist-tile.selected .artist-name{color:var(--spotify)}.artist-check{width:1.2rem;height:1.2rem;color:var(--on-spotify);background:0 0;border:1.5px solid #666;border-radius:.28rem;flex-shrink:0;place-items:center;display:grid}.artist-check svg{width:.72rem;height:.72rem}.artist-tile.selected .artist-check{background:var(--spotify);border-color:var(--spotify)}.artist-name{color:#e8e8e8;font-size:.95rem;font-weight:600}.create-panel{border-radius:var(--radius-md);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#141414e0;border:1px solid #2a2a2a;gap:.7rem;padding:1rem;display:grid;position:sticky;bottom:1rem;box-shadow:0 10px 30px #00000059}.create-hint{text-align:center;color:var(--ink-mute);margin:0;font-size:.84rem}.progress-page{gap:1.75rem;max-width:56rem;display:grid}.progress-header h1{letter-spacing:-.035em;margin:0;font-size:clamp(1.7rem,3.5vw,2.2rem);font-weight:800}.progress-header p{color:var(--ink-soft);margin:.45rem 0 0}.progress-layout{grid-template-columns:1.1fr 1fr;align-items:stretch;gap:1.35rem;display:grid}.progress-steps{border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid #222;align-content:start;gap:1rem;padding:1.25rem 1.2rem;display:grid}.step{color:var(--ink-mute);align-items:flex-start;gap:.8rem;display:flex}.step-dot{background:0 0;border:2px solid #3a3a3a;border-radius:50%;flex-shrink:0;place-items:center;width:1.45rem;height:1.45rem;margin-top:.05rem;display:grid}.step-dot svg{width:.75rem;height:.75rem}.step-idle{background:#555;border-radius:50%;width:.4rem;height:.4rem}.step-spinner{border:2px solid #1db95440;border-top-color:var(--spotify);border-radius:50%;width:.85rem;height:.85rem;animation:.75s linear infinite spin}.step.active{color:var(--ink)}.step.done{color:var(--spotify)}.step.done .step-dot{border-color:var(--spotify);background:var(--spotify);color:var(--on-spotify)}.step.active .step-dot{border-color:var(--spotify)}.step strong{font-size:.96rem;font-weight:700;display:block}.step span{color:var(--ink-soft);margin-top:.18rem;font-size:.82rem;display:block}.progress-status-card{border-radius:var(--radius-md);background:var(--bg-elevated);text-align:center;border:1px solid #222;align-content:center;justify-items:center;gap:.7rem;min-height:280px;padding:1.75rem 1.3rem;display:grid}.progress-status-card .avatar,.progress-status-card .spot-icon{object-fit:cover;background:#111;border:3px solid #2c2c2c;border-radius:50%;place-items:center;width:5.25rem;height:5.25rem;display:grid}.progress-status-card .avatar.letter{color:var(--ink);font-size:1.6rem;font-weight:800}.progress-status-card .spot-icon{border-color:var(--spotify);color:var(--spotify);background:#000}.progress-status-card .spot-icon svg{width:2.6rem;height:2.6rem}.status-kicker{color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em;margin:.35rem 0 0;font-size:.82rem;font-weight:600}.progress-status-card h3{letter-spacing:-.02em;margin:0;font-size:1.2rem;font-weight:800}.mini-progress{justify-items:center;gap:.45rem;width:min(100%,15rem);margin-top:.35rem;display:grid}.mini-progress span{color:var(--ink-soft);font-size:.82rem;font-weight:600}.spinner{border:2.5px solid #ffffff1f;border-top-color:var(--spotify);border-radius:50%;width:1.55rem;height:1.55rem;animation:.8s linear infinite spin}.spinner.large{width:1.85rem;height:1.85rem;margin-top:.35rem}.progress-footer{gap:.6rem;display:grid}.progress-track{background:#2a2a2a;border-radius:999px;height:.55rem;overflow:hidden}.progress-track.thin{width:100%;height:.38rem}.progress-track.thick{height:.85rem}.progress-fill{background:linear-gradient(90deg, var(--spotify-deep), var(--spotify));height:100%;transition:width .25s}.progress-footer-meta{color:var(--ink-soft);justify-content:space-between;font-size:.9rem;font-weight:700;display:flex}.success-panel{text-align:center;justify-items:center;gap:.95rem;padding:2.4rem 1.25rem 1rem;display:grid}.success-hero{place-items:center;width:7.5rem;height:7.5rem;display:grid;position:relative}.success-badge{background:color-mix(in srgb, var(--spotify) 18%, transparent);width:4.5rem;height:4.5rem;color:var(--spotify);border:2px solid color-mix(in srgb, var(--spotify) 55%, transparent);border-radius:50%;place-items:center;animation:.42s pop-in;display:grid}.success-badge svg{width:1.7rem;height:1.7rem}.confetti{opacity:0;background:var(--spotify);border-radius:1px;width:.42rem;height:.7rem;animation:1.1s forwards confetti-burst;position:absolute}.confetti.c1{--dx:-22px;--dy:-26px;animation-delay:40ms;top:.5rem;left:1rem}.confetti.c2{--dx:20px;--dy:-28px;background:#69f0ae;animation-delay:90ms;top:.35rem;right:1.1rem}.confetti.c3{--dx:-28px;--dy:4px;animation-delay:.13s;top:2rem;left:.2rem}.confetti.c4{--dx:26px;--dy:2px;background:#a7ffc8;animation-delay:.17s;top:1.8rem;right:.25rem}.confetti.c5{--dx:-16px;--dy:22px;animation-delay:.21s;bottom:1.2rem;left:.7rem}.confetti.c6{--dx:18px;--dy:20px;background:#69f0ae;animation-delay:.25s;bottom:1rem;right:.8rem}.confetti.c7{--dx:-8px;--dy:-32px;border-radius:50%;width:.35rem;height:.35rem;animation-delay:80ms;top:.1rem;left:45%}.confetti.c8{--dx:10px;--dy:28px;border-radius:50%;width:.35rem;height:.35rem;animation-delay:.28s;bottom:.4rem;left:48%}.success-panel h1{letter-spacing:-.035em;margin:0;font-size:clamp(1.7rem,4vw,2.25rem);font-weight:800}.success-panel>p{color:var(--ink-soft);margin:0;font-size:1.02rem}.success-card{border-radius:var(--radius-md);background:var(--bg-elevated);text-align:left;border:1px solid #222;gap:1rem;width:min(100%,30rem);padding:1.25rem 1.3rem;display:grid}.success-row{gap:.3rem;display:grid}.success-row strong{font-size:1.08rem}.success-label{color:var(--ink-mute);text-transform:uppercase;letter-spacing:.05em;font-size:.76rem;font-weight:700}.success-stats{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}.success-stats>div{border-radius:var(--radius-sm);background:var(--bg-panel);border:1px solid #222;gap:.25rem;padding:.8rem .85rem;display:grid}.success-stats strong{font-size:1.35rem;font-weight:800}.skipped-block{gap:.55rem;display:grid}.skipped-list{flex-wrap:wrap;gap:.45rem;display:flex}.skipped-chip{border-radius:var(--radius-sm);background:#242424;border:1px solid #333;gap:.1rem;padding:.45rem .7rem;display:grid}.skipped-chip strong{color:var(--ink);font-size:.86rem}.skipped-chip span{color:var(--ink-mute);font-size:.72rem}.success-actions{gap:.7rem;width:min(100%,30rem);display:grid}.text-link{color:var(--ink-soft);text-align:center;padding:.4rem;font-weight:600}.text-link:hover{color:var(--ink)}.playlist-list{gap:.75rem;display:grid}.playlist-row{border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid #222;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem;display:flex}.playlist-row h3{margin:0 0 .3rem;font-size:1.05rem}.playlist-row p{color:var(--ink-soft);margin:0;font-size:.9rem}.how-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;display:grid}.how-card{border-radius:var(--radius-md);background:var(--bg-elevated);border:1px solid #222;padding:1.15rem}.how-card .step-num{background:color-mix(in srgb, var(--spotify) 18%, transparent);width:1.7rem;height:1.7rem;color:var(--spotify);border-radius:50%;place-items:center;margin-bottom:.75rem;font-size:.85rem;font-weight:800;display:grid}.how-card h3{margin:0 0 .4rem;font-size:1.05rem}.how-card p{color:var(--ink-soft);margin:0;font-size:.92rem;line-height:1.45}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes confetti-burst{0%{opacity:0;transform:translate(0)rotate(0)scale(.4)}25%{opacity:1}to{opacity:0;transform:translate(var(--dx,12px), var(--dy,-18px)) rotate(28deg) scale(1)}}@media (width<=900px){.app{grid-template-columns:1fr}.sidebar{z-index:30;flex-flow:wrap;align-items:center;gap:.75rem;height:auto;padding:.85rem 1rem;position:sticky;top:0}.nav{flex:1;gap:.25rem;display:flex}.nav-link span,.nav-link.active:before,.sidebar-spacer{display:none}.sidebar-user{margin-left:auto;padding:.4rem .55rem}.sidebar-user .ghost-btn,.sidebar-user .spotify-btn{display:none}.festival-detail-hero,.progress-layout{grid-template-columns:1fr}.content{background:var(--bg)}}
