/*
 * CSS变量定义 - 便于统一管理和维护主题色彩
 * 使用CSS自定义属性（变量）可以方便地在整个样式表中复用颜色、尺寸等值
 */
:root {
    --primary-color: #4facfe;      /* 主色调 - 用于主要按钮、重要元素 */
    --primary-light: #8bc8ff;      /* 主色调亮色 - 用于悬停状态、次要元素 */
    --secondary-color: #00f2fe;    /* 辅色调 - 用于渐变、装饰性元素 */
    --accent-color: #a78bfa;       /* 强调色 - 用于特殊标记、图标等 */
    --text-color: #2d3748;         /* 主要文字颜色 - 用于标题、正文 */
    --text-light: #718096;         /* 次要文字颜色 - 用于副标题、描述文字 */
    --text-lighter: #a0aec0;       /* 更浅的文字颜色 - 用于占位符、禁用状态 */
    --border-color: #e2e8f0;       /* 边框颜色 - 用于输入框、卡片边框 */
    --border-light: #f1f5f9;       /* 浅色边框 - 用于分割线、细微边框 */
    --bg-color: #f8fafc;           /* 背景颜色 - 页面主背景色 */
    --card-bg: #ffffff;            /* 卡片背景颜色 - 内容区域背景 */
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* 主要阴影效果 - 卡片投影 */
    --shadow-light: 0 5px 15px rgba(0, 0, 0, 0.04); /* 浅色阴影 - 小元素投影 */
    --radius: 16px;                /* 主要圆角大小 - 卡片、大组件圆角 */
    --radius-sm: 12px;             /* 小圆角大小 - 按钮、输入框圆角 */
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 过渡动画效果 - 平滑动画曲线 */
    --transition-fast: all 0.15s ease; /* 快速过渡效果 - 快速交互反馈 */
}

/*
 * 全局重置样式
 * 重置浏览器默认样式，确保跨浏览器一致性
 */
* {
    margin: 0;
    padding: 0;
    /* 盒模型设置为border-box，便于布局计算 */
    /* padding和border包含在元素宽度内，避免布局计算复杂 */
    box-sizing: border-box;
    /* 字体栈设置，优先使用系统字体，确保跨平台显示一致性 */
    font-family: 'PingFang SC', 'SF Pro Display', 'Helvetica Neue', Arial, 'Microsoft YaHei', sans-serif;
    /* 移除移动端点击高亮效果，提升用户体验 */
    -webkit-tap-highlight-color: transparent;
    /* 防止iOS横屏时文字放大，保持字体大小稳定 */
    -webkit-text-size-adjust: 100%;
}

/*
 * 根元素字体大小设置
 * 使用rem单位的基础，便于响应式设计
 */
html {
    font-size: 16px;
}

/*
 * 主体样式
 * 页面整体布局和背景设置
 */
body {
    /* 渐变背景，从左上到右下的浅蓝色渐变，营造现代感 */
    background: linear-gradient(135deg, var(--bg-color) 0%, #e4edf5 100%);
    /* 最小高度为视口高度，确保内容不足时也能占满屏幕 */
    min-height: 100vh;
    /* iOS Safari兼容性，解决100vh在移动端的问题 */
    min-height: -webkit-fill-available;
    /* 使用Flexbox布局实现完美居中 */
    display: flex;
    align-items: center;     /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 16px;           /* 内边距，防止内容贴边 */
    line-height: 1.5;        /* 行高设置，提高可读性 */
    color: var(--text-color); /* 文字颜色使用变量 */
    /* 确保背景颜色一致，防止移动端滚动时出现白色间隙 */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/*
 * 修复iOS Safari 100vh问题
 * 针对WebKit浏览器进行特殊处理
 */
@supports (-webkit-touch-callout: none) {
    body {
        /* 使用-webkit-fill-available替代100vh，解决iOS底部栏问题 */
        min-height: -webkit-fill-available;
        /* 针对iOS设备优化背景显示，使用fixed防止滚动时背景移动 */
        background: linear-gradient(135deg, var(--bg-color) 0%, #e4edf5 100%) fixed;
    }
}

/*
 * Vue应用容器
 * 主应用容器样式
 */
#app {
    width: 100%;             /* 宽度100%适应容器 */
    max-width: 400px;        /* 最大宽度限制，避免在大屏幕上过宽 */
    /* 入场动画，从下方淡入上浮，提升用户体验 */
    animation: fadeInUp 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
 * 登录卡片容器
 * 主要的内容卡片样式
 */
.login-container {
    background: var(--card-bg);      /* 使用卡片背景色 */
    border-radius: var(--radius);    /* 圆角效果 */
    padding: 30px 24px;              /* 内边距 */
    box-shadow: var(--shadow);       /* 阴影效果，营造层次感 */
    position: relative;               /* 相对定位，为伪元素定位做准备 */
    overflow: hidden;                 /* 隐藏溢出内容 */
    /* 背景模糊效果，增强视觉质感（部分浏览器支持） */
    backdrop-filter: blur(10px);
    /* 半透明白色边框，增强卡片立体感 */
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/*
 * 登录卡片顶部装饰条
 * 使用伪元素添加装饰性元素，不增加HTML结构
 */
.login-container::before {
    content: '';            /* 伪元素必须内容 */
    position: absolute;     /* 绝对定位 */
    top: 0;                 /* 顶部对齐 */
    left: 0;                /* 左侧对齐 */
    right: 0;               /* 右侧对齐 */
    height: 4px;            /* 高度4px */
    /* 水平渐变装饰条，从左到右的蓝青渐变 */
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

/*
 * 登录头部区域
 * 包含Logo、标题和副标题
 */
.login-header {
    text-align: center;     /* 文本居中 */
    margin-bottom: 30px;    /* 底部外边距 */
    position: relative;     /* 相对定位 */
}

/*
 * 登录图标容器
 * Logo图标的外容器
 */
.login-icon {
    width: 70px;            /* 固定宽度 */
    height: 70px;           /* 固定高度，形成正方形 */
    /* 渐变背景，45度角渐变 */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 50%;     /* 圆形效果 */
    /* Flexbox布局实现图标居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;    /* 水平居中，底部外边距16px */
    /* 阴影效果，增强立体感 */
    box-shadow: 0 8px 20px rgba(79, 172, 254, 0.3);
}

/*
 * 登录图标样式
 * Vant UI图标的样式调整
 */
.login-icon .van-icon {
    font-size: 32px;        /* 图标大小 */
    color: white;           /* 图标颜色 */
}

/*
 * 登录标题
 * 主标题样式
 */
.login-title {
    font-size: 24px;        /* 字体大小 */
    font-weight: 700;       /* 字体粗细，粗体 */
    /* 渐变文字效果，现代设计风格 */
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;  /* WebKit浏览器文字渐变 */
    background-clip: text;          /* 标准文字渐变 */
    color: transparent;              /* 文字颜色透明，显示背景渐变 */
    margin-bottom: 8px;              /* 底部外边距 */
    letter-spacing: 0.5px;           /* 字母间距，提高可读性 */
}

/*
 * 登录副标题
 * 副标题样式
 */
.login-subtitle {
    color: var(--text-light);   /* 使用浅色文字 */
    font-size: 14px;            /* 较小字体 */
    font-weight: 400;           /* 正常字重 */
}

/*
 * 错误信息容器样式
 * 错误提示消息的外容器
 */
.error-message {
    margin: 0 0 20px 0;         /* 外边距设置 */
    border-radius: var(--radius-sm); /* 小圆角 */
    overflow: hidden;            /* 隐藏溢出，确保圆角生效 */
    /* 错误信息滑入动画，吸引用户注意 */
    animation: slideInDown 0.4s ease-out;
}

/*
 * 错误信息滑入动画
 * 从上方滑入的动画效果
 */
@keyframes slideInDown {
    from {
        opacity: 0;                 /* 开始完全透明 */
        transform: translateY(-10px); /* 向上偏移10px */
    }
    to {
        opacity: 1;                 /* 结束完全不透明 */
        transform: translateY(0);   /* 回到原始位置 */
    }
}

/*
 * Vant通知栏自定义样式
 * 覆盖Vant UI默认样式
 */
.van-notice-bar {
    font-size: 14px;                /* 字体大小 */
    border-radius: var(--radius-sm); /* 圆角 */
}

/*
 * 自定义错误通知栏样式
 * 错误状态的特殊样式
 */
.error-notice {
    background: #fff2f0 !important;     /* 浅红色背景 */
    color: #ff4d4f !important;          /* 红色文字 */
    border: 1px solid #ffccc7;          /* 红色边框 */
    padding: 8px 12px;                  /* 内边距 */
}

/*
 * 错误通知栏图标
 * 错误图标颜色调整
 */
.error-notice .van-notice-bar__left-icon {
    color: #ff4d4f !important;      /* 图标颜色与文字一致 */
}

/*
 * 表单组
 * 表单项分组容器
 */
.form-group {
    margin-bottom: 20px;    /* 底部外边距，分隔表单项 */
    position: relative;     /* 相对定位，为内部元素定位做准备 */
}

/*
 * 表单标签
 * 输入框的标签文字
 */
.form-label {
    display: block;             /* 块级显示 */
    margin-bottom: 8px;         /* 底部外边距 */
    font-weight: 600;           /* 中等粗体 */
    color: var(--text-color);   /* 文字颜色 */
    font-size: 14px;            /* 字体大小 */
}

/*
 * Vant输入框样式覆盖
 * 自定义Vant输入框样式
 */
.van-field {
    border-radius: var(--radius-sm); /* 小圆角 */
    overflow: hidden;                /* 隐藏溢出 */
    margin-bottom: 5px;              /* 底部外边距 */
    border: 1px solid var(--border-color); /* 边框 */
    transition: var(--transition);   /* 过渡动画 */
    background: rgba(255, 255, 255, 0.7); /* 半透明背景 */
}

/*
 * 输入框获得焦点时的样式
 * 焦点状态的视觉反馈
 */
.van-field:focus-within {
    border-color: var(--primary-color);      /* 边框颜色变为主色 */
    /* 焦点光环效果，增强交互反馈 */
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}

/*
 * 输入框内部控件样式
 * 输入框内部输入区域的样式
 */
.van-field__control {
    padding: 14px 16px;         /* 内边距 */
    font-size: 16px;            /* 固定字体大小，防止iOS缩放 */
    min-height: 48px;           /* 最小高度，确保触摸区域足够大 */
}

/*
 * 修复iOS输入框样式
 * 移除iOS默认样式
 */
input, textarea {
    -webkit-appearance: none;   /* 移除默认样式 */
    border-radius: 0;           /* 移除圆角 */
}

/*
 * 输入框图标样式
 * 输入框左右图标的样式
 */
.van-field__left-icon .van-icon,
.van-field__right-icon .van-icon {
    color: var(--text-lighter); /* 使用较浅的图标颜色 */
}

/*
 * 输入框获得焦点时左侧图标颜色变化
 * 焦点状态下的图标反馈
 */
.van-field:focus-within .van-field__left-icon .van-icon {
    color: var(--primary-color); /* 图标颜色变为主色 */
}

/*
 * 登录按钮
 * 主要操作按钮样式
 */
.login-btn {
    width: 100%;                /* 宽度100% */
    height: 50px;               /* 固定高度 */
    border-radius: var(--radius-sm); /* 圆角 */
    font-size: 16px;            /* 字体大小 */
    font-weight: 600;           /* 粗体 */
    margin-top: 16px;           /* 顶部外边距 */
    /* 渐变背景，增强视觉吸引力 */
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border: none;               /* 无边框 */
    /* 阴影效果，增强按钮立体感 */
    box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4);
    transition: var(--transition); /* 过渡动画 */
    color: white;               /* 文字颜色 */
    cursor: pointer;            /* 手型光标 */
    position: relative;         /* 相对定位 */
    overflow: hidden;           /* 隐藏溢出 */
}

/*
 * 登录按钮点击效果
 * 按钮激活状态的微交互
 */
.login-btn:active {
    transform: translateY(1px); /* 按下时轻微下移，模拟按压效果 */
    /* 阴影变小，增强按压感 */
    box-shadow: 0 3px 10px rgba(79, 172, 254, 0.4);
}


/* 微信二维码模态框样式 */

/* 微信二维码模态框图片样式 */
.modal-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 确保模态框层级正确 */
.modal-overlay {
    z-index: 2001; /* 比导航栏高，比加载动画低 */
}

/*
 * 模态框遮罩层（覆盖层）
 * 这是一个全屏的半透明遮罩，用于模态框弹出时遮挡背景内容
 * 提升用户聚焦，防止背景交互
 */
.modal-overlay {
    /* 关键属性：默认隐藏模态框 */
    display: none;                 /* 使用display:none确保初始完全隐藏且不占用布局空间 */

    /* 定位相关：固定定位，覆盖整个视口 */
    position: fixed;               /* 相对于浏览器窗口固定位置，不随滚动移动 */
    top: 0;                        /* 从顶部开始 */
    left: 0;                       /* 从左侧开始 */
    width: 100%;                   /* 覆盖整个视口宽度 */
    height: 100%;                  /* 覆盖整个视口高度 */

    /* 视觉样式：半透明黑色背景 */
    background-color: rgba(0, 0, 0, 0.5); /* RGBA颜色，50%透明度的黑色，营造遮罩效果 */

    /* 层级管理：确保模态框在所有内容之上（除可能存在的加载动画） */
    z-index: 2001;                 /* 高于导航栏(通常1000-1500)，低于加载动画(如需) */

    /* 布局：Flex布局实现完美居中 */
    align-items: center;           /* 垂直居中子元素 */
    justify-content: center;       /* 水平居中子元素 */

    /* 动画效果：透明度变化实现淡入淡出 */
    opacity: 0;                    /* 初始完全透明，配合transition实现渐变效果 */
    transition: opacity 0.3s ease; /* 透明度过渡动画，0.3秒，缓动函数使动画更自然 */
}

/*
 * 激活状态下的模态框遮罩层
 * 当组件中showWechatModal为true时，会添加.active类触发此样式
 */
.modal-overlay.active {
    /* 关键属性：显示模态框 */
    display: flex;                 /* 切换为Flex显示模式，同时触发flex布局居中效果 */

    /* 视觉样式：完全不透明，完全显示 */
    opacity: 1;                    /* 渐变到完全不透明，实现淡入效果 */
}

/*
 * 模态框内容容器
 * 包含二维码图片、标题、描述等实际内容
 */
.modal-content {
    /* 视觉样式：白色背景卡片 */
    background: white;             /* 白色背景，与遮罩形成对比，突出内容 */
    border-radius: var(--radius);  /* 使用CSS变量中的主要圆角值(16px)，保持设计一致性 */
    padding: 20px;                 /* 内边距，使内容不贴边 */

    /* 尺寸控制：响应式宽度限制 */
    max-width: 400px;              /* 最大宽度限制，避免在大屏幕上过宽 */
    width: 90%;                    /* 宽度占视口90%，在小屏幕上自动缩小 */

    /* 定位：相对定位，为关闭按钮绝对定位提供参考 */
    position: relative;            /* 相对定位，内部绝对定位元素参照此容器 */

    /* 动画效果：Y轴位移实现从上方滑入效果 */
    transform: translateY(-20px);  /* 初始位置向上偏移20px，准备滑入动画 */
    transition: transform 0.3s ease; /* 位移过渡动画，0.3秒 */

    /* 视觉增强：阴影效果增加立体感 */
    box-shadow: var(--shadow);     /* 使用CSS变量中的阴影效果，保持设计一致性 */
}

/*
 * 激活状态下模态框内容容器的动画状态
 * 当模态框显示时，内容从上方滑入到正常位置
 */
.modal-overlay.active .modal-content {
    /* 动画效果：滑入到原始位置 */
    transform: translateY(0);      /* 取消Y轴位移，回到正常位置，实现滑入效果 */
}

/* 模态框关闭按钮样式 */
.modal-close {
    position: absolute;             /* 绝对定位 */
    top: 24px;                      /* 距顶部距离 */
    right: 24px;                    /* 距右侧距离 */
    width: 40px;                    /* 宽度 */
    height: 40px;                   /* 高度 */
    border-radius: 12px;            /* 圆角 */
    background: rgba(0, 0, 0, 0.05); /* 半透明背景 */
    display: flex;                  /* 弹性布局 */
    align-items: center;            /* 垂直居中 */
    justify-content: center;        /* 水平居中 */
    cursor: pointer;                /* 手型光标 */
    transition: all 0.3s ease;      /* 过渡动画 */
}

/* 模态框关闭按钮悬停效果 */
.modal-close:hover {
    background: rgba(0, 0, 0, 0.1); /* 背景加深 */
    transform: rotate(90deg);       /* 旋转90度 */
}

/*
 * 登录页脚
 * 底部链接区域
 */
.login-footer {
    text-align: center;             /* 文本居中 */
    margin-top: 24px;               /* 顶部外边距 */
    padding-top: 20px;              /* 顶部内边距 */
    /* 上边框分隔线，视觉分隔内容区域 */
    border-top: 1px solid var(--border-light);
}

/*
 * 注册链接
 * 注册/修改密码链接样式
 */
.register-link {
    color: var(--primary-color);    /* 主色文字 */
    text-decoration: none;          /* 无下划线 */
    font-weight: 600;               /* 粗体 */
    transition: var(--transition);  /* 过渡动画 */
    display: inline-flex;           /* 行内Flex布局 */
    align-items: center;            /* 垂直居中 */
    font-size: 14px;                /* 字体大小 */
    padding: 8px 0;                 /* 内边距 */
}

/*
 * 注册链接激活状态
 * 链接点击时的反馈
 */
.register-link:active {
    color: var(--secondary-color);  /* 变为辅色 */
}

/*
 * 注册链接图标
 * 链接右侧图标的样式
 */
.register-link i {
    margin-left: 6px;               /* 左侧外边距 */
    transition: transform 0.3s ease; /* 变换动画 */
}

/*
 * 忘记密码链接
 * 忘记密码链接样式
 */
.forgot-password {
    display: block;                 /* 块级显示 */
    text-align: right;              /* 右对齐 */
    margin-top: 8px;                /* 顶部外边距 */
    font-size: 14px;                /* 字体大小 */
    color: var(--text-light);       /* 浅色文字 */
    text-decoration: none;          /* 无下划线 */
    transition: var(--transition);  /* 过渡动画 */
    padding: 8px 0;                 /* 内边距 */
}

/*
 * 忘记密码链接激活状态
 * 链接点击反馈
 */
.forgot-password:active {
    color: var(--primary-color);    /* 变为主色 */
}

/*
 * 淡入上浮动画
 * 页面元素入场动画
 */
@keyframes fadeInUp {
    from {
        opacity: 0;                 /* 开始透明 */
        transform: translateY(20px); /* 向下偏移20px */
    }
    to {
        opacity: 1;                 /* 结束不透明 */
        transform: translateY(0);   /* 回到原位 */
    }
}

/*
 * 特性展示区域
 * 功能特性展示的容器
 */
.feature-highlights {
    display: flex;                  /* Flex布局 */
    justify-content: space-between; /* 子元素平均分布 */
    margin-top: 24px;               /* 顶部外边距 */
    padding: 16px;                  /* 内边距 */
    background: rgba(248, 250, 252, 0.7); /* 半透明背景 */
    border-radius: var(--radius-sm); /* 圆角 */
    border: 1px solid rgba(226, 232, 240, 0.5); /* 半透明边框 */
}

/*
 * 单个特性项
 * 每个特性点的容器
 */
.feature {
    text-align: center;     /* 文本居中 */
    flex: 1;                /* 等分宽度，平均分配空间 */
    padding: 0 8px;         /* 左右内边距 */
}

/*
 * 特性图标容器
 * 特性图标的外容器
 */
.feature-icon {
    width: 40px;            /* 固定宽度 */
    height: 40px;           /* 固定高度 */
    /* 渐变背景，使用主色亮色和强调色 */
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-color) 100%);
    border-radius: 50%;     /* 圆形 */
    /* Flex布局居中图标 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;     /* 水平居中，底部外边距 */
    /* 阴影效果 */
    box-shadow: 0 4px 10px rgba(79, 172, 254, 0.2);
}

/*
 * 特性图标
 * 特性图标的样式
 */
.feature-icon .van-icon {
    font-size: 18px;        /* 图标大小 */
    color: white;           /* 图标颜色 */
}

/*
 * 特性文字
 * 特性描述文字
 */
.feature-text {
    font-size: 12px;            /* 较小字体 */
    color: var(--text-light);   /* 浅色文字 */
    font-weight: 500;           /* 中等字重 */
}

/* ========== 响应式设计 ========== */
/* 针对不同屏幕尺寸的样式调整 */

/*
 * 手机端优化 - 480px及以下
 * 小屏幕手机样式调整
 */
@media (max-width: 480px) {
    html {
        font-size: 14px; /* 减小根字体大小，整体缩放 */
    }

    body {
        padding: 12px;               /* 减少内边距 */
        align-items: flex-start;     /* 顶部对齐，节省空间 */
        padding-top: 20px;           /* 顶部内边距 */
        /* 确保手机端背景颜色一致 */
        background: linear-gradient(135deg, var(--bg-color) 0%, #e4edf5 100%) fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .login-container {
        padding: 24px 20px;  /* 减少内边距 */
        border-radius: 12px; /* 稍小圆角 */
    }

    .login-title {
        font-size: 22px;     /* 减小标题字体 */
    }

    /* 错误信息在手机端的调整 */
    .error-message {
        margin: 0 0 16px 0;  /* 减少外边距 */
    }

    .van-notice-bar {
        font-size: 13px;     /* 减小字体 */
    }

    /* 小屏幕下特性展示区域保持一行显示，但缩小内容 */
    .feature-highlights {
        padding: 12px 8px;   /* 减少内边距 */
        gap: 4px;            /* 子元素间距 */
    }

    .feature {
        padding: 0 4px;      /* 减少内边距 */
    }

    .feature-icon {
        width: 32px;         /* 缩小图标容器 */
        height: 32px;
        margin-bottom: 6px;  /* 减少底部外边距 */
    }

    .feature-icon .van-icon {
        font-size: 14px;     /* 缩小图标 */
    }

    .feature-text {
        font-size: 10px;     /* 减小字体 */
    }

    .van-field__control {
        padding: 16px 14px;  /* 调整内边距 */
    }

    .login-btn {
        height: 48px;        /* 稍小按钮高度 */
    }
}

/*
 * 小手机优化 - 360px及以下
 * 超小屏幕手机样式调整
 */
@media (max-width: 360px) {
    html {
        font-size: 13px; /* 进一步减小根字体大小 */
    }

    body {
        /* 确保小手机端背景颜色一致 */
        background: linear-gradient(135deg, var(--bg-color) 0%, #e4edf5 100%) fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .login-container {
        padding: 20px 16px;  /* 进一步减少内边距 */
    }

    .login-icon {
        width: 60px;         /* 缩小Logo容器 */
        height: 60px;
    }

    .login-icon .van-icon {
        font-size: 28px;     /* 缩小Logo图标 */
    }

    .login-title {
        font-size: 20px;     /* 进一步减小标题 */
    }

    /* 错误信息在小手机端的进一步调整 */
    .error-message {
        margin: 0 0 14px 0;  /* 进一步减少外边距 */
    }

    .van-notice-bar {
        font-size: 12px;     /* 进一步减小字体 */
    }

    /* 进一步缩小特性展示区域 */
    .feature-highlights {
        padding: 10px 6px;   /* 减少内边距 */
        gap: 2px;            /* 减少间距 */
    }

    .feature {
        padding: 0 2px;      /* 减少内边距 */
    }

    .feature-icon {
        width: 28px;         /* 进一步缩小图标 */
        height: 28px;
        margin-bottom: 4px;  /* 减少间距 */
    }

    .feature-icon .van-icon {
        font-size: 12px;     /* 进一步缩小图标 */
    }

    .feature-text {
        font-size: 9px;      /* 进一步减小字体 */
    }

    .van-field__control {
        padding: 14px 12px;  /* 调整内边距 */
    }
}

/*
 * 超小屏幕优化（iPhone 5/SE等）- 320px及以下
 * 针对老旧小屏幕设备的优化
 */
@media (max-width: 320px) and (max-height: 570px) {
    body {
        padding: 8px;        /* 最小内边距 */
        padding-top: 10px;
        /* 确保超小屏幕背景颜色一致 */
        background: linear-gradient(135deg, var(--bg-color) 0%, #e4edf5 100%) fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .login-container {
        padding: 16px 12px;  /* 最小内边距 */
    }

    .login-header {
        margin-bottom: 20px; /* 减少间距 */
    }

    .login-icon {
        width: 50px;         /* 最小Logo尺寸 */
        height: 50px;
        margin-bottom: 12px; /* 调整间距 */
    }

    .login-icon .van-icon {
        font-size: 24px;     /* 最小图标尺寸 */
    }

    .login-title {
        font-size: 18px;     /* 最小标题尺寸 */
    }

    .login-subtitle {
        font-size: 12px;     /* 减小副标题 */
    }

    .form-group {
        margin-bottom: 16px; /* 减少表单项间距 */
    }

    /* 错误信息在超小屏幕的调整 */
    .error-message {
        margin: 0 0 12px 0;  /* 最小外边距 */
    }

    .van-notice-bar {
        font-size: 11px;     /* 最小字体 */
        padding: 6px 10px;   /* 调整内边距 */
    }

    /* 超小屏幕下进一步调整特性展示区域 */
    .feature-highlights {
        margin-top: 16px;    /* 减少顶部间距 */
        padding: 8px 4px;    /* 最小内边距 */
        gap: 1px;            /* 最小间距 */
    }

    .feature {
        padding: 0 1px;      /* 最小内边距 */
    }

    .feature-icon {
        width: 24px;         /* 最小图标容器 */
        height: 24px;
        margin-bottom: 3px;  /* 最小间距 */
    }

    .feature-icon .van-icon {
        font-size: 10px;     /* 最小图标 */
    }

    .feature-text {
        font-size: 8px;      /* 最小字体 */
    }

    .van-field__control {
        padding: 12px 10px;  /* 最小内边距 */
        min-height: 44px;    /* 最小高度 */
    }

    .login-btn {
        height: 44px;        /* 最小按钮高度 */
        font-size: 15px;     /* 调整字体 */
    }
}

/*
 * 横屏手机优化
 * 横向屏幕的特殊处理
 */
@media (max-height: 500px) and (orientation: landscape) {
    body {
        padding: 8px;                    /* 减少内边距 */
        align-items: flex-start;         /* 顶部对齐，适应矮胖屏幕 */
        /* 确保横屏模式背景颜色一致 */
        background: linear-gradient(135deg, var(--bg-color) 0%, #e4edf5 100%) fixed;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .login-container {
        padding: 20px 24px;  /* 调整内边距 */
    }

    .login-header {
        margin-bottom: 20px; /* 减少间距 */
    }

    .form-group {
        margin-bottom: 16px; /* 减少表单项间距 */
    }

    /* 横屏模式下错误信息调整 */
    .error-message {
        margin: 0 0 16px 0;  /* 调整外边距 */
    }

    .feature-highlights {
        display: flex;       /* 确保横屏下也保持一行显示 */
        padding: 10px 8px;   /* 调整内边距 */
    }

    .login-footer {
        margin-top: 16px;    /* 减少间距 */
        padding-top: 16px;   /* 减少内边距 */
    }
}

/*
 * 修复iOS输入框内阴影
 * 移除iOS默认内阴影
 */
input, textarea {
    -webkit-appearance: none;   /* 移除默认样式 */
    box-shadow: none;           /* 移除阴影 */
}

/*
 * 修复Android输入框样式
 * 跨浏览器一致性处理
 */
input, textarea, select {
    -webkit-appearance: none;   /* WebKit浏览器 */
    -moz-appearance: none;      /* Firefox */
    appearance: none;           /* 标准属性 */
}

/*
 * 防止长按出现菜单
 * 提升移动端用户体验
 */
.login-container {
    -webkit-touch-callout: none;  /* iOS Safari */
    -webkit-user-select: none;    /* Safari */
    -khtml-user-select: none;     /* Konqueror HTML */
    -moz-user-select: none;       /* Firefox */
    -ms-user-select: none;        /* Internet Explorer/Edge */
    user-select: none;            /* 标准属性 */
}

/*
 * 允许输入框文本选择
 * 确保输入内容可以正常选择
 */
input, textarea {
    -webkit-user-select: text;    /* Safari */
    -khtml-user-select: text;     /* Konqueror HTML */
    -moz-user-select: text;       /* Firefox */
    -ms-user-select: text;        /* Internet Explorer/Edge */
    user-select: text;            /* 标准属性 */
}

/*
 * 暗色模式支持
 * 自动适应系统暗色主题
 */
/*@media (prefers-color-scheme: dark) {
    :root {
        --text-color: #e2e8f0;        !* 浅色文字 *!
        --text-light: #a0aec0;        !* 中等浅色 *!
        --text-lighter: #718096;      !* 深色浅色 *!
        --border-color: #4a5568;      !* 深色边框 *!
        --border-light: #2d3748;      !* 更深边框 *!
        --bg-color: #1a202c;          !* 深色背景 *!
        --card-bg: #2d3748;           !* 卡片深色背景 *!
    }

    .van-field {
        background: rgba(45, 55, 72, 0.7); !* 深色半透明背景 *!
    }

    .feature-highlights {
        background: rgba(26, 32, 44, 0.7); !* 深色半透明 *!
    }

    !* 输入框文本颜色设置为白色，确保深色背景可读性 *!
    .van-field__control {
        color: white;
    }

    !* 输入框placeholder颜色调整，适应深色主题 *!
    .van-field__control::placeholder {
        color: var(--text-light);
    }

    !* 暗色模式下的错误信息样式 *!
    .error-notice {
        background: #2a1a1a !important;   !* 深红色背景 *!
        color: #ff7875 !important;        !* 亮红色文字 *!
        border: 1px solid #5c2c2c;        !* 深红色边框 *!
    }

    .error-notice .van-notice-bar__left-icon {
        color: #ff7875 !important;        !* 亮红色图标 *!
    }

    !* 暗色模式下的背景 *!
    body {
        background: linear-gradient(135deg, var(--bg-color) 0%, #2d3748 100%) fixed;
    }

    !* 响应式暗色模式背景保持一致 *!
    @media (max-width: 480px) {
        body {
            background: linear-gradient(135deg, var(--bg-color) 0%, #2d3748 100%) fixed;
        }
    }

    @media (max-width: 360px) {
        body {
            background: linear-gradient(135deg, var(--bg-color) 0%, #2d3748 100%) fixed;
        }
    }

    @media (max-width: 320px) and (max-height: 570px) {
        body {
            background: linear-gradient(135deg, var(--bg-color) 0%, #2d3748 100%) fixed;
        }
    }

    @media (max-height: 500px) and (orientation: landscape) {
        body {
            background: linear-gradient(135deg, var(--bg-color) 0%, #2d3748 100%) fixed;
        }
    }
}*/

/*
 * 加载状态样式
 * 全屏加载覆盖层
 */
.loading-overlay {
    position: fixed;            /* 固定定位 */
    top: 0;                     /* 顶部对齐 */
    left: 0;                    /* 左侧对齐 */
    width: 100%;                /* 全宽 */
    height: 100%;               /* 全高 */
    background: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    display: flex;              /* Flex布局 */
    align-items: center;        /* 垂直居中 */
    justify-content: center;    /* 水平居中 */
    z-index: 9999;              /* 最高层级 */
    backdrop-filter: blur(5px); /* 背景模糊效果 */
}

/*
 * 无障碍访问支持
 * 高对比度模式支持
 */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0066cc;   /* 高对比度蓝色 */
        --secondary-color: #0099ff; /* 高对比度亮蓝色 */
        --border-color: #000000;    /* 纯黑边框 */
        --text-color: #000000;      /* 纯黑文字 */
    }

    .login-container {
        border: 2px solid var(--border-color); /* 粗边框 */
    }
}

/*
 * 减少动画模式支持
 * 为对动画敏感的用户提供选择
 */
@media (prefers-reduced-motion: reduce) {
    * {
        /* 极短动画时间，几乎无动画 */
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}