@font-face{font-family:Sarabun;font-weight:400;src:url(../fonts/sarabun-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;font-weight:600;src:url(../fonts/sarabun-thai-600-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;font-weight:700;src:url(../fonts/sarabun-thai-700-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:Sarabun;font-weight:400;src:url(../fonts/sarabun-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2026}
@font-face{font-family:Sarabun;font-weight:600;src:url(../fonts/sarabun-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2026}
@font-face{font-family:Sarabun;font-weight:700;src:url(../fonts/sarabun-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2013-2026}
:root{--red-d:#6e0f1c;--red:#b3182b;--red-l:#fbe9eb;--grn:#0e7a53;--grn-d:#0a5c3e;--grn-l:#e3f4ec;
--g9:#222629;--g7:#4a5056;--g5:#8a9199;--g3:#d5d9dd;--g2:#e9ecef;--g1:#f4f6f7;--amb:#e8a317;--amb-l:#fff4d6;--blue:#1d5fa8;
--r:14px;--sh:0 1px 3px rgba(0,0,0,.18)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--g1);color:var(--g9);font-family:Sarabun,Tahoma,sans-serif;font-size:17px;line-height:1.35}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;border-radius:12px;min-height:48px;padding:8px 14px;background:var(--g2);font-weight:600;touch-action:manipulation}
button:active{transform:scale(.97)}
button:disabled{opacity:.4;cursor:default}
input,select,textarea{border:1.5px solid var(--g3);border-radius:10px;padding:9px 11px;background:#fff;min-height:44px;width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid #f0b4bb;border-color:var(--red)}
label{display:block;font-size:14px;color:var(--g7);margin:0 0 3px;font-weight:600}
.top{background:var(--red-d);color:#fff;position:sticky;top:0;z-index:20;box-shadow:var(--sh)}
.top .in{max-width:1180px;margin:auto;padding:8px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{font-weight:700;font-size:19px;letter-spacing:.2px}
.brand small{display:block;font-weight:400;font-size:12px;opacity:.85}
.sp{flex:1}
.top button{background:rgba(255,255,255,.14);color:#fff;min-height:38px;padding:4px 12px;font-size:14px}
.top .chip{background:rgba(255,255,255,.2);padding:4px 10px;border-radius:20px;font-size:13px}
.wrap{max-width:1180px;margin:auto;padding:12px 14px 24px}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:14px;margin-bottom:12px}
.card h2,.card h3{margin:0 0 8px;font-size:18px}
.foot{background:var(--red-d);color:#f4d9dc;font-size:12px;padding:14px;text-align:center;line-height:1.6}
.foot b{color:#fff}
.btn-r{background:var(--red);color:#fff}.btn-g{background:var(--grn);color:#fff}.btn-d{background:var(--g9);color:#fff}
.btn-o{background:#fff;border:2px solid var(--red);color:var(--red)}
.btn-big{min-height:64px;font-size:20px}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 140px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.muted{color:var(--g7);font-size:14px}
.warn{background:var(--amb-l);border-left:5px solid var(--amb);padding:9px 12px;border-radius:8px;font-size:14px}
.err{color:var(--red);font-weight:600}
/* login */
.login{max-width:420px;margin:7vh auto 0}
.login .logo{background:var(--red-d);color:#fff;border-radius:var(--r) var(--r) 0 0;padding:20px;text-align:center}
.login .logo h1{margin:0;font-size:24px}.login .logo p{margin:4px 0 0;font-size:14px;opacity:.9}
.login .body{background:#fff;padding:18px;border-radius:0 0 var(--r) var(--r);box-shadow:var(--sh)}
.login .body>*{margin-bottom:12px}
/* mode picker */
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mode{border-radius:var(--r);padding:22px 12px;text-align:center;color:#fff;min-height:150px;display:flex;flex-direction:column;justify-content:center;gap:4px;box-shadow:var(--sh)}
.mode b{font-size:34px;letter-spacing:1px}.mode span{font-size:16px}.mode small{opacity:.9}
.mode.a{background:var(--red)}.mode.p{background:var(--grn)}.mode.n{background:var(--g7)}
/* recorder */
.stat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.tile{background:#fff;border-radius:var(--r);padding:8px 10px;box-shadow:var(--sh);text-align:center;border-top:5px solid var(--g3)}
.tile .l{font-size:13px;color:var(--g7);font-weight:600}
.tile .v{font-size:34px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.tile .s{font-size:13px;color:var(--g7);min-height:18px}
.tile.cyc{border-color:var(--grn)}.tile.cyc.warn15{border-color:var(--amb);background:var(--amb-l)}
.tile.cyc.over{border-color:var(--red);background:var(--red-l);animation:pulse 1s infinite}
.tile.epi{border-color:var(--g3)}.tile.epi.ready{border-color:var(--amb);background:var(--amb-l)}.tile.epi.late{border-color:var(--red);background:var(--red-l)}
.tile.tot{border-color:var(--red-d)}
@keyframes pulse{50%{background:#f7c8cd}}
.phase{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.pill{padding:6px 12px;border-radius:20px;background:var(--g2);font-weight:700;font-size:15px}
.pill.g{background:var(--grn-l);color:var(--grn-d)}.pill.r{background:var(--red-l);color:var(--red)}.pill.a{background:var(--amb-l);color:#7a5200}
.main{display:grid;grid-template-columns:1.25fr 1fr;gap:12px}
.rh{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.rh button{min-height:64px;font-size:17px;line-height:1.15;color:#fff}
.rh .vf{background:#c0392b}.rh .asy{background:#34495e}.rh .pea{background:#7d5a9a}.rh .rosc{background:var(--grn)}
.rh button.sel{outline:4px solid var(--amb)}
.rh2{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.rh2 button{min-height:38px;font-size:14px;padding:4px 10px}
.advice{border:2px solid var(--red);background:var(--red-l);border-radius:var(--r);padding:10px 12px}
.advice h3{color:var(--red);margin:0 0 6px}
.advice li{margin:3px 0}.advice li.drug{font-weight:700}.advice li.go{color:var(--red);font-weight:700}
.advice ul{margin:0;padding-left:20px}
.drugs{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.drug{text-align:left;background:#fff;border:2px solid var(--g3);min-height:62px;padding:6px 10px;line-height:1.2}
.drug b{display:block;font-size:15px}.drug span{font-size:13px;color:var(--g7)}.drug em{font-style:normal;color:var(--red);font-weight:700;font-size:15px}
.drug.rec{border-color:var(--red);background:var(--red-l)}
.drug .n{float:right;background:var(--g2);border-radius:10px;padding:0 7px;font-size:12px}
.quick{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.quick button{min-height:42px;font-size:14px;text-align:left}
.quick button.done{background:var(--grn-l);color:var(--grn-d)}
.log{max-height:320px;overflow:auto;border:1px solid var(--g3);border-radius:10px}
.log div{display:flex;gap:8px;padding:7px 10px;border-bottom:1px solid var(--g2);cursor:pointer;font-size:15px}
.log div:nth-child(odd){background:var(--g1)}
.log time{font-variant-numeric:tabular-nums;color:var(--g7);min-width:68px}.log .t{flex:1}
.log .k-shock{border-left:5px solid #c0392b}.log .k-drug{border-left:5px solid var(--blue)}.log .k-rh{border-left:5px solid #7d5a9a}.log .k-sys{border-left:5px solid var(--grn)}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips span{background:var(--g2);padding:3px 9px;border-radius:14px;font-size:13px}
.chips span b{color:var(--red-d)}
.bar{display:flex;gap:8px;flex-wrap:wrap}.bar>*{flex:1 1 150px}
dialog{border:0;border-radius:var(--r);padding:16px;max-width:460px;width:92%;box-shadow:0 8px 40px rgba(0,0,0,.4)}
dialog::backdrop{background:rgba(0,0,0,.5)}
dialog h3{margin-top:0}dialog .bar{margin-top:12px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.tabs button{background:#fff;border:2px solid var(--g3)}.tabs button.on{background:var(--red);color:#fff;border-color:var(--red)}
table.t{width:100%;border-collapse:collapse;font-size:14px}table.t th,table.t td{border-bottom:1px solid var(--g2);padding:5px;text-align:left;vertical-align:middle}
table.t input,table.t select{min-height:36px;padding:4px 7px}
.list .it{display:flex;gap:8px;margin-bottom:6px}.list .it button{flex:0 0 auto;min-height:44px}
.ck{display:flex;gap:6px;flex-wrap:wrap}.ck label{display:flex;align-items:center;gap:6px;background:var(--g2);border-radius:20px;padding:6px 12px;font-size:14px;color:var(--g9);margin:0;min-height:38px}.ck input{width:auto;min-height:0}
.hide{display:none!important}
@media(max-width:860px){.main{grid-template-columns:1fr}.stat{grid-template-columns:repeat(2,1fr)}.modes{grid-template-columns:1fr}.mode{min-height:96px}.tile .v{font-size:30px}}
@media(max-width:520px){.rh{grid-template-columns:repeat(3,1fr)}.grid2,.grid3{grid-template-columns:1fr}.drugs{grid-template-columns:1fr}}
@media print{body{background:#fff}.noprint{display:none!important}}

/* ===== 3D formal theme ===== */
:root{--hi:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.18);--sh3:0 6px 14px rgba(40,10,15,.22),0 2px 3px rgba(0,0,0,.2)}
html,body{background:linear-gradient(180deg,#eef1f3 0,#e3e7ea 100%) fixed}
.top{background:linear-gradient(180deg,#8a1626 0,#6e0f1c 55%,#590b16 100%);box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 -2px 0 rgba(255,255,255,.12)}
.top button{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 4px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.25)}
.card{background:linear-gradient(180deg,#fff 0,#f8fafb 100%);border:1px solid #d3d9de;box-shadow:0 6px 14px rgba(30,40,50,.12),0 1px 2px rgba(0,0,0,.1),inset 0 1px 0 #fff}
button{background:linear-gradient(180deg,#fdfefe 0,#dfe4e8 100%);color:var(--g9);box-shadow:var(--hi),0 3px 6px rgba(0,0,0,.18);border:1px solid #b9c1c8;text-shadow:0 1px 0 rgba(255,255,255,.6)}
button:active{transform:translateY(2px);box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}
.btn-r{background:linear-gradient(180deg,#d8283c 0,#b3182b 55%,#8e1121 100%);color:#fff;border-color:#7a0e1b;text-shadow:0 -1px 0 rgba(0,0,0,.35)}
.btn-g{background:linear-gradient(180deg,#19a373 0,#0e7a53 55%,#0a5c3e 100%);color:#fff;border-color:#084a32;text-shadow:0 -1px 0 rgba(0,0,0,.35)}
.btn-d{background:linear-gradient(180deg,#4b5259 0,#2b3036 60%,#1c2024 100%);color:#fff;border-color:#111;text-shadow:0 -1px 0 rgba(0,0,0,.5)}
.btn-o{background:linear-gradient(180deg,#fff 0,#f3e3e5 100%);color:var(--red);border:2px solid var(--red)}
.mode{box-shadow:var(--sh3),inset 0 2px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.2);border:1px solid rgba(0,0,0,.25);text-shadow:0 2px 2px rgba(0,0,0,.35);background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(0,0,0,.12))}
.mode.a{background-color:#b3182b}.mode.p{background-color:#0e7a53}.mode.n{background-color:#4a5056}
.tile{background:linear-gradient(180deg,#fff,#eef1f3);box-shadow:var(--sh3),inset 0 1px 0 #fff;border:1px solid #cdd4da;border-top-width:6px}
.tile .v{text-shadow:0 1px 0 #fff,0 2px 3px rgba(0,0,0,.18)}
.rh button{box-shadow:var(--hi),0 4px 8px rgba(0,0,0,.28);border:1px solid rgba(0,0,0,.35);text-shadow:0 -1px 0 rgba(0,0,0,.4);background-image:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.14))}
.drug{background:linear-gradient(180deg,#fff,#eef1f3);box-shadow:0 3px 6px rgba(0,0,0,.15),inset 0 1px 0 #fff}
.drug.rec{background:linear-gradient(180deg,#fff5f6,#f8d9dd)}
.advice{box-shadow:var(--sh3);background:linear-gradient(180deg,#fff2f3,#fbe3e6)}
dialog{box-shadow:0 18px 50px rgba(0,0,0,.5)}
.foot{background:linear-gradient(180deg,#6e0f1c,#4d0912);box-shadow:inset 0 3px 6px rgba(0,0,0,.35)}
/* nav menu */
.nav{position:relative}
.menu{position:absolute;right:0;top:46px;background:#fff;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.4);min-width:250px;padding:8px;z-index:40;display:none}
.menu.on{display:block}
.menu button{display:block;width:100%;text-align:left;margin:4px 0;color:var(--g9)!important;background:linear-gradient(180deg,#fff,#eceff1)!important;border:1px solid #cfd5da!important;min-height:44px;font-size:16px}
.menu hr{border:0;border-top:1px solid var(--g3);margin:6px 0}
.pbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:linear-gradient(180deg,#fff,#f1f3f5);border:1px solid #cdd4da;border-left:6px solid var(--red);border-radius:12px;padding:8px 12px;margin-bottom:12px;box-shadow:var(--sh3)}
.pbar b{font-size:19px}.pbar .miss{color:var(--red);font-weight:700}
.pbar button{min-height:36px;padding:2px 12px;font-size:14px}
.qrow{display:flex;gap:6px;margin-bottom:6px}.qrow .qm{flex:1;text-align:left;min-height:44px;font-size:14px}.qrow .qo{flex:0 0 64px;min-height:44px;font-size:12px;padding:2px}
.qrow .done{background:linear-gradient(180deg,#e9f8f1,#c9ecdc);color:var(--grn-d)}.qrow .pre{background:linear-gradient(180deg,#eef0ff,#d7dcf7);color:#33408f}
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chip2{display:inline-flex;gap:6px;align-items:center;background:var(--g2);border-radius:16px;padding:3px 6px 3px 12px;margin:2px;font-size:14px}.chip2 button{min-height:26px;padding:0 8px;border-radius:50%;font-size:14px}
.grp button.on{background:linear-gradient(180deg,#d8283c,#8e1121);color:#fff}
.sect{border-left:6px solid var(--grn);padding-left:10px;margin:14px 0 6px;font-weight:700;font-size:18px}
table.tl{width:100%;border-collapse:collapse;font-size:14px}table.tl td,table.tl th{border-bottom:1px solid var(--g2);padding:4px 6px;text-align:left}table.tl th{background:var(--g2)}
#printHost{display:none}
@media print{body.printing>*:not(#printHost){display:none!important}body.printing #printHost{display:block!important}}
@media(max-width:520px){.sg{grid-template-columns:1fr}}