:root{--sky:#e7f3ff;--sky-2:#f4f9ff;--blue:#3a7bd5;--blue-soft:#8ab6ff;--blue-deep:#1d5fb8;--gold:#d8b256;--text:#0f2a43;--white:#ffffff;--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(--sky-2),var(--sky));color:var(--text)}
.hero{text-align:center;padding:28px 16px 10px}
.logo{width:92px;height:auto;display:block;margin:0 auto 6px}
h1{font-size:34px;margin:4px 0 2px}
.subtitle{margin:0;opacity:.9}
.container{max-width:880px;margin:0 auto;padding:14px}
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin:12px 10px;border:1px solid #e7eef7}
.card.normal h2{color:var(--blue)}
.card.vip{border:1px solid rgba(216,178,86,.45);background:linear-gradient(180deg,#fffef8,#ffffff)}
.card.vip h2{color:var(--blue-deep)}
.session-switch{display:flex;gap:10px;margin:6px 2px 10px}
.chip{border:2px solid var(--blue-soft);background:#fff;color:var(--text);padding:8px 16px;border-radius:999px;font-size:16px}
.chip.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.today{margin:6px 0 10px;font-weight:600;opacity:.85}
.result{background:#f6fbff;border:1px solid #e2efff;border-radius:14px;padding:12px 14px;line-height:1.9;box-shadow:var(--shadow)}
.actions{display:flex;justify-content:center;margin:12px 0 12px}
.primary{background:var(--blue);color:#fff;border:none;padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:var(--shadow)}
.primary.deep{background:var(--blue-deep)}
.primary:disabled{opacity:.55;cursor:not-allowed}
.highlight-wrap{display:flex;flex-direction:column;align-items:center;margin:8px 0 6px}
.highlight{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px;font-weight:800;box-shadow:var(--shadow);background:radial-gradient(circle at 35% 35%, #ffffff88, #8ab6ff)}
.vipball{background:radial-gradient(circle at 35% 35%, #fff5ccaa, #d8b256)}
.highlight-label{margin-top:4px;font-weight:700}
.quota{text-align:center;margin:6px 0 0;font-weight:600}
.total{text-align:center;margin:12px 0 8px;font-weight:700}
.disclaimer h3{margin:6px 0 8px}
.disclaimer p{margin:6px 0}
.copyright{opacity:.9;margin-top:10px}