/* Figma 3423:9, original geometry 256 × 160. Keep SVG source dimensions intact. */
.vc-title-frame {
  --vc-frame-unit: 1;
  --vc-frame-corner-unit: 1;
  --vc-frame-bottom-extension: 0px;
  --vc-frame-bottom-extension-scale: 0;
  --vc-frame-hue-shift: 0deg;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--vc-font-body);
}

.vc-title-frame__decoration {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  filter: var(--vc-frame-decoration-filter, hue-rotate(var(--vc-frame-theme-shift, var(--vc-frame-hue-shift))));
}

.vc-title-frame__surface {
  position: absolute;
  top: calc(24px * var(--vc-frame-header-unit, var(--vc-frame-unit)));
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--vc-frame-surface-fill, linear-gradient(180deg, #00361F, #001D10));
}

.vc-title-frame__decoration::after {
  content: "";
  position: absolute;
  top: 0; right: 0; left: 0;
  height: calc(24px * var(--vc-frame-header-unit, var(--vc-frame-unit)));
  background: var(--vc-frame-header-glow, none);
  box-shadow: inset 0 -1px 0 var(--vc-frame-header-edge, transparent);
  pointer-events: none;
}

.vc-title-frame .vc-title-frame__title {
  position: relative;
  display: block;
  flex: 0 0 calc(24px * var(--vc-frame-header-unit, var(--vc-frame-unit)));
  height: calc(24px * var(--vc-frame-header-unit, var(--vc-frame-unit)));
  min-width: 0;
  margin: 0;
  padding: 0 calc(16px * var(--vc-frame-header-unit, var(--vc-frame-unit)));
  overflow: hidden;
  color: #fff;
  background: transparent;
  font-size: calc(16px * var(--vc-frame-header-unit, var(--vc-frame-unit)));
  font-weight: 700;
  line-height: calc(24px * var(--vc-frame-header-unit, var(--vc-frame-unit)));
  text-align: left;
  text-overflow: ellipsis;
  text-shadow: none;
  white-space: nowrap;
  filter: var(--vc-frame-title-filter, hue-rotate(var(--vc-frame-theme-shift, var(--vc-frame-hue-shift))));
}

/* Paint the glow first, then cover the glyphs with the gradient fill. Keeping
   text-shadow off the transparent foreground prevents it tinting the fill. */
.vc-title-frame__title::before {
  content: attr(data-title);
  position: absolute;
  z-index: 0;
  inset: 0;
  padding: inherit;
  overflow: hidden;
  color: transparent;
  text-overflow: ellipsis;
  white-space: inherit;
  text-shadow: 0 0 calc(4px * var(--vc-frame-header-unit, var(--vc-frame-unit))) var(--vc-frame-title-shadow, #1a704f);
  pointer-events: none;
}

.vc-title-frame__title-text {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(180deg, #fff, var(--vc-frame-title-end, #a5ffdd));
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
  text-overflow: ellipsis;
  white-space: inherit;
}

.vc-title-frame__asset {
  position: absolute;
  display: block;
  /* Transforms affect the slot; images retain their original width/height. */
  transform-origin: top left;
}

.vc-title-frame__asset img {
  display: block;
  max-width: none;
}

.vc-title-frame__asset--header {
  top: 0;
  right: 0;
  left: 0;
  height: calc(24px * var(--vc-frame-header-unit, var(--vc-frame-unit)));
}

.vc-title-frame__asset--header img {
  width: 100%;
  height: 100%;
}

.vc-title-frame__asset--bottom {
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) scale(var(--vc-frame-corner-unit));
}

.vc-title-frame__asset--bottom-extension-left,
.vc-title-frame__asset--bottom-extension-right {
  bottom: 0;
  width: var(--vc-frame-bottom-extension);
  height: calc(4px * var(--vc-frame-corner-unit));
  overflow: hidden;
}

.vc-title-frame__asset--bottom-extension-left {
  left: 0;
}

.vc-title-frame__asset--bottom-extension-right {
  right: 0;
}

/* Clip the original SVG's first 88 px: this segment is entirely straight.
   The complete original footer above preserves both Boolean-operation cuts. */
.vc-title-frame__asset--bottom-extension-left img,
.vc-title-frame__asset--bottom-extension-right img {
  transform-origin: top left;
  transform: scale(var(--vc-frame-bottom-extension-scale), var(--vc-frame-corner-unit));
}

.vc-title-frame__asset--bottom-center {
  bottom: 0;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) scale(var(--vc-frame-corner-unit));
}

.vc-title-frame__asset--corner-top-left,
.vc-title-frame__asset--marker-top-left {
  top: 0;
  left: 0;
  transform: scale(var(--vc-frame-corner-unit));
}

.vc-title-frame__asset--corner-top-right,
.vc-title-frame__asset--marker-top-right {
  top: 0;
  right: 0;
  transform-origin: top right;
  transform: scale(var(--vc-frame-corner-unit));
}

.vc-title-frame__asset--corner-bottom-left,
.vc-title-frame__asset--marker-bottom-left {
  bottom: 0;
  left: 0;
  transform-origin: bottom left;
  transform: scale(var(--vc-frame-corner-unit));
}

.vc-title-frame__asset--corner-bottom-right,
.vc-title-frame__asset--marker-bottom-right {
  bottom: 0;
  right: 0;
  transform-origin: bottom right;
  transform: scale(var(--vc-frame-corner-unit));
}

.vc-title-frame__asset--corner-top-left img { transform: scaleY(-1); }
.vc-title-frame__asset--corner-top-right img { transform: rotate(180deg); }
.vc-title-frame__asset--corner-bottom-right img { transform: rotate(180deg) scaleY(-1); }
.vc-title-frame__asset--marker-top-left img { transform: rotate(-90deg) scaleY(-1); }
.vc-title-frame__asset--marker-top-right img { transform: rotate(-90deg); }
.vc-title-frame__asset--marker-bottom-left img { transform: rotate(90deg); }
.vc-title-frame__asset--marker-bottom-right img { transform: rotate(90deg) scaleY(-1); }

.screen-title-panel.vc-title-frame {
  background: transparent;
  border: 0;
}

.screen-title-panel.vc-title-frame:hover {
  box-shadow: 0 0 0 1px rgba(235, 242, 250, .5);
}

.screen-title-panel.vc-title-frame.is-selected {
  box-shadow: 0 0 0 2px #ebf2fa;
}

.screen-title-panel.vc-title-frame.no-panel-surface .vc-title-frame__surface {
  display: none;
}

.screen-title-panel.vc-title-frame .screen-title-panel__body {
  padding: calc(6px * var(--vc-frame-unit));
  padding-bottom: calc(10px * var(--vc-frame-unit));
}

.title-card.vc-title-frame,
.title-card.vc-title-frame.active {
  height: auto;
  aspect-ratio: 256 / 160;
  padding: 0;
  border: 0;
  background: transparent;
}

.title-card.vc-title-frame.active {
  box-shadow: 0 0 0 2px #ebf2fa;
}

.title-card.vc-title-frame .corner-check {
  z-index: 1;
}