:root{--navy:#12233f;--blue:#2767d8;--cyan:#32b5c8;--bg:#f3f6fb;--panel:#fff;--text:#17243a;--muted:#718096;--line:#dfe6ef;--green:#159d72;--orange:#e7822f;--purple:#7657c9;--red:#d64f5d;--shadow:0 14px 36px rgba(36,55,86,.08)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Segoe UI",Tahoma,sans-serif}.topbar{height:68px;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 4vw;box-shadow:0 8px 24px rgba(13,29,54,.22);position:sticky;top:0;z-index:20}.brand{color:#fff;text-decoration:none;font-size:22px;font-weight:800;letter-spacing:.03em}.brand span{color:#72d3df;font-weight:500}.topbar nav{display:flex;height:100%;gap:8px}.topbar nav a{display:flex;align-items:center;color:#bdcbe0;text-decoration:none;padding:0 16px;border-bottom:3px solid transparent}.topbar nav a:hover,.topbar nav a.active{color:#fff;border-bottom-color:#4cc5d5}.page-shell{max-width:1440px;margin:0 auto;padding:36px 3vw 60px}.page-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:26px}.page-heading.compact{align-items:center}.page-heading h1{font-size:32px;line-height:1.2;margin:4px 0 6px}.eyebrow{color:var(--blue);font-size:12px;font-weight:800;letter-spacing:.14em;margin:0;text-transform:uppercase}.subtext{color:var(--muted);margin:0}.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:10px 16px;text-decoration:none;font:inherit;font-weight:700;cursor:pointer}.button.primary{background:var(--blue);color:#fff;box-shadow:0 8px 16px rgba(39,103,216,.2)}.button.ghost{background:#eef3fa;color:#344b70;border:1px solid #dbe4f0}.button.large{padding:14px 28px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.kpi-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow)}.kpi-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--blue)}.kpi-card.accent-green:before{background:var(--green)}.kpi-card.accent-purple:before{background:var(--purple)}.kpi-card.accent-orange:before{background:var(--orange)}.kpi-card span{display:block;color:var(--muted);font-size:13px}.kpi-card strong{display:block;font-size:27px;margin:10px 0 4px}.kpi-card small,.kpi-card em{font-size:12px;color:var(--muted);font-style:normal}.kpi-card a{font-size:12px;color:var(--blue)}.status-strip{display:flex;gap:28px;background:#e7eef8;border:1px solid #d8e3f2;border-radius:12px;margin:18px 0;padding:13px 18px;color:#52647e}.status-strip strong{color:var(--text);margin-left:5px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.dot.pending{background:var(--orange)}.dot.processing{background:var(--blue)}.dot.failed{background:var(--red)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)}.panel-heading h2{font-size:18px;margin:2px 0}.panel-heading a{color:var(--blue);text-decoration:none}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th{background:#f7f9fc;color:#61718a;font-size:12px;text-transform:uppercase;letter-spacing:.04em;text-align:left}th,td{padding:14px 16px;border-bottom:1px solid #e9edf3;white-space:nowrap}td{font-size:14px}td strong,td small{display:block}td small{color:var(--muted);margin-top:4px}.clickable{cursor:pointer}.clickable:hover{background:#f5f9ff}.money{text-align:right;font-variant-numeric:tabular-nums}.empty{text-align:center;color:var(--muted);padding:36px}.badge,.kind{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;background:#edf2f8;color:#53657e}.badge.required{background:#fff2df;color:#aa5a16}.badge.approved,.badge.not_required{background:#dff6ed;color:#087657}.badge.rejected{background:#fde6e8;color:#a62937}.kind.payment_proof{background:#eee8ff;color:#6644b5}.kind.expense_document{background:#e3efff;color:#235da9}.tabs{display:flex;gap:6px;margin:0 0 16px;border-bottom:1px solid #d6dfeb}.tabs a{color:#677991;padding:12px 16px;text-decoration:none;font-weight:700;border-bottom:3px solid transparent}.tabs a.active{color:var(--blue);border-color:var(--blue)}.filter-panel{padding:20px;margin-bottom:16px}.filter-grid,.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.filter-grid label,.form-grid label{display:flex;flex-direction:column;gap:7px;color:#5e6e85;font-size:12px;font-weight:700}.span-2{grid-column:span 2}.filter-actions{display:flex;align-items:end;gap:8px}input,select,textarea{width:100%;border:1px solid #cfd9e6;border-radius:9px;background:#fff;color:var(--text);padding:10px 11px;font:inherit;font-size:14px}input:focus,select:focus,textarea:focus{outline:2px solid rgba(39,103,216,.16);border-color:var(--blue)}.pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px}.back{color:var(--blue);text-decoration:none;font-size:13px}.heading-actions{display:flex;align-items:center;gap:10px}.alert{border-radius:10px;padding:12px 16px;margin-bottom:16px}.alert.success{background:#dff6ed;color:#087657;border:1px solid #bde9d8}.detail-layout{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(500px,1.4fr);gap:18px;align-items:start}.image-panel{position:sticky;top:86px;padding:14px}.image-panel img{display:block;width:100%;max-height:72vh;object-fit:contain;background:#e9eef5;border-radius:10px}.metadata{margin:14px 2px 0}.metadata div{display:grid;grid-template-columns:100px 1fr;padding:7px 0;border-bottom:1px solid #edf0f5}.metadata dt{color:var(--muted);font-size:12px}.metadata dd{margin:0;font-size:12px;overflow-wrap:anywhere}.mono{font-family:Consolas,monospace}.edit-column{display:grid;gap:18px}.form-section{margin-bottom:18px}.form-section .form-grid{padding:20px}.amount-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.items-section{margin-top:18px}.items-section input{min-width:100px;padding:8px}.items-section td:first-child input{min-width:280px}.icon-button{border:0;background:#fde6e8;color:#a62937;border-radius:8px;width:31px;height:31px;font-size:20px;cursor:pointer}.save-bar{position:sticky;bottom:12px;z-index:10;margin:18px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(18,35,63,.97);color:#fff;padding:14px 18px;border-radius:14px;box-shadow:0 12px 30px rgba(16,31,54,.25)}.save-bar p{margin:3px 0 0;color:#c7d2e3;font-size:12px}.ocr{margin:0;padding:20px;white-space:pre-wrap;color:#34445c;background:#f7f9fc;max-height:300px;overflow:auto}.audit-list{padding:0 20px}.audit-list div{padding:12px 0;border-top:1px solid var(--line)}.audit-list span{color:var(--muted);font-size:12px;margin-left:8px}.audit-list p{margin:4px 0;color:#56667d;font-size:13px}
@media(max-width:1000px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.detail-layout{grid-template-columns:1fr}.image-panel{position:static}.filter-grid,.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.topbar{height:auto;align-items:flex-start;flex-direction:column;padding:14px 18px}.topbar nav{width:100%;overflow:auto}.topbar nav a{padding:12px 10px}.page-shell{padding:24px 14px 48px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:25px}.kpi-grid{grid-template-columns:1fr}.status-strip{align-items:flex-start;flex-direction:column;gap:8px}.filter-grid,.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.save-bar{position:static;align-items:flex-start;flex-direction:column}.save-bar .button{width:100%}}