/* 现代简洁的链接页样式，参考示例图片 */
:root{
  --wrap-width:360px;
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  background:#f4f4f4;
  font-family: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.wrap{
  width:var(--wrap-width);
  margin-top:60px;
  text-align:center;
}
.header h1{
  margin:0;
  font-size:36px;
  font-weight:800;
  color:#222;
}
.subtitle{
  margin:6px 0 22px;
  color:#888;
  font-weight:700;
}
.links{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
}
.btn{
  display:block;
  width:100%;
  padding:12px 18px;
  border-radius:8px;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  font-size:15px;
  text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.06);
  transition:transform .14s ease, box-shadow .14s ease, filter .12s ease;
}
.btn:hover{transform:translateY(-3px); box-shadow:0 10px 20px rgba(0,0,0,0.12)}

.red{background:#e74c3c}
.orange{background:#f39c12}
.black{background:#111}
.pale{background:#f6d64a; color:#111; box-shadow:0 4px 0 rgba(0,0,0,0.06)}
.gold{background:#ffd400; color:#111}
.blue{background:#2d9bf0}

/* 小屏幕适配 */
@media (max-width:420px){
  :root{--wrap-width:320px}
  .header h1{font-size:30px}
  .btn{font-size:14px}
}