/* SC-ICG Recorder — 前台（歲月暖調：預設暖紙亮色／深夜模式；主色可選＝設 --scr-brand） */

.scr-wrap {
	/* 亮色（預設）：泛黃相紙的暖灰，內容卡是更亮的暖白；互動色＝琥珀銅 */
	--scr-bg: #EFEAE0;
	--scr-surface: #FAF7F0;
	--scr-surface-2: #F1EDE3;
	--scr-text: #2B241A;
	--scr-muted: #776E5D;
	--scr-faint: #A29885;
	--scr-border: #E2DBCC;
	--scr-border-soft: #EDE8DC;
	--scr-mono: #9A5B2E;
	--scr-mono-fg: #FFF9F0;
	--scr-accent: var(--scr-brand, var(--scr-mono));
	--scr-accent-fg: var(--scr-brand-fg, var(--scr-mono-fg));
	--scr-ring: color-mix(in srgb, var(--scr-accent) 25%, transparent);
	--scr-shadow: 0 1px 2px rgba(60, 46, 28, 0.05), 0 12px 32px rgba(60, 46, 28, 0.08);
	--scr-shadow-lift: 0 4px 10px rgba(60, 46, 28, 0.07), 0 22px 48px rgba(60, 46, 28, 0.13);

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

.scr-wrap[data-scr-theme="dark"] {
	/* 深夜模式：半夜想念某個人的時候 */
	--scr-bg: #171310;
	--scr-surface: #201B15;
	--scr-surface-2: #292219;
	--scr-text: #EDE6D8;
	--scr-muted: #A2977F;
	--scr-faint: #6E6553;
	--scr-border: #362E22;
	--scr-border-soft: #292219;
	--scr-mono: #C98F55;
	--scr-mono-fg: #1C1610;
	--scr-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	--scr-shadow-lift: 0 22px 56px rgba(0, 0, 0, 0.62);
}

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

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

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

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

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

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

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

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

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

.scr-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;
}
.scr-btn--solid { background: var(--scr-accent); border-color: var(--scr-accent); color: var(--scr-accent-fg); }
.scr-btn--ghost { border-color: var(--scr-border); color: var(--scr-text); background: var(--scr-surface); }
.scr-btn--sm { min-height: 36px; padding: 6px 14px; font-size: 13px; }

@media (hover: hover) and (pointer: fine) {
	.scr-btn--solid:hover {
		background: color-mix(in srgb, var(--scr-accent) 86%, var(--scr-text));
		border-color: color-mix(in srgb, var(--scr-accent) 86%, var(--scr-text));
		color: var(--scr-accent-fg);
		opacity: 1;
	}
	.scr-btn--ghost:hover { border-color: var(--scr-faint); }
	.scr-theme-toggle:hover { color: var(--scr-text); border-color: var(--scr-faint); }
}
.scr-btn:active { transform: scale(0.98); }

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

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

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

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

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

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

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

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

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

/* 工具列：先兩個篩選（各 200px）再搜尋（吃滿剩餘）；手機＝篩選各 50%、搜尋 100% 在下 */
.scr-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.scr-toolbar .scr-combo { flex: 0 0 auto; }
.scr-toolbar .scr-combo__btn { width: 200px; height: 42px; justify-content: space-between; }
.scr-toolbar .scr-searchbox { flex: 1 1 240px; min-width: 200px; }
.scr-searchbox {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 200px;
	flex: 1 1 100%;
	padding: 0 14px;
	height: 42px;
	border: 1px solid var(--scr-border);
	border-radius: 999px;
	background: var(--scr-surface);
	color: var(--scr-faint);
}
/* 佈景會給 input 邊框／陰影／內距——在搜尋框內全部歸零（連 hover/focus 一起） */
.scr-wrap .scr-searchbox input,
.scr-wrap .scr-searchbox input:hover,
.scr-wrap .scr-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(--scr-text);
	font: inherit;
	font-size: 14px;
	outline: none;
	padding: 0;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
}
.scr-searchbox input::placeholder { color: var(--scr-faint); }
.scr-searchbox input::-webkit-search-decoration,
.scr-searchbox input::-webkit-search-cancel-button { -webkit-appearance: none; }
.scr-searchbox:focus-within { border-color: var(--scr-faint); }
.scr-wrap .scr-searchbox input:focus-visible { box-shadow: none !important; }
.scr-wrap :where(select.scr-select) {
	height: 40px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--scr-border);
	border-radius: 999px;
	background: var(--scr-surface);
	color: var(--scr-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;
}
.scr-section__head .scr-searchbox { flex: 0 1 240px; min-width: 170px; height: 36px; }

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

.scr-pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; }
.scr-pager[hidden] { display: none; }
.scr-pager__btn {
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--scr-border);
	border-radius: 10px;
	background: var(--scr-surface);
	color: var(--scr-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;
}
.scr-pager__btn.is-active { background: var(--scr-accent); border-color: var(--scr-accent); color: var(--scr-accent-fg); }
.scr-pager__btn:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .scr-pager__btn:not(.is-active):not(:disabled):hover { color: var(--scr-text); border-color: var(--scr-faint); } }
.scr-pager__gap { color: var(--scr-faint); font-size: 13px; padding: 0 2px; }

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

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

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

.scr-about { margin: 0 auto 0 0; }
/* 左右各 50%；圖片依客戶上傳的原比例如實顯示（不裁切、不變形） */
.scr-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.scr-about-grid--noimg { grid-template-columns: 1fr; }
.scr-about-grid .scr-ablock__side { position: sticky; top: 24px; }
.scr-ablock__img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--scr-shadow); }
.scr-ablock__group { margin: 0 0 26px; }
.scr-ablock__group:last-of-type { margin-bottom: 0; }
.scr-ablock__title { margin: 2px 0 10px; font-size: 19px; font-weight: 800; letter-spacing: 0.03em; }
.scr-ablock__socials { margin-top: 20px; }
.scr-prose a { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .scr-prose a:hover { opacity: 0.75; } }

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

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

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

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

.scr-plcard {
	display: flex;
	gap: 22px;
	background: var(--scr-surface);
	border: 1px solid var(--scr-border);
	border-radius: 16px;
	padding: 20px;
	margin-bottom: 18px;
	box-shadow: var(--scr-shadow);
}
.scr-plcard__cover { display: block; width: 132px; height: 132px; border-radius: 10px; overflow: hidden; flex: 0 0 auto; }
.scr-plcard__main { flex: 1 1 auto; min-width: 0; }
.scr-plcard__head { display: flex; align-items: flex-start; gap: 10px; }
.scr-plcard__headmain { flex: 1 1 auto; min-width: 0; }
.scr-plcard__title { margin: 2px 0 2px; font-size: 19px; font-weight: 900; }
@media (hover: hover) { .scr-plcard__title a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.scr-plcard__meta { margin: 0 0 10px; font-size: 12.5px; color: var(--scr-muted); }
.scr-plcard__desc { display: inline; }
.scr-plcard__desc::before { content: "・"; }
/* 曲目開闔：預設收合、一次只開一張（music.js 控制） */
.scr-plcard__fold {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--scr-border);
	border-radius: 999px;
	background: var(--scr-surface);
	color: var(--scr-muted);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) { .scr-plcard__fold:hover { color: var(--scr-text); border-color: var(--scr-faint); } }
.scr-plcard__chev { transition: transform 0.18s ease; }
.scr-plcard.is-open .scr-plcard__chev { transform: rotate(180deg); }
.scr-plcard__tracks { display: block; }
/* 收合＝露出前一兩首＋底部淡出（不要整塊藏起來留一片空白） */
.scr-plcard:not(.is-open) .scr-plcard__tracks {
	max-height: 128px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
	mask-image: linear-gradient(to bottom, #000 40%, transparent 96%);
}

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

.scr-tracklist { list-style: none; margin: 0; padding: 0; }
.scr-tracklist--flat {
	background: var(--scr-surface);
	border: 1px solid var(--scr-border);
	border-radius: 16px;
	padding: 6px 16px;
	box-shadow: var(--scr-shadow);
}
.scr-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(--scr-border-soft);
	font-size: 14px;
	border-radius: 8px;
	transition: background 0.15s ease;
}
.scr-track:first-child,
.scr-track.is-first-visible { border-top: 0; }
@media (hover: hover) { .scr-track:hover { background: color-mix(in srgb, var(--scr-surface-2) 55%, transparent) ; } }
.scr-track__no { color: var(--scr-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center; }
.scr-track__cover { width: 40px; height: 40px; border-radius: 6px; overflow: hidden; }
.scr-track__main { min-width: 0; display: flex; flex-direction: column; }
.scr-track__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .scr-track__title:hover { text-decoration: underline; text-underline-offset: 3px; } }
.scr-track__plays { min-width: 0; font-size: 11.5px; color: var(--scr-faint); font-variant-numeric: tabular-nums; }
.scr-track__plays-label { margin-left: 2px; }
.scr-songcounts { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; line-height: 1.35; }
.scr-songcount { display: inline-flex; align-items: center; gap: 3px; min-width: 0; white-space: nowrap; }
.scr-songcount .scr-ic { flex: 0 0 auto; }
.scr-plgrid__meta .scr-songcounts { margin-top: 2px; }
.scr-track__dur { color: var(--scr-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.scr-track__add,
.scr-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;
}
.scr-track__add {
	width: 30px;
	height: 30px;
	border: 1px solid var(--scr-border);
	background: transparent;
	color: var(--scr-faint);
}
@media (hover: hover) { .scr-track__add:hover { color: var(--scr-text); border-color: var(--scr-faint); } }
.scr-track__play {
	width: 36px;
	height: 36px;
	border: 1px solid var(--scr-border);
	background: var(--scr-surface);
	color: var(--scr-text);
}
.scr-track__play--none { border: 0; background: none; cursor: default; }
@media (hover: hover) {
	.scr-track__play:not(.scr-track__play--none):hover { background: var(--scr-accent); border-color: var(--scr-accent); color: var(--scr-accent-fg); }
}
.scr-track.is-current .scr-track__title { color: var(--scr-accent); }
.scr-wrap[data-scr-theme="light"] .scr-track.is-current .scr-track__title { color: var(--scr-brand, var(--scr-text)); }
.scr-track.is-current .scr-track__play { background: var(--scr-accent); border-color: var(--scr-accent); color: var(--scr-accent-fg); }

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

article.scr-single, header.scr-single { margin-top: 34px; }

/* 單頁底部返回導覽（活動 → 所有活動） */
.scr-backnav { display: flex; justify-content: center; margin-top: 44px; }

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

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

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

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

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

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

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

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

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

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

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

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

.scr-comments { margin-top: 48px; border-top: 1px solid var(--scr-border); padding-top: 30px; }
/* 在單曲 segmented 分頁內：不需要再隔一條線 */
.scr-mspane .scr-comments { margin-top: 6px; border-top: 0; padding-top: 0; }
.scr-song-pane { margin-top: 0; }
.scr-seg--song { margin: 34px 0 20px; }
/* 介紹／歌詞／留言：750px 置中＋淺灰底區塊，把範圍標出來 */
.scr-subcard {
	max-width: 750px;
	margin: 0 auto;
	background: var(--scr-surface-2);
	border-radius: 16px;
	padding: 26px 30px;
}
.scr-subcard .scr-comments { margin-top: 0; border-top: 0; padding-top: 0; }
.scr-comments__list, .scr-comments__list .children { list-style: none; margin: 0; padding: 0; }
.scr-comments__list .children { margin: 2px 0 6px 40px; }
.scr-comment { border: 0; }
.scr-comments__list > .scr-comment + .scr-comment { margin-top: 10px; }
.scr-comment__body { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.scr-comment__avatar { flex: 0 0 36px; }
.scr-comment__avatar img { width: 36px; height: 36px; object-fit: cover; border-radius: 999px; display: block; border: 2px solid var(--scr-surface); box-shadow: 0 0 0 1px var(--scr-border); }
.scr-comment--reply .scr-comment__avatar { flex-basis: 31px; }
.scr-comment--reply .scr-comment__avatar img { width: 31px; height: 31px; }
.scr-comment--official .scr-comment__avatar img { box-shadow: 0 0 0 2px var(--scr-accent); }
.scr-comment__main { flex: 1 1 auto; min-width: 0; }
.scr-comment__bubble { position: relative; width: fit-content; max-width: min(100%, 590px); padding: 8px 12px; border: 1px solid var(--scr-border); border-radius: 4px 15px 15px 15px; background: var(--scr-surface); }
.scr-comment--reply .scr-comment__bubble { border-radius: 14px 4px 14px 14px; background: var(--scr-surface-2); }
.scr-comment--official .scr-comment__bubble { border-color: color-mix(in srgb, var(--scr-accent) 36%, var(--scr-border)); }
.scr-comment__who { margin: 0 0 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.scr-comment__name { font-size: 13px; font-weight: 800; }
.scr-comment__official { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--scr-accent) 34%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--scr-accent) 10%, var(--scr-surface)); color: var(--scr-accent); font-size: 10px; font-weight: 800; letter-spacing: 0.04em; line-height: 1; }
.scr-comment__official::before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; border-radius: 999px; background: currentColor; }
.scr-comment__time { font-size: 11.5px; color: var(--scr-faint); }
.scr-comment__replyto { margin: 0 0 4px; color: var(--scr-muted); font-size: 11px; font-weight: 700; }
.scr-comment__pending { margin: 0 0 4px; font-size: 12px; color: var(--scr-faint); }
.scr-comment__text { font-size: 14px; line-height: 1.55; }
.scr-comment__text p { margin: 0; }
.scr-comment__actions { margin: 5px 0 0 5px; font-size: 12.5px; }
.scr-comment__actions a { color: var(--scr-faint); font-weight: 700; }
@media (hover: hover) { .scr-comment__actions a:hover { color: var(--scr-text); } }
.scr-comments__empty { color: var(--scr-muted); font-size: 14px; }
.scr-comments__gate {
	margin-top: 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	border: 1px dashed var(--scr-border);
	border-radius: 14px;
	padding: 18px 20px;
	background: var(--scr-surface);
}
.scr-comments__gate p { margin: 0; color: var(--scr-muted); font-size: 14px; }
.scr-comments__form { margin-top: 20px; }
.scr-comments__form-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; }
.scr-comments__form textarea {
	width: 100%;
	border: 1px solid var(--scr-border);
	border-radius: 12px;
	background: var(--scr-surface);
	color: var(--scr-text);
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	min-height: 104px;
}
.scr-comments__form textarea::placeholder { font-size: 13px; color: var(--scr-faint); }
.scr-comments__form textarea:focus { outline: none; border-color: var(--scr-faint); box-shadow: 0 0 0 3px var(--scr-ring); }
.scr-comments__form .form-submit { margin: 12px 0 0; display: flex; justify-content: flex-end; }
.scr-comments__submit { min-height: 32px; padding: 4px 14px; font-size: 13px; }
/* 送出鈕放在留言輸入框右下角；Turnstile 獨立在框外 */
.scr-form--inbtn .comment-form-comment { position: relative; margin: 0 0 10px; }
.scr-form--inbtn .comment-form-comment textarea { padding-bottom: 52px; display: block; }
.scr-form--inbtn .comment-form-comment .form-submit { position: absolute; right: 10px; bottom: 10px; margin: 0; }
.scr-comment--pending { opacity: 0.75; }
.scr-comments__namefield { margin: 0 0 10px; }
.scr-wrap .scr-comments__namefield input,
.scr-wrap .scr-comments__namefield input:focus {
	width: 220px;
	border: 1px solid var(--scr-border) !important;
	border-radius: 10px;
	background: var(--scr-surface) !important;
	box-shadow: none !important;
	color: var(--scr-text);
	font: inherit;
	font-size: 14px;
	padding: 8px 12px;
	outline: none;
	min-height: 0;
}
.scr-comments__replying {
	margin: 0 0 8px;
	font-size: 12.5px;
	color: var(--scr-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}
.scr-comments__replying b { color: var(--scr-text); }
.scr-comments__replying button { border: 0; background: none; color: var(--scr-faint); font-size: 12px; cursor: pointer; text-decoration: underline; }
.scr-comment__replybtn { border: 0; background: none; padding: 0; color: var(--scr-faint); font-size: 12.5px; font-weight: 700; cursor: pointer; }
@media (hover: hover) { .scr-comment__replybtn:hover { color: var(--scr-text); } }
.scr-comments__turnstile { margin: 4px 0 10px; }
.scr-comments__msg {
	margin: 8px 0 0;
	font-size: 13px;
	color: #B4231F;
}
.scr-comments__msg.is-ok { color: var(--scr-muted); }
/* Turnstile 驗證框：靠右、與送出鈕成一直排，縮小視覺份量 */
.scr-comments .cf-turnstile,
.scr-comments .comment-form-cf-turnstile {
	display: flex;
	justify-content: flex-end;
	margin: 12px 0 0;
	transform: scale(0.86);
	transform-origin: right center;
}
.scr-comments .comment-form-cookies-consent { font-size: 12.5px; color: var(--scr-muted); }
.scr-comments .comment-notes, .scr-comments .logged-in-as { font-size: 12.5px; color: var(--scr-faint); }
.scr-comments .nav-links { display: flex; justify-content: space-between; margin-top: 12px; font-size: 13px; }

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

.scr-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(--scr-surface) 92%, transparent);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--scr-border);
	border-radius: 18px;
	box-shadow: var(--scr-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;
}
/* 拖曳目標的虛線指示框 */
.scr-dock-ghost {
	position: fixed;
	border: 2px dashed var(--scr-faint, #97989E);
	border-radius: 18px;
	pointer-events: none;
	z-index: 999890;
	opacity: 0.8;
}
.scr-pbar.is-dragging { transition: none; cursor: grabbing; }
.scr-pbar.is-mini { width: max-content; }
.scr-pbar.is-mini .scr-pbar__wide-only { display: none; }
.scr-pbar.is-mini .scr-pbar__meta { flex: 0 1 150px; }
.scr-pbar .scr-ic-ball { display: none; }
.scr-pbar.is-mini .scr-ic-ball { display: inline-block; }
.scr-pbar.is-mini .scr-ic-min { display: none; }
.scr-pbar[hidden] { display: none !important; }
.scr-pbar.is-dock-left { left: 24px; transform: none; }
.scr-pbar.is-dock-right { left: auto; right: 24px; transform: none; }

/* 左右分鍵：一步一格（左｜中｜右）；不能再移的方向變淡、不可點 */
.scr-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(--scr-text);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.scr-pbar__dockbtn--l { margin-left: -6px; margin-right: -4px; }
.scr-pbar__dockbtn--r { margin-right: -6px; margin-left: -4px; }
@media (hover: hover) { .scr-pbar__dockbtn:not(:disabled):hover { background: var(--scr-surface-2); } }
.scr-pbar__dockbtn:disabled { color: var(--scr-faint); opacity: 0.35; cursor: default; }

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

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

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

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

/* 面板＝從播放列往上展開的浮窗（跟著停靠位置）；.is-full＝街聲式全螢幕 */
.scr-panel {
	position: fixed;
	left: 50%;
	bottom: 90px;
	transform: translateX(-50%);
	width: min(420px, calc(100vw - 24px));
	max-height: min(82vh, 700px);
	z-index: 999910; /* 高於浮動 icon */
}
/* 第二層展開：拉到整個視窗高度（歌詞看得更多）；展開後圖示翻轉成往下（收回方向） */
.scr-panel.is-tall { top: 14px; max-height: none; height: auto; }
.scr-panel.is-tall .scr-panel__sheet { height: 100%; }
.scr-panel.is-tall .scr-panel__tall { color: var(--scr-accent); }
.scr-panel.is-tall .scr-panel__tall .scr-ic { transform: rotate(180deg); }
.scr-panel__tall .scr-ic { transition: transform 0.18s ease; }
.scr-wrap[data-scr-theme="light"] .scr-panel.is-tall .scr-panel__tall { color: var(--scr-brand, var(--scr-text)); }
.scr-panel[hidden] { display: none; }
.scr-panel.is-dock-left { left: 24px; transform: none; }
.scr-panel.is-dock-right { left: auto; right: 24px; transform: none; }
.scr-panel__sheet {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	background: var(--scr-surface);
	color: var(--scr-text);
	border: 1px solid var(--scr-border);
	border-radius: 18px;
	box-shadow: var(--scr-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;
}

/* 雙引擎、單一切換器：inactive shell 只隱藏畫面，queue 與播放位置仍各自保留。 */
.scr-player-engine--inactive { display: none !important; }
.scr-player-bridge[hidden] { display: none !important; }
.scr-player-bridge {
	position: fixed;
	display: flex;
	align-items: center;
	gap: 7px;
	width: max-content;
	max-width: calc(100vw - 24px);
	padding: 5px;
	background: color-mix(in srgb, var(--scr-surface) 94%, transparent);
	color: var(--scr-text);
	border: 1px solid var(--scr-border);
	border-radius: 12px;
	box-shadow: var(--scr-shadow);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	z-index: 999920;
	transition: left 0.18s ease, bottom 0.18s ease;
}
.scr-player-bridge__label {
	padding-left: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--scr-muted);
}
.scr-player-bridge__sources { display: flex; width: max-content; gap: 2px; padding: 2px; background: var(--scr-surface-2); border-radius: 8px; }
.scr-player-bridge__sources button {
	padding: 5px 9px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--scr-muted);
}
.scr-player-bridge__sources button.is-active { background: var(--scr-surface); color: var(--scr-text); box-shadow: var(--scr-shadow); }
@media (hover: hover) { .scr-player-bridge__sources button:not(.is-active):hover { color: var(--scr-text); } }
@media (max-width: 560px) {
	.scr-player-bridge__label { display: none; }
	.scr-player-bridge { gap: 0; }
}

/* 私密聆聽入口：鎖定頁不輸出任何聲音標題、人物或媒體網址。 */
.scr-private {
	width: min(100%, 520px);
	margin: clamp(48px, 10vh, 110px) auto;
	padding: clamp(28px, 5vw, 44px);
	text-align: center;
	background: var(--scr-surface);
	border: 1px solid var(--scr-border);
	border-radius: 24px;
	box-shadow: var(--scr-shadow);
}
.scr-private__mark {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 18px;
	color: var(--scr-brand);
	background: var(--scr-brand-soft);
	border-radius: 50%;
}
.scr-private h1 { margin: 6px 0 10px; font-family: var(--scr-serif); font-size: clamp(26px, 5vw, 36px); }
.scr-private > p:not(.scr-eyebrow) { margin: 0; color: var(--scr-muted); }
.scr-private__form { margin-top: 28px; text-align: left; }
.scr-private__form label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.scr-private__inputrow { display: flex; gap: 10px; }
.scr-private__inputrow input {
	min-width: 0;
	flex: 1;
	padding: 11px 13px;
	color: var(--scr-text);
	background: var(--scr-bg);
	border: 1px solid var(--scr-border);
	border-radius: 10px;
}
.scr-private__inputrow input:focus { outline: 3px solid color-mix(in srgb, var(--scr-brand) 22%, transparent); border-color: var(--scr-brand); }
.scr-private__error { margin: 10px 0 0; color: var(--scr-danger, #b42318); font-size: 13px; }
@media (max-width: 520px) {
	.scr-private { margin: 28px auto; border-radius: 18px; }
	.scr-private__inputrow { flex-direction: column; }
	.scr-private__inputrow .scr-btn { justify-content: center; }
}
.scr-panel.is-open .scr-panel__sheet { opacity: 1; transform: translateY(0); }
.scr-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; }
.scr-panel__head-left { display: flex; align-items: center; gap: 2px; }
.scr-panel__fs,
.scr-panel__close { pointer-events: auto; border: 0; background: none; color: var(--scr-muted); cursor: pointer; padding: 6px; border-radius: 8px; }
@media (hover: hover) {
	.scr-panel__fs:hover,
	.scr-panel__close:hover { color: var(--scr-text); background: var(--scr-surface-2); }
}

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

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

/* 面板內：播放列表與歌詞共用一個穩定內容區，一次只顯示一組。 */
.scr-panel__accs { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; overflow: hidden; padding-right: 2px; }
.scr-panel:not(.is-full) .scr-panel__accs { flex-basis: clamp(220px, 30vh, 260px); min-height: 92px; }
.scr-acc { border-top: 1px solid var(--scr-border); }
.scr-acc:first-child { border-top: 0; }
.scr-panel:not(.is-full) .scr-acc { flex: 0 0 auto; min-height: 0; }
.scr-panel:not(.is-full) .scr-acc.is-open { display: flex; flex: 1 1 0; min-height: 0; flex-direction: column; }
.scr-panel:not(.is-full) .scr-acc.is-open .scr-acc__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.scr-acc__head { display: flex; align-items: center; gap: 8px; }
.scr-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(--scr-text);
	cursor: pointer;
}
.scr-acc__chev { color: var(--scr-faint); transition: transform 0.18s ease; }
.scr-acc.is-open .scr-acc__chev { transform: rotate(180deg); }
.scr-acc__body { display: none; padding: 0 0 10px; }
.scr-acc.is-open .scr-acc__body { display: block; }
.scr-panel__clear { border: 0; background: none; font-size: 12px; color: var(--scr-faint); cursor: pointer; padding: 4px 2px; }
@media (hover: hover) { .scr-panel__clear:hover { color: var(--scr-text); } }

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

.scr-panel__footer {
	display: flex;
	align-items: stretch;
	border-top: 1px solid var(--scr-border);
}
.scr-panel__collapse,
.scr-panel__minimize {
	flex: 1 1 100%;
	min-width: 0;
	min-height: 44px;
	border: 0;
	background: none;
	color: var(--scr-muted);
	font-size: 12.5px;
	font-weight: 700;
	padding: 10px 8px 2px;
	cursor: pointer;
}
.scr-panel__minimize { display: none; }
@media (hover: hover) {
	.scr-panel__collapse:hover,
	.scr-panel__minimize:hover { color: var(--scr-text); background: var(--scr-surface-2); }
}

/* 動態歌詞＝固定行數卡拉 OK 視窗：一般三行，加高／全螢幕七行。 */
.scr-lyricsync {
	--scr-lyrics-row: 48px;
	--scr-lyrics-visible-rows: 3;
	--scr-lyrics-edge-padding: var(--scr-lyrics-row);
	overflow: hidden;
	padding: 0 6px;
}
.scr-lyricsync__inner { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }
.scr-acc .scr-lyricsync.is-synced { height: calc(var(--scr-lyrics-row) * var(--scr-lyrics-visible-rows)); }
.scr-acc .scr-lyricsync.is-synced .scr-lyricsync__inner { padding-block: var(--scr-lyrics-edge-padding); }
.scr-panel.is-tall .scr-lyricsync.is-synced {
	--scr-lyrics-visible-rows: 7;
	--scr-lyrics-edge-padding: calc(var(--scr-lyrics-row) * 3);
}
.scr-acc .scr-lyricsync.is-synced .scr-lyricsync__line {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--scr-lyrics-row);
	padding-block: 0;
}
.scr-acc .scr-lyricsync:not(.is-synced) {
	max-height: min(300px, 42vh);
	overflow-y: auto;
	padding-block: 8px;
}
.scr-acc .scr-lyricsync.is-synced,
.scr-lyricsync--page.is-following {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
}
/* 單曲頁動態歌詞「顯示時間」 */
.scr-lyricsync__t {
	display: none;
	font-size: 11px;
	color: var(--scr-faint);
	font-variant-numeric: tabular-nums;
	margin-right: 12px;
	vertical-align: 1.5px;
}
.scr-lyricsync.show-time .scr-lyricsync__t { display: inline-block; min-width: 34px; text-align: right; }
.scr-lyrics-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.scr-lyrics-tools .scr-lyrics-live { margin-left: 0; }
/* 歌詞型態三段切換（小尺寸 segmented，靠左不置中） */
.scr-seg--mini { margin: 0; width: max-content; }
.scr-seg--mini .scr-seg__btn { padding: 5px 12px; font-size: 12.5px; }
.scr-lyrics-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.scr-lyrics-act {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--scr-border);
	border-radius: 999px;
	background: var(--scr-surface);
	color: var(--scr-muted);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}
@media (hover: hover) { .scr-lyrics-act:hover { color: var(--scr-text); border-color: var(--scr-faint); } }
/* 原始 LRC 檢視：等寬時間數字、保留原始換行 */
.scr-lyrics--raw {
	white-space: pre-wrap;
	font-size: 13.5px;
	line-height: 2;
	color: var(--scr-muted);
	font-variant-numeric: tabular-nums;
}
.scr-lyricsync__line {
	display: block;
	padding: 5px 0;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--scr-faint);
	transition: color 0.2s ease, font-size 0.2s ease;
	text-align: center;
}
.scr-lyricsync__line.is-hot { color: var(--scr-text); font-weight: 900; font-size: 15.5px; }
/* 單曲頁：平常全開靜態；跟著播放時變固定高的卡拉OK視窗（避免唱到跑出畫面） */
.scr-lyricsync--page { overflow: visible; }
.scr-lyricsync--page.is-following { height: 400px; overflow: hidden; }
.scr-lyricsync--page .scr-lyricsync__line { text-align: left; }
.scr-lyricsync__none { color: var(--scr-muted); font-size: 13px; text-align: center; padding: 20px 0; }

/* 前台輕量 toast */
.scr-toast {
	position: fixed;
	left: 50%;
	bottom: 88px;
	transform: translate(-50%, 8px);
	background: var(--scr-mono);
	color: var(--scr-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(--scr-shadow-lift);
}
.scr-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

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

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

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

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

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

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

/* 有主圖：右側 40% 依比例排版；無圖單欄 */
.scr-eventhero--withimg { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); gap: 40px; align-items: start; }
.scr-eventhero__side { min-width: 0; }
.scr-eventhero__img { border-radius: 16px; overflow: hidden; box-shadow: var(--scr-shadow-lift); }
.scr-eventhero__img--16x9 { aspect-ratio: 16 / 9; }
.scr-eventhero__img--1x1 { aspect-ratio: 1 / 1; }
.scr-eventhero__img .scr-cover__img { width: 100%; height: 100%; object-fit: cover; }
.scr-eventhero__status { margin: 0 0 12px; }
.scr-eventhero__desc { margin-top: 22px; max-width: 62em; }
.scr-single .scr-eventhero { margin-top: 30px; }
.scr-eventhero__title { margin: 0 0 14px; font-size: clamp(26px, 4.5vw, 38px); font-weight: 900; line-height: 1.25; letter-spacing: -0.01em; }
.scr-eventmeta { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; color: var(--scr-muted); font-size: 14.5px; }
.scr-eventmeta li { display: flex; align-items: center; gap: 10px; }
.scr-eventhero__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.scr-relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 14px; }
/* 主頁商品／文章：桌機固定四欄，避免 auto-fill 在寬畫面長出第五欄。 */
.scr-relgrid--products,
.scr-relgrid--news { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 商品圖 1:1、新聞圖 16:9 */
.scr-relgrid--products .scr-relcard__thumb { aspect-ratio: 1 / 1; }
.scr-relgrid--news .scr-relcard__thumb { aspect-ratio: 16 / 9; }
.scr-relcard {
	display: block;
	background: var(--scr-surface);
	border: 1px solid var(--scr-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--scr-shadow);
	transition: border-color 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) { .scr-relcard:hover { border-color: var(--scr-faint); } }
.scr-relcard__thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--scr-surface-2); }
.scr-relcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scr-relcard__title { display: block; padding: 10px 14px 2px; font-size: 14px; font-weight: 700; line-height: 1.5; }
.scr-relcard__meta { display: block; padding: 0 14px 12px; font-size: 12px; color: var(--scr-faint); }
.scr-relcard__price { color: var(--scr-text); font-weight: 700; }

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

@media (min-width: 721px) and (max-width: 900px) {
	.scr-relgrid--products,
	.scr-relgrid--news { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

	/* 活動單頁：主圖放最上面、單欄 */
	.scr-eventhero--withimg { grid-template-columns: 1fr; gap: 18px; }
	.scr-eventhero__side { order: -1; }

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

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

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

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

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

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

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

	.scr-seg { margin: 20px 0 4px; }
	.scr-seg--sub { margin: 20px 0 16px; }

	.scr-plcard { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px; align-items: start; }
	.scr-plcard__side { grid-column: 1; grid-row: 1; }
	.scr-plcard__main { display: contents; }
	.scr-plcard__head { grid-column: 2; grid-row: 1; }
	.scr-plcard__tracks,
	.scr-plcard__main > .scr-empty-inline { grid-column: 1 / -1; }
	.scr-plcard__tracks { margin-top: 2px; }
	.scr-plcard__cover { width: 84px; height: 84px; }

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

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

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

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

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

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

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

	.scr-comments__list .children { margin-left: 16px; }
	.scr-comment__body { gap: 8px; }
	.scr-comment__avatar { flex-basis: 32px; }
	.scr-comment__avatar img { width: 32px; height: 32px; }
	.scr-comment--reply .scr-comment__avatar { flex-basis: 28px; }
	.scr-comment--reply .scr-comment__avatar img { width: 28px; height: 28px; }
	.scr-comment__bubble { padding: 8px 10px; }
	.scr-btn { min-height: 44px; }
	.scr-tab { min-height: 44px; }
	.scr-calendar { max-width: none; }
}

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

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

/* ═══════════════════════════════════════════════════════════
   0.9.0 留聲譜元件層（歲月暖調）
   ═══════════════════════════════════════════════════════════ */

/* 標題用明體——回憶的字體 */
.scr-wrap :where(h1, h2, h3),
.scr-hero__title, .scr-vcard__title, .scr-today__title, .scr-personhero__name,
.scr-colhero__title, .scr-voicepage__title, .scr-timeline__year {
	font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
	letter-spacing: 0.02em;
}

/* ---------- 唱片（全站播放隱喻） ---------- */
.scr-vinyl {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--scr-text) 88%, var(--scr-bg)) 0 30%, transparent 31%),
		repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--scr-text) 82%, var(--scr-bg)) 0 2px, color-mix(in srgb, var(--scr-text) 92%, #000) 2px 4px);
	border: 1px solid color-mix(in srgb, var(--scr-text) 60%, var(--scr-bg));
}
.scr-vinyl__hole {
	width: 18%;
	height: 18%;
	border-radius: 50%;
	background: var(--scr-mono);
	box-shadow: 0 0 0 2px var(--scr-surface);
}
.scr-vinyl--big { width: 96px; height: 96px; }
.scr-vinyl--done { width: 64px; height: 64px; }
@media (prefers-reduced-motion: no-preference) {
	.is-playing .scr-vinyl, .scr-vcard.is-playing .scr-vcard__disc .scr-vinyl,
	[data-scr-rec-toggle].is-recording .scr-vinyl { animation: scr-spin 3.2s linear infinite; }
	@keyframes scr-spin { to { transform: rotate(360deg); } }
}

/* ---------- Hero ---------- */
.scr-hero { display: flex; gap: 36px; align-items: stretch; margin-bottom: 26px; flex-wrap: wrap; }
.scr-hero__main { flex: 1 1 320px; display: flex; flex-direction: column; justify-content: center; }
.scr-hero__title { font-size: clamp(30px, 4.5vw, 44px); font-weight: 700; margin: 0 0 10px; line-height: 1.25; }
.scr-hero__intro { color: var(--scr-muted); font-size: 16px; max-width: 34em; margin: 0 0 10px; }
.scr-hero__stats { color: var(--scr-faint); font-size: 13.5px; margin: 0 0 18px; }
.scr-hero__acts { display: flex; gap: 10px; }
.scr-today {
	flex: 0 1 300px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 22px 24px;
	background: var(--scr-surface-2);
	border: 1px solid var(--scr-border);
	border-radius: 18px;
}
.scr-today__badge {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--scr-mono);
	border: 1px solid color-mix(in srgb, var(--scr-mono) 45%, transparent);
	border-radius: 999px;
	padding: 2px 12px;
}
.scr-today__disc { display: block; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; }
.scr-today__disc .scr-cover__img, .scr-today__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.scr-today__title { font-size: 17px; font-weight: 700; }
.scr-today__title:hover { color: var(--scr-mono); }
.scr-today__meta { margin: 0; color: var(--scr-muted); font-size: 13px; }
.scr-today__acts { display: flex; gap: 8px; }

/* ---------- 分頁導覽 ---------- */
.scr-nav { display: flex; gap: 4px; margin: 4px 0 20px; background: var(--scr-surface-2); border: 1px solid var(--scr-border-soft); border-radius: 12px; padding: 4px; width: max-content; max-width: 100%; overflow-x: auto; }
.scr-nav__item { padding: 7px 16px; border-radius: 9px; font-size: 14.5px; color: var(--scr-muted); white-space: nowrap; }
.scr-nav__item.is-active { background: var(--scr-surface); color: var(--scr-text); font-weight: 700; box-shadow: var(--scr-shadow); }
@media (hover: hover) and (pointer: fine) { .scr-nav__item:hover { color: var(--scr-text); } }

/* ---------- 篩選 ---------- */
.scr-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.scr-seg { display: flex; gap: 3px; background: var(--scr-surface-2); border-radius: 10px; padding: 3px; max-width: 100%; overflow-x: auto; }
.scr-seg__btn { padding: 5px 13px; border-radius: 8px; font-size: 13.5px; color: var(--scr-muted); white-space: nowrap; }
.scr-seg__btn.is-active { background: var(--scr-surface); color: var(--scr-text); font-weight: 700; box-shadow: var(--scr-shadow); }
.scr-filters__side { display: flex; gap: 8px; }
.scr-filters__sel select {
	font: inherit;
	font-size: 13.5px;
	color: var(--scr-text);
	background: var(--scr-surface);
	border: 1px solid var(--scr-border);
	border-radius: 9px;
	padding: 6px 10px;
	max-width: 160px;
}
.scr-filters__sel .scr-combo__btn { min-width: 150px; justify-content: space-between; }

/* ---------- 聲音牆 ---------- */
.scr-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .scr-wall { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .scr-wall { grid-template-columns: 1fr; } }
.scr-wall__none { grid-column: 1 / -1; text-align: center; color: var(--scr-muted); padding: 32px 0; }
.scr-vcard {
	position: relative;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px;
	background: var(--scr-surface);
	border: 1px solid var(--scr-border);
	border-radius: 16px;
	box-shadow: var(--scr-shadow);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
	.scr-vcard:hover { box-shadow: var(--scr-shadow-lift); transform: translateY(-1px); }
}
.scr-vcard__disc { position: relative; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.scr-vcard__disc .scr-cover__img, .scr-vcard__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.scr-vcard__playic {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF9F0;
	background: rgba(43, 36, 26, 0.34);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.15s ease;
}
button.scr-vcard__disc:focus-visible .scr-vcard__playic, .scr-vcard.is-playing .scr-vcard__playic { opacity: 1; }
@media (hover: hover) and (pointer: fine) { button.scr-vcard__disc:hover .scr-vcard__playic { opacity: 1; } }
@media (hover: none) { button.scr-vcard__disc .scr-vcard__playic { opacity: 1; background: rgba(43, 36, 26, 0.22); } }
.scr-vcard .scr-ic-pause { display: none; }
.scr-vcard.is-playing .scr-vcard__playic .scr-ic-pause { display: inline-block; }
.scr-vcard.is-playing .scr-vcard__playic .scr-ic-play { display: none; }
.scr-vcard__main { min-width: 0; flex: 1; }
.scr-vcard__title { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.5; }
.scr-vcard__title:hover { color: var(--scr-mono); }
.scr-vcard__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 3px 0 6px; color: var(--scr-muted); font-size: 12.5px; }
.scr-vcard__person { font-weight: 600; color: var(--scr-muted); display: inline-flex; align-items: center; gap: 3px; }
.scr-vcard__person:hover { color: var(--scr-mono); }
.scr-vcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.scr-vcard__stats { display: inline-flex; gap: 10px; color: var(--scr-faint); font-size: 12px; }
.scr-stat { display: inline-flex; align-items: center; gap: 3px; }
.scr-vcard__add {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--scr-faint);
	border: 1px solid transparent;
}
@media (hover: hover) and (pointer: fine) {
	.scr-vcard__add:hover { color: var(--scr-mono); border-color: var(--scr-border); background: var(--scr-surface-2); }
}
.scr-vcard--invite {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	border-style: dashed;
	background: var(--scr-surface-2);
	box-shadow: none;
	color: var(--scr-muted);
	font-size: 14.5px;
}
.scr-vcard--invite p { margin: 0; }
.scr-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--scr-muted);
	border: 1px solid var(--scr-border);
	border-radius: 999px;
	padding: 2px 10px;
	background: var(--scr-surface);
}
.scr-chip--person { font-weight: 700; color: var(--scr-text); }
.scr-chip--soft { border-style: dashed; }
.scr-flame { color: var(--scr-mono); margin-left: 2px; }

/* ---------- 空狀態 ---------- */
.scr-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 56px 20px; }
.scr-empty__title { font-size: 19px; font-weight: 700; margin: 0; }
.scr-empty__text { color: var(--scr-muted); margin: 0 0 6px; }

/* ---------- 人物列表 ---------- */
.scr-persons { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.scr-pcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	padding: 24px 16px;
	background: var(--scr-surface);
	border: 1px solid var(--scr-border);
	border-radius: 16px;
	box-shadow: var(--scr-shadow);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) { .scr-pcard:hover { box-shadow: var(--scr-shadow-lift); transform: translateY(-1px); } }
.scr-pcard__avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--scr-surface-2); color: var(--scr-faint); }
.scr-pcard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.scr-pcard__name { font-weight: 700; font-size: 16px; display: inline-flex; align-items: center; gap: 4px; }
.scr-pcard__count { color: var(--scr-faint); font-size: 12.5px; }
.scr-pcard--memorial { background: color-mix(in srgb, var(--scr-surface) 92%, var(--scr-mono)); }

/* ---------- 人物頁 ---------- */
.scr-personhero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 24px; background: var(--scr-surface-2); border: 1px solid var(--scr-border); border-radius: 18px; margin-bottom: 24px; }
.scr-personhero--memorial { background: color-mix(in srgb, var(--scr-surface-2) 90%, var(--scr-mono)); }
.scr-personhero__avatar { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--scr-surface); color: var(--scr-faint); }
.scr-personhero__avatar img { width: 100%; height: 100%; object-fit: cover; }
.scr-personhero__main { flex: 1 1 260px; min-width: 0; }
.scr-personhero__name { font-size: 26px; font-weight: 700; margin: 0 0 2px; display: inline-flex; align-items: center; gap: 6px; }
.scr-personhero__years { color: var(--scr-faint); font-size: 13px; margin: 0 0 6px; }
.scr-personhero__bio { color: var(--scr-muted); font-size: 14.5px; margin: 0; max-width: 40em; }
.scr-personhero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.scr-personhero__stats { color: var(--scr-muted); font-size: 13px; margin: 0; }

/* ---------- 時光軸 ---------- */
.scr-timeline { position: relative; padding-left: 56px; }
.scr-timeline::before { content: ""; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--scr-border); }
.scr-timeline__group { position: relative; margin-bottom: 26px; }
.scr-timeline__year {
	position: relative;
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--scr-mono);
}
.scr-timeline__year::before {
	content: "";
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--scr-mono);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--scr-mono) 18%, transparent);
}
.scr-timeline__year--soft { color: var(--scr-faint); }
.scr-timeline__year--soft::before { background: var(--scr-faint); box-shadow: none; }
.scr-personfoot { display: flex; justify-content: center; margin-top: 28px; }
@media (max-width: 560px) { .scr-timeline { padding-left: 34px; } .scr-timeline::before { left: 11px; } .scr-timeline__year::before { left: -23px; } }

/* ---------- 聲音列（tracklist 補充） ---------- */
.scr-track__when { flex: 0 0 auto; color: var(--scr-faint); font-size: 12.5px; }
.scr-track__sub { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--scr-faint); font-size: 12px; }

/* ---------- 聲音頁 ---------- */
.scr-voicepage { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(240px, 1fr); gap: 28px; }
@media (max-width: 860px) { .scr-voicepage { grid-template-columns: 1fr; } }
.scr-voicehero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 30px 20px; background: var(--scr-surface-2); border: 1px solid var(--scr-border); border-radius: 18px; margin-bottom: 20px; }
.scr-voicehero__disc { width: 128px; height: 128px; border-radius: 50%; overflow: hidden; display: block; }
.scr-voicehero__disc .scr-cover__img, .scr-voicehero__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.scr-voicepage.is-playing .scr-voicehero__disc, .scr-voicepage .is-playing .scr-voicehero__disc { }
.scr-voicehero__dur { opacity: 0.75; font-size: 13px; }
.scr-voicepage__title { font-size: clamp(24px, 3.6vw, 32px); font-weight: 700; margin: 0 0 10px; line-height: 1.35; }
.scr-voicepage__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.scr-voicepage__when { color: var(--scr-faint); font-size: 13px; }
.scr-voicepage__story { color: var(--scr-text); font-size: 15.5px; line-height: 1.9; margin-bottom: 18px; max-width: 42em; }
.scr-voicepage__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.scr-transcript { border: 1px solid var(--scr-border); border-radius: 12px; margin-bottom: 22px; background: var(--scr-surface); }
.scr-transcript summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px; }
.scr-transcript__body { padding: 0 16px 14px; color: var(--scr-muted); font-size: 14.5px; line-height: 1.9; }

/* 想念按鈕 */
.scr-missbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 18px;
	border-radius: 999px;
	border: 1px solid var(--scr-border);
	background: var(--scr-surface);
	color: var(--scr-text);
	font-size: 14.5px;
	font-weight: 600;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
@media (hover: hover) and (pointer: fine) { .scr-missbtn:hover { border-color: var(--scr-mono); color: var(--scr-mono); } }
.scr-missbtn.is-missed { background: color-mix(in srgb, var(--scr-mono) 12%, var(--scr-surface)); border-color: var(--scr-mono); color: var(--scr-mono); }
.scr-missbtn.is-missed .scr-missbtn__ic { fill: currentColor; }
.scr-missbtn__count { color: var(--scr-faint); font-weight: 400; }
.scr-missbtn.is-missed .scr-missbtn__count { color: inherit; }

/* 側欄 */
.scr-sidecard { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 22px 18px; background: var(--scr-surface-2); border: 1px solid var(--scr-border); border-radius: 16px; margin-bottom: 18px; }
.scr-sidecard--memorial { background: color-mix(in srgb, var(--scr-surface-2) 90%, var(--scr-mono)); }
.scr-sidecard__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--scr-surface); color: var(--scr-faint); }
.scr-sidecard__avatar img { width: 100%; height: 100%; object-fit: cover; }
.scr-sidecard__name { font-weight: 700; font-size: 16.5px; margin: 0; display: inline-flex; align-items: center; gap: 4px; }
.scr-sidecard__years { color: var(--scr-faint); font-size: 12.5px; margin: 0; }
.scr-sidecard__bio { color: var(--scr-muted); font-size: 13.5px; margin: 2px 0 4px; }
.scr-sidecard__link { margin-top: 4px; }
.scr-sidelist .scr-section__title { font-size: 16px; }

/* ---------- 聲音集 ---------- */
.scr-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.scr-colcard { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--scr-surface); border: 1px solid var(--scr-border); border-radius: 16px; box-shadow: var(--scr-shadow); transition: box-shadow 0.18s ease, transform 0.18s ease; }
@media (hover: hover) and (pointer: fine) { .scr-colcard:hover { box-shadow: var(--scr-shadow-lift); transform: translateY(-1px); } }
.scr-colcard__cover { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--scr-surface-2); }
.scr-colcard__cover .scr-cover__img { width: 100%; height: 100%; object-fit: cover; }
.scr-colcard__cover .scr-cover__ph, .scr-colcard__cover .scr-vinyl { width: 100%; height: 100%; border-radius: 12px; }
.scr-colcard__name { font-weight: 700; font-size: 15.5px; }
.scr-colcard__count { color: var(--scr-faint); font-size: 12.5px; }
.scr-colhero { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding: 24px; background: var(--scr-surface-2); border: 1px solid var(--scr-border); border-radius: 18px; margin-bottom: 22px; }
.scr-colhero__cover { width: 120px; height: 120px; border-radius: 14px; overflow: hidden; flex: 0 0 auto; }
.scr-colhero__cover .scr-cover__img, .scr-colhero__cover .scr-vinyl, .scr-colhero__cover .scr-cover__ph { width: 100%; height: 100%; object-fit: cover; }
.scr-colhero__main { flex: 1 1 240px; min-width: 0; }
.scr-colhero__kicker { color: var(--scr-mono); font-size: 12px; letter-spacing: 0.14em; margin: 0 0 2px; }
.scr-colhero__title { font-size: 26px; font-weight: 700; margin: 0 0 6px; }
.scr-colhero__desc { color: var(--scr-muted); font-size: 14.5px; margin-bottom: 8px; max-width: 40em; }
.scr-colhero__stats { color: var(--scr-faint); font-size: 13px; margin: 0 0 10px; }

/* ---------- 投稿 modal ---------- */
html.scr-submit-open { overflow: hidden; }
.scr-submit { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(30, 24, 16, 0.55); backdrop-filter: blur(3px); }
.scr-submit__sheet {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100dvh - 36px);
	overflow-y: auto;
	background: var(--scr-surface);
	color: var(--scr-text);
	border: 1px solid var(--scr-border);
	border-radius: 20px;
	padding: 28px 26px;
	box-shadow: var(--scr-shadow-lift);
}
.scr-submit__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--scr-faint); }
@media (hover: hover) and (pointer: fine) { .scr-submit__close:hover { background: var(--scr-surface-2); color: var(--scr-text); } }
.scr-submit__title { font-size: 21px; font-weight: 700; margin: 0 0 6px; }
.scr-submit__lede { color: var(--scr-muted); margin: 0 0 18px; }
.scr-submit__options { display: grid; gap: 12px; margin-bottom: 14px; }
.scr-submit__option {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	padding: 20px 16px;
	border: 1px solid var(--scr-border);
	border-radius: 16px;
	background: var(--scr-surface-2);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (hover: hover) and (pointer: fine) { .scr-submit__option:hover { border-color: var(--scr-mono); box-shadow: var(--scr-shadow); } }
.scr-submit__option b { font-size: 15.5px; }
.scr-submit__option span:last-child { color: var(--scr-faint); font-size: 13px; }
.scr-submit__optic { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--scr-mono) 12%, var(--scr-surface)); color: var(--scr-mono); margin-bottom: 4px; }
.scr-submit__hint { color: var(--scr-faint); font-size: 12.5px; text-align: center; margin: 0; }
.scr-submit__back { display: inline-flex; align-items: center; gap: 4px; color: var(--scr-muted); font-size: 14px; margin-bottom: 10px; }
.scr-submit__recstate { text-align: center; color: var(--scr-muted); margin: 4px 0 16px; }
.scr-submit__disc { position: relative; display: block; width: 112px; height: 112px; margin: 0 auto 14px; border-radius: 50%; }
.scr-submit__disc .scr-vinyl { width: 100%; height: 100%; }
.scr-submit__discic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #FFF9F0; }
.scr-submit__disc .scr-ic-stop { display: none; }
.scr-submit__disc.is-recording .scr-ic-stop { display: inline-block; }
.scr-submit__disc.is-recording .scr-ic-mic { display: none; }
.scr-submit__disc.is-recording { box-shadow: 0 0 0 6px color-mix(in srgb, var(--scr-mono) 25%, transparent); }
.scr-submit__timer { text-align: center; font-size: 20px; margin: 0 0 12px; font-variant-numeric: tabular-nums; }
.scr-submit__timer span { color: var(--scr-faint); font-size: 14px; }
.scr-submit__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 48px; margin-bottom: 14px; }
.scr-submit__wave span { width: 4px; height: 8px; border-radius: 3px; background: var(--scr-mono); opacity: 0.75; transition: height 0.08s linear; }
.scr-submit__err { color: #A04B36; font-size: 13.5px; background: color-mix(in srgb, #A04B36 10%, var(--scr-surface)); border-radius: 10px; padding: 10px 14px; margin: 10px 0 0; }
.scr-wrap[data-scr-theme="dark"] .scr-submit__err { color: #E09578; }
.scr-submit__preview { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--scr-border); border-radius: 12px; background: var(--scr-surface-2); margin-bottom: 14px; }
.scr-submit__pvplay { width: 34px; height: 34px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--scr-mono); color: var(--scr-mono-fg); }
.scr-submit__pvplay .scr-ic-pause { display: none; }
.scr-submit__pvplay.is-playing .scr-ic-pause { display: inline-block; }
.scr-submit__pvplay.is-playing .scr-ic-play { display: none; }
.scr-submit__pvname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.scr-submit__pvdur { color: var(--scr-faint); font-size: 12.5px; }
.scr-submit__redo { display: inline-flex; align-items: center; gap: 4px; color: var(--scr-muted); font-size: 13px; }
.scr-field { display: block; margin-bottom: 14px; }
.scr-field__label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.scr-submit__form input[type="text"], .scr-submit__form textarea {
	width: 100%;
	font: inherit;
	font-size: 15px;
	color: var(--scr-text);
	background: var(--scr-surface);
	border: 1px solid var(--scr-border);
	border-radius: 10px;
	padding: 10px 12px;
}

/* 投稿可自填人物 combobox：輸入框本身即搜尋欄，停用瀏覽器原生 datalist。 */
.scr-editcombo { position: relative; }
.scr-submit__form .scr-editcombo > input[type="text"] { padding-right: 44px; }
.scr-editcombo__toggle {
	position: absolute;
	top: 1px;
	right: 1px;
	display: flex;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	color: var(--scr-muted);
	border-radius: 10px;
}
.scr-editcombo.is-open .scr-editcombo__toggle .scr-ic { transform: rotate(180deg); }
.scr-editcombo__toggle .scr-ic { transition: transform 0.15s ease; }
.scr-editcombo__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 100;
	max-height: 220px;
	overflow-y: auto;
	padding: 6px;
	background: var(--scr-surface);
	border: 1px solid var(--scr-border);
	border-radius: 12px;
	box-shadow: var(--scr-shadow-lift);
}
.scr-editcombo__option {
	display: block;
	width: 100%;
	padding: 9px 12px !important;
	border-radius: 8px;
	text-align: left;
	font-size: 14px;
	color: var(--scr-text);
}
.scr-editcombo__option.is-active { background: var(--scr-surface-2); }
.scr-editcombo__option[aria-selected="true"] { color: var(--scr-accent); font-weight: 700; }
.scr-editcombo__empty { margin: 0; padding: 9px 12px; color: var(--scr-muted); font-size: 13px; }
.scr-submit__form input[type="text"]:focus-visible, .scr-submit__form textarea:focus-visible { outline: 2px solid var(--scr-ring); border-color: var(--scr-mono); }
.scr-submit__cats { display: flex; flex-wrap: wrap; gap: 6px; }
.scr-chip--pick { cursor: pointer; }
.scr-chip--pick.is-active { background: var(--scr-mono); border-color: var(--scr-mono); color: var(--scr-mono-fg); }
.scr-submit__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.scr-submit__turnstile { margin-bottom: 12px; }
.scr-submit__send { width: 100%; justify-content: center; }
.scr-submit__done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 0 6px; }
.scr-submit__doneacts { display: flex; gap: 10px; margin-top: 8px; }
.scr-submit__gate { text-align: center; padding: 16px 0 8px; }
.scr-submit__gate p { color: var(--scr-muted); margin: 0 0 14px; }

/* ---------- 雜項 ---------- */
.scr-submitbtn { white-space: nowrap; }
.scr-about__text { color: var(--scr-text); }

/* ---------- 0.9.1 版面修正 ---------- */
/* 聲音列＝5 欄（無序號欄）：封面／主欄／錄音時間／加入／播放 */
.scr-track { grid-template-columns: 44px minmax(0, 1fr) auto 32px 36px; }
.scr-track__cover { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.scr-track__cover .scr-cover__img, .scr-track__cover .scr-vinyl { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* 麵包屑間距 */
.scr-backnav { display: flex; align-items: center; gap: 8px; margin: 2px 0 18px; color: var(--scr-muted); font-size: 13.5px; }
.scr-backnav a { display: inline-flex; align-items: center; gap: 3px; }
@media (hover: hover) and (pointer: fine) { .scr-backnav a:hover { color: var(--scr-mono); } }
.scr-backnav__sep { color: var(--scr-faint); }