:root{--teal:#4ECDC4;--teal2:#2BA8A0;--ink:#1C4A4F;--purple:#5B3E7A;--lime:#D6E58A;--bg:#F6F8F7;--card:#fff}
*{box-sizing:border-box}body{margin:0;font-family:"IBM Plex Sans Thai","Noto Sans Thai",system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--ink);
background:radial-gradient(1200px 600px at 100% -10%,#e9e2f3 0,transparent 60%),radial-gradient(900px 500px at -10% 10%,#dff6f3 0,transparent 55%),linear-gradient(180deg,#fbfcf6,#f2f5f4);min-height:100vh}
header{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid #e6ece9}
.hd{display:flex;align-items:center;gap:12px;max-width:1080px;margin:auto;padding:10px 16px}.logo{height:40px}.hd .ghost{margin-left:auto}
.tag{background:linear-gradient(90deg,var(--lime),#f1f6c9);color:#4a5a12;border-radius:999px;padding:2px 12px;font-size:13px;font-weight:600}
nav{display:flex;gap:8px;overflow-x:auto;max-width:1080px;margin:auto;padding:4px 16px 12px}
.step{display:flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid #dbe5e2;background:#fff;border-radius:999px;padding:6px 14px 6px 6px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.step i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#eef3f1;font-weight:700}
.step.on{background:linear-gradient(90deg,var(--teal),var(--purple));color:#fff;border-color:transparent}.step.on i{background:#fff;color:var(--purple)}
main{max-width:1080px;margin:auto;padding:20px 16px 60px}
h1{font-size:26px;margin:4px 0}h1 small{display:block;font-size:15px;font-weight:400;color:#6b7f80}
.card{background:var(--card);border-radius:20px;padding:20px;margin:16px 0;box-shadow:0 10px 30px -18px #2b4a4a55,0 1px 0 #e9efed}
.card h3{margin:0 0 8px;font-size:19px}.help{background:#f1faf9;border-left:4px solid var(--teal);border-radius:10px;padding:10px 14px;color:#2e5a5d;font-size:15px}
.tw{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:15px}th{color:#6b7f80;font-weight:500;text-align:left;padding:8px;border-bottom:1px solid #e5ecea}td{padding:10px 8px;border-bottom:1px solid #f0f3f2}
.num{text-align:right;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}label{display:flex;flex-direction:column;font-size:14px;color:#56706f;gap:4px}
input,select,textarea{font:inherit;font-size:16px;padding:10px 12px;border:1px solid #d5dfdc;border-radius:12px;background:#fff;color:var(--ink)}input:focus,select:focus{outline:2px solid var(--teal);border-color:transparent}
button{font:inherit;font-size:15px;padding:9px 16px;border-radius:12px;border:1px solid #cfdcd8;background:#fff;color:var(--ink);cursor:pointer}
button.p{background:linear-gradient(90deg,var(--teal2),var(--purple));color:#fff;border:0;font-weight:600;padding:11px 20px}button.d{color:#a33;border-color:#eccaca}
.ghost{background:transparent}.row{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:12px}
.empty{text-align:center;padding:30px;color:#7a8e8e}.empty b{display:block;font-size:40px}
.pill{display:inline-block;padding:1px 10px;border-radius:999px;font-size:13px;background:#eef3f1}.pill.def{background:#e6f8f6;color:#147a73}
.flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.box{flex:1;min-width:140px;border-radius:16px;padding:14px;background:#f7faf9;text-align:center}
.box b{display:block;font-size:24px}.box.np{background:#eef9f8}.box.lp{background:linear-gradient(135deg,#efe8f7,#f3f8dc)}.arrow{font-size:22px;color:#9bb}
.next{display:flex;justify-content:flex-end;margin-top:8px}.muted{color:#7a8e8e;font-size:14px}.err{color:#b03a3a}.ok{color:#14806f}.hide{display:none!important}
#login{position:fixed;inset:0;z-index:9;display:grid;place-items:center;background:linear-gradient(135deg,#dff6f3,#efe8f7 60%,#f5f9de)}
#login form{width:min(360px,92vw);display:flex;flex-direction:column;gap:12px;text-align:center}.llogo{width:220px;margin:auto}#login h2{margin:0}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:12px;z-index:10}
