:root {
  --bg: #f8f1e5;
  --bg-soft: #fdf8ef;
  --panel: #fffaf3;
  --ink: #2f2a24;
  --muted: #6f6251;
  --line: #e6d8c2;
  --accent: #4c7c66;
  --accent-soft: #dbeadf;
  --ok-bg: #d9ecdf;
  --ok-ink: #214f3e;
  --off-bg: #f7e2d5;
  --off-ink: #8a4c31;
  --shadow: 0 14px 26px rgba(109, 78, 33, 0.12);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito Sans", "Trebuchet MS", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, #ffe9c7 0%, transparent 26%),
    radial-gradient(circle at 85% 12%, #dbeee4 0%, transparent 22%),
    linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  padding: 1rem;
}

.container {
  max-width: 960px;
  margin: 0 auto;
}

.hero {
  margin-bottom: 0.95rem;
}

.eyebrow {
  margin: 0;
  color: var(--accent);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2.3vw, 1.4rem);
  letter-spacing: 0.01em;
}

.status-card,
.details-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.1rem;
  margin-top: 0.9rem;
  box-shadow: var(--shadow);
}

.status-card {
  background:
    linear-gradient(180deg, #fffdf9 0%, var(--panel) 100%),
    var(--panel);
  border-color: #d9cab1;
}

.label {
  margin: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h2 {
  margin: 0.52rem 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 5.1vw, 3.2rem);
  line-height: 1.07;
  letter-spacing: -0.01em;
}

.date {
  margin: 0.48rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 700;
}

.badges {
  margin-top: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.62rem;
}

.badge {
  min-width: 200px;
  text-align: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.76rem 1.16rem;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
}

.badge.on {
  background: var(--ok-bg);
  color: var(--ok-ink);
  border-color: #9ec8ae;
}

.badge.off {
  background: var(--off-bg);
  color: var(--off-ink);
  border-color: #dbb8a6;
}

#nextText {
  margin: 0.55rem 0 0;
  font-size: 1.12rem;
  color: #4f4336;
  font-weight: 700;
}

.details-card .next-block {
  padding-bottom: 0.95rem;
}

.action-link {
  display: inline-block;
  color: #195f70;
  background: #edf6fb;
  border: 1px solid #c2ddea;
  border-radius: 999px;
  padding: 0.65rem 1rem;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
}

.action-link:hover {
  background: #e3f0f8;
}

.actions {
  display: flex;
  justify-content: center;
  padding: 0.2rem 0 1rem;
}

.upcoming {
  border-top: 1px solid var(--line);
  padding-top: 0.95rem;
}

h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.22rem;
}

#upcomingList {
  margin: 0.72rem 0 0;
  padding-left: 1.2rem;
}

#upcomingList li {
  margin-top: 0.45rem;
  color: #4d4338;
  font-size: 1rem;
}

@media (max-width: 760px) {
  body {
    padding: 0.75rem;
  }

  .status-card,
  .details-card {
    padding: 0.9rem;
    border-radius: 14px;
  }

  h2 {
    font-size: clamp(1.75rem, 8vw, 2.3rem);
  }

  .badges {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .badge {
    width: 100%;
    min-width: 0;
    font-size: 1.03rem;
  }

  #nextText {
    font-size: 1.03rem;
  }

  .action-link {
    width: 100%;
    text-align: center;
  }

  .actions {
    padding-bottom: 0.85rem;
  }
}