:root{--bg: #121212;--panel: #181818;--muted: #b3b3b3;--accent: #1db954}*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background-color:var(--bg);color:#fff}.btn-primary{background:var(--accent);color:#fff;border:none;padding:.75em 1.5em;border-radius:.5em;cursor:pointer;font-weight:600;font-size:1.25rem}.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;padding:.75em 1.5em;border-radius:.5em;cursor:pointer;font-size:1.15rem}.landing{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;height:100vh;text-align:center}.app-error-banner{position:fixed;top:0;left:0;right:0;background-color:#d32f2f;color:#fff;padding:1em 1.75em;display:flex;justify-content:space-between;align-items:center;z-index:1}.app-error-banner button{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;padding:0;width:2rem;height:2rem}.app-loading{min-height:100vh}.app-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3em;gap:1em}header{display:flex;align-items:center;justify-content:space-between;padding:1em 2em;background:#000000bf;position:sticky;top:0}.filter-bar{display:flex;justify-content:center;flex-wrap:wrap;margin:0 .75em}.sentence{display:flex;align-items:center;flex-wrap:wrap;gap:.5em;color:#fff;font-size:1.5rem;font-weight:600}.inline-select{background:#ffffff80;color:#fff;border:1px solid rgba(0,0,0,.25);padding:.5em 1em;border-radius:.5em;font-size:1.25rem}.top-list{margin:2em}.top-list-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:.5rem;text-align:center;color:#999}.top-list-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3em;gap:1em}.top-list-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3em;gap:1.5em;text-align:center}.top-list-error p{color:#d32f2f;font-size:1.1rem}.top-list-action{display:flex;justify-content:center;margin-top:2.5em;margin-bottom:1.5em}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5em}.item{display:flex;flex-direction:column;background:var(--panel);border-radius:.5em;overflow:hidden}.item-img{width:100%;height:160px;object-fit:cover;background:#000}.item-body{padding:.75em}.modal-overlay{position:fixed;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:999}.modal{width:90%;max-width:720px;background:#171717;border-radius:.75em;padding:1.5em;position:relative;color:#fff}.modal-close-btn{position:absolute;right:1em;top:1em;border:none;background:none;color:#fff;font-size:1.5rem;cursor:pointer}.modal-actions{display:flex;gap:.5em;justify-content:flex-end;margin-top:.5em}.playlist-name-input{width:100%;padding:.5em;border-radius:.5em;border:1px solid #333;background:#111;color:#fff;margin-bottom:1em;font-size:1.15rem}.playlist-status-success{padding:1em;background-color:#1db9541a;border:1px solid rgba(29,185,84,.3);border-radius:.5em;margin:1em 0;color:#1db954}.playlist-status-success a{color:#1db954;text-decoration:underline;font-weight:600}.playlist-error-message{padding:1em;background-color:#d32f2f1a;border:1px solid rgba(211,47,47,.3);border-radius:.5em;margin:1em 0;color:#d32f2f}.collage-grid{display:grid;gap:.25em;width:100%;background:#000;margin-bottom:1em}.collage-img{width:100%;height:100%;object-fit:cover}