/* Design tokens: change this section to restyle shared surfaces, spacing and typography. */
:root { --radius: 16px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--background); color: var(--font); font-family: var(--site-font-family, 'Prompt','Noto Sans Thai',system-ui,sans-serif); font-size: 14px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,h6 { color: var(--font); font-family: var(--site-font-family, 'Prompt','Noto Sans Thai',system-ui,sans-serif); line-height: 1.4; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--main); }
button,input,select,textarea { font: inherit; }
button,a,input,select,textarea,summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
img,svg { vertical-align: middle; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { color: var(--font); background: var(--main); }
[hidden] { display: none !important; }
.ui-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.site-container { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.site-main { min-height: 65vh; padding: 28px 0 64px; }
.site-main > .container, .site-main > .container-sm { max-width: 1120px; }
.surface-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 10px; padding: 12px 20px; border: 1px solid var(--border); background: var(--surface); color: var(--font); font-weight: 600; line-height: 1.4; transition: background .2s, transform .2s, border-color .2s, box-shadow .2s; }
.button:hover { color: var(--font); background: var(--surface-raised); transform: translateY(-2px); }
.button-primary { color: var(--font); background: var(--main); border-color: var(--main); box-shadow: 0 5px 25px color-mix(in srgb, var(--main) 8.63%, transparent); }
.button-primary:hover { background: var(--main); border-color: var(--main); box-shadow: 0 8px 32px color-mix(in srgb, var(--main) 18.82%, transparent); }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--font); }
.eyebrow { display: block; margin-bottom: 16px; color: var(--main); font-size: 11px; font-weight: 800; letter-spacing: 2.5px; }
.state-panel { max-width: 700px; margin: 64px auto; padding: 64px 32px; border: 1px solid var(--border); background: radial-gradient(ellipse at top, color-mix(in srgb, var(--main) 4.71%, transparent), transparent 65%), var(--surface); border-radius: 20px; text-align: center; }
.state-panel h1 { font-size: clamp(26px, 5vw, 38px); }
.state-panel p { margin: 16px auto 26px; color: var(--muted); max-width: 480px; }
/* Reveal content remains visible without JavaScript and respects reduced motion. */
@keyframes content-arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.motion-ready [data-reveal].is-visible { animation: content-arrive .6s cubic-bezier(.2,.7,.2,1) both; }
@media (max-width: 640px) { .site-container { width: calc(100% - 32px); } .site-main { padding-top: 18px; } .state-panel { margin: 32px 16px; padding: 44px 24px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
/* SQL controls button contrast and animation style, while reduced motion remains authoritative. */
.button-primary,.bg-main,.btn-primary,.btn-success { color: var(--on-primary) !important; }
@keyframes content-zoom-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes content-zoom-out { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
@keyframes content-from-left { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes content-from-right { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
body[data-animation="zin"] .is-visible,body[data-animation="zin"] .sf-reveal-visible { animation-name: content-zoom-in; }
body[data-animation="zot"] .is-visible,body[data-animation="zot"] .sf-reveal-visible { animation-name: content-zoom-out; }
body[data-animation="fl"] .is-visible,body[data-animation="fl"] .sf-reveal-visible { animation-name: content-from-left; }
body[data-animation="fr"] .is-visible,body[data-animation="fr"] .sf-reveal-visible { animation-name: content-from-right; }

/* Inline SVG fallback for legacy Font Awesome class names when an icon CDN or old Pro glyph is unavailable. */
i[data-fa-fallback-ready="true"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
    color: currentColor;
}
i[data-fa-fallback-ready="true"]::before { content: none !important; }
.fa-svg-fallback {
    display: block;
    width: 1em;
    height: 1em;
    flex: 0 0 1em;
    color: currentColor;
    overflow: visible;
}

/* Small shared utilities keep modern pages independent from Bootstrap. */
.visually-hidden,.sf-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}