/* Fox Painting CRM screens (slide 3).
   A fixed 1084×764 canvas scaled by --s, which app.js sets from the frame width.
   Colours, type and metrics follow the live product; every name and figure is sample data. */

.crmx { margin-top: clamp(48px, 7vw, 88px); }
.crmx-head { display: grid; gap: 20px; margin-bottom: 22px; }
.crmx-head .lede { margin-top: 10px; font-size: 1.02rem; max-width: 46ch; }
@media (min-width: 980px) {
  .crmx-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
  .crmx-head .tablist { justify-content: flex-end; max-width: 500px; }
}
.crmx-hint { display: none; margin-bottom: 10px; font-size: .8rem; font-weight: 600; color: var(--ink-3); }
.crmx.is-narrow .crmx-hint { display: block; }
.crmx-cap { margin: 20px auto 0; max-width: 1084px; padding-left: 18px; border-left: 6px solid var(--fox); font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.45; color: var(--ink-2); }
.crmx-cap b { display: block; font: 600 1.25rem/1.2 var(--f-display); color: var(--ink); margin-bottom: 4px; }
.crmx-cap[hidden] { display: none; }

.ghl-frame { --s: 1; --w: 1084; max-width: 1084px; margin-inline: auto; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; border: 1px solid #c9ced8; border-radius: 12px; background: #2d3748; box-shadow: var(--shadow); }
.ghl-size { position: relative; width: calc(var(--w) * var(--s) * 1px); height: calc(764px * var(--s)); }
.ghl { position: absolute; left: 0; top: 0; width: calc(var(--w) * 1px); height: 764px; transform: scale(var(--s)); transform-origin: 0 0; display: flex; background: #f9fafb; color: #344054; font: 400 14px/20px "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-align: left; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; }
.ghl *, .ghl *::before, .ghl *::after { box-sizing: border-box; }
.ghl i, .ghl em, .ghl u { font-style: normal; text-decoration: none; }
.ghl b { font-weight: 600; }
.ghl svg:not(.ch) { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ghl svg.f:not(.ch) { fill: currentColor; stroke: none; }
.ghl svg.ch { display: block; }
.ghl .panel[hidden], .no-js .ghl .panel[hidden] { display: none; }

/* ---- side navigation */
.g-side { position: relative; z-index: 3; width: 224px; flex: none; display: flex; flex-direction: column; background: #2d3748; color: #fff; font-family: "Roboto", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; }
.g-logo { height: 46px; margin-top: 13px; display: grid; place-items: center; }
.g-logo img { height: 46px; width: auto; }
.g-sw { height: 42px; margin: 13px 8px 0; padding: 0 8px; border-radius: 8px; background: #4b5563; display: flex; align-items: center; gap: 10px; }
.g-sw i { width: 26px; height: 26px; flex: none; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.g-sw span { flex: 1; min-width: 0; display: grid; font-size: 12px; line-height: 16px; }
.g-sw b { font-weight: 500; }
.g-sw small { font-size: 12px; color: #d1d5db; }
.g-sw > svg { color: #d1d5db; }
.g-find { display: flex; gap: 6px; margin: 16px 8px 0; }
.g-find .g-q { flex: 1; height: 28px; padding: 0 5px 0 6px; border-radius: 5px; background: #4b5563; border: 1px solid rgba(255,255,255,.11); display: flex; align-items: center; gap: 6px; color: #a3aab8; }
.g-find kbd { margin-left: auto; padding: 0 3px; border-radius: 3px; background: #a5a9b4; color: #1f2937; font: 500 10px/14px "Roboto", sans-serif; }
.g-find .b { width: 28px; height: 28px; border-radius: 5px; background: #4b5563; border: 1px solid rgba(255,255,255,.11); display: grid; place-items: center; color: #41d4a0; }
.g-nav { margin-top: 23px; display: grid; }
.g-nav span, .g-set { height: 36px; padding: 0 16px; display: flex; align-items: center; gap: 8px; border-radius: 6px; font-weight: 500; color: #e2e5ea; white-space: nowrap; overflow: hidden; }
.ghl .g-nav span svg, .ghl .g-set svg { width: 20px; height: 20px; stroke-width: 1.6; color: #d5d9e0; }
.g-nav span[data-screen] { cursor: pointer; transition: background .15s; }
.g-nav span[data-screen]:hover { background: rgba(26,32,44,.55); }
.g-nav span.on { background: #1a202c; color: #fff; }
.g-nav hr { margin: 12px 16px; border: 0; border-top: 1px solid rgba(255,255,255,.5); }
.g-nav em { margin-left: auto; padding: 1px 4px; border: 1px solid #af8205; border-radius: 3px; background: #ffbc00; color: #0c2d3f; font: 500 9.6px/13px "Roboto", sans-serif; }
.g-set { margin-top: auto; margin-bottom: 8px; }
.g-col { position: absolute; right: -8px; bottom: 15px; width: 20px; height: 20px; border-radius: 50%; background: #38d09f; color: #0b4a32; display: grid; place-items: center; }
.ghl .g-col svg { width: 12px; height: 12px; stroke-width: 2.6; }

/* narrow frames collapse the navigation to its icon rail, as the product does */
.is-narrow .ghl-frame { --w: 924; }
.is-narrow .g-side { width: 64px; }
.is-narrow .g-logo { height: 34px; margin-top: 16px; } .is-narrow .g-logo img { height: 34px; }
.is-narrow .g-sw { justify-content: center; margin-top: 22px; }
.is-narrow .g-sw span, .is-narrow .g-sw > svg, .is-narrow .g-find kbd, .is-narrow .g-find .b, .is-narrow .g-nav em { display: none; }
.is-narrow .g-find .g-q { font-size: 0; justify-content: center; padding: 0; }
.is-narrow .g-nav span, .is-narrow .g-set { padding: 0 22px; gap: 22px; }
.is-narrow .g-nav hr { margin-inline: 12px; }

/* ---- top bar and page header */
.g-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.g-top { position: relative; z-index: 2; height: 50px; flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 0 15px; background: #fff; box-shadow: 0 1px 3px rgba(16,24,40,.1), 0 1px 2px rgba(16,24,40,.06); }
.g-top i { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 500 14px/1 "Roboto", sans-serif; }
.g-top .c1 { background: #079452; } .g-top .c2 { background: linear-gradient(135deg, #2b1a6b, #6b3fd1); } .g-top .c3 { background: #3a987d; }
.g-top .c4 { background: #fd6804; } .g-top .c5 { background: #1b89f8; font-size: 16px; } .g-top .c6 { background: #b7ba7e; font-size: 13px; }
.g-top .c4 u { position: absolute; right: 1px; top: 1px; width: 9px; height: 9px; border-radius: 50%; background: #f1bb13; border: 1.5px solid #fff; }
.g-scr { flex: 1; min-height: 0; overflow: hidden; }
.g-in { height: 100%; display: flex; flex-direction: column; }
.g-ph { height: 40px; flex: none; display: flex; align-items: flex-end; padding: 0 16px; background: #fff; border-bottom: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(16,24,40,.05); font-family: "Roboto", system-ui, sans-serif; }
.g-ph b { margin-right: 16px; padding-bottom: 10px; font: 500 18px/26px "Roboto", sans-serif; color: #1f2937; }
.g-ph span { display: flex; align-items: center; gap: 6px; margin: 0 4px -1px; padding: 0 8px 8px; border-bottom: 2px solid transparent; font-weight: 500; line-height: 25.6px; color: #4b5563; white-space: nowrap; }
.g-ph span.on { color: #38a0db; border-color: #38a0db; }
.g-ph span.sep { border-left: 2px solid #d1d5db; margin-left: 10px; padding-left: 14px; }

/* ---- shared controls */
.g-btn { height: 36px; flex: none; padding: 0 13px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; color: #344054; font-weight: 500; white-space: nowrap; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.g-btn.sm { height: 32px; padding: 0 12px; border-radius: 4px; font-size: 13px; }
.g-btn.sq { width: 36px; padding: 0; justify-content: center; }
.g-btn.sm.sq { width: 32px; }
.g-btn.pri { background: #155eef; border-color: #155eef; color: #fff; }
.g-btn.lnk { color: #004eeb; }
.g-btn.rnd { border-radius: 16px; }
.g-count { flex: none; padding: 4px 12px; border-radius: 16px; background: #eff4ff; color: #004eeb; font-weight: 500; white-space: nowrap; }
.g-pill { height: 31px; flex: none; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #b2ccff; border-radius: 16px; background: #eff4ff; color: #004eeb; font-weight: 500; }
.g-sel { height: 32px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #d0d5dd; border-radius: 4px; background: #fff; color: #101828; white-space: nowrap; }
.ghl .g-sel svg { width: 14px; height: 14px; color: #667085; }
.g-search { height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #eaecf0; border-radius: 6px; background: #fff; color: #667085; white-space: nowrap; }
.g-cb { width: 16px; height: 16px; flex: none; display: inline-block; border: 1px solid #d0d5dd; border-radius: 4px; background: #fff; }
.g-av { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; background: #d9d6fe; color: #475467; font: 500 10px/1 "Inter", sans-serif; }
.g-card { background: #fff; border: 1px solid #eaecf0; border-radius: 4px; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.g-push { margin-left: auto; }
.a1 { background: #d9d6fe; } .a2 { background: #fedf89; } .a3 { background: #fed7aa; } .a4 { background: #a5f0fc; } .a5 { background: #c7d7fe; } .a6 { background: #fcceee; } .a7 { background: #aaf0c4; } .a8 { background: #e4e7ec; }

/* ---- dashboard */
.g-db { flex: 1; padding: 10px 16px 0; background: #f2f4f7; }
.g-db .bar { display: flex; align-items: center; gap: 10px; }
.g-seg { height: 36px; display: inline-flex; border: 1px solid #d0d5dd; border-radius: 6px; background: #fff; font-weight: 500; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.g-seg span { padding: 0 13px; display: flex; align-items: center; gap: 8px; }
.g-seg span + span { border-left: 1px solid #d0d5dd; color: #004eeb; }
.g-db .qf { margin: 9px 0 8px; color: #84adff; font-weight: 500; }
.g-db .row { display: grid; gap: 16px; }
.g-db .r3 { grid-template-columns: repeat(3, 1fr); height: 298px; }
.g-db .r2 { grid-template-columns: 1.12fr 1fr; height: 298px; margin-top: 16px; }
.g-w { min-width: 0; display: flex; flex-direction: column; }
.g-w .h { padding: 13px 16px 11px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #eaecf0; }
.g-w .h b { display: block; font-size: 16px; line-height: 22px; color: #101828; }
.g-w .h small { font-size: 12px; line-height: 16px; color: #101828; }
.g-w .h svg { margin-top: 4px; color: #475467; }
.g-w .b { flex: 1; min-height: 0; padding: 14px 16px; }
.g-w .g-sel { width: 196px; }
.g-donut { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.g-donut .n { font-size: 24px; fill: #344054; }
.g-leg { display: grid; gap: 9px; font-size: 13px; color: #101828; white-space: nowrap; }
.g-leg i { display: inline-block; width: 22px; height: 12px; margin-right: 7px; border-radius: 3px; vertical-align: -1px; }
.g-val { margin-top: 10px; }
.g-val text { font: 400 11px "Inter", sans-serif; fill: #475467; }
.g-tot { margin-top: 2px; text-align: center; font-size: 13px; color: #667085; }
.g-tot b { display: block; font-size: 18px; font-weight: 500; line-height: 26px; color: #101828; }
.g-ring { display: grid; justify-items: center; margin-top: 10px; }
.g-fn { margin-top: 10px; display: grid; gap: 5px; }
.g-fn .hd, .g-fn .fr { display: grid; grid-template-columns: minmax(0, 1fr) 74px 74px; gap: 10px; align-items: center; }
.g-fn .hd { font-size: 12px; font-weight: 500; line-height: 13px; color: #101828; text-align: center; }
.g-fn .ax { display: flex; justify-content: space-between; font-weight: 400; color: #344054; }
.g-fn .bar { position: relative; height: 34px; background: #f2f4f7; }
.g-fn .bar i { position: absolute; inset: 0 auto 0 0; background: #54b1fe; }
.g-fn .bar span { position: absolute; left: 12px; top: 1px; font-size: 12.5px; line-height: 16px; color: #101828; white-space: nowrap; }
.g-fn .bar small { display: block; font-size: 12.5px; }
.g-fn u { height: 28px; display: grid; place-items: center; background: #eaecf0; color: #344054; font-size: 12px; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); }
.g-tf { display: flex; gap: 8px; }
.g-tf .g-sel { flex: 1; width: auto; }
.g-task { display: flex; gap: 14px; align-items: center; padding: 11px 0; border-bottom: 1px solid #eaecf0; }
.g-task div { flex: 1; min-width: 0; font-size: 12px; line-height: 19px; color: #667085; }
.g-task div b { font-size: 13px; font-weight: 500; color: #101828; margin-right: 6px; white-space: nowrap; }
.g-task div span { color: #101828; }
.g-task em { padding: 1px 6px; border: 1px solid #d0d5dd; border-radius: 16px; font-size: 12px; font-weight: 500; color: #344054; white-space: nowrap; }
.g-task em.od { border-color: #f04438; color: #b42318; }
.g-task svg { color: #475467; }

/* ---- conversations */
.g-cv { flex: 1; min-height: 0; display: flex; padding: 10px 0 8px; background: #eef0f4; }
.g-cv-rail { width: 52px; flex: none; display: grid; align-content: start; justify-items: center; gap: 4px; }
.g-cv-rail i { width: 36px; height: 36px; border: 1px solid transparent; border-radius: 6px; display: grid; place-items: center; color: #344054; }
.ghl .g-cv-rail svg, .ghl .g-cv-rr svg { width: 20px; height: 20px; }
.g-cv-rail .pri { background: #155eef; color: #fff; }
.g-cv-rail .on { border-color: #155eef; background: #fff; color: #155eef; }
.g-cv-rail hr { width: 36px; margin: 4px 0; border: 0; border-top: 1px solid #d0d5dd; }
.g-cv-list { width: 320px; flex: none; padding: 16px 16px 0; background: #fff; border-radius: 8px 0 0 8px; border-right: 1px solid #eaecf0; overflow: hidden; }
.g-cv-list .h { display: flex; align-items: center; gap: 10px; }
.g-cv-list .h b { flex: 1; font-size: 17px; line-height: 24px; color: #101828; }
.ghl .g-cv-list .h svg { width: 20px; height: 20px; color: #344054; }
.g-cv-list .g-tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; border-bottom: 1px solid #eaecf0; }
.g-cv-list .g-tabs span { position: relative; display: grid; justify-items: center; gap: 2px; padding-bottom: 6px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 15px; color: #475467; }
.ghl .g-cv-list .g-tabs svg { width: 20px; height: 20px; color: #667085; }
.g-cv-list .g-tabs .on { border-color: #155eef; color: #101828; font-weight: 500; }
.g-cv-list .g-tabs u { position: absolute; top: -4px; left: 50%; margin-left: 6px; min-width: 15px; padding: 0 4px; border-radius: 4px; background: #155eef; color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; text-align: center; }
.g-cv-list .all { display: flex; align-items: center; gap: 9px; padding: 14px 22px 12px; font-size: 15px; color: #344054; }
.g-ci { display: grid; grid-template-columns: 16px 30px minmax(0, 1fr) auto; column-gap: 9px; align-items: center; padding: 15px 10px 13px 22px; border: 1px solid transparent; border-bottom-color: #eaecf0; }
.g-ci.sel { border-color: #528bff; border-radius: 4px; }
.g-ci .av { position: relative; width: 28px; height: 28px; }
.g-ci .av .g-av { width: 28px; height: 28px; font-size: 11px; }
.g-ci .av u { position: absolute; right: -7px; bottom: -6px; width: 17px; height: 17px; border-radius: 4px; background: #fff; display: grid; place-items: center; color: #344054; }
.ghl .g-ci .av u svg { width: 12px; height: 12px; }
.g-ci .av u.ig { color: #c13584; } .g-ci .av u.fb { color: #1877f2; } .g-ci .av u.ph { color: #079452; }
.g-ci b { font-size: 15px; color: #344054; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ci .m { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #667085; }
.g-ci .m u { width: 20px; height: 20px; border-radius: 4px; background: #155eef; color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.g-ci p { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; margin-top: 7px; color: #667085; }
.g-ci p span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ci p svg { color: #98a2b3; }
.g-cv-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; border-radius: 0 8px 8px 0; }
.g-th-h { height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid #eaecf0; }
.g-th-h .g-av { width: 32px; height: 32px; font-size: 12px; }
.g-th-h b { flex: 1; font-size: 17px; font-weight: 500; color: #101828; }
.ghl .g-th-h svg { width: 22px; height: 22px; color: #344054; }
.g-th { flex: 1; min-height: 0; padding: 8px 16px 0; display: flex; flex-direction: column; gap: 7px; overflow: hidden; }
.g-day { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 3px 12px; border-radius: 16px; background: #f2f4f7; font-size: 13px; font-weight: 500; color: #344054; }
.g-em { border: 1px solid #eaecf0; border-radius: 4px; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.g-em .s { height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #eaecf0; font-weight: 500; color: #101828; }
.g-em .s span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-em .s svg { color: #344054; }
.g-em .m { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 11px; align-items: center; padding: 9px 16px 10px; }
.g-em .m .g-av { width: 30px; height: 30px; font-size: 11px; }
.g-em .m b { display: block; font-weight: 500; color: #101828; }
.g-em .m p { color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-em .m > span { display: flex; align-items: center; gap: 14px; color: #475467; }
.g-em .pics { grid-column: 2 / -1; display: flex; gap: 6px; margin-top: 6px; }
.g-em .pics img { width: 56px; height: 38px; object-fit: cover; border-radius: 4px; }
.g-call { display: flex; align-items: center; gap: 12px; padding: 7px 14px; border: 1px solid #eaecf0; border-radius: 8px; }
.g-call > i { width: 30px; height: 30px; border-radius: 50%; background: #d1fadf; color: #027a48; display: grid; place-items: center; }
.g-call div { flex: 1; font-size: 13px; line-height: 18px; color: #667085; }
.g-call div b { display: block; font-size: 14px; font-weight: 500; color: #101828; }
.g-call > span { font-size: 13px; color: #475467; }
.g-sms { max-width: 86%; display: grid; gap: 3px; }
.g-sms p { padding: 8px 12px; border-radius: 8px; background: #f2f4f7; color: #101828; }
.g-sms small { font-size: 12px; color: #667085; }
.g-sms.out { align-self: flex-end; justify-items: end; }
.g-sms.out p { background: #d1e0ff; }
.g-comp { flex: none; display: flex; margin: 10px 16px 0; height: 40px; border: 1px solid #d0d5dd; border-radius: 4px; }
.g-comp span { display: flex; align-items: center; gap: 4px; padding: 0 12px; color: #155eef; }
.g-comp p { flex: 1; display: flex; align-items: center; padding: 0 6px; border-inline: 1px solid #d0d5dd; font-size: 15px; color: #667085; }
.g-comp i { width: 58px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #155eef; color: #fff; border-radius: 0 3px 3px 0; }
.g-cv-rr { width: 52px; flex: none; display: grid; align-content: start; justify-items: center; gap: 20px; padding-top: 8px; color: #101828; }
.g-cv-rr .on { color: #155eef; }

/* ---- opportunities */
.g-op { flex: 1; min-height: 0; padding: 0 16px; background: #f9fafb; }
.g-op .r1 { display: flex; align-items: center; gap: 12px; padding: 14px 8px 0; }
.g-op .r1 .g-sel { width: 256px; height: 34px; padding: 0 12px; border-radius: 8px; font-size: 16px; color: #344054; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
.g-tog { display: inline-flex; margin-left: auto; border: 1px solid #d0d5dd; border-radius: 6px; overflow: hidden; background: #fff; }
.g-tog i { width: 37px; height: 32px; display: grid; place-items: center; color: #344054; }
.g-tog .on { background: #eff4ff; color: #155eef; }
.g-tog i + i { border-left: 1px solid #d0d5dd; }
.g-op .r2 { display: flex; margin: 14px 0 0 8px; border-bottom: 1px solid #eaecf0; font-size: 15px; color: #475467; }
.g-op .r2 span { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.g-op .r2 .on { border-color: #155eef; }
.g-op .r2 span + span { border-left: 1px solid #eaecf0; color: #101828; }
.g-op .r3 { display: flex; align-items: center; gap: 8px; padding: 9px 8px 10px; }
.g-op .r3 .g-search { width: 248px; margin-left: auto; font-size: 15px; }
.g-op .r3 .mf { display: flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 15px; font-weight: 500; color: #344054; }
.g-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 8px; }
.g-colh { padding: 8px 8px 9px; margin-bottom: 14px; }
.g-colh div { display: flex; justify-content: space-between; align-items: center; }
.g-colh b { font-weight: 700; color: #101828; }
.g-colh svg { color: #667085; }
.g-colh small { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: #667085; }
.g-colh small span { margin-left: 8px; font-size: 13px; color: #000; }
.g-oc { position: relative; margin-bottom: 9px; padding: 11px 8px 9px; }
.g-oc > b { display: block; padding-right: 28px; font-weight: 500; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-oc > i { position: absolute; right: 7px; top: 7px; width: 24px; height: 24px; border: 1px solid #98a2b3; border-radius: 50%; background: #f2f4f7; color: #475467; display: grid; place-items: center; }
.ghl .g-oc > i svg { width: 13px; height: 13px; }
.g-oc dl { margin: 10px 0 9px; display: grid; grid-template-columns: 58px minmax(0, 1fr); row-gap: 5px; font-size: 12px; line-height: 17px; }
.g-oc dt { font-weight: 600; color: #607179; }
.g-oc dd { margin: 0; font-size: 13px; color: #607179; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-oc .ic { display: flex; gap: 10px; color: #344054; }
.g-oc .ic span { position: relative; display: grid; }
.g-oc .ic u { position: absolute; left: 9px; top: -7px; min-width: 14px; height: 14px; border-radius: 7px; background: #155eef; color: #fff; font-size: 9px; font-weight: 600; line-height: 14px; text-align: center; }

/* ---- contacts */
.g-ct { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #f2f4f7; }
.g-ct .lists { height: 56px; flex: none; display: flex; align-items: flex-end; gap: 4px; padding: 0 16px; background: #fff; border-bottom: 1px solid #eaecf0; font-size: 15px; color: #475467; }
.g-ct .lists > span { padding: 0 12px 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; display: flex; align-items: center; gap: 6px; }
.g-ct .lists .on { border-color: #155eef; color: #155eef; font-weight: 500; }
.g-ct .lists .add { border-left: 1px solid #d0d5dd; padding-left: 14px; font-weight: 500; color: #344054; }
.g-ct .lists .act { margin-left: auto; align-self: center; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; }
.g-ct .card { flex: 1; min-height: 0; margin: 16px 12px 0; padding: 14px 12px 0; display: flex; flex-direction: column; }
.g-ct .tb { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.g-ct .tb .colsn { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: #344054; }
.g-ct .tb .g-search { width: 244px; font-size: 15px; }
.g-tr { display: grid; grid-template-columns: 42px 150px 128px 172px 106px minmax(0, 1fr); border: 1px solid #eaecf0; border-top: 0; align-items: center; }
.g-tr > * { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-left: 1px solid #eaecf0; font-size: 14px; color: #101828; white-space: nowrap; overflow: hidden; }
.g-tr > :first-child { border-left: 0; justify-content: center; }
.g-tr.th { border-top: 1px solid #eaecf0; background: #f9fafb; }
.g-tr.th > * { font-size: 14px; font-weight: 600; color: #344054; justify-content: space-between; }
.g-tr.th svg { color: #98a2b3; }
.g-tr svg { color: #344054; }
.g-tr .dim { color: #344054; }
.g-tag { padding: 2px 8px; margin-right: -2px; border-radius: 16px; background: #f2f4f7; font-size: 12px; font-weight: 500; color: #344054; }
.g-pg { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 10px; border: 1px solid #eaecf0; border-top: 0; font-size: 15px; color: #344054; }
.g-pg .g-btn { height: 32px; font-size: 15px; font-weight: 400; }
.g-pg .cur { border-color: #155eef; color: #155eef; width: 32px; padding: 0; justify-content: center; }
.g-pg .dis { color: #98a2b3; box-shadow: none; }

/* ---- calendars */
.g-cal { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; }
.g-cal .bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; font-size: 15px; }
.g-cal .rng { width: 240px; justify-content: space-between; }
.g-cal .lnk { border-color: #84adff; }
.g-cg { flex: 1; min-height: 0; display: grid; grid-template-columns: 74px repeat(7, 1fr); grid-auto-rows: 62px; grid-template-rows: 66px 44px; border-top: 1px solid #eaecf0; }
.g-cg > * { border-left: 1px solid #dfe2e7; border-bottom: 1px solid #dfe2e7; position: relative; }
.g-cg > .t { border-left: 0; padding: 6px 8px 0 0; text-align: right; font-size: 13px; color: #344054; white-space: nowrap; }
.g-cg > .tz { font-size: 10.5px; line-height: 14px; text-align: center; padding: 8px 0 0; }
.g-cg > .d { display: grid; place-items: center; font-size: 17px; font-weight: 600; color: #344054; }
.g-cg > .ad { display: grid; place-items: center; text-align: center; padding: 0; }
.g-cg > .hf::after { content: ""; position: absolute; inset: 50% 0 auto 0; border-top: 1px dotted #dfe2e7; }
.g-ev { position: absolute; left: 3px; right: 5px; z-index: 1; padding: 4px 6px; border-left: 3px solid #2e90fa; border-radius: 4px; background: #d1e9ff; font-size: 11.5px; line-height: 15px; color: #175cd3; overflow: hidden; }
.g-ev b { display: block; font-size: 12px; color: #194185; white-space: nowrap; }
.g-ev.job { border-color: #f79009; background: #fef0c7; color: #b54708; }
.g-ev.job b { color: #7a2e0e; }

/* ---- payments */
.g-pay { flex: 1; min-height: 0; padding: 24px 32px 0; background: #f9fafb; }
.g-pay .ttl { display: flex; align-items: flex-start; }
.g-pay h4 { margin: 0; font: 500 30px/38px "Inter", sans-serif; color: #101828; }
.g-pay .ttl p { margin-top: 2px; font-size: 16px; line-height: 24px; color: #475467; }
.g-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.g-stats div { padding: 20px 22px 18px; border-radius: 8px; }
.g-stats span { font-size: 14px; color: #475467; white-space: nowrap; }
.g-stats b { display: block; margin-top: 8px; font-size: 30px; line-height: 40px; color: #101828; }
.g-pay .tbl { margin-top: 24px; border-radius: 8px; }
.g-pay .fl { display: flex; align-items: center; gap: 10px; padding: 14px 16px; }
.g-pay .dr { width: 378px; height: 40px; display: flex; align-items: center; justify-content: space-around; padding: 0 12px; border: 1px solid #d0d5dd; border-radius: 4px; font-size: 15px; color: #667085; }
.g-pay .fl .g-search { flex: 1; height: 40px; border-color: #d0d5dd; border-radius: 4px; font-size: 16px; }
.g-pay .fl .g-btn { height: 40px; font-size: 16px; }
.g-ir { display: grid; grid-template-columns: minmax(0, 1.7fr) 1.05fr .9fr 1fr .85fr .7fr; align-items: center; height: 52px; padding: 0 8px; border-top: 1px solid #eaecf0; }
.g-ir > * { padding: 0 16px; font-size: 14px; color: #475467; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-ir > :first-child { font-weight: 500; color: #101828; }
.g-ir.th { height: 44px; background: #f9fafb; }
.g-ir.th > * { font-size: 13px; font-weight: 500; color: #475467; }
.g-st { justify-self: start; margin-left: 16px; padding: 2px 10px !important; border-radius: 16px; font-size: 12px !important; font-weight: 500; }
.g-st.paid { background: #ecfdf3; color: #027a48 !important; } .g-st.sent { background: #eff8ff; color: #175cd3 !important; } .g-st.draft { background: #f2f4f7; color: #344054 !important; }

@media print {
  .ghl .panel[hidden] { display: none !important; }
  .crmx-cap[hidden] { display: none !important; }
  .crmx-hint { display: none !important; }
  .crmx { break-inside: avoid; }
  .ghl-frame { overflow: hidden; box-shadow: none; }
  .ghl, .ghl * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}