:root{color-scheme:light;--ink:#17251f;--muted:#66756d;--green:#0d3328;--green2:#174d3d;--gold:#d6b76c;--paper:#f3f6f2;--line:#dfe7df;--white:#fff;--shadow:0 14px 40px rgba(14,48,37,.08)}
*{box-sizing:border-box}html{min-height:100%;background:var(--paper)}body{margin:0;font-family:Tahoma,"Noto Sans Thai",system-ui,sans-serif;color:var(--ink);background:radial-gradient(ellipse at top right,rgba(214,183,108,.15),transparent 32rem),var(--paper);line-height:1.55}.topbar{display:flex;align-items:center;gap:12px;padding:14px max(18px,calc((100vw - 1180px)/2));background:var(--green);color:white;position:sticky;top:0;z-index:5;box-shadow:0 4px 18px #0d332822}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border:1px solid #d6b76c;border-radius:14px;color:var(--gold);font-weight:900;letter-spacing:-1px}.brand-copy{display:flex;flex-direction:column;line-height:1.4;min-width:0}.brand-copy strong{font-size:15px}.brand-copy span{font-size:12px;color:#c4d5cd}.status-pill{margin-left:auto;white-space:nowrap;border:1px solid #ffffff35;border-radius:99px;padding:5px 10px;font-size:11px;color:#e5eee8}.page-shell{max-width:1180px;margin:0 auto;padding:28px 20px 40px}.panel{background:var(--white);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.hero{padding:clamp(24px,5vw,56px);background:linear-gradient(125deg,#0d3328,#174d3d);color:white;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:290px;height:290px;border:1px solid #d6b76c44;border-radius:50%;right:-90px;top:-120px;box-shadow:0 0 0 35px #ffffff06,0 0 0 70px #ffffff04}.eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:800;color:var(--gold)}h1{font-size:clamp(32px,5.5vw,58px);line-height:1.15;letter-spacing:-1.3px;margin:14px 0}h1 span{color:#e4cc8b}.hero p{max-width:620px;color:#d2e0d8;font-size:15px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;position:relative;z-index:1}.button{border:0;border-radius:12px;padding:12px 16px;font:inherit;font-weight:700;cursor:pointer}.button-primary{background:var(--gold);color:#17251f}.button-secondary{background:#ffffff15;color:white;border:1px solid #ffffff40}.notice{margin-top:18px;position:relative;z-index:1;padding:10px 12px;border-radius:12px;background:#ffffff12;color:#e3eee7;font-size:13px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:16px;margin:34px 0 16px}.section-heading h2,.next-panel h2{font-size:23px;margin:3px 0 0}.muted{color:var(--muted);font-size:12px}.feature-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.feature-card{padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff;min-height:208px;box-shadow:0 8px 24px #0d332808}.feature-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#edf3ed;color:var(--green2);font-size:25px}.feature-card h3{font-size:16px;margin:16px 0 6px}.feature-card p{font-size:13px;color:var(--muted);margin:0 0 15px}.feature-state{font-size:11px;color:#68786e}.next-panel{margin-top:22px;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.next-panel p{max-width:740px;color:var(--muted);font-size:14px;margin-bottom:0}.phase-number{font-size:50px;font-weight:900;color:#d6b76c;opacity:.8}footer{display:flex;justify-content:space-between;gap:14px;color:var(--muted);font-size:11px;margin-top:28px}footer span{opacity:.8}@media(max-width:820px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-shell{padding:18px 14px 30px}.topbar{padding:12px 14px}.next-panel{padding:20px}}@media(max-width:480px){.brand-copy strong{font-size:13px}.brand-copy span{font-size:10px}.status-pill{font-size:10px;padding:4px 7px}.brand-mark{width:40px;height:40px}.feature-grid{grid-template-columns:1fr 1fr;gap:9px}.feature-card{padding:14px;min-height:200px}.feature-card h3{font-size:14px}.feature-card p{font-size:12px}.section-heading{align-items:start;flex-direction:column}.next-panel{align-items:start}.phase-number{font-size:36px}footer{flex-direction:column;gap:4px}}@media(prefers-reduced-motion:no-preference){.feature-card{transition:transform .18s ease,box-shadow .18s ease}.feature-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}}

.auth-panel{max-width:460px;margin:1rem auto}
.auth-panel form{display:grid;gap:.75rem}
.auth-panel label{display:grid;gap:.3rem;font-size:.95rem}
.auth-panel input{padding:.7rem .8rem;border:1px solid #b9c7bd;border-radius:10px;font:inherit;min-height:44px}
.form-error{color:#a12a1f;min-height:1.2em;font-size:.9rem}


/* ===== UI refresh: PEA Survey Workspace ===== */
:root{--ink:#172b25;--muted:#687b73;--green:#075b45;--green2:#0c7658;--gold:#e8bd58;--paper:#f4f7f5;--line:#e0e9e4;--shadow:0 12px 32px rgba(18,53,40,.07);--radius:18px}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans Thai",Tahoma,system-ui,sans-serif;background:linear-gradient(180deg,#eef5f0 0,#f7f9f7 360px,var(--paper) 100%);line-height:1.65}
.topbar{padding:12px max(18px,calc((100vw - 1240px)/2));background:rgba(5,56,42,.97);backdrop-filter:blur(14px);gap:14px;box-shadow:0 6px 24px rgba(5,56,42,.16)}
.brand-mark{width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,#fff8df,#e8bd58);color:#07513d;border:0;box-shadow:inset 0 1px 0 #fff;font-size:17px}
.brand-copy strong{font-size:15px;letter-spacing:.1px}.brand-copy span{font-size:12px}
.status-pill{padding:6px 12px;background:#ffffff0c}
.page-shell{max-width:1240px;padding:30px 24px 48px}
.panel{border:1px solid #e1e9e4;border-radius:var(--radius);box-shadow:var(--shadow)}
.hero{padding:clamp(26px,4.4vw,52px);border-radius:26px;background:radial-gradient(circle at 90% 5%,#23795c 0,transparent 28%),linear-gradient(125deg,#073d2f 0%,#0a6248 65%,#124d3b 100%);box-shadow:0 18px 44px #063f2e20}
.hero:after{width:310px;height:310px;border-color:#f2d88a30;right:-100px;top:-145px;box-shadow:0 0 0 38px #ffffff05,0 0 0 76px #ffffff04}
.eyebrow{font-size:10px;letter-spacing:1.8px;color:#d9b95f}
h1{font-size:clamp(32px,4.7vw,54px);line-height:1.2;letter-spacing:-.7px;margin:13px 0 16px}
.hero p{font-size:15px;line-height:1.85;color:#dcebe3;max-width:660px}
.hero-actions{gap:12px;margin-top:24px}
.button{min-height:44px;border-radius:12px;padding:11px 18px;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease}
.button:hover{filter:brightness(1.04);transform:translateY(-1px)}
.button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e8bd5880;outline-offset:2px}
.button:disabled{opacity:.6;cursor:wait;transform:none}
.button-primary{background:linear-gradient(135deg,#f0cf77,#e2b54a);color:#193327;box-shadow:0 5px 12px #080f0b20}
.button-secondary{background:#ffffff14;border:1px solid #ffffff55;color:#fff}
.notice{border:1px solid #ffffff20;border-radius:12px;padding:11px 14px}
#authPanel,#workspace{margin-top:22px;padding:clamp(20px,3vw,32px)}
#authPanel{max-width:560px;margin-left:auto;margin-right:auto}
#authPanel h2,#workspace h2{font-size:24px;letter-spacing:-.3px;margin:5px 0 18px}
#sessionBox{padding:8px 0}
#sessionBox h2{margin-bottom:18px}
.auth-panel form{gap:15px}
.auth-panel label,#workspace label{gap:7px;font-size:13px;font-weight:700;color:#33483f}
.auth-panel input,#workspace input,#workspace select{width:100%;min-width:0;min-height:46px;padding:11px 13px;background:#fbfdfb;border:1px solid #d7e2db;border-radius:11px;color:var(--ink);font:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}
.auth-panel input:focus,#workspace input:focus,#workspace select:focus{border-color:#31916c;box-shadow:0 0 0 3px #1c8a5d18;outline:0}
#authPanel .button,#workspace .button{width:100%;margin-top:3px}
.form-error{padding:0 2px;color:#b42318;font-size:13px}
#workspace>.eyebrow{margin-bottom:3px}
#workspace>h2{margin-bottom:22px}
#workspace>label{display:block;margin:10px 0 16px}
#queueNote{background:#fff8e5;border:1px solid #f2dda0;color:#765617;margin:12px 0 18px}
#projectForm{padding:16px;background:#f7faf8;border:1px solid var(--line);border-radius:14px;margin:14px 0}
#projectForm label{margin-bottom:12px}
#projectBody{margin-top:20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
#pointForm,#spanForm{padding:20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#fff,#fbfdfb);display:grid;gap:13px;min-width:0}
#pointForm h3,#spanForm h3{margin:0;font-size:17px;color:#174d3b}
#gpsButton{width:auto;justify-self:start}
#gpsInfo{padding:10px 12px;border-radius:10px;background:#eef6f0;color:#4d6b5c;font-size:12px;overflow-wrap:anywhere}
#pointList,#spanList{margin:0;padding:0 0 0 22px;min-width:0}
#pointList li,#spanList li{padding:9px 4px;border-bottom:1px solid #edf1ee;font-size:12px;overflow-wrap:anywhere}
#projectBody>h3{margin:4px 0 0;font-size:17px}
#projectBody>ol,#projectBody>ul{grid-column:1/-1;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 12px 12px 34px}
.section-heading{margin:38px 0 17px;align-items:center}
.section-heading h2,.next-panel h2{font-size:23px;letter-spacing:-.3px}
.feature-grid{gap:16px}
.feature-card{position:relative;overflow:hidden;padding:22px;border-radius:17px;min-height:205px;box-shadow:0 6px 20px #0d332808;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.feature-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#0c7658,#e8bd58);opacity:.8}
.feature-card:hover{transform:translateY(-4px);border-color:#c7d9ce;box-shadow:0 15px 30px #0d332810}
.feature-icon{width:46px;height:46px;border-radius:14px;background:#eaf4ed;color:#08704f;font-size:24px}
.feature-card h3{font-size:16px;margin:15px 0 7px}
.feature-card p{line-height:1.7}
.feature-state{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;background:#f1f4f2;color:#68766f;font-size:10px}
.next-panel{margin-top:22px;padding:26px;border-radius:18px;background:linear-gradient(120deg,#fff,#f4f8f5)}
.phase-number{font-size:54px;color:#d8b45b}
footer{padding:20px 2px 0;border-top:1px solid #dfe7e2}
[hidden]{display:none!important}
@media(max-width:850px){.page-shell{padding:22px 16px 36px}#projectBody{grid-template-columns:1fr}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#projectBody>h3,#projectBody>ol,#projectBody>ul{grid-column:auto}}
@media(max-width:520px){.topbar{padding:10px 12px;gap:10px}.brand-mark{width:40px;height:40px;border-radius:12px;font-size:15px}.brand-copy strong{font-size:12px}.brand-copy span{font-size:10px}.status-pill{font-size:9px;padding:4px 7px}.page-shell{padding:14px 12px 30px}.hero{padding:25px 20px;border-radius:20px}h1{font-size:32px;letter-spacing:-.4px}.hero p{font-size:13px}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .button{width:100%}#authPanel,#workspace{padding:18px 15px;border-radius:17px}#authPanel h2,#workspace h2{font-size:21px}.feature-grid{gap:10px}.feature-card{padding:15px 13px;min-height:190px}.feature-card h3{font-size:13px}.feature-card p{font-size:11px}.feature-state{font-size:9px;padding:5px 7px}.section-heading{margin-top:30px}.section-heading h2,.next-panel h2{font-size:20px}.next-panel{padding:19px}.phase-number{font-size:36px}footer{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}