.vc-app { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.vc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: calc(.75rem + env(safe-area-inset-top, 0px)) 1rem .75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--vc-line) 82%, transparent);
  background: color-mix(in srgb, var(--vc-bg) 86%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.vc-header__mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: transparent;
  box-shadow: var(--vc-shadow);
}
.vc-header__mark img { width: 100%; height: 100%; display: block; object-fit: cover; }
.vc-header__copy { min-width: 0; display: grid; gap: .16rem; }
.vc-header__copy h1 { margin: 0; color: var(--vc-ink); font-size: clamp(1.1rem, 3.4vw, 1.28rem); line-height: 1.02; letter-spacing: -.035em; }
.vc-header__copy p { margin: 0; color: var(--vc-muted); font-size: .78rem; font-weight: 750; line-height: 1.1; white-space: nowrap; }
.vc-header__actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.vc-header-action {
  min-width: 44px;
  height: 44px;
  border: 1px solid var(--vc-line);
  border-radius: 15px;
  background: rgba(255,255,255,.86);
  color: var(--vc-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: 0;
  box-shadow: 0 8px 24px rgba(15,23,42,.07);
  cursor: pointer;
}
.vc-header-action:focus-visible { outline: 3px solid rgba(54,171,156,.32); outline-offset: 3px; }
.vc-header-profile { color: var(--vc-brand-dark); }
.vc-header-profile svg { width: 1.25rem; height: 1.25rem; display: block; flex: 0 0 auto; }
.vc-header-profile__label { display: none; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; font-weight: 850; }
.vc-header-more { width: 44px; font-size: 1.02rem; font-weight: 900; }
.vc-header-more.is-active { background: var(--vc-mint); color: var(--vc-brand-dark); border-color: rgba(54,171,156,.24); }
@media (min-width: 480px) {
  .vc-header-profile { width: auto; max-width: 11rem; padding: 0 .7rem 0 .65rem; }
  .vc-header-profile__label { display: block; }
}
@media (max-width: 359px) {
  .vc-header { gap: .55rem; padding-inline: .75rem; }
  .vc-header__copy p { font-size: .72rem; }
}
html.vc-text-extra-large .vc-header-profile { width: 44px; padding: 0; }
html.vc-text-extra-large .vc-header-profile__label { display: none; }
.vc-main { width: min(980px, 100%); margin: 0 auto; padding: .5rem 1rem calc(16rem + var(--vc-safe-bottom)); outline: none; }
.vc-bottom-nav { position: fixed; left: 50%; bottom: calc(.75rem + var(--vc-safe-bottom)); transform: translateX(-50%); width: min(520px, calc(100% - 1.25rem)); display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; padding: .45rem; border: 1px solid rgba(221,231,229,.9); border-radius: 24px; background: rgba(255,255,255,.97); box-shadow: var(--vc-shadow); backdrop-filter: blur(18px); z-index: 60; isolation: isolate; }
.vc-tab { border: 0; background: transparent; color: var(--vc-muted); border-radius: 18px; min-height: 58px; display: grid; place-items: center; gap: .12rem; padding: .35rem .2rem; cursor: pointer; }
.vc-tab.is-active { background: var(--vc-mint); color: var(--vc-brand-dark); }
.vc-tab__icon { font-size: 1.15rem; line-height: 1; }
.vc-tab__label { font-size: .76rem; font-weight: 800; }
.vc-noscript { max-width: 42rem; margin: 3rem auto; padding: 1rem; }

/* PR14J - Preview layout guard: keep export preview clear of app navigation. */
.vc-app[data-view="preview"] .vc-bottom-nav {
  display: none;
}

.vc-app[data-view="preview"] .vc-main {
  padding-bottom: calc(2rem + var(--vc-safe-bottom));
}



/* SG-SUITE-FINISH-03: header containment at 320px and 200% zoom. */
@media screen {.vc-header,.vc-header *{box-sizing:border-box}.vc-header__copy,.vc-header__actions{min-width:0}.vc-header__copy h1,.vc-header__copy p{overflow:hidden;text-overflow:ellipsis}.vc-header-action{min-block-size:44px;min-inline-size:44px}}
@media screen and (max-width:359px){.vc-header{padding-inline:.6rem;gap:.45rem}.vc-header__mark{width:48px;height:48px;flex-basis:48px;border-radius:16px}.vc-header__copy h1{font-size:1.02rem}.vc-header__copy p{font-size:.68rem}}
@media (forced-colors:active){.vc-header-action{forced-color-adjust:auto;border:1px solid ButtonText}}