/* Base */
*{box-sizing:border-box}
body{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#ffffff;
  color:#111827;
  margin:0;
}
.container{max-width:820px;margin:0 auto;padding:16px}
h1{margin:8px 0 10px;text-align:center;font-weight:800}
footer{margin:24px 0 10px;text-align:center;font-size:14px;color:#6b7280}
footer a{color:#2563eb;text-decoration:none}
footer a:hover{text-decoration:underline}

/* Top inline links */
.top-links{display:flex;gap:10px;align-items:center;justify-content:center;margin:6px 0 14px;color:#6b7280}
.top-links a{color:#2563eb;text-decoration:none}
.top-links a:hover{text-decoration:underline}

/* Countdown */
.countdown{
  display:block;text-align:center;
  font-size:clamp(40px,9vw,96px);
  font-weight:900;letter-spacing:.5px;
  margin:18px 0 10px;
}

/* Rows */
.preset-row,.custom-date,.options{
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px 0;
}
.preset-row label,.custom-date label{font-weight:600}
#datetime,select#presetSelect2025{
  padding:8px 10px;border:1px solid #d1d5db;border-radius:10px
}
.night-btn,#share-button{
  border:1px solid #d1d5db;border-radius:12px;padding:8px 12px;background:#fff;cursor:pointer
}
.night-btn:hover,#share-button:hover{background:#f3f4f6}

/* Sections */
.how-to-use,.articles{
  margin:18px 0;padding:16px;border:1px solid #e5e7eb;border-radius:14px;background:#fafbff
}
.articles ul{list-style:none;padding:0;margin:0}
.articles li{margin:6px 0}

/* Ads */
.ad-slot{margin:10px auto;max-width:970px;text-align:center}

/* Night mode */
body.night-mode{background:#0f172a;color:#e2e8f0}
body.night-mode .top-links a{color:#7dd3fc}
body.night-mode .how-to-use,body.night-mode .articles{background:#0d1322;border-color:#1b2741}
body.night-mode footer{color:#94a3b8}

/* Decorative helpers for holiday pages (snow/fireworks) */
.snowflake{position:fixed;top:-10px;color:#fff;font-size:12px;opacity:.9;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh)}}
.firework{position:fixed;width:4px;height:4px;border-radius:50%;animation:burst 900ms ease-out forwards}
@keyframes burst{0%{transform:scale(0);opacity:1}80%{transform:scale(1);opacity:.9}100%{transform:scale(0);opacity:0}}