@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap";:root{color:#173332;font-synthesis:none;--ink:#173332;--muted:#758b88;--line:#e1e9e5;--panel:#fff;--mint:#d6f1e8;--green:#287d69;--orange:#cb7b27;--shadow:0 12px 34px #193b360f;background:#f4f7f5;font-family:Noto Sans Thai,DM Sans,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}.app-shell{min-height:100vh;display:flex}.sidebar{color:#d8e9e2;background:#103230;flex-direction:column;flex-shrink:0;width:250px;padding:24px 15px 15px;display:flex}.brand{align-items:center;gap:10px;padding:0 11px 27px;display:flex}.brand-mark{color:#104542;background:#d7f2e7;border-radius:10px;place-items:center;width:32px;height:32px;font:700 20px DM Sans;display:grid}.brand-name{letter-spacing:-.5px;color:#f1fbf6;font:700 17px DM Sans}.brand-caption{letter-spacing:1.7px;color:#8fb6aa;margin-top:2px;font:600 7px DM Sans}.workspace-switch{background:#ffffff0f;border:1px solid #d3eee326;border-radius:12px;align-items:center;gap:9px;margin-bottom:29px;padding:12px 10px;display:flex}.workspace-avatar{color:#633c20;background:#e7bd88;border-radius:8px;place-items:center;width:28px;height:28px;font:700 9px DM Sans;display:grid}.workspace-switch div:nth-child(2){flex:1;min-width:0}.workspace-switch strong,.workspace-switch span{display:block}.workspace-switch strong{color:#edf8f3;white-space:nowrap;font-size:11px}.workspace-switch span{color:#8eaea5;margin-top:2px;font-size:9px}.chevron{color:#90b9ae;font-size:17px}.nav-label{letter-spacing:1.4px;color:#72998f;padding:0 13px 10px;font:600 9px DM Sans}.nav-item{color:#95b8ae;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:12px;width:100%;margin:2px 0;padding:11px 13px;font-size:12px;display:flex}.nav-item:hover{color:#e9f9f3;background:#ffffff0f}.nav-item.active{color:#eafff5;background:#1b4a45;box-shadow:inset 3px 0 #a6e0c9}.nav-item svg{opacity:.85}.nav-count{color:#fff;background:#d88355;border-radius:9px;margin-left:auto;padding:2px 6px;font:600 10px DM Sans}.sidebar-footer{margin-top:auto}.secure-card{border-top:1px solid #ffffff1f;align-items:center;gap:9px;padding:17px 10px 19px;display:flex}.secure-dot,.status-dot{background:#62cb9a;border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:0 0 0 3px #62cb9a1f}.secure-card strong,.secure-card span,.profile strong,.profile span{display:block}.secure-card strong{color:#cce9dc;font-size:10px}.secure-card span{color:#769d93;margin-top:3px;font-size:8px}.profile{align-items:center;gap:9px;padding:13px 7px 0;display:flex}.profile-avatar{color:#644934;background:#dfbc9b;border-radius:50%;place-items:center;width:31px;height:31px;font-size:10px;font-weight:700;display:grid}.profile strong{color:#edf8f3;font-size:11px}.profile span{color:#87a99f;margin-top:2px;font-size:9px}.profile .more{letter-spacing:1px;margin-left:auto;font-weight:700}.main-content{flex:1;min-width:0}.topbar{border-bottom:1px solid var(--line);background:#fff;justify-content:space-between;align-items:center;height:69px;padding:0 39px;display:flex}.breadcrumbs{color:#91a29e;align-items:center;gap:11px;font-size:11px;display:flex}.breadcrumbs svg{color:#b2c2bd}.breadcrumbs strong{color:var(--ink);font-weight:600}.top-actions{align-items:center;gap:20px;display:flex}.icon-button{color:#79908b;cursor:pointer;background:0 0;border:0;place-items:center;padding:6px;display:grid;position:relative}.notification-dot{background:#d5774e;border:1px solid #fff;border-radius:50%;width:5px;height:5px;position:absolute;top:5px;right:5px}.line-chip{color:#66807a;align-items:center;gap:7px;font-size:10px;display:flex}.line-dot{color:#fff;background:#46bc71;border-radius:6px;place-items:center;width:18px;height:18px;font:700 11px DM Sans;display:grid}.page-wrap{max-width:1680px;margin:0 auto;padding:33px 39px 45px}.hero-row{justify-content:space-between;align-items:flex-end;margin-bottom:27px;display:flex}.date-line{color:#81928f;align-items:center;gap:9px;font-size:10px;display:flex}.hero-row h1{letter-spacing:-.9px;color:#173332;margin:8px 0 2px;font-size:28px}.hero-row p{color:#80918e;margin:0;font-size:12px}.primary-button{color:#eafff4;cursor:pointer;background:#173f3c;border:0;border-radius:9px;padding:12px 16px;font-size:11px;font-weight:600;box-shadow:0 8px 15px #103d3721}.primary-button:hover{background:#245c55}.primary-button span{margin-right:4px;font-size:16px}.metrics{grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:20px;display:grid}.metric-card{background:var(--panel);border:1px solid var(--line);min-height:126px;box-shadow:var(--shadow);border-radius:12px;gap:12px;padding:18px 17px;display:flex;position:relative;overflow:hidden}.metric-icon{border-radius:9px;place-items:center;width:29px;height:29px;font:700 15px DM Sans;display:grid}.metric-icon.green{color:#3a9c7b;background:#dcf4e9}.metric-icon.blue{color:#5a90c4;background:#e5effa}.metric-icon.orange{color:#d27d35;background:#fbecdc}.metric-icon.violet{color:#9277ca;background:#eee8fb}.metric-copy span,.metric-copy strong,.metric-copy small{display:block}.metric-copy span{color:#81928f;font-size:10px}.metric-copy strong{letter-spacing:-.5px;color:#173332;margin:5px 0 4px;font:700 20px DM Sans}.metric-copy small{font:500 9px DM Sans}.metric-copy small.green{color:#398c72}.metric-copy small.blue{color:#6b9ac5}.metric-copy small.orange{color:#d27d35}.metric-copy small.violet{color:#997ed0}.sparkline{opacity:.7;align-items:end;gap:3px;display:flex;position:absolute;bottom:17px;right:14px}.sparkline i{background:#cae8dd;border-radius:4px;width:3px;display:block}.sparkline i:first-child{height:9px}.sparkline i:nth-child(2){height:14px}.sparkline i:nth-child(3){height:11px}.sparkline i:nth-child(4){height:19px}.sparkline i:nth-child(5){height:15px}.sparkline i:nth-child(6){height:24px}.content-grid{grid-template-columns:minmax(560px,1.55fr) minmax(315px,.75fr);gap:18px;display:grid}.panel{border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;border-radius:12px}.records-panel{min-width:0}.panel-heading{justify-content:space-between;align-items:flex-start;padding:20px 21px 14px;display:flex}.panel-heading h2,.detail-head h2,.sync-panel h2{letter-spacing:-.3px;margin:0;font-size:15px}.panel-heading p{color:#8a9996;margin:5px 0 0;font-size:10px}.text-button{color:#3e8471;cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:4px;font-size:10px;display:flex}.toolbar{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:10px;padding:0 19px 12px;display:flex}.search-box{border:1px solid var(--line);color:#9aaba7;border-radius:7px;align-items:center;gap:7px;width:190px;height:32px;padding:0 9px;display:flex}.search-box input{width:100%;color:var(--ink);background:0 0;border:0;outline:0;font-size:9px}.filter-tabs{align-items:center;gap:2px;display:flex}.filter-tab{color:#8a9996;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:6px;padding:8px;font-size:9px}.filter-tab.selected{color:#26725e;background:#e4f4ed;font-weight:600}.filter-tab span{color:#39816c;background:#d7ede5;border-radius:8px;margin-left:4px;padding:1px 5px;font:600 8px DM Sans}.filter-button{border:1px solid var(--line);color:#708883;cursor:pointer;background:#fff;border-radius:7px;align-items:center;gap:5px;margin-left:auto;padding:7px 9px;font-size:9px;display:flex}.table-head{color:#a0afac;text-transform:uppercase;letter-spacing:.7px;grid-template-columns:2.2fr 1.3fr 1.05fr .85fr;padding:11px 20px 8px;font:600 8px DM Sans;display:grid}.record-row{text-align:left;cursor:pointer;width:100%;color:var(--ink);background:#fff;border:0;border-top:1px solid #eef2f0;grid-template-columns:2.2fr 1.3fr 1.05fr .85fr;align-items:center;padding:13px 20px;display:grid}.record-row:hover,.record-row.selected-row{background:#f3faf7}.record-main,.person,.amount{align-items:center;gap:9px;min-width:0;display:flex}.record-icon{border-radius:9px;flex-shrink:0;place-items:center;width:29px;height:29px;font:700 15px DM Sans;display:grid}.record-icon.orange{color:#cb823c;background:#fff0df}.record-icon.violet{color:#977bc8;background:#f0eafb}.record-icon.teal{color:#4ca283;background:#ddf4ec}.record-icon.blue{color:#6192bd;background:#e5f0fb}.record-icon.pink{color:#c67587;background:#fce8eb}.record-main strong,.person strong,.amount strong{white-space:nowrap;text-overflow:ellipsis;font-size:10px;font-weight:600;display:block;overflow:hidden}.record-main span,.person span,.amount span{color:#92a19e;white-space:nowrap;margin-top:3px;font-size:8px;display:block}.mini-avatar{color:#866046;background:#f1d4bf;border-radius:50%;flex-shrink:0;place-items:center;width:24px;height:24px;font-size:8px;display:grid}.amount{display:block}.amount strong{font:700 12px DM Sans}.status{white-space:nowrap;border-radius:8px;align-items:center;gap:5px;padding:5px 7px;font-size:8px;display:inline-flex}.status i{background:currentColor;border-radius:50%;width:5px;height:5px;display:block}.status.pending{color:#c8812f;background:#fff2dc}.status.approved{color:#3c8b70;background:#e0f4ea}.status.rejected{color:#bf6776;background:#fce5e8}.status.review{color:#8e70c2;background:#eee8fb}.empty{text-align:center;color:#91a19d;padding:35px;font-size:11px}.detail-panel{padding:20px 20px 18px}.detail-head{justify-content:space-between;align-items:flex-start;display:flex}.detail-head h2{margin-top:3px;font:700 18px DM Sans}.eyebrow{letter-spacing:1px;color:#91a09c;text-transform:uppercase;font:600 8px DM Sans}.icon-button.small{border:1px solid var(--line);border-radius:7px}.detail-status{align-items:center;gap:9px;margin-top:15px;display:flex}.detail-status>span{color:#98a5a2;font-size:8px}.detail-amount{padding:20px 0 16px}.detail-amount span,.detail-amount small{color:#8a9a96;font-size:9px;display:block}.detail-amount strong{color:#183a38;letter-spacing:-.7px;margin:4px 0;font:700 28px DM Sans;display:block}.detail-separator{background:var(--line);height:1px}.detail-meta{padding:3px 0}.info-row{border-bottom:1px solid #eff3f1;justify-content:space-between;align-items:center;padding:11px 0;display:flex}.info-row>span{color:#8d9c98;font-size:9px}.info-value{text-align:right;align-items:center;gap:7px;display:flex}.info-value strong,.info-value small{display:block}.info-value strong{font-size:9px;font-weight:600}.info-value small{color:#94a19e;margin-top:2px;font-size:8px}.file-icon{color:#4b9b7c;background:#e7f4ee;border-radius:6px;place-items:center;width:23px;height:23px;font-size:14px;display:grid}.warning-box{background:#fff6e7;border:1px solid #f7e0bd;border-radius:8px;gap:8px;margin:14px 0;padding:10px;display:flex}.warning-icon{color:#fff;background:#e8a34f;border-radius:50%;flex-shrink:0;place-items:center;width:17px;height:17px;font:700 11px DM Sans;display:grid}.warning-box strong,.warning-box span{display:block}.warning-box strong{color:#a86a28;font-size:9px}.warning-box span{color:#a17b4b;margin-top:3px;font-size:8px;line-height:1.45}.document-preview{margin-top:15px}.doc-top{color:#8a9995;justify-content:space-between;margin-bottom:7px;font-size:8px;display:flex}.view-link{color:#3d8972}.slip-art{background:#f7f9f8;border:1px solid #e5ebe8;border-radius:8px;height:105px;padding:12px 15px;position:relative;overflow:hidden}.bank-logo{color:#6b8b84;letter-spacing:1px;font:700 9px DM Sans}.slip-line{background:#e1eae6;border-radius:4px;width:42%;height:4px;margin-top:8px}.slip-line.wide{width:68%;margin-top:13px}.slip-line.short{width:30%;margin-top:7px}.slip-amount{color:#356e61;font:700 15px DM Sans;position:absolute;top:39px;right:15px}.slip-qr{background:repeating-linear-gradient(45deg,#b7d0c5 0 2px,#0000 2px 4px);width:23px;height:23px;position:absolute;bottom:11px;right:14px}.detail-actions{gap:8px;margin-top:14px;display:flex}.approve-button,.reject-button{cursor:pointer;border-radius:7px;justify-content:center;align-items:center;gap:6px;padding:9px 11px;font-size:9px;display:flex}.approve-button{color:#fff;background:#174943;border:1px solid #174943;flex:1}.reject-button{color:#b56d72;background:#fff;border:1px solid #e8cbc9}.bottom-grid{grid-template-columns:1.1fr .9fr;gap:18px;margin-top:18px;display:grid}.activity-panel{padding-bottom:5px}.activity-list{padding:0 20px}.activity-row{border-top:1px solid #eff3f1;align-items:center;gap:10px;padding:13px 0;display:flex}.activity-avatar{border-radius:50%;flex-shrink:0;place-items:center;width:27px;height:27px;font:700 7px DM Sans;display:grid}.activity-avatar.dark{color:#3d7063;background:#dbe9e3}.activity-avatar.purple{color:#8d71bd;background:#ece5fa}.activity-avatar.green{color:#3b8d6d;background:#d9f1e4}.activity-row strong,.activity-row span{display:block}.activity-row strong{font-size:9px;font-weight:600}.activity-row span{color:#8d9c99;margin-top:3px;font-size:8px}.activity-row time{color:#a3afac;white-space:nowrap;margin-left:auto;font-size:8px}.sync-panel{align-items:center;gap:15px;padding:20px;display:flex;position:relative;overflow:hidden}.sync-illustration{background:#e2f4eb;border-radius:17px;flex-shrink:0;place-items:center;width:57px;height:57px;display:grid}.sync-circle{color:#438c71;background:#c4e9d7;border-radius:50%;place-items:center;width:31px;height:31px;font:700 19px DM Sans;display:grid}.sync-panel p{color:#83938f;margin:5px 0 8px;font-size:9px}.sync-time{color:#82948f;align-items:center;gap:5px;font-size:8px;display:flex}.sync-time .status-dot{width:5px;height:5px;box-shadow:none}.sync-button{color:#3e8772;cursor:pointer;background:0 0;border:0;align-items:center;gap:5px;font-size:9px;display:flex;position:absolute;bottom:17px;right:18px}.toast{color:#effbf6;background:#173f3c;border-radius:9px;align-items:center;gap:8px;padding:12px 15px;font-size:10px;animation:.25s ease-out slidein;display:flex;position:fixed;bottom:24px;right:28px;box-shadow:0 12px 30px #0d2c2a33}.toast-check{color:#fff;background:#5bc391;border-radius:50%;place-items:center;width:18px;height:18px;display:grid}@keyframes slidein{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (width<=1180px){.sidebar{width:210px}.page-wrap{padding-left:25px;padding-right:25px}.topbar{padding:0 25px}.content-grid{grid-template-columns:1fr}.detail-panel{grid-template-columns:1fr 1fr;gap:0 22px;display:grid}.detail-head,.detail-status,.detail-amount,.detail-separator,.detail-meta,.warning-box,.document-preview,.detail-actions{grid-column:span 2}.bottom-grid{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(2,1fr)}}@media (width<=760px){.sidebar{width:62px;padding:20px 8px}.brand{padding:0 7px 27px}.brand>div:last-child,.workspace-switch>div:not(.workspace-avatar),.workspace-switch .chevron,.nav-label,.nav-item span,.nav-count,.secure-card,.profile>div:not(.profile-avatar),.profile .more{display:none}.workspace-switch{justify-content:center;margin-bottom:22px;padding:8px}.nav-item{justify-content:center;padding:11px 8px}.profile{justify-content:center;padding-left:0}.topbar{height:60px;padding:0 15px}.breadcrumbs span{display:none}.top-actions{gap:7px}.line-chip{font-size:0}.line-chip .line-dot{font-size:11px}.page-wrap{padding:23px 14px}.hero-row{align-items:flex-start;gap:12px}.hero-row h1{font-size:21px}.hero-row p{font-size:10px}.date-line{flex-wrap:wrap;font-size:8px}.primary-button{padding:10px;font-size:0}.primary-button span{margin:0;font-size:18px}.metrics{gap:8px}.metric-card{min-height:102px;padding:12px}.metric-copy strong{font-size:16px}.metric-copy span,.metric-copy small{font-size:8px}.content-grid{gap:10px}.table-head{display:none}.record-row{grid-template-columns:1fr auto;gap:10px;padding:13px 14px}.record-row .person,.record-row .amount{display:none}.toolbar{padding:0 12px 10px}.search-box{width:100%}.filter-tabs{max-width:100%;overflow:auto}.filter-button{display:none}.panel-heading{padding:16px 14px 12px}.panel-heading h2{font-size:13px}.record-main strong{font-size:9px}.detail-panel{padding:16px;display:block}.detail-head h2{font-size:16px}.bottom-grid{margin-top:10px}.activity-list{padding:0 14px}.activity-row time{display:none}.sync-panel{align-items:flex-start;padding:16px}.sync-button{margin-top:auto;margin-left:auto;position:static}.sync-panel h2{font-size:13px}}.settings-intro{justify-content:space-between;align-items:flex-end;margin-bottom:27px;display:flex}.settings-intro h1{letter-spacing:-.9px;margin:8px 0 2px;font-size:28px}.settings-intro p{color:#80918e;margin:0;font-size:12px}.admin-badge{border:1px solid var(--line);background:#fff;border-radius:10px;align-items:center;gap:9px;padding:8px 12px;display:flex}.admin-badge strong,.admin-badge span{display:block}.admin-badge strong{font-size:10px}.admin-badge span{color:#8d9c99;margin-top:2px;font-size:8px}.settings-layout{grid-template-columns:205px 1fr;align-items:start;gap:18px;display:grid}.settings-nav{flex-direction:column;gap:4px;display:flex}.setting-link{text-align:left;color:#81928e;cursor:pointer;background:0 0;border:0;border-radius:8px;justify-content:space-between;padding:12px 13px;font-size:10px;display:flex}.setting-link.active{color:#27735f;background:#e2f3eb;font-weight:600}.setting-link span{font-size:13px}.settings-card{min-height:400px}.config-status{color:#82928e;white-space:nowrap;background:#f2f5f3;border-radius:7px;align-items:center;gap:6px;padding:6px 8px;font-size:8px;display:flex}.config-status i{background:#a8b8b2;border-radius:50%;width:5px;height:5px}.form-section{max-width:620px;padding:3px 21px 28px}.form-section label{color:#506b65;margin:17px 0 6px;font-size:10px;display:block}.form-section label>span{color:#bd7d42;margin-left:5px;font-size:8px}.form-section input{border:1px solid var(--line);width:100%;color:var(--ink);background:#fbfcfb;border-radius:7px;outline:0;margin-top:7px;padding:10px 11px;font-size:10px;display:block}.form-section input:focus{border-color:#7eb7a2;box-shadow:0 0 0 3px #e2f3eb}.field-help{color:#9aa9a5;margin:6px 0 15px;font-size:8px}.field-help code{background:#eef3f0;border-radius:3px;padding:2px 3px;font-family:DM Sans}.sheet-preview{background:#f4faf7;border:1px solid #dcefe6;border-radius:8px;align-items:center;gap:10px;margin-top:22px;padding:12px 13px;display:flex}.sheet-mark{color:#4b9776;background:#ccebdc;border-radius:7px;place-items:center;width:29px;height:29px;font-size:17px;display:grid}.sheet-preview strong,.sheet-preview span{display:block}.sheet-preview strong{font-size:9px}.sheet-preview span{color:#8ca09a;margin-top:3px;font-size:8px}.lock-label{background:#e2f2ea;border-radius:5px;padding:4px 6px;color:#47876f!important;margin-left:auto!important}.settings-footer{border-top:1px solid var(--line);align-items:center;gap:8px;padding:17px 21px;display:flex}.settings-footer>div{margin-right:auto}.settings-footer strong,.settings-footer span{display:block}.settings-footer strong{font-size:9px}.settings-footer span{color:#94a29f;margin-top:3px;font-size:8px}.secondary-button{border:1px solid var(--line);color:#52756c;cursor:pointer;background:#fff;border-radius:7px;padding:9px 11px;font-size:9px}.settings-note{background:#edf7f2;border:1px solid #d8eee4;border-radius:9px;align-items:flex-start;gap:10px;max-width:760px;margin-top:18px;padding:14px 16px;display:flex}.settings-note>span{color:#347a62;background:#bfe6d4;border-radius:50%;place-items:center;width:17px;height:17px;font:700 11px DM Sans;display:grid}.settings-note strong,.settings-note p{display:block}.settings-note strong{color:#3b7362;font-size:9px}.settings-note p{color:#76948a;margin:3px 0 0;font-size:8px}.login-shell{background:radial-gradient(circle at 20% 10%,#55489640,#0000 36%),#101019;place-items:center;min-height:100vh;padding:24px;display:grid}.login-card{background:#1d1d2beb;border:1px solid #ffffff1f;border-radius:24px;width:min(100%,440px);padding:38px;box-shadow:0 24px 80px #00000059}.login-brand{margin-bottom:38px}.login-card h1{color:#fff;margin:10px 0 8px;font-size:30px}.login-card>p{color:#a6a5b5;margin:0 0 26px}.login-card form{gap:16px;display:grid}.login-card label{color:#d8d6e2;gap:7px;font-size:13px;font-weight:600;display:grid}.login-card input{box-sizing:border-box;color:#fff;background:#171720;border:1px solid #444355;border-radius:10px;outline:none;width:100%;padding:12px 13px}.login-card input:focus{border-color:#a897ff;box-shadow:0 0 0 3px #a897ff26}.login-button{justify-content:center;width:100%;margin-top:6px}.login-error{color:#ff9eaa;background:#d04b5e26;border-radius:9px;padding:10px 12px;font-size:13px}.login-note{color:#77768a;text-align:center;margin-top:20px;display:block}.logout-button{color:#aaa8ba;cursor:pointer;background:0 0;border:0;font-size:12px}