:root {
  --brand: #1f5eff;          /* primary brand color — change me */
  --brand-dark: #1747c4;
  --bg: #f4f6fb;
  --card-bg: #ffffff;
  --text: #17203a;
  --text-muted: #5c6784;
  --border: #e3e8f4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.room-layout {
  display: flex;
  align-items: stretch; /* equalizes the height of all 3 columns to the tallest */
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

.room-layout > .card {
  flex: 1 1 340px;
  max-width: 340px;
}

.room-layout > main.card {
  flex: 1 1 600px;
  max-width: 600px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(23, 32, 58, 0.08);
  max-width: 520px;
  width: 100%;
  padding: 48px 40px;
  text-align: center;
}

.room-layout > main.card {
  padding: 32px 56px;
}

/* ---- Left/right side panels: reminders & recruitment poster -------------- */

.side-panel {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
}

.panel-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.panel-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-line;
  transition: opacity 0.4s ease;
  min-height: 160px;
}

.panel-body.fading { opacity: 0; }

.panel-empty {
  color: var(--text-muted);
  font-size: 13.5px;
  text-align: center;
  white-space: normal;
}

.panel-poster-body { padding: 0; }

.poster-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

/* ---- Skeleton loading placeholders — shown until the first real response
   arrives, so the reminders/poster panels and stats grid aren't just blank
   or stuck on a generic "loading" label while waiting. ---- */

@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skel-line {
  display: inline-block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--border) 25%, #f7f9fd 50%, var(--border) 75%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}

.skel-lines { width: 100%; display: flex; flex-direction: column; gap: 10px; }

.skel-block {
  width: 100%;
  height: 180px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--border) 25%, #f7f9fd 50%, var(--border) 75%);
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}

@media (max-width: 1180px) {
  .room-layout { flex-direction: column; align-items: center; }
  /* stacked: the desktop "flex: 1 1 340px" would otherwise become a 340px minimum HEIGHT */
  .room-layout > .card { order: 2; max-width: 520px; flex: 0 0 auto; }
  .room-layout > main.card { order: 1; flex: 0 0 auto; }
  .room-layout > .card.side-panel { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-body { transition: none; }
  .skel-line, .skel-block { animation: none; }
}

/* Hide the built-in wording for a moment while this website's own text loads, so it never flashes. */
body.pt-loading [data-pt] { visibility: hidden; }

.logo-img { height: 96px; width: auto; margin: 0 auto 20px; display: block; }

h1 { font-size: 26px; margin-bottom: 12px; }

.message {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 24px;
}

.note {
  text-align: left;
  background: #fff8e6;
  #border: 1px solid #f2dfa0;
  #border-left: 4px solid #000000;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5c4a12;
}

.note-title {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  color: #7a5c00;
}

.note strong { color: #4a3a0d; }

.spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 24px;
  border: 3px solid var(--border);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Maintenance page: "under construction" illustration + elapsed timer */

.maintenance-illustration {
  max-width: 320px;
  margin: 0 auto 8px;
}

.maintenance-illustration svg {
  width: 100%;
  height: auto;
  display: block;
}

.maint-site { font-size: 14px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.maint-expected { font-size: 14.5px; font-weight: 600; color: var(--brand-dark); margin: -8px 0 18px; }
.maint-place {
  font-size: 13.5px; color: #17663a; background: #e6f4ea; border-radius: 10px;
  padding: 10px 14px; margin: 0 0 18px; line-height: 1.5;
}
.maint-site[hidden], .maint-expected[hidden], .maint-place[hidden] { display: none; }

.elapsed-timer {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 28px 0 22px;
}

.elapsed-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.elapsed-digits {
  display: flex;
  gap: 5px;
}

.elapsed-digit {
  width: 32px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}

.elapsed-label {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .elapsed-timer { gap: 10px; }
  .elapsed-digit { width: 26px; height: 36px; font-size: 17px; }
}

.captcha {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.captcha[hidden] { display: none; }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stats[hidden] { display: none; }

.room-layout > main.card .stats {
  grid-template-columns: repeat(4, 1fr); /* one row now that the card is wider */
}

.stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 8px;
}

.stat-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

.progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.progress-head #percent {
  font-weight: 700;
  color: var(--brand-dark);
  font-variant-numeric: tabular-nums;
}

.progress {
  height: 8px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), var(--brand-dark));
  border-radius: 999px;
  transition: width 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* A continuous light sweep across the whole track (not just the filled
   portion — early in a large queue the fill can sit at its 4% floor for a
   long time, where a sweep confined to the fill itself would be almost
   invisible). Real position updates land every few seconds at best, so
   without this the bar just sits there looking stalled in between; the
   sweep reads as "still working" independent of whether the width is
   currently changing. Built from transform, not background-position, so it
   stays on the compositor. */
.progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  /* Brand-blue glow rather than plain white: reads clearly over both the
     near-white unfilled track and the blue filled portion, without needing
     a blend mode to reconcile the two backgrounds. */
  background: linear-gradient(
    90deg,
    transparent,
    rgba(31, 94, 255, 0.4),
    transparent
  );
  transform: translateX(-100%);
  animation: progress-sweep 1.8s linear infinite;
}

@keyframes progress-sweep {
  to { transform: translateX(350%); }
}

.status-line {
  font-size: 14px;
  color: var(--text-muted);
  min-height: 20px;
  margin-bottom: 20px;
}

.status-line.error { color: #c0392b; }
.status-line.success { color: #1e8e4e; font-weight: 600; }

.fine-print {
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.8;
  line-height: 1.5;
}

.staff {
  margin-top: 22px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  text-align: left;
}

.staff form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.staff input {
  flex: 1 1 140px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
}

.staff button {
  flex: 0 0 auto;
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.staff button:hover { background: var(--brand-dark); }

.staff-msg {
  font-size: 12.5px;
  margin-top: 8px;
  min-height: 16px;
}

.staff-msg.err { color: #c0392b; }
.staff-msg.ok { color: #1e8e4e; font-weight: 600; }

@media (max-width: 480px) {
  .card { padding: 36px 24px; }
}

/* ---- Phones -----------------------------------------------------------------
   The desktop rules above give the middle card 56px of side padding and put the four stat boxes in
   one row; on a phone that squeezes them until they overflow the card. Tighter padding, a 2x2 grid,
   and slightly smaller type fix it. Everything here is phone-only, so the desktop layout is unchanged. */
@media (max-width: 600px) {
  body { padding: 12px; align-items: flex-start; }
  .room-layout { gap: 14px; }
  .room-layout > main.card { padding: 24px 16px; }
  .room-layout > .card.side-panel { padding: 22px 18px; }
  .logo-img { height: 76px; margin-bottom: 14px; }
  h1 { font-size: 22px; line-height: 1.25; margin-bottom: 10px; }
  .message { font-size: 14px; margin-bottom: 20px; }
  .room-layout > main.card .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .panel-body { min-height: 0; }
  .stat { padding: 14px 8px; }
  .stat-value { font-size: 22px; line-height: 1.2; }
  .stat-label { font-size: 12px; }
  .elapsed-timer { margin: 20px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .progress-bar { transition: none; }
  .progress::after { animation: none; content: none; }
}