:root { --brand: #19466f; --brand-deep: #123354; --surface: #f5f7fa; --text: #203047; --line: #e3e9f0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--surface); color: var(--text); font-family: 'Sarabun', system-ui, sans-serif; display: flex; flex-direction: column; }
.layout-container { width: 100%; max-width: 1140px; margin-left: auto; margin-right: auto; }
main.layout-container { flex: 1; }
.site-header { border-bottom: 1px solid var(--line); }
.brand-logo { display: block; width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.brand-name { font-weight: 700; font-size: 1.15rem; }
.brand-subtitle { color: #64748b; font-size: .86rem; }
.site-footer { border-top: 1px solid var(--line); color: #6e7d8d; background: #fff; font-size: .9rem; }
.footer-content { text-align: left; }
.footer-separator { color: #a3adba; }
.footer-developer { color: #006eff; font-weight: 700; }
.page-heading { margin-left: 0; margin-bottom: 1rem !important; }
.page-heading .step-caption { margin-bottom: .25rem !important; }
.page-heading h1 { margin-bottom: 0; line-height: 1.3; }
.step-caption { color: #547b9e; font-size: .85rem; letter-spacing: .08em; font-weight: 700; }
.content-card { border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 20px rgba(27,52,81,.035); }
/* Keep the approved legacy copy; only tighten visual spacing. */
.content-card .card-body.p-lg-5 { padding: 2rem !important; }
.legacy-copy { font-size: 1.07rem; line-height: 1.95; overflow-wrap: anywhere; }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-deep); --bs-btn-hover-border-color: var(--brand-deep); --bs-btn-active-bg: var(--brand-deep); --bs-btn-active-border-color: var(--brand-deep); border-radius: 10px; }
.form-label { font-weight: 600; }
.form-control, .form-select { padding: .73rem .88rem; border-color: #d5dfeb; border-radius: 9px; }
.form-control:focus, .form-select:focus { border-color: #6a95ba; box-shadow: 0 0 0 .2rem rgba(27,74,112,.11); }
.required-mark { color: #c0392b; }
.privacy-note { background: #f7f9fb; border: 1px solid var(--line); padding: 1.15rem; border-radius: 12px; line-height: 1.85; }
.service-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; text-align: left; min-height: 228px; background: #fff; border: 1px solid var(--line); padding: 30px; border-radius: 16px; transition: border-color .2s, transform .2s, box-shadow .2s; }
.service-choice:hover, .service-choice:focus-visible { border-color: #6c96bb; box-shadow: 0 10px 28px rgba(27,52,81,.09); transform: translateY(-2px); }
.service-icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; background: #ecf4fa; color: var(--brand); font-size: 30px; }
.service-title { font-size: 1.55rem; font-weight: 700; color: var(--text); }
.service-arrow { position: absolute; right: 28px; bottom: 27px; color: var(--brand); font-size: 1.25rem; }
.confirmation-card { max-width: 760px; margin: 35px auto; }
.success-icon { width: 76px; height: 76px; margin: auto; display: grid; place-items: center; border-radius: 50%; background: #e6f7ee; color: #168247; font-size: 36px; }
.reference-box { max-width: 420px; background: #f5f8fb; border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; }
.trap-field { position: absolute; left: -10000px; height: 1px; width: 1px; overflow: hidden; }
@media(max-width: 576px) { .legacy-copy { font-size: 1rem; } .brand-name { font-size: 1.03rem; } .brand-logo { width: 48px; height: 48px; } .service-choice { min-height: 170px; } .content-card .card-body, .content-card .card-body.p-lg-5 { padding: 1.4rem !important; } }

/* Public — select type */
.service-select-card { --choice-color: #255e88; --choice-soft: #eaf3fb; position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%; min-height: 300px; padding: 28px 30px; overflow: hidden; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 4px 20px rgba(27,52,81,.035); text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.service-select-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--choice-color); }
.service-select-card--complaint { --choice-color: #a05d38; --choice-soft: #fff2ea; }
.service-select-card:hover { border-color: var(--choice-color); box-shadow: 0 12px 30px rgba(27,52,81,.11); transform: translateY(-3px); }
.service-select-card:focus-visible { outline: 3px solid #7ba9d1; outline-offset: 3px; }
.service-select-top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.service-select-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: var(--choice-soft); color: var(--choice-color); font-size: 1.75rem; }
.service-select-number { color: #a3afbb; font-size: .88rem; font-weight: 700; letter-spacing: .08em; }
.service-select-body { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.service-select-title { font-size: 1.55rem; line-height: 1.35; font-weight: 700; }
.service-select-description { color: #657487; font-size: 1rem; line-height: 1.8; }
.service-select-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding-top: 16px; border-top: 1px solid var(--line); color: var(--choice-color); font-size: .96rem; font-weight: 700; }
.service-select-action i { font-size: 1.15rem; transition: transform .2s; }
.service-select-card:hover .service-select-action i { transform: translate(3px, -3px); }
.service-select-back { display: inline-flex; align-items: center; padding: 7px 0; color: #657487; text-decoration: none; font-size: .95rem; }
.service-select-back:hover, .service-select-back:focus-visible { color: var(--brand); text-decoration: underline; }
@media (max-width: 767.98px) { .service-select-card { min-height: 0; padding: 22px; gap: 16px; } .service-select-icon { width: 56px; height: 56px; font-size: 1.5rem; } .service-select-title { font-size: 1.35rem; } }
@media (prefers-reduced-motion: reduce) { .service-select-card, .service-select-action i { transition: none; } .service-select-card:hover, .service-select-card:hover .service-select-action i { transform: none; } }

/* Embedded SVG icons: no external icon CDN or fonts required. */
.ui-icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -.16em; flex-shrink: 0; }
.service-select-icon .ui-icon { width: 1.75rem; height: 1.75rem; }
.service-select-action .ui-icon { width: 1.15rem; height: 1.15rem; transition: transform .2s; }
.service-select-card:hover .service-select-action .ui-icon { transform: translate(3px, -3px); }
.service-select-back .ui-icon { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .service-select-action .ui-icon { transition: none; } .service-select-card:hover .service-select-action .ui-icon { transform: none; } }
/* Bootstrap's .row display rule must not reveal conditional fields. */
[hidden] { display: none !important; }

/* Public shell lives inside app-root (NCES SPA), independent from internal AppLayout. */
#app-root:has(.public-shell) { min-height: 100vh; }
.public-shell { min-height: 100vh; display:flex; flex-direction:column; }
.public-shell main { flex:1; }
#app-root:has(.public-shell) .site-header { flex:0 0 auto; }