@font-face {
  font-family: "Optimistic Ads";
  src: url("/fonts/Optimistic-Regularaa.woff2?v=5d1bc9b443f3") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Optimistic Ads";
  src: url("/fonts/Optimistic-Mediumaa.woff2?v=0d9fd7ccabde") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: block;
}

@font-face {
  font-family: "Optimistic Ads";
  src: url("/fonts/Optimistic-Boldaa.woff2?v=0dce730051c3") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: block;
}

:root {
  --font: "Roboto", "Segoe UI", Arial, system-ui, sans-serif;
  --ads-font-family: "Roboto", "Segoe UI", Arial, system-ui, sans-serif;
  --ads-text-primary: #1c2b33;
  --ads-text-heading: #111827;
  --ads-text-secondary: rgba(0, 0, 0, 0.5490196078);
  --ads-text-muted: #ccc;
  --ads-link: #1461cc;
  --ads-blue: #0a78be;
  --ads-blue-hover: #08659e;
  --ads-border: #cad1d8;
  --ads-border-strong: #d3cccf;
  --ads-border-panel: #d3d3d3;
  --ads-control-border: #aeb8c2;
  --ads-header-bg: linear-gradient(90deg, #F7F0F4 0%, #F2EEF6 42%, #EDF1F8 72%, #EAF2FA 100%);
  --ads-main-bg: radial-gradient(103.89% 81.75% at 95.41% 106.34%, #EAF8EF 6%, rgba(234, 248, 239, 0) 79.68%), radial-gradient(297.85% 151.83% at -21.39% 8.81%, #FAF1F1 0%, #FAF1F1 15.29%, #F3EDF5 21.39%, #E5F0FA 40.79%);
  --ads-control-region-bg: #f1f4f8;
  --ads-filter-bg: var(--ads-control-region-bg);
  --ads-search-bg: #FFFFFF;
  --main-tab-width: 232px;
  --tab-campaign-base-width: 245px;
  --tab-adset-base-width: 265px;
  --tab-ads-base-width: 245px;
  --mock-tab-height: 42px;
  --mock-tab-active-height: 45px;
  --mock-tab-gap: 7px;
  --mock-tab-border: #E0E4E8;
  --ads-panel-bg: #fff;
  --ads-data-row-alt-bg: #f5f6f7;
  --ads-tab-strip-bg: var(--ads-control-region-bg);
  --ads-tab-active-bg: #fff;
  --ads-tab-inactive-bg: var(--ads-tab-strip-bg);
  --ads-row-selected-bg: #eef4ff;
  --ads-filter-hover-bg: #c3dcf5;
  --ads-more-hover-bg: #dcd8de;
  --ads-toolbar-hover-bg: #f2f2f2;
  --text: #1c2b33;
  --muted: #64748b;
  --subtle: #6b7280;
  --review-publish-muted-text: #6f7b8b;
  --view-control-border: #AEBBC8;
  --view-control-border-hover: #A4B2C0;
  --blue: #0a78be;
  --active-blue: #1877f2;
  --link: #1461cc;
  --border: #b8c4d0;
  --border-light: #cbd5e1;
  --rail-border: #d5dde6;
  --rail-active: #e1edf7;
  --header-bg: #fbf6fb;
  --panel-bg: #f5f8fa;
  --hover: #eef3f7;
  --green: #006b4e;
  --money: #00a46b;
  --status: #007c64;
  --badge: #a20c17;
  --right-rail: #142f3b;
  --right-rail-hover: #203f4d;
  --right-rail-icon: #b6c4cf;
  --selected: #eaf3ff;
  --left-rail-width: 56px;
  --left-rail-gap: 4px;
  --right-rail-width: 44px;
  --right-rail-gap: 4px;
  --page-scrollbar-width: 15px;
  --page-scrollbar-thumb-color: #888;
  --mock-footer-strip-height: 33px;
  --mock-footer-strip-gap: 5px;
  /* The default SVG renders at 130px naturally; the previous rendered size was
     105px after the loader script applied its one-off 25px reduction. Keep the
     resulting target declarative: 90px + 7px = 97px. */
  --loading-logo-rendered-width: 97px;
  --top-content-nudge-left: -3px;
  --table-frame-nudge-right: 2px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  height: 100%;
  min-height: 100%;
  font-family: var(--font);
  color: var(--text);
  background: var(--ads-main-bg);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* The browser's root thumb has no stable, author-controlled length.  While the
   picker is open, reserve its gutter for the synchronized custom thumb below. */
html.date-range-popup-open {
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}
html.date-range-popup-open body { overflow: visible; }
html.date-range-popup-open::-webkit-scrollbar { width: 0; height: 0; }
.page-scrollbar {
  position: fixed;
  /* Keep the full-height page rail above the fixed footer strip (33), while
     leaving the open date picker and its SMiT control above it. */
  z-index: 34;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--page-scrollbar-width);
  background: #FFFFFF;
}
.page-scrollbar[hidden] { display: none; }
.page-scrollbar-button {
  position: absolute;
  left: 0;
  width: 100%;
  /* Match the picker rail's 16px arrow buttons, without reducing the thumb rail. */
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: #FFFFFF;
  color: var(--page-scrollbar-thumb-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.page-scrollbar-button--up { top: 0; }
.page-scrollbar-button--down { bottom: 0; }
.page-scrollbar-arrow { display: block; width: 12px; height: 9px; }
.page-scrollbar-button:hover { background: #FFFFFF; color: #555; }
.page-scrollbar-button:active { background: #FFFFFF; }
.page-scrollbar-thumb {
  position: absolute;
  top: 0;
  /* Keep this 3px narrower than the 15px rail, centered in that rail. */
  left: 1.5px;
  width: calc(100% - 3px);
  min-height: 0;
  background: var(--page-scrollbar-thumb-color);
  border: 2px solid #FFFFFF;
  border-radius: 10px;
  cursor: grab;
  touch-action: none;
}
.page-scrollbar-thumb:hover { background: #555; }
.page-scrollbar-thumb.is-dragging { cursor: grabbing; }

button,
input { font: inherit; }
button { cursor: pointer; }
body.is-loading { overflow: hidden; }

body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--mock-footer-strip-height);
  z-index: 33;
  pointer-events: none;
  background: #edf5fb;
  border-top: 1px solid var(--rail-border);
  box-sizing: border-box;
}

.loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: #EDEFF2;
  transition: opacity .15s ease;
}
.loading.hide { opacity: 0; pointer-events: none; }
.loading-card { width: 100%; min-height: 100%; display: flex; flex-direction: column; align-items: center; padding: 0 24px 41px; box-sizing: border-box; text-align: center; }
.load-logo { margin-top: auto; display: grid; place-items: center; min-height: 42px; }
.load-logo img { display: block; width: min(var(--loading-logo-rendered-width), calc(52vw - 6px)); max-width: none; height: auto; max-height: none; object-fit: contain; }
.loading-progress { display: flex; flex-direction: column; align-items: center; margin-top: calc(50vh - 88px); }
.spinner {
  width: 28px;
  height: 28px;
  /* Keep the reduced circle centred in the existing 26px flex footprint. */
  margin: -1px 0;
  border-radius: 50%;
  background: conic-gradient(var(--spinner-color) 0deg 124.2deg, #e2e7ec 124.2deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: spin .576s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-status { width: min(440px, 100%); min-height: 20px; margin: 12px 0 0; color: #1c2b33; font-size: 18px; font-weight: 400; line-height: 20px; white-space: nowrap; transform: translateY(10px); }
.loading-status.is-changing { animation: loading-status-fade 100ms ease-in-out 1; }
@keyframes loading-status-fade { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.data-loading-overlay { position: fixed; inset: 0; z-index: 101; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgb(0 0 0 / .58); opacity: 1; transition: opacity 200ms ease; }
.data-loading-overlay[hidden] { display: none; }
.data-loading-overlay.is-hiding { opacity: 0; pointer-events: none; }
.data-loading-dialog { position: relative; top: max(-100px, calc(52.5px - 50vh)); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(650px, calc(100vw - 40px)); height: 115px; border-radius: 3px; background: #fff; box-shadow: 0 4px 14px rgb(0 0 0 / .2); }
.data-loading-dialog p { margin: 0; color: #1c2b33; font-size: 20px; font-weight: 600; line-height: 24px; white-space: nowrap; }
.data-loading-spinner {
  width: 28px;
  height: 28px;
  margin-top: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 3.57%, var(--blue, #0A78BE) 0 1px, transparent 1.1px),
    radial-gradient(circle at 22.71% 87.56%, var(--blue, #0A78BE) 0 1px, transparent 1.1px),
    conic-gradient(var(--blue, #0A78BE) 0deg 216deg, #e2e7ec 216deg 360deg);
  /* The previous 3px ring is reduced by exactly 1px without changing its outer diameter. */
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: modal-spinner-natural-rotation 720ms linear infinite;
}

@keyframes modal-spinner-natural-rotation {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.35, 0, .55, 1); }
  18% { transform: rotate(72deg); animation-timing-function: cubic-bezier(.25, .1, .5, 1); }
  38% { transform: rotate(160deg); animation-timing-function: cubic-bezier(.4, 0, .65, .9); }
  58% { transform: rotate(225deg); animation-timing-function: cubic-bezier(.25, .15, .5, 1); }
  76% { transform: rotate(305deg); animation-timing-function: cubic-bezier(.35, 0, .7, .9); }
  84% { transform: rotate(330deg); animation-timing-function: linear; }
  91% { transform: rotate(330deg); animation-timing-function: cubic-bezier(.2, 0, .45, 1); }
  100% { transform: rotate(360deg); }
}

/* These groups remain in the document flow; only their paint opacity changes. */
body.is-data-revealing .loading-reveal { opacity: .05; animation: dashboard-reveal 600ms ease-out forwards; }
body.is-data-revealing .loading-reveal--phase-1 { animation-delay: 0ms; animation-duration: 500ms; }
body.is-data-revealing .loading-reveal--phase-2 { animation-delay: 400ms; animation-duration: 600ms; }
body.is-data-revealing .loading-reveal--phase-3 { animation-delay: 800ms; animation-duration: 650ms; }
body.is-data-revealing .loading-reveal--phase-4 { animation-delay: 1200ms; animation-duration: 650ms; }
body.is-data-revealing .loading-reveal--phase-5 { animation-delay: 1700ms; animation-duration: 700ms; }
@keyframes dashboard-reveal { to { opacity: 1; } }

/* Refresh keeps the table geometry intact: every data cell paints its own
   proportionate skeleton inside its existing padded content box. */
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:not(.check) {
  --refresh-skeleton-width: 80%;
}
.refresh-cell-content { display: contents; }
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:not(.check) > .refresh-cell-content { display: none; }
.refresh-skeleton-wrapper {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:not(.check) > .refresh-skeleton-wrapper { display: flex; }
.refresh-skeleton {
  box-sizing: border-box;
  width: var(--refresh-skeleton-width);
  max-width: 100%;
  height: 5px;
  transform: translateY(3px);
  border-radius: 4px;
  /* A deliberately low-contrast shimmer stays visible on selected rows. */
  background-color: #f2f4f5;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.20) 52%, rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, 0) 100%);
  background-size: 220% 100%;
  animation: table-skeleton 1.1s ease-in-out infinite;
}
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(2) { --refresh-skeleton-width: 44%; }
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(3) { --refresh-skeleton-width: 88%; }
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(4),
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(5) { --refresh-skeleton-width: 74%; }
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(6),
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(7),
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(8) { --refresh-skeleton-width: 80%; }
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(9),
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(10),
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(11),
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(12) { --refresh-skeleton-width: 78%; }
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(13) { --refresh-skeleton-width: 72%; }
.table-wrap.is-refreshing .ads-table tbody tr:not(.result-summary-row) td:nth-child(14) { --refresh-skeleton-width: 76%; }
.header-refresh-btn { transition: opacity 125ms ease; }
.header-actions .header-refresh-btn { margin-left: auto; }
.header-refresh-btn:disabled,
.header-refresh-btn.is-refreshing {
  cursor: not-allowed;
  opacity: .5;
  pointer-events: none;
}
.header-refresh-btn.is-refreshing svg,
.header-refresh-btn.is-refreshing img { animation: none; }
.header-actions .update.is-refreshing {
  opacity: 0;
  visibility: hidden;
  animation: none;
}
@keyframes date-update-flash {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}
.header-actions .update.date-update-flash:not(.is-refreshing) { animation: date-update-flash 1000ms ease-in-out 1; }
@keyframes table-skeleton { to { background-position: -220% 0; } }

.mock-icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.left-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--left-rail-width);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0;
  background: #fff;
  border-right: 1px solid var(--rail-border);
}
.rail-stack { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rail-main { flex: 1; }
.rail-bottom { gap: 0; padding-bottom: 28px; transform: translateY(-2px); }
.rail-bottom .rail-btn + .rail-btn { margin-top: -3px; }
.rail-bottom .rail-btn[data-rail-label="Báo lỗi"] { transform: translateY(-2px); }
.rail-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--text);
  border: 0;
  border-radius: 4px;
  background: transparent;
}
.rail-btn:hover,
.rail-btn.active {
  color: var(--blue) !important;
  background: var(--rail-active);
}
.rail-btn svg,
.rail-btn img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}
.rail-btn .rail-managed-icon {
  width: var(--rail-managed-icon-size);
  height: var(--rail-managed-icon-size);
  min-width: var(--rail-managed-icon-size);
  min-height: var(--rail-managed-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--rail-managed-icon-size);
}
.rail-btn .rail-managed-icon > img,
.rail-btn .rail-managed-icon > svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.rail-notification { margin-top: 20px; }
.rail-meta {
  height: 48px;
  color: #0866ff !important;
  background: transparent !important;
}
.rail-meta svg,
.rail-meta img { width: 32px; height: 32px; }
.rail-meta .rail-managed-icon > svg,
.rail-meta .rail-managed-icon > img { width: 100%; height: 100%; }
.rail-divider {
  display: block;
  width: calc(100% - 16px);
  height: 1px;
  margin: 7px auto;
  background: var(--rail-border);
}
.left-rail .rail-main .rail-divider {
  margin: 14px auto 0;
  background-color: #B8C4D0;
}
.left-rail .rail-main .rail-divider + .rail-btn { margin-top: 14px; }
.rail-bottom > .rail-divider { width: calc(100% - 22px); }
.rail-help { margin-top: 4px; color: #23736d; background: #dcf5ef; border-radius: 50%; width: 35px; height: 35px; transform: translateY(-2px); }
.rail-badge {
  position: absolute;
  top: 1px;
  right: 2px;
  min-width: 24px;
  height: 22px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 11px;
  background: var(--badge);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
}

.right-toolbar {
  display: flex;
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 31;
  width: var(--right-rail-width);
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
  background: var(--right-rail);
}
.right-rail-top-icons {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.right-toolbar button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #dce6ee;
  background: transparent;
}
.right-toolbar button:hover { background: var(--right-rail-hover); color: #fff; }
.right-toolbar svg {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}
.right-rail-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 17px;
  width: 17px;
  min-width: 17px;
  max-width: 17px;
  height: 17px;
  min-height: 17px;
  max-height: 17px;
  overflow: hidden;
  line-height: 0;
}
.right-rail-icon-slot > svg {
  width: 17px;
  height: 17px;
}
.configured-right-rail-icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

.app-shell {
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin-left: calc(var(--left-rail-width) + var(--left-rail-gap));
  margin-right: calc(var(--right-rail-width) + var(--right-rail-gap));
  min-width: 1180px;
  padding-bottom: calc(var(--mock-footer-strip-height) + var(--mock-footer-strip-gap));
  overflow: hidden;
  box-sizing: border-box;
  background: #edf5fb;
  border-bottom: 1px solid var(--ads-border-panel);
}
/* Give the root scrollbar a real document range without adding a separate
   scrollbar to the fixed date-range dialog or the right-hand rail. */
html.date-range-popup-open .app-shell {
  height: auto;
  min-height: calc(100vh + 160px);
  margin-right: calc(var(--right-rail-width) + var(--right-rail-gap) + var(--page-scrollbar-width));
}
/* Keep the custom page scrollbar directly beside, never on top of, the fixed rail. */
html.date-range-popup-open .right-toolbar { right: var(--page-scrollbar-width); }

.top-header {
  height: 60px;
  min-height: 60px;
  max-height: 60px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-light);
}
.header-left { flex: 0 0 auto; }
.app-shell .top-header .header-left h1 {
  transform: translateX(-5px);
}
.top-header h1 {
  width: 87.19px;
  margin: 0;
  color: #111827;
  font-size: 22px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.account-selector {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  box-sizing: border-box;
}
.account-btn {
  width: 300px;
  height: 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  text-align: left;
  color: #1c2b33;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 5px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.acct-chip,
.acct-avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: #c084d8;
  color: #5c2576;
  font-weight: 700;
}
.account-btn .acct-chip {
  box-sizing: border-box;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  object-fit: cover;
  border-radius: 4px;
}
.account-btn .acct-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 24px;
  margin: 0 1px;
  background: #d5dde5;
}
.account-btn .acct-secondary-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #1c2b33;
  background: #edf2f7;
  border: 1px solid #d5dee8;
  border-radius: 50%;
}
.account-btn .acct-secondary-icon img,
.account-btn .acct-secondary-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.account-btn .acct-secondary-icon svg { padding: 3px; box-sizing: border-box; }
.account-btn .acct-name {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.account-btn .account-name-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.account-btn .account-name-ellipsis {
  font-size: 15px;
  letter-spacing: 1px;
  line-height: inherit;
  flex: 0 0 auto;
}
.account-btn .acct-id {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.account-btn .acct-dropdown-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  color: #465a69;
}
.account-btn .acct-dropdown-icon:not(.dropdown-icon-slot) img,
.account-btn .acct-dropdown-icon:not(.dropdown-icon-slot) svg {
  display: block;
  width: 12px;
  height: 12px;
  object-fit: contain;
}
.account-menu {
  position: absolute;
  top: 46px;
  left: 0;
  z-index: 40;
  display: none;
  width: 380px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 14px 32px #00000024;
}
.account-menu.open { display: block; }
.account-search {
  height: 36px;
  margin-bottom: 6px;
  padding: 7px 10px;
  color: var(--muted);
  border: 1px solid var(--border-light);
  border-radius: 6px;
}
.account-option {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  text-align: left;
  color: var(--text);
  background: #fff;
  border: 0;
  border-radius: 6px;
}
.account-option:hover,
.account-option.selected { background: var(--hover); }
.account-option b { font-weight: 600; }
.account-option small { display: block; color: var(--muted); font-size: 12px; }
.account-option em { color: var(--green); font-size: 12px; font-style: normal; }
.avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #365;
  font-weight: 700;
  background: #f8fafc;
  border: 1px solid var(--border-light);
  border-radius: 50%;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.opportunity-score-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 100%;
  margin: 0 0 0 14px;
  padding: 0;
  color: var(--text);
}
.opportunity-score-indicator {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 33px;
  width: 33px;
  height: 33px;
  min-width: 33px;
  min-height: 33px;
  margin: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
  line-height: 1;
}
.opportunity-score-svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 33px;
  height: 33px;
  aspect-ratio: 1 / 1;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}
.opportunity-score-track,
.opportunity-score-progress {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.opportunity-score-track {
  stroke: #DCE6F0;
  stroke-width: 3;
  stroke-linecap: round;
}
.opportunity-score-progress {
  stroke: #0866FF;
  stroke-width: 3;
  stroke-linecap: round;
}
.opportunity-score-value {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #1C2B33;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  background: transparent;
  box-sizing: border-box;
  pointer-events: none;
}
.opportunity-score-value.is-three-digits { font-size: 10px; }
.opportunity-score-label {
  max-width: 95px;
  color: #1c2b33;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}
.opportunity-score-chevron { color: #283943; }
.opportunity-score-chevron img,
.opportunity-score-chevron svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.update {
  flex: 1;
  min-width: 250px;
  text-align: right;
  color: #0f172a;
  font-size: 15px;
  white-space: nowrap;
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms ease;
}
.update strong { font-weight: 400; }
.draft,
.publish,
.icon-btn {
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: #52616f;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.draft,
.publish { padding: 0 16px; }
.draft { display: none; }
.icon-btn {
  width: 48px;
  display: grid;
  place-items: center;
  padding: 0;
}
.icon-btn svg { width: 22px; height: 22px; color: #1f3344; stroke-width: 2.1; }

.filter-row {
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  overflow: hidden;
  white-space: nowrap;
  background: #f3f6fa;
  border-bottom: 0;
}
.filter-left,
.filter-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.filter-left { overflow: hidden; }
.filter {
  height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 0 14px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 400;
}
.filter:hover,
.action-toolbar button:hover,
.date-range:hover { background: var(--hover); }
.filter.active {
  color: var(--blue);
  border-color: #1592e6;
  background: #fff;
  font-weight: 700;
}
.filter.more { border-color: transparent; background: transparent; color: var(--text); }
.filter-right .filter {
  background: transparent;
}
.filter-right .filter:hover {
  background: var(--hover);
}
.filter.square {
  width: 48px;
  padding: 0;
  justify-content: center;
}
.filter.view-mode { min-width: 158px; justify-content: center; }
.active-dot > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
}
.filter svg,
.filter img,
.action-toolbar svg,
.action-toolbar img,
.tab svg,
.tab img,
.search-box svg,
.search-box img,
.date-range svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  color: currentColor;
}
.filter.active svg,
.filter.active img,
.tab.active svg,
.tab.active img { color: var(--blue); }

.search-row {
  height: 36px;
  padding: 0 10.5px;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}
.search-box {
  height: 36px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 12px;
  color: var(--muted);
  background: #fff;
  border: 0;
  border-radius: 6px;
  outline: 0;
  box-shadow: none;
}
.search-box svg,
.search-box img { display: none; }
.search-box input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0 12px;
  color: var(--text);
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  outline: none;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
}
.search-box input::placeholder { color: var(--muted); font-weight: 400; }

.tabs {
  height: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border-light);
}
.tabs-left {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--mock-tab-gap);
  overflow: hidden;
}
.tab {
  position: relative;
  align-self: flex-end;
  height: var(--mock-tab-height);
  min-width: 0;
  flex: 0 0 auto;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 21px;
  color: var(--text);
  text-decoration: none;
  background: var(--panel-bg);
  border: 0.5px solid var(--mock-tab-border);
  border-bottom-color: var(--mock-tab-border);
  border-radius: 8px 8px 0 0;
  box-shadow: none;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}
.tab.active {
  height: var(--mock-tab-active-height);
  margin-bottom: 0;
  z-index: 2;
  color: var(--blue);
  background: #fff;
  border-color: var(--mock-tab-border);
  border-bottom-color: transparent;
  font-weight: 600;
}
.tab svg,
.tab img { width: 20px; height: 20px; color: currentColor; flex: 0 0 auto; }
.tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaign-tab { flex: 0 0 var(--base-tab-width); width: var(--base-tab-width); min-width: var(--base-tab-width); max-width: var(--base-tab-width); }
.campaign-tab-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 0;
}
.campaign-tab-link {
  min-width: 0;
  height: 100%;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
.campaign-tab-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -3px;
  border-radius: 8px;
}
.campaign-tab.has-selection { flex: 0 0 var(--base-tab-width); width: var(--base-tab-width); min-width: var(--base-tab-width); max-width: var(--base-tab-width); }
.adset-tab { flex: 0 0 var(--base-tab-width); width: var(--base-tab-width); min-width: var(--base-tab-width); max-width: var(--base-tab-width); }
.ads-tab { flex: 0 0 var(--base-tab-width); width: var(--base-tab-width); min-width: var(--base-tab-width); max-width: var(--base-tab-width); }
.adset-tab.has-context { flex: 0 0 auto; width: max-content; min-width: var(--base-tab-width); max-width: none; white-space: nowrap; }
.ads-tab.has-context { flex: 0 0 auto; width: max-content; min-width: var(--base-tab-width); max-width: none; white-space: nowrap; }
.selected-pill {
  height: 28px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  margin-right: 8px;
  /* Reduce the current intrinsic badge width by 3px without changing the campaign tab. */
  padding: 0 8px;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 4px;
  font-size: 13px;
  line-height: 17px;
  font-weight: 500;
  white-space: nowrap;
}
.selected-pill-text {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 17px;
  letter-spacing: 0;
}
.selected-pill button {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  font-size: 0;
  line-height: 14px;
  font-weight: 600;
  position: relative;
}
.selected-pill button::before,
.selected-pill button::after {
  position: absolute;
  width: 12px;
  height: 1.5px;
  content: "";
  background: currentColor;
  border-radius: 1px;
  opacity: 0.85;
}
.selected-pill button::before { transform: rotate(45deg); }
.selected-pill button::after { transform: rotate(-45deg); }
.hidden { display: none !important; }
.tab-row-actions {
  align-self: center;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.date-range {
  height: 36px;
  width: max-content;
  min-width: 245px;
  max-width: min(100%, 520px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  transform: translateY(-5px);
}
.date-range svg:first-child { width: 22px; height: 22px; color: #1f3344; }
.date-range svg:last-child { width: 18px; height: 18px; }
.date-range-calendar-icon-slot {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.date-range .date-range-calendar-icon-slot > svg,
.date-range .date-range-calendar-icon-image {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.date-range-calendar-icon-fallback { display: none; }
.date-range-calendar-icon-slot.is-fallback .date-range-calendar-icon-image { display: none; }
.date-range-calendar-icon-slot.is-fallback .date-range-calendar-icon-fallback { display: grid; width: 18px; height: 18px; place-items: center; }
.date-range .date-range-calendar-icon-fallback > svg { width: 100%; height: 100%; }
.date-range-dropdown-icon-slot {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.date-range .date-range-dropdown-icon-slot > svg,
.date-range .date-range-dropdown-icon-image {
  width: 11px;
  height: 11px;
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.date-range-dropdown-icon-fallback { display: none; }
.date-range-dropdown-icon-slot.is-fallback .date-range-dropdown-icon-image { display: none; }
.date-range-dropdown-icon-slot.is-fallback .date-range-dropdown-icon-fallback { display: grid; width: 11px; height: 11px; place-items: center; }
.date-range .date-range-dropdown-icon-fallback > svg { width: 100%; height: 100%; }
.date-range-label {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  font-family: var(--ads-font-family);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Document-level date range dialog: fixed positioning avoids every table and
   workspace overflow/stacking context without changing the existing trigger. */
.date-range-popup {
  position: fixed;
  z-index: 200;
  width: min(725px, calc(100vw - 11px));
  height: min(541px, calc(100vh - 16px));
  color: #1c2b33;
  background: #fff;
  border: 1px solid #ccd6df;
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
  overflow: hidden;
  font-family: var(--ads-font-family);
  display: flex;
  flex-direction: column;
}
.date-range-popup[hidden] { display: none; }
.drp-body { display: grid; grid-template-columns: 205px minmax(0, 1fr); flex: 1 1 auto; min-height: 0; }
.drp-presets { position: relative; min-width: 0; padding: 16px 0 16px 12px; border-right: 1px solid #e1e7ec; overflow: hidden; }
.drp-presets-scroll { height: 100%; padding-right: 14px; overflow: auto; overscroll-behavior: contain; scrollbar-width: none; }
.drp-presets-scroll::-webkit-scrollbar { display: none; }
.drp-presets-scroll h2 { margin: 0 0 12px; color: #1c2b33; font-family: var(--ads-font-family); font-size: 16px; font-weight: 700; line-height: 22px; }
.drp-presets-scrollbar { position: absolute; top: 8px; right: 3px; bottom: 8px; z-index: 1; width: 12px; display: flex; flex-direction: column; align-items: center; border-radius: 6px; background: #fff; }
.drp-presets-scroll-button { width: 12px; height: 14px; flex: 0 0 14px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: #7f898f; background: transparent; }
.drp-presets-scroll-arrow { display: block; width: 10px; height: 7px; }
.drp-presets-scroll-button:hover { color: #667685; background: #eef1f4; }
.drp-presets-scroll-track { position: relative; width: 10px; flex: 1 1 auto; margin: 2px 0; border-radius: 5px; background: #fff; }
.drp-presets-scroll-thumb { position: absolute; top: 0; right: 0; left: 0; min-height: 24px; border-radius: 5px; background: #7f898f; cursor: grab; touch-action: none; }
.drp-presets-scroll-thumb:hover, .drp-presets-scroll-thumb:active { background: #667685; }
.drp-presets-scroll-thumb:active { cursor: grabbing; }
.drp-recent { padding-bottom: 12px; margin-bottom: 10px; border-bottom: 1px solid #e6ebef; }
.drp-preset-list, .drp-recent { display: grid; gap: 3px; }
/* Scope the larger preset controls to the picker's left column only. */
.drp-presets-scroll > .drp-recent > .drp-preset, .drp-presets-scroll > .drp-preset-list > .drp-preset { display: flex; align-items: center; gap: 10px; min-height: 29px; padding: 2px 6px; border: 0; border-radius: 4px; color: #1c2b33; background: transparent; font-family: var(--ads-font-family); font-size: 14px; font-weight: 400; line-height: 22px; cursor: pointer; text-align: left; white-space: nowrap; }
.drp-preset:hover { background: #f1f5f9; }
.drp-preset-radio { width: 22px; height: 22px; flex: 0 0 22px; border: 1px solid #8fa9c0; border-radius: 50%; background: #fff; box-shadow: none; }
.drp-preset[aria-checked="true"] .drp-preset-radio { border-color: #1877f2; background: radial-gradient(circle at center, #1877f2 0 6px, transparent 6.5px); }
.drp-preset:focus-visible { outline: 2px solid #1877f2; outline-offset: -2px; }
.drp-calendar { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 18px 12px; overflow: hidden; }
.drp-calendar-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; margin-bottom: 12px; }
.drp-nav { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 4px; color: #7f8a94; background: transparent; font-size: 27px; line-height: 28px; }
.drp-nav:hover { color: #667685; background: #edf2f7; }
.drp-month-selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.drp-month-select-group { display: flex; justify-content: center; gap: 18px; min-width: 0; }
.drp-month-selects select, .drp-type, .drp-start, .drp-end { height: 32px; padding: 0 8px; color: #1c2b33; border: 1px solid #aebbc8; border-radius: 4px; background: #fff; font-size: 13px; }
.drp-select-wrap { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.drp-month-select-group select { min-width: 0; height: 32px; padding: 0 18px 0 0; appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; font-weight: 600; line-height: 32px; cursor: pointer; }
.drp-month-select-group select:focus { outline: none; }
.drp-select-wrap:focus-within { outline: 2px solid #1877f2; outline-offset: 2px; border-radius: 2px; }
.drp-select-caret { position: absolute; right: 0; width: 12px; height: 12px; pointer-events: none; display: grid; place-items: center; color: #1c2b33; }
.drp-select-caret img { display: block; width: 12px; height: 12px; object-fit: contain; }
.drp-select-caret-fallback { width: 0; height: 0; border-right: 4px solid transparent; border-left: 4px solid transparent; border-top: 5px solid currentColor; }
.drp-select-caret img + .drp-select-caret-fallback { display: none; }
.drp-select-caret.is-fallback img { display: none; }
.drp-select-caret.is-fallback .drp-select-caret-fallback { display: block; }
.drp-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.drp-weekdays, .drp-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.drp-weekdays { margin-bottom: 3px; color: #667085; font-size: 11px; }
.drp-days { gap: 1px; }
.drp-day { position: relative; height: 29px; padding: 0; border: 0; border-radius: 0; color: #1c2b33; background: transparent; font-size: 14px; }
.drp-day:hover { background: #e8f1ff; }
.drp-day--empty { pointer-events: none; }
.drp-day.is-outside { color: #a8b3bd; }
.drp-day:disabled { color: #c3cbd3; cursor: not-allowed; }
.drp-day:disabled:hover { background: transparent; }
.drp-day.is-today:not(.is-endpoint) { color: #1877f2; font-weight: 700; }
.drp-day.is-in-range { background: transparent; }
.drp-day.is-endpoint { min-width: 25px; height: 25px; align-self: center; justify-self: center; color: #fff; background: #1877f2; border-radius: 3px; }
.drp-day.is-maximum-range::before { content: ""; position: absolute; z-index: 0; inset: 1px -1px 2px 0; background: #cfe3fa; }
.drp-day.is-maximum-range-end::before { right: 0; }
.drp-day.is-maximum-range-start::before { border-radius: 4px 0 0 4px; }
.drp-day.is-maximum-range-end::before { border-radius: 0 4px 4px 0; }
.drp-day.is-maximum-range-start.is-maximum-range-end::before { border-radius: 4px; }
.drp-day.is-maximum-range { z-index: 0; }
.drp-day.is-maximum-range { color: #1c2b33; }
.drp-day-label { position: relative; z-index: 1; }
.drp-day.is-maximum-start { color: #fff; background: #1877f2; border-radius: 3px; }
.drp-controls { display: grid; grid-template-rows: auto minmax(32px, 1fr); gap: 10px; flex: 1 1 auto; min-height: 0; margin-top: 12px; padding-top: 12px; border-top: 1px solid #e1e7ec; }
.drp-control-fields { display: grid; gap: 10px; }
.drp-compare { display: flex; align-items: center; gap: 6px; min-height: 20px; white-space: nowrap; font-size: 13px; }
.drp-compare input { accent-color: #1877f2; }
.drp-range-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drp-range-swatch { width: 18px; height: 18px; flex: 0 0 18px; border: 1px solid #b0cceb; border-radius: 3px; background: #dcecff; }
.drp-type { width: 118px; flex: 0 1 118px; min-width: 0; }
.drp-start, .drp-end { width: 106px; flex: 1 1 106px; min-width: 0; }
.drp-date-separator { color: #667085; line-height: 32px; }
.drp-footer { display: flex; align-items: center; gap: 12px; min-height: 32px; margin-top: auto; padding-right: 80px; }
.drp-summary-range { display: none; margin: 0 0 3px; color: #1c2b33; font-size: 13px; }
.drp-note { margin: 0; color: #667085; font-size: 12px; transform: translateY(-4px); }
.drp-actions { display: flex; flex: 0 0 auto; gap: 8px; margin-left: auto; transform: translateY(-34px); }
.drp-cancel, .drp-apply { height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 13px; font-weight: 600; }
.drp-cancel { padding: 0 19.5px; color: #1c2b33; border: 1px solid #aebbc8; background: #fff; }
.drp-apply { padding: 0 21.5px; color: #fff; border: 1px solid #1877f2; background: #1877f2; }
.drp-apply:hover { border-color: #166fe5; background: #166fe5; }
.drp-select-wrap.is-maximum-month-hidden { visibility: hidden; pointer-events: none; }
.date-range-popup.is-maximum .drp-control-fields { display: none; }
.date-range-popup.is-maximum { z-index: 202; }
.date-range-popup.is-maximum .drp-controls { grid-template-rows: minmax(32px, 1fr); }
.date-range-popup.is-maximum .drp-footer {
  /* Match the calendar content box so the apply button ends at the right T7 edge. */
  padding-right: 0;
}
.date-range-popup.is-maximum .drp-summary-range { display: block; }
.date-range-popup.is-maximum .drp-summary-range {
  font-size: 14px;
  white-space: nowrap;
}
.date-range-popup.is-maximum .drp-note { transform: none; white-space: nowrap; }
.date-range-popup.is-maximum .drp-summary { transform: translateY(-40px); }
.date-range-popup.is-maximum .drp-actions { position: relative; z-index: 1; transform: translateY(-75px); }
.date-range-popup.is-maximum .drp-cancel,
.date-range-popup.is-maximum .drp-apply { height: 38px; }
@media (max-width: 720px) {
  .drp-presets { width: 170px; min-width: 170px; }
  .drp-calendar { padding: 12px; }
  .drp-months { gap: 8px; }
  .drp-controls { flex-wrap: wrap; }
}

.action-toolbar {
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border-light);
  overflow: hidden;
}
.actions-left,
.actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.action-toolbar button {
  height: 41px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 14px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
}
.action-toolbar .create {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
  font-weight: 700;
}
.action-toolbar .square {
  width: 48px;
  padding: 0;
}
.action-toolbar .ghost-text {
  border-color: transparent;
  background: transparent;
}
.action-toolbar svg { width: 19px; height: 19px; }

.table-wrap {
  height: auto;
  max-height: calc(100vh - 274px);
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  padding-bottom: 0;
  background: var(--ads-panel-bg);
  border-left: 1px solid #eef2f6;
  border-radius: 0 0 6px 0;
}
.table-wrap::-webkit-scrollbar { height: 13px; width: 13px; }
.table-wrap::-webkit-scrollbar-track { background: #fff; }
.table-wrap::-webkit-scrollbar-thumb {
  background: #b4b8bd;
  border-radius: 10px;
  /* Keep the thumb length while moving its visible rail 2px toward the table. */
  border-width: 1px 3px 5px;
  border-style: solid;
  border-color: #fff;
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
.ads-table {
  width: 2147px;
  min-width: 2147px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--text);
}
.ads-table col.col-check { width: 49px; }
.ads-table col.col-toggle { width: 94px; }
.ads-table col.col-campaign { width: 345px; }
.ads-table col.col-delivery { width: 160px; }
.ads-table col.col-action { width: 200px; }
.ads-table col.col-result { width: 146px; }
.ads-table col.col-cost { width: 146px; }
.ads-table col.col-budget { width: 134px; }
.ads-table col.col-spent { width: 146px; }
.ads-table col.col-impressions { width: 146px; }
.ads-table col.col-reach { width: 146px; }
.ads-table col.col-contacts { width: 145px; }
.ads-table col.col-end { width: 130px; }
.ads-table col.col-attribution { width: 160px; }
.ads-table th,
.ads-table td {
  min-width: 0;
  border-top: 0;
  border-right: 1px solid var(--border-light);
  border-bottom: 0;
  vertical-align: middle;
  text-align: left;
}
.ads-table th {
  box-sizing: border-box;
  height: 45px;
  position: relative;
  padding: 4px 8px 4px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  background: #fff;
  color: #24323d;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
}
.ads-table th .table-header-content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
}
.ads-table th .table-header-content--no-menu {
  display: flex;
}
.ads-table th .table-header-main {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ads-table th .header-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  color: #31495b;
  font-weight: 600;
  line-height: 16px;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.ads-table th .header-label-single {
  white-space: nowrap;
  color: #31495b;
}
.ads-table th .header-label-two-line {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 16px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.ads-table th .sort-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: #31495b;
  flex: 0 0 15px;
  position: relative;
}
.ads-table th .sort-icon-active { color: #1877f2; }
.ads-table th .sort-icon svg { width: 15px; height: 15px; }
.ads-table th .header-menu-icon svg,
.ads-table th .header-menu-icon img { width: 10px; height: 10px; }
.ads-table th .sort-icon .table-sort-fallback { display: block; width: 100%; height: 100%; }
.ads-table th .sort-icon .table-sort-fallback svg { display: block; width: 100%; height: 100%; }
.ads-table th .table-sort-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15.24px;
  height: 12.18px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  display: block;
  max-width: none;
}
.ads-table th .table-sort-icon,
.ads-table th .table-menu-triangle { display: block; width: 100%; height: 100%; object-fit: contain; }
.ads-table th .table-sort-icon { pointer-events: none; }
.ads-table th .header-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  color: #5b6773;
  position: relative;
}
.ads-table th .header-menu-icon .table-menu-triangle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  display: block;
}
.ads-table th.table-header-menu { padding-right: 8px; }
.ads-table tbody tr {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
}
.ads-table tbody td {
  box-sizing: border-box;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  padding-top: 3px;
  padding-bottom: 3px;
}
.ads-table td {
  height: 48px;
  padding: 7px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.ads-table tbody tr:nth-child(even) td { background: #f8fafc; }
.ads-table tbody tr.selected td { background: var(--selected); }
.ads-table tbody tr:last-child > td {
  border-bottom: 0;
}
.ads-table a {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--link);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
}
.ads-table small {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  color: var(--subtle);
  font-size: 13px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ads-table b { font-weight: 500; }
.truncate,
.table-subtext,
.metric-subtext,
.cost-subtext,
.budget-main,
.money-main,
.cell-muted,
.recommendation {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.truncate,
.table-subtext,
.metric-subtext,
.cost-subtext,
.budget-main,
.money-main,
.cell-muted { display: block; }
.ads-table .check { text-align: center; }
.toggle-col,
.ads-table td:nth-child(2) { text-align: center; }
.ads-table th:nth-child(6),
.ads-table td:nth-child(6),
.ads-table th:nth-child(7),
.ads-table td:nth-child(7),
.ads-table th:nth-child(9),
.ads-table td:nth-child(9),
.ads-table th:nth-child(10),
.ads-table td:nth-child(10),
.ads-table th:nth-child(11),
.ads-table td:nth-child(11),
.ads-table th:nth-child(12),
.ads-table td:nth-child(12) { text-align: right; }
.row-check {
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  background: #fff;
  vertical-align: middle;
}
.row-check:checked {
  background: #fff;
  border-color: var(--border-light);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.9 7.5 6.25 11.5 14.1 3.7' fill='none' stroke='%230a78be' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  box-shadow: none;
}
.row-check:indeterminate {
  background: var(--ads-blue);
  border-color: var(--ads-blue);
  background-image: linear-gradient(#fff, #fff);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 2px;
}
.switch {
  position: relative;
  box-sizing: border-box;
  width: 38.6px;
  height: 22.1px;
  min-height: 22.1px;
  max-height: 22.1px;
  display: inline-block;
  padding: 0;
  border: 1px solid #ccd0d5;
  border-radius: 999px;
  background: #fff;
}
.switch:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2.3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #1c2b33;
  box-shadow: 0 1px 2px #0002;
  transform: translateY(-50%);
  transition: left .12s ease, background-color .12s ease;
}
.switch.on {
  background: #ddeffc;
  border-color: #ccd0d5;
}
.switch.on:after { left: 17.3px; width: 20px; height: 20px; background: #0a78be; transform: translateY(-50%); }
.status-dot {
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-right: 9px;
  vertical-align: -2px;
  background: var(--status);
  border-radius: 50%;
}
.delivery-dot--active { background: var(--status); }
.delivery-dot--inactive { background: #CCD0D5; }
.ads-table td.action-cell .recommendation {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 11px;
  color: var(--blue);
  background: #e7f3ff;
  border: 1px solid #9fd0ff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  transform: translateY(-1px);
}
.money {
  color: var(--money);
  font-weight: 400;
}
.app-shell .table-number--dark {
  color: #1C2B33;
  text-align: right;
}
.app-shell .table-number--green {
  color: #00A46B;
}
.app-shell .money-value {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  width: 100%;
  font-family: "Optimistic 95", system-ui, sans-serif;
  font-weight: 500;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #1C2B33;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
}
.app-shell .money-number {
  font: inherit;
}
.app-shell .money-currency-symbol {
  position: relative;
  display: inline-block;
  width: 0.58em;
  height: 1em;
  margin-left: 2px;
  font-family: "Optimistic 95", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  color: inherit;
  text-align: center;
  vertical-align: 0.02em;
  transform: translateY(-0.25px);
  font-synthesis: none;
}
.app-shell .money-currency-symbol::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.08em;
  bottom: 0.08em;
  width: 1px;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%);
  pointer-events: none;
}
.app-shell .result-primary-number {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #1C2B33;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.number-cell { text-align: right; }
.ads-table tbody td:nth-child(7),
.ads-table tbody td:nth-child(9),
.ads-table tbody td:nth-child(10) { vertical-align: top; }
.metric-subtext { max-width: 130px; }
.cost-subtext {
  max-width: 150px;
  color: #667781;
  text-decoration: none;
}
.budget-cell { color: var(--text); }
.budget-main {
  max-width: 125px;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
}
.cell-muted {
  max-width: 125px;
  color: #667781;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.metric-subtext,
.cost-subtext,
.money small {
  color: #667781;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  text-decoration: none;
}
tfoot td {
  box-sizing: border-box;
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  padding: 7px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff !important;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  vertical-align: top;
}
.ads-table .result-summary-row > td {
  height: 76px;
  min-height: 76px;
  max-height: 76px;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}
.ads-table .result-summary-row > td:first-child {
  border-left: 0;
  border-bottom-left-radius: 0;
}
.ads-table .result-summary-row > td:last-child {
  border-bottom-right-radius: 6px;
}
.ads-table .result-summary-cell {
  text-align: left;
  vertical-align: top;
  padding-top: 4px;
}
.ads-table .result-summary-content {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
  transform: translateY(4px);
}
.ads-table .result-summary-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ads-table .result-summary-loading {
  display: none;
  margin-top: 4px;
  color: #7c8791;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  transform: translateY(4px);
}
.table-wrap.is-refreshing .ads-table .result-summary-loading { display: block; }
.ads-table .result-summary-content b {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.ads-table .result-summary-info-icon {
  width: 12px;
  height: 12px;
  min-width: 12px;
  max-width: 12px;
  min-height: 12px;
  max-height: 12px;
  flex: 0 0 12px;
  object-fit: contain;
  display: block;
}

.support {
  position: fixed;
  right: 41px;
  bottom: 34px;
  z-index: 203;
  width: 65px;
  height: 65px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 24px #0002;
  font-size: 18px;
  line-height: 22px;
  font-weight: 800;
}
.support[hidden] { display: none; }

.support::before {
  content: "";
  position: absolute;
  top: -35%;
  left: -55%;
  width: 34%;
  height: 170%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .04) 20%, rgba(255, 255, 255, .32) 50%, rgba(255, 255, 255, .04) 80%, transparent 100%);
  transform: translateX(0) rotate(25deg);
  animation: support-shine-sweep 3s linear infinite;
}

.support-label {
  position: relative;
  z-index: 1;
}

@keyframes support-shine-sweep {
  0% { opacity: 0; transform: translateX(0) rotate(25deg); }
  1% { opacity: 1; }
  20% { opacity: 1; transform: translateX(460%) rotate(25deg); }
  21%, 100% { opacity: 0; transform: translateX(460%) rotate(25deg); }
}

@media (prefers-reduced-motion: reduce) {
  .support::before { animation: none; }
}

@media (max-width: 1300px) {
  .tab { font-size: 15px; }
  .campaign-tab,
  .campaign-tab.has-selection,
  .adset-tab,
  .ads-tab { flex-basis: auto; }
  .date-range { min-width: 213px; }
  .update { min-width: 180px; font-size: 14px; }
}


/* ZIP reference typography and color transfer for the public Ads Manager page only. */
.app-shell,
.app-shell button,
.app-shell input,
.app-shell table {
  font-family: var(--ads-font-family);
  letter-spacing: 0;
}

.app-shell .top-header {
  --topbar-background: var(--ads-header-bg);
  background: var(--topbar-background);
  border-bottom-color: var(--ads-border);
  padding-right: 1px;
}
.app-shell .top-header h1 {
  color: var(--ads-text-heading);
  font-size: 18px;
  line-height: 20px;
  font-weight: 700;
}
.app-shell .account-btn,
.app-shell .update,
.app-shell .draft,
.app-shell .publish,
.app-shell .icon-btn,
.app-shell .date-range {
  color: var(--ads-text-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.app-shell .account-btn {
  background: #FFFFFF;
  border-color: var(--ads-border-strong);
  border-radius: 4px;
  font-size: 12px;
  line-height: 15.36px;
  font-weight: 400;
}
.app-shell .date-range {
  background: transparent;
  border-color: var(--ads-border-strong);
  font-weight: 400;
}
.app-shell .update { font-weight: 300; }
.app-shell .draft,
.app-shell .icon-btn {
  background: transparent;
  border-color: #ccc;
  font-weight: 400;
}
.app-shell .top-header .header-actions {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 2px;
}
.app-shell .top-header .header-actions .update {
  margin-right: 4px;
}

/* Desktop-only spacing adjustments for the top-right campaign tools. */
@media (min-width: 1301px) {
  .app-shell .top-header .header-actions {
    gap: 7.5px;
  }

  .app-shell .top-header .header-actions .update {
    margin-right: 6.5px;
  }
}
.app-shell .top-header .header-refresh-btn {
  width: 40px;
  height: 36px;
  min-width: 40px;
  max-width: 40px;
  min-height: 36px;
  max-height: 36px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px solid #AEBBC8;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  font-size: 12px;
  font-weight: 400;
  line-height: 15.36px;
  transform: none;
  zoom: 1;
}
.app-shell .top-header .header-refresh-btn svg {
  flex: 0 0 auto;
}
.app-shell .top-header .topbar-neutral-control,
.app-shell .top-header .topbar-neutral-control:hover,
.app-shell .top-header .topbar-neutral-control:active {
  background-color: transparent;
  background-image: none;
  border-color: #AEBBC8;
  border-width: 1px;
  box-shadow: none;
  color: var(--ads-text-primary);
}
.app-shell .top-header .topbar-neutral-control:focus-visible {
  background-color: transparent;
  background-image: none;
  border-color: #AEBBC8;
  border-width: 1px;
  box-shadow: none;
  color: var(--ads-text-primary);
  outline: 2px solid var(--ads-text-primary);
  outline-offset: 1px;
}
.app-shell .top-header .header-review-publish-btn {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  min-width: calc(152px - 15px);
  width: calc(152px - 15px);
  padding: 8px 16px;
  box-sizing: border-box;
  border: 1px solid #AEBBC8;
  border-radius: 4px;
  background: transparent;
  color: var(--review-publish-muted-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transform: none;
  zoom: 1;
}
.app-shell .top-header .header-review-publish-btn:hover,
.app-shell .top-header .header-review-publish-btn:focus-visible,
.app-shell .top-header .header-review-publish-btn:active {
  color: var(--review-publish-muted-text);
}

.app-shell .top-header .header-discard-draft-btn {
  width: auto;
  height: 36px;
  min-width: 132px;
  min-height: 36px;
  max-height: 36px;
  padding: 8px 14px;
  box-sizing: border-box;
  border: 1px solid #AEBBC8;
  border-radius: 4px;
  background: transparent;
  background-color: transparent;
  background-image: none;
  color: var(--ads-text-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.app-shell .top-header .header-discard-draft-btn:disabled {
  color: var(--subtle);
  background: transparent;
  background-color: transparent;
  background-image: none;
  border-color: #AEBBC8;
  cursor: default;
}
.app-shell .top-header .header-discard-draft-btn svg { width: 16px; height: 16px; }
.app-shell .top-header .header-profile-control {
  position: relative;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  transform: translateX(-2px);
  margin-left: 1.5px;
}
.app-shell .top-header .header-profile-control img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.app-shell .filter-row {
  transform: translateX(var(--top-content-nudge-left));
  background: var(--ads-filter-bg);
  border-bottom: 0;
  box-shadow: none;
  min-height: 54px;
  padding: 8px 12px 4px;
  overflow: visible;
}
.app-shell .filter {
  color: #000;
  background: #fff;
  border-color: var(--ads-border);
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.app-shell .filter:hover { background: var(--ads-filter-hover-bg); }
.app-shell .filter.active {
  color: var(--ads-blue);
  background: #fff;
  border-color: var(--ads-blue);
  font-weight: 600;
}
.app-shell .filter.more {
  color: #000;
  background: transparent;
  border-color: transparent;
}
.app-shell .filter.more:hover { background: var(--ads-more-hover-bg); }
.app-shell .filter-right .filter {
  background: transparent;
  border-color: rgba(10, 120, 190, 0.18);
}
.app-shell .filter-right .filter:hover { background: rgba(195, 220, 245, 0.45); }
.app-shell .date-range {
  background: transparent;
  border-color: rgba(10, 120, 190, 0.18);
}
.app-shell .date-range:hover { background: rgba(195, 220, 245, 0.45); }

.app-shell .search-row {
  margin-top: -4.5px;
  transform: translateX(var(--top-content-nudge-left));
  height: 54px;
  padding: 8px 12px 10px;
  background: transparent;
  border: 0;
  outline: 0;
  box-shadow: none;
}
.app-shell .search-box {
  color: var(--ads-text-secondary);
  background: #fff;
  border: 0;
  outline: 0;
  box-shadow: none;
}
.app-shell .search-box:focus-within {
  border-color: transparent;
  outline: 0;
  box-shadow: none;
}
.app-shell .search-box input,
.app-shell .search-box input::placeholder {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.app-shell .search-box input {
  color: var(--ads-text-primary);
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
.app-shell .search-box input:focus {
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
.app-shell .search-box input::placeholder { color: var(--ads-text-secondary); }

.app-shell .tabs {
  margin-top: -9.5px;
  transform: translateX(var(--top-content-nudge-left));
  background: var(--ads-tab-strip-bg);
  border-bottom-color: transparent;
  height: 48px;
  padding: 8px 12px 0;
}
.app-shell .tab {
  color: var(--ads-text-primary);
  background: var(--ads-tab-inactive-bg);
  border-color: var(--mock-tab-border);
  border-radius: 8px 8px 0 0;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.app-shell .tab.active {
  color: var(--ads-blue);
  background: var(--ads-tab-active-bg);
  border-color: var(--mock-tab-border);
  border-bottom-color: transparent;
  font-weight: 500;
}

.app-shell .action-toolbar {
  margin-top: -2px;
  transform: translate(var(--table-frame-nudge-right), -0.5px);
  background: var(--ads-panel-bg);
  border-bottom-color: var(--ads-border-panel);
  min-height: 53px;
  padding: 6px 12px;
}
.app-shell .action-toolbar button {
  color: var(--ads-text-primary);
  background: #fff;
  border-color: var(--ads-control-border);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.app-shell .action-toolbar button:hover { background: var(--ads-toolbar-hover-bg); }
.app-shell .action-toolbar .target-action-duplicate:disabled,
.app-shell .action-toolbar .target-action-edit:disabled {
  color: #8b98a5;
  background: #fff;
  border-color: #d5dee8;
  cursor: not-allowed;
  opacity: 1;
}
.app-shell .action-toolbar .target-action-duplicate:disabled:hover,
.app-shell .action-toolbar .target-action-edit:disabled:hover {
  color: #8b98a5;
  background: #fff;
  border-color: #d5dee8;
}
.app-shell .action-toolbar .target-action-duplicate:disabled .toolbar-icon-slot,
.app-shell .action-toolbar .target-action-edit:disabled .toolbar-icon-slot {
  color: #8b98a5;
  opacity: .55;
}
.app-shell .action-toolbar .create {
  color: #fff;
  background: var(--green);
  border-color: var(--green);
  font-size: 15px;
  font-weight: 700;
}
.app-shell .action-toolbar .ghost-text {
  background: transparent;
  border-color: var(--ads-control-border);
}

.app-shell .tabs-right .date-range {
  border-color: var(--ads-control-border);
}

.app-shell .action-toolbar .target-action-create .toolbar-icon-slot svg {
  stroke-width: 2.4;
}

.app-shell .action-toolbar .target-action-columns > .toolbar-icon-slot:last-child {
  border-left: 0;
  box-shadow: none;
}

.app-shell .table-wrap { transform: translateX(var(--table-frame-nudge-right)); }

.app-shell .table-wrap,
.app-shell .ads-table th,
.app-shell .ads-table td { background: var(--ads-panel-bg); }
.app-shell .ads-table {
  color: var(--ads-text-primary);
  font-family: var(--ads-font-family);
  letter-spacing: 0;
}
.app-shell .ads-table th,
.app-shell .ads-table td { border-color: var(--ads-border-panel); }
.app-shell .ads-table th,
.app-shell .ads-table th span {
  color: var(--ads-text-primary);
  font-size: 14px;
  line-height: 18px;
  font-weight: 600;
}
.app-shell .ads-table td {
  color: var(--ads-text-primary);
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.app-shell .ads-table thead th {
  border-bottom: 1px solid var(--ads-border-panel);
}
/* Hide body grid lines, retaining the campaign/delivery divider through the summary. */
.app-shell .ads-table tbody td,
.app-shell .ads-table tfoot td {
  border-right: 0;
}
.app-shell .ads-table tbody td:nth-child(3),
.app-shell .ads-table tfoot td:nth-child(3) {
  border-right: 1px solid var(--ads-border-panel);
}
/* Delivery keeps one Admin-managed directional arrow in a dedicated slot. */
.app-shell .ads-table th.delivery-col .header-label,
.app-shell .ads-table th.delivery-col .delivery-sort-icons,
.app-shell .ads-table th.delivery-col .delivery-sort-fallback,
.app-shell .ads-table th.delivery-col .delivery-sort-fallback svg {
  color: #1877f2;
}
.app-shell .ads-table th.delivery-col .delivery-sort-icons {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.app-shell .ads-table th.delivery-col .delivery-sort-icon-slot,
.app-shell .ads-table th.delivery-col .delivery-sort-fallback,
.app-shell .ads-table th.delivery-col .delivery-sort-fallback svg {
  display: block;
  width: 13px;
  height: 13px;
}
.app-shell .ads-table th.delivery-col .delivery-sort-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.app-shell .ads-table th.cost-per-result-col .sort-icon { transform: translateX(17px); }
.app-shell .ads-table tbody tr:nth-child(odd) td { background: #fff; }
.app-shell .ads-table tbody tr:nth-child(even) td { background: var(--ads-data-row-alt-bg); }
.app-shell .ads-table tbody tr.selected td { background: var(--ads-row-selected-bg); }
.app-shell .ads-table a {
  color: var(--ads-link);
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
}
.app-shell .ads-table small,
.app-shell .table-subtext,
.app-shell .metric-subtext,
.app-shell .cell-muted {
  color: var(--ads-text-secondary);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.app-shell .budget-main {
  color: #263238;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  text-align: right;
}
.app-shell .budget-secondary {
  margin-top: 2px;
  text-align: right;
}
.app-shell .metric-subtext,
.app-shell .cost-subtext,
.app-shell .budget-secondary {
  font-size: 11px;
}
.app-shell tfoot small { color: var(--ads-text-muted); }


/* Fine-tune only the marked top controls from the screenshot. */
.app-shell .filter-left .filter {
  height: 42px;
  padding-left: 14px;
  padding-right: 14px;
  color: #000;
  font-size: 14.5px;
  line-height: 20px;
  font-weight: 400;
}
.app-shell .filter-left .filter.active {
  color: var(--ads-blue);
  background: #fff;
  border-color: var(--ads-blue);
  font-weight: 600;
}
.app-shell .filter-left .filter.more {
  color: #000;
}
.app-shell .filter-left .target-filter-all-ads,
.app-shell .filter-left .target-filter-delivery,
.app-shell .filter-left .target-filter-action,
.app-shell .filter-left .target-filter-active-ads {
  height: 40px;
  padding-left: 12px;
  padding-right: 12px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--ads-border);
}
.app-shell .filter-left .target-filter-all-ads.active {
  font-weight: 500;
  border-bottom-color: var(--ads-blue);
}
.app-shell .filter-right .target-view-mode {
  height: 40px;
  width: 129px;
  min-width: 129px;
  max-width: 129px;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  font-weight: 400;
  white-space: nowrap;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.app-shell .filter-right {
  gap: 5px;
}
.app-shell .filter-right .target-view-settings {
  width: 44px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.app-shell .filter-right .target-view-mode,
.app-shell .filter-right .target-view-settings {
  border-color: var(--view-control-border);
}
.app-shell .filter-right .target-view-mode:hover,
.app-shell .filter-right .target-view-mode:focus,
.app-shell .filter-right .target-view-mode:focus-visible,
.app-shell .filter-right .target-view-mode:active,
.app-shell .filter-right .target-view-settings:hover,
.app-shell .filter-right .target-view-settings:focus,
.app-shell .filter-right .target-view-settings:focus-visible,
.app-shell .filter-right .target-view-settings:active {
  border-color: var(--view-control-border-hover);
}

.app-shell .actions-left .target-action-create,
.app-shell .actions-left .target-action-duplicate,
.app-shell .actions-left .target-action-edit,
.app-shell .actions-left .target-action-delete,
.app-shell .actions-left .target-action-ab-test,
.app-shell .actions-right .target-action-columns,
.app-shell .actions-right .target-action-breakdown,
.app-shell .actions-right .target-action-report,
.app-shell .actions-right .target-action-download,
.app-shell .actions-right .target-action-open {
  height: 37px;
}
.app-shell .search-row {
  height: 54px;
  padding: 8px 12px 10px;
  border: 0;
  outline: none;
  box-shadow: none;
}
.app-shell .search-box {
  height: 36px;
  padding: 2px 20px;
  background: #fff;
  border-radius: 4px;
  border: 0;
  outline: none;
  box-shadow: none;
}
.app-shell .search-box:focus,
.app-shell .search-box:focus-within {
  border: 0;
  outline: none;
  box-shadow: none;
}
.app-shell .search-box input,
.app-shell input[placeholder*="Mô tả"] {
  height: 100%;
  padding: 8px;
  color: var(--ads-text-primary);
  background: #fff;
  border: 1px solid transparent;
  border-radius: 18px;
  outline: none;
  box-shadow: none;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.app-shell .search-box input:focus,
.app-shell input[placeholder*="Mô tả"]:focus {
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
.app-shell .search-box input::placeholder,
.app-shell input[placeholder*="Mô tả"]::placeholder {
  color: var(--ads-text-secondary);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  opacity: 1;
}

.app-shell .search-row {
  background: var(--ads-filter-bg) !important;
  background-color: var(--ads-filter-bg) !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.app-shell .search-box {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
.app-shell .search-box:focus,
.app-shell .search-box:focus-within {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.app-shell .search-box input,
.app-shell input[placeholder*="Mô tả"] {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.app-shell .search-box input:focus,
.app-shell input[placeholder*="Mô tả"]:focus {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.app-shell .tabs-row > .tabs-left {
  gap: var(--mock-tab-gap);
}

.app-shell .tabs-left .tab {
  height: var(--mock-tab-height);
  min-width: 0;
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  padding-left: 21px;
  padding-right: 21px;
  color: var(--ads-text-primary);
  border-color: var(--mock-tab-border);
  border-radius: 8px 8px 0 0;
  font-family: "Optimistic Ads", "Roboto", "Segoe UI", Arial, system-ui, sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}
.app-shell .tabs-left .tab.active {
  height: var(--mock-tab-active-height);
  color: var(--ads-blue);
  border-bottom-color: transparent;
  font-weight: 500;
}
.app-shell .campaign-tab,
.app-shell .adset-tab,
.app-shell .ads-tab {
  flex: 0 0 var(--base-tab-width);
  width: var(--base-tab-width);
  min-width: var(--base-tab-width);
  max-width: var(--base-tab-width);
}
.app-shell .tabs-row.hierarchy-tabs--no-selection {
  /* Each no-selection entity tab is 85px narrower than its 309px baseline. */
  --base-tab-width: 224px;
  /* The tab strip reserves this height whether or not a campaign is selected. */
  height: calc(48px + 5px);
}
.app-shell .tabs-row.has-selection {
  /* Fixed selected-state widths prevent repeated selection changes from
     accumulating while keeping the no-selection sizing untouched. */
  --campaign-tab-selected-width: 277px;
  --adset-tab-selected-width: 320.640625px;
  --ads-tab-selected-width: 279px;
  height: calc(48px + 5px);
}
.app-shell .tabs-row.has-selection > .tabs-left {
  gap: 6px;
}
.app-shell .tabs-row.has-selection .campaign-tab-link {
  /* Move only the campaign icon-and-label group, leaving its selection badge fixed. */
  margin-left: -9px;
}
.app-shell .tabs-row.has-selection .campaign-tab .configured-icon-slot--tab {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
}
.app-shell .tabs-row.has-selection .selected-pill {
  /* Offset only the complete selection badge, preserving its contents. */
  transform: translateX(-2px);
}
.app-shell .tabs-row.has-selection .adset-tab,
.app-shell .tabs-row.has-selection .ads-tab {
  /* The selected-state tabs start at 21px; reduce that inset by exactly 9px. */
  padding-inline-start: 12px;
}
.app-shell .tabs-row.hierarchy-tabs--no-selection .tab {
  height: var(--mock-tab-height);
  /* Shift the icon-and-label group 10px left without altering selected tabs. */
  padding-inline-start: calc(15px - 4px);
  background: var(--ads-tab-inactive-bg);
  border-width: 0.5px;
  border-color: var(--mock-tab-border);
  border-radius: 8px 8px 0 0;
  /* Keep the cool-gray edge highlight tight to the existing tab border. */
  box-shadow: 0 0 0 0.5px rgba(224, 228, 232, 0.68),
    0 1px 2px rgba(205, 216, 228, 0.24);
}
.app-shell .tabs-row.hierarchy-tabs--no-selection .tab.active {
  height: var(--mock-tab-active-height);
  background: var(--ads-tab-active-bg);
  border-bottom-color: transparent;
}
/* Preserve the no-selection tab highlight. */
.app-shell .tabs-row.hierarchy-tabs--no-selection .tabs-left > .tab.active {
  box-shadow: 0 0 0 0.5px rgba(224, 228, 232, 0.68),
    0 1px 2px rgba(205, 216, 228, 0.24);
}
.app-shell .tabs-row.hierarchy-tabs--no-selection .tabs-left > .tab {
  box-sizing: border-box;
  flex: 0 0 var(--base-tab-width);
  width: var(--base-tab-width);
  min-width: var(--base-tab-width);
  max-width: var(--base-tab-width);
}
.app-shell .tabs-row.has-selection .campaign-tab {
  box-sizing: border-box;
  flex: 0 0 var(--campaign-tab-selected-width);
  width: var(--campaign-tab-selected-width);
  min-width: var(--campaign-tab-selected-width);
  max-width: var(--campaign-tab-selected-width);
}
.app-shell .tabs-row.has-selection .adset-tab {
  box-sizing: border-box;
  flex: 0 0 var(--adset-tab-selected-width);
  width: var(--adset-tab-selected-width);
  min-width: var(--adset-tab-selected-width);
  max-width: var(--adset-tab-selected-width);
  white-space: nowrap;
}
.app-shell .tabs-row.has-selection .ads-tab .tab-label {
  min-width: 0;
  flex: 1 1 auto;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.app-shell .tabs-row.has-selection .adset-tab .tab-label {
  /* Preserve the existing icon-to-label spacing and keep the contextual
     label visible within the reduced selected-state tab. */
  min-width: max-content;
}
.app-shell .tabs-row.has-selection .ads-tab {
  box-sizing: border-box;
  flex: 0 0 var(--ads-tab-selected-width);
  width: var(--ads-tab-selected-width);
  min-width: var(--ads-tab-selected-width);
  max-width: var(--ads-tab-selected-width);
  white-space: nowrap;
}

/* Reference sizing for the top-header overflow pair and flexible extra-view item. */
.app-shell .top-header .header-overflow-btn {
  width: 40px;
  height: 36px;
  min-width: 40px;
  max-width: 40px;
  min-height: 36px;
  max-height: 36px;
  padding: 8px 12px;
  box-sizing: border-box;
  border: 1px solid #AEBBC8;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  font-size: 12px;
  font-weight: 400;
  line-height: 15.36px;
}

.app-shell .top-header .header-profile-control {
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  padding: 0;
  box-sizing: border-box;
  border-width: 0;
  border-radius: 50%;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  font-size: 12px;
  font-weight: 400;
  line-height: 15.36px;
}

.app-shell .top-header .header-profile-control img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.app-shell .top-header .account-avatar {
  position: relative;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border: 3px solid #FFFFFF;
  border-radius: 50%;
  overflow: hidden;
}
.app-shell .top-header .account-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}
.app-shell .top-header .account-avatar__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}
.app-shell .top-header .account-avatar-social-badge {
  position: absolute;
  right: 1px;
  bottom: -1px;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  overflow: hidden;
  background: #FFFFFF;
  z-index: 2;
  pointer-events: none;
}
.app-shell .top-header .account-avatar-social-badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.app-shell .filter-row .filter-left {
  flex: 1 1 auto;
  min-width: 0;
}

.app-shell .filter-row .filter-left .filter.more {
  height: 41.778px;
  min-height: 41.778px;
  max-height: 41.778px;
  flex: 0 0 auto;
  width: max-content;
  min-width: auto;
  padding: 0;
  box-sizing: content-box;
  border-width: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 15.36px;
  white-space: nowrap;
}
.app-shell .filter-row .filter-left .top-filter-more,
.app-shell .filter-row .filter-left .top-filter-more:hover,
.app-shell .filter-row .filter-left .top-filter-more:focus,
.app-shell .filter-row .filter-left .top-filter-more:focus-visible,
.app-shell .filter-row .filter-left .top-filter-more[aria-expanded="true"] {
  background: transparent;
}
.app-shell .filter-row .filter-left .top-filter-more:focus-visible {
  outline: 1px solid var(--ads-blue);
  outline-offset: 2px;
}
.app-shell .filter-row .filter-left .top-filter-more {
  transform: translateX(11px);
}
.app-shell .filter-row .filter-left .top-filter-more .configured-icon-slot--filter {
  width: 13px;
  min-width: 13px;
  max-width: 13px;
  height: 13px;
  min-height: 13px;
  max-height: 13px;
}
.app-shell .filter-row .filter-left .top-filter-more .configured-icon-slot--filter > svg {
  stroke-width: 1.3;
}
.app-shell .filter-row .filter-left .top-filter-more .filter-label {
  font-size: 14px;
}

/* Lower action toolbar target restore: fixed icon slots keep uploads from changing layout. */
.app-shell .action-toolbar .toolbar-icon-slot {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  position: relative;
}
.app-shell .action-toolbar .toolbar-icon-slot svg,
.app-shell .action-toolbar .toolbar-icon-slot img,
.app-shell .action-toolbar img.toolbar-upload-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  max-width: 16px;
  min-height: 16px;
  max-height: 16px;
  flex: 0 0 16px;
  object-fit: contain;
  display: block;
}
/* All action-toolbar dropdown chevrons share an 11px slot: 2px below their
   established 13px computed size. Uploaded artwork remains centered and
   contained, while the fallback SVG follows the same dimensions. */
.app-shell .action-toolbar .toolbar-icon-slot--dropdown {
  width: 11px;
  height: 11px;
  min-width: 11px;
  max-width: 11px;
  min-height: 11px;
  max-height: 11px;
  flex-basis: 11px;
}
.app-shell .action-toolbar .toolbar-icon-slot--dropdown svg,
.app-shell .action-toolbar .toolbar-icon-slot--dropdown img {
  width: 11px;
  height: 11px;
  min-width: 11px;
  max-width: 11px;
  min-height: 11px;
  max-height: 11px;
  flex-basis: 11px;
  object-fit: contain;
}
.app-shell .actions-left,
.app-shell .actions-right { gap: 8px; }
.app-shell .action-toolbar .toolbar-split {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0;
  height: 37px;
  white-space: nowrap;
}
.app-shell .action-toolbar .toolbar-split button {
  height: 37px;
  margin: 0;
  border-color: var(--ads-control-border);
  background: #fff;
}
.app-shell .action-toolbar .toolbar-split .split-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.app-shell .action-toolbar .toolbar-split .split-arrow {
  width: 36px;
  min-width: 36px;
  padding: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid var(--ads-control-border);
}
.app-shell .action-toolbar .square {
  width: 37px;
  min-width: 37px;
}
.app-shell .actions-left .target-action-tag,
.app-shell .actions-right .target-action-open,
.app-shell .actions-right .target-action-report,
.app-shell .actions-right .target-action-download { height: 37px; }
.app-shell .actions-left .target-action-more { height: 37px; }

/* Targeted mock ads toolbar split-button sizing refinements. */
.app-shell .action-toolbar .target-action-duplicate-split .split-arrow,
.app-shell .action-toolbar .target-action-edit-split .split-arrow {
  width: 37px;
  min-width: 37px;
  height: 37px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.app-shell .actions-left .target-action-delete,
.app-shell .actions-left .target-action-tag {
  width: 40px;
  min-width: 40px;
  height: 37px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* A standalone separator keeps the selected-item controls visually grouped. */
.app-shell .actions-left .target-action-ab-test-divider {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  pointer-events: none;
  background: #CBD5E1;
}

.app-shell .action-toolbar .target-action-report-split .target-action-report,
.app-shell .action-toolbar .target-action-report-split .split-arrow {
  width: 37px;
  min-width: 37px;
  height: 37px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.app-shell .action-toolbar .target-action-download-split .target-action-download,
.app-shell .action-toolbar .target-action-download-split .split-arrow {
  width: 37px;
  min-width: 37px;
  height: 37px;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.app-shell .toolbar-view-border {
  border-width: 1px;
  border-style: solid;
  border-color: var(--view-control-border);
  border-radius: 4px;
  outline: none;
  box-shadow: none;
}

/* Contextual lower action-toolbar controls and border normalization. */
.app-shell .action-toolbar {
  --action-toolbar-border: #AEBBC8;
}

.app-shell .action-toolbar .target-action-duplicate,
.app-shell .action-toolbar .target-action-edit,
.app-shell .action-toolbar .target-action-delete,
.app-shell .action-toolbar .target-action-ab-test,
.app-shell .action-toolbar .target-action-tag,
.app-shell .action-toolbar .target-action-columns,
.app-shell .action-toolbar .target-action-breakdown,
.app-shell .action-toolbar .target-action-report,
.app-shell .action-toolbar .target-action-download,
.app-shell .action-toolbar .target-action-open,
.app-shell .action-toolbar .toolbar-split .split-arrow {
  border-width: 1px;
  border-style: solid;
  border-color: var(--action-toolbar-border);
}

.app-shell .action-toolbar .target-action-more {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.app-shell .action-toolbar .target-action-more:hover,
.app-shell .action-toolbar .target-action-more:focus,
.app-shell .action-toolbar .target-action-more:focus-visible {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
}

.app-shell .action-toolbar:not(.has-selection) .target-action-duplicate-split .split-arrow,
.app-shell .action-toolbar:not(.has-selection) .target-action-edit-split .split-arrow,
.app-shell .action-toolbar:not(.has-selection) .target-action-delete,
.app-shell .action-toolbar:not(.has-selection) .target-action-tag,
.app-shell .action-toolbar:not(.has-selection) .target-action-ab-test-divider {
  display: none;
}

.app-shell .action-toolbar:not(.has-selection) .target-action-duplicate-split .split-main,
.app-shell .action-toolbar:not(.has-selection) .target-action-edit-split .split-main {
  border-right: 1px solid var(--action-toolbar-border);
  border-radius: 5px;
}

.app-shell .action-toolbar.has-selection .target-action-duplicate-split .split-main,
.app-shell .action-toolbar.has-selection .target-action-edit-split .split-main,
.app-shell .action-toolbar .target-action-report-split .split-main,
.app-shell .action-toolbar .target-action-download-split .split-main {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.app-shell .action-toolbar.has-selection .target-action-duplicate-split .split-arrow,
.app-shell .action-toolbar.has-selection .target-action-edit-split .split-arrow,
.app-shell .action-toolbar .target-action-report-split .split-arrow,
.app-shell .action-toolbar .target-action-download-split .split-arrow {
  border-left: 1px solid var(--action-toolbar-border);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Public Ads Manager marked outer panel corner radii only. */
.app-shell .ads-upper-controls-panel {
  transform: translateX(var(--top-content-nudge-left));
  background: var(--ads-filter-bg);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: visible;
}

.app-shell .ads-upper-controls-panel .filter-row,
.app-shell .ads-upper-controls-panel .search-row {
  transform: none;
}

.app-shell .ads-upper-controls-panel .filter-row {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.app-shell > .top-header,
.app-shell > .ads-upper-controls-panel {
  flex: 0 0 auto;
}

.app-shell > .ads-workspace-panel {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  height: auto;
  background: #FFFFFF;
  border-radius: 8px;
  overflow: visible;
}

.app-shell .ads-workspace-panel .tabs {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.app-shell .table-number {
  display: block;
  font-family: "Optimistic Ads";
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
  font-stretch: normal;
  font-synthesis: none;
  font-kerning: auto;
  font-variant-numeric: normal;
  font-feature-settings: normal;
  text-rendering: optimizeLegibility;
}

.app-shell .ads-table .money-value {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.ads-table tbody td.metric-primary-cell,
.ads-table tbody td.total-contact-cell {
  vertical-align: top;
}

.metric-primary-line {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  min-height: 18px;
  margin-top: 0;
  padding-top: 0;
  line-height: 18px;
}

/* Align only the table's primary text lines; transforms do not change row height. */
.ads-table tbody td.campaign-name-cell,
.ads-table tbody td.delivery-cell {
  vertical-align: top;
}

.campaign-name-line {
  display: flex;
  align-items: baseline;
  min-height: 18px;
  margin-top: 0;
  padding-top: 0;
  line-height: 18px;
  transform: translateY(3px);
}

.delivery-primary-line {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  margin-top: 0;
  padding-top: 0;
  line-height: 18px;
  transform: translateY(3px);
}

.delivery-primary-line .status-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: baseline;
}

.total-contact-primary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
  min-height: 18px;
  margin-top: 0;
  padding-top: 0;
  line-height: 18px;
}
.total-contact-primary-line small {
  margin-top: 0;
}

/* Per-record suggestion badge: fixed to the reference dimensions. */
.ads-table td.suggestion-cell { display: flex; align-items: flex-start; justify-content: flex-start; padding-top: 3px; padding-bottom: 3px; }
.suggestion-badge-row { display: flex; align-items: center; min-height: 18px; margin-top: 0; padding-top: 0; transform: translateY(2px); }
.suggestion-badge {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: flex-start;
  width: 81.48px; min-width: 81.48px; max-width: 81.48px;
  height: 18px; min-height: 18px; max-height: 18px;
  padding: 0 5px; gap: 4px; border: 1px solid #9fd0ff; border-radius: 9px;
  overflow: hidden; white-space: nowrap; color: var(--blue); background: #e7f3ff;
}
.suggestion-badge__icon { display: block; flex: 0 0 16px; width: 16px; min-width: 16px; max-width: 16px; height: 12px; min-height: 12px; max-height: 12px; object-fit: contain; }
.suggestion-badge__text { box-sizing: border-box; display: inline-flex; align-items: center; flex: 0 0 51.48px; width: 51.48px; height: 16px; font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; overflow: hidden; }
.suggestion-disabled-dash {
  position: relative;
  display: inline-block;
  width: 14.5px;
  height: 18px;
  font-size: 0;
  line-height: 18px;
  color: currentColor;
  vertical-align: middle;
  white-space: nowrap;
}
.suggestion-disabled-dash::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

/* Admin-configured images are constrained to the stable slot used by each UI area. */
.app-shell .configured-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
  line-height: 0;
}
.app-shell .configured-icon-slot--filter {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
}
.app-shell .configured-icon-slot--tab {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
}
/* Size only the Campaign and Ad set hierarchy-tab icon slots; image assets remain Admin-managed. */
.app-shell .campaign-tab .configured-icon-slot--tab {
  width: 24px;
  min-width: 24px;
  max-width: 24px;
  height: 24px;
  min-height: 24px;
  max-height: 24px;
}
.app-shell .adset-tab .configured-icon-slot--tab {
  width: 19px;
  min-width: 19px;
  max-width: 19px;
  height: 19px;
  min-height: 19px;
  max-height: 19px;
}
.app-shell .ads-tab .configured-icon-slot--tab {
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
}
.app-shell .configured-icon-slot--toolbar {
  width: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 16px;
  min-height: 16px;
  max-height: 16px;
}
.app-shell .configured-icon-slot > svg,
.app-shell .configured-icon-slot > .configured-icon-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
  pointer-events: none;
}

/* Admin-configurable topbar artwork stays inside fixed icon slots. */
.configured-ui-icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}
.topbar-refresh-icon-slot,
.discard-draft-icon-slot,
.topbar-more-icon-slot,
.view-settings-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 0;
}
.topbar-refresh-icon-slot { flex: 0 0 18px; width: 18px; height: 18px; }
.discard-draft-icon-slot { flex: 0 0 14px; width: 14px; height: 14px; }
.topbar-more-icon-slot { flex: 0 0 16px; width: 16px; height: 16px; }
.view-settings-icon-slot { flex: 0 0 18px; width: 18px; height: 18px; }
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
}
.account-avatar__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.account-avatar__fallback { line-height: 1; }

.ad-account-cover { box-sizing: border-box; flex: 0 0 auto; overflow: hidden; }
.ad-account-cover img, .ad-account-cover > span { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-account-cover > span { color: #fff; text-align: center; line-height: 32px; font-weight: 700; }
.dropdown-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  line-height: 0;
  box-sizing: border-box;
}
.dropdown-icon-slot > img,
.dropdown-icon-slot > svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
  transform: none;
  pointer-events: none;
}
.ad-account-dropdown-icon-slot > img,
.ad-account-dropdown-icon-slot > svg {
  width: 12px;
  height: 12px;
  transform: translateX(-1px);
}
.opportunity-score-chevron > img,
.opportunity-score-chevron > svg {
  width: 12px;
  height: 12px;
}

/* Compact Columns control and the unified Report dropdown trigger. */
.app-shell .action-toolbar .target-action-columns {
  width: auto;
  min-width: 0;
  gap: 8.5px;
  padding-right: 12px;
  padding-left: 12px;
}

/* The Columns icon gains 2px while its two gaps share the remaining 1px of
   the 3px control-width increase. The dropdown slot intentionally stays put. */
.app-shell .action-toolbar .target-action-columns > .toolbar-icon-slot:not(.toolbar-icon-slot--dropdown),
.app-shell .action-toolbar .target-action-columns > .toolbar-icon-slot:not(.toolbar-icon-slot--dropdown) > svg,
.app-shell .action-toolbar .target-action-columns > .toolbar-icon-slot:not(.toolbar-icon-slot--dropdown) > img {
  width: 18px;
  height: 18px;
  min-width: 18px;
  max-width: 18px;
  min-height: 18px;
  max-height: 18px;
  flex-basis: 18px;
}
.app-shell .action-toolbar .target-action-columns > .toolbar-icon-slot:not(.toolbar-icon-slot--dropdown) > img {
  object-fit: contain;
}

.app-shell .action-toolbar .target-action-report {
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
  gap: 13px;
  padding-right: 10px;
  padding-left: 10px;
  border-radius: 5px;
}

/* Widen only the selected controls from their currently computed dimensions.
   The report's 3px wider icon-to-chevron gap accounts for its 3px width gain. */
.app-shell .action-toolbar .target-action-download-split .target-action-download {
  width: 41px;
  min-width: 41px;
}

.app-shell .action-toolbar .target-action-download-split .split-arrow {
  width: 38px;
  min-width: 38px;
}

.app-shell .action-toolbar .target-action-open {
  width: 42px;
  min-width: 42px;
}

/* Keep the active entity-tab divider above the overlapping action toolbar. */
.app-shell .tabs-row > .tabs-left > .tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 1px;
  background: rgba(174, 187, 200, 0.55);
  z-index: 10;
  pointer-events: none;
}