/* SC-ICG Music — 前台（Stage Mono：預設亮色藝廊質感／暗色舞台；主色可選＝設 --scm-brand） */

.scm-wrap {
	/* 亮色（預設）：白牆藝廊（頁底稍深、內容卡白，做出區塊感） */
	--scm-bg: #EDEDEB;
	--scm-surface: #FFFFFF;
	--scm-surface-2: #EFEFED;
	--scm-text: #131316;
	--scm-muted: #61636A;
	--scm-faint: #95969D;
	--scm-border: #E5E5E2;
	--scm-border-soft: #EDEDEB;
	--scm-mono: #131316;
	--scm-mono-fg: #FFFFFF;
	--scm-accent: var(--scm-brand, var(--scm-mono));
	--scm-accent-fg: var(--scm-brand-fg, var(--scm-mono-fg));
	--scm-ring: color-mix(in srgb, var(--scm-accent) 25%, transparent);
	--scm-shadow: 0 1px 2px rgba(19, 19, 22, 0.04), 0 12px 32px rgba(19, 19, 22, 0.07);
	--scm-shadow-lift: 0 4px 10px rgba(19, 19, 22, 0.06), 0 22px 48px rgba(19, 19, 22, 0.12);

	background: var(--scm-bg);
	color: var(--scm-text);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.scm-wrap[data-scm-theme="dark"] {
	--scm-bg: #08090B;
	--scm-surface: #141519;
	--scm-surface-2: #1C1D22;
	--scm-text: #F2F2F3;
	--scm-muted: #9EA1A9;
	--scm-faint: #6E7179;
	--scm-border: #26272C;
	--scm-border-soft: #1C1D22;
	--scm-mono: #F2F2F3;
	--scm-mono-fg: #0C0D0F;
	--scm-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	--scm-shadow-lift: 0 22px 56px rgba(0, 0, 0, 0.62);
}

.scm-wrap *,
.scm-wrap *::before,
.scm-wrap *::after { box-sizing: border-box; }
/* hidden 屬性必須贏過元件自己的 display（換頁／篩選都靠它） */
.scm-wrap [hidden] { display: none !important; }

/* 內容卡：整組功能包在 1290px 圓角矩形內，與頁面背景做出區塊感 */
.scm-inner {
	position: relative;
	max-width: 1290px;
	margin: 36px auto 110px;
	padding: 56px 60px 64px;
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 24px;
	box-shadow: var(--scm-shadow-lift);
	overflow: hidden;
}
.scm-wrap { padding: 1px 16px; }
.scm-wrap--global { background: none; padding: 0; }
.scm-wrap.scm-has-player .scm-inner { margin-bottom: 170px; }

.scm-wrap :where(a) { color: inherit; text-decoration: none; }
.scm-wrap :where(h1, h2, h3, h4) { color: var(--scm-text); }
/* 佈景 button 樣式（灰底膠囊／min-height）會漏進來——歸零，各元件自己上樣式 */
.scm-wrap :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
	min-width: 0;
	cursor: pointer;
}
.scm-wrap .scm-ic { flex: 0 0 auto; display: inline-block; vertical-align: middle; }

.scm-wrap button:focus-visible,
.scm-wrap a:focus-visible,
.scm-wrap [tabindex]:focus-visible,
.scm-wrap input:focus-visible,
.scm-wrap textarea:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--scm-ring);
	border-radius: 8px;
}
.scm-wrap button:focus:not(:focus-visible),
.scm-wrap a:focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* ---------- 主題切換 ---------- */

.scm-theme-toggle {
	position: absolute;
	top: 44px;
	right: 22px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	background: var(--scm-surface);
	color: var(--scm-muted);
	cursor: pointer;
	z-index: 5;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.scm-wrap[data-scm-theme="light"] .scm-theme-toggle .scm-ic-sun { display: none; }
.scm-wrap[data-scm-theme="dark"] .scm-theme-toggle .scm-ic-moon { display: none; }

/* ---------- 通用 ---------- */

.scm-kicker {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--scm-faint);
}

.scm-pagehead { margin: 6px 0 26px; }
.scm-pagehead__title {
	margin: 0 0 6px;
	font-size: clamp(30px, 4.5vw, 40px);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.scm-pagehead__intro { margin: 0 0 18px; max-width: 46em; color: var(--scm-muted); font-size: 15px; }

.scm-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 20px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}
.scm-btn--solid { background: var(--scm-accent); border-color: var(--scm-accent); color: var(--scm-accent-fg); }
.scm-btn--ghost { border-color: var(--scm-border); color: var(--scm-text); background: var(--scm-surface); }
.scm-btn--sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }

@media (hover: hover) and (pointer: fine) {
	.scm-btn--solid:hover { opacity: 0.88; }
	.scm-btn--ghost:hover { border-color: var(--scm-faint); }
	.scm-theme-toggle:hover { color: var(--scm-text); border-color: var(--scm-faint); }
}
.scm-btn:active { transform: scale(0.98); }

.scm-empty,
.scm-empty-inline {
	color: var(--scm-muted);
	font-size: 14px;
	background: var(--scm-surface);
	border: 1px dashed var(--scm-border);
	border-radius: 12px;
	padding: 22px;
}
.scm-empty-inline { padding: 14px 16px; }

.scm-breadcrumb { margin: 0 0 18px; font-size: 13px; }
.scm-breadcrumb a { display: inline-flex; align-items: center; gap: 4px; color: var(--scm-muted); }
@media (hover: hover) { .scm-breadcrumb a:hover { color: var(--scm-text); } }

.scm-section { margin-top: 46px; }
.scm-section--first { margin-top: 34px; }
.scm-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.scm-section__title {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 800;
	letter-spacing: 0.03em;
	color: var(--scm-text);
}
.scm-section__intro { margin: -6px 0 16px; color: var(--scm-muted); font-size: 14px; }
/* 「全部活動／全部音樂」：安靜文字連結（比例照設計稿——文字＋小 chevron，無底色） */
.scm-section__more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--scm-muted);
	background: none;
	border: 0;
	padding: 4px 0;
	cursor: pointer;
	transition: color 0.15s ease;
}
.scm-section__more .scm-ic { position: relative; top: 0.5px; }
@media (hover: hover) { .scm-section__more:hover { color: var(--scm-text); } }

/* ---------- 藝人主頁 hero（一律深色底＋白字；亮暗主題都一樣） ---------- */

.scm-artist {
	position: relative;
	margin: -56px -60px 0;
	/* 上下 padding 一致 */
	padding: 48px 60px;
	--scm-hero-base: #101114;
	--scm-hero-ink: #FFFFFF;
	--scm-hero-muted: rgba(255, 255, 255, 0.85);
	background: var(--scm-hero-base);
	color: var(--scm-hero-ink);
}
.scm-artist :where(h1, h2, h3) { color: var(--scm-hero-ink); }
/* 無 banner：用形象照代表色與深底混色的漸層 */
.scm-artist--grad {
	background-image: linear-gradient(
		165deg,
		color-mix(in srgb, var(--scm-hero-c1, transparent) 42%, var(--scm-hero-base)) 0%,
		color-mix(in srgb, var(--scm-hero-c2, transparent) 26%, var(--scm-hero-base)) 62%,
		var(--scm-hero-base) 100%
	);
}
.scm-artist--banner {
	background-image: linear-gradient(180deg, rgba(16, 17, 20, 0.45) 0%, rgba(16, 17, 20, 0.82) 70%, var(--scm-hero-base) 98%), var(--scm-banner);
	background-size: cover;
	background-position: center 30%;
}
.scm-artist__inner {
	display: flex;
	align-items: flex-end;
	gap: 40px;
	max-width: 980px;
	margin: 0 auto;
}
.scm-artist--banner .scm-artist__inner { padding-top: 110px; }
.scm-artist__photo {
	flex: 0 0 auto;
	width: 132px;
	height: 132px;
	border-radius: 999px;
	overflow: hidden;
	border: 0;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
	background: rgba(255, 255, 255, 0.08);
}
.scm-artist__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scm-artist__photo--ph { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.55); }
.scm-artist__main { flex: 1 1 auto; min-width: 0; }
.scm-artist__name {
	margin: 0 0 12px;
	font-size: clamp(24px, 3.4vw, 36px);
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: 0.02em;
	color: var(--scm-hero-ink);
}
.scm-artist__tagline { margin: 0 0 16px; color: var(--scm-hero-muted); font-size: 15px; max-width: 52em; }
.scm-artist__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* hero 內按鈕改白色語彙（深底上才看得見） */
.scm-artist .scm-btn--solid { background: var(--scm-brand, #FFFFFF); border-color: var(--scm-brand, #FFFFFF); color: var(--scm-brand-fg, #131316); }
.scm-artist .scm-btn--ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: var(--scm-hero-ink); }
@media (hover: hover) { .scm-artist .scm-btn--ghost:hover { border-color: rgba(255, 255, 255, 0.6); } }

/* 社群連結：與 site-now-engine 完全同款（裸 icon 20px、gap 12、hover 淡入） */
.scm-socials { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.scm-social {
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	color: var(--scm-muted);
	line-height: 1;
	text-decoration: none;
	transition: color 0.18s ease, opacity 0.18s ease;
}
.scm-social:hover { color: var(--scm-text); opacity: 0.9; }
.scm-social svg { width: 20px; height: 20px; display: block; }
.scm-social img { width: 20px; height: 20px; display: block; object-fit: contain; border-radius: 3px; }
/* hero 深色底：白 icon */
.scm-artist .scm-social { color: rgba(255, 255, 255, 0.88); }
.scm-artist .scm-social:hover { color: #fff; }
.scm-artist .scm-socials { margin-left: 4px; }
/* hero 內的分享選單本體維持主題面色（下拉不透明才可讀） */
.scm-artist .scm-atc__menu { color: var(--scm-text); }
.scm-artist .scm-atc__menu button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--scm-text);
}
@media (hover: hover) { .scm-artist .scm-atc__menu button:hover { background: var(--scm-surface-2); } }

/* ---------- Segmented 分頁（underline tab 已全面禁用） ---------- */

.scm-seg {
	display: flex;
	width: max-content;
	max-width: 100%;
	margin: 24px auto 6px;
	align-items: center;
	gap: 4px;
	background: var(--scm-surface-2);
	border-radius: 12px;
	padding: 4px;
	overflow-x: auto;
}
.scm-seg__btn {
	border: 0;
	background: none;
	border-radius: 9px;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 700;
	color: var(--scm-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.scm-seg__btn.is-active { background: var(--scm-surface); color: var(--scm-text); box-shadow: var(--scm-shadow); }
@media (hover: hover) { .scm-seg__btn:not(.is-active):hover { color: var(--scm-text); } }
.scm-mpane { display: none; }
.scm-mpane.is-active { display: block; }
/* 音樂分頁的子 segmented（歌單｜全部歌曲） */
.scm-seg--sub { margin: 26px auto 20px; }
.scm-seg--sub .scm-seg__btn { padding: 7px 16px; font-size: 13.5px; }
.scm-mspane { display: none; }
.scm-mspane.is-active { display: block; }

/* ---------- 清單工具列（搜尋＋分類）與換頁 ---------- */

/* 工具列：先兩個篩選（各 200px）再搜尋（吃滿剩餘）；手機＝篩選各 50%、搜尋 100% 在下 */
.scm-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.scm-toolbar .scm-combo { flex: 0 0 auto; }
.scm-toolbar .scm-combo__btn { width: 200px; height: 42px; justify-content: space-between; }
.scm-toolbar .scm-searchbox { flex: 1 1 240px; min-width: 200px; }
.scm-searchbox {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 200px;
	flex: 1 1 100%;
	padding: 0 14px;
	height: 42px;
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	background: var(--scm-surface);
	color: var(--scm-faint);
}
/* 佈景會給 input 邊框／陰影／內距——在搜尋框內全部歸零（連 hover/focus 一起） */
.scm-wrap .scm-searchbox input,
.scm-wrap .scm-searchbox input:hover,
.scm-wrap .scm-searchbox input:focus {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: auto;
	min-height: 0;
	border: 0 !important;
	border-radius: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--scm-text);
	font: inherit;
	font-size: 14px;
	outline: none;
	padding: 0;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
}
.scm-searchbox input::placeholder { color: var(--scm-faint); }
.scm-searchbox input::-webkit-search-decoration,
.scm-searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; }
.scm-searchbox:focus-within { border-color: var(--scm-faint); }
.scm-wrap .scm-searchbox input:focus-visible { box-shadow: none !important; }
.scm-wrap :where(select.scm-select) {
	height: 40px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	background: var(--scm-surface);
	color: var(--scm-text);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2395969D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
}
.scm-section__head .scm-searchbox { flex: 0 1 240px; min-width: 170px; height: 36px; }

/* 下拉 combobox（隱藏的 select 驅動；可搜尋） */
.scm-combo { position: relative; display: inline-block; }
.scm-combo__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	background: var(--scm-surface);
	color: var(--scm-muted);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.scm-combo__btn.is-set { color: var(--scm-text); border-color: var(--scm-faint); }
@media (hover: hover) { .scm-combo__btn:hover { color: var(--scm-text); border-color: var(--scm-faint); } }
.scm-combo__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 80;
	min-width: 200px;
	max-width: 280px;
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 12px;
	box-shadow: var(--scm-shadow-lift);
	padding: 8px;
}
.scm-wrap .scm-combo__search,
.scm-wrap .scm-combo__search:focus {
	width: 100%;
	border: 1px solid var(--scm-border) !important;
	border-radius: 8px;
	background: var(--scm-surface-2) !important;
	box-shadow: none !important;
	color: var(--scm-text);
	font: inherit;
	font-size: 13px;
	padding: 7px 10px;
	margin: 0 0 6px;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	min-height: 0;
}
.scm-combo__list { max-height: 240px; overflow-y: auto; }
.scm-combo__opt {
	display: block;
	width: 100%;
	text-align: left;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--scm-text);
	cursor: pointer;
}
@media (hover: hover) { .scm-combo__opt:hover { background: var(--scm-surface-2); } }
.scm-combo__opt.is-active { background: var(--scm-accent); color: var(--scm-accent-fg); }
.scm-combo__none { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--scm-muted); }

.scm-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; }
.scm-pager[hidden] { display: none; }
.scm-pager__btn {
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--scm-border);
	border-radius: 10px;
	background: var(--scm-surface);
	color: var(--scm-muted);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.scm-pager__btn.is-active { background: var(--scm-accent); border-color: var(--scm-accent); color: var(--scm-accent-fg); }
.scm-pager__btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .scm-pager__btn:not(.is-active):not(:disabled):hover { color: var(--scm-text); border-color: var(--scm-faint); } }
.scm-pager__gap { color: var(--scm-faint); font-size: 13px; padding: 0 2px; }

/* ---------- 歌單格（主頁區塊） ---------- */

.scm-plgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 16px; }
.scm-plgrid__card {
	display: block;
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 14px;
	padding: 12px;
	box-shadow: var(--scm-shadow);
	transition: border-color 0.15s ease;
}
@media (hover: hover) { .scm-plgrid__card:hover { border-color: var(--scm-faint); } }
.scm-plgrid__cover { display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: var(--scm-surface-2); }
.scm-plgrid__title { display: block; font-size: 14px; font-weight: 800; line-height: 1.4; }
.scm-plgrid__meta { display: block; font-size: 12px; color: var(--scm-faint); margin-top: 2px; }

/* ---------- 關於：固定一張左圖＋右側多組（標題＋內文）；社群跟在最後一組內文下方 ---------- */

.scm-about { margin: 0 auto; }
.scm-about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px; align-items: start; }
.scm-about-grid--noimg { grid-template-columns: 1fr; }
.scm-about-grid .scm-ablock__side { position: sticky; top: 24px; }
.scm-ablock__img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--scm-shadow); aspect-ratio: 4 / 5; object-fit: cover; }
.scm-ablock__group { margin: 0 0 26px; }
.scm-ablock__group:last-of-type { margin-bottom: 0; }
.scm-ablock__title { margin: 2px 0 10px; font-size: 19px; font-weight: 800; letter-spacing: 0.03em; }
.scm-ablock__socials { margin-top: 20px; }
.scm-prose a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .scm-prose a:hover { opacity: 0.75; } }

/* 主頁 50/50 欄 */
.scm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 30px; }
.scm-cols__col { min-width: 0; }
.scm-eventlist--compact .scm-eventcard { padding: 14px; gap: 14px; }
.scm-eventlist--compact .scm-eventcard__thumb { display: none; }
.scm-about-socials { margin-top: 22px; }
@media (max-width: 860px) { .scm-cols { grid-template-columns: 1fr; } }

/* ---------- 封面 ---------- */

.scm-cover__img,
.scm-cover__ph { display: block; width: 100%; height: 100%; object-fit: cover; }
.scm-cover__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--scm-faint);
	background: radial-gradient(120% 120% at 20% 15%, var(--scm-surface-2) 0%, var(--scm-border-soft) 100%);
}
.scm-cover-grid { display: grid; width: 100%; height: 100%; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.scm-cover-grid__cell { overflow: hidden; }

/* ---------- 歌單卡 ---------- */

.scm-plcard {
	display: flex;
	gap: 22px;
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 18px;
	box-shadow: var(--scm-shadow);
}
.scm-plcard__cover { display: block; width: 132px; height: 132px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.scm-plcard__main { flex: 1 1 auto; min-width: 0; }
.scm-plcard__head { display: flex; align-items: flex-start; gap: 10px; }
.scm-plcard__headmain { flex: 1 1 auto; min-width: 0; }
.scm-plcard__title { margin: 2px 0 2px; font-size: 19px; font-weight: 900; }
@media (hover: hover) { .scm-plcard__title a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.scm-plcard__meta { margin: 0 0 10px; font-size: 12.5px; color: var(--scm-muted); }
.scm-plcard__desc { display: inline; }
.scm-plcard__desc::before { content: "・"; }
/* 曲目開闔：預設收合、一次只開一張（music.js 控制） */
.scm-plcard__fold {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	background: var(--scm-surface);
	color: var(--scm-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) { .scm-plcard__fold:hover { color: var(--scm-text); border-color: var(--scm-faint); } }
.scm-plcard__chev { transition: transform 0.18s ease; }
.scm-plcard.is-open .scm-plcard__chev { transform: rotate(180deg); }
.scm-plcard__tracks { display: none; }
.scm-plcard.is-open .scm-plcard__tracks { display: block; }

/* ---------- 曲目列 ---------- */

.scm-tracklist { list-style: none; margin: 0; padding: 0; }
.scm-tracklist--flat {
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 16px;
	padding: 6px 16px;
	box-shadow: var(--scm-shadow);
}
.scm-track {
	display: grid;
	grid-template-columns: 24px 40px minmax(0, 1fr) auto 32px 36px;
	gap: 12px;
	align-items: center;
	padding: 10px 4px;
	border-top: 1px solid var(--scm-border-soft);
	font-size: 14px;
	border-radius: 8px;
	transition: background 0.15s ease;
}
.scm-track:first-child,
.scm-track.is-first-visible { border-top: 0; }
@media (hover: hover) { .scm-track:hover { background: color-mix(in srgb, var(--scm-surface-2) 55%, transparent) ; } }
.scm-track__no { color: var(--scm-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center; }
.scm-track__cover { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; }
.scm-track__main { min-width: 0; display: flex; flex-direction: column; }
.scm-track__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .scm-track__title:hover { text-decoration: underline; text-underline-offset: 3px; } }
.scm-track__plays { font-size: 11.5px; color: var(--scm-faint); font-variant-numeric: tabular-nums; }
.scm-track__plays-label { margin-left: 2px; }
.scm-track__dur { color: var(--scm-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.scm-track__add,
.scm-track__play {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.scm-track__add {
	width: 30px;
	height: 30px;
	border: 1px solid var(--scm-border);
	background: transparent;
	color: var(--scm-faint);
}
@media (hover: hover) { .scm-track__add:hover { color: var(--scm-text); border-color: var(--scm-faint); } }
.scm-track__play {
	width: 36px;
	height: 36px;
	border: 1px solid var(--scm-border);
	background: var(--scm-surface);
	color: var(--scm-text);
}
.scm-track__play--none { border: 0; background: none; cursor: default; }
@media (hover: hover) {
	.scm-track__play:not(.scm-track__play--none):hover { background: var(--scm-accent); border-color: var(--scm-accent); color: var(--scm-accent-fg); }
}
.scm-track.is-current .scm-track__title { color: var(--scm-accent); }
.scm-wrap[data-scm-theme="light"] .scm-track.is-current .scm-track__title { color: var(--scm-brand, var(--scm-text)); }
.scm-track.is-current .scm-track__play { background: var(--scm-accent); border-color: var(--scm-accent); color: var(--scm-accent-fg); }

.scm-ic-pause { display: none; }
.scm-wrap .scm-ic-pause { display: none; }
.scm-wrap .is-playing .scm-ic-play { display: none; }
.scm-wrap .is-playing .scm-ic-pause { display: inline-block; }

/* ---------- 歌單內頁 hero ---------- */

.scm-plhero { display: flex; gap: 26px; align-items: flex-start; margin-bottom: 26px; }
.scm-plhero__cover { width: 190px; height: 190px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; box-shadow: var(--scm-shadow-lift); }
.scm-plhero__title { margin: 0 0 4px; font-size: clamp(26px, 4vw, 36px); font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; }
.scm-plhero__meta { margin: 0 0 12px; color: var(--scm-muted); font-size: 13.5px; }
.scm-plhero__desc { margin: 0 0 14px; color: var(--scm-muted); font-size: 14.5px; max-width: 52em; }
.scm-plhero__desc p { margin: 0 0 8px; }

/* ---------- 歌曲單頁 ---------- */

.scm-songhero { display: flex; gap: 30px; align-items: flex-start; }
.scm-songhero__cover { width: 230px; height: 230px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; box-shadow: var(--scm-shadow-lift); }
.scm-songhero__main { flex: 1 1 auto; min-width: 0; }
.scm-songhero__genres { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.scm-chip {
	display: inline-block;
	padding: 3px 12px;
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--scm-muted);
	text-transform: uppercase;
}
@media (hover: hover) { .scm-chip:hover { color: var(--scm-text); border-color: var(--scm-faint); } }
.scm-songhero__title { margin: 0 0 2px; font-size: clamp(26px, 4.5vw, 38px); font-weight: 900; line-height: 1.25; letter-spacing: -0.01em; }
.scm-songhero__artist { margin: 0 0 16px; color: var(--scm-muted); font-size: 14px; }
.scm-songhero__stats { display: flex; gap: 28px; margin: 0 0 16px; }
.scm-stat b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; }
.scm-stat span { font-size: 11.5px; color: var(--scm-faint); letter-spacing: 0.05em; }
.scm-songhero__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.scm-bigplay {
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--scm-accent);
	color: var(--scm-accent-fg);
	cursor: pointer;
	box-shadow: var(--scm-shadow);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) { .scm-bigplay:hover { opacity: 0.9; } }
.scm-bigplay:active { transform: scale(0.95); }
.scm-like.is-liked .scm-ic path { fill: currentColor; }
.scm-songhero__date { margin: 14px 0 0; color: var(--scm-faint); font-size: 12.5px; }

.scm-player { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.scm-player__time { font-size: 12px; color: var(--scm-muted); font-variant-numeric: tabular-nums; min-width: 36px; }

.scm-progress { flex: 1 1 auto; padding: 8px 0; cursor: pointer; min-width: 60px; }
.scm-progress__bar { display: block; height: 4px; border-radius: 4px; background: var(--scm-border); position: relative; }
.scm-progress__fill { display: block; width: 0%; height: 100%; border-radius: 4px; background: var(--scm-accent); position: relative; transition: width 0.15s linear; }
.scm-progress__fill::after {
	content: "";
	position: absolute;
	right: -5px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--scm-accent);
	transform: translateY(-50%);
}

/* 收錄於置中、上一首／下一首分列左右（沒有就留白）；歌名放不下自動向左循環滑動 */
.scm-songnav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	margin-top: 30px;
	padding: 13px 18px;
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 14px;
	font-size: 13.5px;
	box-shadow: var(--scm-shadow);
}
.scm-songnav__pl { color: var(--scm-muted); text-align: center; white-space: nowrap; }
.scm-songnav__pl a { font-weight: 700; color: var(--scm-text); margin-left: 4px; }
.scm-songnav__side { min-width: 0; display: flex; }
.scm-songnav__side--next { justify-content: flex-end; }
.scm-songnav__side a { display: inline-flex; align-items: center; gap: 4px; color: var(--scm-muted); min-width: 0; max-width: 100%; }
@media (hover: hover) { .scm-songnav__side a:hover { color: var(--scm-text); } }
.scm-scrollx { display: block; overflow: hidden; white-space: nowrap; min-width: 0; max-width: 240px; }
.scm-scrollx > span { white-space: nowrap; }

/* 折疊 */
.scm-fold { position: relative; }
.scm-fold__body { max-height: 190px; overflow: hidden; }
.scm-fold.is-open .scm-fold__body { max-height: none; }
.scm-fold:not(.is-open).has-more .scm-fold__body {
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.scm-fold__more { margin-top: 6px; border: 0; background: none; padding: 4px 0; color: var(--scm-muted); font-size: 13px; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .scm-fold__more:hover { color: var(--scm-text); } }

.scm-prose { color: var(--scm-text); font-size: 14.5px; }
.scm-prose p { margin: 0 0 10px; }
.scm-bio { max-width: 60em; }
.scm-lyrics { font-size: 14.5px; line-height: 2.15; }

/* 歌曲頁跟播歌詞 */
.scm-lyrics-live {
	margin-left: 10px;
	font-size: 10.5px;
	letter-spacing: 0.1em;
	color: var(--scm-accent-fg);
	background: var(--scm-accent);
	border-radius: 999px;
	padding: 2px 10px;
	vertical-align: 2px;
}
.scm-lyricsync--page .scm-lyricsync__line { display: block; }

/* 事件卡動作標籤：手機用短字（行事曆／詳情），三顆同一列 */
.scm-lbl-short { display: none; }

/* ---------- 留言 ---------- */

.scm-comments { margin-top: 48px; border-top: 1px solid var(--scm-border); padding-top: 30px; }
/* 在單曲 segmented 分頁內：不需要再隔一條線 */
.scm-mspane .scm-comments { margin-top: 6px; border-top: 0; padding-top: 0; }
.scm-song-pane { margin-top: 4px; }
.scm-seg--song { margin: 34px auto 20px; }
.scm-comments__list, .scm-comments__list .children { list-style: none; margin: 0; padding: 0; }
.scm-comments__list .children { margin-left: 48px; }
.scm-comment { border-top: 1px solid var(--scm-border-soft); }
.scm-comments__list > .scm-comment:first-child { border-top: 0; }
.scm-comment__body { display: flex; gap: 12px; padding: 15px 0; }
.scm-comment__avatar img { border-radius: 999px; display: block; }
.scm-comment__main { flex: 1 1 auto; min-width: 0; }
.scm-comment__who { margin: 0 0 2px; display: flex; align-items: baseline; gap: 10px; }
.scm-comment__name { font-size: 13px; font-weight: 800; }
.scm-comment__time { font-size: 11.5px; color: var(--scm-faint); }
.scm-comment__pending { margin: 0 0 4px; font-size: 12px; color: var(--scm-faint); }
.scm-comment__text { font-size: 14px; }
.scm-comment__text p { margin: 0 0 6px; }
.scm-comment__actions { margin: 4px 0 0; font-size: 12.5px; }
.scm-comment__actions a { color: var(--scm-faint); font-weight: 700; }
@media (hover: hover) { .scm-comment__actions a:hover { color: var(--scm-text); } }
.scm-comments__empty { color: var(--scm-muted); font-size: 14px; }
.scm-comments__gate {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	border: 1px dashed var(--scm-border);
	border-radius: 14px;
	padding: 18px 20px;
	background: var(--scm-surface);
}
.scm-comments__gate p { margin: 0; color: var(--scm-muted); font-size: 14px; }
.scm-comments__form { margin-top: 20px; }
.scm-comments__form-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.scm-comments__form textarea {
	width: 100%;
	border: 1px solid var(--scm-border);
	border-radius: 12px;
	background: var(--scm-surface);
	color: var(--scm-text);
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	min-height: 104px;
}
.scm-comments__form textarea::placeholder { font-size: 13px; color: var(--scm-faint); }
.scm-comments__form textarea:focus { outline: none; border-color: var(--scm-faint); box-shadow: 0 0 0 3px var(--scm-ring); }
.scm-comments__form .form-submit { margin: 12px 0 0; display: flex; justify-content: flex-end; }
.scm-comments__submit { min-height: 32px; padding: 4px 14px; font-size: 13px; }
/* 送出鈕放進留言輸入框右下角（music.js 會把 .form-submit 移進 .comment-form-comment） */
.scm-form--inbtn .comment-form-comment { position: relative; margin: 0 0 10px; }
.scm-form--inbtn .comment-form-comment textarea { padding-bottom: 52px; }
.scm-form--inbtn .comment-form-comment .form-submit { position: absolute; right: 10px; bottom: 10px; margin: 0; }
/* Turnstile 驗證框：靠右、與送出鈕成一直排，縮小視覺份量 */
.scm-comments .cf-turnstile,
.scm-comments .comment-form-cf-turnstile {
	display: flex;
	justify-content: flex-end;
	margin: 12px 0 0;
	transform: scale(0.86);
	transform-origin: right center;
}
.scm-comments .comment-form-cookies-consent { font-size: 12.5px; color: var(--scm-muted); }
.scm-comments .comment-notes, .scm-comments .logged-in-as { font-size: 12.5px; color: var(--scm-faint); }
.scm-comments .nav-links { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; }

/* ---------- 播放器：浮動卡（可拖拉停靠上／下、寬度兩段、footer 讓位） ---------- */

.scm-pbar {
	position: fixed;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	/* 寬版最寬可到螢幕一半 */
	width: min(max(560px, 50vw), calc(100vw - 24px));
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 14px;
	background: color-mix(in srgb, var(--scm-surface) 92%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--scm-border);
	border-radius: 18px;
	box-shadow: var(--scm-shadow-lift);
	z-index: 999900; /* 高於站上浮動 icon（LINE／AI 名片等）與佈景固定元素 */
	cursor: grab;
	touch-action: none;
	transition: bottom 0.18s ease, top 0.18s ease, width 0.18s ease;
}
/* 拖曳目標的虛線指示框 */
.scm-dock-ghost {
	position: fixed;
	border: 2px dashed var(--scm-faint, #97989E);
	border-radius: 18px;
	pointer-events: none;
	z-index: 999890;
	opacity: 0.8;
}
.scm-pbar.is-dragging { transition: none; cursor: grabbing; }
.scm-pbar.is-mini { width: max-content; }
.scm-pbar.is-mini .scm-pbar__wide-only { display: none; }
.scm-pbar.is-mini .scm-pbar__meta { flex: 0 1 150px; }
.scm-pbar .scm-ic-ball { display: none; }
.scm-pbar.is-mini .scm-ic-ball { display: inline-block; }
.scm-pbar.is-mini .scm-ic-min { display: none; }
.scm-pbar[hidden] { display: none !important; }
.scm-pbar.is-dock-left { left: 24px; transform: none; }
.scm-pbar.is-dock-right { left: auto; right: 24px; transform: none; }

/* 左右分鍵：一步一格（左｜中｜右）；不能再移的方向變淡、不可點 */
.scm-pbar__dockbtn {
	width: 26px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--scm-text);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.scm-pbar__dockbtn--l { margin-left: -6px; margin-right: -4px; }
.scm-pbar__dockbtn--r { margin-right: -6px; margin-left: -4px; }
@media (hover: hover) { .scm-pbar__dockbtn:not(:disabled):hover { background: var(--scm-surface-2); } }
.scm-pbar__dockbtn:disabled { color: var(--scm-faint); opacity: 0.35; cursor: default; }

/* 小圓球模式：整列縮成角落一顆圓球（頭像／封面＋右上音樂徽章），點擊展開 */
.scm-pbar__ballface { display: none; }
.scm-pbar.is-ball {
	width: 56px;
	height: 56px;
	padding: 0;
	gap: 0;
	border-radius: 999px;
	justify-content: center;
	cursor: pointer;
	overflow: visible;
}
.scm-pbar.is-ball > * { display: none !important; }
.scm-pbar.is-ball .scm-pbar__ballface {
	display: block !important;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	overflow: visible;
	pointer-events: none;
	position: relative;
}
.scm-pbar.is-ball .scm-pbar__ballface img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 999px; }
.scm-pbar.is-ball .scm-pbar__ballface .scm-cover__ph { width: 100%; height: 100%; border-radius: 999px; }
/* 右上角小音樂徽章 */
.scm-pbar__ballbadge {
	display: none;
	position: absolute;
	top: -3px;
	right: -3px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--scm-accent);
	color: var(--scm-accent-fg);
	align-items: center;
	justify-content: center;
	box-shadow: var(--scm-shadow);
	z-index: 2;
}
.scm-pbar.is-ball .scm-pbar__ballbadge { display: flex; }
/* 播放中：圓球周遭的動感光圈（兩圈交錯脈動）＋徽章跳動 */
.scm-pbar.is-ball.is-playing .scm-pbar__ballface::before,
.scm-pbar.is-ball.is-playing .scm-pbar__ballface::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 999px;
	border: 2px solid var(--scm-accent);
	opacity: 0;
	animation: scm-pulse 2.1s ease-out infinite;
}
.scm-pbar.is-ball.is-playing .scm-pbar__ballface::after { animation-delay: 1.05s; }
.scm-pbar.is-ball.is-playing .scm-pbar__ballbadge { animation: scm-bounce 1.05s ease-in-out infinite alternate; }
@keyframes scm-pulse {
	0% { transform: scale(0.9); opacity: 0.55; }
	80% { transform: scale(1.45); opacity: 0; }
	100% { transform: scale(1.45); opacity: 0; }
}
@keyframes scm-bounce {
	from { transform: translateY(0) scale(1); }
	to { transform: translateY(-2.5px) scale(1.12); }
}

/* 歌名／歌手放不下：一直往左跑、跑完從右邊接回（連續循環） */
.scm-pbar__scroll { display: block; overflow: hidden; white-space: nowrap; min-width: 0; }
.scm-pbar__scroll > * { white-space: nowrap; }
.scm-pbar__scroll.is-marq > *,
.scm-scrollx.is-marq > * {
	display: inline-flex;
	gap: 32px;
	overflow: visible;
	text-overflow: clip;
	max-width: none;
	animation: scm-marq-loop var(--scm-marq-dur, 12s) linear infinite;
}
.scm-marq-seg { flex: 0 0 auto; }
@keyframes scm-marq-loop {
	from { transform: translateX(0); }
	to { transform: translateX(var(--scm-marq-loop, -100%)); }
}

/* 迷你 bar hover：手掌游標＋「可拖曳移動」引導 */
@media (hover: hover) and (pointer: fine) {
	.scm-pbar.is-mini { cursor: grab; }
	.scm-pbar.is-mini::after {
		content: "⟷ 拖曳可左右移動";
		position: absolute;
		bottom: calc(100% + 8px);
		left: 50%;
		transform: translateX(-50%);
		background: var(--scm-mono);
		color: var(--scm-mono-fg);
		font-size: 11.5px;
		font-weight: 700;
		border-radius: 999px;
		padding: 4px 12px;
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.18s ease 0.15s;
		box-shadow: var(--scm-shadow);
	}
	.scm-pbar.is-mini:hover::after { opacity: 1; }
}
.scm-pbar__home {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	overflow: hidden;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--scm-border);
	background: var(--scm-surface-2);
	color: var(--scm-faint);
}
.scm-pbar__home img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scm-pbar__home { position: relative; }
@media (hover: hover) and (pointer: fine) {
	.scm-pbar__home:hover { border-color: var(--scm-faint); }
	.scm-pbar__home:hover::after {
		content: attr(data-scm-tip);
		position: absolute;
		bottom: calc(100% + 8px);
		left: 0;
		white-space: nowrap;
		background: var(--scm-mono);
		color: var(--scm-mono-fg);
		font-size: 11.5px;
		font-weight: 700;
		border-radius: 999px;
		padding: 4px 12px;
		box-shadow: var(--scm-shadow);
	}
}
.scm-pbar__cover { width: 44px; aspect-ratio: 1 / 1; height: auto; border-radius: 8px; overflow: hidden; flex: 0 0 auto; box-shadow: var(--scm-shadow); }
.scm-pbar__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 歌名與演奏者靠緊（行高收斂、零間距） */
.scm-pbar__meta { display: flex; flex-direction: column; gap: 0; justify-content: center; min-width: 72px; flex: 1 1 110px; }
.scm-pbar__title { font-size: 13.5px; font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .scm-pbar__title:hover { text-decoration: underline; text-underline-offset: 3px; } }
.scm-pbar__artist { font-size: 11px; line-height: 1.25; color: var(--scm-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scm-pbar__scroll { line-height: 1.3; }
.scm-pbar__ctl { display: flex; align-items: center; gap: 2px; }
.scm-pbar__btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--scm-text);
	cursor: pointer;
	transition: background 0.15s ease;
}
@media (hover: hover) { .scm-pbar__btn:hover { background: var(--scm-surface-2); } }
.scm-pbar__btn--play { background: var(--scm-accent); color: var(--scm-accent-fg); width: 40px; height: 40px; }
@media (hover: hover) { .scm-pbar__btn--play:hover { background: var(--scm-accent); opacity: 0.9; } }
.scm-pbar__progress { flex: 1 1 90px; min-width: 56px; }
.scm-pbar__time { font-size: 11.5px; color: var(--scm-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.scm-pbar__expand { position: relative; width: auto; padding: 0 10px; gap: 6px; }
.scm-pbar__count {
	font-size: 10.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	background: var(--scm-accent);
	color: var(--scm-accent-fg);
	border-radius: 999px;
	min-width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
}

/* ---------- 播放器：滑出面板 ---------- */

/* 面板＝從播放列往上展開的浮窗（跟著停靠位置）；.is-full＝街聲式全螢幕 */
.scm-panel {
	position: fixed;
	left: 50%;
	bottom: 90px;
	transform: translateX(-50%);
	width: min(420px, calc(100vw - 24px));
	max-height: min(72vh, 640px);
	z-index: 999910; /* 高於浮動 icon */
}
/* 第二層展開：拉到整個視窗高度（歌詞看得更多）；展開後圖示翻轉成往下（收回方向） */
.scm-panel.is-tall { top: 14px; max-height: none; height: auto; }
.scm-panel.is-tall .scm-panel__sheet { height: 100%; }
.scm-panel.is-tall .scm-panel__tall { color: var(--scm-accent); }
.scm-panel.is-tall .scm-panel__tall .scm-ic { transform: rotate(180deg); }
.scm-panel__tall .scm-ic { transition: transform 0.18s ease; }
.scm-wrap[data-scm-theme="light"] .scm-panel.is-tall .scm-panel__tall { color: var(--scm-brand, var(--scm-text)); }
.scm-panel[hidden] { display: none; }
.scm-panel.is-dock-left { left: 24px; transform: none; }
.scm-panel.is-dock-right { left: auto; right: 24px; transform: none; }
.scm-panel__sheet {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	background: var(--scm-surface);
	color: var(--scm-text);
	border: 1px solid var(--scm-border);
	border-radius: 18px;
	box-shadow: var(--scm-shadow-lift);
	padding: 14px 22px 12px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(14px);
	transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1), opacity 0.22s ease;
}
.scm-panel.is-open .scm-panel__sheet { opacity: 1; transform: translateY(0); }
.scm-panel__head { position: absolute; top: 12px; right: 16px; left: 16px; display: flex; align-items: center; justify-content: space-between; z-index: 3; pointer-events: none; }
.scm-panel__head-left { display: flex; align-items: center; gap: 2px; }
.scm-panel__fs,
.scm-panel__close { pointer-events: auto; border: 0; background: none; color: var(--scm-muted); cursor: pointer; padding: 6px; border-radius: 8px; }
@media (hover: hover) {
	.scm-panel__fs:hover,
	.scm-panel__close:hover { color: var(--scm-text); background: var(--scm-surface-2); }
}

/* 全螢幕頂部 segmented（列表｜正在播放｜歌詞）——僅 .is-full 顯示 */
.scm-fsnav { display: none; }
.scm-panel.is-full .scm-fsnav {
	display: flex;
	width: max-content;
	margin: 6px auto 18px;
	gap: 4px;
	background: var(--scm-surface-2);
	border-radius: 12px;
	padding: 4px;
}
.scm-fsnav__btn {
	border: 0;
	background: none;
	border-radius: 9px;
	padding: 7px 16px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--scm-muted);
	cursor: pointer;
}
.scm-fsnav__btn.is-active { background: var(--scm-surface); color: var(--scm-text); box-shadow: var(--scm-shadow); }

/* 全螢幕模式 */
html.scm-fs-lock, html.scm-fs-lock body { overflow: hidden; }
.scm-panel.is-full {
	left: 0 !important;
	right: 0 !important;
	top: 0;
	bottom: 0 !important;
	transform: none;
	width: 100vw;
	max-height: none;
	height: auto;
	z-index: 1000010;
}
.scm-panel.is-full .scm-panel__sheet {
	height: 100%;
	max-height: none;
	border-radius: 0;
	border: 0;
	padding: 16px clamp(16px, 5vw, 48px) 20px;
	transform: none;
}
.scm-panel.is-full .scm-panel__head { position: absolute; }
.scm-panel.is-full .scm-panel__cover { width: min(380px, 42vh); margin-top: 8px; }
.scm-panel.is-full .scm-panel__title { font-size: 20px; }
.scm-panel.is-full .scm-panel__accs { max-width: 640px; margin: 0 auto; width: 100%; }
.scm-panel.is-full .scm-panel__prog,
.scm-panel.is-full .scm-panel__ctl { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
.scm-panel.is-full .scm-panel__collapse { display: none; }
/* fsview 切換：now＝只看播放；list＝佇列；lyrics＝歌詞 */
.scm-panel.is-full .scm-acc__head { display: none; }
.scm-panel.is-full .scm-acc .scm-acc__body { display: none; }
.scm-panel.is-full[data-fsview="now"] .scm-panel__accs { display: none; }
.scm-panel.is-full[data-fsview="list"] .scm-acc[data-scm-acc="queue"] .scm-acc__body { display: block; }
.scm-panel.is-full[data-fsview="lyrics"] .scm-acc[data-scm-acc="lyrics"] .scm-acc__body { display: block; }
.scm-panel.is-full[data-fsview="list"] .scm-panel__cover,
.scm-panel.is-full[data-fsview="lyrics"] .scm-panel__cover { width: 120px; }
.scm-panel.is-full[data-fsview="lyrics"] .scm-lyricsync { max-height: 46vh; }
.scm-panel.is-full[data-fsview="lyrics"] .scm-lyricsync__line { font-size: 16px; line-height: 2.2; }
.scm-panel.is-full[data-fsview="lyrics"] .scm-lyricsync__line.is-hot { font-size: 19px; }
.scm-panel__cover {
	width: 168px;
	aspect-ratio: 1 / 1;
	height: auto;
	flex: 0 0 auto;
	border-radius: 14px;
	overflow: hidden;
	margin: 26px auto 14px;
	box-shadow: var(--scm-shadow-lift);
	transition: width 0.2s ease;
}
.scm-panel__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scm-panel__title { margin: 0; text-align: center; font-size: 17px; font-weight: 900; }
@media (hover: hover) { .scm-panel__title a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.scm-panel__artist { margin: 2px 0 12px; text-align: center; font-size: 12.5px; color: var(--scm-muted); }
.scm-panel__prog { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--scm-muted); font-variant-numeric: tabular-nums; }
.scm-panel__ctl { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 12px; }
.scm-panel__btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--scm-text);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) { .scm-panel__btn:hover { background: var(--scm-surface-2); } }
.scm-panel__big {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: var(--scm-accent);
	color: var(--scm-accent-fg);
	cursor: pointer;
	box-shadow: var(--scm-shadow);
}
.scm-panel__vol { display: flex; align-items: center; gap: 6px; color: var(--scm-muted); margin-right: 4px; }
.scm-panel__vol input[type="range"] {
	width: 72px;
	accent-color: var(--scm-accent);
	cursor: pointer;
}
.scm-panel__loop { position: relative; color: var(--scm-faint); }
.scm-panel__loop-one {
	position: absolute;
	right: 5px;
	bottom: 5px;
	font-size: 8.5px;
	font-weight: 900;
	display: none;
}
.scm-panel__loop[data-loop="all"] { color: var(--scm-accent); }
.scm-wrap[data-scm-theme="light"] .scm-panel__loop[data-loop="all"],
.scm-wrap[data-scm-theme="light"] .scm-panel__loop[data-loop="one"] { color: var(--scm-brand, var(--scm-text)); }
.scm-panel__loop[data-loop="one"] { color: var(--scm-accent); }
.scm-panel__loop[data-loop="one"] .scm-panel__loop-one { display: block; }
.scm-panel__shuffle { color: var(--scm-faint); }
.scm-panel__shuffle.is-on { color: var(--scm-accent); }
.scm-wrap[data-scm-theme="light"] .scm-panel__shuffle.is-on { color: var(--scm-brand, var(--scm-text)); }

/* 面板內：播放列表與歌詞＝各自開闔（可全開／全收，狀態記憶） */
.scm-panel__accs { flex: 1 1 auto; overflow-y: auto; padding-right: 2px; }
.scm-acc { border-top: 1px solid var(--scm-border); }
.scm-acc:first-child { border-top: 0; }
.scm-acc__head { display: flex; align-items: center; gap: 8px; }
.scm-acc__toggle {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	border: 0;
	background: none;
	padding: 12px 2px;
	font-size: 13px;
	font-weight: 800;
	color: var(--scm-text);
	cursor: pointer;
}
.scm-acc__chev { color: var(--scm-faint); transition: transform 0.18s ease; }
.scm-acc.is-open .scm-acc__chev { transform: rotate(180deg); }
.scm-acc__body { display: none; padding: 0 0 10px; }
.scm-acc.is-open .scm-acc__body { display: block; }
.scm-panel__clear { border: 0; background: none; font-size: 12px; color: var(--scm-faint); cursor: pointer; padding: 4px 2px; }
@media (hover: hover) { .scm-panel__clear:hover { color: var(--scm-text); } }

.scm-queue { list-style: none; margin: 0; padding: 0; }
.scm-queue__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 6px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.14s ease;
}
@media (hover: hover) { .scm-queue__row:hover { background: var(--scm-surface-2); } }
.scm-queue__cover {
	width: 38px;
	aspect-ratio: 1 / 1;
	height: auto;
	border-radius: 6px;
	flex: 0 0 auto;
	background-color: var(--scm-surface-2);
	background-size: cover;
	background-position: center;
}
.scm-queue__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scm-queue__title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scm-queue__row.is-current .scm-queue__title { color: var(--scm-accent); font-weight: 800; }
.scm-wrap[data-scm-theme="light"] .scm-queue__row.is-current .scm-queue__title { color: var(--scm-brand, var(--scm-text)); }
.scm-queue__chip {
	align-self: flex-start;
	font-size: 10px;
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	padding: 0 8px;
	color: var(--scm-faint);
}
.scm-queue__dur { font-size: 11.5px; color: var(--scm-faint); font-variant-numeric: tabular-nums; }
.scm-queue__remove {
	width: 26px;
	height: 26px;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--scm-faint);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
@media (hover: hover) { .scm-queue__remove:hover { background: var(--scm-border-soft); color: var(--scm-text); } }
.scm-queue__empty { color: var(--scm-muted); font-size: 13px; padding: 14px 4px; }

.scm-panel__collapse {
	border: 0;
	border-top: 1px solid var(--scm-border);
	background: none;
	color: var(--scm-muted);
	font-size: 12.5px;
	font-weight: 700;
	padding: 12px 0 4px;
	cursor: pointer;
}
@media (hover: hover) { .scm-panel__collapse:hover { color: var(--scm-text); } }

/* 動態歌詞（面板 accordion 內要有自己的高度上限，highlight 才能自動捲動） */
.scm-lyricsync { max-height: 100%; overflow-y: auto; padding: 8px 6px; scroll-behavior: smooth; }
.scm-acc .scm-lyricsync { max-height: 300px; }
.scm-panel.is-tall .scm-acc .scm-lyricsync { max-height: 52vh; }
/* 單曲頁動態歌詞「顯示時間」 */
.scm-lyricsync__t {
	display: none;
	font-size: 11px;
	color: var(--scm-faint);
	font-variant-numeric: tabular-nums;
	margin-right: 12px;
	vertical-align: 1.5px;
}
.scm-lyricsync.show-time .scm-lyricsync__t { display: inline-block; min-width: 34px; text-align: right; }
.scm-lyrics-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.scm-lyrics-tools .scm-lyrics-live { margin-left: 0; }
.scm-lyrics-timebtn {
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	background: var(--scm-surface);
	color: var(--scm-muted);
	font-size: 12px;
	font-weight: 700;
	padding: 3px 12px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.scm-lyrics-timebtn[aria-pressed="true"] { color: var(--scm-accent-fg); background: var(--scm-accent); border-color: var(--scm-accent); }
@media (hover: hover) { .scm-lyrics-timebtn[aria-pressed="false"]:hover { color: var(--scm-text); border-color: var(--scm-faint); } }
.scm-lyricsync__line {
	display: block;
	padding: 5px 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--scm-faint);
	transition: color 0.2s ease, font-size 0.2s ease;
	text-align: center;
}
.scm-lyricsync__line.is-hot { color: var(--scm-text); font-weight: 900; font-size: 15.5px; }
.scm-lyricsync--page { max-height: 420px; }
.scm-lyricsync--page .scm-lyricsync__line { text-align: left; }
.scm-lyricsync__none { color: var(--scm-muted); font-size: 13px; text-align: center; padding: 20px 0; }

/* 前台輕量 toast */
.scm-toast {
	position: fixed;
	left: 50%;
	bottom: 88px;
	transform: translate(-50%, 8px);
	background: var(--scm-mono);
	color: var(--scm-mono-fg);
	font-size: 13px;
	font-weight: 700;
	border-radius: 999px;
	padding: 9px 20px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 999920;
	box-shadow: var(--scm-shadow-lift);
}
.scm-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 活動 ---------- */

/* 活動分頁：工具列（搜尋＋分類＋地點）→ 左月曆（選到日期的活動列在月曆正下方）／右即將到來 */
.scm-toolbar--events { margin: 30px 0 22px; }
.scm-events-layout {
	display: grid;
	grid-template-columns: minmax(0, 10fr) minmax(0, 11fr);
	gap: 30px;
	align-items: start;
	margin-top: 24px;
}
.scm-events-layout .scm-calendar { max-width: none; margin-bottom: 0; }
.scm-events-layout__cal .scm-eventgroup--selected { margin-top: 24px; }
.scm-events-layout__side { min-width: 0; }
.scm-events-layout__side .scm-eventgroup { margin-top: 0; }

.scm-eventgroup { margin-top: 36px; }
.scm-eventgroup--past { margin-top: 40px; }
.scm-eventgroup--past .scm-section__title { color: var(--scm-muted); }
.scm-eventlist { display: flex; flex-direction: column; gap: 14px; }

.scm-eventcard {
	display: flex;
	gap: 18px;
	align-items: stretch;
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 16px;
	padding: 18px;
	box-shadow: var(--scm-shadow);
}
.scm-eventcard__date {
	flex: 0 0 auto;
	width: 66px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	background: var(--scm-surface-2);
	border-radius: 12px;
	padding: 10px 6px;
}
.scm-eventcard__month { font-size: 11.5px; font-weight: 700; color: var(--scm-muted); }
.scm-eventcard__day { font-size: 24px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.scm-eventcard__main { flex: 1 1 auto; min-width: 0; }
.scm-eventcard__title { margin: 2px 0 6px; font-size: 17px; font-weight: 800; line-height: 1.4; }
@media (hover: hover) { .scm-eventcard__title a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.scm-eventcard__meta { margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--scm-muted); font-size: 13px; }
.scm-eventcard__meta span { display: inline-flex; align-items: center; gap: 6px; }
.scm-eventcard__cat {
	border: 1px solid var(--scm-border);
	border-radius: 999px;
	padding: 1px 10px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--scm-faint);
}
.scm-eventcard__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.scm-eventcard__thumb { flex: 0 0 auto; width: 150px; border-radius: 10px; overflow: hidden; align-self: center; aspect-ratio: 4 / 3; }
.scm-eventcard--past { opacity: 0.72; }

.scm-atc { position: relative; display: inline-block; }
.scm-atc__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	min-width: 190px;
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 12px;
	box-shadow: var(--scm-shadow-lift);
	padding: 6px;
	z-index: 60;
}
.scm-atc__menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; }
@media (hover: hover) { .scm-atc__menu a:hover { background: var(--scm-surface-2); } }

.scm-calendar {
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 16px;
	padding: 18px 20px 16px;
	margin-bottom: 8px;
	max-width: 460px;
	box-shadow: var(--scm-shadow);
}
.scm-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.scm-calendar__label { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.scm-calendar__nav {
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--scm-border); border-radius: 999px;
	background: none; color: var(--scm-muted); cursor: pointer;
}
@media (hover: hover) { .scm-calendar__nav:hover { color: var(--scm-text); border-color: var(--scm-faint); } }
.scm-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.scm-calendar__wd { font-size: 11px; font-weight: 700; color: var(--scm-faint); padding: 4px 0 8px; }
.scm-calendar__day {
	position: relative; height: 40px;
	display: flex; align-items: center; justify-content: center;
	border: 0; background: none; border-radius: 8px;
	font-size: 13px; color: var(--scm-text); font-variant-numeric: tabular-nums; cursor: default;
}
.scm-calendar__day--out { color: var(--scm-faint); opacity: 0.5; }
.scm-calendar__day--today { box-shadow: inset 0 0 0 1px var(--scm-faint); }
.scm-calendar__day--event { cursor: pointer; font-weight: 800; }
.scm-calendar__day--event::after {
	content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
	width: 5px; height: 5px; border-radius: 999px; background: var(--scm-accent);
}
@media (hover: hover) { .scm-calendar__day--event:hover { background: var(--scm-surface-2); } }
.scm-calendar__day--event.is-selected { background: var(--scm-accent); color: var(--scm-accent-fg); }
.scm-calendar__day--event.is-selected::after { background: var(--scm-accent-fg); }
.scm-calendar__daylist { margin-top: 12px; border-top: 1px solid var(--scm-border-soft); padding-top: 10px; }
.scm-calendar__daylist a { display: flex; align-items: baseline; gap: 10px; padding: 7px 4px; border-radius: 8px; font-size: 13.5px; font-weight: 600; }
.scm-calendar__daylist a b { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--scm-muted); font-size: 12px; }
@media (hover: hover) { .scm-calendar__daylist a:hover { background: var(--scm-surface-2); } }

.scm-eventhero__img { border-radius: 16px; overflow: hidden; margin-bottom: 22px; max-height: 420px; aspect-ratio: 21 / 9; box-shadow: var(--scm-shadow-lift); }
.scm-eventhero__title { margin: 0 0 14px; font-size: clamp(26px, 4.5vw, 38px); font-weight: 900; line-height: 1.25; letter-spacing: -0.01em; }
.scm-eventmeta { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--scm-muted); font-size: 14.5px; }
.scm-eventmeta li { display: flex; align-items: center; gap: 10px; }
.scm-eventhero__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.scm-relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; }
/* 商品圖 1:1、新聞圖 16:9 */
.scm-relgrid--products .scm-relcard__thumb { aspect-ratio: 1 / 1; }
.scm-relgrid--news .scm-relcard__thumb { aspect-ratio: 16 / 9; }
.scm-relcard {
	display: block;
	background: var(--scm-surface);
	border: 1px solid var(--scm-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--scm-shadow);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) { .scm-relcard:hover { border-color: var(--scm-faint); } }
.scm-relcard__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--scm-surface-2); }
.scm-relcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scm-relcard__title { display: block; padding: 10px 14px 2px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.scm-relcard__meta { display: block; padding: 0 14px 12px; font-size: 12px; color: var(--scm-faint); }
.scm-relcard__price { color: var(--scm-text); font-weight: 700; }

/* ---------- RWD ---------- */

@media (max-width: 720px) {
	.scm-wrap { padding: 1px 12px; }
	.scm-inner { margin: 12px auto 130px; padding: 16px 16px 28px; border-radius: 18px; }
	.scm-theme-toggle { top: 14px; right: 12px; }

	.scm-artist { margin: -16px -16px 0; padding: 22px 16px; }
	.scm-artist__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 20px; }
	.scm-artist--banner .scm-artist__inner { padding-top: 84px; }
	.scm-artist__photo { width: 96px; height: 96px; }
	.scm-artist__actions { gap: 10px; }
	.scm-artist__actions .scm-btn { min-height: 40px; padding: 7px 16px; font-size: 13.5px; }

	/* 活動：手機改上下堆疊（月曆在上、清單在下） */
	.scm-events-layout { grid-template-columns: 1fr; gap: 22px; margin-top: 26px; }
	.scm-events-layout .scm-calendar { position: static; }
	.scm-section__head { flex-wrap: wrap; }
	.scm-section__head .scm-searchbox { flex: 1 1 100%; }

	/* 關於：左圖右文改上下 */
	.scm-about-grid { grid-template-columns: 1fr; gap: 16px; }
	.scm-about-grid .scm-ablock__side { position: static; }

	/* 主頁格狀（歌單／歌曲／商品／文章）：手機兩欄各 50% */
	.scm-plgrid { grid-template-columns: 1fr 1fr; }
	.scm-relgrid { grid-template-columns: 1fr 1fr; }

	/* 工具列：兩個篩選各 50%、搜尋 100% 在下 */
	.scm-toolbar .scm-combo { flex: 1 1 calc(50% - 5px); order: 1; }
	.scm-toolbar .scm-combo__btn { width: 100%; }
	.scm-toolbar .scm-searchbox { flex: 1 1 100%; order: 2; }

	/* 活動卡動作：短字（行事曆／詳情）＋三顆同一列 */
	.scm-lbl-full { display: none; }
	.scm-lbl-short { display: inline; }
	.scm-eventcard__actions { flex-wrap: nowrap; gap: 6px; }
	.scm-eventcard__actions .scm-btn--sm { min-height: 38px; padding: 5px 11px; font-size: 12.5px; white-space: nowrap; }

	/* 單曲上下首：手機只留左右切換 */
	.scm-songnav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.scm-songnav__pl { display: none; }
	.scm-scrollx { max-width: 150px; }

	.scm-seg { margin: 20px auto 4px; }
	.scm-seg--sub { margin: 20px auto 16px; }

	.scm-plcard { flex-direction: row; gap: 14px; padding: 14px; }
	.scm-plcard__cover { width: 84px; height: 84px; }

	.scm-track { grid-template-columns: 20px 36px minmax(0, 1fr) 32px 44px; gap: 10px; }
	.scm-track__dur { display: none; }
	.scm-track__cover { width: 36px; height: 36px; }
	.scm-track__add { width: 32px; height: 32px; }
	.scm-track__play { width: 44px; height: 44px; }

	.scm-plhero { flex-direction: column; }
	.scm-plhero__cover { width: 150px; height: 150px; }

	.scm-songhero { flex-direction: column; gap: 20px; }
	.scm-songhero__cover { width: min(320px, 70vw); height: auto; aspect-ratio: 1 / 1; }

	.scm-eventcard { flex-wrap: wrap; }
	.scm-eventcard__thumb { width: 100%; order: -1; }
	.scm-eventcard__date { order: 0; }

	/* 手機版：讓歌名有足夠空間——隱藏進度／時間／寬度切換／停靠鈕，meta 吃滿剩餘寬 */
	.scm-pbar { gap: 8px; padding: 8px 12px; width: calc(100vw - 24px); }
	.scm-pbar__meta { flex: 1 1 auto; min-width: 0; }
	.scm-pbar__progress, .scm-pbar__time, .scm-pbar__size, .scm-pbar__dockbtn { display: none; }
	.scm-pbar__home { width: 30px; height: 30px; }
	.scm-pbar__cover { width: 40px; }
	.scm-pbar__title { font-size: 13px; }
	/* 播放鍵維持正方（防止被 flex stretch／佈景 min-height 拉成長方形） */
	.scm-pbar__btn { width: 42px; height: 42px; min-height: 42px; max-height: 42px; align-self: center; flex: 0 0 auto; }
	.scm-pbar__btn--play { width: 44px; height: 44px; min-height: 44px; max-height: 44px; }
	.scm-pbar.is-mini { width: calc(100vw - 24px); }
	.scm-pbar.is-mini .scm-pbar__meta { flex: 1 1 auto; }
	.scm-pbar.is-ball { width: 56px; }

	/* 主選單改下拉式：收合只顯示目前分頁（帶箭頭），點開展開全部 */
	.scm-seg--dd {
		display: block;
		width: 100%;
		max-width: none;
		position: relative;
		overflow: visible;
		padding: 5px;
	}
	.scm-seg--dd .scm-seg__btn { display: none; width: 100%; text-align: left; padding: 11px 16px; font-size: 14.5px; }
	.scm-seg--dd:not(.is-open) .scm-seg__btn.is-active {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.scm-seg--dd:not(.is-open) .scm-seg__btn.is-active::after {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--scm-faint);
		border-bottom: 2px solid var(--scm-faint);
		transform: rotate(45deg) translateY(-3px);
	}
	.scm-seg--dd.is-open .scm-seg__btn { display: block; }
	.scm-seg--dd.is-open .scm-seg__btn.is-active { background: var(--scm-surface); box-shadow: var(--scm-shadow); }

	.scm-panel,
	.scm-panel.is-dock-left,
	.scm-panel.is-dock-right { left: 50%; right: auto; transform: translateX(-50%); width: calc(100vw - 24px); }
	.scm-pbar.is-dock-left,
	.scm-pbar.is-dock-right { left: 50%; right: auto; transform: translateX(-50%); }
	.scm-toast { bottom: 96px; }

	.scm-comments__list .children { margin-left: 20px; }
	.scm-btn { min-height: 44px; }
	.scm-tab { min-height: 44px; }
	.scm-calendar { max-width: none; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.scm-wrap *,
	.scm-wrap *::before,
	.scm-wrap *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.scm-lyricsync { scroll-behavior: auto; }
}