:root{--navy:#07547f;--blue:#087caf;--line:#cbdde8;--bg:#eef5f9;--text:#092b43;--muted:#62798b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif;font-size:15px}header{min-height:76px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:10px max(24px,calc((100vw - 1760px)/2));position:sticky;top:0;z-index:20}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#667d8c;white-space:nowrap;font-size:12px}.brand img{width:68px;height:58px;object-fit:contain}.who{margin-left:auto;max-width:190px;font-size:13px}.who small{display:block;color:var(--muted)}nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}nav a{padding:9px 10px;border-radius:8px;text-decoration:none;color:#31576f;white-space:nowrap}nav a:hover{background:#eaf5fb;color:#0574aa}main{max-width:1760px;margin:0 auto;padding:16px 12px 50px}footer{text-align:center;color:#7890a0;padding:20px}.hero{background:linear-gradient(120deg,#075c8b,#1185b3);color:#fff;padding:30px 38px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.hero h1{font-size:32px;margin:0 0 8px}.hero p{margin:0}.hero-btn{background:#fff;color:#075c8b}.panel{background:#fff;border:1px solid #d8e5ec;border-radius:16px;padding:22px;margin:16px 0;box-shadow:0 8px 24px rgba(30,80,105,.05)}h1,h2,h3{color:#07547f}h1{margin:0 0 7px}h2{margin:0 0 15px;font-size:21px}.page-title,.panel-head,.action-bar,.sticky-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.page-title{margin:6px 0 14px}.page-title p{margin:3px 0;color:var(--muted)}.action-bar{justify-content:flex-start;flex-wrap:wrap;margin:12px 0}.inline{display:inline}.btn{display:inline-block;background:#f7fbfd;color:#164c69;border:1px solid #b9cfdb;border-radius:9px;padding:10px 15px;text-decoration:none;cursor:pointer;font:inherit;font-weight:bold}.btn:hover{filter:brightness(.97)}.btn.primary,.btn.blue,.btn.navy{color:#fff;border-color:transparent}.btn.primary{background:#087caf}.btn.blue{background:#357fd2}.btn.navy{background:#07547f}.btn.amber{background:#efa326;color:#fff;border-color:#efa326}.btn.wide{width:100%}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpi{background:#fff;border:1px solid #d8e5ec;border-left:5px solid #0780b6;border-radius:14px;padding:20px}.kpi span{display:block;color:var(--muted)}.kpi b{font-size:34px;color:#07547f}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%}th,td{border:1px solid #c8dbe6;padding:9px;vertical-align:top}th{background:#dfeff8;color:#073c5d}td small{display:block;color:var(--muted)}.empty{text-align:center;color:var(--muted)}.badge{display:inline-block;padding:5px 11px;border-radius:99px;font-size:13px;white-space:nowrap}.badge.gray{background:#e9eef1}.badge.amber{background:#fff0d3;color:#985e00}.badge.green{background:#dff5e8;color:#16713b}.badge.red{background:#fee2e2;color:#9f2222}.badge.blue{background:#dcedff;color:#165c9c}.badge.navy{background:#d9eaf2;color:#064866}.detail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.detail-grid>div{background:#f5f9fb;padding:13px;border-radius:10px}.detail-grid small,.detail-grid b{display:block}.note-box{background:#f7fafc;border-left:4px solid #78b9d8;padding:12px}.approval-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.approval-card{border:1px solid #bed4df;border-top:4px solid #68a9ca;border-radius:9px;padding:12px;min-height:180px}.signature-preview{display:block;width:min(100%,320px);height:84px;object-fit:contain;object-position:center;margin:8px auto}.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}label{display:block;font-weight:bold;margin:7px 0}input,select,textarea{width:100%;border:1px solid #bdcfda;border-radius:7px;padding:9px;background:#fff;font:inherit;color:#123}textarea{resize:vertical}.checks{display:flex;gap:12px 28px;flex-wrap:wrap;background:#fffaf0;border:1px solid #f0dcae;border-radius:10px;padding:13px}.check{display:flex;align-items:center;gap:6px}.check input{width:auto}.sticky-actions{position:sticky;bottom:0;background:rgba(255,255,255,.96);border:1px solid var(--line);padding:12px;border-radius:12px;justify-content:flex-end;z-index:10}.flash{padding:12px;border-radius:9px;margin:8px 0}.flash.success{background:#e1f6e8;border:1px solid #9ad0ab}.flash.error{background:#fee7e7;border:1px solid #df9b9b}.login-wrap{min-height:70vh;display:grid;place-items:center}.login{width:min(460px,94vw);text-align:center;padding:36px}.login img{width:105px}.login label{text-align:left}.link-code{display:grid;gap:7px;padding:20px;background:#eef9ff;border:2px dashed #2787b3;border-radius:12px;text-align:center}.link-code b{font-size:34px;letter-spacing:5px}code{background:#eef2f5;padding:3px 6px;border-radius:5px}@media(max-width:1050px){header{position:static;align-items:flex-start;flex-wrap:wrap}.who{margin-left:0}.kpis,.detail-grid,.form-grid{grid-template-columns:repeat(2,1fr)}.approval-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:25px}}@media(max-width:650px){main{padding:10px}.hero{padding:22px;display:block}.hero .btn{margin-top:15px}.kpis,.detail-grid,.form-grid,.approval-grid{grid-template-columns:1fr}.panel{padding:14px}.page-title{align-items:flex-start;flex-direction:column}th,td{padding:7px;font-size:13px}}