.brand { position: relative; }
.brand-home { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.site-menu { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.site-menu a { color: #bdb2c2; text-decoration: none; padding: 9px 11px; border: 1px solid transparent; border-radius: 11px; letter-spacing: 0; font-size: 13px; font-weight: 750; white-space: nowrap; }
.site-menu a:hover,.site-menu a.active { color: #fff; border-color: #9e3fc455; background: #7e299f35; }
.menu-toggle { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: #171220; padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; margin: 4px 0; background: #fff; border-radius: 2px; }
.menu-toggle svg { width: 23px; height: 23px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; transition: transform .22s ease; }
.menu-toggle .menu-line { transform-origin: center; transition: transform .22s ease,opacity .18s ease; }
.menu-toggle.is-open svg { transform: rotate(90deg); }
.menu-toggle.is-open .top { transform: translateY(5px) rotate(45deg); }
.menu-toggle.is-open .middle,.menu-toggle.is-open circle { opacity: 0; }
.menu-toggle.is-open .bottom { transform: translateY(-5px) rotate(-45deg); }
.bottom-nav { position: fixed; z-index: 100; left: 50%; bottom: max(10px,env(safe-area-inset-bottom)); transform: translateX(-50%); display: none; grid-template-columns: repeat(5,minmax(58px,88px)); gap: 3px; padding: 7px; border: 1px solid #493957; border-radius: 20px; background: #130f1bed; box-shadow: 0 15px 50px #000b; backdrop-filter: blur(18px); }
.bottom-nav a { min-width: 0; display: grid; place-items: center; gap: 3px; padding: 7px 5px 6px; border-radius: 13px; color: #a99eae; text-decoration: none; font-size: 10px; font-weight: 750; }
.bottom-nav a.active,.bottom-nav a:hover { color: #fff; background: #7e299f55; }
.bottom-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bottom-nav .fill { fill: currentColor; stroke: none; }
.player-menu-toggle { display:none; position:absolute; left:50%; top:-24px; transform:translateX(-50%); width:46px; height:30px; padding:2px; border:1px solid #493957; border-bottom:0; border-radius:15px 15px 0 0; background:#181120; color:#fff; cursor:pointer; }
.player-menu-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .22s ease; }
.has-player .player-menu-toggle { display:grid; place-items:center; }
.has-player:not(.player-collapsed) .player-menu-toggle svg { transform:rotate(180deg); }
.player { transition:transform .28s ease,opacity .2s ease; }
.player-collapsed .player { transform:translateY(calc(100% + 100px)); opacity:0; pointer-events:none; }
.bottom-nav [data-play-link]{position:relative;z-index:2;transform:translateY(-13px);width:58px;height:58px;justify-self:center;border-radius:50%;background:linear-gradient(145deg,#d744ff,#9228cf);color:#fff;box-shadow:0 9px 25px #bd35ee66}.bottom-nav [data-play-link] svg{width:25px;height:25px}.bottom-nav [data-play-link] span{position:absolute;top:61px;color:#ddd1e3;font-size:10px}.bottom-nav [data-play-link].active{background:linear-gradient(145deg,#f15eff,#a52cda)}
.network-state { padding: 5px 9px; border: 1px solid #ffad5c66; border-radius: 999px; background: #5b321c66; color: #ffd0a3; font-size: 10px; font-weight: 850; letter-spacing: .05em; }
.network-state[hidden] { display: none; }
body { padding-top: env(safe-area-inset-top); }

.page-title { padding: 52px 0 26px; }
.page-title h1 { margin: 0 0 10px; font-size: clamp(42px,7vw,72px); letter-spacing: -.05em; }
.page-title p { color: var(--soft); }
.library-tools { display: grid; gap: 16px; margin-bottom: 22px; }
.search-box { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; background: #15111c; color: #fff; }
.album-group { margin: 28px 0 42px; }
.album-group h2 { font-size: 25px; margin-bottom: 14px; }
.album-group h3 { margin: 20px 4px 10px; color: #d9b6e8; font-size: 16px; }
.artist-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); gap: 18px; align-items: start; }
.artist-card { margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #15111ccb; box-shadow: 0 14px 35px #0003; }
.artist-card h2 { margin-top: 0; }
.artist-card .tracklist { border-radius: 14px; }
.library-track { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 15px 18px; border-bottom: 1px solid #211b28; }
.library-track:last-child { border: 0; }
.library-track small { display: block; color: var(--soft); margin-top: 4px; }
.library-track small a { color: #e08cff; }
.library-track button { border: 0; border-radius: 999px; background: #fff; color: #140f22; padding: 9px 15px; font-weight: 800; cursor: pointer; }
.empty-library { padding: 30px; color: var(--soft); text-align: center; }
.signup-card { max-width: 560px; margin: 20px auto; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.signup-card form { display: grid; gap: 16px; }
.signup-card label { display: grid; gap: 7px; color: var(--soft); }
.signup-card input { padding: 14px; border: 1px solid #3b3045; border-radius: 11px; background: #0f0c13; color: #fff; }
.signup-message { min-height: 24px; color: #e8a8ff; }

@media(max-width:720px) {
  .brand { margin-top: 6px; }
  .version { margin-left: 4px; }
  .menu-toggle,.site-menu { display: none!important; }
  .network-state { margin-left: auto; }
  .bottom-nav { display: grid; width: calc(100vw - 20px); grid-template-columns: repeat(5,1fr); bottom: max(7px,env(safe-area-inset-bottom)); }
  body { padding-bottom: 92px; }
  .library-track { grid-template-columns: 34px 1fr; }
  .library-track button { grid-column: 2; justify-self: start; }
}