/* FIN NEXUS workbench UI release. This file is visual-only: tool buttons
   retain their existing data-tool-view hooks and workflow handlers. */
#toolkitView .toolkit-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 20px !important;
  row-gap: 24px !important;
  align-items: stretch !important;
}

body .topbar #pageTitle {
  font-size: clamp(30px, 2.6vw, 39px) !important;
}

body .topbar .topbar-primary > .product-signature {
  width: clamp(257px, 22vw, 302px) !important;
  min-width: clamp(257px, 22vw, 302px) !important;
  flex: 0 0 clamp(257px, 22vw, 302px) !important;
}

#toolkitView .tool-card {
  position: relative !important;
  isolation: isolate;
  min-width: 0 !important;
  min-height: 150px !important;
  height: 150px !important;
  overflow: hidden !important;
  /* Safari can paint a masked child outside a rounded overflow clip. Keep a
     compositor-level clip on the card so all four media corners stay inside. */
  clip-path: inset(0 round 22px);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  align-content: start !important;
  padding: 18px !important;
  border: 1px solid rgba(255, 255, 255, .82) !important;
  border-top: 3px solid rgba(255, 255, 255, .96) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(226, 240, 244, .2)) !important;
  color: #20242b !important;
  box-shadow: 0 22px 52px rgba(65, 88, 104, .2), 0 4px 12px rgba(65, 88, 104, .08), inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(147, 178, 188, .18) !important;
  backdrop-filter: blur(30px) saturate(1.5);
  text-align: left !important;
}

#toolkitView .tool-card:hover {
  border-color: rgba(255, 255, 255, .98) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(238, 246, 249, .42)) !important;
  transform: translateY(-2px);
}

#toolkitView .tool-card > * {
  position: relative;
  z-index: 2;
}

#toolkitView .tool-card::before {
  position: absolute;
  z-index: 1;
  inset: -24px;
  content: "";
  pointer-events: none;
  background: linear-gradient(118deg, rgba(84, 184, 204, .46), rgba(255, 255, 255, 0) 52%), linear-gradient(246deg, rgba(239, 168, 92, .4), rgba(255, 255, 255, 0) 65%);
  filter: blur(22px) saturate(1.35);
  opacity: .96;
  mix-blend-mode: multiply;
}

#toolkitView .tool-card > .tool-index {
  align-self: start;
  color: #8b6835 !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

#toolkitView .tool-card > strong {
  grid-row: 2;
  align-self: start;
  min-width: 0;
  max-width: 48%;
  margin: 0 !important;
  color: #20242b !important;
  font-size: 18px !important;
  line-height: 1.18 !important;
  margin-top: 8px !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .68);
}

#toolkitView .tool-card > small {
  grid-row: 3;
  min-width: 0;
  width: 48% !important;
  max-width: 48% !important;
  box-sizing: border-box;
  min-height: 0 !important;
  margin: 7px 0 0 !important;
  align-self: start;
  color: #626b76 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-shadow: 0 1px 5px rgba(255, 255, 255, .48);
}

#toolkitView .tool-card-media {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round 21px);
  transform: translateZ(0);
  opacity: .94;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 96% 122% at 78% 50%, #000 0%, rgba(0, 0, 0, .92) 42%, rgba(0, 0, 0, .52) 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 96% 122% at 78% 50%, #000 0%, rgba(0, 0, 0, .92) 42%, rgba(0, 0, 0, .52) 68%, transparent 100%);
}

#toolkitView .tool-card-media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(239, 248, 249, .9) 0%, rgba(241, 247, 247, .46) 43%, rgba(235, 243, 244, .08) 78%, rgba(255, 240, 224, 0) 100%), linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02) 56%, rgba(255, 255, 255, .56) 100%);
}

#toolkitView .tool-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border-radius: inherit;
  opacity: .72;
  filter: saturate(.86) contrast(.95) blur(.32px);
}

#brandAdView .tool-header-row > div > h1 {
  display: none !important;
}

#brandAdView .section-heading > div {
  display: block !important;
  min-width: 0;
}

#brandAdView .section-heading > div > p {
  margin: 6px 0 0 !important;
  line-height: 1.45 !important;
}

#toolkitView .tool-card:nth-child(2) .tool-card-media::after { background: linear-gradient(90deg, rgba(246, 242, 236, .95), rgba(244, 240, 234, .68) 38%, rgba(235, 243, 244, .18) 67%, rgba(255, 239, 224, .08)); }
#toolkitView .tool-card:nth-child(3) .tool-card-media::after { background: linear-gradient(90deg, rgba(246, 240, 232, .96), rgba(245, 237, 227, .68) 38%, rgba(235, 243, 244, .16) 67%, rgba(255, 239, 224, .08)); }
#toolkitView .tool-card:nth-child(4) .tool-card-media::after { background: linear-gradient(90deg, rgba(245, 239, 232, .96), rgba(244, 237, 229, .68) 38%, rgba(235, 243, 244, .16) 67%, rgba(255, 239, 224, .08)); }
#toolkitView .tool-card:nth-child(5) .tool-card-media::after { background: linear-gradient(90deg, rgba(247, 244, 239, .96), rgba(245, 240, 232, .68) 38%, rgba(235, 243, 244, .15) 67%, rgba(255, 239, 224, .08)); }
#toolkitView .tool-card:nth-child(6) .tool-card-media::after { background: linear-gradient(90deg, rgba(240, 245, 246, .95), rgba(237, 244, 245, .66) 38%, rgba(224, 239, 242, .14) 67%, rgba(255, 239, 224, .08)); }
#toolkitView .tool-card:nth-child(7) .tool-card-media::after { background: linear-gradient(90deg, rgba(243, 247, 247, .95), rgba(235, 244, 244, .65) 38%, rgba(214, 232, 234, .13) 67%, rgba(255, 239, 224, .08)); }
#toolkitView .tool-card:nth-child(8) .tool-card-media::after { background: linear-gradient(90deg, rgba(239, 246, 248, .95), rgba(230, 241, 244, .65) 38%, rgba(207, 229, 235, .13) 67%, rgba(255, 238, 218, .08)); }

/* The desktop card keeps the complete supplied scene inside the glass. */
@media (min-width: 681px) {
  #toolkitView .tool-card-media img {
    object-fit: contain;
  }
}

@media (max-width: 680px) {
  .main-content:has(#toolkitView) {
    background:
      radial-gradient(ellipse 82% 34% at 10% 8%, rgba(168, 222, 235, .46), transparent 72%),
      radial-gradient(ellipse 72% 42% at 92% 96%, rgba(247, 201, 159, .42), transparent 74%),
      linear-gradient(135deg, #e9edf1 0%, #eef1f3 52%, #f4eeeb 100%) !important;
  }

  .main-content {
    padding-bottom: 104px !important;
  }

  #toolkitView {
    margin-top: 18px !important;
  }

  .topbar {
    min-height: 108px !important;
    padding-top: max(50px, calc(20px + env(safe-area-inset-top))) !important;
  }

  .topbar #pageTitle {
    max-width: 34vw !important;
    font-size: 26px !important;
    line-height: 1.08 !important;
  }

  body .topbar #pageTitle {
    font-size: 26px !important;
  }

  body .topbar .topbar-primary > .mobile-brand-lockup {
    width: 164px !important;
    flex: 0 0 164px !important;
  }

  .sidebar {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    height: 96px !important;
    padding: 4px 12px !important;
    border-top: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .nav-list {
    height: 88px !important;
    gap: 9px !important;
    padding: 9px 5px max(9px, env(safe-area-inset-bottom)) !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    border-radius: 17px !important;
    background: rgba(255, 255, 255, .42) !important;
    box-shadow: 0 10px 24px rgba(65, 88, 104, .14), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(24px) saturate(1.35);
  }

  .admin-user .nav-list,
  .partner-user .nav-list { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }

  .nav-item {
    min-height: 68px !important;
    border-radius: 12px !important;
    gap: 6px !important;
    font-size: 13px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #66717c !important;
    box-shadow: none !important;
  }

  .nav-item:hover { background: rgba(255, 255, 255, .32) !important; }
  .nav-item.active {
    border-color: rgba(138, 99, 45, .26) !important;
    background: rgba(173, 123, 50, .18) !important;
    color: #26313a !important;
    box-shadow: 0 4px 12px rgba(138, 99, 45, .14) !important;
  }
  .nav-item > span:nth-child(2) {
    display: block !important;
    white-space: nowrap;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  .nav-icon {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    margin: 0 auto 3px;
    border: 1px solid rgba(138, 99, 45, .22);
    border-radius: 8px;
    background: rgba(173, 123, 50, .1);
    color: #77521f;
    font-size: 22px !important;
    font-weight: 750;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, .8);
  }
  .nav-item.active .nav-icon { border-color: rgba(138, 99, 45, .34); background: rgba(173, 123, 50, .24); color: #4f3515; }

  #toolkitView .toolkit-grid {
    height: min(66dvh, calc(100dvh - 252px)) !important;
    column-gap: clamp(12px, 2.6vw, 16px) !important;
    row-gap: clamp(16px, 2.6vh, 22px) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  }

  #toolkitView .tool-card {
    min-height: 0 !important;
    height: 100% !important;
    padding: 11px !important;
    border-radius: 15px !important;
    clip-path: inset(0 round 15px);
  }

  #toolkitView .tool-card-media {
    inset: 2px !important;
    border-radius: 12px !important;
    clip-path: inset(0 round 12px);
  }

  #toolkitView .tool-card.brand-ad-tool {
    padding: 11px !important;
  }

  #toolkitView .tool-card > .tool-index {
    font-size: 9px !important;
    letter-spacing: .65px;
  }

  #toolkitView .tool-card > strong {
    max-width: 64%;
    margin-top: 8px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }

  #toolkitView .tool-card > small {
    width: 72% !important;
    max-width: 72% !important;
    margin-top: 6px !important;
    font-size: 9px !important;
    line-height: 1.22 !important;
    min-height: 3.66em !important;
    text-wrap: pretty;
    display: block !important;
    overflow: visible !important;
    -webkit-box-orient: initial !important;
    -webkit-line-clamp: unset !important;
  }

  #toolkitView .tool-card-media img {
    object-fit: contain;
    opacity: .74;
  }

  #toolkitView .geo-card-proof {
    right: 10px;
    bottom: 9px;
    max-width: 44%;
    font-size: 7.5px;
  }

  #toolkitView .geo-card-proof b { font-size: 9px; }

  #brandAdView .section-heading,
  #brandAdView .section-heading > div {
    align-items: flex-start !important;
    text-align: left !important;
  }
}

/* Card identity belongs inside GEO, not on every workbench card. Keep the
   original eight cards visually clean and give every description the same
   two-line measure on desktop and mobile. */
#toolkitView .tool-card > .tool-card-logo { display: none !important; }
#toolkitView .tool-card:not(.geo-tool) > strong,
#toolkitView .tool-card:not(.geo-tool) > small { padding-left: 0 !important; }
#toolkitView .tool-card:not(.geo-tool) > strong { max-width: 72% !important; }
#toolkitView .tool-card:not(.geo-tool) > small {
  width: 72% !important;
  max-width: 72% !important;
  min-height: 2.9em !important;
  max-height: 2.9em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

@media (max-width: 680px) {
  #toolkitView .tool-card:not(.geo-tool) > strong { max-width: 88% !important; }
  #toolkitView .tool-card:not(.geo-tool) > small {
    width: 90% !important;
    max-width: 90% !important;
    min-height: 2.44em !important;
    max-height: 2.44em !important;
    line-height: 1.22 !important;
  }
}

@media (max-width: 380px) {
  body .topbar #pageTitle {
    font-size: 22px !important;
  }

  #toolkitView {
    margin-top: 20px !important;
  }

  .topbar #pageTitle {
    max-width: 38vw !important;
    font-size: 22px !important;
    letter-spacing: 0 !important;
  }

  body .topbar .topbar-primary > .mobile-brand-lockup {
    width: 132px !important;
    flex: 0 0 132px !important;
  }

  .topbar {
    min-height: 104px !important;
    padding-top: max(46px, calc(16px + env(safe-area-inset-top))) !important;
  }

  #toolkitView .toolkit-grid {
    height: calc(100dvh - 240px) !important;
    column-gap: 10px !important;
    row-gap: 15px !important;
  }

  #toolkitView .tool-card {
    padding: 8px !important;
    border-radius: 13px !important;
    clip-path: inset(0 round 13px);
  }

  #toolkitView .tool-card-media {
    border-radius: 10px !important;
    clip-path: inset(0 round 10px);
  }

  #toolkitView .tool-card.brand-ad-tool { padding: 8px !important; }
  #toolkitView .tool-card > strong { max-width: 82%; min-height: 2.32em; font-size: 13px !important; line-height: 1.16 !important; }
  #toolkitView .tool-card > small { width: 82% !important; max-width: 82% !important; margin-top: 4px !important; font-size: 8.5px !important; line-height: 1.18 !important; }
}

/* Final card cleanup: only the GEO detail page carries the shared logo. */
#toolkitView .tool-card > .tool-card-logo { display: none !important; }
#toolkitView .tool-card:not(.geo-tool) > strong,
#toolkitView .tool-card:not(.geo-tool) > small { padding-left: 0 !important; }
#toolkitView .tool-card:not(.geo-tool) > strong { max-width: 72% !important; }
#toolkitView .tool-card:not(.geo-tool) > small {
  width: 72% !important;
  max-width: 72% !important;
  min-height: 2.9em !important;
  max-height: 2.9em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
@media (max-width: 680px) {
  #toolkitView .tool-card:not(.geo-tool) > strong { max-width: 88% !important; }
  #toolkitView .tool-card:not(.geo-tool) > small {
    width: 90% !important;
    max-width: 90% !important;
    min-height: 2.44em !important;
    max-height: 2.44em !important;
    line-height: 1.22 !important;
  }
}

/* The ninth tool expresses a brand knowledge network without platform-logo clutter. */
#toolkitView .geo-card-visual { overflow: hidden; background: radial-gradient(circle at 48% 46%, rgba(255,255,255,.97) 0 13%, rgba(214,232,226,.74) 14% 27%, rgba(232,241,237,.55) 28% 58%, rgba(248,249,246,.15) 59%); }
#toolkitView .geo-card-visual::before { content: ""; position: absolute; inset: 16% 18%; border: 1px solid rgba(42,121,88,.22); border-radius: 50%; transform: rotate(-18deg); }
#toolkitView .geo-card-visual::after { content: ""; position: absolute; inset: 30% 8%; border-top: 1px solid rgba(42,121,88,.18); border-bottom: 1px solid rgba(42,121,88,.12); border-radius: 50%; transform: rotate(16deg); }
#toolkitView .geo-core { position: absolute; left: 50%; top: 45%; z-index: 3; display: grid; place-items: center; width: 54px; height: 54px; transform: translate(-50%,-50%); color: #fff; background: linear-gradient(145deg,#2f9b71,#15573a); border: 5px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 7px 20px rgba(31,102,74,.28); font-size: 23px; font-weight: 760; }
#toolkitView .geo-node { position: absolute; z-index: 4; padding: 4px 7px; color: #265b47; background: rgba(255,255,255,.72); border: 1px solid rgba(46,119,87,.24); border-radius: 7px; box-shadow: 0 3px 8px rgba(45,87,68,.08); font-size: 8px; line-height: 1; white-space: nowrap; }
#toolkitView .geo-node-a { left: 12%; top: 22%; } #toolkitView .geo-node-b { right: 9%; top: 18%; } #toolkitView .geo-node-c { left: 7%; bottom: 18%; } #toolkitView .geo-node-d { right: 8%; bottom: 24%; } #toolkitView .geo-node-e { left: 42%; bottom: 8%; }
#toolkitView .geo-link { position: absolute; z-index: 2; left: 50%; top: 45%; height: 1px; width: 39%; transform-origin: left center; background: rgba(43,117,84,.28); }
#toolkitView .geo-link-a { transform: rotate(214deg); } #toolkitView .geo-link-b { transform: rotate(328deg); } #toolkitView .geo-link-c { transform: rotate(150deg); }
#toolkitView .tool-card > .geo-card-visual .geo-core,
#toolkitView .tool-card > .geo-card-visual .geo-node,
#toolkitView .tool-card > .geo-card-visual .geo-link { position: absolute !important; }
#toolkitView .tool-card > .geo-card-visual .geo-core { z-index: 3 !important; }
#toolkitView .tool-card > .geo-card-visual .geo-node { z-index: 4 !important; }
#toolkitView .tool-card > .geo-card-visual .geo-link { z-index: 2 !important; }
#toolkitView .geo-tool > strong { max-width: 78%; }
#toolkitView .geo-tool > small { max-width: 78%; }
@media (max-width: 680px) { #toolkitView .geo-core { width: 42px; height: 42px; font-size: 18px; border-width: 4px; } #toolkitView .geo-node { padding: 3px 5px; font-size: 7px; } }

@media (min-width: 381px) and (max-width: 680px) {
  .topbar {
    min-height: 108px !important;
    padding-top: max(50px, calc(20px + env(safe-area-inset-top))) !important;
  }
}

/* GEO is the cross-workflow entry: keep it as the first, full-width row while
   the eight existing creation tools retain their original two-column rhythm. */
@media (min-width: 681px) {
  #toolkitView .toolkit-grid {
    grid-template-rows: 112px repeat(4, 126px) !important;
    row-gap: 12px !important;
  }
  #toolkitView .tool-card {
    min-height: 126px !important;
    height: 126px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }
  #toolkitView .tool-card.geo-tool {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 112px !important;
    height: 112px !important;
    padding: 14px 22px !important;
  }
  #toolkitView .geo-tool > strong,
  #toolkitView .geo-tool > small { max-width: 43% !important; width: 43% !important; }
  #toolkitView .geo-tool > strong { font-size: 20px !important; margin-top: 4px !important; }
  #toolkitView .geo-tool > small { font-size: 11px !important; margin-top: 4px !important; line-height: 1.35 !important; }
  #toolkitView .geo-tool .geo-card-visual {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 34%, #000 58%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.4) 34%, #000 58%, #000 100%);
  }
}

@media (max-width: 680px) {
  #toolkitView .toolkit-grid {
    grid-template-rows: 92px repeat(4, minmax(0, 1fr)) !important;
    height: min(72dvh, calc(100dvh - 214px)) !important;
    row-gap: 10px !important;
  }
  #toolkitView .tool-card.geo-tool {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    min-height: 92px !important;
    height: 92px !important;
    padding: 10px 13px !important;
  }
  #toolkitView .geo-tool > strong,
  #toolkitView .geo-tool > small { max-width: 56% !important; width: 56% !important; }
  #toolkitView .geo-tool > strong { font-size: 14px !important; margin-top: 3px !important; }
  #toolkitView .geo-tool > small { font-size: 8.5px !important; line-height: 1.22 !important; margin-top: 3px !important; }
}

/* Brand-ad page layout repair. Keep this page-specific so the shared
   workflow markup and the other creation tools keep their existing rhythm. */
#brandAdView {
  min-width: 0;
  overflow-x: clip;
}

#brandAdView .commerce-studio-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 372px) !important;
  align-items: start !important;
}

/* Card identity and mobile navigation polish. The index labels are removed
   from markup; the real FIN NEXUS mark now anchors every workflow card. */
#toolkitView .tool-card > .tool-card-logo {
  position: absolute !important;
  z-index: 3 !important;
  top: 14px !important;
  left: 14px !important;
  display: grid !important;
  place-items: center !important;
  width: 25px !important;
  height: 25px !important;
  padding: 4px !important;
  border: 1px solid rgba(255, 255, 255, .86) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .66) !important;
  box-shadow: 0 3px 10px rgba(65, 88, 104, .12) !important;
}
#toolkitView .tool-card > .tool-card-logo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  opacity: .9 !important;
  mix-blend-mode: multiply;
}
#toolkitView .tool-card > .tool-index { display: none !important; }
#toolkitView .tool-card:not(.geo-tool) > strong,
#toolkitView .tool-card:not(.geo-tool) > small { padding-left: 34px !important; }

@media (max-width: 680px) {
  /* Keep the persistent menu above every workflow view, including long forms. */
  .sidebar {
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 50 !important;
    display: flex !important;
    visibility: visible !important;
  }
  .main-content { padding-bottom: 116px !important; }
  #toolkitView .tool-card > .tool-card-logo { top: 9px !important; left: 9px !important; width: 21px !important; height: 21px !important; padding: 3px !important; border-radius: 7px !important; }
  #toolkitView .tool-card > strong { max-width: 88% !important; margin-top: 3px !important; font-size: 13px !important; line-height: 1.18 !important; }
  #toolkitView .tool-card > small { width: 90% !important; max-width: 90% !important; min-height: 0 !important; max-height: 2.5em !important; margin-top: 4px !important; font-size: 8px !important; line-height: 1.22 !important; overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; }
  #toolkitView .tool-card:not(.geo-tool) > strong,
  #toolkitView .tool-card:not(.geo-tool) > small { padding-left: 29px !important; }
}

#brandAdView .media-column {
  min-width: 0 !important;
  padding-top: 27px;
}

#brandAdView .media-column > .section-heading,
#brandAdView .commerce-control-panel > .section-heading {
  min-width: 0;
  min-height: 47px;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 14px;
  margin: 0 0 14px !important;
  text-align: left !important;
}

#brandAdView .section-heading > .step-number {
  flex: 0 0 24px;
  padding-top: 2px;
}

#brandAdView .section-heading > div {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left !important;
}

#brandAdView .section-heading h2 {
  white-space: nowrap;
}

#brandAdView .section-heading p {
  max-width: 100%;
  margin: 6px 0 0 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
}

#brandAdView .commerce-control-panel {
  min-width: 0;
  box-sizing: border-box;
}

#brandAdView .commerce-control-panel .field-label,
#brandAdView .commerce-control-panel .field-label-row,
#brandAdView .commerce-control-panel .text-input,
#brandAdView .commerce-control-panel .option-checks,
#brandAdView .commerce-control-panel .control-summary,
#brandAdView .commerce-control-panel .generate-button,
#brandAdView .commerce-control-panel .reset-button {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#brandAdView .commerce-control-panel .option-checks label {
  min-width: 0;
  overflow-wrap: anywhere;
}

#brandAdView .commerce-control-panel .control-summary strong {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

@media (max-width: 680px) {
  #brandAdView {
    padding-bottom: 20px;
  }

  #brandAdView .tool-header-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px 12px;
  }

  #brandAdView .tool-header-row > div {
    min-width: 0;
    flex: 1 1 220px;
  }

  #brandAdView .tool-header-row > .secondary-button {
    flex: 0 0 auto;
  }

  #brandAdView .commerce-studio-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  #brandAdView .media-column {
    gap: 14px !important;
    padding-top: 0;
  }

  #brandAdView .media-column > .section-heading,
  #brandAdView .commerce-control-panel > .section-heading {
    min-height: 0;
    gap: 10px;
    margin-bottom: 12px !important;
  }

  #brandAdView .section-heading h2 {
    font-size: 18px;
  }

  #brandAdView .section-heading p {
    font-size: 11px;
  }

  #brandAdView .commerce-dropzone {
    min-height: 220px;
  }

  #brandAdView .commerce-control-panel {
    position: static;
    width: 100%;
    padding: 16px;
  }

  #brandAdView .commerce-control-panel .field-label-row {
    align-items: center;
    gap: 8px;
  }

  #brandAdView .commerce-control-panel .field-label-row .field-label {
    min-width: 0;
    flex: 1 1 auto;
  }

  #brandAdView .commerce-control-panel .draft-button {
    flex: 0 0 auto;
  }

  #brandAdView .commerce-control-panel .generate-button,
  #brandAdView .commerce-control-panel .reset-button {
    width: 100%;
  }
}

@media (max-width: 380px) {
  #brandAdView .tool-header-row {
    gap: 8px;
  }

  #brandAdView .tool-header-row > div {
    flex-basis: 100%;
  }

  #brandAdView .tool-header-row > .secondary-button {
    width: 100%;
  }

  #brandAdView .commerce-control-panel {
    padding: 14px;
  }

  #brandAdView .commerce-dropzone {
    min-height: 196px;
  }

  #brandAdView .section-heading h2 {
    font-size: 17px;
  }

  #brandAdView .section-heading p {
    font-size: 10px;
  }
}

/* Final card cleanup: only the GEO detail page carries the shared logo. */
#toolkitView .tool-card > .tool-card-logo { display: none !important; }
#toolkitView .tool-card:not(.geo-tool) > strong,
#toolkitView .tool-card:not(.geo-tool) > small { padding-left: 0 !important; }
#toolkitView .tool-card:not(.geo-tool) > strong { max-width: 72% !important; }
#toolkitView .tool-card:not(.geo-tool) > small {
  width: 72% !important;
  max-width: 72% !important;
  min-height: 2.9em !important;
  max-height: 2.9em !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}
@media (max-width: 680px) {
  #toolkitView .tool-card:not(.geo-tool) > strong { max-width: 88% !important; }
  #toolkitView .tool-card:not(.geo-tool) > small {
    width: 90% !important;
    max-width: 90% !important;
    min-height: 2.44em !important;
    max-height: 2.44em !important;
    line-height: 1.22 !important;
  }
}