.wd-wrap { max-width: 880px; margin: 0 auto; padding: 1rem; }

/* hero */
.wd-hero { text-align: center; padding: 1.5rem 0 1rem; }
.wd-hero h1 { font-size: 2rem; margin: 0 0 .4rem; }
.wd-sub { color: #6b7280; margin: 0 0 .6rem; }
.wd-today { display: inline-block; background: #f3f4f6; color: #374151;
  padding: .3rem .9rem; border-radius: 999px; font-weight: 600; font-size: .9rem; }

/* sections */
.wd-section { margin: 1.6rem 0; }
.wd-section h2 { font-size: 1.25rem; margin: 0 0 .8rem; }
.wd-today-section h2 { color: #dc2626; }

/* grid + cards */
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }
.wd-card { display: flex; flex-direction: column; gap: .25rem;
  padding: .9rem; border: 1px solid #e5e7eb; border-radius: 14px;
  text-decoration: none; color: inherit; background: #fff; transition: .15s; }
.wd-card:hover { border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,.12); transform: translateY(-2px); }
.wd-card-today { border-color: #fca5a5; background: #fff7f7; }
.wd-flag { font-size: 1.3rem; }
.wd-name { font-weight: 700; font-size: 1.02rem; }
.wd-date { color: #6b7280; font-size: .82rem; }
.wd-desc { color: #6b7280; font-size: .82rem; line-height: 1.35; }
.wd-badge { align-self: flex-start; background: #eff6ff; color: #2563eb;
  font-weight: 700; font-size: .8rem; padding: .15rem .55rem; border-radius: 999px; }
.wd-badge-now { background: #fee2e2; color: #dc2626; }
.wd-empty { color: #9ca3af; }

/* detail */
.wd-detail { max-width: 720px; }
.wd-draft { background: #fef3c7; color: #92400e; padding: .5rem .8rem;
  border-radius: 8px; margin-bottom: .8rem; font-size: .85rem; }
.wd-back { margin-bottom: .6rem; }
.wd-back a { color: #6b7280; text-decoration: none; font-size: .9rem; }
.wd-d-hero { text-align: center; padding: 1rem 0 1.5rem; }
.wd-flag-lg { font-size: 2.4rem; }
.wd-d-hero h1 { font-size: 1.8rem; margin: .3rem 0 .2rem; }
.wd-altname { color: #9ca3af; font-size: .9rem; margin: 0 0 1rem; }

/* countdown */
.wd-countdown { margin: 1rem auto; padding: 1.4rem;
  background: linear-gradient(135deg, #2563eb, #1e40af); color: #fff;
  border-radius: 18px; max-width: 380px; }
.wd-cd-num { font-size: 3rem; font-weight: 800; line-height: 1; }
.wd-cd-now { font-size: 2rem; font-weight: 800; }
.wd-cd-clock { font-size: 1.1rem; margin-top: .4rem; font-variant-numeric: tabular-nums; opacity: .95; }
.wd-cd-date { margin-top: .5rem; font-size: .95rem; opacity: .9; }

.wd-summary { font-size: 1.05rem; color: #374151; text-align: center; margin: .5rem 0 1.5rem; }
.wd-intro { line-height: 1.75; color: #1f2937; }
.wd-intro p { margin: 0 0 1rem; }

/* related tools */
.wd-tools { margin: 2rem 0; padding: 1.2rem; background: #f9fafb; border-radius: 16px; }
.wd-tools h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
.wd-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.wd-tool-card { display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem .9rem; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 10px; text-decoration: none; color: inherit; transition: .15s; }
.wd-tool-card:hover { border-color: #22c55e; }
.wd-tool-card strong { color: #16a34a; font-size: .95rem; }
.wd-tool-card span { color: #6b7280; font-size: .8rem; }

@media (max-width: 480px) {
  .wd-hero h1 { font-size: 1.6rem; }
  .wd-cd-num { font-size: 2.4rem; }
}