:root{--bg: #121212;--surface: #181818;--elevated: #282828;--green: #1db954;--green-hover: #1ed760;--text: #ffffff;--muted: #b3b3b3;--line: #333333;font-family:DM Sans,system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.45}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse 80% 50% at 10% -10%,rgba(29,185,84,.18),transparent),var(--bg)}.page{max-width:920px;margin:0 auto;padding:1.5rem 1.25rem 3rem}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem}.brand{display:flex;align-items:center;gap:.65rem;font-weight:700;font-size:1.25rem;letter-spacing:-.02em}.logo{width:1.35rem;height:1.35rem;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #1db95433}.ghost{color:var(--muted);text-decoration:none;font-size:.95rem}.ghost:hover{color:var(--text)}.top-links{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;justify-content:flex-end}.bmc-btn{display:inline-flex;align-items:center;gap:.45rem;background:#fd0;color:#0d0c22;font-weight:800;font-size:1rem;text-decoration:none;padding:.7rem 1.15rem;border-radius:999px;box-shadow:0 2px #e6c700;transition:transform .15s ease,filter .15s ease}.bmc-btn:hover{filter:brightness(1.05);transform:scale(1.03)}.bmc-cup{font-size:1.15rem;line-height:1}.hero h1{font-size:clamp(2rem,5vw,3rem);line-height:1.1;letter-spacing:-.03em;margin:.4rem 0 1rem;max-width:16ch}.eyebrow{color:var(--green);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin:0}.lede{color:var(--muted);font-size:1.15rem;max-width:38rem;margin:0 0 1.75rem}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.btn{border:none;border-radius:999px;padding:.85rem 1.5rem;font:inherit;font-weight:700;cursor:pointer}.btn.primary{background:var(--green);color:#000}.btn.primary:disabled{opacity:.55;cursor:not-allowed}.btn.primary:not(:disabled):hover{background:var(--green-hover);transform:scale(1.02)}.soon{color:var(--muted);font-size:.9rem}.panel{margin-top:3rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.5rem 1.5rem 1.25rem}.panel h2{margin:0 0 1rem;font-size:1.15rem}.tour-guide{margin:0 0 1.35rem}.tour-stage{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#0a0a0a}.tour-stage img{display:block;width:100%;height:auto;vertical-align:middle}.tour-pin{position:absolute;z-index:2;display:flex;align-items:center;gap:.35rem;pointer-events:none;max-width:min(42%,220px)}.tour-pin.side-right{flex-direction:row;transform:translateY(-50%)}.tour-pin.side-left{flex-direction:row-reverse;transform:translate(-100%,-50%)}.tour-dot{flex-shrink:0;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--green);color:#000;font-size:.7rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #1db95447}.tour-arrow{flex-shrink:0;width:1.6rem;height:2px;background:var(--green);position:relative}.tour-pin.side-right .tour-arrow:after,.tour-pin.side-left .tour-arrow:after{content:"";position:absolute;top:50%;border:5px solid transparent}.tour-pin.side-right .tour-arrow:after{right:-2px;transform:translateY(-50%);border-left-color:var(--green);border-right-width:0}.tour-pin.side-left .tour-arrow:after{left:-2px;transform:translateY(-50%);border-right-color:var(--green);border-left-width:0}.tour-chip{background:#121212eb;border:1px solid rgba(29,185,84,.45);color:var(--text);font-size:.7rem;font-weight:600;line-height:1.25;padding:.35rem .5rem;border-radius:8px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.tour-legend{margin:.85rem 0 0}.tour-legend ol{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}.tour-legend li{display:flex;gap:.65rem;align-items:flex-start;color:var(--muted);font-size:.9rem;line-height:1.35}.tour-legend strong{color:var(--text);font-weight:600}.tour-n{flex-shrink:0;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--green);color:#000;font-size:.7rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-top:.1rem}.features{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}.features li{background:var(--elevated);border-radius:10px;color:var(--muted);position:relative;padding:.85rem 1rem .85rem 2.2rem}.features li:before{content:"";position:absolute;left:.9rem;top:1.15rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--green)}.foot{margin-top:2.5rem;color:var(--muted);font-size:.85rem}.foot a{color:#7dd3fc;text-decoration:none;font-weight:600}.foot a:hover{color:#bae6fd;text-decoration:underline}.banner{border-radius:10px;padding:.85rem 1rem;margin:0 0 1.25rem;font-size:.95rem}.banner.error{background:#ff505026;border:1px solid rgba(255,80,80,.35);color:#ffb4b4}.banner.warn{background:#ffc83c1f;border:1px solid rgba(255,200,60,.3);color:#ffe08a}.banner code{font-size:.9em}.muted{color:var(--muted)}.app-shell{min-height:100vh;display:flex;flex-direction:column}.app-top{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--line);background:#121212e6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}.app-top-right{display:flex;align-items:center;gap:.75rem}.user-chip{color:var(--muted);font-size:.95rem}.ghost-btn{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;font:inherit;font-weight:600;cursor:pointer}.ghost-btn:hover{border-color:var(--muted)}.app-body{display:grid;grid-template-columns:minmax(240px,320px) 1fr;flex:1;min-height:0}.sidebar{border-right:1px solid var(--line);background:var(--surface);padding:1rem;overflow:auto;max-height:calc(100vh - 64px)}.sidebar h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .75rem}.playlist-list{display:flex;flex-direction:column;gap:.35rem}.playlist-item{display:flex;gap:.75rem;align-items:center;width:100%;text-align:left;background:transparent;border:none;border-radius:8px;padding:.5rem;color:inherit;font:inherit;cursor:pointer}.playlist-item:hover,.playlist-item.active{background:var(--elevated)}.playlist-art{width:48px;height:48px;border-radius:4px;object-fit:cover;flex-shrink:0}.playlist-art.liked-art{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#450af5,#8e8ee5)}.playlist-art.liked-art:after{content:"♥";color:#fff;font-size:1.35rem;line-height:1}.playlist-row.liked-songs .playlist-name{font-weight:700}.playlist-meta{display:flex;flex-direction:column;gap:.15rem;min-width:0}.playlist-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-count{font-size:.8rem;color:var(--muted)}.main-pane{padding:1.25rem 1.5rem 2rem;overflow:auto;max-height:calc(100vh - 64px)}.track-header .muted{margin:.35rem 0 0}.track-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .5rem}.track-title-row h2{margin:0;min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-title-actions{display:flex;align-items:center;gap:.15rem;flex-shrink:0}.icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:.5rem;border:none;border-radius:8px;background:transparent;cursor:pointer;color:var(--muted)}.icon-btn:hover{background:var(--elevated)}.icon-btn.rename{color:#4c8bf5}.icon-btn.rename:hover{color:#6ba3ff}.icon-btn.delete{color:#e91429}.icon-btn.delete:hover{color:#ff4d5e}.track-table{width:100%;border-collapse:collapse;margin-top:1rem}.track-table th{text-align:left;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:.5rem;border-bottom:1px solid var(--line)}.track-table td{padding:.65rem .5rem;border-bottom:1px solid rgba(51,51,51,.6);vertical-align:middle}.track-table .num,.track-table .dur{color:var(--muted);width:3rem;font-variant-numeric:tabular-nums}.track-title{font-weight:600}.track-artist{color:var(--muted);font-size:.9rem}.track-unavailable .track-title,.track-unavailable .track-artist,.track-unavailable .num,.track-unavailable .dur{color:#6b6b6b}.track-unavailable .track-title{font-style:italic;font-weight:500}.badge{display:inline-block;font-size:.7rem;font-style:normal;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#c4c4c4;border:1px solid #555;border-radius:4px;padding:.1rem .35rem;margin-left:.35rem;vertical-align:middle}.field{width:100%;background:var(--elevated);border:1px solid var(--line);border-radius:8px;color:var(--text);font:inherit;padding:.55rem .75rem}.field:focus{outline:2px solid rgba(29,185,84,.45);border-color:var(--green)}.field.narrow{width:5.5rem;flex:0 0 auto}.sidebar-search{margin-bottom:.65rem}.sidebar-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}.ghost-btn.small,.btn.small{padding:.35rem .7rem;font-size:.85rem}.ghost-btn:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}.playlist-row{display:flex;align-items:center;gap:.25rem;border-radius:8px}.playlist-row.active{background:var(--elevated)}.playlist-row .playlist-item{flex:1;min-width:0}.merge-check{display:flex;align-items:center;padding:0 .15rem 0 .35rem;cursor:pointer}.filter-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.85rem 0 .25rem}.filter-row .field{width:auto;flex:1 1 12rem;min-width:8rem}.check-row{display:flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.9rem}.check-row.inline{white-space:nowrap}.check-col{width:2rem}.track-table input[type=checkbox]{accent-color:var(--green);width:1rem;height:1rem;cursor:pointer}.bulk-bar{position:sticky;bottom:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:#181818f5;border-top:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:20}.bulk-count{font-weight:700;margin-right:.35rem}.danger-text{color:#ff8f8f!important;border-color:#ff646459!important}.btn.danger{background:#e91429;color:#fff;border-radius:999px;padding:.85rem 1.5rem;font:inherit;font-weight:700;border:none;cursor:pointer}.btn.danger:hover{filter:brightness(1.08)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.modal{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.25rem 1.35rem;width:min(420px,100%);max-height:min(80vh,640px);overflow:auto}.modal.wide{width:min(480px,100%)}.modal h3{margin:0 0 .5rem}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.15rem}.field-label{display:flex;flex-direction:column;gap:.35rem;margin-top:.75rem;font-size:.85rem;color:var(--muted)}.dest-list{display:flex;flex-direction:column;gap:.25rem;max-height:240px;overflow:auto;margin-top:.65rem}.dest-item{text-align:left;background:var(--elevated);border:none;border-radius:8px;color:inherit;font:inherit;padding:.65rem .85rem;cursor:pointer}.dest-item:hover,.dest-item.active{outline:1px solid var(--green)}.merge-mode{border:none;padding:0;margin:.75rem 0;display:flex;gap:1rem;color:var(--muted)}.toast{position:fixed;bottom:5.5rem;left:50%;transform:translate(-50%) translateY(12px);background:var(--elevated);border:1px solid var(--line);border-radius:999px;padding:.65rem 1.15rem;z-index:120;opacity:0;transition:opacity .2s,transform .2s;max-width:min(90vw,420px);text-align:center}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.toast.with-link{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.65rem;border-radius:12px}.toast.with-link a{color:var(--green);font-weight:700;text-decoration:none}.import-pl-list{margin:.75rem 0;padding-left:1.25rem;max-height:200px;overflow:auto;color:var(--muted);font-size:.95rem}.import-pl-list strong{color:var(--text);font-weight:600}@media(max-width:800px){.app-body{grid-template-columns:1fr}.sidebar{max-height:40vh;border-right:none;border-bottom:1px solid var(--line)}.main-pane{max-height:none}.bulk-bar{bottom:0}.tour-pin{display:none}}