@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700;800;900&display=swap');
*{font-family:'Noto Sans Thai',sans-serif;box-sizing:border-box} 
body{background:linear-gradient(135deg,#ecfeff 0%,#f8fafc 44%,#f0fdf4 100%);color:#0f172a;min-height:100vh}
.glass{background:rgba(255,255,255,.84);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 60px rgba(2,132,199,.10)}
.card{background:#fff;border:1px solid #e2e8f0;border-radius:28px;box-shadow:0 22px 70px rgba(14,165,233,.12)}
.btn-primary{background:linear-gradient(135deg,#0284c7,#0891b2,#16a34a);color:#fff;border-radius:18px;padding:.9rem 1.3rem;font-weight:900;box-shadow:0 14px 34px rgba(2,132,199,.24);transition:.18s;border:0}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 42px rgba(2,132,199,.28)}
.btn-soft{background:#f8fafc;border:1px solid #dbeafe;border-radius:16px;padding:.82rem 1.05rem;font-weight:800;color:#0f172a;transition:.18s}.btn-soft:hover{background:#eef6ff;transform:translateY(-1px)}
.field{width:100%;border:1px solid #cbd5e1;border-radius:18px;padding:.85rem 1rem;outline:none;background:#fff;transition:.18s;color:#0f172a}.field:focus{border-color:#38bdf8;box-shadow:0 0 0 4px rgba(56,189,248,.16)}
.pill{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;padding:.42rem .84rem;background:#e0f2fe;color:#075985;font-weight:800;font-size:.85rem}.pill.green{background:#dcfce7;color:#166534}.pill.amber{background:#fef3c7;color:#92400e}.pill.rose{background:#ffe4e6;color:#9f1239}
.section-hero{border-radius:26px;padding:1.35rem;background:linear-gradient(135deg,#0284c7 0%,#0891b2 45%,#059669 100%);box-shadow:0 16px 38px rgba(2,132,199,.18);position:relative;overflow:hidden}.section-hero:after{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;border-radius:999px;background:rgba(255,255,255,.16)}
.question-card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;padding:1.15rem;box-shadow:0 10px 28px rgba(15,23,42,.035);animation:fade .28s ease both}
.emoji-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem}.emoji-option input{display:none}.emoji-box{border:2px solid #e2e8f0;border-radius:20px;padding:.9rem .5rem;text-align:center;background:#fff;transition:.2s;min-width:72px}.emoji-face{font-size:2rem;line-height:1}.emoji-label{font-size:.78rem;font-weight:900;margin-top:.35rem;color:#0f172a}.emoji-option input:checked+.emoji-box{border-width:3px;transform:translateY(-4px) scale(1.02)}.emoji-box:hover{transform:translateY(-3px)}
.emoji-option.score-5 input:checked+.emoji-box{border-color:#16a34a;background:#ecfdf5;box-shadow:0 16px 34px rgba(22,163,74,.18)}
.emoji-option.score-4 input:checked+.emoji-box{border-color:#10b981;background:#f0fdf4;box-shadow:0 16px 34px rgba(16,185,129,.17)}
.emoji-option.score-3 input:checked+.emoji-box{border-color:#facc15;background:#fefce8;box-shadow:0 16px 34px rgba(250,204,21,.18)}
.emoji-option.score-2 input:checked+.emoji-box{border-color:#fb923c;background:#fff7ed;box-shadow:0 16px 34px rgba(251,146,60,.18)}
.emoji-option.score-1 input:checked+.emoji-box{border-color:#f43f5e;background:#fff1f2;box-shadow:0 16px 34px rgba(244,63,94,.18)}
.choice-grid{display:flex;flex-wrap:wrap;gap:.75rem}.radio-card input{display:none}.radio-card span{display:inline-flex;align-items:center;border:1px solid #cbd5e1;border-radius:999px;padding:.65rem 1rem;background:#fff;transition:.18s;font-weight:700;color:#334155}.radio-card input:checked+span{border-color:#0284c7;background:#e0f2fe;color:#075985;font-weight:900;box-shadow:0 10px 24px rgba(2,132,199,.12)}.radio-card span:hover{background:#f8fafc;transform:translateY(-1px)}
.step-dot{width:14px;height:14px;border-radius:999px;background:#e2e8f0;display:inline-block;transition:.25s}.step-dot.active{width:34px;background:linear-gradient(135deg,#0284c7,#16a34a)}
.loader{position:fixed;inset:0;background:rgba(255,255,255,.76);display:none;z-index:100;align-items:center;justify-content:center}.loader.show{display:flex}.spinner{width:56px;height:56px;border-radius:999px;border:6px solid #bae6fd;border-top-color:#16a34a;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.admin-sidebar{background:linear-gradient(180deg,#075985,#0f766e);box-shadow:15px 0 40px rgba(15,23,42,.08)}.admin-link{display:block;border-radius:18px;padding:.82rem 1rem;color:white;transition:.18s}.admin-link:hover,.admin-link.active{background:rgba(255,255,255,.16)}
.table th{background:#f1f5f9;color:#334155;text-align:left;font-weight:900}.table td,.table th{padding:.9rem;border-bottom:1px solid #e2e8f0;vertical-align:top}.table tr:hover td{background:#f8fafc}
.stat-card{background:#fff;border:1px solid #e2e8f0;border-radius:26px;padding:1.35rem;box-shadow:0 16px 44px rgba(14,165,233,.08);position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;right:-35px;top:-35px;width:110px;height:110px;border-radius:999px;background:linear-gradient(135deg,rgba(14,165,233,.12),rgba(34,197,94,.12))}.stat-number{font-size:2.3rem;line-height:1;font-weight:900;margin-top:.55rem}.chart-box{height:320px}.small-chart-box{height:260px}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:768px){.emoji-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.emoji-option .box{min-width:0}.choice-grid{display:grid;grid-template-columns:1fr}.radio-card span{width:100%;justify-content:center}.mobile-stack{display:block!important}.chart-box{height:280px}.small-chart-box{height:240px}}