@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
:root{--sky:#93c5fd;--yellow:#fde68a;--soft:#f8fbff;--ink:#1f2937;--blue:#2563eb}
*{font-family:'Sarabun',sans-serif} body{background:linear-gradient(135deg,#eff6ff,#fff7ed);color:var(--ink)}
.navbar{background:linear-gradient(90deg,#38bdf8,#facc15);border-radius:0 0 24px 24px}.brand-title{font-weight:700;color:white;text-shadow:0 2px 8px rgba(0,0,0,.2)}
.card-soft{border:0;border-radius:22px;box-shadow:0 12px 30px rgba(37,99,235,.12);background:rgba(255,255,255,.88);backdrop-filter:blur(10px)}
.btn-pill{border-radius:999px}.table thead th{background:#dbeafe!important}.badge-round{border-radius:999px;padding:.45rem .75rem}.login-wrap{min-height:100vh;display:grid;place-items:center}.form-control,.form-select{border-radius:14px}.score-grid{display:grid;grid-template-columns:1fr repeat(5,70px);gap:8px;align-items:center}.score-head{font-weight:700;background:#e0f2fe;border-radius:12px;padding:8px;text-align:center}.score-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:10px}