:root{ --cm-crm-blue: #1a73e8; --cm-crm-surface: #f3f6fb; --cm-crm-card: #ffffff; --cm-crm-text: #202124; --cm-crm-muted: #5f6368; --cm-crm-border: #dfe3ea; --cm-crm-shadow: 0 14px 38px rgba(60, 64, 67, 0.22); --cm-crm-call: #1967d2; --cm-crm-manual-email: #188038; --cm-crm-auto-email: #00796b; --cm-crm-mail: #b06000; --cm-crm-popby: #8430ce} #clippymail-crm-toggle.clippymail-crm-nav::before{ content: "\25A6"; font-family: Arial, sans-serif !important; font-size: 19px !important; width: 24px !important; height: 24px !important; line-height: 24px !important; text-align: center !important; display: block !important} #clippymail-crm-toggle.clippymail-crm-nav.selected, body.clippymail-crm-open #clippymail-crm-toggle.clippymail-crm-nav{ background: #e8f0fe !important; color: #1a73e8 !important} html.dark-mode #clippymail-crm-toggle.clippymail-crm-nav.selected, html.dark-mode body.clippymail-crm-open #clippymail-crm-toggle.clippymail-crm-nav{ background: #394457 !important; color: #8ab4f8 !important} .cm-crm-surface[hidden]{ display: none !important} .cm-crm-surface{ position: fixed; inset: 0; z-index: 200100; background: var(--cm-crm-surface); color: var(--cm-crm-text); font-family: "Google Sans", Roboto, Arial, sans-serif} .cm-crm-shell{ height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--cm-crm-surface)} .cm-crm-topbar{ height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; border-bottom: 1px solid var(--cm-crm-border); background: rgba(255, 255, 255, 0.94); box-sizing: border-box} .cm-crm-titleblock{ min-width: 0} .cm-crm-eyebrow, .cm-crm-section-label{ display: block; color: var(--cm-crm-muted); font-size: 12px; font-weight: 600; line-height: 1.35; text-transform: uppercase} .cm-crm-title, .cm-crm-contact-heading h2, .cm-crm-editor-head h2, .cm-crm-wave-shell h2{ margin: 0; color: var(--cm-crm-text); font-size: 24px; font-weight: 600; letter-spacing: 0; line-height: 1.2} .cm-crm-topactions{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto} .cm-crm-mode, .cm-crm-overdue-pill, .cm-crm-tier-chip, .cm-crm-category-chip, .cm-crm-column-count{ display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: #e8f0fe; color: #174ea6; font-size: 12px; font-weight: 600; white-space: nowrap} .cm-crm-overdue-pill{ background: #fce8e6; color: #b3261e} .cm-crm-category-chip{ background: color-mix(in srgb, var(--category-color, #5f7080) 16%, #ffffff); color: var(--category-color, #5f7080)} .cm-crm-iconbtn, .cm-crm-primary, .cm-crm-secondary, .cm-crm-linkbtn, .cm-crm-subnav-btn, .cm-crm-picker, .cm-crm-merge-chip{ font: inherit; border: 0; cursor: pointer} .cm-crm-iconbtn{ min-height: 36px; padding: 0 12px; border-radius: 8px; background: transparent; color: var(--cm-crm-muted); font-weight: 600} .cm-crm-iconbtn:hover, .cm-crm-linkbtn:hover, .cm-crm-secondary:hover{ background: rgba(60, 64, 67, 0.08)} .cm-crm-close{ border: 1px solid var(--cm-crm-border); background: #ffffff; color: var(--cm-crm-blue)} .cm-crm-primary{ min-height: 36px; padding: 0 14px; border-radius: 8px; background: var(--cm-crm-blue); color: #ffffff; font-weight: 600; text-decoration: none; white-space: nowrap} .cm-crm-secondary, .cm-crm-linkbtn{ min-height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff; color: var(--cm-crm-text); font-weight: 600; text-decoration: none; white-space: nowrap} .cm-crm-linkbtn{ border-color: transparent; color: var(--cm-crm-blue)} .cm-crm-content{ min-height: 0; display: grid; grid-template-columns: 176px minmax(0, 1fr)} .cm-crm-subnav{ padding: 18px 12px; border-right: 1px solid var(--cm-crm-border); background: #ffffff; overflow: auto} .cm-crm-subnav-btn{ width: 100%; min-height: 38px; display: flex; align-items: center; justify-content: flex-start; margin: 0 0 4px; padding: 0 12px; border-radius: 8px; background: transparent; color: var(--cm-crm-muted); font-weight: 600; text-align: left} .cm-crm-subnav-btn:hover, .cm-crm-subnav-btn.is-active{ background: #e8f0fe; color: var(--cm-crm-blue)} .cm-crm-main{ min-width: 0; overflow: auto; padding: 22px} .cm-crm-loading, .cm-crm-empty-state, .cm-crm-wave-shell, .cm-crm-editor, .cm-crm-contact-record{ max-width: 1440px; margin: 0 auto} .cm-crm-todaybar{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; margin: 0 0 18px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff} .cm-crm-counts{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px} .cm-crm-count-chip, .cm-crm-touch-chip{ --touch-color: #5f6368; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--touch-color) 14%, #ffffff); color: var(--touch-color); font-size: 12px; font-weight: 700; white-space: nowrap} .cm-crm-count-chip strong{ font-size: 13px} [data-touch-type="call"]{ --touch-color: var(--cm-crm-call)} [data-touch-type="manual_email"]{ --touch-color: var(--cm-crm-manual-email)} [data-touch-type="auto_email"]{ --touch-color: var(--cm-crm-auto-email)} [data-touch-type="mail"]{ --touch-color: var(--cm-crm-mail)} [data-touch-type="popby"]{ --touch-color: var(--cm-crm-popby)} .cm-crm-today-actions{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end} .cm-crm-columns{ display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; align-items: start} .cm-crm-column{ min-width: 0; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: rgba(255, 255, 255, 0.72); overflow: hidden} .cm-crm-column-head{ min-height: 48px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px; border-bottom: 1px solid var(--cm-crm-border); background: #ffffff} .cm-crm-column-head h2{ margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .cm-crm-category-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--category-color, #5f7080)} .cm-crm-cardstack{ display: grid; gap: 10px; padding: 12px} .cm-crm-card, .cm-crm-empty-card, .cm-crm-panel, .cm-crm-clippy-box, .cm-crm-flow-step, .cm-crm-editor-main, .cm-crm-picker-list{ border: 1px solid var(--cm-crm-border); border-radius: 8px; background: var(--cm-crm-card)} .cm-crm-card{ display: grid; gap: 7px; padding: 12px; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08); outline: none} .cm-crm-card:hover, .cm-crm-card:focus-visible{ border-color: #a8c7fa; box-shadow: 0 6px 16px rgba(26, 115, 232, 0.14)} .cm-crm-card.is-overdue{ border-color: #f4aea9; background: #fff7f6} .cm-crm-card.is-due-today{ border-color: #f6c36a; background: #fff8e1} .cm-crm-card-title{ font-size: 15px; font-weight: 700; line-height: 1.25} .cm-crm-card-context, .cm-crm-card-flow, .cm-crm-due, .cm-crm-editor-head p, .cm-crm-contact-heading p, .cm-crm-panel p, .cm-crm-thread-link small{ color: var(--cm-crm-muted); font-size: 13px; line-height: 1.35} .cm-crm-next-touch{ display: flex; align-items: center; gap: 8px; min-width: 0} .cm-crm-due{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .cm-crm-all-link{ display: block; padding: 0 12px 12px; color: var(--cm-crm-blue); font-weight: 600; text-decoration: none} .cm-crm-contact-header{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 10px 0 16px; padding: 16px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff} .cm-crm-avatar{ width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #d3e3fd; color: #174ea6; font-size: 18px; font-weight: 700} .cm-crm-contact-meta, .cm-crm-contact-actions{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center} .cm-crm-contact-meta{ margin-top: 8px} .cm-crm-contact-grid{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: 16px} .cm-crm-contact-left, .cm-crm-contact-right{ display: grid; gap: 16px; align-content: start} .cm-crm-panel, .cm-crm-clippy-box{ padding: 14px} .cm-crm-panel h3, .cm-crm-clippy-box h3, .cm-crm-used-by h3, .cm-crm-wave-layout h3{ margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: 0} .cm-crm-touch-row, .cm-crm-timeline-row{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--cm-crm-border)} .cm-crm-touch-row:first-child, .cm-crm-timeline-row:first-child{ border-top: 0} .cm-crm-timeline-row{ grid-template-columns: auto minmax(0, 1fr) auto} .cm-crm-timeline-row p{ margin: 3px 0 0} .cm-crm-timeline-row time, .cm-crm-thread-link time{ color: var(--cm-crm-muted); font-size: 12px; white-space: nowrap} .cm-crm-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--touch-color)} .cm-crm-thread-list{ display: grid; gap: 8px} .cm-crm-thread-link{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px; border: 1px solid var(--cm-crm-border); border-radius: 8px; color: var(--cm-crm-text); text-decoration: none} .cm-crm-thread-link span, .cm-crm-thread-link strong, .cm-crm-thread-link small{ display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .cm-crm-details{ display: grid; gap: 10px; margin: 0} .cm-crm-details div{ display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px} .cm-crm-details dt{ color: var(--cm-crm-muted); font-weight: 600} .cm-crm-details dd{ margin: 0} .cm-crm-clippy-box{ background: #eef5ff; border-color: #c7dcff} .cm-crm-editor{ display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px} .cm-crm-picker-list{ align-self: start; padding: 8px; background: #ffffff} .cm-crm-picker{ width: 100%; display: grid; gap: 3px; margin: 0 0 4px; padding: 10px; border-radius: 8px; background: transparent; color: var(--cm-crm-text); text-align: left} .cm-crm-picker span{ color: var(--cm-crm-muted); font-size: 12px} .cm-crm-picker:hover, .cm-crm-picker.is-active{ background: #e8f0fe; color: var(--cm-crm-blue)} .cm-crm-editor-main{ min-width: 0; padding: 16px} .cm-crm-editor-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px} .cm-crm-step-list{ display: grid; gap: 10px} .cm-crm-flow-step{ display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 12px} .cm-crm-step-seq{ width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #e8f0fe; color: #174ea6; font-weight: 700} .cm-crm-step-body{ min-width: 0} .cm-crm-step-top{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center} .cm-crm-step-grid, .cm-crm-template-form{ display: grid; gap: 12px} .cm-crm-step-grid{ grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); margin-top: 12px} .cm-crm-step-grid label, .cm-crm-template-form label, .cm-crm-dialog-card label{ display: grid; gap: 6px; color: var(--cm-crm-muted); font-size: 12px; font-weight: 700} .cm-crm-step-grid small{ color: var(--cm-crm-muted); font-size: 12px; font-weight: 500} .cm-crm-step-label, .cm-crm-step-grid input, .cm-crm-step-grid select, .cm-crm-template-form input, .cm-crm-template-form textarea, .cm-crm-dialog-card input, .cm-crm-dialog-card textarea{ width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff; color: var(--cm-crm-text); font: inherit; box-sizing: border-box} .cm-crm-template-form textarea, .cm-crm-dialog-card textarea{ resize: vertical} .cm-crm-merge-fields, .cm-crm-palette{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center} .cm-crm-merge-fields > span, .cm-crm-palette > span{ color: var(--cm-crm-muted); font-size: 12px; font-weight: 700} .cm-crm-merge-chip{ min-height: 28px; padding: 0 9px; border-radius: 999px; background: #edf2fa; color: #185abc; font-size: 12px; font-weight: 700} .cm-crm-merge-chip.is-insertable:hover{ background: #d3e3fd} .cm-crm-toggle-row{ display: flex; flex-wrap: wrap; gap: 10px} .cm-crm-switch{ min-height: 40px; display: inline-flex !important; grid-template-columns: none !important; grid-auto-flow: column; align-items: center; gap: 8px !important; padding: 0 12px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff; color: var(--cm-crm-text) !important} .cm-crm-switch input{ width: 18px !important; min-height: 18px !important} .cm-crm-used-by ul{ margin: 0; padding-left: 20px} .cm-crm-wave-shell{ border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff; overflow: hidden} .cm-crm-wave-shell > header{ padding: 16px; border-bottom: 1px solid var(--cm-crm-border)} .cm-crm-wave-layout{ display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 360px} .cm-crm-wave-layout aside{ padding: 12px; border-right: 1px solid var(--cm-crm-border); background: #f8fafd} .cm-crm-wave-layout aside button{ width: 100%; min-height: 36px; margin-bottom: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--cm-crm-muted); text-align: left; font: inherit; font-weight: 600} .cm-crm-wave-layout aside button.is-active{ background: #e8f0fe; color: var(--cm-crm-blue)} .cm-crm-wave-layout main{ padding: 18px} .cm-crm-dialog[hidden]{ display: none !important} .cm-crm-dialog{ position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(32, 33, 36, 0.38); z-index: 2} .cm-crm-dialog-card{ width: min(460px, 100%); position: relative; display: grid; gap: 12px; padding: 18px; border-radius: 8px; background: #ffffff; box-shadow: var(--cm-crm-shadow)} .cm-crm-dialog-card h3{ margin: 0; padding-right: 32px; font-size: 18px} .cm-crm-dialog-close{ position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--cm-crm-muted); font-size: 20px; cursor: pointer} .cm-crm-dialog-actions{ display: flex; justify-content: flex-end; gap: 8px} .cm-crm-toast{ position: fixed; right: 24px; bottom: 24px; padding: 10px 14px; border-radius: 8px; background: #202124; color: #ffffff; box-shadow: var(--cm-crm-shadow)} .cm-crm-screen-head{ max-width: 1440px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 auto 16px} .cm-crm-screen-head h2, .cm-crm-outbox-group h3, .cm-crm-popby-window h3, .cm-crm-popby-list h3{ margin: 0} .cm-crm-screen-head p{ margin: 4px 0 0; color: var(--cm-crm-muted)} .cm-crm-outbox, .cm-crm-popby{ max-width: 1440px; margin: 0 auto} .cm-crm-outbox-grid, .cm-crm-popby-layout, .cm-crm-diff-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px} .cm-crm-outbox-group h3, .cm-crm-popby-list h3{ display: flex; align-items: center; justify-content: space-between} .cm-crm-draft-list, .cm-crm-popby-rows, .cm-crm-diff-rows{ display: grid; gap: 10px} .cm-crm-draft, .cm-crm-popby-row, .cm-crm-diff-row, .cm-crm-popby-result{ border: 1px solid var(--cm-crm-border); border-radius: 8px; background: var(--cm-crm-card)} .cm-crm-draft{ display: grid; gap: 10px; padding: 12px} .cm-crm-draft-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 10px} .cm-crm-draft-top span, .cm-crm-popby-row small, .cm-crm-popby-row em, .cm-crm-diff-subtitle{ display: block; color: var(--cm-crm-muted); font-size: 12px; font-style: normal; line-height: 1.35} .cm-crm-draft h4{ margin: 0; font-size: 15px} .cm-crm-draft-body{ max-height: 260px; overflow: auto; margin: 0; padding: 10px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #f8fafd; color: var(--cm-crm-text); white-space: pre-wrap; font: inherit} .cm-crm-draft-edit{ display: grid; gap: 10px} .cm-crm-draft-actions, .cm-crm-touch-actions{ display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px} .cm-crm-popby-row{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; cursor: pointer} .cm-crm-popby-row input{ margin-top: 3px} .cm-crm-popby-window{ align-self: start; display: grid; gap: 12px} .cm-crm-popby-window label, .cm-crm-draft-edit label, .cm-crm-diff-controls label, .cm-crm-stage-dates label{ display: grid; gap: 6px; color: var(--cm-crm-muted); font-size: 12px; font-weight: 700} .cm-crm-popby-window input, .cm-crm-draft-edit input, .cm-crm-draft-edit textarea, .cm-crm-diff-controls input, .cm-crm-diff-controls select, .cm-crm-stage-dates input{ width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff; color: var(--cm-crm-text); font: inherit; box-sizing: border-box} .cm-crm-popby-result{ display: grid; gap: 4px; padding: 10px; background: #e6f4ea; color: #137333} .cm-crm-popby-result code{ overflow-wrap: anywhere} .cm-crm-newsletter, .cm-crm-newsletter-editor{ max-width: 1440px; margin: 0 auto} .cm-crm-newsletter-strip{ display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 10px; margin: 0 0 16px} .cm-crm-newsletter-stat{ min-width: 0; display: grid; gap: 4px; padding: 12px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff} .cm-crm-newsletter-stat small{ color: var(--cm-crm-muted); font-size: 12px; font-weight: 700; text-transform: uppercase} .cm-crm-newsletter-stat strong{ font-size: 22px; color: var(--cm-crm-text)} .cm-crm-newsletter-stat.is-total{ border-color: #a8c7fa} .cm-crm-newsletter-stat.is-unsub{ border-color: #f4aea9} .cm-crm-newsletter-home-grid, .cm-crm-newsletter-editor-grid{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr); gap: 16px; align-items: start} .cm-crm-newsletter-prompt{ display: grid; gap: 12px} .cm-crm-newsletter-prompt textarea, .cm-crm-newsletter-slot-input, .cm-crm-newsletter-contact-search{ width: 100%; min-height: 38px; padding: 9px 10px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff; color: var(--cm-crm-text); font: inherit; box-sizing: border-box} .cm-crm-newsletter-issue-list, .cm-crm-newsletter-rewrite-list, .cm-crm-newsletter-contact-list, .cm-crm-newsletter-bulk{ display: grid; gap: 10px} .cm-crm-newsletter-issue, .cm-crm-newsletter-listing, .cm-crm-newsletter-contact-row, .cm-crm-newsletter-bulk label{ border: 1px solid var(--cm-crm-border); border-radius: 8px; background: var(--cm-crm-card)} .cm-crm-newsletter-issue{ display: grid; gap: 4px; padding: 12px; cursor: pointer; outline: none} .cm-crm-newsletter-issue:hover, .cm-crm-newsletter-issue:focus-visible{ border-color: #a8c7fa; box-shadow: 0 6px 16px rgba(26, 115, 232, 0.14)} .cm-crm-newsletter-issue span, .cm-crm-newsletter-issue em, .cm-crm-newsletter-listing small, .cm-crm-newsletter-listing em, .cm-crm-newsletter-contact-row small, .cm-crm-newsletter-contact-row em, .cm-crm-newsletter-side p{ color: var(--cm-crm-muted); font-size: 12px; font-style: normal; line-height: 1.35} .cm-crm-newsletter-actions{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end} .cm-crm-newsletter-preview{ min-width: 0} .cm-crm-newsletter-email{ max-width: 680px; margin: 0 auto; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff; overflow: hidden} .cm-crm-newsletter-email-head{ display: grid; gap: 4px; padding: 18px 20px; background: #0f2f4f; color: #ffffff} .cm-crm-newsletter-email-head span{ font-size: 12px; font-weight: 700; text-transform: uppercase} .cm-crm-newsletter-email-head strong{ font-size: 22px} .cm-crm-newsletter-slot{ width: 100%; display: grid; gap: 8px; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--cm-crm-border); background: transparent; color: var(--cm-crm-text); text-align: left; font: inherit} .cm-crm-newsletter-slot-view{ cursor: pointer} .cm-crm-newsletter-slot-view:hover{ background: #f8fafd} .cm-crm-newsletter-slot span, .cm-crm-newsletter-market header strong, .cm-crm-newsletter-listings h3{ color: var(--cm-crm-muted); font-size: 12px; font-weight: 700; text-transform: uppercase} .cm-crm-newsletter-slot p{ margin: 0; color: var(--cm-crm-text); font-size: 15px; line-height: 1.5} .cm-crm-newsletter-listings, .cm-crm-newsletter-market{ padding: 16px 20px; border-bottom: 1px solid var(--cm-crm-border)} .cm-crm-newsletter-listings h3, .cm-crm-newsletter-market p{ margin: 0 0 10px} .cm-crm-newsletter-listing-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px} .cm-crm-newsletter-listing, .cm-crm-newsletter-contact-row, .cm-crm-newsletter-bulk label{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px; cursor: pointer} .cm-crm-newsletter-listing span, .cm-crm-newsletter-contact-row span{ display: grid; gap: 3px; min-width: 0} .cm-crm-newsletter-listing strong, .cm-crm-newsletter-contact-row strong{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .cm-crm-newsletter-market header{ display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 10px} .cm-crm-newsletter-market-stats{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px} .cm-crm-newsletter-market-stats span, .cm-crm-newsletter-metric{ display: grid; gap: 3px; padding: 10px; border-radius: 8px; background: #f3f6fb; text-align: center} .cm-crm-newsletter-market-stats small, .cm-crm-newsletter-metric span{ color: var(--cm-crm-muted); font-size: 11px; font-weight: 700; text-transform: uppercase} .cm-crm-newsletter-market-stats strong, .cm-crm-newsletter-metric strong{ font-size: 18px} .cm-crm-newsletter-chart{ height: 74px; display: flex; align-items: end; gap: 5px; margin: 12px 0; padding: 8px 0; border-top: 1px solid rgba(44, 93, 143, 0.14); border-bottom: 1px solid rgba(44, 93, 143, 0.14)} .cm-crm-newsletter-chart i{ flex: 1 1 0; display: block; min-width: 4px; border-radius: 4px 4px 0 0; background: #2c5d8f} .cm-crm-newsletter-email footer{ padding: 12px 20px; background: #f3f6fb; color: var(--cm-crm-muted); font-size: 12px} .cm-crm-newsletter-side{ display: grid; gap: 16px} .cm-crm-newsletter-stale{ display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 999px; background: #fce8e6; color: #b3261e; font-size: 12px; font-weight: 700; white-space: nowrap} .cm-crm-newsletter-modal-card{ width: min(760px, 100%); max-height: min(760px, calc(100vh - 48px)); overflow: auto} .cm-crm-newsletter-bulk{ grid-template-columns: repeat(2, minmax(0, 1fr))} .cm-crm-newsletter-bulk label small{ color: var(--cm-crm-muted); font-size: 12px} .cm-crm-newsletter-search-label{ display: grid; gap: 6px; color: var(--cm-crm-muted); font-size: 12px; font-weight: 700} .cm-crm-stage-rail{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin: 0 0 16px; padding: 12px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff} .cm-crm-stage-steps{ display: grid; grid-template-columns: repeat(4, minmax(92px, 1fr)); gap: 8px} .cm-crm-stage-step{ min-height: 38px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: #ffffff; color: var(--cm-crm-muted); font: inherit; font-weight: 700; cursor: pointer} .cm-crm-stage-step.is-active{ background: #e8f0fe; border-color: #a8c7fa; color: var(--cm-crm-blue)} .cm-crm-stage-dates{ display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px} .cm-crm-compose-chip, .cm-crm-touch-done{ min-height: 28px; display: inline-flex; align-items: center; padding: 0 9px; border: 1px solid var(--cm-crm-border); border-radius: 999px; background: #ffffff; color: var(--cm-crm-blue); font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer} .cm-crm-diff-card{ width: min(880px, 100%)} .cm-crm-diff-controls{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px} .cm-crm-diff-row{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px} .cm-crm-diff-row.is-removed{ border-color: #f4aea9; background: #fce8e6; color: #8c1d18; text-decoration: line-through} .cm-crm-diff-row.is-added{ border-color: #a8dab5; background: #e6f4ea; color: #137333} .cm-crm-kept-note{ padding: 10px; border-radius: 8px; background: #edf2fa; color: #3c4043; font-weight: 600} .cm-crm-error{ padding: 10px; border-radius: 8px; background: #fce8e6; color: #8c1d18} .cm-crm-tasks-strip{ border-bottom: 1px solid #dfe3ea; background: #ffffff} .cm-crm-strip-panel{ padding: 10px 12px} .cm-crm-strip-panel header{ display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #202124} .cm-crm-strip-panel header span{ color: #b3261e; font-size: 12px; font-weight: 700} .cm-crm-strip-counts, .cm-crm-strip-rows{ display: grid; gap: 6px; margin-top: 8px} .cm-crm-strip-counts{ grid-template-columns: repeat(5, minmax(0, 1fr))} .cm-crm-strip-count{ min-width: 0; padding: 4px 6px; border-radius: 8px; background: color-mix(in srgb, var(--touch-color, #5f6368) 12%, #ffffff); color: var(--touch-color, #5f6368); font-size: 11px; font-weight: 700; text-align: center} .cm-crm-strip-row{ display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 38px; padding: 6px 0; border-top: 1px solid #edf0f5; cursor: pointer} .cm-crm-strip-row:first-child{ border-top: 0} .cm-crm-strip-row.is-completed{ opacity: 0.58} .cm-crm-strip-main{ min-width: 0} .cm-crm-strip-main strong, .cm-crm-strip-main em{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .cm-crm-strip-main em, .cm-crm-strip-empty, .cm-crm-strip-loading, .cm-crm-strip-error{ color: #5f6368; font-size: 12px; font-style: normal} html.dark-mode .cm-crm-surface{ --cm-crm-surface: #1a1a2e; --cm-crm-card: #202938; --cm-crm-text: #e8eaed; --cm-crm-muted: #b6bdc7; --cm-crm-border: #344052; background: var(--cm-crm-surface)} html.dark-mode .cm-crm-shell, html.dark-mode .cm-crm-main{ background: var(--cm-crm-surface)} html.dark-mode .cm-crm-topbar, html.dark-mode .cm-crm-subnav, html.dark-mode .cm-crm-column-head, html.dark-mode .cm-crm-todaybar, html.dark-mode .cm-crm-contact-header, html.dark-mode .cm-crm-picker-list, html.dark-mode .cm-crm-editor-main, html.dark-mode .cm-crm-wave-shell, html.dark-mode .cm-crm-stage-rail, html.dark-mode .cm-crm-draft, html.dark-mode .cm-crm-popby-row, html.dark-mode .cm-crm-diff-row, html.dark-mode .cm-crm-newsletter-stat, html.dark-mode .cm-crm-newsletter-issue, html.dark-mode .cm-crm-newsletter-email, html.dark-mode .cm-crm-newsletter-listing, html.dark-mode .cm-crm-newsletter-contact-row, html.dark-mode .cm-crm-newsletter-bulk label, html.dark-mode .cm-crm-tasks-strip, html.dark-mode .cm-crm-dialog-card{ background: #202938} html.dark-mode .cm-crm-column, html.dark-mode .cm-crm-wave-layout aside{ background: #1f2635} html.dark-mode .cm-crm-secondary, html.dark-mode .cm-crm-linkbtn, html.dark-mode .cm-crm-switch, html.dark-mode .cm-crm-step-label, html.dark-mode .cm-crm-step-grid input, html.dark-mode .cm-crm-step-grid select, html.dark-mode .cm-crm-template-form input, html.dark-mode .cm-crm-template-form textarea, html.dark-mode .cm-crm-dialog-card input, html.dark-mode .cm-crm-dialog-card textarea{ background: #1b2230; color: var(--cm-crm-text); border-color: var(--cm-crm-border)} html.dark-mode .cm-crm-draft-body, html.dark-mode .cm-crm-popby-window input, html.dark-mode .cm-crm-draft-edit input, html.dark-mode .cm-crm-draft-edit textarea, html.dark-mode .cm-crm-diff-controls input, html.dark-mode .cm-crm-diff-controls select, html.dark-mode .cm-crm-stage-dates input, html.dark-mode .cm-crm-stage-step, html.dark-mode .cm-crm-compose-chip, html.dark-mode .cm-crm-touch-done, html.dark-mode .cm-crm-newsletter-prompt textarea, html.dark-mode .cm-crm-newsletter-slot-input, html.dark-mode .cm-crm-newsletter-contact-search{ background: #1b2230; color: var(--cm-crm-text); border-color: var(--cm-crm-border)} html.dark-mode .cm-crm-newsletter-slot-view:hover, html.dark-mode .cm-crm-newsletter-market-stats span, html.dark-mode .cm-crm-newsletter-metric, html.dark-mode .cm-crm-newsletter-email footer{ background: #1b2230} html.dark-mode .cm-crm-stage-step.is-active{ background: #263b61; color: #a8c7fa} html.dark-mode .cm-crm-diff-row.is-removed, html.dark-mode .cm-crm-error{ background: #341f22; color: #f4aea9} html.dark-mode .cm-crm-diff-row.is-added, html.dark-mode .cm-crm-popby-result{ background: #183225; color: #a8dab5} html.dark-mode .cm-crm-kept-note{ background: #263142; color: var(--cm-crm-text)} html.dark-mode .cm-crm-strip-panel header{ color: var(--cm-crm-text)} html.dark-mode .cm-crm-strip-row{ border-top-color: var(--cm-crm-border)} html.dark-mode .cm-crm-card.is-overdue{ background: #341f22} html.dark-mode .cm-crm-card.is-due-today{ background: #342c18} html.dark-mode .cm-crm-clippy-box{ background: #1d314c; border-color: #34577f} @media screen and (max-width: 1100px){ .cm-crm-columns{ grid-template-columns: repeat(2, minmax(220px, 1fr))} .cm-crm-step-grid{ grid-template-columns: repeat(2, minmax(150px, 1fr))} .cm-crm-contact-grid, .cm-crm-contact-header, .cm-crm-editor, .cm-crm-outbox-grid, .cm-crm-popby-layout, .cm-crm-newsletter-home-grid, .cm-crm-newsletter-editor-grid, .cm-crm-stage-rail{ grid-template-columns: 1fr} .cm-crm-contact-actions{ justify-content: flex-start}} @media screen and (max-width: 720px){ .cm-crm-topbar{ height: auto; min-height: 64px; padding: 10px 12px} .cm-crm-title{ font-size: 20px} .cm-crm-content{ grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr)} .cm-crm-subnav{ display: flex; gap: 6px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--cm-crm-border); overflow-x: auto} .cm-crm-subnav-btn{ width: auto; flex: 0 0 auto; min-height: 34px; margin: 0} .cm-crm-main{ padding: 12px} .cm-crm-todaybar, .cm-crm-editor-head{ align-items: stretch; flex-direction: column} .cm-crm-columns, .cm-crm-step-grid, .cm-crm-wave-layout, .cm-crm-diff-grid, .cm-crm-diff-controls, .cm-crm-newsletter-strip, .cm-crm-newsletter-listing-grid, .cm-crm-newsletter-market-stats, .cm-crm-newsletter-bulk, .cm-crm-stage-steps, .cm-crm-stage-dates, .cm-crm-strip-counts{ grid-template-columns: 1fr} .cm-crm-screen-head, .cm-crm-draft-top{ flex-direction: column} .cm-crm-contact-header{ grid-template-columns: auto minmax(0, 1fr)} .cm-crm-contact-actions{ grid-column: 1 / -1} .cm-crm-wave-layout aside{ border-right: 0; border-bottom: 1px solid var(--cm-crm-border)} .cm-crm-diff-row, .cm-crm-strip-row{ grid-template-columns: auto minmax(0, 1fr)} .cm-crm-strip-row .cm-crm-touch-chip, .cm-crm-strip-row .cm-crm-compose-chip{ grid-column: 2}} .cm-crm-subnav-pip{ display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: #d93025; color: #fff; font-size: 10.5px; font-weight: 600; vertical-align: 1px} .cm-crm-listings{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; min-height: 0; height: 100%} .cm-crm-listings-main{ padding: 16px 18px; overflow: auto; min-width: 0} .cm-crm-listings-head{ display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 12.5px} .cm-crm-listing-needs{ display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 11px; background: #fce8e6; color: #c5221f; font-size: 11.5px; font-weight: 500} .cm-crm-listings-table{ width: 100%; border-collapse: collapse; background: var(--cm-crm-card); border: 1px solid var(--cm-crm-border); border-radius: 8px; overflow: hidden} .cm-crm-listings-table th{ text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--cm-crm-muted); font-weight: 600; padding: 10px 14px; background: #fafbfd; border-bottom: 1px solid var(--cm-crm-border)} .cm-crm-listings-table td{ padding: 11px 14px; border-bottom: 1px solid #eceff3; vertical-align: middle; font-size: 13px} .cm-crm-listings-table tbody tr:last-child td{ border-bottom: 0} .cm-crm-listing-row{ cursor: pointer} .cm-crm-listing-row:hover td{ background: #f8fafd} .cm-crm-listing-row.needs-seller td{ background: #fffdf7} .cm-crm-listing-row.is-selected td{ background: #e8f0fe} .cm-crm-listing-stage{ display: inline-flex; align-items: center; height: 21px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 500; background: var(--cm-crm-surface); color: var(--cm-crm-muted)} .cm-crm-listing-stage.is-active{ background: #e6f4ea; color: #137333} .cm-crm-listing-stage.is-prelist{ background: #fef7e0; color: #976000} .cm-crm-listing-stage.is-conditional{ background: #e8f0fe; color: #1558b0} .cm-crm-listing-stage.is-sold, .cm-crm-listing-stage.is-archived{ background: #f1f3f4; color: #5f6368} .cm-crm-listing-chip{ display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 14px; background: var(--cm-crm-surface)} .cm-crm-listing-av{ width: 22px; height: 22px; border-radius: 50%; background: #d7e3fa; color: #1558b0; display: grid; place-items: center; font-size: 10px; font-weight: 600; flex: none} .cm-crm-listing-panel{ border-left: 1px solid var(--cm-crm-border); background: var(--cm-crm-card); padding: 16px; overflow: auto; min-width: 0} .cm-crm-listing-panel h3{ margin: 0; font-size: 15px; font-weight: 500} .cm-crm-listing-section{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cm-crm-border)} .cm-crm-listing-section h4{ margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--cm-crm-muted); font-weight: 600} .cm-crm-marketplace-publication{ border: 1px solid var(--cm-crm-border); border-radius: 9px; padding: 10px; margin-bottom: 9px; background: var(--cm-crm-surface)} .cm-crm-marketplace-head, .cm-crm-marketplace-foot{ display: flex; align-items: center; justify-content: space-between; gap: 8px} .cm-crm-marketplace-head > div{ min-width: 0} .cm-crm-marketplace-head b{ font-size: 12.5px} .cm-crm-marketplace-head .cm-crm-listing-stage{ margin-left: 7px} .cm-crm-marketplace-head a, .cm-crm-marketplace-foot button{ border: 0; padding: 0; background: none; color: var(--cm-crm-accent); font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap} .cm-crm-marketplace-window{ display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; padding-top: 8px; font-size: 11.5px} .cm-crm-marketplace-window > span, .cm-crm-marketplace-foot{ color: var(--cm-crm-muted)} .cm-crm-marketplace-foot{ border-top: 1px solid var(--cm-crm-border); margin-top: 9px; padding-top: 8px; font-size: 10.5px} .cm-crm-marketplace-connect-field{ display: block; color: var(--cm-crm-muted); font-size: 11.5px; margin-top: 9px} .cm-crm-marketplace-connect-field > div{ display: flex; gap: 7px; margin-top: 5px} .cm-crm-marketplace-connect-field input{ flex: 1; min-width: 0; border: 1px solid var(--cm-crm-border); border-radius: 5px; padding: 6px 8px; background: var(--cm-crm-card); color: var(--cm-crm-text); font: inherit; font-size: 12px} .cm-crm-listing-match{ display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--cm-crm-border); border-radius: 8px; margin-bottom: 8px} .cm-crm-listing-match.is-strong, .cm-crm-listing-match.is-linked{ border-color: #a8c7fa; background: #f6f9fe} .cm-crm-listing-match-body{ flex: 1; min-width: 0; font-size: 12.5px} .cm-crm-listing-conf{ font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: #e6f4ea; color: #137333} .cm-crm-listing-match.is-possible .cm-crm-listing-conf, .cm-crm-listing-match.is-weak .cm-crm-listing-conf{ background: #fef7e0; color: #976000} .cm-crm-listing-field{ display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--cm-crm-muted); margin-bottom: 8px} .cm-crm-listing-field input, .cm-crm-listing-select{ font: inherit; padding: 5px 8px; border: 1px solid var(--cm-crm-border); border-radius: 4px; background: var(--cm-crm-card); color: var(--cm-crm-text)} .cm-crm-listing-select{ width: 100%; margin-bottom: 10px} .cm-crm-listing-applied{ font-size: 12.5px; color: var(--cm-crm-muted); margin: 0 0 10px} .cm-crm-listing-preview{ list-style: none; margin: 0 0 12px; padding: 0; border-left: 2px solid var(--cm-crm-border)} .cm-crm-listing-preview-row{ display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 8px; padding: 5px 0 5px 12px; font-size: 12.5px} .cm-crm-listing-preview-row.is-waiting{ color: var(--cm-crm-muted)} .cm-crm-listing-preview-date{ color: var(--cm-crm-muted)} .cm-crm-listing-panel .cm-crm-secondary, .cm-crm-listing-panel .cm-crm-primary{ min-height: 30px; font-size: 12.5px} .cm-crm-listing-panel .cm-crm-primary{ width: 100%} .cm-crm-listings-table .cm-crm-secondary{ min-height: 28px; padding: 0 10px; font-size: 12px} @media (max-width: 900px){ .cm-crm-listings{ grid-template-columns: minmax(0, 1fr)} .cm-crm-listing-panel{ border-left: 0; border-top: 1px solid var(--cm-crm-border)}} html.dark-mode .cm-crm-listings-table, html.dark-mode .cm-crm-listing-panel, html.dark-mode .cm-crm-marketplace-publication{ background: #2a2f3a; border-color: #3c4453} html.dark-mode .cm-crm-listings-table th{ background: #232833; border-color: #3c4453} html.dark-mode .cm-crm-listings-table td{ border-color: #343b48} html.dark-mode .cm-crm-listing-row:hover td{ background: #313846} html.dark-mode .cm-crm-listing-row.needs-seller td{ background: #34302a} html.dark-mode .cm-crm-listing-row.is-selected td{ background: #394457} html.dark-mode .cm-crm-listing-match.is-strong, html.dark-mode .cm-crm-listing-match.is-linked{ background: #2f3746; border-color: #4a5568} .cm-crm-queue .cm-crm-listings-main{ padding: 18px 20px} .cm-crm-queue-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px} .cm-crm-queue-head h3, .cm-crm-queue-empty h3{ margin: 0; font-size: 16px; font-weight: 500} .cm-crm-queue-head p{ margin: 2px 0 0; font-size: 12.5px} .cm-crm-queue-card{ background: var(--cm-crm-card); border: 1px solid var(--cm-crm-border); border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(60, 64, 67, 0.14)} .cm-crm-queue-card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px} .cm-crm-queue-card-head h3{ margin: 0; font-size: 16px; font-weight: 500} .cm-crm-queue-card-head p{ margin: 2px 0 0; font-size: 12.5px} .cm-crm-queue-ribbon{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--cm-crm-border)} .cm-crm-queue-step{ font-size: 12px; color: var(--cm-crm-muted); padding: 3px 10px; border-radius: 12px; background: var(--cm-crm-surface)} .cm-crm-queue-step.is-done{ background: #e6f4ea; color: #137333} .cm-crm-queue-step.is-now{ background: var(--cm-crm-blue); color: #ffffff; font-weight: 500} .cm-crm-queue-columns{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px} .cm-crm-queue-columns h4, .cm-crm-queue-rail h4, .cm-crm-queue-upnext h4{ margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--cm-crm-muted); font-weight: 600} .cm-crm-queue-columns .cm-crm-listing-section:first-of-type{ margin-top: 14px} .cm-crm-queue-actions{ display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cm-crm-border)} .cm-crm-queue-count{ margin-left: auto; font-size: 12px; color: var(--cm-crm-muted)} .cm-crm-queue-upnext{ margin-top: 18px} .cm-crm-queue-upnext-item{ display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; font: inherit; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: var(--cm-crm-card); cursor: pointer} .cm-crm-queue-upnext-item:hover{ background: #f8fafd} .cm-crm-queue-rail{ border-left: 1px solid var(--cm-crm-border); background: var(--cm-crm-card); padding: 18px 16px; overflow: auto} .cm-crm-queue-event{ padding: 10px 0; border-bottom: 1px solid #f1f3f4; font-size: 12.5px} .cm-crm-queue-event:last-child{ border-bottom: 0} .cm-crm-queue-event-actions{ display: flex; gap: 8px; margin-top: 8px} .cm-crm-queue-empty{ padding: 40px 0; text-align: center} .cm-crm-queue-empty p{ margin: 6px 0 14px; font-size: 12.5px} button.cm-crm-listing-needs{ border: 0; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 500} .cm-crm-listing-note-field{ display: block; font-size: 12.5px; color: var(--cm-crm-muted); margin-bottom: 8px} .cm-crm-listing-note-field textarea{ display: block; width: 100%; margin-top: 4px; font: inherit; padding: 6px 8px; border: 1px solid var(--cm-crm-border); border-radius: 4px; background: var(--cm-crm-card); color: var(--cm-crm-text); resize: vertical} .cm-crm-listing-stage-select{ font: inherit; padding: 5px 8px; border: 1px solid var(--cm-crm-border); border-radius: 4px; background: var(--cm-crm-card); color: var(--cm-crm-text)} .cm-crm-listing-hint{ font-size: 11.5px; color: var(--cm-crm-muted); margin: 8px 0 0} .cm-crm-flow-studio{ grid-template-columns: 236px minmax(0, 1fr) 320px} .cm-crm-flow-group{ padding: 14px 16px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--cm-crm-muted); font-weight: 600} .cm-crm-flow-anchor{ margin: 0 0 14px; padding: 9px 13px; border: 1px dashed #a8c7fa; border-radius: 8px; background: #f6f9fe; font-size: 12.5px; color: #174ea6} .cm-crm-flow-preview{ border-left: 1px solid var(--cm-crm-border); background: var(--cm-crm-card); padding: 18px 16px; overflow: auto} .cm-crm-flow-preview h4{ margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--cm-crm-muted); font-weight: 600} .cm-crm-flow-reflow{ margin-top: 14px; padding: 10px 12px; border-radius: 8px; background: #fef7e0; color: #7c5000; font-size: 12px} .cm-crm-flow-usage{ margin: 2px 0 0} @media (max-width: 1100px){ .cm-crm-flow-studio{ grid-template-columns: 200px minmax(0, 1fr)} .cm-crm-flow-preview{ grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--cm-crm-border)}} @media (max-width: 900px){ .cm-crm-queue-columns{ grid-template-columns: minmax(0, 1fr)} .cm-crm-queue-rail{ border-left: 0; border-top: 1px solid var(--cm-crm-border)}} html.dark-mode .cm-crm-queue-card, html.dark-mode .cm-crm-queue-rail, html.dark-mode .cm-crm-flow-preview, html.dark-mode .cm-crm-queue-upnext-item{ background: #2a2f3a; border-color: #3c4453} html.dark-mode .cm-crm-flow-anchor{ background: #2f3746; border-color: #4a5568; color: #8ab4f8} .cm-crm-flow-actions{ display: flex; align-items: center; gap: 8px} .cm-crm-step-tools{ display: inline-flex; gap: 2px; margin-left: auto} .cm-crm-step-tools button{ font: inherit; border: 0; background: transparent; color: var(--cm-crm-muted); cursor: pointer; border-radius: 4px; width: 24px; height: 24px; line-height: 1} .cm-crm-step-tools button:hover{ background: rgba(60, 64, 67, 0.08); color: var(--cm-crm-text)} .cm-crm-step-remove:hover{ color: #c5221f} .cm-crm-step-type{ font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--cm-crm-border); border-radius: 4px; background: var(--cm-crm-card); color: var(--cm-crm-text)} .cm-crm-flow-impact{ list-style: none; margin: 10px 0 0; padding: 0; font-size: 11.5px} .cm-crm-flow-impact li{ padding: 4px 0; border-top: 1px solid rgba(124, 80, 0, 0.18)} .cm-crm-flow-new{ width: calc(100% - 32px); margin: 0 16px 6px} .cm-crm-flow-add-step{ margin-top: 8px} .cm-crm-listing-cell{ display: flex; align-items: center; gap: 11px} .cm-crm-listing-thumb{ width: 54px; height: 40px; border-radius: 4px; object-fit: cover; background: linear-gradient(135deg, #cfd8e3, #eef1f6); flex: none} .cm-crm-listing-thumb.is-empty{ display: grid; place-items: center; color: #90a0b4; font-size: 16px} .cm-crm-listing-search{ font: inherit; font-size: 12.5px; padding: 5px 10px; border: 1px solid var(--cm-crm-border); border-radius: 16px; background: var(--cm-crm-card); color: var(--cm-crm-text); min-width: 190px} .cm-crm-listings-head .cm-crm-listing-stage-select{ font-size: 12.5px} .cm-crm-listings-head{ flex-wrap: wrap} .cm-crm-contact-listing{ display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font: inherit; padding: 8px; margin-bottom: 6px; border: 1px solid var(--cm-crm-border); border-radius: 8px; background: var(--cm-crm-card); cursor: pointer} .cm-crm-contact-listing:hover{ background: #f8fafd} .cm-crm-contact-listing-body{ display: grid; gap: 2px; font-size: 12.5px; min-width: 0} .cm-crm-listing-sold{ margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #e6f4ea; color: #137333; font-size: 12px} .cm-crm-listing-sold button{ display: block; margin-top: 8px}