/* Scope the refresh to the storefront header; existing routes stay unchanged. */
#app .vault-scope > header.sticky {
  background: var(--surface, #fff) !important;
  border-color: var(--border, #e1e5f0) !important;
  box-shadow: 0 4px 22px rgb(25 42 83 / 6%);
}
#app .vault-scope > header.sticky > div { height: 104px !important; gap: 22px !important; }
#app .vault-scope > header.sticky > div > a[title] {
  flex: none; min-height: 56px; padding: 0 18px;
  border: 1px solid var(--border, #dbe2f4); border-radius: 15px;
  background: var(--surface-2, #f5f7ff); color: var(--ink, #27346a);
  font-size: 28px !important; font-weight: 850 !important; letter-spacing: -.8px;
}
#app .vault-scope > header.sticky > div > nav {
  display: flex !important; align-items: center !important; gap: 6px !important;
}
#app .vault-scope > header.sticky > div > nav > a {
  display: inline-flex !important; flex: none; align-items: center !important; justify-content: center;
  gap: 8px !important; min-width: 76px; height: 56px !important;
  margin: 0 !important; padding: 0 16px !important;
  border: 1px solid transparent !important; border-radius: 13px !important;
  box-shadow: none !important; transform: none !important;
  font-size: 18px !important; font-weight: 750 !important; line-height: 1 !important;
  white-space: nowrap; text-decoration: none;
  transition: background-color .15s, color .15s, border-color .15s;
}
/* The theme's selected utilities are important; base-layer colors take priority. */
@layer base {
#app .vault-scope > header.sticky > div > nav > a {
  background: #f2f0ff !important; color: #403b63 !important; border-color: #ddd9f5 !important;
}
#app .vault-scope > header.sticky > div > nav > a:hover {
  color: #4338ca !important; background: #e8e4ff !important; border-color: #c9c3f5 !important;
}
#app .vault-scope > header.sticky > div > nav > a.router-link-exact-active:not([data-gpt11-support-link]):not([data-gpt11-tutorial-link]) {
  color: #fff !important; background: #4f46e5 !important; border-color: #4f46e5 !important;
}
.dark #app .vault-scope > header.sticky > div > nav > a {
  color: #e8e4ff !important; background: #29263f !important; border-color: #45405f !important;
}
.dark #app .vault-scope > header.sticky > div > nav > a:hover {
  color: #fff !important; background: #373153 !important; border-color: #665b8f !important;
}
.dark #app .vault-scope > header.sticky > div > nav > a.router-link-exact-active:not([data-gpt11-support-link]):not([data-gpt11-tutorial-link]) {
  color: #fff !important; background: #4f46e5 !important; border-color: #4f46e5 !important;
}
}
#app .vault-scope > header.sticky > div > nav > a svg {
  display: block; flex: none; width: 22px !important; height: 22px !important;
}
#app .vault-scope > header.sticky > div > .ml-auto { flex: none; gap: 8px !important; }
/* Vue swaps the menu glyph on click; keep the target on its stable button. */
#app .vault-scope > header.sticky > div > .ml-auto svg { pointer-events: none; }
#app .vault-scope > header.sticky > div > .ml-auto > a[aria-label],
#app .vault-scope > header.sticky > div > .ml-auto > button,
#app .vault-scope > header.sticky > div > .ml-auto > .relative > button {
  width: 44px !important; height: 44px !important; border-radius: 13px !important;
}
#app .vault-scope > header.sticky > div > .ml-auto > a[href="/auth/login"] {
  min-height: 44px; padding: 0 18px; border-radius: 13px; font-size: 16px;
}
#app .vault-scope > header.sticky a:focus-visible,
#app .vault-scope > header.sticky button:focus-visible {
  outline: 3px solid #8b83ff; outline-offset: 3px;
}
@media (min-width: 901px) and (max-width: 1099px) {
  #app .vault-scope > header.sticky > div { height: 92px !important; gap: 12px !important; padding-inline: 18px; }
  #app .vault-scope > header.sticky > div > a[title] { font-size: 24px !important; padding-inline: 12px; }
  #app .vault-scope > header.sticky > div > nav { gap: 2px !important; }
  #app .vault-scope > header.sticky > div > nav > a {
    min-width: 58px; height: 50px !important; padding-inline: 10px !important; font-size: 16px !important; gap: 6px !important;
  }
  #app .vault-scope > header.sticky > div > nav > a svg { width: 20px !important; height: 20px !important; }
  #app .vault-scope > header.sticky > div > .ml-auto { gap: 5px !important; }
  #app .vault-scope > header.sticky > div > .ml-auto > a[aria-label],
  #app .vault-scope > header.sticky > div > .ml-auto > button,
  #app .vault-scope > header.sticky > div > .ml-auto > .relative > button { width: 40px !important; height: 40px !important; }
  #app .vault-scope > header.sticky > div > .ml-auto > a[href="/auth/login"] { padding-inline: 14px; }
}
@media (max-width: 900px) {
  #app .vault-scope > header.sticky > div {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
    height: auto !important; gap: 10px 8px !important; padding: 12px 12px 10px !important;
  }
  #app .vault-scope > header.sticky > div > a[title] {
    grid-column: 1; grid-row: 1; justify-self: start; min-height: 42px;
    padding-inline: 12px; font-size: 23px !important; border-radius: 12px;
  }
  #app .vault-scope > header.sticky > div > .ml-auto {
    grid-column: 2; grid-row: 1; margin-left: 0 !important; gap: 6px !important;
  }
  #app .vault-scope > header.sticky > div > .ml-auto > a[aria-label],
  #app .vault-scope > header.sticky > div > .ml-auto > button,
  #app .vault-scope > header.sticky > div > .ml-auto > .relative > button {
    width: 36px !important; height: 38px !important; border-radius: 11px !important;
  }
  #app .vault-scope > header.sticky > div > nav {
    grid-column: 1 / -1; grid-row: 2; display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px !important;
  }
  #app .vault-scope > header.sticky > div > nav > a { display: none !important; }
  #app .vault-scope > header.sticky > div > nav > a[href="/products"],
  #app .vault-scope > header.sticky > div > nav > a[data-gpt11-support-link],
  #app .vault-scope > header.sticky > div > nav > a[data-gpt11-tutorial-link] {
    display: inline-flex !important; min-width: 0; height: 44px !important;
    padding-inline: 6px !important; gap: 6px !important; border-radius: 11px !important; font-size: 14px !important;
  }
  #app .vault-scope > header.sticky > div > nav > a svg { display: block !important; width: 18px !important; height: 18px !important; }
  #app .vault-scope > header.sticky > div > .ml-auto .absolute a,
  #app .vault-scope > header.sticky > div > .ml-auto .absolute button { min-height: 44px; font-size: 15px; }
}
@media (max-width: 359px) {
  #app .vault-scope > header.sticky > div > a[title] { font-size: 21px !important; padding-inline: 9px; }
  #app .vault-scope > header.sticky > div > .ml-auto { gap: 4px !important; }
  #app .vault-scope > header.sticky > div > .ml-auto > a[aria-label],
  #app .vault-scope > header.sticky > div > .ml-auto > button,
  #app .vault-scope > header.sticky > div > .ml-auto > .relative > button { width: 34px !important; }
  #app .vault-scope > header.sticky > div > nav > a[href="/products"],
  #app .vault-scope > header.sticky > div > nav > a[data-gpt11-support-link],
  #app .vault-scope > header.sticky > div > nav > a[data-gpt11-tutorial-link] { font-size: 13px !important; }
}