:root{--nav:#17365d;--blue:#2f5597;--bg:#f4f6f8;--line:#dce4ec;--muted:#687384;--red:#b42318;--green:#1c7a52;--purple:#6a4bc4}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#202936;background:var(--bg)}.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}aside{height:100vh;position:sticky;top:0;background:var(--nav);color:#fff;padding:20px 14px}.brand{font-size:30px;padding:0 8px 20px;border-bottom:1px solid #ffffff25}.brand small{display:block;font-size:13px;color:#cedbec;margin-top:4px}.nav{width:100%;text-align:left;border:0;background:transparent;color:#d8e5f3;padding:10px 12px;border-radius:8px;margin:3px 0;cursor:pointer}.nav:hover,.nav.active{background:#ffffff17;color:white}.loc{position:absolute;bottom:18px;left:22px;color:#dbe5ef}.loc small{color:#9fb3ca}header{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 28px;position:sticky;top:0;z-index:5}button{border:0;border-radius:8px;padding:9px 13px;background:var(--blue);color:white;font-weight:700;cursor:pointer}.ghost{background:#edf2f8;color:var(--nav)}.danger{background:#feeceb;color:var(--red)}#app{padding:26px;max-width:1500px;margin:auto}h1,h2,h3{color:var(--nav)}h1{margin:0;font-size:28px}.sub{color:var(--muted);margin:5px 0 18px}.pagehead{display:flex;justify-content:space-between;align-items:end}.grid{display:grid;gap:15px}.kpis{grid-template-columns:repeat(6,1fr)}.two{grid-template-columns:1.15fr .85fr}.three{grid-template-columns:repeat(3,1fr)}.card{background:white;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:0 4px 15px #223b5509}.ey{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#738094}.val{font-size:27px;color:var(--nav);font-weight:850;margin-top:6px}.line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #edf0f3}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eaf1ff;color:#28589b;font-size:11px;font-weight:800}.green{background:#e9f7ef;color:var(--green)}.red{background:#feeceb;color:var(--red)}.purple{background:#f0ebff;color:var(--purple)}table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid #e7ecf1;text-align:left}th{font-size:11px;text-transform:uppercase;background:#fafbfc;color:#667085}tr.click:hover{background:#f5f8fc;cursor:pointer}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}input,select,textarea{width:100%;padding:9px;border:1px solid #cad5e0;border-radius:8px;background:white}textarea{min-height:75px}.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field label{display:block;font-size:12px;color:#687384;margin-bottom:4px}.wide{grid-column:1/-1}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.search{position:relative;width:min(650px,60vw)}.results{position:absolute;top:42px;left:0;right:0;background:white;border:1px solid var(--line);border-radius:9px;box-shadow:0 12px 30px #0002;max-height:380px;overflow:auto}.result{padding:10px;border-bottom:1px solid #edf0f3;cursor:pointer}.result:hover{background:#f5f8fb}.hidden{display:none!important}.back{position:fixed;inset:0;background:#10203070;display:grid;place-items:center;z-index:30}.modal{width:min(900px,95vw);max-height:92vh;overflow:auto;background:#fff;padding:18px;border-radius:14px}.mh{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);margin-bottom:14px}.mh button{background:transparent;color:#333;font-size:23px}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:14px}.tab{background:transparent;color:#667085;border-radius:0;padding:10px}.tab.active{color:var(--blue);border-bottom:2px solid var(--blue)}.ai{border-left:4px solid var(--purple)}@media(max-width:1000px){.kpis{grid-template-columns:repeat(3,1fr)}.two,.three{grid-template-columns:1fr}.shell{grid-template-columns:190px 1fr}}
.c360chrome{position:sticky;top:68px;z-index:4;background:var(--bg);padding:6px 0 8px;margin:0 0 14px;border-bottom:1px solid var(--line)}
.c360chrome .pagehead{align-items:flex-start;gap:12px}
.c360chrome .sub{margin-bottom:0}
.c360Actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.c360tabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.c360tabBtn{border:0;background:transparent;color:#667085;border-radius:8px 8px 0 0;padding:9px 12px;font-weight:700;cursor:pointer}
.c360tabBtn:hover{background:#e8eef6;color:var(--nav)}
.c360tabBtn.active{background:#fff;color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue)}
.profilePhoto{width:100%;max-width:240px;border-radius:12px;display:block;object-fit:cover}
.photoPlaceholder{min-height:180px;display:grid;place-items:center;background:#eef2f7;border-radius:12px;color:#667085}
.c360top{grid-template-columns:minmax(260px,.8fr) minmax(420px,1.6fr) minmax(260px,.8fr);align-items:start}
.kpis.mini{grid-template-columns:repeat(3,1fr)}
.kpis.mini>div{padding:12px;border:1px solid #e3e8ef;border-radius:10px}
.kpis.mini strong{display:block;font-size:1.2rem;margin-top:4px}
.tablewrap{max-height:480px;overflow:auto}
.c360HistoryWrap{max-height:min(70vh,720px);overflow:auto}
.payBackCustomer{font-weight:800;border:1px solid #1d4ed8;background:#eff6ff;color:#1e3a8a;padding:9px 14px;border-radius:8px;cursor:pointer}
.payBackCustomer:hover{background:#dbeafe}
@media(max-width:1100px){.c360top{grid-template-columns:1fr}.kpis.mini{grid-template-columns:repeat(2,1fr)}}

/* Volume 7.6.2 Customer Search */
.customerSearchBar{display:grid;grid-template-columns:160px minmax(220px,1fr) minmax(220px,1fr) 230px 110px;gap:12px;align-items:end}
.customerSearchBar .field{margin:0}
@media(max-width:1100px){.customerSearchBar{grid-template-columns:1fr 1fr}.customerSearchBar .field{min-width:0}}

/* Volume 8 authentication */
.loginGate{position:fixed;inset:0;background:linear-gradient(135deg,#0f2f55,#081a2e);display:flex;align-items:center;justify-content:center;z-index:9999}
.loginGate.hidden{display:none}.loginCard{width:min(390px,90vw);background:white;padding:34px;border-radius:18px;box-shadow:0 30px 90px #0008;text-align:center}
.loginBrand{font-size:46px;font-weight:900;color:#173f6d}.loginCard h1{margin:0}.loginCard p{color:#64748b}.loginCard input{display:block;width:100%;box-sizing:border-box;margin:12px 0;padding:13px;border:1px solid #cbd5e1;border-radius:9px}.loginCard button{width:100%;padding:13px}.errorText{color:#b91c1c;margin-top:10px}.linkbtn{background:none!important;border:0!important;padding:2px!important;color:#dbeafe!important;width:auto!important;font-size:12px}

.promoBanner{padding:12px 14px;margin-bottom:14px;border-radius:10px;background:#dcfce7;border:1px solid #86efac;color:#166534}
.promoBanner.scheduled{background:#fff7ed;border-color:#fdba74;color:#9a3412}

.agreementWizard{display:grid;gap:14px}
.agreementWizard>.card{box-shadow:none;border:1px solid #dbe4ee;background:#fbfdff}
.agreementWizard h3{margin-top:0;color:#173f6d}
#agAssetSearchResults{max-height:260px;overflow:auto;margin:10px 0}
.itemAlloc{margin-top:10px}
.itemAlloc summary{cursor:pointer;font-weight:700;color:#173f6d}

.searchDrop{position:relative;z-index:20;max-height:260px;overflow:auto;border:1px solid #cbd5e1;border-radius:8px;background:#fff;margin-top:4px}
.searchDrop:empty{display:none}
.searchResult{display:flex!important;flex-direction:column;align-items:flex-start!important;width:100%;padding:10px 12px!important;border:0!important;border-bottom:1px solid #e5e7eb!important;border-radius:0!important;background:#fff!important;color:#0f172a!important;text-align:left!important}
.searchResult:hover{background:#f1f5f9!important}
.searchResult span{font-size:12px;color:#64748b;margin-top:2px}
.searchEmpty{padding:10px 12px;color:#64748b}

.riskBanner{padding:12px 14px;margin-top:8px;border:1px solid #fca5a5;border-radius:9px;background:#fef2f2;color:#991b1b}
.clearBanner{padding:10px 12px;margin-top:8px;border:1px solid #86efac;border-radius:9px;background:#f0fdf4;color:#166534}
.riskFlag{display:inline-block;padding:2px 7px;margin-left:5px;border-radius:999px;background:#fee2e2;color:#991b1b;font-size:11px;font-weight:800}
.clearFlag{display:inline-block;padding:2px 7px;margin-left:5px;border-radius:999px;background:#dcfce7;color:#166534;font-size:11px;font-weight:800}
.searchResult.riskHigh{border-left:5px solid #dc2626!important;background:#fff7f7!important}
.searchResult.riskReview{border-left:5px solid #f59e0b!important;background:#fffbeb!important}
.warnBanner{padding:12px 14px;margin-top:8px;border:1px solid #fbbf24;border-radius:9px;background:#fffbeb;color:#92400e}
.infoBanner{padding:10px 12px;margin-top:8px;border:1px solid #93c5fd;border-radius:9px;background:#eff6ff;color:#1e3a8a}
.customerSummary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px 16px;margin-top:8px;padding:10px 12px;border:1px solid #dbe4ee;border-radius:9px;background:#fff}
.customerSummary small{display:block;color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.headerActions{display:flex;gap:8px;flex-wrap:wrap}
.primaryHdr{background:#173f6d;color:#fff}
.payPreviewHead{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.payPreviewHead small{display:block;color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.payPreviewHead b{font-size:18px;color:#173f6d}
.payAmt{width:110px}
.payPeriod{min-width:140px}
.payUntil{width:140px;margin-top:6px}
.payQuoteAmt{white-space:nowrap}
.payQuoteAmt small{display:block;color:#64748b;font-weight:500}
.payTotals{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:12px}
.payTotals .payTotalBox{padding:10px 12px;border:1px solid #dbe4ee;border-radius:9px;background:#f8fafc}
.payAmountDueHero{margin:0 0 16px;padding:18px 22px;border:3px solid #173f6d;border-radius:14px;background:#e8f1fb;text-align:center}
.payAmountDueHero small{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#334e68;font-weight:800}
.payAmountDueHero b{display:block;font-size:52px;line-height:1.05;color:#102a43;margin-top:8px}
.payChangeDueHero{margin:0 0 16px;padding:18px 22px;border:3px solid #166534;border-radius:14px;background:#dcfce7;text-align:center}
.payChangeDueHero small{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#166534;font-weight:800}
.payChangeDueHero b{display:block;font-size:52px;line-height:1.05;color:#14532d;margin-top:8px}
.payCreditAddedHero{margin:0 0 16px;padding:18px 22px;border:3px solid #1e3a8a;border-radius:14px;background:#dbeafe;text-align:center}
.payCreditAddedHero small{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#1e3a8a;font-weight:800}
.payCreditAddedHero b{display:block;font-size:40px;line-height:1.05;color:#1e3a8a;margin-top:8px}
.payConfirmMetrics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px}
.payConfirmMetrics .metric{padding:12px 14px;border:1px solid #dbe4ee;border-radius:10px;background:#f8fafc}
.payConfirmMetrics .metric small{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#64748b;font-weight:800}
.payConfirmMetrics .metric b{display:block;font-size:26px;line-height:1.1;color:#173f6d;margin-top:4px}
.payConfirmMetrics .metric.emphasis{border:3px solid #173f6d;background:#e8f1fb}
.payConfirmMetrics .metric.emphasis b{font-size:32px}
.payConfirmMetrics .metric.change{border:3px solid #166534;background:#dcfce7}
.payConfirmMetrics .metric.change b{color:#166534;font-size:36px}
.payConfirmMetrics .metric.added{border:3px solid #1e3a8a;background:#dbeafe}
.payConfirmMetrics .metric.added b{color:#1e3a8a;font-size:32px}
.payOverpayBox .line{font-size:18px;display:flex;justify-content:space-between;padding:4px 0}
.payOverpayBox .line b{font-size:22px;color:#173f6d}
.payOverpayBox p{font-size:18px;font-weight:700;margin:16px 0 8px}
.payOverpayChoices{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.payOverpayChoices button{font-size:18px;padding:16px 18px}
.payTotals small{display:block;color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.payTotals b{font-size:18px;color:#173f6d}
.payCreditBanner{margin:12px 0 0;padding:10px 12px;border-radius:9px;font-size:16px;border:1px solid #86efac;background:#dcfce7;color:#166534}
.payCreditBanner.none{border-color:#dbe4ee;background:#f8fafc;color:#334155}
.payCreditBanner b{font-size:18px}
.payOffBanner{margin:12px 0 0;padding:10px 12px;border-radius:9px;font-size:14px;border:1px solid #93c5fd;background:#eff6ff;color:#1e3a8a}
.payHistoryTable{font-size:12px;white-space:nowrap}
.payHistoryReversal{background:#fef2f2;color:#7f1d1d}
.payHistoryVoided{opacity:.85}
.payoffCloseBox{margin-top:12px;padding-top:8px;border-top:1px solid #e2e8f0}
.payoffCloseBox .payoffTotal{font-size:1.05rem}
.payoffCloseBox .payoffTotal b{color:#17365d}
.payCheck{display:flex;align-items:center;gap:8px;font-weight:700}
.payAllocTable td{vertical-align:top}
.payBucket{display:inline-block;margin:2px 4px 2px 0;padding:2px 7px;border-radius:999px;font-size:11px;font-weight:700}
.payBucket.past{background:#fee2e2;color:#991b1b}
.payBucket.today{background:#ffedd5;color:#9a3412}
.payBucket.future{background:#e0f2fe;color:#075985}
.payBucket.fees{background:#f3e8ff;color:#6b21a8}
.payBucket.credit{background:#dcfce7;color:#166534}
.payInfoCard{margin-top:14px}
.payInfoHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px}
.payName{font-size:22px;font-weight:800;color:#173f6d;margin-top:4px}
.payInfoGrid,.payProfileGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 16px}
.payInfoGrid small,.payProfileGrid small{display:block;color:#64748b;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.payInfoGrid b,.payProfileGrid b{font-size:14px;color:#17365d}
.paySnapActive{background:#ecfdf3}
.paySnapActive td{border-bottom-color:#bbf7d0}
.paySnapClosed{color:#64748b}
.paySnapClosed td{opacity:.82}
.payHistoryWrap{max-height:240px}
.payGridCard{margin-top:14px}
.payGridHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.c360SectionHead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.c360SectionHead h2{margin:0}
.c360ContactActs{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.c360DocLinks{margin:8px 0 0 18px}
.c360NotesTable{font-size:13px}
.c360NoteCorrection{background:#fff7ed}
.payQuoteAmt{white-space:nowrap}
.payBulkBar{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.paySelectAll{font-size:15px;background:#eff6ff;border:1px solid #93c5fd;border-radius:8px;padding:8px 12px}
.payBulkPeriod{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:700;color:#1e3a8a}
.payBulkPeriod select,.payBulkPeriod input{font-weight:600}
.payGridTable{font-size:12px;min-width:1380px}
.payAmountBox{margin-top:12px;padding:12px;border:1px solid #93c5fd;border-radius:9px;background:#eff6ff;max-width:420px}
.payAmountBox label{display:block;font-size:12px;color:#1e3a8a;margin-bottom:4px;font-weight:700}
.payAmountBox input{max-width:220px}
.paySnapshotTable{font-size:12px}
.payRowActions{display:flex;gap:3px;align-items:center;white-space:nowrap}
.payIconBtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:#17365d;cursor:pointer}
.payIconBtn:hover{background:#e8f0fb;border-color:#9bb6d6}
.payIconBtn.isDisabled,.payIconBtn:disabled{opacity:.45;cursor:not-allowed}
.payLinkBtn{border:0;background:none;padding:0;color:#1d4ed8;cursor:pointer;font:inherit;text-decoration:underline}
.modal.payDrawerWide{width:min(1100px,96vw);max-width:1100px}
.svcFilters .form{grid-template-columns:repeat(3,1fr)}
.voidBanner{background:#fee2e2;border:1px solid #b91c1c;color:#7f1d1d;padding:10px 12px;border-radius:8px;margin-bottom:12px;font-weight:700}
.receiptBrand{font-size:22px;color:#17365d;margin-bottom:10px}
.receiptBrand b{display:block;font-size:26px}
.nextDueBanner{margin:14px 0;padding:10px 12px;border:2px solid #17365d;background:#eef4fb;font-size:16px}
.nextDueBanner b,.nextDue{font-weight:800;font-size:16px}
.receiptLines{font-size:12px}
.receiptTotals{max-width:340px;margin-left:auto;margin-top:12px}
.receiptFooter{margin-top:22px;text-align:center;color:#17365d;font-weight:700}
.receiptPreview.isVoided{outline:2px solid #b91c1c}
.colKpis{grid-template-columns:repeat(3,1fr);margin-top:8px}
.colChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.colChip{background:#edf2f8;color:var(--nav);font-size:12px;padding:6px 10px}
.colChip.active{background:var(--nav);color:#fff}
.colFilters{grid-template-columns:repeat(4,1fr)}
.colTableCard .tablewrap{max-height:min(58vh,640px);overflow:auto}
.colTable{font-size:12px}
.colTable th{position:sticky;top:0;z-index:1}
.colRow.col-urgent{background:#fdecea}
.colRow.col-warn{background:#fff6e8}
.colRow.col-today{background:#eaf4ff}
.colRow.col-broken{background:#fbe8f0}
.colRow.col-late{background:#f8fafc}
.colRow.selected{outline:2px solid var(--blue)}
.colQuick{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:560px}
.colWorkspace{margin-top:14px}
@media(max-width:1100px){.colKpis,.colFilters{grid-template-columns:repeat(2,1fr)}}