/* =========================================
			   MODAL & BOTTOM SHEET
			   ========================================= */
			.modal {
				display: none;
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.5);
				backdrop-filter: blur(5px);
				z-index: 2000;
				justify-content: center;
				align-items: center;
				opacity: 0;
				transition: opacity 0.3s;
			}

			.modal.show {
				display: flex;
				opacity: 1;
			}

			.modal-content {
				background: #fff;
				width: 100%;
				max-width: 1000px;
				height: 85vh;
				border-radius: 16px;
				box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
				position: relative;
				display: flex;
				overflow: hidden;
				transform: scale(0.96);
				transition: transform 0.3s var(--modal-transition);
			}

			.modal.show .modal-content {
				transform: scale(1);
			}

			.modal-handle {
				display: none;
				width: 40px;
				height: 5px;
				background: #e0e0e0;
				border-radius: 3px;
				margin: 10px auto 0;
				flex-shrink: 0;
			}

			.modal-body-scroller {
				width: 100%;
				height: 100%;
				overflow-y: auto;
				display: flex;
				-webkit-overflow-scrolling: touch;
			}

			.song-info-container {
				display: flex;
				width: 100%;
				height: 100%;
			}

			.modal-left {
				width: 350px;
				background: #f9f9fb;
				border-right: 1px solid #eee;
				padding: 25px;
				flex-shrink: 0;
			}

			.modal-right {
				flex: 1;
				padding: 25px;
				display: flex;
				flex-direction: column;
				background: #fff;
			}

			.lyrics-actions {
				margin: 0;
				display: flex;
				gap: 8px;
				flex-wrap: wrap;
				justify-content: flex-end;
			}

			.lyrics-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
			.lyrics-header h3 { margin: 0 0 3px; }
			.lyrics-availability { color: var(--text-secondary); font-size: .76rem; font-weight: 600; }
			.lyrics-actions .action-btn { width: auto; min-width: 72px; height: 34px; margin: 0; }

			.song-main-info {
				width: 100%;
			}

			.close-modal {
				position: absolute;
				top: 15px;
				right: 15px;
				z-index: 50;
				width: 32px;
				height: 32px;
				background: #f2f2f7;
				color: #333;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.2rem;
				cursor: pointer;
				transition: all 0.2s;
			}

			.close-modal:hover {
				background: #e5e5ea;
				transform: rotate(90deg);
				color: var(--primary);
			}

			.lyrics-scroll-area {
				flex: 1;
				overflow-y: auto;
				font-size: 1.1rem;
				line-height: 2;
				color: #333;
				white-space: pre-wrap;
				font-family: 'Georgia', serif;
			}

			.lyrics-load-placeholder {
				height: 100%;
				min-height: 220px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.lyrics-load-placeholder .action-btn {
				margin: 0;
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
			}

			/* 桌面端两栏布局：弹窗整体不滚动，左右两栏各自滚动。
			   flex 项的 min-height 默认是 auto，也就是拒绝收缩到内容高度以下。
			   因此 .lyrics-scroll-area 虽然写了 overflow-y:auto，却会被撑成完整歌词高度，
			   内层滚动永远不生效，改由外层 .modal-body-scroller 滚动 —— 于是两条滚动条同时出现，
			   而且歌词一加载完高度突变，整个弹窗会跟着抖一下。
			   给这条 flex 链补上 min-height:0，内层才能真正接管滚动。
			   移动端是单栏 + 外层统一滚动（见下面的 max-width:768px），所以这里只作用于桌面端。 */
			@media (min-width: 769px) {
				.modal-body-scroller {
					overflow: hidden;
					min-height: 0;
				}

				.song-info-container {
					min-height: 0;
				}

				.modal-left {
					overflow-y: auto;
					min-height: 0;
				}

				.modal-right {
					min-height: 0;
				}

				.lyrics-scroll-area {
					min-height: 0;
				}
			}

			@media (max-width: 768px) {
				.modal {
					align-items: flex-end;
					padding: 0;
				}

				.modal-content {
					width: 100% !important;
					height: 85vh !important;
					max-height: 85vh;
					border-radius: 20px 20px 0 0 !important;
					flex-direction: column;
					transform: translateY(100%);
				}

				.modal.show .modal-content {
					transform: translateY(0);
				}

				.modal-handle {
					display: block;
				}

				.modal-body-scroller {
					flex-direction: column;
					display: block;
					padding-top: 5px;
				}

				.song-info-container {
					flex-direction: column;
					height: auto;
					display: block;
				}

				.modal-left {
					width: 100%;
					height: auto;
					border-right: none;
					border-bottom: 1px solid #eee;
					padding: 10px 20px 20px;
					overflow: visible;
					display: flex;
					flex-direction: column;
					align-items: center;
					text-align: center;
					background: #fff;
				}

				.song-art-large {
					width: 140px;
					margin-bottom: 15px;
				}

				.info-grid {
					text-align: left;
					width: 100%;
					margin-top: 15px;
				}

				.modal-right {
					width: 100%;
					height: auto;
					padding: 20px;
					overflow: visible;
					display: block;
				}

				.lyrics-scroll-area {
					height: auto !important;
					overflow: visible !important;
					padding-bottom: 50px;
				}

				.close-modal {
					top: 15px;
					right: 15px;
					background: #eee;
					z-index: 100;
				}
			}

			.song-art-large {
				width: 100%;
				height: auto;
				aspect-ratio: 1/1;
				border-radius: 12px;
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
				margin-bottom: 20px;
				object-fit: cover;
				background-color: #f0f0f0;
			}

			.song-main-info h2 {
				font-size: 1.6rem;
				margin-bottom: 5px;
				color: #111;
				line-height: 1.3;
				display: block;
				max-width: 100%;
			}

			.song-title-text {
				white-space: normal;
				overflow: visible;
				text-overflow: clip;
				display: inline;
			}

			.explicit-badge-large {
				background: #000000;
				color: #fff;
				font-size: 0.6em;
				padding: 2px 5px;
				border-radius: 4px;
				display: inline-block;
				vertical-align: middle;
				margin-left: 6px;
				position: relative;
				top: -2px;
			}

			@media (max-width: 768px) {
				.song-main-info h2 {
					justify-content: center;
				}
			}

			.song-main-info .artist-name {
				font-size: 1.1rem;
				color: var(--primary);
				margin-bottom: 20px;
				font-weight: 500;
			}
			.song-aaclc-icon {
				width: 28px;
				height: 28px;
				margin-left: 8px;
				border: 1px solid #d0e1fd;
				border-radius: 50%;
				background: #f0f5ff;
				color: #4a90e2;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				vertical-align: middle;
				transition: all 0.2s;
			}

			.song-aaclc-icon:hover {
				background: #e1ecff;
				transform: translateY(-1px);
			}

			.song-aaclc-icon:disabled {
				opacity: 0.55;
				cursor: wait;
				transform: none;
			}

			.song-aaclc-icon.is-loading {
				color: transparent;
				cursor: default;
				pointer-events: none;
				transform: none;
			}

			.song-aaclc-icon.is-loading:disabled {
				opacity: 1;
				cursor: default;
			}

			.song-aaclc-icon.is-loading:hover {
				transform: none;
			}

			.info-grid {
				display: grid;
				gap: 10px;
				font-size: 0.9rem;
				background: #fff;
				padding: 15px;
				border-radius: 10px;
				border: 1px solid #eee;
			}

			.info-grid .info-row {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				border-bottom: 1px dashed #eee;
				padding-bottom: 5px;
				margin-bottom: 0;
				gap: 15px;
			}

			.info-grid .info-row:last-child {
				border-bottom: none;
			}

			.info-grid .info-label {
				color: #888;
				font-weight: 500;
				white-space: nowrap;
				flex-shrink: 0;
			}

			.info-grid .info-value {
				color: #333;
				text-align: right;
				flex: 1;
				min-width: 0;
				word-break: break-all;
				overflow-wrap: break-word;
				line-height: 1.4;
			}

			.action-btn {
				background: #f0f5ff;
				color: #4a90e2;
				border: 1px solid #d0e1fd;
				border-radius: 6px;
				padding: 5px 12px;
				font-size: 0.8rem;
				line-height: 1;
				white-space: nowrap;
				cursor: pointer;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				gap: 5px;
				margin-left: 5px;
				width: auto;
				height: 30px;
				transition: all 0.2s;
			}

			.action-btn:hover {
				background: #e1ecff;
				transform: translateY(-1px);
			}

			.action-btn i,
			.action-btn span {
				line-height: 1;
			}

			.notification {
				position: fixed;
				top: 20px;
				right: 20px;
				padding: 12px 20px;
				border-radius: 8px;
				background: #fff;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
				transform: translateX(150%);
				transition: transform 0.3s;
				z-index: 3000;
				border-left: 4px solid var(--primary);
				font-size: 0.9rem;
			}

			.notification.show {
				transform: translateX(0);
			}

			.loading-indicator {
				text-align: center;
				padding: 40px;
				width: 100%;
				color: var(--primary);
			}

			.infinite-loading {
				width: 100%;
				padding: 20px;
				text-align: center;
				color: #888;
				font-size: 0.9rem;
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 10px;
			}

			.infinite-loading .mini-spinner {
				width: 20px;
				height: 20px;
				border: 2px solid rgba(250, 45, 72, 0.2);
				border-top-color: var(--primary);
				border-radius: 50%;
				animation: spin 1s linear infinite;
			}

			.infinite-error {
				width: 100%;
				padding: 20px;
				text-align: center;
				color: var(--error);
				font-size: 0.9rem;
				cursor: pointer;
				background: #fff0f0;
				border-radius: 8px;
				margin-top: 10px;
			}

			@keyframes spin {
				to {
					transform: rotate(360deg);
				}
			}

			@keyframes fadeIn {
				from {
					opacity: 0;
				}

				to {
					opacity: 1;
				}
			}

			.audio-badge {
				font-size: 0.8rem;
				padding: 1px 3px;
				border: 1px solid #ccc;
				border-radius: 2px;
				margin-right: 4px;
				display: inline-block;
				vertical-align: middle;
			}

			@media (max-width: 768px) {
				.track-name-text {
					font-size: 1rem;
				}

				.audio-badge {
					font-size: 0.6rem;
				}
			}