:root{--teal:#0F6E6E;--teal2:#138a8a;--gold:#F2A93B;--sun:#F7C873;--cream:#FFF8EC;--ink:#23302f;--muted:#5d6b6a;--card:#fff;--line:#eadfcb;--red:#c0392b;--green:#2e8b57}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--ink);font-family:"Noto Sans","Noto Sans Khmer","Noto Sans Lao","Noto Sans Myanmar","Noto Sans TC","Noto Sans SC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;line-height:1.55}
body{padding-bottom:76px}
a{color:var(--teal)}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:rgba(255,248,236,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--teal);font-weight:700;letter-spacing:.08em;font-size:1.15rem}
.brand img{height:34px}
.lang{display:flex;align-items:center;gap:6px}.lang select{max-width:150px}.lang img{width:22px;height:22px}
select,input,textarea,button{font:inherit}
select,input[type=text],input[type=date],textarea{border:1px solid #d9cdb6;border-radius:10px;padding:8px 10px;background:#fff;color:var(--ink);max-width:100%}
main{max-width:860px;margin:0 auto;padding:16px}
main.wide{max-width:1100px}
.hero{position:relative;border-radius:22px;overflow:hidden;min-height:300px;background:linear-gradient(160deg,#ffe2a8,#f7c873 40%,#0F6E6E);color:#fff;display:flex;align-items:flex-end}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .ov{position:relative;padding:22px;background:linear-gradient(transparent,rgba(10,40,40,.78));width:100%}
.hero h1{margin:0 0 4px;font-size:2rem;letter-spacing:.06em}
.hero p{margin:0;opacity:.95}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;margin:14px 0;box-shadow:0 2px 10px rgba(80,60,20,.05)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tile{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}
.tile img{width:44px;height:44px;flex:none}
.tile b{display:block;color:var(--teal)}
.tile small{color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:11px 20px;background:var(--teal);color:#fff;cursor:pointer;text-decoration:none;font-weight:600}
.btn.alt{background:#fff;color:var(--teal);border:1.5px solid var(--teal)}
.btn.gold{background:var(--gold);color:#3a2600}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.muted{color:var(--muted)}
.note{font-size:.85rem;color:var(--muted);background:#fff6e3;border-left:4px solid var(--gold);padding:8px 12px;border-radius:8px}
.draft{font-size:.72rem;color:#8a5a00;background:#fff1cc;border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle}
.q{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;margin:10px 0}
.q.missing{border-color:var(--red);box-shadow:0 0 0 2px rgba(192,57,43,.15)}
.q .t{font-weight:600;margin-bottom:10px}
.q .n{color:var(--teal);margin-right:6px}
.scale{display:grid;grid-template-columns:auto repeat(7,1fr) auto;gap:4px;align-items:center}
.scale small{font-size:.72rem;color:var(--muted)}
.scale label{display:block}
.scale input{position:absolute;opacity:0;pointer-events:none}
.scale span{display:flex;align-items:center;justify-content:center;height:40px;border-radius:10px;border:1.5px solid #d6e6e6;background:#f6fbfb;cursor:pointer;font-weight:600;color:var(--teal)}
.scale input:checked+span{background:var(--teal);color:#fff;border-color:var(--teal)}
.scale input:focus-visible+span{outline:3px solid var(--gold)}
.opts label{display:flex;gap:10px;align-items:flex-start;padding:8px;border-radius:10px;border:1px solid #e5eded;margin:6px 0;background:#f9fcfc;cursor:pointer}
.progress{position:sticky;top:58px;z-index:10;background:var(--cream);padding:6px 0}
.bar{height:8px;background:#e9e1d1;border-radius:8px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--teal));width:0}
nav.bottom{position:fixed;bottom:0;left:0;right:0;z-index:30;display:flex;justify-content:space-around;background:#fff;border-top:1px solid var(--line);padding:6px 2px calc(6px + env(safe-area-inset-bottom))}
nav.bottom a{display:flex;flex-direction:column;align-items:center;font-size:.68rem;color:var(--muted);text-decoration:none;min-width:56px}
nav.bottom a img{width:24px;height:24px;opacity:.75}
nav.bottom a.on{color:var(--teal);font-weight:700}nav.bottom a.on img{opacity:1}
#toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#23302f;color:#fff;padding:10px 16px;border-radius:12px;opacity:0;transition:.3s;pointer-events:none;z-index:50;max-width:90vw}
#toast.show{opacity:1}
.tribute img.top{width:100%;border-radius:18px;max-height:340px;object-fit:cover}
.tribute h2{font-family:"Noto Serif",serif;color:var(--teal)}
.tribute blockquote{font-family:"Noto Serif",serif;font-style:italic;border-left:4px solid var(--gold);margin:12px 0;padding:6px 14px;color:#3d4a49}
table.list{width:100%;border-collapse:collapse}table.list td,table.list th{border-bottom:1px solid var(--line);padding:8px;text-align:left;font-size:.92rem}
.qrbox{display:flex;justify-content:center;padding:10px;background:#fff;border-radius:12px}
.qrbox img,.qrbox canvas{width:min(320px,80vw);height:auto;image-rendering:pixelated}
video.scan{width:100%;max-width:420px;border-radius:12px;background:#000}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.tabs button{border:1px solid var(--teal);background:#fff;color:var(--teal);border-radius:999px;padding:6px 14px;cursor:pointer}.tabs button.on{background:var(--teal);color:#fff}
/* report pages */
.rpt{display:flex;flex-direction:column;align-items:center;gap:16px}
.page-wrap{width:100%;overflow:hidden;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.12);border-radius:4px}
.page{position:relative;transform-origin:0 0;background:#fff;font-family:Calibri,"Noto Sans","Noto Sans Khmer","Noto Sans Lao","Noto Sans Myanmar",sans-serif;color:#000}
.page .c{position:absolute;overflow:hidden;padding:1px 3px;white-space:nowrap;line-height:1.2;display:flex}
.page .c.w{white-space:pre-wrap;word-break:break-word}
.page img{position:absolute}
.page svg{position:absolute}
.spinner{width:42px;height:42px;border:4px solid #eadfcb;border-top-color:var(--teal);border-radius:50%;animation:sp 1s linear infinite;margin:30px auto}@keyframes sp{to{transform:rotate(360deg)}}
@media print{.top,nav.bottom,.noprint,#toast{display:none!important}body{padding:0;background:#fff}main{max-width:none;padding:0}.page-wrap{box-shadow:none;page-break-after:always;border-radius:0}.rpt{gap:0}}
/* v2 friendly mobile-first */
#saved{white-space:nowrap;font-size:.72rem;color:var(--green);background:#e8f6ee;border-radius:999px;padding:3px 10px;opacity:0;transition:opacity .3s;margin-left:auto;margin-right:8px}#saved.on{opacity:1}
.sh{display:flex;align-items:center;gap:10px;color:var(--teal)}.sh img{width:34px;height:34px}
.banner{width:100%;max-height:200px;object-fit:cover;border-radius:18px;margin:4px 0 8px}
.heromark{width:54px;height:54px;background:#fff;border-radius:14px;padding:6px;margin-bottom:6px}
.btn.big{padding:15px 22px;font-size:1.05rem;min-height:54px}.btn .bi{width:24px;height:24px;background:#fff;border-radius:6px;padding:2px}
p.big{font-size:1.05rem}
.resume{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);border-color:var(--gold);background:#fff8e6}.resume img{width:46px}.resume>div{flex:1}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-bottom:14px}
.step{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink)}.step img{width:100%;height:150px;object-fit:cover;display:block}.step div{padding:10px 14px}.step b{display:block;color:var(--teal);font-size:1.05rem}.step small{color:var(--muted)}
.num{display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#3a2600;font-weight:700;align-items:center;justify-content:center;margin-bottom:4px}
.qnav{justify-content:space-between;margin:10px 0;display:none}
.onecard #qs .q{display:none}.onecard #qs .q.cur{display:block;min-height:300px;padding:22px 16px}
.onecard .qnav{display:flex;position:sticky;bottom:72px;background:var(--cream);padding:8px 0;z-index:5}
.onecard #qs .q.cur .t{font-size:1.25rem;line-height:1.5;margin-bottom:22px}
.onecard .scale{grid-template-columns:repeat(7,1fr)}.onecard .scale small{grid-column:span 7;display:none}
.onecard .scale span{height:56px;font-size:1.2rem}
.onecard .scale::before,.onecard .scale::after{content:none}
.onecard .opts label{padding:14px;font-size:1.05rem}
.summary{border-color:var(--gold);background:linear-gradient(180deg,#fffaf0,#fff)}
.sumhead{display:flex;gap:14px;align-items:center}.sumhead img{width:110px;height:90px;object-fit:cover;border-radius:14px}
.codes{display:flex;gap:8px}.codes span{background:var(--teal);color:#fff;border-radius:10px;padding:4px 12px;font-weight:700;letter-spacing:.08em}
.sumgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:10px}.sumgrid>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px}.sumgrid h4{margin:0 0 4px;color:var(--teal)}.sumgrid ul{margin:0;padding-left:18px}
.cheer{font-weight:600;color:#7a4b00;margin:12px 0 0}
@media (min-width:900px){nav.bottom{max-width:860px;margin:0 auto;border-radius:16px 16px 0 0;left:0;right:0}}