.song-page { position: relative; }
.song-toolbar { display: grid; grid-template-columns: repeat(4,minmax(100px,1fr)) minmax(180px,1.3fr) minmax(72px,auto) minmax(80px,auto); gap: 9px; margin-top: 28px; }
.song-toolbar button, .song-toolbar select, .song-search { height: 40px; min-height: 40px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: rgba(255,255,255,.88); font: inherit; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-toolbar select, .song-search { width: 100%; padding: 0 12px; outline-color: var(--leaf); }
.song-recent.active { color: white; background: var(--leaf); }
.song-random { min-width: 80px; padding: 0 12px; cursor: pointer; }
.song-recent { min-width: 72px; padding: 0 10px; cursor: pointer; }
.song-results-panel { max-height: min(64vh, 620px); margin-top: 10px; overflow-y: auto; border: 0; border-radius: 0; background: transparent; scrollbar-width: none; }
.song-results-panel::-webkit-scrollbar { display: none; }
.song-result { margin: 0; padding: 0; color: var(--muted); font-size: 12px; }
.song-list { overflow: visible; border: 0; background: transparent; }
.song-row { width: 100%; min-width: 720px; display: grid; grid-template-columns: 1.35fr 1.45fr .7fr .9fr .55fr 1.1fr; gap: 12px; align-items: center; padding: 11px 14px; border: 0; border-bottom: 1px solid rgba(111,151,119,.13); color: var(--ink); background: transparent; text-align: left; font: inherit; font-size: 12px; }
button.song-row { cursor: pointer; } button.song-row:hover, button.song-row:focus-visible { background: rgba(255,255,255,.72); border-radius: 24px; outline: 0; }
.song-heading { position: sticky; top: 0; z-index: 1; color: #2b2b2b; background: #c9e97f; border-radius: 24px; font-size: 11px; }
.song-name { display:flex; align-items:center; gap:7px; font-weight:800; }.song-new { padding:2px 5px; border-radius:4px; color:#fff; background:#d56f5d; font-style:normal; font-size:9px; letter-spacing:.06em; }.song-price { color:var(--leaf); font-weight:800; }.song-price-paid { color:#c9574c; }.song-remark { color:var(--muted); }
.song-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px; }.song-page-button { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--forest); background: rgba(255,255,255,.8); cursor: pointer; }.song-page-button:disabled { cursor: default; opacity: .45; }.song-page-status { color: var(--muted); font-size: 12px; }
.song-no-result { padding:38px; color:var(--muted); text-align:center; }.song-copy-notice { position:fixed; left:50%; bottom:clamp(78px, 12vh, 128px); z-index:40; padding:10px 16px; border-radius:999px; color:white; background:var(--forest); box-shadow:0 8px 20px rgba(16,44,28,.28); opacity:0; transform:translate(-50%,12px); transition:.18s ease; pointer-events:none; }.song-copy-notice.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1100px) { .song-toolbar { grid-template-columns:repeat(3,minmax(0,1fr)); }.song-search { grid-column:span 2; } }
@media (max-width:650px) { .song-toolbar { grid-template-columns:1fr 1fr; }.song-search { grid-column:span 2; }.song-results-panel { overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }.song-list,.song-row { min-width:720px; }.song-row { grid-template-columns:1.35fr 1.45fr .7fr .9fr .55fr 1.1fr; gap:12px; padding:11px 14px; }.song-heading { display:grid; }.song-name,.song-singer,.song-language,.song-genre,.song-price,.song-remark { grid-column:auto; grid-row:auto; min-width:0; overflow:hidden; overflow-wrap:normal; text-align:left; text-overflow:ellipsis; white-space:nowrap; word-break:normal; }.song-singer,.song-language,.song-genre,.song-price,.song-remark { color:inherit; font-size:12px; }.song-list { max-height:none; }.song-copy-notice { bottom:24px; max-width:calc(100vw - 32px); white-space:normal; text-align:center; } }