*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* themed thin scrollbars (replace the ugly native ones, all panes incl. immersive) */
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
::-webkit-scrollbar-corner{background:transparent}
body{background:var(--bg);color:var(--txt);font:14px/1.45 ui-monospace,"Cascadia Mono","JetBrains Mono",Consolas,Menlo,monospace;-webkit-font-smoothing:antialiased;overflow:hidden;display:flex;flex-direction:column}
/* ── 一張會呼吸的 CANVAS:整個 app 共用的動態光背板(NOVA 光球 + 正在播放影片的顏色光暈,緩慢呼吸)。所有 UI 疊在它上面。 ── */
#canvasBg{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  --ambCa:0;
  background:
             radial-gradient(140% 130% at 50% 44%,transparent 40%,color-mix(in srgb,#000 14%,transparent) 76%,color-mix(in srgb,#000 30%,transparent) 100%),   /* 景深暗角:四邊收暗、中央留亮 → 置中內容像浮在縱深裡(非留白) */
             radial-gradient(60% 52% at 50% 46%,color-mix(in srgb,var(--panel) 24%,transparent),transparent 72%),   /* 中央舞台微光池:主要內容像被打一束柔光 */
             radial-gradient(125% 100% at 50% 40%,rgb(var(--amb-c,150 120 220) / var(--ambCa)),transparent 78%),   /* 動態:單一融合色光,跟著影片色盤 ~20fps 緩慢漂移(一張、不分區 → 無斷裂) */
             radial-gradient(130% 110% at 12% -10%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 52%),
             radial-gradient(120% 110% at 92% 108%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 56%),var(--bg)}
body.playing.hasAmb #canvasBg{--ambCa:.44}   /* 動態場景色光(--amb-c 跟著 storyboard)= 主要環境光 */
  /* 背景一體:沒有四邊獨立 LED 色區;= ::after(整片模糊影片色)+ --amb-c(漂移色光)+ ::before(呼吸光球),全部全幅、無矩形邊界 */
@property --ambA{syntax:"<number>";initial-value:0;inherits:false}   /* registered → the LED zones can FADE in/out (custom props don't transition otherwise) */
body.hasAmb #canvasBg{--ambA:.32}   /* set only when a real per-video palette is loaded (setAmbVars) → fallback colour never shows; toned down */
body.gimm.hasAmb #canvasBg{--ambA:.2}   /* 沉浸2:側邊彩光更克制 */
/* 沉浸光效關 (或 prefers-reduced-motion):停掉呼吸/流動光的動畫,靜態彩光仍在 */
body.noGlow #canvasBg{transition:none}
body.noGlow #canvasBg::before,body.noGlow #canvasBg::after,body.noGlow .npStage::before{animation:none!important}
/* PERF: during a 沉浸/視窗/懸浮 switch, drop the expensive backdrop-blur + breathing/drift so the transition doesn't fight the re-blurs (~420ms) */
body.switching #canvasBg::before,body.switching #canvasBg::after,body.switching .npStage::before,body.switching .mEq i{animation:none!important}
body.switching .panelTabs,body.switching #content,body.switching #facetPane,body.switching #npSide,body.switching header,body.switching #miniBar,body.switching #sysline{backdrop-filter:none!important}
/* ⚙ 旁的沉浸輪播 icon + 等級小角標 */
.immCycleBtn{position:relative} .immCycleBtn svg{width:15px;height:15px}
#canvasBg::before,#canvasBg::after{content:"";position:absolute;inset:-14%;pointer-events:none;will-change:transform,opacity}
#canvasBg::before{background:radial-gradient(58% 58% at 28% 26%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 70%),
                             radial-gradient(54% 54% at 80% 76%,color-mix(in srgb,var(--accent2) 26%,transparent),transparent 70%);
  filter:blur(44px);opacity:.5;animation:cbBreathe 13s ease-in-out infinite}
#canvasBg::after{background:var(--np-thumb,none) center/cover no-repeat;filter:blur(82px) saturate(1.9);
  opacity:0;transition:opacity 1s ease;animation:cbBreathe 11s ease-in-out infinite reverse}
body.playing #canvasBg::after{opacity:.16}   /* 封面模糊圖只當淡淡質感 — 主色改由 --amb-c(跟著 storyboard 場景動態變色)提供,避免被「封面色」綁住 */
body.gimm #canvasBg::after{opacity:.1}
:root[data-theme="light"] #canvasBg::after{filter:blur(82px) saturate(1.7) brightness(1.1)}   /* 淺色:稍亮的彩光洗在白底上 */
@keyframes cbBreathe{0%,100%{transform:scale(1.04) translate(0,0)}50%{transform:scale(1.13) translate(-1.6%,-1%)}}
@media(prefers-reduced-motion:reduce){#canvasBg::before,#canvasBg::after{animation:none}}
#app{position:relative;z-index:1}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
b{font-weight:600}
::selection{background:var(--glow-soft)}
:where(button,input,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hidden{display:none!important}
.small{font-size:12px}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;gap:10px}
.grow{flex:1}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--ctl-bd);background:var(--ctl-bg);color:var(--txt);border-radius:var(--ctl-r);white-space:nowrap;text-transform:none;transition:background .14s,border-color .14s,color .14s}
.btn:hover{background:var(--ctl-bg-h)}
.btn.primary{background:var(--accent);color:var(--bg);border-color:transparent}
.btn.icon-only{padding:7px 9px}
.btn.icon-only svg{width:15px;height:15px;display:block}
.btn.icon-only:hover{color:var(--accent2)}
.btn.primary:hover{filter:brightness(1.08)}
.btn svg{width:15px;height:15px}
/* ---- floating tooltips (macOS / CleanShot style: delayed fade-in, no layout shift) ---- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%) translateY(3px);
  white-space:nowrap;padding:5px 9px;border-radius:7px;font-size:11px;line-height:1;letter-spacing:.02em;
  background:color-mix(in srgb,var(--txt) 90%,transparent);color:var(--bg);box-shadow:0 6px 18px -6px #000;
  opacity:0;pointer-events:none;z-index:400;transition:opacity .13s ease,transform .13s ease;transition-delay:0s}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0);transition-delay:.35s}
[data-tip][data-tip-side="up"]::after{top:auto;bottom:calc(100% + 7px);transform:translateX(-50%) translateY(-3px)}
[data-tip][data-tip-side="up"]:hover::after{transform:translateX(-50%) translateY(0)}
/* ---- sort direction toggle (↑/↓) ---- */
.sortDirBtn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:0;background:none;
  color:var(--muted);font-size:13px;line-height:1;cursor:pointer;border-radius:4px;transition:color .14s,background .14s}
.sortDirBtn:hover{color:var(--accent);background:var(--ctl-bg-h)}
.sortctl.is-random .sortDirBtn{opacity:.45}
kbd{font:600 11px ui-monospace,monospace;padding:1px 5px;border:1px solid var(--line-strong);border-bottom-width:2px;background:var(--panel2);min-width:16px;text-align:center;display:inline-block}

/* ============================ HEADER ============================ */
/* TOP BAR 移除:header → 透明浮層外殼(無 bar 背景);STAK LOGO 直接壓在共用 canvas / 影片上;右上角只留 眼睛 / 沉浸 / 選單(⚙) */
header{position:fixed;inset:0 0 auto 0;height:0;padding:0;margin:0;z-index:40;display:block;background:none;border:0;box-shadow:none;backdrop-filter:none;pointer-events:none}
header .brand{position:fixed;left:16px;top:12px;z-index:42;pointer-events:auto;transition:opacity .3s ease}
header .sp{display:none}
header #conn,header #btnAccount{display:none!important}   /* 連線狀態 + 帳號 移進 ⚙ 選單 */
#topRight{position:fixed;right:14px;top:11px;z-index:261;display:flex;gap:6px;pointer-events:auto;transition:opacity .3s ease}
body.pp-open .npTitle .npBrand{display:none}   /* 播放頁改用左上角共用 LOGO(.brand);影片標題列內的小 Stak 收掉避免重複 */
body.gimm #topRight{display:none}                                  /* 沉浸:瀏覽用晶片群、播放用 #immExit·#xUiEye */
body.gimm:not(.pp-open):has(#tabHome.on) #topRight,body.gimm:not(.pp-open):has(#tabBinder.on) #topRight{display:flex}   /* 沉浸『首頁』+『STAK 總覽』沒有工具列晶片群 → 顯示 #topRight(眼睛/沉浸/⚙) */
body.hideCursor #topRight{opacity:0;pointer-events:none}
body.gimm:not(.pp-open):has(#tabHome.on).hideCursor #topRight,body.gimm:not(.pp-open):has(#tabBinder.on).hideCursor #topRight{opacity:1!important;pointer-events:auto!important}   /* 沉浸首頁/STAK:沒有別的退出口 → 閒置也不淡出三顆控制鈕(否則會「消失」) */
body.pp-open .binderBar,body.pp-open .deckBar,body.stak-inner .binderBar{display:none!important}   /* STAK 進影片頁/盤內頁:隱藏輪播/架上/SMART 那列(只在 STAK 列表頁顯示) */
body.hideCursor.gimm header .brand{opacity:0;pointer-events:none}   /* 一般模式隱藏 UI 仍保留 LOGO;只有全沉浸閒置(全螢幕時 header 本就不在)才收起 */
/* 眼睛(UI 自動隱藏)在【一般模式】也生效:閒置時連工具列 / 狀態列一起淡出,移動滑鼠即回 */
.qbar,.statusline{transition:opacity .3s ease}
body.hideCursor:not(.gimm) .qbar,body.hideCursor:not(.gimm) .statusline{opacity:0;pointer-events:none}
#app{padding-top:8px}   /* 頂部 chrome 改為浮層後,內容上緣留一點呼吸 */
body:not(.gimm):not(.railOpen):not(.railPinned) #panelTabs{margin-top:36px;padding-top:11px}   /* 收合態:用 margin 把整張 frosted 卡(含底色)下移到 LOGO 之下 → LOGO 壓在 canvas 上、不蓋到 rail;首項仍落在 57 */
body.pp-open:not(.gimm) .npSide{padding-top:40px}   /* 播放頁資訊卡頂部讓開右上角 眼睛/沉浸/⚙ 群 */
#topRight button{background:color-mix(in srgb,var(--panel) 70%,transparent);border:1px solid var(--ctl-bd);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
#topRight button:hover{background:color-mix(in srgb,var(--panel) 88%,transparent)}
header .brand{padding:5px 9px;border-radius:8px}   /* logo 命中區(無底,壓在 canvas 上) */
/* ---- Stak wordmark + pure-CSS stacked-layers mark ---- */
.brand{display:flex;align-items:center;gap:9px;flex:none;font-weight:700;letter-spacing:.01em;font-size:16px;line-height:1}
.brandName{color:var(--txt)}
.brandMark{position:relative;width:17px;height:15px;flex:none;display:inline-block}
.brandMark i{position:absolute;left:0;right:0;height:3px;border-radius:1px;border:1px solid var(--line-strong);box-shadow:var(--well)}
.brandMark i:nth-child(1){top:0;background:var(--accent);border-color:var(--accent)}
.brandMark i:nth-child(2){top:6px;background:var(--accent2);border-color:var(--accent2);opacity:.85}
.brandMark i:nth-child(3){top:12px;background:linear-gradient(var(--keycap-top),var(--keycap-bot))}
/* === UI batch 2026-06-26 === */
/* (1) LOGO 整體等比縮小(完整 mark+Stak,不收來收去)→ 壓在 58px rail 欄內、不超出寬 */
header .brand{transform:scale(.8);transform-origin:left center;padding:0}
/* (2) 眼睛(hideCursor)= 隱藏 UI:一般模式 + 沉浸瀏覽,連左方 rail + 底部 miniBar 一起收起。
       transition 只放在「隱藏態」規則 → 淡出平滑、回來瞬間(避免 rail 重新出現時的淡入殘影) */
body.hideCursor:not(.gimm) #panelTabs,body.hideCursor:not(.gimm) #miniBar{opacity:0;pointer-events:none;transition:opacity .3s ease}
body.gimm:not(.pp-open).hideCursor #panelTabs{opacity:0;pointer-events:none;transition:opacity .3s ease}
/* (3) 沉浸播放頁:LOGO 維持左上角(同其他頁的 base 位置 left:16/top:12),‹ 返回鈕改放在 LOGO 正下方(直式堆疊) */
body.gimm.pp-open #xBack{top:44px;left:16px}
/* (4) 沉浸輪播:控制列不要貼頂(留呼吸,對齊 LOGO)+ 影卡放大(免太多留白) */
body.gimm:not(.pp-open) .binderBar{margin-top:12px}
/* (5) binderBar(輪播/架上 = vmSeg 分段 + SMART = .btn)對齊影像庫工具列:
       沉浸時 SMART 鈕也是 48px 玻璃晶片(vmSeg 由 .vmSeg 通則處理);隱藏UI 跟工具列一起淡出(淡出平滑、回來瞬間) */
.binderBar .binderSeg button{padding:7px 14px}
.binderBar .binderSeg button,.binderBar #binderNew{display:inline-flex;align-items:center;gap:7px}
.binderBar .binderSeg svg,.binderBar #binderNew svg{flex:none}
/* 沉浸:binderBar(輪播/架上/ADD)收成純 icon(對齊 deckBar/qbar);文字 .bl 隱藏 → i18n 仍可翻譯 span 文字 */
body.gimm:not(.pp-open) .binderBar .bl{display:none}
body.gimm:not(.pp-open) .binderBar .binderSeg button{padding:0;width:48px;justify-content:center;gap:0}
body.gimm:not(.pp-open) .binderBar #binderNew{padding:0;width:48px;justify-content:center;gap:0}
/* 沉浸 binderBar 改用「實心霧面」(不用 backdrop-filter)→ 玻璃模糊在 3D perspective 輪播 + 動態環境光上會逐幀重採樣抖動(小灰點亂閃);GRID 無 perspective 才沒事。實心化即根除,外觀仍近似工具列。 */
body.gimm:not(.pp-open) .binderBar .vmSeg,body.gimm:not(.pp-open) .binderBar .btn{height:48px;min-height:48px;border-radius:8px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--ctl-bd);box-shadow:0 6px 16px -10px #000}
body.hideCursor:not(.gimm) .binderBar,body.gimm:not(.pp-open).hideCursor .binderBar{opacity:0;pointer-events:none;transition:opacity .3s ease}
/* ====== 眼睛 = UI 硬隱藏(黏著,不靠閒置;沉浸/非沉浸皆可)→ 一次收起全部 UI,只留浮動還原鈕 #uiShowBtn / H 鍵 ====== */
body.uiHidden #panelTabs,body.uiHidden #miniBar,body.uiHidden .qbar,body.uiHidden .statusline,
body.uiHidden .binderBar,body.uiHidden #binderShelf .deckBar,body.uiHidden #topRight,
body.uiHidden header .brand,body.uiHidden #xBack,body.uiHidden #xUiEye,body.uiHidden #immExit,
body.uiHidden #cartPill,body.uiHidden #queueDock,body.uiHidden .npSide,
body.uiHidden .npTitle,body.uiHidden .npBar,body.uiHidden .npInfoToggle{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important}   /* 直接隱藏:不用 transition(播放中的連續重繪會讓 opacity 過渡卡住不歸 0);visibility 立即收起、可靠 */
/* 浮動還原鈕:只在 uiHidden 出現,直接掛 body(不受任何淡出容器的 opacity 影響)→ 永遠可點;半透明、hover 才亮 */
#uiShowBtn{display:none;position:fixed;top:14px;right:18px;z-index:400;width:44px;height:44px;border-radius:8px;align-items:center;justify-content:center;padding:0;
  background:color-mix(in srgb,var(--panel) 60%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--ctl-bd);box-shadow:var(--sh-float);color:var(--accent);opacity:.5;transition:opacity .2s ease,transform .16s ease,box-shadow .16s ease}
#uiShowBtn:hover{opacity:1;transform:scale(1.07);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent),0 12px 30px -8px #000}
#uiShowBtn svg{width:20px;height:20px}
body.uiHidden #uiShowBtn{display:inline-flex}
/* 沉浸閒置自動淡出:補上原本漏掉的「懸浮 deckBar」(STAK 內頁)→ 跟其他浮層一起淡出(修「不會跟著 UI 隱藏」) */
body.gimm:not(.pp-open).hideCursor #binderShelf .deckBar{opacity:0;pointer-events:none;transition:opacity .3s ease}
/* 沉浸 STAK 內頁 deckBar:對齊影像庫的【全沉浸懸浮】工具列 → position:fixed 浮在頂部、玻璃晶片;影卡填滿其後 */
body.gimm:not(.pp-open) #binderShelf .deckBar{position:fixed;top:14px;left:84px;right:148px;z-index:42;display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:nowrap;background:none;border:0;box-shadow:none;padding:0;margin:0}   /* right:148 讓開右上 眼睛/沉浸/⚙ */
body.gimm:not(.pp-open) #binderShelf .deckBar .stkSeg{margin-left:auto}
body.gimm:not(.pp-open) #binderShelf .deckBar .btn,body.gimm:not(.pp-open) #binderShelf .deckBar .vmSeg,body.gimm:not(.pp-open) #binderShelf .deckBar .qbox{height:48px;min-height:48px;border-radius:8px;background:var(--glass);backdrop-filter:blur(var(--blur-glass)) saturate(1.2);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.2);border:1px solid var(--ctl-bd);box-shadow:var(--sh-float)}
body.gimm:not(.pp-open) #binderShelf .deckBar .btn.primary{background:color-mix(in srgb,var(--accent) 82%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:#fff}   /* 播放整盤:保留 accent 底,文字才看得見(不要灰字) */
body.gimm:not(.pp-open) #binderShelf .deckBar .deckCount{height:48px;display:inline-flex;align-items:center;padding:0 14px;border-radius:8px;background:color-mix(in srgb,var(--panel) 46%,transparent);backdrop-filter:blur(var(--blur-glass)) saturate(1.2);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.2);border:1px solid var(--ctl-bd);box-shadow:var(--sh-float);color:var(--accent);font:700 13px/1 ui-monospace,monospace;letter-spacing:.06em;font-variant-numeric:tabular-nums}   /* 曲目序:玻璃 HUD 晶片 */
/* deckBar 控制鈕:icon + 文字並排(非沉浸顯示文字) */
.deckBar .dbtn{display:inline-flex;align-items:center;gap:7px}
.deckBar .dbtn>svg,.deckBar .stkSeg button>svg{flex:none}
.deckBar .stkSeg button{display:inline-flex;align-items:center;gap:6px}
/* 沉浸:deckBar 全收成純 icon(對齊影像庫 qbar)→ 文字標籤 .bl 隱藏、控制變 48px 方塊;搜尋收成放大鏡、focus 才展開 */
body.gimm:not(.pp-open) #binderShelf .deckBar .bl{display:none}
body.gimm:not(.pp-open) #binderShelf .deckBar .dbtn{width:48px;padding:0;justify-content:center;gap:0}
body.gimm:not(.pp-open) #binderShelf .deckBar .stChipsBtn{width:48px;padding:0;justify-content:center}
body.gimm:not(.pp-open) #binderShelf .deckBar .stkSeg button{padding:0 13px;justify-content:center;gap:0}
body.gimm:not(.pp-open) #binderShelf .deckBar .stakQbox{flex:0 0 auto;width:48px;min-width:0;max-width:none;padding:0;gap:0;overflow:hidden;align-items:center;justify-content:center;cursor:text}
body.gimm:not(.pp-open) #binderShelf .deckBar .stakQbox>svg{flex:none}
body.gimm:not(.pp-open) #binderShelf .deckBar .stakQbox input{flex:none;width:0;min-width:0;padding:0;opacity:0;transition:width .26s var(--ease),opacity .15s}
body.gimm:not(.pp-open) #binderShelf .deckBar .stakQbox:focus-within{width:min(40vw,300px);padding:0 14px;gap:10px;justify-content:flex-start;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent),0 10px 26px -8px #000}
body.gimm:not(.pp-open) #binderShelf .deckBar .stakQbox:focus-within input{flex:1;width:auto;opacity:1}
body.gimm:not(.pp-open) #binderShelf .deckBar .stakQbox .qx{display:none}
body.gimm:not(.pp-open) #binderShelf .deckBar .stakQbox:focus-within .qx{display:inline-flex}
body.gimm:not(.pp-open) #stackDeck{margin-top:0;height:calc(100vh - 60px)}   /* deckBar 已浮起 → deck 填滿整個沉浸區、影卡放大 */
body.gimm #stackDeck .disc{width:min(94%,880px,calc((100vh - 130px) * 1.72))}   /* 沉浸:影卡放大填滿,仍隨視窗高度收 */
body:not(.gimm) #tabBinder{grid-column:1 / -1;padding-left:84px}   /* STAK 總覽/內頁:binder 跨滿格(rail z-index:25 浮在左)→ 內容能滿版;工具列/架上靠 padding-left:84 讓開 rail+LOGO */
#binderCoverflow,#stackDeck{margin-left:-84px;width:calc(100% + 84px)}   /* 輪播/盤內 deck:抵銷 padding-left:84 → 影卡置中於整個視窗(左右等寬)、隱藏 UI 不截斷;沉浸/非沉浸一致(圖2/圖3) */
/* 非沉浸『瀏覽』:pane 跨滿格(rail z25 浮在左)+ #content 左右等寬留白 → 工具列/縮圖牆對視窗置中(圖2;留白由景深背板填成縱深) */
body:not(.gimm) #tabBrowse{grid-column:1 / -1}
body:not(.gimm) #tabBrowse #content{padding-left:84px;padding-right:84px}
body.gimm #binderCoverflow .disc-stack{width:min(60%,720px,calc((100vh - 172px) * 1.78))}   /* 由寬度(60%/720)與可用高度(扣 binderBar+底欄)取小 → 放大但不會壓到底欄,矮視窗也安全 */
/* ---- live context / count cluster (replaces fake PATH) ---- */
.ctx{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden;font-size:11px;letter-spacing:.05em}
.ctxName{font:inherit;letter-spacing:.02em;color:var(--accent2);font-weight:600;background:none;border:0;padding:0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.ctxName:hover{color:var(--accent)}
.ctxChip{flex:none;display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border:1px solid var(--line);background:var(--panel2);border-radius:2px;font:11px/1 ui-monospace,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.ctxChip b{color:var(--accent);font-weight:700}
.ctxChip .ctxSlash{color:var(--line-strong)}
#ctxChip.is-filtered{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel2))}
/* PROFILE switcher (追星 K-POP) sits at the TOP of the rail (replaced the redundant STAK brand); the 顯示 count + sources sit at the BOTTOM (railFoot, below 進階篩選) */
.railHd .libSwitch{margin-left:0;max-width:100%;min-width:0;text-align:left;letter-spacing:0;font-size:11.5px;font-weight:600}   /* compact, content-width — smaller than the nav buttons */
#app.railmin .railHd{justify-content:center}
#app.railmin .railHd .libSwitch{display:none}
.railFoot{margin-top:auto;display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:18px 12px 4px;width:100%;min-width:0}   /* padding-top → 進階篩選 不貼著下方計數 */
.railFoot .ctx{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;overflow:hidden;font-size:11px;letter-spacing:.03em;color:var(--muted)}
.railFoot .ctxName{background:none;border:0;padding:0;color:var(--muted);font:inherit;cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.railFoot .ctxName:hover{color:var(--accent)}
.railFoot .ctxChip{border:0;background:none;backdrop-filter:none;padding:0;border-radius:0;text-transform:none;letter-spacing:.02em;color:var(--muted);font-size:11px;white-space:nowrap}
.railFoot .ctxChip b{color:var(--accent);font-weight:700}
.railFoot .ctxChip.is-filtered .ctxLbl{color:var(--accent)}
#app.railmin .railFoot{display:none}
.ctxCrumb{min-width:0;color:var(--muted);text-transform:none;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40ch}
.ctxCrumb b{color:var(--accent2);font-weight:600}
.ctxCrumb::before{content:"▸";color:var(--line-strong);margin-right:6px}
.ctxCrumb[hidden]{display:none}
@media(max-width:760px){ .ctxName{max-width:14ch} .ctxCrumb{max-width:18ch} .conn .connWhen{display:none} }
@media(max-width:560px){ .ctxChip .ctxSlash,.ctxChip #ctxTotal{display:none} }
/* ---- connection cluster: real LED dot, now in the header ---- */
.conn{display:flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.connDot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--led);box-shadow:0 0 0 0 var(--glow);animation:breathe 3.4s ease-in-out infinite}
body.playing .connDot{background:var(--accent);animation-duration:1.4s}
.conn.off .connDot{background:var(--danger);animation:none;box-shadow:none}
.conn.off .connTxt{color:var(--danger)}
.connWhen{color:var(--accent2);font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:.02em}
.connWhen:empty{display:none}
/* ---- SYNC keycap: spin + in-flight + result states ---- */
@keyframes spin{to{transform:rotate(360deg)}}
#btnSync .syncIco{display:inline-flex;line-height:0}
#btnSync.syncing .syncIco svg{transform-origin:50% 50%;animation:spin .9s linear infinite}
#btnSync[disabled],#btnSync.syncing{opacity:.65;cursor:progress;pointer-events:none}
#btnSync.ok{border-color:var(--good);color:var(--good)}
#btnSync.ok .syncIco{color:var(--good)}
#btnSync.err{border-color:var(--danger);color:var(--danger)}
#btnSync.err .syncIco{color:var(--danger)}
#btnSync .syncLbl{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){ #btnSync.syncing .syncIco svg{animation:none} .connDot{animation:none} }
#sysConn::before{content:"";width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--led);box-shadow:0 0 0 0 var(--glow);margin-right:5px;vertical-align:middle;animation:breathe 3.4s ease-in-out infinite}
body.playing #sysConn::before{background:var(--accent);animation-duration:1.4s}
@keyframes breathe{0%,100%{box-shadow:0 0 0 0 var(--glow-soft)}50%{box-shadow:0 0 0 4px transparent}}

/* ============================ PANEL TABS ============================ */
#app{display:grid;grid-template-columns:208px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:16px;padding:10px 18px 56px;align-items:stretch;flex:1 1 auto;min-height:0;overflow:hidden}
@media(max-width:860px){ #app{grid-template-columns:1fr} }
/* ---- LEFT NAV RAIL (sole navigation: 6 big items) ---- */
/* rail = a frosted CARD (參考資訊卡) — defined surface, NOT fully see-through (沒有沉浸時不透明);在沉浸時由 npImmersed 淡出 / gimm 隱藏 */
.panelTabs{grid-column:1;grid-row:1;position:sticky;top:46px;z-index:25;display:flex;flex-direction:column;gap:3px;padding:8px 6px;
  background:color-mix(in srgb,var(--bg) 64%,transparent);backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid color-mix(in srgb,var(--line-strong) 45%,transparent);border-radius:14px;box-shadow:var(--well)}  /* z>playPage(20): rail floats over the full-bleed player */
.railHd{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px 10px 12px}
.railBrand{font-weight:800;letter-spacing:.14em;font-size:13px;color:var(--accent);padding:0}
.panelTab{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid transparent;border-radius:10px;color:var(--muted);text-transform:none;letter-spacing:.04em;font-size:13px;font-weight:600;text-align:left;width:100%;white-space:nowrap;overflow:hidden;line-height:17px}   /* A1: nowrap + line-height:17(=icon 高)→ 展開顯示文字時列高不變(仍 40.3)→ 內收/外展每列同 Y、不再下跳 */
.panelTab svg{width:17px;height:17px;opacity:.78}
.panelTab span[data-icon],.railAdv span[data-icon],.cnavItem span[data-icon]{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex:none}   /* A1: 預設視圖(landscape/8K…)的 icon 包在 <span> 內 → 行框會撐到 22.5px;改 inline-flex+line-height:0 收回成 17px,與內建直接放 svg 的列等高 */
.panelTab:hover{color:var(--txt);background:var(--sel)}
.panelTab.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent)}
.panelTab.on svg{opacity:1}
.panelTab .rc{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.panelTab.on .rc{color:var(--accent)}
.railSpacer{height:1px;background:var(--line);margin:5px 8px}
.railAdv{margin-top:8px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--muted);font-size:12px;font-weight:600;width:100%;white-space:nowrap;overflow:hidden;line-height:17px}   /* A1: 同 .panelTab,nowrap + line-height:17 → 展開列高不變 */
.railToggle{flex:none;margin:0;padding:3px 9px;border-radius:7px;color:var(--muted);font-size:14px;line-height:1}
.railToggle:hover{color:var(--accent);background:var(--sel)}
/* collapsed (icon-only) rail */
#app.railmin{grid-template-columns:58px minmax(0,1fr)}
#app.railmin .railHd{justify-content:center;padding:6px 0 10px}
#app.railmin .railBrand{font-size:0;padding:0}
#app.railmin .railToggle{margin:0}
#app.railmin .panelTab{justify-content:center;gap:0;padding:11px 0;font-size:0}
#app.railmin .panelTab svg{opacity:.85}
#app.railmin .panelTab .rc{display:none}
#app.railmin .railAdv{justify-content:center;gap:0;padding:10px 0;font-size:0}
/* ===== rail 展開:滑鼠移入(JS railOpen)/ 釘住(railPinned)→ 浮出 214px 顯示文字標籤;兩種模式通用,以浮層呈現不擠壓內容 ===== */
body.railOpen #panelTabs,body.railPinned #panelTabs{position:fixed!important;left:14px;top:46px;bottom:60px;width:214px!important;max-width:214px;z-index:150;overflow-y:auto;overflow-x:hidden;   /* top:46 → 首項落在 57(= 收合態 + 沉浸態同一 Y),展開不再下跳 14px */
  background:color-mix(in srgb,var(--panel) 95%,transparent);backdrop-filter:blur(22px) saturate(1.18);-webkit-backdrop-filter:blur(22px) saturate(1.18);
  border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 28px 70px -24px rgba(0,0,0,.7);padding:10px 8px;animation:railSlide .18s ease}
@keyframes railSlide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
body.railOpen .panelTab,body.railPinned .panelTab,
body.railOpen .cnavItem,body.railPinned .cnavItem,
body.railOpen .railAdv,body.railPinned .railAdv{justify-content:flex-start!important;gap:11px!important;padding:11px 14px!important;font-size:13px!important;text-align:left!important}
body.railOpen .panelTab .rc,body.railPinned .panelTab .rc{display:inline-block!important}
body.railOpen .railBrand,body.railPinned .railBrand{font-size:0!important}
body.railOpen .railHd,body.railPinned .railHd{display:none!important}   /* 展開時不要頂部那條 → 圖釘改成小小一個浮在首頁列右側 */
.railPinBtn{position:absolute;top:19px;right:11px;z-index:3;width:20px;height:20px;display:grid;place-items:center;border:0;background:none;padding:0;color:var(--muted);opacity:.42;cursor:pointer;line-height:0;transition:opacity .15s,color .15s}
.railPinBtn svg{width:14px;height:14px}
.railPinBtn:hover{opacity:1;color:var(--txt)}
body.railPinned .railPinBtn{opacity:1!important;color:var(--txt)!important}   /* 釘住:全不透明 + 圖示填滿(維持單色,不上色) */
body.railPinned .railPinBtn svg{fill:currentColor;fill-opacity:.25}
body:not(.railOpen):not(.railPinned) .railPinBtn{display:none}   /* 收合時不顯示圖釘,展開才出現 */
/* custom nav (user-saved views) */
.customNav{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.cnavItem{position:relative}
.cnavItem .cnavLbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cnavItem .cnavDel{margin-left:auto;opacity:0;color:var(--muted);font-size:11px;padding:0 3px;border-radius:4px}
.cnavItem:hover .cnavDel{opacity:.65}
.cnavItem .cnavDel:hover{opacity:1;color:var(--danger)}
.cnavItem .cnavEdit{margin-left:auto;opacity:0;color:var(--muted);font-size:11px;padding:0 4px;border-radius:4px;cursor:pointer}
.cnavItem:hover .cnavEdit{opacity:.7}
.cnavItem .cnavEdit:hover{opacity:1;color:var(--accent)}
.cnavItem.dragover{outline:2px dashed var(--accent);outline-offset:-2px}
#app.railmin .cnavItem .cnavEdit{display:none}
#rvEditor{position:fixed;inset:0;z-index:330;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.42)}
#rvEditor.show{display:flex}
#rvEditor .rvEdCard{width:440px;max-width:92vw;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;padding:16px;box-shadow:0 24px 60px -16px var(--inset-strong);display:flex;flex-direction:column;gap:9px}
#rvEditor .rvEdHd{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700}
#rvEditor .rvEdHd #rvEdX{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px}
#rvEditor .rvEdHint{font-size:11.5px;color:var(--muted);line-height:1.5}
#rvEditor .rvEdRow{display:flex;align-items:center;gap:8px}
#rvEditor .rvIcoBtn{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel2);color:var(--txt);cursor:pointer}
#rvEditor .rvIcoBtn svg{width:16px;height:16px}
#rvEditor .rvName{flex:0 0 96px;min-width:0}
#rvEditor .rvQuery{flex:1;min-width:0}
#rvEditor input{padding:7px 9px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);font-family:inherit;font-size:13px}
#rvEditor .rvIcoGrid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-top:2px}
#rvEditor .rvIcoGrid button{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--txt);cursor:pointer}
#rvEditor .rvIcoGrid button svg{width:16px;height:16px}
#rvEditor .rvEdFoot{display:flex;justify-content:flex-end;margin-top:6px}
#cnavEditor{position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.42)}
#cnavEditor.show{display:flex}
#cnavEditor .cnavEdCard{width:344px;max-width:92vw;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;padding:16px;box-shadow:0 24px 60px -16px var(--inset-strong);display:flex;flex-direction:column;gap:7px}
#cnavEditor .cnavEdHd{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:700}
#cnavEditor .cnavEdX{background:none;border:none;color:var(--muted);cursor:pointer;font-size:15px}
#cnavEditor .cnavEdL{font-size:11.5px;color:var(--muted);margin-top:4px}
#cnavEditor input{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);font-family:inherit;font-size:13px}
#cnavEditor .cnavIcoGrid{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;margin-top:2px}
#cnavEditor .cnavIcoOpt{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--txt);cursor:pointer}
#cnavEditor .cnavIcoOpt svg{width:16px;height:16px}
#cnavEditor .cnavIcoOpt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
#cnavEditor .cnavEdFoot{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
#cnavEditor .cnavEdFoot .btn{flex:1;min-width:70px}
.cnavAdd{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:8px;border:1px dashed var(--line-strong);border-radius:10px;color:var(--muted);font-size:12px;font-weight:600;margin-top:2px}
.cnavAdd:hover{border-color:var(--accent);color:var(--accent)}
#app.railmin .cnavItem .cnavDel{display:none}
#app.railmin .cnavAdd{font-size:0;padding:10px 0}
/* ---------- HOME / 首頁 overlay (logo → pure-video landing) ---------- */
#tabHome.on{display:block;overflow-y:auto;overflow-x:hidden}
.homeWrap{max-width:1480px;margin:0 auto;display:flex;flex-direction:column;gap:14px;padding:10px 8px 44px}
/* Netflix-style hero banner */
.homeHero{position:relative;aspect-ratio:21/9;max-height:46vh;min-height:236px;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#0c0c12;transition:opacity .45s ease}
.homeHero.empty{display:none}
.homeHero .hhBg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%}
.homeHero .hhScrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.84),rgba(0,0,0,.5) 42%,rgba(0,0,0,0) 76%),linear-gradient(0deg,rgba(0,0,0,.62),rgba(0,0,0,0) 52%)}
.homeHero .hhBody{position:absolute;left:0;bottom:0;max-width:min(62%,640px);padding:30px 40px;color:#fff}
.homeHero .hhTag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.homeHero .hhTitle{font-size:30px;font-weight:800;line-height:1.12;margin:8px 0 0;text-shadow:0 2px 12px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.homeHero .hhMeta{font-size:13px;color:rgba(255,255,255,.82);margin-top:9px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.homeHero .hhBtns{display:flex;gap:10px;margin-top:18px}
.homeHero .hhBtns .btn{padding:9px 18px;font-size:13px;font-weight:700}
.homeHero .hhInfo{background:rgba(255,255,255,.18);color:#fff;border-color:transparent}
.homeHero .hhInfo:hover{background:rgba(255,255,255,.3)}
.homeSecHd{display:flex;align-items:center;justify-content:space-between;margin:0 0 6px}
.homeSecHd h3{font-size:17px;letter-spacing:0;color:var(--txt);text-transform:none;font-weight:700;margin:0}
.homeArrows{display:flex;gap:6px}
.hArrow{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--muted);background:var(--panel);font-size:16px;line-height:1;transition:color .15s,border-color .15s}
.hArrow:hover{color:var(--accent);border-color:var(--accent)}
.homeRow{overflow:hidden;padding:6px 2px 12px}
.homeTrack{display:flex;align-items:flex-start;gap:16px;transition:transform .38s var(--ease);will-change:transform}
/* a long nowrap title sets the flex item's min-content width → without min-width:0 the card grows past 248 and its 16:9 thumb grows tall → ragged rows. Pin width so every card is identical. */
.homeCard,.homeStak{align-self:flex-start;min-width:0;max-width:248px}
.homeCard .hcTitle,.homeCard .hcSub,.homeStak .hsName,.homeStak .hsCount{max-width:100%}
.homeCard{flex:0 0 248px;cursor:pointer}
.homeCard,.homeStak{transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.homeCard:hover,.homeStak:hover{transform:scale(1.06);z-index:5;position:relative}   /* Netflix-style hover lift */
.homeCard .hcThumb{aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0c0c12;border:1px solid var(--line-strong);transition:transform .14s ease,box-shadow .2s ease}
.homeCard:hover .hcThumb,.homeStak:hover .hsThumb{box-shadow:0 22px 46px -18px rgba(0,0,0,.6),0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
.homeCard .hcTitle{font-size:13px;font-weight:600;margin-top:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.homeCard .hcSub{font-size:11.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.homeStak{flex:0 0 248px;cursor:pointer;scroll-snap-align:start}
.homeStak .hsThumb{aspect-ratio:16/9;border-radius:12px;background:#000 var(--cover) center/cover no-repeat;border:1px solid var(--line-strong);transition:transform .14s ease,box-shadow .2s ease}
.homeStak:hover .hsThumb{transform:translateY(-4px);box-shadow:0 22px 46px -18px rgba(0,0,0,.55)}
.homeStak .hsName{font-size:14px;font-weight:700;margin-top:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.homeStak .hsCount{font-size:11.5px;color:var(--muted)}
.homeRow .homeEmpty{color:var(--muted);font-size:13px;padding:10px 2px}
/* ---------- immersive BROWSE mode (non-player main page): hide chrome, full-bleed grid ---------- */
body.bimm header,body.bimm #panelTabs,body.bimm #miniBar,body.bimm #sysline,body.bimm .qbar,body.bimm #statusline{display:none!important}
body.bimm{overflow:hidden}
body.bimm #app{grid-template-columns:1fr;padding:0;gap:0}
body.bimm .panelPane{grid-column:1}
body.bimm #content{border:0;border-radius:0;background:transparent;box-shadow:none}
body.bimm #browseGrid{--mcol:300px;padding:20px 26px 70px}
#bimmBtn.on{color:var(--accent);border-color:var(--accent)}
/* 一體全域沉浸(body.gimm):隱藏所有外框 chrome,讓「目前的內容」(瀏覽網格 OR 播放器)滿版。一個模式,瀏覽與播放共用。 */
body.gimm #sysline,body.gimm #statusline,body.gimm .ppHd,body.gimm .npUpNext{display:none!important}
/* 沉浸式不要藏整個 <header>(它含左上 LOGO 與右上 #topRight=eye/沉浸/⚙)— 只藏中段工具列,讓 LOGO+控制鍵在沉浸式仍與非沉浸一致地留在原位 */
body.gimm header .conn,body.gimm header>.sp,body.gimm #skinBtn,body.gimm #themeBtn,body.gimm #btnSync,body.gimm #btnMore{display:none!important}
/* 全沉浸的資訊卡:不再隱藏,改透明化(玻璃)浮在影片/環境光上,讓「資訊」可正常開合 */
body.gimm .npSide{background:color-mix(in srgb,var(--bg) 20%,transparent);backdrop-filter:blur(18px) saturate(1.15);-webkit-backdrop-filter:blur(18px) saturate(1.15);border-left:1px solid color-mix(in srgb,var(--line) 40%,transparent)}
body.gimm .npSideHd2{border-bottom-color:color-mix(in srgb,var(--line) 35%,transparent)}
body.gimm.pp-open #queueDock,body.gimm.pp-open #miniBar{display:none!important}   /* 沉浸『播放』隱藏佇列抽屜+底欄;沉浸『瀏覽』保留自動隱藏底欄(正在播放+佇列) */
body.gimm.pp-open #panelTabs,body.gimm.pp-open .qbar{display:none!important}   /* 沉浸『播放』維持滿版(隱藏 rail/toolbar);沉浸『瀏覽』則保留可 D-pad 選的 rail + 搜尋(下方) */
/* 沉浸式「圖書館」(非播放):左側大分類 = 浮動 icon-rail(可 hover/focus 展開、可 D-pad 選);搜尋 = 收合成 icon、focus 展開;其餘工具列隱藏 */
body.gimm:not(.pp-open) #panelTabs{position:fixed;left:14px;top:46px;bottom:60px;z-index:40;width:58px;overflow:hidden;background:color-mix(in srgb,var(--panel) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:14px;transition:width .22s ease;padding:11px 0 14px}   /* 浮動圓角卡(同非沉浸):left:14/top:46 讓 LOGO 壓在 canvas 上方、rail 不蓋到 LOGO;首項仍 57 */
body.gimm:not(.pp-open) #panelTabs:hover,body.gimm:not(.pp-open) #panelTabs.snav-within{width:214px}   /* 只在 hover / D-pad(snav) 展開;移除 :focus-within → 點完視圖項目(焦點留在其上)不會把 rail 卡在「外展只剩 icon」 */
/* 收合時只露 icon(font-size:0 隱藏文字標籤;.panelTab svg 是固定 17px 不受影響),展開才顯示文字 */
body.gimm:not(.pp-open) #panelTabs:not(:hover):not(.snav-within) .panelTab,
body.gimm:not(.pp-open) #panelTabs:not(:hover):not(.snav-within) .railAdv,
body.gimm:not(.pp-open) #panelTabs:not(:hover):not(.snav-within) .cnavItem{justify-content:center;gap:0;padding:11px 0;font-size:0}
body.gimm:not(.pp-open) #content{padding-left:84px;padding-right:84px}   /* 左讓 rail + 右等寬留白 → 縮圖牆對視窗置中(配合景深背板,兩側 gutter 是縱深而非空白) */
body.gimm:not(.pp-open) #tabHome,body.gimm:not(.pp-open) #tabBinder,body.gimm:not(.pp-open) #tabLibrary{padding-left:84px}   /* 沉浸:讓開左側浮動 rail 卡(left:14 + 58px 寬 + 12px gap = 84) */
/* 沉浸工具列 = Google-TV 風「右上角浮動玻璃晶片群」:沒有底板 / 沒有整條 bar / 沒有滑出動作。
   每個控制 = 方形半透明玻璃晶片(48px),內容直接浮在影片上;閒置(body.hideCursor)整群淡出、移動滑鼠/按鍵即回。
   搜尋 = 放大鏡方塊,點擊 / focus / D-pad 才向左展開成輸入框。10-foot:focus 放大+光暈。 */
body.gimm:not(.pp-open) .qbar{position:fixed;top:14px;right:18px;left:auto;bottom:auto;width:auto;min-height:0;z-index:42;
  display:flex;flex-direction:row;align-items:center;gap:10px;justify-content:flex-end;
  padding:0;margin:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  transform:none;transition:opacity .3s ease,transform .3s ease}
body.gimm:not(.pp-open) .qbar #facetToggle{display:none}
body.gimm:not(.pp-open) .statusline{display:none!important}
#bimmCycle{display:none}
body.gimm:not(.pp-open) #bimmCycle{display:inline-flex}
#bUiEye{display:none}
body.gimm:not(.pp-open) #bUiEye{display:inline-flex}
.uiEyeBtn.on{color:var(--accent)}   /* 眼睛劃線(UI 自動隱藏中)→ accent 提示 */
#immHotzone{display:none!important}
/* 沉浸瀏覽:保留一條【極簡、自動隱藏】的底部 playbar(正在播放 + 佇列),取代工具列裡重複的佇列 chip。
   閒置(body.hideCursor)淡出、滑鼠/按鍵即回(同頂部晶片群);避開左側 rail;佇列面板開著時不淡出。 */
body.gimm:not(.pp-open) #miniBar{display:flex!important;left:0;right:0;bottom:0;z-index:44;transition:opacity .3s ease}   /* 滿版觸及視窗左緣(圖3:不再 left:84 讓位 rail;rail 底部離底欄 ~10px 不重疊) */
body.gimm:not(.pp-open).hideCursor #miniBar{opacity:0;pointer-events:none}
body.gimm:not(.pp-open) #miniBar:hover,body.gimm:not(.pp-open):has(#queueDock.open) #miniBar{opacity:1!important;pointer-events:auto}
body.gimm:not(.pp-open) #queueDock{display:flex!important;left:84px!important;right:14px!important;bottom:60px!important;z-index:43}   /* 開在底欄之上 */
/* 每個控制都是方形半透明玻璃晶片(48px,融入背板,絕不做圓角藥丸) */
body.gimm:not(.pp-open) .qbox,
body.gimm:not(.pp-open) .sortctl,
body.gimm:not(.pp-open) .vmSeg,
body.gimm:not(.pp-open) #bimmCycle,
body.gimm:not(.pp-open) .qbtns>.btn{
  height:48px;min-height:48px;box-sizing:border-box;border-radius:8px;
  background:var(--glass);
  backdrop-filter:blur(var(--blur-glass)) saturate(1.2);-webkit-backdrop-filter:blur(var(--blur-glass)) saturate(1.2);
  border:1px solid var(--ctl-bd);box-shadow:var(--sh-float);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,width .26s var(--ease)}
body.gimm:not(.pp-open) .qbar svg{width:20px;height:20px}       /* 10-foot 字符放大 */
body.gimm:not(.pp-open) .qbtns{display:flex;flex-direction:row;gap:10px;margin-left:6px;background:none;border:0;box-shadow:none;backdrop-filter:none}
body.gimm:not(.pp-open) .qbtns>.btn{width:48px;justify-content:center}
body.gimm:not(.pp-open) #btnPlay{background:color-mix(in srgb,var(--accent) 78%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
body.gimm:not(.pp-open) .sortctl{padding:0}
body.gimm:not(.pp-open) .sortLbl{display:none}   /* 沉浸:排序收成純 icon,點 icon 才開出文字選項 */
body.gimm:not(.pp-open) .sortBtn{padding:0 12px}
body.gimm:not(.pp-open) .vmSeg{overflow:hidden}
/* 搜尋:48px 圖示方塊 → focus / D-pad 時向左展開成 320px 輸入框 */
body.gimm:not(.pp-open) .qbox{flex:0 0 auto;width:48px;min-width:0;max-width:none;padding:0;gap:0;overflow:hidden;align-items:center;justify-content:center;cursor:text}
body.gimm:not(.pp-open) .qbox>span[data-icon]{display:flex;align-items:center;justify-content:center}
body.gimm:not(.pp-open) .qbox span[data-icon],body.gimm:not(.pp-open) .qbox svg{flex:none}
body.gimm:not(.pp-open) .qbox input{flex:none;width:0;min-width:0;padding:0;opacity:0;transition:width .26s var(--ease),opacity .15s}   /* flex:none → 收合時不撐開,圖示才真正置中 */
body.gimm:not(.pp-open) .qbox:focus-within,
body.gimm:not(.pp-open) .qbox.snav-focus{width:min(46vw,340px);padding:0 14px;gap:10px;justify-content:flex-start;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent),0 10px 26px -8px #000}
body.gimm:not(.pp-open) .qbox:focus-within input,
body.gimm:not(.pp-open) .qbox.snav-focus input{flex:1;width:auto;opacity:1}
/* 閒置淡出(hook body.hideCursor;用 opacity 保留 rect → D-pad 目標不消失);focus 中強制保留 */
body.gimm:not(.pp-open).hideCursor .qbar{opacity:0;transform:translateY(-6px);pointer-events:none}
body.gimm:not(.pp-open) .qbar:focus-within{opacity:1!important;transform:none!important;pointer-events:auto}
/* 10-foot focus / hover:放大 + accent 環 + 光暈(SNav 用 .snav-focus class,加鍵盤 fallback) */
body.gimm:not(.pp-open) .qbar .snav-focus,
body.gimm:not(.pp-open) .qbar *:focus-visible,
body.gimm:not(.pp-open) .qbar .btn:hover,
body.gimm:not(.pp-open) .qbar .sortctl:hover,
body.gimm:not(.pp-open) .qbar .vmSeg:hover,
body.gimm:not(.pp-open) .qbar #bimmCycle:hover{
  transform:scale(1.1);background:color-mix(in srgb,var(--panel) 72%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 75%,transparent),0 14px 34px -10px #000;z-index:1}
body.gimm{overflow:hidden}
body.gimm #app{grid-template-columns:1fr;padding:0;gap:0}
body.gimm .panelPane,body.gimm #playPage{grid-column:1;border:0;border-radius:0}
body.gimm #content{border:0;border-radius:0;background:transparent;box-shadow:none}
body.gimm #browseGrid{--mcol:300px;padding:20px 26px 70px}
body.gimm .npStage{flex:1;max-height:none;aspect-ratio:auto;width:100%;background:transparent}   /* 沉浸:讓會呼吸的 canvas 當背板(不要靜態深色 radial),影片浮在上面 */
body.gimm .npStage::before{opacity:0}                                                              /* canvas 已提供環境光,避免雙層 */
body.gimm #playerView,body.gimm .video-wrap{border-radius:0}
body.gimm #content,body.gimm .npLeft,body.gimm .npView,body.gimm .ppBody{background:transparent;border:0;border-radius:0;box-shadow:none}
body.gimm.pp-open #immExit{display:inline-flex}   /* 只在沉浸『播放』顯示浮動沉浸鈕;沉浸『瀏覽』用工具列群的 #bimmCycle */
.railAdv svg{width:16px;height:16px;flex:0 0 auto;opacity:.85}
.railAdv:hover{color:var(--accent);border-color:var(--accent)}
.railAdv.on{color:var(--accent);border-color:var(--accent);border-style:solid;background:color-mix(in srgb,var(--accent) 8%,transparent)}
#facetPane{display:none}                                  /* 細部篩選改用浮動進階面板,不再用左側長列表 */
/* ---- ADVANCED FILTER (floating panel; replaces the long facet list) ---- */
#advBackdrop{position:fixed;inset:0;z-index:119;display:none}
#advBackdrop.open{display:block;background:rgba(0,0,0,.46)}
#advPanel{position:fixed;z-index:120;left:226px;top:58px;width:min(600px,calc(100vw - 250px));max-height:74vh;overflow:auto;
  background:var(--bg);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 26px 64px -22px #000,var(--well);padding:14px 16px;display:none;backdrop-filter:blur(8px)}
#advPanel.open{display:block;animation:advIn .18s var(--ease)}
@keyframes advIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.advHd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.advHd b{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt)}
.advHd .advClr{cursor:pointer;color:var(--muted);font-size:11px;font-weight:600;margin-left:auto;margin-right:12px}
.advHd .advClr:hover{color:var(--accent)}
.advHd .advX{cursor:pointer;color:var(--muted);font-size:17px;line-height:1;padding:2px 6px}
.advHd .advX:hover{color:var(--accent)}
.advToggle{display:flex;align-items:center;gap:8px;margin:2px 0 10px;font-size:12px;color:var(--txt);cursor:pointer}
.advToggle input{accent-color:var(--accent);width:15px;height:15px}
#advPanel #facetTree{display:block;padding:0 14px 12px}
#advPanel .facetGroup{break-inside:avoid;margin-bottom:6px}
.facetDuo{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}   /* 來源 | 創作者 並排,填滿面板寬度 */
.facetDuo.solo{grid-template-columns:1fr}
.facetDuo .fCol{min-width:0}
.facetTags{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;align-content:start}   /* 標籤各 facet 多欄排,不留大片空白 */
@media(max-width:680px){ #advPanel{left:12px;right:12px;width:auto} .facetDuo,.facetTags{grid-template-columns:1fr} }
/* 進階篩選:profile 列 + 兩區(層級/標籤)分段 + 頻道頭像 + 來源健康徽章 */
.advProfile{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line)}
.advProfile .apLbl{font-size:11px;color:var(--muted);letter-spacing:.05em;flex:0 0 auto}
.advProfile .libSwitch{flex:1;min-width:0}
.facetSection{grid-column:1/-1;font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--accent);margin:12px 0 0;padding-bottom:4px;border-bottom:1px solid var(--line-strong)}
.facetSection .secHint{font-weight:400;font-size:10px;letter-spacing:0;color:var(--muted)}
.facetSection:first-child{margin-top:4px}
.chitem{gap:8px}
.chav{position:relative;width:24px;height:24px;border-radius:50%;overflow:hidden;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:var(--panel2)}
.chav .chini{font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.chav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chitem .bx{display:none}
.fbadge{font-size:9px;padding:1px 6px;border-radius:999px;background:var(--panel2);color:var(--muted);white-space:nowrap}
.fbadge.ok{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.fbadge.warn{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.advFoot{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--line-strong);position:sticky;bottom:0;background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(10px)}
.advFoot .btn{flex:1;justify-content:center}
#advPanel .advSeg{display:flex;align-items:center;gap:5px;margin-top:9px;flex-wrap:wrap}
#advPanel .advSeg .advSegL{font-size:12px;color:var(--muted);margin-right:4px}
#advPanel .advSeg button{font-size:12px;padding:4px 10px;border-radius:6px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);cursor:pointer}
#advPanel .advSeg button.on{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent);color:var(--accent)}
/* ⚙ Settings — its own modal (pulled out of the filter panel): 外觀 + 播放 */
.stSheet{width:min(420px,94vw)}
.stBody{display:flex;flex-direction:column;gap:14px;padding-top:4px;min-height:0;overflow-y:auto}
.stRow{display:flex;align-items:center;gap:12px}
.stL{font-size:12px;color:var(--muted);min-width:40px;flex:0 0 auto;font-weight:600}
.stCtl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stHint{font-size:11px;color:var(--muted);line-height:1.5;flex:1 1 100%;margin-top:2px}
.stBody .btn.on{border-color:var(--accent);color:var(--accent)}
/* 設定:分區標題 + 狀態膠囊 + 開關,讓每列「看得出」目前狀態 */
.stSec{font-size:11px;font-weight:800;letter-spacing:.05em;color:var(--accent);margin:10px 0 -4px;border-bottom:1px solid var(--line);padding-bottom:6px}
.stSec:first-child{margin-top:0}
.stRow .stL{min-width:104px}
.stState{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted)}
.stState .dot{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--muted) 55%,transparent);flex:none}
.stState.ok{color:var(--good,#37c97f)} .stState.ok .dot{background:var(--good,#37c97f)}
.stState.warn{color:#e0a23b} .stState.warn .dot{background:#e0a23b}
.swt{position:relative;width:40px;height:23px;border-radius:999px;border:1px solid var(--ctl-bd);background:var(--ctl-bg);cursor:pointer;transition:.18s;flex:none;padding:0}
.swt::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--muted);transition:.18s}
.swt.on{background:color-mix(in srgb,var(--accent) 26%,transparent);border-color:var(--accent)}
.swt.on::after{left:20px;background:var(--accent)}
/* 標籤分類編輯器:更寬、分區、類型晶片 */
.taxoSheet{width:min(580px,95vw)}
.txGrp{margin:18px 0 6px;font-size:12px;font-weight:800;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:6px}
.txGrp:first-child{margin-top:2px}
.txGrpHint{font-size:11.5px;color:var(--muted);line-height:1.55;margin:0 0 8px}
.txCard{border:1px solid var(--line);border-radius:10px;padding:10px 11px;margin:0 0 9px;background:color-mix(in srgb,var(--panel) 50%,transparent)}
.txCardHd{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.txCardHd b{font-size:12.5px}
.txCardHd .k{font-size:10.5px;color:var(--muted);font-family:ui-monospace,monospace}
.txCardHd .sp{flex:1}
.txTypeRow{display:flex;flex-wrap:wrap;gap:5px;margin:3px 0 7px}
.txTypeChip{font-size:11px;padding:3px 9px;border:1px solid var(--ctl-bd);background:var(--ctl-bg);border-radius:999px;color:var(--muted);cursor:pointer;white-space:nowrap;transition:.12s}
.txTypeChip.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.txTypeLbl{font-size:10.5px;color:var(--muted);margin-right:2px;align-self:center}
.txRx{width:100%;font-size:12px;font-family:ui-monospace,monospace;padding:6px 9px;border:1px solid var(--ctl-bd);background:var(--ctl-bg);border-radius:7px;color:var(--txt)}
.txRx::placeholder{font-family:inherit;color:var(--muted)}
.txMini{font-size:10.5px;color:var(--muted);margin-top:4px}
.txAddRow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.txTypeTag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:4px 10px;border:1px solid var(--line-strong);border-radius:999px;background:var(--ctl-bg);margin:0 5px 5px 0}
.txTypeTag .x{cursor:pointer;color:var(--muted);font-size:12px;margin-left:2px}
.txTypeTag .x:hover{color:var(--accent)}
.txTypeTag.builtin{opacity:.7}
/* 建議檢視表 */
.fsugCard{width:min(560px,95vw)}
.fsugBody{padding:8px 18px 6px}
.fsugRow{display:flex;gap:7px;align-items:center;margin:0 0 8px}
.fsugRow input[type=checkbox]{flex:none;width:16px;height:16px;accent-color:var(--accent)}
.fsugRow .txRx{flex:1;min-width:120px}
.txInput{padding:7px 9px;background:var(--inset);border:1px solid var(--line-strong);border-radius:7px;color:var(--txt);font-size:13px;width:170px;max-width:60vw}
.txInput:focus{outline:none;border-color:var(--accent)}
#settingsBtn{font-size:14px;line-height:1}
#tagModal .teAll{margin-left:8px;font-size:11px;padding:2px 8px;border-radius:5px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--muted);cursor:pointer}
#tagModal .teAll:hover{border-color:var(--accent);color:var(--accent)}
#tagModal .teChips .mchip.allmem{background:color-mix(in srgb,var(--accent2) 16%,var(--panel2));border-color:color-mix(in srgb,var(--accent2) 45%,var(--line))}
.panelPane{display:none;padding-top:0;grid-column:2;grid-row:1;min-height:0}
.panelPane.on{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#tabLibrary.on,#tabBinder.on{display:block;overflow-y:auto;overflow-x:hidden}
@media(max-width:860px){ .panelPane{grid-column:1} }

/* ============================ WORKSPACE ============================ */
.workspace{display:flex;gap:16px;flex:1;min-height:0;overflow:hidden}
.workspace.lc{--lw:0px;gap:0}
.workspace.lc #facetPane{opacity:0;pointer-events:none;border-color:transparent;padding-left:0;padding-right:0;overflow:hidden}
#facetPane{border:1px solid color-mix(in srgb,var(--line-strong) 55%,transparent);background:color-mix(in srgb,var(--bg) 58%,transparent);backdrop-filter:blur(20px) saturate(1.2);box-shadow:var(--well);position:relative}
#content{position:relative}
body:not(.gimm):not(.bimm) #content{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;box-shadow:none}  /* ONE canvas:非沉浸內容區不做 frosted 面板(此 (1,2,1) 蓋過各 skin 的 :root[data-skin] #content (1,2,0))→ canvasBg 連續透出,消除白/藍接縫 */
#facetPane{align-self:start;position:sticky;top:62px;max-height:calc(100vh - 80px);overflow:auto;padding:12px}
.paneHd{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.paneHd button{color:var(--muted)} .paneHd button:hover{color:var(--accent2)}
.facetGroup{border-top:1px solid var(--line);padding:8px 0 6px}
.facetGroup:first-of-type{border-top:0}
.facetHd{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);user-select:none}
.facetHd .car{transition:transform .15s} .facetGroup.collapsed .facetHd .car{transform:rotate(-90deg)}
.facetHd .ct{margin-left:auto;color:var(--muted)}
.facetGroup.collapsed .facetItems{display:none}
.facetItems{margin-top:5px;display:flex;flex-direction:column;gap:1px}
.fitem{display:flex;align-items:center;gap:7px;padding:3px 5px;cursor:pointer;border:1px solid transparent}
.fitem:hover{background:var(--sel)}
.fitem.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.fitem .bx{flex:none;width:13px;height:13px;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:9px}
.fitem.on .bx{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);color:var(--accent)}
.fitem .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fitem .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.fmore{color:var(--accent);font-size:12px;padding:3px 5px;cursor:pointer}
.fmore:hover{text-decoration:underline}
#facetPane .addsrc{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;border:1px dashed var(--line-strong);padding:6px;color:var(--muted);margin-top:4px;font-size:12px}
#facetPane .addsrc:hover{border-color:var(--accent2);color:var(--accent2)}
/* 來源樹:Provider 桶 → Owner 頻道 → Playlist 葉 */
.srcTree{display:flex;flex-direction:column;gap:1px;margin-top:5px}
.srcTree .addsrc{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;border:1px dashed var(--line-strong);padding:6px;color:var(--muted);margin-top:6px;font-size:12px;cursor:pointer}
.srcTree .addsrc:hover{border-color:var(--accent2);color:var(--accent2)}
.stBucketHd{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;padding:4px 5px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.stBucketHd .nm{font-weight:700}
.stBucketHd .car,.stOwnerHd .car{flex:none;transition:transform .15s}
.stBucket.collapsed>.stBucketHd .car,.stOwner.collapsed>.stOwnerHd .car{transform:rotate(-90deg)}
.stBucket.collapsed>.stBody,.stOwner.collapsed>.stBody{display:none}
.stBucketHd .n,.stOwnerHd .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;margin-left:auto;text-transform:none}
.stBody{display:flex;flex-direction:column;gap:1px;margin-left:9px;border-left:1px solid var(--line);padding-left:5px}
.stOwner{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:5px}
.stOwner>.stBody{grid-column:1/-1}
.stOwnerHd{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;min-width:0;padding:3px 4px}
.ownerSel{flex:none;width:13px;height:13px;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:9px;cursor:pointer;border-radius:3px}
.ownerSel.on,.ownerSel.part{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);color:var(--accent)}
.stLeaf{display:flex;align-items:center;gap:7px;padding:3px 5px;cursor:pointer;border:1px solid transparent;border-radius:5px}
.stLeaf:hover{background:var(--sel)} .stLeaf .stSelf{opacity:0} .stLeaf:hover .stSelf{opacity:.55}
.stLeaf.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.stLeaf .bx{flex:none;width:13px;height:13px;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:9px;border-radius:3px}
.stLeaf.on .bx{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);color:var(--accent)}
.stLeaf .nm,.stOwnerHd .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stLeaf .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.chav.sm{width:18px;height:18px} .chav.sm .chini{font-size:7px}
.stSelf{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 2px;transition:opacity .12s,color .12s}
.stSelf:hover{opacity:1!important;color:var(--accent2)}
.facetSearch{width:100%;box-sizing:border-box;margin:0 0 5px;padding:5px 9px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);border-radius:7px;font-size:12.5px}
.facetSearch:focus{outline:none;border-color:var(--accent)}
.fmore.muted{color:var(--muted);cursor:default} .fmore.muted:hover{text-decoration:none}
/* 右鍵選單(影片卡 / 來源 / 創作者) */
.ctxMenu{position:fixed;z-index:3000;min-width:182px;max-width:260px;background:var(--panel);border:1px solid var(--line-strong);border-radius:11px;box-shadow:0 16px 44px rgba(0,0,0,.42);padding:5px;display:flex;flex-direction:column;gap:1px;font-size:13px;animation:ctxIn .1s ease}
@keyframes ctxIn{from{opacity:0;transform:scale(.97) translateY(-3px)}to{opacity:1;transform:none}}
.ctxHdr{font-size:11px;color:var(--muted);padding:4px 10px 5px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid var(--line);margin-bottom:3px}
.ctxItem{display:flex;align-items:center;gap:9px;padding:7px 10px;border:0;background:none;color:var(--txt);cursor:pointer;border-radius:7px;text-align:left;width:100%;font-size:13px;line-height:1.1}
.ctxItem:hover,.ctxItem.kbsel{background:var(--sel)}
.ctxItem.kbsel{box-shadow:inset 2px 0 0 var(--accent)}
.ctxItem.danger{color:var(--danger)} .ctxItem.danger:hover{background:color-mix(in srgb,var(--danger) 15%,transparent)}
.ctxIco{width:16px;text-align:center;flex:none;opacity:.85;font-size:12.5px}
.ctxSep{height:1px;background:var(--line);margin:3px 2px}
/* 設定/App 選單擴充:摘要卡 + 手風琴子項 + 分段切換 */
.ctxMenu{max-width:300px}
.ctxItem.ctxSummary{align-items:center;gap:8px;background:var(--ctl-bg);border-radius:7px;margin-bottom:2px}
.ctxSummary .umDotS{width:8px;height:8px;flex:none;border-radius:50%;background:#36d399;box-shadow:0 0 0 3px color-mix(in srgb,#36d399 24%,transparent)}
.ctxSummary .ctxAcc{margin-left:auto;color:var(--accent);font-weight:700;white-space:nowrap}
/* 連線/同步狀態列:狀態一行、帳號一行(不再擠成一行斷字) */
.ctxSummary .ctxSum{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.ctxSummary .ctxSum .ctxLbl{font-size:12px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctxSummary .ctxSum .ctxAcc{margin-left:0;font-size:11px;overflow:hidden;text-overflow:ellipsis}
.ctxItem.has-sub .ctxLbl{flex:1}
.ctxItem.has-sub::after{content:'▸';margin-left:auto;color:var(--muted);font-size:11px;transition:transform .12s}
.ctxItem.has-sub.open::after{transform:rotate(90deg)}
.ctxSub{display:flex;flex-direction:column;gap:1px;padding-left:4px;margin:1px 0 3px 16px;border-left:1px solid var(--ctl-bd)}
.ctxSub[hidden]{display:none}
.ctxSub .ctxItem{font-size:12.5px}
.ctxItem.ctxSeg{justify-content:space-between;gap:8px;cursor:default}
.ctxItem.ctxSeg:hover{background:none}
.ctxSeg .vmSeg{display:inline-flex;gap:3px;flex:none}
.ctxSeg .vmSeg button{padding:3px 8px;border:1px solid var(--ctl-bd);background:var(--ctl-bg);border-radius:var(--ctl-r);font-size:11px;color:var(--muted);cursor:pointer;white-space:nowrap}
.ctxSeg .vmSeg button.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* 看資訊 modal:單片詳情 + 動態光 Ready 狀態 */
.vinfoOv{position:fixed;inset:0;z-index:3200;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.5)}
.vinfoOv.show{display:flex;animation:advIn .16s var(--ease)}
.vinfoCard{width:min(440px,94vw);max-height:84vh;overflow:auto;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 26px 64px -20px #000}
.vinfoHd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px 8px}
.vinfoTitle{font-size:15px;font-weight:700;line-height:1.35;color:var(--txt)}
.vinfoX{flex:none;width:28px;height:28px;border:0;background:var(--ctl-bg);border-radius:6px;color:var(--muted);cursor:pointer;line-height:1}
.vinfoX:hover{color:var(--accent);background:var(--ctl-bg-h)}
.vinfoBody{padding:4px 18px 6px}
.vinfoDl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:4px 0 12px;font-size:13px}
.vinfoDl dt{color:var(--muted);white-space:nowrap}
.vinfoDl dd{color:var(--txt);margin:0;word-break:break-word}
.ambRow{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--ctl-bd);border-radius:8px;background:var(--ctl-bg)}
.ambDot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.ambDot.ready{background:#36d399;box-shadow:0 0 0 3px color-mix(in srgb,#36d399 26%,transparent)}
.ambDot.pending{background:#fbbf24;box-shadow:0 0 0 3px color-mix(in srgb,#fbbf24 22%,transparent)}
.ambDot.fail{background:var(--muted)}
.ambTxt{flex:1;color:var(--txt)}
.ambGen{flex:none}
.vinfoActs{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px 16px;border-top:1px solid var(--line);margin-top:4px}
/* 使用條款 / 注意事項 overlay(沿用 vinfo 卡片殼) */
.termsCard{width:min(560px,94vw)}
.termsBody{font-size:13px;line-height:1.62;color:var(--txt);padding:6px 18px 8px}
.termsBody h4{font-size:12.5px;font-weight:800;margin:16px 0 6px;color:var(--accent);letter-spacing:.03em}
.termsBody h4:first-child{margin-top:2px}
.termsBody ul{margin:0;padding-left:17px}
.termsBody li{margin:5px 0}
.termsBody .tIntro{color:var(--muted);font-size:12.5px;margin:0 0 4px}
/* 匯入預覽 modal:貼 URL → 縮圖網格勾選要匯哪些 */
.ipOverlay{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;padding:24px}
.ipOverlay.show{display:flex}
.ipCard{width:min(940px,94vw);max-height:88vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.ipHd{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.ipTitleWrap{flex:1;min-width:0}
.ipTitleWrap b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ipSub{font-size:12px;color:var(--muted)}
.ipX{background:none;border:0;color:var(--muted);font-size:17px;cursor:pointer;padding:2px 6px} .ipX:hover{color:var(--txt)}
.ipBar{display:flex;align-items:center;gap:7px;padding:9px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ipBar .ipSpacer{flex:1}
.ipDestWrap{font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.ipDestWrap select{background:var(--panel2);color:var(--txt);border:1px solid var(--line-strong);border-radius:6px;padding:3px 6px;font-size:12px;max-width:210px}
.ipGrid{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.ipLoading{grid-column:1/-1;text-align:center;color:var(--muted);padding:42px 0}
.ipItem{cursor:pointer;border:2px solid transparent;border-radius:9px;overflow:hidden;background:var(--panel2);transition:border-color .12s,transform .12s}
.ipItem:hover{transform:translateY(-2px)}
.ipItem.on{border-color:var(--accent)}
.ipItem.dim{opacity:.5} .ipItem.dim.on{opacity:.85}
.ipThumb{position:relative;aspect-ratio:16/9;background:#000}
.ipThumb img{width:100%;height:100%;object-fit:cover;display:block}
.ipDur{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.78);color:#fff;font-size:10px;padding:1px 5px;border-radius:4px;font-variant-numeric:tabular-nums}
.ipCheck{position:absolute;left:6px;top:6px;width:20px;height:20px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.4);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700}
.ipItem.on .ipCheck{background:var(--accent);border-color:var(--accent)}
.ipTag{position:absolute;right:5px;top:6px;font-size:9.5px;padding:1px 6px;border-radius:999px;color:#fff}
.ipTag.have{background:color-mix(in srgb,var(--good) 80%,#000)} .ipTag.rej{background:color-mix(in srgb,var(--danger) 80%,#000)}
.ipName{padding:7px 8px;font-size:12px;line-height:1.3;max-height:48px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* ============================ CONTENT / QUERY ============================ */
#content{padding:14px 16px;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#content>.qbar,#content>.statusline{flex:0 0 auto}
#listWrap,#browseGrid:not(.hidden),#browseDeck:not(.hidden){flex:1 1 auto;min-height:0}
#listWrap,#browseGrid:not(.hidden){overflow:auto}
#browseDeck:not(.hidden){overflow:hidden;height:auto;margin:0;align-self:stretch}
.qbar{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
body:not(.gimm) .qbar{padding-right:118px}   /* 一般模式:工具列右端讓位給浮動的 眼睛/沉浸/⚙ 群,不互疊 */
.qbox{flex:1;min-width:240px;display:flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:var(--bg);padding:9px 12px;box-shadow:inset 0 1px 2px var(--inset)}
.qbox:focus-within{border-color:var(--accent)}
.qbox svg{flex:none;color:var(--muted)}
.qbox input{flex:1;min-width:0;border:0;background:none;font:13px ui-monospace,monospace;caret-color:var(--accent)}
.qbox input:focus{outline:none}
.qbtns{display:flex;gap:6px;flex-wrap:wrap}
/* 排序 = 自訂晶片(排序 icon + 當前標籤),點擊開「自家設計」的下拉選單(復用 .ctxMenu,非醜陋原生 select);方向鈕分隔在右 */
.sortctl{display:flex;align-items:center;gap:0;border:1px solid var(--ctl-bd);background:var(--ctl-bg);border-radius:var(--ctl-r)}
.sortctl svg{flex:none;width:14px;height:14px;color:var(--muted);transition:color .14s}
.sortBtn{display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--txt);font-size:12px;padding:8px 10px;cursor:pointer;outline:none;border-radius:var(--ctl-r) 0 0 var(--ctl-r);white-space:nowrap}
.sortBtn:hover,.sortBtn:hover svg{color:var(--accent)}
.sortBtn.open svg{color:var(--accent)}
.sortLbl{white-space:nowrap}
.sortctl .sortDirBtn{margin:0;border-left:1px solid var(--ctl-bd);border-radius:0;padding:0 8px;width:auto;min-width:26px;height:26px}
.daysep{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin:8px 2px 2px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.daysep::after{content:"";flex:1;height:1px;background:var(--line)}
.daysep b{color:var(--accent2);font-variant-numeric:tabular-nums}
.statusline{margin:12px 0 6px;font-size:12px;color:var(--muted)}
.statusline b{color:var(--accent)}

/* ============================ LIST ============================ */
.list{margin-top:2px}
.lhead,.drow{display:grid;grid-template-columns:26px 34px 92px minmax(0,1fr) 116px 130px 56px;align-items:center;gap:8px}
.lhead{padding:6px 6px;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line-strong);position:sticky;top:0;background:var(--panel);z-index:2}
.drow{padding:7px 6px;border-bottom:1px solid var(--line);cursor:pointer;position:relative;user-select:none;-webkit-user-select:none}   /* Shift+點多選不要反白選字(只勾選,不選文字) */
.drow:hover{background:var(--sel)}
.drow.sel{background:color-mix(in srgb,var(--accent) 7%,transparent);box-shadow:inset 2px 0 0 color-mix(in srgb,var(--accent) 70%,transparent)}
.drow.current{box-shadow:inset 3px 0 0 var(--accent)}
.drow .bx{width:14px;height:14px;border:1px solid var(--line-strong);display:grid;place-items:center;font-size:9px;justify-self:center}
.drow.sel .bx{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent);color:var(--accent)}
.drow .idx{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px;text-align:right}
.drow .type{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.drow .type b{color:var(--accent2)}
.drow .ttl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow .ttl .gs{color:var(--accent2);font-weight:600}
.drow .ttl .sg{color:var(--txt)}
.drow .ttl .tx{color:var(--muted)}
.drow .ttl .srcb{margin-left:8px;font-size:10px;opacity:.42;color:var(--muted);font-weight:400}
.drow .ttl .srcb::before{content:"▸ "}
.drow:hover .ttl .srcb{opacity:.6}
.resb{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.03em;border:1px solid var(--accent);color:var(--accent);padding:0 3px;margin-left:6px;vertical-align:middle}
.drow .type .omark{margin-left:5px;font-size:11px;font-weight:700;color:var(--accent2);text-transform:none;vertical-align:baseline}
.drow .type .omark.vert{color:var(--accent)}
.drow .type .omark.bars{color:var(--muted)}
.drow .date{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.drow .date.up{font-style:italic}
.drow .mem{font-size:12px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drow .acts{display:flex;gap:6px;justify-content:flex-end;opacity:.5;transition:opacity .12s}
.drow:hover .acts{opacity:1}
.drow .acts button{color:var(--muted)} .drow .acts button:hover{color:var(--accent2)}
.drow .acts svg{width:16px;height:16px}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* ============================ MINI BAR ============================ */
#miniBar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:10px;padding:8px 16px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px) saturate(1.1);border-top:1px solid color-mix(in srgb,var(--line-strong) 60%,transparent);box-shadow:0 -6px 22px -12px var(--inset-strong)}  /* bottom bar = glass on canvas */
#miniBar.hidden{display:none}
.mProg{position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--line);cursor:pointer}
.mProgFill{height:100%;width:0;background:var(--accent);box-shadow:0 0 8px -1px var(--glow)}
#miniBar button{width:34px;height:34px;display:grid;place-items:center;border:1px solid transparent;color:var(--txt)}
#miniBar button:hover{border-color:var(--line-strong);background:var(--bg)}
#miniBar button.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}
#miniBar button svg{width:17px;height:17px}
/* 播放列等化器:四根柱獨立起落(各自不同曲線/週期 → 不同步)。用 transform:scaleY → GPU 合成,順暢 */
.mEq{display:inline-flex;align-items:flex-end;gap:2px;height:18px;padding:0 2px}
.mEq i{width:3px;height:100%;background:var(--accent);opacity:.7;border-radius:1px;transform:scaleY(.35);transform-origin:bottom;will-change:transform}
body.playing .mEq i:nth-child(1){animation:eqA 1.05s ease-in-out infinite}
body.playing .mEq i:nth-child(2){animation:eqB .82s ease-in-out infinite}
body.playing .mEq i:nth-child(3){animation:eqC 1.27s ease-in-out infinite}
body.playing .mEq i:nth-child(4){animation:eqD .94s ease-in-out infinite}
body.playing.paused .mEq i{animation-play-state:paused}
body.noGlow .mEq i{animation:none!important}
@keyframes eqA{0%,100%{transform:scaleY(.30)}28%{transform:scaleY(.92)}55%{transform:scaleY(.45)}80%{transform:scaleY(1)}}
@keyframes eqB{0%,100%{transform:scaleY(.65)}22%{transform:scaleY(.22)}50%{transform:scaleY(.96)}74%{transform:scaleY(.40)}}
@keyframes eqC{0%,100%{transform:scaleY(.45)}33%{transform:scaleY(1)}60%{transform:scaleY(.28)}85%{transform:scaleY(.72)}}
@keyframes eqD{0%,100%{transform:scaleY(.82)}25%{transform:scaleY(.34)}48%{transform:scaleY(.6)}70%{transform:scaleY(1)}}
.mNow{flex:1;min-width:0;overflow:hidden;cursor:pointer}
.mTitle{display:block;white-space:nowrap;font-size:13px}
.mq{display:inline-block;padding-left:0;animation:none}
.mNow.scroll .mq{animation:marquee 14s linear infinite}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(var(--mqshift,-50%))}}
.mTime{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* ============================ PLAY PAGE ============================ */
/* P2: play page is now a CONTENT-CELL pane (grid col 2) → left rail + header stay visible (附圖1). Clicking a card morphs into it; navigating away (rail) collapses it to the mini-bar. */
/* player spans the WHOLE page-canvas (grid-col 1/-1, padding L/R symmetric → video centre == viewport centre, NOT the post-rail column). transparent + no frame → it sits on the one breathing canvas; the rail floats over it as glass (.panelTabs z:25). */
#playPage{grid-column:1/-1;grid-row:1;min-height:0;z-index:20;background:transparent;display:none;flex-direction:column;overflow:hidden;border:0;border-radius:0}
#playPage.up{display:flex}
/* full player up (NOT floating): hide the browse panes so the transparent player reveals the ONE breathing canvas behind it, not the list bleeding through */
body.pp-open:not(.npfloat) .panelPane{visibility:hidden}
/* persistent bottom transport bar (restored) — no expand/collapse; clicking the title goes to the full player */
/* P7 seamless float: navigate away while playing → the video keeps playing in a bottom-right 16:9 window (no iframe reparent → no reload), the page behind stays usable */
body.npfloat #playPage{background:transparent;border:0;pointer-events:none;overflow:visible}
body.npfloat #playPage .ppHd,body.npfloat #playPage .npUpNext,body.npfloat #playPage .npSide{display:none}
body.npfloat .npStage{position:fixed;right:20px;bottom:64px;width:min(384px,40vw);height:auto;aspect-ratio:16/9;max-height:none;border-radius:12px;overflow:hidden;box-shadow:0 22px 64px rgba(0,0,0,.6);border:1px solid var(--line-strong);pointer-events:auto;z-index:201;cursor:grab}
body.npfloat .npStage .npTitle{display:none}
body.npfloat .npStage .npBar{padding:20px 8px 7px}
#npFloatCtl{position:absolute;top:7px;right:7px;z-index:6;display:none;gap:5px}
body.npfloat #npFloatCtl{display:flex}
#npFloatCtl button{width:26px;height:26px;display:grid;place-items:center;background:rgba(0,0,0,.6);color:#fff;border-radius:7px;font-size:13px;line-height:1}
#npFloatCtl button:hover{background:rgba(0,0,0,.85)}
/* 收進底欄(dock):沿用 npfloat 保活 iframe(繼續撥放),但隱藏小窗 → 只留底欄 playbar,非懸浮 */
body.npdock .npStage{opacity:0!important;pointer-events:none!important}
body.npdock #npFloatCtl{display:none!important}
.stakToast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);display:flex;align-items:center;gap:9px;background:var(--panel);color:var(--txt);border:1px solid var(--line-strong);border-radius:11px;padding:11px 18px;font-size:13px;font-weight:600;box-shadow:0 18px 46px rgba(0,0,0,.42);opacity:0;pointer-events:none;z-index:320;transition:opacity .2s ease,transform .2s ease}
.stakToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.stakToast .tk{flex:none;width:21px;height:21px;border-radius:50%;background:var(--good,#2ecc71);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
@media(max-width:860px){ #playPage{grid-column:1} }
/* C5: one-shot hero FLIP ghost — morphs the clicked card's cover into the stage. The #playPage slide-up is the base entrance; the ghost adds the FLIP flourish on card-plays. (No content opacity gate → content can never be stranded invisible.) */
/* 一鏡到底 morph:先「實心」放大/縮小到定位,結尾才淡出(opacity 延遲)→ 避免中途露出還在載入的影片(原本 open 會閃);open/close 共用同一條 easing,體感對稱 */
.morphGhost{position:fixed;left:0;top:0;z-index:80;background-color:#0c0c12;background-size:cover;background-position:center;border-radius:10px;transform-origin:0 0;box-shadow:0 24px 70px rgba(0,0,0,.55);pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.18,1),opacity .18s ease .14s}
@media (prefers-reduced-motion:reduce){ .morphGhost{display:none}}
/* 返回影像庫:工具列 + 內容淡入(配合反向 morph 縮回卡片)→ 沒有「跳出來」的換頁感 */
@keyframes libIn{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}
@keyframes libOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.99)}}   /* 進入播放:影像庫淡出後退(對稱於返回的淡入) */
body.libReturn .qbar,body.libReturn .statusline,body.libReturn #browseGrid,body.libReturn #listWrap,body.libReturn #browseDeck,body.libReturn #browseDeckBar{animation:libIn .44s var(--ease)}
body.libLeave .qbar,body.libLeave .statusline,body.libLeave #browseGrid,body.libLeave #listWrap,body.libLeave #browseDeck,body.libLeave #browseDeckBar{animation:libOut .34s cubic-bezier(.4,0,.2,1) forwards}
@media (prefers-reduced-motion:reduce){ body.libReturn .qbar,body.libReturn #browseGrid,body.libReturn #listWrap,body.libReturn #browseDeck,body.libLeave .qbar{animation:none}}
/* surrounding UI fades in as the morph ghost flies (no fill-mode → resting opacity stays 1, never strands content invisible) */
#playPage.up .npView{animation:npViewIn .34s ease}
@keyframes npViewIn{from{opacity:.25}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ #playPage.up .npView{animation:none}}
.ppHd{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ppHd .sp{flex:1}
.ppBody{flex:1;min-height:0;overflow:hidden}
.ppPane{display:none;height:100%} .ppPane.on{display:block}
.npView{display:flex;height:100%;min-height:0}
/* cinematic ambient stage — blurred current-frame fills the letterbox area instead of flat black bars (YouTube ambient / Apple Music style) */
/* stage is a width-driven 16:9 box → the 16:9 video FILLS it (no letterbox); height capped so controls stay on-screen, then it scrolls. Ambient only shows in the rare capped (very wide+short) case. */
.npStage{flex:1;min-width:0;min-height:0;display:grid;place-items:center;position:relative;overflow:hidden;container-type:size;background:transparent}  /* transparent → the one breathing #canvasBg shows; ::before is the tight video-colour halo (bias light) */
.npStage::before{display:none}  /* REMOVED the in-stage halo — it was a 2nd blurred-video field (bounded by the npStage rect) fighting the full-viewport #canvasBg::after → that boundary was the 區塊斷裂. Now ONE wash (#canvasBg::after) = true 一體. */
/* largest 16:9 that fits BOTH stage dims (container units) → never overflows under the panel, fills the width when panels squeeze the stage so the control bar always fits; ambient (.npStage::before) fills the letterbox, not black */
#playerView{position:relative;z-index:1;margin:auto;aspect-ratio:16/9;width:min(100%, calc(100cqh * 16 / 9));height:auto;max-height:100%}
/* 直式(9:16)影片:讓播放框本身變直式 → YouTube 滿版填入,沒有內建左右黑邊(原本的黑邊是 16:9 框內 YouTube 自己的 pillarbox,框外才是環境光) */
body.portrait-video #playerView{aspect-ratio:9/16;width:min(100%, calc(100cqh * 9 / 16))}
.video-wrap{position:relative;width:100%;height:100%;background:transparent;overflow:hidden}  /* transparent: any letterbox shows the halo, not a black box (kills the 外框 frame) */
.video-wrap #ytplayer,.video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vveil{position:absolute;inset:0;z-index:4;background:#000;opacity:0;pointer-events:none;transition:opacity .28s}
body.vloading .vveil{opacity:1}
.vclick{position:absolute;inset:0;z-index:3;cursor:pointer}
.video-wrap::after{content:"";position:absolute;inset:0;z-index:2;background:#000 var(--np-thumb,none) center/cover no-repeat;opacity:0;pointer-events:none;transition:opacity .2s}
body.ended:not(.native-ctrl) .video-wrap::after{opacity:1}   /* 封面遮罩只在「播完」蓋(擋 YouTube 片尾相關影片牆);手動暫停 → 顯示真實停格 */
body.native-ctrl .vclick{pointer-events:none}
/* --- in-stage overlaid title + control bar (C rebuild) --- */
.npTitle{position:absolute;left:0;right:0;top:0;z-index:5;padding:15px 20px 36px;pointer-events:none;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0))}
.npTitle .npT{font-size:15.5px;font-weight:600;line-height:1.3;max-width:78%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.npTitle .npSub{font-size:12px;opacity:.78;margin-top:3px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.npTitle .npBrand{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;color:#fff;opacity:.95;margin-bottom:8px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.npTitle .npBrand .brandMark{width:15px;height:13px}
/* 資訊 / panel toggle — floating overlay inside the video (no top bar), auto-hides with the controls */
.npInfoToggle{position:absolute;top:14px;right:14px;z-index:6;width:34px;height:34px;display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.42);border-radius:9px;opacity:.9;transition:background .15s,opacity .25s}
.npInfoToggle:hover{background:rgba(0,0,0,.72);opacity:1}
.npInfoToggle svg{width:18px;height:18px}
body.npfloat .npInfoToggle{display:none}
.npBar{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:34px 14px 12px;color:#fff;display:flex;flex-direction:column;gap:9px;background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0))}
.npScrub{height:5px;border-radius:3px;background:rgba(255,255,255,.24);cursor:pointer;position:relative;transition:height .12s}
.npScrub:hover{height:7px}
.npScrubFill{height:100%;border-radius:3px;background:var(--accent);position:relative;width:0;transition:width .12s linear}
.npScrubFill::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;transition:opacity .15s}
.npScrub:hover .npScrubFill::after{opacity:1}
.npCtrls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:0;row-gap:4px}
.npsCollapse{flex:none;width:34px;color:var(--muted);font-size:15px;background:none;border:none;cursor:pointer;transition:color .15s}
.npsCollapse:hover{color:var(--accent)}
.npCtrls button{width:34px;height:34px;display:grid;place-items:center;color:#fff;border-radius:9px;opacity:.86;transition:background .15s,opacity .15s}
.npCtrls button:hover{opacity:1;background:rgba(255,255,255,.16)}
.npCtrls button.on{color:var(--accent2);opacity:1}
.npCtrls button svg{width:18px;height:18px}
.npCtrls .cPlay{width:46px;height:46px;background:rgba(255,255,255,.18);opacity:1}
.npCtrls .cPlay svg{width:23px;height:23px}
.npCtrls .cPlay:hover{background:rgba(255,255,255,.3)}
.npCtrls .grow{flex:1}
.npTime{font-size:11.5px;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums;margin-left:5px;white-space:nowrap}
/* volume slider (hover-reveal) + speed menu */
.npCtrls .volWrap{position:relative;display:flex;align-items:center}
.npCtrls .volSlider{width:0;opacity:0;transition:width .2s ease,opacity .2s ease;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;cursor:pointer;margin:0;background:linear-gradient(90deg,var(--accent) var(--vp,100%),rgba(255,255,255,.3) var(--vp,100%))}
.npCtrls .volWrap:hover .volSlider,.npCtrls .volSlider:focus-visible{width:74px;opacity:1;margin:0 4px}
.npCtrls .volSlider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.npCtrls .volSlider::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff;cursor:pointer}
.npCtrls .rateWrap{position:relative}
.npCtrls .rateBtn{width:auto;min-width:36px;padding:0 8px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.npCtrls .rateMenu{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:rgba(18,20,28,.96);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:5px;display:none;flex-direction:column;gap:2px;min-width:66px;box-shadow:0 12px 30px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
.npCtrls .rateMenu.show{display:flex}
.npCtrls .rateMenu button{width:100%;height:28px;border-radius:6px;color:#fff;font-size:12px;opacity:.82;font-variant-numeric:tabular-nums}
.npCtrls .rateMenu button:hover{background:rgba(255,255,255,.14);opacity:1}
.npCtrls .rateMenu button.on{color:var(--accent2);opacity:1;background:rgba(255,255,255,.08)}
.npTitle,.npBar{transition:opacity .25s ease}
body.playing:not(.paused) .video-wrap:not(:hover) .npTitle,body.playing:not(.paused) .video-wrap:not(:hover) .npBar,body.playing:not(.paused) .video-wrap:not(:hover) .npInfoToggle{opacity:0}
body.hideCursor .npTitle,body.hideCursor .npBar,body.hideCursor .npInfoToggle{opacity:0}
/* auto-immersive: while playing + idle, the surrounding chrome fades to transparent and the ambient stage takes over the screen (snaps back on any pointer move / pause) */
body.pp-open header,body.pp-open #panelTabs,body.pp-open #npSide,body.pp-open #miniBar{transition:opacity .55s ease}
/* 沉浸1/2 閒置自動淡出:四邊 UI(上 header / 左 rail / 右 資訊 / 下 transport)一起淡出 */
body.npImmersed.pp-open header,body.npImmersed.pp-open #panelTabs,body.npImmersed.pp-open #npSide,body.npImmersed.pp-open #miniBar{opacity:.04;pointer-events:none}
/* 沉浸1:資訊面板預設收合(影片填滿);按 ⓘ 開啟時 OVERLAY 浮出右側,不擠壓影片(跳出來而非吃畫面) */
body.imm1 .npView{position:relative}
body.imm1 #npSide:not(.hidden){position:absolute;top:0;right:0;bottom:0;z-index:6;width:clamp(320px,34%,460px);box-shadow:-14px 0 44px -18px rgba(0,0,0,.65)}
/* --- C2 layout: left column (stage + Up Next) / right info panel --- */
.npLeft{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* right-panel queue (tabbed with info): vertical list or card view, drag-reorder */
.npSideTabs{display:flex;flex:none;border-bottom:1px solid var(--line)}
.npSideHd2{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex:none;padding:11px 14px;border-bottom:1px solid var(--line);font-size:13px;font-weight:700;color:var(--txt)}
.npsCollapse{flex:none;width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--ctl-bd);background:var(--ctl-bg);border-radius:6px;color:var(--muted);cursor:pointer;font-size:15px;line-height:1}
.npsCollapse:hover{color:var(--accent);border-color:var(--accent)}
#miniBar #mQueue{position:relative;transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
#miniBar #mQueue.on{color:var(--accent2)}
#miniBar #mQueue.qBump{transform:scale(1.28)}   /* 卡片飛入時的彈一下 */
@keyframes qFlash{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}55%{box-shadow:0 0 13px 3px color-mix(in srgb,var(--accent) 55%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
#miniBar #mQueue.qFlash{animation:qFlash .85s ease-out;border-radius:9px}   /* 只有「加入佇列」當下快閃一下;不再持續呼吸 */
.qFlyGhost{will-change:transform,opacity}
#miniBar #mQueue .qBadge{position:absolute;top:-2px;right:-2px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;display:grid;place-items:center;line-height:1;pointer-events:none}
#miniBar #mQueue .qBadge:empty{display:none}
/* 佇列抽屜:session-level,從下方 #miniBar 上方收合/展開 */
/* 佇列抽屜:工作階段層級,從 #miniBar 的佇列鈕展開。左緣對齊歌名(JS 設定 left),高科技玻璃面板,不佔滿寬 */
#queueDock{position:fixed;left:220px;right:14px;bottom:54px;z-index:49;height:0;overflow:hidden;display:flex;flex-direction:column;border-radius:16px 16px 0 0;
  background:color-mix(in srgb,var(--panel) 68%,transparent);backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line-strong));border-bottom:none;
  box-shadow:0 -20px 54px -20px var(--inset-strong),inset 0 1px 0 rgba(255,255,255,.07);
  opacity:0;pointer-events:none;transition:height .26s var(--ease),opacity .2s ease}
#queueDock.open{height:min(54vh,480px);opacity:1;pointer-events:auto}
#queueDock.drop{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),0 -20px 54px -20px var(--inset-strong)}
body.no-player #queueDock{display:none}
#queueDock .qdHd{display:flex;align-items:center;gap:7px;flex:none;padding:12px 14px 9px 18px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
#queueDock .qdHd b{font-size:13.5px}
#queueDock .qdHd .qdCt{font-size:12px;color:var(--accent);font-weight:700;margin-left:2px}
#queueDock .qdHd .qvSeg{margin-right:2px}
#queueDock .qdHd button{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--muted);border-radius:8px;background:none;border:none;cursor:pointer;transition:color .14s,background .14s}
#queueDock .qdHd button:hover{color:var(--accent2);background:var(--sel)}
#queueDock .qdHd button.on{color:var(--accent2)}
#queueDock .qdHd button svg{width:16px;height:16px}
#queueDock .qdHd .qvSeg button{width:auto;height:26px;padding:0 10px;font-size:11px;font-weight:600}
#queueDock .qdHd #qdClose{font-size:17px}
#queueDock .qSearch{flex:none;margin:8px 16px 4px}
#queueDock #queueList{width:100%;margin:0;padding:6px 12px 16px}
.npsTab{flex:1;padding:12px 8px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:6px}
.npsTab.on{color:var(--txt);border-bottom-color:var(--accent)}
.npsTab .tag{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.npsTab.on .tag{color:var(--accent)}
.npsPane{display:none;flex:1;min-height:0;flex-direction:column}
.npsPane.on{display:flex}
.npqHd{display:flex;align-items:center;gap:6px;padding:9px 12px 6px;flex:none}
.npqHd button{width:28px;height:28px;display:grid;place-items:center;color:var(--muted);border-radius:7px}
.npqHd button:hover{color:var(--accent2);background:var(--sel)}
.npqHd button.on{color:var(--accent2)}
.npqHd svg{width:15px;height:15px}
.qvSeg{display:inline-flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden}
.qvSeg button{width:auto!important;height:26px;padding:0 11px;font-size:11.5px;color:var(--muted);border-radius:0}
.qvSeg button+button{border-left:1px solid var(--line-strong)}
.qvSeg button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
#npsQueue .qSearch{margin:0 12px 8px;flex:none}
#queueList{display:flex;flex-direction:column;gap:5px;padding:0 10px 12px;overflow-y:auto;flex:1;min-height:0}
#queueList .empty{color:var(--muted);padding:12px 4px}
.qrow{position:relative;display:flex;align-items:center;gap:9px;cursor:grab;padding:5px;border:0;border-radius:9px;font-size:12px}
.qrow:hover{background:var(--sel)}
.qrow.current{background:color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:inset 2px 0 0 var(--accent)}
.qrow.qhide{display:none}
.qrow.dragging{opacity:.45}
.qrow.dragover{box-shadow:inset 0 2px 0 var(--accent)}
.qrow .qn{flex:none;width:20px;text-align:center;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums}
.qthumb{flex:none;width:104px;aspect-ratio:16/9;border-radius:7px;background:#0c0c12 center/cover no-repeat;border:1px solid var(--line);position:relative;overflow:hidden}
.qrow.current .qthumb{border-color:var(--accent)}
.qmeta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.qrow .qt{line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--txt)}
.qrow .qsub{font-size:10.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .qsrc{font-size:10px;color:var(--accent2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qrow .qx{flex:none;width:24px;height:24px;display:grid;place-items:center;color:var(--muted);border-radius:50%;opacity:0;font-size:12px}
.qrow:hover .qx{opacity:.85} .qrow .qx:hover{background:var(--danger);color:#fff;opacity:1}
/* card vs list mode */
#queueList.qvlist .qthumb{display:none}
#queueList.qvcard .qn{position:absolute;left:9px;top:9px;width:auto;background:rgba(0,0,0,.62);color:#fff;border-radius:4px;padding:0 5px;z-index:2}
#queueList.qvcard.current .qn,#queueList.qvcard .qrow.current .qn{background:var(--accent)}
/* thumbnail fallback tile (unavailable YT thumb → gradient + label, not a gray box) */
.hcThumb{position:relative}
.qthumb .thumbI,.hcThumb .thumbI{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.qthumb.noimg .thumbI,.hcThumb.noimg .thumbI{display:none}
.qthumb.noimg,.hcThumb.noimg{background:linear-gradient(135deg,var(--accent),var(--accent2))}
.qthumb.noimg::after,.hcThumb.noimg::after{content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;padding:0 8px;font-size:14px;font-weight:800;letter-spacing:.04em;color:#fff;text-align:center;text-shadow:0 1px 5px rgba(0,0,0,.45);overflow:hidden;z-index:1}
.npSide{flex:0 0 clamp(320px,30%,460px);border-left:1px solid color-mix(in srgb,var(--line) 55%,transparent);display:flex;flex-direction:column;min-height:0;overflow:hidden;background:color-mix(in srgb,var(--bg) 56%,transparent);backdrop-filter:blur(20px) saturate(1.2)}  /* 資訊面板 = frosted glass on the canvas */
.npSide.hidden{display:none}
#npsInfo{overflow-y:auto}
.npSideHd{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.npSideHd svg{width:16px;height:16px;color:var(--accent2)}
#infoBody{padding:18px 20px}
.infoTitle{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:14px;color:var(--txt)}
.infoDl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font-size:12.5px;align-items:start}
.infoDl dt{color:var(--muted);white-space:nowrap}
.infoDl dd{color:var(--txt);word-break:break-word}
.infoActs{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
/* 原平台連結(影片 / 頻道)— 鼓勵直接到 YouTube 支持原影源 */
.infoLinks{display:flex;flex-direction:column;gap:7px;margin:16px 0 2px}
.infoLink{display:flex;align-items:center;gap:9px;padding:9px 12px;border:1px solid var(--ctl-bd);background:var(--ctl-bg);border-radius:9px;color:var(--txt);font-size:12.5px;font-weight:600;text-decoration:none;transition:.15s}
.infoLink:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.infoLink .li{flex:none;font-size:13px;opacity:.85;width:16px;text-align:center}
.infoLink b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.infoLink .lx{margin-left:auto;flex:none;opacity:.45;font-size:12px}
.infoLink:hover .lx{opacity:1}
.infoLinkNote{font-size:11px;color:var(--muted);padding:3px 2px 0;line-height:1.45}
.vlink{color:var(--accent);text-decoration:none}
.vlink:hover{text-decoration:underline}
.npAiSlot{margin:auto 16px 16px;padding:16px 14px;border:1px dashed var(--line-strong);border-radius:11px;color:var(--muted);font-size:12px;text-align:center;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.ppLabel{font-size:13px;font-weight:600;letter-spacing:.02em}
.ppCtx{margin-left:2px}
@media(max-width:860px){ .workspace{grid-template-columns:1fr} #facetPane{position:static;max-height:none} .npSide{display:none} .lhead .h-mem,.drow .mem,.lhead .h-date,.drow .date{display:none} }

/* ============================ FOOTER ============================ */
#sysline{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:16px;padding:5px 16px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px) saturate(1.1);border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
body:not(.no-player) #sysline{display:none}
#emptyState{display:grid;place-items:center;min-height:60vh;padding:24px}
.drop{border:1px dashed var(--line-strong);padding:40px;text-align:center;max-width:420px}

/* ============================ CARD SYSTEM (additive; scoped, reversible) ============================ */
/* ---- view-mode segmented toggle injected into .qbtns ---- */
.vmSeg{display:inline-flex;border:1px solid var(--ctl-bd);overflow:hidden;border-radius:var(--ctl-r)}
.vmSeg button{padding:7px 12px;font-size:11px;letter-spacing:.06em;color:var(--muted);background:var(--ctl-bg);transition:background .14s,color .14s}
.vmSeg button:hover{background:var(--ctl-bg-h)}
.vmSeg button+button{border-left:1px solid var(--ctl-bd)}
.vmSeg button.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* ---- BASE DISC (shared by every card species) ---- */
.disc{position:relative;aspect-ratio:16/9;width:100%;border:1px solid var(--line-strong);
  background:var(--panel2);overflow:hidden;border-radius:12px;
  box-shadow:0 1px 0 var(--bevel-hi) inset,0 10px 26px -14px var(--inset-strong);
  transform:translateZ(0);cursor:pointer;user-select:none;
  content-visibility:auto;contain-intrinsic-size:280px 158px}
.disc .face{position:absolute;inset:0;background:#000 var(--cover) center/cover no-repeat}
.disc .face::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 36%,rgba(0,0,0,.20) 56%,rgba(0,0,0,.74) 100%)}
[data-theme="light"] .disc .face::after{background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.06) 58%,rgba(0,0,0,.58) 100%)}
.disc .groove{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background:repeating-radial-gradient(circle at 80% 28%,rgba(255,255,255,.06) 0 1px,transparent 1px 3px)}

/* ---- PRESSED TYPOGRAPHY (video disc only) ---- */
.disc .press{position:absolute;left:13px;right:13px;bottom:12px;z-index:3;
  font-family:ui-monospace,"Cascadia Mono",monospace;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.disc .press .gm{display:flex;gap:6px;align-items:baseline;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden}
.disc .press .gm .g{color:var(--accent2);font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.5),0 0 10px color-mix(in srgb,var(--accent2) 55%,transparent)}
.disc .press .gm .m{color:#fff;opacity:.92;overflow:hidden;text-overflow:ellipsis}
.disc .press .song{font-size:17px;font-weight:700;line-height:1.1;margin:2px 0 1px;letter-spacing:.01em;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc .press .ttl{font-size:11px;opacity:.76;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc .press .src{font-size:9px;letter-spacing:.05em;text-transform:uppercase;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;padding-right:62px}
.disc .press .src::before{content:"▸ ";opacity:.7}
.vgrid .disc.big .press .src{font-size:10px;opacity:.66}
.disc .press .date{position:absolute;right:0;bottom:1px;font-size:10px;opacity:.7;font-variant-numeric:tabular-nums}
.disc .badges{position:absolute;top:9px;right:9px;z-index:3;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.disc .badge{font-size:9px;font-weight:800;letter-spacing:.04em;padding:1px 5px;border-radius:4px;
  color:var(--accent);border:1px solid var(--accent);background:rgba(0,0,0,.34);backdrop-filter:blur(2px);text-transform:uppercase}
.disc .badge.vert{color:var(--accent2);border-color:var(--accent2)}
.disc .badge.bars{color:var(--muted);border-color:var(--muted);text-transform:none}
.disc .pick{position:absolute;top:9px;left:9px;z-index:4;width:22px;height:22px;border-radius:6px;
  border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.5);display:grid;place-items:center;color:#fff;font-size:12px;
  opacity:.6;transition:opacity .12s,background .12s,transform .12s}
.disc:hover .pick,.disc.sel .pick{opacity:1}
.disc .pick::after{content:"";position:absolute;inset:-9px}   /* 放大可點區到 ~40px(只往左上長,不搶 badges/tagbtn) */
.disc .pick:hover{transform:scale(1.12);background:rgba(0,0,0,.7)}
@media (hover:none){ .disc .pick{opacity:.9} }   /* 觸控/無 hover 裝置:勾選框常駐可見,好點 */
.disc.sel{outline:2px solid var(--accent);outline-offset:-2px}
/* spatial-nav (keyboard / controller) focus ring */
.snav-focus{outline:3px solid var(--accent)!important;outline-offset:2px;box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 26%,transparent);z-index:6}
@keyframes snavHold{0%{box-shadow:0 0 0 3px var(--accent),0 0 0 0 transparent}100%{box-shadow:0 0 0 4px var(--accent),0 0 18px 8px color-mix(in srgb,var(--accent) 55%,transparent)}}
.snav-holding{animation:snavHold .5s ease-out forwards;z-index:7}   /* 長按 ENTER/A 進度回饋:邊框漸亮 → 選單 */
body.gimm .snav-focus{transform:scale(1.05)}   /* 沉浸/10-foot:焦點卡再放大一點,遠看更清楚 */
/* 沉浸式常駐操作圖例(自動淡出)+ 已選 N 徽章 */
#immLegend{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:42;display:none;padding:8px 18px;border-radius:var(--ctl-r);background:rgba(15,15,18,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14);font-size:12.5px;color:rgba(255,255,255,.78);white-space:nowrap;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.4)}
body.gimm:not(.pp-open) #immLegend{display:block} #immLegend.show{opacity:1} #immLegend b{color:#fff;font-weight:700}
#immSel{position:fixed;right:16px;bottom:14px;z-index:42;display:none;padding:6px 13px;border-radius:var(--ctl-r);background:color-mix(in srgb,var(--accent) 90%,#000);color:#fff;font-size:12px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.4)}
body.gimm:not(.pp-open) #immSel.on{display:block}
.disc.sel .pick{background:var(--accent);border-color:var(--accent);color:var(--bg)}

/* ---- STACK ALBUM DISC (customizable sleeve) ---- */
.disc-stack{--pal:var(--accent);--pal2:var(--accent2)}
.disc-stack .sleeve{position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 18% 12%,color-mix(in srgb,var(--pal) 42%,transparent),transparent 60%),
    radial-gradient(120% 90% at 88% 92%,color-mix(in srgb,var(--pal2) 38%,transparent),transparent 62%),
    linear-gradient(150deg,var(--panel),var(--panel2))}
.disc-stack .vinyl{position:absolute;right:-44px;top:50%;width:120px;height:120px;border-radius:50%;transform:translateY(-50%);
  background:repeating-radial-gradient(circle at 50% 50%,#111 0 2px,#1b1b1b 2px 4px);box-shadow:0 0 0 3px #0a0a0a,0 8px 22px -8px #000;opacity:.9}
.disc-stack .vinyl::after{content:"";position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle,var(--pal),var(--pal2));box-shadow:0 0 0 4px rgba(0,0,0,.5)}
.disc-stack .meta{position:absolute;left:16px;top:14px;right:112px;z-index:2}
.disc-stack .meta .t{font-size:19px;font-weight:800;line-height:1.05;color:var(--txt);text-shadow:0 1px 0 var(--bevel-hi);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.disc-stack .meta .s{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}
.disc-stack .meta .ct{margin-top:8px;font-size:11px;color:var(--pal);font-weight:700}
/* STAK card hero (phase 3, v2): a REAL deck. The root is made overflow:visible (and content-visibility:visible to drop the paint-containment clip) so two frosted ::before/::after layers can peek BEHIND the cover. Plus a count badge top-right and a glow ring on the focused card. */
.disc-stack{border-radius:14px;overflow:visible;content-visibility:visible;contain:none;
  transition:box-shadow .2s ease,transform .16s ease;
  box-shadow:0 1px 0 var(--bevel-hi) inset,0 22px 42px -22px var(--inset-strong)}
.disc-stack::before,.disc-stack::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  backface-visibility:hidden;   /* 沉浸 3D perspective 下穩定合成,避免真實封面堆疊層在 holo 重繪時閃爍 */
  border:1px solid color-mix(in srgb,var(--pal) 32%,var(--line-strong))}
.disc-stack::before{z-index:-1;transform:translateY(-8px) scaleX(.955);
  background:var(--l1img,none) top/cover no-repeat,color-mix(in srgb,var(--pal) 22%,var(--panel2));
  box-shadow:0 -7px 16px -10px var(--inset-strong)}
.disc-stack::after{z-index:-2;transform:translateY(-17px) scaleX(.905);
  border-color:color-mix(in srgb,var(--pal2) 26%,var(--line-strong));
  background:var(--l2img,none) top/cover no-repeat,color-mix(in srgb,var(--pal2) 16%,var(--panel2));
  box-shadow:0 -9px 18px -12px var(--inset-strong)}
/* 真實堆疊層數(非假色塊):1 張不疊、2 張疊 1、3 張以上疊 2(前三張呈現) */
.disc-stack[data-layers="0"]::before,.disc-stack[data-layers="0"]::after,.disc-stack[data-layers="1"]::after{display:none}
/* 輪播封底 + ADD STAK(配合 accent 色,虛線框=新增意象;封底沒有假堆疊層) */
.disc-stack.addCover{cursor:pointer}
.disc-stack.addCover .addSleeve{position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 22%,var(--panel2)),color-mix(in srgb,var(--accent2) 18%,var(--panel2)));
  border:2px dashed color-mix(in srgb,var(--accent) 55%,var(--line-strong));transition:border-color .16s,background .16s}
.disc-stack.addCover .addInner{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.disc-stack.addCover .addPlus{font-size:clamp(40px,8vh,64px);font-weight:200;line-height:.8;color:var(--accent)}
.disc-stack.addCover .addLabel{font-size:18px;font-weight:800;letter-spacing:.14em;color:var(--txt)}
.disc-stack.addCover .addSub{font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.disc-stack.addCover:hover .addSleeve{border-color:var(--accent);background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 32%,var(--panel2)),color-mix(in srgb,var(--accent2) 26%,var(--panel2)))}
.disc-stack:hover,.disc-stack.live,.disc-stack.sel{
  box-shadow:0 1px 0 var(--bevel-hi) inset,0 0 0 2px color-mix(in srgb,var(--accent) 80%,transparent),
    0 0 30px -4px color-mix(in srgb,var(--accent) 55%,transparent),0 30px 56px -20px var(--inset-strong)}
#binderCoverflow .disc-stack.live{box-shadow:0 1px 0 var(--bevel-hi) inset,0 30px 56px -20px var(--inset-strong)}   /* 輪播正中央卡=已選,不要 accent 框線(跟圖卡沒對齊很醜);保留陰影、holo 仍在 */
.shelf .disc-stack{margin-bottom:20px}
#binderShelf.shelf{padding-top:24px}
/* count badge top-right (mockup "128"); yields to the kebab on hover */
.disc-stack .stakNum{position:absolute;right:9px;top:9px;z-index:6;min-width:24px;height:22px;padding:0 8px;border-radius:999px;
  display:grid;place-items:center;font-size:12px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:rgba(10,14,24,.52);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  box-shadow:0 2px 8px -3px rgba(0,0,0,.5);transition:opacity .14s}
.disc-stack:hover .stakNum,.disc-stack:focus-within .stakNum{opacity:0}
:root[data-skin="nova"] .disc-stack .sleeve{backdrop-filter:blur(8px) saturate(1.15);-webkit-backdrop-filter:blur(8px) saturate(1.15)}
.disc-stack[data-tpl="grid4"] .sleeve{background:var(--panel2)}
.disc-stack[data-tpl="grid4"] .thumbs{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1px;z-index:1}
.disc-stack[data-tpl="grid4"] .thumbs i{background:var(--ti) center/cover;filter:saturate(1.05)}
.disc-stack[data-tpl="grid4"] .thumbs::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(0,0,0,.62));z-index:1}
.disc-stack[data-tpl="grid4"] .meta{right:16px;left:14px;top:auto;bottom:12px;z-index:2}
.disc-stack[data-tpl="grid4"] .meta .t{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.disc-stack[data-tpl="grid4"] .meta .s{color:#e9e4d6}
.disc-stack[data-tpl="grid4"] .vinyl{display:none}
.disc-stack[data-tpl="img"] .sleeve{background:#000 var(--coverimg) center/cover no-repeat}
.disc-stack[data-tpl="img"] .vinyl{display:none}
.disc-stack[data-tpl="img"] .meta{left:14px;right:14px;top:auto;bottom:12px;z-index:2}
.disc-stack[data-tpl="img"] .meta .t{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.disc-stack .rar{position:absolute;left:14px;bottom:11px;z-index:3;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
.disc-stack[data-tpl="grid4"] .rar,.disc-stack[data-tpl="img"] .rar{display:none}
/* FANVAULT HERO cover — full-bleed top-video frame, badges, oversized watermark name */
.disc-stack[data-tpl="hero"] .sleeve{background:var(--panel2)}
.disc-stack[data-tpl="hero"] .heroFrame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:inherit;transition:opacity .2s ease;backface-visibility:hidden}   /* opacity:0→1 onload → maxres 404 換 hqdefault 期間不露「破圖」placeholder */
.disc-stack[data-tpl="hero"] .disc-front::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 26%,transparent 48%,rgba(0,0,0,.48) 76%,rgba(0,0,0,.86) 100%)}
.disc-stack[data-tpl="hero"] .vinyl{display:none}
.disc-stack[data-tpl="hero"] .stakMark{position:absolute;left:11px;top:9px;z-index:6;width:22px;height:22px;display:grid;place-items:center;pointer-events:none}
.disc-stack[data-tpl="hero"] .stakMark svg{width:22px;height:22px;fill:none;stroke:#E8743B;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}
.disc-stack[data-tpl="hero"] .heroBadges{position:absolute;top:11px;left:40px;z-index:5;display:flex;gap:4px;flex-wrap:wrap;max-width:55%}
.disc-stack[data-tpl="hero"] .meta{left:15px;right:15px;top:auto;bottom:13px;z-index:5}
.disc-stack[data-tpl="hero"] .meta .t{color:#fff;font-size:clamp(21px,3.2vw,36px);font-weight:900;line-height:1.02;letter-spacing:-.012em;
  text-shadow:0 2px 12px rgba(0,0,0,.62),0 1px 2px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.disc-stack[data-tpl="hero"] .meta .s{color:rgba(255,255,255,.86);text-shadow:0 1px 4px rgba(0,0,0,.6);text-transform:uppercase;letter-spacing:.11em;font-size:11px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-stack[data-tpl="hero"] .meta .ct{display:inline-block;margin-top:7px;padding:2px 10px;border-radius:999px;color:#fff;font-weight:800;font-size:11px;letter-spacing:.04em;background:color-mix(in srgb,var(--accent) 72%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.disc-stack[data-tpl="hero"] .rar{display:block;z-index:5;backdrop-filter:blur(2px);text-shadow:0 1px 2px rgba(0,0,0,.55)}
/* 影格 HERO:流光收斂 — 用 overlay 取代 color-dodge、低透明度,讓封面照片清楚不被洗白 */
.disc-stack[data-tpl="hero"] .holo,.disc-stack[data-tpl="hero"] .sparkle{z-index:6;mix-blend-mode:overlay !important;opacity:0 !important}
.disc-stack[data-tpl="hero"].live .holo{opacity:.2 !important}
.disc-stack[data-tpl="hero"].live .sparkle{opacity:.1 !important}
[data-skin="aurora"] .disc-stack[data-tpl="hero"] .meta .ct{background:color-mix(in srgb,var(--accent) 78%,transparent);color:#fff}
.disc-stack.smart .rar{color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);box-shadow:inset 0 0 0 1px var(--accent)}
.disc-stack.static .rar{color:var(--bg);background:var(--accent)}
.disc-stack .edit{position:absolute;right:10px;bottom:10px;z-index:6;font-size:10px;font-weight:700;padding:4px 8px;border-radius:6px;
  background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.28);opacity:0;transition:opacity .14s}
.disc-stack:hover .edit{opacity:1}
/* ⋮ kebab — one discoverable home for every lifecycle verb (top-right, always faintly visible) */
.disc-stack .kebab{position:absolute;right:9px;top:9px;z-index:7;width:26px;height:26px;display:grid;place-items:center;
  font-size:17px;line-height:1;border-radius:7px;color:#fff;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(3px);cursor:pointer;opacity:0;transition:opacity .14s,background .14s,box-shadow .14s}
.disc-stack:hover .kebab,.disc-stack:focus-within .kebab{opacity:1}
.disc-stack .kebab:hover{background:rgba(0,0,0,.62)}
.disc-stack.justSaved .kebab{opacity:1;animation:kebabPulse 1.1s ease-out 3}
@keyframes kebabPulse{0%{box-shadow:0 0 0 0 var(--accent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.libBar .kebab,.libBar button.kebab{opacity:1;backdrop-filter:none}
/* center ▶ play-whole-stak glyph (hover/focus reveal) — Step 4 affordance */
.disc-stack .playStakBtn{position:absolute;right:12px;bottom:12px;z-index:8;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:17px;padding-left:3px;color:#fff;background:rgba(0,0,0,.5);border:1.5px solid rgba(255,255,255,.6);
  backdrop-filter:blur(3px);cursor:pointer;opacity:0;transition:opacity .15s,background .15s,transform .15s}   /* 移到右下角:卡片中央=進入內頁,不再誤觸播放 */
.disc-stack:hover .playStakBtn,.disc-stack:focus-within .playStakBtn{opacity:1}
.disc-stack .playStakBtn:hover{background:rgba(0,0,0,.72);transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){.disc-stack .playStakBtn{transition:none}}
.kebabMenu{position:fixed;z-index:300;min-width:172px;max-width:240px;background:var(--panel);border:1px solid var(--line-strong);
  border-radius:11px;box-shadow:0 18px 44px -12px rgba(0,0,0,.6);padding:5px;display:none;flex-direction:column;gap:1px}
.kebabMenu.show{display:flex}
.kebabMenu .kbItem{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:7px;font-size:13px;color:var(--txt);
  background:none;border:none;cursor:pointer;white-space:nowrap;font-family:inherit}
.kebabMenu .kbItem:hover{background:var(--sel)}
.kebabMenu .kbItem.danger{color:var(--danger,#ff6b6b)}
.kebabMenu .kbItem.danger:hover{background:color-mix(in srgb,var(--danger,#ff6b6b) 15%,transparent)}
/* ============================================================
   STAK PHOTOCARD COVER — template "card" (token-only; per-name --hue from JS)
   Reuses .sleeve/.thumbs/.vinyl/.holo/.sparkle/.meta/.rar markup.
   ============================================================ */
.disc-stack[data-tpl="card"]{
  --h:calc(var(--ah,0) + var(--hue,0deg));--s:78%;--l1:60%;--l2:46%;
  --c1:hsl(var(--h) var(--s) var(--l1));--c2:hsl(calc(var(--h) + 42deg) var(--s) var(--l2))}
.disc-stack[data-tpl="card"] .sleeve{
  background:linear-gradient(155deg,color-mix(in srgb,var(--c1) 70%,transparent) 0%,color-mix(in srgb,var(--c2) 55%,transparent) 58%,color-mix(in srgb,var(--accent2) 30%,transparent) 100%),linear-gradient(150deg,var(--panel),var(--panel2))}
.disc-stack[data-tpl="card"] .thumbs{position:absolute;inset:0;z-index:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;border-radius:inherit;overflow:hidden}
.disc-stack[data-tpl="card"] .thumbs i{background:var(--ti) center/cover;filter:saturate(1.1) contrast(1.02)}
.disc-stack[data-tpl="card"] .sleeve::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(120% 90% at 16% 10%,color-mix(in srgb,var(--c1) 85%,transparent),transparent 60%),radial-gradient(130% 100% at 88% 96%,color-mix(in srgb,var(--c2) 80%,transparent),transparent 64%)}
.disc-stack[data-tpl="card"] .sleeve::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.06) 0%,transparent 34%,rgba(0,0,0,.18) 62%,rgba(0,0,0,.62) 100%)}
.disc-stack[data-tpl="card"] .disc-front::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 0 0 4px rgba(255,255,255,.10),inset 0 0 0 5px color-mix(in srgb,var(--accent2) 30%,transparent);
  background:linear-gradient(125deg,transparent 0 14%,color-mix(in srgb,var(--glow) 22%,transparent) 18%,transparent 22% 78%,color-mix(in srgb,var(--accent2) 20%,transparent) 84%,transparent 88%)}
.disc-stack[data-tpl="card"] .vinyl{right:-40px;width:104px;height:104px;z-index:2;opacity:.85;display:block}
.disc-stack[data-tpl="card"] .vinyl::after{background:radial-gradient(circle,var(--c1),var(--c2))}
.disc-stack[data-tpl="card"] .meta{left:14px;right:14px;top:auto;bottom:14px;z-index:5}
.disc-stack[data-tpl="card"] .meta .t{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7),0 0 1px rgba(0,0,0,.5)}
.disc-stack[data-tpl="card"] .meta .s{color:rgba(255,255,255,.86);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.disc-stack[data-tpl="card"] .meta .ct{display:inline-block;margin-top:7px;padding:2px 9px;border-radius:999px;color:#fff;font-weight:800;
  background:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 1px 6px -1px var(--glow),inset 0 0 0 1px rgba(255,255,255,.25)}
.disc-stack[data-tpl="card"] .rar{display:block;z-index:5;backdrop-filter:blur(2px);text-shadow:0 1px 2px rgba(0,0,0,.55)}
.disc-stack[data-tpl="card"].smart .rar,.disc-stack[data-tpl="hero"].smart .rar{color:#fff;background:color-mix(in srgb,var(--accent) 30%,rgba(0,0,0,.42));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 80%,transparent)}
.disc-stack[data-tpl="card"].static .rar,.disc-stack[data-tpl="hero"].static .rar{color:#fff;background:color-mix(in srgb,var(--accent) 78%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.disc-stack[data-tpl="card"] .holo,.disc-stack[data-tpl="card"] .sparkle{z-index:6}
.disc-stack[data-tpl="card"] .holo{opacity:.5}
.disc-stack[data-tpl="card"] .sparkle{opacity:.32}
.disc-stack[data-tpl="card"].live .holo{opacity:.92}
.disc-stack[data-tpl="card"].live .sparkle{opacity:.85}
@media (prefers-reduced-motion: reduce){
  .disc-stack[data-tpl="card"] .holo,.disc-stack[data-tpl="card"] .sparkle{transition:none;background-position:38% 30% !important}
  .disc-stack[data-tpl="card"] .holo{opacity:.42 !important}
  .disc-stack[data-tpl="card"] .sparkle{opacity:.26 !important}}
/* ---- AURORA skin card sheen (scoped; classic skin untouched) ---- */
[data-skin="aurora"] .disc{border-radius:18px;
  box-shadow:0 1px 0 var(--bevel-hi) inset,0 14px 34px -16px var(--glow-soft),0 4px 14px -8px var(--inset-strong)}
[data-skin="aurora"] .disc:hover{box-shadow:0 1px 0 var(--bevel-hi) inset,0 16px 40px -14px var(--glow),0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}
[data-skin="aurora"] .disc.sel{outline-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 26%,transparent),0 16px 40px -14px var(--glow)}
[data-skin="aurora"] .disc-stack{border-radius:20px;--pal:var(--accent);--pal2:var(--accent2)}
[data-skin="aurora"] .disc-stack .sleeve{
  background:radial-gradient(120% 100% at 14% 8%,#FF8FBE 0%,transparent 55%),
    radial-gradient(120% 100% at 90% 90%,#9DB4FF 0%,transparent 60%),
    linear-gradient(150deg,#FFC4DE 0%,#D9C8FF 48%,#BFC9FF 100%)}
[data-skin="aurora"][data-theme="dark"] .disc-stack .sleeve{
  background:radial-gradient(120% 100% at 14% 8%,color-mix(in srgb,var(--accent) 60%,transparent) 0%,transparent 55%),
    radial-gradient(120% 100% at 90% 90%,color-mix(in srgb,var(--accent2) 55%,transparent) 0%,transparent 60%),
    linear-gradient(150deg,var(--panel),var(--panel2))}
[data-skin="aurora"] .disc-stack .sleeve::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.55;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.55) 28%,rgba(255,210,236,.4) 42%,rgba(190,201,255,.4) 58%,transparent 78%)}
[data-skin="aurora"] .disc-stack[data-tpl="card"] .sleeve{
  background:linear-gradient(155deg,color-mix(in srgb,var(--c1) 72%,transparent) 0%,color-mix(in srgb,var(--c2) 56%,transparent) 58%,color-mix(in srgb,var(--accent2) 32%,transparent) 100%),linear-gradient(150deg,var(--panel),var(--panel2))}
[data-skin="aurora"] .disc-stack[data-tpl="card"] .sleeve::after{mix-blend-mode:normal;opacity:1;
  background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,transparent 34%,rgba(0,0,0,.16) 62%,rgba(0,0,0,.56) 100%)}
[data-skin="aurora"] .disc-stack:hover{box-shadow:0 16px 42px -14px var(--glow),0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
[data-skin="aurora"] .disc .badge{border-radius:6px;background:color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.55));color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
#skinBtn{display:inline-flex;align-items:center;gap:7px}
#skinBtn .skSw{width:11px;height:11px;border-radius:50%;background:var(--sw,var(--accent));box-shadow:0 0 0 1px var(--line-strong)}
#skinBtn .skName{letter-spacing:.06em;font-size:11px}

/* ---- DUAL HOLO FOIL (mounted only on .live front/hovered disc) ---- */
.disc .holo,.disc .sparkle{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .25s;
  will-change:transform,opacity,background-position;background-position:center;background-size:300% 300%}
.disc.live .holo,.disc.live .sparkle{opacity:.9}
.disc.live{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
/* video cards: NO reflection — keep the cursor-angle tilt + add a pronounced lifted shadow so it reads as a floating dynamic big card */
.disc-v .holo,.disc-v .sparkle{display:none!important}
.disc-v{transition:box-shadow .22s ease,transform .12s ease}
/* U7 deck swipe feedback: green = add to pack (right), red = skip (left) */
.disc.swipeRight{box-shadow:0 0 0 3px #34d399,0 18px 44px -12px rgba(0,0,0,.55)!important}
.disc.swipeLeft{box-shadow:0 0 0 3px #f87171,0 18px 44px -12px rgba(0,0,0,.55)!important}
.disc-v.live{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.04);z-index:6}
.disc-stack.smart .holo{mix-blend-mode:color-dodge;
  background-image:linear-gradient(115deg,hsl(0 100% 60%/.55),hsl(50 100% 60%/.55),hsl(120 100% 55%/.5),hsl(190 100% 60%/.55),hsl(280 100% 65%/.55),hsl(330 100% 62%/.55));
  background-size:200% 200%;background-position:calc(var(--mx,50)*1%) calc(var(--my,50)*1%);filter:saturate(1.5) contrast(1.15)}
.disc-stack.smart .sparkle{mix-blend-mode:color-dodge;
  background-image:radial-gradient(circle at 25% 30%,#fff8 0 1px,transparent 2px),radial-gradient(circle at 70% 60%,#fff6 0 1px,transparent 2px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='white' opacity='.5'><circle cx='8' cy='10' r='.8'/><circle cx='40' cy='22' r='.7'/><circle cx='22' cy='44' r='.9'/><circle cx='54' cy='50' r='.6'/></g></svg>");
  background-size:18% 18%,22% 22%,20% 20%;background-position:calc(var(--mx,50)*1.4%) calc(var(--my,50)*1.4%);opacity:calc(.4 + var(--hyp,0)*.6)}
.disc-stack.static .holo{mix-blend-mode:screen;
  background-image:linear-gradient(295deg,hsl(220 70% 30%/.7),hsl(260 80% 45%/.6),hsl(190 60% 40%/.6),hsl(300 70% 35%/.6),hsl(220 70% 25%/.7));
  background-size:240% 240%;background-position:calc(100% - var(--mx,50)*1%) calc(100% - var(--my,50)*1%);filter:contrast(1.3) brightness(1.1)}
.disc-stack.static .sparkle{mix-blend-mode:hard-light;
  background-image:conic-gradient(from calc(var(--mx,50)*3.6deg) at 50% 50%,transparent 0 18%,#9fd4ff44 20%,transparent 26% 55%,#d59cff44 58%,transparent 64%);
  background-size:cover;background-position:center;opacity:calc(.35 + var(--hyp,0)*.45)}

/* ============================================================
   CARD GLOW + HOLO FOIL  (grid .disc-v / deck .disc-v / list .drow)
   Tokens only: --vibe (0-360 hue, set inline), --accent, --accent2,
   --glow, --glow-soft, --panel, --line. --vibe-tint biases the per-card
   hue toward the active skin accent so classic(orange) + aurora(pink)
   both read as a trading-card sheen. NOTE: never sets transform on
   .disc-v.live (the .disc.live perspective-tilt rule above must win). */
.disc-v{ --vibe:330; --vibe-col:hsl(var(--vibe) 80% 60%);
  --vibe-tint:color-mix(in srgb, var(--vibe-col) 55%, var(--accent));
  transition:transform .2s var(--ease), box-shadow .2s ease}
/* idle: exactly one static shadow (bevel + faint vibe rim), no foil */
.disc-v{
  box-shadow:0 1px 0 var(--bevel-hi) inset,0 10px 26px -14px var(--inset-strong),
    0 0 0 1px color-mix(in srgb, var(--vibe-tint) 14%, transparent)}
/* shared vibe-tinted glow on hover / live / sel */
.disc-v:hover,.disc-v.live,.disc-v.sel{
  box-shadow:0 1px 0 var(--bevel-hi) inset,
    0 34px 70px -20px rgba(0,0,0,.76),
    0 14px 32px -14px rgba(0,0,0,.55)}
/* lift only when NOT live (live keeps the perspective tilt from .disc.live) */
.disc-v:hover:not(.live),.disc-v.sel:not(.live){transform:translateY(-3px) scale(1.012)}
.disc-v.sel{outline:2px solid color-mix(in srgb, var(--vibe-tint) 50%, var(--accent));outline-offset:-2px}
/* aurora: rounder ring, vibe-tinted */
[data-skin="aurora"] .disc-v:hover,[data-skin="aurora"] .disc-v.live,[data-skin="aurora"] .disc-v.sel{
  box-shadow:0 1px 0 var(--bevel-hi) inset,
    0 18px 44px -14px color-mix(in srgb, var(--vibe-tint) 55%, var(--glow)),
    0 0 0 1px color-mix(in srgb, var(--vibe-tint) 50%, var(--accent)),
    0 0 26px -2px color-mix(in srgb, var(--vibe-tint) 45%, var(--glow-soft))}
/* light theme: outer ring instead of dark drop, stays visible on --panel */
[data-theme="light"] .disc-v:hover,[data-theme="light"] .disc-v.live,[data-theme="light"] .disc-v.sel{
  box-shadow:0 1px 0 var(--bevel-hi) inset,
    0 30px 60px -18px rgba(18,28,52,.52),
    0 12px 28px -12px rgba(18,28,52,.36)}
/* HOLO FOIL on grid/deck video cards — capped opacity, tokens+vibe */
.disc-v.live .holo{mix-blend-mode:color-dodge;
  background-image:linear-gradient(115deg,
    hsl(var(--vibe) 100% 62%/.5),
    color-mix(in srgb, var(--accent) 70%, transparent),
    hsl(calc(var(--vibe) + 60) 100% 60%/.45),
    color-mix(in srgb, var(--accent2) 70%, transparent),
    hsl(calc(var(--vibe) + 140) 100% 62%/.5));
  background-size:200% 200%;background-position:calc(var(--mx,50)*1%) calc(var(--my,50)*1%);
  filter:saturate(1.35) contrast(1.08);opacity:.42}
.disc-v.live .sparkle{mix-blend-mode:color-dodge;
  background-image:radial-gradient(circle at 25% 30%,#fff8 0 1px,transparent 2px),radial-gradient(circle at 70% 60%,#fff6 0 1px,transparent 2px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='white' opacity='.5'><circle cx='8' cy='10' r='.8'/><circle cx='40' cy='22' r='.7'/><circle cx='22' cy='44' r='.9'/><circle cx='54' cy='50' r='.6'/></g></svg>");
  background-size:18% 18%,22% 22%,20% 20%;background-position:calc(var(--mx,50)*1.4%) calc(var(--my,50)*1.4%);
  opacity:calc(.18 + var(--hyp,0)*.28)}
.disc-v .holo,.disc-v .sparkle{pointer-events:none}
/* LIST ROWS — flat --vibe tint only (NO tilt / NO foil) */
.drow{--vibe:330; --vibe-col:hsl(var(--vibe) 80% 60%);
  --vibe-tint:color-mix(in srgb, var(--vibe-col) 55%, var(--accent))}
.drow:hover{background:color-mix(in srgb, var(--vibe-tint) 9%, transparent);
  box-shadow:inset 2px 0 0 color-mix(in srgb, var(--vibe-tint) 55%, transparent)}
.drow.sel{background:color-mix(in srgb, var(--vibe-tint) 12%, transparent);
  box-shadow:inset 2px 0 0 color-mix(in srgb, var(--vibe-tint) 75%, var(--accent))}
.drow.sel .bx{background:color-mix(in srgb, var(--vibe-tint) 16%, transparent);
  border-color:color-mix(in srgb, var(--vibe-tint) 70%, var(--accent));
  color:color-mix(in srgb, var(--vibe-tint) 60%, var(--accent))}
.drow.current{box-shadow:inset 3px 0 0 var(--accent)}
/* REDUCED MOTION — no tilt/foil; static vibe glow stays */
@media(prefers-reduced-motion:reduce){
  .disc-v.live .holo,.disc-v.live .sparkle{opacity:0}
  .disc-v:hover,.disc-v.sel{transform:none}
}

/* ---- RIFFLE DECK (browse-deck + per-stack deck) ---- */
.deck{position:relative;height:min(66vh,520px);perspective:1400px;touch-action:pan-y;margin:14px auto 0;outline:none}
#stackDeck{margin-top:80px;height:min(56vh,440px)}   /* STAK 內頁:卡片往上扇開會頂到上方 deckBar → 上方留間距讓扇形避開 */
#stackDeck .disc{width:min(90%,580px,calc((100vh - 200px) * 1.6))}   /* 卡寬也隨視窗高度收(矮窗→小卡)→ 扇形不頂 bar、下緣不壓底欄 */
/* deck ambient: blurred current-card backdrop fills the area for a more immersive single-card focus (var set in makeDeck.front) */
#browseDeck::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:18px;background:var(--deck-thumb,none) center/cover no-repeat;filter:blur(64px) saturate(1.5) brightness(.6);opacity:var(--deck-amb,0);transition:opacity .6s ease;transform:scale(1.2)}
.deck .disc{position:absolute;left:50%;top:50%;width:min(92%,640px);transform-origin:50% 50%;
  transition:transform .42s var(--ease),opacity .42s,filter .42s;backface-visibility:hidden}
.deck .disc[data-o="0"]{transform:translate(-50%,-50%) translateZ(0) scale(1) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));opacity:1;z-index:50;filter:none;transition:transform .16s ease-out,opacity .42s,filter .42s}
.deck .disc[data-o="1"]{transform:translate(-50%,-64%) translateZ(-50px) scale(.93) rotateX(3deg);opacity:.96;z-index:40;filter:brightness(.92)}
.deck .disc[data-o="2"]{transform:translate(-50%,-74%) translateZ(-100px) scale(.88) rotateX(5deg);opacity:.82;z-index:30;filter:brightness(.8)}
.deck .disc[data-o="3"]{transform:translate(-50%,-82%) translateZ(-150px) scale(.84) rotateX(7deg);opacity:.62;z-index:20;filter:brightness(.68)}
.deck .disc[data-o="-1"]{transform:translate(-50%,-150%) translateZ(40px) scale(1.02) rotateZ(-7deg);opacity:0;z-index:60}
/* 堆疊輪播:每張背卡頂部露出一條標籤(成員(團)– 歌 [4K] + 標題),逆向 counter-scale 保持文字清晰 */
.deck .disc .fanRow{position:absolute;top:5px;left:11px;right:11px;z-index:7;height:21px;display:flex;align-items:baseline;gap:6px;padding:3px 10px;border-radius:6px;font:600 11px/1.1 ui-monospace,"Cascadia Mono",monospace;letter-spacing:.02em;color:var(--txt);background:color-mix(in srgb,var(--panel) 90%,transparent);box-shadow:inset 0 0 0 1px var(--line-strong),0 2px 6px rgba(0,0,0,.35);backdrop-filter:blur(3px);transform:scale(calc(1/var(--cardScale,1)));transform-origin:top left;white-space:nowrap;overflow:hidden}
.deck .disc[data-o="0"] .fanRow{display:none}
.deck .disc .fanRow .mem{color:var(--accent2);font-weight:800;text-transform:uppercase;flex:0 0 auto}
.deck .disc .fanRow .grp,.deck .disc .fanRow .dash{color:var(--muted);flex:0 0 auto}
.deck .disc .fanRow .song{color:var(--txt);font-weight:700;flex:0 0 auto}
.deck .disc .fanRow .ttl{flex:1 1 auto;min-width:0;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.deck .disc .fanRow .b{flex:0 0 auto;font-size:9px;font-weight:800;color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:0 4px}
.deck .disc .fanRow .loopTail{flex:0 0 auto;color:var(--accent2);font-weight:700;margin-left:4px}
.deck .disc .spine{position:absolute;top:8px;left:8px;z-index:6;font-size:10px;font-weight:700;letter-spacing:.05em;
  padding:2px 8px;border-radius:4px;color:var(--accent);background:color-mix(in srgb,var(--panel) 80%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent);opacity:0;transition:opacity .3s;text-transform:uppercase;max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.deck .disc[data-o="1"] .spine,.deck .disc[data-o="2"] .spine{opacity:.95}
.deckBar{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.deckBar .hint{margin-left:auto;font-size:11px;color:var(--muted)}
.deckBar .hint kbd{margin:0 1px}
/* 操作說明改成一顆 info icon(懸浮才秀說明),取代一長串文字 */
.deckHelp{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--ctl-bd);background:var(--ctl-bg);border-radius:var(--ctl-r);color:var(--muted);cursor:help}
.deckHelp:hover{color:var(--accent)}
.deckHelp svg{width:15px;height:15px}
/* 沉浸卡組:說明 icon 釘在右下角(底欄之上),避開右上角浮動工具列與底部 playbar */
body.gimm:not(.pp-open) #browseDeckBar{position:fixed;left:auto;right:18px;bottom:62px;margin:0;z-index:45;width:auto}
.deckBar .deckCount{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.deckBar .deckCount+.hint{margin-left:12px}
.deck .deckNav{position:absolute;right:12px;z-index:8;width:30px;height:30px;display:grid;place-items:center;border-radius:var(--ctl-r);border:1px solid var(--ctl-bd);background:var(--ctl-bg);color:var(--txt);cursor:pointer;font-size:11px;line-height:1}
.deck .deckNav.up{top:calc(50% - 38px)} .deck .deckNav.dn{top:calc(50% + 8px)}
.deck .deckNav:hover{border-color:var(--accent2);color:var(--accent2)}
.deck .deckNav:active{transform:scale(.94)}
@media(prefers-reduced-motion:reduce){ .deck .deckNav:active{transform:none} }

/* ---- BINDER SHELL ---- */
.binderBar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.binderBar .btn.on{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.shelf .empty{grid-column:1/-1}

/* ---- IMAGE-FIRST BROWSE GRID (default; LIST = fallback) ---- */
/* ===== ASPECT-PRESERVING MOSAIC — 橫式=16:9、直式=9:16,只變尺寸不裁切。col span + row span 由 mosaicLayout(v,i,--mcol) 計算;row 單位=10px、欄寬固定=--mcol ===== */
.vgrid{--mcol:240px;display:grid;grid-template-columns:repeat(auto-fill,var(--mcol));justify-content:center;grid-auto-rows:10px;grid-auto-flow:row dense;gap:14px;margin-top:14px;align-content:start}
.vgrid .disc{aspect-ratio:auto}
.vgrid .disc .face img.cov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0a0a0a}
/* big = 2欄以上的橫式特寫:大字 */
.vgrid .disc.big .press{left:18px;right:18px;bottom:16px}
.vgrid .disc.big .press .gm{font-size:13px}
.vgrid .disc.big .press .song{font-size:26px;margin:4px 0 2px}
.vgrid .disc.big .press .ttl{font-size:12px;padding-right:88px;display:block}
/* 一般卡:精簡(歌名+日期),原始檔名不塞 */
.vgrid .disc:not(.big) .press .ttl{display:none}
.vgrid .disc:not(.big) .press .song{padding-right:52px}
/* 直式卡:漸層拉高一點讓底部文字在滿版人物上仍清楚 */
.vgrid .disc.port .face::after{background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.2) 54%,rgba(0,0,0,.8) 100%)}
[data-theme="light"] .vgrid .disc.port .face::after{background:linear-gradient(180deg,transparent 36%,rgba(0,0,0,.06) 56%,rgba(0,0,0,.6) 100%)}
[data-skin="aurora"] .vgrid .disc{border-radius:18px}
.vgrid .more{grid-column:1/-1;text-align:center;color:var(--muted);padding:14px;font-size:12px;letter-spacing:.04em}
/* MOBILE:縮小欄寬(JS 讀 --mcol 重算 row span,維持比例)。直式仍 1 欄,橫式特寫降為 1 欄避免溢出 */
@media(max-width:760px){ .vgrid{--mcol:160px} }

/* ---- PLAYLIST COVERFLOW (cycles stack-album discs) ---- */
#binderCoverflow{position:relative;height:calc(100vh - 112px);perspective:1600px;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:pan-y;outline:none}   /* B-vc: 撐滿 binderBar↔miniBar 之間整段,讓內部 top:50% 的影卡垂直置中(原 min(58vh,420px) 會偏上、下方空白) */
#binderCoverflow .disc-stack{position:absolute;left:50%;top:50%;width:min(54%,520px);transform-origin:50% 50%;   /* B2: 絕對定位卡片用 left/top 50% + translate(-50%,-50%) 真正置中(flex 的 justify/align 對 absolute 子元素無效) */
  transition:transform .5s var(--ease),opacity .5s,filter .5s}
#binderCoverflow .disc-stack[data-p="0"]{transform:translate(-50%,-50%) rotateY(0) scale(1);z-index:30;opacity:1}
#binderCoverflow .disc-stack[data-p="1"]{transform:translate(-50%,-50%) translateX(56%) rotateY(-42deg) scale(.82);z-index:20;opacity:.7;filter:brightness(.7)}
#binderCoverflow .disc-stack[data-p="-1"]{transform:translate(-50%,-50%) translateX(-56%) rotateY(42deg) scale(.82);z-index:20;opacity:.7;filter:brightness(.7)}
#binderCoverflow .disc-stack[data-p="2"]{transform:translate(-50%,-50%) translateX(96%) rotateY(-52deg) scale(.66);z-index:10;opacity:.4;filter:brightness(.5)}
#binderCoverflow .disc-stack[data-p="-2"]{transform:translate(-50%,-50%) translateX(-96%) rotateY(52deg) scale(.66);z-index:10;opacity:.4;filter:brightness(.5)}
.cfNeedle{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:40;font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* ---- MULTI-SELECT CART (collapsible pill → panel; replaces the illegible pile-up) ---- */
#cartDock{position:fixed;right:18px;bottom:64px;z-index:55;display:none;flex-direction:column;align-items:flex-end;gap:10px}
#cartDock.has{display:flex}
#cartPill{display:flex;align-items:center;gap:8px;height:46px;padding:0 15px;border-radius:var(--ctl-r);cursor:pointer;color:var(--txt);font-weight:700;font-size:14px;
  background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 14px 30px -10px var(--inset-strong);
  backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);transition:transform .14s ease,box-shadow .2s ease,border-color .15s}
#cartPill:hover{transform:translateY(-2px)}
#cartPill .cartIcon{font-size:18px;line-height:1}
#cartPill .cartCt{min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:12px;font-weight:800}
#cartDock.drop #cartPill{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent),0 14px 30px -10px var(--inset-strong)}
#cartPanel{display:none;flex-direction:column;width:320px;max-width:78vw;max-height:min(60vh,420px);
  background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;overflow:hidden;box-shadow:0 20px 50px -14px var(--inset-strong);
  backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
#cartDock.open #cartPanel{display:flex;animation:cartIn .22s var(--ease)}
@keyframes cartIn{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
#cartPanel .cartHd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px}
#cartPanel .cartHd #cartCt2{color:var(--accent);font-weight:800}
#cartPanel .cartHd #cartClear{font-size:12px;color:var(--muted);background:none;border:none;cursor:pointer}
#cartPanel .cartHd #cartClear:hover{color:var(--danger,#ff6b6b)}
#cartList{flex:1;min-height:0;overflow-y:auto;padding:6px}
.cartRow{display:flex;align-items:center;gap:10px;padding:6px;border-radius:9px;cursor:pointer;transition:background .12s}
.cartRow:hover{background:var(--sel)}
.cartRow .crThumb{flex:none;width:54px;height:31px;border-radius:5px;background:#0c0c12 center/cover no-repeat;border:1px solid var(--line)}
.cartRow .crT{flex:1;min-width:0;font-size:12.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cartRow .crX{flex:none;width:24px;height:24px;border-radius:6px;border:none;background:none;color:var(--muted);cursor:pointer;font-size:13px}
.cartRow .crX:hover{background:color-mix(in srgb,var(--danger,#ff6b6b) 16%,transparent);color:var(--danger,#ff6b6b)}
.cartActs{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-top:1px solid var(--line)}
.cartActs .btn{flex:1;min-width:calc(50% - 3px)}
@keyframes albumPop{0%{transform:scale(.2) translateY(-30px);opacity:0;filter:brightness(1.6)}60%{transform:scale(1.05);opacity:1}100%{transform:none}}
.disc-stack.justSaved{animation:albumPop .5s var(--ease)}

/* ---- COVER EDITOR MODAL ---- */
#coverModal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}
#coverModal.show{display:flex}
#coverModal .sheet{width:min(640px,94vw);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 24px 60px -20px var(--inset-strong);padding:18px}
#coverModal .sheet h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
#coverModal .ceGrid{display:grid;grid-template-columns:248px 1fr;gap:18px}
@media(max-width:640px){#coverModal .ceGrid{grid-template-columns:1fr}}
#coverModal .ceField{margin-bottom:12px}
#coverModal .ceField label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
#coverModal input[type=text]{width:100%;border:1px solid var(--line-strong);background:var(--bg);padding:7px 10px;font:13px ui-monospace,monospace}
#coverModal .ceRow{display:flex;gap:6px;flex-wrap:wrap}
#coverModal .ceChip{padding:5px 10px;border:1px solid var(--ctl-bd);font-size:12px;background:var(--ctl-bg);border-radius:var(--ctl-r)}
#coverModal .ceChip.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border-color:var(--accent)}
#coverModal .ceSw{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer}
#coverModal .ceSw.on{border-color:var(--txt)}
#coverModal .ceThumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
#coverModal .ceThumbs i{aspect-ratio:16/9;background:var(--ti) center/cover;border:2px solid transparent;cursor:pointer;border-radius:3px}
#coverModal .ceThumbs i.on{border-color:var(--accent)}
#coverModal .ceFoot{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}

@media(max-width:860px){#cartDock{right:10px;bottom:60px}#cartPanel{width:280px}}
@media(prefers-reduced-motion:reduce){
  .deck .disc,#binderCoverflow .disc-stack{transition:none}
  .disc.live{transform:none}
  .disc-stack.justSaved,.disc-stack.justSaved .kebab{animation:none}
}
/* ===== 收藏 / 影像庫 — staks manager (warm orange-mono, tokens only) ===== */
#tabLibrary .libHead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
#tabLibrary .libHead h2{font-size:18px;font-weight:800;letter-spacing:.04em;color:var(--txt);margin:0}
#tabLibrary .libHead .libCt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
#tabLibrary .libHead .libSpacer{margin-left:auto}
.libGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px}
.libGrid .empty{grid-column:1/-1}
.libCard{position:relative}
.libCard .disc-stack{cursor:pointer}
.libBar{position:absolute;left:8px;right:8px;top:8px;z-index:8;display:flex;gap:4px;justify-content:flex-end;
  opacity:0;transform:translateY(-3px);transition:opacity .14s ease,transform .14s ease;pointer-events:none}
.libCard:hover .libBar,.libCard:focus-within .libBar{opacity:1;transform:none;pointer-events:auto}
.libBar button{width:27px;height:27px;display:grid;place-items:center;font-size:12px;line-height:1;border-radius:6px;
  border:1px solid var(--line-strong);background:linear-gradient(var(--keycap-top),var(--keycap-bot));
  color:var(--txt);box-shadow:var(--well);cursor:pointer}
.libBar button:hover{border-color:var(--accent);color:var(--accent)}
.libBar button.play:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.libBar button.danger:hover{border-color:var(--danger);color:var(--danger)}
#tabLibrary .libRule{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 14px;
  padding:10px 12px;border:1px solid var(--line);background:var(--panel2);border-radius:8px}
#tabLibrary .libRule .rk{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
#tabLibrary .libRule code{font-size:13px;font-weight:700;color:var(--accent);
  padding:1px 7px;border-radius:5px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
#tabLibrary .libNote{font-size:11px;color:var(--muted);margin:10px 0 4px}
.libRows{display:flex;flex-direction:column;gap:6px;max-width:780px}
.libRow{display:grid;grid-template-columns:24px 88px minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:6px 8px;border:1px solid var(--line);background:var(--panel);border-radius:8px;box-shadow:var(--well)}
.libRow:hover{border-color:var(--line-strong)}
.libRow .ix{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
.libRow .th{width:88px;aspect-ratio:16/9;border-radius:5px;border:1px solid var(--line-strong);
  background:#000 var(--th) center/cover no-repeat}
.libRow .info{min-width:0}
.libRow .info .g{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libRow .info .ttl{font-size:13px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.libRow .ops{display:flex;gap:4px}
.libRow .ops button{width:27px;height:27px;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;border-radius:6px;border:1px solid var(--line-strong);color:var(--txt);
  background:linear-gradient(var(--keycap-top),var(--keycap-bot));box-shadow:var(--well);cursor:pointer}
.libRow .ops button:hover{border-color:var(--accent);color:var(--accent)}
.libRow .ops button.rm:hover{border-color:var(--danger);color:var(--danger)}
.libRow .ops button:disabled{opacity:.35;cursor:default;border-color:var(--line);color:var(--muted)}
.libRow[draggable="true"]{cursor:grab}
.libRow[draggable="true"]:active{cursor:grabbing}
.libRow.dragging{opacity:.4;border-color:var(--accent);box-shadow:0 8px 22px -10px var(--glow)}
.libRow .grip{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;cursor:grab;user-select:none}
.libRow[draggable="true"]:hover .grip{color:var(--accent)}
.stkSeg{margin-left:auto}
/* in-stak filter bar */
/* stak deckBar 內嵌搜尋:沿用 .qbox(沉浸自動收合成 icon、focus 才展開),搜尋整欄+曲目計數整合進 deckBar 中段,DECK|LIST 仍靠右(取代原本獨立的篩選列) */
.deckBar{flex-wrap:wrap}
.deckBar .stakQbox{flex:0 1 260px;min-width:0;border-radius:7px;padding:5px 10px;gap:6px;cursor:text;background:var(--panel2)}
.deckBar .stakQbox input{flex:1;min-width:0;font:12px ui-monospace,monospace;color:var(--txt)}
.deckBar .stakQbox input::placeholder{color:var(--muted);opacity:.7}
.deckBar .stakQbox .qx{flex:none;border:0;background:none;color:var(--muted);cursor:pointer;font-size:11px;padding:0 2px;line-height:1}
.deckBar .stakQbox .qx:hover{color:var(--accent)}
.deckBar .deckCount{margin-left:0}        /* 不再 push 到最右,改內嵌中段(跟篩選計數並排) */
.deckBar .stkSeg{margin-left:auto}        /* DECK|LIST 維持靠右 */
.deckBar .stakChips{max-width:38vw}
.stakFilterBar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin:8px 0 6px;flex:0 0 auto;position:relative;z-index:8;background:var(--bg)}
.stakFilterIn{flex:0 0 auto;width:min(240px,40vw);border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);padding:6px 10px;font:12px ui-monospace,monospace;border-radius:7px;box-shadow:inset 0 1px 2px var(--inset)}
.stakFilterIn::placeholder{color:var(--muted);opacity:.7}
.stakFilterIn:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 1px 2px var(--inset),0 0 0 3px var(--glow-soft)}
.stakFilterCt{flex:0 0 auto;font-size:11px;color:var(--accent);font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.stakChips{display:flex;gap:6px;flex-wrap:nowrap;align-items:center;overflow-x:auto;min-width:0;scrollbar-width:none}
.stakChips::-webkit-scrollbar{height:0}
.stChip{flex:0 0 auto;padding:6px 12px;font-size:11px;letter-spacing:.02em;color:var(--muted);background:var(--panel2);border:1px solid var(--line-strong);border-radius:7px;cursor:pointer;transition:color .12s,border-color .12s,background .12s,box-shadow .12s}
.stChip:hover{color:var(--txt);background:var(--panel);border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 26%,transparent)}
.stChip.on{color:#fff;background:var(--accent);border-color:var(--accent);font-weight:700;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 38%,transparent)}
/* 快捷篩選 chips 收進一顆 icon → 點擊展開成浮層(標籤太多時不擠爆 deckBar / 不蓋到右上控制鈕) */
.stakChipsWrap{position:relative;display:inline-flex;flex:none}
.stChipsBtn{flex:none}
.stakChipsWrap.open .stChipsBtn{color:var(--accent);border-color:var(--accent)}
.stakChipsWrap .stakChips{display:none}
.stakChipsWrap.open .stakChips{display:flex;flex-wrap:wrap;align-content:flex-start;position:absolute;top:calc(100% + 8px);right:0;left:auto;width:max-content;max-width:min(70vw,480px);max-height:46vh;overflow:auto;gap:8px;padding:14px;border-radius:12px;
  background:color-mix(in srgb,var(--panel) 90%,transparent);backdrop-filter:blur(22px) saturate(1.3);-webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid color-mix(in srgb,var(--line-strong) 85%,transparent);
  box-shadow:0 22px 50px -16px #000,inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent);z-index:60}
.stakChipsWrap.open .stakChips::-webkit-scrollbar{width:0;height:0}
.stakListNote{font-size:11px;color:var(--accent2);padding:2px 2px 6px;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){ .libBar{transition:none} }
/* playlist boxes (有序影盤盒) */
.libHead .libSeg{box-shadow:var(--well)}
.libHead .libNote{font-size:11px;color:var(--muted);margin-left:12px}
@media(max-width:680px){ .libHead .libNote{display:none} }
.plBox{position:relative;border:1px solid var(--line-strong);background:var(--panel);border-radius:12px;
  box-shadow:var(--well);overflow:hidden;cursor:pointer;display:flex;flex-direction:column}
.plBox:hover{border-color:var(--accent)}
.plCovers{aspect-ratio:16/9;display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--panel2);padding:6px}
.plCovers i{background:#000 var(--ti) center/cover no-repeat;border-radius:3px;min-height:0;min-width:0}
.plCovers i.ph{background:repeating-linear-gradient(45deg,var(--panel2),var(--panel2) 6px,var(--panel) 6px,var(--panel) 12px)}
.plCovers i:only-child{grid-column:1/-1}
.plMeta{padding:8px 10px;border-top:1px solid var(--line)}
.plMeta .plName{font-size:13px;font-weight:700;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plMeta .plSub{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:2px}
.qrow .qsrc{margin-left:6px;font-size:9px;padding:0 4px;border-radius:3px;color:var(--accent2);border:1px solid var(--line);white-space:nowrap}
.qrow .qsub{margin-left:8px;font-size:10px;opacity:.5;font-weight:400;font-variant-numeric:tabular-nums}
.qrow.current .qsub{opacity:.64}
#qLock.on{color:var(--accent)}
.qSearch{margin:6px 0 4px;width:100%;border:1px solid var(--line-strong);background:var(--bg);padding:6px 9px;font:12px ui-monospace,monospace;color:var(--txt);box-shadow:inset 0 1px 2px var(--inset)}
.qSearch:focus{outline:none;border-color:var(--accent)}
.qrow{cursor:grab}
.qrow.qhide{display:none}
.qrow.dragging{opacity:.45}
.qrow.dragover{box-shadow:inset 0 2px 0 var(--accent)}
/* ============ STAK CRUD — tokens only (classic+aurora, light+dark) ============ */
#undoToast{position:fixed;left:50%;bottom:22px;z-index:90;transform:translate(-50%,16px);display:none;align-items:center;gap:12px;max-width:min(92vw,460px);padding:11px 12px 11px 16px;background:var(--panel);color:var(--txt);border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:12px;box-shadow:0 22px 54px -20px rgba(0,0,0,.6),var(--well);font-size:13px;line-height:1.3;backdrop-filter:blur(8px);overflow:hidden}
#undoToast.show{display:flex;animation:utRise .2s var(--ease)}
@keyframes utRise{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
#undoToast .utMsg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#undoToast .utBtn{flex:none;padding:5px 12px;border-radius:8px;cursor:pointer;font-weight:700;letter-spacing:.04em;border:1px solid var(--accent);background:var(--accent);color:var(--bg)}
#undoToast .utBtn:hover{filter:brightness(1.07)}
#undoToast .utX{flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:6px;font-size:12px}
#undoToast .utX:hover{color:var(--txt);background:color-mix(in srgb,var(--txt) 8%,transparent)}
#undoToast .utBar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(1);transition:transform 6s linear}
#undoToast.show .utBar{transform:scaleX(0)}
#undoToast.hold .utBar{transition:none}
.disc-stack.deleting{animation:utLeave .16s ease forwards;pointer-events:none}
@keyframes utLeave{to{opacity:0;transform:scale(.9)}}
.disc-stack.restored,.libCard.restored .disc-stack{animation:albumPop .5s var(--ease)}
.disc-stack .meta .t[contenteditable],.disc-stack .meta .t.editing{outline:none;cursor:text;border-radius:5px;padding:0 4px;margin:0 -4px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));box-shadow:0 0 0 2px var(--accent);color:var(--txt);white-space:pre}
.disc-stack .meta .t.renamed{animation:utRenamed .4s ease}
@keyframes utRenamed{0%{box-shadow:0 0 0 2px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}
.disc-stack .meta .t.shake{animation:utShake .3s ease}
@keyframes utShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.shelf .disc-stack{cursor:grab}
.shelf .disc-stack.dragging{opacity:.45;cursor:grabbing}
.shelf .disc-stack.dragover{box-shadow:inset 0 3px 0 var(--accent)}
.shelf .disc-stack .stakOps{position:absolute;left:8px;right:8px;top:8px;z-index:8;display:flex;gap:4px;justify-content:flex-end;opacity:0;transform:translateY(-3px);transition:opacity .14s ease,transform .14s ease;pointer-events:none}
.shelf .disc-stack:hover .stakOps,.shelf .disc-stack:focus-within .stakOps{opacity:1;transform:none;pointer-events:auto}
.shelf .disc-stack .stakOps button{width:27px;height:27px;display:grid;place-items:center;font-size:12px;line-height:1;border-radius:6px;border:1px solid var(--line-strong);background:linear-gradient(var(--keycap-top),var(--keycap-bot));color:var(--txt);box-shadow:var(--well);cursor:pointer}
.shelf .disc-stack .stakOps button:hover{border-color:var(--accent);color:var(--accent)}
.shelf .disc-stack .stakOps button.danger:hover{border-color:var(--danger);color:var(--danger)}
.vgrid .disc[draggable="true"]{cursor:grab}
.vgrid .disc.dragging{opacity:.5}
.disc-stack.dropTarget{box-shadow:0 0 0 2px var(--accent),0 16px 42px -14px var(--glow);transform:scale(1.03);transition:transform .12s ease}
.disc-stack.dropReject{box-shadow:0 0 0 2px var(--danger);animation:utShake .3s ease}
#stakPick{position:fixed;z-index:85;display:none;flex-direction:column;gap:8px;width:min(280px,86vw);max-height:50vh;overflow:auto;padding:12px;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 22px 54px -20px rgba(0,0,0,.6),var(--well)}
#stakPick.show{display:flex}
#stakPick .spHd{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#stakPick .spItem{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:var(--panel2);font-size:13px;color:var(--txt)}
#stakPick .spItem:hover{border-color:var(--accent);color:var(--accent)}
#stakPick .spItem .spCt{margin-left:auto;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
#stakPick .spItem.smart{opacity:.5;cursor:not-allowed;pointer-events:none}
#stakPick .spItem.smart .spCt{display:none}
#stakPick .spItem.smart::after{content:"SMART";margin-left:auto;font-size:9px;letter-spacing:.08em;color:var(--accent2)}
#stakPick .empty{padding:14px;font-size:12px;color:var(--muted);text-align:center}
/* reusable multi-select picker sheet (replaces prompt()-based add flows) */
#pickerBackdrop{position:fixed;inset:0;z-index:340;background:rgba(0,0,0,.5);display:none}
#pickerBackdrop.show{display:block}
#pickerSheet{position:fixed;z-index:341;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,92vw);max-height:78vh;display:none;flex-direction:column;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 28px 70px -20px rgba(0,0,0,.7);overflow:hidden}
#pickerSheet.show{display:flex}
#pickerSheet .pkHd{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
#pickerSheet .pkHd b{font-size:14px}
#pickerSheet .pkX{cursor:pointer;color:var(--muted);font-size:15px;line-height:1}
#pickerSheet .pkX:hover{color:var(--danger)}
#pickerSheet .pkList{overflow:auto;padding:10px;display:flex;flex-direction:column;gap:5px;min-height:60px}
#pickerSheet .pkItem{display:flex;align-items:center;gap:9px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel2);cursor:pointer;font-size:13px;color:var(--txt)}
#pickerSheet .pkItem:hover{border-color:var(--accent)}
#pickerSheet .pkItem.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
#pickerSheet .pkItem .pkSub{margin-left:auto;font-size:11px;color:var(--muted)}
#pickerSheet .pkEmpty{padding:18px;text-align:center;color:var(--muted);font-size:12px}
#pickerSheet .pkFoot{display:flex;align-items:center;gap:9px;padding:11px 16px;border-top:1px solid var(--line)}
#pickerSheet .pkFoot .pkCount{font-size:12px;color:var(--muted);margin-right:auto}
.deck .empty{padding:40px;text-align:center;color:var(--muted)}
/* ===== STAK SAVE / EDIT SHEET (replaces prompt() name+rule flows) ===== */
#stakSheet{position:fixed;inset:0;z-index:340;background:rgba(0,0,0,.5);display:none;place-items:center;backdrop-filter:blur(3px)}
#stakSheet.show{display:grid}
#stakSheet .ssCard{width:min(440px,94vw);max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line-strong);border-radius:12px;padding:20px;box-shadow:0 28px 70px -20px rgba(0,0,0,.7)}
#stakSheet .ssHd{display:flex;align-items:center;gap:8px}
#stakSheet .ssHd b{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt)}
#stakSheet .ssX{margin-left:auto;cursor:pointer;color:var(--muted);width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px;line-height:1}
#stakSheet .ssX:hover{color:var(--danger);border-color:var(--danger)}
#stakSheet label.ssL{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:5px}
#stakSheet input.ssName,#stakSheet textarea.ssRule{width:100%;border:1px solid var(--line-strong);background:var(--bg);color:var(--txt);padding:9px 11px;font:14px ui-monospace,monospace;border-radius:6px;box-shadow:inset 0 1px 2px var(--inset)}
#stakSheet textarea.ssRule{min-height:52px;resize:vertical;font-size:13px}
#stakSheet input.ssName:focus,#stakSheet textarea.ssRule:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 1px 2px var(--inset),0 0 0 3px var(--glow-soft)}
#stakSheet input.ssName:disabled{opacity:.6;cursor:not-allowed}
#stakSheet .ssSeg{display:flex;gap:8px}
#stakSheet .ssSeg button{flex:1;display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);border-radius:9px;cursor:pointer;text-align:left}
#stakSheet .ssSeg button .k{font-size:12px;font-weight:800;letter-spacing:.03em}
#stakSheet .ssSeg button .d{font-size:10px;color:var(--muted);line-height:1.25}
#stakSheet .ssSeg button.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel2));box-shadow:0 0 0 1px var(--accent) inset}
#stakSheet .ssSeg button.on .k{color:var(--accent)}
#stakSheet .ssRuleWrap{display:none}
#stakSheet.smart .ssRuleWrap{display:block}
#stakSheet .ssCount{font-size:12px;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums;min-height:15px}
#stakSheet .ssFoot{display:flex;gap:9px;justify-content:flex-end;margin-top:2px}
#stakSheet .ssFoot button{padding:9px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt)}
#stakSheet .ssFoot .ssSave{background:var(--accent);border-color:var(--accent);color:#fff}
#stakSheet .ssFoot .ssSave:hover{filter:brightness(1.05)}
@media(prefers-reduced-motion:reduce){#undoToast.show{animation:none}#undoToast .utBar{transition:none}.disc-stack.deleting{animation:none}.disc-stack.restored,.libCard.restored .disc-stack,.disc-stack .meta .t.renamed,.disc-stack .meta .t.shake,.disc-stack.dropReject{animation:none}.disc-stack.dropTarget{transform:none}}
/* ADR-0018: play-page no stray scrollbar + 沉浸 modes + container-fullscreen */
#playPage{overflow:hidden}
.video-wrap:fullscreen{aspect-ratio:auto;width:100%;height:100%}
.video-wrap:-webkit-full-screen{aspect-ratio:auto;width:100%;height:100%}
/* (retired pre-unification body.imm1/imm2 CSS removed — it collided with the new 3-level immLevel: it hid the header + forced a 1-col grid, shrinking the level-1 player into a corner. Level 2 = body.gimm; level 1 = body.imm1 + JS npImmersed idle-fade only.) */
#immExit{position:fixed;top:14px;right:14px;z-index:260;display:none;width:40px;height:40px;border-radius:8px;align-items:center;justify-content:center;line-height:1;padding:0;background:color-mix(in srgb,#000 46%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);color:#fff;border:1px solid rgba(255,255,255,.28);cursor:pointer;transition:opacity .25s,background .16s,transform .16s,box-shadow .16s}
#immExit:hover{background:color-mix(in srgb,#000 60%,transparent);transform:scale(1.1);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent),0 14px 34px -10px #000}
#immExit svg{width:18px;height:18px}
/* 沉浸『返回影像庫』鈕(左上角,玻璃 + ‹ 圖示 + 文字);只在沉浸『播放』出現,點擊回沉浸影像庫且不中斷播放 */
#xBack{position:fixed;top:14px;left:16px;z-index:260;display:none;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:8px;line-height:1;
  background:color-mix(in srgb,#000 44%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  color:#fff;border:1px solid rgba(255,255,255,.26);cursor:pointer;transition:opacity .25s,background .16s,transform .16s,box-shadow .16s}
#xBack:hover{background:color-mix(in srgb,#000 60%,transparent);transform:scale(1.08);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 65%,transparent),0 14px 34px -10px #000}
#xBack svg{width:17px;height:17px;transform:rotate(180deg)}   /* chevron → ‹(返回);純 icon,文字走懸浮提示 */
body.pp-open #xBack{display:inline-flex}   /* 一般與沉浸播放頁都顯示「返回影像庫」 */
body.npfloat #xBack{display:none!important}   /* 已是懸浮(在影像庫裡)→ 不需返回鈕,用浮動播放器的 ⤢/✕ */
body.pp-open:not(.gimm) #xBack{left:133px;top:16px}   /* 一般播放頁:置於「左 rail 右緣 ↔ 影片左緣」間隔的中間(rail右76 / 影片左228 → 中點152,鈕寬38 → left:133);沉浸無 rail → 貼角落 left:16 */
body.hideCursor #xBack{opacity:0;pointer-events:none}
/* 播放器沉浸的眼睛(UI 自動隱藏)toggle,釘在沉浸輪撥左邊 */
#xUiEye{position:fixed;top:14px;right:62px;z-index:260;display:none;width:40px;height:40px;border-radius:8px;align-items:center;justify-content:center;line-height:1;padding:0;background:color-mix(in srgb,#000 46%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);color:#fff;border:1px solid rgba(255,255,255,.28);cursor:pointer;transition:opacity .25s,background .16s,transform .16s,box-shadow .16s}
#xUiEye:hover{background:color-mix(in srgb,#000 60%,transparent);transform:scale(1.1)}
#xUiEye.on{color:var(--accent)}
#xUiEye svg{width:18px;height:18px}
body.gimm.pp-open #xUiEye{display:inline-flex}
body.hideCursor #xUiEye{opacity:0;pointer-events:none}
body.hideCursor,body.hideCursor *{cursor:none!important}
body.hideCursor #immExit,body.hideCursor #cartPill{opacity:0;pointer-events:none}
#cartPill{transition:opacity .3s ease}   /* 沉浸閒置時 打包鈕 淡出 */
.npLeft,.npSide,#queueList,.imList,.libRows,.disc-stack .dbList,#listWrap,#browseGrid,#tabLibrary,#tabBinder,#pickerSheet .pkList{scrollbar-width:none}
.npLeft::-webkit-scrollbar,.npSide::-webkit-scrollbar,#queueList::-webkit-scrollbar,.imList::-webkit-scrollbar,.libRows::-webkit-scrollbar,.disc-stack .dbList::-webkit-scrollbar,#listWrap::-webkit-scrollbar,#browseGrid::-webkit-scrollbar,#tabLibrary::-webkit-scrollbar,#tabBinder::-webkit-scrollbar,#pickerSheet .pkList::-webkit-scrollbar{width:0;height:0}
.video-wrap:fullscreen{cursor:default}
#pImm.on,#pPip.on{color:var(--accent);border-color:var(--accent)}
/* ADR-0017 import / sources modal */
.imOverlay{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.5);display:none;place-items:center;backdrop-filter:blur(3px)}
.imOverlay.show{display:grid}
.imSheet{width:min(560px,94vw);max-height:86vh;display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line-strong);box-shadow:0 24px 60px -20px var(--inset-strong);padding:18px;border-radius:10px}
.imHd{display:flex;align-items:center;justify-content:space-between}
/* 已消失影片稽核 modal */
.dlSheet{width:min(720px,94vw)}
.dlHint{font-size:12px;color:var(--muted);line-height:1.6}
.dlBody{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.dlRow{display:flex;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.dlThumb{flex:none;width:96px;height:54px;border-radius:6px;background:#0c0c12 center/cover no-repeat;border:1px solid var(--line);filter:grayscale(.55) opacity(.82)}
.dlMain{flex:1;min-width:0}
.dlMain .dlT{font-size:13px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dlMeta{font-size:11.5px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlTags{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.dlChip{font-size:10px;font-weight:700;letter-spacing:.03em;padding:1px 6px;border-radius:5px;background:var(--sel);color:var(--muted)}
.dlAside{flex:none;text-align:right;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.dlAside .dlWhen{font-size:12px;font-weight:700;color:var(--danger,#ff6b6b);font-variant-numeric:tabular-nums}
.dlAside .dlReason{font-size:10.5px;color:var(--muted)}
.dlAside .dlOpen{font-size:11px;color:var(--accent);margin-top:2px}
/* ---- account / cloud sign-in (tokens only; reuses .imOverlay/.imSheet) ---- */
/* 會員中心:登出(只有登入框)= 維持窄;登入後(.acIn)= 寬、近滿高、內部捲動的「頁面」
   (內容多 + 之後會員系統會擴增 → 不再被視窗截斷) */
.acSheet{width:min(400px,94vw)}
.acSheet.acIn{width:min(720px,96vw);max-height:92vh}
.acSheet.acIn.imSheet{padding:20px 22px}
.acSheet.acIn #acBody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:8px;margin-right:-8px}
.acForm{display:flex;flex-direction:column;gap:11px}
.acField{display:flex;flex-direction:column;gap:4px;font-size:12px}
.acField span{color:var(--muted);letter-spacing:.04em}
.acField input{padding:9px 10px;background:var(--inset);border:1px solid var(--line-strong);border-radius:7px;color:var(--txt);font-size:13px}
.acField input:focus{outline:none;border-color:var(--accent)}
.acBtns{display:flex;gap:8px;margin-top:2px}
.acStatus{font-size:12px;min-height:16px;color:var(--muted);word-break:break-word}
.acStatus.err{color:var(--danger)}
.acUser{display:flex;align-items:center;gap:11px}
.acAvatar{width:36px;height:36px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--inset);color:var(--accent);border:1px solid var(--accent);font-weight:700;font-size:16px}
.acEmail{font-size:14px;font-weight:600;word-break:break-all}
#btnAccount{display:inline-flex;align-items:center;gap:6px}
#btnAccount.on{border-color:var(--accent);color:var(--accent)}
#btnAccount .acLbl{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
#btnAccount .avDot{width:20px;height:20px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--inset);color:var(--accent);border:1px solid var(--line-strong);font-size:11px;font-weight:700;line-height:1}
#btnAccount.on .avDot{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
/* avatar dropdown menu */
.userMenu{position:fixed;z-index:330;min-width:212px;max-width:280px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 18px 44px -16px var(--inset-strong);padding:8px;display:flex;flex-direction:column;gap:6px}
.userMenu[hidden]{display:none}
.umAccount{display:flex;flex-direction:column;gap:7px;padding:4px 4px 9px;border-bottom:1px solid var(--line)}
.umUser{display:flex;align-items:center;gap:9px;min-width:0}
.umAva{width:30px;height:30px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:var(--inset);color:var(--accent);border:1px solid var(--accent);font-weight:700;font-size:13px}
.umEmail{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.umSec{display:flex;flex-direction:column;gap:4px;padding-top:2px}
.userMenu .btn{display:flex;align-items:center;gap:7px;width:100%;justify-content:flex-start;border:1px solid transparent;padding:7px 9px;border-radius:7px}
.userMenu .btn:hover{background:var(--sel);border-color:var(--line-strong)}
/* ===== NOVA glass material (phase ②): frosted surfaces + soft accent glow. Scoped to data-skin=nova; card FACES untouched (no reflection/glare). ===== */
/* body bg = flat base only — the breathing #canvasBg is the ONE background layer now (removed the redundant skin gradient = the perceived "Layer A") */
:root[data-skin="nova"] body{background:var(--bg)}
:root[data-skin="nova"][data-theme="dark"] body{background:var(--bg)}
:root[data-skin="nova"] #content{background:color-mix(in srgb,var(--panel) 72%,transparent);backdrop-filter:blur(13px) saturate(1.12);-webkit-backdrop-filter:blur(13px) saturate(1.12)}
:root[data-skin="nova"] .imSheet,
:root[data-skin="nova"] .userMenu{background:color-mix(in srgb,var(--panel) 80%,transparent);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
:root[data-skin="nova"] .panelTabs{background:color-mix(in srgb,var(--panel) 66%,transparent);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
:root[data-skin="nova"] .btn.primary{box-shadow:0 4px 18px -6px var(--glow)}
:root[data-skin="nova"] #btnAccount.on,
:root[data-skin="nova"] .panelTab.on{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent),0 5px 16px -8px var(--glow)}
.imHd b{font-size:15px;letter-spacing:.02em}
.imAdd{display:flex;gap:8px}
.imLlm{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.imLlm .imLlmL{font-size:11px;color:var(--muted);flex:0 0 auto;width:100%}
.imLlm select,.imLlm input{padding:6px 8px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);border-radius:6px;font:inherit;font-size:12px}
.imLlm #llmKey{flex:1;min-width:120px}
.imLlm #llmModel{flex:0 0 140px;min-width:0}
.imLlm .llmLock{font-size:15px;flex:0 0 auto;filter:grayscale(1);opacity:.5}
.imLlm .llmLock.on{filter:none;opacity:1}
.rvLlm{font-size:12px;color:var(--accent);border:1px solid var(--accent);border-radius:7px;padding:6px 10px;background:color-mix(in srgb,var(--accent) 8%,transparent);cursor:pointer}
.rvLlm:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)} .rvLlm:disabled{opacity:.5;cursor:default}
.imAdd input{flex:1;border:1px solid var(--line-strong);background:var(--bg);padding:8px 10px;font:13px ui-monospace,monospace;color:var(--txt);box-shadow:inset 0 1px 2px var(--inset)}
.imAdd input:focus{outline:none;border-color:var(--accent)}
/* ============================ TAG EDITOR (single + batch) ============================ */
.disc-v .tagbtn{position:absolute;top:6px;right:6px;z-index:4;width:22px;height:22px;display:grid;place-items:center;font-size:13px;line-height:1;color:var(--muted);background:color-mix(in srgb,var(--panel) 78%,transparent);border:1px solid var(--line);border-radius:5px;backdrop-filter:blur(3px);cursor:pointer;opacity:0;transition:opacity .15s,color .15s,border-color .15s}
.disc-v:hover .tagbtn,.disc-v:focus-within .tagbtn,.disc-v.sel .tagbtn{opacity:1}
.disc-v .tagbtn:hover{color:var(--accent2);border-color:var(--accent2)}
.disc-v .tagbtn:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:1px}
#tagModal{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.5);display:none;place-items:center;backdrop-filter:blur(3px)}
#tagModal.show{display:grid}
#tagModal .teSheet{width:min(460px,94vw);max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:14px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;padding:18px;box-shadow:0 24px 60px -20px var(--inset-strong),0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent)}
#tagModal .teHd{display:flex;align-items:baseline;gap:8px}
#tagModal .teHd b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt)}
#tagModal .teHd .teN{font-size:11px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
#tagModal .teHd .sp{flex:1}
#tagModal .teHd .teX{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);background:linear-gradient(var(--keycap-top),var(--keycap-bot));color:var(--muted);border-radius:6px;cursor:pointer}
#tagModal .teHd .teX:hover{color:var(--accent2);border-color:var(--accent2)}
#tagModal .teField{display:flex;flex-direction:column;gap:5px}
#tagModal .teField>label{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
#tagModal input[type=text]{width:100%;border:1px solid var(--line-strong);background:var(--bg);color:var(--txt);padding:7px 10px;font:13px ui-monospace,monospace;box-shadow:inset 0 1px 2px var(--inset);border-radius:5px}
#tagModal input[type=text]::placeholder{color:var(--muted);opacity:.7}
#tagModal input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:inset 0 1px 2px var(--inset),0 0 0 3px var(--glow-soft)}
#tagModal .teChips{display:flex;flex-wrap:wrap;gap:5px;align-items:center;border:1px solid var(--line-strong);background:var(--bg);padding:5px 6px;border-radius:5px;box-shadow:inset 0 1px 2px var(--inset)}
#tagModal .teChips:focus-within{border-color:var(--accent);box-shadow:inset 0 1px 2px var(--inset),0 0 0 3px var(--glow-soft)}
#tagModal .teChips .mchip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 8px;font-size:12px;color:var(--txt);background:color-mix(in srgb,var(--accent) 10%,var(--panel2));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:4px;animation:teChipIn .16s var(--ease)}
#tagModal .teChips .mchipX{cursor:pointer;color:var(--muted);font-size:13px;line-height:1;width:14px;text-align:center}
#tagModal .teChips .mchipX:hover{color:var(--danger)}
#tagModal .teChips input{flex:1;min-width:80px;border:0;background:transparent;color:var(--txt);padding:3px 2px;font:13px ui-monospace,monospace;box-shadow:none}
#tagModal .teChips input:focus{outline:none}
@keyframes teChipIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
#tagModal .teRow{display:flex;gap:6px;flex-wrap:wrap}
#tagModal .teChip{padding:5px 11px;font-size:12px;color:var(--txt);border:1px solid var(--line-strong);border-radius:5px;background:linear-gradient(var(--keycap-top),var(--keycap-bot));box-shadow:var(--well);cursor:pointer;transition:color .12s,border-color .12s,background .12s}
#tagModal .teChip:hover{border-color:var(--accent2)}
#tagModal .teChip.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 0 0 0 1px var(--accent)}
#tagModal .teChip.teClear{color:var(--muted)}
#tagModal .teChip.teClear.on{color:var(--txt);border-color:var(--line-strong);background:var(--sel);box-shadow:inset 0 0 0 1px var(--line-strong)}
#tagModal .teChip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
#tagModal .teFoot{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:2px;padding-top:12px;border-top:1px solid var(--line)}
#tagModal .teFoot .teHint{margin-right:auto;font-size:10.5px;color:var(--muted);letter-spacing:.03em}
#tagModal .teFoot .teHint kbd{font:600 10px ui-monospace,monospace;padding:1px 4px;border:1px solid var(--line-strong);border-bottom-width:2px;background:var(--panel2);border-radius:3px}
#tagModal #teSave:active{box-shadow:0 0 0 3px var(--glow-soft),var(--well)}
#tagModal.show .teSheet{animation:teSheetIn .22s var(--ease)}
@keyframes teSheetIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#tagModal .teChips .mchip,#tagModal.show .teSheet{animation:none}.disc-v .tagbtn{transition:none}}
@media(max-width:520px){#tagModal .teSheet{width:94vw;padding:14px}}
.imList{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;min-height:80px}
.imRow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);background:var(--panel2);border-radius:7px}
.imRow .imT{flex:1;min-width:0;font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imRow .imN{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.imRow .imRm:hover{border-color:var(--danger);color:var(--danger)}
.imRow .imSpace{flex:none;font-size:11px;padding:2px 4px;border:1px solid var(--line);border-radius:5px;background:var(--panel2);color:var(--txt)}
.imRow .imLock{flex:none;font-size:11px;opacity:.72}
.extOverlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:320}
.extOverlay.show{display:flex}
.extSheet{width:min(92vw,860px);background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.extHd{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}
.extHd .extTag{flex:1;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.extStage{aspect-ratio:16/9;background:#000}
.imFoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.imStatus{margin-left:auto;font-size:11px;color:var(--accent2);text-align:right}
.imTabs{display:flex;gap:6px}
.imTabs button{flex:1;padding:6px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--muted);font-size:12px;cursor:pointer;border-radius:6px}
.imTabs button.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.imNote{font-size:11px;color:var(--muted);line-height:1.55;padding:2px 2px 6px}
/* channel playlist picker */
.chFilter{display:block;width:100%;margin-top:6px;padding:7px 10px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);border-radius:7px;font:inherit}
.chRow{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--line);background:var(--panel2);border-radius:7px;cursor:pointer}
.chRow:hover{border-color:var(--accent)}
.chRow input{accent-color:var(--accent);width:15px;height:15px;flex:0 0 auto}
.chRow.up{border-style:dashed}
.chRow.has{opacity:.55}
.chRow .chT{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.chRow .chN{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.chBar{display:flex;gap:8px;justify-content:flex-end;padding-top:8px;position:sticky;bottom:0;background:var(--panel)}
.accRow{cursor:pointer}
.accRow .accChk{accent-color:var(--accent);flex:none}
.accRow.untag{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:color-mix(in srgb,var(--danger) 6%,var(--panel2))}
.accRow.untag .imT::after{content:" · 需標籤";color:var(--danger);font-size:10px}

/* ===== Pre-import review gate (ADR-0018) — reuses .imOverlay/.imSheet/.accRow + miniBar surface. Tokens only; no hardcoded colors. ===== */
#reviewBadge{position:fixed;left:16px;bottom:64px;z-index:55;display:none;align-items:center;gap:9px;padding:8px 10px 8px 12px;background:var(--panel);border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:8px;box-shadow:0 14px 38px -16px var(--inset-strong, rgba(0,0,0,.5));animation:rbIn .26s cubic-bezier(.3,.7,.2,1)}
#reviewBadge.show{display:inline-flex}
#reviewBadge .rbIco{color:var(--accent);display:inline-flex;line-height:0}
#reviewBadge .rbTxt{font-size:13px;color:var(--txt);font-variant-numeric:tabular-nums}
#reviewBadge .rbTxt b{color:var(--accent2);font-weight:700}
#reviewBadge button{font-size:12px;padding:4px 10px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);border-radius:6px;cursor:pointer;white-space:nowrap}
#reviewBadge button:hover{border-color:var(--accent2);color:var(--accent2)}
#reviewBadge button.rbAccept{background:color-mix(in srgb,var(--accent) 12%,var(--panel2));border-color:color-mix(in srgb,var(--accent) 45%,var(--line));color:var(--accent)}
#reviewBadge button.rbAccept:hover{background:color-mix(in srgb,var(--accent) 18%,var(--panel2))}
#reviewBadge button.rbX{padding:4px 7px;color:var(--muted)}
#reviewBadge button.rbX:hover{color:var(--danger);border-color:var(--danger)}
@keyframes rbIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#reviewBadge{animation:none}}
.rvFacets{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rvFacets .rvLbl{font-size:12px;color:var(--muted);margin-right:2px}
.rvFacets button{padding:5px 11px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--muted);font-size:12px;cursor:pointer;border-radius:6px}
.rvFacets button.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.rvSub{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rvHint{opacity:.8}
/* swipe deck (Tinder review) */
.rvMode{display:flex;gap:3px;margin-left:auto;margin-right:10px}
.rvMode button{padding:4px 10px;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;background:var(--panel2);letter-spacing:.03em}
.rvMode button.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.rvDeck{position:relative;height:min(58vh,440px);outline:none;display:flex;align-items:center;justify-content:center}
.rvCard{position:absolute;width:min(94%,580px);aspect-ratio:16/9;height:auto;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#111;box-shadow:0 22px 50px -16px var(--inset-strong);cursor:grab;touch-action:none;transition:transform .22s var(--ease),opacity .22s;will-change:transform}   /* YouTube 封面比例 16:9 */
.rvCard[data-o="0"]{z-index:3} .rvCard[data-o="1"]{transform:translateY(10px) scale(.96);opacity:.85;z-index:2} .rvCard[data-o="2"]{transform:translateY(20px) scale(.92);opacity:.6;z-index:1}
.rvCard:active{cursor:grabbing}
.rvCard .rvCov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#111}
.rvCard .rvScrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28) 0,transparent 20%,transparent 46%,rgba(0,0,0,.92) 100%)}
.rvCard .rvCardMeta{position:absolute;left:16px;right:16px;bottom:12px;z-index:2;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.85)}
.rvCard .rvg{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#ffd9ec;font-weight:700}
.rvCard .rvs{font-size:22px;font-weight:800;line-height:1.12;margin:3px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvCard .rvt{font-size:11px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rvCard .rvStamp{position:absolute;top:22px;z-index:3;font-size:22px;font-weight:900;letter-spacing:.06em;padding:4px 14px;border-radius:9px;opacity:0;border:3px solid;pointer-events:none}
.rvCard .rvStamp.yes{left:18px;color:#5fe3ab;border-color:#5fe3ab;transform:rotate(-13deg)}
.rvCard .rvStamp.no{right:18px;color:#ff7088;border-color:#ff7088;transform:rotate(13deg)}
.rvCard.flyR{transform:translateX(150%) rotate(22deg)!important;opacity:0} .rvCard.flyL{transform:translateX(-150%) rotate(-22deg)!important;opacity:0}
.rvSwipeBar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;z-index:6}
.rvSwBtn{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.32);background:rgba(18,18,22,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:20px;font-weight:800;cursor:pointer;color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);transition:transform .15s,background .15s}
.rvSwBtn.no{color:#ff7088} .rvSwBtn.yes{color:#5fe3ab} .rvSwBtn.undo{width:44px;height:44px;font-size:16px;color:#fff;opacity:.85}
.rvSwBtn:hover{transform:translateY(-2px);background:rgba(18,18,22,.62)}
.rvDoneCard{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--muted);text-align:center}
.rvDoneTxt{font-size:14px;line-height:1.6}
.rvSub b{color:var(--accent2);font-weight:700}
.rvList{display:flex;flex-direction:column;gap:7px}
.rvRow{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);background:var(--panel2);border-radius:7px;cursor:pointer}
.rvRow:hover{border-color:var(--line-strong)}
.rvRow .rvChk{flex:none;width:16px;height:16px;border:1px solid var(--line-strong);border-radius:4px;display:grid;place-items:center;font-size:11px;line-height:1;color:var(--bg);background:var(--bg)}
.rvRow[data-state="all"] .rvChk{background:var(--accent);border-color:var(--accent)}
.rvRow[data-state="all"] .rvChk::before{content:"\2713"}
.rvRow[data-state="some"] .rvChk{background:color-mix(in srgb,var(--accent) 28%,var(--bg));border-color:var(--accent)}
.rvRow[data-state="some"] .rvChk::before{content:"\2013";color:var(--accent);font-weight:800}
.rvRow[data-state="none"] .rvChk{background:var(--bg)}
.rvRow .rvName{flex:1;min-width:0;font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rvRow .rvN{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.rvProv{flex:none;font-size:10px;line-height:1;padding:3px 7px;border-radius:5px;border:1px solid var(--line);color:var(--muted);background:var(--panel)}
.rvProv.learned{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 45%,var(--line));background:color-mix(in srgb,var(--accent2) 8%,var(--panel))}
.rvProv.auto{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,var(--line));background:color-mix(in srgb,var(--accent) 12%,var(--panel));font-weight:700}   /* 標題自動預標 */
.rvCard .rvg .rvAutoTag{margin-left:6px;font-size:10px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.22);color:#fff;letter-spacing:.04em;vertical-align:middle;text-transform:none}
.rvAutoSub{color:var(--accent);font-weight:600}
.rvLearn{flex:none;font-size:11px;line-height:1;padding:4px 9px;border:1px dashed var(--line-strong);background:none;color:var(--muted);border-radius:6px;cursor:pointer}
.rvLearn:hover{border-color:var(--accent);color:var(--accent)}
.rvLearn.done{border-style:solid;color:var(--accent2);border-color:var(--accent2)}
.rvRow.untag{border-color:color-mix(in srgb,var(--danger) 45%,var(--line));background:color-mix(in srgb,var(--danger) 6%,var(--panel2))}
.rvRow.untag .rvName{color:var(--danger)}
.rvItems{display:flex;flex-direction:column;gap:4px;margin:2px 0 8px 26px}
.rvItem{display:flex;align-items:center;gap:8px;padding:5px 9px;border:1px solid var(--line);background:var(--panel);border-radius:6px;font-size:12px;cursor:pointer}
.rvItem .rvChk{width:14px;height:14px;flex:none;border:1px solid var(--line-strong);border-radius:4px;display:grid;place-items:center;font-size:10px;line-height:1;color:var(--bg);background:var(--bg)}
.rvItem[data-on="1"] .rvChk{background:var(--accent);border-color:var(--accent)}
.rvItem[data-on="1"] .rvChk::before{content:"\2713"}
.rvItem .rvTtl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--txt)}
.rvItem[data-on="0"] .rvTtl{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--danger)}
.rvFoot{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding-top:12px;flex-wrap:wrap}
.rvTotals{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rvTotals .ok{color:var(--good);font-weight:700}
.rvTotals .no{color:var(--danger);font-weight:700}
.rvFoot .rvSpace{flex:1}
.rvLearnAll{font-size:12px;padding:6px 11px;border:1px dashed var(--line-strong);background:none;color:var(--muted);border-radius:6px;cursor:pointer}
.rvLearnAll:hover{border-color:var(--accent);color:var(--accent)}
.rvCancel{font-size:13px;padding:6px 13px;border:1px solid var(--line-strong);background:var(--panel2);color:var(--txt);border-radius:6px;cursor:pointer}
.rvCancel:hover{background:var(--bg)}
.rvConfirm{font-size:13px;padding:6px 16px;border:1px solid var(--accent);background:var(--accent);color:var(--bg);border-radius:6px;cursor:pointer;font-weight:700;box-shadow:0 0 14px -3px var(--glow-soft)}
.rvConfirm:hover{filter:brightness(1.06)}
.rvConfirm[disabled]{opacity:.55;cursor:default;box-shadow:none}
.rvPending{display:none;align-items:center;gap:6px;font-size:12px;padding:5px 11px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel2));color:var(--accent2);border-radius:6px;cursor:pointer}
.rvPending.show{display:inline-flex}
.rvPending b{font-weight:700}
.rvPending:hover{border-color:var(--accent);color:var(--accent)}
.rvEmpty{font-size:12px;color:var(--muted);text-align:center;padding:22px 8px}
.rvBody{overflow:auto;display:flex;flex-direction:column;gap:7px}
/* ADR-0015: 2-sided disc cover (front title / back tracklist, 3D flip) */
.disc-stack{perspective:1100px}
.disc-stack .disc-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.disc-stack.flipped .disc-flip{transform:rotateY(180deg)}
.disc-stack .disc-front,.disc-stack .disc-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:inherit;overflow:hidden}
.disc-stack .disc-back{transform:rotateY(180deg);background:linear-gradient(160deg,var(--panel),var(--panel2));border:1px solid var(--line-strong);padding:14px 14px 10px;display:flex;flex-direction:column}
.disc-stack .disc-back .dbHd{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;flex:none}
.disc-stack .disc-back .dbList{margin:0;padding-left:20px;font-size:11px;line-height:1.5;color:var(--txt);overflow:auto;flex:1;min-height:0}
.disc-stack .disc-back .dbList li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.disc-stack .flip{position:absolute;right:42px;top:9px;z-index:7;font-size:11px;line-height:1;padding:4px 7px;border-radius:6px;background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.28);opacity:0;transition:opacity .14s}
.disc-stack:hover .flip{opacity:1}
/* library switcher (header) */
/* PROFILE / 影像庫切換器 — on-brand glass pill (frosted, accent ring + glow, custom chevron, refined type) */
/* PROFILE — 小而低調(極少更換,一般使用者只有一個);無 icon、字距統一 */
.libSwitch{margin-left:10px;-webkit-appearance:none;appearance:none;
  background-color:color-mix(in srgb,var(--bg) 50%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:9px;
  backdrop-filter:blur(10px);
  color:var(--txt);border:1px solid var(--ctl-bd);border-radius:var(--ctl-r);
  padding:4px 20px 4px 9px;font-size:11.5px;font-weight:600;letter-spacing:0;cursor:pointer;font-family:inherit;
  transition:border-color .18s ease,background-color .18s ease}
.libSwitch:hover{border-color:var(--accent)}
.libSwitch:focus{outline:none;border-color:var(--accent)}
.libSwitch option{background:var(--panel);color:var(--txt);font-weight:600;letter-spacing:.02em}
/* 影盤冊 face presets in cover editor */
.ceFaces{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ceFace{width:50px;height:30px;border-radius:5px;border:1px solid var(--line-strong);background:linear-gradient(135deg,var(--p,var(--accent)),var(--p2,var(--accent2)));overflow:hidden;cursor:pointer;padding:0}
.ceFace img{width:100%;height:100%;object-fit:cover;display:block}
.ceFace .ph{display:block;width:100%;height:100%}
.ceFaceSave{height:30px;padding:0 9px;border-radius:5px;border:1px dashed var(--line-strong);background:none;color:var(--muted);font-size:11px;cursor:pointer}
.ceFaceSave:hover{border-color:var(--accent);color:var(--accent)}
/* 懸浮 in-tab float window */
#floatHost{position:fixed;right:18px;bottom:74px;z-index:250;width:480px;background:var(--panel);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 18px 50px -16px var(--inset-strong);overflow:hidden;resize:both;min-width:230px;min-height:165px}
#floatHost .fhBar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 10px;font-size:11px;color:var(--muted);cursor:grab;background:var(--panel2);border-bottom:1px solid var(--line);user-select:none;touch-action:none}
#floatHost .fhBar button{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;padding:0 2px}
#floatHost .fhBar button:hover{color:var(--danger)}
#floatHost .fhBody{position:relative;width:100%}
#floatHost .fhBody #playerView,#floatHost .fhBody .video-wrap{width:100%}
body.floating #pPip{color:var(--accent);border-color:var(--accent)}
/* member dashboard (account modal → 會員中心) */
.dashSec{font:700 11px/1 ui-monospace,monospace;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin:16px 0 8px;opacity:.9}
.dashShareList{display:flex;flex-direction:column;gap:6px}
.dashLibList{display:flex;flex-wrap:wrap;gap:6px}
.dashShareRow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--panel2)}
.dashShareRow .dsMain{min-width:0;flex:1}
.dashShareRow .dsTitle{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashShareRow .dsMeta{font-size:11px;font-variant-numeric:tabular-nums;margin-top:1px}
.dashShareRow .dsActs{display:flex;gap:5px;flex:none}

/* ---------- CAPABILITY-MODE GATING (Phase 1) — hide authoring by mode; NO-OP for full/electron (no class match) ---------- */
/* viewer = 純播放器(分享 / 被分享):隱藏所有創作入口,只留播放 / 瀏覽 / 外觀 */
html.cap-viewer #btnSync, html.cap-viewer #btnMore, html.cap-viewer #btnAccount,
html.cap-viewer #binderNew, html.cap-viewer #btnSaveStack, html.cap-viewer #advSaveStak,
html.cap-viewer .kebab{ display:none !important; }
/* collect = 已登入網頁收藏者:只藏「需要本機 server」的創作(YouTube 抓取 / 匯入 / 來源管理);保留收藏的增刪改 */
html.cap-collect #btnSync, html.cap-collect #btnMore{ display:none !important; }

/* ---------- Phase 4: 創作者檔案編輯器 + viewer 署名 chip ---------- */
.profEdit{display:flex;flex-direction:column;gap:7px}
.profEdit .acField{display:flex;flex-direction:column;gap:3px}
.profEdit .acField span{font-size:11px;color:var(--muted)}
.profEdit .acField input{font:inherit;font-size:13px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--txt)}
#viewerByline{position:fixed;left:14px;top:14px;z-index:60;display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:var(--scrim,rgba(20,22,30,.62));color:#fff;backdrop-filter:blur(var(--blur-glass,14px));-webkit-backdrop-filter:blur(var(--blur-glass,14px));box-shadow:var(--sh-float,0 10px 30px -12px rgba(0,0,0,.5));text-decoration:none;font-size:12.5px;font-weight:600;border:1px solid rgba(255,255,255,.14);transition:transform .14s var(--ease,ease)}
#viewerByline:hover{transform:translateY(-1px)}
#viewerByline .vbAv{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:none;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16)}
#viewerByline .vbAv img{width:100%;height:100%;object-fit:cover;display:block}
#viewerByline .vbInit{font-size:13px;font-weight:800}
#viewerByline .vbTxt{white-space:nowrap;opacity:.95}