/* 电脑宽屏样式：只在 ≥1000px 且有鼠标的设备上加载（index.html 里用 media 条件引入），手机 / 平板不受影响。
   目标：像一个正常的网页——首页是卡片网格，播放页左边视频 + 控制条、右边字幕列表，弹窗居中。 */
button{cursor:pointer}

/* ---------- 首页 ---------- */
.home{max-width:1180px;padding:28px 32px 56px}
.home .top{gap:10px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.home h1{font-size:22px;margin:0}
.ibtn{padding:8px 14px;font-size:14px}
.ibtn:hover{background:var(--soft)}
.sect{font-size:16px;margin:30px 0 12px}
.list0{margin-top:14px}
.vrow{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.rowmode .vrow{display:flex;gap:16px}
.rowmode .vrow .item:hover{transform:translateY(-2px)}
.item{position:relative;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;transition:transform .12s,box-shadow .12s,border-color .12s}
.item:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0006;border-color:var(--ac)}
.item .cv{width:100%;height:auto;aspect-ratio:16/9;border-radius:0}
.item .impcv{font-size:44px}
.item .tx{padding:12px 16px 16px}
.item b{font-size:15px;line-height:1.35;margin-bottom:4px}
.item .del{position:absolute;right:8px;top:8px;background:#000a;color:#fff;opacity:0;transition:opacity .12s}
.item:hover .del{opacity:1}
.item .del:hover{background:#b91c1c;color:#fff}

/* ---------- 播放页：左右两栏 ---------- */
.app{max-width:1640px;height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 440px;grid-template-rows:auto minmax(0,1fr);column-gap:22px;padding:0 28px 22px;box-sizing:border-box}
.app>.hd{grid-column:1/-1;padding:14px 0 12px}
.hd .back{display:inline-flex;align-items:center;gap:2px;font-size:22px;padding:4px 14px 4px 10px;border:1px solid var(--line);background:var(--card);border-radius:10px;color:var(--tx)}
.hd .back::after{content:'返回';font-size:14px;margin-left:4px}
.hd .back:hover{background:var(--soft)}
.hd .ttl{text-align:left;font-size:17px;margin:0 14px}
.hd .infob{font-size:20px}
.colL,.colR{display:flex;flex-direction:column;min-width:0;min-height:0}
.colL{overflow:auto;padding-right:2px}
.colR{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.vw{width:100%;border-radius:14px;overflow:hidden}
.vw video{max-height:calc(100dvh - 310px);aspect-ratio:16/9;object-fit:contain}
.vw.onframe{max-height:calc(100dvh - 310px)}
.vw.onframe:fullscreen{max-height:100vh}
.banner,.verr{border-radius:10px;margin-top:10px}
.dock{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:10px 16px}
.dr button{min-height:58px}
.dr button:hover{background:var(--soft)}
.dr .play{flex:0 0 84px}
.tbar{border-bottom:1px solid var(--line);padding:6px 6px}
.tbar button:hover{background:var(--soft)}
.sbar{padding:8px 12px}
.lst{flex:1;min-height:0;padding:2px 0 6px}

/* ---------- 弹窗：居中的对话框，不再从底部弹出 ---------- */
.sheet{top:50%;bottom:auto;transform:translate(-50%,-50%);width:min(720px,92vw);max-height:84vh;border-radius:16px;padding-bottom:20px;box-shadow:0 24px 70px #000b}
.sheet .grip{display:none}
.mask{background:#0008;backdrop-filter:blur(2px)}

.row .meta .ed{display:inline-block;opacity:0}.row:hover .meta .ed,.row.on .meta .ed{opacity:1}

/* 右栏只有 440px：工具栏按钮换行排两排，不横向滑 */
/* 工具栏：三组，每组一行，左边是组名 */
.tbar{display:block;overflow:visible;padding:4px 10px}
.tgrp{display:flex;align-items:center;gap:4px;padding:4px 0;border-right:0}
.tgrp+.tgrp{border-top:1px dashed var(--line)}
.tgl{display:block;flex:0 0 32px;font-size:11px;color:var(--sub);letter-spacing:.06em}
.tgrp button{flex:1 1 0;min-width:0}
/* 首页：四块一排 */
.hgroups{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hgrp{padding:14px 14px 8px}
.hgrp .ibtn:hover{background:var(--soft)}
.hgrp .ibtn.pri:hover{background:var(--ac);filter:brightness(1.1)}