:root {
  --line-ink: #17273c;
  --line-blue: #276bd8;
  --line-cyan: #19a9a0;
  --line-gold: #c58b35;
  --line-soft: #f4f7fb;
}

.context-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 20px;
  padding: 8px;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
}

.context-nav button {
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  color: #54657a;
  background: transparent;
  cursor: pointer;
}

.context-nav button.active,
.context-nav button:hover {
  color: #fff;
  background: var(--line-ink);
}

.click-command-summary,
.optimization-command-board,
.growth-simple-board,
.star-compass {
  border: 1px solid #dde6f1;
  border-radius: 20px;
  background: linear-gradient(145deg, #fff, #f7f9fc);
  box-shadow: 0 16px 42px rgba(31, 55, 87, .08);
}

.click-command-summary {
  padding: 18px;
  margin-bottom: 18px;
}

.click-command-summary .positive-overview-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-profile-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0 14px;
  scrollbar-width: thin;
}

.account-profile-chip {
  min-width: max-content;
  padding: 8px 11px;
  border: 1px solid #dae5f1;
  border-radius: 12px;
  background: #fff;
  color: #52657a;
}

.account-profile-chip strong {
  color: var(--line-ink);
  margin-right: 7px;
}

.account-profile-chip em {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #2b5d91;
  background: #edf5ff;
  font-style: normal;
  font-size: 11px;
}

.account-profile-chip.is-paused {
  border-color: #ecc9c3;
  background: #fff7f5;
}

.lead-account-profile {
  display: block;
  max-width: 120px;
  margin-top: 5px;
  color: #6f8195;
  font-size: 10px;
  line-height: 1.4;
}

.display-action-rail {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 10px 0 14px;
  border-bottom: 1px solid #d8e1e7;
  background: transparent;
}

.display-action-rail button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 1px solid #bccbd3;
  border-radius: 6px;
  padding: 9px 14px;
  color: #294858;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.display-action-rail button b {
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.display-action-rail button.primary-action {
  border-color: #0d786c;
  color: #fff;
  background: #0d786c;
}

.display-action-rail button.video-material-action {
  border-color: #b8934f;
  color: #614b24;
  background: #fffaf0;
}

.display-action-rail button.video-material-action b {
  color: #b07a1d;
  font-size: 12px;
}

.display-action-rail button:hover {
  border-color: #285a88;
  color: #fff;
  background: #285a88;
}

.display-action-rail span {
  margin-left: auto;
  color: #637985;
  font-size: 11px;
}

.display-action-guard {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.display-action-guard b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #0d786c;
  background: #e4f3ef;
  font-size: 11px;
}

#view-creatives .creative-kpi-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
  overflow: hidden;
  border-color: #cfdbdf;
  border-radius: 6px;
  background: #cfdbdf;
  box-shadow: 0 6px 18px rgba(22, 40, 45, .04);
}

#view-creatives .creative-kpi-strip article {
  min-height: 88px;
  padding: 14px 18px;
  border-top: 3px solid #0d786c;
}

#view-creatives .creative-kpi-strip article:nth-child(2) {
  border-top-color: #285a88;
}

#view-creatives .creative-kpi-strip article:nth-child(3) {
  border-top-color: #a36b20;
}

#view-creatives .creative-kpi-strip strong {
  margin: 5px 0 3px;
  font-size: 24px;
}

#view-creatives .account-profile-strip {
  flex-wrap: wrap;
  overflow: visible;
  gap: 6px;
  padding: 12px 0 2px;
}

#view-creatives .account-profile-chip {
  min-width: 0;
  padding: 7px 9px;
  border-radius: 6px;
}

#view-creatives .account-profile-chip strong {
  margin-right: 5px;
}

#view-creatives .account-profile-chip em {
  margin-left: 3px;
  padding: 2px 5px;
}

#view-creatives .creative-filter-bar,
#view-creatives .creative-advanced-style-panel,
#view-creatives .creative-rule-stage,
#view-creatives .creative-intelligence-grid,
#view-creatives .creative-coverage-panel {
  display: none !important;
}

#view-creatives .creative-operation-panel {
  display: none;
}

body.display-operation-open #view-creatives .creative-operation-panel {
  display: block;
}

#view-positive .positive-creative-builder {
  display: none !important;
}

.optimization-command-board,
.growth-simple-board,
.star-compass {
  padding: 22px;
  margin-bottom: 18px;
}

/* The legacy optimization view intentionally hid every old top-level block
   except four named panels. These two blocks are the new concise surface and
   its on-demand evidence drawer, so explicitly restore them after that rule. */
#view-optimization > .optimization-command-board,
#view-optimization > .optimization-deep-detail {
  display: block !important;
}

/* Match the legacy selector's specificity as well as its importance. */
#view-optimization > :not(.optimization-hero):not(#accountOptimizationSection):not(#aiOptimizationIdeas):not(.roi-lab).optimization-command-board,
#view-optimization > :not(.optimization-hero):not(#accountOptimizationSection):not(#aiOptimizationIdeas):not(.roi-lab).optimization-deep-detail {
  display: block !important;
}

/* The legacy optimization view intentionally hid every old top-level block
   except four named panels. These two blocks are the new concise surface and
   its on-demand evidence drawer, so explicitly restore them after that rule. */
#view-optimization > .optimization-command-board,
#view-optimization > .optimization-deep-detail {
  display: block !important;
}

.optimization-command-board > header,
.star-compass > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.optimization-command-board header span,
.growth-simple-board header span,
.star-compass header span {
  color: var(--line-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.optimization-command-board h2,
.growth-simple-board h2,
.star-compass h3 {
  margin: 5px 0;
  color: var(--line-ink);
}

.optimization-command-board p,
.growth-simple-board p,
.star-compass p {
  margin: 0;
  color: #66788c;
  line-height: 1.65;
}

.optimization-plain-grid,
#starCompassCards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.optimization-plain-grid article,
#starCompassCards article {
  min-width: 0;
  padding: 15px;
  border: 1px solid #e0e8f2;
  border-radius: 14px;
  background: #fff;
}

.optimization-plain-grid i {
  color: var(--line-gold);
  font-style: normal;
  font-weight: 900;
}

.optimization-plain-grid strong,
#starCompassCards strong,
#starCompassCards span,
#starCompassCards small {
  display: block;
}

.optimization-plain-grid strong,
#starCompassCards strong {
  margin: 6px 0;
  color: var(--line-ink);
}

#starCompassCards small {
  color: #79899a;
}

.optimization-deep-detail,
.growth-deep-detail {
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #fff;
}

.optimization-deep-detail > summary,
.growth-deep-detail > summary {
  padding: 13px 16px;
  color: #465b72;
  cursor: pointer;
  font-weight: 700;
}

.optimization-deep-detail[open] > summary,
.growth-deep-detail[open] > summary {
  border-bottom: 1px solid #e5ebf3;
}

.growth-simple-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0;
  overflow-x: auto;
}

.growth-simple-flow b {
  min-width: max-content;
  padding: 9px 12px;
  border-radius: 10px;
  color: #245183;
  background: #edf5ff;
}

.growth-simple-flow i {
  color: #9cadbf;
  font-style: normal;
}

.growth-action-catalog {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.growth-action-catalog span {
  padding: 7px 10px;
  border: 1px solid #dce7f2;
  border-radius: 999px;
  color: #3f5975;
  background: #fff;
}

.star-compass > header > strong {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 10px;
  color: #2e665f;
  background: #e9f8f5;
}

.peer-promoted-ads-panel {
  padding: 22px;
  margin-bottom: 18px;
  border: 1px solid #cfe0f2;
  border-radius: 20px;
  background: linear-gradient(145deg, #f4f9ff, #fff);
  box-shadow: 0 16px 42px rgba(31, 55, 87, .08);
}

.peer-promoted-ads-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.peer-promoted-ads-panel > header span,
.peer-promoted-ads-evidence-heading span {
  color: var(--line-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.peer-promoted-ads-panel > header h3 { margin: 5px 0; color: var(--line-ink); }
.peer-promoted-ads-panel > header p { max-width: 880px; margin: 0; color: #66788c; line-height: 1.65; }
.peer-promoted-ads-panel > header > strong { flex: 0 0 auto; padding: 8px 10px; border-radius: 10px; color: #245b92; background: #e5f1ff; }

.peer-promoted-ads-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.peer-promoted-ads-kpis article { min-width: 0; padding: 13px; border: 1px solid #dbe7f3; border-radius: 13px; background: #fff; }
.peer-promoted-ads-kpis span,
.peer-promoted-ads-kpis strong,
.peer-promoted-ads-kpis small { display: block; }
.peer-promoted-ads-kpis span { color: #708398; font-size: 12px; }
.peer-promoted-ads-kpis strong { margin: 5px 0; color: var(--line-ink); }
.peer-promoted-ads-kpis small { color: #8191a2; line-height: 1.45; }

.peer-promoted-ads-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.peer-promoted-ads-grid > article { min-width: 0; padding: 15px; border: 1px solid #dbe7f3; border-radius: 14px; background: #fff; }
.peer-promoted-ads-list { display: grid; gap: 8px; }
.peer-promoted-ads-list > p { margin: 0; color: #718298; line-height: 1.55; }
.peer-promoted-ads-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding-bottom: 8px; border-bottom: 1px solid #edf1f6; }
.peer-promoted-ads-list-row:last-child { padding-bottom: 0; border-bottom: 0; }
.peer-promoted-ads-list-row strong { color: var(--line-ink); overflow-wrap: anywhere; }
.peer-promoted-ads-list-row b { color: #276bd8; white-space: nowrap; }
.peer-promoted-ads-list-row small { grid-column: 1 / -1; color: #8191a2; line-height: 1.45; }
.peer-promoted-ads-evidence-heading { margin: 18px 0 10px; }
.peer-promoted-ads-records { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.peer-promoted-ads-record { min-width: 0; padding: 13px; border: 1px solid #dfe9f4; border-radius: 13px; background: #fff; }
.peer-promoted-ads-record > header { display: flex; justify-content: space-between; gap: 8px; color: #718398; font-size: 12px; }
.peer-promoted-ads-record > header b { color: #2e6ec9; }
.peer-promoted-ads-record h4 { margin: 8px 0 5px; color: var(--line-ink); font-size: 15px; line-height: 1.4; }
.peer-promoted-ads-record p { margin: 0; color: #596e84; line-height: 1.5; overflow-wrap: anywhere; }
.peer-promoted-ads-record footer { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.peer-promoted-ads-record footer span,
.peer-promoted-ads-record footer b,
.peer-promoted-ads-record footer em { padding: 4px 7px; border-radius: 999px; font-size: 11px; font-style: normal; }
.peer-promoted-ads-record footer span { color: #2f5f91; background: #edf5ff; }
.peer-promoted-ads-record footer b { color: #2d6d5e; background: #e9f7f2; }
.peer-promoted-ads-record footer em { color: #9a6d2c; background: #fff3df; }
.peer-promoted-ads-boundary { margin-top: 12px; color: #718398; font-size: 12px; line-height: 1.55; }

@media (max-width: 980px) {
  .peer-promoted-ads-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .peer-promoted-ads-records { grid-template-columns: 1fr; }
}

.peer-stargazing-panel {
  padding: 22px;
  margin-bottom: 18px;
  border: 1px solid #d8e4f0;
  border-radius: 20px;
  background: linear-gradient(145deg, #f9fcff, #fff);
  box-shadow: 0 16px 42px rgba(31, 55, 87, .07);
}

.peer-stargazing-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.peer-stargazing-panel > header span,
.peer-stargazing-themes > header span {
  color: var(--line-blue);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.peer-stargazing-panel > header h3 {
  margin: 5px 0;
  color: var(--line-ink);
}

.peer-stargazing-panel > header p {
  max-width: 800px;
  margin: 0;
  color: #66788c;
  line-height: 1.65;
}

.peer-stargazing-panel > header > strong {
  flex: 0 0 auto;
  padding: 8px 10px;
  border-radius: 10px;
  color: #2e665f;
  background: #e9f8f5;
}

.peer-stargazing-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.peer-stargazing-kpis article {
  min-width: 0;
  padding: 13px;
  border: 1px solid #e0e8f2;
  border-radius: 13px;
  background: #fff;
}

.peer-stargazing-kpis span,
.peer-stargazing-kpis strong,
.peer-stargazing-kpis small {
  display: block;
}

.peer-stargazing-kpis span { color: #708398; font-size: 12px; }
.peer-stargazing-kpis strong { margin: 5px 0; color: var(--line-ink); }
.peer-stargazing-kpis small { color: #8191a2; line-height: 1.45; }

.peer-stargazing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.peer-stargazing-grid > article {
  min-width: 0;
  padding: 15px;
  border: 1px solid #e0e8f2;
  border-radius: 14px;
  background: #fff;
}

.peer-stargazing-grid .peer-section-heading { margin-bottom: 10px; }
.peer-stargazing-list { display: grid; gap: 8px; }
.peer-stargazing-list > p { margin: 0; color: #718298; line-height: 1.55; }
.peer-stargazing-subhead { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; line-height: 1.55; }
.peer-stargazing-subhead b { color: #2d5e91; }
.peer-stargazing-subhead span { color: #536a82; overflow-wrap: anywhere; }
.peer-stargazing-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding-bottom: 8px; border-bottom: 1px solid #edf1f6; }
.peer-stargazing-row:last-child { padding-bottom: 0; border-bottom: 0; }
.peer-stargazing-row strong { color: var(--line-ink); overflow-wrap: anywhere; }
.peer-stargazing-row b { color: #276bd8; white-space: nowrap; }
.peer-stargazing-row small { grid-column: 1 / -1; color: #8191a2; line-height: 1.45; }
.peer-stargazing-warning { display: flex; gap: 7px; margin: 0; color: #75634f; line-height: 1.5; }
.peer-stargazing-warning i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; color: #9a6d2c; background: #fff2d9; font-style: normal; font-weight: 800; text-align: center; }

.peer-stargazing-themes { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e5ebf3; }
.peer-stargazing-themes > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.peer-stargazing-themes > header strong { color: var(--line-ink); }
.peer-stargazing-themes > div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.peer-stargazing-themes > div span { padding: 6px 9px; border: 1px solid #dce7f2; border-radius: 999px; color: #3f5975; background: #f7fbff; font-size: 12px; }

@media (max-width: 980px) {
  .optimization-plain-grid,
  #starCompassCards,
  .peer-stargazing-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .top-tabs .tab-button {
    min-width: max-content;
  }

  .click-command-summary .positive-overview-kpis,
  .optimization-plain-grid,
  #starCompassCards,
  .peer-stargazing-kpis,
  .peer-stargazing-grid,
  .peer-promoted-ads-kpis,
  .peer-promoted-ads-grid,
  .peer-promoted-ads-records {
    grid-template-columns: 1fr;
  }

  .display-action-rail,
  .optimization-command-board > header,
  .star-compass > header {
    align-items: stretch;
    flex-direction: column;
  }

  .peer-stargazing-panel > header {
    align-items: stretch;
    flex-direction: column;
  }

  .peer-promoted-ads-panel > header {
    align-items: stretch;
    flex-direction: column;
  }

  .display-action-rail span {
    margin-left: 0;
  }

  #view-creatives .creative-kpi-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
  }

  #view-creatives .creative-kpi-strip article {
    min-height: 96px;
    padding: 12px 10px;
  }

  #view-creatives .creative-kpi-strip span,
  #view-creatives .creative-kpi-strip small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .display-action-rail button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  #view-creatives .account-profile-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #view-creatives .account-profile-chip {
    width: auto;
    overflow-wrap: anywhere;
  }
}