/* Figma 3427:24, original frame 256 × 160. SVG sources remain unmodified. */
.vc-stripe-title-frame {
  --vc-stripe-unit: 1;
  --vc-stripe-width-scale: 1;
  --vc-stripe-side-unit: 1;
  --vc-stripe-corner-unit: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: var(--vc-font-body);
}

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

.vc-stripe-title-frame__surface {
  position: absolute;
  inset: 0;
  background: transparent;
}

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

/* Keep all ornaments in their original slots; only the content-area fill
   starts below the header, matching the other two title frames. */
.vc-stripe-title-frame__surface::before {
  content: "";
  position: absolute;
  top: calc(24px * var(--vc-stripe-header-unit, var(--vc-stripe-unit)));
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--vc-stripe-surface-fill, linear-gradient(180deg, #00361F, #001D10));
}

.vc-stripe-title-frame__header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: calc(24px * var(--vc-stripe-header-unit, var(--vc-stripe-unit)));
  overflow: hidden;
  background-image:
    var(--vc-stripe-header-radial, url("data:image/svg+xml;utf8,<svg viewBox='0 0 256 24' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect x='0' y='0' height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(3.6164 -2.4 4.6019 6.0946 50.043 24)'><stop stop-color='rgba(3,150,113,0.5)' offset='0'/><stop stop-color='rgba(32,115,69,0)' offset='1'/></radialGradient></defs></svg>")),
    linear-gradient(96.08852804051371deg, var(--vc-stripe-header-start, #1b7360), var(--vc-stripe-header-end, #063f30));
  box-shadow: inset 0 0 calc(16px * var(--vc-stripe-header-unit, var(--vc-stripe-unit))) var(--vc-stripe-header-shadow, rgba(4, 91, 53, .5));
}

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

.vc-stripe-title-frame__title::before {
  content: attr(data-title);
  position: absolute;
  inset: 0;
  padding: inherit;
  overflow: hidden;
  color: transparent;
  white-space: inherit;
  text-overflow: ellipsis;
  text-shadow: 0 0 calc(2px * var(--vc-stripe-header-unit, var(--vc-stripe-unit))) var(--vc-stripe-title-shadow, #014527);
}

.vc-stripe-title-frame__title-text {
  position: relative;
  display: block;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(180deg, var(--vc-stripe-title-start, #c5ffdf), var(--vc-stripe-title-end, #9bffc7));
  background-clip: text;
  -webkit-background-clip: text;
  text-overflow: ellipsis;
}

.vc-stripe-title-frame__asset {
  position: absolute;
  display: block;
  transform-origin: top left;
}

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

.vc-stripe-title-frame__asset--header-pattern {
  top: 0;
  left: 0;
  transform: scale(var(--vc-stripe-width-scale), var(--vc-stripe-header-unit, var(--vc-stripe-unit)));
}

.vc-stripe-title-frame__asset--header-left {
  top: 0;
  left: 0;
  transform: scale(var(--vc-stripe-header-unit, var(--vc-stripe-unit)));
}

.vc-stripe-title-frame__asset--title-icon {
  top: calc(4px * var(--vc-stripe-header-unit, var(--vc-stripe-unit)));
  left: calc(8px * var(--vc-stripe-header-unit, var(--vc-stripe-unit)));
  transform: scale(var(--vc-stripe-header-unit, var(--vc-stripe-unit)));
}

.vc-stripe-title-frame__custom-icon {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  width: 16px;
  height: 16px;
  background: linear-gradient(180deg, var(--vc-stripe-title-start, #c5ffdf), var(--vc-stripe-title-end, #9bffc7));
  -webkit-mask: var(--vc-stripe-custom-icon) center / contain no-repeat;
  mask: var(--vc-stripe-custom-icon) center / contain no-repeat;
}

.vc-stripe-title-frame__asset--title-icon.has-custom-icon > img { visibility: hidden; }
.vc-stripe-title-frame__asset--title-icon.has-custom-icon > .vc-stripe-title-frame__custom-icon { display: block; }

.vc-stripe-title-frame__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 256px;
  height: 4px;
  transform: scale(var(--vc-stripe-width-scale), var(--vc-stripe-unit));
  transform-origin: bottom left;
}

.vc-stripe-title-frame__asset--bottom { bottom: 0; left: 0; }
.vc-stripe-title-frame__asset--bottom-center { bottom: 0; left: 56px; }

.vc-stripe-title-frame__side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(4px * var(--vc-stripe-side-unit));
}

.vc-stripe-title-frame__side--left { left: 0; }
.vc-stripe-title-frame__side--right { right: 0; }

.vc-stripe-title-frame__side::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(3px * var(--vc-stripe-side-unit));
  background-image:
    var(--vc-stripe-side-radial-start, url("data:image/svg+xml;utf8,<svg viewBox='0 0 3 160' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0.2 -9.6917e-15 -2.6167e-12 0.89225 1.1897e-7 80)'><stop stop-color='rgba(64,255,150,0.5)' offset='0'/><stop stop-color='rgba(64,255,150,0)' offset='1'/></radialGradient></defs></svg>")),
    var(--vc-stripe-side-radial-end, url("data:image/svg+xml;utf8,<svg viewBox='0 0 3 160' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><rect height='100%' width='100%' fill='url(%23grad)'/><defs><radialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(-0.2 3.3695e-7 -0.0000060129 -0.89225 3 80)'><stop stop-color='rgba(64,255,150,0.5)' offset='0'/><stop stop-color='rgba(64,255,150,0)' offset='1'/></radialGradient></defs></svg>")),
    linear-gradient(180deg, var(--vc-stripe-side-fade, rgba(55, 123, 93, 0)), var(--vc-stripe-side-center, #118955) 50%, var(--vc-stripe-side-fade, rgba(55, 123, 93, 0)));
}

.vc-stripe-title-frame__side--left::before { left: 0; }
.vc-stripe-title-frame__side--right::before { right: 0; }

.vc-stripe-title-frame__asset--left-glow {
  top: calc(40px * var(--vc-stripe-side-unit));
  bottom: calc(40px * var(--vc-stripe-side-unit));
  left: 0;
  width: calc(4px * var(--vc-stripe-side-unit));
}

.vc-stripe-title-frame__left-glow-part {
  position: absolute;
  left: 0;
  width: 4px;
  height: 24px;
  overflow: hidden;
  transform: scale(var(--vc-stripe-side-unit));
  transform-origin: top left;
}

.vc-stripe-title-frame__left-glow-part--upper { top: 0; }
.vc-stripe-title-frame__left-glow-part--lower { bottom: 0; transform-origin: bottom left; }
.vc-stripe-title-frame__left-glow-part > img { position: absolute; top: 0; left: 0; }
.vc-stripe-title-frame__left-glow-part--lower > img {
  top: -56px;
}

.vc-stripe-title-frame__asset--right-upper-glow {
  top: calc(40px * var(--vc-stripe-side-unit));
  left: 0;
  transform: scale(var(--vc-stripe-side-unit)) rotate(90deg) scaleY(-1);
}

.vc-stripe-title-frame__asset--right-lower-glow {
  top: calc(100% - 40px * var(--vc-stripe-side-unit));
  left: 0;
  transform: scale(var(--vc-stripe-side-unit)) rotate(-90deg);
}

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

.vc-stripe-title-frame__asset--corner-bottom-left { left: 0; transform-origin: bottom left; }
.vc-stripe-title-frame__asset--corner-bottom-right { right: 0; transform-origin: bottom right; }

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

.screen-title-panel.vc-stripe-title-frame .screen-title-panel__title {
  text-align: left;
}

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

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

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

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

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

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

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