:root { --tg-bg: #fff; --tg-text: #111; --tg-secondary: #707579; --tg-button: #2481cc; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--tg-bg); color: var(--tg-text); font: 16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 22px 16px 32px; }
h1 { margin: 0 0 6px; font-size: 25px; } p { margin: 0; color: var(--tg-secondary); }
.library { display: grid; gap: 8px; }
.track { overflow: hidden; border-radius: 12px; background: color-mix(in srgb, var(--tg-text) 7%, var(--tg-bg)); }
.track.active { background: color-mix(in srgb, var(--tg-button) 12%, var(--tg-bg)); }
.track-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; border: 0; padding: 14px; background: transparent; color: var(--tg-text); font: inherit; text-align: left; cursor: pointer; }
.track-trigger span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.track-trigger small { flex: none; color: var(--tg-secondary); }
.inline-player { padding: 0 14px 14px; }.inline-player audio { display: block; width: 100%; }
.load-more { width: 100%; margin-top: 12px; border: 0; border-radius: 12px; padding: 14px; background: var(--tg-button); color: #fff; font: inherit; cursor: pointer; }
.message { margin-top: 16px; color: #d9534f; }