:root {
  --ink: #f1f1f4;
  --ink-soft: #b1b1bb;
  --muted: #7f808c;
  --line: #2b2b34;
  --canvas: #0d0e12;
  --paper: #17181e;
  --sidebar: #090a0d;
  --sidebar-soft: #a7a8b2;
  --coral: #ed725a;
  --coral-dark: #c95341;
  --teal: #2f9286;
  --blue: #6387a0;
  --gold: #e9ae47;
  --shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid rgba(47, 146, 134, 0.3); outline-offset: 2px; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; width: 248px; display: flex; flex-direction: column; padding: 28px 18px 20px; color: #f4f7f5; background: var(--sidebar); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 32px; }
.brand-mark { width: 31px; height: 31px; display: block; flex: 0 0 auto; border-radius: 50%; object-fit: contain; }
.brand strong { display: block; font-size: 16px; letter-spacing: .2px; }
.brand span { display: block; margin-top: 4px; color: #7f928b; font-size: 9px; letter-spacing: 1.5px; }
.sidebar-label { padding: 0 12px 10px; color: #6f837a; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; }
.sidebar-label-spaced { margin-top: 28px; }
.primary-nav, .secondary-nav { display: grid; gap: 4px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 7px; color: var(--sidebar-soft); background: transparent; text-align: left; transition: background .18s ease, color .18s ease; }
.nav-item:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-item.is-active { color: #fff; background: #2b3a35; box-shadow: inset 3px 0 0 var(--coral); }
.nav-item svg { width: 17px; height: 17px; stroke-width: 1.8; }
.nav-item span:not(.nav-dot) { flex: 1; font-size: 13px; }
.nav-item em { color: #73877f; font-size: 10px; font-style: normal; letter-spacing: .5px; }
.nav-item.is-active em { color: #f4b2a5; }
.nav-dot { width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; }
.nav-dot.coral { background: var(--coral); }.nav-dot.teal { background: #67b8a5; }.nav-dot.blue { background: #7ea8bf; }
.main-panel { width: calc(100% - 248px); min-height: 100vh; margin-left: 248px; }
.topbar { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-bottom: 1px solid var(--line); background: rgba(13,14,18,.88); }
.desktop-window .topbar { -webkit-app-region: drag; padding-right: 160px; }
.desktop-window .topbar button, .desktop-window .topbar input, .desktop-window .topbar label, .desktop-window .topbar a, .desktop-window .topbar-leading, .desktop-window .topbar-leading *, .desktop-window .topbar-actions, .desktop-window .topbar-actions * { -webkit-app-region: no-drag; }
.desktop-window .topbar-actions { flex-shrink: 0; }
.topbar-leading { min-width: 0; display: flex; align-items: center; gap: 12px; }
.desktop-titlebar-only { display: none; }
.desktop-window-settings { display: none; }
.crumbs { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.crumbs svg { width: 13px; height: 13px; }.crumbs strong { color: var(--ink-soft); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.search-box { width: 258px; height: 35px; display: flex; align-items: center; gap: 8px; padding: 0 9px 0 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: #84938d; }
.search-box svg { width: 15px; height: 15px; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; }
.search-box input::placeholder { color: #a0aca7; }
.search-box kbd { padding: 2px 5px; border: 1px solid #e0e7e3; border-radius: 3px; color: #9eaaa5; background: #f8faf8; font-size: 10px; }
.icon-button { position: relative; width: 34px; height: 34px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); background: var(--paper); transition: border-color .18s ease, color .18s ease, background .18s ease; }
.icon-button:hover { border-color: #b9cbc4; color: var(--teal); background: #f7fbf9; }
.icon-button svg { width: 16px; height: 16px; stroke-width: 1.8; }
.icon-button.quiet { border-color: transparent; background: transparent; }.icon-button.quiet:hover { border-color: var(--line); background: #f5f9f7; }
.icon-button.mini { width: 28px; height: 28px; }.icon-button.mini svg { width: 13px; height: 13px; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border: 1px solid var(--paper); border-radius: 50%; background: var(--coral); }
.top-avatar, .profile-avatar { position: relative; overflow: hidden; border-radius: 50%; background: #d8e7e1; }
.top-avatar { width: 30px; height: 30px; }.top-avatar img, .profile-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.top-avatar span, .profile-avatar span { position: absolute; inset: 0; display: grid; place-items: center; color: #246359; background: #d8e7e1; font-size: 12px; }
.top-avatar img[src] + span, .profile-avatar img[src] + span { display: none; }
.account-menu { position: relative; }
.account-trigger { display: flex; align-items: center; padding: 0; border: 1px solid transparent; cursor: pointer; }
.account-summary-copy, .account-summary-chevron { display: none; }
.account-trigger:hover, .account-trigger[aria-expanded="true"] { border-color: #59616b; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.account-popover[hidden] { display: none; }
.account-popover { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: 205px; overflow: hidden; border: 1px solid #343640; border-radius: 8px; background: #17181e; box-shadow: 0 18px 42px rgba(0,0,0,.42); }
.account-menu-user { padding: 14px 15px 12px; border-bottom: 1px solid #2b2c34; }
.account-menu-user strong, .account-menu-user span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-user strong { margin-bottom: 4px; color: #f0f0f3; font-size: 12px; font-weight: 600; }
.account-menu-user span { color: #858690; font-size: 10px; }
.account-menu-actions { display: grid; gap: 3px; padding: 7px; }
.account-menu-action { width: 100%; display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 0 9px; border: 0; border-radius: 5px; color: #bfc0c8; background: transparent; font-size: 10px; text-align: left; }
.account-menu-action[hidden] { display: none; }
.account-menu-action:hover { color: #f3f3f6; background: #24252c; }
.account-menu-action.is-danger { color: #e79686; }.account-menu-action.is-danger:hover { color: #ffb0a0; background: #30201f; }
.account-menu-action svg { width: 14px; height: 14px; }
.mobile-menu { display: none; }

.page-wrap { max-width: 1480px; margin: 0 auto; padding: 42px 48px 148px; }
.home-view[hidden] { display: none; }
body.home-dashboard { background: #111116; }
body.home-dashboard .main-panel { background: #111116; }
body.home-dashboard .topbar { border-color: #28282f; color: #b9bac2; background: #111116; }
body.home-dashboard .crumbs strong { color: #f0f0f3; }
body.home-dashboard .search-box { border-color: #2b2b33; color: #8b8c96; background: #1b1b21; }
body.home-dashboard .search-box input { color: #f0f0f3; }
body.home-dashboard .search-box kbd { border-color: #36363e; color: #858690; background: #25252c; }
body.home-dashboard .topbar .icon-button { border-color: #303039; color: #a7a8b0; background: #1b1b21; }
body.home-dashboard .topbar .outline-button { border-color: #45454e; color: #c9c9cf; }
body.home-dashboard .page-wrap { max-width: 1600px; padding-top: 31px; background: #111116; }
.home-view { color: #f3f3f5; }
.home-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 27px; }
.home-kicker { display: block; margin-bottom: 9px; color: #8c8d98; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; }
.home-heading h1 { color: #f4f4f6; font-size: 30px; letter-spacing: 0; }
.home-heading p { margin: 9px 0 0; color: #898a94; font-size: 12px; }
.home-refresh { width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 1px solid #393940; border-radius: 50%; color: #b7b8c0; background: transparent; }
.home-refresh:hover { color: #fff; border-color: #777881; background: #24242b; }
.home-refresh.is-loading svg { animation: spin 1s linear infinite; }
.home-refresh svg { width: 17px; height: 17px; }
.home-section { margin-top: 35px; }
.home-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 15px; }
.home-section-heading h2 { margin: 0; color: #f2f2f4; font-size: 17px; font-weight: 700; }
.home-link-button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; color: #8d8e98; background: transparent; font-size: 10px; }
.home-link-button:hover { color: #fff; }
.home-link-button svg { width: 13px; height: 13px; }
.home-hero-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; overflow: hidden; }
.home-hero-card { position: relative; min-width: 0; aspect-ratio: 1 / 1.08; overflow: hidden; padding: 0; border: 0; border-radius: 6px; color: #fff; background: #292930; text-align: left; }
.home-hero-card::after { position: absolute; inset: 28% 0 0; content: ""; background: linear-gradient(180deg, transparent, rgba(10,10,13,.86)); }
.home-hero-card:hover img { transform: scale(1.04); }
.home-hero-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.home-hero-card span, .home-hero-card strong { position: absolute; right: 10px; left: 10px; z-index: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-hero-card span { top: 10px; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.home-hero-card span svg { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.home-hero-card strong { bottom: 11px; color: #fff; font-size: 10px; line-height: 1.45; }
.home-fm-card { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: 10px; background: #050506; }
.home-fm-card::after { display: none; }
.home-fm-card:hover img { transform: scale(1.02); }
.home-fm-card .home-fm-label { position: static; right: auto; left: auto; z-index: auto; display: grid; gap: 1px; overflow: visible; color: #fff; text-shadow: none; white-space: normal; }
.home-fm-label small { color: #777883; font-size: 7px; font-weight: 700; letter-spacing: 1.3px; }.home-fm-label b { display: inline-flex; align-items: center; gap: 4px; color: #f5f5f7; font-size: 14px; line-height: 1; }.home-fm-label b svg { width: 15px; height: 15px; margin: 0; }
.home-fm-card img { min-height: 0; position: static; border: 1px solid rgba(255,255,255,.14); object-fit: cover; }
.home-fm-card strong { position: static; right: auto; bottom: auto; left: auto; display: block; overflow: hidden; margin: 0 -10px -10px; padding: 9px 10px; color: #eef8f0; background: linear-gradient(135deg, #174729, #0f3920); font-size: 10px; font-weight: 600; line-height: 1.45; text-overflow: ellipsis; text-shadow: none; white-space: normal; }
.home-private-empty { min-height: 0; display: grid; place-items: center; align-content: center; gap: 7px; color: #a5a6b0; background: radial-gradient(circle at 50% 35%, #272830, #14151a 65%); font-size: 10px; }.home-private-empty span { position: static; right: auto; left: auto; z-index: auto; overflow: visible; color: inherit; font: inherit; text-shadow: none; white-space: normal; }.home-private-empty svg { width: 20px; height: 20px; color: #c3c4cc; }
.home-fm-card.is-locked strong { background: linear-gradient(135deg, #272831, #1b1c22); color: #d2d3da; }.home-fm-card.is-unavailable strong { background: linear-gradient(135deg, #263242, #202832); }
.home-daily-locked { background: linear-gradient(135deg, #202129, #15161b); }.home-daily-locked .home-private-empty { position: absolute; inset: 41px 10px 37px; background: transparent; }.home-daily-locked strong { white-space: normal; }
.home-daily-card strong { white-space: normal; }
.daily-recommendation-page { max-width: 1440px; color: #e8e8ed; }
.daily-recommendation-page .detail-topbar { border-color: #2b2c34; }.daily-recommendation-page .back-button { color: #a8a9b2; }.daily-recommendation-page .back-button:hover { color: #fff; }
.daily-recommendation-hero { position: relative; min-height: 182px; display: flex; align-items: flex-start; justify-content: space-between; gap: 26px; overflow: hidden; padding: 28px 32px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: radial-gradient(ellipse at 15% -40%, rgba(135,189,238,.78), transparent 53%), linear-gradient(160deg, #4c6f91 0%, #283c53 46%, #111218 100%); }
.daily-recommendation-hero::after { position: absolute; right: -50px; bottom: -105px; width: 340px; height: 230px; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(166,215,255,.15), transparent 68%); filter: blur(8px); }
.daily-recommendation-hero > * { position: relative; z-index: 1; }.daily-recommendation-kicker { display: block; margin-bottom: 5px; color: rgba(239,246,255,.72); font-size: 8px; font-weight: 700; letter-spacing: 1.4px; }
.daily-recommendation-hero h1 { display: flex; align-items: baseline; gap: 7px; margin: 0; color: #fff; line-height: 1; }.daily-recommendation-hero h1 b { font-size: 43px; letter-spacing: -1.8px; }.daily-recommendation-hero h1 small { color: #f2f6fa; font-size: 20px; font-weight: 700; }
.daily-recommendation-hero p { margin: 9px 0 15px; color: rgba(235,242,250,.76); font-size: 11px; }.daily-recommendation-actions { display: flex; align-items: center; gap: 11px; }.daily-recommendation-actions > span { color: rgba(232,239,247,.62); font-size: 10px; }
.daily-play-all { height: 34px; border-color: #ff4966; color: #fff; background: #f43e5d; box-shadow: none; }.daily-play-all:hover { border-color: #ff6a82; background: #ff516d; }.daily-play-all svg { width: 14px; height: 14px; fill: currentColor; }
.daily-history-picker { min-width: 152px; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 0 9px 0 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: rgba(240,245,250,.72); background: rgba(13,17,24,.16); font-size: 10px; }.daily-history-picker select { width: 95px; height: 31px; padding: 0; border: 0; outline: 0; color: #f4f6fa; background: transparent; font: inherit; font-size: 10px; cursor: pointer; }.daily-history-picker option { color: #e8e8ed; background: #202127; }
.daily-song-table { margin-top: 24px; border-top: 1px solid #292a32; }.daily-song-table-head, .daily-song-row { display: grid; grid-template-columns: 36px 42px minmax(0, 1.45fr) minmax(110px, .8fr) 34px 48px; align-items: center; gap: 10px; }.daily-song-table-head { min-height: 39px; padding: 0 10px; color: #777883; font-size: 10px; }.daily-song-table-head > span:nth-child(2) { grid-column: 2 / 4; }.daily-song-table-head > span:nth-child(3) { grid-column: 4; }.daily-song-table-head > span:nth-child(4) { grid-column: 5; text-align: center; }.daily-song-table-head > span:nth-child(5) { grid-column: 6; text-align: right; }
.daily-song-row { min-height: 62px; padding: 8px 10px; border-top: 1px solid #202128; color: #cbccd4; transition: background .16s ease; }.daily-song-row:hover { background: #18191f; }.daily-song-row > b { color: #747580; font-size: 10px; font-weight: 600; text-align: center; }.daily-song-row > img { width: 42px; height: 42px; display: block; border-radius: 4px; object-fit: cover; background: #202128; }.daily-song-copy { min-width: 0; }.daily-song-copy strong, .daily-song-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.daily-song-copy strong { color: #ededf1; font-size: 12px; font-weight: 500; }.daily-song-copy span { margin-top: 4px; color: #9798a2; font-size: 10px; }.daily-song-album { overflow: hidden; color: #a6a7b0; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.daily-song-play { width: 28px; height: 28px; display: grid; place-items: center; justify-self: center; padding: 0; border: 0; border-radius: 50%; color: #bfc0c8; background: transparent; }.daily-song-play:hover { color: #fff; background: rgba(255,255,255,.1); }.daily-song-play svg { width: 14px; height: 14px; fill: currentColor; }.daily-song-duration { color: #81828c; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }.daily-song-empty { min-height: 180px; display: grid; place-items: center; color: #898a95; font-size: 11px; }
@media (max-width: 620px) { .daily-recommendation-hero { min-height: 0; flex-direction: column; padding: 23px 19px; }.daily-recommendation-hero h1 b { font-size: 36px; }.daily-recommendation-hero h1 small { font-size: 16px; }.daily-history-picker { margin-top: 0; }.daily-song-table-head, .daily-song-row { grid-template-columns: 26px 38px minmax(0, 1fr) 30px 42px; gap: 7px; padding-right: 4px; padding-left: 4px; }.daily-song-table-head { min-height: 34px; }.daily-song-table-head > span:nth-child(2) { grid-column: 2 / 4; }.daily-song-table-head > span:nth-child(3), .daily-song-album { display: none; }.daily-song-table-head > span:nth-child(4) { grid-column: 4; }.daily-song-table-head > span:nth-child(5) { grid-column: 5; }.daily-song-row > img { width: 38px; height: 38px; }.daily-song-copy strong { font-size: 11px; } }
.home-chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.home-chart-card { min-width: 0; padding: 18px 20px 15px; border: 0; border-radius: 9px; background: #202126; text-align: left; }
.home-chart-card:hover { background: #24252b; }
.home-chart-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.home-chart-title h3 { margin: 0; color: #e8e8eb; font-size: 16px; }
.home-chart-title span { color: #777881; font-size: 9px; }
.home-chart-body { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 15px; }
.home-chart-body > img { width: 78px; height: 78px; display: block; border-radius: 6px; object-fit: cover; }
.home-chart-body ol { display: grid; gap: 9px; min-width: 0; margin: 0; padding: 0; list-style: none; counter-reset: chart; }
.home-chart-body li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: baseline; gap: 5px; min-width: 0; color: #85868f; font-size: 10px; }
.home-chart-track { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: baseline; gap: 5px; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.home-chart-track:hover { color: #fff; }
.home-chart-body li b { color: #d9d9de; font-size: 10px; font-weight: 700; text-align: center; }
.home-chart-body li strong, .home-chart-body li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-chart-body li strong { color: #e0e0e4; font-weight: 600; }
.home-chart-body li em { color: #44c59c; font-size: 9px; font-style: normal; }
.home-chart-body li:nth-child(3) em { color: #ec6f73; }
.home-playlist-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 15px; }
.home-playlist-card { position: relative; min-width: 0; padding: 0; overflow: hidden; border: 0; color: #ededf0; background: transparent; text-align: left; }
.home-playlist-cover-wrap { position: relative; margin-bottom: 9px; }
.home-playlist-card-main, .home-playlist-card-copy { display: block; width: 100%; min-width: 0; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.home-playlist-card-main:focus-visible, .home-playlist-card-copy:focus-visible { outline: 2px solid rgba(154,220,205,.7); outline-offset: 2px; border-radius: 5px; }
.home-playlist-cover { position: relative; display: block; width: 100%; aspect-ratio: 1; margin-bottom: 0; border-radius: 5px; background: #24262d; }
.home-playlist-card:hover img { transform: translateY(-2px); filter: brightness(1.08); }
.home-playlist-card img { width: 100%; height: 100%; display: block; border-radius: 5px; object-fit: cover; transition: transform .2s ease, filter .2s ease; }
.home-playlist-card strong { display: -webkit-box; overflow: hidden; color: #dedee2; font-size: 10px; font-weight: 500; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.home-playlist-card span { display: block; margin-top: 5px; color: #777881; font-size: 9px; }
.home-playlist-card span svg { width: 10px; height: 10px; margin-right: 2px; vertical-align: -2px; }
.home-loading { min-height: 92px; grid-column: 1 / -1; display: grid; place-items: center; gap: 8px; padding: 20px; border: 1px dashed #383840; border-radius: 8px; color: #898a94; background: #1b1b21; font-size: 10px; }
.home-loading svg { width: 19px; height: 19px; color: #9b9ca5; animation: spin 1s linear infinite; }
.home-loading-error { color: #e38a7a; }
.home-loading-error svg { color: #e38a7a; animation: none; }
.home-loading strong { color: #e5b0a6; font-size: 11px; font-weight: 600; }
.home-retry { padding: 0; border: 0; color: #b2d7ca; background: transparent; font-size: 10px; }
.home-retry:hover { color: #fff; }
.home-detail-header { display: flex; align-items: center; gap: 25px; max-width: 900px; margin-bottom: 35px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.home-detail-header > img { width: 180px; height: 180px; flex: 0 0 auto; border-radius: 8px; object-fit: cover; background: #e8efec; }
.home-detail-header h1 { margin: 10px 0; font-size: 34px; }
.home-detail-header p { max-width: 600px; margin: 0 0 12px; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.home-detail-meta { color: var(--muted); font-size: 10px; }
.home-detail-songs { max-width: 900px; }
.home-detail-song { display: grid; grid-template-columns: 26px 42px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 9px 10px; border-bottom: 1px solid #edf1ef; }
.home-detail-song:hover { background: #f7faf8; }
.home-detail-song > b { color: #9ca8a3; font-size: 10px; font-weight: 500; text-align: center; }
.home-detail-song > img { width: 42px; height: 42px; border-radius: 4px; object-fit: cover; background: #e8efec; }
.home-detail-song > div { min-width: 0; }
.home-detail-song strong, .home-detail-song span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-detail-song strong { color: var(--ink); font-size: 11px; }
.home-detail-song div span, .home-detail-song-duration { margin-top: 4px; color: var(--muted); font-size: 9px; }
.home-detail-song-duration { margin-top: 0; }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 36px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px rgba(237,114,90,.12); }
h1 { margin: 0; color: var(--ink); font-size: clamp(31px, 3vw, 42px); font-weight: 700; letter-spacing: -.5px; line-height: 1.1; }
.page-header p { margin: 12px 0 0; color: var(--ink-soft); font-size: 13px; }
.page-actions { display: flex; gap: 9px; }
.outline-button, .solid-button { height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.outline-button { border: 1px solid #cbd9d4; color: var(--ink-soft); background: transparent; }.outline-button:hover { border-color: var(--teal); color: var(--teal); }
.solid-button { border: 1px solid var(--coral); color: #fff; background: var(--coral); }.solid-button:hover { border-color: var(--coral-dark); background: var(--coral-dark); }
.outline-button svg, .solid-button svg { width: 14px; height: 14px; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 42px; align-items: start; }
.detail-error { max-width: 560px; padding: 70px 0; color: var(--ink-soft); }.detail-error > svg { width: 28px; height: 28px; color: var(--coral); }.detail-error h1 { margin: 16px 0 8px; font-size: 28px; }.detail-error p { margin: 0 0 24px; font-size: 12px; line-height: 1.7; }
.detail-view { animation: detail-enter .22s ease both; }.detail-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }.back-button { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; color: var(--ink-soft); background: transparent; font-size: 12px; font-weight: 600; }.back-button:hover { color: var(--teal); }.back-button svg { width: 16px; height: 16px; }.detail-kicker { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; }.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 55px; align-items: start; }.detail-article { max-width: 800px; }.detail-title { margin: 16px 0 19px; color: var(--ink); font-size: clamp(28px, 3.2vw, 44px); font-weight: 700; letter-spacing: -.6px; line-height: 1.3; }.detail-meta { display: flex; align-items: center; gap: 10px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }.detail-meta .author-avatar { width: 38px; height: 38px; }.detail-meta strong, .detail-meta span { display: block; }.detail-meta strong { margin-bottom: 4px; font-size: 12px; }.detail-meta span { color: var(--muted); font-size: 10px; }.detail-copy { padding-top: 28px; color: var(--ink-soft); font-size: 14px; line-height: 2.1; }.detail-copy p { margin: 0 0 19px; }.detail-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 26px 0; }.detail-gallery img { width: 100%; aspect-ratio: 1; display: block; border-radius: 5px; object-fit: cover; background: #e9f0ed; }.detail-tags { margin: 26px 0; }.detail-song { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #f8fbf9; }.detail-song > img { width: 58px; height: 58px; border-radius: 5px; object-fit: cover; }.detail-song > div { min-width: 0; flex: 1; }.detail-song span, .detail-song strong, .detail-song small { display: block; }.detail-song span { margin-bottom: 4px; color: var(--muted); font-size: 9px; text-transform: uppercase; }.detail-song strong { overflow: hidden; margin-bottom: 5px; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.detail-song small { color: var(--ink-soft); font-size: 10px; }.detail-aside { padding-left: 25px; border-left: 1px solid var(--line); }.detail-aside-heading { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 700; }.detail-aside-heading svg { width: 16px; height: 16px; color: var(--teal); }.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 0 25px; }.detail-stats div + div { padding-left: 12px; border-left: 1px solid var(--line); }.detail-stats strong, .detail-stats span { display: block; }.detail-stats strong { margin-bottom: 4px; color: var(--ink); font-size: 18px; font-weight: 600; }.detail-stats span { color: var(--muted); font-size: 10px; }.detail-save { width: 100%; height: 37px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #cbd9d4; border-radius: 6px; color: var(--ink-soft); background: transparent; font-size: 11px; font-weight: 600; }.detail-save:hover, .detail-save.is-saved { border-color: var(--coral); color: var(--coral-dark); background: #fff7f4; }.detail-save svg { width: 15px; height: 15px; }.detail-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); }.detail-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--teal); }.detail-note p { margin: 0; font-size: 10px; line-height: 1.7; }@keyframes detail-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.detail-image-button { position: relative; display: block; min-width: 0; padding: 0; overflow: hidden; border: 0; border-radius: 5px; background: #e9f0ed; cursor: zoom-in; text-align: left; }.detail-image-button > svg { position: absolute; right: 9px; bottom: 9px; width: 26px; height: 26px; padding: 5px; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; color: #fff; background: rgba(23,33,31,.5); opacity: 0; transform: translateY(3px); transition: opacity .18s ease, transform .18s ease; }.detail-image-button:hover > svg, .detail-image-button:focus-visible > svg { opacity: 1; transform: translateY(0); }.detail-image-button:hover img { transform: scale(1.03); }.detail-image-button img { transition: transform .2s ease; }
.detail-comments { margin-top: 42px; padding-top: 25px; border-top: 1px solid var(--line); }.comments-heading { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 17px; }.comments-heading strong { color: var(--ink); font-size: 15px; }.comments-heading span { color: var(--muted); font-size: 10px; }.comment-list { display: grid; gap: 0; }.comment-item { display: flex; gap: 10px; padding: 17px 0; border-top: 1px solid #edf1ef; }.comment-item:first-child { border-top: 0; }.comment-avatar { position: relative; width: 30px; height: 30px; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: #dbe8e4; }.comment-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }.comment-avatar span { position: absolute; inset: 0; display: grid; place-items: center; color: #2d7168; background: #dbe8e4; font-size: 11px; }.comment-avatar img[src] + span { display: none; }.comment-body { min-width: 0; flex: 1; }.comment-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }.comment-meta strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.comment-meta span { flex: 0 0 auto; color: var(--muted); font-size: 9px; }.comment-body p { margin: 7px 0 8px; color: var(--ink-soft); font-size: 12px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }.comment-stats { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 9px; }.comment-stats span { display: inline-flex; align-items: center; gap: 4px; }.comment-stats svg { width: 12px; height: 12px; }.comments-state, .comments-empty, .comments-error { display: flex; align-items: center; gap: 8px; min-height: 76px; color: var(--muted); font-size: 11px; }.comments-state svg { color: var(--teal); animation: spin 1s linear infinite; }.comments-empty svg, .comments-error svg { width: 17px; height: 17px; }.comments-error { color: var(--coral-dark); line-height: 1.6; }.comments-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 8px 0; border: 0; color: var(--teal); background: transparent; font-size: 10px; font-weight: 600; }.comments-more:hover { color: var(--coral-dark); }.comments-more svg { width: 13px; height: 13px; }
.image-lightbox[hidden] { display: none; }.image-lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 55px 28px 35px; background: rgba(17, 29, 26, .86); cursor: zoom-out; }.image-lightbox img { display: block; max-width: min(1100px, 92vw); max-height: calc(100vh - 130px); object-fit: contain; border-radius: 4px; box-shadow: 0 18px 60px rgba(0,0,0,.35); cursor: default; }.image-lightbox span { position: absolute; right: 28px; bottom: 17px; left: 28px; color: rgba(255,255,255,.78); font-size: 11px; text-align: center; }.lightbox-close { position: absolute; top: 18px; right: 20px; z-index: 1; border-color: rgba(255,255,255,.25); color: #fff; background: rgba(23,33,31,.35); }.lightbox-close:hover { border-color: rgba(255,255,255,.6); color: #fff; background: rgba(23,33,31,.62); }body.lightbox-open { overflow: hidden; }@keyframes spin { to { transform: rotate(360deg); } }
.login-trigger { height: 32px; padding: 0 10px; }.login-trigger.is-authenticated { border-color: #a9d2c8; color: var(--teal); background: #eff9f5; }.login-modal[hidden] { display: none; }.login-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: rgba(17,29,26,.42); }.login-dialog { width: min(390px, 100%); padding: 27px; border: 1px solid #d7e2dd; border-radius: 8px; background: var(--paper); box-shadow: 0 20px 70px rgba(18,31,27,.22); }.login-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }.modal-kicker { display: block; margin-bottom: 7px; color: var(--teal); font-size: 9px; font-weight: 700; letter-spacing: 1.4px; }.login-dialog h2 { margin: 0; color: var(--ink); font-size: 21px; line-height: 1.35; }.login-status { display: flex; align-items: center; gap: 8px; min-height: 38px; margin-top: 18px; padding: 0 11px; border-radius: 5px; font-size: 11px; }.login-status.waiting { color: #805f27; background: #fff8e8; }.login-status.success { color: #276a5d; background: #eaf7f2; }.login-status.error { color: var(--coral-dark); background: #fff0ec; }.login-status svg { width: 15px; height: 15px; flex: 0 0 auto; }.login-status.waiting svg { animation: spin 1s linear infinite; }.login-qr-shell { width: 226px; height: 226px; display: grid; place-items: center; margin: 22px auto 18px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfb; }.login-qr-shell img { width: 204px; height: 204px; display: block; image-rendering: auto; }.login-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.login-actions .solid-button { height: 33px; }.login-actions > span { color: var(--muted); font-size: 9px; text-align: right; }.login-hint { margin: 17px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.7; }body.login-modal-open { overflow: hidden; }
.feed-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.filter-tabs { display: flex; gap: 22px; }
.filter-tab { position: relative; padding: 0 0 8px; border: 0; color: #91a09a; background: transparent; font-size: 12px; font-weight: 600; }.filter-tab:hover { color: var(--ink-soft); }
.filter-tab.is-active { color: var(--ink); }.filter-tab.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; content: ""; border-radius: 2px; background: var(--coral); }
.result-count { color: var(--muted); font-size: 10px; letter-spacing: .3px; }
.snapshot-notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; padding: 13px 15px; border-left: 3px solid var(--gold); background: #fffaf0; }
.notice-icon { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 5px; color: #ad7523; background: #f7e7bc; }
.notice-icon svg { width: 15px; height: 15px; }
.snapshot-notice strong { display: block; margin: 1px 0 4px; color: #6e5227; font-size: 11px; }.snapshot-notice p { margin: 0; color: #8a7857; font-size: 11px; line-height: 1.55; }.snapshot-notice .icon-button { margin: -5px -8px 0 auto; }
.note-list { display: grid; gap: 11px; }
.feed-load-state { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; color: var(--muted); font-size: 10px; }
.feed-load-state.is-loading { color: var(--teal); }
.feed-load-state.is-loading svg { width: 14px; height: 14px; animation: spin 1s linear infinite; }
.feed-load-state.is-done { color: #a6b2ad; }
.note-card { position: relative; padding: 21px 22px 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); box-shadow: 0 1px 0 rgba(23,33,31,.01); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.note-card:hover { border-color: #c2d2cc; box-shadow: var(--shadow); transform: translateY(-1px); }
.note-card.is-read { background: #fbfcfb; }.note-card.is-read .note-title { color: #6c7975; }
.note-open { display: block; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.note-topline, .note-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note-topline { margin-bottom: 15px; }.note-author { display: flex; align-items: center; gap: 9px; min-width: 0; }
.author-avatar { width: 30px; height: 30px; position: relative; overflow: hidden; flex: 0 0 auto; border-radius: 50%; background: #dbe8e4; }.author-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }.author-avatar span { position: absolute; inset: 0; display: grid; place-items: center; color: #2d7168; background: #dbe8e4; font-size: 11px; }.author-avatar img[src] + span { display: none; }
.author-name { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 700; }.author-time { margin-top: 3px; color: #9aa6a1; font-size: 10px; }
.note-type { padding: 4px 7px; border-radius: 3px; color: var(--teal); background: #eaf5f1; font-size: 9px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }.note-type.scene { color: #b76545; background: #fff0e9; }.note-type.playlist { color: #587d96; background: #edf3f7; }
.note-title { max-width: 780px; margin: 0 0 9px; color: var(--ink); font-size: 17px; line-height: 1.45; }.note-excerpt { max-width: 790px; margin: 0; display: -webkit-box; overflow: hidden; color: var(--ink-soft); font-size: 12px; line-height: 1.8; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.note-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }.note-tag { padding: 3px 6px; border-radius: 3px; color: #75847e; background: #f1f5f2; font-size: 10px; }
.note-song-control { margin-top: 14px; }.note-song-button { max-width: 100%; display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid #d9e5df; border-radius: 5px; color: var(--ink-soft); background: #f8fbf9; text-align: left; }.note-song-button:hover { border-color: #a9c9be; color: var(--teal); }.note-song-button svg { width: 14px; height: 14px; flex: 0 0 auto; }.note-song-button span { overflow: hidden; max-width: 190px; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; }.note-song-button small { overflow: hidden; max-width: 150px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.note-footer { margin-top: 18px; padding-top: 13px; border-top: 1px solid #edf1ef; }.note-stats { display: flex; align-items: center; gap: 15px; color: #9aa6a1; font-size: 10px; }.note-stat { display: inline-flex; align-items: center; gap: 5px; }.note-stat svg { width: 13px; height: 13px; stroke-width: 1.8; }
.like-button { padding: 0; border: 0; color: inherit; background: transparent; font-size: inherit; }.like-button:hover, .like-button:focus-visible { color: var(--coral); }.like-button.is-liked { color: var(--coral); }.like-button:disabled { cursor: wait; opacity: .55; }
.card-actions { display: flex; align-items: center; gap: 4px; }.card-actions .is-favorite { color: var(--coral); }.card-actions .is-read { color: var(--teal); }
.empty-state { padding: 54px 20px; border: 1px dashed #cbd9d4; border-radius: 7px; color: var(--muted); background: rgba(255,255,255,.45); text-align: center; }.empty-state svg { width: 25px; height: 25px; margin-bottom: 10px; color: #a9b9b3; }.empty-state strong { display: block; color: var(--ink-soft); font-size: 13px; }.empty-state p { margin: 7px 0 0; font-size: 11px; }

.insights-column { display: grid; gap: 0; }.rail-section { padding: 0 0 25px; margin-bottom: 25px; border-bottom: 1px solid var(--line); }.rail-section:last-child { border-bottom: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .2px; }.section-heading > svg { width: 16px; height: 16px; color: #9aa8a2; }.context-label { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .6px; text-transform: uppercase; }
.profile-row { display: flex; align-items: center; gap: 10px; }.profile-avatar { width: 43px; height: 43px; }.profile-avatar span { font-size: 15px; }.profile-row strong { display: block; margin-bottom: 4px; font-size: 13px; }.profile-row div:nth-child(2) span { color: var(--muted); font-size: 10px; }.verified { display: grid; place-items: center; align-self: flex-start; margin: 1px 0 0 auto; color: var(--teal); }.verified svg { width: 15px; height: 15px; fill: #dcf0ea; }
.profile-signature { margin: 16px 0 17px; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }.profile-stats div { padding-top: 12px; }.profile-stats div + div { padding-left: 14px; border-left: 1px solid var(--line); }.profile-stats strong, .profile-stats span { display: block; }.profile-stats strong { margin-bottom: 3px; font-size: 15px; font-weight: 600; }.profile-stats span { color: var(--muted); font-size: 10px; }
.outline-button.mini { height: 30px; padding: 0 10px; font-size: 10px; }
.outline-button.mini svg { width: 12px; height: 12px; }
.outline-button.mini.is-loading { opacity: .6; pointer-events: none; }
.outline-button.mini.is-loading svg { animation: spin 1s linear infinite; }
.rail-intro { margin: -5px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.7; }.context-list { display: grid; gap: 10px; }.context-item { display: flex; align-items: center; gap: 9px; min-width: 0; }.context-item img { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 5px; object-fit: cover; }.context-item div { min-width: 0; flex: 1; }.context-item strong, .context-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.context-item strong { margin-bottom: 3px; color: var(--ink); font-size: 11px; font-weight: 600; }.context-item span { color: var(--muted); font-size: 10px; }.context-empty { color: var(--muted); font-size: 10px; }

.toast { position: fixed; right: 28px; bottom: 25px; z-index: 30; max-width: 330px; padding: 11px 14px; border: 1px solid #c5d8d1; border-radius: 6px; color: #265b52; background: #eff9f5; box-shadow: var(--shadow); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }.toast.is-visible { opacity: 1; transform: translateY(0); }
.drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(17,29,26,.32); }.drawer-backdrop[hidden] { display: none; }
.note-drawer { position: fixed; inset: 0 0 0 auto; z-index: 21; width: min(540px, 100vw); overflow: auto; padding: 28px 34px 46px; border-left: 1px solid #d6e2dd; background: #fff; box-shadow: -16px 0 40px rgba(18,31,27,.14); transform: translateX(100%); transition: transform .25s ease; }.note-drawer.is-open { transform: translateX(0); }.drawer-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--line); }.drawer-kicker { color: var(--teal); font-size: 10px; font-weight: 700; letter-spacing: 1.4px; }.drawer-content { padding-top: 27px; }.drawer-content .note-type { display: inline-block; }.drawer-content h2 { margin: 14px 0 11px; color: var(--ink); font-size: 25px; line-height: 1.4; }.drawer-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }.drawer-author { display: flex; align-items: center; gap: 8px; margin: 22px 0; }.drawer-author .author-avatar { width: 34px; height: 34px; }.drawer-author strong { display: block; margin-bottom: 3px; font-size: 11px; }.drawer-author span { color: var(--muted); font-size: 10px; }.drawer-copy { color: var(--ink-soft); font-size: 13px; line-height: 2; }.drawer-copy p { margin: 0 0 17px; }.drawer-tags { margin: 25px 0; }.drawer-song { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 6px; background: #f8fbf9; }.drawer-song img { width: 54px; height: 54px; border-radius: 5px; object-fit: cover; }.drawer-song strong, .drawer-song span { display: block; }.drawer-song strong { margin-bottom: 5px; font-size: 12px; }.drawer-song span { color: var(--muted); font-size: 10px; }.drawer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; padding-top: 16px; border-top: 1px solid var(--line); }.drawer-bottom .note-stats { font-size: 11px; }.drawer-bottom .outline-button { height: 33px; }
body.drawer-open { overflow: hidden; }
.detail-stat-button { display: block; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: left; }.detail-stat-button:hover, .detail-stat-button:focus-visible, .detail-stat-button.is-liked { color: var(--coral); }.detail-stat-button svg { width: 15px; height: 15px; margin-bottom: 5px; }.detail-stat-button:disabled { cursor: wait; opacity: .55; }
.detail-stats > * + * { padding-left: 12px; border-left: 1px solid var(--line); }

@media (max-width: 1100px) {
  .topbar, .page-wrap { padding-left: 30px; padding-right: 30px; }
  .content-grid { grid-template-columns: minmax(0, 1fr) 270px; gap: 28px; }
}
@media (max-width: 860px) {
  .sidebar { width: 220px; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 10px 0 30px rgba(17,29,26,.16); }.sidebar.is-open { transform: translateX(0); }
  .main-panel { width: 100%; margin-left: 0; }.mobile-menu { display: inline-grid; margin-right: 13px; }.topbar { justify-content: flex-start; padding: 0 22px; }.topbar-actions { margin-left: auto; }.search-box { width: min(240px, 30vw); }
  .page-wrap { padding: 34px 22px 60px; }.content-grid { grid-template-columns: 1fr; }.insights-column { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }.profile-section { grid-column: span 2; }.rail-section { margin-bottom: 0; }
  .detail-layout { grid-template-columns: 1fr; gap: 30px; }.detail-aside { padding: 22px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .home-hero-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
  .home-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-playlist-grid { grid-template-columns: repeat(4, minmax(130px, 1fr)); overflow-x: auto; padding-bottom: 5px; }
}
@media (max-width: 620px) {
  .topbar { height: 64px; padding: 0 15px; }.crumbs { font-size: 11px; }.topbar-actions { gap: 7px; }.search-box { width: 34px; padding: 0 8px; border-color: transparent; background: transparent; }.search-box input, .search-box kbd { display: none; }.search-box svg { width: 17px; height: 17px; }.top-avatar { width: 28px; height: 28px; }.login-trigger { width: 33px; padding: 0; justify-content: center; }.login-trigger span { display: none; }
  .page-wrap { padding: 28px 15px 50px; }.page-header { display: block; margin-bottom: 28px; }.page-actions { margin-top: 22px; }.page-actions .outline-button { flex: 1; justify-content: center; }.page-actions .solid-button { flex: 1; justify-content: center; }.page-header p { font-size: 12px; line-height: 1.6; }.content-grid { gap: 35px; }.note-card { padding: 17px 15px 14px; }.note-title { font-size: 16px; }.note-excerpt { font-size: 11px; line-height: 1.75; }.note-footer { align-items: flex-end; }.note-stats { gap: 9px; }.snapshot-notice { padding: 12px; }.snapshot-notice p { line-height: 1.6; }.insights-column { display: block; }.rail-section, .profile-section { margin-bottom: 28px; padding-bottom: 25px; }.note-drawer { padding: 22px 20px 35px; }.drawer-content h2 { font-size: 22px; }.drawer-copy { font-size: 12px; }.detail-topbar { margin-bottom: 24px; }.detail-title { font-size: 27px; }.detail-copy { padding-top: 22px; font-size: 12px; }.detail-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }.login-modal { padding: 15px; }.login-dialog { padding: 21px; }.login-qr-shell { width: 210px; height: 210px; }.login-qr-shell img { width: 188px; height: 188px; }.login-actions > span { max-width: 130px; }
  body.home-dashboard .page-wrap { padding: 24px 15px 145px; }
  .home-heading { align-items: flex-start; }
  .home-heading h1 { font-size: 26px; }
  .home-heading p { max-width: 270px; line-height: 1.6; }
  .home-section { margin-top: 28px; }
  .home-hero-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 8px; }
  .home-chart-grid { grid-template-columns: 1fr; gap: 10px; }
  .home-chart-card { padding: 15px; }
  .home-playlist-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 14px; }
  .home-detail-header { align-items: flex-start; gap: 15px; margin-bottom: 25px; padding-bottom: 18px; }
  .home-detail-header > img { width: 112px; height: 112px; }
  .home-detail-header h1 { font-size: 23px; line-height: 1.25; }
  .home-detail-header p { font-size: 11px; line-height: 1.6; }
  .home-detail-song { grid-template-columns: 22px 38px minmax(0, 1fr) auto auto; gap: 8px; }
  .home-detail-song > img { width: 38px; height: 38px; }
}

.comment-action { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.comment-action:hover { color: var(--teal); }
.comment-action:disabled { cursor: wait; opacity: .55; }
.comment-like-action.is-liked { color: var(--coral-dark); }
.comment-like-action.is-liked svg { fill: currentColor; }
.comment-replies-action { color: var(--muted); }
.comment-replies-action svg, .comment-like-action svg { width: 12px; height: 12px; }
.comment-replies { margin-top: 12px; padding-left: 12px; border-left: 2px solid #e7efeb; }
.comment-replies .comment-item { padding: 11px 0; border-top: 1px solid #edf1ef; }
.comment-replies .comment-item:first-child { border-top: 0; }
.comment-replies .comment-avatar { width: 26px; height: 26px; }
.comment-replies-empty { padding: 10px 0; color: var(--muted); font-size: 10px; }
.comment-composer { margin: 0 0 18px; padding: 13px; border: 1px solid var(--line); border-radius: 6px; background: #f8fbf9; }
.comment-composer-head, .comment-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.comment-composer-head strong { color: var(--ink); font-size: 11px; }
.comment-composer-cancel { width: 24px; height: 24px; display: inline-grid; place-items: center; padding: 0; border: 0; color: var(--muted); background: transparent; cursor: pointer; }
.comment-composer-cancel:hover { color: var(--coral-dark); }
.comment-composer-cancel svg { width: 14px; height: 14px; }
.comment-composer textarea { width: 100%; min-height: 68px; display: block; margin: 10px 0; padding: 9px 10px; resize: vertical; border: 1px solid #d8e4df; border-radius: 4px; outline: 0; color: var(--ink); background: #fff; font-size: 11px; line-height: 1.65; }
.comment-composer textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,146,134,.1); }
.comment-composer textarea:disabled { cursor: wait; opacity: .65; }
.comment-composer-foot > span { color: var(--muted); font-size: 9px; }
.comment-submit { height: 31px; padding: 0 11px; }
.comment-submit:disabled { cursor: wait; opacity: .65; }
.comment-submit svg { width: 13px; height: 13px; }

.music-view { animation: detail-enter .22s ease both; }
.music-page-header { margin-bottom: 30px; }
.music-limit-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.music-limit-label select { height: 36px; padding: 0 26px 0 10px; border: 1px solid #cbd9d4; border-radius: 6px; outline: 0; color: var(--ink-soft); background: var(--paper); font-size: 11px; }
.music-limit-label select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47,146,134,.1); }
.music-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 38px; align-items: start; }
.music-main { min-width: 0; }
.music-aside { display: grid; gap: 24px; }
.music-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.music-toolbar strong { margin-right: 9px; color: var(--ink); font-size: 13px; }
.music-toolbar > div > span { color: var(--muted); font-size: 10px; }
.music-toolbar > div > span.is-loading { color: var(--teal); }
.music-list { display: grid; gap: 9px; }
.music-card { display: grid; grid-template-columns: 28px 60px minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 84px; padding: 11px 14px 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.music-card:hover, .music-card.is-current { border-color: #b9d5cc; box-shadow: var(--shadow); transform: translateY(-1px); }
.music-index { color: #a9b5b0; font-size: 11px; font-variant-numeric: tabular-nums; text-align: center; }
.music-card.is-current .music-index { color: var(--coral); font-weight: 700; }
.music-cover-button { position: relative; width: 60px; height: 60px; padding: 0; overflow: hidden; border: 0; border-radius: 5px; background: #e4efeb; }
.music-cover { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #e4efeb; }
.music-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-cover-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #6da89d; background: #e4efeb; }
.music-cover-fallback svg { width: 19px; height: 19px; }
.music-cover img + .music-cover-fallback { display: none; }
.music-cover-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(20,36,32,.42); opacity: 0; transition: opacity .18s ease; }
.music-cover-button:hover .music-cover-play, .music-card.is-current .music-cover-play { opacity: 1; }
.music-cover-play svg { width: 20px; height: 20px; fill: currentColor; }
.music-song-copy { min-width: 0; }
.music-song-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.music-song-title h2 { overflow: hidden; margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.music-song-title span { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.music-song-copy p { overflow: hidden; margin: 5px 0 6px; color: var(--ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.music-song-copy p span { color: var(--muted); }
.music-song-meta { display: flex; gap: 12px; color: #a3afaa; font-size: 9px; }
.music-card-actions { display: flex; align-items: center; gap: 4px; }
.music-like-button.is-liked { color: var(--coral); }
.music-like-button.is-liked svg { fill: currentColor; }
.music-like-button:disabled { cursor: wait; opacity: .5; }
.music-comment-button { display: inline-flex; align-items: center; gap: 4px; height: 27px; padding: 0 6px; border: 0; color: var(--muted); background: transparent; font-size: 10px; }
.music-comment-button:hover { color: var(--teal); }
.music-comment-button svg { width: 13px; height: 13px; }
.music-state { display: grid; min-height: 240px; justify-items: center; align-content: center; gap: 9px; padding: 40px 20px; border: 1px dashed #3a3b45; border-radius: 7px; color: #898a95; background: #15161c; font-size: 11px; }
.music-state > svg { width: 24px; height: 24px; color: #7ba99d; }
.music-state > svg:first-child { animation: spin 1s linear infinite; }
.music-state-error { border-color: #563c3a; background: #19171b; }.music-state-error > svg { color: #e57764; animation: none; }
.music-state strong { color: #dedee5; font-size: 12px; font-weight: 600; }
.music-state .outline-button { margin-top: 4px; }
.music-load-more { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 8px; color: #858691; font-size: 10px; }
.music-load-more > svg { width: 14px; height: 14px; animation: spin 1s linear infinite; }
.music-load-more .outline-button { height: 30px; margin: 0; padding: 0 10px; font-size: 10px; }
.music-comments-panel { padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); }
.music-comments-panel .section-heading { margin-bottom: 15px; }
.music-comments-panel { min-height: 180px; }
.music-comments-panel .section-heading { gap: 10px; }
.music-comments-panel .section-heading > span:first-child { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-comments-empty { display: grid; justify-items: center; gap: 8px; padding: 35px 10px; color: var(--muted); font-size: 10px; text-align: center; }
.music-comments-empty > svg { width: 21px; height: 21px; color: #a7bdb6; }
.music-comments-empty > svg:first-child { animation: spin 1s linear infinite; }
.music-comments-empty.music-comments-error { color: var(--coral-dark); line-height: 1.6; }
.music-comments-empty.music-comments-error > svg { animation: none; color: var(--coral-dark); }
.text-button { padding: 0; border: 0; color: var(--teal); background: transparent; font-size: 10px; }
.text-button:hover { color: var(--coral-dark); }
.music-comment-list { display: grid; gap: 0; }
.music-comment { display: flex; gap: 9px; padding: 12px 0; border-top: 1px solid #edf1ef; }
.music-comment:first-child { padding-top: 0; border-top: 0; }
.music-comment-avatar { position: relative; width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; color: #327267; background: #e2f0eb; font-size: 10px; }
.music-comment-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-comment-avatar img + span { display: none; }
.music-comment-body { min-width: 0; flex: 1; }
.music-comment-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.music-comment-head strong { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.music-comment-head em { padding: 2px 4px; color: #ad7523; background: #fff5dc; font-size: 8px; font-style: normal; }
.music-comment-head time { margin-left: auto; color: #a5b0ac; font-size: 9px; white-space: nowrap; }
.music-comment-body p { margin: 6px 0; color: var(--ink-soft); font-size: 10px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.music-comment-foot { color: var(--muted); font-size: 9px; }
.music-comment-foot span { display: inline-flex; align-items: center; gap: 4px; }
.music-comment-foot svg { width: 11px; height: 11px; }

.comment-view { min-height: calc(100vh - 76px); margin: -42px -48px -148px; padding: 28px 48px 158px; color: #d8d8df; background: #0d0e12; }
.comment-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; padding-bottom: 15px; border-bottom: 1px solid #2a2a32; }
.comment-toolbar .outline-button { border-color: #363640; color: #b9b9c2; background: transparent; }
.comment-toolbar .outline-button:hover { border-color: #696975; color: #fff; background: #1b1b22; }
.comment-toolbar-label { color: #7f808b; font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
.comment-song-header { display: flex; align-items: center; gap: 16px; max-width: 980px; margin: 18px auto 26px; padding-bottom: 18px; border-bottom: 1px solid #24242c; }
.comment-song-cover { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 7px; object-fit: cover; background: #292930; }
.comment-song-meta { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "album actions" "artist actions"; column-gap: 22px; align-items: center; }
.comment-song-meta h1 { grid-area: title; overflow: hidden; margin: 0 0 4px; color: #f3f3f6; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.comment-song-line { margin: 2px 0; color: #9c9da8; font-size: 11px; }
.comment-song-line:nth-of-type(1) { grid-area: album; }.comment-song-line:nth-of-type(2) { grid-area: artist; }
.comment-song-tag { margin-right: 8px; color: #6d6e79; }
.comment-song-actions { grid-area: actions; display: flex; align-self: center; gap: 8px; margin: 0; }
.comment-song-actions .solid-button { color: #202026; background: #ebebef; }
.comment-song-actions .outline-button { border-color: #42424c; color: #c3c3cc; background: transparent; }
.comment-song-actions .outline-button.is-liked { border-color: #ec7962; color: #ec7962; }
.comment-song-actions .solid-button, .comment-song-actions .outline-button { min-height: 32px; padding: 0 12px; font-size: 10px; }
.comment-song-actions svg { width: 14px; height: 14px; }
.comment-compose, .comment-list-section { max-width: 980px; margin-right: auto; margin-left: auto; }
.comment-view .section-heading { margin-bottom: 14px; color: #f0f0f4; }
.comment-view .section-heading > span { font-size: 15px; font-weight: 700; }
.comment-editor { overflow: hidden; border: 1px solid #2d2d36; border-radius: 9px; background: #1a1a21; }
.comment-editor textarea { width: 100%; display: block; min-height: 82px; padding: 15px; resize: vertical; border: 0; outline: 0; color: #e8e8ed; background: transparent; font-size: 12px; line-height: 1.7; }
.comment-editor textarea::placeholder { color: #777883; }
.comment-editor-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px 10px; border-top: 1px solid #292930; }
.comment-editor-footer .context-label { color: #767782; font-size: 10px; }
.comment-editor-footer .solid-button { min-height: 30px; padding: 0 13px; color: #222228; background: #dedee5; font-size: 10px; }
.comment-list-section { margin-top: 32px; }
.comment-list-section .section-heading { padding-bottom: 12px; border-bottom: 1px solid #292930; }
.comment-list { display: grid; gap: 0; }
.song-comment-item { display: flex; gap: 13px; padding: 18px 0; border-bottom: 1px solid #24242c; }
.song-comment-avatar { position: relative; width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 50%; color: #c6c6cf; background: #2a2a32; font-size: 12px; }
.song-comment-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.song-comment-avatar img + span { display: none; }
.song-comment-body { min-width: 0; flex: 1; }
.song-comment-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.song-comment-head strong { overflow: hidden; color: #aebfe4; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.song-comment-head em { padding: 2px 5px; border-radius: 3px; color: #f2aa87; background: #3c2a2e; font-size: 8px; font-style: normal; }
.song-comment-head time { margin-left: auto; color: #6f707b; font-size: 10px; white-space: nowrap; }
.song-comment-body p { margin: 7px 0 11px; color: #e2e2e7; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.song-comment-foot { display: flex; align-items: center; gap: 16px; }
.song-comment-like, .song-comment-reply { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 2px; border: 0; border-radius: 5px; color: #83848e; background: transparent; font-size: 10px; transition: color .14s ease, background .14s ease; }
.song-comment-like:hover, .song-comment-reply:hover { color: #e3e3e9; background: rgba(255,255,255,.06); }.song-comment-like.is-liked { color: #ed8c78; }.song-comment-like.is-liked svg { fill: currentColor; }.song-comment-like:disabled { cursor: wait; opacity: .55; }
.song-comment-like svg, .song-comment-reply svg { width: 14px; height: 14px; }
.song-comment-reply-editor { margin-top: 12px; overflow: hidden; border: 1px solid #34343f; border-radius: 8px; background: #19191f; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }.song-comment-reply-editor textarea { width: 100%; min-height: 58px; display: block; padding: 10px 11px; resize: vertical; border: 0; outline: 0; color: #e5e5eb; background: transparent; font: inherit; font-size: 11px; line-height: 1.6; }.song-comment-reply-editor textarea::placeholder { color: #767782; }.song-comment-reply-editor:focus-within { border-color: #696a76; box-shadow: 0 0 0 3px rgba(255,255,255,.045); }.song-comment-reply-editor-foot { display: flex; align-items: center; justify-content: space-between; min-height: 33px; padding: 5px 8px 5px 11px; border-top: 1px solid #2b2b34; }.song-comment-reply-editor-foot > span { color: #72737e; font-size: 9px; }.song-comment-reply-editor-foot > div { display: flex; align-items: center; gap: 5px; }.song-comment-reply-cancel, .song-comment-reply-submit { min-height: 24px; padding: 0 8px; border: 0; border-radius: 5px; font: inherit; font-size: 10px; }.song-comment-reply-cancel { color: #a4a5ae; background: transparent; }.song-comment-reply-cancel:hover { color: #f0f0f4; background: rgba(255,255,255,.07); }.song-comment-reply-submit { display: inline-flex; align-items: center; gap: 4px; color: #202026; background: #dcdce3; }.song-comment-reply-submit:hover { background: #fff; }.song-comment-reply-submit:disabled { cursor: wait; opacity: .58; }.song-comment-reply-submit svg { width: 12px; height: 12px; }
.song-comments-state { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 150px; color: #7d7e89; font-size: 11px; }
.song-comments-state svg { width: 18px; height: 18px; }
.song-comments-state svg:first-child { animation: spin 1s linear infinite; }
.song-comments-error { color: #ef8a74; }
.song-comments-error svg:first-child { animation: none; }

.global-player[hidden] { display: none; }
.global-player { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; min-height: 92px; display: grid; grid-template-columns: minmax(230px, 1fr) minmax(330px, 510px) minmax(180px, 1fr); align-items: center; gap: 30px; padding: 12px 38px; border-top: 1px solid #31473d; color: #dbe8e3; background: #1e3129; box-shadow: 0 -12px 32px rgba(19, 34, 28, .18); }
.workspace-scroll-actions { position: fixed; right: 22px; bottom: 22px; z-index: 35; display: grid; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .18s ease, transform .18s ease, bottom .18s ease; }
.global-player:not([hidden]) + .workspace-scroll-actions { bottom: 112px; }
.workspace-scroll-actions.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.workspace-scroll-action { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; color: #e6e7eb; background: rgba(25,26,32,.88); box-shadow: 0 8px 24px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease, opacity .16s ease; }
.workspace-scroll-action:hover:not(:disabled) { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(43,44,52,.94); transform: translateY(-1px); }
.workspace-scroll-action:focus-visible { outline: 2px solid rgba(197,232,223,.78); outline-offset: 2px; }
.workspace-scroll-action:disabled { cursor: default; opacity: .38; }
.workspace-scroll-action svg { width: 17px; height: 17px; }
[data-song-id].is-scroll-target { animation: workspace-scroll-target 1.35s ease-out; }
@keyframes workspace-scroll-target { 0%, 35% { box-shadow: 0 0 0 2px rgba(169,226,212,.72), 0 10px 32px rgba(68,154,135,.26); } 100% { box-shadow: none; } }
.global-player-track { min-width: 0; display: flex; align-items: center; gap: 12px; }
.global-player-track > img { width: 62px; height: 62px; flex: 0 0 auto; display: block; border-radius: 5px; object-fit: cover; background: #31483e; }
.global-player-copy { min-width: 0; }
.global-player-copy strong, .global-player-copy > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-player-copy strong { margin-bottom: 6px; color: #f5faf7; font-size: 12px; font-weight: 600; }
.global-player-copy > span { color: #9eb5aa; font-size: 10px; }
.global-player-copy small { margin-left: 7px; color: #6fbbaa; font-size: 9px; }
.global-player-engagement { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.global-player-engagement-button { display: inline-flex; align-items: center; gap: 4px; min-width: 35px; height: 30px; padding: 0 3px; border: 0; color: #9db0a7; background: transparent; font-size: 10px; }
.global-player-engagement-button:hover { color: #f0f5f2; }
.global-player-engagement-button:disabled { cursor: wait; opacity: .55; }
.global-player-engagement-button svg { width: 16px; height: 16px; }
.global-player-engagement-button span { min-width: 15px; text-align: left; }
.global-player-fm-trash { width: 30px; min-width: 30px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; }
.global-player-fm-trash:hover, .global-player-fm-trash:focus-visible { color: #ef927d; }
.global-player-fm-trash:focus-visible { outline: 2px solid rgba(239,146,125,.7); outline-offset: 1px; border-radius: 50%; }
.global-player-fm-trash svg { width: 16px; height: 16px; }
.global-player-fm-trash[hidden], .np-fm-trash[hidden] { display: none; }
.global-player-download { width: 30px; min-width: 30px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border-radius: 50%; transition: color .16s ease, background .16s ease; }
.global-player-download:hover { background: rgba(255,255,255,.1); }
.global-player-download:focus-visible { outline: 2px solid rgba(255,255,255,.72); outline-offset: 2px; }
.global-player-download svg { width: 16px; height: 16px; }
.global-player-like { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; color: #9db0a7; background: transparent; }
.global-player-like:hover, .global-player-like.is-liked { color: #f17a63; }
.global-player-like.is-liked svg { fill: currentColor; }
.global-player-like svg { width: 17px; height: 17px; }
.global-player-engagement .global-player-like { width: auto; display: inline-flex; }
.global-player-center { min-width: 0; display: grid; justify-items: center; gap: 8px; }
.global-player-controls { display: flex; align-items: center; gap: 18px; }
.global-player-control { display: grid; place-items: center; padding: 0; border: 0; color: #dce8e3; background: transparent; }
.global-player-control svg { width: 17px; height: 17px; }
.global-player-control.subtle { width: 30px; height: 30px; color: #b8cac1; }
.global-player-control.subtle:hover { color: #fff; }
.global-player-control.primary { width: 37px; height: 37px; border-radius: 50%; color: #234237; background: #e4eee8; }
.global-player-control.primary:hover { color: #18332a; background: #fff; }
.global-player-control.primary svg { width: 18px; height: 18px; fill: currentColor; }
.global-player-timeline { width: 100%; display: grid; grid-template-columns: 32px minmax(70px, 1fr) 32px; align-items: center; gap: 8px; }
.global-player time { color: #9eb4aa; font-size: 9px; font-variant-numeric: tabular-nums; text-align: center; }
.global-player input[type="range"] { min-width: 0; height: 14px; margin: 0; accent-color: #75bbac; cursor: pointer; }
.global-player-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.global-player-quality { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: #9db0a7; font-size: 10px; white-space: nowrap; }
.global-player-quality select { width: 80px; height: 28px; padding: 0 7px; border: 1px solid #3a5148; border-radius: 4px; outline: 0; color: #dbe8e3; background: #1b2d26; font: inherit; font-size: 10px; }
.global-player-quality select:focus { border-color: #75bbac; box-shadow: 0 0 0 3px rgba(117,187,172,.14); }
.global-player-tools > svg { width: 16px; height: 16px; color: #b8cac1; }
#music-volume { width: min(120px, 100%); }
#music-audio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (max-width: 860px) {
  .music-layout { grid-template-columns: 1fr; gap: 30px; }
  .music-aside { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .global-player { grid-template-columns: minmax(170px, 1fr) minmax(270px, 1.6fr) auto; gap: 12px; padding: 11px 22px; }
  .global-player-tools { gap: 5px; }
  #music-volume { width: 78px; }
}
@media (max-width: 760px) and (min-width: 621px) {
  .global-player { grid-template-columns: minmax(140px, 1fr) minmax(210px, 1.4fr) auto; gap: 10px; padding: 10px 16px; }
  .global-player-tools { max-width: 190px; flex-wrap: wrap; gap: 3px 5px; }
  .global-player-tools > svg, #music-volume { display: none; }
  .global-player-quality > span { display: none; }
  .global-player-quality select { width: 78px; }
}
@media (max-width: 620px) {
  .page-wrap { padding-bottom: 164px; }
  .comment-view { margin: -28px -15px -50px; padding: 21px 15px 150px; }
  .comment-toolbar { margin-bottom: 24px; }
  .comment-song-header { align-items: flex-start; gap: 12px; }
  .comment-song-cover { width: 54px; height: 54px; }
  .comment-song-meta { grid-template-columns: 1fr; grid-template-areas: "title" "album" "artist" "actions"; }
  .comment-song-meta h1 { font-size: 16px; }
  .comment-song-line { font-size: 10px; }
  .comment-song-actions { margin-top: 10px; }
  .song-comment-item { gap: 10px; padding: 15px 0; }
  .song-comment-avatar { width: 32px; height: 32px; }
  .song-comment-body p { font-size: 12px; }
  .song-comment-head time { margin-left: 4px; }
  .music-page-header .page-actions { display: flex; align-items: center; gap: 7px; }
  .music-limit-label { font-size: 0; }
  .music-limit-label select { font-size: 10px; }
  .music-card { grid-template-columns: 20px 52px minmax(0, 1fr) auto; gap: 9px; padding: 9px 8px 9px 6px; }
  .music-cover-button { width: 52px; height: 52px; }
  .music-song-title h2 { font-size: 12px; }
  .music-song-title span, .music-song-meta span:nth-child(2) { display: none; }
  .music-card-actions { gap: 0; }
  .music-comment-button span { display: none; }
  .music-comment-button { padding: 0 4px; }
  .music-aside { display: grid; grid-template-columns: 1fr; }
  .music-toolbar { align-items: flex-start; flex-direction: column; gap: 7px; }
  .global-player { min-height: 112px; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 9px 12px; }
  .workspace-scroll-actions { right: 14px; bottom: 16px; }
  .global-player:not([hidden]) + .workspace-scroll-actions { bottom: 128px; }
  .workspace-scroll-action { width: 38px; height: 38px; }
  .global-player-track > img { width: 48px; height: 48px; }
  .global-player-copy strong { font-size: 11px; }
  .global-player-copy small { display: none; }
  .global-player-center { grid-column: 1 / -1; grid-row: 2; width: 100%; gap: 4px; }
  .global-player-controls { position: absolute; right: 11px; bottom: 40px; gap: 7px; }
  .global-player-control.subtle { width: 25px; height: 25px; }
  .global-player-control.primary { width: 31px; height: 31px; }
  .global-player-tools { max-width: 48vw; flex-wrap: wrap; gap: 3px 6px; }
  .global-player-tools > svg, #music-volume { display: none; }
  .global-player-quality > span { display: none; }
  .global-player-quality select { width: 78px; }
  .global-player-timeline { grid-template-columns: 28px minmax(50px, 1fr) 28px; }
}

/* Dark workspace surfaces. The cover-driven player adds the only dynamic color layer. */
html, body { color: var(--ink); background: #0d0e12; }
.main-panel, .page-wrap { background: #0d0e12; }
.topbar { border-color: #292a32; background: rgba(13,14,18,.88); }
.crumbs strong, h1, .page-header p, .profile-row strong, .author-name, .note-title, .detail-title, .detail-song strong, .detail-aside-heading, .detail-stats strong, .music-song-title h2, .home-detail-header h1, .home-detail-song strong { color: var(--ink); }
.search-box, .icon-button, .music-limit-label select { border-color: #2c2d36; color: var(--ink-soft); background: #16171d; }
.search-box input { color: var(--ink); }
.search-box input::placeholder { color: #696a75; }
.search-box kbd { border-color: #2b2c34; color: #777883; background: #202127; }
.topbar .outline-button, .outline-button { border-color: #3a3b45; color: #c0c0c8; }
.outline-button:hover { border-color: #777984; color: #fff; background: #1c1d23; }
.login-trigger.is-authenticated { border-color: #3d6d61; color: #91d0bf; background: #152822; }
.top-avatar, .profile-avatar { background: #25262e; }
.top-avatar span, .profile-avatar span { color: #c6c7cf; background: #25262e; }
.note-card, .music-card, .detail-song, .drawer-song { border-color: #2b2c34; background: #17181e; box-shadow: none; }
.note-card:hover, .music-card:hover, .music-card.is-current { border-color: #4b655e; box-shadow: var(--shadow); }
.note-card.is-read { background: #121318; }
.note-card.is-read .note-title { color: #8e909a; }
.note-footer, .home-detail-song, .detail-meta { border-color: #2b2c34; }
.home-detail-song:hover { background: #1a1b21; }
.home-detail-header > img, .home-detail-song > img, .detail-gallery img, .detail-image-button { background: #202128; }
.note-tag { color: #9c9da7; background: #202127; }
.note-song-button { border-color: #343640; color: #c0c1c9; background: #1d1e24; }
.note-song-button:hover { border-color: #6b9488; color: #9ed6c6; background: #202a27; }
.note-type { background: #172c28; }.note-type.scene { background: #2c201c; }.note-type.playlist { background: #1d2630; }
.empty-state, .snapshot-notice, .home-loading { border-color: #34353e; color: #92939d; background: #17181e; }
.snapshot-notice strong { color: #e4c88b; }.snapshot-notice p { color: #a89c7e; }
.notice-icon { color: #d9ad58; background: #332b1b; }
.toast { border-color: #3d6d61; color: #a9dfd1; background: #152822; }
.detail-aside { border-color: #2b2c34; }
.detail-save { border-color: #3a3b45; color: #c0c0c8; background: transparent; }.detail-save:hover, .detail-save.is-saved { border-color: var(--coral); color: #ff9b88; background: #2b1d1c; }
.login-dialog { border-color: #34353e; background: #17181e; }.login-status.waiting { color: #e0bd72; background: #2b2518; }.login-status.success { color: #9bd4c4; background: #172c28; }.login-status.error { color: #f19b88; background: #2c1c1a; }.login-qr-shell { background: #f8f8f8; }

.global-player { isolation: isolate; overflow: visible; border-top-color: rgba(255,255,255,.14); color: #e5e5ea; background: rgba(8,9,12,.72); box-shadow: 0 -16px 40px rgba(0,0,0,.38); -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25); }
.global-player::before { position: absolute; inset: -44px; z-index: -2; clip-path: inset(44px); content: ""; background-image: var(--player-cover-image, none); background-position: center; background-size: cover; filter: blur(34px) saturate(1.35) brightness(.42); opacity: .85; transform: scale(1.08); }
.global-player::after { position: absolute; inset: 0; z-index: -1; content: ""; background: linear-gradient(90deg, rgba(5,6,8,.86), rgba(10,11,15,.66) 48%, rgba(5,6,8,.84)); }
.global-player > * { position: relative; z-index: 1; }
.global-player-track > img { background: #202128; }
.global-player-copy strong { color: #f7f7fa; }.global-player-copy > span { color: #c0c1c9; }.global-player-copy small { color: #a6d7ca; }
.global-player-engagement-button { color: #c2c3cb; }.global-player-engagement-button:hover { color: #fff; }
.global-player-control { color: #e2e2e7; }.global-player-control.subtle { color: #c4c5cd; }.global-player-control.subtle:hover { color: #fff; }
.global-player-control.primary { color: #17181e; background: #f0f0f3; }.global-player-control.primary:hover { color: #090a0d; background: #fff; }
.global-player time { color: #b4b5be; }.global-player input[type="range"] { accent-color: #c9cbd2; }
.global-player-tools > svg { color: #c7c8cf; }
.global-player-tools { position: relative; }
.global-player-quality { position: relative; height: 30px; display: inline-flex; align-items: center; gap: 4px; padding: 0 5px 0 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #a9aab4; background: rgba(255,255,255,.045); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.global-player-quality:hover, .global-player-quality:focus-within, .global-player-quality.is-open { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.09); }
.global-player-quality.is-open { box-shadow: 0 0 0 3px rgba(255,255,255,.045); }
.global-player-quality > span { color: #999aa5; font-size: 9px; letter-spacing: .04em; }
.global-player-quality select { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.global-player-quality-trigger { min-width: 56px; height: 26px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 0 2px 0 1px; border: 0; border-radius: 999px; color: #f0f0f3; background: transparent; font: inherit; font-size: 10px; font-weight: 600; cursor: pointer; }
.global-player-quality-trigger:hover { color: #fff; }.global-player-quality-trigger:focus-visible { outline: 2px solid rgba(255,255,255,.74); outline-offset: 1px; }.global-player-quality-trigger svg { width: 13px; height: 13px; color: #aaaab5; transition: transform .16s ease; }.global-player-quality.is-open .global-player-quality-trigger svg { transform: rotate(180deg); }
.global-player-quality-menu { position: absolute; right: 0; bottom: calc(100% + 9px); z-index: 7; width: 118px; display: grid; gap: 2px; padding: 5px; border: 1px solid rgba(255,255,255,.16); border-radius: 11px; background: rgba(22,23,30,.96); box-shadow: 0 14px 38px rgba(0,0,0,.42); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }.global-player-quality-menu[hidden] { display: none; }
.global-player-quality-menu button { min-height: 30px; display: flex; align-items: center; padding: 0 9px; border: 0; border-radius: 7px; color: #adaeb9; background: transparent; font: inherit; font-size: 10px; text-align: left; }.global-player-quality-menu button:hover, .global-player-quality-menu button:focus-visible { color: #f8f8fb; background: rgba(255,255,255,.09); outline: 0; }.global-player-quality-menu button.is-selected { color: #fff; background: rgba(255,255,255,.14); }.global-player-quality-menu button.is-selected::after { margin-left: auto; color: #bce4d9; content: "✓"; font-size: 12px; }

.global-player-playlist-collect { position: relative; display: grid; place-items: center; flex: 0 0 auto; }
.global-player-playlist-collect > .global-player-control { width: 30px; height: 30px; border-radius: 50%; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.global-player-playlist-collect > .global-player-control:hover, .global-player-playlist-collect > .global-player-control.is-active { color: #fff; background: rgba(255,255,255,.1); }
.global-player-playlist-collect > .global-player-control.is-active { box-shadow: inset 0 0 0 1px rgba(183,230,219,.16); }
.global-player-playlist-collect > .global-player-control svg { width: 16px; height: 16px; stroke-width: 1.75; }
.global-player-playlist-panel { position: absolute; right: -4px; bottom: calc(100% + 12px); z-index: 12; width: min(348px, calc(100vw - 24px)); max-height: min(496px, calc(100vh - 126px)); overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; color: #dddde3; background: linear-gradient(145deg, rgba(43,43,55,.98), rgba(36,36,47,.98)); box-shadow: 0 24px 64px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.055); -webkit-backdrop-filter: blur(24px) saturate(1.12); backdrop-filter: blur(24px) saturate(1.12); }
.global-player-playlist-panel[hidden] { display: none; }
.global-player-playlist-head { min-height: 58px; display: flex; align-items: center; justify-content: center; padding: 0 13px; border-bottom: 1px solid rgba(255,255,255,.065); }
.global-player-playlist-head strong { color: #f5f5f7; font-size: 16px; font-weight: 680; letter-spacing: -.02em; }
.global-player-playlist-head button { position: absolute; top: 14px; right: 13px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: #aaaab4; background: transparent; }.global-player-playlist-head button:hover { color: #fff; background: rgba(255,255,255,.08); }.global-player-playlist-head button svg { width: 18px; height: 18px; }
.global-player-playlist-tabs { display: flex; align-items: center; gap: 22px; height: 47px; padding: 0 17px; }
.global-player-playlist-tabs button { height: 30px; padding: 0; border: 0; border-bottom: 2px solid transparent; color: #90919d; background: transparent; font: inherit; font-size: 11px; font-weight: 550; }.global-player-playlist-tabs button:hover { color: #e8e8ed; }.global-player-playlist-tabs button.is-active { border-bottom-color: #9fd8ca; color: #f1f1f4; }
.global-player-playlist-list { min-height: 96px; max-height: min(365px, calc(100vh - 233px)); overflow-y: auto; padding: 0 8px 9px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.24) transparent; }.global-player-playlist-list::-webkit-scrollbar { width: 6px; }.global-player-playlist-list::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255,255,255,.2); }.global-player-playlist-list::-webkit-scrollbar-track { background: transparent; }
.global-player-playlist-row { width: 100%; min-height: 62px; display: grid; grid-template-columns: 46px minmax(0, 1fr) 22px; align-items: center; gap: 11px; padding: 7px 9px; border: 0; border-radius: 8px; color: #d6d6dd; background: transparent; text-align: left; transition: color .15s ease, background .15s ease; }.global-player-playlist-row:hover, .global-player-playlist-row:focus-visible { color: #fff; background: rgba(255,255,255,.095); outline: 0; }.global-player-playlist-row:disabled { cursor: wait; opacity: .72; }.global-player-playlist-row.is-added { color: #bde4d9; background: rgba(135,207,191,.1); }
.global-player-playlist-cover { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border-radius: 7px; color: #9c9da7; background: #242530; }.global-player-playlist-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }.global-player-playlist-cover img + svg { display: none; }.global-player-playlist-cover svg { width: 17px; height: 17px; }
.global-player-playlist-row > span:nth-child(2) { min-width: 0; }.global-player-playlist-row strong, .global-player-playlist-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.global-player-playlist-row strong { margin-bottom: 5px; color: inherit; font-size: 12px; font-weight: 590; }.global-player-playlist-row small { color: #a4a5af; font-size: 10px; }.global-player-playlist-row.is-added small { color: #a8d6ca; }.global-player-playlist-row > svg { width: 16px; height: 16px; color: #9bd7c8; }.global-player-playlist-row > svg[data-lucide="loader-circle"] { color: #b5b6c0; animation: spin .8s linear infinite; }
.global-player-playlist-state { min-height: 138px; display: grid; place-items: center; align-content: center; gap: 9px; padding: 18px; color: #a7a8b2; font-size: 11px; text-align: center; }.global-player-playlist-state svg { width: 20px; height: 20px; color: #8f909b; }.global-player-playlist-state svg[data-lucide="loader-circle"] { animation: spin .8s linear infinite; }.global-player-playlist-state.is-error { color: #e3aaa0; }.global-player-playlist-state.is-error svg { color: #e18c7d; }.global-player-playlist-state button { min-height: 28px; padding: 0 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; color: #e4e4e8; background: rgba(255,255,255,.055); font: inherit; font-size: 10px; }.global-player-playlist-state button:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); }

/* Keep a single mute button visible; reveal the vertical volume range only on hover or focus. */
.global-player-volume { position: relative; width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; }
.global-player-volume::before { content: ""; position: absolute; right: -6px; bottom: 100%; z-index: 2; width: 48px; height: 14px; pointer-events: auto; }
.global-player-volume-popover { position: absolute; right: -4px; bottom: calc(100% + 8px); z-index: 3; width: 38px; height: 132px; display: block; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(25,26,33,.9); box-shadow: 0 10px 24px rgba(0,0,0,.28); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(6px) scale(.96); transform-origin: bottom right; transition: opacity .15s ease, visibility .15s step-end, transform .18s ease; }
.global-player-volume #music-volume { position: absolute; top: 50%; left: 50%; width: 104px; min-width: 104px; max-width: 104px; height: 14px; display: block; margin: 0; cursor: ns-resize; transform: translate(-50%, -50%) rotate(-90deg); }
.global-player-volume:hover .global-player-volume-popover, .global-player-volume:focus-within .global-player-volume-popover { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity .15s ease, visibility 0s, transform .18s ease; }
.global-player-volume .global-player-control { flex: 0 0 30px; }
.global-player-volume .global-player-control:focus-visible { border-radius: 50%; outline: 2px solid rgba(255,255,255,.72); outline-offset: 2px; }
.global-player-mode { border-radius: 50%; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }.global-player-mode:hover { background: rgba(255,255,255,.1); }.global-player-mode[data-playback-mode="shuffle"], .global-player-mode[data-playback-mode="one"] { color: #d3eee8; background: rgba(116,190,176,.14); box-shadow: inset 0 0 0 1px rgba(167,227,215,.1); }.global-player-mode:focus-visible { outline: 2px solid rgba(255,255,255,.72); outline-offset: 2px; }
.global-player-queue-toggle.is-active { border-radius: 50%; color: #fff; background: rgba(255,255,255,.12); }
.global-player-queue-panel { position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 5; width: min(382px, calc(100vw - 24px)); max-height: min(492px, calc(100vh - 122px)); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 15px; background: linear-gradient(145deg, rgba(30,31,39,.97), rgba(17,18,24,.97)); box-shadow: 0 24px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05); -webkit-backdrop-filter: blur(24px) saturate(1.15); backdrop-filter: blur(24px) saturate(1.15); }
.global-player-queue-panel[hidden] { display: none; }
.global-player-queue-head { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 12px 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.018); }
.global-player-queue-head strong { color: #f6f6f9; font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
.global-player-queue-head span { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 999px; color: #a7a8b2; background: rgba(255,255,255,.07); font-size: 10px; font-variant-numeric: tabular-nums; }
.global-player-queue-clear, .global-player-queue-close { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 9px; color: #a9aab4; background: transparent; transition: color .15s ease, background .15s ease; }
.global-player-queue-clear { margin-left: auto; }.global-player-queue-clear:hover { color: #ffb2a2; background: rgba(240,112,92,.13); }.global-player-queue-close:hover { color: #fff; background: rgba(255,255,255,.1); }.global-player-queue-clear svg, .global-player-queue-close svg { width: 15px; height: 15px; }
.global-player-queue-list { min-height: 0; max-height: min(430px, calc(100vh - 164px)); overflow: auto; padding: 7px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }.global-player-queue-list::-webkit-scrollbar { width: 6px; }.global-player-queue-list::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255,255,255,.2); }.global-player-queue-list::-webkit-scrollbar-track { background: transparent; }
.global-player-queue-row { position: relative; min-width: 0; padding: 1px; border-radius: 10px; color: #bfc0ca; }.global-player-queue-row.is-current::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 2px; border-radius: 99px; content: ""; background: linear-gradient(#bde3da, #75aeaa); box-shadow: 0 0 10px rgba(135,207,191,.55); }
.global-player-queue-play { width: 100%; min-width: 0; display: grid; grid-template-columns: 23px 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 9px; color: inherit; background: transparent; text-align: left; transition: color .14s ease, background .14s ease, padding .14s ease; }.global-player-queue-row:hover .global-player-queue-play, .global-player-queue-row:focus-within .global-player-queue-play { padding-right: 40px; color: #f7f7fa; background: rgba(255,255,255,.065); }.global-player-queue-row.is-current .global-player-queue-play { color: #fff; background: linear-gradient(100deg, rgba(153,209,197,.17), rgba(255,255,255,.085)); }.global-player-queue-row.is-current:hover .global-player-queue-play { background: linear-gradient(100deg, rgba(153,209,197,.22), rgba(255,255,255,.12)); }
.global-player-queue-remove { position: absolute; top: 50%; right: 7px; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; color: #aaaab4; background: rgba(38,39,47,.82); box-shadow: 0 3px 10px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.86); transition: opacity .14s ease, transform .14s ease, color .14s ease, background .14s ease; }.global-player-queue-remove svg { width: 14px; height: 14px; }.global-player-queue-row:hover .global-player-queue-remove, .global-player-queue-row:focus-within .global-player-queue-remove { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }.global-player-queue-remove:hover { color: #fff; background: rgba(255,255,255,.16); }
.global-player-queue-index { width: 23px; display: grid; place-items: center; color: #777985; font-size: 10px; font-variant-numeric: tabular-nums; }.global-player-queue-row.is-current .global-player-queue-index { color: #c4ebe1; }.global-player-queue-index svg { width: 14px; height: 14px; }
.global-player-queue-cover { width: 32px; height: 32px; position: relative; display: grid; place-items: center; overflow: hidden; border-radius: 7px; color: #a3a4ae; background: #2c2d36; }.global-player-queue-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }.global-player-queue-cover img + svg { display: none; }.global-player-queue-cover svg { width: 15px; height: 15px; }.global-player-queue-row.is-current .global-player-queue-cover { box-shadow: 0 4px 13px rgba(0,0,0,.25); }
.global-player-queue-copy { min-width: 0; display: grid; gap: 3px; }.global-player-queue-copy strong, .global-player-queue-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.global-player-queue-copy strong { color: inherit; font-size: 11px; font-weight: 560; letter-spacing: -.01em; }.global-player-queue-copy span { color: #898a95; font-size: 9px; }.global-player-queue-row.is-current .global-player-queue-copy span { color: #b8d2cc; }
.global-player-queue-duration { padding-right: 1px; color: #767783; font-size: 10px; font-variant-numeric: tabular-nums; }.global-player-queue-row.is-current .global-player-queue-duration { color: #bdd1cc; }
.global-player-queue-empty { min-height: 112px; display: grid; place-items: center; color: #888994; font-size: 11px; }
@media (max-width: 620px) { .global-player-quality { padding-left: 7px; }.global-player-quality > span { display: none; }.global-player-quality select { width: 46px; }.global-player-queue-panel { right: -2px; width: min(330px, calc(100vw - 20px)); } }

.tasks-view { animation: detail-enter .22s ease both; }
.tasks-header { margin-bottom: 25px; }
.task-tabs { display: flex; gap: 5px; margin-bottom: 22px; border-bottom: 1px solid #2b2c34; }
.task-tab { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; color: #898a94; background: transparent; font-size: 11px; }
.task-tab:hover { color: #d7d7de; }.task-tab.is-active { border-bottom-color: var(--coral); color: #f3f3f6; }.task-tab svg { width: 15px; height: 15px; }
.task-workspace { display: grid; grid-template-columns: minmax(380px, .9fr) minmax(460px, 1.1fr); gap: 22px; align-items: stretch; }
.task-config-panel, .task-queue-panel { min-width: 0; padding: 22px; border: 1px solid #2d2e37; border-radius: 7px; background: #15161c; }
.task-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.task-section-heading strong { color: #ececf0; font-size: 13px; }.task-section-heading span { color: #80818c; font-size: 10px; }
.task-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.task-form-grid label, .task-controls label { display: grid; gap: 7px; color: #aaaab3; font-size: 10px; }
.task-form-full { grid-column: 1 / -1; }
.task-form-grid input, .task-form-grid textarea, .task-controls input[type="number"] { width: 100%; border: 1px solid #32333d; border-radius: 5px; outline: 0; color: #eeeef2; background: #1d1e25; font: inherit; font-size: 11px; }
.task-form-grid input, .task-controls input[type="number"] { height: 34px; padding: 0 10px; }.task-form-grid textarea { min-height: 86px; padding: 9px 10px; resize: vertical; line-height: 1.65; }
.task-form-grid input:focus, .task-form-grid textarea:focus, .task-controls input[type="number"]:focus { border-color: #697b76; box-shadow: 0 0 0 3px rgba(108,160,146,.12); }
.task-source-row { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); align-items: end; gap: 14px; margin-top: 16px; padding-top: 15px; border-top: 1px solid #292a32; }
.task-source-row label { display: grid; gap: 7px; color: #aaaab3; font-size: 10px; }.task-source-row select { width: 100%; height: 34px; padding: 0 10px; border: 1px solid #32333d; border-radius: 5px; outline: 0; color: #eeeef2; background: #1d1e25; font: inherit; font-size: 11px; }.task-source-row select:focus { border-color: #697b76; box-shadow: 0 0 0 3px rgba(108,160,146,.12); }.task-source-row > span { padding-bottom: 9px; color: #7f808b; font-size: 10px; }
.task-controls { display: grid; grid-template-columns: 92px 126px minmax(180px, 1fr); align-items: end; gap: 14px; margin: 17px 0; }
.task-number-field { display: grid; gap: 7px; min-width: 0; }.task-number-field > span { color: #aaaab3; font-size: 10px; }.task-unit-input { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }.task-unit-input small { color: #7f808b; font-size: 10px; }
.task-toggle { display: inline-flex !important; grid-template-columns: auto 1fr !important; align-items: center; gap: 7px !important; min-width: auto !important; padding: 0 0 9px 2px; color: #bebec6 !important; }
.task-toggle input { width: 15px; height: 15px; margin: 0; accent-color: #b6b7c0; }
.task-generate { width: 100%; justify-content: center; min-height: 38px; color: #15161c; background: #dedee5; border-color: #dedee5; }.task-generate:hover { color: #090a0d; background: #fff; border-color: #fff; }.task-generate:disabled { cursor: wait; opacity: .6; }
.task-status { min-height: 18px; margin: 13px 0 0; color: #898a94; font-size: 10px; line-height: 1.55; }.task-status.is-error { color: #ee9a89; }.task-status.is-success { color: #9bd5c5; }.task-status.is-loading { color: #b8bdca; }
.task-queue-panel { display: flex; flex-direction: column; }.task-queue { display: grid; flex: 1; gap: 10px; }.task-queue-empty { min-height: 260px; display: grid; flex: 1; place-items: center; align-content: center; gap: 9px; color: #797a85; font-size: 11px; text-align: center; }.task-queue-empty svg { width: 24px; height: 24px; color: #5f606c; }
.task-review-item { padding: 13px; border: 1px solid #2b2c34; border-radius: 6px; background: #1a1b21; }.task-review-published { opacity: .64; }
.task-review-note { display: flex; align-items: center; gap: 9px; min-width: 0; margin-bottom: 11px; }.task-review-note-link { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; cursor: pointer; }.task-review-note-link:hover strong, .task-review-note-link:focus-visible strong { color: #f1a08e; }.task-review-note-link > img { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #292a31; }.task-review-note-link > span { min-width: 0; flex: 1; }.task-review-note-link strong, .task-review-note-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.task-review-note-link strong { color: #dcdce2; font-size: 11px; }.task-review-note-link small { margin-top: 3px; color: #80818b; font-size: 9px; }.task-review-note-link > svg { width: 13px; height: 13px; flex: 0 0 auto; color: #747681; }.task-review-note em { flex: 0 0 auto; color: #a4d7c8; font-size: 9px; font-style: normal; }
.task-review-item textarea { width: 100%; min-height: 78px; display: block; padding: 9px 10px; resize: vertical; border: 1px solid #343540; border-radius: 5px; outline: 0; color: #efeff3; background: #131419; font: inherit; font-size: 11px; line-height: 1.65; }.task-review-item textarea:focus { border-color: #677a74; }.task-review-item textarea:disabled { opacity: .7; }
.task-review-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }.task-review-actions .outline-button, .task-review-actions .solid-button { height: 30px; padding: 0 10px; font-size: 10px; }.task-review-actions svg { width: 13px; height: 13px; }.task-publish { color: #17181e; background: #e3e3e8; border-color: #e3e3e8; }
.task-placeholder { min-height: 310px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 32px; border: 1px dashed #383943; border-radius: 8px; color: #8f909a; background: #15161c; text-align: center; }.task-placeholder > svg { width: 28px; height: 28px; color: #a36961; }.task-placeholder strong { display: block; margin-bottom: 7px; color: #e2e2e7; font-size: 14px; }.task-placeholder p { margin: 0; font-size: 11px; line-height: 1.65; }
.task-preview-modal[hidden] { display: none; }.task-preview-modal { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; padding: 28px; background: rgba(5,6,9,.76); }.task-preview-dialog { width: min(760px, 100%); max-height: min(760px, 88vh); overflow: auto; padding: 24px; border: 1px solid #353640; border-radius: 8px; color: #dfe0e6; background: #15161c; box-shadow: 0 24px 80px rgba(0,0,0,.45); }.task-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid #2c2d35; }.task-preview-header > div { min-width: 0; }.task-preview-kicker { display: block; margin-bottom: 8px; color: #85c4b5; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }.task-preview-header h2 { overflow: hidden; margin: 0; color: #f0f0f4; font-size: 22px; line-height: 1.4; text-overflow: ellipsis; }.task-preview-header p { margin: 7px 0 0; color: #858691; font-size: 10px; }.task-preview-copy { padding-top: 20px; color: #c6c7cf; font-size: 13px; line-height: 1.9; }.task-preview-copy p { margin: 0 0 15px; white-space: pre-wrap; overflow-wrap: anywhere; }.task-preview-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }.task-preview-gallery[hidden], .task-preview-song[hidden] { display: none; }.task-preview-image { position: relative; display: block; aspect-ratio: 1; overflow: hidden; padding: 0; border: 0; border-radius: 5px; background: #24252d; cursor: zoom-in; }.task-preview-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .2s ease; }.task-preview-image:hover img { transform: scale(1.03); }.task-preview-song { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #2c2d35; color: #a7d3c7; }.task-preview-song > svg { width: 17px; height: 17px; }.task-preview-song strong, .task-preview-song span { display: block; }.task-preview-song strong { color: #e0e1e6; font-size: 11px; }.task-preview-song span { margin-top: 4px; color: #858691; font-size: 10px; }body.task-preview-open { overflow: hidden; }

.heart-notice { margin: 0 0 16px; padding: 11px 13px; border: 1px solid #4a3d36; border-left: 3px solid #c87f63; border-radius: 5px; background: rgba(200,127,99,.08); color: #c9b6a8; font-size: 10.5px; line-height: 1.65; }.heart-notice strong { color: #e9a890; font-weight: 600; }
.heart-search-row { margin-bottom: 14px; }.heart-search-field { display: grid; gap: 7px; color: #aaaab3; font-size: 10px; }.heart-search-input-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }.heart-search-input-wrap input { width: 100%; height: 36px; padding: 0 12px; border: 1px solid #32333d; border-radius: 5px; outline: 0; color: #eeeef2; background: #1d1e25; font: inherit; font-size: 12px; }.heart-search-input-wrap input:focus { border-color: #697b76; box-shadow: 0 0 0 3px rgba(108,160,146,.12); }.heart-search-input-wrap button { min-height: 36px; }
.heart-selected { margin: 12px 0 4px; padding: 14px; border: 1px dashed #383943; border-radius: 7px; background: #1a1b21; min-height: 88px; display: flex; align-items: center; }.heart-selected.is-empty { justify-content: center; }.heart-selected-empty { display: grid; place-items: center; gap: 8px; color: #6f707b; font-size: 11px; text-align: center; }.heart-selected-empty svg { width: 22px; height: 22px; color: #56575f; }.heart-selected-card { width: 100%; display: flex; align-items: center; gap: 12px; }.heart-selected-card img { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 6px; object-fit: cover; background: #2a2b32; }.heart-selected-card > div { min-width: 0; flex: 1; }.heart-selected-card strong { display: block; overflow: hidden; color: #eceef2; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.heart-selected-card span { display: block; margin-top: 3px; color: #8c8d97; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }.heart-selected-card small { display: block; margin-top: 4px; color: #6a6b75; font-size: 9px; }.heart-selected-card .icon-button { flex: 0 0 auto; }
.heart-controls { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 16px 0 12px; }
.heart-range-input { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; gap: 5px; }.heart-range-input input { min-width: 0; }.heart-range-input small { white-space: nowrap; }
.heart-actions { display: flex; gap: 10px; margin-bottom: 4px; }.heart-actions .solid-button, .heart-actions .outline-button { flex: 1; min-height: 40px; }.heart-actions .solid-button { color: #17181e; background: #e7a99a; border-color: #e7a99a; }.heart-actions .solid-button:hover:not(:disabled) { background: #f0b8ab; border-color: #f0b8ab; }.heart-actions .solid-button:disabled { opacity: .45; cursor: not-allowed; }
.heart-log-panel { gap: 14px; }
.heart-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin-bottom: 14px; }.heart-metrics > div { display: grid; gap: 4px; padding: 11px 8px; border: 1px solid #2b2c34; border-radius: 6px; background: #181920; text-align: center; }.heart-metrics strong { color: #f0f0f4; font-size: 18px; }.heart-metrics span { color: #7a7b85; font-size: 9px; letter-spacing: .4px; }
.heart-log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }.heart-log-toolbar .outline-button.mini { min-height: 28px; padding: 0 9px; font-size: 9px; }.heart-log-toolbar .outline-button.mini svg { width: 12px; height: 12px; }
.heart-log { display: grid; gap: 4px; min-height: 280px; max-height: 380px; overflow-y: auto; padding: 12px; border: 1px solid #2b2c34; border-radius: 6px; background: #131419; }.heart-log .task-queue-empty { min-height: 240px; }.heart-log-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 5px 4px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 10.5px; line-height: 1.55; }.heart-log-item:last-child { border-bottom: 0; }.heart-log-item time { color: #5e5f6a; font-variant-numeric: tabular-nums; }.heart-log-item span { color: #c3c4cc; word-break: break-word; }.heart-log-item.is-success span { color: #9bd5c5; }.heart-log-item.is-warn span { color: #e6c08c; }.heart-log-item.is-error span { color: #ee9a89; }
.heart-search-dialog { width: min(620px, 100%); max-height: min(680px, 86vh); }.heart-search-list { display: grid; gap: 8px; padding-top: 16px; }.heart-search-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px; border: 1px solid #2c2d35; border-radius: 6px; background: #181920; color: #d7d8e0; text-align: left; cursor: pointer; }.heart-search-item:hover { border-color: #6a7b75; background: #1d1e26; }.heart-search-item img, .heart-search-cover-fallback { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 5px; object-fit: cover; background: #2a2b32; }.heart-search-cover-fallback { display: grid; place-items: center; color: #56575f; }.heart-search-cover-fallback svg { width: 18px; height: 18px; }.heart-search-copy { min-width: 0; flex: 1; }.heart-search-copy strong { display: block; overflow: hidden; color: #e8e9f0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.heart-search-copy small { display: block; margin-top: 3px; overflow: hidden; color: #80818b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.heart-search-item em { flex: 0 0 auto; padding: 3px 8px; border-radius: 4px; color: #17181e; background: #d7d7de; font-size: 9px; font-style: normal; opacity: 0; transition: opacity .15s ease; }.heart-search-item:hover em { opacity: 1; }

@media (max-width: 900px) { .task-workspace { grid-template-columns: 1fr; } .heart-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .tasks-header { margin-bottom: 20px; }.task-tabs { overflow-x: auto; }.task-tab { flex: 0 0 auto; }.task-workspace { gap: 14px; }.task-config-panel, .task-queue-panel { padding: 15px; }.task-form-grid { grid-template-columns: 1fr; }.task-form-full { grid-column: auto; }.task-source-row { grid-template-columns: 1fr; gap: 8px; }.task-source-row > span { padding-bottom: 0; }.task-controls { gap: 10px; }.task-toggle { width: 100%; padding-bottom: 0; }.task-queue-empty { min-height: 190px; } .heart-controls { grid-template-columns: 1fr; } .heart-search-input-wrap { grid-template-columns: 1fr; } .heart-actions { flex-direction: column; } }

/* 全屏播放页：延续底部播放器的封面取色，但让歌词成为视觉核心。 */
body.now-playing-open { overflow: hidden; }
.now-playing[hidden] { display: none; }
.now-playing { position: fixed; inset: 0; z-index: 80; display: grid; place-items: stretch; padding: 0; color: #f4f4f7; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .28s ease, visibility .28s step-end; }
.now-playing.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .28s ease, visibility 0s; }
.now-playing-backdrop { position: absolute; inset: 0; overflow: hidden; background: rgba(5,6,9,.74); -webkit-backdrop-filter: blur(28px) saturate(1.2); backdrop-filter: blur(28px) saturate(1.2); }
.now-playing-backdrop::before { position: absolute; inset: -70px; content: ""; background-image: var(--now-playing-backdrop-image, var(--np-cover-image, none)); background-position: center; background-size: cover; filter: blur(var(--now-playing-backdrop-blur, 64px)) saturate(1.36) brightness(var(--now-playing-backdrop-brightness, .38)); opacity: var(--now-playing-backdrop-opacity, .92); transform: scale(1.12); }
body.desktop-window.has-custom-desktop-background.desktop-background-affects-player .now-playing {
  --now-playing-backdrop-image: var(--desktop-custom-background-image);
  --now-playing-backdrop-blur: var(--desktop-custom-background-blur, 30px);
  --now-playing-backdrop-brightness: .56;
  --now-playing-backdrop-opacity: .98;
}
body.desktop-window.has-custom-desktop-background.desktop-background-affects-player .now-playing-backdrop { background: rgba(5,6,9,.52); }
body.desktop-window.has-custom-desktop-background.desktop-background-affects-player .now-playing-backdrop::before { background-position: var(--desktop-custom-background-position-x, 50%) var(--desktop-custom-background-position-y, 50%); transform: scale(var(--desktop-custom-background-scale, 1)) scale(1.12); transform-origin: var(--desktop-custom-background-position-x, 50%) var(--desktop-custom-background-position-y, 50%); }
body.desktop-window.has-custom-desktop-background.desktop-background-affects-player .now-playing-backdrop::after { background: radial-gradient(circle at 24% 42%, rgba(255,255,255,.09), transparent 38%), linear-gradient(115deg, rgba(5,6,10,.76), rgba(9,10,14,.42) 52%, rgba(5,6,10,.72)); }
.now-playing-backdrop::after { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 24% 42%, rgba(255,255,255,.075), transparent 36%), linear-gradient(115deg, rgba(5,6,10,.86), rgba(9,10,14,.58) 52%, rgba(5,6,10,.84)); }
.now-playing-stage { position: relative; z-index: 1; width: 100%; height: 100%; display: grid; grid-template-rows: 76px minmax(0, 1fr) 116px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: translateY(14px); transition: transform .32s cubic-bezier(.22,.61,.36,1); }
.now-playing.is-open .now-playing-stage { transform: translateY(0) scale(1); }
.now-playing.is-pure .now-playing-backdrop::after { background: radial-gradient(circle at 24% 42%, rgba(255,255,255,.11), transparent 39%), linear-gradient(115deg, rgba(5,6,10,.72), rgba(9,10,14,.4) 52%, rgba(5,6,10,.7)); }
.now-playing.is-pure .now-playing-body { width: min(1280px, calc(100vw - 96px)); gap: clamp(56px, 8vw, 140px); }
.now-playing.is-pure .now-playing-cover { width: min(100%, 500px); }
.now-playing.is-pure .now-playing-foot { width: min(1280px, calc(100vw - 96px)); }
.now-playing:fullscreen { background: #0b0c10; }
.now-playing-head { position: relative; display: flex; align-items: center; min-height: 76px; padding: 18px max(42px, calc((100vw - 1280px) / 2)) 0; }
.np-window-actions { position: absolute; top: 18px; left: max(20px, env(safe-area-inset-left)); z-index: 1; display: flex; align-items: center; gap: 4px; }
.np-window-actions .np-icon-button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: #aaaab4; background: transparent; }
.np-window-actions .np-icon-button:hover { color: #fff; background: rgba(255,255,255,.085); }
.np-window-actions .np-icon-button:focus-visible { outline-offset: -2px; }
.np-window-actions .np-icon-button svg { width: 15px; height: 15px; }
.now-playing-pure-button { margin-left: 0; }
.now-playing-pure-button.is-active { color: #e6fff7; background: transparent; }
.now-playing-title { position: absolute; left: 50%; min-width: 0; max-width: min(460px, 42vw); display: grid; justify-items: center; gap: 3px; text-align: center; transform: translateX(-50%); }.now-playing-title small { overflow: hidden; max-width: 100%; color: rgba(238,239,244,.52); font-size: 9px; font-weight: 600; letter-spacing: 1.25px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.now-playing-title strong { overflow: hidden; max-width: 100%; color: #f6f6f9; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.np-icon-button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 50%; color: #c4c5cd; background: transparent; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; }.np-icon-button:hover { color: #fff; background: rgba(255,255,255,.095); }.np-icon-button:focus-visible { outline: 2px solid rgba(255,255,255,.76); outline-offset: 2px; }.np-icon-button svg { width: 18px; height: 18px; }.np-icon-button:active { transform: scale(.94); }
.np-fm-trash:hover, .np-fm-trash:focus-visible { color: #ef927d; background: rgba(239,146,125,.12); }.np-fm-trash:disabled, .global-player-fm-trash:disabled { cursor: wait; opacity: .45; transform: none; }
.now-playing-body { width: min(1180px, calc(100vw - 120px)); min-height: 0; display: grid; grid-template-columns: minmax(280px, .88fr) minmax(340px, 1.12fr); align-items: center; gap: clamp(48px, 7vw, 110px); margin: 0 auto; padding: 8px 0 24px; }
.now-playing-cover { width: min(100%, 432px); aspect-ratio: 1; position: relative; justify-self: center; margin: 0; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; background: radial-gradient(circle at 30% 25%, #363945, #17181e 72%); box-shadow: 0 28px 70px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08); }
.now-playing-cover::after { position: absolute; inset: 0; content: ""; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), inset 0 -45px 75px rgba(0,0,0,.18); pointer-events: none; }.now-playing-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }.now-playing-cover-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #b6b7c1; background: radial-gradient(circle at 30% 25%, #3a3b46, #1b1c23 72%); }.now-playing-cover-fallback svg { width: 52px; height: 52px; }.now-playing-cover.has-cover .now-playing-cover-fallback { display: none; }.now-playing.is-open .now-playing-cover.has-cover img { animation: np-breathe 14s ease-in-out infinite; }
@keyframes np-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.now-playing-lyric { min-width: 0; height: min(450px, 58vh); position: relative; overflow: hidden; mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 84%, transparent 100%); }
.now-playing-lyric-inner { min-height: 100%; display: grid; align-content: start; gap: 13px; padding: max(110px, 27%) 8px max(110px, 27%); transform: translateY(0); transition: transform .42s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.np-lyric-line { width: 100%; display: grid; gap: 5px; padding: 3px 0; border: 0; color: #83848f; background: transparent; font: inherit; font-size: clamp(15px, 1.35vw, 18px); font-weight: 550; line-height: 1.6; text-align: left; transition: color .22s ease, opacity .22s ease, transform .22s ease; cursor: pointer; }.np-lyric-line:hover { color: #d9d9df; }.np-lyric-line.is-past { opacity: .42; }.np-lyric-line.is-active { color: #fff; opacity: 1; transform: scale(1.018); transform-origin: left center; }.np-lyric-line:focus-visible { outline: 0; color: #fff; text-shadow: 0 0 20px rgba(255,255,255,.18); }
.np-lyric-line-main { display: block; }.np-lyric-word { --word-progress: 0%; display: inline; }.np-lyric-line.is-active .np-lyric-word { color: transparent; background: linear-gradient(90deg, #fff 0%, #fff var(--word-progress), #8f909a var(--word-progress), #8f909a 100%); -webkit-background-clip: text; background-clip: text; }.np-lyric-translation { color: #878892; font-size: .7em; font-weight: 400; line-height: 1.5; }.np-lyric-line.is-active .np-lyric-translation { color: #bfc0c8; }
.np-lyric-meta { display: grid; gap: 3px; margin-bottom: 11px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.08); color: #777883; font-size: 10px; line-height: 1.55; }.np-lyric-empty, .np-lyric-loading, .np-lyric-error { min-height: 100%; display: grid; place-items: center; align-content: center; gap: 9px; padding: 30px; color: #898a95; font-size: 12px; text-align: center; }.np-lyric-loading svg { width: 20px; height: 20px; animation: spin 1s linear infinite; }.np-lyric-error { color: #e4a093; }.np-lyric-retry { min-height: 29px; padding: 0 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #dedee5; background: rgba(255,255,255,.07); font: inherit; font-size: 10px; }.np-lyric-retry:hover { color: #fff; background: rgba(255,255,255,.13); }
.now-playing-foot { width: min(1180px, calc(100vw - 120px)); display: grid; grid-template-columns: minmax(180px, 1fr) minmax(280px, 1.35fr) minmax(230px, 1fr); align-items: center; gap: 28px; margin: 0 auto; padding: 17px 0 25px; border-top: 1px solid rgba(255,255,255,.105); }.now-playing-meta { min-width: 0; display: grid; gap: 5px; }.now-playing-meta strong, .now-playing-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.now-playing-meta strong { color: #f3f3f6; font-size: 14px; font-weight: 600; }.now-playing-meta span { color: #a7a8b2; font-size: 11px; }
.now-playing-progress { min-width: 0; display: grid; grid-template-columns: 34px minmax(100px, 1fr) 34px; align-items: center; gap: 9px; }.now-playing-progress time { color: #a7a8b1; font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }.now-playing-progress input { min-width: 0; accent-color: #d9d9e0; cursor: pointer; }
.now-playing-controls { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }.now-playing-controls .np-icon-button { width: 34px; height: 34px; }.np-play-button { width: 47px; height: 47px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #191a20; background: #f0f0f3; box-shadow: 0 8px 22px rgba(0,0,0,.22); transition: transform .16s ease, background .16s ease; }.np-play-button:hover { background: #fff; transform: scale(1.04); }.np-play-button:active { transform: scale(.96); }.np-play-button:focus-visible { outline: 2px solid rgba(255,255,255,.78); outline-offset: 3px; }.np-play-button svg { width: 21px; height: 21px; fill: currentColor; }.np-mode[data-playback-mode="shuffle"], .np-mode[data-playback-mode="one"] { color: #d5f0ea; background: rgba(113,193,177,.15); }.np-like.is-liked { color: #ef927d; }.np-like.is-liked svg { fill: currentColor; }
@media (max-width: 900px) { .now-playing-body, .now-playing-foot { width: calc(100vw - 56px); }.now-playing-body { gap: 34px; }.now-playing-foot { gap: 16px; grid-template-columns: minmax(150px, .9fr) minmax(230px, 1.2fr) auto; } .now-playing-controls { gap: 5px; } .now-playing-controls .np-icon-button { width: 30px; height: 30px; } }
@media (max-width: 720px) { .now-playing-stage { grid-template-rows: 58px minmax(0, 1fr) 112px; background: rgba(15,16,21,.18); }.now-playing-head { min-height: 58px; padding: 8px 17px 0; }.np-window-actions { top: 8px; left: max(17px, env(safe-area-inset-left)); }.now-playing-title { position: static; max-width: none; flex: 1; padding: 0 9px; transform: none; }.now-playing-head > .np-icon-button:last-child, .now-playing-pure-button { margin-left: 0; }.now-playing-body { width: 100%; grid-template-columns: 1fr; grid-template-rows: minmax(160px, 34vh) minmax(0, 1fr); gap: 5px; padding: 11px 24px 4px; }.now-playing-cover { width: min(52vw, 260px); align-self: center; }.now-playing-lyric { width: 100%; height: auto; min-height: 0; mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 89%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 89%, transparent 100%); }.now-playing-lyric-inner { gap: 11px; padding-top: 42%; padding-bottom: 42%; }.np-lyric-line { font-size: 15px; }.now-playing-foot { width: calc(100% - 34px); grid-template-columns: 1fr; gap: 11px; padding: 12px 3px 15px; }.now-playing-meta { display: none; }.now-playing-progress { grid-template-columns: 32px minmax(60px, 1fr) 32px; }.now-playing-controls { justify-content: center; gap: 13px; }.now-playing-controls .np-icon-button { width: 34px; height: 34px; }.np-play-button { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .now-playing, .now-playing-stage, .now-playing-lyric-inner, .np-lyric-line, .now-playing-cover img { transition: none !important; animation: none !important; } }

/* Workspace visual refinement: make the non-player surfaces share the same depth and restraint. */
:root { --surface-0: #0b0c10; --surface-1: #121319; --surface-2: #181920; --surface-3: #202128; --surface-border: rgba(255,255,255,.085); --surface-border-strong: rgba(255,255,255,.15); --surface-highlight: rgba(255,255,255,.055); --mint-glow: rgba(117,197,178,.16); --coral-glow: rgba(237,114,90,.13); --workspace-shadow: 0 18px 44px rgba(0,0,0,.22); }
html { scrollbar-color: rgba(255,255,255,.23) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: #0d0e12; } ::-webkit-scrollbar-thumb { border: 2px solid #0d0e12; border-radius: 999px; background: #4a4b55; } ::-webkit-scrollbar-thumb:hover { background: #646570; }
body { background: #0b0c10; }
.sidebar { border-right: 1px solid rgba(255,255,255,.065); background: linear-gradient(180deg, #0a0b0f 0%, #090a0d 54%, #0d1011 100%); box-shadow: 18px 0 46px rgba(0,0,0,.12); }
.sidebar::before { position: absolute; inset: 0 0 auto; height: 180px; content: ""; pointer-events: none; background: radial-gradient(circle at 20% 0%, rgba(106,182,163,.105), transparent 58%); }
.brand, .primary-nav, .secondary-nav { position: relative; z-index: 1; }
.brand { padding-bottom: 35px; }.brand-mark { width: 31px; height: 31px; border-radius: 50%; box-shadow: 0 7px 18px rgba(0,0,0,.18); }.brand strong { color: #f6f6f8; font-size: 17px; letter-spacing: -.02em; }.brand span { color: #858792; letter-spacing: 1.7px; }
.sidebar-label { padding-bottom: 11px; color: #6d717b; font-size: 9px; letter-spacing: 1.8px; }.primary-nav, .secondary-nav { gap: 5px; }
.nav-item { min-height: 43px; border: 1px solid transparent; border-radius: 10px; color: #aaaab4; transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease; }.nav-item:hover { color: #f0f0f4; border-color: rgba(255,255,255,.06); background: rgba(255,255,255,.055); transform: translateX(2px); }.nav-item.is-active { border-color: rgba(151,211,197,.12); color: #f8f8fa; background: linear-gradient(100deg, rgba(88,143,130,.31), rgba(42,61,61,.56)); box-shadow: inset 2px 0 0 #f1846d, inset 0 1px 0 rgba(255,255,255,.055), 0 8px 22px rgba(0,0,0,.12); }.nav-item.is-active svg { color: #d8f2eb; }.nav-item em { color: #767883; }.nav-item.is-active em { color: #ffc1b3; }
.main-panel { position: relative; background: radial-gradient(circle at 83% -12%, rgba(87,111,166,.095), transparent 29%), radial-gradient(circle at 32% -18%, rgba(79,164,147,.065), transparent 31%), #0d0e12; }
.topbar { position: sticky; top: 0; z-index: 9; height: 76px; border-color: rgba(255,255,255,.075); background: rgba(13,14,18,.78); box-shadow: 0 1px 0 rgba(255,255,255,.018); -webkit-backdrop-filter: blur(18px) saturate(1.14); backdrop-filter: blur(18px) saturate(1.14); }.crumbs { color: #757783; }.crumbs strong { color: #e9e9ee; }.topbar-actions { gap: 11px; }
.search-box { height: 37px; border-color: rgba(255,255,255,.095); border-radius: 9px; background: rgba(255,255,255,.035); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }.search-box:focus-within { border-color: rgba(174,218,208,.38); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(117,197,178,.08); }.search-box kbd { border-color: rgba(255,255,255,.11); border-radius: 5px; background: rgba(255,255,255,.055); }.topbar .icon-button { border-color: rgba(255,255,255,.095); border-radius: 9px; background: rgba(255,255,255,.035); }.topbar .icon-button:hover { border-color: rgba(255,255,255,.2); color: #fff; background: rgba(255,255,255,.09); }.account-trigger { box-shadow: 0 0 0 2px rgba(255,255,255,.06); }
.page-wrap { max-width: 1520px; padding-top: 38px; background: transparent; }
.page-header, .home-heading { position: relative; }.page-header h1, .home-heading h1 { letter-spacing: -.045em; }.page-header p, .home-heading p { color: #8d8e99; }

/* Home dashboard */
body.home-dashboard, body.home-dashboard .main-panel, body.home-dashboard .page-wrap { background: transparent; }
body.home-dashboard .topbar { background: rgba(13,14,18,.76); }.home-heading { margin-bottom: 31px; padding: 3px 0 4px; }.home-kicker { color: #8da39e; letter-spacing: 2px; }.home-heading h1 { font-size: clamp(30px, 2.4vw, 38px); }.home-heading p { max-width: 570px; line-height: 1.7; }.home-heading-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }.home-refresh { width: 38px; height: 38px; border-color: var(--surface-border); background: rgba(255,255,255,.025); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }.home-refresh:hover { border-color: rgba(214,240,232,.34); background: rgba(117,197,178,.12); }
.home-section { margin-top: 42px; }.home-section-heading { margin-bottom: 17px; }.home-section-heading h2 { font-size: 18px; letter-spacing: -.02em; }.home-section-heading h2::before { width: 4px; height: 18px; display: inline-block; margin: 0 9px -3px 0; border-radius: 99px; content: ""; background: linear-gradient(#b4e2d7, #6d9f98); box-shadow: 0 0 12px rgba(126,202,184,.32); }
.home-hero-grid { gap: 12px; overflow: visible; }.home-hero-card { border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: 0 12px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.05); transition: transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease, box-shadow .22s ease, filter .22s ease; }.home-hero-card::after { inset: 30% 0 0; background: linear-gradient(180deg, transparent, rgba(7,8,11,.18) 20%, rgba(7,8,11,.9)); }.home-hero-card:hover { z-index: 1; border-color: rgba(255,255,255,.24); box-shadow: 0 18px 35px rgba(0,0,0,.3); filter: brightness(1.05); transform: translateY(-5px); }.home-hero-card span { top: 11px; }.home-hero-card strong { right: 11px; bottom: 11px; left: 11px; font-size: 10px; line-height: 1.55; }
.home-fm-card { border-color: rgba(150,230,205,.14); border-radius: 12px; background: radial-gradient(circle at 20% 0%, rgba(55,129,103,.31), transparent 48%), linear-gradient(145deg, #101315, #08090b); }.home-fm-card::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(125deg, rgba(151,237,207,.07), transparent 48%); }.home-fm-card .home-fm-label { position: relative; z-index: 1; }.home-fm-card img { position: relative; z-index: 1; border-radius: 8px; box-shadow: 0 10px 23px rgba(0,0,0,.24); }.home-fm-card strong { position: relative; z-index: 1; margin-right: -10px; margin-left: -10px; border-radius: 0 0 11px 11px; background: linear-gradient(120deg, #1c5d37, #103b26); }
.home-daily-card { border-color: rgba(255,255,255,.13); }.home-playlist-card { padding: 7px; border: 1px solid transparent; border-radius: 11px; background: transparent; transition: border-color .18s ease, background .18s ease, transform .18s ease; }.home-playlist-card:hover { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.035); transform: translateY(-3px); }.home-playlist-cover { margin-bottom: 10px; border-radius: 8px; }.home-playlist-cover img { box-shadow: 0 10px 22px rgba(0,0,0,.18); }.home-playlist-playcount { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 5px; color: rgba(255,255,255,.92); background: rgba(8,9,12,.46); font-size: 9px; font-variant-numeric: tabular-nums; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }.home-playlist-playcount svg { width: 11px; height: 11px; }.home-playlist-card-play { position: absolute; right: 8px; bottom: 8px; z-index: 1; width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #edf8f4; background: rgba(23,66,56,.82); box-shadow: 0 6px 16px rgba(0,0,0,.28); opacity: 0; transform: translateY(3px); transition: opacity .18s ease, transform .18s ease, background .18s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; }.home-playlist-card:hover .home-playlist-card-play, .home-playlist-card-play:focus-visible { opacity: 1; transform: translateY(0); }.home-playlist-card-play:hover { background: rgba(33,88,74,.92); transform: translateY(0) scale(1.08); }.home-playlist-card-play:active { transform: translateY(0) scale(.96); }.home-playlist-card-play svg { width: 12px; height: 12px; fill: currentColor; }.home-playlist-card strong { font-size: 10.5px; }.home-playlist-card span { color: #858690; }
.home-chart-grid { gap: 16px; }.home-chart-card { position: relative; overflow: hidden; min-height: 156px; padding: 19px; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: linear-gradient(135deg, rgba(36,37,45,.98), rgba(23,24,30,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 12px 29px rgba(0,0,0,.12); transition: transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s ease, box-shadow .2s ease; }.home-chart-card::after { position: absolute; right: -36px; bottom: -58px; width: 160px; height: 160px; border-radius: 50%; content: ""; pointer-events: none; background: radial-gradient(circle, rgba(174,205,255,.095), transparent 68%); }.home-chart-card:nth-child(3n+2)::after { background: radial-gradient(circle, rgba(117,218,198,.09), transparent 68%); }.home-chart-card:nth-child(3n)::after { background: radial-gradient(circle, rgba(241,158,182,.09), transparent 68%); }.home-chart-card:hover { z-index: 1; border-color: rgba(255,255,255,.17); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 19px 40px rgba(0,0,0,.26); transform: translateY(-4px); }.home-chart-title, .home-chart-body { position: relative; z-index: 1; }.home-chart-title h3 { font-size: 15px; letter-spacing: -.02em; }.home-chart-title span { padding: 3px 6px; border-radius: 999px; color: #92939e; background: rgba(255,255,255,.055); }.home-chart-body { gap: 13px; }.home-chart-body > img { border-radius: 10px; box-shadow: 0 10px 23px rgba(0,0,0,.2); }.home-chart-body li { min-height: 18px; }.home-chart-track { padding: 3px 2px; border-radius: 5px; transition: color .16s ease, background .16s ease; }.home-chart-track:hover { color: #fff; background: rgba(255,255,255,.065); }.home-chart-body li strong { font-weight: 550; }.home-chart-body li em { color: #83d7be; }

/* Reusable workspace surfaces for feeds, library, detail and task pages. */
.feed-toolbar, .music-toolbar { min-height: 46px; padding: 0 2px 12px; border-bottom: 1px solid var(--surface-border); }.filter-tabs { gap: 8px; }.filter-tab { padding: 7px 11px; border: 1px solid transparent; border-radius: 999px; color: #9697a1; }.filter-tab:hover { color: #f2f2f5; background: rgba(255,255,255,.045); }.filter-tab.is-active { border-color: rgba(146,216,198,.12); color: #d9f0ea; background: rgba(79,143,129,.19); }.filter-tab.is-active::after { display: none; }
.snapshot-notice, .empty-state, .home-loading { border-color: var(--surface-border); border-radius: 12px; background: linear-gradient(145deg, rgba(29,30,37,.9), rgba(20,21,27,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.note-list, .music-list { gap: 13px; }.note-card, .music-card { overflow: hidden; border-color: var(--surface-border); border-radius: 14px; background: linear-gradient(135deg, rgba(27,28,34,.98), rgba(20,21,27,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 22px rgba(0,0,0,.08); }.note-card::before, .music-card::before { position: absolute; top: 0; left: 0; width: 100%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent); opacity: 0; transition: opacity .18s ease; }.note-card:hover::before, .music-card:hover::before { opacity: 1; }.note-card:hover, .music-card:hover, .music-card.is-current { border-color: rgba(151,211,197,.23); box-shadow: inset 0 1px 0 rgba(255,255,255,.055), var(--workspace-shadow); transform: translateY(-3px); }.music-card.is-current { background: linear-gradient(110deg, rgba(48,82,75,.48), rgba(26,27,34,.98) 56%); }.note-topline { margin-bottom: 16px; }.author-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.055); }.note-title { font-size: 18px; letter-spacing: -.02em; }.note-excerpt { color: #b9bac3; }.note-footer { border-top-color: rgba(255,255,255,.075); }.note-tag { border: 1px solid rgba(255,255,255,.055); border-radius: 999px; background: rgba(255,255,255,.045); }.note-song-button { border-radius: 8px; background: rgba(255,255,255,.035); }.music-card { border-radius: 14px; }.music-cover-button, .music-cover, .music-cover-button img { border-radius: 10px; }.music-song-title h2 { font-size: 14px; }.music-song-copy p { color: #a8a9b3; }
.music-aside > *, .task-config-panel, .task-queue-panel, .detail-aside, .comment-editor { border-color: var(--surface-border); border-radius: 14px; background: linear-gradient(145deg, rgba(25,26,33,.96), rgba(18,19,25,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 29px rgba(0,0,0,.09); }.task-config-panel, .task-queue-panel { padding: 23px; }.task-tab { border-radius: 8px 8px 0 0; transition: color .16s ease, background .16s ease; }.task-tab:hover { color: #e9e9ee; background: rgba(255,255,255,.035); }.task-tab.is-active { border-bottom-color: #c7eee3; color: #eaf7f3; }.task-review-item { border-color: var(--surface-border); border-radius: 10px; background: rgba(255,255,255,.026); }.task-review-item:hover { border-color: rgba(255,255,255,.14); }
.home-detail-header { padding: 22px; border: 1px solid var(--surface-border); border-radius: 16px; background: linear-gradient(125deg, rgba(29,30,37,.95), rgba(19,20,26,.95)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }.home-detail-header > img { border-radius: 12px; box-shadow: 0 18px 36px rgba(0,0,0,.24); }.home-detail-header h1 { font-size: 31px; letter-spacing: -.035em; }.home-detail-songs { padding: 6px 12px; border: 1px solid var(--surface-border); border-radius: 13px; background: rgba(22,23,29,.58); }.home-detail-song { margin: 0 -3px; padding: 10px 8px; border-radius: 8px; border-bottom-color: rgba(255,255,255,.065); }.home-detail-song:hover { background: rgba(255,255,255,.055); }
.comment-composer { padding: 14px; border-color: var(--surface-border); border-radius: 12px; background: linear-gradient(145deg, rgba(26,27,34,.96), rgba(18,19,25,.96)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.comment-composer textarea { border-color: rgba(255,255,255,.1); border-radius: 8px; color: #ececf1; background: rgba(255,255,255,.035); }
.comment-composer textarea::placeholder { color: #72737e; }
.comment-composer textarea:focus { border-color: rgba(159,220,205,.34); background: rgba(255,255,255,.05); box-shadow: 0 0 0 3px rgba(117,197,178,.08); }
.comment-composer-head strong { color: #e8e8ed; }
.comment-item, .comment-replies .comment-item { border-top-color: rgba(255,255,255,.07); }
.comment-replies { border-left-color: rgba(138,207,190,.22); }
.detail-view, .liked-view, .search-view, .music-view, .tasks-view, .feed-view { animation: detail-enter .28s cubic-bezier(.22,.61,.36,1) both; }
@media (max-width: 980px) { .page-wrap { padding-right: 28px; padding-left: 28px; }.topbar { padding-right: 28px; padding-left: 28px; }.home-hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.home-playlist-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }.home-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .page-wrap { padding-right: 16px; padding-left: 16px; }
  .topbar { height: 64px; padding-right: 16px; padding-left: 16px; }
  .home-heading { align-items: flex-start; flex-direction: column; gap: 15px; }
  .home-heading-actions { width: 100%; }
  .home-heading h1 { font-size: 30px; }
  .home-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-chart-grid { grid-template-columns: 1fr; gap: 12px; }
  .home-playlist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .home-chart-card { min-height: 145px; }
  .note-card, .music-card { border-radius: 12px; }
  .home-detail-header { flex-direction: column; align-items: flex-start; padding: 16px; }
  .home-detail-header > img { width: 130px; height: 130px; }
  .task-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .task-toggle { width: auto; grid-column: 1 / -1; justify-self: start; }
}

/* Precision pass: quieter geometry, flatter surfaces and one restrained accent. */
.sidebar { width: 228px; padding: 24px 14px 18px; box-shadow: 12px 0 32px rgba(0,0,0,.1); }
.main-panel { width: calc(100% - 228px); margin-left: 228px; background: #0d0e12; }
.topbar { height: 64px; padding-right: 36px; padding-left: 36px; background: rgba(13,14,18,.86); }
.page-wrap, body.home-dashboard .page-wrap { padding: 32px 36px 142px; }
.brand { padding: 0 10px 28px; }
.brand span, .sidebar-label, .home-kicker, .eyebrow, .modal-kicker, .task-preview-kicker { letter-spacing: 0; }
.nav-item { min-height: 40px; border-radius: 7px; }
.nav-item:hover { transform: none; }
.nav-item:focus-visible { outline: 1px solid rgba(178,224,213,.62); outline-offset: 2px; }
.nav-item.is-active { border-color: rgba(156,211,198,.12); background: rgba(123,177,164,.13); box-shadow: inset 2px 0 0 rgba(178,224,213,.78); }
.nav-item.is-active em { color: #b8c9c5; }
.live-dot { width: 5px; height: 5px; background: #91c5b9; box-shadow: none; }
.search-box, .topbar .icon-button { border-radius: 7px; }
.page-header h1, .home-heading h1, .home-chart-title h3, .note-title, .home-detail-header h1 { letter-spacing: 0; }
.solid-button { border-color: #e8e8ec; color: #15161a; background: #e8e8ec; }
.solid-button:hover { border-color: #fff; color: #0b0c0f; background: #fff; }
.outline-button { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.018); }
.outline-button:hover { border-color: rgba(255,255,255,.24); background: rgba(255,255,255,.055); }
.home-section { margin-top: 38px; }
.home-section-heading h2::before { width: 2px; height: 14px; margin-right: 9px; margin-bottom: -1px; background: #9ccfc3; box-shadow: none; }
.home-refresh { width: 36px; height: 36px; }
.home-hero-grid { grid-template-columns: repeat(7, minmax(148px, 1fr)); gap: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: none; }
.home-hero-grid::-webkit-scrollbar { display: none; }
.home-hero-card { border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.home-hero-card:hover { border-color: rgba(255,255,255,.2); box-shadow: 0 10px 24px rgba(0,0,0,.22); transform: translateY(-2px); }
.home-fm-card, .home-fm-card strong { border-radius: 8px; }
.home-playlist-card { border-radius: 8px; }
.home-playlist-card:hover { transform: translateY(-1px); }
.home-playlist-card img { border-radius: 7px; box-shadow: 0 7px 18px rgba(0,0,0,.16); }
.home-chart-card { min-height: 150px; padding: 18px; border-radius: 8px; background: #181920; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
.home-chart-card::after { display: none; }
.home-chart-card:hover { border-color: rgba(255,255,255,.15); box-shadow: 0 12px 28px rgba(0,0,0,.18); transform: translateY(-1px); }
.home-chart-title span { border-radius: 5px; }
.home-chart-body > img { border-radius: 7px; box-shadow: 0 7px 18px rgba(0,0,0,.17); }
.note-card, .music-card { border-radius: 8px; background: #17181e; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.note-card:hover, .music-card:hover, .music-card.is-current { box-shadow: 0 12px 28px rgba(0,0,0,.16); transform: translateY(-1px); }
.music-cover-button, .music-cover, .music-cover-button img { border-radius: 7px; }
.snapshot-notice, .empty-state, .home-loading { border-radius: 8px; }
.music-aside > *, .task-config-panel, .task-queue-panel, .detail-aside, .comment-editor, .comment-composer { border-radius: 8px; background: #17181e; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.task-review-item { border-radius: 7px; }
.home-detail-header { border-radius: 8px; background: #17181e; }
.home-detail-header > img { border-radius: 7px; }
.home-detail-songs { border-radius: 8px; }

@media (max-width: 860px) {
  .sidebar { width: 220px; }
  .main-panel { width: 100%; margin-left: 0; }
  .topbar { padding-right: 22px; padding-left: 22px; }
  .page-wrap, body.home-dashboard .page-wrap { padding-right: 22px; padding-left: 22px; }
}

@media (max-width: 620px) {
  .topbar { padding-right: 15px; padding-left: 15px; }
  .page-wrap, body.home-dashboard .page-wrap { padding-right: 15px; padding-left: 15px; }
  .home-hero-grid { grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 9px; }
  .home-playlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* 手机端保留可聚焦的搜索输入：点击放大镜即可展开，避免 display:none 导致标签无法触发输入。 */
@media (max-width: 620px) {
  .search-box { min-width: 34px; overflow: visible; cursor: text; }
  .search-box input { display: block; flex: 0 0 0; width: 0; min-width: 0; padding: 0; opacity: 0; pointer-events: none; }
  .search-box:focus-within { position: fixed; top: 12px; right: 14px; left: 64px; z-index: 30; width: auto; height: 40px; gap: 8px; padding: 0 12px; border-color: rgba(174,218,208,.38); background: rgba(25,26,32,.98); box-shadow: 0 12px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.04); }
  .search-box:focus-within input { flex: 1 1 auto; width: 100%; opacity: 1; pointer-events: auto; }
  .search-box:focus-within svg { flex: 0 0 auto; }
}

/* Responsive player: retain playback essentials and progressively remove secondary tools. */
@media (max-width: 760px) {
  .global-player-engagement, .global-player-playlist-collect, .global-player-quality, .global-player-volume { display: none; }
  .global-player-tools { max-width: none; flex-wrap: nowrap; }
}

@media (max-width: 620px) {
  .page-wrap { padding-bottom: 142px; }
  .global-player { min-height: 96px; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-rows: auto auto; align-items: center; gap: 7px 5px; padding: 9px 11px 8px; }
  .global-player-track { grid-column: 1; grid-row: 1; gap: 9px; }
  .global-player-track > img { width: 44px; height: 44px; border-radius: 6px; }
  .global-player-copy strong { margin-bottom: 4px; }
  .global-player-copy > span { font-size: 9px; }
  .global-player-center { display: contents; }
  .global-player-controls { position: static; grid-column: 2; grid-row: 1; gap: 3px; }
  .global-player-control.subtle { width: 25px; height: 25px; }
  .global-player-control.primary { width: 32px; height: 32px; }
  .global-player-timeline { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 28px minmax(50px, 1fr) 28px; gap: 6px; }
  .global-player-tools { position: relative; grid-column: 3; grid-row: 1; display: flex; width: 27px; gap: 0; }
  .global-player-mode, .global-player-download { display: none; }
  .global-player-queue-toggle { width: 27px; height: 27px; }
  .global-player-queue-panel { right: -2px; bottom: calc(100% + 12px); }
}

/* Keep cover, lyric viewport and controls inside one mobile viewport. */
@media (max-width: 720px) {
  .now-playing-stage { height: 100dvh; min-height: 0; max-height: 100dvh; grid-template-rows: 46px minmax(0, 1fr) auto; overflow: hidden; padding: 8px 15px 12px; }
  .now-playing-head { min-height: 46px; }
  .now-playing-body { height: 100%; min-height: 0; grid-template-rows: clamp(158px, 28dvh, 230px) minmax(0, 1fr); align-items: center; gap: 8px; overflow: hidden; padding: 4px 5px 0; }
  .now-playing-cover { width: min(48vw, 28dvh, 230px); max-width: 100%; align-self: center; border-radius: 14px; }
  .now-playing-lyric { height: 100%; min-height: 0; max-height: none; overflow: hidden; }
  .now-playing-lyric-inner { gap: 10px; padding-top: 34%; padding-bottom: 34%; }
  .now-playing-foot { min-height: 82px; grid-template-columns: 1fr; gap: 8px; padding: 8px 2px 0; }
  .now-playing-progress { grid-template-columns: 30px minmax(60px, 1fr) 30px; gap: 7px; }
  .now-playing-controls { gap: 11px; }
}

/* 音乐云盘 */
.cloud-page-header { margin-bottom: 22px; }
.cloud-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, 1.7fr); gap: 1px; margin-bottom: 18px; border: 1px solid var(--line); background: var(--line); }
.cloud-overview > div { min-height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 13px 16px; background: var(--paper); }
.cloud-overview span { color: var(--muted); font-size: 10px; }
.cloud-overview strong { color: var(--ink); font-size: 18px; font-weight: 650; }
.cloud-overview-note { flex-direction: row !important; align-items: center; gap: 9px !important; color: var(--ink-soft); }
.cloud-overview-note svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--teal); }
.cloud-overview-note span { color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.cloud-main { padding: 0; overflow: hidden; }
.cloud-toolbar-actions { display: flex; align-items: center; gap: 10px; }
.cloud-limit-label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.cloud-limit-label select { min-height: 28px; padding: 0 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-soft); background: var(--canvas); font-size: 10px; }
.cloud-list { min-height: 160px; }
.cloud-row { display: grid; grid-template-columns: 30px 44px minmax(220px, 1.7fr) minmax(220px, 1fr) auto; align-items: center; gap: 14px; min-height: 72px; padding: 10px 18px; border-top: 1px solid var(--line); transition: background .18s ease; }
.cloud-row:hover { background: rgba(255,255,255,.035); }
.cloud-row-index { color: #6d7079; font-size: 10px; font-variant-numeric: tabular-nums; }
.cloud-row-cover { width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; color: #8d918d; background: #25272d; }
.cloud-row-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cloud-row-cover svg { width: 18px; height: 18px; }
.cloud-row-copy { min-width: 0; display: grid; gap: 3px; }
.cloud-row-copy strong, .cloud-row-copy span, .cloud-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-row-copy strong { color: var(--ink); font-size: 12px; font-weight: 650; }
.cloud-row-copy span { color: var(--ink-soft); font-size: 10px; }
.cloud-row-copy small { color: var(--muted); font-size: 9px; }
.cloud-row-meta { display: flex; align-items: center; justify-content: flex-end; gap: 15px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.cloud-row-actions { display: flex; align-items: center; gap: 2px; }
.cloud-row-actions .is-danger { color: #c78378; }
.cloud-row-actions .is-danger:hover { color: #f0a196; }
.cloud-load-more { display: flex; justify-content: center; padding: 20px; border-top: 1px solid var(--line); }
.cloud-sync-main { margin-top: 18px; padding: 0; overflow: hidden; }
.cloud-sync-toolbar { min-height: 58px; }
.cloud-sync-toolbar > div { min-width: 0; }
.cloud-sync-list { min-height: 62px; border-top: 1px solid var(--line); }
.cloud-sync-list .music-state { min-height: 90px; }
.cloud-sync-list .music-state small { max-width: min(680px, 100%); overflow: hidden; color: var(--muted); font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cloud-sync-task { position: relative; display: grid; grid-template-columns: minmax(190px, 1.4fr) minmax(120px, .7fr); align-items: center; gap: 16px; min-height: 70px; padding: 11px 18px 15px; border-top: 1px solid var(--line); }
.cloud-sync-task:first-child { border-top: 0; }
.cloud-sync-task-copy, .cloud-sync-task-state { min-width: 0; display: grid; gap: 3px; }
.cloud-sync-task-copy strong, .cloud-sync-task-copy span, .cloud-sync-task-copy small, .cloud-sync-task-state span, .cloud-sync-task-state small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-sync-task-copy strong { color: var(--ink); font-size: 12px; font-weight: 650; }
.cloud-sync-task-copy span { color: var(--ink-soft); font-size: 10px; }
.cloud-sync-task-copy small { color: var(--muted); font-size: 9px; }
.cloud-sync-task-state { justify-items: end; color: var(--ink-soft); text-align: right; }
.cloud-sync-task-state span { font-size: 10px; }
.cloud-sync-task-state small { max-width: 100%; color: #d5887d; font-size: 9px; }
.cloud-sync-task.is-done .cloud-sync-task-state span { color: #83baa9; }
.cloud-sync-task.is-cancelled .cloud-sync-task-state span { color: var(--muted); }
.cloud-sync-progress { position: absolute; right: 18px; bottom: 0; left: 18px; height: 2px; overflow: hidden; background: rgba(255,255,255,.06); }
.cloud-sync-progress span { display: block; width: 0; height: 100%; background: #76b8a6; transition: width .2s ease; }
.cloud-sync-progress.is-static span { background: transparent; }
.cloud-skeleton-list { display: grid; gap: 1px; background: var(--line); }
.cloud-skeleton-list div { height: 72px; background: linear-gradient(90deg, var(--paper) 25%, #202129 42%, var(--paper) 65%); background-size: 300% 100%; animation: cloud-skeleton 1.35s ease-in-out infinite; }
@keyframes cloud-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cloud-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; background: rgba(4,5,7,.7); }
.cloud-modal[hidden] { display: none; }
.cloud-dialog { width: min(660px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto; border: 1px solid #363840; border-radius: 9px; background: #17181e; box-shadow: 0 24px 75px rgba(0,0,0,.55); }
.cloud-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 22px 16px; border-bottom: 1px solid #2a2b32; }
.cloud-dialog-head h2 { margin: 4px 0 0; color: #f5f5f7; font-size: 20px; }
.cloud-detail-body { padding: 22px; }
.cloud-detail-hero { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; }
.cloud-detail-cover { width: 112px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 8px; color: #9da3a0; background: #282a31; }
.cloud-detail-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cloud-detail-cover svg { width: 32px; height: 32px; }
.cloud-detail-hero h3 { margin: 6px 0 5px; color: #f4f4f6; font-size: 21px; }
.cloud-detail-hero p { margin: 0; color: #9da0aa; font-size: 11px; }
.cloud-detail-actions { display: flex; gap: 8px; margin-top: 15px; }
.cloud-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 22px; border: 1px solid #2c2d35; background: #2c2d35; }
.cloud-detail-facts div { min-width: 0; display: grid; gap: 5px; padding: 12px; background: #1b1c22; }
.cloud-detail-facts span { color: #7f818c; font-size: 10px; }
.cloud-detail-facts strong { overflow: hidden; color: #dfe0e5; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cloud-match-box { display: grid; gap: 12px; margin-top: 18px; padding: 14px; border: 1px solid #2c2d35; background: #1b1c22; }
.cloud-match-box > div:first-child { display: grid; gap: 4px; }
.cloud-match-box strong { color: #e5e5e9; font-size: 11px; }
.cloud-match-box span { color: #81838d; font-size: 10px; line-height: 1.5; }
.cloud-match-row { display: flex; gap: 8px; }
.cloud-match-row input, .cloud-upload-grid input { min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #363740; border-radius: 5px; outline: 0; color: #f0f0f3; background: #121318; font-size: 11px; }
.cloud-match-row input { flex: 1; }
.cloud-match-row input:focus, .cloud-upload-grid input:focus { border-color: #6a8c83; box-shadow: 0 0 0 3px rgba(47,146,134,.15); }
.cloud-lyric-box { max-height: 260px; overflow: auto; margin: 16px 0 0; padding: 14px; border: 1px solid #2c2d35; color: #b9bdc1; background: #111217; font: inherit; font-size: 11px; line-height: 1.8; white-space: pre-wrap; }
.cloud-detail-loading { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 190px; color: #92959e; font-size: 11px; }
.cloud-detail-loading svg { width: 16px; height: 16px; animation: spin 1s linear infinite; }
.cloud-upload-form { display: grid; gap: 18px; padding: 22px; }
.cloud-upload-form[hidden] { display: none; }
.cloud-file-picker { min-height: 88px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; border: 1px dashed #59635f; color: #bfc6c1; background: #1c211f; font-size: 11px; text-align: center; cursor: pointer; }
.cloud-file-picker:hover { border-color: #87b0a5; color: #f2f3f2; background: #202824; }
.cloud-file-picker svg { width: 18px; height: 18px; color: #82b6a7; }
.cloud-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cloud-import-note { display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px; border: 1px solid rgba(130,182,167,.18); color: #aecbc3; background: rgba(130,182,167,.07); font-size: 10px; line-height: 1.55; }
.cloud-import-note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: #96caba; }
.cloud-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cloud-upload-grid label { display: grid; gap: 7px; }
.cloud-upload-grid span { color: #8d9099; font-size: 10px; }
.cloud-upload-grid input { width: 100%; }
.cloud-upload-status { padding: 10px 12px; border: 1px solid #33574e; color: #a9d0c3; background: #16241f; font-size: 10px; line-height: 1.5; }
.cloud-upload-status.is-error { border-color: #63403c; color: #efaea2; background: #2b1c1b; }
.cloud-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.cloud-dialog-actions button:disabled { cursor: wait; opacity: .6; }

@media (max-width: 900px) {
  .cloud-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloud-overview-note { grid-column: 1 / -1; }
  .cloud-row { grid-template-columns: 26px 42px minmax(0, 1fr) auto; gap: 10px; }
  .cloud-row-meta { grid-column: 3 / 4; justify-content: flex-start; gap: 11px; }
  .cloud-row-actions { grid-column: 4 / 5; grid-row: 1 / span 2; }
  .cloud-sync-task { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
}

@media (max-width: 560px) {
  .cloud-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cloud-overview > div { padding: 11px 12px; }
  .cloud-row { padding: 10px 12px; }
  .cloud-row-index { display: none; }
  .cloud-row { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .cloud-row-cover { grid-column: 1; grid-row: 1 / span 2; }
  .cloud-row-copy { grid-column: 2; }
  .cloud-row-meta { grid-column: 2; }
  .cloud-row-actions { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; }
  .cloud-row-meta span:nth-child(3) { display: none; }
  .cloud-sync-task { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 11px 12px 15px; }
  .cloud-sync-task-state { justify-items: start; text-align: left; }
  .cloud-sync-progress { right: 12px; left: 12px; }
  .cloud-dialog { max-height: calc(100vh - 24px); }
  .cloud-detail-body, .cloud-upload-form { padding: 16px; }
  .cloud-detail-hero { grid-template-columns: 74px minmax(0, 1fr); gap: 12px; }
  .cloud-detail-cover { width: 74px; }
  .cloud-detail-hero h3 { font-size: 17px; }
  .cloud-upload-grid { grid-template-columns: 1fr; gap: 11px; }
}

@media (max-width: 480px) and (max-height: 740px) {
  .now-playing-stage { padding-top: 6px; padding-bottom: 8px; }
  .now-playing-body { grid-template-rows: clamp(138px, 25dvh, 180px) minmax(0, 1fr); gap: 4px; }
  .now-playing-cover { width: min(44vw, 25dvh, 180px); border-radius: 12px; }
  .now-playing-lyric-inner { gap: 8px; padding-top: 28%; padding-bottom: 28%; }
  .np-lyric-line { font-size: 14px; }
  .now-playing-foot { min-height: 76px; gap: 5px; padding-top: 6px; }
  .now-playing-controls { gap: 8px; }
  .now-playing-controls .np-icon-button { width: 31px; height: 31px; }
  .np-play-button { width: 44px; height: 44px; }
}

/* Login methods share the existing local session and cookie lifecycle. */
.login-dialog { width: min(420px, 100%); }
.login-method-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 16px; padding: 4px; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(255,255,255,.025); }
.login-method-tab { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 0; border-radius: 6px; color: #83848f; background: transparent; font-size: 11px; font-weight: 600; }
.login-method-tab:hover { color: #d8d8de; background: rgba(255,255,255,.045); }
.login-method-tab.is-active { color: #f4f4f7; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.login-method-tab svg { width: 14px; height: 14px; }
.login-method-panel[hidden] { display: none; }
.phone-login-form { display: grid; gap: 15px; padding-top: 19px; }
.phone-login-form label { min-width: 0; display: grid; gap: 7px; color: #aaaab3; font-size: 10px; font-weight: 600; }
.phone-login-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; }
.phone-login-form input { width: 100%; height: 38px; min-width: 0; padding: 0 11px; border: 1px solid #34353f; border-radius: 7px; outline: 0; color: #eeeef2; background: #1d1e25; font-size: 12px; }
.phone-login-form input::placeholder { color: #686a75; }
.phone-login-form input:focus { border-color: #697b76; box-shadow: 0 0 0 3px rgba(108,160,146,.12); }
.phone-input-shell { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; height: 38px; padding-left: 10px; border: 1px solid #34353f; border-radius: 7px; background: #1d1e25; }
.phone-input-shell:focus-within { border-color: #697b76; box-shadow: 0 0 0 3px rgba(108,160,146,.12); }
.phone-input-shell b { color: #848590; font-size: 12px; font-weight: 500; }
.phone-input-shell input { height: 36px; padding-left: 4px; border: 0; background: transparent; box-shadow: none; }
.phone-input-shell input:focus { box-shadow: none; }
.phone-captcha-shell { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 8px; }
.phone-captcha-shell .outline-button { height: 38px; justify-content: center; padding: 0 8px; white-space: nowrap; }
.phone-captcha-shell .outline-button:disabled { cursor: wait; opacity: .55; }
.phone-login-submit { width: 100%; height: 39px; justify-content: center; }
.phone-login-submit:disabled { cursor: wait; opacity: .6; }
.phone-login-form .login-hint { margin-top: 0; }

@media (max-width: 420px) {
  .login-method-tab { padding: 0 6px; }
  .phone-login-row { grid-template-columns: 94px minmax(0, 1fr); gap: 8px; }
  .phone-captcha-shell { grid-template-columns: minmax(0, 1fr) 94px; }
}

.nav-item[hidden] { display: none; }
.nav-group { display: grid; gap: 4px; }
.nav-group-toggle { position: relative; }
.nav-group-toggle .nav-group-chevron { width: 14px; height: 14px; margin-left: auto; color: #777984; transition: transform .18s ease, color .18s ease; }
.nav-group.is-open > .nav-group-toggle .nav-group-chevron { color: #b7c7c2; transform: rotate(180deg); }
.nav-group-static > .nav-group-toggle { cursor: default; }
.nav-group-static > .nav-group-toggle:hover { background: transparent; color: inherit; }
.nav-group-items { display: grid; gap: 3px; }
.nav-group-items[hidden] { display: none; }
.nav-group-items .nav-subitem { width: calc(100% - 18px); min-height: 36px; margin-left: 18px; padding-left: 11px; }
.nav-group-items .nav-subitem.is-active { box-shadow: inset 2px 0 0 #f1846d; }
.nav-group:has(> .nav-group-toggle.is-active) > .nav-group-toggle { color: #f8f8fa; }
.nav-group:has(> .nav-group-toggle.is-active) > .nav-group-toggle svg { color: #d8f2eb; }
.nav-subitem { width: calc(100% - 18px); min-height: 36px; margin-left: 18px; padding-left: 11px; color: #8f909a; }
.nav-subitem svg { width: 15px; height: 15px; }
.nav-subitem span:not(.nav-dot) { font-size: 12px; }
.collected-playlists-main { padding-top: 2px; }
.collected-playlists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; padding-top: 18px; }
.collected-playlist-card { min-width: 0; display: grid; gap: 10px; padding: 8px; overflow: hidden; border: 1px solid transparent; border-radius: 8px; color: #dfe0e6; background: transparent; text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.collected-playlist-card:hover { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.035); transform: translateY(-1px); }
.collected-playlist-card img { width: 100%; aspect-ratio: 1; display: block; border-radius: 7px; object-fit: cover; background: #202128; box-shadow: 0 7px 18px rgba(0,0,0,.16); }
.collected-playlist-card strong, .collected-playlist-card span { overflow: hidden; text-overflow: ellipsis; }
.collected-playlist-card strong { display: -webkit-box; min-height: 34px; color: #e6e6ea; font-size: 12px; font-weight: 600; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.collected-playlist-card span { display: block; color: #7f808b; font-size: 9px; white-space: nowrap; }
.collected-playlist-card span svg { width: 11px; height: 11px; margin-right: 3px; vertical-align: -2px; }
.collected-playlists-grid .music-state, .collected-playlists-grid .music-load-more { grid-column: 1 / -1; }

@media (max-width: 620px) {
  .nav-subitem { width: calc(100% - 14px); margin-left: 14px; }
  .collected-playlists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 12px; }
  .collected-playlist-card { gap: 8px; padding: 5px; }
  .collected-playlist-card strong { min-height: 32px; font-size: 11px; }
}

/* Electron uses the app surface itself as the title bar, so pages read as one continuous canvas. */
.desktop-window .main-panel { background: #0d0e12; }
.desktop-window { height: 100vh; overflow: hidden; }
.desktop-html,
.desktop-html body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  scrollbar-width: none;
  overscroll-behavior: none;
}
.desktop-html::-webkit-scrollbar,
.desktop-html body::-webkit-scrollbar { width: 0; height: 0; display: none; }
.desktop-window .app-shell { height: 100vh; min-height: 0; overflow: hidden; }
.desktop-window .main-panel {
  width: calc(100% - 228px);
  height: 100vh;
  min-height: 0;
  margin-right: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}
.desktop-window .main-panel::-webkit-scrollbar { width: 0; height: 0; display: none; }
.desktop-window .topbar {
  height: 64px;
  gap: 24px;
  padding-right: 148px;
  padding-left: 28px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(15,16,21,.96);
  box-shadow: none;
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}
.desktop-window.home-dashboard .topbar { background: rgba(15,16,21,.96); }
.desktop-window .topbar-leading { flex: 1; gap: 8px; }
.desktop-window .desktop-titlebar-only { display: grid; }
.desktop-window .crumbs { display: none; }
.desktop-window .desktop-topbar-button {
  width: 36px;
  height: 36px;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 7px;
  color: #a8a9b3;
  background: rgba(255,255,255,.035);
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.desktop-window .desktop-topbar-button:hover { border-color: rgba(255,255,255,.17); color: #f2f2f5; background: rgba(255,255,255,.08); }
.desktop-window .desktop-topbar-button:focus-visible { outline: 2px solid rgba(175,218,207,.55); outline-offset: 2px; }
.desktop-window .desktop-topbar-button svg { width: 16px; height: 16px; stroke-width: 1.8; }
.desktop-window .desktop-topbar-button.is-listening { border-color: rgba(237,114,90,.36); color: #ffab98; background: rgba(237,114,90,.12); }
.desktop-window .desktop-topbar-button.is-listening svg { animation: titlebar-mic-pulse 1s ease-in-out infinite; }
.desktop-window .search-box { width: min(330px, 34vw); height: 36px; border-color: rgba(255,255,255,.09); border-radius: 7px; background: #191a21; }
.desktop-window .search-box:focus-within { border-color: rgba(160,198,189,.3); background: #1d1e26; box-shadow: 0 0 0 3px rgba(117,197,178,.06); }
.desktop-window .search-box kbd { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.045); }
.desktop-window .topbar-actions { gap: 5px; margin-left: auto; }
.desktop-window .desktop-window-settings { width: 36px; height: 36px; display: grid; margin-left: 3px; border-color: transparent; border-radius: 6px; color: #a8a9b3; background: transparent; }
.desktop-window .desktop-window-settings:hover, .desktop-window .desktop-window-settings:focus-visible { border-color: rgba(255,255,255,.08); color: #fff; background: rgba(255,255,255,.07); }
.desktop-window .desktop-window-settings:focus-visible { outline: 0; }
.desktop-window .topbar-notification, body.desktop-window.home-dashboard .topbar .topbar-notification { width: 36px; height: 36px; border-color: transparent; border-radius: 6px; background: transparent; }
.desktop-window .topbar-notification:hover, .desktop-window .topbar-notification:focus-visible, body.desktop-window.home-dashboard .topbar .topbar-notification:hover, body.desktop-window.home-dashboard .topbar .topbar-notification:focus-visible { border-color: rgba(255,255,255,.08); color: #fff; background: rgba(255,255,255,.07); }
.desktop-window .topbar-notification:focus-visible, body.desktop-window.home-dashboard .topbar .topbar-notification:focus-visible { outline: 0; }
.desktop-window .page-wrap { padding-top: 14px; }
.desktop-window .toast { top: 78px; right: 22px; bottom: auto; z-index: 170; }
.desktop-window .detail-view .detail-topbar { margin-bottom: 24px; padding-bottom: 13px; border-bottom-color: rgba(255,255,255,.075); }
.detail-topbar-label { justify-content: flex-end; }
.desktop-window .home-detail-header {
  padding: 8px 0 32px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.desktop-window .home-detail-header > img { border-radius: 10px; box-shadow: 0 18px 42px rgba(0,0,0,.3); }
.desktop-window .home-detail-songs {
  margin-top: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.desktop-window .home-detail-song { margin: 0; padding-right: 10px; padding-left: 10px; border-radius: 7px; }
.desktop-window .now-playing-head { padding-right: max(170px, calc((100vw - 1280px) / 2)); -webkit-app-region: drag; }
.desktop-window .now-playing-head button, .desktop-window .np-window-actions { -webkit-app-region: no-drag; }

/* Windows title-bar composition: app actions share the native caption-button row. */
.desktop-window #account-menu-wrap {
  position: relative;
  top: auto;
  right: auto;
  z-index: 110;
  width: auto;
  height: 36px;
  -webkit-app-region: no-drag;
  transition: opacity .18s ease, transform .18s ease;
}
.desktop-window #account-trigger { width: auto; max-width: 190px; height: 36px; gap: 7px; padding: 0 7px 0 4px; border-color: transparent; border-radius: 7px; background: transparent; box-shadow: none; }
.desktop-window #account-trigger .top-avatar { width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.1); }
.desktop-window .account-summary-copy { min-width: 0; display: flex; align-items: center; gap: 5px; }
.desktop-window .account-summary-copy strong { overflow: hidden; max-width: 88px; color: #d8d9df; font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.desktop-window .account-summary-copy small { flex: 0 0 auto; padding: 2px 4px; border: 1px solid rgba(224,177,88,.18); border-radius: 4px; color: #d8ae64; background: rgba(224,177,88,.08); font-size: 7px; line-height: 1; }
.desktop-window .account-summary-chevron { width: 12px; height: 12px; display: block; flex: 0 0 auto; color: #6f707a; }
.desktop-window #account-trigger:hover,
.desktop-window #account-trigger[aria-expanded="true"] { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.065); box-shadow: none; }
.desktop-window #account-menu { top: calc(100% + 9px); }
.desktop-window.now-playing-open #account-menu-wrap { opacity: 0; pointer-events: none; transform: translateX(8px); }
.desktop-window .np-window-actions { position: absolute; z-index: 4; pointer-events: auto; -webkit-app-region: no-drag !important; }
.desktop-window .np-window-actions button { pointer-events: auto; -webkit-app-region: no-drag !important; }
@keyframes titlebar-mic-pulse { 50% { opacity: .5; transform: scale(.88); } }

@media (max-width: 980px) {
  .desktop-window .topbar { padding-right: 144px; padding-left: 20px; }
  .desktop-window .search-box { width: min(270px, 32vw); }
  .desktop-window .account-summary-copy { display: none; }
  .desktop-window .now-playing-head { padding-right: 154px; }
}

@media (max-width: 720px) {
  .desktop-window .topbar { height: 58px; padding-right: 150px; padding-left: 16px; }
  .desktop-window .page-wrap { padding-top: 12px; }
  .desktop-window .now-playing-head { padding-right: 150px; }
}

/* Keep the browser workspace toolbar aligned with the desktop app on wide screens. */
@media (min-width: 861px) {
  body:not(.desktop-window) .topbar {
    gap: 24px;
    padding-right: 36px;
    padding-left: 28px;
  }

  body:not(.desktop-window) .topbar-leading {
    flex: 1;
    gap: 8px;
  }

  body:not(.desktop-window) .desktop-titlebar-only { display: grid; }
  body:not(.desktop-window) .crumbs { display: none; }

  body:not(.desktop-window) .desktop-topbar-button {
    width: 36px;
    height: 36px;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 7px;
    color: #a8a9b3;
    background: rgba(255,255,255,.035);
    transition: color .16s ease, border-color .16s ease, background .16s ease;
  }

  body:not(.desktop-window) .desktop-topbar-button:hover {
    border-color: rgba(255,255,255,.17);
    color: #f2f2f5;
    background: rgba(255,255,255,.08);
  }

  body:not(.desktop-window) .desktop-topbar-button:focus-visible {
    outline: 2px solid rgba(175,218,207,.55);
    outline-offset: 2px;
  }

  body:not(.desktop-window) .desktop-topbar-button svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
  }

  body:not(.desktop-window) .desktop-topbar-button.is-listening {
    border-color: rgba(237,114,90,.36);
    color: #ffab98;
    background: rgba(237,114,90,.12);
  }

  body:not(.desktop-window) .search-box {
    width: min(330px, 34vw);
    height: 36px;
    border-color: rgba(255,255,255,.09);
    border-radius: 7px;
    background: #191a21;
  }

  body:not(.desktop-window) .search-box:focus-within {
    border-color: rgba(160,198,189,.3);
    background: #1d1e26;
    box-shadow: 0 0 0 3px rgba(117,197,178,.06);
  }

  body:not(.desktop-window) .topbar-actions {
    gap: 5px;
    margin-left: auto;
  }

  body:not(.desktop-window) #account-trigger {
    width: auto;
    max-width: 190px;
    height: 36px;
    gap: 7px;
    padding: 0 7px 0 4px;
    border-color: transparent;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
  }

  body:not(.desktop-window) #account-trigger .top-avatar {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.1);
  }

  body:not(.desktop-window) .account-summary-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  body:not(.desktop-window) .account-summary-copy strong {
    overflow: hidden;
    max-width: 88px;
    color: #d8d9df;
    font-size: 10px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:not(.desktop-window) .account-summary-copy small {
    flex: 0 0 auto;
    padding: 2px 4px;
    border: 1px solid rgba(224,177,88,.18);
    border-radius: 4px;
    color: #d8ae64;
    background: rgba(224,177,88,.08);
    font-size: 7px;
    line-height: 1;
  }

  body:not(.desktop-window) .account-summary-chevron {
    width: 12px;
    height: 12px;
    display: block;
    flex: 0 0 auto;
    color: #6f707a;
  }

  body:not(.desktop-window) #account-trigger:hover,
  body:not(.desktop-window) #account-trigger[aria-expanded="true"] {
    border-color: rgba(255,255,255,.09);
    background: rgba(255,255,255,.065);
    box-shadow: none;
  }

  body:not(.desktop-window) .topbar-notification {
    width: 36px;
    height: 36px;
    border-color: transparent;
    border-radius: 6px;
    background: transparent;
  }

  body:not(.desktop-window) .topbar-notification:hover {
    border-color: rgba(255,255,255,.08);
    color: #fff;
    background: rgba(255,255,255,.07);
  }
}

/* Account notifications */
.notification-menu { position: relative; flex: 0 0 auto; -webkit-app-region: no-drag; }
.notification-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid #0f1015;
  border-radius: 9px;
  color: #fff;
  background: #e66755;
  font-size: 8px;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
}
.notification-popover {
  position: absolute;
  z-index: 130;
  top: calc(100% + 10px);
  right: 0;
  width: min(330px, calc(100vw - 32px));
  padding: 15px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: #d9dae0;
  background: #18191f;
  box-shadow: 0 18px 48px rgba(0,0,0,.42);
}
.notification-popover header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.notification-popover header div { min-width: 0; }
.notification-popover header strong, .notification-popover header span { display: block; }
.notification-popover header strong { margin-bottom: 4px; color: #f0f0f3; font-size: 12px; }
.notification-popover header span { color: #777984; font-size: 9px; }
.notification-popover header button { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 5px; color: #8f919c; background: transparent; }
.notification-popover header button:hover { color: #fff; background: rgba(255,255,255,.07); }
.notification-popover header button.is-loading svg { animation: spin .8s linear infinite; }
.notification-popover header svg { width: 14px; height: 14px; }
.notification-summary { padding: 12px 1px 10px; color: #aaabb4; font-size: 10px; line-height: 1.55; }
.notification-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
.notification-counts div { height: 31px; display: grid; grid-template-columns: 17px 1fr auto; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.045); color: #a9aab3; font-size: 10px; }
.notification-counts svg { width: 13px; height: 13px; color: #747681; stroke-width: 1.8; }
.notification-counts strong { color: #e1e2e6; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Local audio fingerprint workflow */
.recognition-modal {
  position: fixed;
  z-index: 260;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5,6,9,.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.recognition-modal[hidden] { display: none; }
.recognition-dialog {
  width: min(480px, 100%);
  max-height: min(680px, calc(100vh - 48px));
  overflow-y: auto;
  padding: 21px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 8px;
  color: #d9dae0;
  background: #17181e;
  box-shadow: 0 28px 70px rgba(0,0,0,.5);
}
.recognition-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.recognition-head h2 { margin: 5px 0 0; color: #f2f2f4; font-size: 19px; font-weight: 650; letter-spacing: 0; }
.recognition-stage { min-height: 218px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px 18px; text-align: center; }
.recognition-orbit { width: 70px; height: 70px; display: grid; place-items: center; margin-bottom: 19px; border: 1px solid rgba(138,193,180,.24); border-radius: 50%; color: #8fc5b8; background: rgba(116,185,168,.07); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.recognition-orbit svg { width: 27px; height: 27px; stroke-width: 1.6; }
.recognition-stage[data-state="recording"] .recognition-orbit { color: #ff9d88; border-color: rgba(237,114,90,.42); background: rgba(237,114,90,.1); animation: recognition-pulse 1.2s ease-in-out infinite; }
.recognition-stage[data-state="fingerprinting"] .recognition-orbit,
.recognition-stage[data-state="matching"] .recognition-orbit { animation: recognition-pulse 1.1s ease-in-out infinite; }
.recognition-stage[data-state="success"] .recognition-orbit { color: #a9d7cb; border-color: rgba(141,210,193,.36); background: rgba(117,197,178,.11); }
.recognition-stage[data-state="error"] .recognition-orbit,
.recognition-stage[data-state="empty"] .recognition-orbit { color: #d89988; border-color: rgba(221,133,111,.3); background: rgba(221,133,111,.07); }
.recognition-stage > strong { color: #e9e9ed; font-size: 13px; font-weight: 600; }
.recognition-stage > p { max-width: 340px; margin: 8px 0 15px; color: #858791; font-size: 10px; line-height: 1.6; }
.recognition-progress { width: min(260px, 80%); height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.07); }
.recognition-progress span { width: 0; height: 100%; display: block; border-radius: inherit; background: #79b8a9; transition: width .18s linear; }
.recognition-stage[data-state="error"] .recognition-progress span,
.recognition-stage[data-state="empty"] .recognition-progress span { background: #d77f6b; }
.recognition-actions { display: flex; justify-content: center; gap: 9px; }
.recognition-actions .solid-button, .recognition-actions .outline-button { height: 36px; justify-content: center; padding: 0 15px; border-radius: 6px; font-size: 10px; }
.recognition-file { cursor: pointer; }
.recognition-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.recognition-file.is-disabled { opacity: .45; pointer-events: none; }
.recognition-results { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.075); }
.recognition-result-label { margin-bottom: 7px; color: #777985; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.recognition-result { width: 100%; min-height: 54px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 25px; align-items: center; gap: 11px; padding: 7px; border: 0; border-radius: 6px; color: #dadbe0; background: transparent; text-align: left; }
.recognition-result:hover { background: rgba(255,255,255,.055); }
.recognition-result img, .recognition-result-cover { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 5px; object-fit: cover; background: #22232a; }
.recognition-result-cover svg { width: 16px; height: 16px; color: #777984; }
.recognition-result > span:nth-child(2) { min-width: 0; }
.recognition-result strong, .recognition-result small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recognition-result strong { margin-bottom: 4px; color: #e6e6ea; font-size: 11px; font-weight: 600; }
.recognition-result small { color: #80828d; font-size: 9px; }
.recognition-result > svg { width: 15px; height: 15px; color: #81838d; }
@keyframes recognition-pulse { 50% { transform: scale(.94); opacity: .68; } }

@media (max-width: 560px) {
  .recognition-modal { padding: 14px; }
  .recognition-dialog { padding: 17px; }
  .recognition-stage { min-height: 200px; }
  .notification-popover { right: -6px; }
}

/* Web-only client download entry. The desktop build already is the client. */
.web-download-link {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(143,202,188,.24);
  border-radius: 7px;
  color: #c5e7df;
  background: rgba(93,156,142,.11);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease;
}
.web-download-link svg { width: 14px; height: 14px; stroke-width: 1.9; }
.web-download-link:hover { border-color: rgba(173,229,216,.45); color: #e8f8f4; background: rgba(109,184,168,.18); transform: translateY(-1px); }
.web-download-link:active { transform: translateY(0); }
.web-download-link:focus-visible { outline: 2px solid rgba(175,224,213,.7); outline-offset: 2px; }
.desktop-window .web-download-link { display: none; }
@media (max-width: 620px) {
  body:not(.desktop-window) .web-download-link { width: 36px; justify-content: center; padding: 0; }
  body:not(.desktop-window) .web-download-link span { display: none; }
}

/* Desktop preferences: local skin tokens and a compact settings surface. */
.desktop-settings-modal { position: fixed; z-index: 360; inset: 0; display: grid; place-items: center; padding: 28px; background: rgba(4,5,8,.68); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.desktop-settings-modal[hidden] { display: none; }
.desktop-settings-dialog { width: min(700px, 100%); max-height: min(760px, calc(100vh - 56px)); overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; color: #dedfe5; background: #17181f; box-shadow: 0 30px 80px rgba(0,0,0,.52); }
.desktop-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 24px 25px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.desktop-settings-head h2 { margin: 5px 0 0; color: #f2f2f5; font-size: 20px; font-weight: 650; }
.desktop-settings-head p { margin: 7px 0 0; color: #858792; font-size: 10px; line-height: 1.6; }
.desktop-settings-tabs { display: flex; gap: 4px; padding: 0 25px; border-bottom: 1px solid rgba(255,255,255,.07); }
.desktop-settings-tab { display: inline-flex; align-items: center; gap: 7px; padding: 11px 14px; border: 0; border-bottom: 2px solid transparent; outline: 0; color: #8a8c97; background: transparent; font-size: 10px; font-weight: 600; cursor: pointer; }
.desktop-settings-tab:hover { color: #c7c8d0; }
.desktop-settings-tab.is-active { color: var(--desktop-custom-accent, var(--skin-accent, #93cdbd)); border-bottom-color: currentColor; }
.desktop-settings-tab svg { width: 14px; height: 14px; stroke-width: 1.8; }
.desktop-settings-panel { border-bottom: 0; }
.desktop-settings-panel[hidden] { display: none; }
.desktop-settings-panel .desktop-settings-section:last-child { border-bottom: 0; }
.desktop-storage-path-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.desktop-storage-path-row input { width: 100%; height: 34px; padding: 0 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; outline: 0; color: #e7e8ed; background: #202128; font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 10px; }
.desktop-storage-path-row input:focus { border-color: rgba(132,205,187,.65); box-shadow: 0 0 0 3px rgba(91,180,159,.12); }
.desktop-storage-path-row .outline-button { height: 34px; padding: 0 12px; border-radius: 6px; font-size: 10px; }
.desktop-storage-path-row .outline-button svg { width: 13px; height: 13px; }
.desktop-cloud-sync-path-row { margin-top: 10px; }
.desktop-cloud-sync-path-row .outline-button:disabled { cursor: not-allowed; opacity: .42; }

/* Download manager: task cards with segmented-progress bars. */
#downloads-view .music-single { display: grid; gap: 30px; align-items: start; }
.download-task-list { display: grid; gap: 10px; padding: 14px 0 4px; }
.download-task { display: grid; gap: 9px; padding: 13px 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px; background: rgba(255,255,255,.025); }
.download-task.is-error { border-color: rgba(226,120,120,.4); background: rgba(226,120,120,.06); }
.download-task-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.download-task-title { display: grid; gap: 3px; min-width: 0; }
.download-task-title strong { overflow: hidden; color: #eceef3; font-size: 12px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.download-task-title span { color: #8b8d99; font-size: 10px; }
.download-progress { position: relative; overflow: hidden; height: 5px; border-radius: 999px; background: rgba(255,255,255,.09); }
.download-progress span { display: block; height: 100%; border-radius: 999px; background: var(--desktop-custom-accent, var(--skin-accent, #93cdbd)); transition: width .25s ease; }
.download-progress.is-indeterminate span { width: 34% !important; animation: download-progress-slide 1.3s ease-in-out infinite; }
@keyframes download-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.download-task-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #858792; font-size: 10px; }
body:not(.desktop-window) .desktop-only-nav { display: none; }

.desktop-settings-section { padding: 20px 25px; border-bottom: 1px solid rgba(255,255,255,.07); }
.desktop-settings-section-head { margin-bottom: 14px; }
.desktop-settings-section h3 { margin: 0; color: #ededf1; font-size: 13px; font-weight: 650; }
.desktop-settings-section p { margin: 5px 0 0; color: #888a95; font-size: 10px; line-height: 1.55; }
.skin-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.skin-choice { min-width: 0; padding: 7px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; color: #c8c9d0; background: rgba(255,255,255,.022); text-align: left; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.skin-choice:hover { border-color: rgba(255,255,255,.19); background: rgba(255,255,255,.05); transform: translateY(-1px); }
.skin-choice:active { transform: translateY(0); }
.skin-choice.is-active { border-color: rgba(141,207,190,.65); background: rgba(103,167,151,.1); box-shadow: inset 0 0 0 1px rgba(141,207,190,.12); }
.skin-choice:focus-visible { outline: 2px solid rgba(151,218,201,.65); outline-offset: 2px; }
.skin-choice strong, .skin-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skin-choice strong { margin-top: 8px; color: #e6e7eb; font-size: 10px; font-weight: 600; }
.skin-choice small { margin-top: 3px; color: #7c7e89; font-size: 8px; }
.skin-preview { height: 52px; position: relative; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 5px; }
.skin-preview i, .skin-preview b, .skin-preview em { position: absolute; display: block; }
.skin-preview i { inset: 0 auto 0 0; width: 28%; }
.skin-preview b { top: 9px; left: 37%; width: 48%; height: 7px; border-radius: 2px; }
.skin-preview em { top: 23px; left: 37%; width: 36%; height: 16px; border-radius: 3px; }
.skin-midnight { background: #111217; }.skin-midnight i { background: #090a0d; }.skin-midnight b { background: #30313a; }.skin-midnight em { background: #24252d; }
.skin-ocean { background: #101b27; }.skin-ocean i { background: #09121c; }.skin-ocean b { background: #33516b; }.skin-ocean em { background: #1b3043; }
.skin-forest { background: #111c18; }.skin-forest i { background: #09120f; }.skin-forest b { background: #3d6654; }.skin-forest em { background: #203c30; }
.skin-plum { background: #1b1721; }.skin-plum i { background: #110d15; }.skin-plum b { background: #5b4766; }.skin-plum em { background: #32263c; }
.skin-ember { background: #211314; }.skin-ember i { background: #120a0b; }.skin-ember b { background: #754041; }.skin-ember em { background: #432326; }
.skin-aurora { background: #101b22; }.skin-aurora i { background: #081116; }.skin-aurora b { background: #2e6570; }.skin-aurora em { background: #17414a; }
.skin-amber { background: #211a12; }.skin-amber i { background: #120d08; }.skin-amber b { background: #73552d; }.skin-amber em { background: #43321c; }
.skin-neon-idol { background: radial-gradient(circle at 82% 18%, #fc5ea8 0 7%, transparent 8%), linear-gradient(125deg, #15143f, #081c2d 58%, #22133e); }.skin-neon-idol i { background: linear-gradient(#0b0f2c, #24154b); }.skin-neon-idol b { background: #57d6ff; box-shadow: 0 0 10px rgba(87,214,255,.6); }.skin-neon-idol em { background: #cf4e9f; }
.skin-sakura-night { background: radial-gradient(circle at 78% 22%, rgba(255,184,221,.82) 0 7%, transparent 8%), linear-gradient(125deg, #251525, #3b173b 50%, #151d45); }.skin-sakura-night i { background: linear-gradient(#1b1024, #3a173b); }.skin-sakura-night b { background: #ff9fce; box-shadow: 0 0 10px rgba(255,159,206,.48); }.skin-sakura-night em { background: #8c7fe8; }
.skin-choice-immersive { background: rgba(255,255,255,.04); }
.desktop-background-control { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 70px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.018); }
.desktop-background-summary { min-width: 0; display: flex; align-items: center; gap: 11px; }
.desktop-background-preview { width: 68px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(255,255,255,.09); border-radius: 6px; color: #777984; background: #202128 center / cover no-repeat; font-size: 8px; }
.desktop-background-preview.has-image { color: transparent; }
.desktop-background-summary strong, .desktop-background-summary span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desktop-background-summary strong { margin-bottom: 4px; color: #dfe0e6; font-size: 10px; font-weight: 600; }
.desktop-background-summary span { color: #7d7f8a; font-size: 9px; }
.desktop-background-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.desktop-background-actions .outline-button { min-height: 31px; padding: 0 10px; border-radius: 6px; font-size: 9px; }
.desktop-background-actions .outline-button svg { width: 13px; height: 13px; }
.desktop-background-upload { position: relative; cursor: pointer; }
.desktop-background-upload input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.desktop-background-crop-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .4fr); gap: 12px; align-items: stretch; margin-top: 10px; padding: 10px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.018); }
.desktop-background-crop-editor[hidden] { display: none; }
.desktop-background-crop-viewport { position: relative; min-height: 142px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; outline: 0; background: #111218; cursor: grab; isolation: isolate; touch-action: none; }
.desktop-background-crop-viewport:focus-visible { outline: 2px solid var(--desktop-custom-accent, var(--skin-accent)); outline-offset: 2px; }
.desktop-background-crop-viewport.is-dragging { cursor: grabbing; }
.desktop-background-crop-viewport img { position: absolute; max-width: none; max-height: none; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.desktop-background-crop-grid { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 33.15%, rgba(255,255,255,.52) 33.33% 33.66%, transparent 33.84% 66.15%, rgba(255,255,255,.52) 66.33% 66.66%, transparent 66.84%), linear-gradient(transparent 33.15%, rgba(255,255,255,.52) 33.33% 33.66%, transparent 33.84% 66.15%, rgba(255,255,255,.52) 66.33% 66.66%, transparent 66.84%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), inset 0 0 42px rgba(0,0,0,.18); }
.desktop-background-crop-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 5px 2px; }
.desktop-background-crop-copy strong, .desktop-background-crop-copy span { display: block; }
.desktop-background-crop-copy strong { color: #dfe0e6; font-size: 10px; font-weight: 600; }
.desktop-background-crop-copy span { margin-top: 5px; color: #7d7f8a; font-size: 9px; line-height: 1.5; }
.desktop-background-crop-copy .outline-button { min-height: 29px; padding: 0 9px; border-radius: 6px; font-size: 9px; }
.desktop-background-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.desktop-background-range, .desktop-background-toggle { min-width: 0; display: grid; gap: 8px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; background: rgba(255,255,255,.018); }
.desktop-background-range > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #cfd0d6; font-size: 10px; }
.desktop-background-range > span b, .desktop-background-toggle b { color: #dfe0e6; font-size: 10px; font-weight: 600; }
.desktop-background-range output { min-width: 37px; color: var(--desktop-custom-accent, var(--skin-accent)); font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 9px; text-align: right; }
.desktop-background-range input { width: 100%; accent-color: var(--desktop-custom-accent, var(--skin-accent)); cursor: pointer; }
.desktop-background-range small, .desktop-background-toggle small { color: #7d7f8a; font-size: 9px; line-height: 1.45; }
.desktop-background-toggle { grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 9px; cursor: pointer; }
.desktop-background-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--desktop-custom-accent, var(--skin-accent)); cursor: pointer; }
.desktop-background-toggle span { min-width: 0; display: grid; gap: 4px; }
.desktop-shortcut-list { display: grid; border: 1px solid rgba(255,255,255,.075); border-radius: 8px; overflow: hidden; }
.desktop-shortcut-row { min-height: 49px; display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 18px; padding: 7px 10px 7px 14px; border-bottom: 1px solid rgba(255,255,255,.06); }
.desktop-shortcut-row:last-child { border-bottom: 0; }
.desktop-shortcut-row > span { min-width: 0; display: flex; align-items: center; gap: 9px; color: #c5c6cd; font-size: 10px; }
.desktop-shortcut-row svg { width: 14px; height: 14px; flex: 0 0 auto; color: #8caaa1; stroke-width: 1.8; }
.desktop-shortcut-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.desktop-shortcut-row input { width: 100%; height: 32px; padding: 0 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; outline: 0; color: #e7e8ed; background: #202128; font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 10px; text-align: center; }
.desktop-shortcut-row input:focus { border-color: rgba(132,205,187,.65); box-shadow: 0 0 0 3px rgba(91,180,159,.12); }
.desktop-inline-shortcuts { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; margin-top: 12px; color: #7d7f8a; font-size: 9px; }
.desktop-inline-shortcuts > span { margin-right: 2px; color: #9fa1aa; font-weight: 600; }
.desktop-inline-shortcuts kbd { min-width: 38px; padding: 3px 5px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; color: #bdbfc7; background: rgba(255,255,255,.045); font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace; font-size: 8px; text-align: center; }
.desktop-inline-shortcuts small { margin-right: 5px; color: #747681; font-size: 9px; }
.desktop-settings-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 25px; }
.desktop-settings-foot > div { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.desktop-settings-foot .outline-button, .desktop-settings-foot .solid-button { height: 34px; padding: 0 12px; border-radius: 6px; font-size: 10px; }
.desktop-settings-foot .outline-button svg, .desktop-settings-foot .solid-button svg { width: 13px; height: 13px; }
.desktop-settings-status { min-height: 16px; margin: 0; color: #858792; font-size: 10px; line-height: 1.5; }
.desktop-settings-status.is-success { color: #93cdbd; }.desktop-settings-status.is-warning { color: #e1b577; }

body[data-skin="midnight"] { --canvas: #0d0e12; --paper: #17181e; --sidebar: #090a0d; --line: #2b2b34; --skin-main: #0d0e12; --skin-home: #111116; --skin-topbar: #0f1015; --skin-active: #2b3a35; --skin-accent: #ed725a; }
body[data-skin="ocean"] { --canvas: #0d151e; --paper: #14202c; --sidebar: #08111a; --line: #263848; --skin-main: #0d151e; --skin-home: #101b27; --skin-topbar: #0e1823; --skin-active: #1f4551; --skin-accent: #75b3d6; }
body[data-skin="forest"] { --canvas: #0c1511; --paper: #14211b; --sidebar: #08100d; --line: #263a30; --skin-main: #0c1511; --skin-home: #101b16; --skin-topbar: #0d1712; --skin-active: #284638; --skin-accent: #9ac8a1; }
body[data-skin="plum"] { --canvas: #151019; --paper: #211a28; --sidebar: #100b14; --line: #3a2e43; --skin-main: #151019; --skin-home: #1a141f; --skin-topbar: #19121e; --skin-active: #44304f; --skin-accent: #d0a0d5; }
body[data-skin="ember"] { --canvas: #180e0f; --paper: #251719; --sidebar: #10090a; --line: #46292b; --skin-main: #180e0f; --skin-home: #1d1113; --skin-topbar: #1a0f11; --skin-active: #4c2b2e; --skin-accent: #e27c68; }
body[data-skin="aurora"] { --canvas: #0b171c; --paper: #13242a; --sidebar: #071014; --line: #24434b; --skin-main: #0b171c; --skin-home: #0d1d23; --skin-topbar: #0c191e; --skin-active: #1f4b53; --skin-accent: #7ac9c4; }
body[data-skin="amber"] { --canvas: #18130d; --paper: #251d13; --sidebar: #100c08; --line: #493822; --skin-main: #18130d; --skin-home: #1d1710; --skin-topbar: #1a140d; --skin-active: #4b3920; --skin-accent: #d7a45d; }
body[data-skin="neon-idol"] { --canvas: #0a0d20; --paper: #15152b; --sidebar: #0a0b1b; --line: #39365f; --skin-main: #0a0d20; --skin-home: #0d1026; --skin-topbar: #101128; --skin-active: #382558; --skin-accent: #57d6ff; }
body[data-skin="sakura-night"] { --canvas: #1a1020; --paper: #28142b; --sidebar: #120b17; --line: #573158; --skin-main: #1a1020; --skin-home: #211127; --skin-topbar: #1f1024; --skin-active: #4c244b; --skin-accent: #ff9fce; }
body[data-skin] .sidebar { background: var(--sidebar); }
body[data-skin] .main-panel, body[data-skin].home-dashboard, body[data-skin].home-dashboard .main-panel { background: var(--skin-main); }
body[data-skin].home-dashboard .main-panel, body[data-skin].home-dashboard .page-wrap { background: var(--skin-home); }
body[data-skin] .topbar, body[data-skin].home-dashboard .topbar, body[data-skin].desktop-window .topbar { border-color: var(--line); background: color-mix(in srgb, var(--skin-topbar) 96%, transparent); }
body[data-skin] .nav-item.is-active { background: var(--skin-active); box-shadow: inset 3px 0 0 var(--skin-accent); }
body[data-skin] .nav-item.is-active em { color: var(--skin-accent); }
body[data-skin] .search-box, body[data-skin].desktop-window .search-box, body[data-skin].home-dashboard .search-box { border-color: var(--line); background: var(--paper); }
body[data-skin] .desktop-settings-dialog { background: var(--paper); }
body[data-skin] .desktop-settings-status.is-success { color: var(--skin-accent); }
body[data-skin="ocean"] .desktop-settings-dialog, body[data-skin="forest"] .desktop-settings-dialog, body[data-skin="plum"] .desktop-settings-dialog, body[data-skin="ember"] .desktop-settings-dialog, body[data-skin="aurora"] .desktop-settings-dialog, body[data-skin="amber"] .desktop-settings-dialog, body[data-skin="neon-idol"] .desktop-settings-dialog, body[data-skin="sakura-night"] .desktop-settings-dialog { border-color: var(--line); }
body[data-skin="ocean"] .skin-choice.is-active, body[data-skin="ocean"] .desktop-shortcut-row input:focus { border-color: rgba(117,179,214,.72); }
body[data-skin="forest"] .skin-choice.is-active, body[data-skin="forest"] .desktop-shortcut-row input:focus { border-color: rgba(154,200,161,.72); }
body[data-skin="plum"] .skin-choice.is-active, body[data-skin="plum"] .desktop-shortcut-row input:focus { border-color: rgba(208,160,213,.72); }
body[data-skin="ember"] .skin-choice.is-active, body[data-skin="ember"] .desktop-shortcut-row input:focus { border-color: rgba(226,124,104,.72); }
body[data-skin="aurora"] .skin-choice.is-active, body[data-skin="aurora"] .desktop-shortcut-row input:focus { border-color: rgba(122,201,196,.72); }
body[data-skin="amber"] .skin-choice.is-active, body[data-skin="amber"] .desktop-shortcut-row input:focus { border-color: rgba(215,164,93,.72); }
body[data-skin="neon-idol"] .skin-choice.is-active, body[data-skin="neon-idol"] .desktop-shortcut-row input:focus { border-color: rgba(87,214,255,.76); }
body[data-skin="sakura-night"] .skin-choice.is-active, body[data-skin="sakura-night"] .desktop-shortcut-row input:focus { border-color: rgba(255,159,206,.76); }
body[data-skin="neon-idol"] .main-panel { background: radial-gradient(circle at 82% 10%, rgba(234,68,171,.18), transparent 25%), radial-gradient(circle at 25% 0%, rgba(48,180,255,.14), transparent 28%), repeating-linear-gradient(115deg, transparent 0 26px, rgba(101,130,255,.035) 27px 28px), #0a0d20; }
body[data-skin="neon-idol"] .topbar { background: linear-gradient(90deg, rgba(12,13,35,.96), rgba(23,13,42,.92)); }
body[data-skin="neon-idol"] .home-hero-card, body[data-skin="neon-idol"] .home-chart-card { border-color: rgba(103,203,255,.22); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 12px 30px rgba(14,10,55,.28); }
body[data-skin="sakura-night"] .main-panel { background: radial-gradient(circle at 84% 16%, rgba(255,149,206,.19), transparent 25%), radial-gradient(circle at 18% 0%, rgba(133,114,255,.15), transparent 28%), repeating-linear-gradient(145deg, transparent 0 36px, rgba(255,170,215,.04) 37px 38px), #1a1020; }
body[data-skin="sakura-night"] .topbar { background: linear-gradient(90deg, rgba(31,13,36,.96), rgba(42,15,51,.92)); }
body[data-skin="sakura-night"] .home-hero-card, body[data-skin="sakura-night"] .home-chart-card { border-color: rgba(255,168,214,.20); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 30px rgba(54,10,45,.28); }

/* Extend desktop skins into the music comments and note-feed surfaces. The
   sampled wallpaper accent wins whenever a custom background is active. */
body[data-skin] {
  --desktop-theme-accent: var(--desktop-custom-accent, var(--skin-accent));
  --desktop-theme-accent-soft: color-mix(in srgb, var(--desktop-theme-accent) 18%, transparent);
  --desktop-theme-border: color-mix(in srgb, var(--desktop-theme-accent) 24%, var(--line));
}
body[data-skin] .comment-view {
  background: var(--skin-main);
}
body[data-skin] .comment-song-header,
body[data-skin] .comment-list-section .section-heading,
body[data-skin] .song-comment-item,
body[data-skin] .comment-editor-footer,
body[data-skin] .song-comment-reply-editor-foot { border-color: var(--desktop-theme-border); }
body[data-skin] .comment-song-tag,
body[data-skin] .song-comment-head strong,
body[data-skin] .song-comment-like.is-liked,
body[data-skin] .song-comment-reply:hover { color: var(--desktop-theme-accent); }
body[data-skin] .comment-song-actions .outline-button,
body[data-skin] .song-comment-reply-editor { border-color: color-mix(in srgb, var(--desktop-theme-accent) 30%, var(--line)); }
body[data-skin] .comment-song-actions .outline-button:hover,
body[data-skin] .song-comment-reply-editor:focus-within { border-color: var(--desktop-theme-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--desktop-theme-accent) 14%, transparent); }
body[data-skin] .comment-editor,
body[data-skin] .song-comment-reply-editor { background: color-mix(in srgb, var(--paper) 92%, var(--skin-main)); }
body[data-skin] .comment-song-actions .solid-button,
body[data-skin] .comment-editor-footer .solid-button,
body[data-skin] .song-comment-reply-submit { border-color: color-mix(in srgb, var(--desktop-theme-accent) 44%, var(--line)); color: color-mix(in srgb, var(--desktop-theme-accent) 60%, #fff); background: color-mix(in srgb, var(--desktop-theme-accent) 32%, var(--paper)); }
body[data-skin] .comment-song-actions .solid-button:hover,
body[data-skin] .comment-editor-footer .solid-button:hover,
body[data-skin] .song-comment-reply-submit:hover { border-color: color-mix(in srgb, var(--desktop-theme-accent) 58%, var(--line)); background: color-mix(in srgb, var(--desktop-theme-accent) 42%, var(--paper)); }
body[data-skin] .song-comment-head em { color: color-mix(in srgb, var(--desktop-theme-accent) 67%, #fff); background: color-mix(in srgb, var(--desktop-theme-accent) 18%, transparent); }
body[data-skin] .song-comment-like:hover,
body[data-skin] .song-comment-reply:hover { background: var(--desktop-theme-accent-soft); }

body[data-skin] .note-card {
  border-color: color-mix(in srgb, var(--desktop-theme-accent) 20%, var(--surface-border));
  background: color-mix(in srgb, var(--paper) 94%, var(--skin-main));
}
body[data-skin] .note-card::before { display: none; }
body[data-skin] .note-card:hover { border-color: color-mix(in srgb, var(--desktop-theme-accent) 42%, var(--line)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.14); }
body[data-skin] .note-card.is-read { background: color-mix(in srgb, var(--skin-main) 93%, #000); }
body[data-skin] .note-tag,
body[data-skin] .note-song-button { border-color: color-mix(in srgb, var(--desktop-theme-accent) 22%, var(--line)); background: color-mix(in srgb, var(--desktop-theme-accent) 8%, var(--paper)); }
body[data-skin] .note-song-button:hover { border-color: var(--desktop-theme-accent); color: color-mix(in srgb, var(--desktop-theme-accent) 58%, #fff); background: color-mix(in srgb, var(--desktop-theme-accent) 17%, var(--paper)); }

body[data-skin] .music-card.is-current {
  border-color: color-mix(in srgb, var(--desktop-theme-accent) 36%, var(--line));
  background: color-mix(in srgb, var(--desktop-theme-accent) 9%, var(--paper));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 8px 20px rgba(0,0,0,.12);
}
body[data-skin] .music-card.is-current::before { opacity: .62; background: var(--desktop-theme-accent); }
body[data-skin] .music-card.is-current .music-index { color: var(--desktop-theme-accent); }
body[data-skin] .music-card.is-current .music-cover-play { background: rgba(5,6,9,.46); }

body[data-skin] .detail-aside {
  padding-left: 18px;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--desktop-theme-accent) 20%, var(--line));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-skin] .detail-aside-heading { padding-bottom: 10px; border-bottom-color: color-mix(in srgb, var(--desktop-theme-accent) 16%, var(--line)); color: #d8d9df; font-size: 10px; font-weight: 600; }
body[data-skin] .detail-aside-heading svg,
body[data-skin] .detail-stat-button svg,
body[data-skin] .detail-note svg { display: none; }
body[data-skin] .detail-stats { margin: 14px 0; }
body[data-skin] .detail-stats > * + * { padding-left: 11px; border-left-color: color-mix(in srgb, var(--desktop-theme-accent) 14%, var(--line)); }
body[data-skin] .detail-stats strong { margin-bottom: 3px; font-size: 16px; font-weight: 600; }
body[data-skin] .detail-stats span { font-size: 9px; }
body[data-skin] .detail-stat-button:hover,
body[data-skin] .detail-stat-button:focus-visible,
body[data-skin] .detail-stat-button.is-liked { color: var(--desktop-theme-accent); }
body[data-skin] .detail-note { display: block; margin-top: 13px; padding-top: 11px; border-top-color: color-mix(in srgb, var(--desktop-theme-accent) 14%, var(--line)); }
body[data-skin] .detail-note p { font-size: 9px; line-height: 1.55; }
@media (max-width: 1100px) {
  body[data-skin] .detail-aside { padding: 18px 0 0; border-top: 1px solid color-mix(in srgb, var(--desktop-theme-accent) 20%, var(--line)); border-left: 0; }
}

body[data-skin] .global-player input[type="range"],
body[data-skin] #music-volume,
body[data-skin] .now-playing-progress input { accent-color: var(--desktop-theme-accent); }
body[data-skin] .global-player-volume-popover { border-color: color-mix(in srgb, var(--desktop-theme-accent) 32%, rgba(255,255,255,.16)); background: color-mix(in srgb, var(--desktop-theme-accent) 8%, rgba(25,26,33,.94)); }
body[data-skin] .global-player-volume .global-player-control:hover { color: color-mix(in srgb, var(--desktop-theme-accent) 55%, #fff); background: var(--desktop-theme-accent-soft); }
body[data-skin] .now-playing-progress time { color: color-mix(in srgb, var(--desktop-theme-accent) 32%, #b8b9c2); }
.desktop-wallpaper { display: none; }
body.desktop-window.has-custom-desktop-background { background: #080a0d; }
body.desktop-window.has-custom-desktop-background::after {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--desktop-custom-accent, #76c8b5) 28%, transparent), transparent 42%),
    linear-gradient(120deg, rgba(5,7,10,.2), rgba(5,7,10,.48));
}
body.desktop-window.has-custom-desktop-background .desktop-wallpaper {
  position: fixed;
  z-index: 0;
  inset: -32px;
  display: block;
  pointer-events: none;
  background: var(--desktop-custom-background-image) var(--desktop-custom-background-position-x, 50%) var(--desktop-custom-background-position-y, 50%) / cover no-repeat;
  filter: blur(var(--desktop-custom-background-blur, 30px)) saturate(1.42) brightness(.84) contrast(1.04);
  opacity: .94;
  transform: scale(var(--desktop-custom-background-scale, 1)) scale(1.12);
  transform-origin: var(--desktop-custom-background-position-x, 50%) var(--desktop-custom-background-position-y, 50%);
}
body.desktop-window.has-custom-desktop-background .app-shell { position: relative; z-index: 1; background: transparent; }
body.desktop-window.has-custom-desktop-background .sidebar { background: rgba(7,9,13,.68); -webkit-backdrop-filter: blur(24px) saturate(1.18); backdrop-filter: blur(24px) saturate(1.18); }
body.desktop-window.has-custom-desktop-background .main-panel, body.desktop-window.has-custom-desktop-background.home-dashboard .main-panel { background: rgba(8,10,14,.25); -webkit-backdrop-filter: blur(12px) saturate(1.14); backdrop-filter: blur(12px) saturate(1.14); }
body.desktop-window.has-custom-desktop-background .page-wrap, body.desktop-window.has-custom-desktop-background.home-dashboard .page-wrap { background: transparent; }
body.desktop-window.has-custom-desktop-background .topbar, body.desktop-window.has-custom-desktop-background.home-dashboard .topbar { background: rgba(8,10,14,.70); -webkit-backdrop-filter: blur(24px) saturate(1.18); backdrop-filter: blur(24px) saturate(1.18); }
body.desktop-window.has-custom-desktop-background .nav-item.is-active { background: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 25%, rgba(8,10,14,.54)); box-shadow: inset 3px 0 0 var(--desktop-custom-accent, var(--skin-accent)); }
body.desktop-window.has-custom-desktop-background .home-section-heading h2::before { background: var(--desktop-custom-accent, var(--skin-accent)); box-shadow: 0 0 12px color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 48%, transparent); }
body.desktop-window.has-custom-desktop-background .search-box:focus-within, body.desktop-window.has-custom-desktop-background .desktop-shortcut-row input:focus { border-color: var(--desktop-custom-accent, var(--skin-accent)); }
body.desktop-window.has-custom-desktop-background .desktop-settings-status.is-success { color: var(--desktop-custom-accent, var(--skin-accent)); }
body.desktop-window.has-custom-desktop-background .global-player input[type="range"] { accent-color: var(--desktop-custom-accent, var(--skin-accent)); }
body.desktop-window.has-custom-desktop-background .desktop-background-preview.has-image { border-color: var(--desktop-custom-accent, var(--skin-accent)); }
body.desktop-window.has-custom-desktop-background .home-hero-card, body.desktop-window.has-custom-desktop-background .home-chart-card, body.desktop-window.has-custom-desktop-background .music-card { background: rgba(20,22,28,.66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
body.desktop-window.has-custom-desktop-background .music-card.is-current { background: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 10%, rgba(20,22,28,.66)); }
body.desktop-window.has-custom-desktop-background .desktop-settings-dialog { background: rgba(20,21,28,.88); -webkit-backdrop-filter: blur(26px) saturate(1.16); backdrop-filter: blur(26px) saturate(1.16); }
body.desktop-window.has-custom-desktop-background .comment-view { background: transparent; }
body.desktop-window.has-custom-desktop-background .comment-editor,
body.desktop-window.has-custom-desktop-background .song-comment-reply-editor { background: rgba(11,13,19,.46); -webkit-backdrop-filter: blur(12px) saturate(1.08); backdrop-filter: blur(12px) saturate(1.08); }

/* Player popovers are part of the desktop skin as well. Keep their active
   states tied to the selected skin/accent (including an extracted wallpaper
   accent) instead of the fixed mint treatment used by the web player. */
body[data-skin] .global-player-playlist-panel,
body[data-skin] .global-player-queue-panel {
  border-color: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 34%, rgba(255,255,255,.14));
}
body[data-skin] .global-player-playlist-head,
body[data-skin] .global-player-queue-head {
  border-bottom-color: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 22%, rgba(255,255,255,.08));
  background: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 6%, rgba(255,255,255,.018));
}
body[data-skin] .global-player-playlist-tabs button.is-active {
  border-bottom-color: var(--desktop-custom-accent, var(--skin-accent));
  color: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 52%, #fff);
}
body[data-skin] .global-player-playlist-row:hover,
body[data-skin] .global-player-playlist-row:focus-visible,
body[data-skin] .global-player-queue-row:hover .global-player-queue-play,
body[data-skin] .global-player-queue-row:focus-within .global-player-queue-play {
  background: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 12%, rgba(255,255,255,.06));
}
body[data-skin] .global-player-playlist-row.is-added,
body[data-skin] .global-player-queue-row.is-current .global-player-queue-play {
  color: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 64%, #fff);
  background: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 18%, rgba(255,255,255,.06));
}
body[data-skin] .global-player-playlist-row.is-added small,
body[data-skin] .global-player-playlist-row > svg,
body[data-skin] .global-player-queue-row.is-current::before,
body[data-skin] .global-player-queue-row.is-current .global-player-queue-index,
body[data-skin] .global-player-queue-row.is-current .global-player-queue-copy span,
body[data-skin] .global-player-queue-row.is-current .global-player-queue-duration {
  color: var(--desktop-custom-accent, var(--skin-accent));
}
body[data-skin] .global-player-queue-row.is-current::before {
  background: linear-gradient(var(--desktop-custom-accent, var(--skin-accent)), color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 58%, #fff));
  box-shadow: 0 0 10px color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 48%, transparent);
}
body[data-skin] .global-player-playlist-collect > .global-player-control:hover,
body[data-skin] .global-player-playlist-collect > .global-player-control.is-active,
body[data-skin] .global-player-queue-toggle.is-active {
  color: #fff;
  background: color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 24%, rgba(255,255,255,.08));
}
body[data-skin] .global-player-playlist-collect > .global-player-control.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--desktop-custom-accent, var(--skin-accent)) 54%, transparent);
}

/* Playlist discovery surfaces follow the selected skin too: page chrome uses
   the skin canvas/paper, while accents (kickers, active tabs/tags, the play
   affordance) track --desktop-theme-accent so a sampled wallpaper accent wins. */
body[data-skin].playlist-discovery-dashboard .topbar {
  border-color: var(--line);
  background: color-mix(in srgb, var(--skin-topbar) 88%, transparent);
}
body[data-skin] .playlist-discovery-page-header {
  border-color: var(--desktop-theme-border);
  background:
    radial-gradient(circle at 88% -30%, color-mix(in srgb, var(--desktop-theme-accent) 15%, transparent), transparent 52%),
    radial-gradient(circle at 12% 118%, color-mix(in srgb, var(--desktop-theme-accent) 9%, transparent), transparent 55%),
    linear-gradient(140deg, color-mix(in srgb, var(--paper) 94%, transparent), color-mix(in srgb, var(--skin-main) 94%, transparent));
}
body[data-skin] .playlist-discovery-page-header::after {
  border-color: color-mix(in srgb, var(--desktop-theme-accent) 13%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--desktop-theme-accent) 7%, transparent), transparent 66%);
}
body[data-skin] .playlist-discovery-page-kicker,
body[data-skin] .playlist-discovery-page-eyebrow { color: var(--desktop-theme-accent); }
body[data-skin] .playlist-discovery-page-kicker-dim { color: color-mix(in srgb, var(--desktop-theme-accent) 38%, #5f6c68); }
body[data-skin] .playlist-discovery-page-intro h1 {
  background: linear-gradient(100deg, #f4f5f7 30%, color-mix(in srgb, var(--desktop-theme-accent) 78%, #fff) 78%, var(--desktop-theme-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-skin] .playlist-discovery-page-aside { border-left-color: color-mix(in srgb, var(--desktop-theme-accent) 32%, transparent); }
body[data-skin] .playlist-discovery-page-aside > svg { color: color-mix(in srgb, var(--desktop-theme-accent) 82%, #fff); }
body[data-skin] .playlist-discovery-view .playlist-discovery-panel {
  border-color: var(--desktop-theme-border);
  background: linear-gradient(145deg, color-mix(in srgb, var(--paper) 94%, transparent), color-mix(in srgb, var(--skin-main) 94%, transparent));
}
body[data-skin] .playlist-discovery-toolbar,
body[data-skin] .playlist-discovery-tags { border-bottom-color: var(--desktop-theme-border); }
body[data-skin] .playlist-discovery-mode.is-active,
body[data-skin] .playlist-discovery-order-button.is-active {
  color: color-mix(in srgb, var(--desktop-theme-accent) 72%, #fff);
  background: linear-gradient(120deg, color-mix(in srgb, var(--desktop-theme-accent) 32%, transparent), color-mix(in srgb, var(--desktop-theme-accent) 22%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px color-mix(in srgb, var(--desktop-theme-accent) 18%, transparent);
}
body[data-skin] .playlist-discovery-tag.is-active {
  border-color: color-mix(in srgb, var(--desktop-theme-accent) 26%, transparent);
  color: color-mix(in srgb, var(--desktop-theme-accent) 72%, #fff);
  background: color-mix(in srgb, var(--desktop-theme-accent) 20%, transparent);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--desktop-theme-accent) 16%, transparent);
}
body[data-skin] .playlist-discovery-expand { color: color-mix(in srgb, var(--desktop-theme-accent) 82%, #fff); }
body[data-skin] .playlist-discovery-expand:hover { color: color-mix(in srgb, var(--desktop-theme-accent) 60%, #fff); }
body[data-skin] .playlist-discovery-card-play {
  color: color-mix(in srgb, var(--desktop-theme-accent) 78%, #fff);
  background: color-mix(in srgb, var(--desktop-theme-accent) 46%, rgba(10,12,16,.72));
}
body[data-skin] .playlist-discovery-card-play:hover {
  background: color-mix(in srgb, var(--desktop-theme-accent) 58%, rgba(10,12,16,.72));
}
body[data-skin] .playlist-discovery-card:focus-visible,
body[data-skin] .playlist-discovery-tag:focus-visible,
body[data-skin] .playlist-discovery-mode:focus-visible,
body[data-skin] .playlist-discovery-order-button:focus-visible,
body[data-skin] .playlist-discovery-reset:focus-visible {
  outline-color: color-mix(in srgb, var(--desktop-theme-accent) 68%, transparent);
}
body.desktop-window.has-custom-desktop-background .playlist-discovery-page-header,
body.desktop-window.has-custom-desktop-background .playlist-discovery-view .playlist-discovery-panel {
  background: rgba(20,22,28,.66);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 620px) {
  .desktop-settings-modal { padding: 12px; }
  .desktop-settings-dialog { max-height: calc(100vh - 24px); border-radius: 9px; }
  .desktop-settings-head, .desktop-settings-section { padding-right: 17px; padding-left: 17px; }
  .desktop-settings-head { padding-top: 18px; padding-bottom: 16px; }
  .skin-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-background-control { align-items: flex-start; flex-direction: column; }
  .desktop-background-crop-editor { grid-template-columns: 1fr; }
  .desktop-background-crop-copy { flex-direction: row; align-items: center; padding: 1px 2px; }
  .desktop-background-options { grid-template-columns: 1fr; }
  .desktop-background-actions { width: 100%; }.desktop-background-actions .outline-button { flex: 1; justify-content: center; }
  .desktop-shortcut-row { grid-template-columns: 1fr; gap: 7px; padding: 10px; }
  .desktop-settings-foot { align-items: flex-start; flex-direction: column; padding: 15px 17px; }
  .desktop-settings-foot > div { width: 100%; }.desktop-settings-foot .outline-button, .desktop-settings-foot .solid-button { flex: 1; justify-content: center; }
}

/* Notes use one quiet, translucent surface so a selected desktop wallpaper
   remains present without competing with the writing. */
.note-card,
.detail-article,
.detail-aside {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(23,24,30,.68);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 26px rgba(0,0,0,.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

.note-card {
  overflow: hidden;
  padding: 20px 21px 17px;
}

.note-card::before { display: none; }

.note-card:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 13px 28px rgba(0,0,0,.16);
  transform: translateY(-1px);
}

.note-card.is-read { background: rgba(18,19,24,.56); }
.note-card.is-read .note-title { color: var(--ink); }
.note-topline { margin-bottom: 14px; }
.note-footer { margin-top: 16px; padding-top: 12px; border-top-color: rgba(255,255,255,.075); }
.note-tag { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.045); }
.note-song-button {
  border-color: rgba(255,255,255,.09);
  background: rgba(8,10,14,.18);
}

.detail-view .detail-topbar {
  margin-bottom: 16px;
  padding-bottom: 0;
  border-bottom: 0;
}

.detail-layout {
  grid-template-columns: minmax(0, 1fr) 244px;
  gap: 16px;
}

.detail-article {
  width: 100%;
  max-width: 860px;
  padding: 30px 32px 32px;
}

.detail-aside {
  padding: 21px 20px;
}

.detail-title { margin-top: 14px; }
.detail-meta { padding-bottom: 20px; border-bottom-color: rgba(255,255,255,.08); }
.detail-copy { padding-top: 24px; }
.detail-gallery { gap: 9px; margin: 24px 0; }
.detail-gallery img, .detail-image-button { border-radius: 8px; }
.detail-tags { margin: 24px 0; }
.detail-song {
  border-color: rgba(255,255,255,.09);
  border-radius: 8px;
  background: rgba(8,10,14,.16);
}
.detail-song > img { border-radius: 7px; }
.detail-comments { margin-top: 32px; padding-top: 22px; border-top-color: rgba(255,255,255,.08); }
.detail-article .comment-composer {
  border-color: rgba(255,255,255,.085);
  border-radius: 8px;
  background: rgba(8,10,14,.18);
  box-shadow: none;
}
.detail-article .comment-composer textarea {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}
.detail-article .comment-item { border-top-color: rgba(255,255,255,.07); }

.detail-aside-heading { padding-bottom: 12px; border-bottom-color: rgba(255,255,255,.08); }
.detail-stats { margin: 17px 0 20px; }
.detail-stats > * + * { border-left-color: rgba(255,255,255,.08); }
.detail-note { margin-top: 18px; padding-top: 14px; border-top-color: rgba(255,255,255,.08); }

body[data-skin] .note-card,
body[data-skin] .detail-article,
body[data-skin] .detail-aside {
  border-color: color-mix(in srgb, var(--desktop-theme-accent) 16%, rgba(255,255,255,.11));
  background: color-mix(in srgb, var(--paper) 66%, transparent);
}

body[data-skin] .note-card.is-read { background: color-mix(in srgb, var(--paper) 53%, transparent); }
body[data-skin] .note-card:hover {
  border-color: color-mix(in srgb, var(--desktop-theme-accent) 38%, rgba(255,255,255,.15));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 13px 28px rgba(0,0,0,.16);
}
body[data-skin] .note-tag,
body[data-skin] .note-song-button,
body[data-skin] .detail-song {
  border-color: color-mix(in srgb, var(--desktop-theme-accent) 15%, rgba(255,255,255,.10));
  background: color-mix(in srgb, var(--desktop-theme-accent) 6%, rgba(7,9,13,.22));
}
body[data-skin] .detail-aside {
  padding: 21px 20px;
  border: 1px solid color-mix(in srgb, var(--desktop-theme-accent) 16%, rgba(255,255,255,.11));
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 26px rgba(0,0,0,.12);
}
body[data-skin] .detail-aside-heading { padding-bottom: 12px; border-bottom-color: color-mix(in srgb, var(--desktop-theme-accent) 14%, rgba(255,255,255,.08)); }
body[data-skin] .detail-stats > * + * { border-left-color: color-mix(in srgb, var(--desktop-theme-accent) 12%, rgba(255,255,255,.08)); }
body[data-skin] .detail-note { margin-top: 18px; padding-top: 14px; border-top-color: color-mix(in srgb, var(--desktop-theme-accent) 12%, rgba(255,255,255,.08)); }
body[data-skin] .detail-article .comment-composer {
  border-color: color-mix(in srgb, var(--desktop-theme-accent) 13%, rgba(255,255,255,.085));
  background: color-mix(in srgb, var(--desktop-theme-accent) 4%, rgba(7,9,13,.20));
}

body.desktop-window.has-custom-desktop-background .note-card,
body.desktop-window.has-custom-desktop-background .detail-article,
body.desktop-window.has-custom-desktop-background .detail-aside {
  background: color-mix(in srgb, var(--paper) 50%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  backdrop-filter: blur(18px) saturate(1.06);
}
body.desktop-window.has-custom-desktop-background .detail-article .comment-composer,
body.desktop-window.has-custom-desktop-background .detail-song,
body.desktop-window.has-custom-desktop-background .note-song-button {
  background: rgba(7,9,13,.20);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 1100px) {
  .detail-layout { grid-template-columns: 1fr; gap: 14px; }
  .detail-article { max-width: none; }
  body[data-skin] .detail-aside { padding: 19px 20px; border: 1px solid color-mix(in srgb, var(--desktop-theme-accent) 16%, rgba(255,255,255,.11)); }
}

@media (max-width: 620px) {
  .note-card { padding: 17px 15px 14px; border-radius: 10px; }
  .detail-article, .detail-aside { border-radius: 10px; }
  .detail-article { padding: 22px 17px 24px; }
  .detail-aside { padding: 18px 17px; }
}

@media (prefers-reduced-transparency: reduce) {
  .note-card, .detail-article, .detail-aside { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body[data-skin] .note-card, body[data-skin] .detail-article, body[data-skin] .detail-aside { background: var(--paper); }
}

/* Automatic sign-in workspace. The diary stays compact so each day's result is scannable. */
.signin-config-panel { display: flex; flex-direction: column; }
.signin-notice { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 11px 12px; border: 1px solid rgba(133,196,181,.18); border-left: 3px solid #85c4b5; border-radius: 7px; color: #b9d8d0; background: rgba(133,196,181,.07); font-size: 10.5px; line-height: 1.65; }
.signin-notice svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; color: #a6d4c8; }
.signin-options { display: grid; gap: 8px; }
.signin-option { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 9px; padding: 10px 11px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: #c8c9d0; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.signin-option:hover { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.045); transform: translateY(-1px); }
.signin-option input { width: 15px; height: 15px; margin: 1px 0 0; accent-color: #9ed0c3; }
.signin-option span { min-width: 0; display: grid; gap: 3px; }
.signin-option strong { color: #e5e5ea; font-size: 11px; font-weight: 600; }
.signin-option small { color: #81828d; font-size: 9.5px; line-height: 1.5; }
.signin-option-primary { border-color: rgba(133,196,181,.25); background: rgba(133,196,181,.08); }
.signin-option-primary strong { color: #d7eee8; }
.signin-option:has(input:disabled) { cursor: wait; opacity: .62; transform: none; }
.signin-actions { margin-top: auto; padding-top: 18px; }
.signin-actions .task-generate { min-height: 40px; color: #17181e; background: #d9ebe5; border-color: #d9ebe5; }
.signin-actions .task-generate:hover:not(:disabled) { color: #101214; background: #effaf6; border-color: #effaf6; }
.signin-actions .task-generate:disabled { cursor: wait; opacity: .56; }
.signin-summary { display: flex; align-items: center; gap: 9px; min-height: 42px; margin-bottom: 13px; padding: 0 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; color: #858691; background: rgba(255,255,255,.025); font-size: 10.5px; line-height: 1.5; }
.signin-summary svg { width: 16px; height: 16px; flex: 0 0 auto; color: #777985; }
.signin-summary.is-success { border-color: rgba(133,196,181,.2); color: #a8d6ca; background: rgba(133,196,181,.07); }
.signin-summary.is-success svg { color: #a6d4c8; }
.signin-summary.is-error { border-color: rgba(240,143,123,.2); color: #dfa095; background: rgba(240,143,123,.06); }
.signin-summary.is-error svg { color: #ec9d8d; }
.signin-log-panel { gap: 0; }
.signin-log-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.signin-log-toolbar .outline-button.mini { min-height: 28px; padding: 0 9px; font-size: 9px; }
.signin-log-toolbar .outline-button.mini svg { width: 12px; height: 12px; }
.signin-log { display: grid; gap: 8px; min-height: 280px; max-height: 480px; overflow-y: auto; padding: 10px; border: 1px solid #2b2c34; border-radius: 7px; background: #131419; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.2) transparent; }
.signin-log::-webkit-scrollbar { width: 6px; }.signin-log::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(255,255,255,.2); }.signin-log::-webkit-scrollbar-track { background: transparent; }
.signin-log .task-queue-empty { min-height: 240px; }
.signin-log-item { padding: 11px 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: rgba(255,255,255,.025); }
.signin-log-item.is-success { border-color: rgba(133,196,181,.16); }
.signin-log-item.is-error { border-color: rgba(240,143,123,.18); }
.signin-log-item header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.signin-log-item header div { min-width: 0; }
.signin-log-item header strong, .signin-log-item header small { display: block; }
.signin-log-item header strong { color: #e5e5ea; font-size: 11px; font-variant-numeric: tabular-nums; }
.signin-log-item header small { margin-top: 3px; color: #777985; font-size: 9px; }
.signin-log-item header > em { flex: 0 0 auto; color: #9ed0c3; font-size: 9px; font-style: normal; }
.signin-log-item.is-error header > em { color: #ee9b89; }
.signin-log-item > p { margin: 9px 0 8px; color: #b6b7c0; font-size: 10px; line-height: 1.55; }
.signin-log-item > ul { display: grid; gap: 5px; margin: 0; padding: 8px 0 0; border-top: 1px solid rgba(255,255,255,.06); list-style: none; }
.signin-log-item > ul li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: #9697a1; font-size: 9.5px; line-height: 1.45; }
.signin-log-item > ul li span { min-width: 0; }
.signin-log-item > ul li em { flex: 0 1 auto; overflow: hidden; color: #aeb0b9; font-style: normal; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.signin-log-item > ul li.is-success em { color: #9ed0c3; }.signin-log-item > ul li.is-error em { color: #ee9b89; }

@media (max-width: 900px) {
  .signin-log { max-height: 400px; }
}

@media (max-width: 620px) {
  .signin-notice { margin-bottom: 14px; }
  .signin-actions { padding-top: 15px; }
  .signin-log-toolbar { align-items: flex-start; flex-direction: column; }
  .signin-log-toolbar .outline-button.mini { align-self: flex-end; }
  .signin-log { min-height: 220px; padding: 8px; }
}

/* Playlist discovery: an independent catalogue surface with a progressive
   filter panel for the full NetEase playlist catalogue. */
.playlist-discovery-view { max-width: none; margin: 0; animation: detail-enter .28s cubic-bezier(.22,.61,.36,1) both; }
body.playlist-discovery-dashboard .topbar { background: rgba(13,14,18,.82); }
.playlist-discovery-page-header { padding: 3px 0 28px; border-bottom: 1px solid rgba(255,255,255,.075); }
.playlist-discovery-page-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.playlist-discovery-page-kicker, .playlist-discovery-page-eyebrow { color: #87b7aa; font-size: 9px; font-weight: 700; letter-spacing: 1.7px; }
.playlist-discovery-page-intro { display: grid; grid-template-columns: minmax(0, 1fr) 250px; align-items: end; gap: 32px; }
.playlist-discovery-page-intro h1 { margin: 10px 0 0; color: #f1f2f4; font-size: clamp(32px, 3.5vw, 48px); letter-spacing: -.045em; }
.playlist-discovery-page-intro p { max-width: 600px; margin: 11px 0 0; color: #92949e; font-size: 12px; line-height: 1.8; }
.playlist-discovery-page-aside { display: flex; align-items: flex-start; gap: 11px; padding: 13px 0 2px 16px; border-left: 1px solid rgba(151,211,197,.24); }
.playlist-discovery-page-aside > svg { width: 17px; height: 17px; flex: 0 0 auto; color: #9bd0c1; }
.playlist-discovery-page-aside strong, .playlist-discovery-page-aside span { display: block; }
.playlist-discovery-page-aside strong { margin-bottom: 5px; color: #e3ebe8; font-size: 11px; font-weight: 600; }
.playlist-discovery-page-aside span { color: #7f858c; font-size: 9px; line-height: 1.6; }
.playlist-discovery-view .playlist-discovery-panel { margin-top: 28px; }
.playlist-discovery-view .playlist-discovery-results-heading { margin-top: 20px; }

.playlist-discovery-card { min-width: 0; padding: 0; border: 1px solid transparent; border-radius: 10px; color: #e8e8ec; background: transparent; text-align: left; transition: transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s ease, background .2s ease; }
.playlist-discovery-card:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.035); transform: translateY(-3px); }
.playlist-discovery-card:active { transform: translateY(-1px) scale(.99); }
.playlist-discovery-card:focus-visible, .playlist-discovery-tag:focus-visible, .playlist-discovery-mode:focus-visible, .playlist-discovery-order-button:focus-visible, .playlist-discovery-reset:focus-visible { outline: 1px solid rgba(188,228,216,.7); outline-offset: 2px; }
.playlist-discovery-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: 9px; background: #24262d; box-shadow: 0 10px 20px rgba(0,0,0,.2); }
.playlist-discovery-cover::after { position: absolute; inset: 35% 0 0; content: ""; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(8,9,12,.72)); }
.playlist-discovery-cover img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .24s ease, filter .24s ease; }
.playlist-discovery-card:hover .playlist-discovery-cover img { filter: brightness(1.06); transform: scale(1.045); }
.playlist-discovery-playcount { position: absolute; top: 9px; left: 9px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 5px; color: rgba(255,255,255,.9); background: rgba(8,9,12,.46); font-size: 9px; font-variant-numeric: tabular-nums; backdrop-filter: blur(8px); }
.playlist-discovery-playcount svg { width: 11px; height: 11px; }
.playlist-discovery-card-play { position: absolute; right: 9px; bottom: 9px; z-index: 1; width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: #edf8f4; background: rgba(19,50,43,.72); opacity: 0; transform: translateY(3px); transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(8px); }
.playlist-discovery-card:hover .playlist-discovery-card-play, .playlist-discovery-card:focus-visible .playlist-discovery-card-play { opacity: 1; transform: translateY(0); }
.playlist-discovery-card-play svg { width: 12px; height: 12px; fill: currentColor; }
.playlist-discovery-card > strong { display: -webkit-box; overflow: hidden; margin: 9px 7px 0; color: #e5e5e9; font-size: 10px; font-weight: 550; line-height: 1.55; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.playlist-discovery-card-meta { display: block; overflow: hidden; margin: 5px 7px 0; color: #777984; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.playlist-discovery-panel { margin-top: 22px; padding: 18px; border: 1px solid rgba(255,255,255,.085); border-radius: 13px; background: linear-gradient(145deg, rgba(29,30,37,.92), rgba(20,21,27,.92)); box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 14px 32px rgba(0,0,0,.12); animation: detail-enter .24s cubic-bezier(.22,.61,.36,1) both; }
.playlist-discovery-toolbar { display: flex; align-items: center; gap: 10px; min-width: 0; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.075); }
.playlist-discovery-mode-tabs, .playlist-discovery-order { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; background: rgba(255,255,255,.025); }
.playlist-discovery-mode, .playlist-discovery-order-button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 6px; color: #92939d; background: transparent; font-size: 10px; transition: color .16s ease, background .16s ease; }
.playlist-discovery-mode:hover, .playlist-discovery-order-button:hover { color: #e7e7eb; background: rgba(255,255,255,.055); }
.playlist-discovery-mode.is-active, .playlist-discovery-order-button.is-active { color: #e9f8f3; background: rgba(102,168,151,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }
.playlist-discovery-order { margin-left: auto; }
.playlist-discovery-order-button:disabled { display: none; }
.playlist-discovery-reset { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; margin-left: 2px; padding: 0 7px; border: 0; color: #858690; background: transparent; font-size: 10px; }
.playlist-discovery-reset:hover { color: #e8e8ed; }
.playlist-discovery-reset svg { width: 13px; height: 13px; }
.playlist-discovery-tags { padding: 16px 0 17px; border-bottom: 1px solid rgba(255,255,255,.075); }
.playlist-discovery-subheading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.playlist-discovery-subheading > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.playlist-discovery-subheading strong, .playlist-discovery-results-heading strong { color: #e7e7eb; font-size: 11px; }
.playlist-discovery-subheading span, .playlist-discovery-results-heading span { color: #7f808b; font-size: 9px; }
.playlist-discovery-expand { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; color: #9bc2b8; background: transparent; font-size: 10px; }
.playlist-discovery-expand:hover { color: #d8eee8; }
.playlist-discovery-expand svg { width: 13px; height: 13px; }
.playlist-discovery-quick-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.playlist-discovery-tag { min-height: 26px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; color: #9697a1; background: rgba(255,255,255,.045); font-size: 10px; transition: color .16s ease, border-color .16s ease, background .16s ease; }
.playlist-discovery-tag:hover { color: #e9e9ed; background: rgba(255,255,255,.09); }
.playlist-discovery-tag.is-active { border-color: rgba(154,216,200,.24); color: #dcf1eb; background: rgba(92,157,139,.22); }
.playlist-discovery-tag-groups { display: grid; gap: 12px; margin-top: 14px; padding: 13px; border: 1px solid rgba(255,255,255,.065); border-radius: 9px; background: rgba(8,9,13,.2); }
.playlist-discovery-tag-groups[hidden] { display: none; }
.playlist-discovery-tag-group { display: grid; grid-template-columns: 67px minmax(0, 1fr); gap: 12px; align-items: start; }
.playlist-discovery-tag-group > strong { padding-top: 5px; color: #a6a7b1; font-size: 10px; font-weight: 600; }
.playlist-discovery-tag-group > div { display: flex; flex-wrap: wrap; gap: 6px; }
.playlist-discovery-tag-group .playlist-discovery-tag { min-height: 25px; padding: 0 8px; background: rgba(255,255,255,.028); }
.playlist-discovery-tag-empty { color: #858690; font-size: 10px; }
.playlist-discovery-tag-skeleton { width: 52px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.065); animation: playlist-discovery-pulse 1.4s ease-in-out infinite; }
.playlist-discovery-tag-skeleton:nth-child(2) { width: 68px; animation-delay: .12s; }.playlist-discovery-tag-skeleton:nth-child(3) { width: 44px; animation-delay: .24s; }.playlist-discovery-tag-skeleton:nth-child(4) { width: 76px; animation-delay: .36s; }
.playlist-discovery-results-heading { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: 17px 0 13px; }
.playlist-discovery-results-heading > div { display: flex; align-items: baseline; gap: 9px; }
.playlist-discovery-results-hint { white-space: nowrap; }
.playlist-discovery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 13px; min-width: 0; }
.playlist-discovery-grid .home-loading { min-height: 180px; }
.playlist-discovery-load-more { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; color: #84858f; font-size: 10px; }
.playlist-discovery-load-more .outline-button { min-height: 31px; padding: 0 12px; font-size: 10px; }
.playlist-discovery-load-more .outline-button:disabled { cursor: wait; opacity: .6; }
@keyframes playlist-discovery-pulse { 0%, 100% { opacity: .38; } 50% { opacity: .88; } }

/* Playlist discovery page polish */
body.playlist-discovery-dashboard, body.playlist-discovery-dashboard .main-panel, body.playlist-discovery-dashboard .page-wrap { background: transparent; }
.playlist-discovery-page-header { position: relative; overflow: hidden; margin: 0 -4px; padding: 26px 26px 30px; border: 1px solid rgba(255,255,255,.075); border-radius: 18px; background: radial-gradient(circle at 88% -30%, rgba(117,197,178,.16), transparent 52%), radial-gradient(circle at 12% 118%, rgba(241,132,109,.1), transparent 55%), linear-gradient(140deg, rgba(32,34,43,.94), rgba(19,20,26,.94)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 42px rgba(0,0,0,.2); }
.playlist-discovery-page-header::after { position: absolute; right: -70px; bottom: -120px; width: 280px; height: 280px; border: 1px solid rgba(151,211,197,.12); border-radius: 50%; content: ""; pointer-events: none; background: radial-gradient(circle, rgba(117,197,178,.07), transparent 66%); }
.playlist-discovery-page-topline { margin-bottom: 30px; }
.playlist-discovery-page-kicker-dim { color: #5f6c68; }
.playlist-discovery-page-intro h1 { background: linear-gradient(100deg, #f4f5f7 30%, #a9d8cb 78%, #f1a48f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.playlist-discovery-page-aside { border-left-color: rgba(151,211,197,.32); border-radius: 2px; }
.playlist-discovery-view .playlist-discovery-panel { border-radius: 16px; background: linear-gradient(145deg, rgba(29,30,37,.94), rgba(18,19,25,.94)); }
.playlist-discovery-mode.is-active, .playlist-discovery-order-button.is-active { background: linear-gradient(120deg, rgba(102,168,151,.34), rgba(74,128,115,.26)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(58,124,108,.18); }
.playlist-discovery-tag.is-active { box-shadow: 0 3px 10px rgba(66,140,121,.16); }
.playlist-discovery-card { border-radius: 12px; }
.playlist-discovery-cover { border-radius: 11px; box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06); }
.playlist-discovery-card:hover .playlist-discovery-cover { box-shadow: 0 18px 34px rgba(0,0,0,.3); }
.playlist-discovery-card-play { background: rgba(23,66,56,.82); box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.playlist-discovery-card-play { cursor: pointer; }
.playlist-discovery-card-play:hover { background: rgba(33,88,74,.92); transform: translateY(0) scale(1.08); }
.playlist-discovery-card-play:active { transform: translateY(0) scale(.96); }
.playlist-discovery-card > strong { font-size: 10.5px; }
.playlist-discovery-view .home-loading { grid-column: 1 / -1; }

@media (max-width: 1180px) {
  .playlist-discovery-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 980px) {
  .playlist-discovery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

@media (max-width: 620px) {
  .playlist-discovery-page-header { padding: 18px 16px 22px; }
  .playlist-discovery-page-topline { margin-bottom: 22px; }
  .playlist-discovery-page-intro { grid-template-columns: 1fr; gap: 19px; }
  .playlist-discovery-page-intro h1 { font-size: 32px; }
  .playlist-discovery-page-intro p { font-size: 11px; line-height: 1.7; }
  .playlist-discovery-page-aside { padding-top: 0; padding-bottom: 0; }
  .playlist-discovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 9px; }
  .playlist-discovery-panel { padding: 13px; }
  .playlist-discovery-toolbar { align-items: stretch; flex-wrap: wrap; }
  .playlist-discovery-mode-tabs { width: 100%; }
  .playlist-discovery-mode { flex: 1; }
  .playlist-discovery-order { margin-left: 0; }
  .playlist-discovery-reset { margin-left: auto; }
  .playlist-discovery-results-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .playlist-discovery-results-hint { white-space: normal; }
  .playlist-discovery-tag-group { grid-template-columns: 1fr; gap: 6px; }
  .playlist-discovery-tag-group > strong { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .playlist-discovery-card, .playlist-discovery-cover img, .playlist-discovery-card-play, .playlist-discovery-panel { transition: none !important; animation: none !important; }
  .playlist-discovery-tag-skeleton { animation: none; opacity: .55; }
}

/* Recommendation cards: keep the detail and playback controls as siblings. */
.home-playlist-card { position: relative; }
.home-playlist-card:focus-within { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.035); transform: translateY(-1px); }
.home-playlist-cover-wrap { position: relative; margin-bottom: 10px; }
.home-playlist-cover { margin-bottom: 0; }
.home-playlist-card-play { padding: 0; }