@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap";:root{--orange-main: #f37021;--orange-deep: #d85c16;--navy-main: #0a1f44;--navy-deep: #06152d;--black: #1a1a1a;--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #e8e8e8;--gray-500: #777;--white: #fff;--radius-md: 12px;--radius-lg: 18px;--shadow-sm: 0 8px 24px rgba(0, 0, 0, .06);--btn-shadow: 0 10px 26px rgba(6, 21, 45, .14);--btn-shadow-sm: 0 6px 16px rgba(6, 21, 45, .1);--focus-ring: 0 0 0 4px rgba(243, 112, 33, .16)}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Inter,Noto Sans Thai,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--white);color:var(--black);line-height:1.6;-webkit-text-size-adjust:100%;text-size-adjust:100%}input,select,textarea,button{font-size:16px}a{color:inherit;text-decoration:none}button{cursor:pointer}.app{min-height:100vh;display:flex;flex-direction:column}.container{width:min(980px,92%);margin:0 auto}.site-header{position:sticky;top:0;z-index:20;background:#fffffff5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--gray-200)}.header-inner{height:60px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:baseline;gap:10px}.brand-title{font-weight:900;letter-spacing:.06em;color:var(--orange-main)}.brand-sub{font-size:12px;color:#444}.page{padding:18px 0 56px}.hero{padding:34px 0 22px;text-align:center;background:linear-gradient(180deg,#fff,#fff5ec);border-bottom:1px solid var(--gray-200)}.hero h1{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:900;letter-spacing:.06em;color:var(--orange-main)}.hero p{margin-top:10px;color:#333}.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.card-pad{padding:14px}.input,.textarea{width:100%;border:1px solid var(--gray-200);border-radius:14px;padding:12px;outline:none;background:var(--white)}.textarea{min-height:96px;resize:vertical}.input:focus,.textarea:focus{border-color:#f370218c;box-shadow:0 0 0 4px #f370211f}.btn{border:0;border-radius:999px;padding:10px 14px;font-weight:900;background:#111;color:#fff;width:100%;-webkit-tap-highlight-color:transparent;transition:transform .08s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;box-shadow:var(--btn-shadow-sm)}.btn:hover{transform:translateY(-1px);box-shadow:var(--btn-shadow)}.btn:active{transform:translateY(0);box-shadow:0 6px 16px #06152d1f}.btn:focus{outline:none}.btn:focus-visible{box-shadow:var(--btn-shadow-sm),var(--focus-ring)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}.btn-outline{background:transparent;color:#111;border:1px solid #111;box-shadow:none}.btn-outline:hover{background:#fff7f1;border-color:#f3702173;box-shadow:0 8px 20px #f370211f}.btn-outline:active{background:#fff1e6}.btn-orange{background:var(--orange-main);background:linear-gradient(180deg,#ff7a2f 0%,var(--orange-main) 60%,#e96418 100%)}.btn-orange:hover{background:linear-gradient(180deg,#ff8a47,#ff7428 60%,#e55f14)}.btn-orange:active{background:var(--orange-deep);box-shadow:0 6px 16px #d85c1638}.btn-sm{padding:8px 12px;font-size:14px}.btn-xs{padding:6px 10px;font-size:12px}.btn-copy{opacity:.78}.btn-copy:hover{opacity:1}.vote-btn{-webkit-tap-highlight-color:transparent;background:#fff;border:1px solid rgba(10,31,68,.14);font-weight:800;transition:transform .08s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,opacity .18s ease}.vote-btn:hover{background:#f8fafc;border-color:#0a1f4438;box-shadow:0 6px 14px #06152d14;transform:translateY(-1px)}.vote-btn:active{transform:translateY(0);box-shadow:0 3px 10px #06152d1a}.vote-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}.pill-row{display:flex;gap:8px;flex-wrap:wrap}.pill{border-radius:999px;padding:8px 10px;border:1px solid var(--gray-200);background:var(--gray-50);font-weight:800;font-size:13px}.muted{color:var(--gray-500)}.hr{height:1px;background:var(--gray-200);margin:12px 0}@media(max-width:520px){.btn{padding:8px 12px!important;font-size:14px!important}.btn-sm{padding:6px 10px!important;font-size:13px!important}.btn-xs{padding:5px 9px!important;font-size:12px!important}.vote-col{opacity:.9}.vote-btn{background:#fafafa;border:1px solid #eee;font-weight:800}.card-pad{padding:12px!important}}
