:root {
  --cpp-ink: #10213a;
  --cpp-muted: #6e7f96;
  --cpp-line: #dce7f3;
  --cpp-blue: #1267e8;
  --cpp-navy: #063b8c;
  --cpp-cyan: #10b9d3;
  --cpp-green: #21aa77;
  --cpp-red: #db4b61;
  --cpp-purple: #7657e8;
  --cpp-bg: #f4f8fd;
  --cpp-card: rgba(255, 255, 255, .92);
  --cpp-shadow: 0 24px 60px rgba(34, 79, 130, .12);
}

html.cpp-standalone-document {
  margin: 0 !important;
  min-height: 100%;
  background: var(--cpp-bg);
}

body.cpp-standalone-page {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  color: var(--cpp-ink);
  background: var(--cpp-bg);
}

.cpp-standalone-page .cpp-standalone-root {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

.cpp-app *, .cpp-login-shell * { box-sizing: border-box; }
.cpp-app button, .cpp-app input, .cpp-app textarea, .cpp-login-shell button, .cpp-login-shell input { font: inherit; }
.cpp-app button, .cpp-login-shell button { cursor: pointer; }
.cpp-app button:disabled, .cpp-login-shell button:disabled { cursor: not-allowed; opacity: .55; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.cpp-login-shell {
  position: relative;
  display: grid;
  min-height: min(900px, 100vh);
  place-items: center;
  overflow: hidden;
  padding: 42px 20px;
  color: var(--cpp-ink);
  background:
    linear-gradient(130deg, rgba(255,255,255,.98), rgba(237,247,255,.93)),
    radial-gradient(circle at 10% 10%, #c6efff, transparent 30%);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cpp-login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image: linear-gradient(rgba(21,112,221,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(21,112,221,.08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

.cpp-login-glow { position: absolute; border-radius: 50%; filter: blur(6px); }
.cpp-login-glow-one { width: 420px; height: 420px; top: -160px; right: -90px; background: radial-gradient(circle, rgba(21,190,216,.28), transparent 67%); }
.cpp-login-glow-two { width: 500px; height: 500px; bottom: -260px; left: -170px; background: radial-gradient(circle, rgba(29,107,236,.23), transparent 66%); }

.cpp-login-card {
  position: relative;
  z-index: 2;
  width: min(100%, 510px);
  padding: 52px;
  border: 1px solid rgba(190,214,240,.75);
  border-radius: 32px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 35px 90px rgba(26,85,145,.18);
  backdrop-filter: blur(24px);
}

.cpp-brand-mark { position: relative; width: 66px; height: 55px; margin-bottom: 26px; }
.cpp-brand-mark span { position: absolute; width: 29px; height: 29px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 7px 20px rgba(5,84,181,.2); }
.cpp-brand-mark span:nth-child(1) { left: 0; top: 15px; background: linear-gradient(135deg, #0f63e9, #1642ad); }
.cpp-brand-mark span:nth-child(2) { left: 26px; top: 0; background: linear-gradient(135deg, #0ebed6, #147ade); }
.cpp-brand-mark span:nth-child(3) { left: 35px; top: 28px; background: linear-gradient(135deg, #32d3b4, #1090c9); }

.cpp-eyebrow { margin: 0 0 10px; color: var(--cpp-blue); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.cpp-login-card h1 { max-width: 400px; margin: 0; color: #0d284a; font-size: clamp(32px, 5vw, 43px); line-height: 1.06; letter-spacing: -.045em; }
.cpp-login-copy { margin: 18px 0 32px; color: var(--cpp-muted); font-size: 15px; line-height: 1.7; }
.cpp-login-form > label:not(.cpp-remember) { display: block; margin: 18px 0 8px; color: #314963; font-size: 13px; font-weight: 700; }
.cpp-input-wrap { position: relative; display: flex; align-items: center; }
.cpp-input-wrap svg { position: absolute; left: 16px; width: 20px; fill: none; stroke: #7d91aa; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.cpp-input-wrap input { width: 100%; height: 54px; padding: 0 54px 0 48px; color: var(--cpp-ink); border: 1px solid #d5e1ee; border-radius: 15px; outline: none; background: rgba(247,250,254,.96); transition: border .2s, box-shadow .2s, background .2s; }
.cpp-input-wrap input:focus { border-color: #78aef4; background: #fff; box-shadow: 0 0 0 4px rgba(22,104,232,.1); }
.cpp-password-toggle { position: absolute; right: 10px; padding: 8px; color: var(--cpp-blue); border: 0; background: transparent; font-size: 12px !important; font-weight: 700; }
.cpp-remember { display: flex; align-items: center; gap: 8px; margin: 16px 0 22px; color: var(--cpp-muted); font-size: 13px; }
.cpp-remember input { accent-color: var(--cpp-blue); }
.cpp-login-button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; padding: 0 20px; color: #fff; border: 0; border-radius: 16px; background: linear-gradient(100deg, #0a55cb, #1184ea 62%, #10b7d0); box-shadow: 0 15px 35px rgba(16,103,222,.25); font-weight: 800; transition: transform .2s, box-shadow .2s; }
.cpp-login-button:hover { transform: translateY(-2px); box-shadow: 0 18px 42px rgba(16,103,222,.33); }
.cpp-login-button.is-loading span:first-child::after { content: "…"; }
.cpp-login-message { min-height: 20px; margin: 12px 0 0; font-size: 13px; }
.cpp-login-message.is-error { color: var(--cpp-red); }
.cpp-login-message.is-success { color: var(--cpp-green); }
.cpp-security-note { margin: 28px 0 0; color: #8191a5; text-align: center; font-size: 11px; }
.cpp-security-note span { margin-right: 5px; color: var(--cpp-green); }
.cpp-login-redirect, .cpp-access-required { max-width: 600px; margin: 50px auto; padding: 40px; border: 1px solid var(--cpp-line); border-radius: 24px; background: #fff; text-align: center; box-shadow: var(--cpp-shadow); }
.cpp-primary-link, .cpp-access-required a { display: inline-block; margin-top: 15px; padding: 12px 22px; color: #fff; border-radius: 12px; background: var(--cpp-blue); text-decoration: none; }

.cpp-app {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  color: var(--cpp-ink);
  background: var(--cpp-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cpp-topbar { position: sticky; z-index: 100; top: 0; display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 12px clamp(20px, 4vw, 72px); border-bottom: 1px solid #dce7f3; background: rgba(255,255,255,.92); box-shadow: 0 5px 24px rgba(34,79,130,.04); backdrop-filter: blur(18px); }
body.admin-bar .cpp-topbar { top: 32px; }
.cpp-brand, .cpp-profile, .cpp-top-actions, .cpp-aircall-pill { display: flex; align-items: center; }
.cpp-brand { gap: 11px; }
.cpp-brand-mark-small { width: 42px; height: 37px; margin: 0; transform: scale(.64); transform-origin: left center; margin-right: -13px; }
.cpp-brand strong, .cpp-brand small, .cpp-profile strong, .cpp-profile small { display: block; }
.cpp-brand strong { font-size: 16px; letter-spacing: -.02em; }
.cpp-brand small { margin-top: -2px; color: var(--cpp-blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cpp-top-actions { gap: 18px; }
.cpp-aircall-pill { gap: 8px; padding: 8px 12px; color: #8a5e20; border: 1px solid #f1d8ac; border-radius: 999px; background: #fff9ee; font-size: 11px; font-weight: 800; }
.cpp-dot { width: 8px; height: 8px; border-radius: 50%; background: #f3a932; box-shadow: 0 0 0 4px rgba(243,169,50,.13); }
.is-aircall-ready .cpp-aircall-pill { color: #177958; border-color: #bce9d7; background: #effcf7; }
.is-aircall-ready .cpp-dot { background: #28b882; box-shadow: 0 0 0 4px rgba(40,184,130,.13); }
.cpp-profile { gap: 10px; padding-left: 18px; border-left: 1px solid var(--cpp-line); }
.cpp-profile img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #e8f2ff; }
.cpp-profile strong { font-size: 12px; }
.cpp-profile small { color: var(--cpp-muted); font-size: 10px; }
.cpp-logout { padding: 8px 0; color: #75869b; border: 0; background: transparent; font-size: 12px; font-weight: 700; text-decoration: none; }
.cpp-logout:hover { color: var(--cpp-red); }

.cpp-main { width: min(1680px, calc(100% - clamp(32px, 6vw, 112px))); margin: 0 auto; padding: clamp(32px, 4vw, 56px) 0 70px; }
.cpp-command-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.cpp-command-bar h1 { margin: 0; color: #102846; font-size: clamp(27px, 3vw, 39px); letter-spacing: -.04em; }
.cpp-command-bar > div > p:last-child { margin: 8px 0 0; color: var(--cpp-muted); font-size: 14px; }
.cpp-work-toggle { display: flex; align-items: center; gap: 11px; min-width: 160px; padding: 13px 18px; color: #fff; border: 0; border-radius: 14px; background: linear-gradient(110deg, #0f5ad2, #1198dd); box-shadow: 0 12px 28px rgba(17,101,216,.22); font-size: 13px; font-weight: 800; }
.cpp-toggle-dot { width: 10px; height: 10px; border: 2px solid rgba(255,255,255,.8); border-radius: 50%; background: transparent; }
.cpp-work-toggle.is-active { color: #1d765a; border: 1px solid #bde8d8; background: #effcf7; box-shadow: none; }
.cpp-work-toggle.is-active .cpp-toggle-dot { border-color: #26aa7d; background: #26aa7d; box-shadow: 0 0 0 4px rgba(38,170,125,.13); }

.cpp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.cpp-stats article { display: flex; align-items: center; gap: 13px; min-height: 90px; padding: 18px; border: 1px solid rgba(210,225,240,.9); border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: 0 8px 26px rgba(52,93,136,.055); }
.cpp-stat-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; font-weight: 900; }
.cpp-stat-blue { color: #1463df; background: #e8f1ff; }
.cpp-stat-green { color: #159a6a; background: #e7f8f1; }
.cpp-stat-purple { color: #6d4be2; background: #f0ecff; }
.cpp-stat-cyan { color: #108da9; background: #e6f8fb; }
.cpp-stats small, .cpp-stats strong { display: block; }
.cpp-stats small { margin-bottom: 3px; color: var(--cpp-muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cpp-stats strong { color: #17304f; font-size: 23px; line-height: 1; }

.cpp-dialer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(370px, .75fr); gap: 18px; }
.cpp-lead-panel, .cpp-disposition-panel { min-height: 570px; padding: 28px; border: 1px solid rgba(207,223,240,.9); border-radius: 24px; background: var(--cpp-card); box-shadow: var(--cpp-shadow); }
.cpp-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid #e5edf6; }
.cpp-panel-heading h2 { margin: 0; color: #152d4b; font-size: 22px; letter-spacing: -.025em; }
.cpp-source-badge, .cpp-required { padding: 7px 10px; color: #13729d; border: 1px solid #c0e7f2; border-radius: 999px; background: #ecfbfe; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.cpp-required { color: #8a6c2b; border-color: #f0dba8; background: #fff9e9; }

.cpp-empty-state { display: grid; min-height: 440px; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.cpp-empty-orbit { position: relative; display: grid; width: 96px; height: 96px; margin-bottom: 22px; place-items: center; border: 1px dashed #9ac7ef; border-radius: 50%; background: #f4faff; }
.cpp-empty-orbit::before, .cpp-empty-orbit::after { content: ""; position: absolute; border-radius: 50%; background: var(--cpp-cyan); box-shadow: 0 5px 12px rgba(16,185,211,.28); }
.cpp-empty-orbit::before { width: 12px; height: 12px; top: 2px; right: 16px; }
.cpp-empty-orbit::after { width: 8px; height: 8px; left: 5px; bottom: 20px; background: var(--cpp-blue); }
.cpp-empty-orbit span { display: grid; width: 57px; height: 57px; place-items: center; color: #fff; border-radius: 19px; background: linear-gradient(135deg, #0d5dda, #10bad2); font-size: 25px; box-shadow: 0 15px 30px rgba(13,93,218,.22); }
.cpp-empty-state h3 { margin: 0; color: #203955; font-size: 20px; }
.cpp-empty-state p { max-width: 340px; margin: 9px 0 0; color: var(--cpp-muted); font-size: 13px; line-height: 1.6; }

.cpp-lead-content { padding-top: 22px; }
.cpp-contact-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 17px; border: 1px solid #dce8f4; border-radius: 18px; background: linear-gradient(120deg, #f9fcff, #f1f8ff); }
.cpp-contact-avatar { display: grid; width: 56px; height: 56px; place-items: center; color: #fff; border-radius: 18px; background: linear-gradient(135deg, #0d60df, #13accd); box-shadow: 0 10px 24px rgba(13,96,223,.2); font-size: 17px; font-weight: 900; }
.cpp-contact-card small, .cpp-contact-card strong, .cpp-contact-card div span { display: block; }
.cpp-contact-card small { color: var(--cpp-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.cpp-contact-card strong { color: #142e50; font-size: 19px; }
.cpp-contact-card div span { margin-top: 2px; color: var(--cpp-muted); font-size: 12px; }
.cpp-attempts { align-self: start; padding: 6px 9px; color: #6e5ca5; border-radius: 9px; background: #f1edff; font-size: 10px; font-weight: 800; }
.cpp-extra-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cpp-extra-fields:empty { display: none; }
.cpp-extra-fields div { padding: 12px 14px; border: 1px solid #e0eaf4; border-radius: 13px; background: #fbfdff; }
.cpp-extra-fields small, .cpp-extra-fields strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpp-extra-fields small { margin-bottom: 2px; color: var(--cpp-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.cpp-extra-fields strong { color: #344d68; font-size: 12px; }
.cpp-call-zone { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 20px; border: 1px solid #d8e7f4; border-radius: 18px; background: #f8fbff; }
.cpp-call-status { display: flex; align-items: center; gap: 12px; }
.cpp-call-status > span { width: 12px; height: 12px; border-radius: 50%; background: #91a0b2; }
.cpp-call-status > span.is-ready { background: #1eb280; box-shadow: 0 0 0 5px rgba(30,178,128,.12); }
.cpp-call-status > span.is-loading { background: #e2a932; box-shadow: 0 0 0 5px rgba(226,169,50,.12); animation: cpp-pulse 1s infinite; }
.cpp-call-status > span.is-active { background: var(--cpp-blue); box-shadow: 0 0 0 5px rgba(18,103,232,.12); animation: cpp-pulse 1.25s infinite; }
.cpp-call-status > span.is-error { background: var(--cpp-red); box-shadow: 0 0 0 5px rgba(219,75,97,.12); }
.cpp-call-status small, .cpp-call-status strong { display: block; }
.cpp-call-status small { color: var(--cpp-muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.cpp-call-status strong { margin-top: 2px; color: #263f5d; font-size: 13px; }
.cpp-call-button { display: flex; align-items: center; gap: 8px; padding: 13px 17px; color: #fff; border: 0; border-radius: 13px; background: linear-gradient(105deg, #0a5bd5, #0fa7db); box-shadow: 0 10px 25px rgba(10,91,213,.22); font-size: 12px; font-weight: 800; }

.cpp-disposition-panel form { padding-top: 18px; }
.cpp-disposition-panel fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; border: 0; }
.cpp-disposition-option { position: relative; display: flex; align-items: center; gap: 9px; min-height: 50px; padding: 10px; color: #496078; border: 1px solid #dce7f2; border-radius: 13px; background: #fbfdff; cursor: pointer; transition: transform .15s, border-color .15s, background .15s; }
.cpp-disposition-option:hover { transform: translateY(-1px); border-color: #a9c9ec; }
.cpp-disposition-option input { position: absolute; opacity: 0; pointer-events: none; }
.cpp-disposition-option span { display: grid; flex: 0 0 auto; width: 27px; height: 27px; place-items: center; color: #52708f; border-radius: 9px; background: #edf3fa; font-size: 13px; font-weight: 900; }
.cpp-disposition-option strong { font-size: 11px; line-height: 1.2; }
.cpp-disposition-option:has(input:checked) { color: #0758c7; border-color: #6ba6ec; background: #f0f7ff; box-shadow: 0 0 0 3px rgba(18,103,232,.07); }
.cpp-disposition-option:has(input:checked) span { color: #fff; background: var(--cpp-blue); }
.cpp-follow-up-wrap { margin-top: 14px; }
.cpp-disposition-panel form > label, .cpp-follow-up-wrap label, .cpp-rating-wrap label { display: block; margin: 16px 0 7px; color: #384f68; font-size: 11px; font-weight: 800; }
.cpp-follow-up-wrap input, .cpp-disposition-panel textarea { width: 100%; color: #243c58; border: 1px solid #d9e5f1; border-radius: 13px; outline: none; background: #fafdff; }
.cpp-follow-up-wrap input { height: 44px; padding: 0 12px; }
.cpp-disposition-panel textarea { resize: vertical; min-height: 83px; padding: 12px; line-height: 1.5; }
.cpp-follow-up-wrap input:focus, .cpp-disposition-panel textarea:focus { border-color: #72a9ea; box-shadow: 0 0 0 3px rgba(18,103,232,.08); }
.cpp-rating-wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 13px; padding: 11px 13px; border: 1px solid #e0eaf4; border-radius: 13px; background: #fbfdff; }
.cpp-rating-wrap label { margin: 0; }
.cpp-rating-wrap small { display: block; color: var(--cpp-muted); font-size: 9px; }
.cpp-rating { display: flex; flex-direction: row; gap: 1px; }
.cpp-rating button { padding: 2px; color: #d3dce7; border: 0; background: transparent; font-size: 22px; line-height: 1; }
.cpp-rating button.is-selected { color: #f2b539; text-shadow: 0 3px 9px rgba(242,181,57,.26); }
.cpp-save-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; margin-top: 16px; padding: 0 16px; color: #fff; border: 0; border-radius: 13px; background: linear-gradient(105deg, #0c5bd2, #0f91de); font-size: 12px; font-weight: 800; }
.cpp-form-message { min-height: 18px; margin: 8px 0 0; color: var(--cpp-red); font-size: 11px; }

.cpp-countdown { position: fixed; z-index: 10010; inset: 0; display: grid; place-items: center; background: rgba(9,29,54,.46); backdrop-filter: blur(8px); }
.cpp-countdown[hidden] { display: none; }
.cpp-countdown > div { width: min(90%, 350px); padding: 34px; border: 1px solid rgba(255,255,255,.6); border-radius: 28px; background: rgba(255,255,255,.95); text-align: center; box-shadow: 0 35px 90px rgba(5,35,72,.25); }
.cpp-countdown span { display: grid; width: 92px; height: 92px; margin: 0 auto; place-items: center; color: #fff; border-radius: 50%; background: linear-gradient(135deg, #0b5fd9, #14b9ce); box-shadow: 0 18px 40px rgba(11,95,217,.28); font-size: 39px; font-weight: 900; }
.cpp-countdown p { margin: 20px 0 15px; color: #304861; font-weight: 800; }
.cpp-countdown button { color: var(--cpp-red); border: 0; background: transparent; font-size: 12px; font-weight: 800; }
.cpp-toast { position: fixed; z-index: 10020; right: 24px; bottom: 24px; max-width: min(390px, calc(100vw - 48px)); padding: 14px 18px; color: #fff; border-radius: 13px; background: #203c5f; box-shadow: 0 18px 45px rgba(17,42,72,.25); opacity: 0; transform: translateY(15px); pointer-events: none; transition: opacity .25s, transform .25s; font-size: 12px; font-weight: 700; }
.cpp-toast.is-visible { opacity: 1; transform: translateY(0); }
.cpp-toast.is-error { background: #b93b52; }
.cpp-toast.is-success { background: #16835e; }

@keyframes cpp-pulse { 50% { transform: scale(.75); opacity: .55; } }

@media (max-width: 1050px) {
  .cpp-dialer-grid { grid-template-columns: 1fr; }
  .cpp-lead-panel, .cpp-disposition-panel { min-height: auto; }
  .cpp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .cpp-login-card { padding: 34px 24px; border-radius: 24px; }
  .cpp-topbar { align-items: flex-start; padding: 14px 18px; }
  .cpp-aircall-pill, .cpp-profile div { display: none; }
  .cpp-top-actions { gap: 10px; }
  .cpp-profile { padding-left: 0; border: 0; }
  .cpp-main { width: calc(100% - 24px); padding-top: 28px; }
  .cpp-command-bar { align-items: flex-start; flex-direction: column; gap: 18px; }
  .cpp-work-toggle { width: 100%; justify-content: center; }
  .cpp-stats { gap: 9px; }
  .cpp-stats article { min-height: 76px; padding: 12px; }
  .cpp-stat-icon { width: 35px; height: 35px; }
  .cpp-stats strong { font-size: 19px; }
  .cpp-lead-panel, .cpp-disposition-panel { padding: 19px; border-radius: 19px; }
  .cpp-panel-heading h2 { font-size: 19px; }
  .cpp-contact-card { grid-template-columns: auto 1fr; }
  .cpp-attempts { grid-column: 2; }
  .cpp-call-zone { align-items: stretch; flex-direction: column; }
  .cpp-call-button { justify-content: center; }
  .cpp-disposition-panel fieldset { grid-template-columns: 1fr; }
  .cpp-rating-wrap { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-width: 782px) {
  body.admin-bar .cpp-topbar { top: 46px; }
}