:root{font-family:'IBM Plex Sans Thai',sans-serif;color:#172a43;background:#f4f7fb;font-synthesis:none;font-optical-sizing:auto;font-size:16px}*{box-sizing:border-box}body{margin:0;min-height:100vh}.sidebar{width:244px;background:#102b4e;color:#e9f1fb;position:fixed;inset:0 auto 0 0;padding:27px 17px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:0 12px 38px}.brand-mark{height:37px;width:37px;border-radius:11px;background:#45c5b4;color:#092d4c;display:grid;place-items:center;font-weight:700;font-size:20px}.brand b,.brand small{display:block}.brand b{font-size:15px;letter-spacing:.1px}.brand small{font-size:13px;color:#a9bdd2;margin-top:2px}.side-label{font-size:12px;color:#8fa6c0;padding:0 12px 11px}.nav{background:none;border:0;color:#b7c9dc;text-align:left;padding:12px 14px;border-radius:8px;font:500 15px inherit;cursor:pointer;margin:2px 0}.nav span{display:inline-block;width:27px;color:#91a8c2;font-size:17px}.nav.active{background:#204368;color:white}.nav.active span{color:#53d4bf}.side-bottom{margin-top:auto;border-top:1px solid #294662;padding:17px 8px 0;display:flex;gap:10px;align-items:center}.help-icon{border:1px solid #8096af;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;color:#c5d4e3;font-size:13px}.side-bottom b,.side-bottom small{display:block}.side-bottom b{font-size:13px;font-weight:500}.side-bottom small{font-size:12px;color:#9fb3c9;margin-top:3px}.main{margin-left:244px;padding:0 38px;max-width:1700px}.topbar{height:107px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e4eaf1}.eyebrow{font-size:13px;color:#74869d}.eyebrow span{padding:0 7px;color:#b5c0ce}.topbar h1{font-size:24px;margin:3px 0 0;font-weight:600;letter-spacing:-.4px}.top-actions{display:flex;align-items:center;gap:20px}.select-label,.filter-controls label{font-size:12px;color:#77869a;display:flex;align-items:center;gap:8px}.select-label select{font-weight:600}.primary,.secondary{font:500 14px 'IBM Plex Sans Thai',sans-serif;border:0;border-radius:7px;padding:10px 15px;cursor:pointer}.primary{background:#087f83;color:#fff;box-shadow:0 2px 5px #087f8327}.primary:hover{background:#066c70}.primary span{font-size:19px;vertical-align:-1px;margin-right:5px}.secondary{background:#edf2f7;color:#40536b}.filters{margin:25px 0 17px;display:flex;align-items:center;justify-content:space-between}.filter-title{display:flex;align-items:baseline;gap:12px}.filter-title strong{font-size:15px;font-weight:600}.filter-title span{font-size:12px;color:#8998aa}.filter-controls{display:flex;gap:12px}.filter-controls label{background:#fff;border:1px solid #e2e8ef;border-radius:7px;padding:5px 10px 5px 12px}.filter-controls select,.select-label select,.record-filters select{font:500 13px 'IBM Plex Sans Thai',sans-serif;color:#30435b;border:0;background:transparent;outline:0}.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.card{background:#fff;border:1px solid #e6ebf1;border-radius:9px;padding:16px 17px 14px;min-height:123px;box-shadow:0 2px 6px #1e385008}.card-top{display:flex;justify-content:space-between;align-items:center;color:#6d7f94;font-size:12px}.card-icon{height:28px;width:28px;border-radius:7px;background:#eef7f7;color:#16858a;display:grid;place-items:center;font-size:15px}.card:nth-child(2) .card-icon{background:#eef2ff;color:#6374ce}.card:nth-child(3) .card-icon{background:#fff6e8;color:#ca9032}.card:nth-child(4) .card-icon{background:#edf8f0;color:#41945c}.card:nth-child(5) .card-icon{background:#f4efff;color:#8567ba}.card-value{font-size:23px;font-weight:600;letter-spacing:-.5px;margin-top:10px;white-space:nowrap}.card-note{font-size:11px;color:#8a98aa;margin-top:3px}.chart-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;margin-top:17px}.panel{background:#fff;border:1px solid #e6ebf1;border-radius:9px;box-shadow:0 2px 6px #1e385008}.bar-panel,.donut-panel{min-height:292px;padding:18px 20px}.panel-head{display:flex;justify-content:space-between;align-items:flex-start}.panel-head h2,.records-toolbar h2{font-size:15px;font-weight:600;margin:0;color:#233750}.panel-head p,.records-toolbar p{margin:3px 0 0;font-size:12px;color:#8795a7}.legend{display:flex;gap:15px;color:#718198;font-size:11px;padding-top:3px}.legend span{display:flex;align-items:center;gap:6px}.legend i{width:9px;height:9px;border-radius:2px}.planned{background:#bfcbd9}.actual{background:#11888b}.bar-chart{height:205px;display:flex;align-items:stretch;gap:7px;padding:12px 5px 0;position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 49px,#edf1f5 50px)}.month{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:4px;position:relative;height:100%}.bar{width:10px;max-width:35%;border-radius:3px 3px 0 0;min-height:3px;align-self:flex-end}.bar.plan{background:#c7d2de}.bar.spent{background:#16898a}.month span{position:absolute;bottom:-21px;font-size:10px;color:#8997a8}.donut-wrap{display:flex;align-items:center;justify-content:center;gap:22px;height:222px}.donut-svg{width:148px;height:148px;transform:rotate(-90deg);overflow:visible}.donut-center{font:600 17px 'IBM Plex Sans Thai',sans-serif;fill:#263c54;transform:rotate(90deg);transform-origin:center}.donut-label{font:11px 'IBM Plex Sans Thai',sans-serif;fill:#8391a3;transform:rotate(90deg);transform-origin:center}.donut-legend{display:grid;gap:11px;font-size:12px;color:#61738a}.donut-legend div{display:grid;grid-template-columns:9px auto;gap:7px;align-items:center}.donut-legend i{width:8px;height:8px;border-radius:50%}.donut-legend b{font-weight:500;color:#283c55}.donut-legend small{grid-column:2;color:#8c99a9;font-size:11px;margin-top:-7px}.icon-button{border:0;background:transparent;color:#8c9bae;font-size:19px}.recent-panel{margin-top:17px;padding:17px 19px 4px}.recent-panel .panel-head{align-items:center;padding-bottom:11px}.text-button{font:500 12px 'IBM Plex Sans Thai',sans-serif;color:#087f83;border:0;background:none;cursor:pointer}.text-button span{font-size:17px;margin-left:5px}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}thead th{font-size:11px;font-weight:500;color:#8795a7;background:#f8fafc;padding:9px 10px}tbody td{border-bottom:1px solid #eef1f5;padding:10px;font-size:12px;color:#52647b}tbody tr:last-child td{border-bottom:0}.right{text-align:right}.amount{font-weight:600;color:#273b54;font-variant-numeric:tabular-nums}.date{color:#728299;font-variant-numeric:tabular-nums}.tx-name{font-weight:500;color:#354a63}.tx-project{font-size:11px;color:#95a0ae;margin-top:2px}.status{display:inline-block;border-radius:20px;padding:3px 9px;font-size:11px}.status.เบิกจ่ายแล้ว{background:#eaf6ef;color:#378353}.status.อนุมัติแล้ว{background:#edf2ff;color:#586fc1}.status.รออนุมัติ{background:#fff5e6;color:#b27e2b}.attachment{color:#178789;text-decoration:none;font-size:16px}footer{font-size:11px;color:#97a4b2;padding:17px 2px 25px}footer span{float:right}.hidden{display:none!important}.records-panel{margin-top:25px;padding:18px 19px 4px}.records-toolbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px}.record-filters{display:flex;gap:10px}.search{border:1px solid #e0e7ee;border-radius:6px;display:flex;align-items:center;padding:0 10px;color:#8494a8}.search input{font:13px 'IBM Plex Sans Thai',sans-serif;border:0;outline:0;padding:8px;width:220px}.record-filters select{border:1px solid #e0e7ee;border-radius:6px;padding:0 9px}.row-actions{display:flex;gap:6px}.row-actions button{font:12px 'IBM Plex Sans Thai',sans-serif;border:0;background:none;color:#71839a;cursor:pointer}.row-actions button:hover{color:#087f83}.row-actions .delete:hover{color:#bd4b4b}dialog{width:min(570px,calc(100% - 28px));padding:0;border:0;border-radius:12px;box-shadow:0 20px 70px #102b4e40;color:#233750}dialog::backdrop{background:#10243b80;backdrop-filter:blur(2px)}dialog form{padding:22px 25px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid #edf0f4}.modal-head h2{font-size:20px;margin:3px 0}.close{border:0;background:none;font-size:25px;color:#8795a7;cursor:pointer}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 14px;padding:18px 0}.form-grid label{font-size:12px;color:#65778e;display:flex;flex-direction:column;gap:5px}.form-grid input,.form-grid select{width:100%;min-height:39px;border:1px solid #dce4ec;border-radius:6px;padding:7px 10px;font:14px 'IBM Plex Sans Thai',sans-serif;color:#2e435d;background:#fff}.form-grid input[type=file]{font-size:12px}.span-2{grid-column:span 2}.hint{font-size:11px;color:#91a0b1}.file-current{font-size:11px;color:#168587}.modal-foot{display:flex;justify-content:flex-end;gap:9px;padding-top:14px;border-top:1px solid #edf0f4}.toast{position:fixed;right:22px;bottom:20px;background:#173b58;color:white;padding:10px 16px;border-radius:7px;box-shadow:0 6px 22px #15395738;font-size:13px;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1100px){.main{padding:0 22px}.sidebar{width:210px}.main{margin-left:210px}.cards{grid-template-columns:repeat(3,1fr)}.chart-grid{grid-template-columns:1fr}.bar-panel,.donut-panel{min-height:260px}.donut-wrap{height:190px}}@media(max-width:700px){.sidebar{width:58px;padding:18px 7px}.brand{padding:0 4px 25px}.brand>div:last-child,.side-label,.side-bottom,.nav:not(.active){display:none}.nav{font-size:0;text-align:center;padding:11px 3px}.nav span{font-size:18px;width:auto}.main{margin-left:58px;padding:0 13px}.topbar{height:auto;min-height:94px;align-items:flex-start;padding:18px 0;gap:10px;flex-direction:column}.topbar h1{font-size:21px}.top-actions{width:100%;justify-content:space-between}.filters{align-items:flex-start;flex-direction:column;gap:12px}.filter-controls{width:100%;flex-wrap:wrap}.filter-controls label{flex:1}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card{padding:12px;min-height:112px}.card-value{font-size:19px}.card-top{font-size:11px}.chart-grid{gap:10px;margin-top:12px}.bar-panel,.donut-panel{padding:14px 12px;overflow:hidden}.bar-chart{gap:3px}.bar{width:7px}.month span{font-size:9px}.donut-wrap{gap:12px}.donut-svg{width:125px;height:125px}.donut-legend{font-size:11px;gap:8px}.recent-panel{padding:14px 10px 3px;margin-top:12px}.recent-panel .panel-head{padding:0 4px 10px}.records-toolbar{align-items:flex-start;gap:12px;flex-direction:column}.record-filters{width:100%}.search{flex:1}.search input{width:100%;min-width:0}.records-panel{padding:14px 9px 3px;margin-top:15px}footer{font-size:10px}footer span{float:none;display:block;margin-top:2px}.form-grid{gap:11px 9px}dialog form{padding:18px 17px}}