/* ============ Theme: Petrol Steel — flat, engineering, single-accent ============ */
:root{
  --bg:#e9ecf0; --panel:#ffffff; --panel2:#f3f5f8;
  --ink:#17212e; --ink2:#586675; --ink3:#8695a4;
  --line:#e4e8ee; --line2:#d2d9e1;
  --brand:#0e7c8b; --brand2:#0a5f6b; --brandSoft:#e0f0f2;
  --orange:#c2610c; --green:#1f8a4c; --amber:#bd7d10; --red:#c33d33; --grey:#8b9aab;
  --shadow:0 1px 2px rgba(20,32,48,.06);
  --shadowL:0 4px 18px rgba(20,32,48,.10);
  --ring:#e6eaf0; --hero1:#e8ebf0; --hero2:#f2f4f7;
}
:root[data-theme="dark"]{
  --bg:#1b1d21; --panel:#25282e; --panel2:#1f2227;
  --ink:#eef0f3; --ink2:#a7aeb8; --ink3:#71787f;
  --line:#31353c; --line2:#3d424b;
  --brand:#28d6ea; --brand2:#17b8cc; --brandSoft:#123138;
  --orange:#ff9c3f; --green:#38d986; --amber:#f5c130; --red:#ff615a; --grey:#6a7178;
  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadowL:0 14px 44px rgba(0,0,0,.55);
  --ring:#33373e; --hero1:#24272c; --hero2:#1c1e22;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1b1d21; --panel:#25282e; --panel2:#1f2227;
  --ink:#eef0f3; --ink2:#a7aeb8; --ink3:#71787f; --line:#31353c; --line2:#3d424b;
  --brand:#28d6ea; --brand2:#17b8cc; --brandSoft:#123138;
  --orange:#ff9c3f; --green:#38d986; --amber:#f5c130; --red:#ff615a; --grey:#6a7178;
  --shadow:0 1px 2px rgba(0,0,0,.5); --shadowL:0 14px 44px rgba(0,0,0,.55);
  --ring:#33373e; --hero1:#24272c; --hero2:#1c1e22;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,"Segoe UI",sans-serif;
  color:var(--ink);font-size:14px;line-height:1.5;background:var(--bg);min-height:100vh;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.1px}
button{font-family:inherit;cursor:pointer}
.mono,.num{font-family:"IBM Plex Mono",ui-monospace,"Consolas",monospace;font-variant-numeric:tabular-nums}

/* header */
header.top{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--line2)}
.top-in{max-width:none;margin:0;padding:11px 20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.top-in>.tbtn,.top-in>.snapwrap{flex:0 0 auto}
.top-in .brand{margin-right:auto}                 /* ดันปุ่มทั้งหมดไปชิดขวา อยู่แถวเดียวกัน */
.top-in .tbtn{padding:7px 11px;font-size:12px}    /* ย่อปุ่มบนหัวให้พอดีแถวเดียว */
.top-in .tbtn.rank{padding:7px 13px;font-size:12.5px}
.hdr-tools{display:contents}                       /* คอม: ปุ่มทำตัวเป็น flex item ตรงๆ เหมือนเดิม */
.brand{display:flex;align-items:center;gap:12px;margin-right:auto}
.logo{width:44px;height:44px;border-radius:10px;flex:0 0 auto;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(10,20,35,.25))}
.brand h1{font-size:16px;line-height:1.15}
.brand .sub{font-size:11.5px;color:var(--ink2);margin-top:2px;font-weight:400}
.tbtn{border:1px solid var(--line2);background:var(--panel);color:var(--ink);border-radius:8px;padding:7px 13px;
  font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:6px;transition:.13s;text-decoration:none}
.tbtn:hover{border-color:var(--brand);color:var(--brand);background:var(--brandSoft)}
.tbtn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.snapwrap{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--brand);background:var(--brandSoft);color:var(--ink);border-radius:9px;padding:5px 10px;cursor:pointer;position:relative}
/* วันที่แสดงเป็น DD/MM/YYYY ของเราเอง (ไม่ขึ้นกับภาษาเครื่อง) · ตัวเลือกวันที่จริงซ่อนโปร่งใสทับไว้ให้คลิกเปิดปฏิทินได้ */
.snaptxt{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:15px;letter-spacing:.3px;min-width:96px;text-align:center}
.snapnative{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0;margin:0}
.snapwrap .ic{font-size:14px;line-height:1}
.snapwrap input[type=date]{border:none;background:transparent;color:var(--ink);font-family:inherit;font-size:13px;font-weight:600;color-scheme:light;cursor:pointer;outline:none}
.tbtn.pri:hover{background:var(--brand2);color:#fff}
.save-dot{font-size:11.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:7px}
.save-dot b{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block}

.wrap{max-width:1340px;margin:0 auto;padding:20px}
.card{background:var(--panel);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow)}
.sec-title{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.sec-title h2{font-size:14.5px;font-weight:600}
.sec-title .pill{font-size:11px;color:var(--ink2);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:3px 9px;font-weight:500}
.sec-ic{width:4px;height:17px;border-radius:2px;background:var(--brand);flex:0 0 auto;overflow:hidden;text-indent:-999px}

.periodbar{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;font-size:12px;color:var(--ink2);padding:2px 2px 16px}
.periodbar b{color:var(--ink);font-weight:600}
.periodbar .chip{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line2);border-radius:7px;padding:5px 11px}
.periodbar .grow{flex:1}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{padding:15px 16px 15px 18px;position:relative;display:flex;gap:14px;align-items:center;border-left:3px solid var(--brand)}
.kpi.g{border-left-color:var(--green)} .kpi.b{border-left-color:var(--brand)} .kpi.a{border-left-color:var(--amber)} .kpi.o{border-left-color:var(--orange)}
.kpi .ic{display:none}
.kpi .body{min-width:0;flex:1}
.kpi .lab{font-size:11.5px;color:var(--ink2);font-weight:500;text-transform:uppercase;letter-spacing:.3px}
.kpi .val{font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:600;letter-spacing:-1px;margin-top:4px;line-height:1;font-variant-numeric:tabular-nums}
.kpi .val small{font-size:15px;font-weight:500;color:var(--ink2)}
.kpi .meta{font-size:11.5px;color:var(--ink2);margin-top:7px}
.tag{display:inline-flex;align-items:center;gap:3px;font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;padding:1px 7px;border-radius:5px}
.tag.up{color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent)}
.tag.down{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.ring{--p:0;width:44px;height:44px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--green) calc(var(--p)*1%),var(--ring) 0)}
.ring::before{content:"";position:absolute;width:34px;height:34px;border-radius:50%;background:var(--panel)}
.ring span{position:relative;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600}
.kpi .ringwrap{position:relative;display:grid;place-items:center}

/* HERO diagram */
.hero{padding:16px 16px 10px;overflow:hidden}
.hero-head{display:flex;align-items:center;gap:10px;margin:0 4px 12px;flex-wrap:wrap}
.hero-head h2{font-size:14.5px;font-weight:600}
.hero-tools{margin-left:auto;display:flex;gap:8px}
/* ภาพโรงงานเป็น backdrop หลังกรอบ (เฉพาะหน้าที่มี body.bgphoto) */
body.bgphoto{background:linear-gradient(rgba(233,237,242,.55),rgba(233,237,242,.62)),url("Background.jpg") center 42%/cover fixed}
:root[data-theme="dark"] body.bgphoto,:root:not([data-theme="light"]) body.bgphoto{background:linear-gradient(rgba(24,26,30,.74),rgba(20,22,25,.84)),url("Background.jpg") center 42%/cover fixed}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) body.bgphoto{background:linear-gradient(rgba(233,237,242,.55),rgba(233,237,242,.62)),url("Background.jpg") center 42%/cover fixed}}
/* กรอบเครื่องจักร = จอแสดงผลสว่าง ขอบ accent เรืองแสง (โมเดิร์น คมชัด) ลอยเหนือ backdrop เข้ม */
.card.hero{background:transparent;border:none;box-shadow:none;padding:0}
.hero-head{padding:0 4px}
.hero-frame{position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#f7fafc,#e7edf3);
  border:1px solid color-mix(in srgb,var(--brand) 55%,transparent);
  box-shadow:0 22px 60px rgba(0,0,0,.5), 0 0 34px -12px var(--brand), inset 0 1px 0 rgba(255,255,255,.9)}
.hero-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0) 16%)}
.hero-img{display:block;width:100%;height:auto;position:relative;z-index:2}
/* race วิ่งด้านบนเครื่องจักร ในกรอบเดียวกัน */
.hero-frame .race2{position:absolute;top:8px;left:18px;right:18px;height:114px;z-index:6;pointer-events:none;background:transparent;overflow:visible}
.pinlayer{position:absolute;inset:0;z-index:4}
.pin{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:4}
.pin .dot{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--green) calc(var(--p,0)*1%), #d3d9e1 0);
  box-shadow:0 5px 14px rgba(10,20,35,.32);transition:transform .13s}
.pin.st-done .dot{box-shadow:0 6px 18px -3px color-mix(in srgb,var(--green) 62%,transparent)}
.pin .dot i{width:47px;height:47px;border-radius:50%;background:#f2f5f9;display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:800;color:#2b3139;font-style:normal;box-shadow:inset 0 0 0 1.5px rgba(120,128,140,.35)}
.pin.st-done .dot i{color:#137a48}
.pin:hover .dot{transform:scale(1.12)}
.pin.prog .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);opacity:.45;animation:pulse 2s ease-out infinite}
@keyframes pulse{0%{transform:scale(.9);opacity:.65}100%{transform:scale(1.5);opacity:0}}
.pin .plabel{position:absolute;left:50%;top:calc(100% + 7px);transform:translateX(-50%);white-space:nowrap;
  font-size:13.5px;font-weight:700;color:var(--ink);background:var(--panel);border:1px solid var(--line2);
  border-radius:8px;padding:4px 11px;box-shadow:var(--shadowL)}
.pin .ppct{position:absolute;left:50%;top:calc(100% + 40px);transform:translateX(-50%);white-space:nowrap;
  font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:800;padding:3px 12px;border-radius:20px;box-shadow:var(--shadowL)}
.pin .ppct.s-todo{background:var(--panel);color:var(--ink2);border:1.5px solid var(--line2)}
.pin .ppct.s-prog{background:color-mix(in srgb,var(--amber) 20%,var(--panel));color:var(--amber);border:1.5px solid color-mix(in srgb,var(--amber) 45%,transparent)}
.pin .ppct.s-done{background:var(--green);color:#fff;border:1.5px solid var(--green)}
.succ-badge{background:var(--green);color:#fff;font-size:12px;padding:2px 9px;border-radius:6px;font-weight:600;vertical-align:middle}
.pin.editing{cursor:grab}.pin.editing .dot{outline:2px dashed var(--brand);outline-offset:3px}
.staticlbl{position:absolute;transform:translate(-50%,-50%);z-index:4;white-space:nowrap;font-size:11px;font-weight:500;color:var(--ink);background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:2px 9px;box-shadow:var(--shadow)}
.hero-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:11px 4px 3px;font-size:11.5px;color:var(--ink2)}
.hero-legend span{display:inline-flex;align-items:center;gap:6px}.hero-legend i{width:11px;height:11px;border-radius:50%;display:inline-block}
.editnote{text-align:center;font-size:11.5px;color:var(--brand);padding:4px 0 0}

/* groups */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.grp{padding:18px}
.grp .ghead{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.grp .ghead .gic{width:4px;height:17px;border-radius:2px;flex:0 0 auto;overflow:hidden;text-indent:-999px;background:var(--brand)}
.grp.prep .ghead .gic{background:var(--orange)}
.grp .ghead h3{font-size:14px;font-weight:600}
.grp .ghead .gw{margin-left:auto;font-size:12px;color:var(--ink2);text-align:right}
.grp .ghead .gw b{color:var(--ink);font-size:14px;font-family:"IBM Plex Mono",monospace}
.gbar{height:7px;background:var(--ring);border-radius:4px;overflow:hidden;margin:0 2px 14px}
.gbar>i{display:block;height:100%;border-radius:4px;background:var(--brand)}
.grp.prep .gbar>i{background:var(--orange)}
.mrow{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:.12s}
.mrow:hover{background:var(--panel2);border-color:var(--line)}
.mrow .mname{font-size:13px;font-weight:500;flex:0 0 150px;display:flex;align-items:center;gap:8px}
.dotm{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.bar{flex:1;height:8px;background:var(--ring);border-radius:4px;overflow:hidden;position:relative}
.bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.bar>o{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink2);opacity:.55}
.mrow .pct{flex:0 0 40px;text-align:right;font-size:13px;font-weight:600;font-family:"IBM Plex Mono",monospace}
.mrow .cnt{flex:0 0 44px;text-align:right;font-size:11px;color:var(--ink2);font-family:"IBM Plex Mono",monospace}
.hint{font-size:11.5px;color:var(--ink2)}

/* curve + alerts */
.curverow{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-top:16px}
.chart-card,.act-card{padding:18px}
#scurve{width:100%;height:262px;display:block}
.ck{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin-top:8px}
.ck span{display:inline-flex;align-items:center;gap:6px}.ck i{width:16px;height:3px;border-radius:2px;display:inline-block}
#alerts{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto}
.alert{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);cursor:pointer;transition:.12s}
.alert:hover{border-color:var(--brand)}
.alert .sev{width:4px;align-self:stretch;border-radius:2px;flex:0 0 auto}
.alert .an{flex:1;min-width:0}
.alert .an .t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alert .an .s{font-size:11px;color:var(--ink2)}
.alert .lag{font-size:13px;font-weight:600;text-align:right;white-space:nowrap;font-family:"IBM Plex Mono",monospace}
.alert-ok{padding:22px 12px;text-align:center;color:var(--green);font-size:13px;font-weight:500}

/* calendar */
.cal{padding:18px}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:8px}
.cald{aspect-ratio:1.3;border-radius:6px;border:1px solid var(--line);background:var(--panel2);padding:5px 6px;font-size:11px;position:relative}
.cald .dn{font-weight:600;font-size:12px;font-family:"IBM Plex Mono",monospace}
.cald.off{background:color-mix(in srgb,var(--red) 10%,transparent);border-color:color-mix(in srgb,var(--red) 28%,transparent)}
.cald.ms{outline:2px solid var(--brand);outline-offset:-2px}
.cald .mk{position:absolute;right:5px;bottom:4px;font-size:9px;color:var(--ink2)}
.cald.dim{opacity:.35}
.calhead{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;font-size:11px;color:var(--ink2);text-align:center;font-weight:600}
.calmonths{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.calleg{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--ink2);margin-top:12px}
.calleg span{display:inline-flex;align-items:center;gap:6px}.calleg i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* drawer / detail modal */
.scrim{position:fixed;inset:0;background:rgba(9,14,22,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .18s;z-index:50}
.scrim.on{opacity:1;pointer-events:auto}
#pinScrim{z-index:51} /* PIN ซ้อนบนหน้าตรวจ (drawer z=51) ให้ม่านบังหน้าตรวจด้วย */
/* ===== Drawer = โทนสว่าง อ่านง่าย ตัวใหญ่ (override ตัวแปรสีเฉพาะในแผงนี้) ===== */
.drawer{--panel:#ffffff;--panel2:#eef2f7;--ink:#141c27;--ink2:#4d5768;--ink3:#8892a0;--line:#dbe2ea;--line2:#bcc6d3;--grey:#95a0ae;
  color-scheme:light;position:fixed;top:50%;left:50%;width:min(660px,94vw);max-height:92vh;background:linear-gradient(180deg,#ffffff,#f7f9fc);color:var(--ink);border-radius:24px;border:1px solid var(--line2);
  box-shadow:0 44px 100px -26px rgba(6,12,22,.66);
  transform:translate(-50%,-50%) scale(.93);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .24s cubic-bezier(.34,1.25,.5,1);z-index:51;display:flex;flex-direction:column;overflow:hidden}
.drawer.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.dhead{padding:20px 22px 18px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:12px;background:linear-gradient(180deg,#f4f8fc,#ffffff)}
.dhead .dt{font-size:24px;font-weight:800;letter-spacing:-.3px;line-height:1.2}
.dhead .ds{font-size:15px;color:var(--ink2);margin-top:4px}
.xbtn{margin-left:auto;border:1px solid var(--line2);background:var(--panel2);width:40px;height:40px;border-radius:10px;font-size:19px;color:var(--ink);flex:0 0 auto}
.xbtn:hover{border-color:var(--red);color:var(--red)}
.owner-row{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.owner-row label{font-size:15px;color:var(--ink2);font-weight:700;white-space:nowrap}
.owner-row input,.owner-row select{flex:1;min-width:0;border:1.5px solid var(--line2);background:#fff;color:var(--ink);border-radius:12px;padding:13px 14px;font-family:inherit;font-size:17px}
.owner-row select{cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%234d5768' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.owner-row select:invalid,.owner-row select option[value=""]{color:var(--ink3)}
.owner-row input:focus,.owner-row select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.owner-row input.req-err,.owner-row select.req-err{border-color:var(--red);background:color-mix(in srgb,var(--red) 6%,#fff);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 20%,transparent)}
.dmini{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.dmini .m{flex:1;min-width:120px;background:linear-gradient(180deg,#f3f7fb,#eaf0f6);border:1px solid var(--line);border-radius:14px;padding:13px 15px}
.dmini .m .l{font-size:13px;color:var(--ink2);font-weight:600} .dmini .m .v{font-size:25px;font-weight:800;margin-top:4px;font-family:"IBM Plex Mono",monospace}
.tips{font-size:13.5px;color:var(--ink2);background:color-mix(in srgb,var(--brand) 9%,#fff);border:1px solid color-mix(in srgb,var(--brand) 26%,transparent);border-radius:11px;padding:10px 13px;margin-bottom:16px;line-height:1.5}
.tips b{color:var(--brand2)}
/* ==== task cards (ฟอร์มพนักงาน: ใหญ่ ชัด กรอกง่าย) ==== */
.tcards{display:flex;flex-direction:column;gap:14px}
.tcard{border:1.5px solid var(--line2);border-radius:16px;padding:15px 16px;background:#fff;box-shadow:0 3px 10px -6px rgba(20,30,45,.25);border-left:6px solid var(--grey);transition:.15s}
.tcard.prog{border-left-color:var(--amber)}
.tcard.done{border-left-color:var(--green);background:linear-gradient(180deg,#f4fdf8,#fff)}
.tc-top{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.tc-name{font-size:17px;font-weight:700;color:var(--ink);line-height:1.32;flex:1}
.tc-badge{flex:0 0 auto;font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:20px;white-space:nowrap}
.tc-badge.s-todo{background:#eef1f5;color:#5a6472}
.tc-badge.s-prog{background:color-mix(in srgb,var(--amber) 20%,#fff);color:#9a6a00}
.tc-badge.s-done{background:color-mix(in srgb,var(--green) 22%,#fff);color:#137a48}
.tc-meta{font-size:13px;color:var(--ink2);margin-bottom:13px}
.tc-dates{font-size:12px;color:var(--ink2);margin:-2px 0 12px;font-family:"IBM Plex Mono",monospace}
.tc-meta .tcw{color:var(--ink);font-family:"IBM Plex Mono",monospace}
.tc-grid{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.tc-fld{display:flex;flex-direction:column;gap:7px}.tc-fld.grow{flex:1;min-width:210px}
.tc-fld>label{font-size:13.5px;font-weight:700;color:var(--ink2);display:flex;align-items:center;gap:8px}
.tc-fld>label .pv{font-family:"IBM Plex Mono",monospace;font-size:17px;font-weight:800}
.stepper{display:flex;align-items:stretch;border:2px solid var(--brand);border-radius:12px;overflow:hidden;box-shadow:0 3px 9px rgba(40,214,234,.28)}
.stepper .stp{width:42px;border:none;background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand2);font-size:22px;font-weight:800;cursor:pointer;line-height:1}
.stepper .stp:active{background:color-mix(in srgb,var(--brand) 28%,#fff)}
.stepper input.edit{width:64px;border:none;border-left:1px solid color-mix(in srgb,var(--brand) 30%,transparent);border-right:1px solid color-mix(in srgb,var(--brand) 30%,transparent);border-radius:0;text-align:center;font-size:22px;font-weight:800;color:#0e2b30;box-shadow:none;padding:8px 2px}
.stepper input.edit:focus{box-shadow:none;background:#f2feff}
.prgrow{display:flex;align-items:center;gap:12px}
.stpbtn{flex:0 0 auto;width:48px;height:45px;border:2px solid var(--brand);border-radius:12px;background:color-mix(in srgb,var(--brand) 14%,#fff);color:var(--brand2);font-size:24px;font-weight:800;line-height:1;display:grid;place-items:center;box-shadow:0 3px 9px rgba(40,214,234,.22)}
.stpbtn:active{background:color-mix(in srgb,var(--brand) 30%,#fff)}
.prgrow .prg.edit{flex:1;margin:0}
.prg.edit{height:12px;accent-color:var(--brand);cursor:pointer;margin:0}
.quick{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.qb{flex:1;min-width:48px;border:1.5px solid var(--line2);background:#fff;color:var(--ink2);border-radius:10px;padding:9px 4px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:.12s}
.qb:hover{border-color:var(--brand)}
.qb.on{background:var(--brand);border-color:var(--brand);color:#04252b;box-shadow:0 3px 9px rgba(40,214,234,.35)}
.tc-note{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.tc-note>label{font-size:13.5px;font-weight:700;color:var(--ink2)}
.tc-note input.edit{border:1.5px solid var(--line2);background:#fff;color:var(--ink);border-radius:11px;padding:12px 14px;font-family:inherit;font-size:15.5px}
.tc-note input.edit:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.tcard.locked{background:linear-gradient(180deg,#f3fdf7,#fff)}
.tc-ro{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:15px;color:var(--ink)}
.tc-ro b{font-family:"IBM Plex Mono",monospace;font-size:16px}
.tc-ro .ro-tag{margin-left:auto;font-size:13px;font-weight:700;color:#137a48;background:color-mix(in srgb,var(--green) 16%,#fff);border:1px solid color-mix(in srgb,var(--green) 38%,transparent);border-radius:20px;padding:4px 12px}
.dbody{overflow:auto;padding:18px 20px 22px;flex:1}
.tasktbl{width:100%;border-collapse:collapse}
.tasktbl th{font-size:13px;color:var(--ink2);font-weight:700;text-align:left;padding:11px 8px;position:sticky;top:0;background:var(--panel);border-bottom:2px solid var(--line2);z-index:1}
.tasktbl td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tasktbl tr:hover td{background:var(--panel2)}
.tasktbl input,.tasktbl select{width:100%;border:1.5px solid var(--line2);background:#fff;color:var(--ink);border-radius:9px;padding:11px 10px;font-family:inherit;font-size:16px}
.tasktbl input:hover,.tasktbl select:hover{border-color:var(--brand2)}
.tasktbl input:focus,.tasktbl select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent);background:#fff}
.tasktbl input.num{text-align:center;font-family:"IBM Plex Mono",monospace}
.tn{min-width:210px}
/* ล็อก = ข้อความ · แก้ได้ = กล่องไฮไลต์ฟ้า (คน & %) */
.tasktbl .tval{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35;padding:4px 2px}
.tasktbl .lockval{font-size:15px;font-weight:600;color:#26303c;padding:9px 4px;white-space:nowrap}
.tasktbl .lockval.num{text-align:center;font-family:"IBM Plex Mono",monospace}
.tasktbl th.edhead{color:var(--brand2);font-weight:800}
.tasktbl td.edcell{background:color-mix(in srgb,var(--brand) 10%,#fff);box-shadow:inset 1px 0 0 color-mix(in srgb,var(--brand) 30%,transparent),inset -1px 0 0 color-mix(in srgb,var(--brand) 30%,transparent)}
.tasktbl tr:hover td.edcell{background:color-mix(in srgb,var(--brand) 15%,#fff)}
.tasktbl input.edit{border:2.5px solid var(--brand);background:#fff;color:#0b2a2f;font-weight:800;font-size:19px;padding:12px 6px;box-shadow:0 3px 8px rgba(40,214,234,.30)}
.tasktbl input.edit:hover{border-color:var(--brand2)}
.tasktbl input.edit:focus{border-color:var(--brand2);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 34%,transparent);background:#fff}
.drawer .addbtn{display:none}
.pendtag{flex:0 0 auto;font-size:12px;font-weight:700;color:#fff;background:var(--red);border:1px solid var(--red);border-radius:20px;padding:3px 10px}
.floorhint{font-size:11.5px;font-weight:600;color:var(--red);margin-left:6px}
/* ===== Log Book ===== */
.logbook{margin-top:18px}
.logbook .hero-head{flex-wrap:wrap;gap:10px}
.logtools{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.logsel,.logsearch{border:1px solid var(--line2);background:var(--panel);color:var(--ink);border-radius:8px;padding:7px 10px;font-family:inherit;font-size:13px;color-scheme:light}
.logsel:focus,.logsearch:focus{outline:none;border-color:var(--brand)}
.logsearch{min-width:190px}
.loglist{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:702px;overflow-y:auto}
/* ~15 แถว (แถวละ ~46px) ที่เหลือเลื่อน */
.logempty{color:var(--ink2);font-size:14px;padding:18px 6px;text-align:center}
.logrow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;border:1px solid transparent;font-size:14px}
.logrow:nth-child(even){background:var(--panel2)}
.logrow.lhead{font-size:12px;color:var(--ink2);font-weight:700;background:var(--panel);border-bottom:2px solid var(--line2);border-radius:0;padding-bottom:8px;position:sticky;top:0;z-index:2}
.logrow.pend{background:color-mix(in srgb,var(--amber) 10%,var(--panel));border-color:color-mix(in srgb,var(--amber) 32%,transparent)}
.lg-date{flex:0 0 96px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink2)}
.lg-main{flex:1;min-width:0}
.lg-task{font-weight:600;color:var(--ink)}
.lg-meta{font-size:12.5px;color:var(--ink2);margin-top:2px}
.lg-num{flex:0 0 52px;text-align:right;font-family:"IBM Plex Mono",monospace}
.lg-st{flex:0 0 132px;text-align:right}
.lg-btn{display:inline-block;font-size:13px;font-weight:700;border-radius:20px;padding:6px 13px;border:none;white-space:nowrap}
.lg-btn.pend{background:var(--red);color:#fff;cursor:pointer;box-shadow:0 3px 9px rgba(195,61,51,.35)}
.lg-btn.pend:hover{filter:brightness(1.07)}
.lg-btn.appr{background:color-mix(in srgb,var(--green) 16%,var(--panel));color:var(--green);border:1px solid color-mix(in srgb,var(--green) 35%,transparent)}
.lg-btn.rej{background:color-mix(in srgb,var(--red) 14%,var(--panel));color:var(--red);border:1px solid color-mix(in srgb,var(--red) 38%,transparent)}
.logrow.rej{background:color-mix(in srgb,var(--red) 7%,var(--panel));border-color:color-mix(in srgb,var(--red) 28%,transparent);opacity:.92}
.logrow.rej .lg-num b{color:var(--ink3);text-decoration:line-through}
.tbtn.rej{background:#fff;color:var(--red);border:1.5px solid color-mix(in srgb,var(--red) 55%,transparent)}
.tbtn.rej:hover{background:color-mix(in srgb,var(--red) 8%,#fff)}
/* ===== PIN modal ===== */
.pinmodal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.94);opacity:0;pointer-events:none;z-index:52;
  background:#fff;color:#141c27;border-radius:18px;border:1px solid #c9d2dd;box-shadow:0 40px 90px -24px rgba(6,12,22,.6);
  padding:24px;width:min(360px,92vw);text-align:center;transition:opacity .18s,transform .2s;color-scheme:light}
.pinmodal.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.pin-h{font-size:16px;font-weight:700;margin-bottom:16px;color:#141c27}
.pin-in{width:190px;text-align:center;letter-spacing:14px;font-size:30px;font-weight:800;padding:10px 8px;border:2px solid var(--brand);border-radius:12px;background:#fff;color:#0e2b30;font-family:"IBM Plex Mono",monospace}
.pin-in:focus{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 30%,transparent)}
.pin-err{color:var(--red);font-size:13px;font-weight:600;height:18px;margin:9px 0 4px}
.pin-foot{display:flex;gap:10px;justify-content:center;margin-top:6px}
.pin-foot .tbtn{font-size:15px;padding:10px 22px}
/* ===== ปุ่ม Ranking (เด่น: ทอง) + popup จัดอันดับกลางจอ ===== */
.tbtn.rank{background:linear-gradient(180deg,#ffd75e 0%,#f5b400 55%,#d99400 100%);border-color:#b97c00;color:#3a2600;font-weight:800;font-size:13.5px;padding:8px 16px;
  box-shadow:0 4px 14px -3px rgba(217,148,0,.65),inset 0 1px 0 rgba(255,255,255,.6);text-shadow:0 1px 0 rgba(255,255,255,.45);animation:rankGlow 2.4s ease-in-out infinite}
.tbtn.rank:hover{filter:brightness(1.06);color:#2a1b00;border-color:#a06a00;background:linear-gradient(180deg,#ffe07a 0%,#f7bd14 55%,#e09a00 100%)}
@keyframes rankGlow{0%,100%{box-shadow:0 4px 14px -3px rgba(217,148,0,.65),inset 0 1px 0 rgba(255,255,255,.6)}50%{box-shadow:0 4px 22px -2px rgba(245,180,0,.95),inset 0 1px 0 rgba(255,255,255,.6)}}
#rankScrim{z-index:57}
.rankmodal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.94);opacity:0;pointer-events:none;z-index:58;width:min(640px,94vw);max-height:88vh;display:flex;flex-direction:column;
  background:#fff;color:#141c27;border-radius:22px;border:1px solid #d3dde6;box-shadow:0 44px 100px -26px rgba(6,12,22,.62);transition:opacity .2s,transform .26s cubic-bezier(.34,1.35,.5,1);color-scheme:light;overflow:hidden}
.rankmodal.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.rk-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 16px;border-bottom:1px solid #e3e9f0;background:linear-gradient(180deg,#fff8e1,#ffffff)}
.rk-title{font-size:22px;font-weight:800;color:#8a5a00}
.rk-sub{font-size:13px;color:#556074;margin-top:4px;line-height:1.45}
.rk-body{padding:10px 18px;overflow-y:auto}
.rk-modes{display:flex;gap:8px;margin:2px 0 12px;position:sticky;top:0;background:#fff;padding:4px 0 8px;z-index:1}
.rkm{flex:1;border:1.5px solid #dbe2ea;background:#f4f7fb;color:#556074;font-family:inherit;font-size:12.5px;font-weight:700;border-radius:10px;padding:9px 8px;cursor:pointer;transition:.13s}
.rkm:hover{border-color:#f5b400}
.rkm.on{background:linear-gradient(180deg,#fff3d0,#ffe9a8);border-color:#e0a800;color:#8a5a00;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.rk-row{display:flex;align-items:center;gap:14px;padding:12px 8px;border-bottom:1px solid #edf1f5}
.rk-row:last-child{border-bottom:none}
.rk-no{flex:0 0 44px;text-align:center;font-size:26px;font-weight:800;color:#8892a0}
.rk-row.top1 .rk-no,.rk-row.top2 .rk-no,.rk-row.top3 .rk-no{font-size:30px}
.rk-main{flex:1;min-width:0}
.rk-name{font-size:16.5px;font-weight:700;color:#141c27}
.rk-row.top1 .rk-name{font-size:19px;color:#8a5a00}
.rk-bar{height:9px;border-radius:6px;background:#eef2f6;margin:6px 0 4px;overflow:hidden}
.rk-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#f5b400,#1f8a4c)}
.rk-row.top1 .rk-bar i{background:linear-gradient(90deg,#ffd75e,#f5b400,#d99400)}
.rk-meta{font-size:12px;color:#556074}
.rk-pct{flex:0 0 auto;font-size:22px;font-weight:800;color:#1f8a4c;font-family:"IBM Plex Mono",monospace}
.rk-pct small{font-size:13px;margin-left:1px}
.rk-row.top1 .rk-pct{font-size:26px;color:#c98600}
.rk-row.sys{background:#fafbfc}
.rk-row.sys .rk-no{font-size:20px}
.rk-row.sys .rk-name{font-size:14px;color:#6b7683;font-weight:600}
.rk-row.sys .rk-bar i{background:#b9c2cd}
.rk-row.sys .rk-pct{color:#8892a0;font-size:18px}
.rk-foot{padding:10px 22px 14px;font-size:11.5px;color:#8892a0;border-top:1px solid #e3e9f0;background:#fafbfc}
@media (max-width:768px){.rankmodal{width:96vw;max-height:90vh}.rk-title{font-size:19px}.rk-no{flex-basis:36px;font-size:22px}.rk-pct{font-size:18px}.rk-row.top1 .rk-pct{font-size:21px}}
/* ===== popup แจ้งเตือน (notify) ===== */
#noteScrim.note-scrim{z-index:59;background:rgba(9,14,22,.5)}
.notemodal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;z-index:60;
  background:#fff;color:#141c27;border-radius:22px;border:1px solid #d3dde6;box-shadow:0 44px 100px -26px rgba(6,12,22,.62);
  padding:28px 32px 26px;width:min(360px,90vw);text-align:center;transition:opacity .2s,transform .26s cubic-bezier(.34,1.35,.5,1);color-scheme:light}
.notemodal.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
.note-ic{display:flex;justify-content:center;margin-bottom:10px}
.note-title{font-size:23px;font-weight:800;color:#137a48}
.notemodal .note-sub{font-size:14px;color:#556074;margin-top:9px;line-height:1.5}
.notemodal .tbtn{margin-top:20px;font-size:15px;padding:10px 34px}
.nck-c{stroke-dasharray:151;stroke-dashoffset:151;animation:nckC .5s ease forwards}
.nck-p{stroke-dasharray:44;stroke-dashoffset:44;animation:nckP .35s ease .35s forwards}
@keyframes nckC{to{stroke-dashoffset:0}}
@keyframes nckP{to{stroke-dashoffset:0}}
.rm{border:none;background:transparent;color:var(--grey);font-size:19px;padding:4px 8px;border-radius:7px}
.rm:hover{color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
.note-flag{color:var(--amber);font-size:13px;margin-top:3px}
.addbtn{border:1.5px dashed var(--line2);background:transparent;color:var(--ink2);border-radius:10px;padding:13px 14px;font-size:16px;font-weight:600;width:100%;margin-top:14px}
.addbtn:hover{border-color:var(--brand);color:var(--brand)}
.dfoot{flex:0 0 auto;padding:14px 20px;background:linear-gradient(180deg,#fff,#f2f5f9);border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;justify-content:flex-end}
.dfoot .tbtn{font-size:16px;padding:12px 22px;border-radius:12px}
/* งานเสร็จแล้ว: ปุ่มบันทึกสีเทาจาง กดไม่ได้ */
.tbtn.isdone,.tbtn:disabled{background:var(--panel2)!important;border-color:var(--line2)!important;color:var(--ink3)!important;opacity:.5!important;cursor:not-allowed;box-shadow:none!important;filter:grayscale(1)}
.tbtn.isdone:hover,.tbtn:disabled:hover{background:var(--panel2)!important;color:var(--ink3)!important;border-color:var(--line2)!important}
.dfoot .tbtn.big{font-size:17px;font-weight:700;padding:13px 30px}
.drawer .hint{font-size:14px;line-height:1.5}

footer{max-width:1340px;margin:0 auto;padding:14px 20px 34px;color:var(--ink3);font-size:11.5px;text-align:center}

/* ===== Cane-truck race → finish line (ถนนลอย + ไฟบอกระยะ + รถจริง) ===== */
.race2 .road2{position:absolute;left:16px;right:16px;bottom:42px;height:30px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#3b414b 0%,#2b303a 50%,#1f242c 100%);
  border:1px solid #434a55;
  box-shadow:0 12px 20px -9px rgba(15,22,34,.55),inset 0 2px 3px rgba(255,255,255,.10),inset 0 -4px 7px rgba(0,0,0,.5)}
.race2 .fill{position:absolute;left:0;top:0;bottom:0;width:6%;z-index:1;
  background:linear-gradient(90deg,rgba(40,214,234,.30),rgba(40,214,234,.55));
  box-shadow:0 0 18px rgba(40,214,234,.55),inset 0 0 12px rgba(255,255,255,.14);
  border-right:2px solid rgba(120,240,255,.9);
  transition:width 1.2s cubic-bezier(.22,.61,.36,1)}
.race2 .lane{position:absolute;left:14px;right:44px;top:50%;height:3px;transform:translateY(-50%);border-radius:2px;z-index:2;
  background:repeating-linear-gradient(90deg,#eff3f7 0 18px,transparent 18px 40px);opacity:.9}
.race2 .finline{position:absolute;right:0;top:0;bottom:0;width:26px;z-index:3;border-left:2px solid rgba(255,255,255,.85);
  background-color:#eef1f4;
  background-image:linear-gradient(45deg,#12161c 25%,transparent 0),linear-gradient(-45deg,#12161c 25%,transparent 0),linear-gradient(45deg,transparent 75%,#12161c 0),linear-gradient(-45deg,transparent 75%,#12161c 0);
  background-size:13px 13px;background-position:0 0,0 6.5px,6.5px -6.5px,-6.5px 0}
.race2 .rflag{position:absolute;right:12px;top:6px;z-index:5;filter:drop-shadow(0 3px 4px rgba(0,0,0,.3))}
.truck2{position:absolute;left:5%;bottom:50px;width:14%;min-width:132px;max-width:236px;z-index:4;transform:translateX(-50%);transform-origin:bottom center;transition:left 1.2s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.truck2 .truckimg{display:block;width:100%;height:auto;filter:drop-shadow(0 5px 5px rgba(10,16,24,.5));-webkit-user-drag:none}
.race2 .tkpct{position:absolute;left:6%;bottom:6px;transform:translateX(-50%);font-family:"IBM Plex Mono",monospace;font-size:21px;font-weight:700;color:#fff;background:linear-gradient(180deg,#f2564a,#d3342a);border:1px solid #b52a20;border-radius:11px;padding:3px 16px;letter-spacing:.5px;white-space:nowrap;box-shadow:0 5px 12px rgba(190,40,32,.4),inset 0 1px 0 rgba(255,255,255,.25);transition:left 1.2s cubic-bezier(.22,.61,.36,1),background .4s,border-color .4s,box-shadow .4s}
/* ได้ตามเป้า/เกิน → เขียว */
.race2 .tkpct.ok{background:linear-gradient(180deg,#34c759,#1ea94b);border-color:#158f3d;box-shadow:0 5px 12px rgba(30,169,75,.42),inset 0 1px 0 rgba(255,255,255,.28)}
/* ต่ำกว่าเป้า → แดง (ค่าเริ่มต้น ระบุชัดเพื่อความแน่นอน) */
.race2 .tkpct.behind{background:linear-gradient(180deg,#f2564a,#d3342a);border-color:#b52a20;box-shadow:0 5px 12px rgba(190,40,32,.4),inset 0 1px 0 rgba(255,255,255,.25)}
.truck2.done .truckimg{animation:bump .7s ease 2}
@keyframes bump{0%,100%{transform:translateY(0)}45%{transform:translateY(-6px)}}

/* ===== Lock ratio: เลย์เอาต์เดสก์ท็อปคงสัดส่วน ย่อทั้งหน้าให้พอดีจอทุกอุปกรณ์ ===== */
#appWrap{overflow-x:hidden;width:100%}
#app{width:1340px;margin:0 auto;transform-origin:top left}

/* ===== องค์ประกอบเฉพาะมือถือ (ซ่อนบนคอม) ===== */
.hero-scroll{display:block}
.mhint{display:none}
.mlist{display:none}

/* ============================================================
   MOBILE VERSION — จอ ≤768px (เปิดลิงก์เดียวกัน เบราว์เซอร์เลือกเอง)
   ไม่ย่อทั้งหน้า · เรียงการ์ดลงแนวตั้ง · ปุ่ม/ตัวหนังสือแตะง่าย
   ============================================================ */
@media (max-width:768px){
  html.mobile #app{width:100%;zoom:1!important}
  html.mobile body.bgphoto{background-attachment:scroll}
  .wrap{padding:10px 10px 28px}
  /* หัวเว็บ (มือถือ): แบรนด์ 1 แถว · แถบปุ่มเลื่อนซ้าย-ขวาได้แถวเดียว ไม่ซ้อนหลายแถว */
  .top-in{padding:8px 10px;gap:6px 8px;align-items:center}
  .brand{gap:8px;flex:1 1 100%;margin-right:0}
  .brand h1{font-size:15px}
  .brand .sub{font-size:10.5px}
  .logo{width:34px;height:34px}
  .save-dot{display:none}                          /* สถานะซ้ำกับ #verTag (เวอร์ชัน+เวลาซิงค์) → ซ่อนบนมือถือ */
  #verTag{order:0;flex:0 0 auto;font-size:10px}
  .hdr-tools{display:flex;flex:1 1 0;min-width:0;flex-wrap:nowrap;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:3px;scrollbar-width:none}
  .hdr-tools::-webkit-scrollbar{display:none}
  .hdr-tools>*{flex:0 0 auto}
  .top-in .tbtn{padding:9px 12px;font-size:13px;min-height:40px}   /* แตะง่ายบนมือถือ (แทนกฎย่อของคอม) */
  .snapwrap{padding:6px 8px}
  .snaptxt{font-size:13px;min-width:86px}
  /* แผนผัง: ย่อเป็นภาพเดียว เลื่อนซ้าย-ขวา */
  .hero{padding:10px 8px 8px}
  .hero-head h2{font-size:13px}
  .hero-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:14px}
  .hero-frame{min-width:0}
  .mhint{display:block;font-size:11.5px;color:var(--ink2);text-align:center;padding:8px 4px 2px}
  .hero-legend{font-size:10.5px;gap:10px}
  /* รายการเครื่องแบบแตะ (mobile-first navigation) */
  .mlist{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .mitem{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;border:1px solid var(--line2);background:var(--panel);box-shadow:var(--shadow);cursor:pointer;min-height:56px}
  .mitem:active{transform:scale(.98)}
  .mitem .mring{--p:0;width:40px;height:40px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;background:conic-gradient(var(--green) calc(var(--p,0)*1%),#d3d9e1 0);position:relative}
  .mitem .mring::before{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:var(--panel)}
  .mitem .mring span{position:relative;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:700}
  .mitem .mname{font-size:13.5px;font-weight:600;line-height:1.2}
  .mitem .mst{font-size:10.5px;color:var(--ink2);margin-top:2px}
  .mitem.st-done{border-color:color-mix(in srgb,var(--green) 45%,transparent)}
  .mitem.st-prog{border-color:color-mix(in srgb,var(--amber) 55%,transparent)}
  /* Log Book */
  .card.logbook{padding:12px 10px}
  .logtools{margin-left:0;width:100%}
  .logtools .logsearch{flex:1;min-width:0}
  .loglist{max-height:60vh}
  .logrow{flex-wrap:wrap;gap:6px 10px;padding:10px;font-size:13px}
  /* ฟอร์มกรอก / ตรวจ = เต็มจอ */
  .drawer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;top:0;left:0;border-radius:0;transform:none!important;opacity:0}
  .drawer.on{opacity:1}
  .dhead{padding:14px 14px 12px}
  .dhead .dt{font-size:19px}
  .dhead .ds{font-size:13px}
  .dbody{padding:12px 12px 16px}
  .owner-row{flex-direction:column;align-items:stretch;gap:6px}
  .tcard{padding:12px}
  .tc-grid{gap:10px}
  .tc-fld.grow{flex:1 1 100%}
  .dfoot{padding:10px 12px;position:sticky;bottom:0}
  .dfoot .tbtn.big{flex:1}
  /* Dashboard */
  .periodbar{font-size:11px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px 12px 12px 14px;gap:10px}
  .kpi .val{font-size:24px}
  body.dash .kpi .val{font-size:26px}
  .kpi .lab{font-size:10.5px}
  .kpi .meta{font-size:11px}
  .curverow{grid-template-columns:1fr;gap:12px}
  .chart-card,.act-card{padding:12px}
  #scurve{height:220px}
  .calmonths{grid-template-columns:1fr;gap:14px}
  .fc{padding:14px 14px;gap:12px}
  .fc-ic{font-size:30px}
  .fc-verdict{font-size:18px}
  .fc-sub{font-size:12.5px}
  .fc-stats{gap:14px}
  .jtbl{font-size:12px}
  .jtbl th,.jtbl td{padding:7px 6px}
  footer{font-size:10.5px;padding:10px}
}
@media (max-width:420px){
  .mlist{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
}