/* 添加顶部导航栏样式 */
 .top-nav {
   /* position: absolute; */
   margin-top: 30px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: space-around;
   width: 100%;
   /* align-items: center; */

 }


 .zz {
   display: flex;
   height: 80vh;
   width: 100%;
   flex-direction: column;
   /* justify-content: space-between; */
   align-items: center;

 }

 .zz4 {
   display: flex;
   height: 100vh;
   width: 100%;
   flex-direction: column;
   /* justify-content: space-between; */
   align-items: center;

 }

 @font-face {
   font-family: 'SD Auto Pilot';
   src: url('./fonts/SD-Auto-Pilot.woff2') format('woff2'),
     url('./fonts/SD-Auto-Pilot.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'mm';
   src: url('./fonts/mm.ttf') format('truetype');

   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'zz';
   src: url('./fonts/kuchibue.ttf') format('truetype');

   font-weight: normal;
   font-style: normal;
   font-display: swap;
 }

 .zz1 {


   position: relative;
   /* margin-top: 20%; */

   display: flex;


   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

 .zz2 {


   position: relative;
   height: 90vh;

   display: flex;
   justify-content: center;
   align-items: center;
 }

 model-viewer {
   width: 80vw;
   height: 30vh;

 }

 .upm {

   position: absolute;
   bottom: 30px;

   width: 100%;

   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-around;

 }




 .tg {


   height: 35px
 }

 #my-vue-app {

   position: absolute;
   top: 0px;


   width: 100%;
   /* height: 80%; */


   z-index: 999 !important
 }


 #popup-container {
   /* display: none; */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, 10%);
   width: 80vw;
   aspect-ratio: 0.58;


   background: url("./imgs/dio/01.png") center / contain no-repeat;

   z-index: 1000;

 }

 #popup {
   width: 90%;

   height: 30px;
   display: flex;
   justify-content: space-between;
   /* align-items: center; */
   margin: 10px auto
 }

 #popup .bubble {
   position: relative;
   height: 30px;
   /* 03.png 高度 */
   background: url("./imgs/dio/03.png") no-repeat;
   background-size: 100% 100%;
   /* 宽度变化时把背景拉伸 */
 }

 #popup .bubble-input {
   position: absolute;
   inset: 0;
   /* 覆盖整个 bubble */
   /* padding: 0 18px; */
   /* margin-top: 10px; */
   /* 让文字别贴边，自己调 */
   font-size: 25px;
   line-height: 30px;
   height: 30px;
   color: #767676;
   font-family: 'zz', sans-serif;
   background: transparent;
   /* 不要 input 自己的底色 */
   border: none;
   /* 不要边框 */
   outline: none;
   /* 不要 focus 外框 */

   caret-color: #000;
   /* 只保留这一个光标闪烁 */
 }


 .kkklll {

   width: 85%;


   height: 100%;

   margin: 0 auto;
   inset: 0;
   /* 覆盖整个 bubble */
   padding: 0 18px;
   /* 让文字别贴边，自己调 */
   font-size: 16px;
   line-height: 18px;
   color: #71706E;
   font-family: 'mm', sans-serif;
   background: transparent;
   /* 不要 input 自己的底色 */
   border: none;
   /* 不要边框 */
   outline: none;
   /* 不要 focus 外框 */

   caret-color: #000;
 }

 #popup .bubble-measure {
   position: absolute;
   left: -99999px;
   /* 放到屏幕外测量 */
   top: 0;
   white-space: pre;
   /* 保留空格宽度 */
   font-size: 16px;
   line-height: 40px;
   padding: 0 18px;
   /* 与 input 一致 */
   visibility: hidden;
 }

 .containerz {
   position: relative;
   margin-top: 10%;
   display: flex;
   justify-content: center;
   align-items: center;
   /* 垂直居中 */
 }

 .containerp {
   position: relative;
   display: flex;

   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   /* 垂直居中 */
 }


 .open {
   /* 收起状态：高度为 0，不显示内容 */
   max-height: 0;
   overflow: hidden;
   /* 收起时隐藏内容 */
   transition: max-height 1s ease;
 }

 .containerz img {
   width: 80%;
 }


 .zzk {

   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /* z-index: -1; */

 }

 .avatar-wrapper {
   width: 95px;
   height: 78px;
   /* border-radius: 70%; */
   margin-right: 65px;
   overflow: hidden;
   /* 关键：隐藏超出部分 */
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .avatar-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* 关键：保持比例并裁剪填充 */
 }

 .mkn {

   font-size: 15px;
   z-index: 999;
   color: #636363;
   font-family: 'mm', sans-serif;



 }

 .overlay-input {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;

   /* 输入框样式 */
   width: 48%;
   /* 可根据需要调整宽度 */
   height: 80px;
   background: transparent;
   /* 透明背景 */
   border: none;
   /* 白色边框（可根据图片风格调整） */
   border-radius: 8px;
   font-family: 'SD Auto Pilot', sans-serif;
   /* 圆角可选 */
   /* color: white; */
   /* 文字颜色，建议与图片对比明显 */
   font-size: 50px;
   text-align: center;
   outline: none;

   /* 去掉聚焦时的默认轮廓 */
   padding: 0;
   /* 高度由 height 控制，避免 padding 干扰 */
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;

   /* 确保 width/height 包含 border */
 }


 .sdeleteIcon {


   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: none;
   z-index: 999
 }

 .sdeleteIconz {


   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: none;

   font-family: 'SD Auto Pilot', sans-serif;

   font-size: 80px;
   color: white;
   z-index: 999
 }

 .overlay-inputz {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
   font-family: 'SD Auto Pilot', sans-serif;

   /* 输入框样式 */
   width: 48%;
   /* 可根据需要调整宽度 */
   height: 80px;


   /* 圆角可选 */
   /* color: white; */
   /* 文字颜色，建议与图片对比明显 */
   font-size: 50px;
   text-align: center;
   line-height: 80px;


 }

 .overlay-inputr {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
   font-family: 'SD Auto Pilot', sans-serif;

   /* 输入框样式 */
   width: 48%;
   /* 可根据需要调整宽度 */
   height: 80px;


   /* 圆角可选 */
   /* color: white; */
   /* 文字颜色，建议与图片对比明显 */
   font-size: 40px;
   text-align: center;
   line-height: 80px;


 }

 .mtitle {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
   /* font-size: 60px; */
   font-family: 'SD Auto Pilot', sans-serif;

 }

 /* 聚焦时的样式（可选） */
 .overlay-input:focus {
   border-color: #fff;
 }