/* ========================================
   学习资源入口 · 设计语言对齐 angela (Liquid Glass · 深绿)
   ======================================== */
* { box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font-family: 'Segoe UI', 'Poppins', 'Roboto', 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: linear-gradient(145deg, #1a472a 0%, #0e2a1a 100%);
  color: rgba(255,255,255,0.9);
}

/* ---- 背景流动光斑（liquid 氛围） ---- */
.orb { position: fixed; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; opacity: .5; animation: orbit 20s ease-in-out infinite alternate; }
.orb.o1 { width: 360px; height: 360px; background: #3fae6b; top: -100px; left: -80px; }
.orb.o2 { width: 300px; height: 300px; background: #2f8f52; bottom: -90px; right: -70px; animation-delay: -7s; }
.orb.o3 { width: 220px; height: 220px; background: #63c989; top: 38%; right: 12%; opacity: .35; animation-delay: -13s; }
@keyframes orbit { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(44px,34px,0) scale(1.18); } }

.page { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 20px 16px 44px; }

/* ---- 通用 Glass 卡片 ---- */
.glass {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.08) 100%);
  backdrop-filter: blur(40px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-top-color: rgba(255,255,255,0.35);
  border-left-color: rgba(255,255,255,0.25);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(255,255,255,0.05);
}
.glass::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, transparent 100%);
  border-radius: 24px 24px 0 0; pointer-events: none;
}

/* ---- 顶部 Hero ---- */
.hero { display: flex; align-items: center; gap: 18px; padding: 26px 26px; margin-bottom: 26px; animation: heroIn .7s ease both; }
.hero .logo {
  width: 60px; height: 60px; flex: none; border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 800; color: #fff; position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.06) 100%);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.3);
  animation: logoFloat 4s ease-in-out infinite;
}
.hero-text h1 { font-size: 24px; letter-spacing: 1px; margin: 0; }
.hero-text p { margin: 4px 0 0; opacity: .75; font-size: 13.5px; }

/* ---- 科目卡片栅格 ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 168px; padding: 18px 16px 16px; cursor: pointer; text-decoration: none; color: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.09) 100%);
  backdrop-filter: blur(40px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(40px) saturate(1.8) brightness(1.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-top-color: rgba(255,255,255,0.38);
  border-left-color: rgba(255,255,255,0.28);
  border-radius: 24px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transition: transform .28s cubic-bezier(.2,.7,.3,1.2), box-shadow .28s, border-color .28s;
  animation: cardIn .6s ease both;
}
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 46%; background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, transparent 100%); pointer-events: none; }
.card:nth-child(1){ animation-delay: .05s } .card:nth-child(2){ animation-delay: .10s }
.card:nth-child(3){ animation-delay: .15s } .card:nth-child(4){ animation-delay: .20s }
.card:nth-child(5){ animation-delay: .25s } .card:nth-child(6){ animation-delay: .30s }
.card:nth-child(7){ animation-delay: .35s } .card:nth-child(8){ animation-delay: .40s }

.card.open:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,200,80,0.25), inset 0 1px 0 rgba(255,255,255,0.18); border-color: rgba(255,210,120,0.4); }
.card.open .icon { animation: idleFloat 4s ease-in-out infinite; }

.card .icon {
  width: 48px; height: 48px; border-radius: 15px; margin-bottom: 14px; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff;
  background: linear-gradient(160deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.06) 100%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 4px 12px rgba(0,0,0,0.2);
}
.card .name { font-size: 16.5px; font-weight: 700; letter-spacing: .5px; }
.card .desc { font-size: 12.5px; opacity: .62; margin-top: 4px; min-height: 18px; }

/* 徽标 */
.badge { position: absolute; top: 16px; right: 16px; font-size: 11px; padding: 3px 11px; border-radius: 20px; font-weight: 600; letter-spacing: .3px; }
.badge.open {
  background: linear-gradient(180deg, rgba(255,200,80,0.26) 0%, rgba(255,152,0,0.12) 100%);
  border: 1px solid rgba(255,200,80,0.45);
  border-top-color: rgba(255,220,120,0.6);
  color: #ffe9b0; backdrop-filter: blur(16px);
  box-shadow: 0 0 14px rgba(255,200,80,0.25);
}
.badge.locked { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.5); }

/* 暂未开放：减弱 + 虚线 */
.card.locked { cursor: default; opacity: .78; }
.card.locked:hover { transform: none; }
.card.locked .icon { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.5); filter: grayscale(1); }
.card.locked .name { color: rgba(255,255,255,0.6); }

/* 已开放 → 进入箭头（脉冲） */
.card .go {
  position: absolute; bottom: 14px; right: 16px; width: 26px; height: 26px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; font-size: 14px; color: #0e2a1a; font-weight: 800;
  background: linear-gradient(180deg, #ffe9b0 0%, #ffc85a 100%);
  box-shadow: 0 4px 12px rgba(255,190,70,0.4);
  animation: btnPulse 2.4s ease-in-out infinite;
}

.foot { text-align: center; margin-top: 30px; font-size: 12px; opacity: .5; position: relative; z-index: 1; }

/* ---- 动画 ---- */
@keyframes heroIn { from { opacity: 0; transform: translateY(-16px); filter: blur(6px); } }
@keyframes cardIn { from { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(5px); } }
@keyframes logoFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes idleFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes btnPulse { 0%,100% { transform: scale(1); box-shadow: 0 4px 12px rgba(255,190,70,0.4); } 50% { transform: scale(1.12); box-shadow: 0 4px 18px rgba(255,190,70,0.6); } }

/* ---- 响应式 ---- */
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card { min-height: 142px; padding: 15px 13px 14px; }
  .hero { padding: 20px 18px; }
  .hero .logo { width: 52px; height: 52px; font-size: 25px; }
  .hero-text h1 { font-size: 19px; }
  .card .desc { min-height: 16px; }
}