:root{--ink:#17211f;--muted:#6d7773;--line:#e6e9e7;--bg:#f4f6f4;--panel:#fff;--green:#1f6b52;--green-dark:#195642;--green-soft:#e9f4ef;--purple:#6656d9;--orange:#ca6a32;--blue:#3876bb;--shadow:0 12px 40px rgba(26,44,37,.09)}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",sans-serif}.app-shell{display:grid;grid-template-columns:246px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#fcfdfc;border-right:1px solid var(--line);padding:26px 18px 20px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;font:700 20px Manrope;margin:0 10px 38px}.brand-mark{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;color:white;background:var(--green);font-size:17px}.sidebar nav{display:flex;flex-direction:column;gap:6px}.nav-item{display:flex;align-items:center;gap:12px;text-decoration:none;color:#5f6965;font-weight:600;font-size:14px;padding:11px 12px;border-radius:9px}.nav-item:hover,.nav-item.active{background:#eaf2ee;color:var(--green)}.nav-icon{width:20px;font-size:18px;text-align:center}.nav-count{margin-left:auto;background:#dce9e2;color:var(--green);border-radius:12px;padding:1px 8px;font-size:11px}.sidebar-spacer{flex:1}.sync-card{padding:16px;margin-bottom:15px;border:1px solid #dfe8e3;border-radius:12px;background:#f5f9f7;display:flex;flex-direction:column;align-items:flex-start}.sync-icon{background:#dfeee7;color:var(--green);border-radius:8px;padding:7px;margin-bottom:12px}.sync-card strong{font-size:13px}.sync-card span{color:var(--muted);font-size:11px;margin:3px 0 12px}.sync-card button{width:100%;border:1px solid #cddbd4;background:white;border-radius:7px;padding:7px;color:var(--green);font-weight:700;cursor:pointer}.user-card{display:flex;align-items:center;gap:10px;padding:18px 7px 0;margin-top:12px;border-top:1px solid var(--line)}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#efe5d6;color:#805f35;font-size:12px;font-weight:700}.user-card div:nth-child(2){display:flex;flex-direction:column;flex:1}.user-card strong{font-size:12px}.user-card span{font-size:10px;color:var(--muted)}.user-card button{border:0;background:none;color:var(--muted)}
main{padding:32px 42px 48px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:25px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--green);margin:0 0 5px}.topbar h1{font:700 26px Manrope;margin:0}.subtitle{color:var(--muted);font-size:13px;margin:6px 0 0}.top-actions{display:flex;gap:10px}.icon-button,.secondary-button,.primary-button,.text-button{font:600 13px "DM Sans";cursor:pointer}.icon-button{position:relative;border:1px solid var(--line);background:white;border-radius:9px;width:40px;height:40px}.alert-dot{position:absolute;width:6px;height:6px;background:#d44b45;border-radius:50%;right:9px;top:8px}.primary-button{border:0;background:var(--green);color:white;border-radius:9px;padding:11px 17px;box-shadow:0 3px 8px rgba(31,107,82,.18)}.primary-button:hover{background:var(--green-dark)}.attention-card{display:flex;justify-content:space-between;align-items:center;background:#fff8ed;border:1px solid #f1dcc1;border-radius:11px;padding:13px 16px;margin-bottom:18px}.attention-copy{display:flex;align-items:center;gap:13px}.attention-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#f3dfc2;color:#9b6228;font-weight:700}.attention-copy strong{font-size:13px}.attention-copy p{font-size:11px;color:#7e715f;margin:2px 0}.text-button{border:0;background:transparent;color:#8d5e27}.text-button span{margin-left:8px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.metric-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:17px 18px}.metric-top{display:flex;justify-content:space-between;align-items:center}.metric-icon{width:29px;height:29px;border-radius:8px;display:grid;place-items:center;font-weight:700}.metric-icon.purple{background:#efedff;color:var(--purple)}.metric-icon.green{background:#e7f4ee;color:var(--green)}.metric-icon.orange{background:#fff0e6;color:var(--orange)}.metric-icon.blue{background:#eaf3fc;color:var(--blue)}.trend{font-size:10px;border-radius:12px;padding:3px 7px}.trend.up{background:#eaf6f0;color:#287258}.trend.neutral{background:#fff0e7;color:#a3572e}.metric-card>p{color:var(--muted);font-size:12px;margin:14px 0 2px}.metric-card>strong{font:700 24px Manrope}.metric-card>strong em{font:600 12px "DM Sans";color:var(--muted);font-style:normal}.metric-card small{display:block;color:#939b98;font-size:10px;margin-top:3px}
.request-section{background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden}.section-header{display:flex;justify-content:space-between;align-items:center;padding:20px 21px 16px}.section-header h2{font:700 17px Manrope;margin:0}.section-header p{margin:4px 0 0;color:var(--muted);font-size:11px}.secondary-button{border:1px solid #dce1de;background:white;color:#46514d;border-radius:8px;padding:9px 13px}.table-toolbar{display:flex;justify-content:space-between;padding:12px 20px;border-top:1px solid #eef0ef;border-bottom:1px solid #eef0ef}.search-wrap{display:flex;align-items:center;gap:8px;width:330px;border:1px solid #dfe3e1;border-radius:8px;padding:7px 10px;color:#89918e}.search-wrap input{border:0;outline:0;width:100%;font:400 12px "DM Sans"}.filters{display:flex;gap:8px}.filters select,.modal select{border:1px solid #dfe3e1;border-radius:8px;padding:7px 28px 7px 10px;background:white;color:#505b57;font:500 11px "DM Sans"}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:850px}th{text-align:left;text-transform:uppercase;letter-spacing:.7px;font-size:9px;color:#8b9390;font-weight:700;background:#fafbfa;padding:10px 20px}td{padding:14px 20px;border-top:1px solid #eef0ef;font-size:12px;vertical-align:middle}tbody tr{cursor:pointer;transition:.15s}tbody tr:hover{background:#f8faf9}.vendor-cell{display:flex;gap:11px;align-items:center}.vendor-logo{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:11px}.vendor-cell div:nth-child(2){display:flex;flex-direction:column}.vendor-cell strong{font-size:12px}.vendor-cell span,.subtext{font-size:10px;color:#89918e}.amount{font-weight:700}.days{display:block;font-size:9px;color:#9a6251;margin-top:2px}.status{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:15px;font-size:10px;font-weight:600;white-space:nowrap}.status:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.needs-review{background:#fff0e7;color:#a9582b}.awaiting-approval{background:#f0edff;color:#6655bd}.scheduled{background:#e9f2fc;color:#3f72a5}.paid{background:#e8f4ee;color:#286b50}.owner{display:flex;align-items:center;gap:6px}.owner-avatar{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#e9eeeb;font-size:8px;font-weight:700}.row-menu{border:0;background:transparent;color:#8a928f;font-weight:700}.empty-state{text-align:center;padding:40px;color:var(--muted)}.empty-state span{font-size:25px}.empty-state strong{display:block;color:var(--ink);margin-top:8px}.empty-state p{font-size:12px}.table-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-top:1px solid #eef0ef;color:var(--muted);font-size:10px}.pagination{display:flex;gap:4px}.pagination button{border:1px solid #e0e4e2;background:white;border-radius:6px;height:26px;min-width:26px;color:#767f7b}.pagination .active{background:#edf4f0;color:var(--green);border-color:#d8e7df}
.overlay{position:fixed;inset:0;background:rgba(19,31,27,.3);z-index:20}.drawer{position:fixed;z-index:21;right:0;top:0;height:100vh;width:440px;max-width:100%;background:white;box-shadow:-14px 0 40px rgba(20,35,29,.14);padding:30px;transform:translateX(105%);transition:transform .25s ease;overflow:auto}.drawer.open{transform:translateX(0)}.drawer-close{border:0;background:#f1f3f2;color:#64706b;border-radius:50%;width:30px;height:30px;font-size:20px;cursor:pointer;float:right}.drawer .vendor-logo{width:48px;height:48px;font-size:15px}.drawer-vendor{display:flex;align-items:center;gap:13px;clear:both;padding-top:22px}.drawer h2{font:700 22px Manrope;margin:0}.drawer-vendor p{color:var(--muted);font-size:11px;margin:4px 0}.drawer-amount{font:700 30px Manrope;margin:28px 0 4px}.drawer-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:23px 0}.detail-box{border:1px solid var(--line);border-radius:9px;padding:12px}.detail-box span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.7px;margin-bottom:5px}.detail-box strong{font-size:12px}.timeline{border-top:1px solid var(--line);padding-top:22px}.timeline h3{font:700 14px Manrope}.event{position:relative;margin-left:8px;padding:0 0 20px 22px;border-left:1px solid #dfe5e2}.event:before{content:"";position:absolute;left:-5px;width:9px;height:9px;border:2px solid white;box-shadow:0 0 0 1px #b7c6bf;background:var(--green);border-radius:50%}.event strong{font-size:11px}.event p{font-size:10px;color:var(--muted);margin:3px 0}.drawer-actions{display:flex;gap:9px;position:sticky;bottom:-30px;background:white;padding:18px 0 30px}.drawer-actions button{flex:1}
.modal-backdrop{position:fixed;inset:0;background:rgba(19,31,27,.42);z-index:30;display:grid;place-items:center;padding:20px}.modal{width:520px;max-width:100%;background:white;border-radius:14px;padding:24px;box-shadow:var(--shadow)}.modal-header{display:flex;justify-content:space-between}.modal h2{font:700 20px Manrope;margin:0 0 20px}.modal form label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;color:#4f5b56;margin-bottom:14px}.modal input,.modal textarea{border:1px solid #dfe3e1;border-radius:8px;padding:10px;font:400 12px "DM Sans";outline:0}.modal input:focus,.modal textarea:focus{border-color:#7cab97;box-shadow:0 0 0 3px #edf6f1}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:7px}.toast{position:fixed;left:50%;bottom:25px;z-index:50;transform:translate(-50%,80px);opacity:0;background:#1d2c27;color:white;padding:11px 16px;border-radius:9px;font-size:12px;box-shadow:var(--shadow);transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}
.setup-modal{width:600px;max-height:94vh;overflow:auto}.setup-intro{color:var(--muted);font-size:12px;line-height:1.6;margin:-8px 0 16px}.setup-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}.setup-steps li{display:flex;align-items:flex-start;gap:12px;padding:10px;border:1px solid var(--line);border-radius:9px}.setup-steps li>span{flex:0 0 25px;height:25px;display:grid;place-items:center;border-radius:7px;background:var(--green-soft);color:var(--green);font-weight:700;font-size:11px}.setup-steps strong{font-size:12px}.setup-steps p{font-size:10px;color:var(--muted);margin:3px 0}.setup-steps code{display:block;font-size:10px;color:#42514b;background:#f3f6f4;padding:5px 8px;border-radius:5px;margin-top:4px;overflow-wrap:anywhere}.setup-form{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;margin-top:13px}.setup-form label{margin-bottom:10px!important}.privacy-note{display:flex;gap:10px;background:#eef6f2;color:#2b654f;border-radius:9px;padding:10px 12px;margin:4px 0 12px;font-size:10px}.privacy-note p{margin:0;line-height:1.5}.docs-link{text-decoration:none;display:inline-flex;align-items:center}.sync-card.connected{background:#eff8f3;border-color:#cfe5da}.sync-card.connected .sync-icon{background:#d7eee2}.sync-card.syncing .sync-icon{animation:pulse 1s infinite alternate}@keyframes pulse{to{transform:scale(1.12);opacity:.65}}
@media(max-width:1050px){.metrics{grid-template-columns:repeat(2,1fr)}main{padding:28px 25px}.app-shell{grid-template-columns:210px 1fr}}@media(max-width:760px){.app-shell{display:block}.sidebar{display:none}main{padding:22px 15px}.topbar{align-items:center}.topbar h1{font-size:21px}.subtitle{display:none}.attention-card{align-items:flex-start}.attention-card .text-button{display:none}.metrics{grid-template-columns:1fr 1fr;gap:9px}.metric-card{padding:14px}.table-toolbar{gap:10px}.search-wrap{width:100%}.filters{display:none}.form-row{grid-template-columns:1fr}.drawer{width:100%}}@media(max-width:430px){.metrics{grid-template-columns:1fr}.icon-button{display:none}.topbar .primary-button{padding:10px}.topbar .primary-button span{display:none}}