@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;600&family=Sarabun:wght@400;600&display=swap');
body { font-family: 'Sarabun','Kanit',system-ui, -apple-system, Segoe UI, Roboto, Tahoma, sans-serif; background:#fafafa; color:#222; line-height:1.6; }
.container { max-width: 980px; margin: 24px auto; padding: 0 16px; }
.header { display:flex; justify-content: space-between; align-items:center; }
.header h1 { font-size: 22px; font-family: 'Kanit','Sarabun',system-ui, sans-serif; }
.btn { display:inline-block; padding:8px 12px; border:1px solid #ddd; border-radius:8px; text-decoration:none; color:#222; background:#fff; }
.btn.sm { padding:6px 8px; border-radius:8px; font-size:12px; }
.btn.primary { background:#1a73e8; color:#fff; border-color:#1a73e8; font-weight:600; }
.btn.secondary { background:#6b7280; color:#fff; border-color:#6b7280; font-weight:600; }
.btn.success { background:#12b76a; color:#fff; border-color:#12b76a; font-weight:600; }
.btn.danger { background:#ef4444; color:#fff; border-color:#ef4444; font-weight:600; }
.btn[disabled], .btn.disabled { opacity:0.6; cursor:not-allowed; }
.card { background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; margin:16px 0; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }
.link-card { text-decoration:none; color:inherit; }
.link-card h3 { margin:0 0 6px; font-size:18px; font-family:'Kanit','Sarabun',system-ui, sans-serif; }
.link-card p { margin:0; color:#555; }
label { display:block; margin:8px 0 4px; }
/* Ensure inputs don't overflow their containers: include padding/border in width */
input, select { width:100%; padding:8px; border:1px solid #ddd; border-radius:8px; font-family:'Sarabun','Kanit',system-ui, sans-serif; box-sizing:border-box; }
textarea { width:100%; min-height:100px; padding:8px; border:1px solid #ddd; border-radius:8px; box-sizing:border-box; }
.footer { text-align:center; margin-top:24px; color:#666; }