/* fda.kainatic.biz — สไตล์ร่วมหน้าข้อบ่งใช้/คู่มือ (v1 2026-10-18) */
:root{--navy:#080F78;--blue:#0E5BD8;--line:#d5dcef;--muted:#5a6272;--warn-bg:#fff7e6;--warn-bd:#f0c36d;--warn-tx:#7a5200;--ok-bg:#eaf7ee;--ok-tx:#1b6e3a}
*{box-sizing:border-box}
body{font-family:"Sarabun","Segoe UI",Tahoma,sans-serif;margin:0;background:#f4f6fb;color:#16203a}
.wrap{max-width:820px;margin:0 auto;padding:14px 14px 48px}
header{text-align:center;padding:24px 12px 10px}
.logo{font-size:36px;font-weight:800;color:var(--blue);letter-spacing:.5px;text-decoration:none}
.logo b{color:var(--navy)}
.sub{font-size:15.5px;color:var(--navy);font-weight:700;margin-top:2px}
.meta{font-size:12.5px;color:var(--muted)}
.lang{position:sticky;top:0;z-index:5;background:#f4f6fbEE;backdrop-filter:blur(3px);display:flex;gap:8px;justify-content:center;padding:8px 0 10px}
.lang button{font:inherit;font-size:13.5px;font-weight:700;padding:6px 18px;border-radius:99px;cursor:pointer;border:1.5px solid var(--navy);background:#fff;color:var(--navy)}
.lang button.on{background:var(--navy);color:#fff}
nav.toc{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:4px 0 2px}
nav.toc a{font-size:12.5px;text-decoration:none;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 12px;white-space:nowrap}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin-top:14px;scroll-margin-top:64px}
.card.hi{border-color:var(--blue);box-shadow:0 4px 18px rgba(14,91,216,.08)}
h2{font-size:17px;color:var(--navy);border-left:4px solid var(--blue);padding-left:9px;margin:0 0 10px}
h2 small{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-top:1px}
h3{font-size:14.5px;color:var(--navy);margin:14px 0 4px}
p,li,td,th{font-size:14.5px;line-height:1.7}
p{margin:6px 0} ul,ol{padding-left:22px;margin:6px 0}
table{border-collapse:collapse;width:100%;margin:8px 0}
th,td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top}
th{background:#eef2fb;color:var(--navy);font-size:13px}
.btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-weight:700;padding:11px 22px;border-radius:9px;font-size:15px;margin:6px 8px 2px 0}
.btn.o{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.btn.line{background:#06C755}
.demo{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx);border-radius:9px;padding:9px 13px;font-size:13px;margin-top:10px;text-align:center}
.warnbox{background:var(--warn-bg);border-left:4px solid var(--warn-bd);border-radius:0 8px 8px 0;padding:8px 12px;margin:8px 0}
.warnbox b:first-child{color:var(--warn-tx)}
.tag{display:inline-block;background:#eef2fb;color:var(--navy);border-radius:6px;padding:1px 8px;font-size:12px;font-weight:700}
.tag.ok{background:var(--ok-bg);color:var(--ok-tx)}
.dev{display:flex;gap:10px 18px;flex-wrap:wrap;font-size:13.5px;background:#eef2fb;border-radius:9px;padding:8px 12px;margin-top:8px}
.dev span b{font-family:ui-monospace,Consolas,monospace}
.steps li{margin:8px 0}
.files li{margin:6px 0} .files a{color:var(--navy);font-weight:700;text-decoration:none} .files .sz{color:var(--muted);font-size:12.5px}
footer{text-align:center;font-size:12px;color:var(--muted);margin-top:26px;line-height:1.7}
body.en .L-th{display:none} body:not(.en) .L-en{display:none}
@media print{.lang,nav.toc{display:none}.card{break-inside:avoid}}