:root {
  --bg: #0b0b0c;
  --panel: #131315;
  --panel2: #202024;
  --line: #2a2a2e;
  --text: #f2f2f4;
  --muted: #9a9aa2;
  --accent: #00E3E3;
  --accent-dim: #0c3a3a;
  --rec: #e0384e;
  --track: #4a4a50;
}
/* 源泉圓體(GenSenRounded, ButTaiwan) Bold — 只給 KTV 字幕用；字型檔約 7.6MB，字幕首次顯示才載入並快取 */
@font-face {
  font-family: "GenSenRounded";
  src: url(fonts/GenSenRounded2TW-B.woff2) format("woff2");
  font-weight: 700;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans TC", "Noto Sans JP", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
}

/* ---------- Icon ---------- */
.ic {
  display: inline-block; width: 20px; height: 20px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  vertical-align: middle; flex-shrink: 0;
}
.ic-play    { -webkit-mask-image: url(icons/play-solid-full.svg);        mask-image: url(icons/play-solid-full.svg); }
.ic-pause   { -webkit-mask-image: url(icons/pause-solid-full.svg);       mask-image: url(icons/pause-solid-full.svg); }
.ic-prev    { -webkit-mask-image: url(icons/backward-step-solid-full.svg); mask-image: url(icons/backward-step-solid-full.svg); }
.ic-next    { -webkit-mask-image: url(icons/forward-step-solid-full.svg);  mask-image: url(icons/forward-step-solid-full.svg); }
.ic-minus   { -webkit-mask-image: url(icons/minus-solid-full.svg);       mask-image: url(icons/minus-solid-full.svg); }
.ic-plus    { -webkit-mask-image: url(icons/plus-solid-full.svg);        mask-image: url(icons/plus-solid-full.svg); }
.ic-mic     { -webkit-mask-image: url(icons/microphone-solid-full.svg);  mask-image: url(icons/microphone-solid-full.svg); }
.ic-mic-slash{ -webkit-mask-image: url(icons/microphone-slash-solid-full.svg); mask-image: url(icons/microphone-slash-solid-full.svg); }
.ic-stop    { -webkit-mask-image: url(icons/stop-solid-full.svg);        mask-image: url(icons/stop-solid-full.svg); }
.ic-download{ -webkit-mask-image: url(icons/circle-down-solid-full.svg); mask-image: url(icons/circle-down-solid-full.svg); }
.ic-music   { -webkit-mask-image: url(icons/music-solid-full.svg);       mask-image: url(icons/music-solid-full.svg); }
.ic-vol     { -webkit-mask-image: url(icons/volume-solid-full.svg);      mask-image: url(icons/volume-solid-full.svg); }
.ic-vol-x   { -webkit-mask-image: url(icons/volume-xmark-solid-full.svg); mask-image: url(icons/volume-xmark-solid-full.svg); }
.ic-trash   { -webkit-mask-image: url(icons/trash-solid-full.svg);       mask-image: url(icons/trash-solid-full.svg); }
.ic-yt      { -webkit-mask-image: url(icons/youtube-brands-solid-full.svg); mask-image: url(icons/youtube-brands-solid-full.svg); }
.ic-check   { -webkit-mask-image: url(icons/check-solid-full.svg);       mask-image: url(icons/check-solid-full.svg); }
.ic-circle-plus  { -webkit-mask-image: url(icons/circle-plus.svg);  mask-image: url(icons/circle-plus.svg); }
.ic-circle-check { -webkit-mask-image: url(icons/circle-check.svg); mask-image: url(icons/circle-check.svg); }
.ic-circle-xmark { -webkit-mask-image: url(icons/circle-xmark.svg); mask-image: url(icons/circle-xmark.svg); }
.ic-bars    { -webkit-mask-image: url(icons/bars-solid-full.svg);        mask-image: url(icons/bars-solid-full.svg); }
.ic-rec     { -webkit-mask-image: url(icons/circle-dot-regular-full.svg); mask-image: url(icons/circle-dot-regular-full.svg); }
.ic-gear    { -webkit-mask-image: url(icons/gear-solid-full.svg);        mask-image: url(icons/gear-solid-full.svg); }
.ic-ellipsis{ -webkit-mask-image: url(icons/ellipsis.svg);              mask-image: url(icons/ellipsis.svg); }
.ic-users   { -webkit-mask-image: url(icons/users.svg);                 mask-image: url(icons/users.svg); }
.ic-user    { -webkit-mask-image: url(icons/user-solid-full.svg);       mask-image: url(icons/user-solid-full.svg); }
.ic-sliders { -webkit-mask-image: url(icons/sliders-solid-full.svg);    mask-image: url(icons/sliders-solid-full.svg); }
.ic-rlist   { -webkit-mask-image: url(icons/rectangle-list-solid-full.svg); mask-image: url(icons/rectangle-list-solid-full.svg); }
.ic-expand  { -webkit-mask-image: url(icons/expand-solid-full.svg);        mask-image: url(icons/expand-solid-full.svg); }
.ic-lytics  { -webkit-mask-image: url(icons/lytics.svg);                   mask-image: url(icons/lytics.svg); }
.ic-list    { -webkit-mask-image: url(icons/list-solid-full.svg);          mask-image: url(icons/list-solid-full.svg); }
.ic-pen     { -webkit-mask-image: url(icons/pen.svg);                      mask-image: url(icons/pen.svg); }
.ic-fs      { -webkit-mask-image: url(icons/up-right-and-down-left-from-center-solid-full.svg); mask-image: url(icons/up-right-and-down-left-from-center-solid-full.svg); }
body.fs .ic-fs { -webkit-mask-image: url(icons/down-left-and-up-right-to-center-solid-full.svg); mask-image: url(icons/down-left-and-up-right-to-center-solid-full.svg); }
.ic-star    { -webkit-mask-image: url(icons/star-solid-full.svg);          mask-image: url(icons/star-solid-full.svg); }
.ic-xmark   { -webkit-mask-image: url(icons/xmark.svg);                    mask-image: url(icons/xmark.svg); }
.dim { color: var(--muted); }

button { font-family: inherit; border: none; background: none; color: var(--text); cursor: pointer; }
.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%; color: var(--text);
  transition: background .15s, color .15s, transform .05s;
}
.iconbtn:hover { background: var(--panel2); }
.iconbtn:active { transform: scale(.92); }

/* ---------- 自訂拉桿：圓點 hover 才顯示 ---------- */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  height: 5px; border-radius: 3px; background: var(--track); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  opacity: 0; transition: opacity .15s; margin-top: 0;
}
input[type="range"]:hover::-webkit-slider-thumb { opacity: 1; }
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border: none; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .15s;
}
input[type="range"]:hover::-moz-range-thumb { opacity: 1; }
/* 人聲回音／人聲亮度：圈圈常駐顯示（不必 hover） */
#reverb::-webkit-slider-thumb, #presence::-webkit-slider-thumb { opacity: 1; }
#reverb::-moz-range-thumb, #presence::-moz-range-thumb { opacity: 1; }

/* ---------- 頂部 ---------- */
#topbar { display: flex; align-items: center; gap: 10px; padding: 10px 30px; background: #000; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 3px; font-family: "Bricolage Grotesque", sans-serif; font-size: 32px; font-weight: 800; letter-spacing: .4px; white-space: nowrap; cursor: pointer; user-select: none; }
.brand .logo-mark, .brand .brand-txt { transition: transform .15s, box-shadow .2s; transform-origin: left center; }
body.sidebar-open .logo-mark .ic { filter: drop-shadow(0 0 6px var(--accent)); }
.brand-txt span { color: var(--accent); }
.logo-mark { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.logo-mark .ic { width: 39px; height: 39px; background-color: var(--accent); }
.ic-note { -webkit-mask-image: url(icons/music-note.svg); mask-image: url(icons/music-note.svg); }
.ic-cloud-music { -webkit-mask-image: url(icons/cloud-music.svg); mask-image: url(icons/cloud-music.svg); }
.ic-mic-stand { -webkit-mask-image: url(icons/microphone-stand.svg); mask-image: url(icons/microphone-stand.svg); }
.ic-lyric { -webkit-mask-image: url(icons/lyric-music-svgrepo-com.svg); mask-image: url(icons/lyric-music-svgrepo-com.svg); }
.ic-mobile { -webkit-mask-image: url(icons/mobile-screen-button-solid-full.svg); mask-image: url(icons/mobile-screen-button-solid-full.svg); }
.ic-arrow-left { -webkit-mask-image: url(icons/arrow-left-solid-full.svg); mask-image: url(icons/arrow-left-solid-full.svg); }
.home-sec h3, .lp-head, .modal-head { color: var(--accent); }
.inputbar { position: relative; flex: 1; min-width: 0; height: 42px; margin-left: 10px; display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 14px; }
.inputbar.drag { border-color: var(--accent); background: var(--accent-dim); }
.inputbar:has(#url:not(:placeholder-shown)) { border-color: var(--accent); }   /* 有打字→邊框 LOGO 青色 */
#url { flex: 1; background: transparent; border: none; color: var(--text); font-size: 15px; padding: 8px 4px; outline: none; }
.mc-btn { border: 1px solid var(--line); background: var(--panel2); color: var(--text); border-radius: 999px; padding: 9px 20px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; transition: filter .15s; }
.mc-btn:hover { filter: brightness(1.15); }
.mc-btn.primary { background: var(--accent); color: #041014; border-color: var(--accent); }
.add-methods { display: flex; gap: 10px; justify-content: center; margin: 6px 0 4px; }
#url-spin { cursor: pointer; }
/* 家中主機離線：搜尋欄右側顯示紅色圈圈環（與藍色轉檔圈同位置、同大小） */
#worker-status { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #f05252; background: transparent; box-shadow: 0 0 6px rgba(240,82,82,.5); cursor: help; flex-shrink: 0; }
#worker-status.hidden { display: none; }
/* 轉檔佇列面板 */
#queue-panel { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 60; width: min(360px, 90vw); max-height: 60vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
#queue-panel.hidden { display: none; }
.qp-empty { color: var(--muted); font-size: 14px; padding: 8px 2px; }
.qp-item { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.qp-item:last-child { border-bottom: none; }
.qp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.qp-dot.processing { background: var(--accent); animation: spin 1s linear infinite; box-shadow: 0 0 6px var(--accent); }
.qp-meta { min-width: 0; }
.qp-t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-s { font-size: 12px; color: var(--muted); }
/* 登入畫面 */
#login-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(6,6,10,.92); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
#login-overlay.hidden { display: none; }
.login-box { width: min(340px, 88vw); background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.login-logo { display: flex; align-items: center; gap: 12px; font-family: "Bricolage Grotesque", sans-serif; font-size: 27.3px; font-weight: 800; justify-content: center; margin-bottom: 8px; transform: translateX(-10px); }
.login-box input { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--text); font-size: 15px; outline: none; }
.login-box input:focus { border-color: var(--accent); }
#login-btn { background: var(--accent); color: #041014; border: none; border-radius: 10px; padding: 12px; font-size: 15px; font-weight: 800; cursor: pointer; margin-top: 4px; }
.login-err { color: #f87171; font-size: 13px; min-height: 16px; text-align: center; }
/* 帳號面板 */
#account-panel { position: fixed; top: 62px; right: 12px; width: 300px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.55); z-index: 45; }
#account-panel.hidden { display: none; }
#account-panel input { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--text); outline: none; }
#account-panel button { background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.acc-who { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.acc-who b { color: var(--text); }
.acc-sub { margin-top: 14px; }
.acc-actions { display: flex; gap: 8px; margin-top: 14px; }
.acc-actions button { flex: 1; }
#logout-btn { color: #f0a0a0; }
#user-list { margin-top: 8px; }
.ul-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ul-btns { display: flex; gap: 6px; }
.ul-btns button { padding: 4px 8px; font-size: 12px; }
.ul-del { color: #f87171; }
/* 待播清單彈出卡 */
#playqueue-panel { position: fixed; top: 66px; right: 12px; z-index: 55; width: min(460px, 92vw); background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 14px 44px rgba(0,0,0,.55); }
#playqueue-panel.hidden { display: none; }
#pq-list { max-height: 300px; overflow-y: auto; padding-right: 8px; }
.pq-item { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line); }
.pq-item:last-child { border-bottom: none; }
.pq-item.playing .t { color: var(--accent); }
.pq-num { width: 18px; text-align: center; color: var(--muted); font-size: 13px; flex-shrink: 0; }
.pq-item img, .pq-item .noimg { width: 48px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--panel); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.pq-item .meta { min-width: 0; flex: 1; }
.pq-item .t { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pq-item .a { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pq-key { display: flex; align-items: center; gap: 1px; flex-shrink: 0; height: 30px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; }
.pq-key .lbl { font-size: 10px; color: var(--muted); margin-right: 3px; }
.pq-key .iconbtn { width: 18px; height: 18px; }
.pq-key .iconbtn .ic { width: 11px; height: 11px; }
.pq-key .kv { min-width: 20px; text-align: center; font-size: 12px; font-weight: 600; }
.pq-item .del { flex-shrink: 0; }
.npbtn.flash { background: var(--accent); color: #04121f; }
/* 改名視窗語種選擇 */
.lang-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lang-btn { padding: 6px 12px; font-size: 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; font-family: inherit; }
.lang-btn.on { background: var(--accent); color: #04121f; border-color: var(--accent); font-weight: 700; }
/* 歌詞開關 segmented */
.seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg-b { border: none; background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }
.seg-b.active { background: var(--accent); color: #04121f; }
.lp-search input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; color: var(--text); outline: none; }
/* 通知卡 */
#toasts { position: fixed; top: 74px; right: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
/* 比照手機版通知樣式，尺寸放大 200% */
.toast { background: var(--accent); color: #04121f; font-size: 27px; font-weight: 600; padding: 22px 32px; border-radius: 20px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: 640px; opacity: 0; transform: translateX(24px); transition: opacity .3s, transform .3s; }
.toast.show { opacity: 1; transform: none; }
/* 全螢幕模式：只顯示影片，上下選單滑鼠動才浮現 */
body.fs #sidebar, body.fs #home { display: none; }
body.fs #stage { position: fixed; inset: 0; z-index: 100; background: #000; }
body.fs #yt-stage, body.fs #lyric-stage { position: absolute; inset: 0; }
body.fs #yt-video { width: 100%; height: 100%; object-fit: contain; }
body.fs #topbar, body.fs #controls { position: fixed; left: 0; right: 0; z-index: 200; background: rgba(12,12,16,.8); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .3s; }
body.fs #topbar { top: 0; } body.fs #controls { bottom: 0; }
body.fs.fs-ui #topbar, body.fs.fs-ui #controls { opacity: 1; pointer-events: auto; }
body.fs:not(.fs-ui), body.fs:not(.fs-ui) * { cursor: none; }   /* 全螢幕閒置(UI 隱藏時)一併藏滑鼠游標 */
/* 全螢幕時各彈出面板要浮在舞台(z:100)與頂列(z:200)之上，否則會被黑色舞台蓋住看不到 */
body.fs #ly-panel, body.fs #playqueue-panel, body.fs #sys-panel, body.fs #account-panel { z-index: 210; }
/* 首頁卡片：星＋加入並排 */
.card-foot { display: flex; align-items: center; gap: 6px; }
.card-foot .card-txt { flex: 1; min-width: 0; }
/* 加歌面板（搜尋列下方） */
#add-pop { position: absolute; top: calc(100% + 6px); left: 0; width: min(300px, 90vw); background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.55); z-index: 31; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
#add-pop.hidden { display: none; }
.ap-seg { display: flex; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.ap-seg-btn { flex: 1; border: none; background: transparent; color: var(--muted); border-radius: 999px; padding: 7px 0; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: background .12s; }
.ap-seg-btn.active { background: var(--accent); color: #041014; }
.ap-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.ap-field input { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; color: var(--text); font-size: 14px; outline: none; }
.ap-field input:focus { border-color: var(--accent); }
.ap-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px; }
.ap-actions button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 8px; padding: 8px 18px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; }
#add-confirm { background: var(--accent); color: #041014; border-color: var(--accent); }
/* 設定面板：目前音訊裝置 */
.dev-info { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.dev-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.dev-lbl { color: var(--muted); white-space: nowrap; }
.dev-row span:last-child { color: var(--text); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spin { width: 18px; height: 18px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.topctrls { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
/* ===== 播放列右側：音量 / KEY 膠囊（收合↔展開） ===== */
.key, .vol { display: flex; align-items: center; gap: 0; height: 42px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; transition: border-color .15s; }
.key { padding-left: 12px; }   /* KEY 內容位置微調 */
.key .lbl { font-size: 12px; font-weight: 700; color: var(--text); margin-right: 4px; flex-shrink: 0; }

/* icon（靜音鈕，透明底） */
.volbtn { width: 26px; height: 26px; flex-shrink: 0; border: none; background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.volbtn .ic { width: 18px; height: 18px; }

/* 加減鈕：實心灰圓，hover 變主色青 */
.stepbtn { width: 22px; height: 22px; flex-shrink: 0; margin: 0 2px; border: none; border-radius: 50%; background: var(--track); color: var(--text); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .12s, transform .05s, width .2s ease, opacity .18s ease, margin .2s ease; }
.stepbtn .ic { width: 11px; height: 11px; }
.stepbtn:hover { background: var(--accent); color: var(--bg); }
.stepbtn:active { transform: scale(.9); }

/* icon 右邊的數值（音量：常駐在左側；KEY：值） */
.vc-num { font-size: 14px; font-weight: 700; min-width: 22px; text-align: center; margin: 0 4px; }
#key-val.vc-num { min-width: 26px; font-size: 15px; }

/* 可拖曳音量條：從 icon 與數字之間長出；白色把手常駐；拖曳以 5% 為單位 */
.vc-track { position: relative; width: 130px; height: 8px; flex-shrink: 0; margin: 0 4px; border-radius: 999px; background: var(--track); cursor: pointer; touch-action: none; transition: width .2s ease, opacity .18s ease, margin .2s ease; }
.vol-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--accent); pointer-events: none; transition: width .08s; }
.vc-knob { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.5); transform: translate(-50%, -50%); pointer-events: none; }

/* 靜音：整顆紅框 + 紅 icon + 數值變暗 */
.vol.muted { border-color: var(--rec); }
.vol.muted .volbtn { color: var(--rec); }
.vol.muted .vc-num { color: var(--muted); }
.vol.muted .vol-fill { background: var(--track); }

/* 桌機（有滑鼠）：音量條/KEY加減鈕預設收合，hover 才展開；數字常駐；觸控裝置常駐展開 */
@media (hover: hover) and (pointer: fine) {
  .key .stepbtn, .vol .vc-track { width: 0; margin-left: 0; margin-right: 0; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; }
  .key:hover .stepbtn { width: 22px; margin: 0 2px; opacity: 1; overflow: visible; pointer-events: auto; }
  .vol:hover .vc-track { width: 130px; margin: 0 4px; opacity: 1; overflow: visible; pointer-events: auto; }
}
.topbtn { width: 42px; height: 42px; min-width: 42px; margin-left: 10px; padding: 0; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--text); display: inline-flex; align-items: center; justify-content: center; transition: background .15s, transform .24s cubic-bezier(.34,1.56,.64,1), width .24s cubic-bezier(.34,1.56,.64,1), min-width .24s cubic-bezier(.34,1.56,.64,1), margin .24s cubic-bezier(.34,1.56,.64,1), opacity .16s; }
.topbtn:hover { background: var(--panel2); }
.topbtn:active { transform: scale(.94); }
/* 沒歌時收起(寬度歸零+縮小消失)，播歌彈出；搜尋列因 flex 自動被擠左/長回 */
.topbtn.locked { width: 0; min-width: 0; margin-left: 0; padding: 0; border-width: 0; opacity: 0; transform: scale(0); overflow: hidden; pointer-events: none; }
.topbtn .ic { width: 21.6px; height: 21.6px; }
.topbtn .txt-ic { font-size: 18px; font-weight: 900; line-height: 1; color: var(--text); }
.recbtn { color: var(--rec); }
.recbtn.recording { background: var(--rec); border-color: var(--rec); color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* 搜尋歌曲庫下拉 */
#search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.55); max-height: 340px; overflow-y: auto; z-index: 30; padding: 6px; }
.sr-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.sr-item:hover { background: var(--panel); }
.sr-item img, .sr-item .noimg { width: 44px; height: 34px; border-radius: 5px; object-fit: cover; background: var(--panel); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.sr-item .meta { flex: 1; min-width: 0; }
.sr-item .t { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-item .a { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-empty { padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* 圓框小按鈕（加入待播 / 刪除） */
.circbtn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--panel); color: var(--text); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s, border-color .15s, transform .05s; }
.circbtn:hover { background: var(--panel2); border-color: var(--accent); }
.circbtn:active { transform: scale(.9); }
.circbtn .ic { width: 13px; height: 13px; }

/* ---------- 主區 ---------- */
main { flex: 1; display: flex; min-height: 0; }
#stage { flex: 1; position: relative; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#home { position: absolute; inset: 0; overflow-y: auto; padding: 26px 30px 30px; }
.home-sec { margin-bottom: 30px; }
.home-sec h3 { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.cardwall { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px 26px; }
.card { cursor: pointer; }
.card-img { position: relative; transition: transform .1s; }
.card:hover .card-img { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.5); border-radius: 8px; }
.card .thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; object-fit: cover; background: var(--panel2); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.card-more { position: absolute; top: 8px; right: 8px; opacity: 0; background: rgba(0,0,0,.6); border-color: rgba(255,255,255,.35); color: #fff; transition: opacity .15s; }
.card:hover .card-more { opacity: 1; }
.card .thumb .ic { width: 34px; height: 34px; }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.card-txt { flex: 1; min-width: 0; }
.card-foot .circbtn { flex-shrink: 0; }
/* 卡片按鈕：疊在縮圖右上，深色半透明底 */
.card-acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.card-acts .circbtn { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.35); color: #fff; }
.card-acts .circbtn:hover { background: rgba(0,0,0,.8); border-color: var(--accent); }
.card-acts .circbtn.star.on, .card-acts .circbtn.star.on .ic { color: var(--accent); border-color: var(--accent); }
/* 桌機：平常隱藏，滑鼠移到卡片才顯示；觸控裝置常駐顯示 */
@media (hover: hover) and (pointer: fine) {
  .card-acts { opacity: 0; transition: opacity .15s; }
  .card:hover .card-acts { opacity: 1; }
}
.card .t { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .a { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cardwall-empty { color: var(--muted); font-size: 13px; padding: 4px 0 8px; }
#yt-stage { width: 100%; height: 100%; }
#yt-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
#lyric-stage { position: absolute; inset: 0; }
#cover-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(34px) brightness(.4); transform: scale(1.15); }
#lyrics-wrap { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding: 8vh 24px; mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); }
#lyrics { transition: transform .5s cubic-bezier(.22,.61,.36,1); text-align: center; width: 100%; }
.line { display: block; font-size: 41px; line-height: 1.95; color: #6d6d76; opacity: .75; transition: color .3s, opacity .3s, transform .3s; }
.line .inner { display: inline-block; max-width: 100%; }
.line.current { color: #fff; font-weight: 700; opacity: 1; transform: scale(1.06); }
ruby rt { font-size: .44em; font-weight: 400; opacity: .8; }
#lyrics.static { text-align: center; }
#lyrics.static .line { font-size: 31px; color: #c8c8d0; opacity: 1; white-space: normal; }
#lyrics-wrap.scroll { overflow-y: auto; }

/* YT 影片字幕（兩行）+ 控制鈕 */
.yt-ctrls { position: absolute; bottom: 18px; right: 18px; z-index: 15; display: flex; gap: 8px; }
/* KTV 雙行字幕：上行靠左、下行靠右，交替輪播；藍色逐字/逐句掃過 */
#yt-caption { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 12; padding: 0 5%; pointer-events: none; display: flex; flex-direction: column; gap: 6px; }
.kcap { display: flex; min-height: 1.35em; }
.kcap-top { justify-content: flex-start; }
.kcap-bot { justify-content: flex-end; }
.kcap.empty { visibility: hidden; }
#cap-hint { text-align: center; font-size: 26px; font-weight: 700; color: rgba(255,255,255,.85); text-shadow: 0 2px 10px rgba(0,0,0,.95); }
#cap-hint.hidden { display: none; }
.krow { display: inline-flex; max-width: 100%; }
.kmain { position: relative; display: inline-block; font-family: "GenSenRounded", "Noto Sans TC", "Noto Sans JP", sans-serif; font-size: var(--cap-fs, clamp(32px, 6.5vw, 80px)); font-weight: 800; line-height: 1.35; white-space: nowrap; transition: transform .1s; }
.kcap-top .kmain { transform-origin: left center; }
.kcap-bot .kmain { transform-origin: right center; }
/* 兩層互補裁切，永不交疊：base(未唱) 顯示右段、fill(已唱) 顯示左段 */
.kbase, .kfill { display: block; white-space: nowrap; paint-order: stroke fill; will-change: clip-path; }
/* 未唱：白底黑粗框 */
.kbase { color: #fff; -webkit-text-stroke: 0.09em #000; }
/* 已唱：藍底白粗框，疊在 base 上、只露左段 */
.kfill { position: absolute; left: 0; top: 0; color: #0000E3; -webkit-text-stroke: 0.09em #fff; clip-path: inset(0 100% 0 0); }
/* 假名標注(ruby) */
.kmain ruby rt { font-size: .42em; font-weight: 700; opacity: 1; -webkit-text-stroke-width: 6px; }
/* 換行時的預備行淡入 */
.kmain.enter { animation: kEnter .35s ease; }
@keyframes kEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 側欄（1.5x + 分頁） ---------- */
#sidebar { order: -1; width: 396px; background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; transition: width .2s; }
#sidebar.collapsed { width: 0; overflow: hidden; border-right: none; }
.sb-tabs { position: relative; display: flex; gap: 4px; flex-shrink: 0; background: var(--panel2); border-radius: 999px; padding: 4px; margin: 10px; }
.tab-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: 0; background: var(--accent); border-radius: 999px; z-index: 0; transition: left .25s ease, width .25s ease; }
.tab { position: relative; z-index: 1; flex: 1; padding: 9px 4px; font-size: 13px; color: var(--muted); background: none; font-weight: 600; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; transition: color .2s; }
.tab .ic { width: 15px; height: 15px; }
.tab-a { font-family: "Asap", sans-serif; font-weight: 900; font-size: 15px; }
.tab.active { color: #04121f; background: none; }
.art-avatar { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.art-avatar .ic { width: 20px; height: 20px; }
.art-avatar .tab-a { font-family: "Asap", sans-serif; font-weight: 900; font-size: 18px; color: var(--muted); }
.tabpage { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lang-head { font-size: 12px; font-weight: 700; color: var(--accent); padding: 10px 10px 4px; position: sticky; top: 0; background: var(--panel); }
.circbtn.star.on { color: var(--accent); border-color: var(--accent); }
.circbtn.star.on .ic { color: var(--accent); }
.noimg .ic { width: 20px; height: 20px; }
.art-ic { color: var(--muted); }
.lib-back { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; margin-bottom: 6px; background: var(--panel2); border-radius: 8px; color: var(--text); font-size: 13px; font-weight: 600; }
.lib-back:hover { background: #33333a; }
.lib-back .ic { width: 14px; height: 14px; }
#library, #queue { flex: 1; overflow-y: auto; padding: 6px 8px 12px; }

/* 自訂捲軸：細、圓角、配合深色主題（thumb 用透明邊框留白，順便和內容拉開距離） */
#library, #pq-list, #queue-panel, #search-results, #ly-results, #home, #sys-panel, #user-list {
  scrollbar-width: thin; scrollbar-color: var(--track) transparent;
}
#library::-webkit-scrollbar, #pq-list::-webkit-scrollbar, #queue-panel::-webkit-scrollbar,
#search-results::-webkit-scrollbar, #ly-results::-webkit-scrollbar, #home::-webkit-scrollbar,
#sys-panel::-webkit-scrollbar, #user-list::-webkit-scrollbar { width: 10px; }
#library::-webkit-scrollbar-track, #pq-list::-webkit-scrollbar-track, #queue-panel::-webkit-scrollbar-track,
#search-results::-webkit-scrollbar-track, #ly-results::-webkit-scrollbar-track, #home::-webkit-scrollbar-track,
#sys-panel::-webkit-scrollbar-track, #user-list::-webkit-scrollbar-track { background: transparent; }
#library::-webkit-scrollbar-thumb, #pq-list::-webkit-scrollbar-thumb, #queue-panel::-webkit-scrollbar-thumb,
#search-results::-webkit-scrollbar-thumb, #ly-results::-webkit-scrollbar-thumb, #home::-webkit-scrollbar-thumb,
#sys-panel::-webkit-scrollbar-thumb, #user-list::-webkit-scrollbar-thumb {
  background: var(--track); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}
#library::-webkit-scrollbar-thumb:hover, #pq-list::-webkit-scrollbar-thumb:hover, #queue-panel::-webkit-scrollbar-thumb:hover,
#search-results::-webkit-scrollbar-thumb:hover, #ly-results::-webkit-scrollbar-thumb:hover, #home::-webkit-scrollbar-thumb:hover,
#sys-panel::-webkit-scrollbar-thumb:hover, #user-list::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; position: relative; }
.item:hover { background: var(--panel2); }
.item.playing { background: var(--accent-dim); }
.item.playing .t, .item.playing .a { color: var(--accent); }
.item.dragging { opacity: .4; }
.item.dragover { box-shadow: inset 0 2px 0 var(--accent); }
.item img, .item .noimg { width: 56px; height: 42px; border-radius: 6px; object-fit: cover; background: var(--panel2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.item .meta { min-width: 0; flex: 1; }
.item .t { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .t:has(.lyric-dot), .card-txt .t:has(.lyric-dot) { display: flex; align-items: center; gap: 6px; }
.item .t:has(.lyric-dot) .t-txt, .card-txt .t:has(.lyric-dot) .t-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lyric-dot { display: inline-block; flex: none; width: 1.15em; height: 1.15em; background-color: var(--muted); -webkit-mask: center / contain no-repeat url(icons/lyric-music-svgrepo-com.svg); mask: center / contain no-repeat url(icons/lyric-music-svgrepo-com.svg); vertical-align: middle; transform: translateY(1px); }
.item .a { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .acts { display: flex; gap: 6px; flex-shrink: 0; }
.item .badge { position: absolute; left: 8px; top: 8px; }
.item .badge .ic { width: 14px; height: 14px; color: #fff; filter: drop-shadow(0 0 2px #000); }
.queue-num { width: 20px; text-align: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.list-empty { padding: 24px 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------- 底部播放列 ---------- */
#controls { position: relative; flex-shrink: 0; background: var(--panel); border-top: 1px solid var(--line); padding: 12px 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.np-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-cover { width: 52px; height: 52px; border-radius: 6px; background: var(--panel2) center/cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.np-cover .ic { width: 22px; height: 22px; }
.np-meta { min-width: 0; }
#song-title { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#song-artist { font-size: 12px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-center { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 520px; max-width: 46vw; }
.np-buttons { display: flex; align-items: center; gap: 14px; }
.playbtn { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #000; display: inline-flex; align-items: center; justify-content: center; transition: transform .06s; }
.playbtn:hover { transform: scale(1.06); }
.playbtn:active { transform: scale(.95); }
.playbtn .ic { width: 18px; height: 18px; }
.np-progress { display: flex; align-items: center; gap: 10px; width: 100%; }
.np-progress span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; }
#seek { flex: 1; }
.np-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; transform: scale(1.08); transform-origin: right center; }
.npbtn { width: 42px; height: 42px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, transform .05s; }
.npbtn:hover, .topbtn:hover { background: var(--panel2); }
.npbtn:active { transform: scale(.94); }
.npbtn .ic { width: 18px; height: 18px; }
/* 四個彈窗開關鈕作用中：主色底、深色 icon（歌詞鈕作用中＝歌詞已開啟） */
.npbtn.active, .topbtn.active { background: var(--accent); color: #04121f; border-color: var(--accent); }
#rn-delete { color: #f0808a; }
/* 待播數量紅圈 */
.topbtn { position: relative; }
.q-badge { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 3px; border-radius: 999px; background: #f0405a; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.q-badge.hidden { display: none; }
/* 語種圈圈第一字 */
.lang-ch { font-family: "Noto Sans TC", sans-serif; font-weight: 700; font-size: 17px; color: var(--muted); }
/* 歌詞記憶鈕 */
.ly-remember { width: 100%; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 9px; cursor: pointer; font-family: inherit; font-size: 13px; }
.ly-remember .ic { width: 14px; height: 14px; color: var(--accent); }
/* 按鈕內容放大 110% */
.ly-remember > span { display: inline-flex; align-items: center; gap: 6px; transform: scale(1.1); transform-origin: center; }
/* 已記憶：平常顯示 rem-normal，hover 換成 rem-hover(取消記憶) */
.ly-remember .rem-hover { display: none; }
.ly-remember.remembered:hover .rem-normal { display: none; }
.ly-remember.remembered:hover .rem-hover { display: inline-flex; align-items: center; gap: 6px; }
.ly-remember.remembered:hover .ic-circle-xmark { color: var(--rec); }
.sr-item .circbtn { flex-shrink: 0; }

/* ---------- 歌詞設定彈窗 ---------- */
.ly-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.4); color: #fff; font-size: 13px; font-family: inherit; backdrop-filter: blur(6px); transition: background .15s; }
#ly-settings { position: absolute; bottom: 18px; right: 18px; z-index: 15; }
.ly-btn:hover { background: rgba(0,0,0,.65); }
.ly-btn.active { background: var(--accent); color: #04121f; border-color: var(--accent); font-weight: 700; }
.ly-btn { white-space: nowrap; }
.ly-btn .ic { width: 16px; height: 16px; }

#ly-panel { position: fixed; top: 66px; right: 12px; width: 340px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.55); z-index: 40; }
#sys-panel { position: fixed; top: 62px; right: 12px; width: 300px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.55); z-index: 45; }
#sys-panel input[type="range"] { flex: 1; }
#sys-panel .lp-lbl { min-width: 62px; }
#sys-panel span[id$="-val"] { font-size: 12px; color: var(--muted); min-width: 34px; text-align: right; }
.sys-note { font-size: 12px; color: var(--muted); margin: 4px 0 0; line-height: 1.5; }
.lp-head { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.lp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.lp-div { height: 1px; background: var(--line); margin: 2px 0 12px; }
.lp-lbl { font-size: 13px; color: var(--muted); }
.lp-row .iconbtn { width: 30px; height: 30px; background: var(--panel); }
.lp-row .ic { width: 14px; height: 14px; }
/* 歌詞設定：開關 + 微調 同一行，微調用膠囊包覆（比照 KEY） */
.lp-settings { justify-content: space-between; }
.ly-offset { display: flex; align-items: center; gap: 2px; height: 36px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; }
.ly-offset .iconbtn { width: 26px; height: 26px; background: transparent; }
.ly-offset .iconbtn:hover { background: var(--panel2); }
#offset-val { font-size: 13px; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
#ly-search-title, #ly-search-artist { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 7px; font-size: 13px; font-family: inherit; }
#ly-search-go { background: var(--accent); color: #04121f; font-weight: 700; border-radius: 8px; padding: 7px 12px; font-size: 13px; }
#ly-results { max-height: 200px; overflow-y: auto; margin-bottom: 8px; }
.lyr { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.lyr:hover { background: var(--panel); }
.lyr.sel { color: var(--accent); }
.lyr .ic-check { width: 14px; height: 14px; visibility: hidden; }
.lyr.sel .ic-check { visibility: visible; }
.lyr .src { flex-shrink: 0; color: var(--muted); font-size: 11px; }
.lyr .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-chk { font-size: 13px; color: var(--text); gap: 8px; margin-bottom: 0; }

/* 更多選單 */
#item-menu { position: fixed; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,.55); padding: 6px; z-index: 55; min-width: 150px; }
#item-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 7px; font-size: 13px; color: var(--text); }
#item-menu button:hover { background: var(--panel); }
#item-menu button[data-act="delete"] { color: var(--rec); }

/* 手機點歌：設定面板按鈕 + 配對彈窗（四碼 + QR） */
.remote-open { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; }
.remote-open:hover { border-color: var(--accent); color: var(--accent); }
.remote-open .ic { width: 16px; height: 16px; }
#remote-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 70; }
.remote-box { width: 320px; text-align: center; }
.remote-box .modal-head { text-align: left; }
.rm-qr { width: 168px; height: 168px; margin: 4px auto 14px; padding: 10px; background: #fff; border-radius: 12px; }
.rm-qr svg { width: 100%; height: 100%; display: block; }
.rm-url { font-size: 15px; font-weight: 700; color: var(--accent); word-break: break-all; }
.rm-hint { font-size: 12px; color: var(--muted); margin: 6px 0 14px; }
.rm-pin { display: flex; justify-content: center; gap: 10px; }
.rm-pin span { width: 52px; height: 64px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: 34px; font-weight: 900; color: var(--text); font-variant-numeric: tabular-nums; }
.rm-exp { font-size: 12px; color: var(--muted); margin-top: 12px; }
.remote-box .modal-btns { justify-content: center; margin-top: 16px; }
#rm-close { background: var(--accent); color: #04121f; font-weight: 700; }

/* 改名視窗 */
#rename-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 70; }
.modal-box { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; width: 340px; }
.modal-head { font-size: 16px; font-weight: 700; margin-bottom: 16px; }
.modal-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.modal-field input { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 9px; font-size: 14px; font-family: inherit; }
.modal-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.modal-btns button { padding: 9px 16px; border-radius: 8px; font-size: 14px; background: var(--panel); color: var(--text); }
#rn-save { background: var(--accent); color: #04121f; font-weight: 700; }

.hidden { display: none !important; }