body{font-family:'Noto Sans Thai',system-ui,sans-serif;background:linear-gradient(180deg,#fff5f8,#fdeef4);color:#3e003e;margin:0}
.container{max-width:860px;margin:0 auto;padding:18px;text-align:center}
.logo{width:96px;display:block;margin:14px auto}
h1{color:#cc3c6c;margin:8px 0 4px;font-size:30px}
h2{color:#7a1e48;margin:0 0 16px;font-size:18px}
.card{background:#fff;border:1px solid #f7d9e6;border-radius:18px;padding:16px;box-shadow:0 6px 14px rgba(204,60,108,.08)}
h3{margin:0 0 10px;color:#6c2b47}
.subtabs{margin:6px 0 10px}
.sub-btn{background:#ffe1ee;border:1px solid #f3a6c3;padding:8px 16px;border-radius:999px;margin:0 4px;cursor:pointer}
.sub-btn.active{background:#f06292;color:#fff;border-color:#f06292}
.date{font-size:14px;color:#555;margin:6px 0}
.circle-wrap{text-align:center;margin:8px 0 12px}
.circle{width:110px;height:110px;border-radius:50%;background:#f3a6c3;display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:900;color:#fff;margin:0 auto;box-shadow:0 6px 16px rgba(0,0,0,.15)}
.circle-label{margin-top:6px;font-weight:700;color:#6c2b47}
.results{background:#fff7fb;border:1px solid #fbe2ec;border-radius:12px;padding:12px;margin:8px 0}
.results div{margin:6px 0;font-size:18px}
.action{background:#2fb39a;color:#fff;border:none;padding:12px 20px;border-radius:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.12)}
.action:disabled{background:#e2e2e2;color:#777;cursor:not-allowed}
.quota{margin-top:8px;color:#444}
.disclaimer{margin-top:16px;background:#fff;padding:14px;border-radius:12px;font-size:14px;border:1px solid #eee}