:root{ --ink:#33324a; --card:rgba(255,255,255,.66); --accent:#ff8fc7; --accent2:#8ecbff;
  --bubble:#ffffff; font-family:'Quicksand','Inter',system-ui,sans-serif; }
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;color:var(--ink);overflow-x:hidden}
/* sky */
.sky{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,#bfe3ff 0%,#dff0ff 40%,#ffe6f3 100%)}
.clouds span{position:absolute;background:#fff;border-radius:50%;filter:blur(2px);opacity:.75;
  box-shadow:60px 10px 0 10px #fff,120px 0 0 0 #fff,-50px 12px 0 6px #fff}
.clouds span:nth-child(1){top:12%;width:90px;height:60px;animation:drift 90s linear infinite}
.clouds span:nth-child(2){top:28%;width:70px;height:46px;opacity:.6;animation:drift 130s linear infinite}
.clouds span:nth-child(3){top:50%;width:110px;height:70px;opacity:.5;animation:drift 160s linear infinite}
.clouds span:nth-child(4){top:8%;width:60px;height:40px;opacity:.55;animation:drift 110s linear infinite reverse}
@keyframes drift{from{left:-200px}to{left:110vw}}
#petals{position:fixed;inset:0;z-index:-1;pointer-events:none}
@media(prefers-reduced-motion:reduce){.clouds span{animation:none}}
/* stage */
.stage{max-width:560px;margin:0 auto;padding:1rem 1rem 4rem;display:flex;flex-direction:column;gap:1rem}
.topbar{display:flex;justify-content:center;padding:.6rem}
.logo{font-size:1.4rem;font-weight:700;color:#fff;text-shadow:0 2px 8px #ffb3d9}
.logo b{color:#fff}
.picker-bar{display:flex;gap:.5rem;align-items:center}
#playlist-picker{flex:1;border:none;border-radius:999px;padding:.7rem 1rem;background:var(--card);
  backdrop-filter:blur(8px);color:var(--ink);font:inherit;font-weight:600;box-shadow:0 6px 20px #c9a9d533}
button{font:inherit;cursor:pointer;border:none}
.ghost{background:var(--card);border-radius:999px;padding:.7rem 1rem;font-weight:600;color:var(--ink);backdrop-filter:blur(8px)}
.solid{background:linear-gradient(120deg,var(--accent),#ffb3da);color:#fff;border-radius:999px;padding:.6rem 1.2rem;font-weight:700}
/* player card */
.player{background:var(--card);backdrop-filter:blur(14px);border-radius:30px;padding:1.4rem;
  box-shadow:0 20px 50px #b98ec955, inset 0 1px 0 #fff;display:flex;flex-direction:column;gap:.9rem;align-items:center}
.art{width:190px;height:190px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff,#ffd6ec 60%,#cfe6ff);box-shadow:0 12px 30px #e29ac855}
.art.spin .disc{animation:spin 6s linear infinite}
.disc{width:60px;height:60px;border-radius:50%;background:#33324a;box-shadow:0 0 0 6px #fff7, inset 0 0 0 10px #fff3}
@keyframes spin{to{transform:rotate(360deg)}}
.now{text-align:center} .now-title{font-size:1.15rem;font-weight:700}
.now-artist{color:#8a7f95}
.seek-row{display:flex;align-items:center;gap:.6rem;width:100%;font-size:.8rem;color:#7a7090}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));outline:none}
#seek{flex:1}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px #0003;cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#fff;cursor:pointer}
.controls{display:flex;align-items:center;gap:.7rem}
.ctl{width:46px;height:46px;border-radius:50%;background:var(--bubble);font-size:1.1rem;
  box-shadow:0 6px 16px #c79bc955;display:grid;place-items:center;transition:transform .1s}
.ctl:active{transform:scale(.9)} .ctl.play{width:62px;height:62px;font-size:1.4rem;
  background:linear-gradient(135deg,var(--accent),#ffb3da);color:#fff}
.ctl.on{outline:3px solid var(--accent);background:#fff}
.vol-row{display:flex;align-items:center;gap:.5rem;width:70%} #volume{flex:1}
.queue{list-style:none;margin:.4rem 0 0;padding:0;width:100%;max-height:200px;overflow:auto;display:flex;flex-direction:column;gap:.25rem}
.queue li{padding:.5rem .8rem;border-radius:12px;background:#ffffff66;cursor:pointer;font-size:.9rem;display:flex;gap:.5rem}
.queue li.active{background:#fff;font-weight:700;box-shadow:0 4px 12px #d39ec955}
.queue li .q-artist{color:#9a8fa8;margin-left:auto}
/* builder modal */
.builder{border:none;border-radius:24px;width:min(560px,94vw);max-height:86vh;background:#fff;color:var(--ink);padding:1.2rem}
.builder::backdrop{background:#3a2a4a66;backdrop-filter:blur(2px)}
.builder header{display:flex;align-items:center;gap:.5rem} .builder header h3{flex:1;margin:0}
#builder-name{width:100%;margin:.7rem 0;border:1px solid #eedcf0;border-radius:12px;padding:.7rem;font:inherit}
.builder-groups{overflow:auto;max-height:50vh;display:flex;flex-direction:column;gap:.8rem}
.bgroup h4{margin:.2rem 0;color:var(--accent)}
.brow{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-radius:10px}
.brow:hover{background:#faf1fb} .brow input{accent-color:var(--accent);width:18px;height:18px}
.builder footer{display:flex;align-items:center;gap:.6rem;margin-top:.8rem} #builder-count{flex:1}
.help{color:#9a8fa8;font-size:.85rem} .error{color:#e0508a}