:root{--ink:#17213b;--muted:#68728a;--line:#e3e7ef;--bg:#f6f7fb;--white:#fff;--navy:#172c50;--blue:#3069e8;--blue2:#1e58dc;--cyan:#39c6d5;--green:#21865a;--amber:#a76517;--red:#c94e55;--shadow:0 16px 44px rgba(25,39,72,.12)}
.inline-field{display:flex;gap:9px;align-items:stretch}.inline-field select{flex:1}.inline-field .secondary{white-space:nowrap}.field-help{display:block;color:var(--muted);font-size:10px;margin-top:6px}@media(max-width:680px){.top-actions .small{font-size:12px!important}.top-actions .small:first-letter{font-size:inherit!important}.inline-field{align-items:stretch}.inline-field .secondary{padding-inline:11px}}
*{box-sizing:border-box}body{margin:0;font-family:'DM Sans',Arial,sans-serif;color:var(--ink);background:var(--bg);font-size:14px}.hidden{display:none!important}button,input,select,textarea{font:inherit}button{cursor:pointer}.brand-mark,.mini-mark{display:grid;place-items:center;background:linear-gradient(145deg,#36c7d5,#2e72e7);color:#fff;font-family:Manrope;font-weight:800;border-radius:10px;box-shadow:0 6px 18px rgba(44,114,228,.25)}
.login-screen{min-height:100vh;padding:36px;background:#eef3fa}.login-brand{height:36px;display:flex;align-items:center;gap:10px;font:700 19px Manrope;margin-bottom:32px}.login-brand .brand-mark{width:34px;height:34px}.login-card{max-width:1120px;min-height:650px;margin:auto;background:white;border-radius:22px;display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;box-shadow:0 24px 70px rgba(27,49,84,.15)}.login-art{position:relative;padding:70px;background:linear-gradient(145deg,#102544,#1d4676);color:white;overflow:hidden}.art-grid{position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);background-size:54px 54px;transform:perspective(500px) rotate(-8deg) scale(1.25)}.art-copy{position:relative;z-index:1;margin-top:90px}.eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:1.4px;color:#3d6cae;margin-bottom:17px}.eyebrow.light{color:#76d6e0}.art-copy h1{font:800 42px/1.1 Manrope;margin:0 0 22px}.art-copy p{font-size:16px;line-height:1.65;color:#ccd7e6;max-width:410px}.floating-card{position:absolute;z-index:2;right:48px;bottom:65px;width:245px;padding:22px;background:rgba(255,255,255,.95);color:var(--ink);border-radius:16px;box-shadow:var(--shadow);transform:rotate(-2deg)}.floating-card span{display:block;font-size:10px;font-weight:700;letter-spacing:1px;color:#7c879c}.floating-card strong{display:block;font:800 25px Manrope;margin:9px 0}.floating-card small{color:#7a8497}.floating-card b{color:var(--green)}.login-panel{display:flex;flex-direction:column;justify-content:center;padding:70px}.login-inner{max-width:390px;margin:auto}.mini-mark{width:44px;height:44px;margin-bottom:34px}.login-inner h2{font:800 30px Manrope;margin:0 0 12px}.login-inner>p{line-height:1.6;color:var(--muted);margin-bottom:30px}.entra-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:13px;padding:14px;border:1px solid #cfd5df;background:#fff;border-radius:9px;font-weight:700;color:#25344d;transition:.2s}.entra-btn:hover{border-color:#8fa6c9;box-shadow:0 5px 18px rgba(30,61,106,.1);transform:translateY(-1px)}.ms-grid{display:grid;grid-template-columns:8px 8px;gap:2px}.ms-grid i{width:8px;height:8px;background:#f35325}.ms-grid i:nth-child(2){background:#81bc06}.ms-grid i:nth-child(3){background:#05a6f0}.ms-grid i:nth-child(4){background:#ffba08}.secure-note{display:flex;align-items:center;gap:12px;background:#f5f8fc;border-radius:9px;padding:14px;margin-top:22px;color:#40516c}.secure-note span{color:#31a3ba}.secure-note small{color:#7a8497}.login-footer{text-align:center;color:#9aa2b1;font-size:11px;margin:auto auto -44px}
.app-shell{display:flex;min-height:100vh}.sidebar{width:246px;position:fixed;inset:0 auto 0 0;background:#142744;color:#cfdaea;padding:27px 17px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:10px;padding:0 11px 29px;color:#fff;font:700 18px Manrope}.brand .brand-mark{width:34px;height:34px}.sidebar nav{display:flex;flex-direction:column;gap:4px}.nav-item{width:100%;border:0;background:transparent;color:#b9c5d7;padding:11px 13px;border-radius:8px;text-align:left;display:flex;align-items:center;gap:12px;font-weight:600}.nav-item>span{font-size:18px;width:18px;text-align:center}.nav-item:hover,.nav-item.active{background:#223b60;color:#fff}.nav-item.active{box-shadow:inset 3px 0 #47cad5}.nav-count{margin-left:auto;background:#355075;color:#dbe8f8;border-radius:10px;padding:2px 7px;font-size:10px}.nav-label{font-size:10px;letter-spacing:1.3px;color:#6f829d;font-weight:700;margin:25px 13px 9px}.sidebar-bottom{margin-top:auto}.user-chip{border-top:1px solid #30435f;margin-top:8px;padding:20px 6px 0;display:flex;align-items:center;gap:10px}.avatar{width:34px;height:34px;background:#d9eef1;color:#236775;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800}.user-chip strong,.user-chip small{display:block;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.user-chip strong{font-size:11px;color:#fff}.user-chip small{font-size:10px;color:#93a3b9;margin-top:2px}.user-chip button{margin-left:auto;background:none;border:0;color:#91a1b8}.main-wrap{margin-left:246px;min-width:0;flex:1}.topbar{height:70px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end;padding:0 36px;position:sticky;top:0;z-index:5}.mobile-brand{display:none}.top-actions{display:flex;align-items:center;gap:13px}.demo-role{font-size:12px;color:var(--muted);background:#f4f6fa;padding:7px 9px;border-radius:7px}.demo-role select{border:0;background:transparent;font-weight:700;color:#31425c;outline:0}.icon-btn{position:relative;border:1px solid var(--line);background:#fff;border-radius:8px;width:36px;height:36px}.notice-dot{position:absolute;width:6px;height:6px;background:#ef6868;border-radius:50%;right:7px;top:7px;border:1px solid white}.primary{border:0;background:var(--blue);color:#fff;border-radius:8px;padding:12px 18px;font-weight:700;box-shadow:0 5px 12px rgba(48,105,232,.2)}.primary:hover{background:var(--blue2)}.primary.small{padding:9px 15px;font-size:12px}.secondary{border:1px solid #d7dce6;background:#fff;color:#33435d;border-radius:8px;padding:10px 15px;font-weight:700}.danger{color:var(--red)!important}.content-page{padding:36px;max-width:1440px;margin:auto}.page-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:27px}.page-head h1{font:800 27px Manrope;margin:0 0 6px}.page-head p{margin:0;color:var(--muted)}.head-actions{display:flex;gap:9px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}.stat-top{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;font-weight:600}.stat-icon{width:31px;height:31px;background:#eef3fd;color:var(--blue);border-radius:8px;display:grid;place-items:center;font-size:17px}.stat-icon.warn{background:#fff4e3;color:var(--amber)}.stat-icon.good{background:#e9f7f1;color:var(--green)}.stat-icon.cyan{background:#e9f8fa;color:#168191}.stat-card strong{font:800 26px Manrope;display:block;margin:12px 0 5px}.trend{font-size:11px;color:var(--muted)}.trend b{color:var(--green)}.dashboard-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.panel-head{padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.panel-head h2{font:700 16px Manrope;margin:0}.link-btn{background:none;border:0;color:var(--blue);font-weight:700;font-size:12px}.charge-list{padding:6px 20px}.charge-row{display:grid;grid-template-columns:38px minmax(130px,1.2fr) minmax(100px,.8fr) 100px 95px;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #edf0f5}.charge-row:last-child{border:0}.vendor-logo{width:34px;height:34px;border-radius:9px;background:#eff3f8;display:grid;place-items:center;font-weight:800;color:#44536c}.charge-main strong,.charge-main small{display:block}.charge-main small,.muted{color:var(--muted);font-size:11px;margin-top:3px}.money{font-weight:700;text-align:right}.badge{justify-self:end;border-radius:15px;padding:5px 9px;font-size:10px;font-weight:700;background:#f0f2f6;color:#627087}.badge.pending{background:#fff2dd;color:#94601b}.badge.done{background:#e8f6ef;color:#28764f}.badge.attn{background:#fdeced;color:#ae4148}.activity{padding:10px 20px}.activity-item{display:flex;gap:13px;padding:13px 0;border-bottom:1px solid #edf0f5}.activity-item:last-child{border:0}.activity-dot{width:29px;height:29px;flex:none;border-radius:50%;display:grid;place-items:center;background:#eaf5f7;color:#1c8291;font-size:12px}.activity-item p{margin:0;font-size:12px;line-height:1.45}.activity-item small{color:var(--muted)}
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start}.form-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:25px}.form-section{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--line)}.form-section:last-child{border:0;margin:0;padding:0}.section-title{display:flex;gap:12px;margin-bottom:19px}.step{width:25px;height:25px;border-radius:50%;background:#e9f0fe;color:var(--blue);display:grid;place-items:center;font-size:11px;font-weight:800}.section-title h3{font:700 15px Manrope;margin:2px 0}.section-title p{color:var(--muted);font-size:11px;margin:4px 0}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field.full{grid-column:1/-1}.field label{display:block;font-size:11px;font-weight:700;margin-bottom:7px;color:#3a4760}.field input,.field select,.field textarea{width:100%;border:1px solid #d8dde6;border-radius:8px;background:#fff;padding:11px 12px;color:var(--ink);outline:0}.field input:focus,.field select:focus,.field textarea:focus{border-color:#6793ee;box-shadow:0 0 0 3px #edf3ff}.field textarea{min-height:90px;resize:vertical}.input-prefix{position:relative}.input-prefix span{position:absolute;left:12px;top:11px;color:#778196}.input-prefix input{padding-left:26px}.read-only{background:#f6f7f9!important;color:#68748a!important}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.choice{border:1px solid #d8dde6;border-radius:8px;padding:12px;display:flex;gap:10px;align-items:center;cursor:pointer}.choice:hover,.choice.selected{border-color:#5a89ed;background:#f3f7ff}.choice input{accent-color:var(--blue)}.choice strong{display:block;font-size:12px}.choice small{display:block;font-size:10px;color:var(--muted);margin-top:2px}.conditional{background:#f7f9fc;border-radius:9px;padding:16px;margin-top:14px}.form-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:2px}.tip-card{background:#163052;color:#dbe6f2;border-radius:12px;padding:22px;position:sticky;top:92px}.tip-card h3{color:#fff;font:700 15px Manrope;margin:0 0 14px}.tip-card p,.tip-card li{font-size:12px;line-height:1.6;color:#b9c8da}.tip-card ul{padding-left:17px}.tip-card .progress-label{display:flex;justify-content:space-between;margin-top:20px;font-size:11px}.progress{height:5px;border-radius:5px;background:#304966;margin-top:8px;overflow:hidden}.progress i{display:block;width:76%;height:100%;background:#45c5d2}.tip-note{margin-top:18px;padding:14px;background:#203d61;border-radius:8px}
.table-panel{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.table-tools{padding:15px 18px;display:flex;gap:10px;border-bottom:1px solid var(--line)}.search{flex:1;max-width:330px;border:1px solid #dce0e8;border-radius:8px;padding:9px 12px}.filter-select{border:1px solid #dce0e8;border-radius:8px;padding:9px;background:#fff;color:#526078}.data-table{width:100%;border-collapse:collapse}.data-table th{text-align:left;padding:11px 16px;background:#f7f8fb;color:#737d8f;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.data-table td{padding:14px 16px;border-top:1px solid #edf0f4;font-size:12px}.data-table tr:hover td{background:#fafbfe}.table-person{display:flex;align-items:center;gap:9px}.mini-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#e8effa;color:#365a92;font-size:9px;font-weight:800}.vendor-cell{font-weight:700}.subtext{display:block;font-size:10px;color:var(--muted);margin-top:3px}.table-foot{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;color:var(--muted);font-size:11px}.pagination{display:flex;gap:4px}.pagination button{border:1px solid var(--line);background:white;border-radius:6px;padding:5px 8px}.pagination button.active{background:var(--navy);color:#fff}.alert-banner{display:flex;gap:12px;align-items:center;background:#fff6e8;border:1px solid #f2d59d;padding:14px 17px;border-radius:10px;margin-bottom:16px;color:#704b19}.alert-banner strong{display:block;font-size:12px}.alert-banner small{color:#946e39}.alert-banner button{margin-left:auto}
.transaction-row{cursor:pointer}.transaction-row:focus{outline:2px solid #6c96ed;outline-offset:-2px}.row-arrow{float:right;color:#8993a5;font-size:20px;line-height:12px}.modal.wide{width:min(650px,100%)}.modal-kicker{font-size:10px;color:var(--blue);font-weight:800;letter-spacing:.7px;text-transform:uppercase;margin-bottom:8px}.audit-note{background:#f5f7fa;color:var(--muted);padding:10px 12px;border-radius:7px;margin-top:15px;font-size:10px}.receipt-link{display:block;color:var(--blue);font-weight:700;margin:2px 0 9px}.transaction-actions{flex-wrap:wrap}.audit-details{max-width:420px;white-space:normal;overflow-wrap:anywhere}
.vendor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.vendor-card{background:#fff;border:1px solid var(--line);border-radius:11px;padding:18px;display:flex;align-items:center;gap:13px}.vendor-card .vendor-logo{width:42px;height:42px}.vendor-card strong,.vendor-card small{display:block}.vendor-card small{color:var(--muted);margin-top:3px}.vendor-card button{margin-left:auto;border:0;background:transparent;color:#7c8798}.recurring-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.recurring-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}.rec-top{display:flex;justify-content:space-between}.rec-top h3{margin:0;font:700 15px Manrope}.rec-top p{color:var(--muted);font-size:11px}.rec-amount{font:800 22px Manrope}.tolerance{background:#f4f7fc;border-radius:8px;padding:12px;margin-top:14px;display:flex;justify-content:space-between;font-size:11px}.schedule-line{display:flex;justify-content:space-between;margin-top:14px;color:var(--muted);font-size:11px}.empty-state{text-align:center;padding:70px}.empty-icon{width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#edf3fe;color:var(--blue);font-size:24px;margin:auto}.empty-state h3{font:700 17px Manrope}.empty-state p{color:var(--muted)}
.toast{position:fixed;right:25px;bottom:25px;background:#172b49;color:#fff;border-radius:10px;padding:14px 18px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;transform:translateY(120px);opacity:0;transition:.3s;z-index:50}.toast.show{transform:translateY(0);opacity:1}.toast>span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#36a773}.toast strong,.toast small{display:block}.toast small{color:#b9c4d4;margin-top:3px}.modal-backdrop{position:fixed;inset:0;background:rgba(14,27,48,.45);display:grid;place-items:center;z-index:40;padding:20px}.modal{background:#fff;width:min(470px,100%);border-radius:13px;box-shadow:var(--shadow);padding:25px}.modal h2{font:700 19px Manrope;margin:0 0 7px}.modal>p{color:var(--muted);margin:0 0 20px}.modal .form-actions{margin-top:20px}
.vendor-card.inactive,.payment-card.inactive{opacity:.62;background:#f8f9fb}.vendor-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.status-pill{border-radius:12px;padding:4px 8px;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;background:#e8f6ef;color:#28764f}.status-pill.off{background:#eceef2;color:#6e7787}.text-action{border:0!important;background:transparent!important;color:var(--blue)!important;font-size:11px;font-weight:700;padding:5px;margin:0!important}.text-action.danger{color:var(--red)!important}.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.payment-card{position:relative;min-height:190px;border-radius:16px;padding:21px;color:#fff;overflow:hidden;box-shadow:0 12px 28px rgba(24,45,79,.16);background:linear-gradient(145deg,#162c4e,#294e78)}.payment-card:nth-child(3n+2){background:linear-gradient(145deg,#244d58,#398491)}.payment-card:nth-child(3n+3){background:linear-gradient(145deg,#443860,#705f8c)}.payment-card.inactive{background:#707986}.payment-card:after{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-65px;top:-60px}.card-top,.card-bottom{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:1}.card-top strong{display:block;margin-top:4px}.card-chip{width:34px;height:25px;border-radius:6px;background:linear-gradient(135deg,#ead48c,#bb9545);margin-top:25px}.card-number{font:700 19px Manrope;letter-spacing:2px;margin-top:22px;position:relative;z-index:1}.card-bottom{margin-top:22px;align-items:flex-end}.card-bottom small,.card-top small{display:block;color:#d8e1ec;font-size:9px;text-transform:uppercase;letter-spacing:.7px}.card-bottom strong{font-size:11px}.card-actions{position:relative;z-index:3}.card-actions button{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;border-radius:6px;padding:5px 8px;font-size:10px}
@media(max-width:950px){.sidebar{width:210px}.main-wrap{margin-left:210px}.stats{grid-template-columns:1fr 1fr}.dashboard-grid,.form-layout{grid-template-columns:1fr}.tip-card{position:static}.vendor-grid,.cards-grid{grid-template-columns:1fr 1fr}.login-card{grid-template-columns:1fr}.login-art{display:none}.login-panel{min-height:620px}}@media(max-width:680px){.sidebar{display:none}.main-wrap{margin-left:0}.topbar{justify-content:space-between;padding:0 17px}.mobile-brand{display:flex;align-items:center;gap:8px;font-weight:700}.mobile-brand .brand-mark{width:28px;height:28px}.demo-role{display:none}.content-page{padding:22px 15px}.stats{grid-template-columns:1fr}.dashboard-grid,.field-grid,.choice-grid,.vendor-grid,.cards-grid,.recurring-grid{grid-template-columns:1fr}.page-head{gap:15px}.top-actions .small{font-size:0;padding:9px 12px}.top-actions .small:first-letter{font-size:16px}.charge-row{grid-template-columns:38px 1fr 80px}.charge-row>*:nth-child(3),.charge-row>*:nth-child(5){display:none}.table-panel{overflow-x:auto}.data-table{min-width:940px}.login-screen{padding:16px}.login-panel{padding:38px 25px}.login-card{min-height:600px}}
/* Keep transaction details usable on short desktop and mobile screens. */
.modal{max-height:calc(100vh - 40px);overflow:auto}