:root{--bg:#f4f7fb;--panel:#fff;--ink:#182230;--muted:#667085;--line:#d7e0e9;--brand:#174a7e;--brand2:#0f6b55;--warn:#fff3cf;--danger:#b42318;--shadow:0 8px 25px rgba(16,24,40,.08)}
*{box-sizing:border-box}img{max-width:100%}body{margin:0;overflow-x:hidden;font-family:Inter,system-ui,-apple-system,"Noto Sans Lao","Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}
button,input,select,textarea{font:inherit}.hidden{display:none!important}.login{min-height:100vh;display:grid;place-items:center;padding:20px}.login-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:26px;width:min(430px,100%)}.login-card h1{margin:0;color:var(--brand)}.login-card p{color:var(--muted)}.login-card input{width:100%;margin:6px 0;padding:10px;border:1px solid #cbd5e1;border-radius:9px}.hint{background:var(--warn);padding:10px;border-radius:9px;font-size:12px}
.app{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.side{background:#102f50;color:white;padding:15px;height:100vh;overflow:auto;position:sticky;top:0}.brand h1{font-size:18px;margin:2px 0}.brand p{font-size:12px;opacity:.72}.user-card{background:#163d63;border-radius:10px;padding:10px;margin:15px 0;font-size:12px}.nav-title{font-size:10px;text-transform:uppercase;opacity:.55;margin:14px 8px 5px}.nav button{display:block;width:100%;border:0;background:transparent;color:#dbe8f4;text-align:left;padding:8px 9px;border-radius:7px;margin:1px 0;cursor:pointer}.nav button:hover,.nav button.active{background:#1f527f;color:#fff}
.main{min-width:0}.top{background:#fff;border-bottom:1px solid var(--line);padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;z-index:5}.top .grp{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:8px 11px;cursor:pointer}.btn.primary{background:var(--brand);border-color:var(--brand);color:white}.btn.green{background:var(--brand2);border-color:var(--brand2);color:white}.btn.danger{color:var(--danger)}select,input,textarea{border:1px solid #cbd5e1;border-radius:8px;padding:8px;background:#fff}
.content{padding:18px;max-width:1700px;margin:auto}.notice{background:var(--warn);border:1px solid #e7d18e;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px}.page-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}.page-head h2{margin:0}.page-head p{margin:4px 0;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:14px}.card .k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.card .v{font-size:27px;font-weight:760;margin-top:4px}.card .s{font-size:12px;color:var(--muted)}
.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.panel h3{margin:0 0 10px}.workflow{display:flex;flex-wrap:wrap;gap:7px;align-items:center}.step{padding:6px 8px;border-radius:999px;background:#eef2f6;font-size:11px}.step.current{background:#dff3e9;color:#08613e;font-weight:700}
.toolbar{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:9px}.search{min-width:280px}.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:10px}table{width:100%;border-collapse:collapse;min-width:1000px}th,td{font-size:12px;text-align:left;vertical-align:top;border-bottom:1px solid #edf0f4;padding:8px 9px}th{background:#edf3fa;color:#264765;position:sticky;top:0}.small{border:1px solid #cbd5e1;background:#fff;border-radius:6px;padding:4px 6px;margin-right:3px;cursor:pointer}.badge{display:inline-block;padding:3px 7px;border-radius:999px;background:#eef2f6;font-size:11px}.ok{background:#dcfae6;color:#05603a}.warn{background:#fef0c7;color:#7a2e0e}.bad{background:#fee4e2;color:#912018}
.bar-row{display:grid;grid-template-columns:210px 1fr 58px;gap:8px;align-items:center;font-size:12px;margin:8px 0}.bar{height:10px;background:#e8eef4;border-radius:999px;overflow:hidden}.bar span{display:block;height:100%;background:var(--brand2)}
.guide{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.guide p{font-size:13px;line-height:1.5}.upload{border:1px dashed #9fb2c7;padding:12px;border-radius:9px;background:#f9fbfd}
.modal{position:fixed;inset:0;background:rgba(15,23,42,.48);display:none;align-items:center;justify-content:center;padding:18px;z-index:20}.modal.open{display:flex}.modal-card{background:#fff;border-radius:14px;max-width:900px;width:100%;max-height:92vh;overflow:auto}.mh,.mf{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.mf{border-top:1px solid var(--line);border-bottom:0;justify-content:flex-end;gap:8px}.mb{padding:16px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.ff.full{grid-column:1/-1}.ff label{display:block;font-size:12px;font-weight:650;margin-bottom:4px}.ff input,.ff select,.ff textarea{width:100%}.ff textarea{min-height:78px}.req{color:var(--danger)}
@media(max-width:1050px){.app{grid-template-columns:220px 1fr}.cards{grid-template-columns:1fr 1fr}.grid2,.guide{grid-template-columns:1fr}}
@media(max-width:720px){
.app{display:block}
.side{height:auto;position:relative;overflow-x:hidden;max-width:100%}
.nav{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.nav-title{display:none}.nav button{width:auto;white-space:nowrap}
.top{position:relative;flex-wrap:wrap}
.top .grp{width:100%;justify-content:flex-start}
.top .grp:last-child{justify-content:flex-end}
.top select{flex:1 1 160px;min-width:0;max-width:100%}
.content{padding:10px}
.cards{grid-template-columns:1fr 1fr}
.mb{grid-template-columns:1fr}
.page-head{display:block}
.toolbar{display:block}.search{min-width:0;width:100%;margin-bottom:8px}
.bar-row{grid-template-columns:1fr 70px;grid-template-areas:"label label" "bar value";gap:4px 8px}
.bar-row span:first-child{grid-area:label}.bar-row .bar{grid-area:bar}.bar-row b{grid-area:value;text-align:right}
.modal{padding:8px}.modal-card{max-height:96vh}
}
@media(max-width:480px){.cards{grid-template-columns:1fr}}