:root{--forest:#064b3b;--leaf:#0cae78;--paper:#f1f7f4;--ink:#163d35;--soft:#6c8a80;--line:#d4e8dc;--orange:#f1972d}
*{box-sizing:border-box}html{font-family:'IBM Plex Sans Thai',sans-serif;color:var(--ink);background:#e8f2ed}body{margin:0}button,input{font:inherit}.mobile-shell{max-width:560px;min-height:100svh;margin:auto;background:var(--paper);box-shadow:0 0 50px #06362a10;padding:0 20px 24px}.mobile-head{background:linear-gradient(112deg,#063f34,#0b795a);color:#fff;display:flex;gap:14px;align-items:center;margin:0 -20px 19px;padding:30px 20px 25px}.mark{width:52px;height:52px;border:2px solid #72ddae;border-radius:15px;display:grid;place-items:center;font-size:35px}.mobile-head small,.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:#9fe6ca}.mobile-head h1{font:600 25px Kanit;margin:4px 0 0}.mobile-head p{margin:0;color:#c9e8dc;font-size:12px}.intro{background:linear-gradient(130deg,#0c5444,#143c35);color:white;border-radius:18px;padding:19px;margin-bottom:16px}.intro h2{font:600 22px Kanit;margin:8px 0 4px}.intro p{font-size:12px;color:#d7eee3;line-height:1.8}.privacy-row{display:flex;gap:8px;flex-wrap:wrap}.privacy-row span{font-size:10px;border:1px solid #66b69668;color:#cbfce6;padding:5px 9px;border-radius:100px}.panel{background:white;border:1px solid var(--line);padding:19px;border-radius:17px;box-shadow:0 6px 20px #063f2810;margin:0 0 16px}.panel h2{font:600 21px Kanit;margin:9px 0 5px}.panel p{line-height:1.7;font-size:12px;color:var(--soft)}.step{display:inline-block;font-weight:700;color:#08764f;background:#def6e8;border-radius:50px;padding:4px 10px;font-size:10px}.hidden{display:none!important}form{display:grid;gap:8px;margin-top:14px}label{display:grid;gap:6px;font-size:12px;font-weight:650}input:not([type=checkbox]){width:100%;border:1px solid #caddd2;border-radius:12px;background:#fbfefd;color:#143e32;min-height:48px;padding:11px 13px;outline-color:var(--leaf)}.btn{border:0;border-radius:12px;min-height:47px;padding:11px 14px;font-size:13px;font-weight:700;cursor:pointer;width:100%}.btn:disabled{opacity:.48;cursor:not-allowed}.primary{background:#0d9970;color:white}.secondary{background:#e3f4eb;color:#0b6e55;border:1px solid #add8c0}.danger{margin-top:9px;background:#fff0ed;color:#a23c31;border:1px solid #f3cbc3}.hint{background:#f2f8f5;padding:9px 10px;border-radius:9px;font-size:11px!important;color:#617e71!important}.status-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.status-chip{font-size:10px;color:#8b6846;border-radius:99px;background:#fff1dc;padding:6px 9px}.status-chip.live{background:#fff2d9;color:#a76410}.track-box{display:flex;gap:15px;align-items:center;background:#f0f6f3;border:1px solid #d8e9df;border-radius:16px;padding:16px;margin:15px 0}.beacon{display:grid;place-items:center;width:47px;height:47px;border-radius:50%;background:#fff7eb;flex:none}.beacon span{width:14px;height:14px;background:#b5c8be;border-radius:50%}.is-sharing .beacon span{background:#f1972d;box-shadow:0 0 0 7px #f1972d28;animation:beacon 1.7s infinite}.track-box b,.track-box small{display:block}.track-box b{font-size:14px}.track-box small{color:#6d897c;font-size:11px;margin-top:3px}.location-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.location-meta>div{background:#f6faf8;padding:10px;border-radius:10px}.location-meta small,.location-meta b{display:block}.location-meta small{color:#86a094;font-size:10px}.location-meta b{font-size:13px}.consent{display:flex;align-items:flex-start;gap:12px;font-size:11px;line-height:1.65;margin:15px 0}.consent input{width:20px;height:20px;flex:none;accent-color:#098a65;margin-top:2px}.global-status{position:sticky;bottom:12px;padding:10px 14px;border-radius:12px;background:#e1f4e9;color:#126b4f;font-size:11px;border:1px solid #bee2ce;box-shadow:0 3px 12px #21412d15}footer{text-align:center;color:#769387;font-size:10px;line-height:1.7;margin-top:18px}@keyframes beacon{50%{box-shadow:0 0 0 13px #f1972d0a}}@media(prefers-reduced-motion:reduce){.is-sharing .beacon span{animation:none}}

.staff-logout{margin-top:10px}

.mobile-extra-link{padding:18px 12px 5px;text-align:center;font-size:12px;color:#73978a}
.mobile-extra-link a{color:#0e8068;font-weight:650;text-decoration:underline}

/* Field operations V16 — single-login with accessible account registration */
.email-label{display:grid;gap:7px;margin:14px 0 8px}
.register-disclosure{margin-top:15px;border:1px solid #caddd2;background:#f9fcfa;border-radius:13px;overflow:hidden}
.register-disclosure>summary{padding:13px 14px;cursor:pointer;font-weight:700;font-size:13px;color:#0c6e52;list-style-position:inside}
.register-disclosure[open]>summary{border-bottom:1px solid #dce9e1;background:#f0f9f5}
.register-disclosure-content{padding:12px 14px 16px}
.register-disclosure-content p{margin:0 0 9px}
.register-disclosure-content form{margin-top:7px}
.register-disclosure-content input:focus-visible{outline:3px solid #78d8ad}

/* V17: clearer new-account and password-recovery pathways */
.account-troubleshoot{margin-top:13px;padding:13px;border-radius:12px;background:#f3f8ff;border:1px solid #cfdeed}
.account-troubleshoot>b{display:block;color:#194764;font-size:13px}
.account-troubleshoot p{margin:6px 0 11px;color:#3e667a!important}
.account-troubleshoot small{display:block;margin-top:7px;font-size:11px;line-height:1.6;color:#617e89}
.account-troubleshoot .btn{min-height:42px}
#passwordRecoveryPanel{border-color:#a4dbc0}

/* V18 username-only login */
.auth-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;background:#eef6f0;border-radius:12px;margin:15px 0}
.auth-tabs button{border:0;background:transparent;color:#54796b;border-radius:9px;min-height:43px;padding:8px 3px;font:600 11px 'IBM Plex Sans Thai',sans-serif;cursor:pointer}
.auth-tabs button.active{background:#0b785b;color:#fff;box-shadow:0 2px 9px #0b533329}
.auth-mode{margin-top:10px}.auth-feedback{margin-top:14px;background:#f0f8f5;padding:10px 12px;border-radius:10px;color:#32684f;font-size:11px;line-height:1.7}
#pendingPanel{border-color:#b7dccc}#pendingPanel h2{color:#1c6a52}
#pendingPanel button+button{margin-top:9px}

/* V20 : transparent GPS troubleshooting, no silent fallback or fake position */
.gps-help[hidden]{display:none!important}.gps-help{border:1px solid #edcd91;background:#fff8e9;color:#784e1c;border-radius:15px;padding:14px;margin:12px 0;display:grid;gap:8px}.gps-help b{font-size:14px}.gps-help p{font-size:12px;line-height:1.75;margin:0}.gps-help .btn{font-size:12px;margin-top:4px}

/* V21 offline + low-data GPS */
.offline-mode{margin:18px 0;padding:18px 16px;background:#f0f7f3;border:1px solid #afd2c2;border-radius:18px;color:#104c3b}
.offline-mode-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.offline-mode-head>span{display:grid;place-items:center;min-width:42px;height:42px;border-radius:12px;background:#d9eee3;font-size:24px}
.offline-mode-head b{font-size:15px;display:block}
.offline-mode-head small{display:block;color:#5f8576;font-size:11px;line-height:1.5}
.offline-mode p{font-size:12px;line-height:1.8;color:#527267;margin:8px 0}
.offline-mode .btn{margin:8px 0;white-space:normal;min-height:47px}
.offline-queue-status{margin:12px 0;padding:10px 12px;background:#fff;border:1px solid #c7ded1;border-radius:10px;color:#246d4e;font-size:12px;line-height:1.6}

.online-eco-choice{display:block;margin:12px 0 8px;font-weight:700;color:#1d5e49;font-size:12px;line-height:1.6}
.online-eco-choice select{display:block;width:100%;margin-top:5px;border:1px solid #a8d0bd;border-radius:12px;padding:12px 10px;font:inherit;font-size:13px;color:#13513c;background:#fff}