:root{
  --bg:#eef6ff;
  --card:#ffffff;
  --text:#0b2b47;
  --muted:#5e7a99;
  --primary:#6ea8ff;      /* ฟ้าพาสเทล */
  --primary-dark:#003366;  /* ฟ้าเข้มใช้กับตัวเลขในวงกลม */
  --chip:#dfeaff;
  --shadow:0 6px 18px rgba(0,0,0,.07);
}

*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text); background:var(--bg);
}

.site-header{ text-align:center; padding:24px 16px 8px }
.logo{ width:72px; height:72px; object-fit:contain; display:block; margin:0 auto 8px }
h1{ margin:4px 0 2px; font-size:28px }
h2{ margin:0; font-weight:500; color:var(--muted) }

.card{
  background:var(--card); width:min(720px,92%); margin:16px auto; padding:18px;
  border-radius:18px; box-shadow:var(--shadow);
}

.section-title{ margin:6px 0 10px; font-size:22px }

.mode-row{ display:flex; gap:12px; margin:8px 0 6px }
.chip{
  padding:10px 18px; border-radius:999px; border:2px solid var(--primary);
  background:#fff; color:var(--text); font-weight:600
}
.chip.active{ background:var(--chip) }

.date{ color:var(--muted); margin:6px 0 12px }

.numbers-box{
  background:#f6f9ff; border:1px solid #e5efff; border-radius:12px; padding:12px; margin:8px 0 14px;
}
.numbers-box p{ margin:6px 0 }

.primary{
  width:100%; padding:14px; font-size:16px; font-weight:700; border:none; border-radius:12px;
  background:var(--primary); color:#fff; box-shadow:var(--shadow); cursor:pointer;
}
.primary:disabled{ opacity:.55; cursor:not-allowed }

.circle-wrap{ display:flex; justify-content:center; margin:18px 0 4px }
.circle{
  width:140px; height:140px; border-radius:50%;
  background: radial-gradient(120px 120px at 30% 30%, #ffffff, #bcd8ff);
  display:grid; place-items:center; box-shadow:var(--shadow)
}
.circle span{
  font-size:54px; font-weight:800; color:var(--primary-dark); /* ตัวเลขเข้มชัด */
}
.lucky-label{ text-align:center; margin:6px 0 2px; font-weight:700 }

.quota{ text-align:center; color:var(--muted); margin-top:6px }

.disclaimer h4{ margin:8px 0 6px }
.disclaimer p{ margin:6px 0 }
.disclaimer .copyright{ color:var(--muted) }