:root{--ci-green: #055c37;--ci-green-700: #044a2c;--ci-green-50: #e9f2ee;--white: #ffffff;--gray-50: #f7f8f8;--gray-100: #eef0f0;--gray-200: #e1e4e4;--gray-400: #9aa3a1;--gray-600: #5b6663;--gray-800: #2b322f;--error: #b00020;--success: #055c37;--radius: 12px;--shadow: 0 2px 12px rgba(5, 92, 55, .08)}*{box-sizing:border-box}input,select,textarea,button{font-family:inherit}[hidden]{display:none!important}.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.app-loading{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#fff;transition:opacity .35s ease}.app-loading.hide{opacity:0;pointer-events:none}.loading-logo{width:200px;max-width:60vw;height:auto}.spinner{width:38px;height:38px;border:4px solid #e1e4e4;border-top-color:#055c37;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}body{margin:0;font-family:Noto Sans Thai,Segoe UI,system-ui,-apple-system,sans-serif;background:var(--gray-50);color:var(--gray-800);line-height:1.5}.topbar{display:flex;align-items:center;gap:16px;padding:14px 24px;background:var(--ci-green);color:var(--white);box-shadow:var(--shadow)}.topbar .logo{height:48px;width:auto;object-fit:contain;background:var(--white);border-radius:6px;padding:6px 12px}.topbar .brand h1{margin:0;font-size:1.25rem}.topbar .brand p{margin:0;font-size:.8rem;opacity:.9}.topbar .spacer{flex:1}.user-box{display:flex;align-items:center;gap:12px;font-size:.9rem}.container{max-width:920px;margin:24px auto;padding:0 16px}.container-wide{max-width:1500px;width:100%}.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:20px}.card.center{text-align:center;max-width:460px;margin:60px auto}h2{color:var(--ci-green);margin-top:0}label{display:block;font-weight:600;margin:16px 0 6px}.req{color:var(--error)}.hint{display:block;color:var(--gray-600);font-size:.8rem;margin-top:4px}input[type=text],select,input[type=file]{width:100%;padding:11px 12px;border:1px solid var(--gray-200);border-radius:8px;font-size:1rem;background:var(--white);color:var(--gray-800)}input[type=text]:focus,select:focus{outline:none;border-color:var(--ci-green);box-shadow:0 0 0 3px var(--ci-green-50)}.btn-primary{margin-top:22px;background:var(--ci-green);color:var(--white);border:none;border-radius:8px;padding:12px 22px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .15s}.btn-primary:hover{background:var(--ci-green-700)}.btn-primary:disabled{background:var(--gray-400);cursor:not-allowed}.btn-ghost{background:transparent;border:1px solid var(--gray-200);color:var(--ci-green);border-radius:8px;padding:6px 12px;cursor:pointer;font-weight:600}.btn-ghost:hover{background:var(--ci-green-50)}.user-box .btn-ghost{color:var(--white);border-color:#ffffffb3;background:transparent}.user-box .btn-ghost:hover{background:#ffffff2e}.checkbox{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;font-weight:400}.checkbox input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--ci-green);flex-shrink:0;cursor:pointer}.checkbox a{font-weight:600}.preview{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.thumb{width:88px;height:88px;object-fit:cover;border-radius:8px;border:1px solid var(--gray-200)}.status{margin-top:16px;font-weight:600;min-height:1.2em}.status.info{color:var(--gray-600)}.status.error{color:var(--error)}.status.success{color:var(--success)}.footer-link{text-align:center}.footer-link a,a{color:var(--ci-green)}.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}.tab{background:var(--white);border:1px solid var(--gray-200);border-bottom:3px solid transparent;color:var(--gray-600);padding:10px 18px;border-radius:8px 8px 0 0;cursor:pointer;font-weight:600;font-size:.95rem}.tab.active{color:var(--ci-green);border-bottom-color:var(--ci-green);background:var(--ci-green-50)}.filters{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}.filters>div{flex:1;min-width:160px}.filters label,.filters .btn-primary{margin-top:0}.count{color:var(--gray-600);font-size:.9rem}#table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--gray-100);font-size:.9rem;vertical-align:top}th{background:var(--gray-50);color:var(--ci-green);white-space:nowrap}tbody tr:hover{background:var(--ci-green-50)}#uploads-table th:nth-child(1),#uploads-table td:nth-child(1){white-space:nowrap;width:1%}#uploads-table td:nth-child(2){min-width:160px}#uploads-table td:nth-child(3){min-width:160px}#uploads-table td:nth-child(4){word-break:break-word;max-width:320px}#uploads-table th:nth-child(5),#uploads-table td:nth-child(5){white-space:nowrap;width:1%}#uploads-table th:nth-child(6),#uploads-table td:nth-child(6){white-space:nowrap;width:1%}#emp-table th:nth-child(1),#emp-table td:nth-child(1){white-space:nowrap;width:1%}#emp-table th:nth-child(2),#emp-table td:nth-child(2){white-space:nowrap;width:1%}#emp-table td:nth-child(3){min-width:150px}#emp-table td:nth-child(4){min-width:140px}#emp-table td:nth-child(5){min-width:140px}#emp-table td:nth-child(6){word-break:break-word;max-width:300px}#emp-table th:nth-child(7),#emp-table td:nth-child(7){white-space:nowrap;width:1%}#emp-table th:nth-child(8),#emp-table td:nth-child(8){white-space:nowrap;width:1%}td .btn-ghost{white-space:nowrap}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:50}.modal-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3}.modal-content{position:relative;max-width:92vw;max-height:90vh;z-index:1}.modal-content img{max-width:92vw;max-height:84vh;border-radius:8px;background:var(--white)}.modal-close{position:absolute;top:-42px;right:0;background:var(--white)}.modal-content.dialog{background:var(--white);border-radius:var(--radius);padding:36px 32px;width:min(92vw,380px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 8px 30px #0003}.dialog h3{margin:0;color:var(--ci-green);font-size:1.2rem}.dialog p{margin:0;color:var(--gray-600)}.dialog .btn-primary{margin-top:8px;width:100%}.dialog-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;color:var(--white)}.dialog-icon.success{background:var(--ci-green)}.dialog-icon.error{background:var(--error)}.modal-content.pdpa{background:var(--white);border-radius:var(--radius);padding:26px 26px 22px;width:min(94vw,560px);text-align:left;box-shadow:0 8px 30px #0003}.pdpa h3{margin:0 0 12px;color:var(--ci-green)}.pdpa-body{max-height:50vh;overflow-y:auto;border:1px solid var(--gray-200);border-radius:8px;padding:14px 16px;font-size:.92rem;color:var(--gray-800)}.pdpa-body p{margin:0 0 10px}.pdpa-note{color:var(--gray-400);font-size:.8rem}.pdpa-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}.pdpa-actions .btn-primary{margin-top:0}@media (max-width: 640px){.pdpa-actions{flex-direction:column-reverse}.pdpa-actions .btn-primary,.pdpa-actions .btn-ghost{width:100%}}.topbar{flex-wrap:wrap}.topbar .brand{min-width:0}@media (max-width: 768px){.container{margin:16px auto}.card{padding:18px 16px}h2{font-size:1.15rem}}@media (max-width: 640px){.topbar{padding:10px 14px;gap:12px}.topbar .logo{height:40px;padding:5px 10px}.topbar .brand h1{font-size:1rem}.topbar .brand p{font-size:.72rem}.container{padding:0 12px}.card{padding:16px 14px}.btn-primary{width:100%;padding:14px;font-size:1.05rem}input[type=text],select{font-size:16px}.thumb{width:72px;height:72px}.filters{gap:12px}.filters>div{min-width:100%}.filters .btn-primary,.count{width:100%}.user-box{width:100%;justify-content:flex-end}}