/* ============================================================================
   思阅原版 (Know How Academy) · 方案一：Power Up 阳光森林营地风 (Sunny Woodland Camp)
   备用站 (223.4.14.35) 全量真实交互主题样式表
   ============================================================================ */

/* 1. 阳光蓝天 + 暖阳云朵 + 森林草地渐变背景 */
body,
.app-shell-wrapper {
  background: linear-gradient(180deg, #38BDF8 0%, #8CE0FF 35%, #A7F3D0 70%, #4FB626 100%) !important;
}

.app-device-frame {
  background:
    radial-gradient(circle at 10% 6%, rgba(255, 250, 185, 0.95) 0%, rgba(255, 224, 102, 0.48) 13%, transparent 30%),
    radial-gradient(ellipse 140px 44px at 78% 7%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.5) 58%, transparent 72%),
    radial-gradient(ellipse 170px 48px at 38% 11%, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.42) 58%, transparent 72%),
    linear-gradient(180deg, #4DC4FF 0%, #8CE0FF 24%, #C9F6D8 55%, #8FE359 79%, #4FB626 100%) !important;
  box-shadow: 0 20px 50px rgba(20, 83, 45, 0.25) !important;
}

.app-scroll-body {
  background: transparent !important;
}

/* 2. 顶部导航栏：仅保留左上角思阅原版 Logo + 通透奶白磨砂条 */
.app-top-header {
  background: rgba(255, 255, 255, 0.92) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 2px solid rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 4px 14px rgba(14, 116, 144, 0.10) !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* 3. 全局磨砂白玻璃卡片与防右侧裁切规则 (不加 backdrop-filter 以免产生独立层叠上下文遮挡下拉菜单) */
.ls-card {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.98) !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 24px rgba(20, 83, 45, 0.10), inset 0 2px 0 #FFFFFF !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.word-book-filter-card {
  position: relative !important;
  z-index: 80 !important;
  overflow: visible !important;
}

.home-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.home-main-grid > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (min-width: 769px) {
  body.mode-landscape .home-main-grid,
  .mode-pad .home-main-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
  }
}

/* 4. 顶部学员名片：通透磨砂白玻璃卡片 + 3D 橙色打卡挑战胶囊（无 Cameron）+ 蓝绿渐变三联资产栏 */
.pu-hero-card {
  background: rgba(255, 255, 255, 0.94) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 2.5px solid #FFFFFF !important;
  border-radius: 24px !important;
  padding: 12px 12px !important;
  color: #1E293B !important;
  box-shadow: 0 12px 28px rgba(20, 83, 45, 0.12), inset 0 2px 0 #FFFFFF !important;
  position: relative;
  overflow: hidden;
}

.pu-checkin-pill-btn {
  background: linear-gradient(180deg, #FF9E2C 0%, #FF5500 100%) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #FFF3D1 !important;
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  box-shadow: 0 2.5px 0 #C23800, 0 5px 10px rgba(255, 85, 0, 0.24), inset 0 1.5px 1.5px rgba(255, 255, 255, 0.65) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease !important;
}

.pu-checkin-pill-btn:active {
  transform: translateY(2px) !important;
}

.pu-asset-bar {
  background: linear-gradient(90deg, #F0F9FF 0%, #ECFDF5 50%, #FFFBEB 100%) !important;
  border: 1.5px solid #BAE6FD !important;
  border-radius: 18px !important;
  padding: 9px 8px !important;
  margin-top: 12px !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.9) !important;
}

/* 5. 金刚区：8大核心学习模块（3D果冻水滴大图标 + 去掉小字副标题 + 放大主标题 + Jim & Jenny 探头） */
.kingkong-shell {
  position: relative !important;
  background: rgba(255, 255, 255, 0.88) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  border: 2.5px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 24px !important;
  padding: 16px 10px 14px !important;
  margin-top: 18px !important;
  box-shadow: 0 12px 26px rgba(20, 83, 45, 0.11), inset 0 2px 0 #FFFFFF !important;
}

.pu-peek-top-right {
  position: absolute !important;
  top: -30px !important;
  right: 14px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 2px !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.pu-peek-top-right img {
  height: 40px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.16)) !important;
}

.kingkong-grid-sunny {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

body.mode-landscape .kingkong-grid-sunny,
.mode-pad .kingkong-grid-sunny {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

/* 3D 高光水滴果冻模块方砖 (方案一 8色果冻方砖：竖屏圆角方砖，横屏自动拉伸为宽长方形果冻砖) */
.jelly-tile {
  position: relative !important;
  width: 100% !important;
  border-radius: 20px !important;
  padding: 11px 4px 10px !important;
  text-align: center !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  transition: transform 0.18s ease !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  user-select: none !important;
  min-width: 0 !important;
}

.jelly-tile:hover {
  transform: translateY(-2px) !important;
}

.jelly-tile:active {
  transform: scale(0.96) !important;
}

body.mode-landscape .jelly-tile,
.mode-pad .jelly-tile {
  padding: 14px 10px 13px !important;
  border-radius: 22px !important;
}

.jelly-tile::before {
  content: "" !important;
  position: absolute !important;
  top: 5px !important;
  left: 8px !important;
  width: 15px !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  border-radius: 999px !important;
  transform: rotate(-22deg) !important;
  pointer-events: none !important;
}

.jelly-tile::after {
  content: "" !important;
  position: absolute !important;
  top: 13px !important;
  left: 6px !important;
  width: 5px !important;
  height: 5px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.jelly-tile.c-green {
  background: linear-gradient(180deg, #9BE849 0%, #52B818 100%) !important;
  box-shadow: 0 5px 0 #36850B, 0 8px 16px rgba(82, 184, 24, 0.28) !important;
}
.jelly-tile.c-amber {
  background: linear-gradient(180deg, #FFD84D 0%, #F59E0B 100%) !important;
  box-shadow: 0 5px 0 #C26A03, 0 8px 16px rgba(245, 158, 11, 0.28) !important;
}
.jelly-tile.c-blue {
  background: linear-gradient(180deg, #67C8FF 0%, #1D8FE1 100%) !important;
  box-shadow: 0 5px 0 #0F62A8, 0 8px 16px rgba(29, 143, 225, 0.28) !important;
}
.jelly-tile.c-purple {
  background: linear-gradient(180deg, #C896FF 0%, #8F52E8 100%) !important;
  box-shadow: 0 5px 0 #622BB8, 0 8px 16px rgba(143, 82, 232, 0.28) !important;
}
.jelly-tile.c-orange {
  background: linear-gradient(180deg, #FF9F59 0%, #F06428 100%) !important;
  box-shadow: 0 5px 0 #B83D0D, 0 8px 16px rgba(240, 100, 40, 0.28) !important;
}
.jelly-tile.c-cyan {
  background: linear-gradient(180deg, #63E2EE 0%, #18A8BD 100%) !important;
  box-shadow: 0 5px 0 #0E7488, 0 8px 16px rgba(24, 168, 189, 0.28) !important;
}
.jelly-tile.c-red {
  background: linear-gradient(180deg, #FF857A 0%, #E54545 100%) !important;
  box-shadow: 0 5px 0 #AC2222, 0 8px 16px rgba(229, 69, 69, 0.28) !important;
}
.jelly-tile.c-pink {
  background: linear-gradient(180deg, #5CE6B5 0%, #14B884 100%) !important;
  box-shadow: 0 5px 0 #0A825B, 0 8px 16px rgba(20, 184, 132, 0.28) !important;
}

.jelly-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6) !important;
  flex-shrink: 0 !important;
}

body.mode-landscape .jelly-icon,
.mode-pad .jelly-icon {
  width: 48px !important;
  height: 48px !important;
  margin-bottom: 7px !important;
}

.jelly-icon img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18)) !important;
}

body.mode-landscape .jelly-icon img,
.mode-pad .jelly-icon img {
  width: 34px !important;
  height: 34px !important;
}

.jelly-name {
  font-size: 13.5px !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  letter-spacing: 0.3px !important;
  text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.32) !important;
  max-width: 100% !important;
}

.jelly-name.jelly-name-compact {
  font-size: 11.5px !important;
  letter-spacing: -0.3px !important;
}

body.mode-landscape .jelly-name,
.mode-pad .jelly-name {
  font-size: 16px !important;
}

body.mode-landscape .jelly-name.jelly-name-compact,
.mode-pad .jelly-name.jelly-name-compact {
  font-size: 15px !important;
  letter-spacing: 0 !important;
}

/* 6. 课程资源：方案一 3D 波浪遮阳棚 + 立体实木书架 */
.awning-shell {
  position: relative !important;
  border-radius: 26px !important;
  background: linear-gradient(180deg, #FFFDF7 0%, #FDF3DC 100%) !important;
  border: 3.5px solid #D99B52 !important;
  box-shadow: 0 12px 28px rgba(92, 45, 12, 0.18), inset 0 2px 0 #FFFFFF !important;
  overflow: visible !important;
}

.awning-canopy-wrap {
  position: relative !important;
  padding-bottom: 14px !important;
  border-radius: 22px 22px 0 0 !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #7C3F11 0%, #9A521E 100%) !important;
}

.awning-stripes {
  height: 36px !important;
  width: 100% !important;
  background: repeating-linear-gradient(
    90deg,
    #FF6A1A 0px,
    #FF6A1A 26px,
    #FFFDF9 26px,
    #FFFDF9 52px
  ) !important;
  box-shadow: inset 0 5px 10px rgba(255, 255, 255, 0.45), inset 0 -5px 10px rgba(138, 42, 0, 0.28) !important;
  border-bottom: 2px solid #D9480F !important;
}

.awning-scallops {
  height: 14px !important;
  width: 100% !important;
  background:
    radial-gradient(circle at 13px 0, #FF6A1A 13px, transparent 13.5px) 0 0 / 52px 14px repeat-x,
    radial-gradient(circle at 39px 0, #FFFDF9 13px, transparent 13.5px) 0 0 / 52px 14px repeat-x !important;
  filter: drop-shadow(0 5px 5px rgba(82, 32, 4, 0.34)) !important;
}

.awning-center-pill {
  position: absolute !important;
  top: 7px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(180deg, #FFFDF7 0%, #FFE4B5 100%) !important;
  border: 2.5px solid #B45309 !important;
  border-radius: 999px !important;
  padding: 4px 16px !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  color: #7C2D12 !important;
  box-shadow: 0 3px 0 #7C2D12, 0 6px 12px rgba(0, 0, 0, 0.22) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  z-index: 4 !important;
}

.awning-word-badge {
  position: absolute !important;
  top: 4px !important;
  right: 10px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle at 32% 28%, #FFFBEB 0%, #FDE047 45%, #F59E0B 100%) !important;
  border: 2.5px solid #FFFFFF !important;
  box-shadow: 0 4px 0 #B45309, 0 6px 12px rgba(0, 0, 0, 0.25) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 5 !important;
  transition: transform 0.15s ease !important;
}

.awning-word-badge:hover {
  transform: scale(1.06) !important;
}

.awning-word-badge .aw-icon {
  font-size: 16px !important;
  line-height: 1 !important;
}

.awning-word-badge .aw-txt {
  font-size: 8.5px !important;
  font-weight: 900 !important;
  color: #7C2D12 !important;
  margin-top: 1px !important;
}

.awning-body-inner {
  padding: 10px !important;
}

/* 左侧实木分级栏 */
.catalog-sidebar {
  background: linear-gradient(180deg, #F6E6CB 0%, #EDD5B1 100%) !important;
  border: 2.5px solid #D5A362 !important;
  border-radius: 20px !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.7), 0 6px 14px rgba(124, 63, 17, 0.12) !important;
}

.catalog-sidebar-btn {
  background: linear-gradient(180deg, #FFFDF9 0%, #F3DFC1 100%) !important;
  border: 1.5px solid #DFB782 !important;
  color: #6B3410 !important;
  border-radius: 13px !important;
  box-shadow: 0 2px 0 #CFA063 !important;
  margin-bottom: 4px !important;
}

.catalog-sidebar-btn.active-wood-pill {
  background: linear-gradient(180deg, #FF9E2C 0%, #FF5500 100%) !important;
  border: 2px solid #FFF3D1 !important;
  color: #FFFFFF !important;
  box-shadow: 0 3px 0 #B83300, 0 5px 10px rgba(255, 85, 0, 0.28) !important;
}

/* 右侧立体实木书架与绘本卡片 */
.book-card-grid {
  background: linear-gradient(180deg, #9C541D 0%, #7C3F11 100%) !important;
  border: 3.5px solid #63310C !important;
  border-radius: 22px !important;
  padding: 12px 10px 16px !important;
  box-shadow: inset 0 6px 14px rgba(43, 18, 2, 0.42), 0 8px 18px rgba(92, 45, 12, 0.18) !important;
}

.book-card-grid > .ls-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF9EB 100%) !important;
  border: 2px solid #F3D19E !important;
  border-bottom: 6px solid #D97706 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 16px rgba(43, 18, 2, 0.28) !important;
}

.ls-btn-primary {
  background: linear-gradient(180deg, #FF9E2C 0%, #FF5500 100%) !important;
  border: 1.5px solid #FFE2A8 !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 0 #C23800, 0 5px 10px rgba(255, 85, 0, 0.25) !important;
  color: #FFFFFF !important;
}

/* 7. 单词闯关闪卡：竖屏自动上下堆叠 + 词性音标与中文释义分行 + 按钮绝不折行 */
body.mode-portrait .pu-flashcard-grid,
.mode-phone .pu-flashcard-grid {
  grid-template-columns: 1fr !important;
}
.mode-phone .pu-flashcard-grid > * {
  grid-column: span 12 / span 12 !important;
}

.pu-flashcard-action-btn {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* 8. 底部导航栏：单行奶白悬浮胶囊 + 打卡大按钮 50% 绝对居中 */
.ls-bottom-nav {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  background: rgba(255, 253, 246, 0.96) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border-top: 2.5px solid #FFFFFF !important;
  box-shadow: 0 -6px 22px rgba(20, 83, 45, 0.14) !important;
  padding: 4px 6px env(safe-area-inset-bottom, 4px) !important;
  min-height: 62px !important;
}

.ls-bottom-nav .ls-nav-group {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  min-width: 0 !important;
}

.ls-bottom-nav .ls-nav-item {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.ls-bottom-nav .ls-nav-item.center-clockin {
  background: linear-gradient(180deg, #FF9E2C 0%, #FF5500 100%) !important;
  color: #FFFFFF !important;
  border: 3px solid #FFFFFF !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  margin-top: -14px !important;
  box-shadow: 0 5px 0 #C23800, 0 8px 18px rgba(255, 85, 0, 0.35) !important;
}

.ls-bottom-nav .ls-nav-item.center-clockin span {
  color: #FFFFFF !important;
  font-weight: 900 !important;
}