/* FRONTIER // DECODED — The Rundown (playlist.html) */
.pl{--pl-cy:#30CBDD;--pl-field:#052a2e;--pl-line:rgba(48,203,221,.22);--pl-dim:#9fbcc0;--pl-amb:#ffb547}
.pl-app{display:grid;grid-template-columns:250px 1fr;gap:22px;margin-top:22px;align-items:start}
.pl-side{position:sticky;top:90px;display:grid;gap:10px}
.pl-new{border:0;border-radius:999px;background:var(--pl-cy);color:#002;font:700 15px Inter,system-ui,sans-serif;padding:12px 16px;cursor:pointer}
.pl-new:hover{filter:brightness(1.08)}
.pl .pl-h{font:600 11px/1.4 "JetBrains Mono",monospace!important;letter-spacing:.14em!important;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-dim);margin:8px 0 0}
.pl-saved{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pl-saved button{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;width:100%;text-align:left;border:1px solid transparent;background:rgba(0,0,0,.25);border-radius:10px;padding:6px;cursor:pointer;color:inherit}
.pl-saved button[aria-current="true"],.pl-saved button:hover{border-color:var(--pl-line)}
.pl-saved canvas,.pl-saved .mini{width:44px;height:44px;border-radius:6px;display:block}
.pl-saved b{display:block;font:600 13px Inter,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pl-saved span{font:500 11px "JetBrains Mono",monospace;color:var(--pl-dim)}
.pl-saved .none{color:var(--pl-dim);font-size:13px;padding:6px 2px}
/* empty + builder */
.pl-empty{border:1px dashed var(--pl-line);border-radius:18px;padding:48px 24px;text-align:center;display:grid;gap:12px;justify-items:center;background:radial-gradient(ellipse at 50% 0%,rgba(48,203,221,.08),transparent 60%)}
.pl-empty .disc{width:120px;height:120px;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#062f33 0 3px,#041d20 3px 6px);box-shadow:inset 0 0 0 38px #031417,0 0 0 1px var(--pl-line);position:relative}
.pl-empty .disc:after{content:"";position:absolute;inset:50px;border-radius:50%;background:var(--pl-cy)}
.pl .pl-empty h2{font:800 28px Exo,"Saira Condensed",sans-serif;margin:6px 0 0;color:#fff}.pl-empty p{color:var(--pl-dim);max-width:520px;margin:0}
.pl-build{border:1px solid var(--pl-line);border-radius:18px;padding:22px;background:rgba(0,0,0,.28);display:grid;gap:18px}
.pl-build label.big{display:grid;gap:8px;font:600 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-dim)}
.pl-build input[type=text]{background:#021316;border:1px solid var(--pl-line);color:#fff;border-radius:12px;padding:14px 16px;font:500 17px Inter,sans-serif;width:100%}
.pl-row{display:grid;gap:8px}.pl-row>span{font:600 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-dim)}
.pl-chips{display:flex;flex-wrap:wrap;gap:6px}
.pl-chips button{border:1px solid var(--pl-line);background:transparent;color:#cfe0e2;border-radius:999px;padding:6px 12px;font:500 13px Inter,sans-serif;cursor:pointer}
.pl-chips button[aria-pressed="true"]{background:var(--pl-cy);border-color:var(--pl-cy);color:#002;font-weight:700}
.pl-chips button small{opacity:.7;margin-left:4px;font:500 11px "JetBrains Mono",monospace}
.pl-go{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pl-btn{border:1px solid var(--pl-cy);background:transparent;color:var(--pl-cy);border-radius:999px;padding:10px 18px;font:700 14px Inter,sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.pl-btn.solid{background:var(--pl-cy);color:#002}.pl-btn.ghost{border-color:var(--pl-line);color:#e9f4f5}.pl-btn[disabled]{opacity:.45;cursor:default}
.pl-note{font:500 12px "JetBrains Mono",monospace;color:var(--pl-dim)}
/* generating */
.pl-gen{display:grid;justify-items:center;gap:18px;padding:60px 10px}
.pl-gen .stack{position:relative;width:220px;height:220px}
.pl-gen .stack div{position:absolute;inset:0;border-radius:14px;border:1px solid var(--pl-line);background:#041f22;display:flex;align-items:flex-end;padding:12px;font:600 12px "JetBrains Mono",monospace;color:var(--pl-dim);animation:plShuffle 1.6s ease-in-out infinite}
.pl-gen .stack div:nth-child(2){animation-delay:.2s}.pl-gen .stack div:nth-child(3){animation-delay:.4s}
@keyframes plShuffle{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-26px,-10px) rotate(-6deg)}60%{transform:translate(24px,8px) rotate(5deg)}}
.pl-gen b{font:700 18px Inter,sans-serif;color:#fff}
/* playlist */
.pl-head{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:end}
.pl-cover{width:240px;height:240px;border-radius:16px;display:block;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.pl-meta .k{font:600 11px "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--pl-cy)}
.pl .pl-meta h2{font:800 clamp(30px,4.2vw,58px)/1 Exo,"Saira Condensed",sans-serif;margin:8px 0 10px;color:#fff;letter-spacing:-.01em}
.pl-meta p{color:var(--pl-dim);margin:0 0 14px;font-size:14px}
.pl-acts{display:flex;flex-wrap:wrap;gap:8px}
.pl-play{width:56px;height:56px;border-radius:50%;border:0;background:var(--pl-cy);color:#002;font-size:22px;cursor:pointer;box-shadow:0 8px 24px rgba(48,203,221,.35)}
.pl-now{margin:20px 0 6px;border:1px solid var(--pl-line);border-radius:14px;padding:14px 16px;background:rgba(0,0,0,.3);display:grid;gap:6px}
.pl-now[hidden]{display:none}
.pl-now .who{font:600 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--pl-cy)}
.pl-now .cap{font:500 17px/1.55 Inter,sans-serif;color:#fff;min-height:2.2em}
.pl-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}.pl-bar i{display:block;height:100%;width:0;background:var(--pl-cy);transition:width .4s}
.pl-tracks{list-style:none;margin:18px 0 0;padding:0;counter-reset:t}
.pl-tracks>li{border-top:1px solid rgba(255,255,255,.07)}
.pl-tr{display:grid;grid-template-columns:28px 48px 1fr auto auto;gap:12px;align-items:center;padding:10px 6px;border-radius:10px;cursor:pointer}
.pl-tr:hover,.pl-tracks li.open .pl-tr{background:rgba(48,203,221,.06)}.pl-tracks li.on .pl-tr{background:rgba(48,203,221,.12)}
.pl-tr .n{font:600 13px "JetBrains Mono",monospace;color:var(--pl-dim);text-align:right}.pl-tracks li.on .n{color:var(--pl-cy)}
.pl-tr .art{width:48px;height:48px;border-radius:8px;object-fit:cover;display:block;background:#041f22}
.pl-tr b{display:block;font:600 15px Inter,sans-serif;color:#fff;line-height:1.3}.pl-tr .by{font:500 12px "JetBrains Mono",monospace;color:var(--pl-dim)}
.pl-tr .t{font:500 12px "JetBrains Mono",monospace;color:var(--pl-dim)}
.pl-tr .mv{display:flex;gap:2px}.pl-tr .mv button{width:28px;height:28px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--pl-dim);cursor:pointer}.pl-tr .mv button:hover{border-color:var(--pl-line);color:#fff}
.pl-det{display:none;padding:4px 6px 16px 94px;font-size:14px;color:#cfe0e2;line-height:1.6}
.pl-tracks li.open .pl-det{display:block}
.pl-det .hook{font:500 15px Inter,sans-serif;color:#fff;margin:4px 0 8px}.pl-det .hook:before{content:"VICTORIA · ";font:600 11px "JetBrains Mono",monospace;color:var(--pl-cy);letter-spacing:.1em}
.pl-det .fact{border-left:2px solid var(--pl-cy);padding:2px 0 2px 10px;margin:8px 0}
.pl-det a{color:var(--pl-cy)}
.pl-owner{margin-top:22px;border:1px solid var(--pl-amb);border-radius:14px;padding:14px 16px;background:rgba(255,181,71,.06)}
.pl-owner b{color:var(--pl-amb);font:600 11px "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.pl-toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:#031b1e;border:1px solid var(--pl-cy);color:#fff;padding:10px 16px;border-radius:999px;font:600 13px Inter,sans-serif;z-index:60}
@media (max-width:860px){.pl-app{grid-template-columns:1fr}.pl-side{position:static}.pl-head{grid-template-columns:1fr}.pl-cover{width:min(240px,70vw);height:min(240px,70vw)}
 .pl-tr{grid-template-columns:22px 40px 1fr auto}.pl-tr .t{display:none}.pl-tr .art{width:40px;height:40px}.pl-det{padding-left:8px}}
@media (prefers-reduced-motion:reduce){.pl-gen .stack div{animation:none}}