:root{font-family:Inter,system-ui,sans-serif;color:#0f172a;background:#f3f4f6}body{margin:0;min-height:100vh;background:#0f172a;color:#f8fafc}.app-shell{min-height:100vh;background:linear-gradient(180deg,#020617,#0f172a)}.app-header{display:flex;justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid rgba(255,255,255,.08);background:#020617b3;position:sticky;top:0;z-index:10}.app-header a{color:#f8fafc;text-decoration:none;font-weight:600}.page-container{padding:1rem 2rem}.grid{display:grid;gap:1rem}.panel{background:#0f172ae6;border-radius:.75rem;padding:1rem;border:1px solid rgba(148,163,184,.2)}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.muted{color:#f1f5f9b3;font-size:.85rem}.search-field input{width:100%;padding:.35rem .75rem;border-radius:.5rem;border:1px solid rgba(148,163,184,.4);background:transparent;color:#f8fafc}.list-scroll{max-height:40vh;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem}.list-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-radius:.5rem;border:1px solid transparent;background:#0f172acc;color:#e2e8f0;cursor:pointer;transition:border .2s ease}.list-item.active{border-color:#38bdf8}.album-grid{display:grid;gap:.5rem}.album-card{display:flex;justify-content:space-between;align-items:center;padding:.6rem;border-radius:.5rem;border:1px solid rgba(148,163,184,.2);background:#0f172acc;cursor:pointer}.album-card.active{border-color:#34d399}.track-list{display:flex;flex-direction:column;gap:.2rem}.track-row{display:flex;align-items:center;gap:.75rem;padding:.35rem .25rem}.track-info strong{display:block}.primary-btn,.secondary-btn,.ghost-btn{width:100%;border-radius:.5rem;border:1px solid transparent;padding:.75rem;font-weight:600;cursor:pointer;transition:opacity .2s ease}.primary-btn{background:linear-gradient(90deg,#6366f1,#ec4899);border-color:transparent;color:#fff}.secondary-btn{margin-top:.5rem;background:#3b82f626;color:#bfdbfe;border-color:#3b82f666}.ghost-btn{background:transparent;border-color:#e2e8f099;color:#f1f5f9}.panel-column{display:flex;flex-direction:column;gap:1rem}.grid.layout-three{display:grid;grid-template-columns:.9fr 1.4fr .9fr;gap:1rem;margin-top:1rem}@media (max-width: 1100px){.grid.layout-three{grid-template-columns:1fr}.panel-column{grid-row:auto}}.share-scroll{display:flex;flex-direction:column;gap:.5rem;max-height:50vh;overflow-y:auto}.share-card{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem;padding:.75rem;border-radius:.5rem;border:1px solid rgba(148,163,184,.2);background:#0f172ab3}.share-url code{display:block;background:#0f172ae6;padding:.5rem;border-radius:.5rem;word-break:break-all;font-size:.85rem}.field{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}.field input{border-radius:.5rem;border:1px solid rgba(148,163,184,.3);padding:.5rem;background:transparent;color:#f8fafc}.player-card{display:flex;flex-direction:column;gap:.75rem;padding:1rem;border-radius:.75rem;background:#0f172abf;border:1px solid rgba(148,163,184,.2)}.player-controls{display:flex;gap:.5rem}.player-controls button{border-radius:999px;border:1px solid rgba(148,163,184,.3);background:#1e293be6;color:#f8fafc;font-size:1rem;padding:.5rem .8rem;cursor:pointer}.player-progress{display:flex;align-items:center;gap:.5rem}.progress-bar{flex:1;height:6px;border-radius:999px;background:#94a3b84d;overflow:hidden}.progress-bar>div{height:100%;background:linear-gradient(90deg,#38bdf8,#6366f1)}.current-track{display:flex;flex-direction:column}.track-row{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.55rem;border-radius:.5rem;background:#0f172ab3;border:1px solid transparent;cursor:pointer}.track-row.active{border-color:#f472b6}