:root{--red:#b3122e;--ink:#111;--bg:#fffaf5;--card:#fff;--line:#333;--ok:#0b6b2e;--fs:20px}
body.big{--fs:24px}body.hc{--bg:#000;--card:#000;--ink:#fff;--line:#ffeb3b;--red:#ff3b3b;--ok:#4cff7a}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs)/1.5 "Sarabun","Noto Sans Thai",system-ui,sans-serif}
main{max-width:560px;margin:0 auto;padding:12px 14px 96px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
h1{font-size:1.4em;margin:.3em 0}h2{font-size:1.2em;margin:.6em 0 .3em}
.card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px;margin:12px 0}
button,.btn{display:block;width:100%;min-height:60px;font:inherit;font-weight:700;border-radius:14px;border:3px solid var(--line);background:var(--card);color:var(--ink);padding:10px;margin:8px 0;text-align:center;text-decoration:none;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid #1565c0;outline-offset:3px}
.primary{background:var(--red);color:#fff;border-color:var(--red)}.ok{background:var(--ok);color:#fff;border-color:var(--ok)}
#sos{width:min(78vw,300px);height:min(78vw,300px);border-radius:50%;margin:16px auto;font-size:2.4em;background:var(--red);color:#fff;border:8px solid #fff;box-shadow:0 0 0 6px var(--red),0 8px 24px #0005}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid .btn{margin:0;min-height:72px}
.btn small{display:block;font-weight:400;font-size:.75em}
input,select,textarea{font:inherit;width:100%;min-height:52px;border:2px solid var(--line);border-radius:10px;padding:8px;background:var(--card);color:var(--ink)}
label{display:block;margin:.5em 0 .2em;font-weight:700}
.note{font-size:.85em;border-left:6px solid var(--red);padding:8px 10px;background:#ff00000d}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:3px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
nav a{flex:1;text-align:center;padding:8px 2px;color:var(--ink);text-decoration:none;font-size:.7em;min-height:64px}
nav a b{display:block;font-size:1.5em}
.mascot{width:160px;height:160px;border-radius:50%;object-fit:cover;display:block;margin:8px auto}
.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}
.hidden{display:none!important}.list li{margin:6px 0}
.status{font-size:1.1em;font-weight:700}
.alarm{position:fixed;inset:0;background:var(--red);color:#fff;z-index:9;padding:24px;display:flex;flex-direction:column;justify-content:center;text-align:center}
.sr{position:absolute;left:-9999px}

.lochelp{background:#fff4d6;color:#3a2a00;border:3px solid #e0a800;border-radius:14px;padding:16px;margin:12px 0;font-size:1.3rem;line-height:1.6}.lochelp b{font-size:1.4rem}.lochelp ol{padding-left:1.4em;margin:8px 0}.lochelp li{margin:6px 0}.lochelp button{font-size:1.3rem;min-height:56px;width:100%}
/* เฟส 2: ดูแลกัน */
.bad{color:var(--red)}.ok-t{color:var(--ok)}.big2{font-size:1.25em;min-height:72px}
.bigck{font-size:1.1em;padding:10px 0}.bigck input{width:28px!important;height:28px;min-height:auto!important;vertical-align:middle;margin-right:6px}
.qr{background:#fff;padding:10px;border-radius:14px;max-width:300px;margin:8px auto;border:3px solid var(--line)}.qr svg{width:100%;height:auto;display:block}
.code{font-size:2.6em;font-weight:800;letter-spacing:.15em;text-align:center;margin:4px 0;font-variant-numeric:tabular-nums}
.reqc{border-color:#e0a800;background:#fff4d6;color:#3a2a00}.warnc{border-color:#e0a800}.safe{border-color:var(--ok);border-width:4px}
.sosbox{border-color:var(--red);border-width:4px}.acks li{font-size:1.1em;padding:6px 0}.ackrow.yes{color:var(--ok);font-weight:700}
.sosalert{background:var(--red);color:#fff;border-radius:18px;padding:18px;text-align:center;animation:pulse 1s infinite alternate;margin-top:8px}.sosalert h1{font-size:1.8em;margin:0}.sosalert .when{font-size:1.1em;margin:6px 0 0}
@keyframes pulse{from{box-shadow:0 0 0 0 #b3122e88}to{box-shadow:0 0 0 14px #b3122e00}}
@media (prefers-reduced-motion:reduce){.sosalert{animation:none}}
.maplink{font-size:1.4em;min-height:84px;background:#1565c0;color:#fff;border-color:#1565c0}
.ackbtn{font-size:1.8em;min-height:120px}.ackbtn small{font-size:.5em;font-weight:400}
nav a{font-size:.62em}
.streak{text-align:center;font-size:1.2em;border-color:#e07000}.sk{font-size:2em;font-weight:800}
.routine{text-align:center;border-color:var(--ok);border-width:4px}.pose{font-size:5em;line-height:1.2}.bar{height:14px;background:#ddd;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;background:var(--ok);transition:width 1s linear}
.alarm .ok{border-color:#fff}
.role{display:inline-block;font-size:.8em;background:#eef3ff;color:#1b3a8a;border-radius:999px;padding:0 .5em;margin-left:.3em}
.sosalert.miss{background:#a65b00}
.status{white-space:pre-line}
.posev{width:min(240px,70vw);aspect-ratio:1;border-radius:20px;object-fit:cover;display:block;margin:6px auto;background:#fbe3d3}
.yt{margin:.4em 0;display:flex;flex-direction:column;align-items:center;gap:.25em}.ytbtn{font-size:.9em;padding:.3em .8em}.ytbig .btn{font-size:1.1em}.ytf{width:100%;max-width:480px;aspect-ratio:16/9;border:0;border-radius:12px}.ytcr,.ytmsg{opacity:.8;font-size:.8em}
#stusos{display:block;width:100%;background:var(--red);color:#fff;font-size:1.6em;font-weight:700;border:0;border-radius:18px;padding:18px;margin:10px 0}#stusos small{display:block;font-size:.5em;font-weight:400}
.cglist{max-height:70vh;overflow:auto;list-style:none;padding:0}.cgrow{padding:6px 4px;border-bottom:1px solid #0002}.cgline{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.cgline b{flex:1}.cgrow details summary{font-size:.85em;opacity:.8}.cgsos{background:#ffe5e5;border-radius:10px}

.cimode{display:flex;gap:.6em;align-items:flex-start;border:3px solid #ccc;border-radius:14px;padding:.6em;margin:.4em 0}.cimode.sel{border-color:var(--th,#00695c);background:var(--ths,#eef)}.cimode input{width:1.6em;height:1.6em;min-height:auto;flex:0 0 auto}.invite{border:2px dashed var(--th,#00695c)}

/* ===== น่ารักขึ้น: ฟอนต์ Mitr (โฮสต์เอง) + โทนพาสเทลของแต่ละโหมด ===== */
@font-face{font-family:"Mitr";font-weight:300 450;font-display:swap;src:url(/vendor/fonts/mitr-thai-400-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mitr";font-weight:300 450;font-display:swap;src:url(/vendor/fonts/mitr-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Mitr";font-weight:451 900;font-display:swap;src:url(/vendor/fonts/mitr-thai-500-normal.woff2) format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mitr";font-weight:451 900;font-display:swap;src:url(/vendor/fonts/mitr-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
html,body{font-family:"Mitr","Sarabun","Noto Sans Thai",system-ui,sans-serif}
body:not(.hc){--ink:#2a1a20;color:var(--ink);background:var(--bg) radial-gradient(circle at 12% 8%,var(--ths,#ffe4ec) 0 90px,transparent 91px) no-repeat}
body:not(.hc) .card{border:2px solid var(--ths,#ffe4ec);border-radius:24px;box-shadow:0 6px 18px rgba(80,20,40,.08);background:#fff;position:relative}
body:not(.hc) .card::after{content:"♥"/"";position:absolute;top:8px;right:12px;font-size:14px;color:var(--thl,#e88aa8);opacity:.55;pointer-events:none}
body:not(.hc) button,body:not(.hc) .btn{border-radius:22px;border-width:2px;box-shadow:0 4px 12px rgba(80,20,40,.10)}
body:not(.hc) button:not(.primary):not(.ok),body:not(.hc) .btn:not(.primary):not(.ok):not(.maplink){background:#fff}
body:not(.hc) button:active,body:not(.hc) .btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(80,20,40,.12)}
body:not(.hc) input,body:not(.hc) select,body:not(.hc) textarea{border-radius:16px;background:#fff}
body:not(.hc) nav{border-radius:24px 24px 0 0;box-shadow:0 -4px 16px rgba(0,0,0,.12)}
body:not(.hc) nav a[aria-current=page]{border-radius:18px}
body:not(.hc) .note{border-left:0;border-radius:18px;background:var(--ths,#ffe4ec)}
.hello{display:flex;gap:12px;align-items:center;background:linear-gradient(135deg,var(--ths,#ffe4ec),#fff);border-radius:26px;padding:10px 14px;margin:8px 0 4px;box-shadow:0 6px 18px rgba(80,20,40,.08)}
.hello .hm{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:4px solid #fff;box-shadow:0 4px 12px rgba(80,20,40,.15)}
.hello p{margin:0;line-height:1.35}.brand{font-size:1.45em;font-weight:600;color:var(--thd,#7a0f36)}
.slogan{font-size:.85em;font-weight:500;color:var(--thd,#7a0f36)}.slogan::before,.slogan::after{content:" ♡ "/"";color:var(--th,#b0144f)}
.slogan.big{text-align:center;font-size:1.1em;margin:0 0 .3em}.hit{font-size:.9em}
.emptyc{text-align:center;padding:6px 4px}.emptyc p{margin:.3em 0}.emptyli{list-style:none}
img.mini{width:84px;height:84px;border-radius:50%;object-fit:cover;display:block;margin:4px auto;border:3px solid #fff;box-shadow:0 3px 10px rgba(80,20,40,.15)}
.invite{text-align:center}
.ciok{text-align:center;background:linear-gradient(180deg,#fff,var(--ths,#ffe4ec))!important}.ciok .ciimg{width:min(200px,55vw);height:min(200px,55vw);border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 6px 18px rgba(176,20,79,.25)}
.ciok .yay{font-size:1.6em;font-weight:600;color:var(--thd,#7a0f36);margin:.2em 0}.ciok p{margin:.2em 0}
.ciok.pop .ciimg{animation:kkpop .6s ease-out}@keyframes kkpop{0%{transform:scale(.6)}70%{transform:scale(1.08)}100%{transform:scale(1)}}
#kkToast{position:fixed;left:50%;top:14px;transform:translate(-50%,-160%);z-index:9500;display:flex;gap:10px;align-items:center;background:#fff;color:#2a1a20;border:2px solid var(--thl,#e88aa8);border-radius:24px;padding:8px 16px 8px 8px;box-shadow:0 8px 24px rgba(80,20,40,.2);transition:transform .35s;pointer-events:none;max-width:92vw;font-size:1em}
#kkToast.show{transform:translate(-50%,0)}#kkToast .ti{width:56px;height:56px;border-radius:50%;object-fit:cover}
@media (prefers-reduced-motion:reduce){.ciok.pop .ciimg{animation:none}#kkToast{transition:none}}
/* SOS: ระยะทาง + แผนที่ (ยังคงจริงจัง สีแดงชัด) */
.distp{font-size:1.35em;font-weight:600;text-align:center;background:#fff;color:#8a0e24;border:3px solid #b3122e;border-radius:18px;padding:10px;margin:10px 0}
.sosmap{height:260px;border-radius:18px;border:3px solid #b3122e;margin:10px 0;overflow:hidden;background:#eee}
.tipu{font-weight:700;color:#8a0e24}.tipme{font-weight:700;color:#0d47a1}
body.hc .hello,body.hc .ciok{background:#000!important;border:2px solid var(--line)}body.hc .brand,body.hc .slogan,body.hc .ciok .yay{color:#fff}body.hc #kkToast{background:#000;color:#fff;border-color:#ffeb3b}
/* ฉุกเฉิน: ไม่ใช้ลูกเล่น */
body.emg .card::after{content:none}
body.hc.hc{--bg:#000;--card:#000;--ink:#fff;--line:#ffeb3b;--red:#ff3b3b;--ok:#4cff7a;background:#000;color:#fff}

.sosvoice{background:var(--red);color:#fff;border-radius:18px;padding:16px;text-align:center}.sosvoice h1{font-size:1.9em;color:#fff!important}.sosvoice #cd{font-size:1.6em;font-weight:700;color:#fff}.sosvoice .status{color:#fff}.sosvoice button.primary{background:#fff;color:var(--red);font-size:1.5em;font-weight:700;border:4px solid #fff}.sosvoice button{font-size:1.2em}

.hint{display:block;font-size:.85em;color:#6b5a62;margin:-2px 0 6px;line-height:1.4}body.hc .hint{color:#ddd}
#siren{position:fixed;inset:0;z-index:9999;background:#d00000;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:1rem}
#siren.dim{background:#7a0000}#siren .sirt{font-size:2rem;font-weight:700}#siren .btn{background:#fff;color:#b00000;margin:.3rem}
.sirstop{font-size:1.6rem;min-height:5rem;width:100%;background:#fff;color:#b00000;border:4px solid #000;border-radius:1rem;font-weight:700;margin:1rem 0}
.cgsos{border:3px solid #d00000!important}button.cgsosbtn{background:#d00000!important;color:#fff!important;font-size:1.4rem!important;min-height:4.5rem;width:100%;font-weight:700;border-color:#7a0000!important}
button.silent{background:#333;color:#fff}
button.sirenbtn{color:#fff!important;background:#d00000!important;background:#d00000;color:#fff;font-size:1.3rem;min-height:4rem;width:100%;font-weight:700;border:3px solid #7a0000}
.kkpermfb{margin:.6em 0 0;font-weight:500;color:#8a1020}.kkpermfb:empty{display:none}.lochelp .small{font-size:.9em;opacity:.85}