/* 全局样式 */
        * {
            outline: none; /* 移除所有元素的轮廓 */
            -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
        },
        *:after,
        *:before {
          box-sizing: border-box;
        }

        body {
          font-family: "Inter", sans-serif;
          color: #303030;
          background-color: #f5f5fb;

        }

        .bottom-container {
          width: 10rem;
          margin: 0 auto;
          background-color: #fff;
          height: 1.555rem;    
          position: fixed;
          left: 0;
          bottom: 0;
          z-index: 4;
          right: 0;
        }


        .menu {
          display: flex;
          position: relative;
          height: 1.555rem;    
          flex-grow: 1;
          border-radius: 0px;
          overflow: hidden;
          background-color: #ea4c89;
          box-shadow: 0 0 1px 0 rgba(52, 46, 173, 0.25), 0 15px 30px 0 rgba(52, 46, 173, 0.1);
        }

        .menu-item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          flex-grow: 1;
          text-decoration: none;
        }

        .menu-item:focus, .menu-item:hover {
          outline: none;
        }
        .menu-item:focus .material-icons, .menu-item:hover .material-icons {
          font-family: "Material Icons";
          color: blanchedalmond;
        }

        .menu-item:focus .menu-item-label, .menu-item:hover .menu-item-label {
          color: blanchedalmond;
        }

        .material-icons {
          font-family: "Material Icons Outlined";
          display: block;
          margin-bottom: 4px;
          font-size: 26px;
          color: #fff;
          transition: 0.25s ease;
        }

        .menu-item-label {
          display: block;
          font-size: 13px;
          color: #fff;
          transition: 0.25s ease;
        }
        
        
        /* 当前页面高亮状态 */
        .menu-item.active .material-icons,
        .menu-item.active .menu-item-label {
            color: blanchedalmond;
        }
        
        /* 禁用点击 */
        .menu-item.active {
            pointer-events: none; /* 禁止点击 */
        }

        /* 悬停效果 */
        .menu-item:hover .material-icons,
        .menu-item:hover .menu-item-label {
            color: blanchedalmond;
        }
        
        /**********************************************/
         
        /** TODO 从此处开始为搜索框样式**/ 
        .header-container {
            position: absolute;
            top: 10px;
            left: 70px;
            display: flex;
            align-items: center;
        }

        .search-container {
          width: 230px;
          height: 40px; /* 搜索框的总高度 */
        }

        .search-container::before {
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 24px;
          background-color: transparent;
          z-index: 1;
          cursor: pointer;
        }

        .search-button {
          display: flex;
          align-items: center;
          background-color: #ffffff;
          border: 1px solid #e0e0e0;
          border-radius: 24px;
          padding: 8px 12px;
          width: 100%; /* 让按钮占满容器 */
          height: 100%;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          cursor: pointer;
          outline: none;
          text-align: center;
          user-select: none;
          position: relative;
          z-index: 2; /* 让按钮位于伪元素之上 */
        }

        .search-button .material-icons {
          color: #6e6e6e;
          font-size: 20px;
          margin: 2px;
        }

        .search-button span {
          color: #6e6e6e;
          font-size: 15px;
        }

        .history-button {
            margin-left: 16px; /* 调整按钮之间的间距 */
        }

        .history-button .material-icons {
            font-size: 26px;
            color: #aeabde;
        }

        .history-button .menu-item-label {
            color: #c2c0e6;
            font-size: 13px;
        }
        /**********************************************/    
        
        
        /* 分类导航栏样式 */
        .category-nav {
            display: flex;
            overflow-x: auto; /* 启用水平滚动 */
            white-space: nowrap;
            padding: 10px 0;
            background-color: #fff;
            margin: 0;
            width: 100%;
            box-sizing: border-box;
            height: 1rem;
        }
        .category-nav::-webkit-scrollbar {
            display: none; /* 隐藏滚动条 */
        }
        .category-item {
            display: inline-block;
            padding: 5px 20px;
            font-size: 12px;
            color: #6e6e6e;
            cursor: pointer;
            transition: font-size 0.3s, color 0.3s;
        }
        .category-item.selected {
            font-size: 14px;
            color: #ea4c89;
            font-weight: bold;
        }
               

       /* 去掉按钮点击时的蓝色高亮效果 */
        button:focus, 
        button:active, 
        a:focus, 
        a:active {
            outline: none; /* 移除轮廓 */
            -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
        }
        
        /* 如果有input元素 */
        input:focus, 
        textarea:focus, 
        select:focus {
            outline: none; /* 移除轮廓 */
            -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
        }

        /* 自定义按钮样式 */
        .button {
            padding: 12px 24px;
            font-size: 16px;
            color: #ffffff;
            background-color: #007bff;
            border: 2px solid transparent;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
            outline: none; /* 确保没有轮廓 */
        }
        
        .button:active {
            background-color: #003d7a;
            transform: scale(0.98); /* 点击缩小效果 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
        }
        
        /***此处用来自定义轮播图样式****/
        .carousel-container {
            position: relative;
            overflow: hidden;
            width: 98%;
            max-width: 800px; /* 可调整 */
            margin: auto;
            border-radius: 15px;
            cursor: grab; /* 指针样式设置为抓取手型 */
        }

        .carousel-wrapper {
            display: flex;
            overflow: hidden;
            width: 100%;
        }
        
        .carousel-slide {
            display: flex;
            flex-direction: row;
            transition: transform 0.5s ease-in-out;
            will-change: transform;
            width: 100%; /* 确保宽度是100% */
        }
        
        .carousel-item {
            min-width: 100%; /* 确保每项轮播图占据100%的宽度 */
            position: relative;
            cursor: pointer; /* 鼠标拖动 */
            margin-top: 5px;
            /* 禁用拖动默认行为 */
            user-select: none;
            -webkit-user-drag: none; /* 对于 WebKit 内核的浏览器 */
        }
        
        .carousel-item img {
            width: 100%;
            border-radius: 15px;
        }
        
        .carousel-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            border-radius: 0 0 15px 15px;
        }
        
        .carousel-dots {
            text-align: center;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .carousel-dot {
            display: inline-block;
            width: 5px;
            height: 5px;
            margin: 0 5px;
            background-color: gray;
            border-radius: 50%;
            cursor: pointer;
        }
        
        .carousel-dot.active {
            background-color: white;
        }


        /* 自定义内容展示容器样式 */
        .content-container {
            background-color: #fff;
            padding: 10px;
            max-width: 800px;
            flex-wrap: nowrap; /* 不换行 */
            overflow-x: auto; /* 允许水平滚动 */
            overflow-y: hidden; /* 隐藏垂直滚动条 */
            padding: 1px; /* 内边距 */
            margin-bottom: 6px; /* 容器底部外边距 */
            margin-top: 6px;
        }
        
        .content-header {
            font-size: 18px; /* 调节此处可调整展示容器标题文字的大小 */
            margin-top: 10px;
            margin-left: 10px;
            color: #ea4c89;
            font-weight: bold; /* 用来处理文字加粗 */
            position: relative;
        }
        
        .content-header a {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: gray;
            font-size: 14px;
            text-decoration: none;
        }

         
        .content-wrapper {
            overflow-x: auto; 
            -webkit-overflow-scrolling: touch;
        }
        
        .content-slide {
            display: flex;
        }
        
        .content-item {
            flex: 0 0 34%; /* 调节此处可调整一行展示多少个内容  29% ——每行展示3个  43% ——每行展示2个*/
            scroll-snap-align: start;
            width: calc(50% - 20px);
            margin: 0 10px;
            position: relative;
        }
        
        /* 调节此处可调整图片显示效果*/
        .content-item img {
            width: 100%;
            margin-top: 8px;
            object-fit: cover;
            border-radius: 10px;
            display: block;
        }
        
        .content-caption {
            margin-top: 6px;
            color: #333;
            font-size: 12px;
            ont-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            position: absolute;
            box-sizing: border-box;
            padding: 5px;
            bottom: 0;
            left: 0;
            background: rgba(255, 255, 255, 0.7);
        }
        .load-more {
            flex: 0 0 15%;
            height: 122px; /* 按钮的高度 */
            box-sizing: border-box;
            padding: 5px; /* 内边距 */
            display: flex;
            align-items: center; /* 垂直方向居中 */
            justify-content: center; /* 水平方向居中 */
            background-color: #ccc;
            scroll-snap-align: start;
            color: white;
            writing-mode: vertical-lr; /* 文字垂直显示 */
            text-align: center;
            border-radius: 10px;
            margin-top:3px;
        }
        .content-wrapper::-webkit-scrollbar {
            display: none; /* 隐藏滚动条 */
        }


        /* 加载动画的样式 */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* 确保加载动画位于最上层 */
            display: none; /* 默认隐藏 */
        }
        
        .spinner {
            border: 8px solid #f3f3f3; /* Light grey */
            border-top: 8px solid #3498db; /* Blue */
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /***个人中心页面图标***/
        .icon-container {
            height: 2.3rem;
            overflow: hidden;
            display: flex;
            justify-content: space-around;
            width: 380px;
        }
        
        .icon-wrapper {
            position: relative;
            width: 60px;
            height: 60px;
        }
        
        .icon {
            width: 100%;
            height: 100%;
            background-color: lightgray; /* 备用背景色 */
            background-size: cover;
            background-position: center;
            border-radius: 50%; /* 圆形图标 */
        }
        
        .icon2 {
            right:50%;
            width: 80%;
            height: 100%;
            background-color: lightgray; /* 备用背景色 */
            background-position: center;
        
            background-size: cover;
        }
        
        .lock-overlay {
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.6); /* 浅色半透明遮罩 */
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%; /* 保持圆形 */
        }
        
        .lock-overlay::before {
            width: 16px;
            height: 24px;
            border-radius: 2px;
            background-color: rgba(200, 200, 200, 0.8); /* 浅灰色锁主体 */
            position: relative;
        }
        
        .lock-overlay::after {
            width: 14px;
            height: 8px;
            border-radius: 50%;
            border: 3px solid rgba(200, 200, 200, 0.8); /* 浅灰色锁边框 */
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(255, 255, 255, 0.8); /* 锁上半部分颜色 */
        }

        /**漫画页样式**/
        .cover-box > .bg {
            width: 100%;
            overflow: hidden;
            position: relative;
            height: 350px;
            background-color: white;
            object-fit: cover;
            
        }
        .cover-box > .bg img {
            width: 100%;
            height: 100%;
            
        }
        
        /**支付弹窗样式**/
        #paymentModal {
            position: absolute;
            top: 100px;
            left: 0;
            width: 100%;
            /* height: 100%; */
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #paymentModal .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            max-width: 300px;
            text-align: center;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }
        
        #paymentModal h3 {
            color: #ea4c89;
            margin-bottom: 15px;
        }
        
        #paymentModal button {
            background-color: #ea4c89;
            color: white;
            padding: 20px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }