/* melody — 粉希望音樂佈景（粉紅晨曦：粉、蜜桃、薰衣草） */
:root {
  --bg: #fff7fa;
  --surface: #ffffff;
  --surface2: #fff0f5;
  --line: #f7d6e3;
  --text: #3b2232;
  --muted: #8b6879;
  --pink: #ff5c9a;
  --rose: #d6286f;
  --deep: #e2337f;
  --peach: #ffb38a;
  --coral: #ff7a59;
  --lavender: #a993ff;
  --sky: #8fd3ff;
  --grad: linear-gradient(110deg, var(--deep), #ff6f9f 50%, var(--coral));
  --grad-soft: linear-gradient(120deg, #ffd3e3, #ffe2cf 50%, #e6deff);
  --shadow: 0 10px 30px rgba(226, 51, 127, .12);
  --shadow-lg: 0 20px 50px rgba(226, 51, 127, .18);
  --radius: 18px;
  --player-h: 0px;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* hidden 屬性一律隱藏（避免被 .btn 等 display 規則蓋掉） */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.75 system-ui, -apple-system, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  padding-bottom: var(--player-h);
  overflow-x: hidden;
}
body.has-player { --player-h: 84px; }
a { color: var(--rose); text-decoration: none; }
a:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
svg { width: 1em; height: 1em; flex: none; }
img { max-width: 100%; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.main { flex: 1; padding-top: 28px; padding-bottom: 64px; }
.muted { color: var(--muted); }

/* 背景晨曦光暈與閃光 */
.bg-glow {
  position: fixed; inset: -10% -10% auto; height: 80vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 45% at 12% 22%, rgba(255, 143, 177, .35), transparent 70%),
    radial-gradient(34% 40% at 88% 12%, rgba(169, 147, 255, .25), transparent 70%),
    radial-gradient(30% 40% at 62% 55%, rgba(255, 179, 138, .25), transparent 70%);
}
.spark { position: absolute; color: #ffc2d8; animation: twinkle 3.2s infinite ease-in-out; }
.spark.s1 { top: 18%; left: 8%; width: 22px; height: 22px; }
.spark.s2 { top: 9%; right: 22%; width: 16px; height: 16px; color: #c9b8ff; animation-delay: -1.1s; }
.spark.s3 { top: 46%; right: 6%; width: 26px; height: 26px; color: #ffcdb2; animation-delay: -2s; }
@keyframes twinkle { 0%, 100% { opacity: .35; transform: scale(.8) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }

/* ---------- equalizer ---------- */
.eq, .bars { display: inline-flex; align-items: flex-end; gap: 2px; }
.eq i, .bars i { border-radius: 2px; animation: eq 1s infinite ease-in-out; }
.bars i:nth-child(2) { animation-delay: -.3s; } .bars i:nth-child(3) { animation-delay: -.6s; } .bars i:nth-child(4) { animation-delay: -.2s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .bars i, .spin .disc, .is-spinning .disc, .spark, body.is-playing .pl-cover { animation: none !important; }
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--text); }
.logo:hover { color: var(--text); text-decoration: none; }
.logo-mark { width: 40px; height: 40px; color: var(--pink); filter: drop-shadow(0 4px 10px rgba(255, 92, 154, .4)); transition: transform .3s; }
.logo:hover .logo-mark { transform: scale(1.08) rotate(-6deg); }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text b { font-size: 22px; letter-spacing: 1px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-text small { font-size: 11px; color: var(--muted); letter-spacing: 3px; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.nav::-webkit-scrollbar { display: none; }
.nav a { color: var(--muted); padding: 6px 14px; border-radius: 999px; white-space: nowrap; font-size: 15px; }
.nav a:hover { color: var(--rose); background: var(--surface2); text-decoration: none; }
.nav a.active { color: #fff; background: var(--grad); box-shadow: 0 4px 14px rgba(226, 51, 127, .3); }
.nav .nav-fb { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: #1877f2; border: 1px solid #d6e4fb; }
.nav .nav-fb:hover { color: #fff; background: #1877f2; }
@media (max-width: 640px) { .header-inner { padding-top: 8px; padding-bottom: 6px; } .nav { width: 100%; } }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; margin: 8px 0 48px; }
.hero.has-video { grid-template-columns: .9fr 1.1fr; }
.kicker { margin: 0 0 4px; font-size: 12px; letter-spacing: 4px; color: var(--rose); font-weight: 700; }
.hero h1 { font-size: clamp(42px, 7vw, 72px); line-height: 1.1; margin: 0 0 8px; letter-spacing: 2px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { font-size: 19px; font-weight: 700; margin: 0 0 12px; color: var(--text); }
.lead { color: var(--muted); font-size: 17px; margin: 0 0 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-art { display: grid; place-items: center; }
@media (max-width: 860px) { .hero, .hero.has-video { grid-template-columns: 1fr; gap: 28px; } .hero-art { display: none; } }

/* ---------- 頂部播放區（最新單曲 / 點播） ---------- */
.stage-slot { position: relative; }
.stage-page { max-width: 960px; margin: 0 auto 40px; }
.stage { margin: 0; background: var(--surface); border-radius: calc(var(--radius) + 6px); padding: 10px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); scroll-margin-top: 90px; }
.stage-screen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #2a1d26; }
.stage-screen > .video-player { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.stage-screen.is-reel { background: radial-gradient(circle at 50% 40%, #5a2c49, #2a1d26 70%); }
.stage-start { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.stage-start .reel-ph { inset: 0 auto; left: 50%; width: auto; height: 100%; aspect-ratio: 9 / 16; transform: translateX(-50%); }
.stage-start .play-btn { opacity: 1; right: 50%; bottom: 50%; transform: translate(50%, 50%); }
/* Reels：播放區改為直式加高，讓影片盡量放大 */
.stage.is-reel-mode .stage-screen { aspect-ratio: auto; height: min(80vh, 760px); }
.play-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1; padding: 8px 18px; border-radius: 999px; pointer-events: none;
  color: #fff; font-weight: 700; white-space: nowrap; background: var(--grad); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: bob 1.4s ease-in-out infinite; transition: opacity .3s; }
.play-hint.gone { opacity: 0; }
@keyframes bob { 50% { transform: translate(-50%, -6px); } }
.stage.is-popped { visibility: hidden; }
.stage-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 6px 2px; }
.stage-caption a { color: var(--text); }
.stage-caption .muted { font-size: 14px; }
.stage-tools { margin-left: auto; display: flex; gap: 6px; }
.tool { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 13px; cursor: pointer; }
.tool:hover { color: var(--rose); border-color: var(--pink); }
.tool[aria-pressed="true"] { color: #fff; background: var(--grad); border-color: transparent; }
.only-float { display: none; }
.stage-docked { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px dashed #f3a6c4; border-radius: calc(var(--radius) + 6px); background: var(--grad-soft); color: var(--muted); }
.stage-docked[hidden] { display: none; }
.stage-docked > svg { width: 40px; height: 40px; color: var(--rose); }
.stage-docked p { margin: 0; }
/* 浮動視窗 */
.stage.is-floating { position: fixed; z-index: 40; right: 16px; bottom: calc(var(--player-h) + 16px); width: min(400px, calc(100vw - 32px)); padding: 6px; border-radius: 16px; box-shadow: 0 20px 50px rgba(59, 34, 50, .35); animation: float-in .25s ease-out; }
.stage.is-floating.is-reel-mode { width: 240px; }
.stage.is-floating.is-reel-mode .stage-screen { aspect-ratio: 9 / 16; height: auto; }
.stage.is-floating .stage-screen { border-radius: 12px; }
.stage.is-floating .stage-caption { flex-wrap: nowrap; padding: 6px 2px 0; gap: 6px; }
.stage.is-floating [data-stage-badge], .stage.is-floating [data-stage-meta] { display: none; }
.stage.is-floating [data-stage-link] { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage.is-floating .tool { padding: 4px 8px; }
.stage.is-floating.is-reel-mode .tool span { display: none; }
.stage.is-floating .only-float { display: inline-flex; }
@keyframes float-in { from { opacity: 0; transform: translateY(20px) scale(.96); } }
/* 全螢幕 */
.stage-screen:fullscreen { border-radius: 0; background: #000; height: 100%; }
.stage-screen:fullscreen > .video-player { object-fit: contain; }
.stage .tool[data-stage-full][aria-pressed="true"] { color: var(--muted); background: var(--surface); border-color: var(--line); }
.fs-exit { display: none; position: absolute; top: 16px; right: 16px; z-index: 2; align-items: center; gap: 6px; padding: 8px 16px; border: 0; border-radius: 999px;
  color: #fff; background: rgba(0, 0, 0, .55); font-size: 15px; cursor: pointer; backdrop-filter: blur(6px); }
.fs-exit:hover { background: var(--deep); }
.stage-screen:fullscreen .fs-exit { display: inline-flex; }
.stage-screen:-webkit-full-screen .fs-exit { display: inline-flex; }
@media (max-width: 600px) {
  .stage-tools { margin-left: 0; width: 100%; }
  .stage.is-floating { width: calc(100vw - 32px); }
  .stage.is-floating.is-reel-mode { width: 180px; }
  .stage.is-floating .stage-tools { width: auto; }
}

/* ---------- toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.search { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.search:focus-within { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 92, 154, .18); }
.search svg { color: var(--pink); }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: inherit; padding: 10px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; font-size: 14px; }
.chip:hover { color: var(--rose); border-color: var(--pink); }
.chip.active { color: #fff; border-color: transparent; background: var(--grad); }

/* ---------- vinyl ---------- */
.vinyl { position: relative; width: min(340px, 80vw); aspect-ratio: 1; }
.vinyl .disc {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255, 255, 255, .06) 31.5% 32%, transparent 32.5%),
    repeating-radial-gradient(circle, #2a1d26 0 2px, #35252f 2px 4px), #2a1d26;
  box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--line), 0 30px 70px rgba(226, 51, 127, .3);
}
.vinyl .disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 10%, rgba(255, 192, 216, .16) 14%, transparent 20% 60%, rgba(255, 255, 255, .1) 64%, transparent 70%); }
.vinyl .label, .vinyl .label-img {
  width: 36%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; position: relative; z-index: 1;
  display: grid; place-items: center; text-align: center; font-weight: 800; font-size: 17px; line-height: 1.3; letter-spacing: 2px; color: #fff;
  background: var(--grad); box-shadow: 0 0 0 3px #2a1d26;
}
.vinyl .disc::before { content: ""; position: absolute; width: 3%; aspect-ratio: 1; border-radius: 50%; background: #fff; z-index: 2; }
.vinyl.small { width: 120px; margin: 0 auto 12px; }
.spin .disc, .is-spinning .disc { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.vinyl .tonearm {
  position: absolute; top: -2%; right: 0; width: 10%; height: 56%; transform-origin: 50% 6%; transform: rotate(4deg); transition: transform .6s ease;
  background: linear-gradient(#e7c9d6, #b88ea2) center / 4px 100% no-repeat;
}
.vinyl .tonearm::before { content: ""; position: absolute; top: 0; left: 50%; width: 26px; height: 26px; transform: translate(-50%, -30%); border-radius: 50%; background: radial-gradient(circle, #fff 30%, var(--pink) 32%); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.vinyl .tonearm::after { content: ""; position: absolute; bottom: -4px; left: 50%; width: 14px; height: 24px; transform: translateX(-50%) rotate(20deg); border-radius: 3px; background: #f3dbe5; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.is-spinning .tonearm { transform: rotate(24deg); }

/* ---------- blocks / grid ---------- */
.block { margin-bottom: 52px; scroll-margin-top: 90px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.block-head .more { font-size: 15px; white-space: nowrap; }
.section-title { font-size: 22px; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px rgba(255, 92, 154, .18); }
.notice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: -6px 0 18px; padding: 10px 16px; border-radius: 14px; background: var(--grad-soft); color: var(--text); font-size: 15px; }
.notice svg { color: var(--rose); }
.page-head { margin: 8px 0 28px; }
.page-head h1 { font-size: clamp(30px, 5vw, 44px); margin: 0 0 4px; }
.page-head .lead { margin: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 22px; margin-bottom: 36px; }
.grid.videos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid.reels { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
@media (max-width: 520px) { .grid, .grid.reels { grid-template-columns: repeat(2, 1fr); gap: 14px; } .grid.videos { grid-template-columns: 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 14px rgba(226, 51, 127, .06); transition: transform .25s, box-shadow .25s, border-color .25s; }
.card:hover { transform: translateY(-4px); border-color: #ffb6cf; box-shadow: var(--shadow-lg); }
.card-cover { position: relative; aspect-ratio: 1; background: var(--grad-soft); overflow: hidden; }
.card.is-video .card-cover { aspect-ratio: 16 / 9; }
.card.is-reel .card-cover { aspect-ratio: 9 / 16; }
.card.is-reel .play-btn { right: 50%; bottom: 50%; transform: translate(50%, 50%) scale(.9); }
.card.is-reel:hover .play-btn, .card.is-reel:focus-within .play-btn { opacity: 1; transform: translate(50%, 50%); }
.reel-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; text-align: center; color: #fff;
  background: linear-gradient(160deg, #ff8fb1, #e2337f 55%, #7b3fbf); }
.grid .card:nth-child(4n+2) .reel-ph { background: linear-gradient(160deg, #ffb38a, #ff5c9a 55%, #c2185b); }
.grid .card:nth-child(4n+3) .reel-ph { background: linear-gradient(160deg, #c8b6ff, #a066e8 50%, #e2337f); }
.grid .card:nth-child(4n+4) .reel-ph { background: linear-gradient(160deg, #ffd3e3, #ff7a9f 50%, #ff7a59); }
.reel-ph svg { width: 54px; height: 54px; color: rgba(255, 255, 255, .9); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .15)); margin-bottom: 70px; }
.reel-ph b { font-size: 16px; line-height: 1.4; text-shadow: 0 1px 6px rgba(0, 0, 0, .2); }
.reel-ph span { font-size: 13px; padding: 1px 10px; border-radius: 999px; background: rgba(255, 255, 255, .25); }
.card.is-embedded .card-cover { background: #000; }
.card.is-embedded .card-cover::after { display: none; }
.card-cover iframe { border: 0; }

/* Facebook Reels：固定 360×640 載入，依容器縮放（--s 由 music.js 計算） */
.reel-wrap { position: absolute; left: 50%; top: 50%; width: 360px; height: 640px; transform: translate(-50%, -50%) scale(var(--s, 1)); }
.reel-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.card:hover .card-cover img { transform: scale(1.05); }
.card-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(59, 34, 50, .45)); pointer-events: none; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 1px; padding: 2px 10px; border-radius: 999px; line-height: 1.6; }
.badge.audio { background: #ffe1ed; color: #c2185b; }
.badge.video { background: #ece6ff; color: #5b3fc4; }
.badge.reel { background: #e5f0ff; color: #1d5fc9; }
.badge.genre { background: #fff3e6; color: #b5501c; }
.badges { display: flex; gap: 6px; margin: 0; }
a.badge:hover { text-decoration: none; filter: brightness(.97); }
.card-cover .badge { position: absolute; top: 10px; left: 10px; z-index: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.card-cover .dur { position: absolute; right: 12px; bottom: 8px; z-index: 1; font-size: 12px; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.play-btn {
  position: absolute; right: 12px; bottom: 34px; z-index: 2; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #fff; cursor: pointer;
  display: grid; place-items: center; color: #fff; font-size: 20px; background: var(--grad);
  box-shadow: 0 8px 20px rgba(226, 51, 127, .45); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.card.is-video .play-btn { right: 50%; bottom: 50%; transform: translate(50%, 50%) scale(.9); }
/* 點歌鈕：膠囊形「▶ 點歌」 */
.play-btn.req { width: auto; height: auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px 10px 16px; border-radius: 999px; font-size: 17px; font-weight: 700; letter-spacing: 2px; white-space: nowrap; }
.play-btn.req svg { font-size: 18px; }
.play-btn:hover { color: #fff; text-decoration: none; }
.card:hover .play-btn, .card:focus-within .play-btn, .card.is-current .play-btn { opacity: 1; transform: none; }
.card.is-video:hover .play-btn, .card.is-video:focus-within .play-btn { transform: translate(50%, 50%); }
@media (hover: none) { .play-btn { opacity: 1; transform: none; } .card.is-video .play-btn, .card.is-reel .play-btn { transform: translate(50%, 50%); } }
.ic-pause { display: none; }
.is-current.is-playing .ic-play { display: none; }
.is-current.is-playing .ic-pause { display: block; }
.bars { position: absolute; left: 12px; bottom: 10px; z-index: 1; display: none; height: 16px; }
.bars i { width: 3px; background: #fff; }
.card.is-current.is-playing .bars { display: inline-flex; }
.card.is-current { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 92, 154, .2); }
.card-body { padding: 12px 14px 12px; }
.card-head { display: flex; align-items: flex-start; gap: 8px; }
.card-titles { flex: 1; min-width: 0; }
.card-body h3 { margin: 0; font-size: 16px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-body h3 a { color: var(--text); }
.card-body h3 a:hover { color: var(--rose); text-decoration: none; }
.artist { margin: 2px 0 0; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist .genre { color: var(--muted); }
.artist .genre:hover { color: var(--rose); }
.dl { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; color: var(--rose); background: var(--surface2); border: 1px solid var(--line); transition: background .2s, color .2s; }
.dl:hover { color: #fff; background: var(--grad); border-color: transparent; text-decoration: none; }
.stats { display: flex; gap: 12px; margin: 8px 0 0; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.stats span { display: inline-flex; align-items: center; gap: 4px; }
.stats svg { opacity: .7; }
.card.liked .stats span:last-child { color: var(--pink); }
body.no-api .stats, body.no-api .dyn, body.no-api [data-like] { display: none !important; }

.empty, .empty-state { color: var(--muted); text-align: center; padding: 40px 0; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; color: var(--muted); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; box-shadow: 0 2px 8px rgba(226, 51, 127, .06); transition: border-color .2s, transform .15s, box-shadow .2s; }
.btn:hover { color: var(--rose); border-color: var(--pink); text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn.primary { border: 0; color: #fff; font-weight: 700; background: var(--grad); box-shadow: 0 8px 22px rgba(226, 51, 127, .35); }
.btn.primary:hover { color: #fff; filter: brightness(1.05); }
.btn.accent { border-color: #ffc7da; color: var(--rose); font-weight: 700; background: #fff0f5; }
.btn.small { padding: 6px 14px; font-size: 14px; }
.btn.fb { color: #1877f2; border-color: #d6e4fb; }
.btn.fb:hover { color: #fff; background: #1877f2; border-color: #1877f2; }
.btn.copied { border-color: #7fd6a8; color: #1f8a55; background: #eafaf1; }
.btn.like.liked { color: #fff; border-color: transparent; background: var(--pink); }
.btn.like.pop svg { animation: pop .4s; }
@keyframes pop { 50% { transform: scale(1.5); } }

/* ---------- track page ---------- */
.track-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; margin: 12px 0 32px; }
.track.is-video .track-hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.track-media { display: grid; place-items: center; }
.track.is-reel .track-hero { align-items: start; }
.reel-frame { width: 360px; max-width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--shadow-lg); }
.reel-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.vinyl.big { width: min(420px, 82vw); }
.video-player { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); background: #2a1d26; display: block; }
.track.is-video .video-player { box-shadow: var(--shadow-lg); }
.track-info h1 { font-size: clamp(28px, 4.5vw, 42px); line-height: 1.25; margin: 12px 0 4px; }
.byline { color: var(--muted); font-size: 18px; margin: 0 0 22px; }
.byline span { color: var(--line); }
.track-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.big-play { padding: 12px 26px; font-size: 17px; }
.big-play.is-current.is-playing span::after { content: "中"; }
.meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 0 0 18px; }
.meta div { white-space: nowrap; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px 14px; }
.meta dt { font-size: 12px; color: var(--muted); }
.meta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--surface2); color: var(--rose); font-size: 14px; border: 1px solid var(--line); }
.tag:hover { color: #fff; background: var(--pink); text-decoration: none; }
@media (max-width: 860px) { .track-hero, .track.is-video .track-hero { grid-template-columns: 1fr; gap: 28px; } }

.usage { background: var(--grad-soft); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 24px; }
.usage h2 { display: flex; align-items: center; gap: 8px; font-size: 18px; margin: 0 0 6px; }
.usage h2 svg { color: var(--rose); }
.usage.fb h2 svg { color: #1877f2; }
.usage p { margin: 4px 0; }
.credit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; background: rgba(255, 255, 255, .85); border: 1px dashed #f3a6c4; border-radius: 12px; }
.credit code { flex: 1 1 260px; font: 14px/1.6 ui-monospace, "Noto Sans Mono CJK TC", monospace; color: var(--text); word-break: break-all; }

.card-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 40px; box-shadow: 0 4px 14px rgba(226, 51, 127, .05); }
.prose { max-width: 820px; }
.prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; }
.prose h2, .prose h3 { margin-top: 1.6em; }
.prose h2 { font-size: 20px; }
.prose code { background: var(--surface2); padding: 1px 6px; border-radius: 4px; }
.prose pre { background: var(--surface2); border: 1px dashed #f3a6c4; padding: 12px 16px; border-radius: 12px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose blockquote { margin: 1em 0; padding: 4px 16px; border-left: 4px solid var(--pink); color: var(--muted); }

/* ---------- 曲風 ---------- */
.genre-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.genre-pills .pill { padding: 6px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--text); box-shadow: 0 2px 8px rgba(226, 51, 127, .06); }
.genre-pills .pill small { color: var(--muted); margin-left: 2px; }
.genre-pills .pill:hover { border-color: var(--pink); color: var(--rose); text-decoration: none; }
.genre-pills .pill.active { background: var(--grad); color: #fff; border-color: transparent; }
.genre-pills .pill.active small { color: #ffe1ed; }
.genre-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.genre-tile { display: flex; flex-direction: column; gap: 2px; padding: 20px 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text); box-shadow: var(--shadow); transition: transform .2s; }
.genre-tile b { font-size: 19px; } .genre-tile span { color: var(--muted); font-size: 14px; }
a.genre-tile:hover { color: var(--text); text-decoration: none; transform: translateY(-3px); border-color: var(--pink); }
.genre-tile.g-mandopop, .genre-tile.g-taiwanese { background: linear-gradient(135deg, #ffd3e3, #ffe2cf); border-color: transparent; }
.genre-tile.g-mandopop b, .genre-tile.g-taiwanese b { font-size: 22px; }
.genre-tile.soon { opacity: .55; box-shadow: none; }

/* ---------- tags / categories / archives ---------- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-cloud .tag { font-size: calc(14px + var(--w) * 2px); padding: 6px 16px; }
.tag-cloud small { color: var(--muted); margin-left: 4px; }
.cat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.cat-tile { display: flex; flex-direction: column; gap: 4px; padding: 30px; border-radius: var(--radius); color: var(--text); background: linear-gradient(135deg, #ffd3e3, #ffe2cf); box-shadow: var(--shadow); }
.cat-tile.mp4 { background: linear-gradient(135deg, #e6deff, #ffd3e3); }
.cat-tile svg { font-size: 40px; color: var(--rose); } .cat-tile b { font-size: 22px; } .cat-tile span { color: var(--muted); }
.cat-tile:hover { color: var(--text); text-decoration: none; transform: translateY(-3px); }
.tracklist { list-style: none; padding: 0; margin: 0 0 32px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tracklist li { display: grid; grid-template-columns: 56px 64px 1fr auto 52px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.tracklist li:last-child { border-bottom: 0; }
.tracklist li:hover { background: var(--surface2); }
.tracklist time, .tracklist .dur { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.tracklist .badge { text-align: center; }
.tracklist .artist { margin: 0; }
@media (max-width: 600px) { .tracklist li { grid-template-columns: 46px 1fr 44px; } .tracklist .badge, .tracklist .artist { display: none; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14px; padding: 22px 0; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; }
.footer-brand svg { width: 22px; height: 22px; color: var(--pink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.footer-links a:hover { color: var(--rose); }
.footer-links svg { color: #1877f2; }

/* ---------- bottom player ---------- */
.player { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(255, 255, 255, .94); backdrop-filter: blur(16px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(226, 51, 127, .14); }
.player[hidden] { display: none; }
.pl-seek { position: absolute; top: -7px; left: 0; width: 100%; margin: 0; height: 14px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.pl-seek::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--deep), var(--coral)) 0 / var(--p, 0%) 100% no-repeat, #f6d5e2; }
.pl-seek::-moz-range-track { height: 4px; background: #f6d5e2; }
.pl-seek::-moz-range-progress { height: 4px; background: linear-gradient(90deg, var(--deep), var(--coral)); }
.pl-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); }
.pl-seek::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--pink); border-radius: 50%; background: #fff; }
.pl-inner { display: flex; align-items: center; gap: 18px; height: 84px; }
.pl-track { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 0; color: var(--text); }
.pl-track:hover { color: var(--text); text-decoration: none; }
.pl-cover { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #ffc2d8; }
.pl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.is-playing .pl-cover { animation: spin 6s linear infinite; }
.pl-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pl-text b, .pl-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-text span { color: var(--muted); font-size: 14px; }
.pl-controls { display: flex; align-items: center; gap: 8px; }
.pl-controls button, .pl-close { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: var(--text); font-size: 20px; }
.pl-controls button:hover, .pl-close:hover { background: var(--surface2); color: var(--rose); }
.pl-controls button:disabled { opacity: .3; cursor: default; background: none; }
.pl-controls .pl-big { width: 50px; height: 50px; font-size: 22px; color: #fff; background: var(--grad); box-shadow: 0 6px 16px rgba(226, 51, 127, .35); }
.pl-controls .pl-big:hover { color: #fff; background: var(--grad); filter: brightness(1.06); }
.player .ic-pause { display: none; }
body.is-playing .player .ic-play { display: none; }
body.is-playing .player .ic-pause { display: block; }
.pl-time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; min-width: 92px; text-align: center; }
.pl-time .sep { margin: 0 4px; opacity: .5; }
.pl-vol { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 18px; }
.pl-vol input { width: 90px; accent-color: var(--pink); }
.pl-close { color: var(--muted); font-size: 18px; }
@media (max-width: 760px) {
  body.has-player { --player-h: 72px; }
  .pl-inner { height: 72px; gap: 8px; }
  .pl-vol, .pl-time, .pl-close { display: none; }
  .pl-cover { width: 44px; height: 44px; }
  .pl-controls { gap: 2px; }
}