:root{
  --bg:#0b0e14; --card:#121826; --line:#232a3d;
  --txt:#e7ecf5; --dim:#8b96a8; --acc:#7c5cff; --acc2:#00d1b2;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Segoe UI", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background:radial-gradient(1200px 800px at 20% -10%, #1a2340, var(--bg));
  color:var(--txt);
  min-height:100vh;
  display:flex; flex-direction:column;
}
header{ padding:28px 20px 10px; text-align:center; }
.logo{ font-size:26px; font-weight:700; letter-spacing:.5px; }
.dot{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg, var(--acc), var(--acc2));
  margin-right:8px; box-shadow:0 0 12px var(--acc);
}
.sub{ color:var(--dim); font-size:13px; margin-top:4px; }
main{
  width:min(860px, 94vw); margin:0 auto; flex:1;
  display:flex; flex-direction:column; gap:14px; padding:10px 0 30px;
}
.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
.row{ display:flex; gap:10px; }
#magnet{
  flex:1; background:#0d1320; border:1px solid var(--line); color:var(--txt);
  border-radius:10px; padding:12px 14px; font-size:14px; outline:none;
}
#magnet:focus{ border-color:var(--acc); }
.btn{
  border:0; border-radius:10px; padding:12px 18px;
  font-size:14px; cursor:pointer; font-weight:600;
}
.primary{ background:linear-gradient(135deg, var(--acc), #5b8cff); color:#fff; }
.ghost{ background:transparent; border:1px solid var(--line); color:var(--txt); }
.tiny{ padding:6px 12px; font-size:12px; }
.row2{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.hint{ color:var(--dim); font-size:12px; }
.title{ font-weight:600; font-size:15px; }
.meta{ color:var(--dim); font-size:12px; margin:6px 0 10px; }
.bar{ height:6px; background:#0d1320; border-radius:3px; overflow:hidden; }
.bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--acc), var(--acc2)); }
.player{ padding:10px; }
video{
  width:100%; aspect-ratio:16/9; background:#000;
  border-radius:10px; display:block;
}
.empty{ color:var(--dim); text-align:center; padding:90px 10px; font-size:13px; }
.files{ padding:12px 16px; }
.filesTitle{ font-size:12px; color:var(--dim); margin-bottom:6px; }
ul{ list-style:none; margin:0; padding:0; }
li{
  padding:8px 6px; border-bottom:1px solid var(--line);
  font-size:13px; cursor:pointer; word-break:break-all;
}
li:last-child{ border-bottom:0; }
li:hover{ color:var(--acc2); }
footer{ color:var(--dim); font-size:11px; text-align:center; padding:14px; }