
:root{
  --bg:#fde7f0;
  --card:#ffeaf2;
  --primary:#ec6aa0;
  --primary-weak:#f6b9cf;
  --text:#6b1e43;
  --accent:#2aa6a8;
  --shadow: 0 10px 20px rgba(0,0,0,.06);
  --radius:22px;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui, -apple-system, 'Noto Sans Thai', 'Sarabun', sans-serif;
  background:linear-gradient(180deg, var(--bg), #fff0f6);
  color:var(--text);
}
.hero{
  text-align:center; padding:32px 16px 12px;
}
.logo{width:92px; height:auto; display:block; margin:0 auto 8px}
h1{font-size:38px; margin:4px 0 2px}
.subtitle{margin:0; opacity:.9; font-size:18px}
.container{max-width:760px; margin:0 auto; padding:16px}
.card{
  background:var(--card); padding:18px 18px 22px; border-radius:var(--radius);
  box-shadow:var(--shadow); margin:14px 10px;
}
h2{margin:6px 0 12px; font-size:28px}
.session-switch{display:flex; gap:10px; margin:6px 2px 10px}
.chip{
  border:2px solid var(--primary-weak);
  background:#fff; color:var(--text);
  padding:8px 16px; border-radius:999px; font-size:16px;
}
.chip.active{background:var(--primary); color:#fff; border-color:var(--primary)}
.today{margin:8px 0 10px; font-weight:600; opacity:.85; letter-spacing:.3px}
.highlight-wrap{display:flex; flex-direction:column; align-items:center; margin:8px 0 14px}
/* ลดขนาดวงกลมให้เล็กลง ~15% จากเวอร์ชันปกติ */
.highlight{
  width:180px; height:180px; border-radius:50%;
  background:var(--primary); color:#fff; display:grid; place-items:center;
  font-size:64px; font-weight:800; box-shadow:var(--shadow);
}
.highlight-label{margin-top:8px; font-weight:700}
.result{
  background:#fff; border-radius:16px; padding:14px 16px; line-height:1.9; box-shadow:var(--shadow)
}
.actions{display:flex; justify-content:center; margin:16px 0 10px}
.primary{
  background:#1ea7a8; color:#fff; border:none; padding:12px 18px; border-radius:14px; font-size:18px;
  box-shadow:var(--shadow);
}
.primary:disabled{opacity:.55; cursor:not-allowed}
.quota{ text-align:center; margin:6px 0 0; font-weight:600 }
.disclaimer h3{margin:6px 0 8px}
.disclaimer p{margin:6px 0}
.copyright{opacity:.9; margin-top:10px}
@media(min-width:720px){
  .highlight{width:200px; height:200px; font-size:70px}
}
