:root{--ink: #1a1a1a;--paper: #ffffff;--yellow: #ebeb7d;--periwinkle: #a3aefe;--pink: #ffbef0;--magenta: #b62472;--muted: #4a4a4a;--track: #f0f0f5;--chip: #f3f3f3;--surface: #fbfbff;--hairline: #f0f0f0;--indigo: #3b2fc9;--navy-blue: #1e3a8a;--teal: #8ff3dc;--seal-red: #c23b3b;--seal-red-dark: #8f1f1f;--blue: #002a89;--blue-20: #badcde;--blue-60: #174fc8;--blue-120: #00143f;--red: #aa1f23;--red-20: #fabbbb;--red-60: #c83337;--red-120: #5e0f12;--light-blue: #dce6fa;--white: #ffffff;--title: #1a1a1a;--body: #4a4a4a;--placeholder: #a8b0cc;--black: #1a1a1a;--tag-1: #2652cf;--tag-2: #8a5b09;--radius-lg: 28px;--radius-md: 18px;--radius-sm: 12px;--shadow-card: 0 16px 40px rgba(26, 26, 26, .08);--shadow-soft: 0 4px 14px rgba(26, 26, 26, .08)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Poppins,Noto Sans Thai,system-ui,-apple-system,sans-serif;background:var(--surface);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}img{max-width:100%;display:block}button{font-family:inherit}a{color:inherit}.app-shell{min-height:100vh;display:flex;flex-direction:column}.container{width:100%;max-width:720px;margin:0 auto;padding-inline:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;font-size:16px;border-radius:999px;border:none;cursor:pointer;padding:14px 28px;transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease,background .15s ease;line-height:1}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--ink);color:var(--paper);box-shadow:0 10px 26px #1a1a1a40}.btn-primary:hover:not(:disabled){background:#000}.btn-secondary{background:var(--paper);color:var(--ink);border:2px solid var(--ink)}.btn-secondary:hover:not(:disabled){background:var(--chip)}.btn-ghost{background:transparent;color:var(--muted);font-weight:600;padding:10px 16px}.btn-block{width:100%}.card{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:28px}.badge{display:inline-flex;align-items:center;gap:6px;background:var(--chip);color:var(--ink);font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px}.text-title{color:var(--title);font-weight:700}.text-body{color:var(--body)}input,textarea,select{font-family:inherit;font-size:15px;border-radius:var(--radius-sm);border:1.5px solid var(--blue-20);padding:10px 14px;background:var(--white);color:var(--black);width:100%}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue-60)}label{font-size:13px;font-weight:600;color:var(--body);display:block;margin-bottom:6px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-thumb{background:var(--blue-20);border-radius:999px}.skeleton{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes floatY{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes floatBlob{0%,to{transform:translateY(0)}50%{transform:translateY(-14px)}}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.pop-in{animation:popIn .4s cubic-bezier(.2,.9,.3,1.3) both}.admin-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}.more-quiz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,420px));gap:16px}.hero-grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);grid-template-areas:"kicker image" "text image";column-gap:48px;row-gap:12px;margin-top:44px}.hero-area-kicker{grid-area:kicker;justify-self:start}.hero-area-image{grid-area:image;max-width:460px}.hero-area-text{grid-area:text}@media (max-width: 480px){.card{padding:22px;border-radius:var(--radius-md)}.admin-row{grid-template-columns:1fr}.more-quiz-grid{grid-template-columns:minmax(0,1fr)}.hero-grid{grid-template-columns:1fr;grid-template-areas:"kicker" "image" "text"}.hero-area-image{max-width:100%}}