:root{--bg:#eceff3;--panel:#ffffff;--text:#1e293b;--muted:#64748b;--accent:#1d4ed8;--accent-ink:#1e40af;--accent-soft:#eff6ff;--line:#e2e8f0}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:10}
.topbar .logo{font-weight:800;letter-spacing:.08em;font-size:17px}
.topbar .logo span{color:var(--accent)}
.topbar .shoplink{margin-left:auto;color:var(--accent-ink);font-size:14px;font-weight:600;white-space:nowrap}
.topbar .search{position:relative;flex:1 1 160px;max-width:420px}
.topbar .search input{width:100%;padding:7px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;background:var(--bg);outline:none;font-family:inherit;color:inherit}
.topbar .search input:focus{border-color:var(--accent);background:#fff}
.sresults{position:absolute;top:calc(100% + 8px);left:0;right:0;min-width:260px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.14);max-height:70vh;overflow:auto;display:none;z-index:20}
.sresults.on{display:block}
.sresults a{display:flex;gap:10px;padding:8px 10px;align-items:center}
.sresults a:hover{background:var(--accent-soft)}
.sresults img{width:72px;height:44px;object-fit:cover;border-radius:6px;background:#000;flex:none}
.sresults img.portrait{width:32px;height:56px}
.sresults .st{font-size:13.5px;font-weight:600;line-height:1.35}
.sresults .sm{font-size:12px;color:var(--muted)}
.sresults .none{padding:12px;color:var(--muted);font-size:13px}
.wrap{max-width:1280px;margin:0 auto;padding:24px}
.shelf{margin-bottom:34px}
.shelf>h2{font-size:17px;font-weight:800;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;align-items:start}
.shorts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px 14px;align-items:start}
.scard .thumb{position:relative;aspect-ratio:9/16;background:#000;border-radius:12px;overflow:hidden}
.scard .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.scard .dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;padding:1px 6px;border-radius:4px;font-size:12px}
.scard h3{font-size:13.5px;margin-top:8px;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scard .meta{color:var(--muted);font-size:12px}
.scard .ch,.rec .ch{display:block;color:var(--muted);font-size:12.5px;font-weight:500;margin-top:2px}
.card .ch{display:block;color:var(--muted);font-size:13px;font-weight:500;padding:2px 12px 0}
.scard .ch:hover,.card .ch:hover,.rec .ch:hover{color:var(--text)}
.scard .thumb,.card .thumb,.rec .thumb{display:block}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:block;transition:box-shadow .15s ease}
.card:hover{box-shadow:0 4px 16px rgba(15,23,42,.08)}
.card h3,.card .meta{padding:0 12px}
.card h3{margin-top:10px}
.card .meta{padding-bottom:12px}
.card .thumb{position:relative;background:#000;overflow:hidden}
.card .thumb.landscape{aspect-ratio:16/9}
.card .thumb.portrait{aspect-ratio:9/16}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card .dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.75);color:#fff;padding:1px 6px;border-radius:4px;font-size:12px}
.card h3{font-size:14.5px;margin-top:10px;font-weight:600;line-height:1.45}
.card .meta{color:var(--muted);font-size:13px}
.watch{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px}
.watch.solo{grid-template-columns:minmax(0,1fr);max-width:900px}
@media(max-width:900px){.watch{grid-template-columns:1fr}}
.stage{background:#000;border-radius:14px;overflow:hidden;display:flex;justify-content:center}
.stage .video-js{background:#000}
.stage.landscape .video-js{width:100%;aspect-ratio:16/9;height:auto}
.stage.portrait{max-height:78vh}
.stage.portrait .video-js{height:78vh;aspect-ratio:9/16;width:auto;max-width:100%}
.vtitle{font-size:19px;font-weight:700;margin:16px 0 4px}
.vmeta{color:var(--muted);font-size:14px}
.vmeta .chlink{color:var(--accent-ink);font-weight:600}
.video-metadata{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em}
.video-metadata>.metadata-item:not([hidden]){display:inline-flex;align-items:baseline;white-space:nowrap}
.video-metadata>.metadata-item:not([hidden])~.metadata-item:not([hidden])::before{content:"·";margin-right:.5em}
.chhead{margin-bottom:22px}
.chhead h1{font-size:22px;font-weight:800}
.chhead .meta{color:var(--muted);font-size:14px}
.buybox{display:flex;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0}
.buybox .pname{font-weight:600}
.buybox .psub{font-size:13px;color:var(--muted)}
.buybtn{margin-left:auto;background:var(--accent);color:#fff;font-weight:700;padding:10px 22px;border-radius:999px;white-space:nowrap}
.buybtn:hover{background:var(--accent-ink)}
.desc{color:#3f3f46;font-size:15px;white-space:pre-wrap}
.recs h2{font-size:14px;color:var(--muted);font-weight:700;margin-bottom:12px;letter-spacing:.04em}
.rec{display:flex;gap:10px;margin-bottom:12px}
.rec .thumb{position:relative;flex:0 0 150px;border-radius:10px;overflow:hidden;background:#000}
.rec .thumb.landscape{aspect-ratio:16/9}
.rec .thumb.portrait{flex:0 0 84px;aspect-ratio:9/16}
.rec .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rec h4{font-size:13.5px;font-weight:600;line-height:1.4}
.rec .meta{font-size:12px;color:var(--muted)}
.thumb .dur{z-index:2}
.thumb video.pv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s;z-index:1}
.thumb video.pv.on{opacity:1}
.embed-body{margin:0;background:#000;height:100vh}
.embed-body .video-js{width:100vw;height:100vh}
footer{color:var(--muted);font-size:13px;text-align:center;padding:32px 0;border-top:1px solid var(--line);margin-top:40px}
.lyrics{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.lyrics-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.lyrics-head h2{font-size:16px;font-weight:800}
.lyrics-hint{color:var(--muted);font-size:12.5px}
.lyrics-now{position:sticky;top:58px;z-index:5;background:var(--panel);padding:10px 0 12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.lyrics-cur{display:inline-block;max-width:100%;font-size:22px;font-weight:700;line-height:1.4;background:linear-gradient(90deg,var(--accent) var(--fill,0%),var(--text) var(--fill,0%));-webkit-background-clip:text;background-clip:text;color:transparent}
.lyrics-next{color:var(--muted);font-size:15px;margin-top:2px;min-height:1.4em}
.lyrics-list{position:relative;list-style:none;padding:0;max-height:360px;overflow:auto}
.lyrics-line.lyrics-section-start{margin-top:1.4em}
.lyrics-line{display:flex;align-items:center;gap:8px;border-radius:8px}
.lyrics-line button{flex:1;text-align:left;background:none;border:0;padding:5px 8px;font:inherit;font-size:15px;color:var(--text);cursor:pointer;border-radius:8px}
.lyrics-line button:hover{background:var(--accent-soft)}
.lyrics-line.on button{color:var(--accent-ink);font-weight:700;background:var(--accent-soft)}
.lyrics-share{font-size:12px;color:var(--muted);padding:2px 6px;visibility:hidden}
.lyrics-line:hover .lyrics-share,.lyrics-line.on .lyrics-share{visibility:visible}
.lyrics-share:hover{color:var(--accent-ink)}
.credits{margin-top:14px;color:var(--muted);font-size:12.5px;white-space:pre-line}
.share-page{margin-left:auto;border:1px solid var(--accent);color:var(--accent-ink);background:#fff;border-radius:999px;padding:3px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.share-page:hover{background:var(--accent-soft)}
@media (hover:none){.lyrics-share{visibility:visible}}
/* 歌（有歌詞）的 karaoke 版面：桌機影片左、歌詞右欄對照（stage 是 main 直接子元素，用 grid areas 排） */
.watch.karaoke{grid-template-columns:minmax(0,1fr) 460px;grid-template-rows:auto 1fr;grid-template-areas:"stage side" "info side"}
.watch.karaoke>.stage{grid-area:stage}
.watch.karaoke>.watch-main{grid-area:info;min-width:0}
.watch.karaoke>.lyricpane{grid-area:side;min-width:0}
.watch.karaoke.ai-disclosed{grid-template-rows:auto auto 1fr;grid-template-areas:"stage side" "disclosure side" "info side"}
.watch.karaoke.ai-disclosed>.ai-disclosure{grid-area:disclosure;margin-top:-16px;align-self:start}
.ai-disclosure{font-size:12px;color:var(--muted);min-width:0}
.ai-disclosure summary{width:fit-content;cursor:pointer;padding:4px 0}
.ai-disclosure summary:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.ai-disclosure-content{margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:8px}
.ai-disclosure-content h2{font-size:13px;margin:0 0 6px}
.ai-disclosure-content p{font-size:13px;line-height:1.5;margin:0}
.watch-main>.ai-disclosure{margin:12px 0}
.watch.karaoke .lyrics{margin-top:0;position:sticky;top:70px}
.watch.karaoke .lyrics-list{max-height:calc(100vh - 330px)}
.watch.karaoke .recs{margin-top:20px}
.pip-btn{margin-left:auto;border:1px solid var(--line);color:var(--muted);background:#fff;border-radius:999px;padding:3px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pip-btn:hover{color:var(--accent-ink);border-color:var(--accent)}
.lyrics-head .pip-btn+.share-page{margin-left:0}
@media(max-width:900px){
  /* 窄螢幕改 flex 直排：影片→歌詞→標題說明；sticky 的範圍是整個 main，影片會一路黏在最上面 */
  .watch.karaoke{display:flex;flex-direction:column}
  .watch.karaoke>.stage{position:sticky;top:0;z-index:30;order:1;box-shadow:0 8px 20px rgba(15,23,42,.22)} /* 蓋過 topbar（z 10），影片真的在最上面 */
  .watch.karaoke>.lyricpane{order:2}
  .watch.karaoke>.watch-main{order:3;margin-top:18px}
  .watch.karaoke.ai-disclosed>.ai-disclosure{order:2;margin-top:-16px}
  .watch.karaoke.ai-disclosed>.lyricpane{order:3}
  .watch.karaoke.ai-disclosed>.watch-main{order:4}
  .watch.karaoke .lyrics{position:static;margin-top:18px}
  .watch.karaoke .lyrics-now{position:static;top:auto}
  .watch.karaoke .lyrics-list{max-height:56vh}
}
/* 子母畫面：影片縮成一條、歌詞放到最大 */
body.pip-on .watch.karaoke .stage{position:static;max-height:52px;opacity:.3;pointer-events:none}
body.pip-on .watch.karaoke .lyrics-list{max-height:calc(100vh - 240px)}
body.pip-on .lyrics-cur{font-size:28px}

[data-lyric-translation] { display:block; font-size:.85em; color:var(--muted, #777); padding:.25rem 0; }
[data-lyric-translation][hidden] { display:none; }
[data-translation-toggle] { cursor:pointer; margin:.5rem 0; }

.language-switch { white-space:nowrap; font-size:14px; color:var(--accent-ink); }
@media(max-width:600px) { .topbar { flex-wrap:wrap; padding:10px 16px; gap:8px; } .topbar .search { order:3; flex-basis:100%; max-width:none; } .topbar .logo { margin-right:auto; } .topbar .shoplink { margin-left:0; font-size:12px; } }

.lyrics-line { flex-wrap:wrap; column-gap:8px; row-gap:0; }
.lyrics-line > [data-lyric-translation] { flex:0 0 100%; padding:0 8px 8px; }
[data-translation-toggle] { padding:4px 12px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--accent-ink); font:inherit; font-size:13px; }