@font-face{font-family:Sarabun;font-weight:400;font-display:swap;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:400;font-display:swap;src:url(/fonts/sarabun-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212}
@font-face{font-family:Sarabun;font-weight:700;font-display:swap;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:700;font-display:swap;src:url(/fonts/sarabun-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2199,U+2212}

:root{
  --ink:#14202e; --ink2:#4a5868; --line:#c9d1db; --bg:#eef1f4; --card:#fff;
  --brand:#1f3a5f; --brand2:#2d5486; --accent:#e8a317; --ok:#1e7a43; --okbg:#e2f4e8;
  --warn:#9a6a00; --warnbg:#fff4d6; --bad:#b3261e; --badbg:#fde7e5; --extra:#5b3fa0; --extrabg:#efe9fb;
  --r:12px; --tap:54px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:18px}
body{margin:0;font-family:Sarabun,'Noto Sans Thai',Tahoma,sans-serif;color:var(--ink);background:var(--bg);line-height:1.45;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand2)}
h1,h2,h3{margin:0;line-height:1.25}
h2{font-size:1.15rem}
h3{font-size:1rem}

/* ---------- แถบบน ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--brand);color:#fff;padding:8px 12px calc(8px);display:flex;align-items:center;gap:8px;min-height:58px;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.top .back{background:transparent;border:0;color:#fff;font-size:1.6rem;width:44px;height:44px;border-radius:10px;flex:none}
.top .back:active{background:rgba(255,255,255,.15)}
.top .t{flex:1;min-width:0}
.top .t b{display:block;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .t small{display:block;font-size:.8rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sync{border:0;border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:700;flex:none;max-width:46vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sync.ok{background:#d9f2e2;color:#0f5130}
.sync.pending{background:#ffe7a6;color:#5c3f00}
.sync.offline{background:#ffd2cc;color:#7a1610}
.sync.err{background:#ffd2cc;color:#7a1610}

/* ---------- แถบล่าง ---------- */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);padding-bottom:env(safe-area-inset-bottom)}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:64px;text-decoration:none;color:var(--ink2);font-size:.8rem;font-weight:700}
.nav a .i{font-size:1.4rem;line-height:1}
.nav a.on{color:var(--brand);background:#e8eef6}

main{max-width:760px;margin:0 auto;padding:12px}
.card{background:var(--card);border-radius:var(--r);padding:14px;margin:0 0 12px;box-shadow:0 1px 2px rgba(0,0,0,.07);border:1px solid #e2e7ee}
.card > h2{margin-bottom:10px}
.muted{color:var(--ink2)}
.small{font-size:.85rem}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sp{height:8px}
.hide{display:none!important}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:10px 18px;border-radius:12px;border:2px solid var(--brand);background:#fff;color:var(--brand);font-weight:700;font-size:1rem;text-decoration:none;cursor:pointer;text-align:center}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);color:#fff}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.block{display:flex;width:100%}
.btn.big{min-height:68px;font-size:1.1rem}
.btn.sm{min-height:42px;padding:6px 12px;font-size:.9rem;border-width:1.5px}
.btn[disabled]{opacity:.45;pointer-events:none}

.step{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:76px;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:700;font-size:1.05rem;color:var(--ink);text-decoration:none;margin-bottom:10px}
.step .n{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);font-size:1.2rem}
.step .d{display:block;font-weight:400;font-size:.85rem;color:var(--ink2)}
.step.done{border-color:var(--ok);background:var(--okbg)}
.step.done .n{background:var(--ok);color:#fff}
.step.now{border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,58,95,.15)}
.step.now .n{background:var(--brand);color:#fff}

/* ---------- ช่องกรอก ---------- */
label.f,div.f{display:block;margin:0 0 12px}
.f > span{display:block;font-weight:700;font-size:.92rem;margin-bottom:4px}
label.f > span em,.f > span em{font-style:normal;font-weight:400;color:var(--ink2)}
.in,select.in,textarea.in{width:100%;min-height:var(--tap);border:2px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;font-size:1.05rem}
textarea.in{min-height:84px;resize:vertical}
.in:focus{outline:none;border-color:var(--brand2);box-shadow:0 0 0 3px rgba(45,84,134,.2)}
.field-err .in,.in.err{border-color:var(--bad);background:#fff8f7}
.errtxt{color:var(--bad);font-size:.85rem;font-weight:700;margin-top:4px}
.hint{font-size:.85rem;color:var(--ink2);margin-top:3px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:48px;padding:8px 14px;border-radius:999px;border:2px solid var(--line);background:#fff;font-weight:700;font-size:.95rem}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.chips.err .chip{border-color:var(--bad)}

.stepper{display:flex;align-items:stretch;border:2px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;height:var(--tap)}
.stepper button{width:52px;border:0;background:var(--bg);font-size:1.5rem;font-weight:700}
.stepper button:active{background:#d8dee6}
.stepper input{flex:1;min-width:0;width:100%;border:0;text-align:center;font-size:1.25rem;font-weight:700;background:#fff}

.pct{display:flex;gap:8px;align-items:center}
.pct input{width:96px;text-align:center;font-weight:700;font-size:1.2rem}
.pct .q{display:flex;gap:6px;flex-wrap:wrap}
.pct .q button{min-height:44px;min-width:52px;border-radius:8px;border:1.5px solid var(--line);background:#fff;font-weight:700}

.statusbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.statusbtns button{min-height:58px;border-radius:12px;border:2px solid var(--line);background:#fff;font-weight:700;font-size:.98rem}
.statusbtns button.on.not_started{background:#e7eaee;border-color:#7a8591}
.statusbtns button.on.in_progress{background:var(--warnbg);border-color:#c99a06}
.statusbtns button.on.done_today{background:var(--okbg);border-color:var(--ok)}
.statusbtns button.on.blocked{background:var(--badbg);border-color:var(--bad)}

/* ---------- รายการงาน ---------- */
.item{border:2px solid #dfe4ea;border-radius:14px;margin-bottom:12px;background:#fff;overflow:hidden}
.item.extra{border-color:#c9b8ef}
.item.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 6px rgba(179,38,30,.45)}100%{box-shadow:0 0 0 0 transparent}}
.item .ih{display:flex;gap:10px;align-items:flex-start;padding:12px;background:#f7f9fb;border-bottom:1px solid #e6eaef;cursor:pointer}
.item .ih .no{flex:none;width:36px;height:36px;border-radius:10px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.item.extra .ih .no{background:var(--extra)}
.item .ib{padding:12px}
.tag{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:6px;background:var(--bg);color:var(--ink2);margin-right:4px}
.tag.extra{background:var(--extrabg);color:var(--extra)}
.tag.ok{background:var(--okbg);color:var(--ok)}
.tag.warn{background:var(--warnbg);color:var(--warn)}
.tag.bad{background:var(--badbg);color:var(--bad)}

.explain{background:#eaf1fb;border:1px solid #c5d6ee;border-radius:12px;padding:10px 12px;font-size:.9rem;margin-bottom:12px}
.explain b{color:var(--brand)}
.alert{border-radius:12px;padding:10px 12px;margin:8px 0;font-weight:700;font-size:.95rem}
.alert.warn{background:var(--warnbg);color:#5c3f00;border:1px solid #f0d27a}
.alert.bad{background:var(--badbg);color:#7a1610;border:1px solid #f2b8b2}
.alert.ok{background:var(--okbg);color:#0f5130;border:1px solid #a9dcbb}
.alert.info{background:#eaf1fb;color:#183456;border:1px solid #c5d6ee}
.alert.demo{background:var(--extrabg);color:var(--extra);border:1px dashed var(--extra)}

/* ---------- รูป ---------- */
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:8px}
.ph{border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;position:relative}
.ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#dde2e8}
.ph .st{position:absolute;top:6px;left:6px;font-size:.72rem;font-weight:700;padding:2px 7px;border-radius:6px}
.ph .st.done{background:#d9f2e2;color:#0f5130}
.ph .st.pending,.ph .st.uploading{background:#ffe7a6;color:#5c3f00}
.ph .st.error{background:#ffd2cc;color:#7a1610}
.ph .x{position:absolute;top:4px;right:4px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:1.1rem}
.ph .star{position:absolute;bottom:48px;right:4px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.9);font-size:1.1rem}
.ph input{width:100%;border:0;border-top:1px solid var(--line);padding:8px;font-size:.88rem;min-height:44px}
.photobtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.photobtns label{cursor:pointer}
.photobtns input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- ส่วนท้ายติดล่าง ---------- */
.dock{position:sticky;bottom:calc(72px + env(safe-area-inset-bottom));z-index:10;background:linear-gradient(transparent,var(--bg) 22%);padding:16px 0 4px}

/* ---------- รายการ ---------- */
.list a.li,.list .li{display:flex;gap:10px;align-items:center;padding:12px;border-bottom:1px solid #e9edf2;text-decoration:none;color:inherit;min-height:60px}
.list .li:last-child{border-bottom:0}
.pill{font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill.draft{background:#e7eaee;color:#3d4753}
.pill.morning_done{background:#e0ebfa;color:#183c70}
.pill.evening{background:var(--warnbg);color:#5c3f00}
.pill.closed{background:var(--okbg);color:#0f5130}
.pill.missing{background:var(--badbg);color:var(--bad)}
.pill.holiday{background:#eee;color:#666}

table.t{width:100%;border-collapse:collapse;font-size:.9rem}
table.t th,table.t td{border-bottom:1px solid #e3e8ee;padding:7px 6px;text-align:left;vertical-align:top}
table.t th{font-size:.8rem;color:var(--ink2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.big{font-size:1.6rem;font-weight:700}
.stat{background:var(--bg);border-radius:10px;padding:10px;text-align:center}
.stat b{display:block;font-size:1.45rem}
.stat span{font-size:.78rem;color:var(--ink2)}

.bars{display:flex;align-items:flex-end;gap:3px;height:140px;padding-top:16px;border-bottom:2px solid #9aa6b2;overflow-x:auto}
.bars div{flex:1 0 14px;min-width:14px;background:#3f6ea8;border-radius:3px 3px 0 0;position:relative}
.bars div.gap{background:repeating-linear-gradient(45deg,#f2b8b2,#f2b8b2 3px,#fff 3px,#fff 6px);height:12px!important}
.bars div.off{background:#d0d5db;height:4px!important}
.bars div span{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:.68rem;font-weight:700}
.barlbl{display:flex;gap:3px;font-size:.65rem;color:var(--ink2);overflow-x:hidden}
.barlbl span{flex:1 0 14px;min-width:14px;text-align:center}

.tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.tabs button{flex:1;min-height:50px;border-radius:10px;border:2px solid var(--line);background:#fff;font-weight:700;white-space:nowrap;padding:0 12px}
.tabs button.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- หน้าต่างแจ้ง ---------- */
.toast{position:fixed;left:12px;right:12px;bottom:calc(88px + env(safe-area-inset-bottom));z-index:60;background:#14202e;color:#fff;padding:14px 16px;border-radius:12px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:640px;margin:0 auto;transition:opacity .3s}
.toast.bad{background:var(--bad)}
.modal-bg{position:fixed;inset:0;z-index:70;background:rgba(10,18,28,.55);display:flex;align-items:flex-end;justify-content:center}
.modal{background:#fff;width:100%;max-width:640px;max-height:88vh;overflow:auto;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
.modal h2{margin-bottom:10px}
@media (min-width:700px){.modal-bg{align-items:center}.modal{border-radius:18px}}

.center{display:flex;min-height:80vh;align-items:center;justify-content:center}
.login{width:100%;max-width:420px}
.logo{width:64px;height:64px;border-radius:16px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 10px}
details.card summary{font-weight:700;cursor:pointer;min-height:40px;display:flex;align-items:center}
@media (max-width:380px){html{font-size:17px}.grid3{grid-template-columns:1fr 1fr}}