body{
          background-image: url(/public/template/moyiming/static/image/bg9.webp);
          background-size: cover;
          background-position: center;
          background-attachment: fixed;
       }
       .page{
         max-width: 2345px;
         margin: auto;
       }
        @font-face {
         font-family: 'YiShanBeiZhuanTi';
         src: url('/public/lib/font/YiShanBeiZhuanTi.ttf') format('truetype');
         font-weight: normal;
         font-style: normal;
         font-display: swap; /* 可选，控制字体加载期间的显示行为 */
       }
       .zhuan-text {  
         writing-mode: vertical-rl; /* 垂直书写，从右到左 */
         text-orientation: upright; /* 保持文字直立 */
         line-height: 1.2; /* 调整行间距 */
         font-family: 'YiShanBeiZhuanTi', serif;
         
       }
        .weblogo{
            width: 150px;
        }
        .nodata h5{
           font-size:0.98rem;
           margin-top: 0.66rem;
        }
        .nodata img{
           border-radius: 1rem;
           width: 12.34rem; 
           height: auto;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .ink-effect {
            position: relative;
        }

        .ink-effect::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--color-primary);
            transform: scaleX(0);
            transform-origin: bottom right;
            transition: transform 0.3s ease-out;
        }

        .ink-effect:hover::after {
            transform: scaleX(1);
            transform-origin: bottom left;
        }

        .scroll-section {
            scroll-margin-top: 100px;
        }

        .name-card:hover {
            transform: translateY(-8px);
            /*box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);*/
        }

        .cloud-bg {
            background-image: url('/public/template/moyiming/static/image/inbanner.jpg');
            background-size: cover;
            background-position: center;
        }
        
        .category-icon {
            width: 99px;
            height: 99px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background-color: rgba(166, 56, 43, 0.1);
            margin: 0 auto;
        }
        /*印章*/
        .seal-container {
          position: relative;
          width: 300px;
          height: 300px;
          margin: 0 auto;
        }
        .seal-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Ma Shan Zheng', serif;
          color: #A62F23;
          font-size: 48px;
          white-space: nowrap;
        }
        .seal-border {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 8px solid #A62F23;
          border-radius: 50%;
        }
        .seal-pattern {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-image: url('https://ai-public.mastergo.com/ai/img_res/39241187ffafcb6441bd22f671aa0147.jpg');
          background-size: cover;
          opacity: 0.05;
          mix-blend-mode: multiply;
        }
        #seal-preview{
          border: 10px solid #a62f23;
        }
        /* 自定义滚动条样式 */
        /* WebKit 浏览器 (Chrome, Safari, Edge) */
        ::-webkit-scrollbar {
            width: 0;
            /* 滚动条宽度 */
            height: 0;
            /* 水平滚动条高度 */
        }

        ::-webkit-scrollbar-track {
            background: transparent;
            /* 轨道透明，使内容可见 */
        }

        ::-webkit-scrollbar-thumb {
            background-color: rgba(0, 0, 0, 0.5);
            /* 滚动条滑块颜色 */
            border-radius: 4px;
            /* 滑块圆角 */
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: rgba(0, 0, 0, 0.7);
            /* 悬停时颜色 */
        }
        
        :root {
            --color-primary: #d46f45;
            --color-secondary: #794B30;
        }
        /*主题颜色*/
        :root.theme-alternate {
            --color-primary: #7ead81;
            --color-secondary: #d46f45;
        } 
        /*菜单*/
        /* 添加平滑过渡效果 */
        #mobile-menu {
            transition: all 0.3s ease;
            max-height: 0;
            overflow: scroll;
        }
        
        /*#mobile-menu:not(.hidden) {*/
        /*    max-height: 1000px;*/
        /*}*/
        
        /* 防止菜单按钮点击事件冒泡 */
        #mobile-menu-button {
            cursor: pointer;
        }
        
        /* 动态样式 */
       /*:root {*/
       /*    --color-primary: #d46f45;*/
       /*    --color-secondary: #794B30;*/
       /*} */
       .text-primary {
           color: var(--color-primary);
       }
       .bg-primary {
           background-color: var(--color-primary);
       }
       .border-primary {
           border-color: var(--color-primary);
       }
       .text-secondary {
           color: var(--color-secondary);
       }
       .bg-secondary {
           background-color: var(--color-secondary);
       }
       .border-secondary {
           border-color: var(--color-secondary);
       }
       .hover\:text-primary:hover {
           color: var(--color-primary);
       }
       .hover\:bg-primary:hover {
           background-color: var(--color-primary);
       }
       .focus\:ring-primary:focus {
           --tw-ring-color: var(--color-primary);
       }
       /*取名对比*/
       /* 移动端表格样式 */
      @media (max-width: 767px) {
          #advantage-comparison .bg-white.rounded-xl {
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
          }
          #advantage-comparison .grid.grid-cols-4 {
              min-width: 600px;
          }
          #advantage-comparison .bg-light\/50 {
              position: sticky;
              left: 0;
              z-index: 10;
              background-color: #f9fafb;
              box-shadow: 4px 0 6px -4px rgba(0,0,0,0.1);
          }
          #advantage-comparison .p-4 {
              padding: 0.75rem;
          }
      }
      /*名字故事*/
      .name-highlight {
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
          display: inline-block;
          transform: translateY(0);
          transition: transform 0.3s ease;
      }
      .name-story-card:hover .name-highlight {
          transform: translateY(-5px);
      }
      
      /*名字工具*/
          /* 印章容器样式 */
    .seal-container {
        width: 300px;
        height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
    }

    /* 印章预览区域 */
    .seal-preview {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'SimSun', serif;
        color: #A62F23;
        font-weight: bold;
        overflow: hidden;
    }

    /* 圆形印章样式 */
    .seal-preview.round {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        border: 8px solid #A62F23;
    }

    /* 方形印章样式 */
    .seal-preview.square {
        width: 220px;
        height: 220px;
        border: 8px solid #A62F23;
    }

    /* 花形印章样式 */
    .seal-preview.flower {
        width: 250px;
        height: 250px;
        border-radius: 50% 20% 50% 20%;
        border: 8px solid #A62F23;
        position: relative;
        overflow: hidden;
    }

    /* 花形装饰元素 */
    .seal-preview.flower::before,
    .seal-preview.flower::after {
        content: "";
        position: absolute;
        width: 30px;
        height: 30px;
        background-color: transparent;
        border: 3px solid;
        border-color: inherit;
        border-radius: 50%;
    }

    .seal-preview.flower::before {
        top: 15px;
        right: 15px;
    }

    .seal-preview.flower::after {
        bottom: 15px;
        left: 15px;
    }

    /* 文字自适应 */
    .zhuan-text {
        writing-mode: vertical-rl;
        text-orientation: upright;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        margin: 10px;
        position: relative;
        font-family: 'YiShanBeiZhuanTi', serif;
    }

    /* 不同字数样式 */
    .zhuan-text[data-char="1"] {
        font-size: 150px;
        line-height: 1;
        writing-mode: horizontal-tb;
    }

    .zhuan-text[data-char="2"] {
        font-size: 98px;
        line-height: 1;
    }

    .zhuan-text[data-char="3"] {
        font-size: 66px;
        line-height: 1;
    }

    .zhuan-text[data-char="4"] {
        writing-mode: horizontal-tb;
        flex-direction: row;
        flex-wrap: wrap;
        font-size: 80px;
        justify-content: space-around;
    }

    .zhuan-text[data-char="4"] span {
        width: 50%;
        text-align: center;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .seal-container {
            width: 200px;
            height: 200px;
        }

        .seal-preview.round,
        .seal-preview.flower {
            width: 180px;
            height: 180px;
        }

        .seal-preview.square {
            width: 160px;
            height: 160px;
        }

        .zhuan-text[data-char="1"] {
            font-size: 90px;
        }

        .zhuan-text[data-char="2"] {
            font-size: 60px;
        }

        .zhuan-text[data-char="3"] {
            font-size: 45px;
        }

        .zhuan-text[data-char="4"] {
            font-size: 35px;
        }
    }
     /* 反转样式 */
    .seal-preview.inverted {
        background-color: var(--seal-color);
    }
    
    .seal-preview.inverted .zhuan-text {
        color: white !important;
    }
    
    
    
            /*esay pagin*/
        .navigation{
            position: unset;
        }
        .pagination{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            list-style: none;
            padding: 0px;
        } 
        .navpage{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
        }
        .pagination li{
            padding: 0.6rem;
            margin: 0.15rem;
            background: #a19980;
            color: #000;
            border-radius: 50%;
            height: 2.3rem !important;
            line-height: 1rem;
            width: 2.3rem !important;
            text-align: center;
            box-sizing: border-box;
        }
        .pagination li a{
            color: #fff;
        }
        .pagination .disabled{
            color:#696969;
            cursor: default;
            background: #a9a9a9 !important;
        }
        .pagination .active{
            background: rgb(10 195 140);
            font-weight: bolder;
            color: #fff;
        }
        .pager{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            list-style: none;
            padding: 0px;
        }
        .pager li{
            border-radius: 2.5rem;
            font-size: 1.5rem;
            margin: 0.5rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            background: #06c38a;
            justify-content: center;
            padding: 0.68rem 1.28rem;
            color: #fff;
            max-width: 4rem !important;
            text-align: center;
        }
        .pager .disabled{
            background: #c1c1c17d;
        }
        
        
        
        /*登录注册忘记密码*/
         /* 浮动标签动画效果 */
.floating-label {
    position: relative;
    margin-bottom: 1.5rem;
}

.floating-input {
    font-size: 1rem;
    padding: 1.5rem 1rem 0.5rem;
    display: block;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.floating-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.floating-input:placeholder-shown + label {
    font-size: 1rem;
    top: 1rem;
    color: #9ca3af;
}

.floating-input:focus + label,
.floating-input:not(:placeholder-shown) + label {
    font-size: 0.75rem;
    top: 0.25rem;
    color: #3b82f6;
    background-color: white;
    padding: 0 0.25rem;
}

.floating-label label {
    position: absolute;
    left: 1rem;
    top: 0.25rem;
    font-size: 0.75rem;
    color: #3b82f6;
    pointer-events: none;
    transition: all 0.2s;
    background-color: white;
    padding: 0 0.25rem;
}