:root{--navy:#0b1f4e;--navy2:#123873;--blue:#1769e0;--cyan:#23a6d5;--green:#1a9b65;--red:#db3d4d;--amber:#d99016;--purple:#7357cc;--ink:#172033;--muted:#68758a;--line:#e4eaf2;--bg:#f4f7fb;--card:#fff;--shadow:0 10px 35px rgba(17,37,74,.08);font-family:Inter,"Noto Sans Thai",Tahoma,sans-serif;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-size:14px}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.4px;color:var(--blue);margin:0 0 5px}.muted{color:var(--muted)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;background:#fff}.login-brand{position:relative;overflow:hidden;padding:9vh 8vw;color:#fff;background:linear-gradient(145deg,#07183e 0%,#0f3673 65%,#1769e0 130%)}.login-brand:after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-220px;bottom:-190px;box-shadow:0 0 0 80px rgba(255,255,255,.03),0 0 0 160px rgba(255,255,255,.025)}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#2aaee2,#1a66dc);color:white;font-size:21px;font-weight:900;box-shadow:0 7px 18px rgba(16,99,220,.3)}.brand-mark.large{width:58px;height:58px;border-radius:18px;font-size:30px;margin-bottom:80px;background:linear-gradient(145deg,#5fcaf1,#1973e6)}.login-brand .eyebrow{color:#75d6ff}.login-brand h1{font-size:44px;line-height:1.25;margin:12px 0 55px;letter-spacing:-1.3px}.login-brand h1 span{color:#77d8ff}.login-points{display:grid;gap:24px;max-width:600px}.login-points>div{display:flex;gap:18px;align-items:flex-start}.login-points b{font-size:13px;border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:7px 10px;color:#83dcff}.login-points span{display:grid;gap:4px;color:#c8d6ee}.login-points strong{color:#fff;font-size:16px}.login-panel{display:grid;place-items:center;padding:40px}.login-card{width:min(390px,100%)}.login-card h2{font-size:31px;margin:8px 0}.login-card label,.form-grid label{display:grid;gap:8px;font-weight:700;margin:22px 0 0}.login-card input,.form-grid input,.form-grid select,.form-grid textarea,.search-input{width:100%;border:1px solid #d9e1eb;border-radius:10px;padding:12px 13px;background:#fff;outline:none}.login-card input:focus,.form-grid input:focus,.form-grid select:focus,.search-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,224,.1)}.btn{border:0;border-radius:9px;padding:10px 16px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.primary{background:var(--blue);color:#fff}.btn.secondary{background:#eaf1fb;color:var(--navy2)}.btn.danger{background:#feebed;color:var(--red)}.btn.full{width:100%;margin-top:26px;padding:13px}.btn:disabled{opacity:.55;cursor:not-allowed}.form-error{min-height:20px;color:var(--red);font-weight:700}.login-note{text-align:center;margin-top:42px;color:#8792a3;font-size:12px}.mobile-logo{display:none;align-items:center;gap:10px;font-size:22px}
.app{display:flex;min-height:100vh}.sidebar{width:248px;background:var(--navy);color:#fff;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:20}.logo{height:82px;padding:0 21px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.1)}.logo b{font-size:23px}.logo small{display:block;color:#8196bd;font-size:8px;letter-spacing:1px}.sidebar nav{padding:14px 12px;overflow:auto;flex:1}.nav-label{font-size:10px;letter-spacing:1.2px;color:#7187ae;margin:19px 11px 8px}.nav-item{position:relative;width:100%;border:0;background:transparent;color:#aec0dc;text-align:left;border-radius:8px;padding:10px 11px;margin:2px 0;font-size:13px;display:flex;align-items:center;gap:10px}.nav-item>span{width:20px;text-align:center;font-size:16px}.nav-item:hover,.nav-item.active{color:#fff;background:rgba(255,255,255,.1)}.nav-item.active:before{content:"";position:absolute;left:-12px;width:3px;height:24px;background:#42bff0;border-radius:0 3px 3px 0}.nav-item i{margin-left:auto;background:var(--red);font-size:10px;color:#fff;border-radius:10px;padding:2px 6px;font-style:normal}.sidebar-foot{border-top:1px solid rgba(255,255,255,.1);padding:17px 20px;display:flex;align-items:center;gap:10px}.sidebar-foot b,.sidebar-foot small{display:block}.sidebar-foot b{font-size:11px}.sidebar-foot small{font-size:9px;color:#8297bb}.system-dot{width:8px;height:8px;background:#45d18c;border-radius:50%;box-shadow:0 0 0 4px rgba(69,209,140,.12)}
.shell{margin-left:248px;width:calc(100% - 248px)}.topbar{height:82px;background:#fff;border-bottom:1px solid var(--line);padding:0 28px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:12}.topbar h2{margin:0;font-size:21px}.top-actions{display:flex;align-items:center;gap:13px}.period-select{display:grid;font-size:9px;color:var(--muted);background:#f7f9fc;border:1px solid var(--line);padding:5px 10px;border-radius:8px}.period-select select{font-weight:800;border:0;background:transparent;outline:none;color:var(--ink)}.notify-btn,.icon-btn{border:1px solid var(--line);background:#fff;border-radius:9px;width:40px;height:40px;position:relative}.notify-btn i{position:absolute;top:-5px;right:-5px;background:var(--red);color:#fff;border-radius:9px;font-size:9px;font-style:normal;padding:2px 5px}.user-menu{display:flex;align-items:center;gap:9px;border-left:1px solid var(--line);padding-left:13px}.avatar{display:grid;place-items:center;width:35px;height:35px;background:#e5f0ff;color:var(--blue);border-radius:10px;font-weight:900}.user-menu b,.user-menu small{display:block;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu b{font-size:12px}.user-menu small{font-size:10px;color:var(--muted)}.user-menu button{border:0;background:transparent;color:var(--muted);font-size:11px}.menu-btn{display:none}.content{padding:24px 28px 50px;max-width:1680px;margin:auto}.view{display:none}.view.active{display:block}.view-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:18px}.view-head h3{margin:0;font-size:20px}.view-head p{margin:5px 0 0;color:var(--muted)}.action-row{display:flex;gap:8px;align-items:center}.search-input{width:250px;padding:9px 12px}
.flow-strip{background:linear-gradient(100deg,#0c265b,#15509c);border-radius:14px;padding:16px 22px;display:grid;grid-template-columns:repeat(8,1fr);color:#fff;box-shadow:var(--shadow);margin-bottom:17px}.flow-step{text-align:center;position:relative}.flow-step:not(:last-child):after{content:"→";position:absolute;right:-8px;top:18px;color:#72d0f3}.flow-step b{display:grid;place-items:center;width:38px;height:38px;margin:auto auto 7px;border-radius:11px;background:rgba(255,255,255,.14);font-size:17px}.flow-step strong{font-size:10px;display:block}.flow-step small{color:#a9c3e8;font-size:8px}
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:17px}.kpi-card,.panel{background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 18px rgba(17,37,74,.04)}.kpi-card{padding:16px;min-width:0}.kpi-top{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-weight:700;font-size:11px}.kpi-icon{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;background:#eaf2ff;color:var(--blue);font-size:16px}.kpi-card strong{display:block;font-size:23px;margin:12px 0 8px;white-space:nowrap}.kpi-card strong small{font-size:10px;color:var(--muted)}.trend{font-size:10px;color:var(--green);font-weight:800}.trend.down{color:var(--red)}.progress{height:7px;background:#edf1f7;border-radius:7px;overflow:hidden;margin:10px 0}.progress span{display:block;height:100%;background:var(--green);border-radius:7px}
.dashboard-grid{display:grid;grid-template-columns:1.55fr 1fr 1fr;gap:14px;margin-bottom:14px}.panel{padding:17px;min-width:0}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.panel-head h3{font-size:13px;margin:0}.panel-head small{color:var(--muted)}.legend{display:flex;gap:12px;color:var(--muted);font-size:9px}.legend i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:4px}.chart{height:210px;width:100%;display:block}.chart-short{height:170px}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;border-top:1px solid var(--line);padding-top:12px}.metric-row div{text-align:center;border-right:1px solid var(--line)}.metric-row div:last-child{border:0}.metric-row small,.metric-row strong{display:block}.metric-row small{font-size:9px;color:var(--muted)}.metric-row strong{font-size:14px;margin-top:4px}.donut-wrap{display:flex;align-items:center;justify-content:space-around;height:210px}.donut{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;position:relative}.donut:after{content:"";width:78px;height:78px;background:#fff;border-radius:50%;position:absolute}.donut-center{z-index:1;text-align:center}.donut-center b,.donut-center small{display:block}.donut-legend{display:grid;gap:8px}.donut-legend span{font-size:10px;color:var(--muted)}.donut-legend i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:6px}.bottom-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:14px}.alert-list{display:grid;gap:8px}.alert-item{display:grid;grid-template-columns:28px 1fr auto;align-items:center;padding:10px;border:1px solid var(--line);border-radius:9px}.alert-dot{width:24px;height:24px;display:grid;place-items:center;border-radius:8px;background:#fff0df;color:var(--amber);font-weight:900}.alert-item.danger .alert-dot{background:#feebed;color:var(--red)}.alert-item.info .alert-dot{background:#e8f1ff;color:var(--blue)}.alert-item b,.alert-item small{display:block}.alert-item b{font-size:11px}.alert-item small{font-size:9px;color:var(--muted)}.alert-action{font-size:9px;font-weight:800;border-radius:10px;background:#eff3f8;padding:4px 8px}.activity-list{display:grid}.activity{padding:10px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px}.activity b,.activity small{display:block}.activity b{font-size:11px}.activity small{font-size:9px;color:var(--muted)}.activity>strong{font-size:11px;white-space:nowrap}
.summary-band{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.summary-mini{padding:14px 16px;background:#fff;border:1px solid var(--line);border-radius:10px}.summary-mini small,.summary-mini strong{display:block}.summary-mini small{color:var(--muted);font-size:10px}.summary-mini strong{font-size:20px;margin-top:6px}.table-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;white-space:nowrap}.data-table th{text-align:left;background:#f7f9fc;color:#65728a;font-size:10px;letter-spacing:.3px;padding:11px 13px;border-bottom:1px solid var(--line)}.data-table td{padding:12px 13px;border-bottom:1px solid #edf1f5;font-size:11px}.data-table tr:hover td{background:#fafcff}.data-table .amount{text-align:right;font-weight:800}.status{display:inline-flex;align-items:center;gap:5px;border-radius:12px;padding:4px 8px;background:#eef2f7;color:#586579;font-size:9px;font-weight:800}.status.received,.status.paid,.status.reconciled,.status.filed,.status.completed,.status.approved{background:#e5f7ef;color:#17855a}.status.overdue,.status.cancelled{background:#fdebed;color:#c83445}.status.due_soon,.status.in_progress{background:#fff1dd;color:#b76e00}.status.pending,.status.issued{background:#e8f1ff;color:#1763c6}.empty{text-align:center;padding:55px 20px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 15px}.form-grid label{font-size:11px;margin-top:15px}.form-grid .span-2{grid-column:1/-1}.form-grid textarea{min-height:74px;resize:vertical}.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(5,17,43,.63);backdrop-filter:blur(2px)}.modal-card{position:relative;background:#fff;border-radius:15px;width:min(690px,100%);max-height:90vh;overflow:auto;padding:24px;box-shadow:0 30px 80px rgba(0,0,0,.25)}.modal-close{position:absolute;right:14px;top:12px;border:0;background:#f0f3f8;width:31px;height:31px;border-radius:8px;font-size:19px}.modal-card h3{margin:0}.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.upload-zone{border:2px dashed #bfd0e6;border-radius:14px;background:#f8fbff;padding:42px;text-align:center;transition:.2s}.upload-zone.drag{border-color:var(--blue);background:#eef5ff}.upload-zone strong,.upload-zone small{display:block}.upload-zone strong{font-size:16px;margin:10px}.upload-zone small{color:var(--muted)}.upload-zone input{display:none}.template-box{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);padding:14px;border-radius:10px;margin-top:15px}.preview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.preview-stats div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}.preview-stats small,.preview-stats strong{display:block}.preview-stats small{color:var(--muted);font-size:9px}.preview-stats strong{font-size:18px;margin-top:6px}.error-text{color:var(--red);font-size:9px;white-space:normal;min-width:180px}.closing-overview{display:grid;grid-template-columns:260px 1fr;gap:16px}.closing-score{text-align:center;padding:28px}.ring{--p:80;width:160px;height:160px;border-radius:50%;margin:0 auto 16px;background:conic-gradient(var(--green) calc(var(--p)*1%),#e8edf4 0);display:grid;place-items:center}.ring:before{content:"";width:112px;height:112px;background:#fff;border-radius:50%}.ring b{position:absolute;font-size:30px}.task-list{display:grid;gap:9px}.task{display:grid;grid-template-columns:35px 1fr auto;align-items:center;gap:9px;padding:11px;border:1px solid var(--line);border-radius:9px}.task-num{display:grid;place-items:center;width:31px;height:31px;background:#eff4fa;border-radius:8px;font-weight:900;color:var(--navy2)}.task select{border:1px solid var(--line);border-radius:8px;padding:7px;background:#fff}.audit-row{display:grid;grid-template-columns:145px 100px 1fr 140px;gap:15px;padding:12px 15px;border-bottom:1px solid var(--line);font-size:11px}.audit-row small{color:var(--muted)}.users-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.user-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px;display:flex;gap:12px;align-items:center}.user-card .avatar{width:44px;height:44px}.user-card b,.user-card small{display:block}.user-card small{color:var(--muted);font-size:10px;margin-top:3px}.toast{position:fixed;right:20px;bottom:20px;z-index:100;background:#172033;color:#fff;border-radius:9px;padding:11px 15px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:none}.toast.error{background:#a92938}
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1.4fr 1fr}.dashboard-grid .panel:last-child{grid-column:1/-1}.donut-wrap{height:170px}.flow-strip{overflow:auto;grid-template-columns:repeat(8,110px)}.users-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.2)}.shell{margin-left:0;width:100%}.menu-btn{display:block}.topbar{padding:0 15px;height:72px}.topbar>div:nth-child(2){margin-right:auto;margin-left:10px}.topbar .eyebrow,.period-select,.user-menu>div:not(.avatar),.user-menu button{display:none}.top-actions{gap:7px}.content{padding:16px}.dashboard-grid,.bottom-grid,.closing-overview{grid-template-columns:1fr}.dashboard-grid .panel:last-child{grid-column:auto}.view-head{align-items:flex-start;gap:12px}.action-row{flex-wrap:wrap;justify-content:flex-end}.search-input{width:180px}.login-shell{grid-template-columns:1fr}.login-brand{display:none}.mobile-logo{display:flex}.login-panel{padding:28px}.login-card h2{font-size:28px}.audit-row{grid-template-columns:110px 80px 1fr}.audit-row>*:last-child{display:none}}
@media(max-width:560px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.kpi-card{padding:13px}.kpi-card strong{font-size:19px}.summary-band,.preview-stats{grid-template-columns:repeat(2,1fr)}.flow-strip{margin-left:-16px;margin-right:-16px;border-radius:0}.form-grid{grid-template-columns:1fr}.form-grid .span-2{grid-column:auto}.view-head{display:block}.action-row{justify-content:flex-start;margin-top:12px}.search-input{width:100%}.users-grid{grid-template-columns:1fr}.metric-row{grid-template-columns:1fr}.metric-row div{border-right:0;border-bottom:1px solid var(--line);padding:7px}.modal{padding:8px}.modal-card{padding:20px 16px}.upload-zone{padding:28px 15px}.topbar h2{font-size:17px}}
.filter-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px;margin-bottom:14px}.filter-grid{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:9px}.filter-grid label{font-size:9px;font-weight:800;color:var(--muted);display:grid;gap:4px}.filter-grid input,.filter-grid select{border:1px solid var(--line);border-radius:7px;padding:8px;background:#fff;color:var(--ink)}
.data-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;border-radius:10px;margin-bottom:14px}.data-banner b,.data-banner span{display:block}.data-banner span{font-size:11px}.data-banner.critical{background:#fff0f1;border:1px solid #f6c4ca;color:#992b38}.data-banner.good{background:#e8f8f1;border:1px solid #b9e8d3;color:#116d49}.kpi-grid.executive{grid-template-columns:repeat(5,1fr)}.explain-kpi{text-align:left;cursor:help}.source-context{display:block;color:var(--muted);font-size:8px;white-space:normal;line-height:1.3}.na{color:#9b3340}.dashboard-grid .span-2{grid-column:span 2}.health-list{display:grid;gap:8px}.health-list>div{display:flex;justify-content:space-between;gap:10px;padding:9px;border-bottom:1px solid var(--line)}.health-list b small{font-size:9px}.module-launcher{display:flex;gap:8px;flex-wrap:wrap}
.financial-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px}.financial-metric{background:#fff;border:1px solid var(--line);border-radius:11px;padding:15px}.financial-metric small,.financial-metric strong{display:block}.financial-metric strong{font-size:20px;margin:8px 0}.financial-metric p{font-size:9px;color:var(--muted);margin:0;min-height:24px}.aging-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.aging-grid>div{padding:12px;background:#f7f9fc;border-radius:8px}.aging-grid small,.aging-grid strong{display:block}.aging-grid strong{margin-top:5px}.trace-head{margin-top:14px;border-radius:10px 10px 0 0}.quality-score{display:flex;align-items:center;gap:20px;background:#0d3168;color:#fff;padding:22px;border-radius:13px;margin-bottom:14px}.quality-score strong{font-size:36px}
@media(max-width:1200px){.filter-grid{grid-template-columns:repeat(3,1fr)}.kpi-grid.executive{grid-template-columns:repeat(3,1fr)}.financial-grid{grid-template-columns:repeat(3,1fr)}.aging-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.filter-grid{grid-template-columns:repeat(2,1fr)}.kpi-grid.executive,.financial-grid{grid-template-columns:repeat(2,1fr)}.aging-grid{grid-template-columns:repeat(2,1fr)}.data-banner{display:block}.data-banner span{margin-top:5px}}
.entry-layout{display:grid;grid-template-columns:230px 1fr;gap:14px}.entry-types{display:grid;gap:5px;align-content:start}.entry-types button{border:1px solid var(--line);background:#fff;text-align:left;padding:10px 12px;border-radius:8px;color:var(--navy2)}.entry-types button:hover{border-color:var(--blue);background:#eef5ff}.bulk-sheet{border-collapse:collapse;width:100%}.bulk-sheet td{border:1px solid var(--line);padding:3px}.bulk-sheet input{border:0;padding:8px;min-width:120px;width:100%}.bulk-sheet button{border:0;background:#eaf1fb;padding:6px;margin:2px}.master-tabs,.mapping-grid{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.mapping-grid{display:grid;grid-template-columns:repeat(4,1fr)}.mapping-grid label{margin:0}.readiness-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.readiness-grid>div{display:grid;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px}.readiness-grid .status{justify-self:start}
@media(max-width:850px){.entry-layout{grid-template-columns:1fr}.entry-types{grid-template-columns:repeat(2,1fr)}.mapping-grid,.readiness-grid{grid-template-columns:repeat(2,1fr)}}
.closing-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.closing-checks label{display:flex;align-items:center;gap:7px;margin:0;padding:9px;background:#f7f9fc;border-radius:7px}.closing-checks input{width:auto}