:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#111111;background:#F7F7F2;font-size:14px;--yellow:#CAF70F;--ink:#111111;--muted:#77818c;--line:#DFE2D7;--green:#497229;--red:#bc5a45}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,a,input,select{outline-offset:3px}button{cursor:pointer;border:1px solid #d9dde1;background:#fff;border-radius:5px;padding:9px 14px;color:#37414c}button:hover{background:#f7f8fa;border-color:#aab2ba}button:disabled{opacity:.5;cursor:wait}.primary{background:var(--yellow);border-color:var(--yellow);color:#111111;font-weight:700}.primary:hover{background:#b7e30b}.link{border:0;background:none;color:#3f6d92;padding:3px 5px}.danger{color:var(--red)}a{color:#376789;text-decoration:none}a:hover{text-decoration:underline}.muted{color:var(--muted)}.small{font-size:12px}.boot{padding:60px}.shell{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--ink);color:#b9c0c6;position:fixed;inset:0 auto 0 0;width:216px;display:flex;flex-direction:column}.brand{padding:30px 23px 25px;color:white;font-size:21px;font-weight:700;letter-spacing:2px}.brand small{display:block;font-size:10px;color:#9ca6ae;letter-spacing:2px;margin-top:7px}.brand-mark{display:inline-grid;place-items:center;background:var(--yellow);color:#111111;width:28px;height:28px;font-size:18px;letter-spacing:0;margin-right:8px}.nav-label{padding:18px 24px 9px;color:#78828b;font-size:10px;letter-spacing:2px}.nav button{display:flex;gap:12px;align-items:center;width:100%;border:0;border-radius:0;background:transparent;color:#b9c0c6;text-align:left;padding:14px 24px;border-left:3px solid transparent}.nav button:hover{background:#22241d;color:#fff}.nav button.active{border-left-color:var(--yellow);color:#CAF70F;background:#25271f}.nav-icon{font-size:18px;width:21px}.nav-count{margin-left:auto;background:#CAF70F;color:#111111;font-size:11px;padding:1px 6px;border-radius:3px}.sidebar-foot{margin-top:auto;padding:23px;border-top:1px solid #383d43;font-size:12px;line-height:1.8}.avatar{width:31px;height:31px;border-radius:50%;display:inline-grid;place-items:center;background:#4a4f55;color:#CAF70F;margin-right:8px}.workspace{grid-column:2;min-width:0}.topbar{height:73px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 32px}.crumb{font-size:12px;color:#8c959d}.crumb b{font-weight:500;color:#3d4751}.top-tools{display:flex;align-items:center;gap:16px;font-size:12px;color:#7d8791}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#497229;margin-right:6px}.demo-banner{background:#fff5cf;border-bottom:1px solid #ebdb9b;padding:10px 32px;color:#7c6421;font-size:12px;display:flex;gap:10px;align-items:center}.demo-banner strong{background:#b48c18;color:#fff;padding:2px 6px;font-size:10px;border-radius:2px;white-space:nowrap}.content{padding:27px 32px 36px;max-width:1800px;margin:auto}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:23px}h1{font-size:25px;letter-spacing:.3px;margin:0 0 7px;font-weight:650}h2{font-size:15px;margin:0;font-weight:650}h3{font-size:14px;margin:0 0 14px}.subtitle{font-size:12px;color:#7b8590;line-height:1.7;margin:0}.actions,.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.filters{margin-bottom:18px}.filters label{font-size:12px;color:#67727d;display:flex;gap:7px;align-items:center}.filters input,.filters select{padding:8px 9px;width:auto;max-width:185px}.card{background:white;border:1px solid var(--line);border-radius:6px;box-shadow:0 1px 2px #24314003}.card-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 8px;gap:12px}.card-head .small{color:#8a949e}.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;margin-bottom:20px}.kpi{padding:20px 20px 18px;position:relative;overflow:hidden}.kpi:first-child{border-top:3px solid var(--yellow);padding-top:18px}.kpi-label{font-size:12px;color:#737e89}.kpi-value{font-size:27px;font-weight:650;letter-spacing:-.6px;margin:14px 0 12px;white-space:nowrap;font-variant-numeric:tabular-nums}.kpi-value span{font-size:14px;font-weight:400;margin-right:3px;color:#84909a}.kpi-foot{font-size:10px;color:#929ba4}.kpi-icon{position:absolute;right:18px;top:18px;color:#c5cbd0;font-size:18px}.chart-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,1fr);gap:20px;margin-bottom:20px}.chart-wrap{padding:10px 20px 15px;min-height:267px}.chart{width:100%;height:230px;overflow:visible}.chart text{font-size:10px;fill:#8d969e}.legend{display:flex;align-items:center;gap:16px;font-size:11px;color:#7e8992}.legend i{width:8px;height:8px;display:inline-block;margin-right:5px;background:var(--yellow);border-radius:2px}.legend i.out{background:#718794}.donut-wrap{display:flex;gap:20px;align-items:center;justify-content:center;min-height:236px}.donut{width:156px;height:156px;flex:none}.category-legend{display:grid;gap:13px;font-size:11px}.category-legend div{display:flex;gap:8px;align-items:center}.category-legend b{margin-left:auto;font-weight:500;color:#535e68}.category-legend i{width:7px;height:7px;border-radius:2px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:12px}th{text-align:left;color:#87919a;background:#fafbfc;font-weight:500;padding:12px 18px;border-bottom:1px solid var(--line)}td{padding:15px 18px;border-bottom:1px solid #edf0f2}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fbfcfd}.number{text-align:right;font-variant-numeric:tabular-nums}.amount-in{color:#218277}.amount-out{color:#4f5c68}.badge{display:inline-block;padding:4px 8px;border-radius:3px;font-size:10px;background:#eef1f4;color:#667580}.badge.green{background:#e9f4ee;color:#428566}.badge.amber{background:#fff4d8;color:#a47c21}.badge.blue{background:#eaf0f7;color:#58789e}.table-foot{padding:13px 20px;font-size:11px;color:#929ba4;display:flex;justify-content:space-between}.empty{padding:45px 24px;text-align:center;color:#88929b;line-height:1.9}.empty b{display:block;font-size:15px;color:#515e69;margin-bottom:5px}.panel{padding:22px}.notice{background:#f7f8fa;border:1px solid #e6eaed;border-left:3px solid #CAF70F;padding:12px 15px;font-size:12px;color:#707b85;line-height:1.8;margin-bottom:18px}.upload-zone{border:2px dashed #d4d9de;background:#fafbfc;border-radius:6px;text-align:center;padding:29px;margin:18px 0;position:relative}.upload-zone .big{font-size:27px;color:#536a0c;margin-bottom:9px}.upload-zone input{margin-top:18px;max-width:100%}.split{display:grid;grid-template-columns:310px minmax(0,1fr);gap:20px}.list-item{padding:16px 18px;border-bottom:1px solid var(--line);cursor:pointer}.list-item:hover,.list-item.selected{background:#f2f8dd}.list-item.selected{border-left:3px solid var(--yellow);padding-left:15px}.list-item strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;margin-bottom:7px}.review-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);gap:24px}.preview{background:#F7F7F2;border:1px solid var(--line);min-height:340px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:4px}.preview img{max-width:100%;max-height:620px;object-fit:contain}.preview-text{padding:35px;text-align:center;line-height:1.9;color:#7a858f}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:7px;font-size:12px;color:#697581}.field.full{grid-column:1/-1}input,select,textarea{border:1px solid #d9dee3;border-radius:4px;background:#fff;color:#35424d;padding:10px;width:100%;min-width:0}textarea{min-height:75px;resize:vertical}label.check{display:flex;align-items:center;gap:9px;font-size:12px;color:#687580}label.check input{width:auto}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}.file-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.file-card{overflow:hidden}.file-thumb{height:155px;background:#DFE2D7;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);overflow:hidden}.file-thumb img{width:100%;height:100%;object-fit:contain}.file-thumb span{font-size:32px;color:#9aa5ad}.file-meta{padding:16px}.file-name{font-size:12px;font-weight:650;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0 0 9px}.file-details{font-size:11px;color:#8a959e;line-height:1.9}.file-actions{border-top:1px solid var(--line);padding:11px 13px;display:flex;justify-content:space-between}.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:20px}.tabs button{border:0;border-radius:0;padding:10px 2px 13px;background:none;color:#89939c}.tabs button.active{border-bottom:3px solid var(--yellow);color:#36434d;font-weight:650}.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-brand{background:#111111;color:white;padding:9vw 7vw;display:flex;flex-direction:column;justify-content:center;position:relative}.login-brand:before{content:"";width:50px;height:5px;background:var(--yellow);margin-bottom:35px}.login-brand h1{font-size:43px;line-height:1.5;margin-bottom:25px}.login-brand p{color:#a7b0b8;line-height:2;font-size:14px;max-width:360px}.login-form{display:flex;align-items:center;justify-content:center;padding:40px;background:#F7F7F2}.login-box{width:360px}.login-box h2{font-size:25px;margin-bottom:12px}.login-box form{display:grid;gap:19px;margin-top:30px}.login-box .primary{padding:13px}.login-demo{border-top:1px solid #ddd;margin-top:30px;padding-top:20px;font-size:12px;color:#8b949d}.login-demo button{margin-top:12px;margin-right:7px;font-size:11px}.error{color:#ad493e;background:#fff0ed;border:1px solid #efd4cf;padding:12px;font-size:12px;line-height:1.7}.success{color:#297b64}.footer-note{margin-top:22px;color:#9aa2aa;font-size:10px;line-height:1.8}dialog{border:0;border-radius:8px;padding:0;width:700px;max-width:94vw;max-height:92vh;box-shadow:0 20px 90px #0004}dialog::backdrop{background:#1b273877}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--line)}.modal-body{padding:24px}.modal-head button{padding:3px 8px;font-size:20px;border:0}.module-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;padding:12px;background:#f8f9fa}.detail-list{display:grid;grid-template-columns:120px 1fr;font-size:13px;gap:15px;line-height:1.7}.detail-list dt{color:#8a949d}.detail-list dd{margin:0;overflow-wrap:anywhere}.pill-row{display:flex;gap:10px;margin:15px 0;flex-wrap:wrap}#toast{display:none;position:fixed;bottom:24px;right:24px;max-width:450px;padding:15px 21px;background:#26323d;color:#fff;border-radius:6px;z-index:20;box-shadow:0 6px 25px #0002;font-size:13px}#toast.show{display:block}#toast.error{background:#a44e40;color:white;border:0}.loading{opacity:.6;pointer-events:none}.mobile-title{display:none}@media(min-width:1500px){.kpi-value{font-size:32px}.content{padding:32px 40px}}@media(max-width:1200px){.sidebar{width:188px}.shell{grid-template-columns:188px minmax(0,1fr)}.brand{font-size:18px;padding-left:18px}.nav button{padding-left:19px}.content{padding:24px}.topbar{padding:0 24px}.kpis{gap:10px}.kpi{padding:17px 13px}.kpi-value{font-size:23px}.chart-grid{grid-template-columns:1.5fr 1fr}.donut-wrap{gap:10px}.donut{width:125px;height:125px}.review-grid{grid-template-columns:1fr}.file-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.shell{display:block}.sidebar{position:relative;width:auto}.brand{padding:16px 20px}.brand small,.nav-label,.sidebar-foot{display:none}.nav{display:flex;overflow:auto}.nav button{white-space:nowrap;width:auto;padding:13px;border-left:0;border-bottom:3px solid transparent}.nav button.active{border-bottom-color:var(--yellow)}.nav-icon{display:none}.topbar{height:53px;padding:0 18px}.content{padding:20px 16px}.demo-banner{padding:10px 16px;line-height:1.6}.page-heading{flex-direction:column;margin-bottom:18px;gap:13px}h1{font-size:22px}.kpis{grid-template-columns:repeat(2,1fr)}.kpi:last-child{grid-column:1/-1}.chart-grid,.split,.review-grid{grid-template-columns:1fr}.chart-wrap{padding:7px 12px}.card-head{padding:17px 16px 10px}.split>div:first-child{max-height:250px;overflow:auto}.file-grid{grid-template-columns:repeat(2,1fr);gap:10px}.file-meta{padding:12px}.file-thumb{height:115px}.panel{padding:17px}.login-page{grid-template-columns:1fr}.login-brand{padding:35px 25px}.login-brand:before{margin-bottom:17px}.login-brand h1{font-size:27px;margin-bottom:8px}.login-brand p{font-size:12px;margin:0}.login-form{padding:30px 22px}.top-tools .hide-mobile{display:none}.fields{gap:13px}.filters{gap:8px}.filters input,.filters select{max-width:145px}td,th{padding:12px}.modal-body{padding:18px}.donut-wrap{min-height:210px}}@media(max-width:450px){.file-grid{grid-template-columns:1fr}.fields{grid-template-columns:1fr}.field.full{grid-column:auto}.top-tools{gap:7px}.detail-list{grid-template-columns:85px 1fr}}

/* YEAH! identity: original assets, warm-white BI surfaces, controlled lime accents. */
:root{--brand-lime:#CAF70F;--brand-paper:#F7F7F2;--brand-mineral:#DFE2D7;--yellow:var(--brand-lime);--ink:#111111;--muted:#71766a;--line:#DFE2D7;color:#111111;background:var(--brand-paper);font-family:"Aptos","Segoe UI","Microsoft YaHei","PingFang SC",sans-serif}
body{background:var(--brand-paper)}
button{border-color:#d1d5c9;color:#25281f;border-radius:5px;transition:background .15s,border-color .15s,box-shadow .15s}
button:hover{background:#f1f3e9;border-color:#a7af98}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #6b8a00;outline-offset:3px}
.primary{color:#111111;background:var(--brand-lime);border-color:var(--brand-lime)}
.primary:hover{background:#bce70e;border-color:#bce70e}
a,.link{color:#53691a}
input,select,textarea{color:#20241b;border-color:#d1d5c9}
input:focus,select:focus,textarea:focus{border-color:#6d850f}
.sidebar{background:#111111;color:#c5c9bd;border-right:1px solid #252820}
.brand{position:relative;padding:29px 20px 24px;font-size:0;letter-spacing:0;min-height:112px}
.brand:before{content:"";display:block;width:176px;height:28px;background:#fff url('/brand/wordmark.png') center / contain no-repeat;border-radius:1px}
.brand-mark{display:none}
.brand small{font-size:9px;letter-spacing:2.1px;color:#a8ae9b;margin-top:13px}
.brand img.brand-logo{display:block;width:176px;height:auto;background:#fff}
.brand:has(img.brand-logo):before{display:none}
.nav-label{color:#858d78;font-size:10px;letter-spacing:1.7px}
.nav button{color:#c3c8b8;padding-top:15px;padding-bottom:15px}
.nav button:hover{background:#20241a;color:#fff}
.nav button.active{color:var(--brand-lime);border-left-color:var(--brand-lime);background:#252b18}
.nav-count{color:#111;background:var(--brand-lime);font-weight:700}
.sidebar-foot{border-top-color:#2c3026;color:#d8ddcf}
.avatar{background:#2d3421;color:var(--brand-lime)}
.topbar{background:#fff;border-bottom-color:#dce0d2}
.crumb{color:#777f6e}.crumb b{color:#262c1d}.status-dot{background:#638516}
.content{padding-top:29px}
h1{font-weight:700;letter-spacing:-.7px;color:#111111}h2,h3{color:#1b2113}
.page-heading h1:after{content:"";display:inline-block;width:24px;height:24px;margin-left:12px;vertical-align:-3px;background:url('/brand/spark.png') center / contain no-repeat}
.subtitle{color:#73796a}
.card{border-color:#dce0d3;border-radius:7px;box-shadow:0 2px 5px #18250004}
.kpi{padding-top:21px;border-top:3px solid transparent}
.kpi:first-child{background:#eef7ca;border-top-color:var(--brand-lime)}
.kpi:first-child .kpi-icon{color:#748d19}
.kpi-value{font-weight:700;color:#171c0e;letter-spacing:-1px}
.kpi-label{color:#68715b}.kpi-foot{color:#7d8573}.kpi-icon{color:#bcc4ae}
.card-head{padding-top:21px}.card-head h2{letter-spacing:.1px}
.chart text{fill:#7b836f}.legend{color:#737c68}.legend i.out{background:#626c55}
.category-legend b{color:#363e2c}
th{background:#f3f5ec;color:#737c68;border-bottom-color:#dce0d3}
td{border-bottom-color:#ecefe5}tbody tr:hover{background:#f6f8ef}
.amount-in{color:#537614}.amount-out{color:#3f4932}
.badge{background:#eef1e6;color:#606c51}.badge.green{background:#e9f3d0;color:#4b6714}.badge.amber{background:#f6edcc;color:#826719}.badge.blue{background:#e7ebdf;color:#56644a}
.notice{background:#f4f6ed;border-color:#e0e5d4;border-left-color:#98b623;color:#67705b}
.demo-banner{background:#f3f8df;border-bottom-color:#dce8ae;color:#536324}.demo-banner strong{background:#627b10;color:#fff}
.upload-zone{background:#f6f8ed;border-color:#bbc99a}.upload-zone:hover{border-color:#75960d;background:#f2f7e0}
.preview{background:#edf0e5}.file-thumb{background:#e9eddf}
.list-item.selected{background:#f0f6dc}.list-item:hover{background:#f6f8ee}
.tabs button{color:#7e8772}.tabs button.active{color:#222b16;border-bottom-color:var(--brand-lime)}
.empty{color:#7d8670}.empty b{color:#4e5c3a}
.login-brand{background:#111111;padding:85px 64px 160px;isolation:isolate;overflow:hidden}
.login-brand:before{content:"";width:280px;max-width:100%;height:44px;background:#fff url('/brand/wordmark.png') center / contain no-repeat;margin-bottom:47px;flex-shrink:0}
.login-brand:after{content:"";position:absolute;width:215px;height:140px;right:34px;bottom:34px;background:url('/brand/orbit.png') center / contain no-repeat;z-index:-1;opacity:.82;pointer-events:none}
.login-brand h1{font-size:42px;line-height:1.35;color:#fff;letter-spacing:-1.3px;margin-bottom:24px}
.login-brand h1 span{color:var(--brand-lime)!important}
.login-brand p{color:#adb79d;line-height:2.1;max-width:370px}
.login-form{background:var(--brand-paper)}
.login-box h2{font-size:28px;font-weight:700;letter-spacing:-.6px}
.login-box .primary{font-size:14px;padding:14px}
.footer-note{color:#87907a}.login-demo{border-top-color:#dce0d2;color:#7b846e}
.module-checks{background:#f1f4e8}
dialog{border:1px solid #d4dbc5;border-radius:9px;box-shadow:0 24px 100px #101b0040}
dialog::backdrop{background:#11170bd1}
.modal-head{background:#f7f9f0;border-bottom-color:#dce2d1}
#toast{background:#202919;color:#f6faee;border:1px solid #5a6c40}
.boot{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:24px;background:var(--brand-paper);font-size:13px;color:#687257}
.boot img{width:250px;max-width:70vw;height:auto}
.boot span:before{content:"";display:inline-block;width:7px;height:7px;background:#9cbd15;border-radius:50%;margin-right:9px}
@media(min-width:1500px){.content{padding-top:34px}}
@media(max-width:1200px){.brand{padding-left:16px;padding-right:16px}.brand:before,.brand img.brand-logo{width:155px}.brand small{font-size:8px;letter-spacing:1.6px}.login-brand{padding-left:44px;padding-right:44px}}
@media(max-width:800px){.brand{min-height:auto;padding:18px 20px}.brand:before,.brand img.brand-logo{width:160px;height:25px}.brand small{display:none}.nav button.active{border-bottom-color:var(--brand-lime)}.content{padding-top:22px}.login-brand{padding:36px 25px 40px}.login-brand:before{width:220px;height:34px;margin-bottom:27px}.login-brand:after{width:110px;height:73px;right:22px;bottom:22px;opacity:.4}.login-brand h1{font-size:30px;letter-spacing:-.6px;max-width:80%}.login-brand p{max-width:80%;font-size:12px}.page-heading h1:after{width:21px;height:21px;margin-left:9px}.login-form{padding-top:34px;padding-bottom:40px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* Payroll management panels keep the BI grid readable on narrow screens. */
.payroll-tools{margin-bottom:18px}.payroll-confirm{margin-top:18px}.payroll-override{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}summary{cursor:pointer;color:#475b1d;font-size:12px;padding:10px 0}details>.fields{margin-top:12px}fieldset{border:0;margin:0;padding:0;min-width:0}.rate-table{margin-top:20px}.rate-table input{max-width:130px}.payroll-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.payroll-totals>div{padding:14px;background:#F7F7F2;color:#626a56;font-size:11px;border:1px solid var(--line);border-radius:5px}.payroll-totals b{display:block;color:#111;font-size:20px;margin-top:9px;font-variant-numeric:tabular-nums}.payroll-totals>div:last-child{background:#CAF70F;border-color:#CAF70F}.legend i.out{background:#687456}.login-logo{display:block;width:280px;max-width:100%;height:auto;background:#fff;margin-bottom:47px}.login-brand:has(.login-logo):before{display:none}
@media(max-width:800px){.payroll-totals{grid-template-columns:repeat(2,1fr)}.payroll-totals b{font-size:18px}.tabs{gap:18px;overflow:auto;white-space:nowrap}.login-logo{width:220px;margin-bottom:27px}.form-actions{flex-wrap:wrap}}

.upload-consent { justify-content:center; margin:18px auto 0; max-width:780px; text-align:left; line-height:1.7; }
.upload-result { padding:8px 0; border-bottom:1px solid #e9edf0; overflow-wrap:anywhere; }
.vault-file { margin-bottom:16px; overflow:hidden; }
.vault-file .card-head > div, .preview-dialog .modal-head h2 { min-width:0; }
.vault-filename, .preview-dialog .modal-head h2 { overflow-wrap:anywhere; text-align:left; }
.vault-file .notice { margin:12px 20px; }
.vault-file summary { cursor:pointer; padding:12px 20px; color:#59664b; }
.vault-filters { flex-wrap:wrap; }
.vault-filters input,.vault-filters select { max-width:205px; }
.invoice-payment { margin-top:12px; padding:12px; border:1px solid #dce3d2; }

/* Background recognition stays readable without disturbing calibration forms. */
.recognition-progress{font-size:11px;line-height:1.6;max-width:330px;color:#687456}.recognition-tasks{margin-top:18px}.task-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 20px;border-top:1px solid #e7e9df}.task-row>.small{flex:1;min-width:140px}.task-row>.link{max-width:280px;overflow-wrap:anywhere;text-align:left}@media(max-width:800px){.recognition-progress{max-width:180px;font-size:10px}.task-row{padding:10px 12px}}

/* Clear voucher snapshots beside calibration; original YEAH palette retained. */
.calibration-layout{grid-template-columns:200px minmax(0,1fr)}.review-grid{grid-template-columns:minmax(340px,1.2fr) minmax(310px,1fr);gap:24px;align-items:start}.calibration-preview{position:sticky;top:18px;min-width:0}.calibration-fields{min-width:0}.calibration-fields .fields{gap:14px}.snapshot-viewer{border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#DFE2D7}.snapshot-tools{display:flex;align-items:center;gap:5px;padding:9px;flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--line)}.snapshot-tools button{padding:6px 9px;font-size:12px}.snapshot-tools [data-preview-pagination]{font-size:11px;margin:0 3px;font-variant-numeric:tabular-nums}.snapshot-status{padding:8px 11px;background:#F7F7F2;color:#697581;font-size:11px;min-height:32px;line-height:1.6}.snapshot-scroll{height:66vh;min-height:360px;max-height:900px;overflow:auto;overscroll-behavior:contain}.snapshot-canvas{min-width:100%;padding:12px}.snapshot-canvas img{display:block;max-width:none;max-height:none;height:auto;box-shadow:0 2px 8px #1112;image-rendering:auto}.invoice-matching b{color:#37452c}.calibration-fields h3{margin-top:0}.preview-dialog{width:1100px}.preview-dialog .snapshot-scroll{height:62vh}
@media(max-width:1650px){.calibration-layout{grid-template-columns:1fr}.calibration-layout>.draft-queue{max-height:185px;overflow:auto}.draft-queue .list-item{display:inline-block;width:240px;vertical-align:top;border-left:0;border-right:1px solid var(--line)}.draft-queue .card-head{padding:12px 18px}.draft-queue .list-item.selected{border-left:0;border-bottom:3px solid var(--yellow)}}
@media(max-width:1050px){.review-grid{grid-template-columns:1fr}.calibration-preview{position:static}.snapshot-scroll{height:60vh}.calibration-layout>.panel{padding:16px}}@media(max-width:600px){.snapshot-scroll{min-height:300px;height:55vh}.snapshot-tools{gap:3px}.snapshot-tools button{padding:6px}.snapshot-canvas{padding:6px}.preview-dialog .modal-body{padding:12px}}

/* Confirmed vouchers and actual cash remain separate business measures. */
.invoice-summary{margin:20px 0}.invoice-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:12px 22px}.invoice-summary-grid>div{padding:14px 18px;background:#F7F7F2;border-left:3px solid #DFE2D7;line-height:1.9}.invoice-summary-grid strong{display:block;font-size:26px;color:#111}.invoice-summary-grid strong small{font-size:12px;font-weight:400}.invoice-summary-note{padding:0 22px 16px;margin:0}.invoice-choice{border:1px solid #DFE2D7;border-radius:5px;padding:16px;margin:20px 0 15px;background:#f7f9ef}.invoice-choice legend{font-weight:700;font-size:13px;padding:0 7px}.invoice-choice .check{padding:7px 0;color:#35412b}.invoice-choice input{accent-color:#687456}.invoice-payment-button{font-size:12px;padding:7px 10px;white-space:nowrap}@media(max-width:600px){.invoice-summary-grid{grid-template-columns:1fr;gap:10px;padding:10px 16px}.invoice-choice{padding:12px}}

/* Narrow screens keep actions and financial values within the viewport. */
.mobile-signout,
.mobile-only {
  display: none;
}

@media (max-width: 800px) {
  .brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 8px 14px;
  }
  .brand img.brand-logo { width: 124px; max-width: 50%; }
  .mobile-signout { display: inline-flex; align-items: center; color: #d8ddcf; font-size: 12px; }
  .mobile-signout:hover { background: #252b18; color: #fff; }
  .nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3px;
    padding: 0 9px 9px;
    overflow: visible;
  }
  .nav button {
    position: relative;
    justify-content: center;
    flex-wrap: wrap;
    gap: 3px;
    min-width: 0;
    width: 100%;
    padding: 7px 4px;
    font-size: 12px;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
    border-radius: 4px;
  }
  .nav .desktop-only { display: none; }
  .nav .mobile-only { display: inline; }
  .nav-count { position: absolute; top: 2px; right: 2px; margin-left: 0; font-size: 9px; padding: 1px 3px; }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 8px;
    height: auto;
    padding: 3px 14px 9px;
  }
  .top-tools { display: contents; }
  .topbar .crumb { grid-area: 1 / 1; }
  .topbar [data-action="refresh"] { grid-area: 1 / 2; }
  .topbar .recognition-progress { grid-area: 2 / 1 / auto / -1; max-width: none; }
  .top-user { display: none; }
  .content { padding: 16px 12px 28px; }
  .page-heading { gap: 9px; margin-bottom: 15px; }
  .page-heading h1 { font-size: 22px; line-height: 1.3; }
  .page-heading h1::after { width: 17px; height: 17px; margin-left: 7px; }
  .page-heading .actions { width: 100%; }
  .page-heading .actions:empty { display: none; }
  .panel { padding: 14px; }
  .card-head { flex-wrap: wrap; padding: 14px 13px 10px; gap: 8px; }
  .card-head > * { min-width: 0; }
  .card-head .link { text-align: left; }
  .notice, .subtitle, .task-row, .detail-list { overflow-wrap: anywhere; }
  .notice { padding: 10px 12px; }
  .badge { white-space: normal; }
  .button-link, .pill-row a { display: inline-flex; align-items: center; }
  .pill-row a, .mobile-signout, button { min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 44px; }
  .field, .fields, .field > * { min-width: 0; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-actions { flex-wrap: wrap; gap: 8px; }
  .form-actions button { min-width: 0; flex: 1 1 130px; }
  .form-actions .primary { flex-basis: 186px; }
  .check input { min-width: 17px; min-height: 17px; flex: none; }
  .check { min-height: 44px; }
  .module-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { flex-wrap: wrap; gap: 2px 12px; margin-bottom: 13px; }
  .tabs button { padding: 6px 4px; font-size: 12px; }
  .date-filters, .vault-filters, .ledger-filters, .upload-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 9px;
  }
  .ledger-filters { width: 100%; }
  .filters label { display: grid; gap: 4px; min-width: 0; }
  .filters input, .filters select { width: 100%; max-width: none; }
  .date-filters .mobile-only { display: inline; }
  .date-filters .desktop-only { display: none; }
  .date-separator { display: none; }
  .date-filters input[type="date"], .vault-filters input[type="date"] { padding-inline: 6px; }
  #vault-search, #ledger-search, .upload-actions label { grid-column: 1 / -1; }
  .kpis { gap: 8px; }
  .kpi, .kpi:first-child { padding: 12px 10px; }
  .kpi-value {
    font-size: clamp(17px, 4.8vw, 23px);
    margin: 8px 0 6px;
    white-space: normal;
    overflow-wrap: anywhere;
    letter-spacing: -.55px;
  }
  .kpi-value span { font-size: 11px; }
  .kpi-icon { display: none; }
  .kpi-foot { line-height: 1.45; }
  .invoice-summary { margin: 14px 0; }
  .invoice-summary-grid { padding: 8px 12px; gap: 8px; }
  .invoice-summary-grid > div { padding: 9px 10px; overflow-wrap: anywhere; }
  .invoice-summary-note { padding: 0 12px 12px; }
  .chart-grid { gap: 12px; margin-bottom: 12px; }
  .chart-wrap { min-height: 0; padding: 8px 10px 12px; }
  .chart { display: block; height: auto; }
  .chart text { font-size: 15px; }
  .donut-wrap { padding: 12px; min-height: 0; gap: 12px; }
  .donut { width: clamp(94px, 30vw, 130px); height: auto; }
  .category-legend { min-width: 0; gap: 8px; overflow-wrap: anywhere; }
  .category-legend i { flex: none; }
  .table-foot { padding: 10px 13px; gap: 10px; }
  .table-scroll { max-width: 100%; }
  .table-scroll th, .table-scroll td { padding: 9px 12px; }
  .mobile-records, .mobile-records tbody { display: block; white-space: normal; }
  .mobile-records thead {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
  }
  .mobile-records tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    padding: 12px 13px;
  }
  .mobile-records tbody tr + tr { border-top: 1px solid var(--line); }
  .table-scroll .mobile-records td {
    padding: 0;
    border: 0;
    text-align: left;
    min-width: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  .mobile-records td[data-label]::before {
    display: block;
    content: attr(data-label);
    color: #71766a;
    font-size: 11px;
    margin-bottom: 3px;
  }
  .mobile-records td[data-mobile-title] {
    grid-row: 1;
    grid-column: 1 / -1;
    font-size: 14px;
    font-weight: 650;
  }
  .mobile-records td[data-mobile-actions] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .mobile-records td .link { margin-right: 3px; }
  .upload-zone { padding: 12px; margin: 12px 0; }
  .upload-zone .big { font-size: 20px; margin: 0 0 4px; }
  .upload-zone input[type="file"] { padding: 4px; margin-top: 12px; }
  .upload-zone input::file-selector-button { min-height: 38px; margin-right: 6px; }
  .upload-actions { text-align: left; }
  .upload-actions button { padding: 7px 4px; font-size: 12px; }
  .recognition-tasks .task-row { gap: 6px; }
  .recognition-tasks .task-row > .small:empty { display: none; }
  .draft-queue .list-item { width: auto; display: block; min-height: 58px; }
  .calibration-layout > .draft-queue { max-height: 235px; }
  .draft-queue .list-item.selected { border-bottom: 1px solid var(--line); border-left: 3px solid var(--brand-lime); }
  .review-grid { gap: 16px; }
  .snapshot-tools {
    display: grid;
    grid-template-columns: minmax(44px, 1fr) minmax(73px, 1.25fr) minmax(44px, 1fr);
    gap: 5px;
    padding: 6px;
  }
  .snapshot-tools button { min-height: 44px; padding: 5px; }
  .snapshot-tools [data-preview-pagination] { text-align: center; }
  .snapshot-scroll, .preview-dialog .snapshot-scroll {
    height: clamp(180px, 43vh, 420px);
    height: clamp(180px, 43dvh, 420px);
    min-height: 0;
    overscroll-behavior: auto;
  }
  dialog[open] {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
    max-width: 640px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: auto;
    overflow: hidden;
  }
  .modal-head { flex: none; padding: 7px 12px; }
  .modal-head h2 { overflow-wrap: anywhere; }
  .modal-head button { min-width: 44px; flex: none; }
  .modal-body, .preview-dialog .modal-body { min-height: 0; overflow: auto; padding: 13px; }
  .payroll-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payroll-totals div { min-width: 0; overflow-wrap: anywhere; }
  .login-page { grid-template-rows: auto 1fr; }
  .login-brand { padding: 19px 20px 22px; }
  .login-brand img.login-logo { width: 155px; max-width: 60%; }
  .login-brand h1 { font-size: 27px; line-height: 1.16; margin: 13px 0 7px; }
  .login-brand p { line-height: 1.5; }
  .login-brand p:last-child { display: none; }
  .login-brand::after { width: 105px; height: 68px; right: 12px; bottom: 8px; opacity: .42; }
  .login-form { align-items: flex-start; padding: 20px 17px 27px; }
  .login-box { width: 100%; max-width: 380px; }
  .login-box form { margin-top: 16px; gap: 12px; }
  .login-demo button { margin-top: 6px; }
  #toast { left: 10px; right: 10px; bottom: 10px; width: auto; max-width: none; }
}

@media (max-width: 500px) {
  .fields { grid-template-columns: minmax(0, 1fr); }
  .invoice-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invoice-summary-grid strong { font-size: 22px; }
  .invoice-summary-grid .kpi-label, .invoice-summary-grid .small { font-size: 11px; }
}