:root{
  --bg: #0f1724;
  --card: #0b1220;
  --muted: #9aa4b2;
  --accent: #ff6b6b;
  --radius: 12px;
  --gap: 12px;
  --max-width: 980px;
  --padding: 14px;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,#071024 0%, #061726 100%);
  color:#e6eef8;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:24px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

.site-header{
  width:100%;
  max-width:var(--max-width);
  margin-bottom:12px;
  text-align:center;
}
.site-header h1{margin:0;font-size:1.15rem}
.site-header .subtitle{margin:6px 0 0;color:var(--muted);font-size:0.85rem}

/* main area */
.main{
  width:100%;
  max-width:var(--max-width);
  display:block;
}

.player-wrap{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border-radius:var(--radius);
  padding:var(--padding);
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
}

/* 保持16:9响应式播放器 */
.embed-container{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  overflow:hidden;
  border-radius:10px;
  background: #000;
}
.embed-container iframe,
.embed-container blockquote,
.embed-container video{
  position:absolute;
  top:0;left:0;width:100%;height:100%;border:0;
}

/* 元数据 */
.video-meta{
  margin-top:10px;
  color:var(--muted);
  font-size:0.92rem;
  min-height:1.1em;
}

/* 控件 */
.controls{
  display:flex;
  gap:8px;
  margin-top:12px;
  justify-content:center;
}
.btn{
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(255,255,255,0.06);
  padding:8px 12px;
  border-radius:10px;
  font-size:0.98rem;
}
.btn.primary{
  background:linear-gradient(90deg,#ff7a7a,#ff4b9e);
  color:white;
  border:0;
  box-shadow:0 6px 18px rgba(255,74,120,0.16);
}

.list-section{margin-top:14px;color:var(--muted);font-size:0.95rem}
.video-list{list-style:none;padding:8px 6px;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.video-list li{background:var(--card);padding:8px;border-radius:8px;cursor:pointer;flex:0 0 calc(50% - 8px);font-size:0.88rem}
.video-list li:hover{opacity:0.95;transform:translateY(-2px);transition:all .12s}

/* footer */
.site-footer{margin-top:14px;text-align:center;color:var(--muted);font-size:0.82rem}

/* 响应式调整 */
@media(min-width:720px){
  .video-list li{flex:0 0 calc(33.333% - 8px)}
  .site-header h1{font-size:1.3rem}
}