.music-page { min-height: 100vh; background: radial-gradient(circle at 70% 4%, rgba(139, 82, 218, .3), transparent 26%), radial-gradient(circle at 14% 82%, rgba(229, 180, 69, .16), transparent 30%), #0d0913; }
.music-shell { width: min(1420px, calc(100% - 42px)); padding-bottom: 150px; }.music-topbar { position: relative; z-index: 5; }.music-hero { max-width: 660px; padding: 78px 5% 34px; }.music-hero h1 { font-size: clamp(58px, 9vw, 118px); }.music-hero h1 span { color: var(--gold-bright); text-shadow: 0 0 38px rgba(231, 184, 79, .25); }.music-hero p { margin: 20px 0 0; color: #c5b8d7; font-size: 16px; line-height: 2; }.music-kicker { display: block; margin-bottom: 7px; color: var(--gold-bright); font-family: "Space Grotesk", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; }.music-hero .pill { margin-bottom: 18px; }
.music-member-gate { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 5% 28px; border: 1px solid rgba(240, 197, 94, .2); border-radius: 16px; padding: 14px 17px; color: #dbcce9; background: rgba(44, 29, 68, .64); font-size: 13px; }.music-member-gate a { flex: 0 0 auto; border-radius: 9px; padding: 8px 11px; color: #f8df98; background: rgba(240, 197, 94, .11); text-decoration: none; font-weight: 700; }
.music-composer { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.55fr); gap: 32px; align-items: start; margin: 0 5% 54px; border: 1px solid rgba(240, 197, 94, .24); border-radius: 24px; padding: 26px; background: linear-gradient(115deg, rgba(55, 31, 91, .76), rgba(27, 18, 47, .86)); box-shadow: 0 24px 55px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 239, 186, .08); }.music-composer h2, .music-gallery-heading h2 { margin: 0; font-size: 27px; }.music-form { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 11px; align-items: end; }.music-form label { display: grid; gap: 7px; color: #d9cee8; font-size: 11px; }.music-form label span { font-weight: 700; }.music-form em { color: #9f8eb7; font-style: normal; font-weight: 400; }.music-form input, .music-form textarea { width: 100%; border: 1px solid rgba(240, 197, 94, .2); border-radius: 11px; padding: 11px 12px; color: #fff7e0; background: rgba(9, 6, 17, .45); outline: none; resize: vertical; }.music-form input:focus, .music-form textarea:focus { border-color: rgba(255, 224, 136, .7); box-shadow: 0 0 0 3px rgba(240, 197, 94, .1); }.music-form button { min-height: 43px; border: 0; border-radius: 11px; padding: 0 15px; color: #1b1026; background: linear-gradient(135deg, #ffe39a, #d49a39); box-shadow: 0 10px 22px rgba(212, 154, 57, .2); font-weight: 800; }.music-form button:disabled { cursor: wait; opacity: .62; }.music-form-notice { grid-column: 2; margin: -3px 0 0; color: #ffb8c6; font-size: 12px; }
.music-gallery-section { overflow: hidden; padding: 0 0 34px; }.music-gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 0 5% 20px; }.music-count { color: #bcaed0; font-family: "Space Grotesk", sans-serif; font-size: 12px; }.music-gallery { display: grid; gap: 18px; min-height: 310px; overflow: hidden; padding: 16px 0 34px; }.music-row { overflow: visible; direction: ltr; }.music-row-track { display: flex; width: max-content; gap: 18px; padding: 0 9px; animation: musicMarquee 48s linear infinite; }.music-row-reverse .music-row-track { animation-direction: reverse; animation-duration: 55s; }.music-gallery.is-paused .music-row-track { animation-play-state: paused; } @keyframes musicMarquee { to { transform: translateX(-33.333%); } }
.music-card { position: relative; display: grid; grid-template-columns: 116px minmax(205px, 272px); grid-template-rows: auto 1fr auto; gap: 0 15px; width: 412px; min-height: 154px; overflow: hidden; border: 1px solid rgba(239, 203, 111, .17); border-radius: 19px; padding: 13px; color: #fff; background: linear-gradient(135deg, rgba(54, 33, 83, .96), rgba(23, 16, 36, .97)); box-shadow: 0 15px 34px rgba(0,0,0,.28); direction: rtl; text-align: right; transition: transform .32s cubic-bezier(.2,.8,.2,1), filter .32s ease, opacity .32s ease, border-color .32s ease, box-shadow .32s ease; }.music-card::before { position: absolute; inset: 0; background: radial-gradient(circle at 10% 10%, rgba(252, 213, 129, .13), transparent 35%); content: ""; pointer-events: none; }.music-gallery.is-focused .music-card:not(.is-hovered):not(.is-playing) { filter: blur(3px) saturate(.55); opacity: .37; transform: scale(.9); }.music-card.is-hovered, .music-card.is-playing { z-index: 2; border-color: rgba(255, 227, 154, .66); box-shadow: 0 26px 52px rgba(0,0,0,.47), 0 0 34px rgba(174, 112, 238, .18); transform: translateY(-8px) scale(1.06); }.music-art { position: relative; grid-row: 1 / span 3; width: 116px; height: 116px; align-self: center; overflow: hidden; border-radius: 13px; background: var(--provider-gradient, linear-gradient(135deg, #8c61e5, #e5b445)); box-shadow: 0 10px 24px rgba(0,0,0,.35); }.music-art img { width: 100%; height: 100%; object-fit: cover; }.music-art img.broken { display: none; }.music-provider { position: absolute; z-index: 1; bottom: 6px; right: 6px; border-radius: 999px; padding: 3px 7px; color: #fff8dd; background: rgba(10, 6, 18, .66); backdrop-filter: blur(4px); font-family: "Space Grotesk", sans-serif; font-size: 9px; }.music-card-title { overflow: hidden; margin: 4px 0 3px; font-size: 15px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }.music-author { margin: 0; color: #cfc1dd; font-size: 11px; }.music-comment { align-self: end; max-height: 43px; margin: 8px 0; overflow: hidden; color: #a99bbd; font-size: 11px; line-height: 1.8; }.music-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.music-play, .music-delete { border: 0; border-radius: 9px; padding: 7px 10px; font-weight: 800; }.music-play { color: #251334; background: linear-gradient(135deg, #ffe8a7, #d99b36); }.music-delete { color: #ffc5d0; background: rgba(191, 66, 100, .16); font-size: 11px; }.music-date { color: #8e819e; font-size: 10px; }.music-empty, .music-loading { display: grid; min-height: 220px; place-items: center; margin: 0 5%; border: 1px dashed rgba(240, 197, 94, .22); border-radius: 20px; color: #cbbbdc; background: rgba(38, 23, 58, .35); }
.music-player-dock { position: fixed; z-index: 20; right: 50%; bottom: 22px; width: min(720px, calc(100% - 32px)); transform: translateX(50%); border: 1px solid rgba(255, 222, 139, .34); border-radius: 20px; padding: 12px; background: rgba(25, 14, 42, .94); box-shadow: 0 24px 70px rgba(0,0,0,.58), 0 0 35px rgba(145, 88, 221, .14); backdrop-filter: blur(22px); }.music-player-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 3px 10px; }.music-player-meta strong { display: block; max-width: 510px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.music-player-meta span { display: block; margin-top: 2px; color: #ad9abd; font-size: 10px; }.music-player-close { border: 1px solid rgba(255,255,255,.13); border-radius: 8px; padding: 6px 9px; color: #eadcf7; background: rgba(255,255,255,.06); }.music-player-frame { display: block; width: 100%; height: 152px; border: 0; border-radius: 12px; background: #100a18; }.music-player-frame.youtube { height: min(42vw, 350px); min-height: 220px; }.music-preview-host { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; left: -10px; top: -10px; }.music-preview-host iframe { width: 1px; height: 1px; border: 0; }
.music-spotify-host, .music-spotify-host iframe { display: block; width: 100%; min-height: 152px; border: 0; border-radius: 12px; }
@media (max-width: 900px) { .music-composer { grid-template-columns: 1fr; }.music-form { grid-template-columns: 1fr 1fr; }.music-form button { grid-column: span 2; }.music-form-notice { grid-column: 1 / -1; }.music-card { width: 380px; } }
@media (max-width: 620px) { .music-shell { width: min(100% - 24px, 1420px); }.music-topbar { align-items: flex-start; }.music-topbar .topbar-actions { gap: 7px; flex-wrap: wrap; justify-content: end; }.music-topbar .music-nav-link { font-size: 10px; padding: 7px; }.music-hero { padding: 58px 4% 28px; }.music-hero h1 { font-size: 58px; }.music-member-gate { align-items: flex-start; flex-direction: column; margin-inline: 4%; }.music-composer { margin-inline: 4%; padding: 19px; }.music-form { grid-template-columns: 1fr; }.music-form button { grid-column: auto; }.music-gallery-heading { margin-inline: 4%; }.music-card { grid-template-columns: 92px minmax(185px, 230px); width: 335px; min-height: 135px; padding: 11px; }.music-art { width: 92px; height: 92px; }.music-row-track { gap: 12px; }.music-player-dock { bottom: 12px; }.music-player-frame.youtube { height: 52vw; min-height: 190px; } }
@media (prefers-reduced-motion: reduce) { .music-row-track { animation: none; }.music-card { transition: none; } }

/* YouTube search and compact-player cards */
.music-composer { grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr); }.music-search-panel { display: grid; gap: 10px; }.music-search-form { display: grid; gap: 7px; color: #d9cee8; font-size: 11px; font-weight: 700; }.music-search-form > div { display: flex; gap: 8px; }.music-search-form input { min-width: 0; flex: 1; border: 1px solid rgba(240, 197, 94, .24); border-radius: 11px; padding: 11px 12px; color: #fff7e0; background: rgba(9, 6, 17, .45); outline: none; }.music-search-form input:focus { border-color: rgba(255, 224, 136, .7); box-shadow: 0 0 0 3px rgba(240, 197, 94, .1); }.music-search-form button { border: 0; border-radius: 10px; padding: 0 15px; color: #251334; background: #e7b84f; font-weight: 800; }.music-search-form button:disabled { opacity: .6; }.music-search-results { display: grid; max-height: 260px; overflow: auto; border: 1px solid rgba(240, 197, 94, .18); border-radius: 13px; background: rgba(13, 8, 23, .56); }.music-search-result { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); padding: 8px; color: #f5eefc; background: transparent; text-align: right; }.music-search-result:last-child { border-bottom: 0; }.music-search-result:hover { background: rgba(138, 90, 219, .16); }.music-search-result img, .music-search-placeholder { width: 66px; height: 42px; border-radius: 7px; object-fit: cover; background: linear-gradient(135deg, #8d62e8, #e7b84f); }.music-search-placeholder { display: grid; place-items: center; color: #fff; }.music-search-result strong, .music-search-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.music-search-result strong { font-size: 11px; }.music-search-result small { margin-top: 2px; color: #ad9abd; font-size: 10px; }.music-search-result i { border-radius: 7px; padding: 5px 7px; color: #f8df98; background: rgba(240, 197, 94, .1); font-size: 10px; font-style: normal; }.music-search-empty { margin: 0; padding: 15px; color: #cbbbdc; font-size: 12px; }.music-selected { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; border: 1px solid rgba(114, 224, 166, .3); border-radius: 12px; padding: 8px; background: rgba(62, 148, 109, .09); }.music-selected img { width: 56px; height: 42px; border-radius: 7px; object-fit: cover; }.music-selected strong, .music-selected span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.music-selected strong { color: #e8fbef; font-size: 11px; }.music-selected span { margin-top: 2px; color: #a9d8b9; font-size: 10px; }.music-selected button { width: 26px; height: 26px; border: 0; border-radius: 7px; color: #f5d1db; background: rgba(191, 66, 100, .18); font-size: 17px; line-height: 1; }.music-form { grid-template-columns: minmax(0, 1fr) auto; }.music-form-notice { grid-column: 1 / -1; }
.music-gallery { min-height: 390px; }.music-card { display: block; width: 270px; min-height: 0; overflow: visible; border-radius: 18px; padding: 0; background: #191124; }.music-card.is-hovered, .music-card.is-playing { transform: translateY(-9px) scale(1.055); }.music-art { width: 100%; height: 255px; overflow: hidden; border: 0; border-radius: 18px 18px 0 0; background: linear-gradient(135deg, #6d44b1, #e7b84f); }.music-art::after { position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(16, 8, 24, .78)); content: ""; pointer-events: none; }.music-art img { position: relative; z-index: 0; }.music-provider { z-index: 2; top: 10px; bottom: auto; right: 10px; background: rgba(151, 18, 18, .85); }.music-play-circle { position: absolute; z-index: 3; bottom: 12px; left: 12px; display: grid; width: 46px; height: 46px; place-items: center; border: 0; border-radius: 50%; color: #24122f; background: linear-gradient(135deg, #fff0b8, #e7b84f); box-shadow: 0 8px 20px rgba(0,0,0,.34); font-size: 17px; transition: transform .18s ease; }.music-play-circle:hover { transform: scale(1.08); }.music-play-circle span { margin-right: 2px; }.music-card-body { display: grid; gap: 9px; padding: 13px; }.music-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.music-card-title { margin: 0; font-size: 13px; }.music-author { margin: 3px 0 0; }.music-comment { min-height: 0; max-height: 37px; margin: 0; }.music-progress { position: relative; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.16); }.music-progress-fill { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b684ff, #ffe39a); transition: width .35s linear; }.music-time-row { display: flex; justify-content: space-between; color: #9787a9; font-family: "Space Grotesk", sans-serif; font-size: 9px; direction: ltr; }.music-delete { border-radius: 7px; padding: 5px 7px; font-size: 10px; }.music-player-frame, .music-spotify-host { display: none; }.music-youtube-host, .music-youtube-host iframe { width: 100%; height: min(43vw, 370px); min-height: 220px; border: 0; border-radius: 12px; background: #100a18; }
@media (max-width: 900px) { .music-composer { grid-template-columns: 1fr; }.music-form { grid-template-columns: 1fr; }.music-gallery { min-height: 360px; } }
@media (max-width: 620px) { .music-card { width: 236px; }.music-art { height: 220px; }.music-search-form > div { flex-direction: column; }.music-search-form button { min-height: 38px; }.music-youtube-host, .music-youtube-host iframe { height: 52vw; min-height: 190px; } }