:root {
  /* 明亮：乾淨白底、鈷藍主色＋橘色點綴 */
  --bg: #f4f6fa; --bg2: #e9edf5; --card: #ffffff; --ink: #1d2433; --muted: #5d677a;
  --pink: #2f5bea; --pink2: #e3e9fb; --accent2: #e8590c; --blue: #2f5bea; --mint: #1f9d6b; --red: #e5484d;
  --line: #d9dfea; --shadow: 0 4px 14px #1d243314;
  --glow1: #dbe4ff; --glow2: #ffe8d6; --dot1: #c5d0e6; --dot2: #f0d2bd; --h1: linear-gradient(90deg, #2f5bea, #e8590c);
  /* 字級角色（rem 跟著 A－／A＋ 一起縮放）：
     meta 最小一級，「小」字級下仍有 13px；label 是按鈕、標籤、副資訊；title 是歌名 */
  --fs-meta: 0.8125rem;
  --fs-label: 0.875rem;
  --fs-title: 1.1875rem;
  /* 間距：4 的倍數；--tap 是所有可點元素的最小點擊高度 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --tap: 44px;
}
:root[data-theme="eye"] {
  /* 護眼：米色調、低藍光，焦糖棕主色＋奶茶點綴 */
  --bg: #f3ebdc; --bg2: #ece2cf; --card: #fbf6ec; --ink: #3d3328; --muted: #786b5b;
  --pink: #a8693c; --pink2: #ecdcc4; --accent2: #b9773e; --blue: #7a6146; --mint: #5f9470; --line: #e3d5bd; --shadow: 0 4px 12px #6b55331a;
  --glow1: #ece2cf; --glow2: #efe5d3; --dot1: #dccbaa; --dot2: #e3d6bd; --h1: none;
}
:root[data-theme="dark"] {
  /* 結束夜：深藍黑底，粉（主）、黃、藍、紅四色點綴 */
  --bg: #181a26; --bg2: #1f2232; --card: #232637; --ink: #f2eef4; --muted: #a6a3b8;
  --pink: #f4a7c0; --pink2: #3a2a3a; --accent2: #f6d55c; --blue: #6f9de8; --mint: #7cc6a4; --red: #e5636a;
  --line: #34374a; --shadow: 0 6px 18px #0008;
  --glow1: #f4a7c01a; --glow2: #6f9de814; --dot1: #f4a7c033; --dot2: #f6d55c2e; --h1: none;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); min-height: 100vh; line-height: 1.5;
  /* M PLUS Rounded 1c 缺部分繁中字（悅、覓、擊…），由同為圓體的 Huninn（jf 粉圓）補上，避免同一行混進方角黑體 */
  font-family: "M PLUS Rounded 1c", "Huninn", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background: radial-gradient(circle at 10% 0%, var(--glow1), transparent 40%),
              radial-gradient(circle at 100% 30%, var(--glow2), transparent 40%),
              linear-gradient(180deg, var(--bg), var(--bg2));
  background-attachment: fixed;
}
.sakura { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(var(--dot1) 1.5px, transparent 2px), radial-gradient(var(--dot2) 1.2px, transparent 2px);
  background-size: 46px 46px, 70px 70px; background-position: 0 0, 23px 31px; }
header, .bar, main, footer { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; padding: 0 var(--sp-4); }

.top { padding-top: var(--sp-3); }
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand > div { flex: 1; min-width: 0; }
/* 字級／主題設定一次就好，收進「Aa 字級」，把頁面上方留給搜尋 */
.prefsbtn { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap);
  font: inherit; font-size: var(--fs-label); font-weight: 700; padding: 0 var(--sp-3); border-radius: 999px; cursor: pointer;
  border: 2px solid var(--line); background: var(--card); color: var(--ink); }
.prefsbtn b { font-size: 1.15em; }
.prefsbtn[aria-expanded="true"] { border-color: var(--pink); }
.prefs { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: grid; gap: var(--sp-2); }
.prefs[hidden] { display: none; }
.prow { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.plabel { min-width: 2.5em; font-size: var(--fs-label); font-weight: 700; color: var(--muted); }
/* 搜尋與分頁固定在畫面上方：滑到清單任何位置都能直接重新搜尋 */
.bar { position: sticky; top: 0; z-index: 5; padding-top: var(--sp-2); padding-bottom: 6px; background: var(--bg); }
.bar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--sp-3); pointer-events: none;
  background: linear-gradient(180deg, var(--bg), transparent); }
.logo { font-size: 34px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px;
  background: linear-gradient(135deg, var(--pink), var(--blue)); box-shadow: var(--shadow); transform: rotate(-6deg); }
h1 { margin: 0; font-size: clamp(1.25rem, 5vw, 1.75rem); font-weight: 800; letter-spacing: .02em; line-height: 1.25; text-wrap: balance;
  background: var(--h1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { margin: 2px 0 0; font-size: var(--fs-meta); color: var(--muted); }
#count { font-variant-numeric: tabular-nums; }
.searchbox { position: relative; }
.searchbox input { width: 100%; font: inherit; font-size: 1rem; padding: .7em 1em .7em 2.6em; border-radius: 999px;
  border: 2px solid var(--pink2); background: var(--card); color: var(--ink); outline: none; box-shadow: var(--shadow); }
.searchbox input:focus { border-color: var(--pink); }
/* 鍵盤焦點：統一一圈深色框，三種主題都看得清楚（滑鼠／觸控點擊不會出現） */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.searchbox input:focus-visible { outline-offset: 1px; }
.mag { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
.tabs { display: flex; gap: 6px; margin-top: var(--sp-2); overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tabs button { flex: none; font: inherit; font-weight: 700; font-size: var(--fs-label); min-height: var(--tap); padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--line); background: var(--card); color: var(--ink); }
/* 漸層要從邊框外緣開始畫：預設從邊框內側起算，透明邊框會露出重複貼上的另一端顏色，左右各多一條反色細邊 */
.tabs button.on { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: var(--shadow); }

.facet { margin: 8px 0; padding: 12px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.facet[hidden] { display: none; }
.seg { display: inline-flex; background: var(--pink2); border-radius: 999px; padding: 3px; margin-bottom: 10px; flex-wrap: wrap; }
.seg button { font: inherit; font-size: var(--fs-label); font-weight: 700; border: 0; background: none; color: var(--ink); min-height: var(--tap); padding: 0 12px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--card); color: var(--pink); box-shadow: 0 2px 6px #0001; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; max-height: 42vh; overflow-y: auto; }
.chip { font: inherit; font-size: var(--fs-label); line-height: 1.35; min-height: var(--tap); padding: 5px 12px; border-radius: 12px; cursor: pointer; border: 1.5px solid var(--line);
  background: transparent; color: var(--ink); display: inline-flex; align-items: center; gap: 5px; text-align: left; }
.chip small { color: var(--muted); font-size: var(--fs-meta); }
.chip i { font-style: normal; font-size: var(--fs-meta); font-variant-numeric: tabular-nums; background: var(--pink2); border-radius: 999px; padding: 0 6px; }
.chip.on { border-color: var(--pink); background: var(--pink); color: #fff; }
.chip.on small { color: #fff; } .chip.on i { background: #fff4; }
.chip.add { border-style: dashed; color: var(--pink); }
.grp { width: 100%; font-size: var(--fs-meta); font-weight: 800; color: var(--pink); margin-top: 6px; }
.grp:first-child { margin-top: 0; }
/* 我在哪家 KTV：全站狀態，跟搜尋一起固定在上方 */
/* 按鈕平分整排、不橫向捲動，選中的那家永遠看得到；字級大到放不下時先藏曲數 */
.bar { container-type: inline-size; }
.where { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); }
.where[hidden] { display: none; }
.wlabel { flex: none; font-size: var(--fs-label); font-weight: 700; color: var(--muted); padding-right: 2px; }
.where button { flex: 1 1 auto; min-width: 0; justify-content: center; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: var(--fs-label); font-weight: 700; border: 2px solid var(--line); background: var(--card); color: var(--ink); }
.where button i { font-style: normal; font-weight: 400; font-size: var(--fs-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.where button[aria-pressed="true"] { border-color: var(--mint); background: #3fd6a626; }
.where button[aria-pressed="true"] i { color: var(--ink); }
@container (max-width: 18rem) { .where button i { display: none; } }
.sect { margin-top: var(--sp-3); }
.sect h2 { margin: 0; font-size: var(--fs-label); font-weight: 800; color: var(--muted); }
.pltools { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.pltools button, .row button { font: inherit; font-size: var(--fs-label); border: 1.5px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px; min-height: var(--tap); padding: 0 var(--sp-3); cursor: pointer; }

.filterbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 8px 2px; font-size: var(--fs-label); color: var(--muted); }
.filterbar b { color: var(--ink); font-variant-numeric: tabular-nums; }
.filterbar select { font: inherit; font-size: var(--fs-label); min-height: var(--tap); padding: 0 var(--sp-2); border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); }
.hint { margin: 16px auto; text-align: center; color: var(--pink); font-weight: 700; }

.list { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: grid; gap: var(--sp-3); }
.card { position: relative; background: var(--card); border-radius: 18px; padding: var(--sp-3) 14px; box-shadow: var(--shadow); border: 1.5px solid var(--line);
  border-left: 5px solid var(--pink); display: grid; gap: var(--sp-2); animation: pop .25s ease; }
/* ♥ 是卡片主要動作，放右上角；跟 🐞 拉開距離，晃動中不會誤觸回報 */
.card .heart { position: absolute; top: 2px; right: 2px; }
.card .r1 { padding-right: var(--tap); }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }
.r1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.title { font-size: var(--fs-title); font-weight: 800; line-height: 1.3; text-wrap: pretty; }
.kana { font-size: var(--fs-meta); color: var(--muted); }
.zh { font-size: var(--fs-label); color: var(--accent2); font-weight: 700; }
.zh::before { content: "「"; } .zh::after { content: "」"; }
.artist { font-size: var(--fs-label); color: var(--blue); text-decoration: none; font-weight: 700; margin-left: auto;
  /* 點擊範圍上下各撐 10px，不改變排版高度 */
  padding: 10px 0; margin-block: -10px; }
.artist:hover { text-decoration: underline; }
.r2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-label); }
.anime small { color: var(--muted); }
/* 動漫名自成一行；類別、年份、舞、🐞 固定在下一行，🐞 不會被擠到孤零零一行 */
.r2 .anime { flex-basis: 100%; }
.muted { color: var(--muted); }
.tag { background: var(--pink2); border-radius: 8px; padding: 1px 8px; font-size: var(--fs-meta); font-weight: 700; }
.tag.yr { background: #c9d8ff66; font-variant-numeric: tabular-nums; }
.badge { font-size: var(--fs-meta); font-weight: 800; border-radius: 6px; padding: 1px 6px; }
.badge.dance { background: #ffe066; color: #7a5a00; }
.r3 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ktv { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; padding: 3px 9px 3px 4px; border-radius: 999px; background: #8881; color: var(--muted); }
.ktv.y { background: #3fd6a61f; color: var(--ink); font-weight: 700; }
.lamp { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 0.6875rem; font-weight: 800; color: #fff; }
.lamp.on { background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.lamp.off { background: #c9c2d6; }
.lamp.unk { background: transparent; border: 1.5px dashed var(--muted); color: var(--muted); }
.heart { border: 0; background: none; cursor: pointer; padding: 0; min-width: var(--tap); min-height: var(--tap); display: inline-grid; place-items: center; border-radius: 12px; }
.heart { font-size: 1.25rem; color: #d6c8dd; }
.heart.on { color: var(--pink); }
.empty { text-align: center; color: var(--muted); padding: 30px 0; line-height: 1.8; text-wrap: balance; }
.empty a { color: var(--pink); }

.foot { padding-bottom: 28px; text-align: center; font-size: var(--fs-label); color: var(--muted); }
/* 圖例放在清單正上方，看卡片時不用滑到頁尾查「?」「舞」的意思 */
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); align-items: center; margin: 0 2px var(--sp-3); font-size: var(--fs-meta); color: var(--muted); }
.legend[hidden] { display: none; }
.legend > span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.legend .pendingnote { flex-basis: 100%; }
.legend .pendingnote:empty { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.clearq { margin-top: var(--sp-3); min-height: var(--tap); padding: 0 var(--sp-4); font: inherit; font-weight: 700; border-radius: 999px;
  border: 2px solid var(--pink2); background: var(--card); color: var(--ink); cursor: pointer; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0; }
.actions button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--pink2); background: var(--card); color: var(--ink); cursor: pointer; }
.actions button:hover { border-color: var(--pink); }
.upd { font-size: var(--fs-meta); text-wrap: balance; }

dialog { border: 0; border-radius: 22px; padding: 0; max-width: min(420px, calc(100vw - 32px)); background: var(--card); color: var(--ink); box-shadow: 0 20px 50px #0004; }
dialog::backdrop { background: #3a2e4f66; backdrop-filter: blur(3px); }
.dlg { padding: 20px; position: relative; background: var(--bg); }
.dlg h3 { margin: 0 0 8px; padding-right: 2em; color: var(--pink); line-height: 1.35; text-wrap: balance; }
.dlg p { line-height: 1.7; }
.close { position: absolute; top: var(--sp-1); right: var(--sp-1); min-width: var(--tap); min-height: var(--tap); border: 0; background: none; font-size: 1.125rem; cursor: pointer; color: var(--muted); }
.big { display: block; text-align: center; margin-top: 10px; padding: 11px; border-radius: 14px; font-weight: 800; text-decoration: none;
  background: linear-gradient(135deg, var(--pink), var(--accent2)); color: #fff; }
.big.ghost { background: none; border: 2px solid var(--line); color: var(--ink); }
.pllist { display: grid; gap: 8px; margin: 10px 0; }
.pllist label { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--card); }
.row { display: flex; gap: 6px; }
.row input { flex: 1; min-width: 0; min-height: var(--tap); font: inherit; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px); opacity: 0; transition: .25s; z-index: 20;
  background: var(--ink); color: var(--bg); padding: 9px 18px; border-radius: 999px; font-size: var(--fs-label); pointer-events: none; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
/* 用 left/right 置中，訊息寬度可用到整個畫面（left:50% 只剩半個畫面寬，會把字擠到斷行） */
.toast, .toast.show { left: 16px; right: 16px; margin: 0 auto; width: fit-content; max-width: 560px; text-align: center; }
.toast { transform: translateY(40px); }
.toast.show { transform: none; }
.toast.act { pointer-events: auto; display: flex; align-items: center; gap: var(--sp-3); padding-right: 6px; }
.toast button { flex: none; min-height: 36px; padding: 0 var(--sp-3); font: inherit; font-weight: 800; border: 0; border-radius: 999px; background: var(--bg); color: var(--ink); cursor: pointer; }
.field { display: grid; gap: var(--sp-1); font-size: var(--fs-label); font-weight: 700; margin: var(--sp-3) 0; }
.field input, .field-input { width: 100%; min-height: var(--tap); font: inherit; font-weight: 400; padding: 0 var(--sp-3); border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); }
.chip { overflow-wrap: anywhere; }
@media (max-width: 560px) { .artist { margin-left: 0; width: 100%; } }

/* 顯示設定 */
.fs { display: inline-flex; align-items: center; gap: 6px; }
.fs button { font: inherit; font-weight: 800; font-size: 1rem; min-width: 52px; min-height: var(--tap); border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.fs b { min-width: 3em; text-align: center; font-size: var(--fs-label); }
.th { margin: 0; }
:root[data-theme="eye"] .sakura { opacity: .25; }
.zhs { color: var(--muted); }
/* 歌名、動漫名、副標整段換行，不要把「我推的孩子」拆成「我推的孩／子」；真的放不下才斷字 */
.sub, .zh, .zhs, .anime [lang="ja"] { word-break: keep-all; overflow-wrap: anywhere; }
/* 第三行：4 家 KTV 一排 */
.r3 { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 6px; }
/* 字級調大後一排放不下 4 家（約需 15.6rem），改成 2×2，避免卡片被撐出螢幕 */
.card { container-type: inline-size; }
@container (max-width: 15.75rem) { .r3 { grid-template-columns: repeat(2, 1fr); } }
.ktv { justify-content: center; padding: 6px 4px; border-radius: 12px; font-size: var(--fs-label); border: 1.5px solid transparent; white-space: nowrap; }
.ktv.y { border-color: var(--mint); }
.ktv.n { opacity: .75; }
/* 所在那家排第一格並加粗外框 */
.ktv.me { font-weight: 800; border-width: 2.5px; }
.ktv.me.u, .ktv.me.n { border-color: var(--muted); }
.lamp { width: 1.25em; height: 1.25em; font-size: .8rem; flex: none; }
.ktv.blank { visibility: hidden; }
.bank { margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); }
.bank p { margin: 4px 0; }
.bank .acct { font-size: 1.15rem; font-weight: 800; letter-spacing: .04em; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bank button { font: inherit; font-size: .85rem; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 10px; padding: 4px 10px; min-height: 36px; cursor: pointer; }
/* 假名標在漢字上方 */
ruby { ruby-position: over; }
rt { font-size: .5em; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.r1 .title { line-height: 1.9; }
.fb { display: grid; gap: 10px; }
.fb label { display: grid; gap: 4px; font-weight: 700; font-size: var(--fs-meta, .9rem); }
.fb textarea, .fb select, .fb input { font: inherit; width: 100%; }
.fb textarea.field-input { padding: var(--sp-2, 8px) var(--sp-3, 12px); min-height: 7em; }

/* 手機點按：去掉系統點按高光，避免殘留 hover/active 變色 */
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.tabs button { -webkit-appearance: none; appearance: none; background-image: none; }
.tabs button:not(.on):active { background: var(--pink2); }
/* 歌手 2 欄、年份 3 欄、動畫名 2 欄：按鈕放大並排滿整列 */
.chips.grid2, .chips.grid3 { display: grid; gap: var(--sp-2, 8px); }
.chips.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chips.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.chips.grid2 .chip, .chips.grid3 .chip { width: 100%; min-height: 56px; padding: 8px 12px; justify-content: space-between; font-size: 1.05rem; font-weight: 700; border-radius: 14px; }
.chips.grid3 .chip { justify-content: center; gap: 8px; }
.chips.grid2 .grp, .chips.grid3 .grp { grid-column: 1 / -1; }
/* 卡片：歌手接在中譯右邊；類型、年份接在劇名右邊 */
.r1 .artist, .card .r1 .artist { margin-left: 0; width: auto; }
.r2 .anime { flex-basis: auto; }
.chips.grid3 .chip { white-space: nowrap; overflow-wrap: normal; padding: 8px 6px; gap: 6px; }
.chips.grid3 .chip i { flex: none; }
.chips.grid2 .chip i { flex: none; }

/* ===== 下方固定搜尋列與分類按鈕 ===== */
.bar { position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 10; max-width: none; margin: 0;
  padding: 10px max(var(--sp-4, 16px), calc((100vw - 960px) / 2 + 16px)) calc(4px + env(safe-area-inset-bottom));
  background: var(--bg); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px #0000001a; }
.bar::after { display: none; }
body { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.searchbox { margin: 0; }
.searchbox input { border-radius: 14px; border: 2px solid var(--pink); box-shadow: none; padding-left: 2.6em; }
.searchbox .mag { width: 20px; height: 20px; left: 14px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; margin-top: 6px; overflow: visible; padding: 0; }
.tabs button, .tabs button.on, .tabs button:not(.on):active { display: grid; justify-items: center; gap: 2px; min-height: 52px; padding: 4px 0; border: 0; border-radius: 12px;
  background: none; box-shadow: none; color: var(--ink); font-size: 0.8rem; font-weight: 700; }
.tabs button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tabs button.on { color: var(--pink); }
.tabs button.on svg { stroke-width: 2.4; }
.toast { bottom: calc(160px + env(safe-area-inset-bottom)); }
.where { margin: 10px 0 0; }
/* ===== 卡片：歌名＋中譯／歌手／劇名＋類型＋年份／KTV ===== */
.title { font-size: 1.45rem; }
rt { font-size: .62em; font-weight: 700; color: var(--ink); opacity: .8; }
.r1 .title { line-height: 2.1; }
.r1b { display: flex; }
.r1b .artist { margin: 0; width: auto; font-size: 1rem; }
.prefsbtn { white-space: nowrap; }
.r1 .title { line-height: 1.3; }
.r1 .title:has(ruby) { line-height: 2; }
.card .r1b { margin-top: -4px; }

/* ===== 標題置中「今晚唱番」 ===== */
.brand { position: relative; justify-content: center; min-height: 52px; }
.brand > div { flex: none; text-align: center; }
.brand h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); letter-spacing: .12em; font-weight: 800; }
.brand .logo { display: none; }
.brand .prefsbtn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); align-self: auto; }
.brand h1::before { content: "🎤"; -webkit-text-fill-color: initial; margin-right: .2em; font-size: .8em; }
/* 熱血夜間：更銳利的稜角與火焰光暈 */
:root[data-theme="dark"] .zh { color: var(--accent2); }
.brand { padding: 0 96px; }
.brand h1 { white-space: nowrap; }
@media (max-width: 420px) { .brand { padding: 0 84px; } .brand h1 { font-size: 1.75rem; letter-spacing: .06em; } .brand .prefsbtn { padding: 0 10px; } }
.heart { color: var(--line); }
.heart.on { color: var(--pink); }

/* ===== v4：字小一點、不換行、去漸層、分類直接全部攤開 ===== */
body { background: var(--bg); }
.brand h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--pink); font-style: normal; text-shadow: none;
  display: inline-flex; align-items: center; gap: .15em; font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1; }
.brand h1::before { content: none; }
.hmic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hmic rect { fill: currentColor; }
@media (max-width: 420px) { .brand h1 { font-size: 1.6rem; } }
/* 卡片：每行不換行，過長以「…」截斷 */
.title { font-size: 1.2rem; }
.r1, .r2 { flex-wrap: nowrap; min-width: 0; }
.r1 > *, .r2 > * { flex: none; white-space: nowrap; }
.r1 .zh, .r2 .anime { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.r1 .title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.r1b .artist { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktv { font-size: .85rem; }
/* 女歌手／男歌手／樂團：一排排滿 */
.facet .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.facet .seg button { white-space: nowrap; padding: 0 4px; }
/* 歌手、動畫名、年份：無外框、不再內部捲動，全部直接列出 */
.facet { background: none; box-shadow: none; padding: 0; border: 0; }
.chips, .chips.grid2, .chips.grid3 { max-height: none; overflow: visible; }
.chips.grid2 .chip, .chips.grid3 .chip { border: 0; background: var(--card); box-shadow: var(--shadow); min-height: 46px; font-size: .95rem;
  white-space: nowrap; overflow: hidden; }
.chips.grid2 .chip { overflow: hidden; }
.chips.grid2 .chip > :first-child, .chips.grid2 .chip { text-overflow: ellipsis; }
.chips.grid2 .chip.on, .chips.grid3 .chip.on { background: var(--pink); color: #fff; }
.chip { white-space: nowrap; overflow-wrap: normal; }
.chip .l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 練歌頁 ===== */
.card { cursor: pointer; }
.practice { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; padding: 8px var(--sp-4, 16px) 24px; }
.practice[hidden] { display: none; }
body.in-practice main, body.in-practice .foot, body.in-practice .top { display: none; }
.pr-top { display: flex; justify-content: space-between; align-items: center; }
.back { font: inherit; font-weight: 800; font-size: 1rem; border: 0; background: none; color: var(--pink); min-height: var(--tap); padding: 0 4px; cursor: pointer; }
.pr-title { margin: 6px 0 0; font-size: 1.7rem; font-weight: 800; line-height: 1.3; }
.pr-title:has(ruby) { line-height: 2.1; }
.pr-romaji { margin: 0; color: var(--muted); font-size: .95rem; letter-spacing: .02em; }
.pr-zh { margin: 4px 0 8px; color: var(--accent2); font-weight: 800; font-size: 1.05rem; }
.pr-meta { margin: 4px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .95rem; }
.pr-meta .artist { margin: 0; width: auto; }
.pr-ktv { margin: 10px 0 14px; }
.video { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: var(--shadow); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.none { display: grid; place-content: center; justify-items: center; gap: 10px; background: var(--card); color: var(--muted); aspect-ratio: auto; padding: 28px 12px; }
.video.none p { margin: 0; }
.replay { margin-top: 10px; width: 100%; font: inherit; font-weight: 800; min-height: 46px; border-radius: 12px; border: 0; background: var(--pink); color: #fff; cursor: pointer; }
.pr-h { margin: 18px 0 8px; font-size: 1rem; }
.plinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.plink { display: grid; place-items: center; min-height: 46px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); font-weight: 700; text-decoration: none; font-size: .95rem; }
.plink:active { background: var(--pink2); }
.video.none .plink { padding: 0 16px; }
.pr-note, .privacy { font-size: .75rem; color: var(--muted); margin-top: 18px; }
.privacy { max-width: 36em; margin: 6px auto 0; }
.lyricbtn { display: grid; place-items: center; margin-top: 10px; min-height: 46px; border-radius: 12px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); font-weight: 800; text-decoration: none; }

/* 結束夜：卡片左邊四色條、標題四色 */
:root[data-theme="dark"] .card { border-left: 0; background-image: linear-gradient(var(--pink), var(--pink)), linear-gradient(var(--accent2), var(--accent2)), linear-gradient(var(--blue), var(--blue)), linear-gradient(var(--red), var(--red));
  background-size: 5px 25%; background-position: 0 0, 0 33.33%, 0 66.66%, 0 100%; background-repeat: no-repeat; background-color: var(--card); }
:root[data-theme="dark"] .brand h1 { color: var(--pink); }
:root[data-theme="dark"] .searchbox input { border-color: var(--pink); }
/* KTV 燈號：柔和不刺眼 */
.ktv, .ktv.y { border: 0; }
.ktv.y { background: color-mix(in srgb, var(--mint) 14%, transparent); color: var(--ink); font-weight: 700; }
.ktv.n { background: color-mix(in srgb, var(--muted) 10%, transparent); opacity: .7; font-weight: 400; }
.lamp.on, :root[data-theme="dark"] .lamp.on { background: color-mix(in srgb, var(--mint) 80%, var(--card)); box-shadow: none; }
.lamp.off { background: color-mix(in srgb, var(--muted) 45%, var(--card)); }
.ktv.me.y { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mint) 55%, transparent); }

/* 標題四字統一字型（Noto Sans TC 只載入這四個字） */
.brand h1 { font-family: "Noto Sans TC", "Huninn", sans-serif; font-weight: 900; letter-spacing: .08em; }
/* 主題切換：兩格排滿 */
.prow { flex-wrap: nowrap; }
.prow .seg.th { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.prow .seg.th button { white-space: nowrap; }
/* 歌單工具列：三格排滿 */
.pltools { display: grid; grid-template-columns: repeat(3, 1fr); }
.pltools button { padding: 0 4px; white-space: nowrap; }
.chips.grid2 .chip.add { justify-content: center; }
/* 手機輸入時：16px 以上避免 iOS 自動放大，搜尋列跟著鍵盤上移 */
.searchbox input { font-size: 16px; }
.bar { transition: transform .15s ease; will-change: transform; }
body.kb .bar .tabs { display: none; }
body.kb .bar { padding-bottom: 8px; }
/* 對話框裡的按鈕也排滿 */
.dlg button:not(.close), .dlg .big { width: 100%; justify-content: center; }
.dlg .row { display: grid; grid-template-columns: 1fr; }