:root{--bg: #0f0f23;--surface: #1a1832;--surface-2: #242145;--line: rgba(255, 255, 255, .09);--violet: #7c5cff;--pink: #ff4d8d;--green: #22c55e;--spotify: #1db954;--youtube: #ff0033;--amber: #ffc24b;--text: #f8fafc;--muted: #9b98c0;--grad: linear-gradient(135deg, var(--violet), var(--pink));--radius: 18px;--font-display: "Righteous", system-ui, sans-serif;--font-body: "Poppins", system-ui, sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}#root{min-height:100%}img{max-width:100%;display:block}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}input{font:inherit}.muted{color:var(--muted);font-weight:400}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 22px;border-radius:var(--radius);font-weight:600;font-size:16px;transition:filter .2s,opacity .2s,background-color .2s;text-decoration:none}.btn:hover{filter:brightness(1.1)}.btn:disabled{opacity:.45;cursor:default;filter:none}.btn:focus-visible,.icon-btn:focus-visible,.tab:focus-visible{outline:2px solid var(--violet);outline-offset:2px}.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 24px #7c5cff59}.btn-spotify{background:var(--spotify);color:#05230f}.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}.btn-ghost:hover{background:#ffffff0d;filter:none}.btn-surface{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}.btn-block{width:100%}.btn-inline{min-height:46px;padding:0 16px;flex:none}.btn-small{min-height:36px;padding:0 14px;border-radius:12px;font-size:14px;font-weight:600}.btn-danger{background:#e11d48;color:#fff}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;color:var(--text);transition:background-color .2s,color .2s;flex:none}.icon-btn:hover{background:#ffffff14}.icon-btn-muted{color:var(--muted)}.icon-btn-play{background:var(--grad);color:#fff}.icon-btn-add{background:var(--surface-2);border:1px solid var(--line)}.icon-btn-added{color:var(--green);cursor:default}.chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em}.chip-demo{background:#ffc24b29;color:var(--amber)}.chip-live{background:#22c55e29;color:var(--green)}.chip-off{background:#ffffff12;color:var(--muted)}.chip-src{background:#ffffff14;color:var(--text)}.chip-spotify{color:var(--spotify)}.chip-youtube{color:#ff6b81}.page{max-width:560px;margin:0 auto;min-height:100dvh;padding:calc(env(safe-area-inset-top) + 8px) 18px calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;padding:10px 0 18px}.topbar-brand{display:flex;align-items:center;gap:10px;flex:1}.topbar-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:var(--grad);color:#fff}.topbar-title{font-family:var(--font-display);font-size:19px;letter-spacing:.02em}.topbar-user{display:flex;align-items:center;gap:8px}.topbar-name{font-size:14px;color:var(--muted);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.section-title{font-family:var(--font-display);font-size:20px;font-weight:400;letter-spacing:.01em}.splash{min-height:100dvh;display:grid;place-items:center}.splash-mark{width:84px;height:84px;border-radius:26px;background:var(--grad);display:grid;place-items:center;color:#fff;animation:pulse-soft 1.6s ease-in-out infinite}.login{min-height:100dvh;display:grid;place-items:center;position:relative;overflow:hidden;padding:24px}.login-glow{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(120px);opacity:.35;pointer-events:none}.login-glow-a{background:var(--violet);top:-140px;left:-120px}.login-glow-b{background:var(--pink);bottom:-160px;right:-120px}.login-body{position:relative;width:100%;max-width:380px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}.login-mark{width:88px;height:88px;border-radius:28px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 16px 48px #7c5cff73}.login-title{font-family:var(--font-display);font-size:44px;font-weight:400;letter-spacing:.02em;background:linear-gradient(135deg,#fff,#c9bfff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.login-tagline{color:var(--muted);font-size:16px}.login-actions{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:8px}.login-footnote{font-size:13px;color:var(--muted);max-width:300px}.notice{background:#ffc24b1f;border:1px solid rgba(255,194,75,.3);color:var(--amber);border-radius:14px;padding:12px 16px;font-size:14px}.notice-error{background:#e11d481f;border-color:#e11d4859;color:#fda4af}.home-main{display:flex;flex-direction:column;gap:18px;flex:1}.playlist-cards{list-style:none;display:flex;flex-direction:column;gap:12px}.playlist-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 14px 16px 18px;cursor:pointer;transition:background-color .2s,border-color .2s}.playlist-card:hover{background:var(--surface-2);border-color:#7c5cff66}.playlist-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.playlist-card-name{font-weight:600;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-card-meta{font-size:13px;color:var(--muted)}.playlist-card-actions{display:flex;align-items:center;gap:6px}.create-form{display:flex;gap:10px}.input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;color:var(--text);padding:12px 16px;font-size:16px}.input:focus{outline:none;border-color:var(--violet)}.empty{text-align:center;color:var(--muted);padding:40px 20px;display:flex;flex-direction:column;align-items:center;gap:12px}.empty-icon{opacity:.4}.skeleton-list{display:flex;flex-direction:column;gap:12px}.skeleton-card{height:76px;border-radius:var(--radius);background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}.builder{padding-bottom:calc(env(safe-area-inset-bottom) + 96px)}.name-input{flex:1;min-width:0;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text);font-family:var(--font-display);font-size:20px;padding:4px 2px}.name-input:focus{outline:none;border-bottom-color:var(--violet)}.settings-row{display:flex;gap:10px;margin-bottom:16px}.stepper{flex:1;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 10px}.stepper-label{font-size:12px;color:var(--muted);flex:1;text-transform:uppercase;letter-spacing:.06em}.stepper-btn{width:34px;height:34px;border-radius:10px;background:var(--surface-2);font-size:18px;font-weight:600;transition:background-color .2s}.stepper-btn:hover{background:#7c5cff4d}.stepper-value{font-family:var(--font-display);font-size:18px;min-width:34px;text-align:center}.search-section{margin-bottom:22px}.search-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.tabs{flex:1;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:4px;gap:4px}.tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;border-radius:11px;font-size:14px;font-weight:600;color:var(--muted);transition:background-color .2s,color .2s}.tab-active{background:var(--surface-2);color:var(--text)}.search-box{position:relative;margin-bottom:8px}.search-box-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}.search-input{width:100%;padding-left:44px}.search-note{font-size:12px;color:var(--amber);margin-bottom:8px;padding-left:4px}.search-note-ok{color:var(--green)}.import-card{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid rgba(124,92,255,.5);border-radius:14px;padding:12px 12px 12px 16px;margin-bottom:8px}.results{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;border-radius:14px}.results-hint{color:var(--muted);font-size:14px;padding:12px 4px}.result-row{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:8px 10px}.thumb{width:46px;height:46px;border-radius:10px;overflow:hidden;flex:none}.thumb img{width:100%;height:100%;object-fit:cover}.row-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.row-title{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-sub{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px}.src-icon{flex:none}.src-spotify{color:var(--spotify)}.src-youtube{color:#ff6b81}.clip-chip{background:#7c5cff2e;color:#c9bfff;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;flex:none}.songs-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}.meter{height:6px;border-radius:999px;background:var(--surface);overflow:hidden;margin-bottom:14px}.meter-fill{height:100%;border-radius:999px;background:var(--grad);transition:width .3s}.song-list{list-style:none;display:flex;flex-direction:column;gap:8px}.song-row{background:var(--surface);border:1px solid var(--line);border-radius:14px;transition:transform .15s;position:relative}.song-row.dragging{box-shadow:0 12px 32px #00000080;border-color:var(--violet)}.song-row-main{display:flex;align-items:center;gap:10px;height:60px;padding:0 4px 0 12px;cursor:pointer}.song-num{font-family:var(--font-display);font-size:14px;color:var(--muted);min-width:22px;text-align:center}.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:60px;color:var(--muted);touch-action:none;cursor:grab}.clip-editor{padding:4px 16px 16px;display:flex;flex-direction:column;gap:8px}.clip-editor-label{font-size:13px;color:var(--muted)}.clip-editor-label strong{color:var(--text)}.slider{width:100%;accent-color:var(--violet);height:32px}.start-bar{position:fixed;left:0;right:0;bottom:0;padding:12px 18px calc(env(safe-area-inset-bottom) + 12px);background:linear-gradient(to top,var(--bg) 65%,transparent);display:flex;justify-content:center}.start-bar .btn{max-width:524px}.btn-start{font-family:var(--font-display);font-size:18px;letter-spacing:.03em;min-height:58px}.session{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 8px) 18px calc(env(safe-area-inset-bottom) + 18px)}.session-idle{display:grid;place-items:center}.session-top{display:flex;align-items:center;gap:10px;padding-bottom:14px}.session-name{flex:1;font-family:var(--font-display);font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media{position:relative;width:100%;aspect-ratio:16 / 10;border-radius:22px;overflow:hidden;background:var(--surface);border:1px solid var(--line);flex:none}.media-frame,.media-frame iframe,#yt-target{width:100%;height:100%}.media-art{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center}.media-art img{width:100%;height:100%;object-fit:cover}.media-idle-mark{color:#ffffffe6;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4))}.drink-flash{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#0f0f23b8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:flash-in .25s ease-out;z-index:5}.drink-flash span{font-family:var(--font-display);font-size:56px;letter-spacing:.06em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:drink-pop .5s cubic-bezier(.2,1.6,.4,1)}.session-idle-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:24px 0}.idle-title{font-family:var(--font-display);font-size:24px;font-weight:400}.idle-sub{color:var(--muted);margin-bottom:14px}.shuffle-toggle{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text);margin-bottom:22px;cursor:pointer}.shuffle-toggle input{width:18px;height:18px;accent-color:var(--violet)}.pulse{animation:pulse-glow 2s ease-in-out infinite}.now-playing{display:flex;align-items:center;gap:18px;padding:22px 2px 10px;flex:1}.ring-wrap{position:relative;width:128px;height:128px;flex:none}.ring{width:100%;height:100%;transform:rotate(-90deg)}.ring-track{fill:none;stroke:var(--surface-2);stroke-width:8}.ring-fill{fill:none;stroke:url(#ringGrad),var(--violet);stroke:var(--violet);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .25s linear}.ring-num{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-family:var(--font-display);font-size:44px}.np-info{min-width:0;display:flex;flex-direction:column;gap:3px}.np-count{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.np-title{font-weight:700;font-size:19px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.np-artist{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.np-badges{display:flex;align-items:center;gap:6px;margin-top:6px}.link-btn{color:#c9bfff;font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:2px}.seek-bar{padding:0 2px 6px}.seek-slider{width:100%;margin-bottom:2px}.seek-times{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.device-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}.device-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls{display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 0 18px}.ctl{width:54px;height:54px;color:var(--text)}.ctl-spacer{width:0}.play-btn{width:78px;height:78px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:0 10px 32px #ff4d8d66;transition:filter .2s}.play-btn:hover{filter:brightness(1.12)}.session-progress{padding-bottom:6px}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#080814cc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;place-items:center;padding:24px;z-index:50}.overlay-card{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:12px}.overlay-card h3{font-family:var(--font-display);font-weight:400;font-size:20px}.overlay-card p{color:var(--muted);font-size:14px}.device-list{list-style:none;display:flex;flex-direction:column;gap:8px}.overlay-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}.finished{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px 10px}.finished-mark{width:96px;height:96px;border-radius:30px;background:var(--grad);display:grid;place-items:center;color:#fff;box-shadow:0 18px 56px #ff4d8d73;animation:pulse-glow 2s ease-in-out infinite}.finished-title{font-family:var(--font-display);font-size:32px;font-weight:400}.finished-sub{color:var(--muted);margin-bottom:14px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes pulse-soft{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}@keyframes pulse-glow{0%,to{box-shadow:0 8px 24px #7c5cff59}50%{box-shadow:0 8px 44px #ff4d8d99}}@keyframes flash-in{0%{opacity:0}to{opacity:1}}@keyframes drink-pop{0%{transform:scale(.4)}to{transform:scale(1)}}@media (prefers-reduced-motion: reduce){.pulse,.finished-mark,.splash-mark,.skeleton-card,.drink-flash,.drink-flash span{animation:none}*{transition-duration:.01ms!important}}@media (min-width: 480px){.drink-flash span{font-size:72px}}