/* ============================================================
   子女端统一 + 首页精修 v20260920-08
   作用域：#app-root.bg-slate-900 = 仅子女端（老人端是 bg-[#FFF8DC]，不会命中）
   目标：暖棕顶栏 + 客厅插画 + 柔和浅彩卡 + 大彩图标芯片 + 深棕字
   移除本文件即回滚
   ============================================================ */

/* —— 全屏插画背景（命中子女端真实外层包裹 div） —— */
#app-root.bg-slate-900 div.flex.min-h-screen.w-full.bg-gradient-to-br {
  background:
    linear-gradient(rgba(255, 248, 229, 0.62), rgba(255, 242, 208, 0.72)),
    url('/assets/memoir-gallery-room.png') center top / cover no-repeat #fff3d5 !important;
}
#app-root.bg-slate-900 .relative.z-10.flex-1 {
  background: none !important;
  min-height: 100% !important;
}

/* —— 左侧侧边栏：深底 → 暖半透，融入插画风 —— */
#app-root.bg-slate-900 div.fixed.top-0.left-0.h-full.w-72 {
  background: rgba(60, 33, 13, 0.82) !important;
  backdrop-filter: blur(10px);
  border-right: 1px solid rgba(255, 221, 170, 0.18) !important;
}
#app-root.bg-slate-900 div.fixed.top-0.left-0.h-full.w-72 .text-white\/70,
#app-root.bg-slate-900 div.fixed.top-0.left-0.h-full.w-72 .text-white {
  color: #f6e3c8 !important;
}
#app-root.bg-slate-900 div.fixed.top-0.left-0.h-full.w-72 .bg-white\/10 { background: rgba(255, 221, 170, 0.16) !important; }
#app-root.bg-slate-900 div.fixed.top-0.left-0.h-full.w-72 .bg-white\/5 { background: rgba(255, 221, 170, 0.10) !important; }

/* —— 顶栏：暖棕同源，清掉蓝色元素 —— */
#app-root.bg-slate-900 header span.text-blue-400 { color: #f3d9ad !important; }
#app-root.bg-slate-900 header .bg-gradient-to-br {
  background-image: linear-gradient(145deg, #c98a4b, #9a5a24) !important;
  box-shadow: 0 4px 12px rgba(122, 62, 20, 0.35) !important;
}

/* —— 背景装饰光斑：teal/emerald → 暖琥珀 —— */
#app-root.bg-slate-900 .absolute.inset-0.opacity-15 .bg-teal-400,
#app-root.bg-slate-900 .absolute.inset-0.opacity-15 .bg-emerald-400 { background-color: #e0a96d !important; }

/* —— 首页布局：内容上移贴近顶栏（同目标稿） —— */
#app-root.bg-slate-900 main:has(h2.text-white.mb-4) {
  justify-content: flex-start !important;
  padding-top: clamp(16px, 2.8vh, 34px) !important;
  position: relative !important;
}

/* —— 首页大标题：深棕 + 橙色笔刷短线 —— */
#app-root.bg-slate-900 main h2.text-white.mb-4 {
  color: #6b3a12 !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.65) !important;
  font-size: clamp(34px, 3vw, 50px) !important;
  font-weight: 900 !important;
  margin: 0 0 8px !important;
}
#app-root.bg-slate-900 main h2.text-white.mb-4::after {
  content: "";
  display: block;
  width: 128px; height: 8px;
  margin: 9px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #e68018 25%, #9b4a1d 75%, transparent);
  opacity: 0.75;
}

/* —— 首页副标题：单行棕字 —— */
#app-root.bg-slate-900 main p.text-white\/50 {
  color: #7e4a1e !important;
  font-size: clamp(16px, 1.15vw, 20px) !important;
  font-weight: 600 !important;
  max-width: 780px !important;
  margin-bottom: clamp(20px, 3vh, 36px) !important;
}

/* —— 左上角手写体点缀（宽屏才显示，避免压卡片） —— */
#app-root.bg-slate-900 main:has(h2.text-white.mb-4)::before {
  content: '时光不老\A回忆永远鲜活 ♥';
  white-space: pre-line;
  position: absolute;
  left: clamp(14px, 3.4vw, 64px);
  top: clamp(70px, 13vh, 150px);
  font-family: 'KaiTi', 'STKaiti', '楷体', serif;
  font-size: clamp(17px, 1.3vw, 23px);
  font-weight: 700;
  color: #8a5a2a;
  text-align: center;
  line-height: 1.55;
  transform: rotate(-8deg);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
@media (max-width: 1220px) {
  #app-root.bg-slate-900 main:has(h2.text-white.mb-4)::before { display: none; }
}

/* —— 卡片网格：加宽一点 —— */
#app-root.bg-slate-900 main:has(h2.text-white.mb-4) > .grid {
  width: min(1020px, 100%) !important;
  gap: 22px !important;
}

/* —— 卡片通用底子：白边 + 棕字 + 柔和投影 —— */
#app-root.bg-slate-900 main button.bg-gradient-to-br {
  position: relative !important;
  background-image: linear-gradient(135deg, #fffdf9 0%, #fbf1e0 100%) !important;
  border-color: rgba(255, 255, 255, 0.92) !important;
  color: #4a2a12 !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 28px -12px rgba(122, 62, 20, 0.22) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: clamp(148px, 15.5vh, 182px) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
#app-root.bg-slate-900 main button.bg-gradient-to-br:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 24px 46px -14px rgba(122, 62, 20, 0.34) !important;
}
#app-root.bg-slate-900 main button.bg-gradient-to-br > div:first-child { margin: 0 0 2px !important; }
#app-root.bg-slate-900 main button.bg-gradient-to-br h3 {
  color: #43240e !important;
  font-weight: 900 !important;
  font-size: clamp(19px, 1.3vw, 23px) !important;
  margin: 10px 0 5px !important;
}
#app-root.bg-slate-900 main button.bg-gradient-to-br p {
  color: rgba(74, 42, 18, 0.66) !important;
  font-size: clamp(13px, 0.92vw, 16px) !important;
  line-height: 1.5 !important;
  max-width: calc(100% - 48px) !important;
}

/* —— 卡片图标：大号彩色圆角芯片（插画风图标近似） —— */
#app-root.bg-slate-900 main button.bg-gradient-to-br svg {
  width: 54px !important;
  height: 54px !important;
  padding: 12px !important;
  border-radius: 15px !important;
  color: #fff !important;
  stroke-width: 2.2 !important;
  background: linear-gradient(145deg, #a78bfa, #8b5cf6) !important;
  box-shadow: 0 8px 16px -6px rgba(139, 92, 246, 0.45) !important;
}
#app-root.bg-slate-900 main .grid > button:nth-child(2) svg { background: linear-gradient(145deg, #60a5fa, #3b82f6) !important; box-shadow: 0 8px 16px -6px rgba(59, 130, 246, 0.45) !important; }
#app-root.bg-slate-900 main .grid > button:nth-child(3) svg { background: linear-gradient(145deg, #4ade80, #22c55e) !important; box-shadow: 0 8px 16px -6px rgba(34, 197, 94, 0.45) !important; }
#app-root.bg-slate-900 main .grid > button:nth-child(4) svg { background: linear-gradient(145deg, #fbbf24, #f59e0b) !important; box-shadow: 0 8px 16px -6px rgba(245, 158, 11, 0.45) !important; }
#app-root.bg-slate-900 main .grid > button:nth-child(5) svg { background: linear-gradient(145deg, #a8a29e, #78716c) !important; box-shadow: 0 8px 16px -6px rgba(120, 113, 108, 0.45) !important; }
#app-root.bg-slate-900 main .grid > button:nth-child(6) svg { background: linear-gradient(145deg, #fb7185, #f43f5e) !important; box-shadow: 0 8px 16px -6px rgba(244, 63, 94, 0.45) !important; }

/* —— 每张卡柔和浅彩底（目标稿同款） —— */
#app-root.bg-slate-900 main .grid > button:nth-child(1) { background-image: linear-gradient(135deg, #f7f3fc, #ebe4f8) !important; }
#app-root.bg-slate-900 main .grid > button:nth-child(2) { background-image: linear-gradient(135deg, #eff6fe, #ddecfb) !important; }
#app-root.bg-slate-900 main .grid > button:nth-child(3) { background-image: linear-gradient(135deg, #effaf2, #dcf3e6) !important; }
#app-root.bg-slate-900 main .grid > button:nth-child(4) { background-image: linear-gradient(135deg, #fff6e6, #fdeac9) !important; }
#app-root.bg-slate-900 main .grid > button:nth-child(5) { background-image: linear-gradient(135deg, #fdfbf7, #f5ede1) !important; }
#app-root.bg-slate-900 main .grid > button:nth-child(6) { background-image: linear-gradient(135deg, #fdf1f5, #fbe2ec) !important; }

/* —— 标题行右侧小圆箭头（与图标同色系） —— */
#app-root.bg-slate-900 main .grid > button::after {
  content: '›';
  position: absolute;
  right: 16px;
  top: 55%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  box-shadow: 0 6px 12px -4px rgba(139, 92, 246, 0.5);
}
#app-root.bg-slate-900 main .grid > button:nth-child(2)::after { background: linear-gradient(135deg, #60a5fa, #3b82f6); box-shadow: 0 6px 12px -4px rgba(59, 130, 246, 0.5); }
#app-root.bg-slate-900 main .grid > button:nth-child(3)::after { background: linear-gradient(135deg, #4ade80, #22c55e); box-shadow: 0 6px 12px -4px rgba(34, 197, 94, 0.5); }
#app-root.bg-slate-900 main .grid > button:nth-child(4)::after { background: linear-gradient(135deg, #fbbf24, #f59e0b); box-shadow: 0 6px 12px -4px rgba(245, 158, 11, 0.5); }
#app-root.bg-slate-900 main .grid > button:nth-child(5)::after { background: linear-gradient(135deg, #a8a29e, #78716c); box-shadow: 0 6px 12px -4px rgba(120, 113, 108, 0.5); }
#app-root.bg-slate-900 main .grid > button:nth-child(6)::after { background: linear-gradient(135deg, #fb7185, #f43f5e); box-shadow: 0 6px 12px -4px rgba(244, 63, 94, 0.5); }