::-webkit-scrollbar {
    display: none;
}

/* 全局样式 */
#app, body, html {
    margin: auto; /* 内容居中 */
    padding: 0; /* 内边距为0 */
    max-width: 650px; /* 最大宽度 */
    height: 100%; /* 高度占满屏幕 */
    /*background-color: #e5e7eb; !* 背景颜色 *!*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; /* 设置字体家族 */
    /* 设置文字大小调整为100%，确保文字大小在不同设备上的一致性 */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* 备案号样式 */
.custom-title {
    font-family: 'Arial', sans-serif; /* 字体 */
    font-size: 14px; /* 字体大小 */
    font-weight: normal; /* 字体粗细 */
    color: #342c2c; /* 文字颜色 */
    letter-spacing: 0.5px; /* 字符间距 */
    line-height: 1.5; /* 行高 */
    text-align: center; /* 水平居中 */
    bottom: 50px; /* 距离底部距离 */
    width: 100%; /* 宽度占满 */
    position: fixed; /* 固定定位 */
    left: 50%; /* 左边缘定位在视口的50%位置 */
    transform: translateX(-50%); /* 向左移动自身宽度的50%，实现水平居中 */
    z-index: 1000; /* 确保按钮在其他内容之上 */
}

h1, h2, h3, h4, h5, h6 {
    margin: 0
}

.avator {
    position: relative;
    font-size: 20px;
    line-height: 5rem;
    text-align: center;
    border-radius: 1rem;
}

p {
    margin: 0;
}

.header {
    margin-bottom: 10px;
}

.query-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.query-title h1 {
    margin: 10px 0;
    font-size: 50px;
    font-weight: 300;
    line-height: 1.2;
}

.concat {
    display: flex;
    flex: 1;
    justify-content: center;
    margin-top: 100px;
}

.concat button {
    width: 80%; /* 稍微增大了按钮的尺寸 */
    height: 50px; /* 稍微增大了按钮的尺寸 */
    background-color: #44aaad; /* 更明亮的紫色 */
    color: #fefefe;
    border: none;
    border-radius: 10px; /* 增加了按钮的圆角 */
    padding: 10px 20px; /* 添加了一些内边距，使按钮的文字更易于阅读 */
}

.query-content {
    margin-bottom: 20px; /* 修改这里的值来调整间距 */
}

.bottom {
    left: unset;
    margin: auto;
    max-width: 750px;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 10px;
}

.bottom_tips {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px;
    font-size: 14.5px;
    color: #333333;
    text-align: justify;
    font-family: Arial, sans-serif; /* 使用Arial字体，如果不可用，则回退到sans-serif字体 */
    font-weight: 400; /* 设置字体粗细 */
    line-height: 1.5; /* 设置行高 */
}

.result .information {
    margin-bottom: 10px;
    text-align: center;
}

.result .information .avator {
    overflow: hidden;
    vertical-align: top;
    margin: 8px auto;
    width: 120px;
    height: 120px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.result .info_list {
    padding: 0 20px 0 30px;
}

.video_result {
    margin-top: 30px;
    font-size: 14px;
    text-align: center;
}

.video_result .link {
    display: inline-block;
    color: #7a7374;
    word-break: break-word;
}

.video_result .link:hover {
    text-decoration: underline;
}

.video_result .video {
    overflow: hidden;
    margin: 20px;
    border-radius: 20px;
}

.feedback .feedback-content {
    overflow-y: auto;
    height: 300px;
}

.feedback .feedback-content::-webkit-scrollbar {
    display: block !important;
}

.feedback .feedback-content::-webkit-scrollbar {
    width: 4px;
    background: #ebeef5;
}

.feedback .feedback-content::-webkit-scrollbar-thumb {
    height: 120px;
    background-color: #ccc;
    border-radius: 20px;
}

/*个人心中动态设置水平线*/
.custom-cell {
    border-bottom: 5px solid #eee;
}

.custom-cell:last-child {
    border-bottom: none;
}

/* 设置文本左对齐 */
.align-left {
    text-align: left;
}

.content {
    padding: 16px 16px 160px;
    font-family: Arial, sans-serif; /* 使用更易读的字体 */
    line-height: 1.3; /* 增加行间距以提高可读性 */
    color: #333; /* 深灰色文字以提高对比度 */
}

.content-main {
    padding: 16px 16px 1200px;
    font-family: Arial, sans-serif; /* 使用更易读的字体 */
    line-height: 1.3; /* 增加行间距以提高可读性 */
    color: #333; /* 深灰色文字以提高对比度 */
}

/*通知栏垂直滚动*/
.notice-swipe {
    height: 20px;
    line-height: 20px;
}

/*网页底部字体样式*/
.copyright {
    text-align: center; /* 文本居中 */
    font-size: 14px; /* 字体大小 */
    color: #666; /* 字体颜色 */
    font-family: 'Arial', sans-serif; /* 字体族 */
    line-height: 1.6; /* 行高 */
    margin-top: 0; /* 上边距 */
    margin-bottom: 10px; /* 下边距 */
    text-decoration: none; /* 移除链接下划线 */
}

.copyright a:hover {
    color: #333; /* 鼠标悬停时的字体颜色 */
    text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

/*模块字体样式*/
.custom-title-style {
    /* 在这里设置你想要的字体样式 */
    /*font-size: 18px;*/
    font-weight: bold;
    color: rgba(88, 88, 239, 0.98);
    /* 其他样式... */
}

/*通用转链 - 使用 title 插槽来自定义标题*/
.cell-custom-title {
    margin-right: 4px;
    vertical-align: middle;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
}

/*结算中心 - 单选按钮的效果*/
.is-active {
    background-color: #409eff;
    color: white;
}

/*外卖活动 - 页面样式*/

/* 卡片容器基础样式 */
.wm-promotion-card {
    background: #fff; /* 白色背景 */
    border-radius: 12px; /* 大圆角设计 */
    margin: 8px; /* 卡片外边距 */
    overflow: hidden; /* 隐藏溢出内容（保证圆角效果） */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); /* 柔和阴影提升层次感 */
    position: relative; /* 为子元素绝对定位提供基准 */
}

/* 图片容器样式 */
.wm-image-container {
    height: 140px; /* 固定图片高度 */
    width: 100%; /* 宽度撑满容器 */
}

/* 左上角促销标签样式 */
.wm-corner-tag {
    position: absolute; /* 绝对定位 */
    top: 8px; /* 距顶部间距 */
    left: 0; /* 贴左显示 */
    background: linear-gradient(90deg, #ff5f32, #ff1d13); /* 品牌渐变色 */
    color: white; /* 文字颜色 */
    padding: 4px 12px; /* 内边距 */
    border-radius: 0 12px 12px 0; /* 右侧圆角造型 */
    font-size: 12px; /* 标签字号 */
    font-weight: 500; /* 中等字重 */
}

/* 内容区域容器 */
.wm-content-wrapper {
    padding: 12px; /* 内边距 */
    position: relative; /* 为按钮定位提供基准 */
}

/* 标题行布局 */
.wm-title-row {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    margin-bottom: 8px; /* 底部间距 */
}

/* 主标题样式 */
.wm-title {
    font-size: 16px; /* 标题字号 */
    font-weight: 600; /* 加粗字重 */
    color: #1a1a1a; /* 深黑色文字 */
    margin-right: 8px; /* 右侧间距 */
}

/* 文字信息组容器 */
.wm-text-group {
    margin-right: 100px; /* 右侧留白（为按钮预留空间） */
}

/* 活动描述文本样式 */
.wm-introduce {
    font-size: 12px; /* 描述文字字号 */
    line-height: 1.5; /* 1.5倍行高 */
    margin-bottom: 2px; /* 底部微间距 */
}

/* 高亮信息样式（参照图片中"预估收入比率"样式） */
.wm-highlight {
    background: #fbe9e9; /* 浅红色背景 */
    color: #f53434; /* 深红色文字 */
    font-size: 11px; /* 小字号 */
    font-weight: bold; /* 加粗 */
    padding: 1px 2px; /* 紧凑内边距 */
    border-radius: 4px; /* 小圆角 */
    margin: 2px 0; /* 垂直微间距 */
    display: inline-block; /* 行内块显示 */
    border: 0.2px solid #f0f0f0; /* 极细浅灰边框 */
}

/* 有效期文本样式 */
.wm-validity {
    font-size: 11px; /* 小字号 */
    color: #999; /* 浅灰色文字 */
}

/* 操作按钮样式 */
.wm-action-btn {
    position: absolute; /* 绝对定位 */
    right: 12px; /* 右侧间距 */
    bottom: 12px; /* 底部间距 */
    width: 88px; /* 固定宽度 */
    height: 32px; /* 固定高度 */
    font-size: 13px; /* 按钮文字大小 */
}


/**
 * 基础卡片容器样式
 * 特性：圆角、阴影、内边距、背景色统一管理
 * 适用场景：订单卡片、信息展示卡片、数据面板等需要卡片式布局的模块
 */
.base-card {
    /* 基础定位与布局 */
    position: relative; /* 为子元素的绝对定位提供基准（如状态标签） */
    overflow: hidden; /* 隐藏溢出内容，确保圆角边缘整洁 */

    /* 盒模型属性 */
    padding: 12px; /* 内边距：内容与边框保持12px呼吸空间 */
    margin: 8px 8px 16px 8px; /* 复合写法：上 右 下 左 */

    /* 视觉样式 */
    background: white; /* 纯白背景提升内容可读性 */
    border-radius: 8px; /* 8px圆角营造现代卡片风格 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影增加层次感 */

    /* 扩展说明：
       1. 若需要响应式调整，可添加媒体查询修改 padding/margin
       2. box-shadow 参数分解：
          - 水平偏移: 0 (无横向偏移)
          - 垂直偏移: 2px (向下轻微投影)
          - 模糊半径: 8px (柔和的阴影边缘)
          - 颜色: rgba(0,0,0,0.1) (10%透明度的黑色)
    */
}

/* 扩展尺寸变体 */
.base-card--large {
    padding: 12px; /* 增大内边距 */
    margin-bottom: 12px; /* 增大间距 */
}

/* 扩展颜色变体 */
.base-card--dark {
    background: #333; /* 深色背景 */
    color: white; /* 文字反色 */
}