* { margin:0; padding:0; box-sizing:border-box; }
body { background:#000; color:#fff; font-family:'PingFang SC','Microsoft YaHei',sans-serif; height:100vh; overflow:hidden; }
a { color:inherit; text-decoration:none; }
.page { display:none; width:100%; height:100%; position:absolute; top:0; left:0; }
.page.active { display:block; }

/* 首页滑动区域 */
.swiper-wrapper {
  position:relative; width:100%; height:calc(100vh - 64px);
}
.article-card {
  position:absolute; top:0; left:0; width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:40px 24px; background-size:cover; background-position:center;
  transform: translateY(100%); transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.article-card.active { transform: translateY(0); }
.article-card.prev { transform: translateY(-100%); }
.article-card.next { transform: translateY(100%); }
.card-content {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
  border-radius: 24px; padding: 24px; width: 90%; max-height: 70%;
  overflow-y:auto; border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card-content:active { transform: scale(0.96); box-shadow:0 0 30px rgba(255,255,255,0.15); }

/* 底部导航 */
.bottom-nav {
  position:fixed; bottom:0; left:0; width:100%; height:64px;
  background: rgba(20,20,20,0.75); backdrop-filter: blur(20px);
  display:flex; justify-content:space-around; align-items:center;
  border-top:1px solid rgba(255,255,255,0.1); z-index:1000;
}
.nav-item { display:flex; flex-direction:column; align-items:center; font-size:12px; color:#aaa; transition:0.3s; }
.nav-item.active { color:#fff; transform:scale(1.1); }
.nav-item svg { width:24px; height:24px; margin-bottom:4px; }

/* 液态玻璃 */
.liquid-glass {
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.05) 100%);
  backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border-radius:20px; border:1px solid rgba(255,255,255,0.25);
  box-shadow:0 10px 30px rgba(0,0,0,0.3), inset 0 0 20px rgba(255,255,255,0.1);
  position:relative; overflow:hidden;
}
.liquid-glass::before {
  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4) 0%, transparent 60%);
  animation: liquidShift 8s infinite alternate;
}
@keyframes liquidShift { 0%{transform:translate(0,0) rotate(0)} 100%{transform:translate(10%,10%) rotate(5deg)} }

/* 水波纹 */
.ripple { position:relative; overflow:hidden; }
.ripple-effect {
  position:absolute; border-radius:50%; background:rgba(255,255,255,0.35);
  transform:scale(0); animation: ripple 0.6s linear; pointer-events:none;
}
@keyframes ripple { to { transform:scale(4); opacity:0; } }

/* 搜索栏 */
.search-bar {
  display:flex; margin:20px; background: rgba(255,255,255,0.15);
  backdrop-filter:blur(15px); border-radius:30px; padding:10px 20px;
  border:1px solid rgba(255,255,255,0.2);
}
.search-bar input { background:transparent; border:none; outline:none; color:#fff; flex:1; font-size:16px; }
.search-bar button { background:transparent; border:none; color:#fff; font-size:20px; }

/* 表单 */
.input-group { margin-bottom:20px; }
.input-group input {
  width:100%; padding:14px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.1);
  color:#fff; font-size:15px; backdrop-filter:blur(10px); outline:none;
}
.input-group input:focus { border-color:#fff; }