/* Cloudinary music library */
.music-library { padding: 4rem 0 6rem; scroll-margin-top: 5.5rem; }
.library-intro { max-width: 680px; margin: 0 0 2.25rem; }
.library-kicker, .now-playing-label, .track-count { display: block; color: var(--accent-2); font-size: 0.78rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.library-intro h2 { margin: 0.55rem 0 0.85rem; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.15; }
.library-intro p { color: var(--text-muted); font-size: 1rem; }
.library-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr); gap: 1.25rem; align-items: start; }
.library-player, .library-tracks { min-width: 0; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.035); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); }
.library-player { padding: clamp(1.25rem, 3vw, 2rem); background: linear-gradient(135deg, rgba(0, 219, 222, 0.1), rgba(252, 0, 255, 0.08)), rgba(255, 255, 255, 0.035); }
.now-playing-title { min-height: 3.1rem; margin: 0.5rem 0 1.5rem; overflow-wrap: anywhere; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.25; }
.library-progress-row, .library-volume-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7rem; color: var(--text-muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.library-volume-row { grid-template-columns: 4.4rem minmax(0, 1fr) 3rem; margin-top: 1.35rem; }
.library-volume-value { color: var(--text-main); text-align: right; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.library-range { width: 100%; min-width: 0; height: 4px; accent-color: var(--accent-2); cursor: pointer; }
.library-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; margin-top: 1.5rem; }
.library-button, .track-button { font: inherit; }
.library-button { min-height: 48px; padding: 0.7rem 0.45rem; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; background: rgba(5, 5, 5, 0.48); color: #fff; cursor: pointer; font-size: 0.78rem; font-weight: 800; line-height: 1.2; }
.library-button:hover, .library-button:focus-visible, .library-button[aria-pressed="true"] { border-color: var(--accent-2); background: rgba(0, 219, 222, 0.12); outline: none; }
.library-button--play { border-color: transparent; background: linear-gradient(90deg, var(--accent-2), var(--accent-1)); box-shadow: 0 10px 24px rgba(0, 219, 222, 0.18); }
.library-button--play:hover, .library-button--play:focus-visible { border-color: transparent; background: linear-gradient(90deg, var(--accent-2), var(--accent-1)); }
.library-help { margin: 1rem 0 0; color: var(--text-muted); font-size: 0.84rem; line-height: 1.65; }
.library-tracks { overflow: hidden; }
.library-tracks-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: 1.2rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.track-list-shuffle { min-height: 38px; padding: 0.55rem 0.7rem; border: 1px solid rgba(0, 219, 222, 0.45); border-radius: 8px; background: rgba(0, 219, 222, 0.08); color: var(--accent-2); cursor: pointer; font: inherit; font-size: 0.76rem; font-weight: 800; white-space: nowrap; }
.track-list-shuffle[aria-pressed="true"] { border-color: var(--accent-1); color: #fff; background: rgba(252, 0, 255, 0.14); }
.track-search { width: 100%; min-width: 0; padding: 0.72rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; background: rgba(5, 5, 5, 0.55); color: #fff; font: inherit; }
.track-search::placeholder { color: rgba(255, 255, 255, 0.46); }
.track-search:focus { border-color: var(--accent-2); outline: none; }
.track-list { max-height: 430px; overflow-y: auto; overscroll-behavior: contain; }
.track-button { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; width: 100%; min-height: 52px; padding: 0.75rem 1.25rem; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: transparent; color: #fff; cursor: pointer; text-align: left; }
.track-button:hover, .track-button:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
.track-button.is-playing { background: rgba(0, 219, 222, 0.12); box-shadow: inset 3px 0 0 var(--accent-2); }
.track-number { color: var(--text-muted); font-size: 0.82rem; }
.track-name { min-width: 0; overflow-wrap: anywhere; }
.track-state { color: var(--accent-2); font-size: 0.75rem; font-weight: 800; }
.library-status { padding: 1rem 1.25rem; color: var(--text-muted); font-size: 0.92rem; }
.library-status[hidden] { display: none; }
.library-status.is-error { color: #ff9aaa; }
@media (max-width: 800px) { .music-library { padding: 4rem 1.4rem 5rem; } .library-layout { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .music-library { padding-inline: 1.4rem; } .library-intro h2 { font-size: clamp(1.9rem, 8.6vw, 2.6rem); } .library-player { padding: 1.2rem; } .library-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); } .library-tracks-head { grid-template-columns: 1fr; gap: 0.8rem; } .track-list { max-height: 360px; } .track-button { padding-inline: 1rem; grid-template-columns: 2.35rem minmax(0, 1fr) auto; } }
@media (max-width: 520px) { .back-to-top.is-visible.is-library-active { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; } }