:root{
  --ff-primary:#123b7a;
  --ff-primary-2:#2563eb;
  --ff-primary-dark:#0b1f45;
  --ff-bg:#f4f7fb;
  --ff-card:#ffffff;
  --ff-border:#dbe5f0;
  --ff-muted:#64748b;
  --ff-text:#0f172a;
  --ff-success:#16a34a;
  --ff-success-bg:#dcfce7;
  --ff-warning:#d97706;
  --ff-warning-bg:#fffbeb;
  --ff-danger:#dc2626;
  --ff-danger-bg:#fef2f2;
  --ff-radius:18px;
  --ff-shadow:0 14px 36px rgba(15,23,42,.08);
}
html{background:var(--ff-bg)}
body.ff-customer, body.customer-theme, body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ff-text)}
.customerPortal,.custWrap,.wrap{max-width:1180px;margin:24px auto;padding:0 16px}.customerPortal a,.custWrap a{color:var(--ff-primary-2)}
.portalHero,.custHero,.ff-customer-hero{background:linear-gradient(135deg,var(--ff-primary-dark),var(--ff-primary-2))!important;color:#fff!important;border-radius:24px!important;padding:24px!important;box-shadow:0 18px 45px rgba(15,23,42,.18)!important;overflow:hidden}.portalHero *,.custHero *,.ff-customer-hero *{color:#fff!important}.portalHero .eyebrow,.custHero .eyebrow{color:#bfdbfe!important;letter-spacing:.12em;font-size:11px;text-transform:uppercase;font-weight:800}.portalHero h1,.custHero h1{font-size:clamp(26px,3vw,36px)!important;line-height:1.12!important;margin:8px 0!important;font-weight:750!important}.portalHero p,.custHero p{color:#dbeafe!important;margin:.25rem 0}.portalAmount{background:rgba(255,255,255,.13)!important;border:1px solid rgba(255,255,255,.25)!important;border-radius:18px!important;padding:18px!important}.portalAmount span{color:#bfdbfe!important}.portalAmount strong{font-size:clamp(30px,3vw,42px)!important;color:#fff!important}.portalCard,.custQuoteCard,.card{background:#fff!important;border:1px solid var(--ff-border)!important;border-radius:var(--ff-radius)!important;box-shadow:var(--ff-shadow)!important;padding:18px!important}.portalCard h2,.card h2{font-size:18px!important;line-height:1.25!important;margin:0 0 12px!important;font-weight:700!important;color:var(--ff-text)!important}.portalGrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px}.sidePay{position:sticky;top:16px;align-self:start}.portalActions,.actions{display:flex;flex-wrap:wrap;gap:10px}.btn,.primary,.primaryBtn,.portalActions .btn,.actions a,button.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px!important;padding:10px 14px!important;font-weight:750!important;text-decoration:none!important;border:1px solid var(--ff-border)!important;background:#fff!important;color:var(--ff-primary)!important;line-height:1.1}.primary,.primaryBtn,button.primary{background:var(--ff-primary-2)!important;border-color:var(--ff-primary-2)!important;color:#fff!important}.portalHero .btn,.custHero .btn{background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.28)!important;color:#fff!important}.portalHero .btn:hover,.custHero .btn:hover{background:rgba(255,255,255,.2)!important}.success{background:var(--ff-success-bg)!important;border:1px solid #bbf7d0!important;color:#166534!important;border-radius:14px!important;padding:12px!important}.error{background:var(--ff-danger-bg)!important;border:1px solid #fecaca!important;color:#991b1b!important;border-radius:14px!important;padding:12px!important}.badge,.status-badge{display:inline-flex;align-items:center;border-radius:999px!important;padding:5px 10px!important;font-size:12px!important;font-weight:800!important;background:#eef2ff!important;color:#3730a3!important}.badge.paid,.approved{background:var(--ff-success-bg)!important;color:#166534!important}.badge.due{background:var(--ff-warning-bg)!important;color:#92400e!important}.rejected{background:var(--ff-danger-bg)!important;color:#991b1b!important}.publicMeta{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}.publicMeta div,.printTotalsGrid div{background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:14px!important;padding:12px!important}.publicMeta span,.printTotalsGrid span{display:block;font-size:11px;text-transform:uppercase;color:var(--ff-muted)!important;font-weight:800;letter-spacing:.06em}.publicMeta strong,.printTotalsGrid strong{display:block;margin-top:4px;color:var(--ff-text)!important}.publicMatrix{width:100%;border-collapse:separate!important;border-spacing:0!important;font-size:13px!important}.publicMatrix th{background:#f8fafc!important;color:#475569!important;text-transform:uppercase;font-size:11px;letter-spacing:.06em}.publicMatrix th,.publicMatrix td{padding:9px!important;border-bottom:1px solid #e5edf7!important;text-align:center}.publicMatrix th:first-child,.publicMatrix td:first-child{text-align:left}.lineBox{border:1px solid #e2e8f0!important;border-radius:16px!important;overflow:hidden!important;margin:14px 0!important}.lineHead{padding:13px 15px!important;background:#f8fafc!important;border-bottom:1px solid #e2e8f0!important}.mutedText,.muted{color:var(--ff-muted)!important}.msg{background:#f8fafc!important;border:1px solid #e2e8f0!important;border-radius:14px!important;padding:10px!important;margin:10px 0!important}.msg.customer{background:#eff6ff!important;border-color:#bfdbfe!important}.approvedLocked,button[disabled]{opacity:.65!important;cursor:not-allowed!important}.mockupGridCustomer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.mockupCustomerCard{border:1px solid #e2e8f0!important;border-radius:16px!important;padding:12px!important;background:#fff!important}.mockupCustomerCard img{width:100%;height:300px;object-fit:contain;background:#f8fafc;border-radius:12px}.customer-quote-no,.quote-no,.portalHero h1{color:#fff!important}.quoteGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:16px;margin-top:18px}.empty{background:#fff;border:1px solid var(--ff-border);border-radius:18px;padding:22px;margin-top:18px;box-shadow:var(--ff-shadow)}
@media(max-width:900px){.portalHero,.custHero,.portalGrid{grid-template-columns:1fr!important}.publicMeta{grid-template-columns:repeat(2,minmax(0,1fr))!important}.sidePay{position:static}.mockupGridCustomer{grid-template-columns:1fr}.portalActions .btn,.actions a{width:100%}}
@media(max-width:560px){.customerPortal,.custWrap,.wrap{margin:12px auto;padding:0 10px}.portalHero,.custHero{border-radius:18px!important;padding:18px!important}.publicMeta{grid-template-columns:1fr!important}.portalCard,.card{padding:14px!important}}