/* Approved home design 2. Presentation only: no controls or diary logic change. */
#app[data-page="home"] {
  --home-ink: #241c16;
  --home-shadow: 0 7px 13px #71441b25, 0 2px 3px #67402018;
  padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
}
#app[data-page="home"] .top { justify-content: center; position: relative; }
#app[data-page="home"] .top .profile { position: absolute; right: 0; }
#app[data-page="home"] .brand { color: #35231c; }
#app[data-page="home"] .brand strong {
  background: none; color: #35231c; -webkit-text-fill-color: #35231c;
  text-shadow: 0 1px 0 #fff;
}
#app[data-page="home"] .welcome { text-align: center; height: auto; min-height: 83px; margin-bottom: 15px; }
#app[data-page="home"] .welcome .lead { max-width: none; color: var(--home-ink); letter-spacing: -1px; }
#app[data-page="home"] .welcome .sub { color: #735745; font-weight: 400; }
#app[data-page="home"] .headerBranch { width: 94px; height: 94px; top: 32px; right: -5px; opacity: .75; }
#app[data-page="home"] .sectionTitle { color: var(--home-ink); letter-spacing: -.5px; }
#app[data-page="home"] .featureGrid { gap: 11px; }
#app[data-page="home"] .feature {
  --tile-shadow: #67422242;
  min-height: 91px; padding: 5px 9px 5px 3px; gap: 4px;
  border: 1.5px solid #fff5d9; border-radius: 19px;
  box-shadow: inset 0 2px 2px #ffffffed, inset 1px 0 2px #ffffffb0,
    inset 0 -3px 6px #50301235, 0 6px 10px var(--tile-shadow), 0 1px 2px #fff;
  color: var(--home-ink);
}
#app[data-page="home"] .feature::before {
  z-index: -1;
  background: radial-gradient(ellipse at 35% -15%, #ffffffe0, transparent 54%),
    linear-gradient(165deg, #fff2 0%, transparent 48%, #00000012 100%);
  box-shadow: inset 0 0 0 1px #fff5;
}
#app[data-page="home"] .feature b {
  font-family: Arial, 'Segoe UI', sans-serif; font-size: clamp(15px, 3.65vw, 23px);
  font-weight: 800; color: #171e19; letter-spacing: -.45px;
  text-shadow: 0 1px 0 #ffffff38; min-width: 0;
}
#app[data-page="home"] .feature .chevron { color: #354235; font-size: 27px; width: 9px; flex: none; }
#app[data-page="home"] .feature-activity {
  --tile-shadow: #c28b2447;
  background: radial-gradient(ellipse at 46% 7%, #fff87e, transparent 70%), linear-gradient(120deg, #ffdd34, #ffd847 62%, #f5a81e);
}
#app[data-page="home"] .feature-baby {
  --tile-shadow: #c2687050;
  background: radial-gradient(ellipse at 52% 8%, #ffc9ce, transparent 68%), linear-gradient(120deg, #ff9fae, #f685a0 65%, #e55a7a);
}
#app[data-page="home"] .feature-tasks {
  --tile-shadow: #397fa84c;
  background: radial-gradient(ellipse at 50% 4%, #80eaff, transparent 64%), linear-gradient(115deg, #29b8fa, #33aff4 60%, #087bdf);
}
#app[data-page="home"] .feature-money {
  --tile-shadow: #197d6750;
  background: radial-gradient(ellipse at 55% 5%, #7beec6, transparent 65%), linear-gradient(115deg, #1ec8a4, #12b79d 60%, #007b6d);
}
#app[data-page="home"] .feature-meds {
  --tile-shadow: #8653af44;
  background: radial-gradient(ellipse at 52% 8%, #e4b1ff, transparent 68%), linear-gradient(120deg, #bf80f1, #b36ae7 62%, #843ace);
}
#app[data-page="home"] .feature-shopping {
  --tile-shadow: #6981404c;
  background: radial-gradient(ellipse at 50% 4%, #d8f0ad, transparent 65%), linear-gradient(120deg, #b3ce85, #9fbb73 58%, #65864b);
}
#app[data-page="home"] .feature .art,
#app[data-page="home"] .timerHero .art {
  background-size: contain !important; background-position: center !important;
  background-repeat: no-repeat !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none; margin: 0;
  filter: drop-shadow(0 4px 2px #50320f38) saturate(1.04);
}
#app[data-page="home"] .feature .art { width: clamp(50px, 16vw, 73px) !important; height: 80px !important; flex: 0 0 auto; }
#app[data-page="home"] .art-activity { background-image: url('./assets/home-activity-v8.png'); }
#app[data-page="home"] .art-baby { background-image: url('./assets/home-baby-v8.png'); }
#app[data-page="home"] .art-tasks { background-image: url('./assets/home-tasks-v8.png'); }
#app[data-page="home"] .art-money { background-image: url('./assets/home-money-v8.png'); }
#app[data-page="home"] .art-meds { background-image: url('./assets/home-meds-v8.png'); }
#app[data-page="home"] .art-shopping { background-image: url('./assets/home-shopping-v8.png'); }
#app[data-page="home"] .fx6-cookbook-feature {
  --tile-shadow: #aa5b2050;
  min-height: 92px !important; gap: 12px !important; padding: 5px 12px 5px 5px !important;
  background: radial-gradient(ellipse at 55% 4%, #ffc976, transparent 70%), linear-gradient(115deg, #ef9950, #ef9b51 55%, #c8682d);
}
#app[data-page="home"] .fx6-home-icon {
  width: 100px; height: 82px; flex: 0 0 100px; border: 0; background: url('./assets/home-cookbook-v8.png') center/contain no-repeat;
  border-radius: 0; box-shadow: none; color: transparent;
  filter: drop-shadow(0 4px 2px #63340e44);
}
#app[data-page="home"] .fx6-home-icon svg { display: none; }
#app[data-page="home"] .fx6-cookbook-feature b { color: #35210f; font-size: 21px; }
#app[data-page="home"] .fx6-cookbook-feature .chevron { color: #603b18; }
#app[data-page="home"] .timerHero {
  min-height: 144px; gap: 8px; padding: 13px 12px 13px 5px; border-radius: 22px;
  border: 1.5px solid #fff8df;
  background-image: linear-gradient(90deg, #ffe9cc50, #fff0d883 35%, #ffe6bf44 70%, #ffe0ad18), url('./assets/sunset.png');
  box-shadow: inset 0 1px 2px #fff, 0 6px 12px #92532b38;
}
#app[data-page="home"] .timerHero .art { width: 89px; height: 99px; flex-basis: 89px; background-image: url('./assets/home-cup-v8.png'); }
#app[data-page="home"] .timerCopy { flex: 1; }
#app[data-page="home"] .timerCopy>b { color: #281a11; font-size: 20px; letter-spacing: -.5px; }
#app[data-page="home"] .timerCopy .clock { color: #281a11; font-size: clamp(27px, 7vw, 42px); letter-spacing: -1px; }
#app[data-page="home"] .timerToggle {
  background: linear-gradient(140deg, #fff5e7, #f9d9ca); color: #c84448;
  box-shadow: inset 0 1px 2px #fff, 0 3px 5px #6a361b40; border-color: #fff2df;
}
#app[data-page="home"] .moreActivities {
  background: linear-gradient(140deg, #fffcf6, #f5e9d8) !important;
  border: 1px solid #fff6e7 !important; box-shadow: 0 3px 8px #88624018 !important;
  color: #5f4837 !important; border-radius: 19px !important;
}
#app[data-page="home"] .moreActivities summary { color: #6b5140; }
/* Existing full-height decoration layer: clearer leaves and corner sprays,
   never a pointer target and never inside the embedded wallet. */
#app:not([data-page="money"]) > .floatingLeaves.fx7-leaf-layer {
  display: block !important; visibility: visible !important; opacity: 1 !important;
  overflow: hidden !important; z-index: 2 !important;
}
.floatingLeaves.fx7-leaf-layer .leaf {
  width: calc(var(--leaf-size) * 1.4) !important;
  height: calc(var(--leaf-size) * 1.4) !important;
  object-fit: contain; opacity: .88 !important;
  filter: hue-rotate(var(--leaf-hue)) saturate(1.22) drop-shadow(0 1px 1px #8c3b171f);
}
.floatingLeaves.fx7-leaf-layer .leaf[style*="opacity:0.3"] { opacity: .2 !important; }
#app[data-page="home"] > .fx7-leaf-layer::before,
#app[data-page="home"] > .fx7-leaf-layer::after {
  content: ''; position: absolute; width: 132px; height: 126px;
  background: url('./assets/autumn-branch.png') center/contain no-repeat; pointer-events: none;
}
#app[data-page="home"] > .fx7-leaf-layer::before { top: -35px; left: -49px; transform: rotate(92deg); opacity: .85; }
#app[data-page="home"] > .fx7-leaf-layer::after { bottom: 70px; right: -48px; transform: rotate(-37deg); opacity: .85; }
@media (max-width: 380px) {
  #app[data-page="home"] .feature { padding-right: 6px; gap: 3px; min-height: 84px; }
  #app[data-page="home"] .feature .art { width: 16vw !important; height: 73px !important; flex-basis: auto; }
  #app[data-page="home"] .feature b { font-size: 14px; letter-spacing: -.4px; }
  #app[data-page="home"] .feature .chevron { font-size: 23px; width: 7px; }
  #app[data-page="home"] .fx6-cookbook-feature b { font-size: 19px; }
  #app[data-page="home"] .timerHero { gap: 6px; }
  #app[data-page="home"] .timerHero .art { width: 74px; height: 88px; flex-basis: 74px; }
  #app[data-page="home"] .timerCopy>b { font-size: 18px; }
  #app[data-page="home"] .timerToggle { width: 36px; height: 36px; min-width: 36px; }
}
@media (max-width: 340px) {
  #app[data-page="home"] .feature .art { width: 49px !important; }
  #app[data-page="home"] .feature b { font-size: 13px; }
  #app[data-page="home"] .timerHero .art { width: 61px; flex-basis: 61px; }
  #app[data-page="home"] .timerCopy>b { font-size: 17px; }
}
@media (min-width: 600px) {
  #app[data-page="home"] .welcome { min-height: 105px; }
  #app[data-page="home"] .headerBranch { width: 133px; height: 133px; top: 23px; right: -9px; }
  #app[data-page="home"] .featureGrid { gap: 15px; }
  #app[data-page="home"] .feature { min-height: 117px; padding: 6px 16px 6px 5px; gap: 9px; border-radius: 22px; }
  #app[data-page="home"] .feature .art { width: 98px !important; height: 104px !important; flex-basis: 98px; }
  #app[data-page="home"] .feature b { font-size: 24px; }
  #app[data-page="home"] .fx6-cookbook-feature { min-height: 113px !important; padding: 5px 18px 5px 8px !important; gap: 24px !important; }
  #app[data-page="home"] .fx6-home-icon { width: 153px; height: 101px; flex-basis: 153px; }
  #app[data-page="home"] .fx6-cookbook-feature b { font-size: 26px; }
  #app[data-page="home"] .timerHero { min-height: 177px; gap: 14px; padding: 15px; }
  #app[data-page="home"] .timerHero .art { width: 131px; height: 132px; flex-basis: 131px; }
  #app[data-page="home"] .timerCopy>b { font-size: 29px; }
  #app[data-page="home"] .timerCopy .clock { font-size: 48px; }
}