/* ============================================================
   公共首页 index.css  ——  马卡龙 + 3D 科技感 + 卡片式
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }

:root{
  --bg1:#a1c4fd;
  --bg2:#c2e9fb;
  --bg3:#fbc2eb;
  --ink:#1f2d5a;
  --card:#ffffffcc;
}

body{
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffd6e0 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #d6e8ff 0%, transparent 60%),
    radial-gradient(800px 500px at 50% 120%, #e6d6ff 0%, transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2) 40%, #e0f7fa);
  background-attachment: fixed;
  overflow-x:hidden;
}

/* 漂浮光斑 */
body::before, body::after{
  content:""; position:fixed; border-radius:50%; filter:blur(80px); opacity:.55; z-index:0; pointer-events:none;
}
body::before{ width:380px;height:380px; background:#ffb6d5; top:-80px; left:-80px; animation:float 12s ease-in-out infinite; }
body::after { width:420px;height:420px; background:#b8e0ff; bottom:-100px; right:-100px; animation:float 15s ease-in-out infinite reverse; }
@keyframes float{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,40px)} }

/* ===== 顶部 Hero ===== */
.hero{
  position:relative; z-index:2;
  text-align:center; padding:56px 20px 20px;
}
.hero .logo{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 30px; border-radius:60px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(80,120,200,.25), inset 0 1px 0 #fff;
  font-size:22px; font-weight:700; letter-spacing:1px;
}
.hero .logo .dot{
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#ff9eb5,#ff5c8a);
  box-shadow:0 0 12px #ff9eb5;
  animation:pulse 2s infinite;
}
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

.hero h1{
  margin-top:22px; font-size:42px; letter-spacing:2px;
  background:linear-gradient(135deg,#1565C0,#7B5CFF,#FF5C8A);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 4px 20px rgba(123,92,255,.15);
}
.hero p{ margin-top:10px; color:#4a5a8a; font-size:15px; }

/* 搜索框 */
.search{
  margin:26px auto 0; max-width:620px;
  display:flex; background:#ffffffee; border-radius:60px;
  padding:8px 8px 8px 24px; box-shadow:0 12px 30px rgba(60,100,200,.18);
  backdrop-filter:blur(10px);
}
.search input{ flex:1; border:0; outline:0; font-size:15px; background:transparent; }
.search button{
  border:0; cursor:pointer; padding:10px 26px; border-radius:50px;
  background:linear-gradient(135deg,#1E7AE0,#7B5CFF); color:#fff; font-size:14px;
  box-shadow:0 6px 16px rgba(30,122,224,.4); transition:.2s;
}
.search button:hover{ transform:translateY(-2px); }

/* ===== 分类网格 ===== */
.wrap{ position:relative; z-index:2; max-width:1280px; margin:30px auto 60px; padding:0 24px; }
.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:26px;
}

/* 分类卡片（3D 悬浮） */
.cat{
  position:relative; border-radius:22px; padding:22px 22px 20px;
  background:var(--card); backdrop-filter:blur(16px);
  border:1px solid #ffffff;
  box-shadow:
    0 20px 40px rgba(80,110,200,.18),
    inset 0 1px 0 #ffffff;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s;
  transform-style:preserve-3d;
}
.cat:hover{
  transform:translateY(-8px) rotateX(4deg);
  box-shadow:0 30px 60px rgba(80,110,200,.28), inset 0 1px 0 #fff;
}
.cat-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cat-icon{
  width:52px;height:52px;border-radius:16px; font-size:28px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#fff, var(--c,#FFD6E0));
  box-shadow:0 8px 18px rgba(0,0,0,.08), inset 0 1px 0 #fff;
}
.cat-title{ flex:1; }
.cat-title h3{ font-size:18px; color:var(--ink); }
.cat-title small{ color:#7a86ad; font-size:12px; }
.cat-badge{
  font-size:11px; padding:3px 10px; border-radius:20px;
  background:linear-gradient(135deg,#1E7AE0,#7B5CFF); color:#fff;
}

/* 链接小卡片 */
.links{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.link{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-radius:12px; text-decoration:none; color:var(--ink);
  background:rgba(255,255,255,.7);
  border:1px solid #eef3fb;
  transition:.2s;
  font-size:13px;
}
.link:hover{
  background:#fff; transform:translateX(4px);
  box-shadow:0 6px 14px rgba(30,122,224,.15);
  border-color:#bcd8ff;
}
.link .li{ font-size:18px; }

/* 空态 */
.empty{ text-align:center; padding:60px; color:#7a86ad; }

/* 底部 */
footer{
  position:relative; z-index:2; text-align:center; padding:24px;
  color:#4a5a8a; font-size:12px;
}
footer a{ color:#1E7AE0; text-decoration:none; }

@media (max-width:640px){
  .hero h1{ font-size:28px; }
  .grid{ grid-template-columns:1fr; }
}