/*
 * =========================================================
 * 📦 Spotify Panel - Unified CSS Architecture V3.1 (2025-09)
 * =========================================================
 * 現代化、沉浸式音樂控制體驗
 * 整合 Spotify_v3.css 的所有增強功能
 * 包含響應式設計、PWA 支援、無障礙功能、視覺化效果
 */

/* ===== Global variables migrated from template inline CSS (for spacing/typography) ===== */
/*
   NOTE: Core spacing/typography/touch variables and Spotify color tokens are
   now defined in `Spotify_base.css` so they can be shared between
   private/public views. Here we only keep extra V3-only tokens
   (z-index, shadows, text variants, focus ring) specific to the
   internal control center.
*/

:root {
	/* V3 增強 - Z-index 層級系統 */
	--z-base: 1;
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-fixed: 1030;
	--z-modal-backdrop: 1040;
	--z-modal: 1050;
	--z-popover: 1060;
	--z-tooltip: 1070;
	--z-toast: 1080;

	/* V3 增強 - 標準化動畫時間 */
	--sp-duration-fast: 150ms;
	--sp-duration-normal: 250ms;
	--sp-duration-slow: 350ms;

	/* V3 增強 - 陰影系統 */
	--sp-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
	--sp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--sp-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
	--sp-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.7);

	/* V3 增強 - 邊框系統 */
	--sp-border-subtle: rgba(255, 255, 255, 0.07);
	--sp-border-strong: rgba(255, 255, 255, 0.15);

	/* V3 增強 - 文字色彩 */
	--sp-text-primary: #ffffff;
	--sp-text-secondary: #b3b3b3;
	--sp-text-subdued: #6a6a6a;
	--sp-text-disabled: #535353;

	/* V3 增強 - 背景色彩擴展 */
	--sp-bg-elevated: #242424;
	--sp-bg-elevated-hover: #2a2a2a;
	--sp-bg-base: #000000;
	--sp-bg-highlight: #1f1f1f;
	--sp-bg-press: #000000;
	--sp-bg-tinted: rgba(255, 255, 255, 0.05);

	/* V3 增強 - 圓角系統 */
	--sp-radius-sm: 4px;
	--sp-radius-md: 8px;
	--sp-radius-lg: 12px;
	--sp-radius-xl: 16px;
	--sp-radius-2xl: 24px;
	--sp-radius-full: 9999px;

	/* V3 增強 - Spotify 品牌輔助色 */
	--sp-green-hover: #1ed760;
	--sp-green-dark: #169c46;
	--sp-green-light: #1fdf64;

	/* 全域可視焦點樣式變數 (A11y) */
	--focus-outline-color: #1db954;
	--focus-outline: 2px solid var(--focus-outline-color);
	--focus-ring: 0 0 0 3px rgba(29,185,84,0.45);
}

/* ===== V3 GLOBAL FEATURES ===== */

/* 統一焦點可視指示：避免瀏覽器預設不可預期樣式 */
.spotify-root :where(button,[role="button"],a,input,textarea,select,[tabindex]):focus-visible {
	outline: var(--focus-outline);
	outline-offset: 2px;
	box-shadow: var(--focus-ring);
}

/* 高對比：在深色背景上次要文字不足時提升對比 */
.spotify-root .text-muted, .spotify-root .text-subdued {
	color: #9e9e9e; /* 原 #6a6a6a/次要色可能低於 4.5:1，提升 */
}

/* Skip link 焦點顯示強化 */
.skip-link:focus-visible {
	background: #1db954;
	color:#000;
	box-shadow: 0 0 0 4px #000, var(--focus-ring);
}

/* 全域載入畫面 (V3.2 - 現代化優化) */
.sp-global-loader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(145deg, #0a0a0c 0%, #121218 50%, #0d0d12 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	pointer-events: none;
	animation: fadeOut 0.5s ease-out 1.5s forwards;
}

.sp-global-loader::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(ellipse at 30% 20%, rgba(29, 185, 84, 0.08) 0%, transparent 50%),
	            radial-gradient(ellipse at 70% 80%, rgba(29, 185, 84, 0.05) 0%, transparent 40%);
	pointer-events: none;
}

@keyframes fadeOut {
	to {
		opacity: 0;
		visibility: hidden;
	}
}

.sp-loader-content {
	text-align: center;
	position: relative;
	z-index: 1;
}

.sp-loader-icon {
	position: relative;
	width: 90px;
	height: 90px;
	margin: 0 auto 28px;
}

.sp-loader-icon i {
	font-size: 52px;
	background: linear-gradient(135deg, #1db954 0%, #1ed760 50%, #1db954 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
	z-index: 2;
	animation: pulse 1.5s ease-in-out infinite;
	filter: drop-shadow(0 4px 12px rgba(29, 185, 84, 0.4));
}

.sp-loader-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90px;
	height: 90px;
	border: 2px solid rgba(29, 185, 84, 0.5);
	border-radius: 50%;
	animation: ripple 1.5s ease-out infinite;
	box-shadow: 0 0 20px rgba(29, 185, 84, 0.2);
}

@keyframes pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes ripple {
	0% {
		transform: translate(-50%, -50%) scale(0.8);
		opacity: 1;
	}
	100% {
		transform: translate(-50%, -50%) scale(1.5);
		opacity: 0;
	}
}

.sp-loader-text {
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 20px;
	letter-spacing: 0.02em;
}

.sp-loader-progress {
	width: 220px;
	height: 4px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: var(--sp-radius-full);
	margin: 0 auto;
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.sp-loader-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #1db954, #1ed760, #1db954);
	background-size: 200% 100%;
	border-radius: var(--sp-radius-full);
	animation: loading 1.5s ease-in-out infinite, shimmer 2s linear infinite;
	box-shadow: 0 0 8px rgba(29, 185, 84, 0.5);
}

@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@keyframes loading {
	0% { width: 0; transform: translateX(0); }
	50% { width: 60%; transform: translateX(50%); }
	100% { width: 100%; transform: translateX(0); }
}

/* 沉浸式動態背景 (V3) */
.sp-ambient-bg {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.sp-visualizer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.3;
	filter: blur(60px);
}

.sp-bg-gradient {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(
		ellipse at top,
		rgba(29, 185, 84, 0.15) 0%,
		transparent 50%
	);
	animation: gradientShift 10s ease-in-out infinite alternate;
}

@keyframes gradientShift {
	0% { opacity: 0.3; transform: scale(1); }
	100% { opacity: 0.5; transform: scale(1.1); }
}

.sp-bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to bottom,
		rgba(18, 18, 18, 0.4) 0%,
		rgba(18, 18, 18, 0.9) 60%,
		rgba(18, 18, 18, 1) 100%
	);
}

/* 讓主內容避開固定導航欄高度（含手機安全區域）
 * nav-height + safe-top（頂欄高度）+ 額外 8px 間距 */
.spotify-root .sp-main-container {
	padding-top: calc(var(--nav-height) + var(--safe-top, 0px) + 8px);
}

/* ===== V3.1 List-based content sections (tabs 驅動、列表導向) ===== */

/* ===== 內容區域 - V3.2 全新設計 ===== */
.sp-content-area {
	margin-top: 0;
	padding: 1.25rem var(--container-padding, 1rem);
	max-width: 1400px;
	margin-inline: auto;
}

/* ===== 內容區塊卡片 - 現代玻璃態設計 ===== */
.sp-content-section {
	display: none;
	border-radius: 20px;
	background: linear-gradient(145deg, rgba(25, 25, 30, 0.9), rgba(18, 18, 22, 0.95));
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: 0;
	margin-bottom: 1.5rem;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-content-section.active {
	display: block;
	animation: sectionFadeIn 0.35s ease-out;
}

@keyframes sectionFadeIn {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 區塊標題列 */
.sp-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, rgba(29, 185, 84, 0.08) 0%, rgba(29, 185, 84, 0.02) 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-section-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.sp-section-title i {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(29, 185, 84, 0.2), rgba(29, 185, 84, 0.1));
	border-radius: 10px;
	color: #1db954;
	font-size: 1rem;
}

.sp-section-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.sp-section-actions .sp-refresh-btn,
.sp-section-actions .sp-filter-btn,
.sp-section-actions .sp-sort-btn {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.6);
	padding: 0;
	font-size: 0.875rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sp-section-actions .sp-refresh-btn:hover,
.sp-section-actions .sp-filter-btn:hover,
.sp-section-actions .sp-sort-btn:hover {
	background: rgba(29, 185, 84, 0.15);
	border-color: rgba(29, 185, 84, 0.3);
	color: #1db954;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(29, 185, 84, 0.2);
}

.sp-section-actions .sp-refresh-btn:active,
.sp-section-actions .sp-filter-btn:active,
.sp-section-actions .sp-sort-btn:active {
	transform: translateY(0) scale(0.95);
}

/* 區塊內容區 */
.sp-section-body {
	padding: 1rem 1.25rem 1.25rem;
}

/* ===== 列表容器 - 統一樣式 ===== */
.sp-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sp-list .track-item,
.sp-list .sp-list-item {
	border-radius: 12px;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sp-list .track-item:hover,
.sp-list .sp-list-item:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
	transform: translateX(4px);
}

.sp-list .track-item:active,
.sp-list .sp-list-item:active {
	transform: translateX(4px) scale(0.99);
	background: rgba(29, 185, 84, 0.1);
}

.sp-list .track-item:focus-visible,
.sp-list .sp-list-item:focus-visible {
	outline: 2px solid #1db954;
	outline-offset: 2px;
}

/* 封面圖 */
.sp-list .cover,
.sp-list .sp-list-cover {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sp-list .cover img,
.sp-list .sp-list-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.sp-list .track-item:hover .cover img,
.sp-list .sp-list-item:hover .sp-list-cover img {
	transform: scale(1.05);
}

/* 列表文字內容 */
.sp-list-main {
	flex: 1 1 auto;
	min-width: 0;
}

.sp-list-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}

.sp-list-subtitle {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-list-meta {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.35);
	margin-top: 2px;
}

/* 列表操作按鈕 */
.sp-list-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sp-list .track-item:hover .sp-list-actions,
.sp-list .sp-list-item:hover .sp-list-actions {
	opacity: 1;
}

.sp-list-actions .btn,
.sp-list-actions button {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8125rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.15s ease;
}

.sp-list-actions .btn:hover,
.sp-list-actions button:hover {
	background: #1db954;
	color: #000;
	transform: scale(1.1);
}
}

/* ===== Split 佈局：播放清單左列表 / 右細節 ===== */
.sp-section-body-split {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 992px) {
	.sp-section-body-split {
		display: grid;
		grid-template-columns: 320px 1fr;
		gap: 1.5rem;
		align-items: stretch;
	}
}

.sp-pane {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	overflow: hidden;
}

.sp-pane-list {
	max-height: 400px;
	overflow-y: auto;
}

.sp-pane-detail {
	min-height: 200px;
	padding: 1rem;
}

/* ===== Tabs 導航 - 全新現代設計 ===== */
.sp-tabs-nav {
	position: sticky;
	top: calc(var(--nav-height, 66px) + var(--safe-top, env(safe-area-inset-top, 0px)));
	z-index: 50;
	background: linear-gradient(180deg, rgba(12, 12, 14, 0.98) 0%, rgba(12, 12, 14, 0.95) 100%);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin: 0;
	padding: 0;
}

@media (max-width: 767.98px) {
	.sp-tabs-nav {
		top: calc(var(--nav-height, 66px) + var(--safe-top, env(safe-area-inset-top, 0px)));
	}
}

.sp-tabs-container {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0.5rem;
	padding: 0.875rem var(--container-padding, 1rem);
	scrollbar-width: none;
	-ms-overflow-style: none;
	justify-content: flex-start;
}

.sp-tabs-container::-webkit-scrollbar {
	display: none;
}

/* ===== Tab 按鈕 - 膠囊式設計 ===== */
.sp-tab-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.625rem 1.125rem;
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(255, 255, 255, 0.06);
	cursor: pointer;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
	min-height: 42px;
	position: relative;
}

.sp-tab-btn i {
	font-size: 0.9375rem;
	color: rgba(255, 255, 255, 0.4);
	transition: all 0.2s ease;
}

.sp-tab-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.sp-tab-btn:hover i {
	color: #1db954;
	transform: scale(1.1);
}

.sp-tab-btn:focus-visible {
	outline: 2px solid #1db954;
	outline-offset: 2px;
}

/* Tab 活躍狀態 */
.sp-tab-btn.active {
	background: linear-gradient(135deg, #1db954 0%, #1ed760 100%);
	color: #000;
	font-weight: 600;
	border-color: transparent;
	box-shadow: 0 4px 16px rgba(29, 185, 84, 0.35);
}

.sp-tab-btn.active i {
	color: #000;
}

.sp-tab-btn.active:hover {
	background: linear-gradient(135deg, #1ed760 0%, #23e866 100%);
	box-shadow: 0 6px 20px rgba(29, 185, 84, 0.45);
	transform: translateY(-1px);
}

.sp-tab-btn:active {
	transform: scale(0.97);
}

/* 手機版 Tab */
@media (max-width: 575.98px) {
	.sp-tabs-container {
		gap: 0.375rem;
		padding: 0.625rem 0.75rem;
		-webkit-overflow-scrolling: touch;
	}
	
	.sp-tab-btn {
		padding: 0.5rem 0.875rem;
		font-size: 0.75rem;
		min-height: 38px;
		border-radius: 10px;
	}
	
	.sp-tab-btn i {
		font-size: 0.875rem;
	}
	
	.sp-tab-btn span {
		display: none;
	}
	
	.sp-tab-btn.active span {
		display: inline;
	}
}

/* 平板 Tab */
@media (min-width: 576px) and (max-width: 991.98px) {
	.sp-tabs-container {
		justify-content: center;
	}
}

/* 桌面 Tab */
@media (min-width: 992px) {
	.sp-tabs-container {
		justify-content: center;
		gap: 0.75rem;
	}
	
	.sp-tab-btn {
		padding: 0.7rem 1.375rem;
		font-size: 0.875rem;
		min-height: 44px;
	}
}
.sp-logo-wrapper {
	position: relative;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-logo-icon {
	font-size: 32px;
	color: var(--sp-green);
	position: relative;
	z-index: 2;
}

.sp-logo-pulse {
	position: absolute;
	width: 100%;
	height: 100%;
	background: radial-gradient(circle, var(--sp-green) 0%, transparent 70%);
	opacity: 0.4;
	animation: logoPulse 2s ease-in-out infinite;
}

@keyframes logoPulse {
	0%, 100% { transform: scale(1); opacity: 0.4; }
	50% { transform: scale(1.2); opacity: 0.2; }
}

.sp-brand-text {
	display: none;
}

@media (min-width: 768px) {
	.sp-brand-text {
		display: block;
	}
}

.sp-brand-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sp-text-primary);
	margin: 0;
	line-height: 1.2;
}

.sp-brand-subtitle {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 12px;
	color: var(--sp-text-secondary);
	margin-top: 2px;
}

.sp-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sp-green);
	animation: pulse 2s ease-in-out infinite;
}

.sp-status-dot.offline {
	background: #e22134;
	animation: none;
}

/* ===== 搜尋框 - 現代化重新設計 (V3.2) ===== */
.sp-navbar-search {
	flex: 1;
	max-width: 520px;
	min-width: 200px;
	display: none;
}

@media (min-width: 768px) {
	.sp-navbar-search {
		display: block;
	}
}

.sp-search-box {
	position: relative;
	width: 100%;
}

.sp-search-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.4);
	font-size: 15px;
	pointer-events: none;
	transition: all 0.25s ease;
	z-index: 1;
}

.sp-search-input {
	width: 100%;
	height: 46px;
	padding: 0 46px;
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 500px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 400;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-appearance: none;
	appearance: none;
}

.sp-search-input:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.12);
}

.sp-search-input:focus {
	outline: none;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(29, 185, 84, 0.6);
	box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sp-search-box:focus-within .sp-search-icon {
	color: #1db954;
	transform: translateY(-50%) scale(1.05);
}

.sp-search-input::placeholder {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 400;
}

/* 清除按鈕 */
.sp-search-clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.5);
	transition: all 0.2s ease;
	cursor: pointer;
	border: none;
	background: transparent;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
}

/* 當輸入框有內容時顯示清除按鈕 */
.sp-search-input:not(:placeholder-shown) + .sp-search-clear,
.sp-search-box.has-value .sp-search-clear {
	opacity: 1;
	visibility: visible;
}

.sp-search-clear:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transform: translateY(-50%) scale(1.1);
}

.sp-search-clear:active {
	transform: translateY(-50%) scale(0.95);
	background: rgba(29, 185, 84, 0.2);
}

/* 搜尋框載入狀態 */
.sp-search-box.loading .sp-search-icon::before {
	content: '\f110'; /* fa-spinner */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	animation: spin 1s linear infinite;
}

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

/* 導航動作按鈕 (V3.2) */
.sp-navbar-actions {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	flex-shrink: 0;
}

.sp-nav-btn {
	position: relative;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.7);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid transparent;
	background: rgba(255, 255, 255, 0.05);
}

.sp-nav-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.1);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.sp-nav-btn:active {
	transform: translateY(0) scale(0.95);
}

.sp-nav-btn i {
	font-size: 18px;
}

.sp-notifications-btn .sp-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: #e22134;
	color: white;
	font-size: 11px;
	font-weight: 700;
	border-radius: var(--sp-radius-full);
	display: none;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.sp-notifications-btn[data-count]:not([data-count="0"]) .sp-badge {
	display: flex;
}

/* 使用者選單 (V3.2) */
.sp-user-menu {
	position: relative;
}

.sp-user-btn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 6px 14px 6px 6px;
	border-radius: var(--sp-radius-full);
	background: rgba(255, 255, 255, 0.06);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	cursor: pointer;
	color: inherit;
}

.sp-user-btn:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.sp-user-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
	border: 2px solid rgba(29, 185, 84, 0.3);
}

.sp-avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
}

.sp-user-info {
	text-align: left;
}

.sp-user-name {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	line-height: 1.2;
}

.sp-user-badge {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1;
}

.sp-dropdown-icon {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
	transition: transform 0.25s ease;
}

.sp-user-btn[aria-expanded="true"] .sp-dropdown-icon {
	transform: rotate(180deg);
}

/* 下拉選單 (V3.2) */
.sp-dropdown-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 240px;
	background: linear-gradient(145deg, rgba(30, 30, 35, 0.98), rgba(20, 20, 24, 0.98));
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	padding: 0.625rem;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px) scale(0.98);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: var(--z-dropdown);
}

.sp-dropdown-menu.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.sp-dropdown-header {
	padding: 0.625rem;
	padding-bottom: 0.875rem;
}

.sp-dropdown-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 0.375rem;
}

.sp-dropdown-badges {
	display: flex;
	gap: 0.375rem;
	flex-wrap: wrap;
}

.sp-badge-pill {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	background: rgba(29, 185, 84, 0.1);
	border: 1px solid rgba(29, 185, 84, 0.2);
	border-radius: var(--sp-radius-full);
	font-size: 11px;
	font-weight: 600;
	color: #1db954;
}

.sp-dropdown-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
	margin: 0.5rem 0;
}

.sp-dropdown-item {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 11px 14px;
	border-radius: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
	text-align: left;
	transition: all 0.15s ease;
	border: none;
	background: none;
	cursor: pointer;
}

.sp-dropdown-item:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	transform: translateX(2px);
}

.sp-dropdown-item:active {
	background: rgba(29, 185, 84, 0.15);
}

.sp-dropdown-item i {
	width: 20px;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.6);
	transition: color 0.15s ease;
}

.sp-dropdown-item:hover i {
	color: #1db954;
}

/* 提示訊息和通知 (V3) */
.sp-alert {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	margin: 1rem;
	border-radius: var(--sp-radius-lg);
	background: var(--sp-bg-elevated);
	border: 1px solid var(--sp-border-subtle);
	animation: slideDown var(--sp-duration-normal);
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sp-alert-warning {
	background: rgba(255, 193, 7, 0.1);
	border-color: rgba(255, 193, 7, 0.3);
}

.sp-alert-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 193, 7, 0.2);
	color: #ffc107;
}

.sp-alert-content {
	flex: 1;
}

.sp-alert-title {
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 4px;
}

.sp-alert-message {
	font-size: 13px;
	color: var(--sp-text-secondary);
}

.sp-alert-action {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	padding: 8px 16px;
	background: var(--sp-bg-elevated-hover);
	border-radius: var(--sp-radius-md);
	font-size: 13px;
	font-weight: 600;
	transition: all var(--sp-duration-fast);
	border: none;
	cursor: pointer;
	color: inherit;
}

.sp-alert-action:hover {
	background: var(--sp-bg-press);
}

.sp-alert-close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--sp-text-subdued);
	transition: all var(--sp-duration-fast);
	border: none;
	background: none;
	cursor: pointer;
}

.sp-alert-close:hover {
	background: var(--sp-bg-press);
	color: var(--sp-text-primary);
}

.sp-notice {
	margin: 1rem;
	padding: 1rem;
	background: var(--sp-bg-elevated);
	border-radius: var(--sp-radius-lg);
	font-size: 14px;
	color: var(--sp-text-secondary);
	animation: slideDown var(--sp-duration-normal);
}

/* ===== 統一內容卡片：最近播放 / 播放清單 / 我的最愛 / 專輯 / 藝人 / Podcast 共用 ===== */
.sp-tab-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 1rem;
}

.sp-tab-card {
	background: var(--sp-bg-elevated);
	border-radius: var(--sp-radius-lg);
	padding: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	box-shadow: var(--sp-shadow-sm);
	transition: transform var(--sp-duration-fast) ease, box-shadow var(--sp-duration-fast) ease, background var(--sp-duration-fast) ease;
	cursor: pointer;
}

.sp-tab-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--sp-shadow-md);
	background: var(--sp-bg-elevated-hover);
}

.sp-tab-card-cover {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--sp-radius-md);
	overflow: hidden;
	background: #181818;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.5rem;
}

.sp-tab-card-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-tab-card-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--sp-text-primary);
}

.sp-tab-card-subtitle {
	font-size: 0.78rem;
	color: var(--sp-text-secondary);
}

.sp-tab-card-meta {
	font-size: 0.75rem;
	color: var(--sp-text-subdued);
}

.sp-tab-card-actions {
	margin-top: 0.35rem;
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
}

/* ===== END V3 GLOBAL FEATURES ===== */

/* 基本 Spotify 色彩與按鈕/進度條樣式統一由 `Spotify_base.css` 管理，
 * private 僅保留額外 V3 特化樣式，避免重複定義。 */
.spotify-root{color:var(--sp-txt)}

/* ====== PWA AND TOUCH ENHANCEMENTS ====== */

/* PWA safe areas and viewport optimizations */
.spotify-root {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	padding-bottom: env(safe-area-inset-bottom);
}

.sp-head {
	padding-top: calc(1.4rem + env(safe-area-inset-top, 0));
}

/* Enhanced touch targets - minimum 44px for accessibility */
.btn-panel-action {
	min-height: 44px;
	min-width: 44px;
	touch-action: manipulation;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	font-weight: 500;
	transition: all 0.2s ease;
}

/* 🎵 Enhanced queue management */
.track-item.dragging {
	opacity: 0.5;
	transform: rotate(5deg);
	z-index: 1000;
}

.track-item {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: grab;
}

.track-item:active {
	cursor: grabbing;
}

.track-item:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(29, 185, 84, 0.15);
}

/* 🔍 Enhanced search experience */
.search-loading {
	background: rgba(24, 24, 24, 0.95);
	border-radius: 8px;
	backdrop-filter: blur(4px);
}

/* Search Overlay (V4 - 現代化重新設計) */
#sp-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(18, 18, 18, 0.98) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: 1015;
    padding-top: calc(var(--nav-height, 66px) + var(--safe-top, env(safe-area-inset-top, 0px)));
    opacity: 0;
    visibility: hidden;
    transform: scale(0.98);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.3s,
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#sp-search-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* 搜尋面板容器 */
.sp-search-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
    animation: searchPanelSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes searchPanelSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sp-search-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0 1.25rem;
    flex-shrink: 0;
    position: relative;
}

.sp-search-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -1rem;
    right: -1rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sp-border-subtle), transparent);
}

.sp-search-back {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--sp-text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.sp-search-back:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(-2px);
}

.sp-search-back:active {
    transform: scale(0.95);
}

.sp-search-input-wrapper {
    position: relative;
    flex: 1;
    max-width: 600px;
}

.sp-search-input-wrapper .sp-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--sp-text-subdued, #6a6a6a);
    font-size: 1.125rem;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.sp-search-input-wrapper:focus-within .sp-search-icon {
    color: var(--sp-green, #1db954);
    transform: translateY(-50%) scale(1.1);
}

.sp-search-main-input {
    width: 100%;
    height: 56px;
    padding: 0 56px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.06);
    border-radius: 28px;
    color: var(--sp-text-primary, #fff);
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-appearance: none;
    appearance: none;
}

.sp-search-main-input:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}

.sp-search-main-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--sp-green, #1db954);
    box-shadow: 0 0 0 4px rgba(29, 185, 84, 0.12),
                0 8px 24px -4px rgba(0, 0, 0, 0.4);
}

.sp-search-main-input::placeholder {
    color: var(--sp-text-subdued, #6a6a6a);
    font-weight: 400;
}

/* 搜尋輸入框打字動畫提示 */
.sp-search-main-input:placeholder-shown::placeholder {
    animation: searchPlaceholderPulse 3s ease-in-out infinite;
}

@keyframes searchPlaceholderPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* 清除按鈕 - Overlay 版本 */
.sp-search-clear-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--sp-text-subdued, #6a6a6a);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.sp-search-main-input:not(:placeholder-shown) ~ .sp-search-clear-btn {
    opacity: 1;
    visibility: visible;
}

.sp-search-clear-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--sp-text-primary, #fff);
    transform: translateY(-50%) scale(1.1);
}

.sp-search-clear-btn:active {
    transform: translateY(-50%) scale(0.9);
    background: rgba(29, 185, 84, 0.15);
}

.sp-search-filters {
    display: flex;
    gap: 0.5rem;
    padding: 1.25rem 0 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
}

.sp-search-filters::-webkit-scrollbar {
    display: none;
}

.sp-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    min-height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 500px;
    color: var(--sp-text-secondary, #b3b3b3);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sp-filter-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.sp-filter-chip i {
    font-size: 0.8125rem;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.2s;
}

.sp-filter-chip:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--sp-text-primary, #fff);
    transform: translateY(-2px);
}

.sp-filter-chip:hover::before {
    opacity: 1;
}

.sp-filter-chip:hover i {
    opacity: 1;
    transform: scale(1.1);
}

.sp-filter-chip:active {
    transform: scale(0.96) translateY(0);
}

.sp-filter-chip.active {
    background: linear-gradient(135deg, var(--sp-green, #1db954), #1aa34a);
    color: #000;
    font-weight: 600;
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(29, 185, 84, 0.35),
                0 2px 4px rgba(0, 0, 0, 0.2);
}

.sp-filter-chip.active i {
    opacity: 1;
}

.sp-filter-chip.active:hover {
    background: linear-gradient(135deg, var(--sp-green-hover, #1ed760), #1db954);
    transform: translateY(-2px) scale(1.02);
}

.sp-search-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem 0 3rem;
    scroll-behavior: smooth;
}

/* 自訂搜尋結果捲動條 */
.sp-search-body::-webkit-scrollbar {
    width: 8px;
}

.sp-search-body::-webkit-scrollbar-track {
    background: transparent;
}

.sp-search-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.sp-search-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

#sp-search-results {
    width: 100%;
    max-width: 100%;
}

.sp-search-section {
    margin-bottom: 2.5rem;
    animation: searchSectionFadeIn 0.4s ease-out;
}

@keyframes searchSectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sp-search-section .sp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0;
}

.sp-search-section .sp-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sp-text-primary);
    margin: 0;
}

/* 搜尋區段 Header */
.sp-search-section .sp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

.sp-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 500px;
    color: var(--sp-text-subdued);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-clear-btn i {
    font-size: 0.75rem;
}

.sp-clear-btn:hover {
    background: rgba(229, 33, 52, 0.15);
    border-color: rgba(229, 33, 52, 0.3);
    color: #e52134;
}

.sp-clear-btn:active {
    transform: scale(0.96);
}

/* Recent Searches List */
.sp-recent-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Suggestions Grid */
.sp-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.25rem;
}

/* Enhanced Search Item Card */
.search-item {
    background: var(--sp-bg-elevated);
    border: 1px solid var(--sp-border-subtle);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-item:hover {
    background: var(--sp-bg-elevated-hover);
    border-color: var(--sp-border-strong);
    transform: translateY(-2px);
    box-shadow: var(--sp-shadow-md);
}

.search-item img.cover {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #181818;
}

/* ===== 搜尋結果樣式 ===== */
.sp-search-loading,
.sp-search-error,
.sp-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--sp-text-secondary);
    animation: searchStateFadeIn 0.4s ease-out;
}

@keyframes searchStateFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.sp-search-loading i,
.sp-search-error i,
.sp-search-empty i {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: var(--sp-text-subdued);
    opacity: 0.5;
}

.sp-search-error i {
    color: #e22134;
    opacity: 0.8;
}

.sp-search-loading p,
.sp-search-error p,
.sp-search-empty p {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--sp-text-primary);
}

.sp-search-empty span {
    font-size: 0.9375rem;
    color: var(--sp-text-subdued);
    max-width: 280px;
}

/* 載入 Spinner */
.sp-loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--sp-green);
    border-radius: 50%;
    animation: searchSpinnerRotate 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    margin-bottom: 1.5rem;
}

@keyframes searchSpinnerRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 搜尋載入動畫脈衝效果 */
.sp-search-loading::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(29, 185, 84, 0.15) 0%, transparent 70%);
    animation: searchLoadingPulse 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes searchLoadingPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

/* 搜尋區塊標題 */
.sp-search-section-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--sp-text-primary);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--sp-border-subtle);
    position: relative;
}

.sp-search-section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--sp-green);
    border-radius: 1px;
}

.sp-search-section-title i {
    color: var(--sp-green);
    font-size: 1.1rem;
}

/* 搜尋列表 - 曲目 */
.sp-search-list {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sp-search-track-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.sp-search-track-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.06), transparent);
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.2s;
}

.sp-search-track-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sp-search-track-item:hover::before {
    opacity: 1;
}

.sp-search-track-img {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #282828, #181818);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}

.sp-search-track-item:hover .sp-search-track-img {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.sp-search-track-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.sp-search-track-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
    transition: color 0.2s;
}

.sp-search-track-item:hover .sp-search-track-name {
    color: #fff;
}

.sp-search-track-artist {
    font-size: 0.875rem;
    color: var(--sp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.sp-search-track-item:hover .sp-search-track-artist {
    color: var(--sp-text-primary);
}

.sp-search-track-duration {
    font-size: 0.8125rem;
    color: var(--sp-text-subdued);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}

.sp-search-play-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sp-green);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85) translateX(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
    position: relative;
    z-index: 1;
}

.sp-search-play-btn i {
    font-size: 0.875rem;
    margin-left: 2px;
}

.sp-search-track-item:hover .sp-search-play-btn {
    opacity: 1;
    transform: scale(1) translateX(0);
}

.sp-search-play-btn:hover {
    background: var(--sp-green-hover);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(29, 185, 84, 0.4);
}

.sp-search-play-btn:active {
    transform: scale(0.95);
}

/* 搜尋格子 - 藝人/專輯/播放清單 */
.sp-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.25rem;
}

.sp-search-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sp-search-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.sp-search-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.sp-search-card:hover::before {
    opacity: 1;
}

.sp-search-card-img-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    margin-bottom: 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #282828, #181818);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.sp-search-card-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-search-card:hover .sp-search-card-img-wrapper img {
    transform: scale(1.08);
}

.sp-search-artist-card .sp-search-card-img-wrapper,
.sp-artist-img {
    border-radius: 50%;
}

.sp-search-artist-card:hover .sp-search-card-img-wrapper {
    box-shadow: 0 8px 24px rgba(29, 185, 84, 0.2);
}

.sp-search-card-play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--sp-green);
    color: #000;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

.sp-search-card-play i {
    font-size: 1.125rem;
    margin-left: 2px;
}

.sp-search-card:hover .sp-search-card-play {
    opacity: 1;
    transform: translateY(0);
}

.sp-search-card-play:hover {
    background: var(--sp-green-hover);
    transform: scale(1.08);
}

.sp-search-card-play:active {
    transform: scale(0.95);
}

.sp-search-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sp-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.375rem;
    transition: color 0.2s;
}

.sp-search-card:hover .sp-search-card-name {
    color: #fff;
}

.sp-search-card-meta {
    font-size: 0.875rem;
    color: var(--sp-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* 最近搜尋項目 */
.sp-recent-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.875rem 1.125rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    color: var(--sp-text-primary);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-recent-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateX(4px);
}

.sp-recent-item:active {
    transform: scale(0.98);
}

.sp-recent-item i:first-child {
    color: var(--sp-text-subdued);
    font-size: 1rem;
    transition: color 0.2s;
}

.sp-recent-item:hover i:first-child {
    color: var(--sp-green);
}

.sp-recent-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.sp-recent-item i:last-child {
    color: var(--sp-text-subdued);
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s;
}

.sp-recent-item:hover i:last-child {
    opacity: 1;
    transform: translateX(0);
}

/* 搜尋結果響應式 */
@media (max-width: 768px) {
    #sp-search-overlay {
        padding-top: calc(var(--nav-height, 56px) + var(--safe-top, env(safe-area-inset-top, 0px)));
    }

    .sp-search-panel {
        padding: 0 0.75rem;
    }

    .sp-search-header {
        padding: 1rem 0;
        gap: 0.75rem;
    }

    .sp-search-back {
        width: 40px;
        height: 40px;
    }

    .sp-search-main-input {
        height: 48px;
        font-size: 1rem;
        padding: 0 48px;
    }

    .sp-search-filters {
        padding: 1rem 0 0.75rem;
        gap: 0.375rem;
    }

    .sp-filter-chip {
        padding: 0.5rem 1rem;
        min-height: 36px;
        font-size: 0.8125rem;
    }

    .sp-search-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 0.875rem;
    }
    
    .sp-search-card {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .sp-search-card-img-wrapper {
        margin-bottom: 0.75rem;
    }

    .sp-search-card-name {
        font-size: 0.9375rem;
    }

    .sp-search-card-meta {
        font-size: 0.8125rem;
    }

    .sp-search-card-play {
        width: 42px;
        height: 42px;
        right: 8px;
        bottom: 8px;
    }
    
    .sp-search-track-img {
        width: 44px;
        height: 44px;
    }

    .sp-search-track-item {
        padding: 0.5rem 0.625rem;
        gap: 0.75rem;
    }
    
    .sp-search-track-name {
        font-size: 0.9375rem;
    }

    .sp-search-track-artist {
        font-size: 0.8125rem;
    }
    
    .sp-search-play-btn {
        width: 36px;
        height: 36px;
        opacity: 1;
        transform: scale(1) translateX(0);
    }

    .sp-search-section-title {
        font-size: 1.125rem;
    }

    .sp-recent-item {
        padding: 0.75rem 1rem;
    }
}

/* 超小螢幕優化 */
@media (max-width: 480px) {
    .sp-search-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.625rem;
    }

    .sp-search-card {
        padding: 0.625rem;
    }

    .sp-filter-chip span {
        display: none;
    }

    .sp-filter-chip i {
        font-size: 1rem;
    }

    .sp-filter-chip:first-child span {
        display: inline;
    }
}

/* Shortcut help modal stacking and layout */
.shortcut-modal.modal { z-index: 1085; }
.shortcut-modal .modal-dialog { max-width: 560px; }
.shortcut-modal-backdrop { z-index: 1080 !important; }

/* On extremely short viewports, keep dialog scrollable and pinned with safe-area */
@media (max-height: 500px) {
	.shortcut-modal .modal-dialog { margin: .5rem auto; }
	.shortcut-modal .modal-content { max-height: calc(100vh - 1rem); overflow: auto; }
}

.sp-nav-btn {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.track-item, .playlist-item, .device-item {
	min-height: 44px;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(29, 185, 84, 0.1);
}

/* Improved focus states for accessibility and PWA */
.sp-nav-btn:focus-visible {
	outline: 2px solid var(--sp-green);
	outline-offset: 2px;
}

.btn-panel-action:focus-visible {
	outline: 2px solid var(--sp-green);
	outline-offset: 2px;
}

.track-item:focus-visible, .playlist-item:focus-visible {
	outline: 2px solid var(--sp-green);
	outline-offset: 1px;
}

/* Enhanced scrolling for mobile devices */
.sp-panel-body {
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.tabs-scroll {
	scroll-snap-type: x proximity;
}

.sp-nav-btn {
	scroll-snap-align: start;
}

/* Removed legacy landscape orientation tweaks (A2 residual) */

/* NOTE: high DPI, dark mode, reduced-motion and high-contrast
 * variants are now centralized in `Spotify_base.css` so they
 * apply consistently across private and public views. */

/* 解除桌面版寬度限制，允許面板隨螢幕寬度擴展 */
@media (min-width:1200px){
	.main-content .container,
	.spotify-shell.container,
	.sp-head.container{max-width:100%}
}
/* Removed duplicated original panel styling block (A4) */

/* ====== CONSOLIDATED RESPONSIVE DESIGN ====== */

/* Mobile Portrait - Very Small Screens (< 375px) */
@media (max-width: 374px) {
	.spotify-root {
		font-size: 14px;
		--sp-avatar-size: 48px;
		--sp-panel-gap: 1rem;
		--sp-panel-padding: 0.7rem 0.8rem;
		--sp-border-radius: 12px;
	}
	
	.sp-mobile-tabs .sp-nav-btn .tab-label {
		display: none;
	}
	.sp-mobile-tabs .sp-nav-btn {
		min-width: 36px;
		padding: 0.4rem;
		gap: 0;
	}
	.sp-mobile-tabs .tabs-scroll {
		gap: 0.25rem;
	}
}

/* Mobile Portrait - Standard (375px - 479px) */
@media (min-width: 375px) and (max-width: 479px) {
	.spotify-root {
		font-size: 14px;
		--sp-avatar-size: 52px;
		--sp-panel-gap: 1rem;
		--sp-border-radius: 12px;
	}
	
	.sp-mobile-tabs .sp-nav-btn .tab-label {
		font-size: 0.7rem;
	}
}

/* Mobile Landscape / Large Mobile (480px - 767px) */
@media (min-width: 480px) and (max-width: 767px) {
	.spotify-root {
		font-size: 14px;
		--sp-avatar-size: 56px;
		--sp-panel-gap: 1.1rem;
		--sp-border-radius: 14px;
	}
	
	.sp-panel-body {
		max-height: 280px;
	}
	
	img.cover {
		width: 40px;
		height: 40px;
	}
}

/* Tablet Portrait (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
	.spotify-root {
		font-size: 15px;
		--sp-avatar-size: 64px;
		--sp-panel-gap: 1.2rem;
		--sp-border-radius: 16px;
	}
	
	.sp-mobile-tabs {
		display: flex !important; /* Show tabs on tablets for better navigation */
		padding: 0.6rem 0.5rem;
	}
	.sp-mobile-tabs .sp-nav-btn {
		padding: 0.6rem 1rem;
		font-size: 0.85rem;
	}
	
	.sp-layout {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.sp-panel-body {
		max-height: 320px;
	}
	
	img.cover {
		width: 44px;
		height: 44px;
	}
}

/* Tablet Landscape / Small Desktop (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
	.spotify-root {
		font-size: 15px;
		--sp-avatar-size: 68px;
		--sp-panel-gap: 1.3rem;
		--sp-border-radius: 16px;
	}
	
	.sp-layout {
		grid-template-columns: repeat(3, 1fr);
	}
	
	.sp-panel-body {
		max-height: 360px;
	}
}

/* Large Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
	.spotify-root {
		font-size: 16px;
		--sp-panel-gap: 1.4rem;
		--sp-border-radius: 18px;
	}
	
	.sp-layout {
		grid-template-columns: repeat(4, 1fr);
		max-width: 1400px;
		margin: 0 auto;
	}
	
	.sp-panel-body {
		max-height: 400px;
	}
	
	.sp-mobile-tabs {
		display: none !important;
	}
}

/* Make long lists (e.g., Tracks) span full width on large screens for readability */
@media (min-width: 1200px){
  #tab-tracks { grid-column: 1 / -1; }
}

/* Extra Large Desktop (1400px+) */
@media (min-width: 1400px) {
	.spotify-root {
		font-size: 16px;
		--sp-panel-gap: 1.5rem;
		--sp-border-radius: 20px;
	}
	
	.sp-layout {
		grid-template-columns: repeat(5, 1fr);
		max-width: 1600px;
		margin: 0 auto;
	}
	
	.sp-panel-body {
		max-height: 420px;
	}
	
	.sp-mobile-tabs {
		display: none !important;
	}
}

/* Removed device-specific / low-power optimization variants (A5) */

/* ====== ENHANCED ACCESSIBILITY ====== */

/* Keyboard users: 額外放大焦點圈（在 base 基礎上增強） */
.using-keyboard .sp-nav-btn:focus,
.using-keyboard .btn-panel-action:focus,
.using-keyboard .track-item:focus,
.using-keyboard .playlist-item:focus {
	outline: 3px solid var(--sp-green) !important;
	outline-offset: 2px !important;
	border-radius: 8px;
}

/* ====== UTILITY CLASSES FOR RESPONSIVE DESIGN ====== */

/* Display utilities for different breakpoints */
.d-mobile-none { display: none !important; }
.d-tablet-none { display: none !important; }
.d-desktop-none { display: none !important; }

@media (max-width: 374px) {
	.d-xs-none { display: none !important; }
	.d-xs-block { display: block !important; }
	.d-xs-flex { display: flex !important; }
}

@media (min-width: 375px) and (max-width: 767px) {
	.d-sm-none { display: none !important; }
	.d-sm-block { display: block !important; }
	.d-sm-flex { display: flex !important; }
}

/* Removed skeleton loading styles (A6) - panels now show minimal placeholders via JS if needed */

/* 舊版 layout_fix.css 佈局與 hotfix 已由後方
 * "FINAL LAYOUT OVERRIDES" / Desktop Layout Refactor
 * 區塊統一管理，這裡移除重複設定以免相互打架。 */

/* =========================================================
 * V3 PANEL LAYOUT FIX (2025-10-03)
 * 針對新版模板 `Spotify.html` 中新增的結構類別 (sp-v3 / sp-hero-player / sp-tabs-nav / sp-content-area / sp-sidebar ...)
 * 解決：畫面內容集中左上、大片空白 / 缺少寬度與間距 / 版面不自適應。
 * 原因：舊版整併 CSS 未包含這批新類別，瀏覽器以預設 block 流式排列。
 * 策略：補齊核心版面容器、Grid / Flex 排版、可伸縮寬度與響應式斷點；保持既有 id 與 JS 不變。
 * ========================================================= */

/* Root：啟用新版面模式 */
.spotify-root.sp-v3 {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	color: var(--sp-text-primary, #fff);
	background: var(--sp-bg-base, #000);
}

/* 主容器 */
.sp-main-container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 1.2vw + .5rem, 2rem);
	padding: clamp(.75rem, 1vw + .5rem, 1.5rem) var(--container-padding, 1.25rem) 2.5rem;
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	z-index: 1;
}

/* Hero 區域 - 現代化設計 */
.sp-hero-player {
	background: linear-gradient(160deg, #1a1a1f 0%, #0d0d10 50%, #0a0a0c 100%);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 24px;
	padding: clamp(1.25rem, 1.5vw + 1rem, 2.5rem);
	box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03);
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.sp-hero-player:before {
	content:"";
	position:absolute;inset:0;
	background: radial-gradient(ellipse at 15% 10%, rgba(29,185,84,.2) 0%, transparent 50%),
	            radial-gradient(ellipse at 85% 90%, rgba(29,185,84,.08) 0%, transparent 40%);
	pointer-events:none;
	opacity: 0.8;
	animation: heroGlow 8s ease-in-out infinite alternate;
}

@keyframes heroGlow {
	0% { opacity: 0.6; }
	100% { opacity: 1; }
}

.sp-hero-player .sp-hero-container {
	display: grid;
	grid-template-columns: minmax(200px,280px) 1fr;
	align-items: stretch;
	gap: clamp(1.25rem, 1.5vw + .5rem, 2.25rem);
}

@media (max-width: 991.98px) {
	.sp-hero-player .sp-hero-container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.sp-hero-artwork {
		width: 100%;
		align-items: center;
	}

	.sp-artwork-main {
		max-width: min(320px, 78vw);
	}

	.sp-hero-controls {
		width: 100%;
		gap: 0.85rem;
	}
}

/* 專輯封面側 - 增強視覺效果 */
.sp-hero-artwork {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.sp-artwork-main {
	position: relative;
	width: 100%;
	max-width: 280px;
	aspect-ratio: 1/1;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(135deg, #1a1a1f 0%, #0d0d10 100%);
	box-shadow: 0 20px 50px -12px rgba(0,0,0,.8), 0 8px 20px -8px rgba(0,0,0,.6);
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.sp-artwork-main:hover {
	transform: scale(1.02) translateY(-4px);
	box-shadow: 0 28px 60px -12px rgba(0,0,0,.9), 0 12px 28px -8px rgba(0,0,0,.7);
}

.sp-artwork-main img.sp-cover-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.sp-artwork-main:hover img.sp-cover-img {
	transform: scale(1.05);
}

.sp-cover-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.3);
	font-size: 3rem;
	background: linear-gradient(135deg, #1e1e24 0%, #0f0f12 100%);
}

.sp-artwork-main img.sp-cover-img[src^="http"]:not([src=""]) ~ .sp-cover-placeholder { display: none; }

.sp-artwork-glow {
	position: absolute;
	inset: -30%;
	background: radial-gradient(circle at 50% 50%, rgba(29,185,84,.4), transparent 60%);
	filter: blur(50px);
	opacity: .5;
	z-index: -1;
	animation: glowPulse 4s ease-in-out infinite alternate;
}

@keyframes glowPulse {
	0% { opacity: 0.3; transform: scale(0.95); }
	100% { opacity: 0.6; transform: scale(1.05); }
}

.sp-audio-visualizer {
	display: flex;
	gap: 5px;
	height: 48px;
	align-items: flex-end;
	padding: .5rem 0;
}

.sp-audio-visualizer .sp-visualizer-bar {
	flex: 1;
	background: linear-gradient(to top, #1db954, #1ed760, #42ffa0);
	border-radius: 6px;
	opacity: .35;
	animation: spBar 1.2s ease-in-out infinite;
	animation-play-state: paused;
}

.sp-audio-visualizer.playing .sp-visualizer-bar {
	animation-play-state: running;
	opacity: .7;
}

.sp-audio-visualizer .sp-visualizer-bar:nth-child(1) { animation-delay: 0s; }
.sp-audio-visualizer .sp-visualizer-bar:nth-child(2) { animation-delay: -0.2s; }
.sp-audio-visualizer .sp-visualizer-bar:nth-child(3) { animation-delay: -0.4s; }
.sp-audio-visualizer .sp-visualizer-bar:nth-child(4) { animation-delay: -0.6s; }
.sp-audio-visualizer .sp-visualizer-bar:nth-child(5) { animation-delay: -0.8s; }

@keyframes spBar {
	0%, 100% { transform: scaleY(0.2); }
	50% { transform: scaleY(1); }
}

/* 右側資訊控制 */
.sp-hero-controls {display:flex;flex-direction:column;gap:1rem;min-width:0;}
.sp-now-playing {display:flex;flex-direction:column;gap:.75rem;}
.sp-track-info {display:flex;flex-direction:column;gap:.4rem;min-width:0;}
.sp-track-title {font-size:clamp(1.15rem,1.8vw + .6rem,1.9rem);font-weight:700;margin:0;line-height:1.25;letter-spacing:.5px;}
.sp-track-artists, .sp-track-meta {display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.85rem;color:var(--sp-text-secondary);}
.sp-track-actions {display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem;}
.sp-action-btn {width:42px;height:42px;border-radius:14px;background:var(--sp-bg-elevated,#242424);display:inline-flex;align-items:center;justify-content:center;color:var(--sp-text-secondary);border:1px solid var(--sp-border-subtle);cursor:pointer;transition:.2s;}
.sp-action-btn:hover {background:var(--sp-bg-elevated-hover,#2a2a2a);color:#fff;}

/* 播放控制列 - 現代化設計 */
.sp-playback-controls {
	display: flex;
	justify-content: center;
	padding: .5rem 0;
}

.sp-control-buttons {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sp-control-btn {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	transition: all .2s ease;
}

.sp-control-btn:hover {
	background: rgba(255,255,255,.15);
	border-color: rgba(255,255,255,.2);
	transform: scale(1.05);
}

.sp-control-btn:active {
	transform: scale(0.95);
}

.sp-control-btn.active {
	color: var(--sp-green);
	border-color: rgba(29,185,84,.3);
	background: rgba(29,185,84,.15);
}

.sp-play-btn {
	width: 64px;
	height: 64px;
	background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
	color: #000;
	font-size: 1.4rem;
	border: none;
	box-shadow: 0 4px 20px rgba(29,185,84,.4);
}

.sp-play-btn:hover {
	background: linear-gradient(135deg, #1ed760 0%, #22e065 100%);
	box-shadow: 0 6px 28px rgba(29,185,84,.5);
	transform: scale(1.08);
}

.sp-play-btn:active {
	transform: scale(0.98);
	box-shadow: 0 2px 12px rgba(29,185,84,.3);
} 

/* 進度條 - 精緻設計 */
.sp-progress-section {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-top: .5rem;
	padding: 0 .25rem;
}

.sp-progress-bar-container {
	flex: 1;
	position: relative;
	height: 6px;
	border-radius: 3px;
	background: rgba(255,255,255,.12);
	overflow: visible;
	cursor: pointer;
	transition: height .15s ease;
}

.sp-progress-bar-container:hover {
	height: 8px;
}

.sp-progress-track {
	position: absolute;
	inset: 0;
	border-radius: 3px;
	overflow: hidden;
}

.sp-progress-fill {
	position: absolute;
	inset: 0;
	width: 0;
	background: linear-gradient(90deg, #1DB954, #1ed760);
	border-radius: 3px;
	transition: width .1s linear;
}

.sp-progress-bar-container:hover .sp-progress-fill {
	background: linear-gradient(90deg, #1ed760, #42ffa0);
}

.sp-progress-buffer {
	position: absolute;
	inset: 0;
	width: 0;
	background: rgba(255,255,255,.15);
	border-radius: 3px;
}

.sp-progress-slider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.sp-time-label {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .3px;
	color: rgba(255,255,255,.5);
	min-width: 40px;
}

.sp-time-label:first-child { text-align: right; }
.sp-time-label:last-child { text-align: left; }

/* 底部控制列 - 精緻設計 */
.sp-bottom-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: .75rem;
	padding-top: .5rem;
	border-top: 1px solid rgba(255,255,255,.05);
}

.sp-bottom-btn, .sp-device-btn, .sp-volume-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem 1rem;
	border-radius: 20px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	color: rgba(255,255,255,.6);
	cursor: pointer;
	transition: all .2s ease;
	font-size: .8rem;
	font-weight: 500;
}

.sp-bottom-btn:hover, .sp-device-btn:hover, .sp-volume-btn:hover {
	background: rgba(255,255,255,.12);
	border-color: rgba(255,255,255,.15);
	color: #fff;
	transform: translateY(-1px);
}

.sp-volume-control {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* 音量按鈕 - 支援靜音狀態 */
.sp-volume-btn {
	width: 36px;
	height: 36px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	color: rgba(255,255,255,.6);
	cursor: pointer;
	transition: all .2s ease;
	font-size: 0.9rem;
}

.sp-volume-btn:hover {
	background: rgba(255,255,255,.12);
	color: #fff;
	transform: scale(1.05);
}

.sp-volume-btn.muted {
	color: #e22134;
	border-color: rgba(226, 33, 52, 0.3);
}

.sp-volume-btn.muted:hover {
	background: rgba(226, 33, 52, 0.15);
}

/* 音量滑桿容器 */
.sp-volume-slider-wrapper {
	position: relative;
	width: 100px;
	height: 6px;
	background: rgba(255,255,255,.12);
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
}

/* 音量填充進度條 */
.sp-volume-fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0%; /* 初始為 0，等待從 Spotify 裝置同步真實音量 */
	background: linear-gradient(90deg, #1db954, #1ed760);
	border-radius: 3px;
	pointer-events: none;
	transition: width 0.1s ease;
}

/* 音量滑桿（透明覆蓋層） */
.sp-volume-slider {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
}

/* 讓滑桿可點擊區域更大 */
.sp-volume-slider-wrapper::before {
	content: '';
	position: absolute;
	inset: -8px;
	cursor: pointer;
}

/* 音量數值顯示 */
.sp-volume-value {
	min-width: 38px;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255,255,255,.5);
	text-align: right;
	font-variant-numeric: tabular-nums;
	transition: color 0.2s ease;
}

.sp-volume-control:hover .sp-volume-value {
	color: rgba(255,255,255,.8);
}

/* 手機版音量控制響應式 */
@media (max-width: 767.98px) {
	.sp-volume-control {
		gap: 0.5rem;
	}
	
	.sp-volume-slider-wrapper {
		width: 80px;
		height: 8px;
		border-radius: 4px;
	}
	
	.sp-volume-fill {
		border-radius: 4px;
	}
	
	.sp-volume-value {
		display: none;
	}
	
	.sp-volume-btn {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}
}

/* 刪除舊的滑桿容器樣式 */

/* ===== 內容區統一卡片網格 ===== */
.sp-grid {--card-min:160px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr));gap:1rem;}
.sp-grid-playlists { --card-min: 200px; }
.sp-grid-albums { --card-min: 180px; }
.sp-grid-artists { --card-min: 160px; }
.sp-grid-podcasts { --card-min: 240px; }
/* Tracks/Recent 使用列表風格（專用卡片樣式見下方） */
.sp-grid-tracks { display: flex; flex-direction: column; gap: .6rem; }
.sp-tracklist {display:flex;flex-direction:column;gap:.4rem;}

/* ===== 專用卡片樣式：依內容類型分流，但細節一致 ===== */

/* 最近播放：精簡水平曲目卡片 - 現代化設計 */
.sp-grid-tracks .track-item,
.sp-content-section[data-section="recent"] .track-item {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 14px;
	padding: .75rem 1rem;
	gap: 1rem;
	display: flex;
	align-items: center;
	transition: all .2s ease;
}

.sp-grid-tracks .track-item:hover,
.sp-content-section[data-section="recent"] .track-item:hover {
	background: rgba(255,255,255,.08);
	border-color: rgba(29,185,84,.2);
	transform: translateX(4px);
	box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.sp-grid-tracks .track-item img.cover,
.sp-content-section[data-section="recent"] .track-item img.cover {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	object-fit: cover;
	flex: 0 0 auto;
	background: linear-gradient(135deg, #1a1a1f 0%, #0d0d10 100%);
	box-shadow: 0 4px 12px rgba(0,0,0,.3);
	transition: transform .2s ease;
}

.sp-grid-tracks .track-item:hover img.cover,
.sp-content-section[data-section="recent"] .track-item:hover img.cover {
	transform: scale(1.05);
}

/* 播放清單：中型卡片 - 現代化設計 */
.sp-grid-playlists .playlist-item {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 16px;
	padding: 1rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1rem;
	transition: all .25s ease;
	cursor: pointer;
}

.sp-grid-playlists .playlist-item:hover {
	background: rgba(255,255,255,.08);
	border-color: rgba(29,185,84,.2);
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0,0,0,.4);
}

.sp-grid-playlists .playlist-item .cover,
.sp-grid-playlists .playlist-item .cover.placeholder {
	width: 72px;
	height: 72px;
	border-radius: 14px;
	object-fit: cover;
	flex: 0 0 auto;
	background: linear-gradient(135deg, #1e1e24 0%, #0f0f12 100%);
	display: block;
	box-shadow: 0 6px 20px rgba(0,0,0,.35);
	transition: transform .25s ease;
}

.sp-grid-playlists .playlist-item:hover .cover {
	transform: scale(1.05);
}

.sp-grid-playlists .playlist-item .cover.placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.3);
	font-size: 1.5rem;
}

/* 我的最愛：列表重點在曲名與藝人 - 現代化設計 */
.sp-content-section[data-section="tracks"] .sp-tracklist .track-item {
	background: rgba(255,255,255,.03);
	border: 1px solid rgba(255,255,255,.05);
	border-radius: 12px;
	padding: .7rem 1rem;
	display: flex;
	align-items: center;
	gap: .85rem;
	transition: all .2s ease;
}

.sp-content-section[data-section="tracks"] .sp-tracklist .track-item:hover {
	background: rgba(255,255,255,.07);
	border-color: rgba(29,185,84,.15);
	transform: translateX(3px);
}

.sp-content-section[data-section="tracks"] .sp-tracklist .track-item img.cover {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	object-fit: cover;
	flex: 0 0 auto;
	background: linear-gradient(135deg, #1a1a1f 0%, #0d0d10 100%);
	box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

/* 專輯 / 藝人 / Podcast：統一為「網格卡片」，封面在上、文字在下 */
/* 專輯 / 藔人 / Podcast：統一為「網格卡片」，封面在上、文字在下。
	目前 HTML 尚未大量使用 .sp-card 包裝每個項目，
	這段為未來資料渲染預留，不會影響既有列表。 */
.sp-grid-albums .sp-card,
.sp-grid-artists .sp-card,
.sp-grid-podcasts .sp-card {
	background: var(--sp-bg-highlight, #202020);
	border: 1px solid var(--sp-border-subtle);
	border-radius: 14px;
	padding: .75rem .8rem .8rem;
	display:flex;
	flex-direction:column;
	gap:.55rem;
	transition: background .18s ease, transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.sp-grid-albums .sp-card:hover,
.sp-grid-artists .sp-card:hover,
.sp-grid-podcasts .sp-card:hover {
	background: var(--sp-bg-elevated-hover, #2a2a2a);
	border-color: var(--sp-border-strong);
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0,0,0,.6);
}
.sp-grid-albums .sp-card img.cover,
.sp-grid-artists .sp-card img.cover,
.sp-grid-podcasts .sp-card img.cover {
	width: 100%;
	height: auto;
	aspect-ratio: 1/1;
	border-radius: 12px;
	object-fit: cover;
	background:#181818;
}
.sp-grid-artists .sp-card img.cover {
	border-radius: 999px;
}

/* 小尺寸螢幕調整卡片間距，避免擁擠 */
@media (max-width: 575px){
	.sp-grid-playlists .playlist-item{padding:.7rem .75rem;gap:.6rem;}
	.sp-grid-tracks .track-item,
	.sp-content-section[data-section="tracks"] .sp-tracklist .track-item{padding:.5rem .65rem;}
}

/* 空狀態 - 現代化設計 */
.sp-empty-state {
	text-align: center;
	padding: 3.5rem 2rem;
	color: rgba(255, 255, 255, 0.5);
}

.sp-empty-state i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 1.25rem;
	font-size: 1.75rem;
	background: linear-gradient(135deg, rgba(29, 185, 84, 0.1), rgba(29, 185, 84, 0.05));
	border: 1px solid rgba(29, 185, 84, 0.15);
	border-radius: 18px;
	color: rgba(29, 185, 84, 0.6);
}

.sp-empty-state p {
	font-size: 0.9375rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.45);
}

.sp-empty-state.small {
	padding: 2rem 1.5rem;
}

.sp-empty-state.small i {
	width: 56px;
	height: 56px;
	font-size: 1.25rem;
	margin-bottom: 1rem;
}

.sp-empty-state.small p {
	font-size: 0.8125rem;
}

/* 載入骨架 - 現代化設計 */
.sp-loading-skeleton {
	padding: 0.5rem 0;
}

.sp-loading-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sp-skeleton-row {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 12px;
	animation: skeletonPulse 1.5s ease-in-out infinite;
}

.sp-skeleton-row::before {
	content: '';
	flex: 0 0 48px;
	height: 48px;
	border-radius: 8px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
	background-size: 200% 100%;
	animation: skeletonShimmer 1.5s ease-in-out infinite;
}

.sp-skeleton-row::after {
	content: '';
	flex: 1;
	height: 16px;
	border-radius: 4px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.06) 100%);
	background-size: 200% 100%;
	animation: skeletonShimmer 1.5s ease-in-out infinite;
}

@keyframes skeletonPulse {
	0%, 100% { opacity: 0.6; }
	50% { opacity: 1; }
}

@keyframes skeletonShimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* 側邊欄 - 現代化設計 */
.sp-sidebar {
	position: fixed;
	top: calc(var(--nav-height, 66px) + var(--safe-top, env(safe-area-inset-top, 0px)));
	right: 0;
	width: 400px;
	bottom: 0;
	background: linear-gradient(180deg, rgba(18,18,22,.98) 0%, rgba(12,12,14,.98) 100%);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-left: 1px solid rgba(255,255,255,.06);
	transform: translateX(100%);
	transition: transform .35s cubic-bezier(.4,0,.2,1);
	z-index: 40;
	display: flex;
	flex-direction: column;
	box-shadow: -8px 0 32px rgba(0,0,0,.4);
}

.sp-sidebar.open {
	transform: translateX(0);
}

.sp-sidebar-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
}

.sp-sidebar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(255,255,255,.06);
	background: rgba(0,0,0,.2);
}

.sp-sidebar-tabs {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.sp-sidebar-tab {
	padding: .6rem 1rem;
	border-radius: 12px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	font-size: .8rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: rgba(255,255,255,.6);
	cursor: pointer;
	transition: all .2s ease;
}

.sp-sidebar-tab i {
	color: var(--sp-green);
}

.sp-sidebar-tab:hover {
	background: rgba(255,255,255,.1);
	color: #fff;
}

.sp-sidebar-tab.active {
	background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
	color: #000;
	border-color: transparent;
}

.sp-sidebar-tab.active i {
	color: #000;
}

.sp-sidebar-close {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.08);
	background: rgba(255,255,255,.06);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.6);
	cursor: pointer;
	transition: all .2s ease;
}

.sp-sidebar-close:hover {
	background: rgba(255,255,255,.12);
	color: #fff;
	transform: rotate(90deg);
}

.sp-sidebar-panel {
	display: none;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.sp-sidebar-panel.active {
	display: flex;
}

/* ===== 佇列面板樣式 - V3.2 ===== */
.sp-panel-content {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem 0;
	-webkit-overflow-scrolling: touch;
}

/* 佇列加入輸入框 */
.sp-queue-add {
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sp-input-group {
	display: flex;
	gap: 0.5rem;
}

.sp-input {
	flex: 1;
	height: 44px;
	padding: 0 1rem;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	color: #fff;
	font-size: 0.875rem;
	transition: all 0.2s ease;
}

.sp-input:focus {
	outline: none;
	border-color: rgba(29, 185, 84, 0.5);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.15);
}

.sp-input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.sp-input-btn {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #1db954, #1ed760);
	border: none;
	border-radius: 12px;
	color: #000;
	font-size: 1rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sp-input-btn:hover {
	background: linear-gradient(135deg, #1ed760, #23e866);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(29, 185, 84, 0.4);
}

.sp-input-btn:active {
	transform: translateY(0) scale(0.95);
}

/* 佇列區塊 */
.sp-queue-section {
	padding: 0.75rem 1.25rem;
}

.sp-queue-section:not(:last-child) {
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.sp-queue-section-title {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 0.75rem;
	padding-left: 0.25rem;
}

/* 佇列曲目項目 */
.sp-queue-track,
.sp-queue-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.sp-queue-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease;
}

.sp-queue-item:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.08);
}

.sp-queue-item:active {
	transform: scale(0.99);
	background: rgba(29, 185, 84, 0.1);
}

.sp-queue-item.playing {
	background: linear-gradient(135deg, rgba(29, 185, 84, 0.15), rgba(29, 185, 84, 0.08));
	border-color: rgba(29, 185, 84, 0.2);
}

.sp-queue-item .cover {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}

.sp-queue-item .cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sp-queue-item .info {
	flex: 1;
	min-width: 0;
}

.sp-queue-item .title {
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}

.sp-queue-item.playing .title {
	color: #1db954;
}

.sp-queue-item .artist {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-queue-item .duration {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.4);
	font-variant-numeric: tabular-nums;
}

.sp-queue-item .actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.sp-queue-item:hover .actions {
	opacity: 1;
}

.sp-queue-item .actions button {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: none;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.75rem;
	transition: all 0.15s ease;
}

.sp-queue-item .actions button:hover {
	background: #e22134;
	color: #fff;
}

.sp-panel-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(255,255,255,.05);
}

.sp-toolbar-title {
	font-size: .9rem;
	letter-spacing: .3px;
	font-weight: 700;
	color: #fff;
}

.sp-toolbar-actions {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.sp-toolbar-btn {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,.6);
	cursor: pointer;
	transition: all .2s ease;
	font-size: .8rem;
}

.sp-toolbar-btn:hover {
	background: rgba(255,255,255,.12);
	color: #fff;
}

.sp-toolbar-btn.active {
	background: var(--sp-green);
	color: #000;
	border-color: transparent;
}

.sp-toolbar-btn.text-success {
	color: var(--sp-green) !important;
	border-color: rgba(29,185,84,.3);
}

.sp-sidebar-body {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}

/* 手機版側邊欄 - 全螢幕底部彈出 */
@media (max-width: 991.98px) {
	.sp-sidebar {
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		border-left: none;
		border-top: none;
		transform: translateY(100%);
		transition: transform .3s cubic-bezier(.4,0,.2,1);
		background: linear-gradient(180deg, rgba(12,12,14,.99) 0%, rgba(8,8,10,.99) 100%);
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -8px 32px rgba(0,0,0,.5);
	}

	.sp-sidebar.open {
		transform: translateY(0);
	}
	
	.sp-sidebar-header {
		padding: 1.25rem 1.5rem;
		border-radius: 24px 24px 0 0;
	}
	
	/* 手機版佇列面板樣式 */
	.sp-queue-add {
		padding: 1rem;
	}
	
	.sp-input {
		height: 48px;
		font-size: 1rem;
	}
	
	.sp-input-btn {
		width: 48px;
		height: 48px;
		font-size: 1.1rem;
	}
	
	.sp-queue-section {
		padding: 0.75rem 1rem;
	}
	
	.sp-queue-item {
		padding: 0.75rem;
		gap: 0.875rem;
		border-radius: 12px;
	}
	
	.sp-queue-item .cover {
		width: 52px;
		height: 52px;
		border-radius: 8px;
	}
	
	.sp-queue-item .title {
		font-size: 0.9375rem;
		margin-bottom: 4px;
	}
	
	.sp-queue-item .artist {
		font-size: 0.8125rem;
	}
	
	/* 手機版始終顯示操作按鈕 */
	.sp-queue-item .actions {
		opacity: 1;
	}
	
	.sp-queue-item .actions button {
		width: 36px;
		height: 36px;
		border-radius: 8px;
		font-size: 0.875rem;
	}
	
	/* 佇列面板內容區域捲動優化 */
	.sp-panel-content {
		padding: 0;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}
	
	/* 工具列手機版調整 */
	.sp-panel-toolbar {
		padding: 1rem 1.25rem;
	}
	
	.sp-toolbar-title {
		font-size: 1rem;
	}
	
	.sp-toolbar-btn {
		width: 40px;
		height: 40px;
		font-size: 0.9rem;
	}
	
	/* 手機版佇列中的 track-item 樣式優化 */
	.sp-sidebar-panel .track-item {
		background: rgba(255, 255, 255, 0.04);
		border-radius: 12px;
		padding: 0.625rem 0.75rem;
		margin-bottom: 4px;
		cursor: pointer;
	}
	
	.sp-sidebar-panel .track-item:hover,
	.sp-sidebar-panel .track-item:active {
		background: rgba(255, 255, 255, 0.08);
		transform: none;
		box-shadow: none;
	}
	
	.sp-sidebar-panel .track-item .cover {
		width: 48px;
		height: 48px;
		flex-shrink: 0;
		border-radius: 8px;
		margin-right: 0.75rem;
		background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
	}
	
	.sp-sidebar-panel .track-item .flex-grow-1 {
		min-width: 0;
	}
	
	.sp-sidebar-panel .track-item .fw-semibold {
		font-size: 0.9375rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 2px;
	}
	
	.sp-sidebar-panel .track-item .text-muted.small {
		font-size: 0.8125rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	/* 手機版佇列按鈕組調整 */
	.sp-sidebar-panel .track-item .btn-group {
		flex-wrap: nowrap;
	}
	
	.sp-sidebar-panel .track-item .btn-group .btn {
		width: 36px;
		height: 36px;
		padding: 0;
		border-radius: 8px !important;
		font-size: 0.875rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.sp-sidebar-panel .track-item .btn-group .btn + .btn {
		margin-left: 4px;
	}
}

/* ===== 佇列面板 track-item 通用樣式 ===== */
.sp-sidebar-panel .track-item {
	background: rgba(255, 255, 255, 0.03);
	border-radius: 10px;
	padding: 0.5rem 0.625rem;
	margin-bottom: 3px;
	transition: background 0.2s ease;
}

.sp-sidebar-panel .track-item:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: none;
	box-shadow: none;
}

.sp-sidebar-panel .track-item .cover {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 6px;
	margin-right: 0.75rem;
	background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
	object-fit: cover;
}

.sp-sidebar-panel .track-item .cover.placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.3);
	font-size: 1rem;
}

.sp-sidebar-panel .track-item .flex-grow-1 {
	min-width: 0;
	flex: 1;
}

.sp-sidebar-panel .track-item .fw-semibold {
	font-size: 0.875rem;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}

.sp-sidebar-panel .track-item .text-muted.small {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 佇列按鈕組樣式 */
.sp-sidebar-panel .track-item .btn-group {
	flex-shrink: 0;
	gap: 4px;
}

.sp-sidebar-panel .track-item .btn-group .btn {
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 8px !important;
	font-size: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.sp-sidebar-panel .track-item .btn-group .btn-outline-light {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.6);
}

.sp-sidebar-panel .track-item .btn-group .btn-outline-light:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.sp-sidebar-panel .track-item .btn-group .btn-success {
	background: rgba(29, 185, 84, 0.2);
	border-color: rgba(29, 185, 84, 0.3);
	color: #1db954;
}

.sp-sidebar-panel .track-item .btn-group .btn-success:hover {
	background: #1db954;
	color: #000;
}

.sp-sidebar-panel .track-item .btn-group .btn-primary {
	background: rgba(29, 185, 84, 0.9);
	border-color: transparent;
	color: #000;
}

.sp-sidebar-panel .track-item .btn-group .btn-primary:hover {
	background: #1ed760;
	transform: scale(1.05);
}

/* 空狀態樣式 */
.sp-sidebar-panel .empty,
.sp-queue-section .empty {
	text-align: center;
	padding: 1.5rem;
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.875rem;
}

/* 佇列空狀態與內建空狀態樣式 */
.sp-queue-section .sp-empty-state.small {
	padding: 1rem;
}

.sp-queue-section .sp-empty-state.small i {
	font-size: 1.5rem;
	color: rgba(29, 185, 84, 0.5);
	margin-bottom: 0.5rem;
}

.sp-queue-section .sp-empty-state.small p {
	font-size: 0.8125rem;
	margin: 0;
}

/* 時長樣式 */
.sp-sidebar-panel .track-item > .text-muted.small:last-of-type {
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

/* ===================== CONSOLIDATED TAB STYLES (authoritative) ===================== */
/* 現代化 Tab 按鈕設計 */
.sp-tab-btn,
.sp-tabs-container .sp-tab-btn,
.sp-tabs-nav .sp-tab-btn,
.sp-mobile-tabs .sp-nav-btn,
.sp-mobile-tabs .sp-nav-btn .tab-label {
	font-size: 0.875rem;
	line-height: 1;
	padding: .65rem 1.1rem;
	gap: .5rem;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	white-space: nowrap;
	font-weight: 600;
	transition: all .2s ease;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	color: rgba(255,255,255,.6);
	cursor: pointer;
}

.sp-tab-btn i,
.sp-mobile-tabs .sp-nav-btn i {
	font-size: .9rem;
	color: var(--sp-green);
	transition: transform .2s ease;
}

.sp-tab-btn:hover,
.sp-mobile-tabs .sp-nav-btn:hover {
	color: #fff;
	background: rgba(255,255,255,.1);
	border-color: rgba(29,185,84,.3);
	transform: translateY(-1px);
}

.sp-tab-btn:hover i,
.sp-mobile-tabs .sp-nav-btn:hover i {
	transform: scale(1.1);
}

.sp-tab-btn.active,
.sp-mobile-tabs .sp-nav-btn.active {
	background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
	color: #000;
	border-color: transparent;
	font-weight: 700;
	box-shadow: 0 4px 16px rgba(29,185,84,.35);
}

.sp-tab-btn.active i,
.sp-mobile-tabs .sp-nav-btn.active i {
	color: #000;
}

.sp-tab-btn:active,
.sp-mobile-tabs .sp-nav-btn:active {
	transform: scale(0.97);
}

/* Small screens: slightly smaller tabs to improve fit */
@media (max-width: 575px) {
	.sp-tab-btn,
	.sp-mobile-tabs .sp-nav-btn {
		font-size: 0.8rem;
		padding: .55rem .9rem;
	}
}

/* Note: special-case landscape + short-height rules (which use !important) are
   intentionally left in place to preserve their emergency behaviour. */

/* Override to hide placeholder for local images too (default album art) */
.sp-artwork-main img.sp-cover-img:not([src=""]) ~ .sp-cover-placeholder {display:none !important;}

/* ===== Toast 通知樣式 - 現代化設計 ===== */
.sp-toast-container {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    pointer-events: none;
}

.sp-toast {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(26,26,31,.95) 0%, rgba(18,18,21,.95) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 500;
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(.4,0,.2,1);
    pointer-events: auto;
}

.sp-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.sp-toast i {
    font-size: 1.1rem;
}

.sp-toast-success i {
    color: var(--sp-green);
}

.sp-toast-error i {
    color: #ff5252;
}

.sp-toast-info i {
    color: #448aff;
}

@media (max-width: 575px) {
    .sp-toast-container {
        bottom: 140px;
        width: calc(100% - 2rem);
    }
    
    .sp-toast {
        width: 100%;
        justify-content: center;
        padding: 0.9rem 1.25rem;
    }
}

/* ===== 全螢幕疊層模式 (In-page Fullscreen Overlay) ===== */
.sp-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #121212 50%, #0d1a0f 100%);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    overflow: hidden;
}

.sp-fullscreen-overlay.active {
    opacity: 1;
    visibility: visible;
}

body.sp-fs-mode {
    overflow: hidden;
}

.sp-fs-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
}

/* 全螢幕頂部控制列 */
.sp-fs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.sp-fs-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sp-text-secondary);
    font-size: 0.875rem;
}

.sp-fs-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6a6a6a;
    transition: background 0.3s;
}

.sp-fs-status-dot.online {
    background: var(--sp-green);
    box-shadow: 0 0 8px var(--sp-green);
}

.sp-fs-actions {
    display: flex;
    gap: 0.75rem;
}

.sp-fs-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--sp-radius-full);
    color: var(--sp-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-fs-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.sp-fs-btn.active {
    background: var(--sp-green);
    color: #000;
    border-color: var(--sp-green);
}

.sp-fs-btn i {
    font-size: 1rem;
}

.sp-fs-close {
    background: rgba(255, 87, 87, 0.15);
    border-color: rgba(255, 87, 87, 0.3);
}

.sp-fs-close:hover {
    background: rgba(255, 87, 87, 0.25);
    border-color: rgba(255, 87, 87, 0.5);
}

/* 全螢幕主要內容區 */
.sp-fs-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    flex: 1;
    padding: 2rem;
    overflow: hidden;
}

/* 左側播放器區塊 */
.sp-fs-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 2rem;
}

.sp-fs-artwork {
    position: relative;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 1;
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

.sp-fs-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-fs-artwork-glow {
    position: absolute;
    inset: -50%;
    background: inherit;
    filter: blur(100px);
    opacity: 0.4;
    z-index: -1;
    pointer-events: none;
}

.sp-fs-info {
    text-align: center;
    max-width: 100%;
}

.sp-fs-track {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sp-text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-fs-artist {
    font-size: 1.25rem;
    color: var(--sp-text-secondary);
    margin: 0 0 0.25rem;
}

.sp-fs-album {
    font-size: 1rem;
    color: var(--sp-text-subdued);
    margin: 0;
}

/* 進度條 */
.sp-fs-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 500px;
}

.sp-fs-time {
    font-size: 0.875rem;
    color: var(--sp-text-subdued);
    font-variant-numeric: tabular-nums;
    min-width: 40px;
}

.sp-fs-time:last-child {
    text-align: right;
}

.sp-fs-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--sp-radius-full);
    overflow: hidden;
}

.sp-fs-progress-fill {
    height: 100%;
    background: var(--sp-green);
    border-radius: var(--sp-radius-full);
    transition: width 0.1s linear;
}

/* 播放控制 */
.sp-fs-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.sp-fs-control-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    color: var(--sp-text-primary);
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-fs-control-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.sp-fs-play-btn {
    width: 64px;
    height: 64px;
    background: var(--sp-green);
    color: #000;
    font-size: 1.5rem;
}

.sp-fs-play-btn:hover {
    background: var(--sp-green-hover);
    transform: scale(1.05);
}

/* 右側面板 */
.sp-fs-side {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--sp-radius-lg);
    overflow: hidden;
}

.sp-fs-lyrics,
.sp-fs-queue {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.sp-fs-lyrics.active,
.sp-fs-queue.active {
    display: flex;
}

.sp-fs-panel-header {
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.sp-fs-panel-header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sp-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-fs-panel-header h2 i {
    color: var(--sp-green);
}

/* 歌詞內容 */
.sp-fs-lyrics-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    scroll-behavior: smooth;
}

.sp-fs-lyrics-placeholder {
    color: var(--sp-text-subdued);
    text-align: center;
    padding: 2rem;
}

.sp-fs-lyric-line {
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    color: var(--sp-text-subdued);
    border-radius: var(--sp-radius-md);
    transition: all 0.3s ease;
    cursor: default;
}

.sp-fs-lyric-line:hover {
    background: rgba(255, 255, 255, 0.05);
}

.sp-fs-lyric-line.sp-fs-lyric-active,
.sp-fs-lyrics-content .lyric-active,
.sp-fs-lyrics-content .active {
    color: var(--sp-green);
    font-weight: 600;
    font-size: 1.5rem;
    background: rgba(29, 185, 84, 0.1);
}

/* 佇列內容 */
.sp-fs-queue-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.sp-fs-queue-placeholder {
    color: var(--sp-text-subdued);
    text-align: center;
    padding: 2rem;
}

/* 響應式設計 */
@media (max-width: 1200px) {
    .sp-fs-main {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    
    .sp-fs-player {
        padding: 1rem;
    }
    
    .sp-fs-artwork {
        max-width: 280px;
    }
    
    .sp-fs-track {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .sp-fs-header {
        padding: 0.75rem 1rem;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .sp-fs-btn span {
        display: none;
    }
    
    .sp-fs-main {
        padding: 1rem;
        gap: 1rem;
    }
    
    .sp-fs-artwork {
        max-width: 200px;
    }
    
    .sp-fs-track {
        font-size: 1.25rem;
    }
    
    .sp-fs-artist {
        font-size: 1rem;
    }
    
    .sp-fs-lyric-line {
        font-size: 1rem;
    }
    
    .sp-fs-lyric-line.sp-fs-lyric-active,
    .sp-fs-lyrics-content .lyric-active,
    .sp-fs-lyrics-content .active {
        font-size: 1.125rem;
    }
}

/* ===== 一起聽 (Listen Together / Party) 樣式 ===== */

.sp-party-container {
    padding: 0.5rem;
}

.sp-party-status {
    background: var(--sp-bg-elevated, #242424);
    border-radius: var(--sp-radius-md, 8px);
    padding: 1rem;
    border: 1px solid var(--sp-border-subtle, rgba(255, 255, 255, 0.07));
}

.sp-party-status.sp-party-active {
    border-color: var(--sp-green, #1db954);
    box-shadow: 0 0 8px rgba(29, 185, 84, 0.2);
}

.sp-party-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--sp-text-primary, #fff);
}

.sp-party-header i {
    font-size: 1.125rem;
}

.sp-party-body {
    font-size: 0.875rem;
}

.sp-party-body p {
    margin-bottom: 0.5rem;
}

.sp-party-info {
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--sp-radius-sm, 4px);
    padding: 0.5rem 0.75rem;
}

.sp-party-info code {
    background: rgba(29, 185, 84, 0.15);
    color: var(--sp-green, #1db954);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    user-select: all;
}

.sp-party-sync-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.5rem;
    background: rgba(29, 185, 84, 0.1);
    border-radius: var(--sp-radius-sm, 4px);
    color: var(--sp-green, #1db954);
}

.sp-party-sync-status i {
    font-size: 0.75rem;
}

/* Party Modal */
.sp-party-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 1050);
    backdrop-filter: blur(4px);
    animation: sp-fade-in 0.2s ease;
}

.sp-party-modal-content {
    background: var(--sp-bg-elevated, #242424);
    border-radius: var(--sp-radius-lg, 12px);
    padding: 1.5rem;
    min-width: 300px;
    max-width: 90vw;
    max-height: 80vh;
    overflow: auto;
    box-shadow: var(--sp-shadow-xl, 0 16px 40px rgba(0, 0, 0, 0.7));
}

.sp-party-modal-content h5 {
    margin-bottom: 1rem;
    color: var(--sp-text-primary, #fff);
    font-weight: 600;
}

.sp-party-modal-content .list-group {
    background: transparent;
}

.sp-party-modal-content .list-group-item {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--sp-border-subtle, rgba(255, 255, 255, 0.07));
    color: var(--sp-text-secondary, #b3b3b3);
}

.sp-party-modal-content .list-group-item:first-child {
    border-top-left-radius: var(--sp-radius-md, 8px);
    border-top-right-radius: var(--sp-radius-md, 8px);
}

.sp-party-modal-content .list-group-item:last-child {
    border-bottom-left-radius: var(--sp-radius-md, 8px);
    border-bottom-right-radius: var(--sp-radius-md, 8px);
}

@keyframes sp-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Party 按鈕樣式 */
.sp-party-body .btn {
    font-size: 0.8125rem;
    padding: 0.375rem 0.625rem;
}

.sp-party-body .btn i {
    font-size: 0.75rem;
}

.sp-party-body .input-group .form-control {
    background: rgba(0, 0, 0, 0.3);
    border-color: var(--sp-border-subtle, rgba(255, 255, 255, 0.07));
    color: var(--sp-text-primary, #fff);
    font-size: 0.8125rem;
}

.sp-party-body .input-group .form-control::placeholder {
    color: var(--sp-text-subdued, #6a6a6a);
}

.sp-party-body .input-group .form-control:focus {
    border-color: var(--sp-green, #1db954);
    box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.25);
}

/* ====== 播放清單增強樣式 ====== */

/* 播放清單列表項目 */
.sp-playlist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
    border-radius: 6px;
    margin: 2px 4px;
    position: relative;
}

.sp-playlist-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sp-playlist-item:active {
    transform: scale(0.99);
}

.sp-playlist-item.active {
    background: rgba(29, 185, 84, 0.15);
}

.sp-playlist-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--sp-green, #1db954);
    border-radius: 0 3px 3px 0;
}

.sp-playlist-cover {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.sp-playlist-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-playlist-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    color: var(--sp-text-subdued, #6a6a6a);
}

.sp-playlist-cover-placeholder i {
    font-size: 1rem;
    opacity: 0.5;
}

.sp-playlist-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sp-playlist-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--sp-text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-playlist-item.active .sp-playlist-name {
    color: var(--sp-green, #1db954);
}

.sp-playlist-meta {
    font-size: 0.75rem;
    color: var(--sp-text-subdued, #6a6a6a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-playlist-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sp-green, #1db954);
    border: none;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.15s ease;
    flex-shrink: 0;
}

.sp-playlist-item:hover .sp-playlist-play-btn {
    opacity: 1;
    transform: scale(1);
}

.sp-playlist-play-btn:hover {
    background: var(--sp-green-light, #1ed760);
    transform: scale(1.08);
}

.sp-playlist-play-btn i {
    font-size: 0.875rem;
    margin-left: 2px;
}

/* 播放清單詳細區塊 */
.sp-playlist-detail-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--sp-border-subtle, rgba(255, 255, 255, 0.07));
}

.sp-playlist-detail-title {
    flex: 1;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sp-text-primary, #fff);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-playlist-detail-actions {
    display: flex;
    gap: 0.5rem;
}

.sp-playlist-detail-actions .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 20px;
}

/* 歌曲列表 */
.sp-playlist-tracks-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 350px;
    overflow-y: auto;
}

.sp-playlist-track {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 6px;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

.sp-playlist-track:hover {
    background: rgba(255, 255, 255, 0.08);
}

.sp-playlist-track-num {
    width: 1.5rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--sp-text-subdued, #6a6a6a);
    flex-shrink: 0;
}

.sp-playlist-track:hover .sp-playlist-track-num {
    color: transparent;
}

.sp-playlist-track:hover .sp-playlist-track-num::after {
    content: '\f04b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--sp-text-primary, #fff);
    position: absolute;
}

.sp-playlist-track-num {
    position: relative;
}

.sp-playlist-track-cover {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.sp-playlist-track-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-playlist-track-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sp-playlist-track:hover .sp-playlist-track-play-overlay {
    opacity: 1;
}

.sp-playlist-track-play-overlay i {
    color: #fff;
    font-size: 1rem;
}

.sp-playlist-track-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.sp-playlist-track-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sp-text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-playlist-track-artist {
    font-size: 0.75rem;
    color: var(--sp-text-subdued, #6a6a6a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-playlist-track-duration {
    font-size: 0.8125rem;
    color: var(--sp-text-subdued, #6a6a6a);
    flex-shrink: 0;
    min-width: 2.5rem;
    text-align: right;
}

.sp-playlist-track-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sp-playlist-track:hover .sp-playlist-track-actions {
    opacity: 1;
}

.sp-track-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--sp-text-secondary, #b3b3b3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.sp-track-action-btn:hover {
    color: var(--sp-text-primary, #fff);
    background: rgba(255, 255, 255, 0.1);
}

.sp-track-action-btn i {
    font-size: 0.75rem;
}

/* 播放清單空狀態 */
.sp-playlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--sp-text-subdued, #6a6a6a);
    gap: 0.5rem;
}

.sp-playlist-empty i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.sp-playlist-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* 載入狀態 */
.sp-playlist-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--sp-text-subdued, #6a6a6a);
}

/* 響應式調整 */
@media (max-width: 991.98px) {
    .sp-playlist-item {
        padding: 0.5rem 0.625rem;
    }
    
    .sp-playlist-cover {
        width: 44px;
        height: 44px;
    }
    
    .sp-playlist-play-btn {
        opacity: 0.8;
        transform: scale(0.9);
    }
    
    .sp-playlist-tracks-list {
        max-height: 300px;
    }
    
    .sp-playlist-track-cover {
        width: 36px;
        height: 36px;
    }
    
    .sp-playlist-track-actions {
        opacity: 0.6;
    }
}

@media (max-width: 575.98px) {
    .sp-playlist-detail-header {
        flex-wrap: wrap;
    }
    
    .sp-playlist-detail-title {
        flex: 0 0 100%;
        margin-bottom: 0.5rem;
    }
    
    .sp-playlist-track-duration {
        display: none;
    }
}

/* ====== 通用按鈕樣式 ====== */
.sp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 500px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.sp-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sp-btn-primary {
    background: var(--sp-green, #1db954);
    color: #000;
}

.sp-btn-primary:hover:not(:disabled) {
    background: var(--sp-green-light, #1ed760);
    transform: scale(1.02);
}

.sp-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--sp-text-primary, #fff);
}

.sp-btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.15);
}

.sp-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.sp-btn i {
    font-size: 0.8em;
}