/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0;
  color: #0f172a;
  background:
    radial-gradient(1200px 600px at 70% -20%, #e0f2fe 0, transparent 60%),
    radial-gradient(1000px 600px at -10% 20%, #fce7f3 0, transparent 60%),
    #f8fafc;
  line-height: 1.55;
}

.container { max-width: 1100px; margin: 0 auto; padding: 24px; text-align: center; }

.header .logo { max-height: 84px; margin-bottom: 8px; }
h1 { font-size: clamp(28px, 3vw, 40px); margin: 6px 0 8px; letter-spacing: -0.01em; }
.header p { color: #334155; margin: 0 0 6px; }
.only-once { font-size: 14px; color: #475569; background:#ffffffcc; border:1px solid #e2e8f0; padding:8px 10px; display:inline-block; border-radius:10px; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 26px;
}
@media (max-width: 780px) { .grid { grid-template-columns: 1fr; } }

.card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
  text-align: center;
}
.card:hover, .card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .10);
  border-color: #cbd5e1;
}
.card h2 { margin: 10px 0 6px; font-size: 22px; }
.card p { margin: 6px 0 0; }

.badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  margin-bottom: 6px;
}
.badge-sat { color: #075985; background: #e0f2fe; border-color: #bae6fd; }
.badge-week { color: #7c2d12; background: #ffedd5; border-color: #fed7aa; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 14px 18px;
  margin-top: 16px;
  border-radius: 14px;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  border: 0;
  background: #0ea5e9;
  background-image: linear-gradient(180deg, var(--bg, #0ea5e9), var(--bg2, #0284c7));
  box-shadow: 0 8px 20px rgba(2,132,199,.22);
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px) scale(1.01); box-shadow: 0 12px 28px rgba(2,132,199,.28); }
.btn:focus-visible { outline: 3px solid #38bdf8; outline-offset: 2px; }
.btn[aria-disabled="true"] {
  filter: grayscale(0.3) brightness(0.9);
  background: #cbd5e1 !important;
  background-image: none !important;
  color: #1f2937 !important;
  pointer-events: none;
  box-shadow: none;
}

.btn-sat { --bg:#0ea5e9; --bg2:#0284c7; }
.btn-week { --bg:#f59e0b; --bg2:#d97706; box-shadow: 0 8px 20px rgba(234,179,8,.22); }

.status { font-size: 14px; color:#475569; margin-top: 8px; }
.countdown { font-weight: 700; margin-top: 4px; color:#0f172a; }

.footer { margin-top: 28px; color: #64748b; }
.footer small { font-size: 12px; }