:root{--navy:#092f5f;--blue:#0969da;--blue2:#1685e5;--teal:#00a69c;--green:#149c62;--ink:#102f52;--muted:#526b84;--line:#d8e5ef;--bg:#f4f9fd;--white:#fff;--danger:#c62b2b;--warn:#a86400;--low:#087a55;--border:#9a6700;--inter:#b54708;--high:#b42318;--shadow:0 12px 35px rgba(15,55,90,.08)}*{box-sizing:border-box}html{font-size:17px;scroll-behavior:smooth}body{margin:0;font-family:Inter,"Noto Sans Thai",Tahoma,sans-serif;background:linear-gradient(180deg,#f8fbfe 0,#eef7fc 100%);color:var(--ink);line-height:1.65}.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:14px 4vw;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,#0759c7,var(--teal));color:white;display:grid;place-items:center;font-size:24px;font-weight:800;box-shadow:0 6px 16px rgba(9,105,218,.2)}.brand strong{display:block;font-size:20px}.brand span{display:block;font-size:12px;color:var(--muted)}.top-trust{text-align:right;margin-left:auto}.top-trust strong,.top-trust span{display:block}.top-trust strong{font-size:13px;color:var(--green)}.top-trust span{font-size:11px;color:var(--muted)}.prototype{font-size:11px;padding:7px 11px;border-radius:999px;background:#e8f4ff;color:var(--blue);font-weight:800}.shell{max-width:1280px;margin:0 auto;padding:44px 24px 70px}.hero{display:grid;grid-template-columns:1.55fr .65fr;gap:34px;align-items:center;margin-bottom:34px;padding:10px 8px}.eyebrow{font-size:12px;letter-spacing:.13em;font-weight:900;color:var(--teal)}h1{font-size:clamp(38px,4.8vw,62px);line-height:1.1;margin:.22em 0;color:#0d3155;letter-spacing:-.02em}.hero p{font-size:19px;color:var(--muted);max-width:780px;margin-bottom:18px}.hero-badges{display:flex;flex-wrap:wrap;gap:9px}.hero-badges span{font-size:14px;font-weight:800;color:#12614c;background:#eaf8f2;border:1px solid #cdeee0;padding:7px 11px;border-radius:999px}.hero-card{background:linear-gradient(145deg,#0a4f91,#083564);color:white;border-radius:24px;padding:28px;box-shadow:0 15px 35px rgba(7,57,103,.2)}.hero-card strong{font-size:19px;display:block}.hero-card span{display:block;opacity:.9;margin-top:6px}.hero-card small{display:block;margin-top:16px;opacity:.75}.page-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:24px;align-items:start}.journey{position:sticky;top:88px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px 18px;box-shadow:var(--shadow)}.journey h2{font-size:17px;padding:0 8px 10px}.journey ol{list-style:none;margin:0;padding:0}.journey li{display:flex;gap:12px;align-items:center;padding:12px 8px;border-radius:14px;margin:2px 0}.journey li.active{background:#eaf4ff}.journey b{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#edf2f6;color:#60758a}.journey .active b{background:var(--blue);color:white}.journey strong,.journey span{display:block}.journey strong{font-size:14px}.journey span{font-size:11px;color:var(--muted)}.help-card{margin-top:18px;border-radius:16px;background:#eef7ff;padding:15px;color:#174c7c}.help-card strong,.help-card span{display:block}.help-card span{font-size:12px;margin-top:4px}.form-column{min-width:0}.card{display:grid;grid-template-columns:58px 1fr;gap:18px;background:white;border:1px solid var(--line);border-radius:24px;padding:28px;margin:0 0 18px;box-shadow:var(--shadow)}.safety-card{border-top:5px solid #ee5454;background:linear-gradient(180deg,#fffafa,#fff 32%)}.history-card{border-top:5px solid #3eb77c}.data-card{border-top:5px solid #2986df}.lifestyle-card{border-top:5px solid #8b65d5}.lab-card{border-top:5px solid #f0a12b}.step{width:46px;height:46px;border-radius:14px;background:#e7f3ff;color:var(--blue);display:grid;place-items:center;font-weight:900;font-size:16px}h2{margin:0 0 8px;font-size:25px;line-height:1.35}.muted{color:var(--muted);margin-top:0;font-size:16px}.section-hint{color:var(--muted);margin:0 0 16px}.wide{width:100%}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.grid label,.card>div>label{font-size:15px;font-weight:800;color:#284b6c}input,select{width:100%;min-height:54px;margin-top:8px;border:1.5px solid #bfd0df;border-radius:13px;padding:13px 14px;font:inherit;font-size:17px;background:white;color:var(--ink);transition:.15s}input:hover,select:hover{border-color:#8fb2d1}input:focus,select:focus{outline:4px solid #dceeff;border-color:var(--blue)}input[readonly]{background:#eef6fb;color:#45657d}.helper{display:block;font-size:12px;font-weight:500;color:#6d8294;margin-top:5px}.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.checks label{display:flex;align-items:center;min-height:60px;padding:13px 14px;border:1.5px solid #efbcbc;border-radius:14px;background:#fffafa;font-size:15px;font-weight:750;cursor:pointer}.checks input{width:22px;min-height:22px;margin:0 10px 0 0;accent-color:var(--danger)}.check-icon{color:#df3c3c;font-size:19px;margin-right:8px}.confirm-box{display:block;margin-top:16px;padding:16px;border-radius:16px;background:#fff7df;border:1px solid #f3d990}.confirm-box select{background:white}.actions{display:flex;gap:12px;justify-content:flex-end;margin:24px 0 28px}.primary,.secondary{border:none;border-radius:14px;min-height:56px;padding:14px 24px;font-weight:900;font-size:17px;cursor:pointer}.primary{background:linear-gradient(135deg,#075fc9,#087de4);color:white;box-shadow:0 8px 20px rgba(9,105,218,.22)}.primary span{font-size:23px;margin-left:8px}.secondary{background:white;color:var(--navy);border:1.5px solid var(--line)}.result{display:block}.result-head{border-radius:20px;padding:28px;color:white;margin-bottom:18px}.result-head.low{background:linear-gradient(135deg,#087a55,#0f9d78)}.result-head.borderline{background:linear-gradient(135deg,#9a6700,#c28b12)}.result-head.intermediate{background:linear-gradient(135deg,#b54708,#d66d21)}.result-head.high{background:linear-gradient(135deg,#8f2019,#c4372c)}.result-head.neutral{background:var(--navy)}.risk-number{font-size:64px;font-weight:900;line-height:1}.risk-band{font-size:19px;font-weight:800;margin-top:8px}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{padding:17px;border:1px solid var(--line);border-radius:15px}.metric span{display:block;color:var(--muted);font-size:13px}.metric strong{font-size:28px}.result-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--line);font-size:16px}.result-section.small{font-size:13px;color:var(--muted)}.alert{border-radius:15px;padding:17px 19px;margin:14px 0}.alert.danger{background:#fff0ee;color:var(--danger)}.alert.warning{background:#fff7ed;color:var(--warn)}.trust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:28px 0;background:white;border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow)}.trust-strip div{text-align:center;padding:10px}.trust-strip strong,.trust-strip span{display:block}.trust-strip strong{color:var(--blue);font-size:16px}.trust-strip span{color:var(--muted);font-size:12px}.footnote{margin-top:20px;padding:20px;border-radius:17px;background:#eaf3f8;color:#405f78;font-size:14px}.mobile-steps{display:none}
@media(max-width:900px){html{font-size:18px}.top{padding:12px 16px}.top-trust,.prototype{display:none}.brand strong{font-size:18px}.brand span{font-size:10px}.shell{padding:24px 14px 50px}.hero{grid-template-columns:1fr;padding:0;margin-bottom:20px;gap:18px}.hero h1{font-size:36px}.hero p{font-size:17px}.hero-card{padding:20px}.page-layout{display:block}.journey{display:none}.mobile-steps{display:flex;justify-content:space-between;align-items:center;margin:0 4px 18px;position:relative}.mobile-steps:before{content:"";position:absolute;left:5%;right:5%;top:50%;height:2px;background:#d9e4ec;z-index:0}.mobile-steps span{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;background:#edf2f6;color:#61768a;display:grid;place-items:center;font-weight:800;font-size:14px}.mobile-steps .active{background:var(--blue);color:white;box-shadow:0 4px 12px rgba(9,105,218,.25)}.card{grid-template-columns:1fr;padding:21px 18px;border-radius:20px}.step{width:40px;height:40px}.grid,.checks,.metric-grid{grid-template-columns:1fr}h2{font-size:23px}.muted{font-size:15px}.grid label,.card>div>label{font-size:16px}input,select{min-height:58px;font-size:18px}.checks label{min-height:64px;font-size:16px}.actions{position:sticky;bottom:0;z-index:4;background:rgba(244,249,253,.96);padding:10px 0;margin:10px 0 20px;backdrop-filter:blur(8px)}.primary{flex:1;min-height:60px;font-size:18px}.secondary{min-height:60px}.trust-strip{grid-template-columns:1fr 1fr}.risk-number{font-size:58px}}
@media(max-width:520px){.brand-mark{width:40px;height:40px}.hero h1{font-size:31px}.hero-badges{gap:6px}.hero-badges span{font-size:12px}.hero-card strong{font-size:17px}.card{padding:19px 16px}.actions{flex-direction:column}.primary,.secondary{width:100%}.trust-strip{grid-template-columns:1fr 1fr;padding:12px}.mobile-steps span{width:34px;height:34px}.result-head{padding:22px}.risk-number{font-size:52px}}
/* Bangkok Hospital Surat horizontal logo in the app header. Keep header height stable while giving the hospital identity more visual weight. */
[hidden]{display:none!important}
.brand-mark{width:246px;height:58px;border-radius:0;background-color:transparent;background-image:url('../BSR%20landscape%20logo.png');background-repeat:no-repeat;background-position:left center;background-size:contain;box-shadow:none;color:transparent;font-size:0;overflow:hidden}.brand{gap:18px}.brand>div:last-child{padding-left:18px;border-left:1px solid var(--line)}.brand strong{font-size:21px;line-height:1.2}.brand span{font-size:12px;margin-top:4px}.top{min-height:84px}
@media(max-width:900px){.brand-mark{width:196px;height:48px}.brand{gap:12px}.brand>div:last-child{padding-left:12px}.brand strong{font-size:17px}.brand span{font-size:10px}.top{min-height:72px}}
@media(max-width:520px){.brand-mark{width:150px;height:38px}.brand{gap:9px}.brand>div:last-child{padding-left:9px}.brand strong{font-size:15px}.brand span{font-size:9px}.top{min-height:62px;padding-left:12px;padding-right:12px}}
/* v2.4 dev: export buttons (PDF+PNG) + eligibility highlight — kept in linked stylesheet so CSP style-src 'self' applies them (injected <style> is blocked) */
.pdf-export-wrap{margin-top:20px;padding:18px;border-radius:18px;background:#f7fbff;border:1px solid #d6e7f3;text-align:center}.export-buttons{display:flex;gap:10px;flex-wrap:wrap}.export-buttons>button{flex:1 1 190px}.pdf-export-button{width:100%;min-height:56px;border:0;border-radius:14px;background:#0a4f91;color:#fff;font:inherit;font-weight:900;font-size:17px;cursor:pointer}.pdf-export-button:disabled{opacity:.65;cursor:wait}.img-export-button{width:100%;min-height:56px;border:2px solid #0a4f91;border-radius:14px;background:#fff;color:#0a4f91;font:inherit;font-weight:900;font-size:16px;cursor:pointer}.img-export-button:disabled{opacity:.65;cursor:wait}.pdf-export-wrap>p{margin:9px 0 0;color:var(--muted);font-size:12px}.pdf-status{margin-top:10px;color:#17643f;font-size:13px;font-weight:700}.pdf-status.error{color:#b42318}
.history-card.eligible-confirmed{border-left:5px solid #17a25b;background:#f2fbf5}.history-card.eligible-confirmed #ascvdHistory{border-color:#17a25b;background:#f2fbf5;color:#0d6b3b;font-weight:700}.history-card.eligible-excluded{border-left:5px solid #d98a00;background:#fff8ec}.history-card .eligibility-hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}.history-card.eligible-confirmed .eligibility-hint{color:#17643f}
@media(max-width:520px){.export-buttons{flex-direction:column}.pdf-export-button,.img-export-button{min-height:62px;font-size:18px}}
.disclaimer-note{max-width:1280px;margin:0 auto 20px;padding:16px 20px;border:1.5px solid #e6c98a;border-left:6px solid #d98a00;border-radius:16px;background:#fff8ec;color:#5c4708}.disclaimer-note strong{display:block;font-size:15px;color:#8a5a00;margin-bottom:5px}.disclaimer-note p{margin:0;font-size:14px;line-height:1.6}.disclaimer-note b{color:#7a3d00}
@media(max-width:900px){.disclaimer-note{margin:0 4px 16px;font-size:13px}}
.hospital-banner{max-width:1280px;margin:22px auto 0;padding:0 24px}.hospital-banner img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
@media(max-width:520px){.hospital-banner{padding:0 14px;margin-top:16px}.hospital-banner img{border-radius:10px}}