.hero-nav {
  background: rgba(0,0,0,0.22);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
  transition: background 0.18s;
  opacity: 0.85;
}
.hero-prev { left: 12px; }
.hero-next { right: 12px; }
.hero-nav:active, .hero-nav:focus { background: rgba(255,107,107,0.85); outline: none; }
.hero { position: relative; }
:root{
  --bg:#0b1226;
  --fg:#fff;
  --muted:rgba(255,255,255,0.8);
  --accent:#ff6b6b;
  --max-width:960px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#081024 0%,#0b1226 60%);color:var(--fg);min-height:100vh;}

#app {
  max-width: var(--max-width);
  margin: 0 auto;
}
.safe-area{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.template-default{background:linear-gradient(180deg,#02121f 0%,#073042 100%);}

/* Keep a single template; per-holiday images are applied as hero background */

.topbar{width:100%;max-width:var(--max-width);display:flex;justify-content:space-between;align-items:center;padding:18px 20px}
.wechat .topbar{padding-top:calc(18px + env(safe-area-inset-top));}
.brand{font-weight:700}
.controls select{padding:6px 8px;border-radius:6px;border:0}
.hidden{display:none}

main{width:100%;max-width:var(--max-width);padding:20px}
.hero{display:flex;align-items:center;justify-content:center;padding:36px;border-radius:12px}
.hero.wechat-adjust{padding-top:calc(36px + env(safe-area-inset-top));}
.hero-inner{text-align:center}
.hero-inner{max-width:720px;margin:0 auto;transition:max-width .28s ease, transform .28s ease}
.hero h1{font-size:1.2rem;margin-top:8px;margin-bottom:6px;line-height:1.2}
.hero-inner h1{word-break:break-word;white-space:normal;overflow-wrap:break-word}
/* Consistent spacing between title, date and countdown for all regions */
.hero-inner p.muted{margin:0 0 8px;line-height:1.2}
.countdown{display:flex;gap:12px;justify-content:center;margin:12px 0}
.muted{opacity:0.85}

.countdown{display:flex;gap:12px;justify-content:center;margin:20px 0}
.time{background:rgba(0,0,0,0.18);padding:12px 18px;border-radius:8px;min-width:88px}
.time span{display:block;font-size:1.6rem;font-weight:700}
.time small{display:block;font-size:0.78rem;opacity:0.9}

.templates{margin-top:24px}
.section-title{font-size:1rem;margin-bottom:8px}
.template-list button{padding:8px 12px;border-radius:8px;border:0;margin-right:8px;cursor:pointer}

.footer{width:100%;max-width:var(--max-width);text-align:center;padding:16px 20px;opacity:0.8}

/* styling for bottom ad slot to align and make responsive */
.ad-bottom{max-width:980px;margin:18px auto;padding:8px;box-sizing:border-box;text-align:center}
.ad-bottom .adsbygoogle{margin:0 auto;display:block;}

/* Responsive tweaks */

@media (max-width: 768px) {
  body {
    font-size: 1.08rem;
  }
  .topbar {
    padding: 12px 8px;
    font-size: 1.08rem;
  }
  .hero {
    padding: 16px 0 18px 0;
    border-radius: 8px;
    min-height: 260px;
  }
  .hero-inner {
    max-width: 100%;
    padding: 0 6px;
  }
  .hero h1, .hero-inner h1 {
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-top: 6px;
    margin-bottom: 4px;
  }
  .hero-inner p.muted {
    font-size: 1.02rem;
    margin-bottom: 6px;
  }
  .countdown {
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0 0;
  }
  .time {
    min-width: 54px;
    padding: 7px 6px;
    border-radius: 7px;
    background: rgba(0,0,0,0.22);
    box-shadow: 0 1px 4px rgba(0,0,0,0.10);
  }
  .time span {
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }
  .time small {
    font-size: 0.72rem;
    opacity: 0.92;
  }
}

/* Visual accents for templates */
.hero{background-repeat:no-repeat;background-size:cover;background-position:center}
.hero{background-repeat:no-repeat;background-size:cover;background-position:center}

/* WeChat style constraint - ensure top safe area */
@supports (-webkit-touch-callout: none){
  .topbar{padding-top:28px}
}