:root{
  --bg:#0b0c0f; --panel:#15171c; --line:#262a32; --text:#eceef2; --dim:#8b93a1; --accent:#e8b04a;
  --gutter:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;
  -webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
[hidden]{display:none!important}

.top{padding:14px var(--gutter);padding-top:max(14px,env(safe-area-inset-top));border-bottom:1px solid var(--line)}
.brand{color:var(--text);text-decoration:none;font-weight:600;letter-spacing:.04em}

.grid{display:grid;gap:var(--gutter);padding:var(--gutter);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));max-width:1200px;margin:0 auto}
.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;color:inherit;text-decoration:none}
.card:hover{border-color:var(--accent)}
.thumb{aspect-ratio:16/9;background:#000 center/cover;display:grid;place-items:center;font-size:34px;color:#fff8}
.card .info{padding:10px 12px}
.card .info b{display:block}
.card .info small{color:var(--dim)}
.empty{padding:40px var(--gutter);color:var(--dim);text-align:center;grid-column:1/-1}

.watch{max-width:1200px;margin:0 auto;padding:var(--gutter)}
.meta h1{font-size:20px;margin:14px 0 2px}
.meta p{margin:0;color:var(--dim)}

.stage{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/9;
  user-select:none;-webkit-user-select:none;touch-action:manipulation}
.stage:fullscreen{border-radius:0;aspect-ratio:auto;width:100vw;height:100vh}
.stage video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.shade{position:absolute;inset:auto 0 0 0;height:40%;pointer-events:none;
  background:linear-gradient(transparent,#000b);opacity:0;transition:opacity .2s}
.big{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;
  background:#000a;font-size:28px;display:grid;place-items:center;transition:opacity .2s}
.playing .big{opacity:0;pointer-events:none}
.spin{position:absolute;inset:0;margin:auto;width:44px;height:44px;border-radius:50%;
  border:3px solid #fff4;border-top-color:#fff;animation:r 0.8s linear infinite;pointer-events:none}
@keyframes r{to{transform:rotate(360deg)}}
.err{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:#000d}
.seekhint{position:absolute;top:50%;transform:translateY(-50%);padding:8px 14px;border-radius:20px;background:#000a;font-size:18px;pointer-events:none}

.bar{position:absolute;left:0;right:0;bottom:0;padding:0 12px 8px;transition:opacity .2s}
.stage.idle.playing .bar,.stage.idle.playing .shade{opacity:0}
.stage.idle.playing{cursor:none}
.stage:not(.idle) .shade,.stage:not(.playing) .shade{opacity:1}
.seek{position:relative;height:22px;display:flex;align-items:center;cursor:pointer}
.seek::before{content:"";position:absolute;left:0;right:0;height:4px;border-radius:2px;background:#fff3}
.buf,.prog{position:absolute;left:0;height:4px;border-radius:2px;width:0}
.buf{background:#fff5}
.prog{background:var(--accent)}
.knob{position:absolute;left:0;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .1s}
.seek:hover .knob,.seeking .knob{transform:scale(1)}
.row{display:flex;align-items:center;gap:4px}
.row button{min-width:40px;height:40px;font-size:18px;border-radius:8px}
.row button:hover{background:#fff2}
.time{font-variant-numeric:tabular-nums;font-size:13px;margin-left:6px;color:#fffd}
.grow{flex:1}
.vol{display:flex;align-items:center}
.vol input{width:70px;accent-color:var(--accent)}
.menu{position:relative}
.menu>button{font-size:14px}
.pop{position:absolute;right:0;bottom:46px;background:#15171cf2;border:1px solid var(--line);border-radius:8px;padding:4px;min-width:84px}
.pop button{display:block;width:100%;text-align:left;font-size:14px;padding:8px 12px;height:auto;min-width:0}
.pop button.on{color:var(--accent)}

@media (hover:none){.vol input,.vol{display:none}}
@media (max-width:560px){
  .watch{padding:0}
  .stage{border-radius:0}
  .meta{padding:0 var(--gutter)}
  #pip{display:none}
}